/* ═══ LAYOUT — Barra de navegación, sistema de páginas y cabeceras ═══ */
/* El sitio se ve de inmediato. La única excepción es la portada, que abre con
   la animación del dron: nace con `app--con-intro` —invisible— y `IntroLoader`
   le añade `ready` al terminar. */
.app--con-intro{opacity:0;transition:opacity .8s ease}
.app--con-intro.ready{opacity:1}

nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:16px var(--margen-lateral);
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:all .3s;
}
nav.scrolled{padding:10px var(--margen-lateral);box-shadow:0 4px 20px rgba(12,43,25,.08)}
.nav-logo{
  height:56px;cursor:pointer;
  background:none;border:none;padding:0;
  display:flex;align-items:center;
}
.nav-logo img{height:100%;width:auto;display:block}

.nav-links{display:flex;gap:4px;align-items:center}
.nav-tab{
  color:var(--verde-oscuro);
  font-size:0.875rem;font-weight:600;
  padding:10px 20px;border-radius:8px;
  cursor:pointer;transition:all .2s;
  background:none;border:none;
  font-family:'Montserrat',sans-serif;
  position:relative;
  letter-spacing:.02em;
}
.nav-tab:hover{color:var(--verde-texto)}
.nav-tab.active{
  color:var(--verde-texto);
}
.nav-tab.active::after{
  content:'';position:absolute;
  bottom:-14px;left:50%;
  transform:translateX(-50%);
  width:24px;height:3px;
  background:var(--verde-agricola);
  border-radius:2px;
}
nav.scrolled .nav-tab.active::after{bottom:-8px}

.nav-cta{
  background:var(--verde-agricola);color:#fff;
  padding:11px 22px;border-radius:8px;
  font-family:'Montserrat',sans-serif;
  font-weight:700;font-size:0.8125rem;
  cursor:pointer;border:none;
  transition:all .2s;
  display:inline-flex;align-items:center;gap:6px;
  margin-left:12px;
  letter-spacing:.02em;
}
.nav-cta:hover{background:var(--verde-oscuro);transform:translateY(-1px)}

.menu-toggle{
  display:none;
  background:none;
  border:none;padding:10px;
  cursor:pointer;
  color:var(--verde-oscuro);
}

/* ═══════════════════════════════════════
   PÁGINAS
   Cada dirección es un archivo HTML propio, así que aquí no hay vistas que
   mostrar u ocultar: solo el fundido de entrada del contenido.
   ═══════════════════════════════════════ */
main{animation:pageEnter .5s ease}
@keyframes pageEnter{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* Margen por defecto de cualquier sección de contenido.

   El selector va dentro de `:where()` a propósito: así no suma especificidad y
   cualquier sección puede imponer el suyo —.clientes-section pide cero a los
   lados para que las fincas crucen de lado a lado—. Con `section` a secas,
   esta regla genérica les ganaba y les metía 64 px. */
:where(section){padding:var(--ritmo-seccion) var(--margen-lateral);position:relative}
.container{max-width:var(--ancho-contenido);margin-inline:auto;position:relative;z-index:2}

/* Franjas decorativas del manual en secciones */
.section-franja-top{
  position:absolute;
  top:-1px;left:0;right:0;
  height:80px;
  overflow:hidden;
  z-index:1;
}
.section-franja-top svg{width:100%;height:100%;display:block}

.section-franja-bot{
  position:absolute;
  bottom:-1px;left:0;right:0;
  height:80px;
  overflow:hidden;
  z-index:1;
}
.section-franja-bot svg{width:100%;height:100%;display:block}

.section-eyebrow{
  display:inline-flex;align-items:center;
  font-size:0.6875rem;letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--verde-texto);font-weight:700;
  margin-bottom:16px;
}
.section-h2{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2rem,4.5vw,3.25rem);
  line-height:1.05;font-weight:900;
  color:var(--verde-oscuro);
  letter-spacing:-.02em;
  margin-bottom:20px;
}
.section-h2 span{color:var(--verde-agricola)}
.section-lead{
  font-size:1.0625rem;line-height:1.65;
  color:var(--gris-texto);max-width:42rem;
  margin-bottom:50px;
}


.page-header{
  background:var(--verde-oscuro);
  color:#fff;padding:clamp(120px, 18vh, 150px) var(--margen-lateral) clamp(64px, 9vw, 90px);
  position:relative;overflow:hidden;
}
/* Franjas del manual en headers */
.page-header-franja-1{
  position:absolute;
  top:-100px;right:-200px;
  width:800px;height:250px;
  background:var(--verde-agricola);
  transform:rotate(-25deg);
  opacity:.6;
}
.page-header-franja-2{
  position:absolute;
  bottom:-100px;left:-200px;
  width:700px;height:180px;
  background:var(--verde-claro);
  transform:rotate(-25deg);
  opacity:.15;
}
/* ══ ENCABEZADO DE PÁGINA CON VÍDEO ══
   Mismo trato que el encabezado de un servicio: el vídeo llena el bloque, va
   mudo y en bucle, y encima lleva un velo oscuro que mantiene legible el
   texto blanco. El verde del encabezado queda debajo como red de seguridad:
   si el vídeo no carga, no se ve un hueco. */
.page-header-fondo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
.page-header-velo{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;
  /* Pesa donde está el texto —a la izquierda— y se abre hacia la derecha.
     Medido fotograma a fotograma a lo largo de los 48 s del vídeo, cierre de
     logo incluido —casi una pantalla blanca—: en el peor de todos el titular
     queda en 5,8:1 y el párrafo en 5,7:1. Por debajo de este velo, el párrafo
     se quedaba en 3,2:1. */
  background:linear-gradient(
    100deg,
    rgba(12,43,25,.9) 0%,
    rgba(12,43,25,.84) 45%,
    rgba(12,43,25,.74) 78%,
    rgba(12,43,25,.68) 100%
  );
}
/* Y el texto, blanco entero: sobre vídeo, el 80 % del párrafo y el verde claro
   del rótulo no llegaban al mínimo ni con velo. */
.page-header--con-video .page-header-sub,
.page-header--con-video .page-header-eyebrow{color:#fff}
/* Con una imagen en movimiento detrás, las franjas solo ensucian. */
.page-header--con-video .page-header-franja-1,
.page-header--con-video .page-header-franja-2{display:none}

/* Con «movimiento reducido» se retira el vídeo y vuelven el verde y sus
   franjas, como en cualquier otro encabezado. */
@media (prefers-reduced-motion: reduce){
  .page-header-fondo,
  .page-header-velo{display:none}
  .page-header--con-video .page-header-franja-1,
  .page-header--con-video .page-header-franja-2{display:block}
}

.page-header-content{
  max-width:1200px;margin:0 auto;
  position:relative;z-index:2;
}
.page-header-eyebrow{
  display:inline-flex;align-items:center;
  font-size:0.6875rem;letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--verde-claro);font-weight:700;
  margin-bottom:20px;
}
.page-header h1{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2.625rem,6vw,4.5rem);
  line-height:.98;font-weight:900;
  letter-spacing:-.02em;
  margin-bottom:20px;max-width:56rem;
}
.page-header h1 span{color:var(--verde-agricola)}
.page-header-sub{
  font-size:1.125rem;line-height:1.6;
  color:rgba(255,255,255,.8);
  max-width:37rem;
}