/* Movimiento y acabado: propuesta de Codex (29-oct), integrada. Se carga después de estilo.css. */
/* ASIDRA: una misma dirección de movimiento para todas las páginas. */
:root{--mov-entrada:cubic-bezier(.16,1,.3,1);--mov-respuesta:cubic-bezier(.2,.7,.2,1)}
html{scroll-behavior:smooth}body{overflow-x:clip}p{text-wrap:pretty}.grande{text-wrap:balance}.js .aparece,.js .aparece.visto{opacity:1;transform:none;filter:none;transition:none}
@keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js .portada .foto img{animation:entra .85s .1s var(--mov-entrada) both;filter:none}
.logo-vivo .sierra{animation:none;clip-path:none}.logo-vivo .letras{animation-duration:.55s;animation-delay:.35s}.logo-vivo .lema{animation-duration:.5s;animation-delay:.55s}.inicio-texto > :not(.logo-vivo){animation-duration:.65s;animation-delay:.15s}.inicio .enfado .tajo::before{animation-duration:.6s;animation-delay:.45s}.js .inicio .foto::before{animation-duration:.75s;animation-delay:.25s}.js .inicio .foto img{animation-duration:.9s;animation-delay:.45s}
.balon-rodaje{--diametro:clamp(64px,7.5vw,108px);position:absolute;width:var(--diametro);height:var(--diametro);right:11%;bottom:10px;z-index:4;pointer-events:none;opacity:0}.balon-giro{display:block;position:absolute;inset:0;background:url('comun/recortes/balon-apertura.png') center/contain no-repeat;transform-origin:50% 50%}.balon-sombra{position:absolute;bottom:-3%;left:9%;width:82%;height:9%;border-radius:50%;background:#1d1d1b25;filter:blur(3px)}.balon-rodaje.lista{opacity:1}.inicio .foto{isolation:isolate;overflow:visible}
/* Las apariciones se reservan a los títulos y fotografías principales. */
.motion-ready [data-estudio="titulo"]{clip-path:inset(0 0 100% 0);transform:translateY(14px);transition:clip-path .85s var(--mov-entrada),transform .85s var(--mov-entrada)}
.motion-ready [data-estudio="foto"]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--mov-entrada),transform 1s var(--mov-entrada)}
.motion-ready [data-estudio].en-escena{clip-path:inset(-.4em -.2em -.25em -.2em);opacity:1;transform:none}
.historia-izq .siete{isolation:isolate}.historia-izq .siete span::before{transition-duration:.8s!important;transition-delay:.05s!important}.historia-foto{transform-origin:center bottom}
.banda-negra li{transition:color .35s var(--mov-respuesta),border-color .35s var(--mov-respuesta)}.banda-negra li.lectura-activa{color:var(--amarillo);border-top-color:var(--amarillo)}.banda-negra li::before{transition:background .35s}.banda-negra li.lectura-activa::before{background:var(--amarillo)}
/* Una interacción de diagonal y flecha compartida, también con teclado. */
.puerta-i::before{transform:scaleX(.94);transform-origin:left;transition:background .3s var(--mov-respuesta),transform .5s var(--mov-entrada)}.puerta-i:is(:hover,:focus-visible)::before{transform:scaleX(1)}
.puerta-i > img,.puerta.escuela > img{transition:transform .65s var(--mov-entrada)}.puerta-i:is(:hover,:focus-visible)>img{transform:translateY(-5px)}
.puerta-i .flecha::after{transition:width .35s var(--mov-respuesta),transform .35s var(--mov-respuesta)}.puerta-i:is(:hover,:focus-visible) .flecha::after{width:48px;transform:translateX(4px)}
.puerta.escuela:is(:hover,:focus-visible) .escudo{transform:none}.puerta.escuela:is(:hover,:focus-visible)>img:not(.escudo){transform:translateY(-5px)}
.boton{transition:background .2s,transform .2s var(--mov-respuesta),box-shadow .2s}.boton:active{transform:scale(.97)}.enlace{text-underline-offset:.25em}.enlace:hover{text-decoration-thickness:2px}
/* Las fotos ya recortadas no reciben un segundo fundido sobre los cuerpos. */
.recorte,.figura img,.puerta-i>img,.cierre.con-foto .cierre-foto{mask-image:none}.piernas{mask-image:linear-gradient(transparent,#000 12%,#000 90%,transparent)}
.meses-foto{position:sticky;top:calc(var(--cabecera) + 28px);align-self:start}.tres-meses li{position:relative;transition:color .35s;opacity:1}.mes::before{transform-origin:left;transition:background .4s var(--mov-respuesta),transform .6s var(--mov-entrada)}.tres-meses li.mes-activo .mes::before{background:var(--amarillo);transform:skewX(-14deg) scaleX(1.035)}.tres-meses li.mes-activo{color:var(--tinta)}
.barra-escuela a.activo::after{transform:skewX(-20deg) scaleX(1)}.barra-escuela a.activo{color:var(--tinta);font-weight:700}.tabla-categorias{font-variant-numeric:tabular-nums}.tabla-categorias > li{transition:background .2s}.tabla-categorias > li:hover{background:#f8da321c}.tabla-categorias a:focus-visible{outline-offset:4px}
/* Cierre del recorrido con la misma sierra, sin una tercera entrada larga. */
.js .cresta svg{transition-duration:1.25s;transition-delay:.05s}.telefono-grande{transition:color .2s,transform .35s var(--mov-entrada)}.telefono-grande:hover{transform:translateX(3px);color:var(--rojo)}
.control-movimiento{position:fixed;left:18px;bottom:18px;z-index:65;display:flex;gap:6px}.control-movimiento button{border:1px solid #1d1d1b30;background:#fff;color:var(--tinta);font:600 13px Barlow,sans-serif;min-height:38px;padding:8px 12px;cursor:pointer;box-shadow:0 2px 8px #00000008}.control-movimiento button:hover{background:var(--amarillo)}
.salto-estudio{position:fixed;top:-90px;left:15px;z-index:100;background:var(--amarillo);padding:12px;color:var(--tinta)}.salto-estudio:focus{top:10px}
.sin-movimiento *,.sin-movimiento *::before,.sin-movimiento *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.sin-movimiento [data-estudio],.sin-movimiento .inicio-texto > *,.sin-movimiento .logo-vivo .letras,.sin-movimiento .logo-vivo .lema{opacity:1!important;clip-path:none!important;transform:none!important}.sin-movimiento .balon-rodaje{opacity:1}.sin-movimiento .historia-izq .siete span::before{transform:skewX(-12deg) scaleY(1)}.sin-movimiento .cresta svg{clip-path:none}.sin-movimiento .inicio .enfado .tajo::before{transform:skewX(-14deg)}
@media(max-width:860px){.meses-foto{position:static}.balon-rodaje{--diametro:70px;right:7%;bottom:6px}.motion-ready [data-estudio="titulo"]{transform:translateY(8px)}.control-movimiento{left:10px;bottom:12px;gap:4px}.control-movimiento button{font-size:12px;padding:7px 9px}.portada .foto{margin-bottom:16px}}
@media(hover:none){.puerta-i:is(:hover,:focus-visible)>img{transform:none}.tabla-categorias > li:hover{background:transparent}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-ready [data-estudio]{opacity:1;clip-path:none;transform:none}.balon-rodaje{opacity:1}.historia-izq .siete span::before{transform:skewX(-12deg) scaleY(1)!important}.inicio-texto > *,.logo-vivo .letras,.logo-vivo .lema{opacity:1!important;transform:none!important}.logo-vivo .sierra{clip-path:none!important}.inicio .enfado .tajo::before{transform:skewX(-14deg)!important}}

/* Revisión: balón sobre el lema, con parada en la transición www.A. */
.logo-vivo{position:relative;isolation:isolate;overflow:visible}
.logo-vivo .balon-rodaje{right:auto;bottom:auto;left:calc(19.8% - var(--diametro)/2);top:calc(87% - var(--diametro));z-index:5}
.logo-vivo .balon-sombra{height:5%;bottom:-1%;background:#1d1d1b20;filter:blur(2px)}
@media(max-width:860px){.logo-vivo .balon-rodaje{right:auto;bottom:auto;left:calc(19.8% - var(--diametro)/2);top:calc(87% - var(--diametro))}}

/* Acabado de navegación y lectura. */
html{scrollbar-gutter:stable}
html.con-barra-escuela{scroll-padding-top:calc(var(--cabecera) + 70px)}
.menu-abierto{overflow:hidden}
.barra-escuela ul{overscroll-behavior-inline:contain;scroll-padding-inline:20px}
.barra-escuela a{display:inline-flex;align-items:center;min-height:44px}
.barra-escuela a::after{bottom:3px}
.fila h3 span::before{transition:transform .45s var(--mov-entrada),background .3s;transform-origin:left}
.fila.pregunta-activa h3 span::before{transform:skewX(-14deg) scaleX(1.10);background:#f8da32}
.via .dato:focus-visible{outline-offset:8px}
@media(max-width:1000px){.cabecera.abierto .menu{max-height:calc(100svh - var(--cabecera));overflow-y:auto;overscroll-behavior:contain}.menu a{min-height:48px}.cabecera.abierto .boton-menu svg{transform:rotate(90deg)}.boton-menu svg{transition:transform .25s var(--mov-respuesta)}}
@media(max-width:640px){.control-movimiento{bottom:calc(10px + env(safe-area-inset-bottom,0px))}.whatsapp{bottom:calc(16px + env(safe-area-inset-bottom,0px))}.pie{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}

/* Ajustes para pantallas estrechas: controles separados de WhatsApp y blancos táctiles. */
@media(max-width:640px){
 .control-movimiento{flex-direction:column;align-items:flex-start;max-width:calc(100vw - 100px)}
 .control-movimiento button{min-height:40px;max-width:100%;white-space:normal;text-align:left}
 .atajos-puertas a{display:inline-flex;align-items:center;min-height:44px}
 .tabla-categorias .etiqueta{font-size:13px}
 .cierre-acciones{min-width:0}
 .cierre-acciones .boton{max-width:100%;white-space:normal;text-align:center}
 .via .via-acciones .enlace,.dragon .enlace{overflow-wrap:anywhere;min-width:0}
}

/* El control de movimiento va en el pie, como un enlace legal más (no flotando sobre el contenido) */
.pie .control-movimiento{position:static;display:inline-flex;max-width:none}
.pie .control-movimiento button{border:0;background:none;box-shadow:none;padding:0;min-height:0;font:inherit;color:#424245;cursor:pointer;text-align:left}
.pie .control-movimiento button:hover{background:none;text-decoration:underline}

/* El balón entra desde fuera de la pantalla en el móvil: que no aparezca desplazamiento lateral */
.inicio{overflow-x:clip}

/* Móvil, más ordenado (29-oct): listas con la raya delante de cada línea, escudo encima del título y todo alineado a la izquierda */
@media(max-width:640px){
 .atajos-puertas{flex-direction:column;align-items:flex-start;margin-top:12px}
 .atajos-puertas a + a::before{margin:0 12px 0 0}
 .atajos-puertas a::before,.pueblos .hoy span::before{content:"";flex:none;width:9px;height:17px;margin-right:12px;background:var(--rojo);clip-path:polygon(55% 0,100% 0,45% 100%,0 100%)}
 .pueblos .hoy{flex-direction:column;align-items:flex-start;gap:8px}
 .pueblos .hoy span{gap:0}
 .pueblos .hoy span::before{width:.24em;height:.62em;margin-right:14px}
 .puerta-i h3.grande{flex-direction:column;align-items:flex-start;gap:10px;min-height:0}
 .escudo-mini{height:48px}
 .dragon{text-align:left}
 .dragon p{margin-left:0}
 .dragon .cierre-acciones{justify-content:flex-start;align-items:flex-start}
 .inicio .enfado{font-size:min(72px,19vw)}
}

/* Sin balón sobre el logo (29-oct, lo pidió el socio de Iván) */
.balon-rodaje{display:none!important}