/* ============================================================
   CaFra · sitio.css
   Una sola hoja para todo el sitio. Reemplaza a base.css + scene.css,
   que eran del recorrido de video (están en la historia de git).

   Reglas de la hoja:
   - Color, tipo y espacio salen de los tokens de :root.
   - Nada se esconde sin JS: todo lo que arranca oculto cuelga de
     `html.js` y lo maneja sitio.js. Sin JS el sitio es una página
     larga, apilada y legible.
   - Con movimiento reducido no hay pineado ni precarga: el contenido
     queda quieto y completo (sitio.js no arma las animaciones).
   ============================================================ */

:root {
  /* ── Fondos ── */
  --noche:        #070c09;   /* el campo de noche: base del sitio        */
  --noche-2:      #0d1510;   /* un punto arriba: el plano del despiece   */
  --mapa:         #140f0a;   /* el marrón del mapa de Mecánico           */

  /* ── Tinta sobre oscuro ── */
  --tinta:        #eef3ea;
  --tinta-2:      #c3cfba;
  --tinta-3:      #a7b39c;
  --tinta-4:      #8fa08a;

  /* ── Un color por sistema ──
     Son los de cada app, no inventados: el verde de AgroPlanner y de la
     marca, el naranja de Mecánico, terracota/crema/yema de Cafra Huevos
     y la mostaza de la barra de CaFra Silos. */
  --verde:        #7dd47f;
  --verde-claro:  #9ce49e;
  --verde-hondo:  #0b1a10;
  --naranja:      #f9b271;
  --naranja-hondo:#1b1208;
  --terracota:    #b4532a;
  --terracota-hondo: #4a1d0b;
  --crema:        #fff4dc;
  --yema:         #f6b23c;
  --mostaza:      #e3b45c;
  --silo-hondo:   #14261a;
  --papel:        #fbf8f1;

  /* ── Tipografía ──
     La stencil es para mirar de lejos; Chivo, para leer. */
  --display: 'Big Shoulders Stencil Display', 'Arial Narrow', Impact, sans-serif;
  --texto:   'Chivo', system-ui, sans-serif;

  --t-chico:   0.82rem;
  --t-base:    1rem;
  --t-lead:    clamp(1.08rem, 1.5vw, 1.3rem);
  --t-fila:    clamp(1.25rem, 2.2vw, 1.75rem);
  --t-titulo:  clamp(2.1rem, 4.6vw, 3.9rem);
  --t-sistema: clamp(3.2rem, 9vw, 8.5rem);
  --t-enorme:  clamp(4.6rem, 19vw, 19rem);

  /* ── Espacio: base 4 ── */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --margen: clamp(16px, 4vw, 56px);
  --ancho: 1280px;

  --r-chico: 8px;
  --r-medio: 16px;
  --r-grande: 26px;
  --r-pildora: 999px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* ── Capas: una escala, nada de 9999 ── */
  --z-flotante: 40;
  --z-fijo:     50;
  --z-cursor:   60;
  --z-precarga: 70;
  --z-saltar:   80;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 0; -webkit-text-size-adjust: 100%; }
/* Con Lenis los saltos los hace Lenis: el smooth nativo pelea con él. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--noche);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { text-wrap: balance; line-height: 1.05; }
p { text-wrap: pretty; }

::selection { background: var(--verde); color: var(--verde-hondo); }

:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 4px; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: fixed; top: 0; left: 50%; z-index: var(--z-saltar);
  transform: translate(-50%, -140%);
  padding: var(--e-3) var(--e-5);
  border-radius: 0 0 var(--r-medio) var(--r-medio);
  background: var(--verde); color: var(--verde-hondo);
  font-weight: 800; text-decoration: none;
  transition: transform .2s var(--ease-out);
}
.saltar:focus { transform: translate(-50%, 0); }

/* ── Botón ── un solo botón con variantes de color por sección. */
.boton {
  --b-fondo: var(--verde-hondo);
  --b-tinta: var(--verde);
  position: relative;
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: 15px 26px;
  border-radius: var(--r-pildora);
  background: var(--b-fondo);
  color: var(--b-tinta);
  font-weight: 800;
  font-size: 1.02rem;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  /* ⚠ Sin transition de transform: el transform del botón es de GSAP
     (entrada del héroe y efecto magnético). Con transición CSS encima,
     la entrada tomaba como destino su propio punto de partida y el botón
     del héroe quedaba 30 px abajo, cortado en celulares bajos. */
}
/* El relleno que sube al pasar: el mismo botón, invertido. */
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--b-tinta);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
}
.boton:hover { color: var(--b-fondo); }
.boton:hover::before { transform: translateY(0); }
.boton--claro   { --b-fondo: var(--tinta);      --b-tinta: var(--noche); }
.boton--naranja { --b-fondo: var(--naranja);    --b-tinta: var(--naranja-hondo); }
.boton--crema   { --b-fondo: var(--crema);      --b-tinta: var(--terracota-hondo); }
.boton--oscuro  { --b-fondo: var(--silo-hondo); --b-tinta: var(--mostaza); }
/* En los de fondo claro el texto del hover es el oscuro, no el claro. */
.boton--claro:hover, .boton--naranja:hover, .boton--crema:hover { color: var(--b-tinta); }
.boton--claro::before { background: var(--verde); }
.boton--naranja::before { background: var(--tinta); }
.boton--crema::before { background: var(--yema); }

/* ============================================================
   CURSOR · solo con puntero fino y sin movimiento reducido
   ============================================================ */
.cursor { display: none; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.js .cursor {
    display: grid; place-items: center;
    position: fixed; top: 0; left: 0; z-index: var(--z-cursor);
    width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--verde);
    pointer-events: none;
    mix-blend-mode: difference;
    transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background .3s;
  }
  html.js .cursor.cursor--enlace { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  html.js .cursor.cursor--texto {
    width: 84px; height: 84px; margin: -42px 0 0 -42px;
    background: var(--tinta); mix-blend-mode: normal;
  }
  /* El nativo se esconde solo cuando sitio.js ya armó el propio. El foco
     de teclado sigue teniendo su anillo (`:focus-visible`). */
  html.cursor-propio, html.cursor-propio a, html.cursor-propio button { cursor: none; }
  .cursor__texto {
    font-size: 0.78rem; font-weight: 800; color: var(--noche);
    opacity: 0; transition: opacity .2s;
  }
  .cursor--texto .cursor__texto { opacity: 1; }
}

/* ============================================================
   PRECARGA · el monitor de guía buscando satélites
   ============================================================ */
.precarga { display: none; }
html.js .precarga {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: var(--z-precarga);
  background: var(--noche);
}
html.js.visto .precarga { display: none; }
/* Salida de emergencia: si sitio.js todavía no llegó a los 4 s (el mismo
   TOPE de la precarga en sitio.js, contado desde que abrió la página), la
   precarga se va sola. Cuando sitio.js la toma, apaga esta animación. */
html.js .precarga { animation: precarga-fuera 0s 4s forwards; }
@keyframes precarga-fuera { to { visibility: hidden; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.js .precarga { display: none; } }

.precarga__monitor {
  width: min(440px, 86vw);
  padding: var(--e-6);
  border: 1px solid #1d2a20;
  border-radius: var(--r-grande);
  background: #0a110c;
  text-align: center;
}
/* ── El isotipo ── el hexágono con el brote, tal cual el de las apps.
   Las hojas crecen desde donde se pegan al tallo: por eso cada una
   lleva su propio origen (fill-box = la caja de la propia hoja). */
.iso { display: block; overflow: visible; }
.iso__hoja { transform-box: fill-box; }
.iso__hoja--a { transform-origin: 100% 100%; }
.iso__hoja--b { transform-origin: 0% 100%; }

.precarga__marca { font-family: var(--display); font-weight: 900; font-size: 3.4rem; line-height: 1; letter-spacing: 0.01em; }
.precarga__marca b { color: var(--verde); }
/* La barra de luces del guía: el centro en verde, los costados ámbar y
   rojo, como la del monitor. Las luces las prende sitio.js. */
.precarga__barra { display: flex; justify-content: center; gap: 6px; margin: var(--e-6) 0 var(--e-5); }
.precarga__barra i {
  width: 18px; height: 12px; border-radius: 3px;
  background: #18221a;
  transition: background .12s, box-shadow .12s;
}
.precarga__barra i.on { background: var(--yema); box-shadow: 0 0 12px var(--yema); }
.precarga__barra i.on:nth-child(n+5):nth-child(-n+9) { background: var(--verde); box-shadow: 0 0 12px var(--verde); }
.precarga__barra i.on:nth-child(-n+2), .precarga__barra i.on:nth-child(n+12) { background: #e5484d; box-shadow: 0 0 12px #e5484d; }
.precarga__estado { display: flex; justify-content: space-between; font-size: var(--t-chico); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.precarga__estado b { color: var(--tinta); }
#precarga-fix.fijo { color: var(--verde); font-weight: 800; }

/* ============================================================
   HABLEMOS FIJO · el único elemento fijo del sitio
   No hay barra de menú (ver la nota en index.html). Sin JS se ve
   siempre; con JS lo muestra y lo esconde sitio.js.
   ============================================================ */
.wa-fijo {
  position: fixed; right: clamp(16px, 2.5vw, 32px); bottom: clamp(16px, 2.5vw, 32px);
  z-index: var(--z-fijo);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px 14px 18px;
  border-radius: var(--r-pildora);
  background: var(--verde); color: var(--verde-hondo);
  font-weight: 800; font-size: 1rem; text-decoration: none;
  /* El borde oscuro es por la sección de AgroPlanner: verde sobre verde
     se perdía. */
  box-shadow: 0 14px 34px rgba(0,0,0,.4), 0 0 0 2px var(--verde-hondo);
  transition: background .25s;
}
.wa-fijo:hover { background: var(--verde-claro); }
/* Oculto: con visibility, así tampoco recibe el foco del teclado. La
   visibility cambia al final de la salida y al principio de la entrada. */
.wa-fijo { transition: background .25s, opacity .4s var(--ease-out), transform .5s var(--ease-out), visibility 0s; }
.wa-fijo--oculto {
  opacity: 0; visibility: hidden; transform: translateY(24px) scale(.92);
  transition: background .25s, opacity .3s, transform .4s, visibility 0s .4s;
}
/* ============================================================
   1 · HÉROE
   Foto, nombre y máquina recortada: tres capas. La foto y el recorte
   son la misma caja, así que con el mismo `cover` coinciden al píxel.

   ⚠ FOTO Y MÁQUINA SE MUEVEN SIEMPRE JUNTAS (mismo scale, mismo x/y,
   mismo transform-origin). Si una se mueve distinto que la otra se
   despega el recorte y se le ven los bordes: los botalones quedan
   cortados en seco. Así se veía la primera versión al acercarse.
   La profundidad la da el nombre, que está entre las dos.

   --y-maquina es dónde cae el centro de la máquina en cada encuadre;
   --y-palabra, dónde va el centro del nombre: en el cielo, apenas
   arriba de la cabina, para que la máquina le tape solo la base.
   ============================================================ */
.heroe {
  --y-maquina: 48%;
  --y-palabra: 25%;
  --t-palabra: min(24vw, 36vh);
  position: relative; background: var(--noche);
}
@media (max-aspect-ratio: 1/1) { .heroe { --y-maquina: 37%; --y-palabra: 20%; --t-palabra: 34vw; } }

.heroe__escena { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.heroe__capa, .heroe__capa img { position: absolute; inset: 0; width: 100%; height: 100%; }
.heroe__capa { transform-origin: 50% var(--y-maquina); }
.heroe__capa img { object-fit: cover; object-position: 50% 50%; }
.heroe__foto { z-index: 0; }
.heroe__velo {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(7,12,9,.55) 0%, rgba(7,12,9,0) 30%, rgba(7,12,9,0) 55%, rgba(7,12,9,.92) 100%);
}
.heroe__titulo { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.heroe__iso {
  position: absolute; z-index: 6;
  top: clamp(16px, 3vh, 30px); left: var(--margen);
  width: clamp(50px, 5vw, 78px); height: auto;
  filter: drop-shadow(0 4px 14px rgba(7,12,9,.5));
}
.heroe__maquina { z-index: 3; pointer-events: none; }
.heroe__apagon { position: absolute; inset: 0; z-index: 4; background: var(--noche); opacity: 0; pointer-events: none; }
.heroe__datos { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.heroe__pie { z-index: 6; }

.heroe__palabra {
  position: absolute; left: 0; right: 0;
  top: var(--y-palabra);
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--display); font-weight: 900;
  font-size: var(--t-palabra);
  line-height: 0.8;
  letter-spacing: 0.01em;
  color: var(--tinta);
  white-space: nowrap;
  text-shadow: 0 10px 50px rgba(7,12,9,.35);
}
.heroe__ca { color: var(--verde); }
.heroe__palabra .letra { display: inline-block; will-change: transform; }

.dato {
  position: absolute; left: var(--x); top: var(--y);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 10px;
  border-radius: var(--r-pildora);
  background: rgba(7, 12, 9, 0.7);
  border: 1px solid rgba(238, 243, 234, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.86rem; color: var(--tinta-2);
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.dato b { color: var(--tinta); font-weight: 800; font-variant-numeric: tabular-nums; }
.dato i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.dato--verde   { --c: var(--verde); }
.dato--naranja { --c: var(--naranja); }
.dato--yema    { --c: var(--yema); }
.dato--mostaza { --c: var(--mostaza); }
@media (max-width: 720px) {
  .dato { font-size: 0.8rem; padding: 7px 11px 7px 8px; }
  .dato:nth-child(2), .dato:nth-child(4), .dato:nth-child(5) { display: none; }
  .dato:nth-child(1) { --x: 5% !important; --y: 54% !important; }
  .dato:nth-child(3) { --x: 50% !important; --y: 59% !important; }
}

.heroe__pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-5);
  padding: 0 var(--margen) clamp(24px, 5vh, 48px);
  max-width: var(--ancho); margin: 0 auto;
}
.heroe__frase { max-width: 34ch; }
.heroe__lema { font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.heroe__lema b { color: var(--verde); font-weight: 800; }
.heroe__frase p:not(.heroe__lema) { margin-top: var(--e-2); color: var(--tinta-2); font-size: var(--t-lead); }
@media (max-width: 600px) {
  .heroe__pie { flex-direction: column; align-items: flex-start; gap: var(--e-4); }
}
/* ============================================================
   2 · LOS RUBROS
   ============================================================ */
.rubros { position: relative; background: var(--noche); }
.rubros__fijo { position: relative; padding: var(--e-9) var(--margen); }

.rubros__palabras { display: grid; gap: 0; justify-items: center; }
.rubro {
  font-family: var(--display); font-weight: 900;
  /* El tope en vw es por AGRICULTURA., la más larga: a tamaño enorme
     se pasaba del ancho de la pantalla. */
  font-size: min(var(--t-enorme), 14.5vw);
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--c, var(--tinta));
  white-space: nowrap;
}
.rubro--verde   { --c: var(--verde); }
.rubro--crema   { --c: var(--crema); }
.rubro--naranja { --c: var(--naranja); }
.rubro--yema    { --c: var(--yema); }
.rubro--mostaza { --c: var(--mostaza); }

/* Con JS, una pantalla pineada donde las palabras se van APILANDO: cada
   una ya tiene su renglón (invisible) y aparece en él, así la pila crece
   hacia abajo sin mover las anteriores. El tamaño es el que deja entrar
   las seis en el alto de la pantalla (6 × 0,86 × 14vh ≈ 72vh). */
html.anima .rubros__fijo { height: 100svh; display: grid; place-items: center; padding: 0 var(--margen); overflow: hidden; }
html.anima .rubros__palabras { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
html.anima .rubro { font-size: min(var(--t-enorme), 14vh, 14.5vw); }
html.anima .rubro .letra { display: inline-block; }

.origen {
  position: relative;
  max-width: var(--ancho); margin: var(--e-9) auto 0;
  display: grid; gap: var(--e-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .origen { grid-template-columns: 1fr 1.1fr; } }
html.anima .origen { margin: 0; width: 100%; }

.origen__frase {
  font-size: var(--t-titulo);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.origen__frase em { font-style: normal; color: var(--verde); }
.origen__caras { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.cara img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-medio);
  filter: grayscale(0.15) contrast(1.05);
}
.cara figcaption { margin-top: var(--e-3); font-size: 0.92rem; color: var(--tinta-3); line-height: 1.45; }
.cara figcaption b { display: block; color: var(--tinta); font-size: 1.1rem; }
.cara figcaption a { color: var(--verde); }

/* ============================================================
   3 · DESPIECE
   ============================================================ */
.despiece {
  position: relative;
  background:
    linear-gradient(rgba(125,212,127,.05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(125,212,127,.05) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--noche-2);
}
.despiece__fijo {
  position: relative;
  max-width: var(--ancho); margin: 0 auto;
  padding: var(--e-9) var(--margen);
  display: grid; gap: var(--e-6);
  grid-template-columns: 1fr;
}
.despiece__texto h2 { font-size: var(--t-titulo); font-weight: 800; letter-spacing: -0.03em; max-width: 14ch; }
.despiece__texto p { margin-top: var(--e-4); color: var(--tinta-2); font-size: var(--t-lead); max-width: 34ch; }

.despiece__plano {
  --placa: clamp(150px, 27vh, 290px);
  position: relative;
  height: calc(var(--placa) * 2.9);
  display: grid; place-items: center;
}
.capa {
  position: absolute; left: 50%; top: 50%;
  width: var(--placa); height: var(--placa);
  margin: calc(var(--placa) / -2) 0 0 calc(var(--placa) / -2);
  color: var(--c);
}
.capa--verde   { --c: var(--verde); }
.capa--naranja { --c: var(--naranja); }
.capa--yema    { --c: var(--yema); }
.capa--mostaza { --c: var(--mostaza); }
/* Isométrica a mano: 45° en el plano y 58° de inclinación. */
.placa {
  width: 100%; height: 100%;
  transform: rotateX(58deg) rotateZ(-45deg);
  background: color-mix(in oklab, var(--c) 8%, #0b130e);
  border: 1.5px solid color-mix(in oklab, var(--c) 55%, transparent);
  border-radius: 18px;
  box-shadow: 0 30px 50px rgba(0,0,0,.45);
}
/* Sin JS (o con movimiento reducido) la pila queda separada y quieta. */
.capa[data-capa="0"] { transform: translateY(calc(var(--placa) * -0.87)); }
.capa[data-capa="1"] { transform: translateY(calc(var(--placa) * -0.29)); }
.capa[data-capa="2"] { transform: translateY(calc(var(--placa) * 0.29)); }
.capa[data-capa="3"] { transform: translateY(calc(var(--placa) * 0.87)); }

.despiece__piezas { display: grid; gap: var(--e-2); align-content: center; }
.pieza {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-4);
  padding: var(--e-4) 0;
  border-top: 1px solid rgba(238,243,234,.1);
  color: var(--c);
}
.pieza--verde   { --c: var(--verde); }
.pieza--naranja { --c: var(--naranja); }
.pieza--yema    { --c: var(--yema); }
.pieza--mostaza { --c: var(--mostaza); }
.pieza__n {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid currentColor;
  font-weight: 800; font-size: 0.85rem; font-variant-numeric: tabular-nums;
}
.pieza b { color: var(--tinta); font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
/* Área táctil de 44 px sin mover el diseño: el relleno se compensa con
   margen negativo. */
.pieza a { display: inline-block; padding: 10px 0; margin: -10px 0; font-size: 0.92rem; text-decoration: none; color: var(--c); font-weight: 600; }
.pieza a:hover { text-decoration: underline; }

@media (min-width: 900px) {
  .despiece__fijo { grid-template-columns: 1fr 1.2fr 0.9fr; align-items: center; }
  html.anima .despiece__fijo { height: 100svh; padding-top: 0; padding-bottom: 0; }
}

/* ============================================================
   4 · SISTEMAS · lo común
   ============================================================ */
.sistema { position: relative; overflow: clip; }
.sistema__cuerpo { position: relative; max-width: var(--ancho); margin: 0 auto; padding: var(--e-9) var(--margen); }

.sistema__cab { display: flex; align-items: center; gap: var(--e-5); margin-bottom: var(--e-7); }
.sistema__icono { width: clamp(56px, 7vw, 88px); height: auto; border-radius: 22%; flex: none; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.sistema__cab h2 {
  font-family: var(--display); font-weight: 900;
  font-size: var(--t-sistema);
  line-height: 0.86;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.sistema__rubro { margin-top: var(--e-2); font-size: var(--t-lead); font-weight: 700; opacity: .8; }

/* La cinta gigante con el nombre, que corre con el scroll. */
.sistema__cinta {
  overflow: hidden; white-space: nowrap;
  padding-top: var(--e-6);
  font-family: var(--display); font-weight: 900;
  font-size: clamp(5rem, 20vw, 20rem);
  line-height: 0.8;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}
.sistema__cinta span { display: inline-block; padding-left: 4vw; }

/* ── Filas de prestaciones ──
   En compu con mouse: la foto sigue al puntero (#flotante).
   En el celular, o sin JS: la foto va adentro de la fila. */
.filas { border-bottom: 1px solid var(--linea, rgba(238,243,234,.14)); }
.fila {
  position: relative;
  display: grid; grid-template-columns: 3.2rem 1fr; gap: var(--e-2) var(--e-4);
  padding: var(--e-5) 0;
  border-top: 1px solid var(--linea, rgba(238,243,234,.14));
  transition: opacity .35s var(--ease-out);
}
.fila__n { font-weight: 800; font-size: 0.9rem; padding-top: 0.45em; font-variant-numeric: tabular-nums; opacity: .7; }
.fila h3 { font-size: var(--t-fila); font-weight: 800; letter-spacing: -0.02em; transition: transform .45s var(--ease-out); }
.fila p { margin-top: var(--e-1); max-width: 52ch; opacity: .82; }
.fila__foto { grid-column: 2; margin-top: var(--e-3); }
.fila__foto img, .fila__foto svg {
  width: 100%; max-height: 240px; object-fit: cover; object-position: top;
  border-radius: var(--r-medio);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.fila__foto--celu img { width: 46%; max-height: 300px; object-fit: cover; }

@media (hover: hover) and (pointer: fine) {
  html.anima .fila__foto { display: none; }
  html.anima .filas:hover .fila { opacity: .4; }
  html.anima .filas .fila:hover { opacity: 1; }
  html.anima .fila:hover h3 { transform: translateX(14px); }
}

.flotante {
  position: fixed; top: 0; left: 0; z-index: var(--z-flotante);
  width: clamp(280px, 30vw, 440px);
  pointer-events: none;
  opacity: 0; visibility: hidden;
}
.flotante__marco {
  border-radius: var(--r-medio); overflow: hidden;
  background: #111;
  box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 6px rgba(255,255,255,.9);
}
.flotante__marco img, .flotante__marco svg { width: 100%; height: auto; display: block; }
.flotante--celu { width: clamp(160px, 14vw, 210px); }

/* ── La cuenta demo ── */
.demo {
  margin-top: var(--e-8);
  display: grid; gap: var(--e-5); align-items: center;
  grid-template-columns: 1fr;
  padding: var(--e-6);
  border-radius: var(--r-grande);
  border: 2px dashed currentColor;
}
@media (min-width: 900px) { .demo { grid-template-columns: 1.3fr auto auto; } }
.demo__titulo { font-size: var(--t-lead); font-weight: 800; line-height: 1.3; }
.demo__datos { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); }
.demo__datos dt { font-size: var(--t-chico); font-weight: 700; opacity: .7; }
.demo__datos code { font-family: var(--texto); font-size: 1.1rem; font-weight: 800; }

/* ============================================================
   4a · AGROPLANNER · verde lleno
   ============================================================ */
.sistema--agro { background: var(--verde); color: var(--verde-hondo); --linea: rgba(11,26,16,.22); }
.sistema--agro .sistema__cinta { color: var(--verde-hondo); opacity: .1; }
/* La hoja es verde y transparente: sobre este verde necesita su baldosa. */
.sistema--agro .sistema__icono { background: var(--verde-hondo); padding: 6px; }
.agro { display: grid; gap: var(--e-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .agro { grid-template-columns: 0.9fr 1.1fr; } }

.cafrita {
  padding: var(--e-6);
  border-radius: var(--r-grande);
  background: var(--verde-hondo);
  color: var(--tinta);
  box-shadow: 0 30px 60px rgba(11,26,16,.3);
}
@media (min-width: 980px) { .cafrita { position: sticky; top: 110px; } }
.cafrita__cab { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--verde); }
.cafrita__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 12px var(--verde); animation: latido 1.6s infinite; }
.cafrita__pregunta {
  margin: var(--e-6) 0 var(--e-4) auto;
  width: fit-content; max-width: 90%;
  padding: 14px 18px;
  border-radius: 18px 18px 4px 18px;
  background: #1b3322;
  font-size: 1.12rem; font-weight: 500;
  min-height: 1.6em;
}
.cafrita__respuesta {
  width: fit-content; max-width: 92%;
  padding: 16px 20px;
  border-radius: 18px 18px 18px 4px;
  background: var(--verde); color: var(--verde-hondo);
  font-size: 1.05rem; font-weight: 500; line-height: 1.4;
}
.cafrita__respuesta b { display: block; margin-top: 4px; font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.cafrita__nota { margin-top: var(--e-5); color: var(--tinta-2); font-size: 0.95rem; }

/* ============================================================
   4b · CAFRA MECÁNICO · el marrón del mapa y naranja
   ============================================================ */
.sistema--mecanico { background: var(--mapa); color: var(--tinta); }

.noche { position: relative; height: 92svh; min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; }
.noche__foto, .noche__foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.noche__foto img { object-fit: cover; object-position: 66% 50%; }
.noche::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,15,10,.2) 0%, rgba(20,15,10,0) 40%, var(--mapa) 100%);
}
.sistema__cab--noche { position: relative; z-index: 2; width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) var(--e-6); }

/* Dos cintas cruzadas, como las de "precaución". */
.cintas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cinta {
  position: absolute; left: -10%; width: 120%;
  padding: 12px 0;
  white-space: nowrap; overflow: hidden;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.6rem, 3.6vw, 3.2rem);
  line-height: 1; text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.cinta span { display: inline-block; }
.cinta--a { top: 30%; transform: rotate(-7deg); background: var(--naranja); color: var(--naranja-hondo); }
.cinta--b { top: 44%; transform: rotate(5deg); background: var(--naranja-hondo); color: var(--naranja); border-block: 2px solid var(--naranja); }

.satelital { display: grid; gap: var(--e-7); grid-template-columns: 1fr; align-items: center; margin-bottom: var(--e-9); }
@media (min-width: 980px) { .satelital { grid-template-columns: 0.8fr 1.2fr; } }
.satelital__lead { font-size: var(--t-titulo); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; margin-bottom: var(--e-5); }
.satelital__lead b { color: var(--naranja); }
.satelital__texto > p:not(.satelital__lead) { color: var(--tinta-2); font-size: 1.05rem; max-width: 46ch; }

.conmuta {
  display: inline-flex; margin-top: var(--e-6); padding: 5px;
  border-radius: var(--r-pildora);
  background: #241b12; border: 1px solid #3a2c1e;
}
.conmuta__op { padding: 10px 20px; border-radius: var(--r-pildora); font-weight: 800; font-size: 0.95rem; color: var(--tinta-3); transition: background .3s, color .3s; }
.conmuta__op[aria-pressed="true"] { background: var(--naranja); color: var(--naranja-hondo); }

.mapa { position: relative; }
.mapa__svg { width: 100%; height: auto; border-radius: var(--r-grande); border: 1px solid #3a2c1e; box-shadow: 0 40px 80px rgba(0,0,0,.45); }
.mapa__pasadas path { transition: stroke-opacity .5s; }
.mapa[data-modo="estimado"] .mapa__pasadas path { stroke-opacity: .12; }
.mapa[data-modo="estimado"] .maquina { opacity: .35; }
.maquina { transition: opacity .5s; }

.mapa__ficha {
  position: absolute; left: var(--fx, 52%); top: var(--fy, 18%);
  transform: translate(-50%, calc(-100% - 20px));
  min-width: 230px;
  padding: 14px 16px;
  border-radius: var(--r-medio);
  background: var(--tinta); color: var(--naranja-hondo);
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
  pointer-events: none;
}
.mapa__ficha::after {
  content: ""; position: absolute; left: 50%; bottom: -8px;
  width: 16px; height: 16px; margin-left: -8px;
  background: var(--tinta); transform: rotate(45deg);
}
.mapa__nombre { font-weight: 800; font-size: 0.95rem; }
.mapa__horas { display: grid; margin: 4px 0 6px; }
.mapa__valor { font-family: var(--display); font-weight: 900; font-size: 2.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.mapa__fuente { font-size: 0.78rem; font-weight: 700; color: #8a4b12; }
.mapa[data-modo="estimado"] .mapa__fuente { color: #6b6257; }
.mapa__service { font-size: 0.85rem; border-top: 1px solid rgba(27,18,8,.15); padding-top: 6px; }
.mapa__nota { margin-top: var(--e-3); font-size: var(--t-chico); color: var(--tinta-4); }
@media (max-width: 600px) {
  .mapa__ficha { min-width: 0; width: 200px; padding: 10px 12px; }
  .mapa__valor { font-size: 1.8rem; }
}

.filas--naranja { --linea: rgba(249,178,113,.22); }
.filas--naranja .fila__n { color: var(--naranja); opacity: 1; }
.demo--naranja { color: var(--naranja); }
.demo--naranja .demo__titulo, .demo--naranja code { color: var(--tinta); }

/* ============================================================
   4c · CAFRA HUEVOS · terracota y crema, los de la app
   ============================================================ */
.sistema--huevos { background: var(--terracota); color: var(--crema); --linea: rgba(255,244,220,.25); }
.sistema--huevos .sistema__icono { box-shadow: 0 0 0 2px rgba(255,244,220,.35), 0 12px 30px rgba(0,0,0,.25); }
.huevos__arranque { display: grid; gap: var(--e-6); grid-template-columns: 1fr; align-items: center; margin-bottom: var(--e-8); }
@media (min-width: 900px) { .huevos__arranque { grid-template-columns: auto 1fr; column-gap: var(--e-8); } }
.huevos__arranque .sistema__cab { margin-bottom: var(--e-4); }
.huevos__lead { font-size: var(--t-lead); font-weight: 500; max-width: 46ch; }
@media (min-width: 900px) { .huevo { grid-row: span 2; } }
.huevo { width: clamp(150px, 20vw, 240px); }
.huevo svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 22px 30px rgba(74,29,11,.45)); }
.huevo__arriba, .huevo__abajo, .huevo__yema { transform-box: fill-box; }
/* Quieto (sin JS o con movimiento reducido) el huevo ya está abierto. */
.huevo__arriba { transform-origin: 20% 100%; transform: translate(-14px, -46px) rotate(-24deg); }
.huevo__abajo { transform: translateY(6px); }
.huevo__yema { transform-origin: 50% 50%; }

.curva {
  padding: var(--e-6) var(--e-5) var(--e-5);
  border-radius: var(--r-grande);
  background: var(--crema); color: var(--terracota-hondo);
  box-shadow: 0 40px 80px rgba(74,29,11,.35);
  margin-bottom: var(--e-8);
}
.curva__rotulo { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); font-size: 0.9rem; font-weight: 700; padding: 0 var(--e-2); }
.curva__eje { margin-left: auto; font-weight: 500; opacity: .75; }
.curva__clave { display: inline-block; width: 22px; height: 0; vertical-align: middle; margin-right: 8px; border-top: 4px solid var(--terracota); }
.curva__clave--std { border-top: 3px dashed #2f6db3; }
.curva__svg { width: 100%; height: auto; margin-top: var(--e-4); overflow: visible; }
.curva__lectura { margin-top: var(--e-2); padding: 0 var(--e-2); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.curva__lectura span { font-weight: 800; }

.filas--crema .fila__n { color: var(--yema); opacity: 1; }
.demo--huevos { color: var(--crema); }

/* ============================================================
   4d · CAFRA SILOS · mostaza y papeles con cinta
   ============================================================ */
.sistema--silos { background: var(--mostaza); color: var(--silo-hondo); }
.sistema--silos .sistema__cab { margin-bottom: var(--e-4); }
.silos__lead { font-size: var(--t-lead); max-width: 48ch; font-weight: 500; }

.mesa {
  position: relative;
  display: grid; gap: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  margin: var(--e-8) 0 var(--e-7);
}
.papel {
  position: relative;
  padding: var(--e-7) var(--e-5) var(--e-5);
  background: var(--papel); color: var(--silo-hondo);
  border-radius: 4px;
  transform: rotate(var(--r, 0deg));
  box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 18px 34px rgba(20,38,26,.22);
  touch-action: auto;
}
.papel h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.papel p { margin-top: var(--e-2); font-size: 0.98rem; }
.papel--oscuro { background: var(--silo-hondo); color: #f3e2b8; }
.papel--mostaza { background: #f6dc9c; }
.papel__cinta {
  position: absolute; top: -12px; left: 50%;
  width: 96px; height: 26px; margin-left: -48px;
  background: rgba(255, 250, 235, 0.72);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  transform: rotate(-3deg);
}
@media (pointer: fine) {
  html.anima .papel, html.anima .polaroid { cursor: grab; }
  html.anima .papel:active, html.anima .polaroid:active { cursor: grabbing; }
}

/* ============================================================
   5 · CLIENTES
   ============================================================ */
.clientes { background: var(--noche); padding-bottom: var(--e-9); overflow: clip; }
.marquesina {
  padding: 14px 0;
  white-space: nowrap; overflow: hidden;
  background: var(--verde); color: var(--verde-hondo);
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 1; text-transform: uppercase;
  transform: rotate(-2deg) scale(1.04);
  margin: var(--e-8) 0 var(--e-9);
}
.marquesina span { display: inline-block; }
.clientes__cuerpo { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.clientes__cuerpo h2 { font-size: var(--t-titulo); font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--e-7); }

.polaroids { display: flex; flex-wrap: wrap; gap: var(--e-7); }
.polaroid {
  position: relative;
  width: min(330px, 100%);
  padding: var(--e-5) var(--e-5) var(--e-6);
  background: var(--papel); color: #1a1a17;
  border-radius: 4px;
  transform: rotate(var(--r, 0deg));
  box-shadow: 0 24px 50px rgba(0,0,0,.45);
}
.polaroid img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin-bottom: var(--e-4); }
.polaroid__nombre { font-size: 1.3rem; font-weight: 800; line-height: 1.15; }
.polaroid__lugar { font-size: 0.9rem; color: #5b5d55; }
.polaroid__uso { margin: var(--e-4) 0; font-size: 0.95rem; }
.polaroid a { display: inline-block; padding: 10px 0; margin: -10px 0; font-size: 0.9rem; font-weight: 700; color: #1c5a30; }
.polaroid__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e-4); }
.polaroid__chips + .polaroid__uso { margin-top: var(--e-2); }
.chip { display: inline-block; padding: 3px 10px; border-radius: var(--r-pildora); font-size: 0.78rem; font-weight: 800; }
.chip--verde { background: var(--verde); color: var(--verde-hondo); }
.chip--naranja { background: var(--naranja); color: var(--naranja-hondo); }
.chip--mostaza { background: var(--mostaza); color: var(--silo-hondo); }

/* ============================================================
   6 · HABLEMOS
   ============================================================ */
.contacto { max-width: var(--ancho); margin: 0 auto; padding: var(--e-9) var(--margen); text-align: center; }
.contacto__grande {
  display: flex; justify-content: center;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(4.4rem, 19vw, 18rem);
  line-height: 0.85;
  text-transform: uppercase;
}
.contacto__grande span { display: inline-block; transition: color .3s; will-change: transform; }
.contacto__grande span.cerca { color: var(--verde); }
.contacto__lead { max-width: 40ch; margin: var(--e-6) auto 0; font-size: var(--t-lead); color: var(--tinta-2); }
.contacto__lead b { color: var(--tinta); }
.contacto__vias { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-4); margin-top: var(--e-7); }
.via {
  display: flex; align-items: center; gap: var(--e-4);
  padding: 18px 28px 18px 22px;
  border-radius: var(--r-pildora);
  border: 1.5px solid rgba(238,243,234,.2);
  text-decoration: none; text-align: left;
  transition: border-color .3s, background .3s;  /* transform: de GSAP (magnético) */
}
.via:hover { border-color: var(--tinta); background: rgba(238,243,234,.05); }
.via span { display: grid; }
.via b { font-size: 1.1rem; }
.via em { font-style: normal; color: var(--tinta-3); font-size: 0.92rem; overflow-wrap: anywhere; }
.via--wa { background: var(--verde); color: var(--verde-hondo); border-color: var(--verde); }
/* En el celular las tres vías van del mismo ancho: con anchos distintos
   apiladas y centradas se veían desparejas. */
@media (max-width: 600px) { .contacto__vias { flex-direction: column; align-items: stretch; } }
.via--wa em { color: var(--verde-hondo); opacity: .8; }
.via--wa:hover { background: var(--verde-claro); border-color: var(--verde-claro); }

/* ============================================================
   PIE
   ============================================================ */
.pie { border-top: 1px solid rgba(238,243,234,.08); padding: var(--e-8) var(--margen) var(--e-6); text-align: center; overflow: hidden; }
.pie__firma {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 2.5vw, 40px);
}
.pie__iso { width: clamp(76px, 17vw, 250px); height: auto; flex: none; }
.pie__marca {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(4.4rem, 22vw, 20rem);
  line-height: 0.8;
  color: var(--tinta);
  text-shadow: 0 0 60px rgba(125,212,127,.18);
}
.pie__marca b { color: var(--verde); font-weight: 900; }
.pie__sitios { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-5); margin-top: var(--e-7); }
.pie__sitios a { display: inline-block; padding: 10px 4px; color: var(--tinta-2); text-decoration: none; font-weight: 700; }
.pie__sitios a:hover { color: var(--verde); }
.pie__social { margin-top: var(--e-5); }
.pie__social a { padding: 10px 4px; display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); font-weight: 700; text-decoration: none; transition: color .2s; }
.pie__social a:hover { color: var(--verde); }
.pie__legal { margin-top: var(--e-4); font-size: var(--t-chico); color: var(--tinta-4); }

@keyframes latido { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   CELULARES: los casos que no salen solos
   Medidos con responsive.py (scratchpad) en 320×568, 360×740, 390×844,
   430×932, 844×390 acostado y tablets.
   ============================================================ */

/* Datos flotantes del héroe: en celulares bajos chocan con el texto del
   pie. Son decorativos (aria-hidden): ahí no van. */
@media (max-width: 720px) and (max-height: 700px) {
  .dato { display: none; }
}

/* WhatsApp fijo en celulares angostos o acostados: solo el ícono,
   redondo. Con el texto tapaba los botones de las demos y los enlaces.
   El nombre lo da el aria-label. */
@media (max-width: 480px), (max-height: 560px) and (orientation: landscape) {
  .wa-fijo { padding: 15px; }
  .wa-fijo span { display: none; }
  .wa-fijo svg { width: 26px; height: 26px; }
}

/* Celular acostado y pantallas bajas en general. Lo pineado mide un alto
   de pantalla, así que todo lo que va adentro tiene que entrar en ~390 px:
   - el héroe tenía min-height 560 y su pie quedaba SIEMPRE fuera de vista;
   - el origen (frase + caras) medía 683 px y se cortaba. */
@media (max-height: 560px) and (orientation: landscape) {
  .heroe__escena { min-height: 0; }
  .heroe__datos { display: none; }
  .heroe__lema { font-size: 1.1rem; }
  .heroe__frase p:not(.heroe__lema) { display: none; }
  .heroe__pie { padding-bottom: 14px; align-items: center; }
  .heroe__pie .boton { padding: 11px 20px; }

  .origen { grid-template-columns: 0.9fr 1.2fr; gap: var(--e-5); }
  .origen__frase { font-size: clamp(1.3rem, 3.4vw, 2rem); }
  .cara img { aspect-ratio: 1; max-height: 52svh; }
  .cara figcaption { font-size: 0.76rem; line-height: 1.35; }
}