/* Pólizas Express · sistema de movimiento
   Todo es CSS nativo + movimiento.js propio: sin librerías, sin scripts
   externos, la CSP no cambia.

   El principio: cada página se mueve como se comporta su gente.
   Pólizas es para asesores inmobiliarios y gestores, que trabajan con prisa
   desde el celular: tiene pulso. Legal es para alguien con un problema serio
   encima: el mismo vocabulario de movimiento, con la mitad de amplitud.

   Regla de oro: todo estado inicial oculto depende de una clase que pone
   JavaScript (.js, .vivo, .vivo-revela, .armando). Sin JS el sitio se ve
   completo y quieto, nunca en blanco.

   Las cuatro páginas legales (privacidad, términos, naturaleza del servicio
   y 404) NO enlazan esta hoja: son documento, no marketing. */

@view-transition { navigation: auto; }

:root{
  --mov-rapido:.26s;
  --mov-medio:.42s;
  --mov-lento:.9s;
  --mov-curva:cubic-bezier(.4,0,.2,1);
  /* Salida larga y suave: la curva de todo lo que «llega». */
  --curva-llega:cubic-bezier(.16,1,.3,1);
  /* Amplitud: inclinación de tarjetas, parallax, desplazamientos. */
  --amp:1;
}
/* Al entrar al área legal la amplitud y la duración bajan. */
[data-area="legal"]{
  --mov-rapido:.18s;
  --mov-medio:.28s;
  --amp:.5;
}

/* ── Transición entre páginas ──────────────────────────────
   La página que se va sube y se desenfoca; la que llega asciende. */
@keyframes vt-sale { to   { opacity:0; translate:0 -14px; filter:blur(4px) } }
@keyframes vt-entra{ from { opacity:0; translate:0 18px } }
::view-transition-old(root){
  animation:vt-sale var(--mov-medio) var(--mov-curva) both;
}
::view-transition-new(root){
  animation:vt-entra var(--mov-lento) var(--curva-llega) both;
}

/* ── El morph de la puerta ─────────────────────────────────
   La tarjeta turquesa y el hero turquesa de la página legal comparten
   nombre: el navegador interpola el elemento ENTRE documentos. No es un
   crossfade, es ese elemento viajando.

   Va dentro de @supports a propósito: sin la API, aplicar el nombre a
   ciegas puede dejar el elemento en un estado intermedio. */
@supports (view-transition-name: none){
  .puerta-enlace{ view-transition-name: puerta-legal; }
  .hero-legal   { view-transition-name: puerta-legal; }

  /* El logo persiste entre páginas, cambiando de morado a dorado en el viaje.
     Solo el del encabezado lleva .logo-e; el del pie no, para que no haya dos
     elementos con el mismo nombre en un documento (la API los descarta). */
  .marca .logo-e{ view-transition-name: marca-e; }

  /* Los flotantes no parpadean al navegar: se quedan donde están. */
  .flotantes   { view-transition-name: pe-flotantes; }
  .wa-flotante { view-transition-name: pe-whatsapp; }

  ::view-transition-group(puerta-legal){
    animation-duration:var(--mov-lento);
    animation-timing-function:var(--curva-llega);
  }
  ::view-transition-group(marca-e){
    animation-duration:var(--mov-medio);
  }

  /* El modal nace desde el botón que lo invocó en vez de aparecer de golpe.
     Solo en pólizas: el área legal no tiene modales.
     El mismo nombre no puede estar en dos elementos a la vez, por eso el botón
     se marca justo antes de abrir y se desmarca al terminar (ver sitio.js). */
  [data-area="polizas"] .modal-abierto .dialogo{ view-transition-name: dialogo-portal; }
  [data-area="polizas"] [data-abre-modal].origen-modal{ view-transition-name: dialogo-portal; }
  ::view-transition-group(dialogo-portal){
    animation-duration:var(--mov-medio);
    animation-timing-function:var(--curva-llega);
  }
}
/* Sin View Transitions (Firefox) el diálogo igual entra con gracia. */
@keyframes dialogo-entra{ from{ opacity:0; scale:.94; translate:0 12px } }
@keyframes velo-entra  { from{ opacity:0 } }
.modal-abierto{ animation:velo-entra .3s ease both }
@supports not (view-transition-name: none){
  .modal-abierto .dialogo{ animation:dialogo-entra .45s var(--curva-llega) both }
}

/* ── La E del encabezado (construcción compacta, 22px) ──────
   Los caminos del SVG son RELLENOS, no líneas: stroke-dasharray no aplica.
   Se resuelve con un barrido de clip-path por grupo. */
.logo-dibujado .le-marco,
.logo-dibujado .le-asta,
.logo-dibujado .le-brazo{
  clip-path:inset(0 100% 0 0);
  animation:le-barrido .34s var(--mov-curva) forwards;
}
.logo-dibujado .le-marco{ animation-delay:0s }
.logo-dibujado .le-asta { animation-delay:.16s }
.logo-dibujado .le-b1   { animation-delay:.26s }
.logo-dibujado .le-b2   { animation-delay:.34s }
.logo-dibujado .le-b3   { animation-delay:.42s }
@keyframes le-barrido{ to{ clip-path:inset(0 0 0 0) } }
/* Durante la intro el header está oculto: el barrido espera a que aparezca. */
.intro .logo-dibujado path{ animation-play-state:paused }

/* Al pasar el mouse por la marca los tres brazos «respiran» hacia afuera. */
.marca .le-brazo{ transition:translate .45s var(--curva-llega) }
.marca:hover .le-b1{ translate:60px 0 }
.marca:hover .le-b2{ translate:110px 0; transition-delay:.05s }
.marca:hover .le-b3{ translate:60px 0; transition-delay:.1s }

/* ── La E que se arma (construcción completa) ───────────────
   Diez piezas: cuatro del marco, tres del asta, tres brazos. Cada una entra
   desde FUERA del marco hasta su lugar — el marco se cierra por los cuatro
   lados, el asta baja y sube, y los brazos llegan desde la derecha.
   Las distancias están en unidades del viewBox (726×1000), así que la
   coreografía es la misma a 54px que a 300px. */
.logo-full .p-t{ --dx:-900px; --dy:0px;    --d:0ms   }
.logo-full .p-r{ --dx:0px;    --dy:-1300px;--d:70ms  }
.logo-full .p-b{ --dx:900px;  --dy:0px;    --d:140ms }
.logo-full .p-l{ --dx:0px;    --dy:1300px; --d:210ms }
.logo-full .a-1{ --dx:0px;    --dy:-1000px;--d:380ms }
.logo-full .a-3{ --dx:0px;    --dy:1000px; --d:430ms }
.logo-full .a-2{ --dx:-700px; --dy:0px;    --d:500ms }
.logo-full .b-1{ --dx:1000px; --dy:0px;    --d:560ms }
.logo-full .b-2{ --dx:1000px; --dy:0px;    --d:640ms }
.logo-full .b-3{ --dx:1000px; --dy:0px;    --d:720ms }

@keyframes le-entra{
  from{ transform:translate(var(--dx),var(--dy)); opacity:0 }
  35% { opacity:1 }
  to  { transform:none; opacity:1 }
}
.logo-full.armando .lp{
  animation:le-entra .8s var(--curva-llega) both;
  animation-delay:var(--d);
}
/* Re-armado en sitio (al pasar el mouse, o al visitar la otra página):
   la misma coreografía, más corta. */
.logo-full.armando.rapido .lp{
  animation-duration:.6s;
  animation-delay:calc(var(--d) * .55);
}
.hero-logo{ cursor:default }

/* El sello de materias: los filetes se abren desde el logo hacia afuera. */
.vivo .sello-linea{ scale:0 1; transition:scale 1.3s var(--curva-llega) .5s }
.vivo .sello-linea:first-child{ transform-origin:right }
.vivo .sello-linea:last-child { transform-origin:left }
.vivo .sello.en-vista .sello-linea{ scale:1 1 }
.vivo .sello-pie{ opacity:0; transition:opacity 1s ease 1.1s }
.vivo .sello-pie.en-vista{ opacity:1 }

/* ── La intro: en cada visita ──────────────────────────────
   La E se arma grande al centro de la pantalla y después vuela a su lugar
   arriba del H1. La clase .intro la pone un script en el <head>, antes del
   primer pintado, y ese mismo script la retira a los 4s si movimiento.js
   no llegara a correr: nunca se queda la pantalla en blanco. */
.intro .topbar{ opacity:0; translate:0 -100% }
.intro .hero::before,
.intro .hero::after,
.intro .hero-cue,
.intro .franja,
.intro .flotantes,
.intro .wa-flotante{ opacity:0 }
.intro .hero-texto > :not(.hero-logo){ opacity:0; animation:none !important }
.intro .hero-texto h1 .pal > span{ animation:none !important; translate:0 105% }
.intro .hero-logo .lp{ opacity:0 }
.intro .hero-logo .armando .lp{ opacity:1 }
.hero-logo{ position:relative; z-index:5 }
.topbar{ transition:translate .8s var(--curva-llega), opacity .6s ease,
                    box-shadow .3s ease, background-color .3s ease }
.franja,.flotantes,.wa-flotante,.hero-cue{ transition:opacity .8s ease .5s }

/* ── Hero vivo ─────────────────────────────────────────────
   La foto pasa a su propia capa para poder moverla: Ken Burns lento y un
   parallax suave que sigue al cursor. El degradado queda encima. */
.hero{
  --hero-foto:url('/assets/hero-polizas.webp');
  position:relative;overflow:hidden;isolation:isolate;background:var(--papel);
}
.hero-legal{ --hero-foto:url('/assets/hero-legal.webp') }
.hero::before,.hero::after{ content:"";position:absolute;pointer-events:none }
.hero::before{
  inset:-5%;z-index:-2;
  background:var(--hero-foto) center right/cover no-repeat;
  translate:calc(var(--mx,0) * -16px * var(--amp)) calc(var(--my,0) * -10px * var(--amp));
  transition:translate 1.2s var(--curva-llega), opacity 1.4s ease;
  animation:ken-burns 24s ease-in-out infinite alternate;
}
[data-area="legal"] .hero::before{ animation-duration:34s }
.hero::after{
  inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(255,250,242,.97) 0 42%,rgba(255,250,242,.58) 58%,transparent 76%);
  transition:opacity 1.4s ease;
}
@keyframes ken-burns{
  from{ transform:scale(1.03) }
  to  { transform:scale(1.13) translate(-1.2%,-1%) }
}
@media(max-width:900px){
  .hero::before{ background-position:center top }
  .hero-legal::before{ background-position:66% top }
  .hero::after{ background:linear-gradient(180deg,rgba(255,250,242,.08) 0,rgba(255,250,242,.4) 26%,rgba(255,250,242,.97) 46%) }
}

/* Entrada del texto del hero: cada pieza sube y se enfoca, en cascada. */
@keyframes hero-sube{
  from{ opacity:0; translate:0 26px; filter:blur(8px) }
  to  { opacity:1; translate:none;   filter:none }
}
.hero-texto > :not(.hero-logo):not(h1){
  animation:hero-sube 1s var(--curva-llega) both;
  animation-delay:calc(var(--n,0) * 110ms + 150ms);
}
.js .hero-texto h1:not(.partido){ opacity:0 }
.hero-texto h1.partido{ opacity:1 }

/* Palabras que suben desde una ranura: H1 del hero y titulares de sección.
   El padding inferior evita que la ranura corte los descendentes (p, g, j). */
.pal{ display:inline-block; overflow:hidden; vertical-align:top;
      padding-bottom:.14em; margin-bottom:-.14em }
.pal > span{ display:inline-block }
@keyframes pal-sube{ from{ translate:0 105% } to{ translate:none } }
.hero-texto h1 .pal > span{
  animation:pal-sube 1.05s var(--curva-llega) both;
  animation-delay:calc(var(--w,0) * 90ms + 120ms);
}

/* El titular con contorno dorado necesita aire DENTRO de la ranura. La .pal
   recorta por los cuatro lados y sin este margen el halo se corta a ras de
   cada palabra: se nota sobre todo arriba, en la tilde de «Pólizas», y en
   los costados, donde el contorno queda cercenado en plano.
   Al crecer la ranura hay que empujar más abajo el punto de partida: con el
   105% de siempre asomaría una franja de la palabra antes de que arranque
   la animación. */
.titulo-oro .pal{ padding:.17em .12em .26em; margin:-.17em -.12em -.26em }
@keyframes pal-sube-oro{ from{ translate:0 160% } to{ translate:none } }
.hero-texto h1.titulo-oro .pal > span{ animation-name:pal-sube-oro }
.intro .hero-texto h1.titulo-oro .pal > span{ translate:0 160% }
.h-area .pal > span{
  translate:0 105%;
  transition:translate 1s var(--curva-llega);
  transition-delay:calc(var(--w,0) * 55ms);
}
.h-area.en-vista .pal > span{ translate:none }

/* Indicador de scroll al pie del hero. */
.hero-cue{
  position:absolute;left:50%;bottom:1.6rem;translate:-50% 0;width:26px;height:42px;
  border:1.5px solid color-mix(in srgb,var(--area-texto) 45%,transparent);
  border-radius:999px;display:flex;justify-content:center;padding-top:8px;
}
.hero-cue span{ width:3px;height:8px;border-radius:2px;background:var(--mamey);
  animation:cue 2s ease-in-out infinite }
@keyframes cue{ 0%,100%{ translate:0 0; opacity:.4 } 50%{ translate:0 10px; opacity:1 } }
@media(max-width:900px){ .hero-cue{ display:none } }

/* ── Encabezado y barra de progreso ────────────────────── */
.topbar.con-scroll{ background:rgba(255,250,242,.96);
  box-shadow:0 12px 32px -20px rgba(36,24,47,.45) }
.links a:not(.btn){
  background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;
  padding-bottom:2px;transition:background-size .4s var(--curva-llega),color .2s ease;
}
.links a:not(.btn):hover{ background-size:100% 1px }
.progreso{ position:fixed;top:0;left:0;right:0;height:2px;z-index:30;
  background:linear-gradient(90deg,var(--mamey),var(--area));
  transform-origin:left;scale:0 1;pointer-events:none }

/* ── Botones: destello y magnetismo ────────────────────────
   El magnetismo (translate) lo pone movimiento.js con puntero fino; aquí
   solo se suaviza. El destello cruza el botón por debajo del texto. */
.btn{ position:relative;overflow:hidden;isolation:isolate;
  transition:transform .16s ease,background .25s ease,box-shadow .3s ease,
             translate .5s var(--curva-llega),color .25s ease }
.btn.iman{ transition-duration:.16s,.25s,.3s,.15s,.25s }
.btn-main::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  translate:-120% 0;transition:translate .8s var(--curva-llega);
}
.btn-main:hover::before{ translate:120% 0 }
.btn-main:hover{ box-shadow:0 18px 38px rgba(232,116,59,.36) }
.btn-soft::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:color-mix(in srgb,var(--area) 10%,transparent);
  scale:0 1;transform-origin:left;transition:scale .5s var(--curva-llega);
}
.btn-soft:hover::before{ scale:1 1 }
.puerta .btn::after{ content:"→";display:inline-block;margin-left:.5rem;
  transition:translate .4s var(--curva-llega) }
.puerta-enlace:hover .btn::after{ translate:5px 0 }

/* ── Tarjetas vivas ────────────────────────────────────────
   Inclinación 3D hacia el cursor y un brillo que lo sigue. Las variables
   las escribe movimiento.js; sin JS la tarjeta solo se eleva al hover.
   La entrada al scroll usa `translate` (no `transform`) para que las dos
   cosas convivan sin pisarse. */
.vivo-tilt:hover{ --alza:-8px }
.vivo-tilt::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(380px circle at var(--px,50%) var(--py,50%),var(--brillo),transparent 60%);
  opacity:0;transition:opacity .45s ease;
}
.vivo-tilt:hover::after{ opacity:1 }
.tarjeta,.puerta,.materia,.caja-aliados,.caja-directo,.caja-buscas{ position:relative;
  --brillo:rgba(107,46,143,.09) }
.puerta      { --brillo:rgba(255,255,255,.32) }
.caja-buscas { --brillo:rgba(255,255,255,.16) }
.materia     { --brillo:rgba(201,169,97,.16) }
.tarjeta:hover{ box-shadow:0 34px 70px -28px rgba(82,32,107,.4);
  border-color:color-mix(in srgb,var(--morado-vivo) 30%,transparent) }
.tarjeta.destacada:hover{ border-color:var(--mamey) }
.puerta:hover{ box-shadow:0 34px 70px -26px rgba(15,40,71,.55) }
.caja-aliados:hover,.caja-directo:hover{ box-shadow:0 24px 50px -26px rgba(36,24,47,.35) }
.caja-buscas:hover{ box-shadow:0 30px 60px -26px rgba(82,32,107,.6) }

/* Las viñetas laten en cascada al pasar el mouse. */
.tarjeta li::before{ transition:scale .35s var(--curva-llega),background-color .3s ease;
  transition-delay:calc(var(--i,0) * 22ms) }
.tarjeta:hover li::before{ scale:1.4 }
/* Y la lista entra renglón por renglón cuando la tarjeta aparece. */
.vivo .tarjeta.aparece li{ opacity:0; translate:-10px 0;
  transition:opacity .5s ease,translate .6s var(--curva-llega);
  transition-delay:calc(var(--i,0) * 45ms + 250ms) }
.vivo .tarjeta.aparece.visible li{ opacity:1; translate:none }

/* La cinta de PREMIUM tiene un brillo que la recorre cada tanto. */
.cinta{ overflow:hidden;isolation:isolate }
.cinta::after{ content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  translate:-130% 0;animation:cinta-brillo 4.5s ease-in-out infinite 1.5s }
@keyframes cinta-brillo{ 0%,70%{ translate:-130% 0 } 100%{ translate:130% 0 } }

/* Las estrellas repiten el gesto de la cinta al pasar el cursor por la
   tarjeta. No es el mismo truco —sobre un texto recortado con
   background-clip no cabe un barrido encima—: lo que se mueve es el propio
   degradado metálico, que es como un metal de verdad atrapa la luz.
   Sólo en hover: en reposo no hay nada animándose, y en táctil no corre.
   Los retardos cuelgan del MISMO selector con :hover a propósito. El
   shorthand `animation` reinicia animation-delay a 0, y una regla suelta
   `.estrellas span:nth-child(2)` tiene menos especificidad: ganaría ese 0 y
   las tres estrellas brillarían a la vez. */
@supports (-webkit-background-clip:text){
  .vivo .metal:hover .estrellas span{ animation:estrella-brillo .9s ease both }
  .vivo .metal:hover .estrellas span:nth-child(2){ animation-delay:.09s }
  .vivo .metal:hover .estrellas span:nth-child(3){ animation-delay:.18s }
}
@keyframes estrella-brillo{
  0%  { background-position:0% 50% }
  100%{ background-position:100% 50% }
}

/* El filete dorado de la banda navy se tiende de lado a lado al hover. */
.puerta .banda-navy{ position:relative;border-top-color:transparent }
.puerta .banda-navy::before{ content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--dorado);scale:.25 1;transform-origin:left;
  transition:scale .7s var(--curva-llega) }
.puerta-enlace:hover .banda-navy::before{ scale:1 1 }

/* Materias: numeradas como un expediente; el borde dorado se enciende. */
.rejilla-materias{ counter-reset:materia }
.materia{ counter-increment:materia }
.materia::before{ content:counter(materia,decimal-leading-zero);display:block;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  color:var(--turquesa);margin-bottom:.8rem }
.materia:hover{ border-color:rgba(201,169,97,.85);background:rgba(255,255,255,.08) }
.materia h3{ transition:letter-spacing .5s var(--curva-llega) }
.materia:hover h3{ letter-spacing:.01em }

/* La foto de «¿buscas casa?» se acerca al hover. */
.buscas-foto img{ transition:scale 1.2s var(--curva-llega) }
.caja-buscas:hover .buscas-foto img{ scale:1.07 }

/* ── Entradas al scroll ────────────────────────────────────
   El par .aparece/.visible vive en estilos.css, porque sitio.js corre en las
   seis páginas y las legales no enlazan esta hoja. Aquí se cambia a
   `translate` + escalonado por grupo (--n lo pone movimiento.js). */
.aparece{ transform:none; translate:0 calc(34px * var(--amp)); scale:.985;
  transition:opacity .9s var(--curva-llega),translate .9s var(--curva-llega),
             scale .9s var(--curva-llega);
  transition-delay:calc(var(--n,0) * 110ms) }
.aparece.visible{ translate:none; scale:none }
/* Las tarjetas vivas suman la inclinación a la entrada. Va DESPUÉS de .aparece
   a propósito: con la misma especificidad, la última declaración gana. */
.vivo-tilt,
.vivo-tilt.aparece{
  transition-property:transform,box-shadow,border-color,background-color,opacity,translate,scale;
  transition-duration:.7s,.5s,.3s,.3s,.9s,.9s,.9s;
  transition-timing-function:var(--curva-llega),ease,ease,ease,
    var(--curva-llega),var(--curva-llega),var(--curva-llega);
  transition-delay:0s,0s,0s,0s,var(--retardo,0s),var(--retardo,0s),var(--retardo,0s);
}
.aparece{ --retardo:calc(var(--n,0) * 110ms) }
.vivo-tilt,
.vivo-tilt.visible,
.vivo-tilt:hover{
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translateY(var(--alza,0px));
}
.vivo-tilt.inclinando{ transition-duration:.14s,.5s,.3s,.3s,.9s,.9s,.9s }

/* Etiquetas de sección: un filete crece antes del texto. */
.tag::before{ content:"";display:inline-block;vertical-align:middle;height:1px;
  width:2.2rem;margin-right:.7rem;background:currentColor }
.vivo .tag::before{ width:0;transition:width 1s var(--curva-llega) .15s }
.vivo .tag.en-vista::before{ width:2.2rem }

/* Fotografías: se revelan desde una ventana y flotan con el scroll. */
.escena{ --radio:12px }
.escena-ancha{ --radio:0px }
.escena-lado{ --radio:10px }
.escena img{ scale:1.12;transition:scale 1.6s var(--curva-llega) }
.escena:hover img{ scale:1.17 }
.escena.vivo-revela{ clip-path:inset(9% 7% 9% 7% round var(--radio));
  transition:clip-path 1.4s var(--curva-llega) }
.escena.vivo-revela img{ scale:1.3 }
.escena.vivo-revela.en-vista{ clip-path:inset(0 0 0 0 round var(--radio)) }
.escena.vivo-revela.en-vista img{ scale:1.12 }
.escena.vivo-revela.en-vista:hover img{ scale:1.17 }
@supports (animation-timeline: view()){
  .escena img{ animation:escena-flota linear both; animation-timeline:view() }
  @keyframes escena-flota{
    from{ translate:0 calc(-4% * var(--amp)) }
    to  { translate:0 calc(4% * var(--amp)) }
  }
}

/* Acordeón que se despliega en vez de saltar (Chrome 131+, Safari 18.4+). */
@supports selector(::details-content){
  .acordeon{ interpolate-size:allow-keywords }
  .acordeon::details-content{ block-size:0;overflow:hidden;
    transition:block-size .5s var(--curva-llega),content-visibility .5s allow-discrete }
  .acordeon[open]::details-content{ block-size:auto }
}
.acordeon summary{ transition:color .25s ease,padding-left .35s var(--curva-llega) }
.acordeon summary:hover{ color:var(--area-texto);padding-left:.4rem }

/* ── Flotantes ─────────────────────────────────────────── */
.audio-btn{ transition:background .35s ease,color .35s ease,
  scale .35s var(--curva-llega),border-color .35s ease }
.audio-btn:hover{ background:var(--mamey);color:var(--tinta);border-color:var(--mamey);scale:1.08 }
.audio-btn:focus-visible{ outline:2px solid var(--mamey);outline-offset:3px }
.eq span{ animation:eq-barra 1.15s ease-in-out infinite }
.eq span:nth-child(2){ animation-delay:.22s }
.eq span:nth-child(3){ animation-delay:.44s }
.eq span:nth-child(4){ animation-delay:.12s }
@keyframes eq-barra{ 0%,100%{ transform:scaleY(.26) } 50%{ transform:scaleY(1) } }
.audio-hint{ translate:-10px 0;transition:opacity .5s ease,translate .5s var(--curva-llega) }
.audio-hint.show{ translate:none }
.wa-flotante{ transition:scale .35s var(--curva-llega) }
.wa-flotante:hover{ scale:1.08 }
.wa-flotante::before{ content:"";position:absolute;inset:0;border-radius:inherit;
  border:2px solid #25D366;animation:wa-onda 2.6s ease-out infinite }
@keyframes wa-onda{ from{ scale:1;opacity:.7 } to{ scale:1.6;opacity:0 } }

/* ── Accesibilidad: se apaga todo, no se degrada a medias ── */
@media (prefers-reduced-motion: reduce){
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation:none !important;
  }
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .logo-dibujado .le-marco,
  .logo-dibujado .le-asta,
  .logo-dibujado .le-brazo{ clip-path:none; animation:none }
  .modal-abierto .dialogo,
  [data-abre-modal].origen-modal{ view-transition-name:none }
  .puerta-enlace:hover{ transform:none }
  .btn:hover{ transform:none }
  .vivo-tilt,.vivo-tilt.visible,.vivo-tilt:hover{ transform:none }
  .aparece{ translate:none; scale:none }
  .escena.vivo-revela{ clip-path:none }
  .escena img,.escena:hover img{ scale:none; translate:none }
  .hero::before{ translate:none }
  .h-area .pal > span,.hero-texto h1 .pal > span{ translate:none }
  .marca:hover .le-brazo{ translate:none }
}