/* =========================================================================
   Secuencia Preloader + Hero + Cortina verde (index.html)
   CSS estructural independiente de Tailwind (para que funcione sin build).
   Las animaciones las controla js/hero-sequence.js con GSAP + ScrollTrigger.
   ========================================================================= */

:root {
  --hero-img: url("/assets/img/general/fondo1.webp");
  /* Gradiente construido con el verde del logo (#02994d). Se hace por CSS y no
     con imagen para poder controlar el tono exacto de la marca. */
  --verde-img: linear-gradient(135deg, #016b35 0%, #02994d 55%, #05b85e 100%);
  --finca-img: url("/assets/img/general/finca-aire.webp");
  --next-img: url("/assets/img/general/placeholder-siguiente-seccion.webp");
  --verde-solid: #0b3d2e;
}

/* Celular en vertical: la foto apaisada (1717x916) recortada con `cover` en una
   pantalla 9:19 pierde casi todo el encuadre. Se cambia por la versión vertical.
   Se exige `orientation: portrait` a propósito: un celular acostado sí debe
   seguir usando la horizontal. */
@media (max-width: 767px) and (orientation: portrait) {
  :root { --hero-img: url("/assets/img/general/fondo1-vertical.webp"); }
}

/* ---------- PRELOADER ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #ffffff;
  overflow: hidden;
}
.preloader__hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;            /* GSAP hace el crossfade */
  will-change: opacity, transform;
}
.preloader__logo {
  position: relative;
  z-index: 2;
  width: min(60vw, 320px);
  height: auto;
  will-change: opacity, transform;
}

/* ---------- STAGE (contenedor pineado) ---------- */
.hero-stage {
  position: relative;
  width: 100%;
  /* `svh` = altura del viewport con la barra del navegador VISIBLE. En móvil
     `100vh` cuenta el área que tapa la barra de direcciones, así que el hero
     quedaba cortado por abajo. Se usa `svh` y no `dvh` a propósito: `dvh`
     cambia al ocultarse la barra y eso haría recalcular el pin de ScrollTrigger
     a mitad del scroll (saltos). `100vh` queda de fallback para navegadores viejos. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
}
.hs-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Capa 1: HERO */
.hs-hero { z-index: 1; }
.hs-hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.hs-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.55) 100%);
}
.hs-hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.5rem, 6vw, 6rem);
  color: #fff;
}
.hs-hero__eyebrow {
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .85;
}
.hs-hero__title {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.25rem, 7vw, 5rem);
  line-height: 1.05;
  max-width: 15ch;
  margin: 0;
}
.hs-hero__hint {
  margin-top: 1.5rem;
  font-size: .85rem;
  letter-spacing: .1em;
  opacity: .8;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Capa 2: REVELADO — línea de productos (slideshow con crossfade) */
.hs-reveal { z-index: 2; }
.hs-slideshow { position: absolute; inset: 0; overflow: hidden; }
.hs-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s ease, transform 5s ease;
  will-change: opacity, transform;
}
.hs-slide.is-active { opacity: 1; transform: scale(1); }

.hs-reveal__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.65) 100%);
}
.hs-reveal__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.1rem;
  padding: clamp(1.5rem, 6vw, 6rem);
  color: #fff;
}
.hs-reveal__title {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.9rem);
  line-height: 1.15;
  max-width: 20ch;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hs-reveal__list {
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  letter-spacing: .02em;
  color: #ffe9b0;
  margin: 0;
  max-width: 40ch;
}
.hs-reveal__btn {
  margin-top: .6rem;
  display: inline-flex;
  align-items: center;
  padding: .85rem 1.8rem;
  border-radius: .6rem;
  background: #2e7d32;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  transition: background .2s ease, transform .2s ease;
}
.hs-reveal__btn:hover { background: #005005; transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .hs-slide { transition: none; transform: none; }
}

/* Capa 3: CORTINA (dos paneles verdes) */
.hs-curtain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hs-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  /* La imagen se dimensiona al viewport completo para que, al cerrarse los dos
     paneles, el gradiente diagonal quede continuo de borde a borde. */
  background-image: var(--verde-img);
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  background-size: 100vw 100svh;   /* coincide con la altura real del stage */
  transform: scaleX(0);   /* estado inicial: línea invisible en el centro */
  will-change: transform;
}
.hs-panel--left {
  left: 0;
  transform-origin: right center;   /* crece desde el centro hacia la izquierda */
  background-position: left center;
}
.hs-panel--right {
  right: 0;
  transform-origin: left center;    /* crece desde el centro hacia la derecha */
  background-position: right center;
}

/* Capa 4: CONTENIDO VERDE ("Somos la mejor exportadora") */
.hs-green {
  z-index: 4;
  opacity: 0;               /* GSAP lo revela cuando la cortina está cerrada */
  background-image: var(--verde-img);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  text-align: center;
  color: #f4fbf6;
  padding: clamp(1.5rem, 6vw, 6rem);
}
/* Imagen de la finca MUY tenue detrás del verde (solo se intuye) */
.hs-green::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--finca-img);
  background-size: cover;
  background-position: center;
  opacity: 0.42;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}
.hs-green__content { position: relative; z-index: 1; max-width: 60ch; }
.hs-green__eyebrow {
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #a7e3bd;
}
.hs-green__title {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 5.5vw, 4rem);
  line-height: 1.1;
  margin: .6rem 0 0;
  min-height: 2.2em;          /* evita saltos de layout al escribir/borrar */
}
/* Cursor tipo máquina de escribir */
.tw-caret {
  display: inline-block;
  width: 0.06em;
  min-width: 3px;
  height: 1em;
  margin-left: 0.06em;
  background: currentColor;
  vertical-align: -0.1em;
  animation: tw-blink 1s steps(1) infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tw-caret { display: none; }
}
.hs-green__text {
  margin-top: 1.25rem;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: #d6f0df;
  opacity: .9;
}

/* ---------- FALLBACK: prefers-reduced-motion (secciones apiladas, sin cortina) ---------- */
.hero-stage.is-static {
  height: auto;
}
.hero-stage.is-static .hs-layer {
  position: relative;
  height: 100vh;
  height: 100svh;
  opacity: 1 !important;
  visibility: visible !important;
}
.hero-stage.is-static .hs-curtain {
  display: none;
}
.hero-stage.is-static .hs-green {
  opacity: 1 !important;
}

/* Evita destello de contenido antes de que GSAP tome control */
.js .hs-green,
.js .hs-reveal { visibility: hidden; }
.js .hero-stage.is-static .hs-green,
.js .hero-stage.is-static .hs-reveal { visibility: visible; }

/* =========================================================================
   RESPONSIVE
   Este archivo no tenía ningún breakpoint de ancho: el hero se dimensionaba
   solo con clamp()/vw. Funciona para el tamaño de letra, pero no resuelve el
   alto en móvil ni la orientación apaisada, que es donde se rompía.
   Nota: js/hero-sequence.js ya conmuta la animación (cortina ↔ crossfade)
   en 768px con gsap.matchMedia(); estos breakpoints acompañan ese corte.
   ========================================================================= */

/* -------------------------------------------------- TABLET (≤1024) */
@media (max-width: 1024px) {
  .hs-hero__title { max-width: 13ch; }
  .hs-reveal__title { max-width: 18ch; }
}

/* -------------------------------------------------- MÓVIL (≤767)
   Coincide con el corte de gsap.matchMedia() en el JS. */
@media (max-width: 767px) {
  .hs-hero__content {
    /* El texto centrado vertical se sube un poco: en móvil la parte baja de la
       foto la come el gesto de scroll y el indicador del sistema. */
    justify-content: flex-end;
    padding-bottom: clamp(3.5rem, 14vh, 6rem);
  }
  .hs-hero__title { font-size: clamp(2rem, 9vw, 2.9rem); max-width: 12ch; }
  .hs-hero__eyebrow { font-size: .7rem; letter-spacing: .2em; }
  .hs-hero__hint { margin-top: 1rem; font-size: .78rem; }

  .hs-reveal__content { gap: .85rem; }
  .hs-reveal__title { font-size: clamp(1.35rem, 6vw, 1.9rem); max-width: 16ch; }
  .hs-reveal__list { font-size: .92rem; max-width: 30ch; }
  .hs-reveal__btn { padding: .75rem 1.5rem; font-size: .95rem; }

  .hs-green__title { font-size: clamp(1.6rem, 7.5vw, 2.4rem); min-height: 2.4em; }
  .hs-green__text { margin-top: 1rem; font-size: .98rem; }
  .hs-green__eyebrow { font-size: .7rem; letter-spacing: .2em; }
  /* La textura de la finca satura demasiado en pantalla pequeña */
  .hs-green::before { opacity: .3; }
}

/* -------------------------------------------------- MÓVIL PEQUEÑO (≤380) */
@media (max-width: 380px) {
  .hs-hero__title { font-size: 1.85rem; max-width: 11ch; }
  .hs-reveal__title { font-size: 1.25rem; }
  .hs-green__title { font-size: 1.45rem; }
  .preloader__logo { width: min(68vw, 240px); }
}

/* -------------------------------------------------- APAISADO BAJO
   Móvil en horizontal: solo hay ~350px de alto. Sin esto el título y el botón
   se salen del stage pineado. */
@media (max-height: 500px) and (orientation: landscape) {
  .hs-hero__content {
    justify-content: center;
    padding: 1rem clamp(1.5rem, 5vw, 3rem);
    gap: .4rem;
  }
  .hs-hero__title { font-size: clamp(1.5rem, 5.5vh, 2.4rem); max-width: 22ch; }
  .hs-hero__hint { display: none; }          /* no cabe y no aporta */

  .hs-reveal__content { gap: .5rem; padding: 1rem 1.5rem; }
  .hs-reveal__title { font-size: clamp(1.1rem, 4.5vh, 1.7rem); max-width: 30ch; }
  .hs-reveal__list { font-size: .85rem; max-width: 46ch; }
  .hs-reveal__btn { margin-top: .2rem; padding: .55rem 1.2rem; font-size: .88rem; }

  .hs-green { padding: 1rem 1.5rem; }
  .hs-green__title { font-size: clamp(1.3rem, 5vh, 2rem); min-height: 1.6em; margin-top: .3rem; }
  .hs-green__text { margin-top: .6rem; font-size: .9rem; }
}