/* =========================================================
   MUSICAL BOXES · ANIMACIONES
   Las mismas de la tienda de packs, adaptadas al fondo tinta.
   Todo se desactiva con "reducir movimiento".
   ========================================================= */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}

/* transición suave entre páginas */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .2s var(--ease-out) both} /* la que se va, rápida; la que llega, algo más larga */
::view-transition-new(root){animation:vtIn .38s var(--ease-out) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}

/* grano de película */
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(3) infinite}
@keyframes grain{33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}}

/* pantalla de carga (una vez por visita) */
.pre{position:fixed;inset:0;z-index:200;background:var(--tinta);display:grid;place-items:center;transition:transform .7s var(--ease)}
.pre.out{transform:translateY(-100%)}
.pre .in{display:grid;justify-items:center;gap:1.4rem}
.pre .iso{width:min(260px,60vw);opacity:0;animation:pf 1s .1s forwards}
.pre .count{font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;color:var(--beige)}
@keyframes pf{to{opacity:1}}
body.lock{overflow:hidden}

/* cursor propio */
.cur{position:fixed;left:0;top:0;z-index:150;pointer-events:none;width:14px;height:9px;border-radius:50%;background:var(--beige);mix-blend-mode:difference;transition:width .25s var(--ease),height .25s var(--ease),background-color .2s,opacity .2s}
.cur.big{width:54px;height:34px;background:transparent;box-shadow:inset 0 0 0 1px var(--beige);mix-blend-mode:normal;opacity:.7} /* encima de botones y enlaces: un aro fino que no tapa el texto (antes una mancha que cortaba las letras) */

/* el disco: isotipo beige con brillo que gira y flota */
.disc{position:relative;width:min(300px,62vw);aspect-ratio:484/251.5;animation:float 7s ease-in-out infinite}
.disc .iso{width:100%!important;height:100%;margin:0!important}
.disc .shine{position:absolute;inset:0;pointer-events:none;-webkit-mask:url(../assets/isotipo.svg) center/100% 100% no-repeat;mask:url(../assets/isotipo.svg) center/100% 100% no-repeat}
.disc .shine::before{content:"";position:absolute;left:50%;top:50%;width:140%;aspect-ratio:1;transform:translate(-50%,-50%) scaleY(.52);
  background:conic-gradient(from var(--a),transparent 0deg,rgba(251,250,246,.95) 18deg,transparent 40deg,transparent 180deg,rgba(251,250,246,.95) 198deg,transparent 220deg);animation:spin 6s linear infinite}
@keyframes spin{to{--a:360deg}}
@keyframes float{50%{transform:translateY(-8px)}}

/* titular letra a letra */
.word .clip{display:inline-block;overflow:hidden;padding-bottom:.08em;vertical-align:bottom}
.word .ch{display:inline-block;transform:translateY(105%);opacity:0}
.ready .word .ch{animation:up 1.1s var(--ease) forwards}
@keyframes up{to{transform:none;opacity:1}}
.fade{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ready .fade{opacity:1;transform:none}
.ready .fade.d1{transition-delay:.25s}.ready .fade.d2{transition-delay:.4s}.ready .fade.d3{transition-delay:.55s}

/* aparecer al hacer scroll */
.rv{opacity:0;transform:translateY(34px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
.lines .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.lines .ln>span{display:inline-block;transform:translateY(105%);transition:transform .8s var(--ease)}
.lines.in .ln>span{transform:none}
.lines.in .ln:nth-child(2)>span{transition-delay:.1s}.lines.in .ln:nth-child(3)>span{transition-delay:.2s}

/* rejillas: el fondo y las líneas quedan quietos; entra el contenido de cada tarjeta, en cascada */
.rv-grid>*>*{opacity:0;transform:translateY(22px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.rv-grid.in>*>*{opacity:1;transform:none}
.rv-grid.in>:nth-child(2)>*{transition-delay:.08s}.rv-grid.in>:nth-child(3)>*{transition-delay:.16s}
.rv-grid.in>:nth-child(4)>*{transition-delay:.24s}.rv-grid.in>:nth-child(5)>*{transition-delay:.32s}.rv-grid.in>:nth-child(n+6)>*{transition-delay:.4s}
.steps.rv-grid>*::before{transition:opacity .4s var(--ease)}

/* ---------- portada con foto de fondo ---------- */
.hero.foto{position:relative;display:flex;align-items:flex-start;padding:clamp(50px,9vw,120px) 0 clamp(50px,7vw,90px);overflow:hidden;isolation:isolate}
.hero.foto .hero-bg{position:absolute;inset:0;z-index:-2;border-radius:0;aspect-ratio:auto!important;background:var(--tinta)}
.hero.foto .hero-bg:not(.pase) img{object-position:50% 62%;transform:scale(1.14);transform-origin:60% 40%;filter:saturate(1.06) contrast(1.03);will-change:transform}
.ready .hero.foto .hero-bg:not(.pase) img{animation:kenburns 2.6s var(--ease) forwards,respira 22s ease-in-out 2.6s infinite alternate}
@keyframes kenburns{to{transform:scale(1.03)}}
@keyframes respira{from{transform:scale(1.03)}to{transform:scale(1.09) translate(-1.2%,-.8%)}}
.hero.foto::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,22,20,.3) 0%,rgba(22,22,20,0) 16%,rgba(22,22,20,0) 48%,rgba(22,22,20,.5) 80%,var(--tinta) 100%),linear-gradient(90deg,rgba(22,22,20,.42) 0%,rgba(22,22,20,0) 55%)}
.hero.foto .wrap{position:relative;width:min(1240px,100% - 32px)}
.hero.foto h1{text-shadow:0 2px 30px rgba(22,22,20,.55),0 1px 3px rgba(22,22,20,.35)}
.hero.foto .lead,.hero.foto .lbl{text-shadow:0 1px 14px rgba(22,22,20,.7),0 1px 2px rgba(22,22,20,.5)}
.hero.foto .lead{color:var(--blanco);opacity:.92}
.hero-datos{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--l)}
.hero-datos span{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--b70)}
.hero-datos b{color:var(--beige);font-weight:500}
.scroll-cue{position:absolute;right:clamp(16px,4vw,48px);bottom:clamp(36px,6vw,70px);font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--b70);writing-mode:vertical-rl;display:flex;align-items:center;gap:.8rem}
.scroll-cue::after{content:"";width:1px;height:56px;background:linear-gradient(var(--beige),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:700px){.scroll-cue{display:none}.hero.foto{min-height:92svh}}

/* ---------- pase de fotos de la portada: fundido cruzado + zoom lento en cada foto ---------- */
.hero.foto .pase{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--tinta)}
/* portada: el mismo diseño de siempre, con el pase de fotos vivo DETRÁS */
.hero.vivo{position:relative;isolation:isolate;overflow:hidden}
.hero.vivo .fondo{position:absolute;inset:0;z-index:-2;background:var(--tinta)}
.hero.vivo::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(22,22,20,.8) 0%,rgba(22,22,20,.5) 42%,rgba(22,22,20,.12) 100%),linear-gradient(180deg,rgba(22,22,20,.2) 0%,rgba(22,22,20,0) 45%,var(--tinta) 100%)}
.hero.vivo .pase .slide img{filter:saturate(1.05) brightness(.95) contrast(1.05)}
@media(max-width:700px){.hero.vivo::after{background:linear-gradient(180deg,rgba(22,22,20,.55) 0%,rgba(22,22,20,.7) 55%,var(--tinta) 100%)}.hero.foto::before{background:linear-gradient(180deg,rgba(22,22,20,.25) 0%,rgba(22,22,20,0) 25%,rgba(22,22,20,.35) 65%,var(--tinta) 100%)}}
/* pase en la banda de la portada: los bordes se funden con el fondo (no corta la página) */
.banda.pase{position:relative;overflow:hidden;aspect-ratio:21/9;max-height:78vh;min-height:300px;background:var(--tinta);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 82%,transparent 100%)}
@media(max-width:700px){.banda.pase{aspect-ratio:4/5;max-height:none}}
.pase .slide{position:absolute;inset:0;margin:0;border-radius:0;aspect-ratio:auto!important;opacity:0;transition:opacity 1.8s var(--ease)}
.pase .slide.on{opacity:1;z-index:1}
.pase .slide img{object-position:50% 58%;transform:none;filter:saturate(.95) brightness(.84) contrast(1.04)}
.pase .slide.on img{animation:none} /* fotos de la portada quietas (sin zum lento): solo cambian con un fundido */
@keyframes kb{from{transform:scale(1.12) translate(1.5%,1%)}to{transform:scale(1.02) translate(-1%,-.6%)}}
@keyframes kb2{from{transform:scale(1.02) translate(-1.2%,0)}to{transform:scale(1.12) translate(1.2%,-1%)}}
.pase-nav{position:absolute;left:50%;bottom:clamp(30px,5vw,56px);transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.pase-nav button{width:26px;height:3px;border-radius:2px;background:var(--b45);transition:background .25s,width .25s}
.pase-nav button.on{background:var(--beige);width:42px}
@media (prefers-reduced-motion:reduce){.pase .slide.on img{animation:none}}

/* ---------- fotos con vida ---------- */
figure[data-foto] img{transition:transform 1.2s var(--ease),filter .8s var(--ease)}
@media (hover:hover) and (pointer:fine){a.cell:hover figure[data-foto] img,.galeria figure:hover img{transform:scale(1.06);filter:saturate(1.12) brightness(1.05)}}
.galeria figure::after{content:"⤢";position:absolute;right:10px;top:8px;font-size:1rem;color:var(--blanco);opacity:0;transition:opacity .4s;text-shadow:0 1px 8px rgba(22,22,20,.6)}
.galeria figure:hover::after{opacity:.9}
.rv-grid figure[data-foto],.galeria.rv-grid>figure{clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--ease)}
.rv-grid.in figure[data-foto],.galeria.rv-grid.in>figure{clip-path:inset(0 0 0 0)}
.galeria.rv-grid.in>:nth-child(2){transition-delay:.08s}.galeria.rv-grid.in>:nth-child(3){transition-delay:.16s}.galeria.rv-grid.in>:nth-child(4){transition-delay:.24s}

/* visor de fotos a pantalla completa */
.visor{position:fixed;inset:0;z-index:160;background:rgba(10,9,8,.96);display:none;align-items:center;justify-content:center;touch-action:pan-y}
.visor.open{display:flex;animation:fadein .35s var(--ease)}
@keyframes fadein{from{opacity:0}}
.visor img{max-width:min(94vw,1800px);max-height:86vh;object-fit:contain;border-radius:4px;box-shadow:0 30px 80px rgba(22,22,20,.6);animation:zoomin .5s var(--ease)}
@keyframes zoomin{from{opacity:0;transform:scale(.96)}}
.visor button{position:absolute;color:var(--blanco);font-size:1.6rem;width:52px;height:52px;border-radius:50%;border:1px solid var(--l);background:rgba(22,22,20,.5)}
.visor .vx{top:16px;right:16px}.visor .vp{left:16px;top:50%;transform:translateY(-50%)}.visor .vn{right:16px;top:50%;transform:translateY(-50%)}
.visor .vc{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--b70)}

/* fotos: se descubren y tienen parallax */
.photo[data-reveal]{clip-path:inset(10% 10% 10% 10% round 6px);transition:clip-path .9s var(--ease)}
.photo[data-reveal].in{clip-path:inset(0 0 0 0 round 6px)}
.photo[data-parallax] img{height:118%;will-change:transform}

/* manifiesto: las palabras se encienden al bajar */
.mani .w{opacity:.16;transition:opacity .25s}
.mani .w.on{opacity:1}

/* cinta en movimiento */
.marq{border-top:1px solid var(--l-soft);border-bottom:1px solid var(--l-soft);overflow:hidden;white-space:nowrap;padding:1rem 0;color:var(--blanco)}
.marq .track{display:inline-flex;gap:0;animation:mq var(--mq-dur,40s) linear infinite;will-change:transform;backface-visibility:hidden}
/* el espacio va en cada elemento (no «gap»): así las dos mitades miden exactamente lo mismo y la vuelta no salta */
.marq .track>*{margin-right:3rem}
.marq.quieta .track,.marq.quieta svg,.disc.quieta,.disc.quieta *{animation-play-state:paused!important} /* fuera de pantalla no se anima */
.marq span{font-family:var(--mono);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
.marq i{font-style:normal;color:var(--beige)}
.marq .mq-marca{font-family:var(--display);font-weight:300;font-size:1.15rem;letter-spacing:-.01em;color:var(--beige);line-height:1}
.marq .track{align-items:center}
.marq .mq-logo{display:inline-block;flex:none;background:var(--beige);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.marq .mq-sep{display:inline-flex;align-items:center;justify-content:center;flex:none}
.marq .mq-sep svg{display:block;overflow:visible;flex:none}
.marq .mq-estrella svg{width:15px;min-width:15px;height:15px;fill:var(--beige);animation:mq-gira 9s linear infinite}
.marq .mq-onda{width:34px;height:14px;overflow:hidden}.marq .mq-onda svg{width:34px;height:14px;fill:none;stroke:var(--beige);stroke-width:1.4;stroke-linecap:round;overflow:visible;animation:mq-ola 1.2s linear infinite} /* se mueve el svg entero (va por la tarjeta gráfica); mover el <g> recalculaba la página en cada fotograma */
@keyframes mq-gira{to{transform:rotate(360deg)}}
@keyframes mq-ola{to{transform:translateX(11.333px)}} /* un periodo de la onda: 10 unidades del viewBox (30) a 34px */
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* tarjetas: luz que sigue al puntero */
.cell,.card{position:relative}
/* Solo se ilumina el borde, con un degradado muy suave que sigue al puntero:
   nunca se dibuja un rectángulo de luz dentro de la tarjeta */
.cell::before,.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;padding:1px;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(217,201,164,.55),rgba(217,201,164,.12) 45%,transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity .6s var(--ease)}
.cell::after,.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(217,201,164,.045),transparent 70%);transition:opacity .8s var(--ease)}
@media (hover:hover){.cell:hover::before,.card:hover::before{opacity:1}.cell:hover::after,.card:hover::after{opacity:1}}
/* tarjetas con formularios: sin luces, el foco va a los campos */
.card:has(input,textarea,select)::before,.card:has(input,textarea,select)::after,.cell:has(input,textarea,select)::before,.cell:has(input,textarea,select)::after{display:none}

/* campos: línea que se dibuja al escribir, etiqueta que se ilumina, sin cuadros del navegador */
.f{position:relative}
.f input,.f select,.f textarea{transition:border-color .2s var(--ease);-webkit-appearance:none;appearance:none;outline:none;box-shadow:none}
.f select{-webkit-appearance:auto;appearance:auto}
.f:has(input,textarea)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--beige);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);pointer-events:none}
.f:focus-within::after{transform:scaleX(1)}
.f .lbl,.f label{transition:color .2s var(--ease)}
.f:focus-within .lbl,.f:focus-within label{color:var(--beige)}
.f input:-webkit-autofill,.f input:-webkit-autofill:hover,.f input:-webkit-autofill:focus{-webkit-text-fill-color:var(--blanco);caret-color:var(--blanco);-webkit-box-shadow:0 0 0 1000px var(--tinta) inset;box-shadow:0 0 0 1000px var(--tinta) inset;transition:background-color 9999s}
.modal .f input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--tinta-2) inset;box-shadow:0 0 0 1000px var(--tinta-2) inset}
input,textarea,select,button,a{-webkit-tap-highlight-color:transparent}
:focus{outline:none}
:focus-visible{outline:1px solid var(--beige);outline-offset:3px;border-radius:999px}
.f :focus-visible{outline:none}
a.cell{transition:background .25s var(--ease)}
a.cell .go{display:inline-block;transition:transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){a.cell:hover .go{transform:translateX(6px)}}

/* nav al hacer scroll */
.nav{transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--l)}

/* botones */
.btn{will-change:transform}

@media (prefers-reduced-motion:reduce){
  body::after,.marq .track,.marq .mq-sep svg,.marq .mq-onda g,.pase .slide.on img,.scroll-cue::after{animation:none!important} /* el disco sigue animado: es la marca */
  .rv,.fade,.rv-grid>*>*,.lines .ln>span{transform:none!important}
  .word .ch{transform:none;animation:fadein .6s ease forwards!important}
  .photo[data-reveal],.rv-grid figure[data-foto],.galeria.rv-grid>figure{clip-path:none!important}
  .hero.foto .hero-bg img{transform:none!important;animation:none!important}
  .mani .w{opacity:1}.cur{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}


/* al subir: lo que salió por arriba vuelve a entrar desde arriba */
.rv.arriba{transform:translateY(-34px)}
.lines.arriba .ln>span{transform:translateY(-105%)}
.rv-grid.arriba>*>*{transform:translateY(-22px)}

/* =========================================================
   ANIMACIONES LIGADAS AL SCROLL (21/10/2026)
   En los navegadores que lo admiten (Chrome, Edge, Safari 26+, Samsung…) el movimiento va pegado al
   desplazamiento: al bajar, cada bloque entra desde abajo; al seguir bajando, sale suavemente por arriba;
   al subir, todo se rebobina al revés. Lo calcula el navegador fuera del hilo principal: no da tirones en móvil.
   Solo se animan opacidad, transformaciones y recortes (nada que recoloque la página).
   Sin soporte (Firefox, Safari antiguo) se quedan las animaciones de arriba (aparecer al entrar, en los dos sentidos).
   ========================================================= */
@keyframes sd-entra{from{opacity:0;transform:translate3d(0,56px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes sd-sale{to{opacity:0;transform:translate3d(0,-36px,0)}}
@keyframes sd-izq{from{opacity:0;transform:translate3d(-28px,0,0)}to{opacity:1;transform:none}}
@keyframes sd-linea{from{transform:translate3d(0,110%,0) rotate(2.5deg)}to{transform:none}}
@keyframes sd-linea-sale{to{transform:translate3d(0,-105%,0) rotate(-1.5deg)}}
@keyframes sd-tarjeta{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}
@keyframes sd-tarjeta-sale{to{opacity:.0;transform:translate3d(0,-22px,0)}}
@keyframes sd-recorte{from{clip-path:inset(14% 8% 14% 8% round 6px)}to{clip-path:inset(0 0 0 0 round 6px)}}
@keyframes sd-cortina{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sd-paralaje{from{transform:translate3d(0,-7%,0) scale(1.14)}to{transform:translate3d(0,7%,0) scale(1.04)}}
@keyframes sd-hero{to{opacity:.15;transform:translate3d(0,-70px,0)}}
@keyframes sd-hero-sube{to{transform:translate3d(0,-40px,0)}} /* portada fija: solo sube un poco; el apagado lo hace la capa que la tapa (sin doble fundido) */
@keyframes sd-hero-fondo{to{transform:scale(1.08)}}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* textos, notas, filas y tarjetas sueltas: entran, y al pasar de largo salen por arriba */
    html.sdr .rv{opacity:1;transform:none;transition:none;
      animation:sd-entra linear both,sd-sale linear forwards;animation-timeline:view(),view();
      animation-range:entry 0% entry 60%,exit 25% exit 100%}
    html.sdr .rv.d1{animation-range:entry 4% entry 64%,exit 25% exit 100%}
    html.sdr .rv.d2{animation-range:entry 8% entry 68%,exit 25% exit 100%}
    html.sdr .rv.d3{animation-range:entry 12% entry 72%,exit 25% exit 100%}
    html.sdr .rv.d4{animation-range:entry 16% entry 76%,exit 25% exit 100%}
    /* número y etiqueta de sección: desde la izquierda */
    html.sdr .sec-head .num.rv,html.sdr section > .wrap > .lbl.rv{animation-name:sd-izq,sd-sale}

    /* titulares: cada línea sube desde su máscara, con un leve giro, y se va por arriba al pasar */
    html.sdr .lines{view-timeline:--titular block}
    html.sdr .lines .ln>span{transition:none;transform-origin:0 100%;
      animation:sd-linea linear both,sd-linea-sale linear forwards;animation-timeline:--titular,--titular;
      animation-range:entry 0% entry 100%,exit 35% exit 100%}
    html.sdr .lines .ln:nth-child(2)>span{animation-range:entry 15% cover 40%,exit 35% exit 100%}
    html.sdr .lines .ln:nth-child(3)>span{animation-range:entry 30% cover 45%,exit 35% exit 100%}

    /* rejillas: el fondo queda quieto; entra el contenido de cada tarjeta, en cascada dentro de ella y entre columnas */
    html.sdr .rv-grid>*{view-timeline:--tarjeta block}
    html.sdr .rv-grid>*>*{opacity:1;transform:none;transition:none;
      animation:sd-tarjeta linear both,sd-tarjeta-sale linear forwards;animation-timeline:--tarjeta,--tarjeta;
      animation-range:entry 0% entry 30%,exit 75% exit 100%}
    html.sdr .rv-grid>*>:nth-child(2){animation-range:entry 3% entry 33%,exit 75% exit 100%}
    html.sdr .rv-grid>*>:nth-child(n+3){animation-range:entry 6% entry 36%,exit 75% exit 100%}
    @media (min-width:701px){
      html.sdr .rv-grid>:nth-child(3n+2)>*{animation-range:entry 6% entry 36%,exit 75% exit 100%}
      html.sdr .rv-grid>:nth-child(3n)>*{animation-range:entry 10% entry 40%,exit 75% exit 100%}
    }
    /* fotos de las rejillas y galerías: cortina de arriba abajo */
    html.sdr .rv-grid figure[data-foto],html.sdr .galeria.rv-grid>figure{clip-path:none;transition:none;
      animation:sd-cortina linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    html.sdr .galeria.rv-grid>figure{animation-timeline:view()}

    /* fotos grandes: se descubren y tienen paralaje (sustituye al paralaje por JavaScript) */
    html.sdr .photo[data-reveal]{transition:none;animation:sd-recorte linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    html.sdr .photo[data-parallax]{view-timeline:--foto block}
    html.sdr .photo[data-parallax] img{animation:sd-paralaje linear both;animation-timeline:--foto;animation-range:cover 0% cover 100%}

    /* portada: al bajar, el texto se aleja y la foto se acerca; al subir vuelve */
    html.sd .hero.vivo>.wrap,html.sd .hero.foto>.wrap{animation:sd-hero linear both;animation-timeline:scroll(root block);animation-range:0 85vh}
    html.sd .hero.portada-fija>.wrap{animation-name:sd-hero-sube}
    html.sd .hero.vivo .fondo{animation:sd-hero-fondo linear both;animation-timeline:scroll(root block);animation-range:0 100vh}
  }
}
/* móvil: recorridos más cortos (en pantallas pequeñas 56 px es mucho) */
@media (max-width:700px){
  @keyframes sd-entra{from{opacity:0;transform:translate3d(0,32px,0)}to{opacity:1;transform:none}}
  @keyframes sd-tarjeta{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
  @keyframes sd-sale{to{opacity:0;transform:translate3d(0,-20px,0)}}
}

/* ---------- Nosotros: fotos del equipo sin fondo ---------- */
.equipo-split{align-items:center}
.equipo{position:relative;margin:0;justify-self:center;width:min(440px,100%);aspect-ratio:4/5.4;display:grid;place-items:end center;isolation:isolate}
.eq-luz{position:absolute;inset:6% 0 14%;border-radius:50%;background:radial-gradient(closest-side,rgba(217,201,164,.34),rgba(217,201,164,.08) 60%,transparent 100%);filter:blur(6px);z-index:-2}
.eq-anillo{position:absolute;left:50%;top:44%;width:86%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(217,201,164,.35);z-index:-1;
  background:conic-gradient(from var(--a),transparent 0deg,rgba(217,201,164,.5) 14deg,transparent 40deg);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));animation:spin 9s linear infinite}
.eq-gente{position:relative;display:block;width:100%;height:92%;animation:float 7s ease-in-out infinite}
.eq-pose{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45)) saturate(1.02);opacity:0}
.eq-pose.p1{opacity:1}
.eq-sombra{position:absolute;bottom:4%;left:18%;right:18%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);z-index:-1;animation:sombra 7s ease-in-out infinite}
.eq-firma{position:absolute;bottom:-1.6rem;left:0;right:0;display:flex;justify-content:center;gap:.8rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--b70)}
.eq-firma i{font-style:normal;color:var(--beige)}
@keyframes sombra{50%{transform:scaleX(.88);opacity:.7}}
/* sin animaciones de scroll: las poses se turnan solas */
@keyframes eqTurno{0%,28%{opacity:1}34%,94%{opacity:0}100%{opacity:1}}
.eq-pose{animation:eqTurno 10.5s ease-in-out infinite}
.eq-pose.p2{animation-delay:3.5s}.eq-pose.p3{animation-delay:7s}
/* con animaciones de scroll: la pose la marca el desplazamiento (al subir, vuelve atrás) y el grupo se acerca */
/* cambio seco de pose («pum»): un instante de fundido con un pequeño rebote, nunca dos fotos mezcladas un buen rato */
@keyframes eqP1{0%,32%{opacity:1;transform:none}34%,100%{opacity:0;transform:scale(.97)}}
@keyframes eqP2{0%,32%{opacity:0;transform:scale(1.04)}34%{opacity:1;transform:scale(1.02)}38%,64%{opacity:1;transform:none}66%,100%{opacity:0;transform:scale(.97)}}
@keyframes eqP3{0%,64%{opacity:0;transform:scale(1.04)}66%{opacity:1;transform:scale(1.02)}70%,100%{opacity:1;transform:none}}
@keyframes eqEntra{from{opacity:0;transform:translate3d(0,60px,0) scale(.94)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html.sd .equipo{view-timeline:--equipo block;animation:eqEntra linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    html.sd .eq-pose{animation:eqP1 linear both;animation-timeline:--equipo;animation-range:cover 10% cover 90%}
    html.sd .eq-pose.p2{animation-name:eqP2}html.sd .eq-pose.p3{animation-name:eqP3}
  }
}
@media (max-width:700px){.equipo{width:min(340px,86vw);margin-top:2rem}}
@media (prefers-reduced-motion:reduce){.eq-pose,.eq-gente,.eq-anillo,.eq-sombra{animation:none!important}.eq-pose.p1{opacity:1}.eq-pose.p2,.eq-pose.p3{opacity:0}}

/* ---------- titulares palabra a palabra, párrafos con enfoque y barra de progreso (22/10/2026) ---------- */
.lines .wd{display:inline-block}
@keyframes sd-palabra{from{opacity:0;transform:translate3d(0,105%,0) rotate(5deg)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes sd-enfoque{from{opacity:0;transform:translate3d(0,40px,0);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes sd-progreso{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mb-progreso{display:none}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* la línea entera solo se encarga de salir; entrar lo hace cada palabra, en cascada */
    html.sdr .lines .ln>span{animation:sd-linea-sale linear forwards;animation-timeline:--titular;animation-range:exit 35% exit 100%}
    html.sdr .lines .wd{transform-origin:0 100%;animation:sd-palabra linear both;animation-timeline:--titular;
      animation-range:entry calc(var(--i, 0) * 7%) entry calc(75% + var(--i, 0) * 7%)}
    @media (min-width:900px) and (pointer:fine){
      html.sdr .lead.rv,html.sdr .sec-head p.rv{animation-name:sd-enfoque,sd-sale}
    }
    /* barra de progreso de la página: línea fina arriba del todo que se llena al bajar y se vacía al subir */
    html.sd .mb-progreso{display:block;position:fixed;left:0;right:0;top:calc(var(--nav-h,68px) - 2px);height:2px;z-index:99;pointer-events:none;background:var(--beige);transform-origin:0 50%;
      animation:sd-progreso linear both;animation-timeline:scroll(root block)}
  }
}

/* =========================================================
   PÁGINAS QUE SE APILAN Y EFECTOS 3D (22/10/2026, al estilo de los «tilt/arc/reveal» de las webs de estudio)
   ========================================================= */
@keyframes apTapada{from,10%{transform:none;opacity:1;border-radius:0}70%{transform:scale(.97);opacity:1;border-radius:18px}96%{transform:scale(.94);opacity:.92;border-radius:28px}to{transform:scale(.93);opacity:0;border-radius:30px;visibility:hidden}} /* la portada sigue viéndose mientras la siguiente sección le pasa por encima; solo se va cuando ya está tapada del todo (antes se oscurecía y quedaba un momento en negro) */ /* tapada del todo: desaparece (si no, se transparentaba detrás del resto de la página) */
@keyframes apSale{to{transform:scale(.95);opacity:.35;border-radius:30px}} /* al salir por arriba: se aleja y casi desaparece (la que entra gana presencia) */
@keyframes apEntra{from{transform:translate3d(0,40px,0) scale(.985)}to{transform:none}}
@keyframes sd-palabra3d{from{opacity:0;transform:perspective(700px) translate3d(0,40%,0) rotateX(-85deg)}55%{opacity:1}to{opacity:1;transform:none}}
@keyframes sd-arco{from{opacity:0;transform:perspective(1000px) translate3d(0,70px,-60px) rotateX(32deg)}to{opacity:1;transform:none}}
@keyframes sd-telon{from{clip-path:inset(28% 0 0 0 round 10px);transform:scale(1.12);opacity:.35}to{clip-path:inset(0 0 0 0 round 10px);transform:none;opacity:1}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* cada sección sube montada sobre la anterior; la que sale por arriba se aleja y se apaga un poco */
    html.sd main[data-apilar]>.apila{position:relative;background:var(--tinta);transform-origin:50% 0%;
      animation:apEntra linear both,apSale linear both;animation-timeline:view(),view();animation-range:entry 0% entry 45%,exit 10% exit 100%}
    html.sd main[data-apilar]>.apila:first-child{animation:apSale linear both;animation-timeline:view();animation-range:exit 10% exit 100%}
    /* primera sección fija: la siguiente le pasa por encima y ella se aleja y se apaga mientras tanto */
    html.sd main[data-apilar]>.apila.portada-fija{position:sticky;animation:apTapada linear both;animation-timeline:--tapa;animation-range:cover 0px cover calc(100vh - var(--nav-h,64px))} /* termina justo cuando la sección siguiente llega arriba (bajo el menú) y ya la tapa entera, sea más alta o más baja que la pantalla */
    html.sd main[data-apilar]>.apila-extra{position:relative;z-index:3;background:var(--tinta)}
    html.sd main[data-apilar]>.apila-extra+.apila.apila{margin-top:0;border-top-left-radius:26px;border-top-right-radius:26px;animation-name:none,apSale}
    /* el borde de arriba: una línea fina de luz (antes una sombra negra que se metía en la sección de encima) */
    html.sd main[data-apilar]>.apila+.apila,html.sd main[data-apilar]>.marq+.apila{margin-top:-26px;border-top-left-radius:26px;border-top-right-radius:26px;border-top:1px solid rgba(217,201,164,.28)}
    html.sd main[data-apilar]~footer{position:relative;z-index:60;background:var(--tinta)}
    /* titulares: cada palabra se levanta en 3D desde su base */
    html.sdr .lines .wd{transform-origin:50% 100%;animation-name:sd-palabra3d}
    /* contenido de tarjetas: entra en arco 3D */
    html.sdr .rv-grid>*>*{animation-name:sd-arco,sd-tarjeta-sale}
    /* fotos de tarjetas y galerías: telón de abajo arriba con un ligero zum */
    html.sdr .rv-grid figure[data-foto],html.sdr .galeria.rv-grid>figure{animation-name:sd-telon}
  }
}
/* tarjetas: se inclinan en 3D siguiendo el puntero (solo con ratón) */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .grid,.steps{perspective:1400px}
  .cell,.card{rotate:var(--tx,0) var(--ty,0) 0 var(--tang,0deg);transition:rotate .3s var(--ease),scale .3s var(--ease)}
  .cell:hover,.card:hover{scale:1.015}
  .card:has(input,textarea,select),.cell:has(input,textarea,select),#mbModal .cell,#mbModal .card{rotate:none;scale:none} /* con formularios o dentro de una ventana, nada crece al pasar el ratón (cortaba los textos) */
}

/* ---------- Nosotros: «De obra a estudio» ---------- */
.obra{padding-bottom:clamp(40px,6vw,80px)}
.obra-ventana{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:clamp(24px,4vw,48px)}
.obra-ventana::-webkit-scrollbar{display:none}
.obra-pista{display:flex;gap:clamp(14px,2vw,28px);padding:0 max(16px,calc((100vw - 1240px)/2));width:max-content;align-items:flex-end}
.obra-foto{margin:0;flex:none;width:min(78vw,420px);scroll-snap-align:center}
.obra-foto:nth-child(odd){rotate:-1.2deg}.obra-foto:nth-child(even){rotate:1deg;margin-bottom:28px}
.obra-foto img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:10px;box-shadow:0 30px 60px rgba(0,0,0,.45);transition:transform .8s var(--ease),filter .8s var(--ease)}
@media (hover:hover) and (pointer:fine){.obra-foto:hover img{transform:scale(1.03);filter:saturate(1.1)}}
.obra-foto figcaption{display:grid;gap:.2rem;margin-top:.9rem}
.obra-foto figcaption b{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--beige)}
.obra-foto figcaption span{color:var(--b70);font-size:.92rem}
@keyframes obraX{to{transform:translate3d(calc(-100% + 100vw),0,0)}}
@keyframes obraFoto{from{opacity:0;transform:translate3d(0,80px,0) rotate(4deg)}to{opacity:1;transform:none}}
/* ordenador con animaciones de scroll: la sección se queda fija y la tira avanza en horizontal al bajar */
@supports (animation-timeline:view()){
  @media (min-width:900px) and (prefers-reduced-motion:no-preference){
    html.sd .obra{height:340vh;padding:0;view-timeline:--obra block}
    html.sd .obra-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:clip;padding-top:70px}
    html.sd .obra-ventana{overflow:visible;scroll-snap-type:none}
    html.sd .obra-pista{animation:obraX linear both;animation-timeline:--obra;animation-range:contain 5% contain 95%}
    html.sd .obra-foto{width:min(26vw,36vh,400px)}
    html.sd .obra-cab{flex:none}
    html.sd .obra-foto img{animation:obraFoto linear both;animation-timeline:--obra;animation-range:contain 0% contain 18%}
  }
}


/* ---------- Quiénes somos: poses que cambian y polaroids que entran «pum, pum, pum» ---------- */
.equipo{overflow:visible}
.eq-polas{display:flex;justify-content:center;gap:0;position:absolute;left:0;right:0;top:calc(100% + 3.4rem);z-index:2}
.equipo{margin-bottom:calc(clamp(96px,26vw,150px) * 1.35 + 4.5rem)}
.eq-pola{width:clamp(96px,26vw,150px);height:auto;aspect-ratio:4/5;object-fit:cover;background:#f4efe4;padding:6px 6px 22px;border-radius:3px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);margin:0 -10px}
.eq-pola.q1{rotate:-8deg}.eq-pola.q2{rotate:4deg;translate:0 -10px}.eq-pola.q3{rotate:-3deg}
@keyframes eqPum{0%{opacity:0;transform:translate3d(var(--dx,0),120px,0) scale(.6) rotate(var(--dr,-20deg))}70%{opacity:1;transform:translate3d(0,-8px,0) scale(1.06) rotate(0)}100%{opacity:1;transform:none}}
.eq-pola.q1{--dx:-120px;--dr:-25deg}.eq-pola.q2{--dx:0px;--dr:18deg}.eq-pola.q3{--dx:120px;--dr:-14deg}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* móvil: las poses las marca la propia foto al pasar; las polaroids entran una tras otra */
    html.sd .eq-polas{view-timeline:--polas block}
    html.sd .eq-pola{animation:eqPum linear both;animation-timeline:--polas}
    html.sd .eq-pola.q1{animation-range:entry 0% cover 30%}html.sd .eq-pola.q2{animation-range:entry 20% cover 38%}html.sd .eq-pola.q3{animation-range:entry 40% cover 46%}
    /* ordenador: la sección se queda fija mientras pasáis por las tres poses y luego entran las polaroids */
    @media (min-width:900px){
      html.sd .quienes{height:300vh;padding:0;view-timeline:--quienes block}
      html.sd .quienes-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:70px}
      html.sd .equipo{animation:none;width:min(400px,100%);height:min(62vh,560px);aspect-ratio:auto;margin-bottom:0}
      html.sd .eq-pose{animation-timeline:--quienes;animation-range:contain 0% contain 62%}
      html.sd .eq-polas{position:absolute;inset:0;top:0;margin:0;display:block;pointer-events:none}
      html.sd .eq-pola{position:absolute;width:clamp(120px,11vw,170px);margin:0;animation-timeline:--quienes}
      html.sd .eq-pola.q1{left:-34%;top:6%;animation-range:contain 58% contain 70%}
      html.sd .eq-pola.q2{right:-30%;top:22%;animation-range:contain 68% contain 80%}
      html.sd .eq-pola.q3{left:-26%;bottom:6%;animation-range:contain 78% contain 90%}
    }
  }
}
@media (prefers-reduced-motion:reduce){.eq-pola{animation:none!important;opacity:1}}

/* ---------- Inicio: «Grabamos por ti» (videoset + asistida) y «El estudio por dentro» ---------- */
.serv-pro{align-items:stretch}
.serv-card{display:flex;flex-direction:column;padding:clamp(16px,2vw,24px)}
.serv-card .row{margin-top:auto;padding-top:1.4rem}
.serv-foto{border-radius:10px;overflow:hidden;margin:0}

.galmov{overflow:clip}
.gm-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,22px);width:min(1240px,100% - 32px);margin:clamp(24px,4vw,48px) auto 0;align-items:start}
.gm-col{display:grid;gap:clamp(10px,1.6vw,22px)}
.gm-col .photo{border-radius:10px;overflow:hidden;margin:0}
.gm-col.c2{margin-top:clamp(40px,8vw,120px)}
@keyframes gmSube{from{transform:translate3d(0,var(--gm-a),0)}to{transform:translate3d(0,var(--gm-b),0)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* cada columna a su ritmo: la del medio va al revés que las de los lados */
    html.sd .galmov{view-timeline:--galmov block}
    html.sd .gm-col{animation:gmSube linear both;animation-timeline:--galmov;animation-range:cover 0% cover 100%}
    html.sd .gm-col.c1{--gm-a:90px;--gm-b:-90px}html.sd .gm-col.c2{--gm-a:-70px;--gm-b:110px}html.sd .gm-col.c3{--gm-a:160px;--gm-b:-160px}
  }
}


/* ---------- variedad: tres estilos que se turnan por secciones (.ef-a, .ef-b, .ef-c) ---------- */
@keyframes efB-palabra{from{opacity:0;transform:translate3d(-40px,0,0);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes efC-palabra{from{opacity:0;transform:scale(1.6);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes efB-tarjeta{from{opacity:0;transform:translate3d(var(--lado,-80px),0,0) rotate(var(--giro,-3deg))}to{opacity:1;transform:none}}
@keyframes efC-tarjeta{from{opacity:0;transform:scale(.8) translate3d(0,40px,0)}70%{opacity:1;transform:scale(1.03)}to{opacity:1;transform:none}}
@keyframes efB-foto{from{clip-path:polygon(0 0,40% 0,20% 100%,0 100%);transform:scale(1.15)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:none}}
@keyframes efC-foto{from{clip-path:circle(22% at 50% 50%);transform:scale(1.3)}to{clip-path:circle(75% at 50% 50%);transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html.sdr .ef-b .lines .wd{animation-name:efB-palabra}
    html.sdr .ef-c .lines .wd{animation-name:efC-palabra;transform-origin:50% 60%}
    html.sdr .ef-b .rv-grid>*>*{animation-name:efB-tarjeta,sd-tarjeta-sale}
    html.sdr .ef-b .rv-grid>:nth-child(even)>*{--lado:80px;--giro:3deg}
    html.sdr .ef-c .rv-grid>*>*{animation-name:efC-tarjeta,sd-tarjeta-sale}
    html.sdr .ef-b .rv-grid figure[data-foto],html.sdr .ef-b .photo[data-reveal]{animation-name:efB-foto}
    html.sdr .ef-c .rv-grid figure[data-foto],html.sdr .ef-c .photo[data-reveal]{animation-name:efC-foto}
  }
}


/* ---------- Inicio: entrada por etapas tras la pantalla de carga ---------- */
.hero.vivo .intro-foto{position:absolute;inset:0}
@keyframes introFoto{from{opacity:0}to{opacity:1}} /* la foto entra plana, solo con un fundido: el giro es solo del disco */
@keyframes introDisco{from{opacity:0;transform:scale(.2) rotate(-200deg)}to{opacity:1;transform:none}}
@keyframes introNav{from{transform:translate3d(0,-110%,0);opacity:0}to{transform:none;opacity:1}}
@keyframes introCinta{from{transform:translate3d(40%,0,0);opacity:0}to{transform:none;opacity:1}}
@keyframes introBoton{0%{opacity:0;transform:translate3d(0,24px,0) scale(.9)}70%{opacity:1;transform:scale(1.04)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  body:has(.hero.vivo) .hero.vivo .intro-foto{opacity:0} /* antes de la entrada, escondida; luego aparece plana con un fundido */
  body.ready:has(.hero.vivo) .hero.vivo .intro-foto{animation:introFoto .55s var(--ease-out) 0s both}
  body.ready:has(.hero.vivo) .hero.vivo .disc{animation:introDisco .8s cubic-bezier(.2,.9,.2,1) .15s both,float 7s ease-in-out 1s infinite}
  body.ready:has(.hero.vivo) .nav{animation:introNav .55s cubic-bezier(.2,.9,.2,1) .05s both}
  body.ready:has(.hero.vivo) .hero.vivo .fade.d1{transition-delay:.4s}
  body.ready:has(.hero.vivo) .hero.vivo .fade.d2{transition-delay:.75s}
  body:has(.hero.vivo) .hero.vivo .row.fade .btn{opacity:0}
  body.ready:has(.hero.vivo) .hero.vivo .row.fade .btn{animation:introBoton .55s cubic-bezier(.2,.9,.2,1) both}
  body.ready:has(.hero.vivo) .hero.vivo .row.fade .btn:nth-child(1){animation-delay:.85s}
  body.ready:has(.hero.vivo) .hero.vivo .row.fade .btn:nth-child(2){animation-delay:.95s}
  body.ready:has(.hero.vivo) .hero.vivo .row.fade{transition-delay:.8s}
  body:has(.hero.vivo) main>.marq{opacity:0}
  body.ready:has(.hero.vivo) main>.marq{animation:introCinta .7s cubic-bezier(.2,.9,.2,1) 1s both}
}

/* bloques sueltos (.rv) con el estilo de su sección */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html.sdr .ef-b .rv{animation-name:efB-palabra,sd-sale}
    html.sdr .ef-c .rv{animation-name:efC-tarjeta,sd-sale}
  }
}

/* ---------- cada sección llega entera a la pantalla: lo hace anim.js («paso de sección»), no el encaje del navegador ---------- */

/* =========================================================
   VENTANAS (23/10/2026): aparecen en ~0,2 s (fondo y hoja); al cerrar desaparecen al instante, nunca bloquean
   ========================================================= */
@keyframes modalFondo{from{opacity:0}}
@keyframes modalHoja{from{opacity:0;transform:translateY(8px)}} /* sin escala: en el iPhone parecía un zoom */
@keyframes modalFondoSale{to{opacity:0}}
@keyframes modalHojaSale{to{opacity:0}}
.modal.open{animation:modalFondo .25s var(--ease-out)}
.modal.open>.sheet{animation:modalHoja .25s var(--ease-out)}
.modal.cerrando{animation:modalFondoSale .15s var(--ease-out) forwards;pointer-events:none}
.modal.cerrando>.sheet{animation:modalHojaSale .15s var(--ease-out) forwards}
@media (prefers-reduced-motion:reduce){.modal.open>.sheet{animation-name:modalFondo}.modal.cerrando>.sheet{animation-name:modalFondoSale}} /* sin escala: solo fundido */

/* =========================================================
   GSAP (26/10/2026): con html.gs, las entradas las anima GSAP. El CSS solo pone el estado inicial (escondido) y aquí
   se quitan las transiciones, que pelearían con GSAP fotograma a fotograma.
   ========================================================= */
html.gs .rv,html.gs .rv-grid>*>*,html.gs .rv-grid figure[data-foto],html.gs .galeria.rv-grid>figure,html.gs .photo[data-reveal],html.gs .photo[data-reveal] img,html.gs .steps.rv-grid>*::before{transition:none!important}
/* con GSAP el CSS no esconde nada: solo GSAP esconde lo que él mismo va a enseñar (así lo que llega después, como
   tarjetas que la página pinta tras cargar, nunca se queda invisible) */
html.gs .rv,html.gs .rv-grid>*>*{opacity:1;transform:none}
html.gs .rv-grid figure[data-foto],html.gs .galeria.rv-grid>figure,html.gs .photo[data-reveal]{clip-path:none}
html.gs .gs-ln-mask{padding-bottom:.14em;margin-bottom:-.14em} /* la máscara de cada línea no corta las letras con cola (g, j, p) */
html.gs .marq{will-change:transform}
.eq-firma .rombo{display:inline-block;width:6px;height:6px;background:var(--beige);transform:rotate(45deg);align-self:center}

/* =========================================================
   MOVIMIENTO DE LA INTERFAZ (27/10/2026 · /animate + Emil Kowalski): menú, preguntas y pestañas
   ========================================================= */
/* menú del móvil: cae desde arriba en 200 ms (desde su botón), sin JS */
@media (max-width:960px){
  .links.open{opacity:1;transform:none;transform-origin:top right;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
  @starting-style{.links.open{opacity:0;transform:translateY(-8px) scale(.98)}}
}
/* preguntas frecuentes: la respuesta se despliega (altura y opacidad, 220 ms) donde el navegador lo permite */
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;opacity:0;overflow:clip;transition:block-size .22s var(--ease-out),opacity .22s var(--ease-out),content-visibility .22s allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
}
/* pestañas de Los boxes: la pastilla se desliza a la sala elegida (250 ms, in-out: se mueve dentro de la pantalla) */
.bx-tabs{position:relative;isolation:isolate}
.bx-tabs .bx-ind{position:absolute;z-index:-1;top:6px;bottom:6px;left:6px;width:calc(50% - 9px);border-radius:10px;background:var(--beige);transition:transform .25s var(--ease-in-out)}
.bx-tabs[data-sala="prod"] .bx-ind{transform:translateX(calc(100% + 6px))}
.bx-tabs:has(.bx-ind) button.on{background:transparent}
.bx-tabs button{transition:color .25s var(--ease-in-out)}
/* al cambiar de sala, el panel nuevo entra en 250 ms (no al cargar la página) */
@keyframes bxEntra{from{opacity:0;transform:translateY(8px)}}
.bx-panel.cambio{animation:bxEntra .25s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.bx-tabs .bx-ind,.bx-tabs button{transition:none}.bx-panel.cambio{animation:none}.links.open{transition:none}}
/* La sección en la que estás se queda entera y nítida mientras la lees (28/10/2026): antes empezaba a encogerse y
   apagarse en cuanto su borde de arriba llegaba arriba, aunque aún se estuviera leyendo su parte de abajo. Ahora solo
   se aleja en el último tramo, cuando la siguiente ya ocupa la mayor parte de la pantalla, y nunca baja de 0,6. */
@keyframes apSale{to{transform:scale(.97);opacity:.6;border-radius:24px}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html.sd main[data-apilar]>.apila:not(.portada-fija):not(:first-child){animation-range:entry 0% entry 45%,exit calc(100% - 38vh) exit 100%}
    html.sd main[data-apilar]>.apila:first-child:not(.portada-fija){animation-range:exit calc(100% - 38vh) exit 100%}
  }
}

/* =========================================================
   NOSOTROS CON MÁS IMPACTO (28/10/2026)
   ========================================================= */
/* cifras de la cabecera: cuentan solas al verse */
.nos-cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--l);border-bottom:1px solid var(--l)}
.nos-cifras>div{padding:clamp(16px,2vw,26px) clamp(10px,1.6vw,22px);display:flex;flex-direction:column;gap:.35rem;opacity:0;transform:translateY(14px);animation:nosCifra .8s cubic-bezier(.23,1,.32,1) both}
.nos-cifras>div+div{border-left:1px solid var(--l)}
.nos-cifras>div:nth-child(1){animation-delay:.35s}.nos-cifras>div:nth-child(2){animation-delay:.45s}.nos-cifras>div:nth-child(3){animation-delay:.55s}.nos-cifras>div:nth-child(4){animation-delay:.65s}
.nos-cifras b{font-family:var(--display);font-weight:200;font-size:clamp(2.2rem,4.6vw,3.8rem);letter-spacing:-.05em;line-height:1;color:var(--beige);font-variant-numeric:tabular-nums}
.nos-cifras span{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--b70)}
@keyframes nosCifra{to{opacity:1;transform:none}}
@media(max-width:700px){.nos-cifras{grid-template-columns:1fr 1fr}.nos-cifras>div:nth-child(3){border-left:0}.nos-cifras>div:nth-child(n+3){border-top:1px solid var(--l)}}

/* De obra a estudio: las fotos ya están al llegar (antes había un hueco negro) y una línea marca el avance */
.obra-prog{height:2px;margin-top:clamp(18px,3vh,30px);background:rgba(232,220,196,.14);border-radius:2px;overflow:hidden}
.obra-prog i{display:block;height:100%;background:var(--beige);transform:scaleX(.08);transform-origin:0 50%}
@keyframes obraProg{from{transform:scaleX(.04)}to{transform:scaleX(1)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html.sd .obra-foto img{animation-range:entry 30% contain 8%}
    html.sd .obra-prog i{animation:obraProg linear both;animation-timeline:--obra;animation-range:contain 5% contain 95%}
  }
}

/* Profesores y «Más que horas»: tarjetas numeradas con brillo al pasar */
#profes{counter-reset:nf;gap:14px;border:0;background:none}
#profes>.cell,.nos-mas>.card{position:relative;counter-increment:nf;border:1px solid var(--l);border-radius:20px;padding:clamp(22px,2.4vw,30px);overflow:hidden;
  background:radial-gradient(140% 100% at 100% 0%,rgba(232,220,196,.07),rgba(232,220,196,0) 55%);transition:border-color .3s ease,transform .3s cubic-bezier(.23,1,.32,1)}
.nos-mas{gap:14px;border:0;background:none}
.nos-mas>.card{display:flex;flex-direction:column}
.nos-mas>.card .btn{margin-top:auto;align-self:flex-start}
.nos-mas>.card .lbl{color:var(--beige)}
@media(hover:hover) and (pointer:fine){
  #profes>.cell:hover,.nos-mas>.card:hover{border-color:rgba(232,220,196,.5);transform:translateY(-4px)}
}

/* Cinta grande antes del final: palabras de lo que se hace aquí, en contorno, moviéndose */
.nos-cinta{overflow:hidden;padding:clamp(28px,5vw,64px) 0;border-top:1px solid var(--l);border-bottom:1px solid var(--l);background:var(--tinta)}
.nos-cinta-track{display:inline-flex;align-items:center;gap:clamp(18px,3vw,44px);white-space:nowrap;animation:mq 38s linear infinite;will-change:transform}
.nos-cinta span{font-family:var(--display);font-weight:200;font-size:clamp(3rem,9vw,8.5rem);letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(232,220,196,.6)}
.nos-cinta span:nth-of-type(3n+1){color:var(--beige);-webkit-text-stroke:0}
.nos-cinta i{font-style:normal;color:var(--beige);font-size:clamp(1.2rem,2.4vw,2rem)}
.nos-fin{font-size:clamp(3rem,8vw,6.5rem)!important;line-height:.95;letter-spacing:-.05em}
#presupuesto .narrow{text-align:left}
@media(prefers-reduced-motion:reduce){.nos-cinta-track{animation:none}.nos-cifras>div{animation:none;opacity:1;transform:none}}
.nf-n{display:block;font-family:var(--display);font-weight:200;font-size:2.6rem;letter-spacing:-.04em;line-height:1;color:var(--beige);opacity:.6;margin-bottom:.9rem}
/* Vista previa del panel y ventanas: el texto siempre entero y quieto (sin entradas letra a letra que, al editar,
   se reiniciaban con cada tecla y dejaban el titular invisible) */
html.mb-vista .word .ch,html.mb-embed .word .ch,html.mb-vista .gs-ln,html.mb-embed .gs-ln,html.mb-vista [data-mani] *,html.mb-vista .fade,html.mb-vista .rv,html.mb-vista .rv-grid>*{opacity:1!important;transform:none!important;animation:none!important;clip-path:none!important;filter:none!important;visibility:visible!important}
/* la entrada de la barra no deja la transformación puesta al terminar (si no, el menú del móvil quedaba encerrado en la barra) */
@media (prefers-reduced-motion:no-preference){body.ready:has(.hero.vivo) .nav{animation-fill-mode:backwards!important}}
/* Apilado básico (sin animaciones por scroll): la portada se queda fija y la siguiente sección le pasa por encima */
html.pila-basica main[data-apilar]>.apila{position:relative;background:var(--tinta)}
html.pila-basica main[data-apilar]>.apila.portada-fija{position:sticky}
html.pila-basica main[data-apilar]>.apila+.apila{margin-top:-26px;border-top-left-radius:26px;border-top-right-radius:26px;border-top:1px solid rgba(217,201,164,.28)}
html.pila-basica main[data-apilar]~footer{position:relative;z-index:60;background:var(--tinta)}
/* La cinta de marcas es parte de la marca: con «Reducir movimiento» sigue pasando, más despacio */
@media (prefers-reduced-motion:reduce){.marq .track{animation:mq calc(var(--mq-dur,40s) * 1.8) linear infinite!important}}
/* Formularios: siempre quietos y enteros (los recuadros altos de «Crear cuenta» / «Entrar» se apagaban mientras se rellenaban) */
.rv:has(input,textarea,select),.rv-grid>*:has(input,textarea,select),.rv-grid>*:has(input,textarea,select)>*{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;visibility:visible!important}