/* ═══ HOME — Hero, servicios destacados y sección de clientes ═══ */
.hero{
  /* svh = alto de ventana pequeño: cuenta con la barra del navegador móvil
     desplegada, así el hero nunca queda cortado ni da saltos al desplazar. */
  min-height:100vh;
  min-height:100svh;
  background:var(--blanco);
  color:var(--verde-oscuro);position:relative;
  display:flex;align-items:center;
  padding:clamp(104px, 15vh, 140px) var(--margen-lateral) clamp(56px, 8vh, 80px);
  overflow:hidden;
}
.hero-content{
  max-width:1200px;margin:0 auto;width:100%;
  /* La columna de texto crece con la pantalla: en un monitor grande la
     letra es más alta, y con 640 px el titular se partía en tres líneas.
     `minmax(0, …)` deja que se encoja hasta lo que haya en un móvil. */
  display:grid;grid-template-columns:minmax(0,780px);
  gap:60px;align-items:center;
  position:relative;z-index:3;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;
  background:var(--gris-claro);
  border-radius:30px;
  font-size:0.75rem;font-weight:700;
  /* El verde de la marca sobre este gris da 3.09:1, por debajo del mínimo
     legible (4.5:1) a este tamaño. El verde oscuro da 12.8:1 y el acento de
     color se mantiene en el punto que late. */
  color:var(--verde-oscuro);letter-spacing:.05em;
  margin-bottom:28px;
  /* Sin versalitas: en mayúsculas sostenidas el rótulo decía «COLOMBIA», y el
     nombre del país se escribe con una sola mayúscula, la primera. */
}
.hero-eyebrow span{
  width:8px;height:8px;background:var(--verde-agricola);
  border-radius:50%;animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(77,149,74,.6)}
  70%{box-shadow:0 0 0 10px rgba(77,149,74,0)}
  100%{box-shadow:0 0 0 0 rgba(77,149,74,0)}
}
.hero h1{
  font-family:'Montserrat',sans-serif;
  /* El máximo en `rem` crece con la pantalla igual que el resto; 4,5 es lo
     que deja «para el campo.» en una sola línea hasta en un monitor de
     1920 px. */
  font-size:clamp(2.5rem,6vw,4.5rem);
  line-height:.95;font-weight:900;
  letter-spacing:-.03em;margin-bottom:24px;
  color:var(--verde-oscuro);
}
.hero h1 span{
  color:var(--verde-agricola);display:block;
}
.hero-sub{
  font-size:1.125rem;line-height:1.6;
  /* Verde oscuro y no gris: sobre el vídeo del campo, el gris de marca se
     queda en 2,8:1 de contraste, por debajo del mínimo legible de 4,5:1. */
  color:var(--verde-oscuro);
  margin-bottom:36px;max-width:32rem;
}
.hero-ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

.btn-primary{
  background:var(--verde-agricola);color:#fff;
  padding:15px 28px;border-radius:8px;
  font-family:'Montserrat',sans-serif;
  font-weight:700;font-size:0.875rem;
  border:none;cursor:pointer;transition:all .2s;
  display:inline-flex;align-items:center;gap:8px;
  letter-spacing:.02em;
}
.btn-primary:hover{
  background:var(--verde-oscuro);transform:translateY(-2px);
  box-shadow:0 14px 30px -10px rgba(12,43,25,.3);
}
.btn-secondary{
  background:transparent;color:var(--verde-oscuro);
  padding:15px 28px;border-radius:8px;
  font-family:'Montserrat',sans-serif;
  font-weight:700;font-size:0.875rem;
  border:2px solid var(--verde-oscuro);
  cursor:pointer;transition:all .2s;
  display:inline-flex;align-items:center;gap:8px;
  letter-spacing:.02em;
}
.btn-secondary:hover{
  background:var(--verde-oscuro);color:#fff;
}

.hero-stats{margin-top:clamp(36px, 5vw, 56px);display:flex;flex-wrap:wrap;gap:clamp(20px, 4vw, 44px)}
.hero-stat-num{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.875rem, 3.5vw, 2.375rem);font-weight:900;
  color:var(--verde-oscuro);line-height:1;
}
/* El verde es para la unidad —«h», «ños»—, no para la cifra, que ahora
   va en su propio <span> porque un contador la escribe al vuelo. */
.hero-stat-num .unidad{color:var(--verde-agricola)}
.hero-stat-lbl{
  font-size:0.6875rem;
  /* Verde oscuro y no gris, por lo mismo que `.hero-sub`: sobre el vídeo, y
     en letra de 11 px, el gris de marca no llega al contraste mínimo. */
  color:var(--verde-oscuro);
  margin-top:8px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;
}

/* ══ ESCENA DE FONDO ══
   Ocupa la sección entera, sin marco. El SVG lleva
   `preserveAspectRatio="xMidYMid slice"`, así que se comporta como un
   `object-fit:cover` y llena el hueco en cualquier proporción de pantalla. */
.hero-escena{
  position:absolute;inset:0;
  z-index:0;
}
.hero-escena svg{width:100%;height:100%;display:block}

/* ══ MOVIMIENTO ══
   Va en CSS y no dentro del SVG a propósito: así la regla global de
   `prefers-reduced-motion` lo detiene todo sin excepciones.
   Cada ciclo empieza y termina en el mismo estado, de modo que el bucle no
   tiene costura. */

/* La retícula de levantamiento se desplaza justo el ancho de una casilla. */
.eh-reticula{animation:ehDeslizar 6s linear infinite}
@keyframes ehDeslizar{
  to{transform:translate(80px, 80px)}
}

/* Las curvas de nivel se dibujan y se borran, escalonadas. */
.eh-curvas path{
  stroke-dasharray:1400;
  animation:ehTrazar 8s ease-in-out infinite;
}
.eh-curvas path:nth-child(2){animation-delay:-2s}
.eh-curvas path:nth-child(3){animation-delay:-4s}
.eh-curvas path:nth-child(4){animation-delay:-6s}
@keyframes ehTrazar{
  0%   {stroke-dashoffset:1400}
  45%  {stroke-dashoffset:0}
  75%  {stroke-dashoffset:0}
  100% {stroke-dashoffset:-1400}
}

/* Los lotes se delimitan uno tras otro. */
.eh-lotes polygon{
  stroke-dasharray:900;
  animation:ehDelimitar 9s ease-in-out infinite;
}
.eh-lotes polygon:nth-child(2){animation-delay:-3s}
.eh-lotes polygon:nth-child(3){animation-delay:-6s}
@keyframes ehDelimitar{
  0%   {stroke-dashoffset:900}
  30%  {stroke-dashoffset:0}
  80%  {stroke-dashoffset:0}
  100% {stroke-dashoffset:900}
}

/* Los puntos de coordenadas laten con desfases distintos. */
.eh-puntos circle{
  transform-box:fill-box;
  transform-origin:center;
  animation:ehLatir 2.2s ease-in-out infinite;
}
.eh-puntos circle:nth-child(2n){animation-delay:-.7s}
.eh-puntos circle:nth-child(3n){animation-delay:-1.4s}
@keyframes ehLatir{
  0%,100%{opacity:.35;transform:scale(.75)}
  50%    {opacity:.95;transform:scale(1.15)}
}

/* El dron cruza el terreno de lado a lado, sin prisa, y por la parte alta:
   la mitad izquierda a media altura es donde se apoya el titular. */
.eh-dron{animation:ehVolar 13s linear infinite}
@keyframes ehVolar{
  0%   {transform:translate(-220px, 168px)}
  50%  {transform:translate(900px, 96px)}
  100% {transform:translate(1820px, 168px)}
}

/* El haz de escaneo respira mientras vuela. */
.eh-haz{animation:ehEscanear 1.8s ease-in-out infinite}
@keyframes ehEscanear{
  0%,100%{opacity:.55}
  50%    {opacity:1}
}

/* Las parcelas cambian de intensidad muy despacio: da vida sin llamar la
   atención, que es lo que se le pide a un fondo. */
.eh-parcelas polygon{animation:ehRespirar 7s ease-in-out infinite}
.eh-parcelas polygon:nth-child(3n){animation-delay:-2.3s}
.eh-parcelas polygon:nth-child(3n+1){animation-delay:-4.6s}
@keyframes ehRespirar{
  0%,100%{opacity:inherit}
  50%    {opacity:.55}
}

/* El vídeo va delante de la escena dibujada, que queda debajo como red de
   seguridad, y llena el hero de borde a borde.

   Está grabado en vertical, así que en una pantalla apaisada se ve la franja
   central del encuadre y se pierde lo de arriba y lo de abajo. Es lo que
   cuesta que el fondo sea fondo: se probó dejarlo entero, con los lados
   rellenos, y prefirió verse lleno. */
.hero-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}

/* Quien pidió movimiento reducido no quiere un vídeo en bucle detrás del
   titular: se esconde y vuelve a mandar la escena dibujada, que esa misma
   preferencia deja quieta. */
@media (prefers-reduced-motion: reduce){
  .hero-video{display:none}
  /* Sin vídeo detrás, el velo vuelve a ser el de siempre: la escena dibujada
     es clara y con el degradado fuerte se lavaría. */
  .hero-velo{background:rgba(255,255,255,.34)}
}

/* El velo es lo que mantiene legible el titular sobre el vídeo. Pesa donde
   está el texto —a la izquierda— y se abre hacia la derecha, para que el
   campo se vea.

   Los valores no son a ojo: midiendo los fotogramas más oscuros del vídeo
   —los del bosque—, el verde del titular queda en la zona del texto en 5:1 de
   contraste, por encima del mínimo de 4,5:1. Por debajo de 0,5 ya no se
   cumple, así que este es casi todo el margen que hay para aclararlo. */
.hero-velo{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(
    100deg,
    rgba(255,255,255,.58) 0%,
    rgba(255,255,255,.52) 42%,
    rgba(255,255,255,.3) 72%,
    rgba(255,255,255,.14) 100%
  );
}
/* En vertical el velo cambia de forma, y eso vive en `responsive.css`. */

/* ═══════════════════════════════════════
   SERVICIOS DESTACADOS (en Inicio)
   ═══════════════════════════════════════ */
.destacados{
  background:var(--gris-claro);
  position:relative;overflow:hidden;
}
.destacados-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap:clamp(16px, 2.5vw, 24px);
}
.destacado-card{
  background:#fff;border-radius:16px;
  padding:32px 28px;
  transition:all .3s;position:relative;overflow:hidden;
  border-top:4px solid var(--verde-agricola);
}
.destacado-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px -20px rgba(12,43,25,.2);
}
.destacado-icon{
  width:56px;height:56px;
  background:var(--verde-claro);color:var(--verde-oscuro);
  border-radius:12px;display:grid;place-items:center;
  margin-bottom:20px;
}
.destacado-icon svg{width:28px;height:28px;overflow:visible}

/* ═══ LOS ICONOS DE LOS DESTACADOS, EN MOVIMIENTO ═══
   Cada uno hace lo que cuenta: las capas del SIG se leen una tras otra, el
   sol de la agricultura late, el potrero se divide y el punto del catastro se
   clava en el mapa. Son cuatro tarjetas, no siete: en el catálogo completo
   (`servicio-icon`) los mismos iconos se quedan quietos, que siete cosas
   moviéndose a la vez marean.

   Los trazos que se dibujan solos llevan `pathLength="1"` en el SVG: el
   recorrido entero vale 1 y el CSS no tiene que saber cuánto mide cada línea.

   La regla de «movimiento reducido» de base.css las detiene todas. */

/* 1 · Mapeo y SIG: las tres sondas bajan por turnos. */
.destacado-icon .ico-sonda{
  stroke-dasharray:1;
  animation:icoSonda 3.4s ease-in-out infinite;
}
.destacado-icon .ico-t2{animation-delay:.25s}
.destacado-icon .ico-t3{animation-delay:.5s}
@keyframes icoSonda{
  0%{stroke-dashoffset:1}
  35%,80%{stroke-dashoffset:0}
  100%{stroke-dashoffset:1}
}

/* 2 · Agricultura: el sol late y el grano respira con él. */
.destacado-icon .ico-rayos,
.destacado-icon .ico-nucleo,
.destacado-icon .ico-pin,
.destacado-icon .ico-diana{transform-box:fill-box;transform-origin:center}
.destacado-icon .ico-rayos{animation:icoRayos 3.6s ease-in-out infinite}
@keyframes icoRayos{
  0%,100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.14);opacity:1}
}
.destacado-icon .ico-nucleo{animation:icoNucleo 3.6s ease-in-out infinite}
@keyframes icoNucleo{
  0%,100%{transform:scale(1)}
  50%{transform:scale(.88)}
}

/* 3 · Ganadería: el potrero se divide. */
.destacado-icon .ico-division{
  stroke-dasharray:1;
  animation:icoDivision 4s ease-in-out infinite;
}
@keyframes icoDivision{
  0%{stroke-dashoffset:1}
  40%,85%{stroke-dashoffset:0}
  100%{stroke-dashoffset:1}
}

/* 4 · Catastro: el punto se clava y el predio queda marcado. */
.destacado-icon .ico-pin{animation:icoPin 3.2s ease-in-out infinite}
@keyframes icoPin{
  0%,100%{transform:translateY(0)}
  45%{transform:translateY(-2px)}
}
.destacado-icon .ico-diana{animation:icoDiana 3.2s ease-in-out infinite}
@keyframes icoDiana{
  0%,25%{transform:scale(1);opacity:1}
  50%{transform:scale(1.4);opacity:.55}
  75%,100%{transform:scale(1);opacity:1}
}
.destacado-titulo{
  font-family:'Montserrat',sans-serif;
  font-size:1.25rem;font-weight:800;
  color:var(--verde-oscuro);margin-bottom:10px;
}
.destacado-desc{
  font-size:0.875rem;line-height:1.6;
  color:var(--gris-texto);
}


.clientes-section{
  background:linear-gradient(180deg,#fff 0%,var(--gris-claro) 100%);
  padding:100px 0 120px;
  position:relative;overflow:hidden;
}
.clientes-section .container{
  max-width:var(--ancho-contenido);margin-inline:auto;
  padding-inline:var(--margen-lateral);
}
.clientes-header{text-align:center;margin-bottom:60px}
.clientes-header .section-lead{margin-left:auto;margin-right:auto;text-align:center}

/* Escenario donde vuelan los drones */
/* Ocupa el ancho completo de la sección: es la pista por la que cruzan los
   drones, y encerrarla en el contenedor la dejaba cortada a los lados. */
.clientes-stage{
  position:relative;
  height:360px;overflow:hidden;
  margin-block:clamp(28px, 4vw, 40px);
}
/* Nube de puntos como radar */
.clientes-stage::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,var(--verde-claro) 1px,transparent 0);
  background-size:20px 20px;
  opacity:.4;pointer-events:none;
}
/* Franja del "horizonte" abajo */
.clientes-stage::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,transparent 0%,var(--verde-agricola) 50%,transparent 100%);
}

/* Cada dron con su cliente colgando */
.dron-slot{
  --vuelo:40s;
  /* Desde dónde entra, fuera de la pantalla. Los seis drones se reparten el
     recorrido por igual, así que el recorrido tiene que dar para seis
     tarjetas: por estrecha que sea la pantalla, nunca menos de 1560px. En
     pantallas grandes basta con asomarse desde 280px a la izquierda. */
  --salida:calc(-1 * max(280px, 1560px - 100vw));

  position:absolute;top:0;
  width:260px;height:100%;
  left:var(--salida);
  animation:dronViaja var(--vuelo) linear infinite;
  will-change:transform;
}
/* 6 ranuras repartidas por igual a lo largo del vuelo, pero no en orden: así
   dos tarjetas vecinas en el marcado no cruzan juntas. Van en fracciones del
   vuelo, no en segundos, para que cambiar `--vuelo` no descoloque el reparto.
   Son las ranuras que espera VistaDeClientes: si algún día hay más clientes,
   hay que añadir aquí sus líneas —el generador avisa si faltan—. */
.dron-slot:nth-child(1){animation-delay:0s}
.dron-slot:nth-child(2){animation-delay:calc(var(--vuelo) * -0.3333)}
.dron-slot:nth-child(3){animation-delay:calc(var(--vuelo) * -0.6667)}
.dron-slot:nth-child(4){animation-delay:calc(var(--vuelo) * -0.1667)}
.dron-slot:nth-child(5){animation-delay:calc(var(--vuelo) * -0.5)}
.dron-slot:nth-child(6){animation-delay:calc(var(--vuelo) * -0.8333)}

@keyframes dronViaja{
  0%   {left:var(--salida)}
  100% {left:100%}
}

/* El cuerpo del dron arriba, flotando */
.dron-body{
  position:absolute;
  top:20px;left:50%;
  width:110px;height:65px;
  transform:translateX(-50%);
  animation:dronBob 1.5s ease-in-out infinite alternate;
  z-index:3;
}
.dron-body svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 6px 12px rgba(12,43,25,.25));
}
@keyframes dronBob{
  0%   {transform:translateX(-50%) translateY(0)}
  100% {transform:translateX(-50%) translateY(-8px)}
}

/* La cuerda */
.dron-rope{
  position:absolute;
  top:80px;left:50%;
  width:2px;height:85px;
  background:linear-gradient(180deg,transparent 0%,var(--gris-tecnico) 25%,var(--gris-tecnico) 100%);
  transform-origin:top center;
  animation:ropeSway 2s ease-in-out infinite alternate;
  z-index:2;
}
@keyframes ropeSway{
  0%   {transform:translateX(-50%) rotate(-3deg)}
  100% {transform:translateX(-50%) rotate(3deg)}
}

/* Tarjeta del cliente colgando */
.cliente-card{
  position:absolute;
  top:165px;left:50%;
  transform:translateX(-50%);
  background:#fff;
  padding:22px 26px;
  border-radius:14px;
  border-top:4px solid var(--verde-agricola);
  box-shadow:0 20px 40px rgba(12,43,25,.2);
  min-width:210px;text-align:center;
  transform-origin:top center;
  animation:cardSway 2s ease-in-out infinite alternate;
  z-index:2;
}
@keyframes cardSway{
  0%   {transform:translateX(-50%) rotate(-3deg)}
  100% {transform:translateX(-50%) rotate(3deg)}
}
.cliente-emoji{
  font-size:2.375rem;margin-bottom:8px;line-height:1;
}
.cliente-nombre{
  font-family:'Montserrat',sans-serif;
  font-weight:800;font-size:0.9375rem;
  color:var(--verde-oscuro);
  line-height:1.2;margin-bottom:6px;
}
.cliente-lugar{
  font-size:0.6562rem;color:var(--gris-texto);
  font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;
}

/* CTA final */
.clientes-cta{
  text-align:center;margin-top:60px;
  padding:36px 32px;
  background:#fff;border-radius:16px;
  border-top:5px solid var(--verde-agricola);
  max-width:43rem;
  margin-left:auto;margin-right:auto;
  box-shadow:0 20px 50px -20px rgba(12,43,25,.15);
}
.clientes-cta h3{
  font-family:'Montserrat',sans-serif;
  font-size:1.625rem;font-weight:900;
  color:var(--verde-oscuro);
  margin-bottom:12px;letter-spacing:-.02em;
}
.clientes-cta h3 span{color:var(--verde-agricola)}
.clientes-cta p{
  color:var(--gris-texto);
  margin-bottom:24px;font-size:0.9375rem;
}

@media (max-width:780px){
  .clientes-section{padding:70px 0 90px}
  .clientes-stage{height:340px}
  .cliente-card{min-width:180px;padding:18px 20px}
  .cliente-nombre{font-size:0.8125rem}
  .cliente-emoji{font-size:2rem}
  /* La entrada no se toca: la calcula `--salida` a partir del ancho. */
  .dron-slot{width:220px}
  .clientes-cta{padding:28px 24px}
  .clientes-cta h3{font-size:1.375rem}
}


/* ═══ DESTACADOS: las tarjetas son enlaces a cada línea de servicio ═══ */
.destacado-card{display:flex;flex-direction:column}
.destacado-categoria{
  font-size:0.625rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--verde-texto);
  margin-bottom:8px;
}
.destacado-vermas{
  margin-top:auto;padding-top:18px;
  color:var(--verde-texto);
  font-weight:800;font-size:0.6875rem;
  letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;gap:6px;
}