/* ==========================================================================
   Se sirve con `max-age` de un año bajo una URL sellada con el hash de su
   contenido (scripts/sellar_assets.py). Al desplegar, comprobar el archivo
   PRIMERO en pages.dev y solo después en el dominio: consultar la URL sellada
   antes de que el despliegue propague hace que el edge cachee el archivo
   ANTERIOR bajo el hash nuevo, por un año. Ver la trampa 5 del README.
   ==========================================================================
   BoviMonitor — sistema visual
   Color: del logo (verde #478a26, monte #09451d, azul #003763) mas el naranja
   de la cinta electrica que aparece en las fotos de finca.
   Tipografia: Archivo (titulares, señaletica), IBM Plex Sans (lectura),
   IBM Plex Mono (datos: dias de descanso, kg, tarifas).
   ========================================================================== */

:root{
  --ink:#10251a;
  --ink-2:#4b6354;
  --ink-3:#7b8f83;
  --paper:#f4f7f1;
  --white:#ffffff;
  --line:#dbe3d7;
  --line-soft:#e8eee4;

  --verde:#377e20;        /* del logo; 4.66:1 sobre papel, 5.04:1 con texto blanco encima */
  --verde-hover:#2e6a1a;
  --verde-marca:#478a26;  /* el verde vivo del logo: solo en grafica, nunca bajo texto */
  --monte:#09451d;
  --monte-2:#0d3218;
  --azul:#003763;
  --azul-2:#0a4d84;
  --cinta:#d9622b;        /* trazo de la subdivision sobre la foto: grafico */
  --cinta-txt:#b84718;    /* el mismo naranja, para texto: 5.31:1 sobre blanco */

  --radius:14px;
  --radius-lg:22px;
  --max:1180px;
  --pad:24px;
  --header-h:76px;

  --shadow-1:0 1px 2px rgba(16,37,26,.06), 0 6px 18px rgba(16,37,26,.06);
  --shadow-2:0 2px 6px rgba(16,37,26,.08), 0 18px 44px rgba(16,37,26,.12);

  --f-display:"Archivo","Archivo Fallback",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","IBM Plex Sans Fallback",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

/* `hidden` gana SIEMPRE, y por eso lleva !important.
   El sitio esconde y muestra media docena de bloques con `el.hidden = true`, y
   el `display:none` que trae el navegador para [hidden] lo tumba cualquier
   regla de clase. Pasó en producción: al darle display:block a
   `.calc__out[data-modo="matriz"]` —misma especificidad (0,2,0) que
   `.calc__out[hidden]` pero más abajo en el archivo— la matriz de precios se
   quedaba pintada cuando el JS la ocultaba. El visitante elegía «Más de 10.000
   cabezas» y seguía viendo la tabla anterior, con precios que ya no eran los
   suyos. Con esta regla, esa clase de error no puede volver. */
[hidden]{display:none !important}

/* Al sondear un despliegue (trampa 5 del README), el marcador tiene que ser
   EXCLUSIVO de la versión nueva. Sondear con `font-size:.8rem` no sirvió: ese
   valor ya estaba en la anterior, el sondeo dio positivo sin que hubiera
   llegado nada, y la URL canónica se envenenó igual. Un marcador que las dos
   versiones comparten no comprueba nada. */
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
figure{margin:0}

/* 92%: Archivo tiene eje de anchura. Estaba en 112% —expandida, tipo
   señalética— y a tamaño grande se leía estirada. A 92% acompaña al logo,
   que es una grotesca de proporciones normales-estrechas. */
h1,h2,h3,.h-display{
  font-family:var(--f-display);
  font-weight:700;
  font-stretch:92%;
  letter-spacing:-.022em;
  line-height:1.03;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,5.6vw,4.4rem)}
h2{font-size:clamp(1.85rem,3.5vw,2.85rem); line-height:1.06}
h3{font-size:1.2rem; font-stretch:96%; letter-spacing:-.012em; line-height:1.2}
p{margin:.7rem 0}

.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- Etiqueta de seccion: numero de placa, no decoracion ------------------ */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--verde);
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 18px;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--line); max-width:180px}
.eyebrow.on-dark{color:#8fd06a}
.eyebrow.on-dark::after{background:rgba(255,255,255,.22)}

.lede{font-size:clamp(1.05rem,1.6vw,1.24rem); color:var(--ink-2); max-width:60ch; line-height:1.55}

/* --- Botones -------------------------------------------------------------- */
.btn{
  white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-body); font-size:1rem; font-weight:600; line-height:1.1;
  padding:15px 22px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
  text-align:center;
}
.btn--primary{background:var(--verde); color:#fff; box-shadow:0 4px 14px rgba(71,138,38,.28)}
.btn--primary:hover{background:var(--verde-hover); transform:translateY(-1px)}
.btn--ghost{border-color:var(--line); color:var(--ink); background:var(--white)}
.btn--ghost:hover{border-color:var(--ink-3); transform:translateY(-1px)}
.btn--onphoto{border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.08); backdrop-filter:blur(6px)}
.btn--onphoto:hover{background:rgba(255,255,255,.18); border-color:#fff}
.btn--sm{height:40px; padding:0 17px; font-size:.93rem}

:where(a,button,select,summary,input):focus-visible{
  outline:2.5px solid var(--azul); outline-offset:3px; border-radius:6px;
}

/* --- Header --------------------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(244,247,241,.86);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background-color .2s ease;
}
.site-header[data-scrolled="true"]{border-bottom-color:var(--line); background:rgba(244,247,241,.95)}
.site-header .wrap{display:flex; align-items:center; gap:20px; width:100%}
.brand{flex:0 0 auto}
.brand img{height:40px; width:auto}
.site-nav{display:flex; gap:22px; margin-left:auto; font-size:.94rem; color:var(--ink-2); white-space:nowrap}
.site-nav a{height:40px; display:inline-flex; align-items:center; padding:0; position:relative}
.site-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:9px; height:1.5px;
  background:var(--verde); transition:right .22s ease;
}
.site-nav a:hover{color:var(--ink)}
.site-nav a:hover::after{right:0}
.header-cta{display:flex; align-items:center; gap:10px; margin-left:22px; white-space:nowrap}

/* Idioma. Una lista, no una fila de siglas: el sitio va a estar en una docena
   de idiomas, y una lista crece sin tocar el header. Los que aún no existen
   van deshabilitados —visibles, para que se sepa que vienen; inertes, para no
   llevar a una página en español a quien pidió otra cosa. */
.lang{display:flex; align-items:center; gap:6px; margin-right:6px; min-width:0}
.lang__icon{width:22px; height:22px; opacity:.65; flex:0 0 auto}
.lang__select{
  font-family:var(--f-body); font-size:.88rem; font-weight:500; color:var(--ink);
  background:transparent; border:1px solid transparent; border-radius:10px;
  height:40px; padding:0 26px 0 8px; cursor:pointer; appearance:none;
  max-width:9rem; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234b6354' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
}
.lang__select:hover{border-color:var(--line); background-color:var(--white)}
.lang__select option:disabled{color:var(--ink-3)}
@media (max-width:1150px){.lang{margin-right:0}}
@media (max-width:900px){
  .header-cta > .login{display:none}   /* vive en el menú */
}
.header-cta .login{
  height:40px; display:inline-flex; align-items:center; padding:0 6px;
  font-size:.95rem; font-weight:600; color:var(--ink-2);
}
.header-cta .login:hover{color:var(--verde)}

/* Estrechando: primero se van los enlaces del nav, uno a uno. Idioma e
   Iniciar sesión aguantan hasta el final porque no hay otra forma de llegar a
   ellos; a las secciones sí, bajando por la página. */
/* $= y no =: en las páginas de contenido los enlaces del header apuntan a
   /es/#app, no a #app, y con el selector exacto estas reglas dejaban de casar.
   El nav no colapsaba y entre 900 y 1150 px el botón "Crear cuenta" se salía
   de la pantalla. Con "termina en" sirve igual cuando existan /en/ y /pt/. */
@media (max-width:1150px){
  .site-nav a[href$="#app"]{display:none}
  .site-nav a[href$="#faq"]{display:none}
}
@media (max-width:1010px){
  .site-nav a[href$="#como-funciona"]{display:none}
}

/* --- Menú de teléfono ----------------------------------------------------- */
.menu-btn{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:0 9px; margin-left:2px;
  background:none; border:1px solid var(--line); border-radius:12px; cursor:pointer;
}
.menu-btn span{display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu-movil{
  position:absolute; left:0; right:0; top:100%;
  background:var(--white); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-2); padding:6px 0 18px;
}
/* El menú también usa .wrap, y `.site-header .wrap{display:flex}` lo alcanzaba:
   los enlaces salían en media columna y el pie flotando al lado. */
.menu-movil .wrap{display:block; width:100%}
.menu-movil nav{display:flex; flex-direction:column}
.menu-movil nav a{
  padding:14px 2px; font-size:1.02rem; font-weight:500;
  border-bottom:1px solid var(--line-soft);
}
.menu-movil__pie{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:16px}
.menu-movil__login{font-weight:600; color:var(--verde); font-size:1rem}
.menu-movil .lang{margin:0}
.menu-movil .lang__select{max-width:none; border-color:var(--line); background-color:var(--white)}

@media (max-width:900px){
  .site-nav{display:none}
  .header-cta{margin-left:auto}
  .menu-btn{display:flex}
  .header-cta > .lang{display:none}   /* el del header cede al del menú */
}
@media (min-width:901px){
  .menu-movil{display:none !important}
}
@media (max-width:560px){
  :root{--header-h:66px; --pad:18px}
  .brand img{height:32px}
  .header-cta .login{display:none}
}

/* --- Hero: el texto tiene su fondo, la geometria tiene su foto ----------- */
.hero{
  margin-top:var(--header-h);
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  min-height:min(84vh,720px);
  background:var(--monte-2);
}
.hero__text{
  display:flex; align-items:center;
  padding:clamp(44px,6vh,80px) clamp(24px,4vw,64px);
  padding-left:max(var(--pad), calc((100vw - var(--max))/2 + var(--pad)));
  background:
    radial-gradient(120% 90% at 8% 18%, rgba(71,138,38,.20) 0%, rgba(71,138,38,0) 62%),
    var(--monte-2);
}
.hero__col{max-width:38rem}
.hero__kicker{
  margin:0 0 20px;
  font-family:var(--f-mono); font-size:.8rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:#9fdc74;
}
.hero h1{color:#fff; font-size:clamp(2.4rem,3.5vw,3.65rem)}
.hero h1 em{font-style:normal; color:#9fdc74}
.hero__lede{color:rgba(255,255,255,.82); font-size:clamp(1.02rem,1.35vw,1.16rem); max-width:52ch; margin-top:20px}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero__fine{
  margin-top:24px; display:flex; flex-wrap:wrap; gap:9px 22px;
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.06em;
  color:rgba(255,255,255,.68); text-transform:uppercase;
}
.hero__fine span{display:flex; align-items:center; gap:8px}
.hero__fine span::before{content:""; width:5px; height:5px; border-radius:50%; background:#9fdc74; flex:0 0 auto}

.hero__map{position:relative; overflow:hidden; background:var(--monte)}
.hero__map img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center}
.hero__map svg{position:absolute; inset:0; width:100%; height:100%}
/* funde el borde izquierdo de la foto con la columna oscura */
.hero__map::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, var(--monte-2) 0%, rgba(13,50,24,.55) 9%, rgba(13,50,24,0) 26%),
    linear-gradient(0deg, rgba(13,50,24,.62) 0%, rgba(13,50,24,0) 34%);
}
.hero__map svg{z-index:2}


/* El trazado de potreros sobre la foto se retiró: ver el comentario del hero
   en es/index.html. El mapa real va en el pantallazo de la sección "La app". */

@media (max-width:900px){
  .hero{grid-template-columns:1fr; min-height:0}
  /* Sin `width:100%` y con `min-height`, `aspect-ratio` calcula el ancho a
     partir de la altura: 260px x 16/10 = 416px, y el hero desbordaba 26px el
     viewport de 390. El ancho manda; la altura sale de él. */
  .hero__map{order:-1; width:100%; min-height:0; aspect-ratio:16/11}
  .hero__map::before{
    background:linear-gradient(0deg, var(--monte-2) 0%, rgba(13,50,24,.5) 22%, rgba(13,50,24,0) 55%);
  }
  .hero__text{
    padding-left:var(--pad); padding-right:var(--pad);
    padding-top:clamp(30px,5vh,44px); padding-bottom:clamp(40px,6vh,60px);
  }
  .hero__mapnote{display:none}
  .chip-t{font-size:52px}
}

/* --- Placa de especificaciones (por que elegirnos) ------------------------ */
.section{padding-block:clamp(64px,8vw,110px)}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.section--paper2{background:var(--white); border-block:1px solid var(--line-soft)}
.section--dark{background:var(--monte); color:#fff}
.section--dark h2{color:#fff}
.section--dark .lede{color:rgba(255,255,255,.78)}

.plate{
  display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(24px,5vw,72px);
  border-top:2px solid var(--ink); margin-top:34px;
}
.plate__row{
  display:grid; grid-template-columns:132px 1fr; gap:20px; align-items:baseline;
  padding:19px 0; border-bottom:1px solid var(--line);
}
.plate__key{
  font-family:var(--f-mono); font-size:.78rem; font-weight:500; letter-spacing:.095em;
  text-transform:uppercase; color:var(--verde); padding-top:4px;
}
.plate__val{font-size:1.02rem; line-height:1.45}
.plate__val b{font-weight:600}
.plate__val small{display:block; color:var(--ink-2); font-size:.9rem; margin-top:3px; line-height:1.4}
@media (max-width:860px){
  .plate{grid-template-columns:1fr}
  .plate__row{grid-template-columns:104px 1fr; gap:14px}
}
@media (max-width:460px){
  .plate__row{grid-template-columns:1fr; gap:5px; padding:15px 0}
  .plate__key{padding-top:0}
}

/* --- Preguntas que hoy no tienen dato -------------------------------------- */
/* Se llena por COLUMNAS: suplementación a la izquierda, pastoreo a la
   derecha. Por filas, los dos módulos quedaban intercalados y había que leer
   la etiqueta de cada pregunta para saber de cuál hablaba. */
.quest{
  list-style:none; margin:38px 0 0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,auto);
  grid-auto-flow:column; gap:0 clamp(28px,4vw,60px);
}
.quest li{
  padding:20px 0; border-top:1px solid var(--line);
  font-family:var(--f-display); font-weight:600; font-stretch:92%;
  font-size:clamp(1.06rem,1.45vw,1.24rem); line-height:1.24; letter-spacing:-.012em;
}
.quest__m{
  display:block; margin-bottom:7px;
  font-family:var(--f-mono); font-size:.72rem; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; color:var(--verde);
}
.quest li:nth-child(n+4) .quest__m{color:var(--azul)}
.quest__pie{margin-top:32px; padding-top:24px; border-top:2px solid var(--ink)}
.quest__pie p{margin:0; font-size:1.06rem; color:var(--ink-2); max-width:74ch}
.quest__pie b{color:var(--ink); font-weight:600}
@media (max-width:860px){
  .quest{grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row}
  .quest li{padding:16px 0}
}

/* --- Modulos: dos bloques grandes, foto y capacidades reales -------------- */
.module{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.5vw,64px); align-items:stretch}
.module + .module{margin-top:clamp(56px,7vw,96px)}
.module__media{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-2); min-height:clamp(320px,34vw,480px)}
.module__media img{width:100%; height:100%; object-fit:cover}
.module:nth-child(even) .module__media{order:2}
.module__tag{
  position:absolute; left:16px; top:16px;
  /* letter-spacing bajo: con .11em el espacio entre "Módulo" y el nombre se
     abría tanto que parecían dos rótulos sueltos. */
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.045em; text-transform:uppercase;
  word-spacing:-.12em;
  background:rgba(9,44,23,.84); color:#fff; padding:8px 13px; border-radius:999px;
  backdrop-filter:blur(6px);
}
.module h3{font-size:clamp(1.5rem,2.6vw,2.05rem); font-stretch:92%; margin-bottom:10px}
.module__desc{color:var(--ink-2); margin-bottom:20px}
.caps{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.caps li{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  padding:11px 0; border-top:1px solid var(--line-soft); font-size:1rem;
}
.caps li::before{
  content:""; width:7px; height:7px; margin-top:9px; border-radius:2px;
  background:var(--verde-marca); transform:rotate(45deg);
}
.caps li b{font-weight:600}
.caps--azul li::before{background:var(--azul)}
@media (max-width:860px){
  .module{grid-template-columns:1fr}
  .module:nth-child(even) .module__media{order:0}
  .module__media{min-height:0; aspect-ratio:4/3}
}

/* Encabezado a dos columnas: el titular a la izquierda, la bajada a la derecha.
   Sin esto, en pantallas anchas la mitad derecha de la seccion queda vacia. */
.head2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,4vw,56px); align-items:end}
.head2 h2{margin:0}
.head2 .lede{margin:0}
@media (max-width:860px){.head2{grid-template-columns:1fr; gap:14px; align-items:start}}

/* --- Franja de actividades ------------------------------------------------ */
.acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.acts li{
  list-style:none;
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.03em;
  padding:9px 15px; border-radius:999px;
  border:1px solid rgba(255,255,255,.24); color:rgba(255,255,255,.9);
}

/* --- Como funciona: secuencia real, por eso va numerada ------------------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,32px); margin-top:44px; counter-reset:step}
.step{position:relative; padding-top:26px; border-top:2px solid var(--ink)}
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; top:-2px; left:0;
  font-family:var(--f-mono); font-size:.76rem; font-weight:500; letter-spacing:.1em;
  color:var(--verde); background:var(--paper); padding-right:12px; transform:translateY(-50%);
}
.section--paper2 .step::before{background:var(--white)}
.step h3{margin-bottom:8px}
.step p{color:var(--ink-2); font-size:.98rem; margin:0}
.step__who{
  display:inline-block; margin-top:14px;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--azul); border:1px solid var(--line); border-radius:999px; padding:5px 11px;
}
@media (max-width:860px){.steps{grid-template-columns:1fr; gap:30px}}

/* --- Pantallas Android ---------------------------------------------------- */
.phones{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,40px); margin-top:46px}
.phone{display:flex; flex-direction:column; gap:16px}
.phone__frame{
  position:relative; aspect-ratio:9/19.5; border-radius:30px; overflow:hidden;
  background:var(--white); border:1px solid var(--line);
  box-shadow:var(--shadow-2);
}
.section--dark .phone__frame{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2)}
.phone__frame img{width:100%; height:100%; object-fit:cover}
.phone__ph{
  position:absolute; inset:12px; border-radius:20px;
  border:1.5px dashed var(--line); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; text-align:center; padding:22px;
}
.section--dark .phone__ph{border-color:rgba(255,255,255,.28)}
.phone__ph span{
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.095em; text-transform:uppercase;
  color:var(--ink-2);
}
.section--dark .phone__ph span{color:rgba(255,255,255,.72)}
.phone__ph strong{font-family:var(--f-display); font-size:1.02rem; font-weight:600; font-stretch:96%; line-height:1.25}
.section--dark .phone__ph strong{color:rgba(255,255,255,.9)}
.phone__cap{font-size:.95rem; color:var(--ink-2)}
.section--dark .phone__cap{color:rgba(255,255,255,.72)}
.phone__cap b{display:block; font-weight:600; color:var(--ink); margin-bottom:2px}
.section--dark .phone__cap b{color:#fff}
/* En movil, tres marcos apilados a ancho completo son ~2.100px de scroll solo
   de pantallazos. Se vuelven fila: telefono a la izquierda, texto al lado. */
@media (max-width:820px){
  .phones{grid-template-columns:1fr; gap:20px}
  .phone{display:grid; grid-template-columns:142px 1fr; gap:18px; align-items:center}
  .phone__frame{border-radius:20px}
  .phone__ph{inset:9px; border-radius:14px; padding:12px; gap:6px}
  .phone__ph span{font-size:.64rem; letter-spacing:.08em}
  .phone__ph strong{font-size:.88rem}
}
@media (max-width:430px){
  .phone{grid-template-columns:116px 1fr; gap:14px}
  .phone__ph strong{font-size:.8rem}
}

/* --- Precios: una calculadora, no una tabla ------------------------------- */
.calc{
  margin-top:38px; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-1); overflow:hidden;
}
.calc__fields{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-bottom:1px solid var(--line);
}
.calc__field{padding:clamp(18px,2.4vw,26px); border-bottom:1px solid var(--line-soft)}
.calc__field:nth-child(1),.calc__field:nth-child(2){grid-column:1/-1}
.calc__field--half{border-right:1px solid var(--line-soft)}
.calc__field--half + .calc__field--half{border-right:0}
.calc__field:last-child{border-bottom:0}
.calc__field label,.calc__label{
  display:flex; align-items:center; gap:11px; margin-bottom:12px;
  font-family:var(--f-display); font-size:1.04rem; font-weight:600; font-stretch:96%;
  letter-spacing:-.008em;
}
.calc__n{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  background:var(--verde); color:#fff;
  font-family:var(--f-mono); font-size:.72rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.calc__control select,.calc__control input{
  font-family:var(--f-body); font-size:1rem; color:var(--ink);
  background:var(--white); border:1.5px solid var(--line); border-radius:12px;
  padding:13px 15px; width:100%; max-width:400px;
}
.calc__control select{
  appearance:none; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234b6354' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
.calc__control input{max-width:180px; font-family:var(--f-mono); font-weight:500}
.calc__control select:hover,.calc__control input:hover{border-color:var(--ink-3)}
.calc__hint{margin:9px 0 0; font-size:.88rem; color:var(--ink-2); max-width:52ch}

/* País ya elegido: nombre y un "cambiar" al lado, en vez del desplegable. */
.pais-fijo{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.pais-fijo b{font-family:var(--f-display); font-size:1.3rem; font-weight:700; font-stretch:92%; letter-spacing:-.015em}
.pais-cambiar{
  font-family:var(--f-body); font-size:.88rem; font-weight:600; color:var(--verde);
  background:none; border:0; border-bottom:1px solid rgba(55,126,32,.35);
  padding:0 0 1px; cursor:pointer;
}
.pais-cambiar:hover{color:var(--verde-hover); border-bottom-color:var(--verde-hover)}
#geoNote{color:var(--verde); font-family:var(--f-mono); font-size:.76rem; letter-spacing:.02em}

.seg{display:flex; flex-wrap:wrap; gap:9px}
.seg__btn{
  font-family:var(--f-body); font-size:.97rem; font-weight:600; color:var(--ink-2);
  background:var(--white); border:1.5px solid var(--line); border-radius:999px;
  padding:11px 18px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.seg__btn:hover{border-color:var(--ink-3); color:var(--ink)}
.seg__btn.is-on{background:var(--monte); border-color:var(--monte); color:#fff}

/* Dos columnas siempre; con un módulo son 2 cotizaciones (una fila) y con los
   dos son 4 (dos filas), porque el plan se elige POR MÓDULO. Las separaciones
   se resuelven por posición y no por número: derecha salvo en las pares,
   abajo salvo en las dos últimas — que es la última fila cuando son pares. */
.calc__out{display:grid; grid-template-columns:1fr 1fr; gap:0}
.quote{
  padding:clamp(22px,3vw,32px);
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.quote:nth-child(2n){border-right:0}
.quote:nth-last-child(-n+2){border-bottom:0}
.quote--hero{background:linear-gradient(160deg, rgba(71,138,38,.07), rgba(0,55,99,.05))}
.quote__tier{
  margin:0 0 10px; font-family:var(--f-mono); font-size:.78rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--verde);
}
.quote--hero .quote__tier{color:var(--azul)}

/* --- Los dos módulos: una matriz, no cuatro tarjetas -----------------------
   Con los dos módulos hay cuatro precios, pero no cuatro cosas que explicar:
   son el cruce de dos planes de Suplementación por dos de Pastoreo. Puestos
   como tarjetas, el desglose se repetía cuatro veces —dieciséis renglones para
   cuatro números—. En la matriz cada nombre aparece una sola vez: el módulo en
   su eje, el plan en su fila o su columna, y el precio de ese módulo al lado.
   En las celdas queda lo único que cambia entre las cuatro: el total. */
.calc__out[data-modo="matriz"]{display:block; padding:clamp(20px,2.6vw,30px)}

/* --- Los dos módulos: una matriz de 2x2 -------------------------------------
   Cuatro precios que son el cruce de dos planes por dos planes. Como cuatro
   tarjetas, el desglose se repetía cuatro veces: dieciséis renglones para decir
   cuatro números. Acá cada nombre aparece una vez.

   UNA sola caja redondeada, con la fila y la columna de encabezado tintadas:
   así cada módulo queda visiblemente agrupado con sus dos planes, y la raya
   gruesa marca dónde acaba cada eje y empiezan los precios.

   Dos intentos descartados, por si vuelve la tentación:
     · el nombre del eje vertical GIRADO al lado de las filas — con
       `writing-mode` el ancho de la celda no sale del texto girado y la
       etiqueta se montaba encima de los nombres de plan;
     · cajas separadas por una columna-calle con `rowspan` — un rowspan NO
       puede cruzar de <thead> a <tbody>: el navegador lo recorta a la sección
       y las columnas de precios quedaban corridas respecto de sus cabeceras.

   border-collapse SEPARATE: con `collapse` el navegador ignora el
   border-radius de las celdas, y las esquinas se redondean celda por celda.
   OJO con la especificidad: `.matriz th` es (0,1,1) y le gana a `.matriz__col`
   (0,1,0), así que acá no se declara nada que las clases quieran cambiar. */
.matriz{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius:var(--radius);
}
/* Esta regla NO declara padding ni vertical-align, y no es un descuido: es
   (0,1,1) y le gana a cualquier `.matriz__loquesea` (0,1,0). Con `padding:0`
   acá, ninguno de los paddings de abajo se aplicaba y la tabla salía
   apelmazada. Cada clase se encarga del suyo. */
.matriz th,.matriz td{text-align:left}

/* La fila y la columna de encabezado, tintadas: es lo que agrupa cada módulo
   con sus dos planes sin necesidad de dibujar dos cajas sueltas. */
.matriz__eje,.matriz__col,.matriz__fil{background:var(--line-soft)}
.matriz__eje{
  color:var(--verde); vertical-align:top; white-space:nowrap;
  font-family:var(--f-mono); font-size:.74rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:14px 18px 7px;
}
.matriz__eje--y{
  width:1%; border-top-left-radius:var(--radius);
  padding-right:24px; padding-bottom:15px; vertical-align:bottom;
}
.matriz__eje--x{border-top-right-radius:var(--radius)}
.matriz__col,.matriz__fil{
  font-family:var(--f-display); font-weight:600; font-stretch:96%;
  font-size:1.02rem; letter-spacing:-.008em; color:var(--ink);
  vertical-align:middle;
}
.matriz__col{padding:2px 18px 15px}
/* La raya gruesa: hasta acá llega el eje, debajo (o a la derecha) los precios. */
.matriz thead tr:last-child .matriz__col{border-bottom:2px solid var(--ink)}
.matriz__eje--y,.matriz__fil{border-right:2px solid var(--ink)}
.matriz__fil{width:1%; white-space:nowrap; padding:18px 24px 18px 18px}
.matriz tbody tr:last-child .matriz__fil{border-bottom-left-radius:var(--radius)}

/* --- Las cuatro celdas: lo único que cambia de una combinación a otra ------ */
.matriz__precio{padding:18px; vertical-align:middle; border-bottom:1px solid var(--line)}
.matriz__precio:not(:last-child){border-right:1px solid var(--line)}
.matriz tbody tr:last-child .matriz__precio{border-bottom:0}
.matriz tbody tr:last-child .matriz__precio:last-child{border-bottom-right-radius:var(--radius)}
.matriz__precio .matriz__cur{
  display:block; font-family:var(--f-mono); font-size:.76rem; color:var(--ink-2);
}
.matriz__precio .matriz__mes{
  margin-left:5px; font-size:.85rem; color:var(--ink-2); white-space:nowrap;
}
/* «+ impuestos» al lado de cada precio solo donde cabe: en un teléfono ensancha
   las cuatro celdas lo suficiente para que la tabla se salga de la pantalla, y
   ahí lo dice la nota que va justo debajo.

   Medido con la letra a tamaño normal: a 620 px el texto llega al borde y a 660
   entra con holgura. El corte va en 720 para no quedar pegado a ese límite — el
   texto es fijo, pero el ancho que ocupa depende de la fuente con que cada
   sistema lo pinte.

   Ojo al medir esto: por debajo de 560 px el bloque @media de más abajo achica
   TODAS las fuentes de la tabla, así que ahí «entra» con letra pequeña y da un
   límite que no vale para el tamaño normal. La primera medición cayó en eso. */
.matriz__imp{display:none}
@media (min-width:720px){
  .matriz__imp{display:inline}
}
/* «Plan» delante de cada nombre, salvo en teléfonos estrechos: la columna de
   las filas es `nowrap`, así que la palabra la ensancha y a 320 px la tabla se
   sale. Los ejes ya dicen de qué módulo es cada lista, y ahí el nombre corto
   basta. En el comparativo y en las cotizaciones va siempre: sobra ancho. */
.matriz__pre{display:none}
@media (min-width:420px){
  .matriz__pre{display:inline}
}
.matriz__precio b{
  font-family:var(--f-display); font-weight:700; font-stretch:92%;
  font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-.03em; line-height:1.05;
}
.matriz__precio.is-hero{background:linear-gradient(160deg, rgba(71,138,38,.09), rgba(0,55,99,.07))}
.matriz__precio.is-hero b{color:var(--azul)}
.matriz__nota{
  margin:20px 0 0; font-size:.88rem; line-height:1.5; color:var(--ink-2); max-width:74ch;
}
@media (max-width:560px){
  .calc__out[data-modo="matriz"]{padding:16px 12px}
  .matriz__eje{font-size:.62rem; letter-spacing:.06em; padding:11px 10px 5px}
  .matriz__col,.matriz__fil{font-size:.86rem}
  .matriz__col{padding:2px 10px 12px}
  .matriz__fil{padding:12px 10px}
  .matriz__precio{padding:12px 10px}
  .matriz__precio b{font-size:1.45rem}
}
/* En un teléfono estrecho «/ mes» al lado del número ensancha cada celda lo
   suficiente para que la última columna se salga de la pantalla. Baja a su
   propia línea: tres renglones cortos entran donde uno largo no cabe. */
@media (max-width:420px){
  .matriz__precio .matriz__mes{display:block; margin-left:0; font-size:.78rem}
}

.quote__amount{display:flex; align-items:baseline; gap:7px; margin:0 0 16px}
.quote__cur{font-family:var(--f-mono); font-size:.9rem; color:var(--ink-2)}
.quote__amount b{
  font-family:var(--f-display); font-size:clamp(2.4rem,4.6vw,3.4rem); font-weight:700;
  font-stretch:92%; letter-spacing:-.03em; line-height:1;
}
.quote__per{font-size:.95rem; color:var(--ink-2)}
.quote__break{list-style:none; margin:0; padding:0; display:grid; gap:0}
.quote__break li{
  display:flex; justify-content:space-between; gap:16px;
  padding:9px 0; border-top:1px solid var(--line-soft);
  font-size:.94rem; color:var(--ink-2);
}
.quote__break li span:last-child{font-family:var(--f-mono); font-weight:500; white-space:nowrap; color:var(--ink)}
.quote__break li.is-off span:last-child{color:var(--cinta-txt)}
.quote__break li.is-total{font-weight:600; color:var(--ink)}
@media (max-width:760px){
  .calc__fields,.calc__out{grid-template-columns:1fr}
  .calc__field--half{border-right:0}
  /* Una sola columna: la separación vuelve a ser solo horizontal, y la regla
     de "las dos últimas no llevan borde" deja de aplicar. */
  .quote,.quote:nth-child(2n){border-right:0}
  .quote,.quote:nth-last-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .quote:last-child{border-bottom:0}
}

.calc__foot{margin:0; padding:18px clamp(18px,2.4vw,26px); border-top:1px solid var(--line); font-size:.92rem; color:var(--ink-2)}
.calc__ask{padding:clamp(24px,3vw,34px); text-align:left}
.calc__ask p{margin:0 0 14px; color:var(--ink-2); max-width:60ch}
.calc__ask--contact p{margin-bottom:16px}

.tier-diff{margin-top:26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white)}
.tier-diff summary{
  cursor:pointer; list-style:none; padding:18px 22px; position:relative;
  font-family:var(--f-display); font-weight:600; font-stretch:96%; font-size:1.02rem;
}
.tier-diff summary::-webkit-details-marker{display:none}
.tier-diff summary::after{
  content:""; position:absolute; right:22px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--verde); border-bottom:2px solid var(--verde);
  transform:translateY(-70%) rotate(45deg); transition:transform .22s ease;
}
.tier-diff[open] summary::after{transform:translateY(-30%) rotate(225deg)}
/* Qué incluye cada plan. Antes era una tabla de chulos, y su problema era de
   fondo: 14 de sus 23 filas tenían chulo en las DOS columnas. Seis de cada
   diez filas existían solo para decir "esto va en los dos", y lo que el ojo
   veía era una tabla donde casi nada cambia — que es justo lo contrario de lo
   que una comparación tiene que hacer.

   Ahora cada grupo son dos tarjetas: el Básico lista lo suyo y el Todo
   incluido dice "todo lo del Básico" y lista SOLO lo que agrega. Nada se
   imprime dos veces, el Básico se lee como un producto entero en vez de como
   una columna con huecos, y lo que de verdad separa a los planes queda a la
   vista sin tener que compararlo renglón por renglón. */
.tiers{padding:4px 22px 2px}
.tiers__grp + .tiers__grp{margin-top:clamp(24px,3.2vw,38px)}
.tiers__grpname{
  font-family:var(--f-mono); font-size:.76rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--verde); font-stretch:normal;
  margin:0 0 14px; padding-bottom:10px; border-bottom:1.5px solid var(--ink);
}
/* align-items:start — las dos tarjetas de un grupo casi nunca tienen el mismo
   número de líneas, y estirar la corta hasta la larga deja un vacío que se lee
   como si faltara algo. */
.tiers__pair{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.6vw,20px); align-items:start;
}
.tier{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(16px,2vw,22px);
}
/* El azul del Todo incluido no es decorativo: es el mismo que ya distingue esa
   cotización en la calculadora, unas líneas más arriba en la misma sección. */
.tier--suite{
  background:linear-gradient(160deg, rgba(71,138,38,.07), rgba(0,55,99,.05));
  border-color:rgba(0,55,99,.18);
}
.tier__k{
  margin:0; font-family:var(--f-mono); font-size:.78rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--verde);
}
.tier--suite .tier__k{color:var(--azul)}
.tier__inherit{margin:9px 0 0; font-size:.92rem; line-height:1.4; color:var(--ink-2)}
.tier ul{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:0}
.tier li{
  display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start;
  padding:10px 0; border-top:1px solid var(--line-soft);
  font-size:.95rem; line-height:1.45;
}
.tier li:first-child{border-top:0; padding-top:0}
.tier li::before{
  content:""; width:6px; height:6px; margin-top:8px; border-radius:2px;
  background:var(--verde-marca); transform:rotate(45deg);
}
.tier--suite li::before{background:var(--azul)}
@media (max-width:700px){
  .tiers__pair{grid-template-columns:1fr; gap:12px}
}
@media (max-width:560px){
  .tiers{padding-inline:14px}
  .tiers__nota{padding-inline:14px}
}
.tiers__nota{
  margin:clamp(22px,3vw,32px) 0 0; padding:0 22px 22px;
  font-size:.9rem; line-height:1.55; color:var(--ink-2); max-width:76ch;
}
.tiers__nota b{color:var(--ink); font-weight:600}

/* --- FAQ ------------------------------------------------------------------ */
.faq{margin-top:34px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font-family:var(--f-display); font-weight:600; font-stretch:96%; font-size:1.08rem;
  letter-spacing:-.008em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:13px; height:13px;
  border-right:2px solid var(--verde); border-bottom:2px solid var(--verde);
  transform:translateY(-70%) rotate(45deg); transition:transform .22s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details > *:not(summary){margin:0 0 20px; color:var(--ink-2); max-width:76ch}
.faq details ul{padding-left:20px}
.faq details li{margin:5px 0}

/* --- CTA final + footer --------------------------------------------------- */
.cta-final{text-align:center; padding-block:clamp(64px,9vw,120px)}
.cta-final h2{max-width:18ch; margin-inline:auto}
.cta-final .lede{margin:18px auto 0; text-align:center}
.cta-final .hero__actions{justify-content:center}
.cta-final .hero__fine{justify-content:center; margin-top:24px}

.site-footer{background:var(--monte-2); color:rgba(255,255,255,.66); padding-block:44px 40px; font-size:.9rem}
/* La columna de enlaces era `auto` —o sea, lo que pidiera— y la de la marca
   `1fr`, que puede encogerse hasta su min-content. Al pasar de 6 a 9 enlaces,
   por debajo de ~1150 px la marca se quedaba con el ancho de "Planeación": el
   párrafo caía en nueve líneas y el logo, con el max-width:100% global, se
   achicaba dentro de su pastilla. Ahora la marca tiene piso y son los enlaces
   los que ceden y se reparten en varias filas, que es lo que un pie aguanta. */
.site-footer .wrap{
  display:grid;
  grid-template-columns:minmax(16rem,max-content) minmax(0,1fr);
  gap:26px 40px; align-items:start;
}
.site-footer img{height:34px; width:auto; margin-bottom:14px}
.site-footer a{color:rgba(255,255,255,.86)}
.site-footer a:hover{color:#9fdc74; text-decoration:underline}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:flex-end}
.foot-legal{grid-column:1/-1; border-top:1px solid rgba(255,255,255,.14); padding-top:20px; font-size:.83rem; line-height:1.6}
@media (max-width:700px){
  .site-footer .wrap{grid-template-columns:1fr}
  .foot-links{justify-content:flex-start}
}

/* --- Movimiento ----------------------------------------------------------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1; transform:none}
.hero__map [data-draw]{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.5s cubic-bezier(.5,0,.2,1) forwards}
.hero__map [data-fade]{opacity:0; animation:fadein .7s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
  .hero__map [data-draw]{stroke-dashoffset:0}
  .hero__map [data-fade]{opacity:1}
}

/* Logo en el pie: el logo va a color, sobre pastilla clara, para no recolorear la marca */
.foot-logo{
  display:inline-block; background:#fff; border-radius:12px;
  padding:9px 14px; margin-bottom:14px; line-height:0;
}
.foot-logo img{height:30px; width:auto; margin:0}

/* ==========================================================================
   PÁGINAS DE CONTENIDO (/es/monitoreo-de-suplementacion/, /es/rotacion-de-potreros/)

   Son páginas largas de lectura, no de conversión: alguien llega buscando su
   problema y hay que explicárselo antes de venderle nada. Por eso lo que se
   agrega aquí es casi todo tipografía y medida de lectura; la paleta, los
   botones, el header y el pie son los mismos de la home.
   ========================================================================== */

/* --- Hero de página interior ---------------------------------------------
   El de la home es una rejilla de dos columnas con foto. Aquí no hay foto que
   valga: la página es texto. Mismo fondo y mismo aire, una sola columna. */
.phero{
  margin-top:var(--header-h);
  background:
    radial-gradient(90% 120% at 6% 10%, rgba(71,138,38,.22) 0%, rgba(71,138,38,0) 60%),
    var(--monte-2);
  padding-block:clamp(48px,7vw,92px);
  color:#fff;
}
/* Dos columnas por la misma razón que `.head2`: a 1.400 px una sola columna de
   texto deja media pantalla vacía. Titular a la izquierda, bajada y acciones a
   la derecha, alineados por abajo. */
.phero .wrap{
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(16px,2vw,28px) clamp(22px,4vw,60px); align-items:end;
}
.phero .eyebrow{grid-column:1/-1}
.phero h1{
  color:#fff;
  font-size:clamp(2.1rem,4vw,3.3rem);
}
.phero h1 em{font-style:normal; color:#9fdc74; display:block}
.phero .lede{color:rgba(255,255,255,.82); margin:0; max-width:46ch}
.phero .hero__actions{margin-top:26px}
@media (max-width:900px){
  .phero .wrap{grid-template-columns:1fr; align-items:start; gap:20px}
  .phero .lede{max-width:58ch}
}

/* --- Índice de la página --------------------------------------------------
   Una página de 1.500 palabras sin índice se lee de arriba abajo o no se lee.
   No va sticky a propósito: el header ya está fijo y dos barras fijas en un
   teléfono se comen la pantalla. */
.pnav{background:var(--white); border-bottom:1px solid var(--line)}
.pnav .wrap{
  display:flex; gap:26px; overflow-x:auto; scrollbar-width:none;
  padding-block:15px;
}
.pnav .wrap::-webkit-scrollbar{display:none}
.pnav a{
  flex:0 0 auto; position:relative;
  font-family:var(--f-mono); font-size:.8rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2);
  padding-bottom:3px; border-bottom:1.5px solid transparent;
}
.pnav a:hover{color:var(--verde); border-bottom-color:var(--verde)}

/* --- Medida de lectura ----------------------------------------------------
   66ch es la medida en la que un párrafo se sigue sin perder el renglón. El
   resto de la página puede ser ancho; el texto corrido, no. */
.prose{max-width:66ch}
.prose p{font-size:1.07rem; line-height:1.62; color:var(--ink-2); margin:0 0 1.05rem}
.prose p:last-child{margin-bottom:0}
.prose b,.prose strong{color:var(--ink); font-weight:600}
.prose a{color:var(--verde); font-weight:600; border-bottom:1px solid rgba(55,126,32,.3)}
.prose a:hover{color:var(--verde-hover); border-bottom-color:var(--verde-hover)}
.section--dark .prose p{color:rgba(255,255,255,.8)}
.section--dark .prose b,.section--dark .prose strong{color:#fff}
.head2 + .prose{margin-top:clamp(26px,3.5vw,42px)}

/* --- Tarjetas de idea ----------------------------------------------------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px); margin-top:clamp(30px,4vw,48px)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px);
}
.section--paper2 .card{background:var(--paper)}
.card__k{
  display:block; margin-bottom:12px;
  font-family:var(--f-mono); font-size:.76rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--verde);
}
.card--azul .card__k{color:var(--azul)}
.card h3{margin-bottom:9px}
.card p{margin:0; color:var(--ink-2); font-size:.99rem; line-height:1.55}
.card p + p{margin-top:.8rem}
@media (max-width:860px){
  .cards,.cards--2{grid-template-columns:1fr}
}

/* --- Lista numerada de causas --------------------------------------------
   Numerada porque son un conteo cerrado ("seis causas"), no una secuencia. El
   número va en mono, del tamaño del texto: es una referencia, no un adorno. */
.numlist{list-style:none; margin:clamp(30px,4vw,46px) 0 0; padding:0; counter-reset:n}
.numlist li{
  display:grid; grid-template-columns:2.6rem 1fr; gap:14px;
  padding:20px 0; border-top:1px solid var(--line);
}
.numlist li::before{
  counter-increment:n; content:counter(n,decimal-leading-zero);
  font-family:var(--f-mono); font-size:.8rem; font-weight:500; color:var(--verde);
  padding-top:.28rem;
}
.numlist b{
  display:block; margin-bottom:5px;
  font-family:var(--f-display); font-weight:600; font-stretch:96%;
  font-size:1.1rem; letter-spacing:-.01em; color:var(--ink);
}
.numlist span{color:var(--ink-2); font-size:1rem; line-height:1.55}
@media (max-width:460px){
  .numlist li{grid-template-columns:1fr; gap:6px}
  .numlist li::before{padding-top:0}
}

/* --- Bloque de remate ----------------------------------------------------
   El mismo recurso que `.quest__pie` en la home: raya gruesa y una frase que
   cierra la sección. Aquí necesita funcionar también sobre fondo oscuro. */
.pull{margin-top:clamp(30px,4vw,44px); padding-top:24px; border-top:2px solid var(--ink)}
.pull p{margin:0; font-size:1.1rem; line-height:1.5; color:var(--ink-2); max-width:70ch}
.pull b{color:var(--ink); font-weight:600}
.section--dark .pull{border-top-color:rgba(255,255,255,.4)}
.section--dark .pull p{color:rgba(255,255,255,.82)}
.section--dark .pull b{color:#fff}

/* --- Lo que no hace -------------------------------------------------------
   Raya, no cruz roja: son límites deliberados del producto, no fallas. */
.nope{list-style:none; margin:clamp(26px,3.4vw,40px) 0 0; padding:0; max-width:74ch}
.nope li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline;
  padding:15px 0; border-top:1px solid var(--line-soft);
  color:var(--ink-2); font-size:1rem; line-height:1.55;
}
.nope li::before{content:"—"; color:var(--ink-3); font-family:var(--f-mono)}
.nope b{color:var(--ink); font-weight:600}

/* --- Enlace a la otra página --------------------------------------------- */
.xlink{
  display:block; margin-top:clamp(34px,4.5vw,54px);
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px,2.6vw,30px);
  transition:border-color .16s ease, transform .16s ease;
}
.xlink:hover{border-color:var(--verde); transform:translateY(-1px)}
.xlink span{
  display:block; margin-bottom:9px;
  font-family:var(--f-mono); font-size:.76rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--verde);
}
.xlink b{
  display:block; font-family:var(--f-display); font-weight:700; font-stretch:92%;
  font-size:clamp(1.2rem,2vw,1.5rem); letter-spacing:-.015em; line-height:1.15;
  margin-bottom:7px;
}
.xlink em{font-style:normal; color:var(--ink-2); font-size:.99rem}

/* --- Caja de definición en línea (esquemas de suministro) ----------------- */
.defs{list-style:none; margin:clamp(28px,3.6vw,42px) 0 0; padding:0; display:grid; gap:0}
.defs li{padding:22px 0; border-top:1px solid var(--line)}
.defs h3{margin-bottom:8px}
.defs p{margin:0; color:var(--ink-2); font-size:1rem; line-height:1.58; max-width:72ch}
.defs p + p{margin-top:.7rem}
.defs .tag{
  display:inline-block; margin-left:10px; vertical-align:2px;
  font-family:var(--f-mono); font-size:.72rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--azul);
  background:rgba(0,55,99,.08); border-radius:999px; padding:4px 9px;
}

/* `.caps` aparece por primera vez sobre fondo oscuro en las páginas de
   contenido: la línea clara del separador queda demasiado viva ahí. */
.section--dark .caps li{border-top-color:rgba(255,255,255,.16)}

/* Enlace desde cada módulo de la home a su página larga. Va después de las
   capacidades, no antes: quien sigue leyendo ahí ya quiere más, no menos. */
.module__more{margin:22px 0 0}
.module__more a{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.98rem; font-weight:600; color:var(--verde);
  border-bottom:1px solid rgba(55,126,32,.32); padding-bottom:2px;
}
.module__more a::after{content:"→"; font-family:var(--f-mono); font-size:.9rem}
.module__more a:hover{color:var(--verde-hover); border-bottom-color:var(--verde-hover)}
.caps--azul + .module__more a{color:var(--azul); border-bottom-color:rgba(0,55,99,.3)}
.caps--azul + .module__more a:hover{color:var(--azul-2); border-bottom-color:var(--azul-2)}

/* --- Pantallazos de escritorio -------------------------------------------
   El gemelo de `.phone` para la web. Dos por fila y no tres como los
   teléfonos: una captura de escritorio se mira por su detalle —una matriz de
   cumplimiento, un mapa con los días de descanso— y a un tercio de ancho no
   se lee nada. La imagen se ancla arriba (`object-position`) porque en una
   pantalla de aplicación lo que importa está en la cabecera, no en el centro. */
.screens{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,40px); margin-top:clamp(30px,4vw,46px);
}
.screen{display:flex; flex-direction:column; gap:16px}
.screen__frame{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-2);
}
.section--dark .screen__frame{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2)}
.screen__frame img{width:100%; height:100%; object-fit:cover; object-position:top center}
.screen__ph{
  position:absolute; inset:14px; border-radius:14px;
  border:1.5px dashed var(--line); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; text-align:center; padding:22px;
}
.section--dark .screen__ph{border-color:rgba(255,255,255,.28)}
.screen__ph span{
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-2);
}
.section--dark .screen__ph span{color:rgba(255,255,255,.72)}
.screen__ph strong{font-family:var(--f-display); font-size:1.06rem; font-weight:600; font-stretch:96%; line-height:1.25}
.section--dark .screen__ph strong{color:rgba(255,255,255,.9)}
.screen__cap{font-size:.95rem; color:var(--ink-2)}
.section--dark .screen__cap{color:rgba(255,255,255,.72)}
.screen__cap b{display:block; font-weight:600; color:var(--ink); margin-bottom:2px}
.section--dark .screen__cap b{color:#fff}
/* Uno solo, dentro de un artículo: no se estira a todo el ancho de lectura. */
.screens--uno{grid-template-columns:1fr; max-width:min(100%,720px)}
@media (max-width:860px){
  .screens{grid-template-columns:1fr; gap:24px}
}