/* ============================================================
   CAMPO & HACIENDA · Desarrollo Ganadero
   Sistema visual "Registro de hato": caliza, noche de campo y
   el verde de la marca. La caravana (arete) es el elemento firma.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Color */
  --ink:        #12140F;   /* noche de campo */
  --ink-2:      #1D211A;
  --ink-3:      #2B3026;
  --caliza:     #E9EAE2;   /* tierra seca, superficie base */
  --caliza-2:   #F4F5F0;
  --caliza-3:   #DCDED2;
  --verde:      #7FB03A;   /* verde de la marca */
  --verde-cl:   #A9D163;
  --verde-os:   #3F5A1C;
  --ladrillo:   #A8492E;   /* acento cálido, uso mínimo */
  /* Contrastes verificados contra caliza #E9EAE2: el gris anterior daba 4,25:1
     y WCAG AA pide 4,5:1 para texto normal. Un solo token corregía 11 fallas. */
  --gris:       #64685C;   /* 4,72:1 sobre caliza */
  --gris-cl:    #9AA093;   /* solo sobre fondo oscuro */
  --gris-dato:  #6E7267;   /* para las líneas de fuente sobre fondo claro */

  /* Tipografía */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texto:   "Archivo", "Segoe UI", system-ui, sans-serif;
  --dato:    "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  /* Escala */
  /* Mínimos más bajos: en un teléfono de 390px el titular ocupaba media pantalla */
  --t-xxl: clamp(2.15rem, 6.6vw, 5.4rem);
  --t-xl:  clamp(1.75rem, 4.2vw, 3.2rem);
  --t-l:   clamp(1.35rem, 2.4vw, 1.95rem);
  --t-m:   clamp(1.08rem, 1.5vw, 1.22rem);
  --t-s:   0.95rem;
  --t-xs:  0.78rem;

  /* Ritmo */
  --gap:   clamp(1.3rem, 2.6vw, 2.1rem);
  /* Aire de sección más contenido: con el valor anterior la portada sola ocupaba
     1,2 pantallas y la home entera 11. Un sitio corporativo se lee más denso. */
  --banda: clamp(3.2rem, 5.5vw, 5rem);
  --ancho: 1200px;
  --rail:  128px;          /* columna de caravanas */

  --borde: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  --sombra: 0 1px 2px rgba(18,20,15,.05), 0 12px 32px -18px rgba(18,20,15,.35);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
body{
  margin:0;
  background:var(--caliza);
  color:var(--ink);
  font-family:var(--texto);
  font-size:var(--t-m);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* height:auto es obligatorio: los atributos width/height del HTML cuentan como
   altura declarada y le ganan a aspect-ratio, y entonces la imagen se dibuja a
   su altura real en píxeles (una foto de 1055px de alto rompe toda la grilla).
   Las reglas que sí necesitan height:100% son más específicas y siguen ganando. */
img,svg{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:600; line-height:1.06; letter-spacing:-0.015em; }
h1{ font-size:var(--t-xxl); font-variation-settings:"SOFT" 20,"WONK" 1; }
h2{ font-size:var(--t-xl); }
h3{ font-size:var(--t-l); }
p{ margin:0 0 1.1em; max-width:66ch; }
ul{ margin:0 0 1.1em; padding-left:1.1em; }
li{ margin-bottom:.45em; }
strong{ font-weight:600; }
hr{ border:0; border-top:var(--borde); margin:var(--gap) 0; }

.contenedor{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }
.saltar{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:var(--caliza); padding:.7rem 1.1rem;
}
.saltar:focus{ left:.6rem; top:.6rem; }
:focus-visible{ outline:3px solid var(--verde); outline-offset:3px; border-radius:2px; }

/* ---------- 3. Caravana (elemento firma) ----------
   Cada sección, proyecto y dato lleva su arete, igual que
   cada animal del hato lleva el suyo. Es trazabilidad, no adorno. */
.caravana{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:.15rem; position:relative;
  min-width:84px; padding:1.35rem .7rem .7rem;
  background:var(--verde);
  color:var(--ink);
  border-radius:5px 5px 16px 16px;
  box-shadow:inset 0 -2px 0 rgba(18,20,15,.14);
  text-decoration:none;
}
.caravana::before{
  content:""; position:absolute; top:.5rem; left:50%; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%;
  background:var(--caliza); box-shadow:inset 0 1px 2px rgba(18,20,15,.4);
}
.caravana__num{
  font-family:var(--dato); font-size:1.32rem; font-weight:500;
  line-height:1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums;
}
.caravana__txt{
  font-family:var(--texto); font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; color:#1A2609;
  text-align:center; line-height:1.25;
}
.caravana--oscura{ background:var(--ink-2); color:var(--caliza); }
.caravana--oscura::before{ background:var(--ink); }
.caravana--oscura .caravana__txt{ color:var(--verde-cl); }

/* ---------- 4. Encabezado ---------- */
.sitio-cab{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--caliza) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:var(--borde);
}
.sitio-cab__fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem 0;
}
.marca{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
/* El logo ya es PNG con transparencia real: no hacen falta trucos de fusión */
.marca img{ height:clamp(38px,4.4vw,50px); width:auto; }
.nav{ display:flex; align-items:center; gap:.15rem; }
.nav a{
  font-size:.85rem; font-weight:500; letter-spacing:.01em;
  text-decoration:none; padding:.5rem .62rem; border-radius:4px;
  color:var(--ink-3); transition:color .18s ease, background-color .18s ease;
}
.nav a:hover{ color:var(--ink); background:var(--caliza-3); }
.nav a[aria-current="page"]{ color:var(--verde-os); font-weight:600; box-shadow:inset 0 -2px 0 var(--verde); border-radius:0; }
/* El CTA del menú es un botón: gana a las reglas de .nav a */
.nav a.btn{ margin-left:.5rem; padding:.62rem 1.1rem; }
.nav a.btn--ink,
.nav a.btn--ink[aria-current="page"]{ color:var(--caliza); background:var(--ink); box-shadow:none; border-radius:3px; }
.nav a.btn--ink:hover{ color:var(--caliza); background:var(--ink-3); }
.nav-abrir{
  display:none; background:none; border:var(--borde); border-radius:5px;
  padding:.5rem .6rem; cursor:pointer; color:var(--ink); font:inherit; font-size:.8rem;
}

/* Selector de idioma */
.idiomas{ display:flex; align-items:center; gap:.1rem; margin-left:.4rem; padding-left:.6rem; border-left:var(--borde); }
.idiomas a{
  font-family:var(--dato); font-size:.72rem; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; text-decoration:none; color:var(--gris);
  padding:.35rem .45rem; border-radius:3px; transition:color .18s, background-color .18s;
}
.idiomas a:hover{ color:var(--ink); background:var(--caliza-3); }
.idiomas a[aria-current="true"]{ color:var(--verde-os); font-weight:600; }
@media (max-width: 860px){
  .idiomas{ margin:1.6rem 0 0; padding:1.2rem 0 0; border-left:0; border-top:1px solid rgba(233,234,226,.14); justify-content:center; gap:.3rem; }
  .idiomas a{ font-size:.9rem; padding:.6rem .9rem; color:var(--caliza-2); }
  .idiomas a[aria-current="true"]{ color:var(--verde-cl); }
}

/* ---------- 5. Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--texto); font-size:.88rem; font-weight:600;
  letter-spacing:.02em; text-decoration:none; cursor:pointer;
  /* Altura fija: los botones de un mismo grupo tienen que medir igual */
  min-height:52px; padding:0 1.35rem; border-radius:3px; border:1.5px solid transparent;
  transition:transform .16s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.nav a.btn{ min-height:40px; }
@media (max-width: 560px){
  .portada__acciones .btn, .llamado__acciones .btn{ width:100%; }
}
.btn:active{ transform:translateY(1px); }
.btn--verde{ background:var(--verde); color:var(--ink); }
.btn--verde:hover{ background:var(--verde-cl); }
.btn--ink{ background:var(--ink); color:var(--caliza); }
.btn--ink:hover{ background:var(--ink-3); }
.btn--linea{ border-color:currentColor; }
.btn--linea:hover{ background:var(--ink); color:var(--caliza); border-color:var(--ink); }
.btn--claro{ background:var(--caliza); color:var(--ink); }
.btn--claro:hover{ background:#fff; }
.btn__flecha{ font-family:var(--dato); font-size:1rem; }

/* ---------- 6. Bandas y secciones ---------- */
.banda{ padding-block:var(--banda); }
.banda--oscura{ background:var(--ink); color:var(--caliza); }
.banda--oscura h2,.banda--oscura h3{ color:var(--caliza-2); }
/* Diez puntos de diferencia se leían como una costura mal renderizada, no como
   ritmo. Se amplía el contraste y se marca el borde de cada banda. */
.banda--clara{
  background:#F7F8F3;
  box-shadow:inset 0 1px 0 rgba(18,20,15,.07), inset 0 -1px 0 rgba(18,20,15,.07);
}
.banda--ajustada{ padding-block:calc(var(--banda) * .62); }

.seccion-cab{
  display:grid; grid-template-columns:var(--rail) 1fr; gap:var(--gap);
  align-items:start; margin-bottom:calc(var(--gap) * 1.5);
}
.seccion-cab__txt{ max-width:60ch; }
.eyebrow{
  font-family:var(--dato); font-size:var(--t-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:.18em; color:var(--verde-os);
  margin:0 0 .8rem;
}
.banda--oscura .eyebrow{ color:var(--verde-cl); }
.bajada{ font-size:1.05rem; color:#4A4E44; margin-top:1rem; }  /* 7:1 sobre caliza */
.banda--oscura .bajada{ color:var(--gris-cl); }

/* ---------- 7. Portada ---------- */
/* La portada entra en una pantalla: si el usuario tiene que scrollear para
   sospechar que hay más, el sitio se siente inacabado. */
.portada{
  position:relative; background:var(--ink); color:var(--caliza);
  overflow:hidden; padding-block:clamp(2.6rem,5vw,3.8rem) clamp(2rem,4vw,3rem);
  min-height:min(680px, 88vh); display:flex; align-items:center;
}
.portada__horizonte{
  position:absolute; inset:auto 0 0 0; width:100%; height:auto;
  opacity:.5; pointer-events:none;
}
/* Ojo: no poner width:100% acá — pisa el ancho con márgenes de .contenedor
   y en móvil el texto queda pegado al borde de la pantalla. */
.portada__cont{ position:relative; z-index:2; }
.portada__grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:end; }
/* Sobre fotografía oscura el verde oliva no se lee: va el verde claro */
.portada .eyebrow, .cab-pagina .eyebrow{ color:var(--verde-cl); }
.portada h1{ color:var(--caliza-2); text-wrap:balance; }
.portada h1 em{ font-style:normal; color:var(--verde-cl); }
.portada__bajada{ font-size:clamp(1.05rem,1.7vw,1.28rem); color:var(--gris-cl); max-width:48ch; margin-top:1.6rem; }
.portada__acciones{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; }

/* Caravanas colgadas: el hato del país, con sus cifras reales */
.tendedero{ display:flex; gap:1.1rem; justify-content:flex-end; align-items:flex-start; padding-top:1.5rem; }
.tendedero__lazo{ display:flex; flex-direction:column; align-items:center; transform-origin:top center; }
.tendedero__cable{ width:1px; height:clamp(28px,5vw,52px); background:linear-gradient(var(--gris-cl), var(--verde)); }
/* Las tres caravanas del hero, iguales entre sí: colgaban desparejas */
.tendedero__lazo{ flex:0 0 auto; }
.tendedero .caravana{ width:150px; min-height:78px; justify-content:center; }
.tendedero .caravana__num{ font-size:1.12rem; }
.tendedero .caravana__txt{ min-height:2.1em; display:flex; align-items:center; }
@media (prefers-reduced-motion: no-preference){
  .tendedero__lazo{ animation:colgar 5.5s ease-in-out infinite; }
  .tendedero__lazo:nth-child(2){ animation-delay:-1.8s; }
  .tendedero__lazo:nth-child(3){ animation-delay:-3.4s; }
}
@keyframes colgar{
  0%,100%{ transform:rotate(-2.2deg); }
  50%    { transform:rotate(2.2deg); }
}
.portada__pie{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; align-items:center;
  margin-top:clamp(2.5rem,6vw,4rem); padding-top:1.2rem;
  border-top:1px solid rgba(233,234,226,.16);
  font-family:var(--dato); font-size:var(--t-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--gris-cl);
}

/* ---------- 8. Ficha (grilla de registro) ---------- */
.fichas{ display:grid; gap:1px; background:color-mix(in srgb, var(--ink) 14%, transparent); border:var(--borde); }
.fichas--3{ grid-template-columns:repeat(3,1fr); }
.fichas--2{ grid-template-columns:repeat(2,1fr); }
.fichas.u-plano{ align-items:start; }
.ficha{
  background:var(--caliza-2); padding:clamp(1.5rem,3vw,2.3rem);
  display:flex; flex-direction:column; gap:.9rem;
  transition:background-color .2s ease;
}
.ficha:hover{ background:#fff; }
.banda--oscura .fichas{ background:rgba(233,234,226,.16); border-color:rgba(233,234,226,.16); }
.banda--oscura .ficha{ background:var(--ink-2); }
.banda--oscura .ficha:hover{ background:var(--ink-3); }
.ficha__cinta{
  font-family:var(--dato); font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--verde-os);
}
.banda--oscura .ficha__cinta{ color:var(--verde-cl); }
.ficha h3{ font-size:1.32rem; }
.ficha p{ margin:0; font-size:.98rem; color:var(--gris); }
.banda--oscura .ficha p{ color:var(--gris-cl); }
.ficha__link{
  margin-top:auto; padding-top:.4rem; font-size:.85rem; font-weight:600;
  text-decoration:none; color:var(--ink); border-bottom:1.5px solid var(--verde);
  align-self:flex-start; padding-bottom:.15rem;
}
.banda--oscura .ficha__link{ color:var(--caliza); }
.ficha__link:hover{ border-bottom-color:currentColor; }

/* ---------- 9. Cifras ---------- */
/* Filas compartidas: si un valor ocupa dos líneas, las etiquetas de las cuatro
   columnas siguen alineadas en vez de escalonarse. */
.cifras{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); align-items:start; }
.cifra{ display:grid; grid-template-rows:subgrid; grid-row:span 3; gap:0; }
@supports not (grid-template-rows: subgrid){
  .cifra{ display:block; }
  .cifra__valor{ min-height:2.1em; }
}
.cifra__valor{
  font-family:var(--display); font-size:clamp(2.1rem,4vw,3.1rem); font-weight:600;
  line-height:1; letter-spacing:-0.03em; font-variant-numeric:tabular-nums;
  color:var(--verde-os);
}
.banda--oscura .cifra__valor{ color:var(--verde-cl); }
.cifra__label{ font-size:.86rem; color:var(--gris); margin-top:.55rem; max-width:26ch; }
.banda--oscura .cifra__label{ color:var(--gris-cl); }
.cifra__fuente{ font-family:var(--dato); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-dato); margin-top:.4rem; }

/* ---------- 10. Registro (listas con rail de caravanas) ---------- */
.registro{ display:grid; gap:0; border-top:var(--borde); }
.registro__item{
  display:grid; grid-template-columns:var(--rail) 1fr auto; gap:var(--gap);
  align-items:start; padding-block:clamp(1.6rem,3vw,2.4rem);
  border-bottom:var(--borde);
}
.banda--oscura .registro,.banda--oscura .registro__item{ border-color:rgba(233,234,226,.18); }
.registro__cuerpo h3{ margin-bottom:.5rem; }
.registro__cuerpo p{ color:var(--gris); margin-bottom:0; }
.banda--oscura .registro__cuerpo p{ color:var(--gris-cl); }
.registro__meta{
  font-family:var(--dato); font-size:var(--t-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--gris); text-align:right; white-space:nowrap;
}

/* ---------- 10b. Fichas de proyecto ---------- */
.proyectos{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,2.5vw,2rem); }
.proyecto-ficha{
  border:var(--borde); background:var(--caliza-2);
  display:flex; flex-direction:column; overflow:hidden;
  transition:box-shadow .22s ease, transform .22s ease;
}
.proyecto-ficha:hover{ transform:translateY(-3px); box-shadow:var(--sombra); }
.proyecto-ficha__foto{ position:relative; }
.proyecto-ficha__foto img{ width:100%; height:clamp(190px,20vw,240px); object-fit:cover; display:block; }
.proyecto-ficha__estado{
  position:absolute; top:.9rem; right:.9rem;
  font-family:var(--dato); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.4rem .7rem; border-radius:2px; background:var(--ink); color:var(--caliza);
}
.proyecto-ficha__estado--abierto{ background:var(--verde); color:var(--ink); }
.proyecto-ficha__estado--apertura{ background:var(--verde-os); color:var(--caliza); }
.proyecto-ficha__cuerpo{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem;
  padding:clamp(1.3rem,2.6vw,1.9rem); align-items:start; flex:1;
}
.proyecto-ficha__cuerpo h3{ font-size:1.28rem; margin-bottom:.6rem; }
.proyecto-ficha__cuerpo > div > p{ color:var(--gris); font-size:.95rem; margin-bottom:1.1rem; }
.proyecto-ficha__datos{
  display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1.2rem;
  margin:0; padding-top:1rem; border-top:var(--borde);
}
.proyecto-ficha__datos dt{
  font-family:var(--dato); font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--verde-os); margin-bottom:.25rem;
}
.proyecto-ficha__datos dd{ margin:0; font-size:.92rem; font-weight:500; }
@media (max-width: 900px){ .proyectos{ grid-template-columns:1fr; } }
@media (max-width: 520px){
  .proyecto-ficha__cuerpo{ grid-template-columns:1fr; }
  .proyecto-ficha__datos{ grid-template-columns:1fr 1fr; }
}

/* ---------- 11. Notas / blog ---------- */
.notas{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
/* Cuando "Seguir leyendo" trae solo dos notas, no deja el hueco de la tercera */
.notas:has(> :last-child:nth-child(2)){ grid-template-columns:repeat(2,1fr); }
.nota{
  /* Filas fijas: los titulos de 2 y 3 lineas no desalinean las descripciones */
  display:grid; grid-template-rows:auto auto auto 1fr; gap:.8rem;
  background:var(--caliza-2); border:var(--borde); padding:clamp(1.4rem,2.6vw,2rem);
  text-decoration:none; color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.nota:hover{ transform:translateY(-3px); box-shadow:var(--sombra); }
.nota__fecha{ font-family:var(--dato); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--verde-os); }
.nota h3{ font-size:1.2rem; }
.nota p{ font-size:.94rem; color:var(--gris); margin:0; }

/* ---------- 12. Artículo ---------- */
.articulo{ display:grid; grid-template-columns:var(--rail) minmax(0,66ch) minmax(0,250px); gap:var(--gap); }

/* Columna lateral: evita los miles de píxeles de vacío a la derecha del texto */
.articulo__lateral{ position:sticky; top:96px; align-self:start; }
.articulo__caja{ border:var(--borde); background:var(--caliza-2); padding:1.3rem 1.4rem; }
.articulo__caja h3{
  font-family:var(--texto); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--verde-os);
  margin-bottom:1.1rem;
}
.articulo__caja dl{ margin:0; }
.articulo__caja dt{
  font-family:var(--display); font-size:1.45rem; font-weight:600;
  line-height:1.05; letter-spacing:-0.02em; font-variant-numeric:tabular-nums;
}
.articulo__caja dd{ margin:.3rem 0 1.2rem; font-size:.84rem; color:var(--gris); line-height:1.5; }
.articulo__caja dd:last-child{ margin-bottom:0; }
.articulo__caja ul{ margin:0; padding-left:1.1em; font-size:.88rem; color:var(--gris); }
.articulo__caja li{ margin-bottom:.6rem; }
.articulo__fuente{
  font-family:var(--dato); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gris-dato);
  margin:1rem 0 0; padding-top:.9rem; border-top:var(--borde);
}
@media (max-width: 1100px){
  .articulo{ grid-template-columns:var(--rail) minmax(0,74ch); }
  .articulo__lateral{ position:static; grid-column:2; }
}
@media (max-width: 660px){
  .articulo__lateral{ grid-column:1; }
}
.articulo__cuerpo h2{ font-size:1.75rem; margin-top:2.4rem; margin-bottom:.8rem; }
.articulo__cuerpo h3{ font-size:1.25rem; margin-top:1.8rem; margin-bottom:.6rem; }
.articulo__cuerpo p,.articulo__cuerpo li{ color:var(--ink-3); }
.articulo__cuerpo blockquote{
  margin:2rem 0; padding:.4rem 0 .4rem 1.6rem;
  border-left:3px solid var(--verde);
  font-family:var(--display); font-size:1.28rem; line-height:1.4; color:var(--ink);
}
.articulo__cuerpo blockquote p{ margin:0; }

/* ---------- 12b. Gráfico ---------- */
.grafico{ margin:2.4rem 0; }
.grafico__titulo{
  font-family:var(--display); font-size:1.15rem; font-weight:600;
  line-height:1.3; margin-bottom:1.1rem; color:var(--ink);
}
.grafico__svg{ width:100%; height:auto; display:block; }
.grafico__tabla{ margin-top:1.2rem; }
.grafico__tabla summary{
  cursor:pointer; font-family:var(--dato); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--verde-os);
  padding:.5rem 0;
}
.grafico__tabla summary:hover{ color:var(--ink); }
.grafico__tabla .tabla{ font-size:.88rem; min-width:420px; }
.grafico__nota{
  font-size:.84rem; color:var(--gris); margin:1rem 0 0;
  padding-top:.9rem; border-top:var(--borde); max-width:none;
}

/* ---------- 13. Formulario ---------- */
.form{ display:grid; gap:1.1rem; max-width:640px; }
.campo{ display:grid; gap:.4rem; }
.campo label{ font-size:.82rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); }
.campo input,.campo select,.campo textarea{
  font-family:var(--texto); font-size:1rem; color:var(--ink);
  background:var(--caliza-2); border:1.5px solid var(--caliza-3);
  border-radius:3px; padding:.8rem .9rem; width:100%;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:var(--verde); background:#fff; }
.campo textarea{ min-height:130px; resize:vertical; }
.campo--doble{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.campo__ayuda{ font-size:.8rem; color:var(--gris); }
.campo--check{ display:flex; gap:.7rem; align-items:flex-start; }
.campo--check input{ width:auto; margin-top:.25rem; }
.campo--check label{ text-transform:none; letter-spacing:0; font-weight:400; font-size:.88rem; color:var(--gris); }
/* Antes iba en monoespaciado a 12px y rompia el registro editorial del sitio */
.form__aviso{
  font-family:var(--texto); font-size:.94rem; line-height:1.6;
  max-width:64ch; color:var(--ink-3);
  padding:1rem 1.2rem; border-left:3px solid var(--verde); background:var(--caliza-2);
}
.banda--oscura .form__aviso{ background:var(--ink-2); color:var(--gris-cl); }

/* ---------- 13b. Solicitud a dos columnas ---------- */
.solicitud{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(1.6rem,3.5vw,3rem); align-items:start; }
.solicitud .form{ max-width:none; }
.solicitud__panel{
  background:var(--ink); color:var(--gris-cl);
  padding:clamp(1.5rem,3vw,2.2rem); position:sticky; top:96px;
}
.solicitud__panel h3{ color:var(--caliza-2); font-size:1.2rem; margin-bottom:1.2rem; }
.pasos{ list-style:none; padding:0; margin:0 0 1.4rem; counter-reset:paso; }
.pasos li{
  counter-increment:paso; position:relative;
  padding-left:2.4rem; margin-bottom:1rem; font-size:.93rem; line-height:1.55;
}
.pasos li::before{
  content:counter(paso); position:absolute; left:0; top:.05rem;
  width:1.6rem; height:1.6rem; border-radius:50%;
  background:var(--verde); color:var(--ink);
  font-family:var(--dato); font-size:.8rem; font-weight:500;
  display:flex; align-items:center; justify-content:center;
}
.pasos strong{ color:var(--caliza); }
.solicitud__nota{ font-size:.84rem; color:var(--gris); border-top:1px solid rgba(233,234,226,.16); padding-top:1.1rem; }
.solicitud__directo{ border-top:1px solid rgba(233,234,226,.16); padding-top:1.1rem; }
.solicitud__directo .dato__label{ color:var(--verde-cl); }
.solicitud__directo .dato__valor{ color:var(--caliza); font-size:.95rem; line-height:1.9; }
.solicitud__directo .dato__valor:hover{ color:var(--verde-cl); }
@media (max-width: 900px){
  .solicitud{ grid-template-columns:1fr; }
  .solicitud__panel{ position:static; }
}

/* ---------- 14. Datos de contacto ---------- */
.datos{ display:grid; gap:1.4rem; }
.dato__label{ font-family:var(--dato); font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--verde-os); }
.dato__valor{ font-size:1.08rem; text-decoration:none; }
.dato__valor:hover{ color:var(--verde-os); }

/* ---------- 15. Pie ---------- */
.sitio-pie{ background:var(--ink); color:var(--gris-cl); padding-block:clamp(3rem,6vw,4.5rem) 1.6rem; }
.sitio-pie__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--gap); }
.sitio-pie h4{ font-family:var(--texto); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--caliza); margin-bottom:1rem; }
.sitio-pie ul{ list-style:none; padding:0; margin:0; }
.sitio-pie li{ margin-bottom:.5rem; }
.sitio-pie li{ font-size:.92rem; }
.sitio-pie a{ text-decoration:none; font-size:.92rem; }
.sitio-pie a:hover{ color:var(--verde-cl); }
/* Versión clara del logo: se apoya directo sobre el fondo oscuro, sin placa */
.sitio-pie__marca img{ height:56px; width:auto; margin-bottom:1.1rem; }
.sitio-pie__legal{
  margin-top:clamp(2.4rem,5vw,3.5rem); padding-top:1.3rem;
  border-top:1px solid rgba(233,234,226,.14);
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between;
  font-family:var(--dato); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
}

/* ---------- 16. CTA final ---------- */
.llamado{ background:var(--verde); color:var(--ink); }
.llamado h2{ max-width:20ch; }
.llamado .bajada{ color:#1F2E0C; }
.llamado__grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--gap); align-items:end; }
.llamado__acciones{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:flex-end; }

/* ---------- 15a. Dos puertas de entrada ---------- */
.puertas-banda{ background:var(--caliza-2); }
.puertas{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:color-mix(in srgb, var(--ink) 14%, transparent); border:var(--borde); }
.puerta{
  background:var(--caliza-2); padding:clamp(1.8rem,4vw,3rem);
  display:flex; flex-direction:column; gap:.9rem;
  text-decoration:none; color:inherit; position:relative;
  transition:background-color .22s ease;
}
.puerta::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--verde); transform:scaleY(0); transform-origin:top;
  transition:transform .28s ease;
}
.puerta:hover{ background:#fff; }
.puerta:hover::after{ transform:scaleY(1); }
.puerta__cinta{
  font-family:var(--dato); font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--verde-os);
}
.puerta h2{ font-size:clamp(1.5rem,2.6vw,2rem); }
.puerta p{ color:var(--gris); margin:0; font-size:.98rem; }
.puerta__accion{
  margin-top:auto; padding-top:.6rem; font-size:.88rem; font-weight:600;
  color:var(--ink); align-self:flex-start;
  border-bottom:1.5px solid var(--verde); padding-bottom:.2rem;
}
@media (max-width: 760px){ .puertas{ grid-template-columns:1fr; } }

/* ---------- 15b. Tabla técnica ---------- */
.tabla-envoltorio{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tabla{ width:100%; border-collapse:collapse; font-size:.94rem; min-width:520px; }
.tabla caption{
  text-align:left; font-family:var(--dato); font-size:var(--t-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--gris);
  padding-bottom:.9rem;
}
.tabla th, .tabla td{ padding:.85rem 1rem; text-align:left; border-bottom:var(--borde); }
.tabla thead th{
  font-family:var(--texto); font-size:.76rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--verde-os);
  border-bottom:2px solid var(--verde);
}
.tabla tbody th{ font-weight:600; }
.tabla td{ font-variant-numeric:tabular-nums; }
.tabla tbody tr:hover{ background:var(--caliza-2); }
.banda--oscura .tabla th, .banda--oscura .tabla td{ border-bottom-color:rgba(233,234,226,.18); }
.banda--oscura .tabla thead th{ color:var(--verde-cl); }
.banda--oscura .tabla tbody tr:hover{ background:var(--ink-2); }

/* Fórmula técnica */
.formula{
  font-family:var(--dato); font-size:.9rem; line-height:1.6;
  background:var(--caliza-2); border-left:3px solid var(--verde);
  padding:.9rem 1.1rem; margin:0 0 .8rem; overflow-x:auto;
}
.banda--oscura .formula{ background:var(--ink-2); border-left-color:var(--verde-cl); }

/* ---------- 16a. Fotografía y video ---------- */

/* Fotografía de fondo en la portada, con un travelling muy lento.
   No hay video de ganadería paraguaya con licencia libre, así que antes que
   metraje genérico de otro país va foto real del país, con movimiento. */
.portada__foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .portada__foto{ animation:travelling 26s ease-in-out infinite alternate; }
}
@keyframes travelling{
  from{ transform:scale(1.02) translate3d(0,0,0); }
  to  { transform:scale(1.11) translate3d(-1.2%,-1%,0); }
}
.portada__velo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(18,20,15,.94) 0%, rgba(18,20,15,.86) 42%, rgba(18,20,15,.55) 72%, rgba(18,20,15,.72) 100%),
    linear-gradient(to top, rgba(18,20,15,.95) 0%, rgba(18,20,15,0) 45%);
}
@media (max-width: 860px){
  .portada__velo{ background:linear-gradient(to top, rgba(18,20,15,.97) 30%, rgba(18,20,15,.72) 100%); }
}

/* Cabecera de página interna, con fotografía de fondo */
.cab-pagina{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--caliza);
  padding-block:clamp(2.4rem,5vw,3.6rem);
  display:flex; align-items:center; min-height:clamp(240px,28vw,340px);
}
.cab-pagina__foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.cab-pagina__velo{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(18,20,15,.95) 0%, rgba(18,20,15,.88) 45%, rgba(18,20,15,.6) 100%),
    linear-gradient(to top, rgba(18,20,15,.9) 0%, rgba(18,20,15,0) 55%);
}
.cab-pagina__cont{ position:relative; z-index:2; }
.cab-pagina h1{ color:var(--caliza-2); text-wrap:balance; }
.cab-pagina .portada__bajada{ margin-top:1.4rem; }
@media (max-width: 860px){
  .cab-pagina__velo{ background:linear-gradient(to top, rgba(18,20,15,.96) 35%, rgba(18,20,15,.75) 100%); }
}

/* Figura: cualquier foto con su pie y crédito.
   REGLA DE ORO: ninguna imagen de contenido lleva height:100% sin que su
   contenedor tenga altura propia — si no, cae a auto y se dibuja a su altura
   real en píxeles, que es lo que rompía la grilla. Siempre aspect-ratio. */
.figura{ margin:0; position:relative; }
.figura img{
  width:100%; height:auto; aspect-ratio:4/3;
  object-fit:cover; display:block; background:var(--caliza-3);
}
.figura figcaption{
  margin-top:.7rem; font-family:var(--dato); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gris);
}
.banda--oscura .figura figcaption{ color:var(--gris-cl); }

/* Banda a dos columnas: foto grande + texto */
.duo{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.8rem,4vw,3.5rem); align-items:center; }
.duo--invertido .duo__foto{ order:2; }
.duo__foto{ position:relative; }
/* 16/10 en vez de 4/3: una foto de contenido no debe comerse media pantalla */
.duo__foto img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; max-height:360px; }
.duo__caravana{ position:absolute; left:-14px; bottom:18px; z-index:2; }
.duo__txt h2{ margin-bottom:1rem; }

/* Galería de proyecto */
.galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.galeria .figura img{ aspect-ratio:3/2; height:auto; max-height:190px; transition:transform .5s ease; }
.galeria .figura{ overflow:hidden; }
.galeria .figura:hover img{ transform:scale(1.04); }
.galeria--destacada{ grid-template-columns:2fr 1fr 1fr; grid-auto-rows:1fr; }
.galeria--destacada .figura:first-child{ grid-row:span 2; }
/* La destacada estira sin soltar la altura: el contenedor manda, no el archivo */
.galeria--destacada .figura:first-child{ display:block; height:100%; }
.galeria--destacada .figura:first-child img{ aspect-ratio:auto; height:100%; min-height:100%; }

/* Franja panorámica a sangre completa · es un respiro, no una sección entera.
   Aun así necesita altura: a 330px sobre 1440 de ancho recortaba el 74%. */
.panoramica{ position:relative; height:clamp(240px,30vw,430px); overflow:hidden; }
/* En una franja apaisada el recorte es inevitable, así que se elige qué queda:
   el encuadre baja al horizonte y la hacienda, no al cielo vacío. */
.panoramica img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
.panoramica__cita{
  position:absolute; inset:auto 0 0 0; padding:clamp(1.5rem,4vw,3rem) 0;
  background:linear-gradient(to top, rgba(18,20,15,.92), rgba(18,20,15,0));
  color:var(--caliza);
}
.panoramica__cita p{
  font-family:var(--display); font-size:clamp(1.3rem,2.6vw,2.1rem);
  line-height:1.2; max-width:24ch; margin:0; text-wrap:balance;
}

/* Foto de cabecera en las notas · altura fija para que la fila arranque pareja */
.nota__foto{ margin:calc(-1 * clamp(1.4rem,2.6vw,2rem)) calc(-1 * clamp(1.4rem,2.6vw,2rem)) .2rem; overflow:hidden; }
.nota__foto img{
  width:100%; height:clamp(180px,17vw,220px);
  object-fit:cover; display:block; transition:transform .5s ease;
}
.nota:hover .nota__foto img{ transform:scale(1.05); }

/* Foto dentro de una ficha */
.ficha__foto{ margin:calc(-1 * clamp(1.5rem,3vw,2.3rem)) calc(-1 * clamp(1.5rem,3vw,2.3rem)) .3rem; overflow:hidden; }
/* Altura fija, no aspect-ratio: garantiza que las fichas de una fila arranquen parejas */
/* Relación, no altura fija: con altura fija en una tarjeta ancha la foto queda
   en franja de 3:1 y se recorta el 55% del encuadre. 16:9 respeta la toma. */
.ficha__foto img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }

@media (max-width: 900px){
  .duo{ grid-template-columns:1fr; }
  .duo--invertido .duo__foto{ order:0; }
  .duo__caravana{ left:auto; right:14px; bottom:14px; }
  .galeria, .galeria--destacada{ grid-template-columns:1fr 1fr; }
  .galeria--destacada .figura:first-child{ grid-row:auto; grid-column:span 2; }
  .galeria--destacada .figura:first-child img{ aspect-ratio:16/9; min-height:0; }
}
@media (max-width: 560px){
  .galeria, .galeria--destacada{ grid-template-columns:1fr; }
  .galeria--destacada .figura:first-child{ grid-column:auto; }
}

/* En una columna angosta las fotos quedaban en 2:1 y les cortaban la cabeza a
   los animales. Se acercan a 3:2, que es la relación real de las tomas. */
@media (max-width: 860px){
  /* 64vw sobre el ancho útil de la tarjeta deja la foto en ~1,4:1, el punto
     medio entre el 4:3 y el 3:2 de las tomas: nadie queda decapitado. */
  .ficha__foto img,
  .nota__foto img,
  .proyecto-ficha__foto img{ height:clamp(210px,64vw,255px); }
  .galeria .figura img{ max-height:none; aspect-ratio:3/2; }
  .duo__foto img{ aspect-ratio:3/2; max-height:none; }
  .panoramica{ height:clamp(210px,58vw,260px); }
}

/* ---------- 15c. Calculadora ---------- */
.calc{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.6rem,3.5vw,3rem); align-items:start; }
.calc__panel{
  background:var(--caliza-2); border:var(--borde); padding:clamp(1.4rem,3vw,2.1rem);
  display:grid; gap:1.35rem; align-content:start;
}
.calc__panel h3{ font-size:1.25rem; margin:0; }

/* El control deslizante toma el verde de la marca, no el azul del navegador */
input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; padding:0; border:0; border-radius:99px;
  background:var(--caliza-3); cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--verde); border:3px solid var(--caliza-2);
  box-shadow:0 1px 4px rgba(18,20,15,.35); cursor:grab;
}
input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--verde); border:3px solid var(--caliza-2);
  box-shadow:0 1px 4px rgba(18,20,15,.35); cursor:grab;
}
input[type="range"]::-moz-range-track{ height:6px; border-radius:99px; background:var(--caliza-3); }
input[type="range"]:focus-visible{ outline:3px solid var(--verde); outline-offset:4px; }
.calc__salida{ background:var(--ink); color:var(--caliza); padding:clamp(1.4rem,3vw,2.1rem); }
.calc__salida h3{ color:var(--caliza-2); font-size:1.25rem; margin-bottom:1.2rem; }
.calc__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(233,234,226,.18); border:1px solid rgba(233,234,226,.18); }
.calc__dato{ background:var(--ink-2); padding:1.1rem 1.2rem; }
.calc__dato dt{
  font-family:var(--dato); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--verde-cl); margin-bottom:.45rem;
}
.calc__dato dd{
  margin:0; font-family:var(--display); font-size:clamp(1.45rem,2.6vw,1.95rem);
  font-weight:600; line-height:1.05; letter-spacing:-0.02em; font-variant-numeric:tabular-nums;
}
.calc__dato--ancho{ grid-column:1 / -1; }
.calc__dato small{ display:block; font-family:var(--texto); font-size:.76rem; font-weight:400; color:var(--gris-cl); margin-top:.4rem; letter-spacing:0; }
.calc__nota{ font-size:.85rem; color:var(--gris-cl); margin:1.2rem 0 0; }
.calc__nota strong{ color:var(--caliza); }
@media (max-width: 900px){
  .calc{ grid-template-columns:1fr; }
  .calc__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px){ .calc__grid{ grid-template-columns:1fr; } }

/* ---------- 15d. Preguntas frecuentes ---------- */
.faq{ border-top:var(--borde); counter-reset:faq; }
.faq__item{ border-bottom:var(--borde); counter-increment:faq; }
/* El rail izquierdo lleva el número de la pregunta, como en el resto del sitio */
.faq__item summary > span:first-child::before{
  content:counter(faq, decimal-leading-zero);
  font-family:var(--dato); font-size:1rem; font-weight:500;
  color:var(--verde-os); letter-spacing:.02em;
}
.banda--oscura .faq__item summary > span:first-child::before{ color:var(--verde-cl); }
.banda--oscura .faq{ border-top-color:rgba(233,234,226,.18); }
.banda--oscura .faq__item{ border-bottom-color:rgba(233,234,226,.18); }
.banda--oscura .faq__item summary{ color:var(--caliza-2); }
.banda--oscura .faq__item summary:hover{ color:var(--verde-cl); }
.banda--oscura .faq__cuerpo p,
.banda--oscura .faq__cuerpo ul{ color:var(--gris-cl); }
.banda--oscura .faq__signo{ color:var(--verde-cl); }
.faq__item summary{
  display:grid; grid-template-columns:var(--rail) 1fr auto; gap:var(--gap);
  align-items:center; padding-block:clamp(1.2rem,2.4vw,1.7rem);
  cursor:pointer; list-style:none; font-family:var(--display);
  font-size:clamp(1.08rem,1.7vw,1.3rem); font-weight:600; line-height:1.25;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--verde-os); }
.faq__signo{
  font-family:var(--dato); font-size:1.4rem; color:var(--verde-os);
  transition:transform .25s ease; justify-self:end;
}
.faq__item[open] .faq__signo{ transform:rotate(45deg); }
.faq__cuerpo{ padding:0 0 clamp(1.3rem,2.6vw,1.9rem) calc(var(--rail) + var(--gap)); }
.faq__cuerpo p, .faq__cuerpo ul{ max-width:68ch; }
.faq__cuerpo p{ color:var(--gris); margin-bottom:.9rem; }
.faq__cuerpo p:last-child{ margin-bottom:0; }
.faq__cuerpo ul{ color:var(--gris); }
@media (max-width: 660px){
  .faq__item summary{ grid-template-columns:1fr auto; gap:1rem; }
  .faq__cuerpo{ padding-left:0; }
}


/* ---------- 16e. Encuadre por foto ----------
   En recortes apaisados el sujeto (animal, jinete) no debe quedar cortado.
   object-position por foto define que parte se conserva. */
img[src*="py-arreo"]        { object-position:30% 55%; }   /* el jinete, a la izquierda */
img[src*="arreo-boiada"]    { object-position:50% 40%; }   /* las cabezas del hato */
img[src*="vaca-ternero"]    { object-position:50% 45%; }
img[src*="ternero-retrato"] { object-position:50% 35%; }   /* la cara del ternero */
img[src*="caravana-oreja"]  { object-position:50% 40%; }
img[src*="hato-rodeo"]      { object-position:50% 55%; }
img[src*="jinetes"]         { object-position:50% 45%; }
img[src*="molino-aguada"]   { object-position:50% 60%; }
img[src*="manga-sanidad"]   { object-position:50% 45%; }
img[src*="corral-venta"]    { object-position:50% 45%; }
img[src*="comedero"]        { object-position:50% 45%; }
img[src*="rodeo-alambrado"] { object-position:50% 50%; }
/* Texto de cuerpo alineado con la columna de contenido (tras el rail), para que
   la sangria no cambie entre secciones. */
.texto-rail{ margin-left:calc(var(--rail) + var(--gap)); }
@media (max-width: 660px){ .texto-rail{ margin-left:0; } }

/* La tabla con scroll horizontal en movil avisa con un degradado de corte */
.tabla-envoltorio{ position:relative; }
@media (max-width: 620px){
  .tabla-envoltorio::after{
    content:""; position:absolute; top:0; right:0; bottom:0; width:34px;
    background:linear-gradient(to right, rgba(244,245,240,0), var(--caliza-2));
    pointer-events:none;
  }
}
/* ---------- 16f. Compactación en móvil ----------
   Páginas con muchas fichas/registros (servicios, preguntas) se hacían largas.
   Menos aire vertical y encabezados de sección más juntos, solo en móvil. */
@media (max-width: 660px){
  :root{ --banda: clamp(2.4rem, 7vw, 3.4rem); }
  .registro__item{ padding-block:1.2rem; }
  .seccion-cab{ margin-bottom:1.4rem; }
  .ficha{ padding:1.2rem; }
  .fichas{ gap:1px; }
  .banda--ajustada{ padding-block:2rem; }
  .cifra__valor{ margin-bottom:.2rem; }
  .faq__item summary{ padding-block:1rem; }
}
/* ---------- 16b. WhatsApp flotante ---------- */
.wa-flotante{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:120;
  /* En movil se sube para no montarse sobre los botones de accion */
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.15rem; border-radius:999px;
  background:#25D366; color:#06301A; text-decoration:none;
  font-family:var(--texto); font-size:.9rem; font-weight:600; letter-spacing:.01em;
  box-shadow:0 6px 24px -6px rgba(18,20,15,.5), 0 2px 6px rgba(18,20,15,.2);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.wa-flotante:hover{ background:#1FBE59; transform:translateY(-2px); box-shadow:0 10px 28px -6px rgba(18,20,15,.55); }
.wa-flotante:active{ transform:translateY(0); }
.wa-flotante svg{ flex-shrink:0; }
@media (max-width: 860px){
  .wa-flotante{ padding:.85rem; bottom:calc(1rem + env(safe-area-inset-bottom)); }
  .wa-flotante span{ display:none; }
}
/* Espacio al pie de pagina para que el boton nunca tape el ultimo contenido */
@media (max-width: 860px){ .sitio-pie{ padding-bottom:5.5rem; } }

/* ---------- 16c. Utilidades ----------
   Reemplazan a los atributos style= en línea. Sin ellos hace falta
   'unsafe-inline' en la política de seguridad, y eso debilita la CSP. */
.u-a18{ max-width:18ch; } .u-a20{ max-width:20ch; } .u-a22{ max-width:22ch; }
.u-a24{ max-width:24ch; } .u-a66{ max-width:66ch; } .u-a70{ max-width:70ch; }
.u-a74{ max-width:74ch; }

.u-mt-xs{ margin-top:.4rem; }  .u-mt-s{ margin-top:.7rem; }
.u-mt-m{ margin-top:1.2rem; }  .u-mt-l{ margin-top:1.6rem; }
.u-mt-xl{ margin-top:2rem; }   .u-mt-xxl{ margin-top:2.5rem; }
.u-mt-gap{ margin-top:var(--gap); }
.u-mt-gap-l{ margin-top:calc(var(--gap) * 1.6); }
.u-mb-s{ margin-bottom:1rem; } .u-mb-m{ margin-bottom:1.4rem; }
.u-m0{ margin:0; }

.u-verde{ color:var(--verde-os); }
.u-claro{ color:var(--caliza); }
.u-gris{ color:var(--gris); }
.u-gris-cl{ color:var(--gris-cl); }
.banda--oscura .u-verde{ color:var(--verde-cl); }

.u-t092{ font-size:.92rem; } .u-t095{ font-size:.95rem; } .u-t16{ font-size:1.6rem; }

.u-borde{ border:var(--borde); }
.u-sep-top{ border-top:var(--borde); margin-top:auto; }
.u-full{ grid-column:1 / -1; }
.u-plano{ border:0; background:transparent; gap:var(--gap); }
.u-pie-limpio{ margin-top:0; border-top:0; padding-top:0; }

/* ---------- 16d. Pisos de legibilidad en móvil ----------
   Había etiquetas a 8,8px y texto de pie a 10,5px: por debajo del mínimo. */
@media (max-width: 860px){
  .caravana__txt{ font-size:.68rem; }
  .cifra__fuente, .articulo__fuente, .figura figcaption,
  .grafico__nota, .campo__ayuda{ font-size:.8rem; }
  .sitio-pie li, .sitio-pie a{ font-size:.95rem; }
  .sitio-pie__legal{ font-size:.72rem; }
  .ficha__cinta, .nota__fecha, .puerta__cinta{ font-size:.72rem; }
  /* Áreas táctiles de 44px */
  .sitio-pie a, .ficha__link, .nota, .dato__valor{ display:inline-block; min-height:44px; }
  .sitio-pie a{ padding-block:.55rem; }
  .ficha__link{ padding-block:.7rem; }
  .nav-abrir{ min-height:44px; min-width:60px; }
}

/* ---------- 17. Aparición en scroll ---------- */
/* El contenido es visible por defecto. Solo se oculta para animarlo cuando
   hay JS confirmado (la clase .js la pone main.js al arrancar). Así, si el
   script falla, si se imprime o si un buscador renderiza sin ejecutar JS,
   no quedan bandas en blanco. */
@media (prefers-reduced-motion: no-preference){
  .js .revela{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
  .js .revela.visible{ opacity:1; transform:none; }
}
@media print{ .revela{ opacity:1 !important; transform:none !important; } }

/* ---------- 18. Responsive ---------- */
@media (max-width: 1000px){
  :root{ --rail:96px; }
  .portada__grid{ grid-template-columns:1fr; align-items:start; }
  .tendedero{ justify-content:flex-start; padding-top:2.5rem; }
  .fichas--3{ grid-template-columns:repeat(2,1fr); }
  .cifras{ grid-template-columns:repeat(2,1fr); }
  .notas{ grid-template-columns:repeat(2,1fr); }
  .sitio-pie__grid{ grid-template-columns:1fr 1fr; }
  .llamado__grid{ grid-template-columns:1fr; }
  .llamado__acciones{ justify-content:flex-start; }
}
@media (max-width: 860px){
  .nav-abrir{ display:block; position:relative; z-index:160; }

  /* El menú va como panel a pantalla completa. OJO: la cabecera tiene
     backdrop-filter, que crea un bloque contenedor para los position:fixed
     descendientes — por eso al abrirse hay que anular ese filtro, si no el
     menú queda atrapado dentro de los 66px de la cabecera. */
  html.menu-abierto .sitio-cab{ backdrop-filter:none; background:transparent; border-bottom:0; }
  html.menu-abierto, html.menu-abierto body{ overflow:hidden; }
  /* Con el panel oscuro detrás, el botón Cerrar y el logo pasan a color claro */
  html.menu-abierto .nav-abrir{ color:var(--caliza); border-color:rgba(233,234,226,.4); }
  html.menu-abierto .marca img{ filter:brightness(0) invert(1); opacity:.85; }
  /* El WhatsApp flotante no debe quedar encima del menú */
  html.menu-abierto .wa-flotante{ display:none; }

  .nav{
    display:none; position:fixed; inset:0;
    flex-direction:column; align-items:stretch; justify-content:center; gap:.15rem;
    background:var(--ink); padding:5rem 1.6rem 2rem; z-index:150;
    overflow-y:auto;
  }
  .nav.abierta{ display:flex; }
  .nav a{
    color:var(--caliza-2); font-size:1.15rem; font-weight:500;
    padding:1rem .4rem; border-radius:0;
    border-bottom:1px solid rgba(233,234,226,.14);
    text-align:left;
  }
  .nav a:hover, .nav a:focus-visible{ color:var(--verde-cl); background:var(--ink-2); }
  .nav a[aria-current="page"]{ color:var(--verde-cl); box-shadow:inset 4px 0 0 var(--verde); padding-left:.9rem; }
  .nav a.btn, .nav a.btn--ink{
    background:var(--verde); color:var(--ink); margin-top:1.3rem;
    border-bottom:0; border-radius:3px; text-align:center; min-height:52px;
  }
}
@media (max-width: 860px){
  /* En móvil la portada crece con su contenido: con altura mínima fija y
     centrado vertical, el titular se cortaba por arriba. */
  .portada{ min-height:0; display:block; padding-block:0 clamp(2rem,6vw,2.6rem); }

  /* La foto deja de ser fondo a pantalla completa. En vertical, una imagen
     apaisada recortada a una columna angosta perdía el 75% del encuadre: el
     jinete y el hato desaparecían. Ahora va como banda superior, casi entera,
     y el texto debajo sobre el color sólido. */
  .portada__foto, .cab-pagina__foto{
    position:relative; inset:auto;
    /* 68vw ≈ 3:2, que es la proporción real de las tomas: así el recorte
       es mínimo y se ve el encuadre completo. */
    width:100%; height:clamp(230px,68vw,320px);
    animation:none;
  }
  .portada__velo, .cab-pagina__velo{
    top:0; bottom:auto; height:clamp(230px,68vw,320px);
    background:linear-gradient(to top, var(--ink) 3%, rgba(18,20,15,.10) 65%);
  }
  .portada__cont, .cab-pagina__cont{ padding-top:1.7rem; }
  .cab-pagina{ display:block; min-height:0; padding-block:0 clamp(2rem,6vw,2.6rem); }

  .portada__bajada{ font-size:1rem; }
  /* El copete de dos líneas se veía grande y separado del titular */
  .portada .eyebrow, .cab-pagina .eyebrow{ font-size:.62rem; letter-spacing:.09em; line-height:1.4; margin-bottom:.5rem; }
  .portada__cont{ padding-top:1.4rem; }
  .tendedero{ padding-top:1.6rem; gap:.6rem; }
  .tendedero .caravana{ width:auto; min-width:0; flex:1 1 30%; padding-inline:.4rem; }
  .tendedero .caravana__num{ font-size:.95rem; }
  .tendedero .caravana__txt{ font-size:.55rem; }
}
/* A 320px con zoom del navegador, "USD 1.080,8 M" no entraba en su columna y
   provocaba desborde horizontal (WCAG 1.4.10). Una sola columna lo resuelve. */
@media (max-width: 420px){
  .cifras{ grid-template-columns:1fr; }
  .cifra__valor{ font-size:clamp(1.7rem,7vw,2.4rem); }
  .calc__grid{ grid-template-columns:1fr; }
}
@media (max-width: 660px){
  :root{ --rail:74px; }
  /* Sin justify-self la caravana se estira a todo el ancho de la columna */
  .seccion-cab{ grid-template-columns:1fr; gap:1rem; }
  .seccion-cab > .caravana{ justify-self:start; }
  .duo__caravana{ position:static; margin-top:-28px; margin-left:14px; }
  .registro__item{ grid-template-columns:var(--rail) 1fr; }
  .registro__meta{ grid-column:2; text-align:left; }
  .fichas--3,.fichas--2{ grid-template-columns:1fr; }
  .cifras{ grid-template-columns:1fr 1fr; }
  .notas{ grid-template-columns:1fr; }
  .articulo{ grid-template-columns:1fr; }
  .campo--doble{ grid-template-columns:1fr; }
  .sitio-pie__grid{ grid-template-columns:1fr; }
  .tendedero{ flex-wrap:wrap; gap:.7rem; }
  .marca img{ height:38px; }
}