/* ═══ SERVICIOS — Grilla de servicios y páginas de detalle ═══ */
.servicios-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:clamp(16px, 2.5vw, 24px);
}
.servicio-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;padding:36px 30px;
  transition:all .3s;position:relative;overflow:hidden;
  border-top:5px solid var(--verde-agricola);
}
.servicio-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -25px rgba(12,43,25,.2);
}
.servicio-card.feat{
  background:var(--verde-oscuro);
  color:#fff;border-top-color:var(--verde-agricola);
  border-left:1px solid var(--verde-agricola);
  border-right:1px solid var(--verde-agricola);
  border-bottom:1px solid var(--verde-agricola);
}
.servicio-card.feat::after{
  content:'';position:absolute;
  right:-50px;top:-50px;
  width:180px;height:180px;
  background:radial-gradient(circle,rgba(77,149,74,.25),transparent 70%);
  border-radius:50%;pointer-events:none;
}
.servicio-icon{
  width:60px;height:60px;
  background:var(--verde-claro);color:var(--verde-oscuro);
  border-radius:12px;display:grid;place-items:center;
  margin-bottom:22px;
}
.servicio-card.feat .servicio-icon{
  background:rgba(77,149,74,.2);color:var(--verde-agricola);
}
.servicio-icon svg{width:30px;height:30px}
.servicio-titulo{
  font-family:'Montserrat',sans-serif;
  font-size:1.3125rem;font-weight:800;
  color:var(--verde-oscuro);margin-bottom:12px;
  letter-spacing:-.01em;
}
.servicio-card.feat .servicio-titulo{color:#fff}
.servicio-desc{
  font-size:0.875rem;line-height:1.65;
  color:var(--gris-texto);
}
.servicio-card.feat .servicio-desc{color:rgba(255,255,255,.8)}
/* La foto del servicio dentro de su tarjeta: una franja, no una postal. A
   16/9 estiraba la tarjeta al doble que sus vecinas; recortada a 5/2 ocupa
   lo justo para que se vea de qué va.

   El recorte se desplaza hacia arriba (35%) a propósito: ahí está el sello
   del servicio, y centrado se le cortaba el borde. */
.servicio-foto{display:block;margin-bottom:20px}
.servicio-foto img{
  /* `height:auto` es imprescindible: el alto del atributo —que está ahí para
     reservar el hueco— ganaría a la proporción y la foto saldría estirada. */
  width:100%;height:auto;aspect-ratio:5/2;
  object-fit:cover;object-position:center 35%;
  border-radius:12px;
}


/* ══ EL RITMO DE UNA PÁGINA DE SERVICIO ══
   Antes iba en bloque: todo el texto y después todas las fotos en una retícula
   pareja. Se leía como un documento. Ahora texto y foto se alternan, una
   franja ancha corta la lectura por la mitad y las que sobran caen en un
   mosaico desigual. Lo decide `VistaDeServicio` según cuántas fotos haya. */

/* Una columna de lectura cómoda cuando el bloque no trae fotos. */
.servicio-texto-solo{max-width:38rem}

/* Texto y foto, lado a lado. En móvil se apilan, con la foto debajo de su
   párrafo; de 860 px para arriba se reparten mitad y mitad, y una de cada dos
   invierte el orden para que la página zigzaguee. */
.servicio-dupla{
  display:grid;grid-template-columns:1fr;
  gap:clamp(28px, 5vw, 64px);
  align-items:center;
}
.servicio-dupla-texto{max-width:38rem}
@media (min-width:860px){
  .servicio-dupla{grid-template-columns:1fr 1fr}
  .servicio-dupla--invertida .servicio-dupla-texto{order:2}
}

/* ══ EL SEPARADOR ANIMADO ══
   Lo que antes era una foto partida a lo ancho. La foto volvió al flujo, como
   las demás, y la pausa entre bloques la hace ahora un dibujo: el dron cruza
   el predio, el lindero se traza y los vértices aparecen uno a uno. Cuenta de
   qué va el oficio sin recortarle nada a ninguna foto. */
.servicio-separador{
  padding:0;background:var(--verde-oscuro);
  overflow:hidden;line-height:0;
}
.servicio-separador svg{
  width:100%;height:clamp(140px, 16vw, 200px);display:block;
}
/* La retícula del plano se desplaza justo el ancho de una casilla: el bucle no
   tiene costura. */
.sep-reticula{animation:sepReticula 9s linear infinite}
@keyframes sepReticula{to{transform:translateX(-70px)}}

/* El lindero se dibuja y se queda; luego vuelve a empezar. */
.sep-lindero{stroke-dasharray:1;animation:sepTrazar 10s ease-in-out infinite}
@keyframes sepTrazar{
  0%   {stroke-dashoffset:1}
  35%  {stroke-dashoffset:0}
  88%  {stroke-dashoffset:0}
  100% {stroke-dashoffset:1}
}

/* Los vértices van cayendo detrás del trazo. */
.sep-vertice{
  transform-box:fill-box;transform-origin:center;
  animation:sepVertice 10s ease-in-out infinite;
}
.sep-v2{animation-delay:.5s}
.sep-v3{animation-delay:1s}
.sep-v4{animation-delay:1.5s}
.sep-v5{animation-delay:2s}
.sep-v6{animation-delay:2.5s}
@keyframes sepVertice{
  0%,4%  {opacity:0;transform:scale(.4)}
  12%,86%{opacity:1;transform:scale(1)}
  96%,100%{opacity:0;transform:scale(.4)}
}

/* Y el dron cruza el predio de lado a lado, sin prisa. */
.sep-dron{animation:sepVolar 10s linear infinite}
@keyframes sepVolar{
  from{transform:translate(-80px, 18px)}
  to  {transform:translate(1480px, 18px)}
}
.sep-haz{animation:sepHaz 2.4s ease-in-out infinite}
@keyframes sepHaz{
  0%,100%{opacity:.1}
  50%    {opacity:.26}
}

/* ── El otro separador, el de Nutrición animal ──
   Mismo tiempo de vuelta que el del predio —10 s— para que las dos páginas
   respiren igual. Lo que cruza es el marco de aforo, y las matas se levantan
   justo detrás: el retraso de cada una es lo que tarda el marco en llegar
   hasta ella. Va en `:nth-child` y no en un `style` dentro del SVG porque la
   política de seguridad descarta los estilos en línea. */
.sep-aforo{animation:sepAforo 10s linear infinite}
@keyframes sepAforo{
  from{transform:translate(-120px, 100px)}
  to  {transform:translate(1520px, 100px)}
}
.sep-marco{animation:sepMedir 2.2s ease-in-out infinite}
@keyframes sepMedir{
  0%,100%{fill-opacity:.1}
  50%    {fill-opacity:.24}
}

.sep-pasto g{
  transform-box:fill-box;transform-origin:center bottom;
  animation:sepCrecer 10s ease-in-out infinite;
}
.sep-pasto g:nth-child(1){animation-delay:1s}
.sep-pasto g:nth-child(2){animation-delay:1.9s}
.sep-pasto g:nth-child(3){animation-delay:2.8s}
.sep-pasto g:nth-child(4){animation-delay:3.6s}
.sep-pasto g:nth-child(5){animation-delay:4.5s}
.sep-pasto g:nth-child(6){animation-delay:5.4s}
.sep-pasto g:nth-child(7){animation-delay:6.3s}
.sep-pasto g:nth-child(8){animation-delay:7.1s}
.sep-pasto g:nth-child(9){animation-delay:8s}
@keyframes sepCrecer{
  0%,2%   {transform:scaleY(.3)}
  22%,88% {transform:scaleY(1)}
  100%    {transform:scaleY(.3)}
}

/* Y del suelo suben los nutrientes, que es de lo que vive el pasto. */
.sep-nutrientes circle{animation:sepSubir 3.6s ease-in infinite}
.sep-nutrientes circle:nth-child(2){animation-delay:.7s}
.sep-nutrientes circle:nth-child(3){animation-delay:1.4s}
.sep-nutrientes circle:nth-child(4){animation-delay:2.1s}
.sep-nutrientes circle:nth-child(5){animation-delay:2.8s}
@keyframes sepSubir{
  0%  {transform:translateY(0);opacity:0}
  25% {opacity:.9}
  100%{transform:translateY(-64px);opacity:0}
}

/* Con el movimiento desactivado, la regla global de `base.css` deja las
   animaciones en nada y cada dibujo vuelve a su posición escrita. Para casi
   todos está bien —el pasto queda crecido, los vértices puestos—, pero los dos
   que cruzan la franja se quedarían en la esquina de arriba a la izquierda, a
   medio salir. Así que se les da su sitio: a la mitad del potrero. */
/* ── Y el tercero, el de Ganadería ──
   Las vacas son el mismo emoji del dibujo del encabezado, así que no hay
   cabeza ni patas que mover por separado: lo que se mueve es la vaca entera.
   Los tiempos no son redondos a propósito —4,2 s el rumiar, 24 s la vuelta,
   5 s la brisa—: al no coincidir, la franja nunca repite el mismo cuadro. */
.sep-vaca{
  transform-box:fill-box;transform-origin:center bottom;
  animation:sepRumiar 4.2s ease-in-out infinite;
}
.sep-hato .sep-vaca:nth-child(2){animation-delay:-1.6s}
.sep-hato .sep-vaca:nth-child(3){animation-delay:-3.1s}
@keyframes sepRumiar{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%    {transform:translateY(-3px) rotate(-2.5deg)}
}

/* La que anda cruza el potrero de derecha a izquierda, que es hacia donde
   mira el emoji, y sin prisa, como andan. */
.sep-vaca-anda{animation:sepAndar 24s linear infinite}
@keyframes sepAndar{
  from{transform:translate(1480px, 146px)}
  to  {transform:translate(-80px, 146px)}
}
/* Y da pasitos: el bamboleo corto de andar. */
.sep-vaca-paso{
  transform-box:fill-box;transform-origin:center bottom;
  animation:sepTrote .7s ease-in-out infinite;
}
@keyframes sepTrote{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%    {transform:translateY(-4px) rotate(1.5deg)}
}

/* El pasto se mece. Las matas van desfasadas entre sí para que no se muevan
   todas a una, que es lo que delata un dibujo. */
.sep-brisa g{
  transform-box:fill-box;transform-origin:center bottom;
  animation:sepBrisa 5s ease-in-out infinite;
}
.sep-brisa g:nth-child(2n){animation-delay:-2.5s}
.sep-brisa g:nth-child(3n){animation-delay:-1.3s}
@keyframes sepBrisa{
  0%,100%{transform:skewX(0deg)}
  50%    {transform:skewX(-7deg)}
}

/* ── Y el cuarto, el de Agricultura de precisión ──
   El dron cruza el cultivo y detrás de él cada árbol queda marcado, que es lo
   que entrega el servicio. El retraso de cada marca no es un número redondo:
   es el tiempo que tarda el dron en llegar hasta ese árbol, calculado con su
   posición. Por eso van uno a uno y no todos a la vez. */
.sep-dron-conteo{animation:sepRecorrer 13.0s linear infinite}
@keyframes sepRecorrer{
  from{transform:translate(-140px, 12px)}
  to  {transform:translate(1520px, 12px)}
}
.sep-haz-conteo{animation:sepHaz 2.4s ease-in-out infinite}

.sep-marca{
  transform-box:fill-box;transform-origin:center;
  opacity:0;
  animation:sepMarcar 13.0s ease-out infinite;
}
.sep-cultivo > g:nth-child(1) .sep-marca{animation-delay:1.29s}
.sep-cultivo > g:nth-child(2) .sep-marca{animation-delay:2.16s}
.sep-cultivo > g:nth-child(3) .sep-marca{animation-delay:3.03s}
.sep-cultivo > g:nth-child(4) .sep-marca{animation-delay:3.91s}
.sep-cultivo > g:nth-child(5) .sep-marca{animation-delay:4.79s}
.sep-cultivo > g:nth-child(6) .sep-marca{animation-delay:5.66s}
.sep-cultivo > g:nth-child(7) .sep-marca{animation-delay:6.54s}
.sep-cultivo > g:nth-child(8) .sep-marca{animation-delay:7.42s}
.sep-cultivo > g:nth-child(9) .sep-marca{animation-delay:8.3s}
.sep-cultivo > g:nth-child(10) .sep-marca{animation-delay:9.17s}
.sep-cultivo > g:nth-child(11) .sep-marca{animation-delay:10.05s}
.sep-cultivo > g:nth-child(12) .sep-marca{animation-delay:10.93s}
@keyframes sepMarcar{
  0%     {opacity:0;transform:scale(.3)}
  6%     {opacity:.95;transform:scale(1.15)}
  10%,88%{opacity:.85;transform:scale(1)}
  96%,100%{opacity:0;transform:scale(.3)}
}

/* ── Y el quinto, el de Diseño predial ──
   Tres fincas repartiéndose, una detrás de otra. El orden dentro de cada una
   —lindero, mojones, camino, lotes— es siempre el mismo; lo que cambia de una
   finca a otra es cuándo empieza, y eso lo lleva una sola variable por finca
   en vez de repetir los retrasos tres veces. La vuelta dura 12 s, que no es
   múltiplo de ninguna de las otras franjas. */
.sep-finca:nth-child(2){--entra:0s}
.sep-finca:nth-child(3){--entra:1.5s}
.sep-finca:nth-child(4){--entra:3s}

.sep-predio{
  stroke-dasharray:1;
  animation:sepDibujar 12s ease-in-out infinite;
  animation-delay:var(--entra);
}
.sep-camino{
  stroke-dasharray:1;
  animation:sepDibujar 12s ease-in-out infinite;
  animation-delay:calc(var(--entra) + 2.1s);
}
@keyframes sepDibujar{
  0%  {stroke-dashoffset:1}
  18% {stroke-dashoffset:0}
  84% {stroke-dashoffset:0}
  100%{stroke-dashoffset:1}
}

.sep-division{stroke-dasharray:1;animation:sepDividir 12s ease-out infinite}
.sep-lotes .sep-division:nth-child(1){animation-delay:calc(var(--entra) + 3.1s)}
.sep-lotes .sep-division:nth-child(2){animation-delay:calc(var(--entra) + 3.5s)}
.sep-lotes .sep-division:nth-child(3){animation-delay:calc(var(--entra) + 3.9s)}
@keyframes sepDividir{
  0%      {stroke-dashoffset:1}
  6%      {stroke-dashoffset:0}
  70%     {stroke-dashoffset:0}
  78%,100%{stroke-dashoffset:1}
}

.sep-mojon{
  transform-box:fill-box;transform-origin:center;
  opacity:0;
  animation:sepMojon 12s ease-out infinite;
}
.sep-mojones .sep-mojon:nth-child(1){animation-delay:calc(var(--entra) + 1.2s)}
.sep-mojones .sep-mojon:nth-child(2){animation-delay:calc(var(--entra) + 1.4s)}
.sep-mojones .sep-mojon:nth-child(3){animation-delay:calc(var(--entra) + 1.6s)}
.sep-mojones .sep-mojon:nth-child(4){animation-delay:calc(var(--entra) + 1.8s)}
.sep-mojones .sep-mojon:nth-child(5){animation-delay:calc(var(--entra) + 2s)}
.sep-mojones .sep-mojon:nth-child(6){animation-delay:calc(var(--entra) + 2.2s)}
@keyframes sepMojon{
  0%      {opacity:0;transform:scale(.3)}
  3%      {opacity:1;transform:scale(1.25)}
  7%,70%  {opacity:1;transform:scale(1)}
  78%,100%{opacity:0;transform:scale(.3)}
}

@media (prefers-reduced-motion: reduce){
  .sep-dron{transform:translate(700px, 18px)}
  /* Sin animación, el reparto se muestra hecho: el lindero, el camino y los
     lotes puestos, que es como queda el plano. */
  .sep-predio,.sep-camino,.sep-division{stroke-dashoffset:0}
  .sep-mojon{opacity:1}
  /* Sin animación las marcas se quedarían en su estado escrito, que es
     invisible: aquí se muestran todas, que es como queda el inventario. */
  .sep-marca{opacity:.85}
  .sep-dron-conteo{transform:translate(760px, 12px)}
  .sep-aforo{transform:translate(700px, 100px)}
  .sep-vaca-anda{transform:translate(760px, 146px)}
}

/* El mosaico: dos columnas desiguales que se llenan por alto.
   La vista reparte las fotos —cada una se va a la columna que vaya más corta—,
   así que aquí solo hace falta poner las dos columnas y su separación. Antes
   esto era una retícula con una pieza que ocupaba dos filas, y la última foto
   terminaba colgando sola al fondo con media página vacía al lado. */
.servicio-mosaico{
  display:grid;grid-template-columns:1fr;
  gap:clamp(14px, 2.4vw, 22px);
  align-items:start;
}
.servicio-mosaico-col{
  display:flex;flex-direction:column;
  gap:clamp(14px, 2.4vw, 22px);
}
@media (min-width:760px){
  /* La izquierda, un poco más ancha: es lo que vuelve el mosaico desigual.
     Ese 1,15 lo conoce también la vista, que lo usa para pesar el reparto. */
  .servicio-mosaico{grid-template-columns:1.15fr 1fr}
}

.servicio-figura img{
  width:100%;height:auto;
  border-radius:14px;
  box-shadow:0 20px 50px -28px rgba(12,43,25,.5);
}

/* ══ SERVICIO DETALLE (páginas individuales) ══ */
.servicio-detalle{background:#fff}

.servicio-hero{
  background:var(--verde-oscuro);
  color:#fff;padding:clamp(120px, 18vh, 150px) var(--margen-lateral) clamp(64px, 9vw, 90px);
  position:relative;overflow:hidden;
}
.servicio-hero-franja{
  position:absolute;
  top:-100px;right:-200px;
  width:800px;height:250px;
  background:var(--verde-agricola);
  transform:rotate(-25deg);
  opacity:.5;
}

/* ══ ENCABEZADO CON FONDO ══
   Un vídeo o una foto del cliente, según lo que diga el campo `video` o
   `foto` de esa línea en los datos. A efectos de estilo dan igual: los dos
   llenan el encabezado. El encabezado es verde oscuro con texto blanco, así
   que aquí el velo es oscuro, al revés que en la portada. */
.servicio-hero-fondo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
/* Una foto va dentro de un <picture>, y el que se estira es el <img>. */
.servicio-hero-fondo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
/* Pesa donde está el texto —a la izquierda— y se abre hacia la derecha.
   El 0,68 sale de medir. El vídeo acaba con el cierre de logo, que es casi
   una pantalla blanca: contra ese fotograma —el peor de todos— el texto
   blanco queda en 5,5:1 de contraste. Por debajo de 0,62 ya no llega al
   mínimo de 4,5:1 durante esos segundos. */
.servicio-hero-velo{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(
    100deg,
    rgba(12,43,25,.8) 0%,
    rgba(12,43,25,.68) 45%,
    rgba(12,43,25,.5) 78%,
    rgba(12,43,25,.4) 100%
  );
}
/* Una foto no tiene fotogramas en blanco como el cierre de un vídeo, así que
   aguanta bastante menos velo. El de la foto del hato, medido: el texto
   blanco queda en 5,7:1 sobre su zona más clara. */
picture.servicio-hero-fondo ~ .servicio-hero-velo{
  background:linear-gradient(
    100deg,
    rgba(12,43,25,.58) 0%,
    rgba(12,43,25,.48) 45%,
    rgba(12,43,25,.34) 78%,
    rgba(12,43,25,.26) 100%
  );
}
/* Hay fotos que traen blancos: la de Diseño predial lleva los rótulos de cada
   predio y las líneas de los linderos, y el texto blanco encima se quedaba
   en 1,9:1 —ilegible—. Con este velo, medido sobre el peor píxel (un rótulo
   blanco), el párrafo queda en 4,9:1 y el titular en 6,1:1.

   No se aplica a todas: la del hato es pasto y monte, aguanta
   mucho menos velo y oscurecerla de más sería perder la foto. Lo dice el
   dato, con `fotoClara: true`. */
.servicio-hero--foto-clara picture.servicio-hero-fondo ~ .servicio-hero-velo{
  background:linear-gradient(
    100deg,
    rgba(12,43,25,.8) 0%,
    rgba(12,43,25,.74) 45%,
    rgba(12,43,25,.68) 78%,
    rgba(12,43,25,.66) 100%
  );
}
/* Y el párrafo, blanco entero: el 94 % le quitaba el poco margen que le
   quedaba sobre los rótulos blancos de la foto. */
.servicio-hero--foto-clara .servicio-hero-sub{color:#fff}

/* Encuadre de la foto de Diseño predial: empieza por el borde de arriba y se
   recorta por abajo. Se probó anclarla por el otro extremo —los predios
   rotulados y el recuadro de convenciones están en la mitad inferior— y se
   prefirió así. Es un ajuste de esta foto, no una regla general: cada
   encabezado lleva la clase de su servicio justamente para esto.

   Solo se nota en pantallas anchas: cuando la ventana es más alta que ancha,
   la foto ya cabe justa de arriba abajo y no hay nada que mover. */
.servicio-hero--diseno-predial .servicio-hero-fondo img{object-position:center top}

/* Encuadre de la foto de Nutrición animal: bajada del todo, es decir, anclada
   por el borde de arriba. Centrada se le iba el dron —y su haz— por encima
   del recorte, que es justo lo que cuenta la foto. Como la de Diseño predial,
   solo se nota en pantallas anchas. */
.servicio-hero--nutricion-animal .servicio-hero-fondo img{object-position:center top}

/* Y sin la ilustración animada: con la foto detrás no suma nada, compite con
   ella. Al quitarla, la columna de texto se queda sola y hay que ponerle
   ancho de lectura: a 1100px la línea pasaba de 90 caracteres. */
.servicio-hero--diseno-predial .servicio-hero-icon,
.servicio-hero--ganaderia .servicio-hero-icon,
.servicio-hero--agricultura .servicio-hero-icon{display:none}
.servicio-hero--diseno-predial .servicio-hero-content,
.servicio-hero--ganaderia .servicio-hero-content,
.servicio-hero--agricultura .servicio-hero-content{grid-template-columns:minmax(0,44rem)}

/* Sobre una foto o un vídeo, el verde de la marca se pierde: es un verde
   medio y el fondo también —el pasto, el monte—, y quedan en 1,5:1. Sobre el
   verde oscuro liso sí funcionaba, porque el fondo era casi negro. Así que
   con material detrás, los rótulos pequeños y el acento del titular pasan a
   blanco; el verde se queda para el botón, que lleva su propio fondo. */
.servicio-hero--con-fondo .servicio-back,
.servicio-hero--con-fondo .servicio-categoria,
/* Dos clases en el mismo elemento, para ganarle en especificidad a
   `.servicio-hero h1 span`, que se declara más abajo. */
.servicio-hero.servicio-hero--con-fondo h1 span{color:#fff}
.servicio-hero--con-fondo .servicio-hero-sub{color:rgba(255,255,255,.94)}

/* Con una imagen detrás, la franja diagonal solo ensucia. */
.servicio-hero--con-fondo .servicio-hero-franja{display:none}

/* Con «movimiento reducido» se retira el vídeo —no la foto, que está
   quieta— y el encabezado vuelve al verde liso con su franja. */
@media (prefers-reduced-motion: reduce){
  video.servicio-hero-fondo{display:none}
  video.servicio-hero-fondo ~ .servicio-hero-velo{display:none}
  .servicio-hero--con-fondo .servicio-hero-franja{display:block}
  picture.servicio-hero-fondo ~ .servicio-hero-franja{display:none}
}
.servicio-hero-content{
  max-width:1100px;margin:0 auto;
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap:60px;align-items:center;
}
.servicio-back{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--verde-claro);
  font-size:0.8125rem;font-weight:700;
  background:none;border:none;cursor:pointer;
  font-family:'Montserrat',sans-serif;
  margin-bottom:24px;
  letter-spacing:.05em;text-transform:uppercase;
  transition:transform .2s;
}
.servicio-back:hover{transform:translateX(-4px)}

.servicio-hero h1{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2.375rem,5vw,4rem);
  line-height:1;font-weight:900;
  letter-spacing:-.02em;
  margin-bottom:20px;
}
.servicio-hero h1 span{color:var(--verde-agricola)}
.servicio-hero-sub{
  font-size:1.0625rem;line-height:1.65;
  color:rgba(255,255,255,.8);
  margin-bottom:30px;
}
.servicio-hero-icon{
  aspect-ratio:1/1;
  background:rgba(77,149,74,.1);
  border:2px solid var(--verde-agricola);
  border-radius:24px;
  overflow:hidden;
  color:var(--verde-agricola);
  max-width:280px;
  margin-left:auto;
  padding:10px;
  position:relative;
}
.servicio-hero-icon svg{width:100%;height:100%;display:block}

/* Cuerpo del servicio */
.servicio-body{padding:var(--ritmo-seccion) var(--margen-lateral);background:#fff}
.servicio-body .container{max-width:1000px}
/* Encabezado de un bloque de puntos, separado de su rejilla. */
.servicio-body .bloque-centrado{margin-bottom:clamp(32px, 5vw, 48px)}
/* Dos bloques claros seguidos no necesitan el doble de aire en medio. */
.servicio-body + .servicio-body{padding-top:0}

.servicio-que-es{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap:clamp(40px, 5vw, 60px);margin-bottom:clamp(48px, 6vw, 80px);
  align-items:center;
}
.servicio-que-es h2{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.625rem, 3.4vw, 2.25rem);font-weight:900;
  color:var(--verde-oscuro);
  line-height:1.1;margin-bottom:20px;
  letter-spacing:-.02em;
}
.servicio-que-es h2 span{color:var(--verde-agricola)}
.servicio-que-es p{
  font-size:1rem;line-height:1.7;
  color:var(--gris-texto);margin-bottom:16px;
}
.servicio-que-es p strong{color:var(--verde-oscuro);font-weight:700}

.servicio-visual{
  aspect-ratio:1/1;
  background:var(--gris-claro);
  border-radius:20px;
  padding:40px;
  border-top:5px solid var(--verde-agricola);
  display:grid;place-items:center;
}
.servicio-visual svg{width:100%;height:auto;max-height:100%}

/* Qué incluye */
.servicio-incluye{
  background:var(--gris-claro);
  padding:clamp(48px, 7vw, 80px) var(--margen-lateral);
}
.servicio-incluye .container{max-width:1100px}
.servicio-incluye-header{text-align:center;margin-bottom:50px}
.servicio-incluye-header h2{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.625rem, 3.4vw, 2.25rem);font-weight:900;
  color:var(--verde-oscuro);
  line-height:1.1;letter-spacing:-.02em;
  margin-bottom:16px;
}
.servicio-incluye-header h2 span{color:var(--verde-agricola)}
.servicio-incluye-header p{
  font-size:1rem;color:var(--gris-texto);
  max-width:34rem;margin:0 auto;
}

.incluye-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap:clamp(16px, 2.5vw, 20px);
}
.incluye-card{
  background:#fff;
  border-radius:14px;padding:28px 24px;
  border-top:4px solid var(--verde-agricola);
  transition:all .3s;
}
.incluye-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -15px rgba(12,43,25,.15);
}
.incluye-icon{
  width:44px;height:44px;
  background:var(--verde-claro);color:var(--verde-oscuro);
  border-radius:10px;display:grid;place-items:center;
  margin-bottom:16px;
}
.incluye-icon svg{width:22px;height:22px}
.incluye-titulo{
  font-family:'Montserrat',sans-serif;
  font-size:1rem;font-weight:800;
  color:var(--verde-oscuro);margin-bottom:6px;
}
.incluye-desc{
  font-size:0.8125rem;line-height:1.55;
  color:var(--gris-texto);
}

/* CTA de servicio */
.servicio-cta{
  background:var(--verde-oscuro);
  color:#fff;padding:clamp(48px, 7vw, 80px) var(--margen-lateral);
  text-align:center;position:relative;overflow:hidden;
}
.servicio-cta-franja{
  position:absolute;
  bottom:-100px;left:-200px;
  width:700px;height:200px;
  background:var(--verde-agricola);
  transform:rotate(-25deg);
  opacity:.3;
}
.servicio-cta .container{
  max-width:43rem;position:relative;z-index:2;
}
.servicio-cta h2{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.625rem, 3.4vw, 2.25rem);font-weight:900;
  line-height:1.1;letter-spacing:-.02em;
  margin-bottom:16px;
}
.servicio-cta h2 span{color:var(--verde-agricola)}
.servicio-cta p{
  font-size:1rem;color:rgba(255,255,255,.75);
  margin-bottom:30px;line-height:1.6;
}

@media (max-width:980px){
  .servicio-hero-icon{max-width:200px;margin-inline:auto}
}

/* Proceso */
.proceso-section{
  background:var(--gris-claro);
  padding:var(--ritmo-seccion) var(--margen-lateral);position:relative;overflow:hidden;
}
.proceso-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap:28px;margin-top:50px;position:relative;
}
.proceso-grid::before{
  content:'';position:absolute;
  top:55px;left:10%;right:10%;
  height:2px;
  background:repeating-linear-gradient(90deg,var(--verde-agricola) 0,var(--verde-agricola) 8px,transparent 8px,transparent 16px);
  opacity:.4;z-index:0;
}
/* Con más de cinco pasos, tres columnas anchas leen mejor que una fila larga
   con uno suelto al final. */
.proceso-grid--tres{grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr))}
.paso{text-align:center;position:relative;z-index:1}
.paso-num{
  width:110px;height:110px;margin:0 auto 24px;
  background:#fff;border:3px solid var(--verde-agricola);
  border-radius:50%;display:grid;place-items:center;
  font-family:'Montserrat',sans-serif;
  font-size:2.5rem;font-weight:900;
  color:var(--verde-oscuro);
  position:relative;transition:all .3s;
}
.paso:hover .paso-num{
  background:var(--verde-agricola);color:#fff;
  transform:scale(1.05);
}
.paso-icon{
  position:absolute;bottom:-6px;right:-6px;
  width:36px;height:36px;
  background:var(--verde-oscuro);color:var(--verde-agricola);
  border-radius:50%;display:grid;place-items:center;
  border:3px solid #fff;
}
.paso-icon svg{width:16px;height:16px}
.paso-titulo{
  font-family:'Montserrat',sans-serif;
  font-size:1.0625rem;font-weight:800;
  color:var(--verde-oscuro);margin-bottom:10px;
}
.paso-desc{font-size:0.8125rem;color:var(--gris-texto);line-height:1.6}


/* ═══ CATÁLOGO POR ÁREAS ═══
   Encabezado de cada bloque del catálogo. */
.servicios-intro{max-width:47rem;margin-bottom:44px}
.servicios-intro .section-lead{margin-top:14px}

/* Área del portafolio a la que pertenece la línea de servicio. */
.servicio-categoria{
  font-size:0.6875rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--verde-texto);
  margin-bottom:10px;
}
.servicio-card.feat .servicio-categoria{color:var(--verde-claro)}

/* Pie de la tarjeta del catálogo (antes iba con estilos en línea). */
.servicio-vermas{
  margin-top:22px;
  color:var(--verde-texto);
  font-weight:800;font-size:0.75rem;
  letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;gap:6px;
}
.servicio-card.feat .servicio-vermas{color:var(--verde-claro)}

/* La línea destacada ocupa el ancho completo y reparte su contenido. */
.servicio-card.feat{grid-column:1 / -1}

/* ═══ PRODUCTOS ═══ */
.productos-section{background:var(--gris-claro)}
.productos-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap:clamp(16px, 2.5vw, 20px);
}
.producto{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;padding:32px 28px;
  display:flex;flex-direction:column;gap:12px;
  transition:all .3s;
}
.producto:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -25px rgba(12,43,25,.2);
}
.producto-icon{
  width:52px;height:52px;
  background:var(--verde-claro);color:var(--verde-oscuro);
  border-radius:12px;display:grid;place-items:center;
  margin-bottom:4px;
}
.producto-icon svg{width:26px;height:26px}
.producto-titulo{
  font-family:'Montserrat',sans-serif;
  font-size:1.125rem;font-weight:800;
  color:var(--verde-oscuro);line-height:1.25;
}
.producto-desc{
  font-size:0.875rem;line-height:1.6;
  color:var(--gris-texto);
}

/* Producto con precio publicado: se resalta para que no pase inadvertido. */
.producto--con-precio{
  border-color:var(--verde-agricola);
  border-top:5px solid var(--verde-agricola);
}
.producto-precio{
  font-family:'Montserrat',sans-serif;
  font-size:2.125rem;font-weight:900;
  color:var(--verde-agricola);
  letter-spacing:-.02em;line-height:1;
  margin-top:auto;padding-top:8px;
}
.producto-condiciones{
  font-size:0.75rem;line-height:1.5;
  color:var(--gris-texto);
  background:rgba(77,149,74,.08);
  border-radius:8px;padding:10px 12px;
}

/* ═══ ENTREGABLES NUMERADOS (páginas de detalle) ═══ */
.incluye-numero{
  width:44px;height:44px;
  background:var(--verde-claro);color:var(--verde-oscuro);
  border-radius:10px;display:grid;place-items:center;
  font-family:'Montserrat',sans-serif;
  font-size:0.9375rem;font-weight:900;
  letter-spacing:.02em;
  margin-bottom:16px;
}
/* Nombre técnico arriba, explicación sencilla debajo. */
.incluye-card .incluye-titulo{font-size:0.9375rem;line-height:1.35;margin-bottom:8px}
.incluye-card .incluye-desc{font-size:0.875rem;line-height:1.6}

/* ═══ PASOS CON ANIMACIÓN ═══
   El círculo del paso puede llevar un dibujo animado en lugar del número; el
   número se va entonces a la insignia, para no perder el orden.

   Se animan con @keyframes y no con SMIL —como las ilustraciones más antiguas
   del catálogo— porque así la regla de «movimiento reducido» de base.css las
   detiene sola, sin JavaScript de por medio. */
.paso-num--animado{padding:20px}
.paso-num--animado .paso-anim,
.paso-num--animado .paso-anim svg{width:100%;height:100%;display:block}
.paso-icon--numero{
  font-family:'Montserrat',sans-serif;
  font-size:0.9375rem;font-weight:900;line-height:1;
  letter-spacing:.02em;
}

/* 1 · Revisar el hato */
.pa-lupa{animation:paLupa 6s ease-in-out infinite}
@keyframes paLupa{0%,100%{transform:translateX(0)}30%{transform:translateX(17px)}60%{transform:translateX(34px)}}
.pa-grupo{animation:paResalte 6s ease-in-out infinite}
.pa-grupo-2{animation-delay:1.8s}
.pa-grupo-3{animation-delay:3.6s}
@keyframes paResalte{0%,10%,40%,100%{fill:#98AF99}18%,32%{fill:#4D954A}}

/* 2 · Medir el pasto */
.pa-regla{animation:paRegla 4s ease-in-out infinite}
@keyframes paRegla{0%,100%{transform:translateY(0)}50%{transform:translateY(13px)}}

/* 3 · Calcular lo que falta */
.pa-falta{transform-origin:43px 49px;animation:paFalta 4.5s ease-in-out infinite}
@keyframes paFalta{0%{transform:scaleY(0)}35%,75%{transform:scaleY(1)}100%{transform:scaleY(0)}}

/* 4 · Armar la dieta */
.pa-cae{animation:paCae 3.4s ease-in infinite}
.pa-cae-2{animation-delay:.5s}
.pa-cae-3{animation-delay:1s}
@keyframes paCae{0%{transform:translateY(-4px);opacity:0}12%{opacity:1}50%{transform:translateY(26px);opacity:1}64%,100%{transform:translateY(26px);opacity:0}}
.pa-racion{transform-origin:32px 53px;animation:paRacion 3.4s ease-out infinite}
@keyframes paRacion{0%,100%{transform:scaleY(.7)}62%{transform:scaleY(1)}}

/* 5 · Prever la escasez */
.pa-sol{transform-origin:47px 15px;animation:paSol 3.6s ease-in-out infinite}
@keyframes paSol{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.14);opacity:1}}
.pa-seco{transform-origin:20px 49px;animation:paSeco 5s ease-in-out infinite}
@keyframes paSeco{0%,100%{transform:scaleY(1)}55%{transform:scaleY(.45)}}

/* 6 · Medir y corregir */
.pa-linea{stroke-dasharray:70;animation:paLinea 4.2s ease-in-out infinite}
@keyframes paLinea{0%{stroke-dashoffset:70}45%,100%{stroke-dashoffset:0}}
.pa-punto{transform-origin:48px 24px;animation:paPunto 4.2s ease-in-out infinite}
@keyframes paPunto{0%,40%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.2)}70%,100%{opacity:1;transform:scale(1)}}

/* ═══ PROCESOS CON ANIMACIÓN («Qué incluye») ═══
   El cuadro del punto puede llevar un dibujo animado; el número se va
   entonces a una insignia pequeña, igual que en los pasos.

   Las diez ilustraciones comparten cinco animaciones —aparecer por turnos,
   trazar, juntar, recorrer y gotear— en vez de traer cada una la suya. */
.incluye-numero--animado{
  width:64px;height:64px;padding:9px;
  position:relative;
  /* Gris claro, no verde salvia: varias figuras son de ese verde y sobre él
     se perdían. */
  background:var(--gris-claro);
}
.incluye-numero--animado .incluye-anim,
.incluye-numero--animado .incluye-anim svg{width:100%;height:100%;display:block}
.incluye-orden{
  position:absolute;bottom:-6px;right:-6px;
  width:26px;height:26px;border-radius:50%;
  background:var(--verde-oscuro);color:var(--verde-claro);
  display:grid;place-items:center;
  border:2px solid #fff;
  font-family:'Montserrat',sans-serif;
  font-size:0.6875rem;font-weight:900;letter-spacing:.02em;
}

/* Que cada figura escale sobre su propio centro y no sobre el del lienzo. */
.ia-aparece,.ia-late,.ia-gota,.ia-recorre,.ia-juntar-izq,.ia-juntar-der{
  transform-box:fill-box;transform-origin:center;
}

.ia-aparece{animation:iaAparece 4s ease-in-out infinite}
@keyframes iaAparece{0%,8%{opacity:0;transform:scale(.55)}20%,78%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(.55)}}
.ia-t2{animation-delay:.35s}
.ia-t3{animation-delay:.7s}
.ia-t4{animation-delay:1.05s}

.ia-traza{stroke-dasharray:90;animation:iaTraza 4s ease-in-out infinite}
@keyframes iaTraza{0%{stroke-dashoffset:90}40%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:90}}

.ia-juntar-izq{animation:iaJuntarIzq 4s ease-in-out infinite}
@keyframes iaJuntarIzq{0%,12%{transform:translateX(-6px)}45%,85%{transform:translateX(0)}100%{transform:translateX(-6px)}}
.ia-juntar-der{animation:iaJuntarDer 4s ease-in-out infinite}
@keyframes iaJuntarDer{0%,12%{transform:translateX(6px)}45%,85%{transform:translateX(0)}100%{transform:translateX(6px)}}

.ia-recorre{animation:iaRecorre 3.4s ease-in-out infinite}
@keyframes iaRecorre{0%{transform:translateX(-13px);opacity:0}18%{opacity:1}80%{opacity:1}100%{transform:translateX(13px);opacity:0}}

.ia-gota{animation:iaGota 2.8s ease-in infinite}
@keyframes iaGota{0%{transform:translateY(-5px);opacity:0}20%{opacity:1}72%{transform:translateY(15px);opacity:1}100%{transform:translateY(15px);opacity:0}}
.ia-g2{animation-delay:.6s}
.ia-g3{animation-delay:1.2s}

/* Crecer desde el suelo (pasto, brotes). */
.ia-crece{transform-box:fill-box;transform-origin:bottom;animation:iaCrece 3.8s ease-in-out infinite}
@keyframes iaCrece{0%,10%{transform:scaleY(.3)}55%,88%{transform:scaleY(1)}100%{transform:scaleY(.3)}}

/* Latir: para señalar el punto que importa. */
.ia-late{animation:iaLate 3.2s ease-in-out infinite}
@keyframes iaLate{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.15);opacity:1}}