body{font-family:"Barlow",system-ui,sans-serif;font-size:18px}
.grande{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.005em;margin:0;text-wrap:balance}
.tajo{position:relative;display:inline-block;padding:0 .14em;z-index:0}
.tajo::before{content:"";position:absolute;inset:.06em -.02em .02em;background:var(--amarillo);transform:skewX(-14deg);z-index:-1}

/* 1 · Cabecera: titular enorme a la izquierda, el grito a la derecha */
.portada{position:relative;overflow:hidden;padding:clamp(28px,5vw,72px) 0 0}
.portada .envoltura{position:relative;z-index:1}
.portada .envoltura{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:0 24px;max-width:1320px}
.portada h1{font-size:clamp(64px,10vw,150px);position:relative;z-index:2}
.portada .sub{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(24px,2.8vw,40px);line-height:1;margin:22px 0 0;color:var(--tinta)}
.portada .sub em{font-style:normal;color:var(--rojo)}
.portada .entradilla{max-width:34em;color:var(--tinta);margin:20px 0 0}
.portada .acciones{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 clamp(40px,7vw,96px)}
.portada .foto{position:relative;align-self:end;margin-left:-14%}
.portada .foto::before{content:"";position:absolute;left:8%;right:-30%;top:18%;bottom:0;background:var(--rojo);clip-path:polygon(38% 0,100% 0,62% 100%,0 100%);z-index:0}
.portada .foto img{position:relative;z-index:1;width:100%;mask-image:linear-gradient(#000 82%,transparent)}
.js .portada .foto img{animation:entra 1.4s .15s var(--suave) both}
.js .portada .foto::before{animation:raya 1s var(--suave) both}
@keyframes entra{from{transform:translateX(40px);opacity:0;filter:blur(8px)}}
@keyframes raya{from{clip-path:polygon(38% 0,38% 0,0 100%,0 100%)}}
@media (max-width:860px){
  .portada .envoltura{grid-template-columns:1fr}
  .portada .foto{margin:0 auto;width:min(420px,86vw);order:-1}
  .portada .acciones{margin-bottom:24px}
}


/* Dientes de los hombros de la camiseta, como separador */
/* El brazo del aspa del escudo de ESCOFUTSAL (sacado del escudo, sin redibujar) hecho franja continua, como en los hombros de la camiseta */
.dientes{height:36px;background:var(--tinta) url(comun/logos/tira_escudo.png) repeat-x 0 50%/auto 82%}

/* 2 · Capítulos: el número enorme detrás del recorte, que solo tapa lo que tapa el niño */
.capitulo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:0 clamp(24px,4vw,64px);max-width:1320px;margin:clamp(72px,9vw,140px) auto 0;padding:0 var(--margen)}
.al-reves .escena{order:2}
.al-reves .cifra{justify-self:end}
.al-reves .recorte{justify-self:start}
.escena{position:relative;display:grid;min-height:min(86vh,780px);isolation:isolate}
.cifra{grid-area:1/1;align-self:start;justify-self:start;font-family:"Anton",sans-serif;color:var(--amarillo);font-size:clamp(300px,40vw,620px);line-height:.8;transform:translateY(calc(var(--desliza,0) * 1px));user-select:none}
.recorte{grid-area:1/1;align-self:end;justify-self:end;position:relative;z-index:1;width:min(96%,700px);mask-image:linear-gradient(#000 82%,transparent)}
.cifra.delante{z-index:2;clip-path:inset(calc(100% - var(--frente,0%)) -10% -10% -10%);pointer-events:none}
.escena[data-desde="arriba"] .cifra.delante{clip-path:inset(-10% -10% calc(100% - var(--frente,0%)) -10%)}
.escena[data-desde="derecha"] .cifra.delante{clip-path:inset(-10% -10% -10% calc(100% - var(--frente,0%)))}
.escena.cruza .recorte{width:min(80%,560px)}
/* Número a medio pintar: perfil que se va llenando de amarillo desde abajo, con el borde de la pintura en degradado */
.cifra.pinta{padding:.06em 0;background:linear-gradient(to top,var(--amarillo) 0,var(--amarillo) var(--relleno,0%),rgba(248,218,50,0) calc(var(--relleno,0%) + 30%));-webkit-background-clip:text;background-clip:text}
.al-reves .escena.cruza .cifra{justify-self:start}
.al-reves .escena.cruza .recorte{justify-self:end}
/* Primero sale la foto; medio segundo después, el número */
.js .escena .cifra{opacity:0;translate:0 70px;transition:opacity .9s var(--suave) .5s,translate 1.2s var(--suave) .5s}
.js .escena.visto .cifra{opacity:1;translate:0 0}
.cifra.perfil{color:transparent;-webkit-text-stroke:clamp(3px,.5vw,7px) var(--amarillo)}
/* El toque rojo: una raya en diagonal, como la de la cabecera y la de la camiseta */
.marca-capitulo{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.marca-capitulo .raya{width:14px;height:34px;background:var(--rojo);clip-path:polygon(55% 0,100% 0,45% 100%,0 100%)}
.marca-capitulo .pie-cifra{margin-bottom:0}
.pie-cifra{display:inline-block;font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(18px,1.5vw,22px);background:var(--tinta);color:var(--amarillo);padding:4px 14px 2px;transform:skewX(-12deg);margin-bottom:16px}
.lado .grande{font-size:clamp(44px,5.2vw,84px)}
.lado p{max-width:32em;color:var(--tinta);margin:18px 0 0}
.lado p strong{color:var(--tinta)}
@media (max-width:860px){
  .capitulo{grid-template-columns:1fr}
  .al-reves .escena{order:0}
  .escena{min-height:0;margin-bottom:16px}
  .cifra{font-size:84vw;transform:none}
  .recorte{width:74%;margin-top:30vw}
}

/* 3 · Tira horizontal: la pantalla se queda fija y las fotos pasan */
.tira{height:320vh;position:relative}
.tira-fija{position:sticky;top:var(--cabecera);height:calc(100vh - var(--cabecera));overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.tira h2{font-size:clamp(44px,6vw,88px);padding:0 var(--margen);max-width:1320px;margin:0 auto 28px;width:100%}
.tira-pista{display:flex;gap:clamp(16px,2vw,28px);padding:0 var(--margen);will-change:transform}
.tira figure{flex:none;width:min(62vw,820px);margin:0}
.tira figure img{width:100%;aspect-ratio:3/2;object-fit:cover;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%)}
.tira figcaption{margin-top:12px;font-weight:600}
.tira figcaption span{display:block;font-weight:400;color:var(--gris)}
@media (max-width:760px){.tira{height:auto}.tira-fija{position:static;height:auto;padding:72px 0}.tira-pista{overflow-x:auto;scroll-snap-type:x mandatory}.tira figure{width:84vw;scroll-snap-align:center}}

/* 4 · Dos puertas partidas en diagonal */
.puertas{display:grid;grid-template-columns:1fr 1fr;min-height:640px;margin-top:clamp(64px,8vw,120px)}
.puerta{position:relative;padding:clamp(40px,5vw,72px) var(--margen) 0;display:flex;flex-direction:column;text-decoration:none;overflow:hidden}
.puerta .grande{font-size:clamp(44px,5vw,76px)}
.puerta p{max-width:28em;margin:16px 0 24px}
.puerta img{margin-top:auto;width:100%;transition:transform 1.2s var(--suave)}
.puerta:hover img{transform:translateY(-8px)}
.puerta.negra{background:var(--banda);color:var(--tinta);clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);margin-left:-6%;padding-left:calc(var(--margen) + 6%)}
.puerta.negra p{color:var(--tinta)}
.puerta.negra img{mix-blend-mode:multiply}
.flecha{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.flecha::after{content:"";width:28px;height:2px;background:currentColor;transition:width .3s var(--suave)}
.puerta:hover .flecha::after{width:44px}
@media (max-width:860px){.puertas{grid-template-columns:1fr}.puerta.negra{clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%);margin:0;padding-top:calc(4vw + 48px);padding-left:var(--margen)}}

/* 5 · Esta semana */
.semana{padding:clamp(80px,10vw,150px) 0 0}
.semana .envoltura{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,80px)}
.semana .grande{font-size:clamp(48px,6vw,92px)}
@media (max-width:860px){.semana .envoltura{grid-template-columns:1fr}}

/* 7 · Seguimos enfadados con */
.enfados{padding:clamp(80px,10vw,150px) 0 0}
.enfados .grande.titulo{font-size:clamp(44px,6vw,92px)}
.enfados ul{list-style:none;margin:36px 0 0;padding:0}
.enfados li{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:center;padding:20px 0;border-top:2px solid var(--tinta);font-size:clamp(20px,2.2vw,28px);font-weight:600;line-height:1.35}
.enfados li::before{content:"";width:14px;height:30px;background:var(--rojo);clip-path:polygon(55% 0,100% 0,45% 100%,0 100%)}
.enfados .firma{font-family:"Anton",sans-serif;font-size:clamp(28px,3vw,40px);margin-top:28px}

/* 8 · Sierra */
.sierra{position:relative;margin-top:clamp(80px,10vw,150px);text-align:center}
.sierra .envoltura{position:relative;z-index:1}
.sierra .grande{font-size:clamp(44px,6vw,92px)}
.sierra p{max-width:36em;margin:16px auto 0;color:var(--tinta)}
.sierra img{width:100%;margin-top:24px}

/* Cierre: invitación a escribir, al final de cada página */
.cierre{margin-top:clamp(80px,10vw,150px);position:relative}
.cierre .envoltura{border-top:2px solid var(--tinta);padding-top:clamp(40px,5vw,64px)}
.cierre .grande{font-size:clamp(40px,5.4vw,84px);max-width:16ch}
.cierre-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:32px}
.cierre-acciones .boton{min-height:56px;font-size:17px}

/* Familias */
.portada h1.titular-largo{font-size:clamp(46px,5.6vw,88px)}
.portada .sub em{color:var(--rojo)}
.escuelas{margin-top:clamp(72px,9vw,130px)}
.escuelas > .envoltura .grande{font-size:clamp(48px,6vw,92px)}
.escuelas .puertas{margin-top:28px;min-height:0}
.puerta.escuela{padding-bottom:clamp(40px,5vw,72px)}
.puerta.escuela .escudo{width:clamp(110px,11vw,150px);height:auto;margin-bottom:24px;transition:transform .8s var(--suave)}
.puerta.escuela:hover .escudo{transform:rotate(-4deg) scale(1.05)}
.puerta.escuela h3.grande{font-size:clamp(36px,3.6vw,56px)}
.enfados li a.enlace{display:inline;font-size:.85em}
.ocho-familias{margin-top:clamp(80px,10vw,150px)}
.ocho-familias .grande{font-size:clamp(44px,5.4vw,84px);max-width:14ch}
.ocho-familias p{max-width:38em;color:var(--tinta);margin:20px 0 28px}
.cierre .adultos{margin-top:40px;color:var(--tinta)}

/* Portada v3 (28-oct): cada pantalla con su forma; fotos que llenan los huecos; la línea del logo empieza y cierra la página */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Cabecera: dos columnas, como la elegida el 27-oct, con el logo que se dibuja */
.inicio .envoltura{align-items:center}
.inicio-texto{padding-bottom:clamp(40px,6vw,88px)}
.logo-vivo{margin:0 0 clamp(18px,2.4vw,32px);width:min(560px,92%)}
.logo-vivo svg{display:block;width:100%;height:auto;overflow:visible}
.logo-vivo .sierra{clip-path:inset(0 100% 0 0);animation:dibuja 1.3s cubic-bezier(.65,0,.35,1) .1s forwards}
.logo-vivo .letras{opacity:0;transform:translateY(12px);animation:llega .8s cubic-bezier(.16,1,.3,1) .9s forwards}
.logo-vivo .lema{opacity:0;animation:llega .8s cubic-bezier(.16,1,.3,1) 1.2s forwards}
.inicio-texto > :not(.logo-vivo){opacity:0;animation:llega .9s cubic-bezier(.16,1,.3,1) 1.4s forwards}
@keyframes dibuja{to{clip-path:inset(0 0 0 0)}}
@keyframes llega{to{opacity:1;transform:none}}
.inicio .enfado{font-size:clamp(72px,10.5vw,164px);margin:0;position:relative;z-index:2}
.inicio .enfado .tajo::before{transform:skewX(-14deg) scaleX(0);transform-origin:left;animation:barre .7s cubic-bezier(.65,0,.35,1) 1.9s forwards}
@keyframes barre{to{transform:skewX(-14deg) scaleX(1)}}
.inicio .entradilla{color:var(--tinta);font-weight:500;font-size:clamp(18px,1.5vw,20px);max-width:32em}
.inicio .entradilla.fuerte{font-weight:700;margin-top:10px}
.inicio .acciones{margin:28px 0 0}
.js .inicio .foto::before{animation-delay:1.6s}
.js .inicio .foto img{animation-delay:2.1s}
.atajos-puertas{display:flex;flex-wrap:wrap;align-items:center;margin-top:22px;font-weight:600;font-size:17px}
.atajos-puertas a{color:var(--tinta);text-decoration:none;padding:4px 0}
.atajos-puertas a:hover{color:var(--rojo)}
.atajos-puertas a + a::before{content:"";display:inline-block;width:9px;height:17px;margin:0 14px;vertical-align:-3px;background:var(--rojo);clip-path:polygon(55% 0,100% 0,45% 100%,0 100%)}
/* El logo pequeño de la cabecera no compite con el grande: aparece cuando el grande sale de pantalla */
.js .cabecera.en-portada .marca{opacity:0;transition:opacity .35s}
.js .cabecera.en-portada.con-marca .marca{opacity:1}
/* Solo la primera vez en cada visita */
.sin-intro .logo-vivo .sierra,.sin-intro .logo-vivo .letras,.sin-intro .logo-vivo .lema,.sin-intro .inicio-texto > :not(.logo-vivo),.sin-intro .inicio .foto img,.sin-intro .inicio .foto::before{animation:none;opacity:1;clip-path:none;transform:none}
.sin-intro .inicio .foto::before{clip-path:polygon(38% 0,100% 0,62% 100%,0 100%)}
.sin-intro .inicio .enfado .tajo::before{animation:none;transform:skewX(-14deg)}
@media (prefers-reduced-motion:reduce){
  .logo-vivo .sierra,.logo-vivo .letras,.logo-vivo .lema,.inicio-texto > :not(.logo-vivo){animation:none;opacity:1;clip-path:none;transform:none}
  .inicio .enfado .tajo::before{animation:none;transform:skewX(-14deg)}
}
/* Historia: 2015 y el monitor a la izquierda, el texto grande y negro a la derecha */
.historia{margin-top:clamp(64px,8vw,120px)}
.historia .envoltura{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.historia-izq{display:grid;justify-items:center;gap:clamp(16px,2vw,28px);position:sticky;top:calc(var(--cabecera) + 24px)}
.siete{display:grid;justify-items:center}
.siete span{font-family:"Anton",sans-serif;font-size:clamp(120px,14vw,220px);line-height:.85;padding:0 .12em;position:relative;z-index:0}
.siete span::before{content:"";position:absolute;inset:.04em 0 0;background:var(--amarillo);transform:skewX(-12deg);z-index:-1}
.js .historia-izq .siete span::before{transform:skewX(-12deg) scaleY(0);transform-origin:bottom;transition:transform 1.1s cubic-bezier(.65,0,.35,1) .3s}
.js .historia-izq.visto .siete span::before{transform:skewX(-12deg) scaleY(1)}
.historia-foto{width:100%;max-width:440px;height:auto;mask-image:linear-gradient(#000 80%,transparent)}
.historia .grande{font-size:clamp(44px,5.6vw,88px)}
.historia-texto p{font-size:clamp(19px,1.6vw,21px);font-weight:500;line-height:1.5;color:var(--tinta);max-width:34em;margin:18px 0 0}
.historia-texto .golpe{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(34px,3.6vw,56px);line-height:1;max-width:18ch;margin-top:30px}
.historia-texto .para-ti{font-size:clamp(22px,2.2vw,28px);line-height:1.3;font-weight:700;border-top:2px solid var(--tinta);padding-top:18px;margin-top:30px}
/* Lo que nos sigue enfadando: banda negra que sale de los dientes del escudo, como el hombro de la camiseta */
.enfados.banda-negra{background:var(--tinta);color:#fff;margin-top:0;padding:clamp(48px,6vw,88px) 0 calc(3vw + clamp(64px,8vw,110px));clip-path:polygon(0 0,100% 0,100% calc(100% - 3vw),0 100%)}
.banda-negra .grande.titulo{color:#fff}
.banda-negra li{border-top-color:rgba(255,255,255,.85)}
.algo-en-comun{font-size:clamp(22px,2.2vw,30px);font-weight:700;line-height:1.3;margin:40px 0 0;max-width:30em}
.banda-negra .firma{color:var(--amarillo);font-size:clamp(34px,10vw,120px);line-height:1;margin:28px 0 0;overflow-wrap:anywhere}
/* Lo que sabemos hacer: tres figuras de alturas distintas, con su rótulo sesgado */
.hacemos{margin-top:clamp(56px,7vw,96px)}
.hacemos .grande{font-size:clamp(44px,6vw,92px)}
.figuras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);align-items:end;margin-top:clamp(28px,4vw,48px)}
.figura{margin:0;display:flex;flex-direction:column;align-items:flex-start}
.figura img{width:100%;object-fit:contain;object-position:bottom left;mask-image:linear-gradient(#000 80%,transparent)}
.f-alta img{height:clamp(280px,32vw,480px)}
.f-media img{height:clamp(240px,28vw,420px)}
.f-texto{justify-content:flex-end;min-height:clamp(220px,24vw,360px)}
.figura figcaption{margin-top:14px}
.figura figcaption span{display:inline;font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(26px,2.5vw,40px);line-height:1.38;position:relative;z-index:0;padding:.06em .28em;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(var(--banda),var(--banda))}
.f-alta figcaption span{background:linear-gradient(var(--amarillo),var(--amarillo))}
.f-texto figcaption span{font-size:clamp(34px,3.6vw,58px);background:linear-gradient(var(--banda),var(--banda))}
.tambien{position:relative;font-size:clamp(22px,2.2vw,28px);font-weight:700;line-height:1.3;max-width:34em;margin:clamp(36px,4vw,56px) 0 0;padding-left:40px}
.tambien::before{content:"";position:absolute;left:0;top:.2em;width:14px;height:30px;background:var(--rojo);clip-path:polygon(55% 0,100% 0,45% 100%,0 100%)}
.hacemos-texto{font-size:clamp(19px,1.6vw,21px);font-weight:500;color:var(--tinta);max-width:40em;margin:16px 0 0 40px}
/* Remate: la frase y la bota que frena el balón */
.remate-seccion{margin-top:clamp(56px,7vw,96px);margin-bottom:clamp(64px,8vw,120px)}
.remate-seccion .envoltura{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
.remate-grande{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(36px,4.8vw,76px);line-height:1;margin:0;position:relative;z-index:2;max-width:18ch}
.js .remate-seccion .remate-grande .tajo::before{transform:skewX(-14deg) scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.65,0,.35,1) .45s}
.js .remate-seccion .visto .remate-grande .tajo::before{transform:skewX(-14deg) scaleX(1)}
.remate-foto{width:100%;max-width:560px;justify-self:end;margin-left:-6%;mask-image:linear-gradient(#000 82%,transparent)}
/* Elige tu puerta: tres puertas sesgadas, con la figura saliéndose por arriba */
.puertas-inicio{padding-top:clamp(56px,7vw,96px);overflow-x:clip}
.puertas-inicio .grande{font-size:clamp(48px,6.4vw,104px)}
.tres-puertas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(110px,12vw,170px)}
.puerta-i{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:0 clamp(24px,3vw,44px) clamp(36px,4vw,56px);text-decoration:none;color:var(--tinta)}
.puerta-i::before{content:"";position:absolute;inset:0 -4%;z-index:-1;background:transparent;clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);transition:background .4s}
.p-instituciones::before{background:var(--banda)}
.puerta-i:hover::before{background:var(--banda)}
.p-instituciones:hover::before{background:#ebebef}
.p-familias{padding-left:var(--margen)}
.p-escofutsal{padding-right:var(--margen)}
.puerta-i > img{height:clamp(260px,26vw,380px);width:auto;max-width:100%;align-self:center;object-fit:contain;margin-top:calc(-1 * clamp(90px,10vw,140px));mask-image:linear-gradient(#000 80%,transparent);transition:transform .9s var(--suave)}
.puerta-i:hover > img{transform:translateY(-10px)}
.puerta-i h3.grande{font-size:clamp(34px,3.4vw,56px);min-height:1.9em;display:flex;align-items:flex-end;gap:12px;margin:18px 0 0}
.escudo-mini{height:.95em;width:auto;flex:none}
.puerta-i p{color:var(--tinta);font-weight:500;margin:12px 0 0;max-width:26em}
.puerta-i .flecha{margin-top:20px;font-size:20px;font-weight:700;color:var(--rojo);display:inline-flex;align-items:center;gap:10px}
.puerta-i .flecha::after{content:"";width:28px;height:2px;background:currentColor;transition:width .5s var(--suave)}
.puerta-i:hover .flecha::after{width:56px}
/* Al pie del dragón: la línea del logo vuelve, roja, sobre la sierra */
.dragon{margin-top:clamp(72px,9vw,140px);text-align:center}
.dragon .grande{font-size:clamp(48px,6.4vw,104px)}
.dragon p{max-width:36em;margin:18px auto 0;color:var(--tinta);font-weight:500;font-size:clamp(19px,1.6vw,21px)}
.valle-figura{position:relative;margin:clamp(16px,3vw,40px) 0 0}
.valle{display:block;width:100%;height:clamp(320px,46vw,620px);object-fit:cover;object-position:50% 60%;mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 88%,transparent)}
.cresta{position:absolute;right:0;top:9%;width:80%;margin:0;z-index:1;pointer-events:none}
.cresta svg{display:block;width:100%;height:auto;aspect-ratio:690/93}
.cresta path{fill:var(--rojo);stroke:var(--rojo)}
.js .cresta.aparece{opacity:1;transform:none;filter:none}
.js .cresta svg{clip-path:inset(0 100% 0 0);transition:clip-path 2.6s cubic-bezier(.65,0,.35,1) .2s}
.js .cresta.visto svg{clip-path:inset(0 0 0 0)}
.dragon-contacto .sonrisa{font-size:clamp(22px,2.2vw,28px);font-weight:700;line-height:1.3;margin-top:8px}
.dragon .cierre-acciones{justify-content:center;margin-top:24px}
@media (prefers-reduced-motion:reduce){
  .js .historia-izq .siete span::before,.js .remate-seccion .remate-grande .tajo::before{transition:none}
  .js .cresta svg{clip-path:none;transition:none}
}
@media (max-width:860px){
  .inicio .foto{width:min(380px,82vw)}
  .logo-vivo{width:100%}
  .historia .envoltura{grid-template-columns:1fr}
  .historia-izq{position:static;justify-items:start}
  .historia-foto{width:70vw}
  .figuras{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-right:calc(-1 * var(--margen));padding-right:var(--margen)}
  .figura{flex:0 0 72vw;scroll-snap-align:start}
  .f-texto{min-height:300px}
  .hacemos-texto{margin-left:0}
  .remate-seccion .envoltura{grid-template-columns:1fr}
  .remate-foto{width:70vw;margin:24px 0 0}
  .tres-puertas{grid-template-columns:1fr;margin-top:110px;gap:120px}
  .puerta-i,.p-familias,.p-escofutsal{padding:0 var(--margen) 40px}
  .puerta-i::before{inset:0;clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%)}
  .puerta-i > img{height:280px;margin-top:-90px}
  .puerta-i h3.grande{min-height:0}
  .valle{height:68vw;object-position:35% 60%}
  .cresta{width:92%}
}

@media (max-width:640px){.enfados li{grid-template-columns:20px 1fr;gap:12px}}
/* Escuelas */
.escuela-portada .escudo-portada{width:clamp(84px,8vw,120px);height:auto;margin-bottom:20px}
.subtitulo{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;font-size:22px;letter-spacing:.01em;margin:36px 0 8px}
.subtitulo:first-child{margin-top:0}
.categorias{margin-top:clamp(64px,8vw,120px)}
.categorias .grande{font-size:clamp(44px,5.6vw,88px)}
.tabla-categorias{list-style:none;margin:36px 0 0;padding:0;border-top:2px solid var(--tinta)}
.tabla-categorias li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,1fr);gap:8px 32px;align-items:start;padding:22px 0;border-bottom:1px solid var(--linea)}
.tabla-categorias .cat h3{font-size:clamp(30px,3vw,44px)}
.tabla-categorias small{display:block;color:var(--gris);font-size:15px;margin-top:4px}
.tabla-categorias .etiqueta{display:none}
.tabla-categorias .hor{font-size:17px}
.tabla-categorias .cuo b{font-size:20px;font-variant-numeric:tabular-nums}
/* En las escuelas el recorte trae su trozo de parqué: la raya roja va detrás del cuerpo y el suelo queda sobre blanco */
.escuela-portada .foto::before{left:22%;right:-6%;top:4%;bottom:30%}
.escuela-portada .foto img{mask-image:linear-gradient(#000 76%,transparent 96%)}
.notas{margin-top:28px;display:grid;gap:8px;max-width:46em;color:var(--tinta)}
.notas p{margin:0}
.notas b{color:var(--tinta)}
@media (max-width:760px){
  .tabla-categorias li{grid-template-columns:1fr;gap:10px}
  .tabla-categorias .etiqueta{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:2px}
}
.pasos-seccion{margin-top:clamp(80px,10vw,150px)}
.pasos-seccion .grande{font-size:clamp(44px,5.6vw,88px)}
.pasos{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.paso-num{display:inline-block;font-family:"Anton",sans-serif;font-size:clamp(64px,7vw,104px);line-height:1;padding:0 .3em;position:relative;z-index:0}
.paso-num::before{content:"";position:absolute;inset:.08em 0 .04em;background:var(--amarillo);transform:skewX(-14deg);z-index:-1}
.pasos h3{font-size:22px;margin:18px 0 6px}
.pasos p{margin:0 0 12px;color:var(--tinta)}
@media (max-width:760px){.pasos{grid-template-columns:1fr}}
.donde{margin-top:clamp(80px,10vw,150px)}
.donde .envoltura{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,5vw,80px);align-items:end}
.donde .grande{font-size:clamp(40px,4.8vw,76px)}
.donde .direccion{font-size:20px;margin:18px 0 24px}
.primer-dia{border-left:4px solid var(--amarillo);padding-left:24px}
.primer-dia h3{margin:0 0 6px;font-size:20px}
.primer-dia p{margin:0;color:var(--tinta)}
.federado{margin-top:clamp(80px,10vw,150px);background:var(--banda);clip-path:polygon(0 0,100% 4vw,100% 100%,0 100%);padding:calc(4vw + 56px) 0 64px}
.federado .envoltura{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.federado img{width:clamp(110px,12vw,170px);height:auto}
.federado .grande{font-size:clamp(36px,4.4vw,68px)}
.federado p{max-width:36em;color:var(--tinta);margin:16px 0 0}
@media (max-width:640px){.federado .envoltura{grid-template-columns:1fr}.donde .envoltura{grid-template-columns:1fr}}
.escena .recorte.estrecho{width:min(66%,470px)}
.razones-seccion{margin-top:clamp(72px,9vw,130px)}
.razones-seccion .grande{font-size:clamp(44px,5.6vw,88px)}
.razones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(28px,5vw,72px);margin-top:40px}
.razones > div{border-top:2px solid var(--tinta);padding-top:18px}
.razones h3{font-size:22px;margin:0 0 8px}
.razones p{margin:0;color:var(--tinta)}
@media (max-width:760px){.razones{grid-template-columns:1fr}}
.preguntas h3{display:flex;gap:14px;align-items:baseline;font-size:24px;line-height:1.2}
.preguntas h3 span{font-family:"Anton",sans-serif;font-weight:400;font-size:40px;line-height:.8;padding:0 .18em;position:relative;z-index:0;flex:none}
.preguntas h3 span::before{content:"";position:absolute;inset:.04em 0 -.04em;background:var(--amarillo);transform:skewX(-14deg);z-index:-1}
.preguntas p + p{margin-top:12px}
.remate{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(26px,2.8vw,40px);line-height:1;margin:48px 0 0;max-width:24ch}
.cierre .adultos{max-width:36em}
.minutos{margin-top:clamp(80px,10vw,150px)}
.minutos .grande{font-size:clamp(44px,5.6vw,88px)}
.minutos .dos h3.grande{font-size:clamp(30px,3vw,46px);line-height:.95}
.intro{color:var(--tinta);margin:16px 0 0;max-width:36em;font-size:19px}
.nota-semana{color:var(--tinta);margin:18px 0 0;max-width:24em}
.resultados .hora{font-family:"Anton",sans-serif;font-size:24px;font-weight:400}
.avisos{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.avisos li{display:grid;grid-template-columns:130px 1fr;gap:8px 24px;padding:18px 0;border-bottom:1px solid var(--linea);font-size:17px}
.avisos .cuando{font-weight:600}
@media (max-width:640px){.avisos li{grid-template-columns:1fr}}
.dos-escuelas{margin-top:clamp(72px,9vw,130px)}
.dos-escuelas > .envoltura > .grande{font-size:clamp(44px,5.6vw,88px)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:32px}
.dos > div{border-top:2px solid var(--tinta);padding-top:20px}
.dos h3.grande{font-size:clamp(32px,3.4vw,52px)}
.dos h3:not(.grande){font-size:22px;margin:0}
.dos p{color:var(--tinta);margin:10px 0 0;max-width:30em}
.consejo{margin-top:28px;max-width:40em;color:var(--tinta)}
@media (max-width:640px){.dos{grid-template-columns:1fr}}
.ayto{margin-top:clamp(80px,10vw,150px)}
.ayto .grande{font-size:clamp(40px,5vw,80px)}

/* Ayuntamientos, AMPAs, colegios y clubes */
.escuela-portada .marca-capitulo{margin-bottom:22px}
.whatsapp.telefono svg{color:var(--amarillo)}
/* Dónde estamos: los pueblos en grande, como un marcador */
.pueblos{padding:clamp(36px,5vw,64px) 0 0}
.pueblos .hoy{display:flex;flex-wrap:wrap;align-items:center;gap:6px clamp(16px,2.4vw,36px);margin:0;font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(30px,4.4vw,68px);line-height:1}
.pueblos .hoy span{display:inline-flex;align-items:center;gap:clamp(16px,2.4vw,36px)}
.pueblos .hoy span + span::before{content:"";width:.24em;height:.62em;background:var(--rojo);clip-path:polygon(55% 0,100% 0,45% 100%,0 100%)}
.pueblos-nota{margin:16px 0 0;color:var(--tinta);font-size:17px;max-width:60em}
.pueblos-nota b{color:var(--tinta)}
/* Lo mínimo: lista que se lee de un vistazo */
.suelo{margin-top:clamp(80px,10vw,150px)}
.suelo .envoltura{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.suelo .grande{font-size:clamp(40px,4.8vw,76px)}
.cumple{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinta)}
.cumple li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:18px 0;border-bottom:1px solid var(--linea);font-size:clamp(18px,1.6vw,21px);font-weight:500;line-height:1.4}
.ok{position:relative;display:grid;place-items:center;width:40px;height:34px;margin-top:-2px}
.ok::before{content:"";position:absolute;inset:0;background:var(--amarillo);transform:skewX(-12deg)}
.ok svg{position:relative;width:24px;height:24px;fill:none;stroke:var(--tinta);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.suelo .pie-suelo{margin-top:clamp(36px,4vw,56px);align-items:end}
.suelo .remate{margin:0;font-size:clamp(28px,3.2vw,48px);max-width:18ch}
.estreno p{margin:0 0 10px;color:var(--tinta)}
.estreno .estreno-titulo{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:22px;color:var(--tinta);margin-bottom:14px}
/* Lo que sabemos hacer bien: las actividades en grande */
.sabemos{margin-top:clamp(80px,10vw,150px)}
.sabemos .grande{font-size:clamp(40px,4.8vw,76px)}
.muro{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 14px}
.muro li{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(26px,3.4vw,52px);line-height:1;padding:.14em .3em .1em;position:relative;z-index:0}
.muro li::before{content:"";position:absolute;inset:0;background:var(--banda);transform:skewX(-12deg);z-index:-1}
.muro li:nth-child(-n+3)::before{background:var(--amarillo)}
.sabemos-texto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-top:32px}
.sabemos-texto p{margin:0;color:var(--tinta)}
.no-llevamos b{color:var(--tinta)}
/* 15 € netos la hora: la cifra enorme detrás del grupo, como en la portada */
.quince .escena{min-height:min(78vh,700px)}
.quince .recorte{width:min(100%,720px)}
@media (max-width:860px){.quince .escena{min-height:0;padding-top:24vw}.quince .cifra{font-size:62vw}}
/* Sin centralita: el teléfono de Iván es la imagen */
.centralita{margin-top:clamp(80px,10vw,150px)}
.centralita .envoltura{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.centralita .grande{font-size:clamp(40px,4.8vw,76px)}
.centralita p{color:var(--tinta);margin:16px 0 0;max-width:34em}
.llamada-quien{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(22px,2vw,30px);color:var(--tinta)!important;margin:0 0 12px!important}
.telefono-grande{display:inline-block;font-family:"Anton",sans-serif;font-size:clamp(52px,7.4vw,118px);line-height:1;color:var(--tinta);text-decoration:none;white-space:nowrap;transition:transform .4s var(--suave)}
.telefono-grande:hover{transform:translateX(6px)}
/* Dos maneras: las mismas puertas partidas de la portada */
.empezar{margin-top:clamp(80px,10vw,150px)}
.empezar .grande{font-size:clamp(40px,4.8vw,76px)}
.empezar .intro{max-width:44em}
.empezar .intro strong{color:var(--tinta)}
.empezar .puertas{min-height:0;margin-top:clamp(32px,4vw,56px)}
.empezar .puerta{padding-bottom:clamp(40px,5vw,72px)}
.empezar .puerta .paso-num{align-self:flex-start;margin-bottom:18px}
.empezar .puerta .grande{font-size:clamp(34px,3.6vw,56px)}
.empezar .puerta p{color:var(--tinta);margin:16px 0 0}
.empezar .puerta .boton{align-self:flex-start;margin-top:24px}
/* Que haya algo que esperar */
.esperar{margin-top:clamp(80px,10vw,150px)}
.esperar .envoltura{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:end}
.esperar .grande{font-size:clamp(40px,4.8vw,76px)}
.esperar p{color:var(--tinta);margin:16px 0 0;max-width:36em}
.esperar .torneo-propio{font-weight:600;color:var(--tinta)}
.hitos{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.hitos li{border-top:2px solid var(--tinta);padding-top:10px}
.hitos b{display:block;font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(72px,8vw,120px);line-height:1}
.hitos span{display:block;color:var(--tinta);margin-top:6px}
.fotos-torneo{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(14px,2vw,28px);max-width:1320px;margin:clamp(36px,4vw,56px) auto 0;padding:0 var(--margen)}
.fotos-torneo figure{margin:0}
.fotos-torneo img{width:100%;aspect-ratio:3/2;object-fit:cover;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%)}
.fotos-torneo figcaption{margin-top:12px;font-weight:600}
.fotos-torneo figcaption span{display:block;font-weight:400;color:var(--gris)}
/* Las familias: banda gris con el móvil de verdad */
.ampa{margin-top:clamp(80px,10vw,150px);background:var(--banda);clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%);padding:calc(4vw + 56px) 0 clamp(56px,7vw,96px)}
.ampa .envoltura{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:center}
.ampa .grande{font-size:clamp(44px,5.4vw,84px)}
.ampa .intro{margin:20px 0 0;font-size:21px;color:var(--tinta)}
.lista-papeles{list-style:none;margin:28px 0 0;padding:0}
.lista-papeles li{position:relative;padding:16px 0 16px 36px;border-top:1px solid #d2d2d7;color:var(--tinta)}
.lista-papeles li::before{content:"";position:absolute;left:0;top:18px;width:12px;height:26px;background:var(--rojo);clip-path:polygon(55% 0,100% 0,45% 100%,0 100%)}
.lista-papeles b{color:var(--tinta)}
.movil{justify-self:center;margin:0;width:min(300px,78vw)}
.movil img{display:block;width:100%;height:auto;border:10px solid var(--tinta);border-radius:44px;background:#fff;box-shadow:0 34px 60px -24px rgba(0,0,0,.45),0 8px 20px -8px rgba(0,0,0,.2);transform:rotate(-3deg)}
.movil figcaption{margin-top:22px;text-align:center;color:var(--gris);font-size:15px}
.ampa .cuota{display:block;margin-top:clamp(48px,6vw,80px);border-top:2px solid var(--tinta);padding-top:24px}
.cuota .grande{font-size:clamp(30px,3.4vw,52px)}
.cuota p{color:var(--tinta);margin:12px 0 0;max-width:52em}
/* A lo que decimos que no */
.dijimos-no{margin-top:clamp(80px,10vw,150px)}
.dijimos-no .grande{font-size:clamp(48px,7vw,112px)}
.dijimos-no ul{list-style:none;margin:36px 0 0;padding:0}
.dijimos-no li{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;padding:22px 0;border-top:2px solid var(--tinta);font-size:clamp(20px,2.2vw,28px);font-weight:600;line-height:1.3}
.dijimos-no li:last-child{border-bottom:2px solid var(--tinta)}
.dijimos-no .precio{margin-top:32px;color:var(--tinta)}
.dijimos-no .remate{margin-top:20px}
.dijimos-no .no{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(34px,3.4vw,48px);line-height:1;color:#fff;background:var(--rojo);padding:4px 16px 2px;transform:skewX(-12deg)}
/* Contacto */
.contacto-portada{padding:clamp(48px,7vw,104px) 0 clamp(40px,5vw,72px)}
.contacto-portada h1{font-size:clamp(56px,8vw,128px)}
.contacto-portada .entradilla{max-width:34em;color:var(--tinta);margin:24px 0 0;font-size:20px}
.vias .envoltura{display:grid;grid-template-columns:1fr 1fr;gap:0}
.via{padding:clamp(40px,5vw,72px) clamp(24px,4vw,56px) clamp(40px,5vw,72px) 0}
.via + .via{background:var(--banda);clip-path:polygon(7% 0,100% 0,100% 100%,0 100%);margin-right:calc(var(--margen) * -1);padding-left:clamp(48px,7vw,104px);padding-right:var(--margen)}
.via .grande{font-size:clamp(36px,4vw,60px);max-width:12ch}
.via p{color:var(--tinta);margin:14px 0 0;max-width:30em}
.via .dato{display:inline-block;margin-top:28px;font-family:"Anton",sans-serif;font-size:clamp(48px,5.6vw,92px);line-height:1;color:var(--tinta);text-decoration:none;white-space:nowrap;transition:transform .4s var(--suave)}
.via .dato:hover{transform:translateX(6px)}
.via .como{margin-top:10px;font-weight:600;color:var(--tinta)}
.via-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px}
.via .nota{margin-top:28px;font-size:16px}
.preocupa{margin-top:clamp(64px,8vw,120px)}
.preocupa .envoltura{display:grid;grid-template-columns:1fr auto;gap:24px clamp(28px,5vw,80px);align-items:end;border-top:2px solid var(--tinta);padding-top:32px}
.preocupa .grande{font-size:clamp(36px,4.4vw,68px)}
.preocupa p{color:var(--tinta);margin:14px 0 0;max-width:40em}
@media (max-width:860px){
  .vias .envoltura{grid-template-columns:1fr}
  .via{padding-right:0}
  .via + .via{clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%);margin:0 calc(var(--margen) * -1);padding:calc(4vw + 40px) var(--margen) 48px}
  .preocupa .envoltura{grid-template-columns:1fr}
}
.firma-cierre{font-family:"Anton",sans-serif;font-size:clamp(28px,3vw,40px);margin:28px 0 0}
@media (max-width:860px){
  .suelo .envoltura,.centralita .envoltura,.esperar .envoltura,.ampa .envoltura{grid-template-columns:1fr}
  .sabemos-texto{grid-template-columns:1fr}
  .fotos-torneo{grid-template-columns:1fr}
  .movil{margin-top:12px}
  .esperar .hitos{grid-template-columns:1fr 1fr}
}

/* Textos legales */
.legal{padding:clamp(48px,7vw,96px) 0 clamp(64px,8vw,120px)}
.legal .envoltura{max-width:780px}
.legal h1{font-size:clamp(48px,7vw,96px)}
.legal .actualizado{color:var(--gris);font-size:15px;margin:14px 0 0}
.legal h2{font-size:22px;margin:40px 0 8px}
.legal p,.legal li{color:#3a3a3c;line-height:1.6}
.legal p{margin:0 0 12px}
.legal b{color:var(--tinta)}
.legal ul{margin:0 0 12px;padding-left:22px}
.pie-legal{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px}
.pie-legal a{color:#424245;text-decoration:none}
.pie-legal a:hover{color:var(--tinta);text-decoration:underline}

/* Páginas interiores v3 (29-oct): mismo nivel que la portada */
.sub-titular{margin-top:30px;line-height:1.08}
/* Texto corrido: negro y peso medio en toda la web (Iván: nada de gris que no se lee) */
main p{font-weight:500}
/* Contacto: cabecera con la foto de los chavales saludándose (apaisada, más ancha que las de las escuelas) */
@media (min-width:861px){.contacto-portada .envoltura{grid-template-columns:.85fr 1.15fr;align-items:center}}
.contacto-portada h1{font-size:clamp(52px,6vw,104px)}
.contacto-portada .foto{margin-left:0}
.contacto-portada .foto::before{left:18%;right:-8%;top:6%;bottom:6%}
@media (max-width:860px){.contacto-portada .foto{width:100%;margin-bottom:12px}}
.portada .entradilla,.contacto-portada .entradilla{color:var(--tinta);font-weight:500;font-size:clamp(18px,1.5vw,20px)}
@media (max-width:640px){.filas-preguntas .fila h3{max-width:none}}
.barra-escuela{position:sticky;top:var(--cabecera);z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.barra-escuela ul{list-style:none;margin:0 auto;padding:0 var(--margen);max-width:1320px;height:44px;display:flex;align-items:center;gap:28px;overflow-x:auto;scrollbar-width:none}
.barra-escuela a{position:relative;white-space:nowrap;font-size:15px;font-weight:700;color:var(--tinta);text-decoration:none}
.barra-escuela a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--rojo);transform:skewX(-20deg) scaleX(0);transform-origin:left;transition:transform .3s var(--suave)}
.barra-escuela a:hover::after{transform:skewX(-20deg) scaleX(1)}
.filas-preguntas{margin-top:clamp(28px,4vw,48px);border-top:2px solid var(--tinta)}
.fila{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px clamp(28px,5vw,72px);padding:clamp(24px,3vw,36px) 0;border-bottom:2px solid var(--tinta)}
.fila h3{display:flex;gap:16px;align-items:flex-start;margin:0;font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(30px,3.2vw,50px);line-height:1;max-width:14ch}
.fila h3 span{flex:none;font-size:1em;line-height:.9;padding:0 .18em;position:relative;z-index:0}
.fila h3 span::before{content:"";position:absolute;inset:.02em 0 -.02em;background:var(--amarillo);transform:skewX(-14deg);z-index:-1}
.fila .resp p{margin:0;font-size:clamp(18px,1.5vw,20px);font-weight:500;color:var(--tinta);line-height:1.5}
.fila .resp p + p{margin-top:12px}
.remate-ancho{font-size:clamp(40px,5vw,76px);max-width:22ch;margin-top:clamp(40px,5vw,64px)}
.dos-foto{display:block;margin-bottom:18px;mask-image:linear-gradient(#000 80%,transparent)}
.recorte-foto{height:clamp(260px,26vw,420px);width:auto;max-width:100%}
.piernas{mask-image:linear-gradient(transparent,#000 14%,#000 80%,transparent)}
.puertas-dos > div:last-child img{mix-blend-mode:multiply}
.grupo-foto{width:100%;height:auto;max-height:320px;object-fit:contain;object-position:left bottom}
.paisaje-foto{width:100%;height:clamp(200px,20vw,300px);object-fit:cover;object-position:50% 45%;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.primer-dia{border-left:0;padding:24px 28px;position:relative;isolation:isolate}
.primer-dia::before{content:"";position:absolute;inset:0;background:var(--banda);transform:skewX(-6deg);z-index:-1}
.primer-dia h3{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;font-size:22px}
.primer-dia p{color:var(--tinta);font-weight:500}
.tabla-categorias .cuo b{font-family:"Anton",sans-serif;font-weight:400;font-size:32px;line-height:1.1}
.tabla-categorias small,.semana-lista small{font-size:16px;color:#424245}
.puertas-dos{gap:0;margin-top:32px}
.puertas-dos > div{border-top:0;padding:clamp(28px,4vw,48px) clamp(24px,3vw,44px);position:relative;isolation:isolate}
.puertas-dos > div:first-child{padding-left:0}
.puertas-dos > div:last-child::before{content:"";position:absolute;inset:0 calc(-1 * var(--margen)) 0 -6%;background:var(--banda);clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);z-index:-1}
.puertas-dos h3.grande{font-size:clamp(40px,4.4vw,68px)}
.puertas-dos .boton{margin-top:20px}
.semana-datos{margin:0}
/* Cierre con foto: el monitor y su grupo, «a la salida del entrenamiento» */
.cierre.con-foto .envoltura{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:clamp(28px,5vw,72px);align-items:center}
.cierre.con-foto .envoltura > *{grid-column:1}
.cierre.con-foto .cierre-foto{grid-column:2;grid-row:1 / span 4;width:100%;max-width:460px;justify-self:end;mask-image:linear-gradient(#000 80%,transparent)}
.banda-negra + .cierre .envoltura,.banda-negra + .cierre.con-foto .envoltura{border-top:0}
/* Familias */
.meses{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;max-width:1320px;margin:clamp(72px,9vw,140px) auto 0;padding:0 var(--margen) 0 0}
.meses-foto img{display:block;width:100%;height:auto}
.meses .grande{font-size:clamp(40px,4.8vw,76px)}
.tres-meses{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tres-meses li{font-size:17px;font-weight:500;line-height:1.4}
.mes{display:table;margin-bottom:12px;font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(24px,2.4vw,36px);line-height:1;padding:.08em .3em;position:relative;z-index:0}
.mes::before{content:"";position:absolute;inset:0;background:var(--banda);transform:skewX(-14deg);z-index:-1}
.mes.amarillo::before{background:var(--amarillo)}
.meses-texto > p{font-size:clamp(18px,1.5vw,20px);font-weight:500;color:var(--tinta);margin:28px 0 0;max-width:34em}
.meses-texto > p strong{font-weight:700}
.grada{margin-top:clamp(72px,9vw,140px)}
.grada .grande{font-size:clamp(44px,5.6vw,88px)}
.cumple.dos-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,72px);margin-top:28px}
.ocho-familias .envoltura{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.ocho-familias .siete span{font-size:clamp(180px,20vw,300px)}
.dos-puertas{grid-template-columns:repeat(2,minmax(0,1fr))}
.escuelas .tres-puertas{margin-top:clamp(110px,12vw,170px)}
.escuelas{overflow-x:clip}
/* Texto legible en todas las páginas: nada de gris claro ni letra pequeña */
.lado p,.razones p,.dos p,.intro,.ocho-familias p,.notas,.cierre .adultos,.puerta-i p,.pasos p,.consejo,.nota-semana,.federado p,.donde .direccion,.tres-meses li{font-size:clamp(18px,1.5vw,20px);font-weight:500;color:var(--tinta)}
/* Aire antes de la tira del escudo cuando no va pegada a una cabecera */
section:not(.portada) + .dientes{margin-top:clamp(64px,8vw,120px)}
@media (max-width:860px){
  .fila{grid-template-columns:1fr}
  .meses{grid-template-columns:1fr;padding:0}
  .meses-texto{padding:0 var(--margen)}
  .tres-meses{grid-template-columns:1fr}
  .cumple.dos-col{grid-template-columns:1fr}
  .ocho-familias .envoltura{grid-template-columns:1fr}
  .ocho-familias .siete{justify-items:start}
  .dos-puertas{grid-template-columns:1fr}
  .puertas-dos > div:first-child{padding-left:0}
  .puertas-dos > div:last-child::before{inset:0 calc(-1 * var(--margen));clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%)}
  .cierre.con-foto .envoltura{grid-template-columns:1fr}
  .cierre.con-foto .cierre-foto{grid-column:1;grid-row:auto;max-width:320px;justify-self:start;margin-bottom:20px;order:-1}
}