/* =============================================================================
   Hero con scroll: el plato se compone según bajas.
   El color de fondo está muestreado del propio vídeo (#EFEBE1): así el lienzo
   no se recorta contra la página y no hace falta canal alfa.
   ========================================================================== */

.hero-scroll {
  --hero-fondo: #efebe1;
  background: var(--hero-fondo);
  position: relative;
}

/* El alto extra es el recorrido del scroll que consume la escena entera:
   mientras el plato se compone van pasando los capítulos de copy. */
.hero-scroll__pista { height: 380vh; }

.hero-scroll__fijo {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}

/* A pantalla completa: el plato ocupa toda la ventana y el copy se apoya
   sobre las bandas de fondo que deja la composición, que está centrada. */
.hero-scroll__lienzo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Copy sobre las bandas de fondo, por capítulos ------------------------ */
/* El ancho no es decorativo: a pantalla completa el recorte deja libre un 26%
   a cada lado en el último fotograma. Pasarse de ahí es pisar la comida. */
.hero-scroll__texto {
  position: absolute;
  top: 50%;
  width: min(26%, 390px);   /* +30% de letra pide +30% de columna; la pildora perdona el roce */
  z-index: 2;
}
.hero-scroll__texto--izq { left: max(20px, 2.4vw); }
.hero-scroll__texto--der { right: max(20px, 2.4vw); text-align: right; }

/* Cada capítulo ocupa el mismo sitio; solo se ve el que toca. */
.capitulo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
  /* Píldora translúcida: el texto viaja SOBRE la comida en vuelo y según el
     fotograma se lo comía («no se leen porque está la comida detrás»). Crema
     de la casa al 86% + desenfoque: se lee siempre y la comida se intuye. */
  background: rgb(241 233 226 / .86);
  backdrop-filter: blur(5px);
  border-radius: 16px;
  padding: 20px 22px;
}
.hero-scroll__texto--der .capitulo { left: auto; right: 0; width: 100%; }

.capitulo[data-activo="si"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
  pointer-events: auto;
}
.capitulo[data-activo="no"][data-lado="antes"] { transform: translateY(calc(-50% - 22px)); }
.capitulo[data-activo="no"][data-lado="despues"] { transform: translateY(calc(-50% + 22px)); }

.hero-scroll__titulo {
  font-family: Manrope, system-ui, sans-serif;
  font-size: clamp(2.1rem, 1.3rem + 2.5vw, 3.7rem);   /* +30%: el hero lo aguanta (Andres) */
  line-height: 1.12;
  margin: 0 0 14px;
  color: #161915;
  text-transform: none;
  text-wrap: balance;
}
.hero-scroll__moto {
  color: #5c6b62;
  font-size: 1.28rem;
  line-height: 1.5;
  margin: 0 0 20px;
}

/* Un punto más de cuerpo: con la píldora detrás ya no compiten con la foto,
   pero a 1.05/.9 rem seguían siendo letra de folleto. */
.hero-scroll__apunte {
  font-family: Manrope, system-ui, sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.18;
  color: #145961;
  margin: 0 0 8px;
  /* Que el titular reparta las lineas en vez de dejar una huerfana: el bloque
     esta alineado a la derecha y una linea de una palabra se lee como un error
     de maquetacion, no como una decision. */
  text-wrap: balance;
}
/* EL IMPORTE NO SE PARTE (Andres, 11-09-2026, con captura: «Menu diario desde
   10,90» y el «€» solo en la linea de abajo, pegado a la derecha). Un precio
   separado de su moneda se lee como un precio distinto. */
.hero-scroll__apunte strong { color: #3a7026; white-space: nowrap; }
.hero-scroll__detalle { color: #4a5a55; font-size: 1.3rem; line-height: 1.5; margin: 0 0 18px; }

.hero-scroll__enlace {
  display: inline-block;
  background: #145961;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 8px;
  transition: background .18s ease;
}
.hero-scroll__enlace:hover { background: #073439; color: #fff; }

/* El CTA del hero es el boton principal de la web: cuerpo grande, no el
   tamano de un boton de tarjeta (Andres, 06-09: «sale muy pequeno en desktop»). */
.capitulo .pedir-propio {
  padding: 16px 30px !important;
  font-size: 1.05rem !important;
  border-radius: 10px !important;
  min-height: 54px;
}
@media (min-width: 1025px) {
  .capitulo .pedir-propio { padding: 18px 34px !important; font-size: 1.12rem !important; }
}

/* --- Botón "añadir a mi plan" en las tarjetas de la home ----------------- */
.anadir-plan {
  display: block;
  margin: 8px auto 0;
  width: fit-content;
  background: #74b74e;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .88rem;
  padding: 7px 16px;
  border-radius: 999px;
  transition: background .18s ease;
}
.anadir-plan:hover { background: #5a9a38; color: #fff; }

/* Pista visual de que hay que seguir bajando */
.hero-scroll__pista-scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: #8a9a90;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: opacity .3s ease;
  z-index: 2;
}
.hero-scroll[data-avance="fin"] .hero-scroll__pista-scroll { opacity: 0; }

/* --- Sin animación: móvil, poca batería o poca red ----------------------- */
.hero-scroll[data-modo="estatico"] .hero-scroll__pista { height: auto; }
.hero-scroll[data-modo="estatico"] .hero-scroll__fijo {
  position: static;
  height: auto;
  min-height: 0;
  padding: 28px 0 34px;
  display: block;
}
.hero-scroll[data-modo="estatico"] .hero-scroll__texto {
  position: static;
  transform: none;
  width: auto;
  text-align: left;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 20px;
}
.hero-scroll[data-modo="estatico"] .hero-scroll__texto--der { margin-top: 22px; }
/* Sin animación no hay capítulos: se ve el primero y el último, en vertical */
.hero-scroll[data-modo="estatico"] .capitulo {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: none;
}
.hero-scroll[data-modo="estatico"] .capitulo[data-fijo="si"] { display: block; }
.hero-scroll[data-modo="estatico"] .hero-scroll__lienzo {
  position: static;
  width: min(100%, 620px);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  margin: 22px auto;
}
.hero-scroll[data-modo="estatico"] .hero-scroll__pista-scroll { display: none; }

/* En pantalla estrecha el efecto SIGUE (Andrés: «la landing en móvil no
   tiene el efecto scroll del hero»); lo que cambia es dónde vive el copy:
   las dos columnas laterales no caben, así que el capítulo activo va en una
   sola píldora anclada abajo, sobre la comida. */
@media (max-width: 1024px) {
  .hero-scroll[data-modo="animado"] .hero-scroll__texto {
    position: absolute; top: auto; bottom: 64px;
    left: 14px; right: 14px; width: auto; text-align: left;
  }
  .hero-scroll[data-modo="animado"] .capitulo {
    top: auto; bottom: 0;
    transform: none;
    padding: 16px 18px;
  }
  .hero-scroll[data-modo="animado"] .capitulo[data-activo="si"] { transform: none; }
  .hero-scroll[data-modo="animado"] .capitulo[data-activo="no"][data-lado="antes"] { transform: translateY(-16px); }
  .hero-scroll[data-modo="animado"] .capitulo[data-activo="no"][data-lado="despues"] { transform: translateY(16px); }
  .hero-scroll[data-modo="animado"] .hero-scroll__titulo { font-size: 1.35rem; margin-bottom: 7px; }
  .hero-scroll[data-modo="animado"] .hero-scroll__moto { font-size: .88rem; margin-bottom: 10px; }
  .hero-scroll[data-modo="animado"] .hero-scroll__apunte { font-size: 1.08rem; }
  .hero-scroll[data-modo="animado"] .hero-scroll__detalle { font-size: .86rem; margin-bottom: 10px; }
  /* sin modo (JS aún no decidió o falló): el texto no se superpone */
  .hero-scroll:not([data-modo]) .hero-scroll__texto { position: static; transform: none; width: auto; text-align: left; }
}

/* --- MÓVIL (≤700): el vídeo vertical con HUECO (Andrés, 06-09) ---------------
   Los fotogramas de /assets/hero/movil/ ya no son el apaisado recortado: son
   un 9:16 diseñado con el bol en el tercio inferior y el 39 % superior de
   fondo crema limpio del fotograma 0 al 10 (medido por hero-movil-apimart.py).
   Ahí, desde el píxel 0 y sin scroll, van el titular, el precio y el botón:
   lo que Wetaca enseña en su primera pantalla. El capítulo 0 vive ARRIBA sin
   píldora (el fondo ya es liso); a partir del capítulo 1 la comida sube y
   los capítulos siguen abajo, en su píldora. La columna derecha no cabe:
   su dato bueno (el precio) pasa al capítulo 0 en .hero-scroll__precio-movil. */
.hero-scroll__precio-movil { display: none; }
.hero-scroll__barra-movil { display: none; }

@media (max-width: 700px) {
  .hero-scroll__pista { height: 260vh; }     /* 380vh eran 3,8 pantallas de hero */
  .hero-scroll[data-modo="animado"] .hero-scroll__texto--der { display: none; }
  .hero-scroll[data-modo="animado"] .hero-scroll__texto--izq {
    top: 6px; bottom: 84px; left: 16px; right: 16px;
  }
  /* El bol queda muy separado del boton (Andres, 06-09: «quita algo de margen
     superior al video»): el lienzo sube un 6 % y se estira otro 6 % por abajo.
     Lo que se recorta arriba es crema lisa; el hueco medido (39 % en f0-f10)
     sigue por debajo del boton. */
  .hero-scroll[data-modo="animado"] .hero-scroll__lienzo { top: calc(-6% - 20px); height: calc(106% + 20px); }   /* «quitale mas, unos 20» */
  /* La barra de pedir: desde el capítulo 1 (el titular con su botón ya se fue) */
  .hero-scroll[data-modo="animado"]:not([data-capitulo="0"]) .hero-scroll__barra-movil {
    display: flex;
    gap: 8px;
    position: absolute;
    left: 16px; right: 16px; bottom: 14px;
    z-index: 3;
  }
  .hero-scroll__barra-movil > * { flex: 1 1 0; }
  .hero-scroll__barra-movil span.glf-button.glf-button-custom { justify-content: center; text-align: center; }
  .hero-scroll__enlace--carta {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgb(241 233 226 / .92);
    color: #145961;
    border: 1.5px solid #145961;
    backdrop-filter: blur(5px);
  }
  .hero-scroll[data-modo="animado"]:not([data-capitulo="0"]) .hero-scroll__pista-scroll { opacity: 0; }
  /* con el aviso de cookies abierto (67 px fijos abajo), todo sube */
  .hero-scroll[data-modo="animado"][data-cookies="si"] .hero-scroll__barra-movil { bottom: 86px; }
  .hero-scroll[data-modo="animado"][data-cookies="si"] .hero-scroll__texto--izq { bottom: 156px; }
  .hero-scroll[data-modo="animado"] .hero-scroll__texto--izq .capitulo[data-capitulo="0"] {
    top: 0; bottom: auto;
    padding: 0;
    margin: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero-scroll[data-modo="animado"] .hero-scroll__texto--izq .capitulo[data-capitulo="0"][data-activo="no"] {
    transform: translateY(-14px);
  }
  .hero-scroll[data-modo="animado"] .capitulo[data-capitulo="0"] .hero-scroll__titulo {
    font-size: clamp(1.55rem, 1rem + 2.6vw, 1.9rem);
    line-height: 1.04;
    margin-bottom: 8px;
  }
  .hero-scroll[data-modo="animado"] .capitulo[data-capitulo="0"] .hero-scroll__moto {
    font-size: .95rem;
    line-height: 1.4;
    margin-bottom: 8px;
  }
  .hero-scroll[data-modo="animado"] .hero-scroll__precio-movil {
    display: block;
    margin: 0 0 12px;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 1.02rem;
    font-weight: 800;
    color: #145961;
  }
  .hero-scroll__precio-movil small { font-weight: 500; color: #5c6b62; font-size: .86rem; }
  .hero-scroll[data-modo="animado"] .hero-scroll__pista-scroll { bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll__pista { height: auto; }
  .hero-scroll__fijo { position: static; height: auto; min-height: 0; }
}