/* =============================================================================
   C.R.O.P. — landing
   Un solo archivo. Todos los colores viven en :root; abajo no hay ningún hex
   suelto. Los contrastes están medidos (WCAG 2.1, sRGB) y anotados al lado del
   par que los produce, no estimados.

   Diseñada para escritorio y plegada hacia el teléfono: las composiciones de
   varias columnas son la forma principal, y las consultas de ancho mínimo las
   van juntando en una sola columna.
   ========================================================================== */

:root{

  /* --- Marca. Los cuatro colores de la ficha, sin retocar ---------------- */
  --verde:        #1A6C4A;   /* Cosecha & Crecimiento — 6,15:1 sobre --bg    */
  --azul:         #154D7E;   /* Órbita & Datos        — 8,45:1 sobre --bg    */
  --ambar:        #F9BC3C;   /* Predicción & Alerta                          */
  --bg:           #F9FBFC;   /* Fondo & Claridad                             */
  --bg-velo:      rgba(249,251,252,.86);  /* el mismo fondo, translúcido, para
                                la barra ya scrolleada                        */

  /* El ámbar de marca como TINTA SOBRE CLARO da 1,65:1: ilegible, y no se usa
     así en ningún lado. Tiene dos empleos legítimos, los dos medidos:
       · relleno pleno con --tinta encima        → 9,69:1
       · tinta SOBRE EL NAVY del panel           → 8,14:1
     Para ámbar escrito sobre claro está --ambar-tinta.                      */
  --ambar-tinta:  #8A5A00;   /* 5,71:1 sobre --bg · 5,38:1 sobre --est-ambar */

  /* --- Familia oscura, sólo para el panel con gráfico -------------------- */
  --navy:         #112D4E;
  --navy-card:    #16355A;
  --navy-linea:   #24476F;   /* grillas y filetes de 1 px (decorativo)       */
  --dato:         #5AB7F0;   /* 6,27:1 sobre --navy · 5,60:1 sobre card      */
  --dato-bien:    #3FBF87;   /* 5,97:1 sobre --navy — no lo usa esta página  */
  --dato-mal:     #FF8A7A;   /* 6,08:1 sobre --navy — no lo usa esta página  */
  --navy-texto:   #FFFFFF;   /* 13,91:1 sobre --navy                         */
  --navy-suave:   #A8C2DC;   /* par medido acá: 7,56:1 sobre --navy,
                                6,75:1 sobre --navy-card                     */
  /* El azul de marca sobre --navy da 1,59:1: invisible. El dato sobre oscuro
     es --dato. Un tema oscuro no es invertir los colores.                   */

  /* --- Texto y neutrales ------------------------------------------------ */
  --tinta:        #10202E;   /* 15,96:1 sobre --bg · 16,56:1 sobre blanco    */
  --tinta-2:      #51697A;   /* 5,54:1 sobre --bg · 5,20:1 sobre --banda-v   */
  --tinta-3:      #5F7280;   /* 4,81:1 sobre --bg. SÓLO sobre claro puro:
                                sobre una banda teñida se acerca al límite,
                                así que ahí va --tinta-2.                    */
  --blanco:       #FFFFFF;
  --borde:        #E3E9ED;
  --borde-fuerte: #C7D2D9;

  /* --- Fondos de estado, para etiquetas y llamadas ----------------------- */
  --est-verde:    #E7F3ED;   /* con --verde        → 5,61:1                  */
  --est-ambar:    #FEF3DC;   /* con --ambar-tinta  → 5,38:1                  */
  --est-azul:     #E7EFF6;   /* con --azul         → 7,55:1                  */

  /* --- Bandas de sección, medidas ---------------------------------------- */
  --banda-verde:  #DDEBE3;   /* el verde más fuerte donde los cinco colores de
                                texto siguen pasando AA: --tinta 13,46:1,
                                --tinta-2 4,67:1, --verde 5,19:1, --azul 7,13:1
                                y --ambar-tinta 4,82:1. Un paso más y --tinta-2
                                se cae a 4,48:1.                              */
  --tierra:       #CFE4D7;   /* el horizonte del pie. Es decorativo, no lleva
                                texto encima, así que puede ser más verde.    */
  --banda-ambar:  #FBF4E4;   /* --tinta 15,11:1 · --tinta-2 5,25:1           */

  /* --- Contorno de doble línea (casing). La firma gráfica de la página.
         Halo oscuro de 6 px con núcleo blanco de 2,6 px encima: la técnica de
         las cartas topográficas, medida en 4,69:1 sobre el peor fondo
         satelital de los cinco que se probaron. ---------------------------- */
  --casing-halo:  #0C1B2C;   /* 16,74:1 sobre --bg                           */
  --casing-core:  #FFFFFF;
  --casing-w:     6px;
  --casing-core-w:2.6px;

  /* --- Terreno esquemático. Plano y desaturado a propósito: tiene que
         leerse como dibujo, nunca como una captura. ------------------------ */
  --terr-0:       #CFDCC9;
  --terr-1:       #B7CCB0;
  --terr-2:       #A2BD9B;
  --terr-3:       #CCC0A7;
  --terr-camino:  #B9A483;

  /* --- Tipografía. Archivo, de Omnibus-Type (Buenos Aires). Una sola
         familia con dos ejes: el peso carga la jerarquía y el ancho separa
         la voz de display de la voz de texto. ------------------------------ */
  --fam:          "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho-display:114%;      /* Archivo Expanded, para títulos               */

  /* Escala del proyecto (13 · 15 · 17 · 21 · 26) más dos escalones de display */
  --t1: 13px;
  --t2: 15px;
  --t3: 17px;
  --t4: 21px;
  --t5: 26px;
  --t6: clamp(29px, 3.2vw, 44px);
  --t7: clamp(36px, 4.2vw, 58px);

  --shell: 1280px;
  --gut:   clamp(20px, 4vw, 56px);
  --sec:   clamp(68px, 8vw, 132px);
}

/* =============================================================================
   Base
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--tinta);
  font-family:var(--fam);
  font-size:var(--t3);
  line-height:1.6;
  /* Archivo trae tnum, pero el default es pnum: hay que encenderlo. La página
     está llena de cifras y de columnas, y sin tabulares bailan.             */
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; line-height:1.08; font-weight:700; }
p,ul,ol,dl,dd,figure,figcaption{ margin:0; }
ul,ol{ padding:0; list-style:none; }
b{ font-weight:600; }
img{ max-width:100%; height:auto; }
svg{ display:block; max-width:100%; }

a{ color:var(--azul); text-underline-offset:3px; }
a:hover{ color:var(--tinta); }

:focus-visible{ outline:3px solid var(--azul); outline-offset:3px; border-radius:2px; }
.panel :focus-visible{ outline-color:var(--dato); }

.skip{
  position:absolute; left:var(--gut); top:-100px; z-index:40;
  background:var(--azul); color:var(--blanco);   /* 8,77:1 */
  padding:12px 20px; border-radius:4px;
  font-size:var(--t2); font-weight:600; text-decoration:none;
}
.skip:focus{ top:12px; color:var(--blanco); }

.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto; padding-inline:var(--gut);
}

/* Títulos: Archivo Expanded. El ancho es lo que separa la voz de display de
   la de texto, sin traer una segunda familia que pelee con ésta. */
.hero__title,.sec__title,.panel__title,.cifra__n,.brand__word{
  font-stretch:var(--ancho-display);
  letter-spacing:-0.022em;
}

/* =============================================================================
   Barra superior
   ========================================================================== */

/* El estado por defecto es el seguro —velo translúcido, filete y sombra—, así
   que si el JS no corre la barra igual se despega del contenido que le pasa
   por abajo. Recién cuando el JS confirma que estamos al tope se la deja lisa,
   para que nada corte el dibujo del hero. */
.topbar{
  position:sticky; top:0; z-index:30;
  background:var(--bg-velo);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--borde);
  box-shadow:0 1px 10px rgb(16 32 46 / .05);
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.topbar.esta-en-el-tope{
  background:var(--bg);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom-color:transparent;
  box-shadow:none;
}

.topbar__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,2.4vw,40px);
  padding-block:clamp(13px,1.5vw,19px);
}

.brand{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--azul); flex:0 0 auto;
}
.brand__icon{ display:block; width:clamp(38px,3.2vw,46px); height:auto; }
.brand__word{ font-size:var(--t4); font-weight:800; }
.brand:hover .brand__word{ color:var(--tinta); }

/* En pantallas chicas la nav corre en horizontal en vez de partirse en dos
   filas: así la barra no se come el 21 % de la pantalla del teléfono. */
.topnav{
  display:flex; gap:clamp(14px,1.7vw,30px);
  min-width:0; overflow-x:auto; overscroll-behavior-inline:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-block:2px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent);
          mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent);
}
.topnav::-webkit-scrollbar{ display:none; }
@media (min-width:900px){
  .topnav{ overflow:visible; -webkit-mask-image:none; mask-image:none; }
}

.topnav a{
  position:relative; white-space:nowrap; flex:0 0 auto;
  color:var(--tinta-2);            /* 5,54:1 */
  font-size:var(--t2); font-weight:500; text-decoration:none;
  padding-block:6px;
}
/* el subrayado crece desde el centro, y se queda puesto en la sección actual */
.topnav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:2px; background:var(--verde);
  transform:scaleX(0); transform-origin:center;
  transition:transform .18s ease;
}
.topnav a:hover{ color:var(--tinta); }
.topnav a:hover::after{ transform:scaleX(1); }
.topnav a.es-actual{ color:var(--tinta); font-weight:600; }
.topnav a.es-actual::after{ transform:scaleX(1); }

/* con barra fija, los anchors tienen que frenar más abajo para no quedar
   tapados: alto de la barra más un respiro */
:target,
#inicio,#tiempos,#como,#medicion,#fuentes,#equipo{ scroll-margin-top:96px; }

/* =============================================================================
   Hero — a dos columnas, con el campo sangrando hasta el borde de la ventana
   ========================================================================== */

.hero{ display:grid; grid-template-columns:1fr; }

.hero__text{
  padding-inline:var(--gut);
  padding-block:clamp(44px,6vw,80px) clamp(36px,4vw,56px);
}
.hero__title{
  font-size:var(--t7); font-weight:800;
  letter-spacing:-0.03em; text-wrap:balance;
  max-width:16ch;
}
.hero__lede{
  margin-top:clamp(20px,2vw,28px);
  font-size:var(--t4); line-height:1.5;
  color:var(--tinta-2);            /* 5,54:1 */
  max-width:42ch;
}
.hero__claim{
  margin-top:20px; padding-left:16px;
  border-left:4px solid var(--verde);
  font-size:var(--t4); font-weight:600;
  color:var(--tinta);              /* 15,96:1 */
  max-width:36ch;
}

.hero__chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:clamp(26px,3vw,38px); }
.chip{
  font-size:var(--t1); font-weight:600;
  padding:7px 13px; border-radius:100px;
}
.chip--azul { background:var(--est-azul);  color:var(--azul);        } /* 7,55:1 */
.chip--ambar{ background:var(--est-ambar); color:var(--ambar-tinta); } /* 5,38:1 */
.chip--verde{ background:var(--est-verde); color:var(--verde);       } /* 5,61:1 */

.hero__fig{ position:relative; aspect-ratio:1 / 1; }

/* El borde de arriba del dibujo se disuelve en el fondo en vez de cortarse
   contra la barra a 90°. El velo es opaco donde apoya la barra, así el
   contraste de la nav sigue siendo exactamente el medido. */
.hero__fig::after{
  content:""; position:absolute; inset:0 0 auto 0; height:clamp(60px,9vw,104px);
  background:linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
  pointer-events:none; z-index:2;
}
.campo{ position:absolute; inset:0; width:100%; height:100%; }

@media (min-width:1000px){
  .hero{
    grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    align-items:stretch;
    min-height:min(86vh,880px);
  }
  .hero__text{
    display:flex; flex-direction:column; justify-content:center;
    padding-block:clamp(56px,5vw,88px);
    padding-left:max(var(--gut), calc((100vw - var(--shell)) / 2 + var(--gut)));
    padding-right:clamp(40px,4.4vw,88px);
  }
  .hero__fig{ aspect-ratio:auto; min-height:0; }
}

/* --- el dibujo del campo --- */
.grilla path{ fill:none; stroke:var(--blanco); stroke-width:1; opacity:.34; }
.pix{ fill:var(--blanco); fill-opacity:.40; stroke:var(--blanco); stroke-width:2; }
.cota{ fill:none; stroke:var(--casing-halo); stroke-width:2; }
.cota__t{
  fill:var(--casing-halo); font-family:inherit; font-weight:700;
  font-size:22px;   /* 22 u. de viewBox ≈ 19 px en escritorio */
}

/* La órbita del isotipo, pasando por detrás del lote. */
.orbita{
  fill:none; stroke:var(--azul); stroke-width:7.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.sat{ fill:var(--azul); stroke:var(--azul); }
.destello{ fill:var(--azul); opacity:.9; }

@media (max-width:759px){
  .pix,.cota,.cota__t{ display:none; }
}

.contorno__halo{
  fill:none; stroke:var(--casing-halo); stroke-width:var(--casing-w);
  stroke-linejoin:round; stroke-linecap:round;
}
.contorno__nucleo{
  fill:none; stroke:var(--casing-core); stroke-width:var(--casing-core-w);
  stroke-linejoin:round; stroke-linecap:round;
}

/* El único momento animado de la página: el lote se traza una vez al cargar.
   El estado por defecto es el lote YA dibujado; la animación se enciende
   encima sólo si nadie pidió menos movimiento. Si no corre, el contorno igual
   está ahí. */
@media (prefers-reduced-motion:no-preference){
  .contorno__halo,.contorno__nucleo{
    stroke-dasharray:100; stroke-dashoffset:100;
    animation:trazar 1.8s cubic-bezier(.62,.03,.32,1) .3s forwards;
  }
  .orbita{
    stroke-dasharray:100; stroke-dashoffset:100;
    animation:trazar 2.1s cubic-bezier(.5,0,.25,1) forwards;
  }
}
@keyframes trazar{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; } }

/* =============================================================================
   Encabezados de sección
   ========================================================================== */

.tiempos,.como,.fuentes,.usos,.equipo{ padding-block:var(--sec); }

.sec{ max-width:58ch; margin-bottom:clamp(40px,4.4vw,64px); }
.sec__title{ font-size:var(--t6); font-weight:700; text-wrap:balance; }
.sec__sub{
  margin-top:18px; font-size:var(--t4); line-height:1.5;
  color:var(--tinta-2);            /* 5,54:1 sobre --bg · 5,75:1 sobre blanco */
}

/* En pantalla ancha el encabezado se abre a dos columnas: el título a la
   izquierda y la bajada a la derecha, apoyados sobre la misma línea de base.
   Si no, el título vive en el 40 % izquierdo y deja media pantalla vacía. */
@media (min-width:900px){
  .sec{
    max-width:none;
    display:grid; align-items:end;
    grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
    gap:clamp(32px,4.4vw,88px);
  }
  .sec__title{ max-width:18ch; }
  .sec__sub{ margin-top:0; padding-bottom:7px; max-width:46ch; }
}

/* El casing otra vez, como subrayado del título de la sección que sostiene
   todo lo demás. Mismo gesto, mismo espesor, distinto lugar. */
.sec--casing .sec__title{ position:relative; padding-bottom:18px; }
.sec--casing .sec__title::before,
.sec--casing .sec__title::after{
  content:""; position:absolute; left:0; width:min(230px,54%); border-radius:3px;
}
.sec--casing .sec__title::before{ bottom:0; height:var(--casing-w); background:var(--casing-halo); }
.sec--casing .sec__title::after{
  bottom:calc((var(--casing-w) - var(--casing-core-w)) / 2);
  height:var(--casing-core-w); background:var(--casing-core);
}

/* =============================================================================
   Los tres tiempos — sobre el eje de la campaña, cada uno con su color
   ========================================================================== */

.tiempos{ background:var(--banda-verde); }

.tt{ display:grid; gap:clamp(34px,3.4vw,44px); grid-template-columns:1fr; }
@media (min-width:860px){ .tt{ grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,48px); } }

.tt__it{ padding-top:30px; border-top:3px solid var(--borde-fuerte); }
.tt__n{
  display:grid; place-items:center;
  width:50px; height:50px; margin-top:-55px; margin-bottom:20px;
  border:4px solid var(--banda-verde); border-radius:50%;
  font-size:var(--t4); font-weight:800; line-height:1;
}
.tt__it--azul  { border-top-color:var(--azul);  }
.tt__it--ambar { border-top-color:var(--ambar); }
.tt__it--verde { border-top-color:var(--verde); }
.tt__it--azul  .tt__n{ background:var(--azul);  color:var(--blanco); } /* 8,77:1 */
.tt__it--ambar .tt__n{ background:var(--ambar); color:var(--tinta);  } /* 9,69:1 */
.tt__it--verde .tt__n{ background:var(--verde); color:var(--blanco); } /* 6,39:1 */

.tt__t{ font-size:var(--t5); font-weight:700; }
.tt__p{ margin-top:13px; color:var(--tinta-2); max-width:36ch; }  /* 4,67:1 sobre --banda-verde */
.tt__w{ margin-top:13px; font-size:var(--t2); color:var(--tinta-2); } /* 4,67:1 sobre --banda-verde */

/* =============================================================================
   Cómo funciona — cuatro pasos con su dibujo
   ========================================================================== */

.pasos{ display:grid; gap:clamp(34px,3.2vw,40px); grid-template-columns:1fr; }
@media (min-width:700px){ .pasos{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1150px){ .pasos{ grid-template-columns:repeat(4,1fr); gap:clamp(24px,2.4vw,36px); } }

.paso{ border-top:2px solid var(--verde); padding-top:26px; }
.paso__ico{ width:80px; height:80px; margin-bottom:20px; }
.paso__n{
  display:block; font-size:var(--t2); font-weight:800;
  color:var(--verde);              /* 6,15:1 */
  letter-spacing:.06em; margin-bottom:8px;
}
.paso__t{ font-size:var(--t4); font-weight:700; text-wrap:balance; }
.paso__p{ margin-top:12px; color:var(--tinta-2); }   /* 5,54:1 */

/* los dibujos, con el mismo vocabulario que el mapa */
.i-halo{ fill:none; stroke:var(--casing-halo); stroke-width:7; stroke-linejoin:round; }
.i-core{ fill:none; stroke:var(--casing-core); stroke-width:3; stroke-linejoin:round; }
.i-nodo{ fill:var(--verde); stroke:var(--blanco); stroke-width:2.5; }
.i-grilla path{ fill:none; stroke:var(--borde-fuerte); stroke-width:2.5; }
.i-linea{ fill:none; stroke:var(--azul); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.i-sat{ fill:var(--azul); stroke:var(--azul); }
.i-capa{ stroke:var(--casing-halo); stroke-width:3; stroke-linejoin:round; }
.i-capa--1{ fill:var(--est-azul);  }
.i-capa--2{ fill:var(--est-ambar); }
.i-capa--3{ fill:var(--est-verde); }
.i-banda{ fill:var(--azul); opacity:.18; }
.i-bigote{ fill:none; stroke:var(--tinta); stroke-width:3; stroke-linecap:round; }
.i-punto{ fill:var(--azul); }
.i-eje{ fill:none; stroke:var(--borde-fuerte); stroke-width:2.5; stroke-linecap:round; }

/* =============================================================================
   Panel de medición — el único lugar oscuro, porque el único con eje
   ========================================================================== */

.medicion{ background:var(--banda-verde); padding-block:var(--sec); }

.panel{
  background:var(--navy); color:var(--navy-texto);
  border-radius:18px; padding:clamp(30px,4vw,68px);
}
.panel__grid{ display:grid; gap:clamp(34px,4vw,60px); grid-template-columns:1fr; align-items:stretch; }
@media (min-width:980px){ .panel__grid{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); } }

.panel__title{ font-size:var(--t6); font-weight:700; text-wrap:balance; }
.panel__lede{
  margin-top:20px; font-size:var(--t3); line-height:1.6;
  color:var(--navy-suave);         /* 7,56:1 */
  max-width:46ch;
}

.anat{ margin-top:30px; }
.anat__r{
  display:grid; grid-template-columns:1fr; gap:3px;
  padding-block:15px; border-top:1px solid var(--navy-linea);
}
@media (min-width:520px){
  .anat__r{ grid-template-columns:minmax(0,16ch) minmax(0,1fr); gap:20px; align-items:baseline; }
}
.anat dt{ font-size:var(--t2); font-weight:700; color:var(--dato); }        /* 6,27:1 */
.anat dd{ font-size:var(--t2); color:var(--navy-suave); }                   /* 7,56:1 */

.panel__fig{ display:flex; flex-direction:column; justify-content:center; }
.serie{
  /* escala uniforme: así el marcador de la caída sigue siendo un círculo y no
     un óvalo, que es lo que pasaba con preserveAspectRatio="none" */
  width:100%; height:auto; aspect-ratio:620 / 300;
  background:var(--navy-card); border-radius:10px;
}
.serie__grilla path{ fill:none; stroke:var(--navy-linea); stroke-width:1; vector-effect:non-scaling-stroke; }
.serie__banda{ fill:var(--dato); fill-opacity:.26; }
.serie__linea{ stroke:var(--dato); stroke-width:3.4; stroke-linecap:round; }
.serie__eje{ fill:none; stroke:var(--navy-suave); stroke-width:1.5; }

/* la caída abrupta, en el ámbar de marca: sobre el navy da 8,14:1 */
.caida__v{
  fill:none; stroke:var(--ambar); stroke-width:2;
  stroke-dasharray:6 6; vector-effect:non-scaling-stroke;
}
.caida__p{ fill:var(--ambar); stroke:var(--navy-card); stroke-width:3; }

.serie__x{
  display:grid; grid-template-columns:repeat(3,1fr); margin-top:12px;
  font-size:var(--t1); font-weight:600; color:var(--navy-suave); text-align:center;
}
.serie__leg{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:16px; }
.lg{ display:inline-flex; align-items:center; gap:8px; font-size:var(--t1); color:var(--navy-suave); }
.lg::before{ content:""; width:16px; height:4px; border-radius:2px; }
.lg--linea::before{ background:var(--dato); }
.lg--banda::before{ background:var(--dato); opacity:.42; height:11px; }
.lg--caida::before{ background:var(--ambar); }

.serie__cap{
  margin-top:14px; font-size:var(--t2); line-height:1.55;
  color:var(--navy-suave); max-width:54ch;
}

/* =============================================================================
   Fuentes — un libro de registro, no un carrusel de logos
   ========================================================================== */

.fuentes{ background:var(--blanco); border-block:1px solid var(--borde); }

.libro__r{
  display:grid; grid-template-columns:1fr; gap:8px;
  padding-block:clamp(20px,2.2vw,26px); border-top:1px solid var(--borde);
}
.libro__r:last-child{ border-bottom:1px solid var(--borde); }
@media (min-width:820px){
  .libro__r{ grid-template-columns:minmax(0,30ch) minmax(0,1fr); gap:clamp(24px,3vw,56px); align-items:baseline; }
}
.libro dt{ font-size:var(--t4); font-weight:700; }
.libro dd{ color:var(--tinta-2); max-width:66ch; }   /* 5,75:1 sobre blanco */

.libro dt{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
/* la etiqueta siempre debajo del nombre: si va en línea, las largas bajan
   solas y las filas quedan desparejas */
.tag{
  display:block; width:fit-content;
  font-size:var(--t1); font-weight:600;
  padding:4px 11px; border-radius:100px;
}
.tag--azul { background:var(--est-azul);  color:var(--azul);        } /* 7,55:1 */
.tag--ambar{ background:var(--est-ambar); color:var(--ambar-tinta); } /* 5,38:1 */
.tag--verde{ background:var(--est-verde); color:var(--verde);       } /* 5,61:1 */

/* =============================================================================
   Para qué sirve
   ========================================================================== */

.usos{ background:var(--banda-ambar); }
.usos__g{ display:grid; gap:0 clamp(28px,3.4vw,56px); grid-template-columns:1fr; }
@media (min-width:700px){ .usos__g{ grid-template-columns:repeat(2,1fr); } }

.uso{ padding:26px 0 26px 22px; border-left:4px solid var(--borde-fuerte); margin-block:14px; }
.uso--verde{ border-left-color:var(--verde); }
.uso--ambar{ border-left-color:var(--ambar); }
.uso--azul { border-left-color:var(--azul);  }
.uso__t{ font-size:var(--t4); font-weight:700; max-width:30ch; text-wrap:pretty; }
.uso p{ margin-top:11px; color:var(--tinta-2); max-width:46ch; }  /* 5,25:1 sobre --banda-ambar */

/* Es la frase que cierra la sección, no una advertencia. Antes era una caja
   blanca con filete a la izquierda: leía como recuadro de alerta, repetía el
   tratamiento de las cuatro tarjetas de arriba y quedaba flotando a media
   página. Ahora es un cierre: la línea verde cruza de lado a lado y el texto
   va debajo, con su propia medida. La regla va en el contenedor justamente
   para que el ancho del texto no se la lleve puesta. */
.usos__cierre{
  margin-top:clamp(40px,4.4vw,68px);
  padding-top:clamp(26px,2.8vw,38px);
  border-top:2px solid var(--verde);
}
.usos__cierre p{
  font-size:clamp(21px,2.2vw,26px); font-weight:500; line-height:1.38;
  letter-spacing:-0.012em;
  color:var(--tinta);                             /* 15,11:1 sobre --banda-ambar */
  max-width:42ch;
  /* "pretty" y no "balance": al emparejar el largo de las líneas, balance
     partía "le presta / plata" en pantalla angosta */
  text-wrap:pretty;
}

/* =============================================================================
   Equipo
   ========================================================================== */

.equipo{ background:var(--blanco); }
.equipo__in{ display:grid; gap:clamp(36px,4vw,72px); grid-template-columns:1fr; align-items:center; }
@media (min-width:880px){ .equipo__in{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } }
.equipo__p{
  margin-top:20px; font-size:var(--t4); line-height:1.5;
  color:var(--tinta-2); max-width:46ch;                            /* 5,75:1 */
}

.cifra{
  display:flex; align-items:baseline; justify-content:space-between; gap:22px;
  padding-block:20px; border-top:1px solid var(--borde);
}
.cifra:last-child{ border-bottom:1px solid var(--borde); }
.cifra dt{ font-size:var(--t2); color:var(--tinta-2); }            /* 5,75:1 */
.cifra__n{ font-size:var(--t6); font-weight:800; color:var(--verde); line-height:1; } /* 6,39:1 sobre blanco */
.cifra__txt{ font-size:var(--t3); font-weight:600; }

/* =============================================================================
   Pie
   ========================================================================== */

.pie{ position:relative; background:var(--bg); border-top:1px solid var(--borde); overflow:hidden; }
/* El horizonte: la curva de la tierra en verde y la órbita azul por encima,
   las dos apoyadas abajo de todo. Es la composición del isotipo. Antes esto
   era un arco suelto cuyo vértice le pasaba por el medio a la frase. */
.pie__horizonte{
  position:absolute; inset:auto 0 0; width:100%; height:240px;
  pointer-events:none;
}
.pie__tierra{ fill:var(--tierra); stroke:none; }
.pie__orbita{ fill:none; stroke:var(--azul); stroke-width:2.5; opacity:.42; }
.pie__in{ position:relative; padding-block:clamp(56px,6vw,92px) clamp(150px,17vw,235px); text-align:center; }
.pie__logo{ width:164px; height:auto; margin:0 auto 32px; display:block; }
.pie__claim{
  font-size:var(--t4); line-height:1.5; max-width:46ch; margin-inline:auto;
  color:var(--tinta);                                              /* 15,96:1 */
}
.pie__meta{ margin-top:20px; font-size:var(--t2); color:var(--tinta-3); } /* 4,81:1 */
.pie__meta b{ color:var(--azul); font-weight:700; }                /* 8,45:1 */

/* =============================================================================
   Movimiento reducido
   ========================================================================== */

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