/* ==========================================================================
   HERO «Lago» — capa visual del hero de inicio (rediseño v4, DEMO LOCAL)
   No cambia textos, enlaces, encabezados ni orden: solo presentación.
   ========================================================================== */
.hero--lago {
  --lago-p: 0;
  background: transparent;
  min-height: 100vh; min-height: 100svh;
  align-items: flex-start;
  padding: 0;
  isolation: isolate;
}
html.lago-cine .hero--lago { min-height: 170vh; min-height: 170svh; }   /* recorrido de cámara */

/* Escena */
.lago { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; z-index: -1; overflow: hidden; background: #F2EDE6; }
html.lago-cine .lago { position: fixed; inset: 0; height: auto; }
.lago.is-past { visibility: hidden; }
.lago-poster, .lago-poster img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 62% 50%; }
.lago-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s ease; }
.lago.is-live .lago-canvas { opacity: 1; }
.lago.is-live .lago-poster { visibility: hidden; transition: visibility 0s .6s; }
/* Modo nativo (móviles, tabletas, equipos sin GPU): el propio <video> y dos <img> para el scroll */
.lago-media { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.lago.is-live .lago-media { opacity: 1; }
.lago-media > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 62% 50%; }
.lago-media .lago-fa, .lago-media .lago-fb { opacity: 0; }
.lago-media.is-seq .lago-fa { opacity: 1; }
.lago-media.is-seq .lago-video { opacity: 0; transition: opacity .35s ease; }
/* el agua se convierte en papel: una mancha de acuarela crema que crece desde la tinta */
.lago-crema {
  position: absolute; left: 64%; top: 62%; width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax; pointer-events: none;
  background: #F2EDE6;
  -webkit-mask: url("img/v4/mascara-retrato.webp") center / contain no-repeat;
          mask: url("img/v4/mascara-retrato.webp") center / contain no-repeat;
  transform: scale(calc(.15 + max(0, var(--lago-p) - .7) * 11)) rotate(calc(var(--lago-p) * 40deg));
  opacity: clamp(0, calc((var(--lago-p) - .7) * 40), 1);
}
html.lago-gl .lago-crema { display: none; }
.lago-velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(242,237,230,.90) 0%, rgba(242,237,230,.76) 26%, rgba(242,237,230,.30) 46%, rgba(242,237,230,0) 60%),
    linear-gradient(180deg, rgba(242,237,230,.35) 0%, rgba(242,237,230,0) 22%);
  opacity: calc(1 - var(--lago-p)*2.4);
}

/* Lo que ya no se usa del hero anterior (sigue en el HTML, intacto) */
.hero--lago .hero-scrim, .hero--lago .hero-wave, .hero--lago .hero-bg-fallback, .hero--lago .hero-bg-video { display: none; }

/* Texto: primera pantalla, columna izquierda */
.hero--lago .hero-inner {
  width: 100%; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: flex-start;
  padding-top: 112px; padding-bottom: 120px;
}
.hero--lago .hero-text { text-align: left; max-width: 560px; }
.hero--lago h1 {
  color: var(--marron-oscuro);
  font-size: clamp(2.6rem, 4.3vw, 4.2rem);
  line-height: 1.04; letter-spacing: -.03em;
  text-shadow: 0 1px 24px rgba(242,237,230,.65);
}
.hero--lago h1.hero-anim { opacity: 1; animation: lagoRise 1s var(--ease-out) both; }          /* LCP inmediato */
@keyframes lagoRise { from { transform: translateY(14px); } to { transform: none; } }
.hero--lago .accent-word {
  font-family: var(--font-subtitle); font-style: italic; font-weight: 600;
  color: var(--acento); font-size: 1.14em; white-space: nowrap; position: relative;
}
.hero--lago .accent-word::after {
  content: ''; position: absolute; left: -3%; right: -5%; bottom: .04em; height: .2em; z-index: -1;
  background: radial-gradient(60% 100% at 50% 50%, rgba(232,191,184,.95), rgba(232,191,184,0) 72%);
  transform-origin: left center; animation: lagoBrush 1.5s .8s var(--ease-out) both;
}
@keyframes lagoBrush { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero--lago .hero-subtitle { color: var(--marron-medio); margin-left: 0; font-size: 1.1rem; max-width: 520px; text-shadow: 0 1px 16px rgba(242,237,230,.8); }
.hero--lago .hero-tags { justify-content: flex-start; }
.hero--lago .hero-tags span { color: var(--marron-medio); border-right-color: rgba(36,24,18,.2); }
.hero--lago .hero-actions { justify-content: flex-start; }
.hero--lago .eyebrow-light { background: rgba(255,255,255,.66); color: var(--marron-medio); border-color: rgba(82,64,48,.16); }
.hero--lago .eyebrow-light::before { background: var(--acento); }
.hero--lago .btn-outline-light { border-color: var(--marron-oscuro); color: var(--marron-oscuro); background: rgba(251,248,242,.55); backdrop-filter: blur(6px); }
.hero--lago .btn-outline-light:hover { background: var(--marron-oscuro); color: var(--beige); }
.hero--lago .btn-primary { box-shadow: 0 16px 36px rgba(36,24,18,.22); }
.hero--lago .btn-primary:hover { background: var(--acento); }
.hero--lago .btn:focus-visible { outline: 3px solid var(--acento); outline-offset: 4px; }

/* Reseña y aviso de scroll: anclados al final de la primera pantalla */
.hero--lago > .trust-badge { top: calc(100svh - 108px); bottom: auto; right: max(24px, calc((100vw - var(--container-w)) / 2 + 24px)); z-index: 3; }
.hero--lago .scroll-cue { top: calc(100svh - 74px); bottom: auto; }
/* Pantallas bajas (portátiles pequeños, ventanas reducidas): el aviso de scroll pisaría los botones */
@media (max-height: 760px) { .hero--lago .scroll-cue { display: none; } }
.hero--lago .scroll-cue-light { border-color: var(--marron-medio); }
.hero--lago .scroll-cue-light span { background: var(--marron-medio); }

/* Móvil / vertical: la escena arriba, el mensaje y el botón abajo, sobre papel */
@media (max-aspect-ratio: 20/21) {
  html.lago-cine .hero--lago { min-height: 150vh; min-height: 150svh; }
  .lago-poster img, .lago-media > * { inset: 0 0 auto 0; height: auto; aspect-ratio: 620 / 716; object-fit: cover; object-position: 50% 0; }
  .lago-media::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100vw * 716 / 620 * .8); height: calc(100vw * 716 / 620 * .2 + 1px);
    background: linear-gradient(180deg, rgba(242,237,230,0), #F2EDE6); }
  .lago-crema { left: 50%; top: calc(100vw * 716 / 620 * .62); }
  .lago-poster::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100vw * 716 / 620 * .8); height: calc(100vw * 716 / 620 * .2 + 1px);
    background: linear-gradient(180deg, rgba(242,237,230,0), #F2EDE6); }
  .lago-velo {
    background: linear-gradient(180deg, rgba(242,237,230,.30) 0%, rgba(242,237,230,0) 12%, rgba(242,237,230,0) calc(100vw * 716 / 620 * .42), rgba(242,237,230,.72) calc(100vw * 716 / 620 * .74), rgba(242,237,230,.94) calc(100vw * 716 / 620 * .96), #F2EDE6 100%);
    opacity: calc(1 - var(--lago-p)*2.6);
  }
  .hero--lago .hero-inner { align-items: flex-end; padding-top: 96px; padding-bottom: 104px; }
  /* La reseña va en el flujo, justo tras el bloque de texto: nunca pisa los botones,
     aunque la pantalla sea baja (375×667, 320×568…) */
  .hero--lago { flex-direction: column; justify-content: flex-start; }
  .hero--lago .hero-inner { flex: none; }
  .hero--lago > .trust-badge {
    position: relative; top: auto; bottom: auto; left: auto; right: auto; transform: none;
    align-self: center; width: calc(100% - 40px); max-width: 380px; margin: -88px auto 0;
  }
  .hero--lago .scroll-cue { display: none; }
}
@media (max-width: 600px) {
  .hero--lago h1 { font-size: clamp(2.05rem, 9vw, 2.55rem); }
  .hero--lago .hero-subtitle { font-size: 1rem; line-height: 1.6; }
  .hero--lago .hero-actions { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--lago h1.hero-anim, .hero--lago .accent-word::after { animation: none; }
}