/* Portada local: un recorrido reversible, sin mover las capas del comparador. */
.escena[data-hero-loop] .tarjeta:not(:has(input:checked)) { background: #faf7f2; }
.hero-scroll-stage { position: relative; }
.hero-scroll-stage.is-running { height: var(--hero-stage-height); }
.hero-scroll-stage.is-running > .portada { position: sticky; top: var(--hero-pin-top,0px); background: #fff; }
.hero-loop-ready .escena__fichas { min-height: var(--hero-fiche-height,0px); }
.hero-loop-ready .escena__nota { min-height: var(--hero-note-height,0px); }
/* El parallax anterior no debe competir con la portada fijada. */
.motion-active .hero-loop-ready .escena :is(.escena__foto,.tarjetas,.pildoras) { translate: none; }
.hero-loop-ready .comparador.muestra { animation: none; }
.hero-loop-ready .escena__fichas { opacity: var(--hero-copy-opacity,1); }
.hero-loop-ready .escena .tarjeta { position: relative; }
.hero-loop-ready .escena .tarjeta:has(input:checked)::after {
  content: ""; position: absolute; bottom: .3rem; left: .8rem; right: .8rem;
  height: 2px; border-radius: 2px; background: var(--bosque);
  transform-origin: left; transform: scaleX(var(--hero-card-progress,0)); pointer-events: none;
}
.hero-scroll-note { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .9rem; color: var(--gris); font: 400 .7rem/1.5 var(--texto); }
.hero-scroll-note button { display: inline-flex; align-items: center; min-height: 32px; border: 0; background: transparent; padding: .2rem 0; color: var(--bosque); font: inherit; text-decoration: underline; text-underline-offset: .2em; }
.hero-scroll-note button:disabled { text-decoration: none; cursor: default; }
/* Una sola representación de las cejitas desde el primer pintado.
   La entrada comienza después de cargar Monda; no depende de la foto ni del loop. */
.escena h1[data-title-intro] .linea .h1-clave {
  /* Conserva la caja de texto original: inline-block desplaza el origen vertical del trazo. */
  display: inline; position: relative; isolation: isolate; z-index: 0;
  /* Iguala la especificidad de las reglas :first/last-child originales.
     El fondo fijo no puede seguir pintado debajo del trazo animado. */
  background-image: none;
}
.escena h1[data-title-intro] .h1-clave::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: .78em; width: 2.5em; height: .24em;
  background: var(--terracota);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 51.667' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 51.667 13 17.667C36.361 4.492 62.582 0 88.996 0 107.869 0 126.558 3.71 144 10.919 93.759 14.742 44.794 28.598 0 51.667Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 51.667' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 51.667 13 17.667C36.361 4.492 62.582 0 88.996 0 107.869 0 126.558 3.71 144 10.919 93.759 14.742 44.794 28.598 0 51.667Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.escena h1[data-title-intro] .linea:first-child .h1-clave::before { right: .55em; transform: scaleX(-1); }
.escena h1[data-title-intro] .linea:last-child .h1-clave::before { left: .08em; }
/* Estado por defecto visible, también sin JavaScript o después de una carga fallida. */
.js .escena h1[data-title-intro] .linea > span { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html[data-title-state="pending"] .escena h1[data-title-intro] .linea > span { transform: translateY(105%); }
  html[data-title-state="pending"] .escena h1[data-title-intro] .h1-clave::before { clip-path: inset(0 100% 0 0); }
  html[data-title-state="entering"] .escena h1[data-title-intro] .linea > span {
    animation: cejeria-title-rise .8s var(--ease-expo) calc(.1s + var(--i) * .11s) backwards;
  }
  html[data-title-state="entering"] .escena h1[data-title-intro] .h1-clave::before {
    animation: cejeria-brow-draw 1.25s cubic-bezier(.25,.7,.25,1) 1.05s backwards;
  }
  html[data-title-state="entering"] .escena h1[data-title-intro] .linea:last-child .h1-clave::before {
    animation-duration: 1.4s; animation-delay: 1.25s;
  }
}
@keyframes cejeria-title-rise {
  from { transform: translateY(105%); }
  to { transform: none; }
}
@keyframes cejeria-brow-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@media (width < 48em) { .hero-scroll-note { font-size: .66rem; } .hero-scroll-note button { min-height: 44px; } }
html[data-motion-reduced="true"] .hero-scroll-stage.is-running { height: auto; }
html[data-motion-reduced="true"] .hero-scroll-stage.is-running > .portada { position: static; }
html[data-motion-reduced="true"] .escena h1[data-title-intro] .linea > span { transform: none !important; animation: none !important; }
html[data-motion-reduced="true"] .escena h1[data-title-intro] .h1-clave::before { clip-path: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-stage.is-running { height: auto; }
  .hero-scroll-stage.is-running > .portada { position: static; }
  .escena h1[data-title-intro] .linea > span { transform: none !important; animation: none !important; }
  .escena h1[data-title-intro] .h1-clave::before { clip-path: none !important; animation: none !important; }
}