/* ==========================================================================
   AMV Servicios Digitales — hoja de estilo v4
   Manual de marca v1.0 · 60/30/10 · Manrope + Inter · Lucide 1,5
   Nada en ángulo recto. Sin sombras, sin degradados, sin ruido.

   Sistema de movimiento: una curva, cuatro duraciones, y todo lo que entra
   lo hace por recorrido de scroll — no por temporizador. El movimiento es
   estructura, no decoración: revela jerarquía, marca el paso de una sección
   a otra y sostiene la escena del proceso.
   ========================================================================== */

@property --logo-w{ syntax:'<length>';  inherits:true; initial-value:132px; }

/* --- Tokens --------------------------------------------------------------- */
:root{
  --carbon:      #1F2A2E;
  --verde:       #2E7D77;
  --verde-prof:  #1F5F5A;
  --gris-frio:   #6B7780;
  --apoyo:       #E6EAF0;
  --blanco:      #FFFFFF;

  --verde-100:   #E8F1F0;
  --verde-200:   #C5DEDB;
  --verde-900:   #16403D;
  --neutro-100:  #F1F4F8;
  --neutro-300:  #C3CBD4;
  --neutro-700:  #3A4750;

  --r-campo: 10px;
  --r-card:  16px;
  --r-plano: 22px;
  --r-pill:  999px;

  --e1:4px; --e2:8px; --e3:16px; --e4:24px; --e5:40px; --e6:64px; --e7:96px;

  /* Aire editorial: el doble que antes. La página respira, deja de parecer
     una plantilla comprimida. */
  --banda:    clamp(52px, 5.6vw, 92px);
  --cabeza:   clamp(28px, 2.8vw, 44px);

  --medianil: 24px;
  --gutter:   clamp(20px, 5vw, 64px);
  --wrap:     1280px;

  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-rapido:  140ms;
  --t:         240ms;
  --t-lento:   480ms;
  --t-escena:  900ms;

  --logo-w: 122px;
  --logo-aire: calc(var(--logo-w) * 0.178);

  --f-titulo: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-texto:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --linea: 1px solid var(--apoyo);
}

/* --- Base ----------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-padding-top:112px;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--blanco);
  color:var(--carbon);
  font-family:var(--f-texto);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

img,svg{ max-width:100%; }
img{ height:auto; display:block; }

h1,h2,h3,h4{ font-family:var(--f-titulo); font-weight:600; margin:0; color:var(--carbon); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:var(--verde-prof); }

:where(a,summary,button,input,textarea):focus-visible{
  outline:2px solid var(--verde-prof);
  outline-offset:3px;
  border-radius:var(--r-campo);
}
/* Sobre el verde y el carbón el verde profundo no se distingue (1,5:1 y 2:1).
   Ahí el anillo pasa a blanco: 4,87:1 y 14,6:1. Solo lo ve quien usa teclado. */
:where(.band--verde, .pie) :focus-visible{ outline-color:var(--blanco); }

.skip{
  position:absolute; left:-9999px;
  background:var(--carbon); color:var(--blanco);
  padding:var(--e2) var(--e3);
  border-radius:var(--r-campo);
  font-size:14px; text-decoration:none;
}
.skip:focus{ left:var(--e3); top:var(--e3); z-index:40; }

.solo-lectores{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

/* --- Contenedor y bandas --------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.band{ padding-block:var(--banda); position:relative; }
.band--blanco{ background:var(--blanco); }
.band--apoyo { background:var(--neutro-100); }
.band--verde { background:var(--verde); color:var(--blanco); }

.band--blanco{ --gris-texto:var(--gris-frio);  --verde-texto:var(--verde); }
.band--apoyo { --gris-texto:var(--neutro-700); --verde-texto:var(--verde-prof); }
.band--verde { --gris-texto:#EAF3F1;          --verde-texto:var(--blanco); }

/* Filete de separación entre bandas del mismo color */
.band + .band--blanco{ border-top:var(--linea); }

/* --- Encabezado ------------------------------------------------------------ */
.site-header{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--blanco) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:var(--linea);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e4);
}
.logo{
  display:block; width:max-content;
  padding:var(--logo-aire) var(--logo-aire) var(--logo-aire) 0;
}
.logo img{ width:var(--logo-w); height:auto; }

.nav{ display:flex; align-items:center; gap:clamp(12px, 2vw, 32px); }
.nav a{
  position:relative;
  font-size:14px; font-weight:500;
  color:var(--carbon); text-decoration:none;
  padding-block:var(--e2);
  transition:color var(--t) var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px;
  height:1.5px; background:var(--verde); border-radius:var(--r-pill);
  transform:scaleX(0); transform-origin:right center;
  transition:transform var(--t-lento) var(--ease-out);
}
.nav a:hover{ color:var(--verde-prof); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left center; }
.nav a[aria-current="page"]{ color:var(--verde-prof); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav .nav__cta{ display:none; }

/* Barra de progreso de lectura */
.progreso{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--verde); transform-origin:left center; transform:scaleX(0);
}

/* --- Tipografía ------------------------------------------------------------ */
.display{
  font-size:clamp(2.125rem, 1.05rem + 4.5vw, 4.25rem);
  line-height:1.0;
  letter-spacing:-0.042em;
  text-wrap:balance;
}
.display--med{ font-size:clamp(1.875rem, 1.05rem + 3.4vw, 3.25rem); line-height:1.04; letter-spacing:-0.038em; }

h2{
  font-size:clamp(1.875rem, 1.1rem + 3vw, 3.25rem);
  line-height:1.06;
  letter-spacing:-0.035em;
  text-wrap:balance;
}
h3{
  font-size:clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  line-height:1.14;
  letter-spacing:-0.025em;
}

.lead{
  font-size:clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  line-height:1.5;
  max-width:58ch;
}
.entrada{ color:var(--gris-texto); max-width:54ch; }
.chico{ font-size:14px; line-height:1.55; color:var(--gris-texto); }

/* Etiqueta con índice: reemplaza el «hilo + título» genérico */
.eyebrow{
  display:flex; align-items:center; gap:var(--e3);
  font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--verde-texto);
}
/* El hilo queda trazado por defecto. Donde hay animación de scroll se dibuja
   al entrar (ver MOVIMIENTO); sin ella, o con movimiento reducido, se ve
   completo y quieto en vez de desaparecer. */
.eyebrow::after{
  content:""; flex:1; height:1px; background:currentColor; opacity:.28;
  transform-origin:left center;
}
.eyebrow__n{ font-variant-numeric:tabular-nums; opacity:.6; }

.sec-head{ margin-bottom:var(--cabeza); display:grid; gap:var(--e3); }
.sec-head h2{ max-width:20ch; }

@media (min-width:900px){
  .sec-head--split{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    align-items:end; column-gap:var(--medianil);
  }
  .sec-head--split .eyebrow{ grid-column:1 / -1; }
}

/* --- Botones --------------------------------------------------------------- */
.cta-row{ display:flex; flex-wrap:wrap; gap:var(--e3); align-items:center; }

.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:var(--e2);
  padding:17px var(--e5);
  border-radius:var(--r-pill);
  font-family:var(--f-texto); font-size:16px; font-weight:600; line-height:1.2;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:color var(--t) var(--ease), border-color var(--t) var(--ease), translate var(--t-rapido) var(--ease);
}
/* Relleno que barre desde abajo en lugar de un simple cambio de color */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  transform:scaleY(0); transform-origin:bottom center;
  transition:transform var(--t-lento) var(--ease-out);
}
.btn:hover::before{ transform:scaleY(1); }
.btn:active{ translate:0 1px; }
.btn .ico--btn{ transition:transform var(--t-lento) var(--ease-out); }
.btn:hover .ico--btn{ transform:translateX(6px); }

.btn--primario{ background:var(--verde); color:var(--blanco); }
.btn--primario::before{ background:var(--carbon); }

.btn--invertido{ background:var(--blanco); color:var(--verde-prof); }
.btn--invertido::before{ background:var(--verde-100); }

.btn--linea{ background:transparent; color:var(--carbon); border-color:var(--neutro-300); }
.btn--linea::before{ background:var(--verde-100); }
.btn--linea:hover{ border-color:var(--verde); color:var(--verde-prof); }

/* --- Íconos ---------------------------------------------------------------- */
.ico{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ico--btn  { width:20px; height:20px; }
.ico--inline{ width:16px; height:16px; }
.ico--chev  { width:22px; height:22px; color:var(--verde); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ padding-top:clamp(28px, 3vw, 48px); padding-bottom:0; }
/* Sin la franja de datos el hero no tiene cierre propio, así que la sección
   siguiente conserva su padding de banda (no lleva el padding-top:0 inline). */
.hero__grid{ display:grid; gap:var(--e3); }
.hero h1{ margin-bottom:var(--e3); }

.hero__meta{
  display:grid; gap:var(--e3);
  padding-top:var(--e3);
  border-top:2px solid var(--carbon);
}
.hero__pie{
  margin-top:clamp(20px, 2.2vw, 32px);
  padding-block:var(--e3);
  border-top:var(--linea);
  display:flex; flex-wrap:wrap; gap:var(--e2) var(--e5);
  align-items:center; justify-content:space-between;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-frio);
}
.hero__pie strong{ color:var(--carbon); font-weight:600; }

@media (min-width:900px){
  .hero__grid{
    grid-template-columns:minmax(0,6.2fr) minmax(0,5.8fr);
    column-gap:var(--e5);
    align-items:start;
  }
  .hero h1{ grid-column:1; margin-bottom:0; }
  .hero__meta{ grid-column:2; gap:var(--e4); }
  .hero__vacio{ display:none; }
}

/* Revelado por línea: cada línea sube desde su propia máscara */
.linea{ display:block; overflow:clip; overflow-clip-margin:.2em; }
.linea > span{ display:block; }

/* Mobile: el hero tiene que entrar en una pantalla vertical chica.
   Se ajusta la densidad, no el diseño. */
@media (max-width:599px){
  .hero{ padding-top:var(--e4); }
  .hero .display{ font-size:clamp(2rem, 1.1rem + 4.2vw, 2.5rem); letter-spacing:-0.038em; }
  .hero .lead{ font-size:1rem; line-height:1.45; }
  .hero__meta{ gap:var(--e3); }
  .hero__meta .cta-row{ gap:var(--e2); }
  .hero__meta .btn{ padding:15px var(--e4); font-size:15px; width:100%; justify-content:center; }
  .hero__pie{
    flex-direction:column; align-items:flex-start; gap:6px;
    font-size:11.5px; letter-spacing:.08em;
  }
}

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker{
  background:var(--verde); color:var(--blanco);
  padding-block:var(--e3);
  overflow:hidden;
  border-block:1px solid var(--verde-prof);
}
.ticker__pista{ display:flex; width:max-content; }
.ticker__grupo{
  display:flex; align-items:center; gap:var(--e5);
  padding-right:var(--e5);
  font-family:var(--f-titulo); font-weight:600;
  font-size:clamp(1rem, .9rem + .5vw, 1.375rem);
  letter-spacing:-0.02em; white-space:nowrap;
}
.ticker__punto{ width:7px; height:7px; border-radius:var(--r-pill); background:var(--verde-200); flex:none; }

/* ==========================================================================
   ÍNDICE EDITORIAL (el problema)
   ========================================================================== */
.indice{ border-top:1px solid var(--neutro-300); }
.indice__fila{
  position:relative;
  display:grid; gap:var(--e2) var(--e4);
  grid-template-columns:auto 1fr;
  padding-block:clamp(18px, 1.9vw, 27px);
  border-bottom:1px solid var(--neutro-300);
  transition:padding-inline var(--t-lento) var(--ease-out);
}
.indice__fila::before{
  content:""; position:absolute; inset:0 calc(var(--e4) * -1);
  background:var(--verde-100); border-radius:var(--r-card);
  transform:scaleY(0); transform-origin:center bottom; z-index:0;
  transition:transform var(--t-lento) var(--ease-out);
}
.indice__fila > *{ position:relative; z-index:1; }
.indice__n{
  font-family:var(--f-titulo); font-weight:600;
  font-size:clamp(1rem, .9rem + .5vw, 1.25rem);
  color:var(--verde-texto); font-variant-numeric:tabular-nums;
  transition:transform var(--t-lento) var(--ease-out);
}
.indice__fila h3{ transition:transform var(--t-lento) var(--ease-out); }
.indice__fila p{ color:var(--gris-texto); max-width:62ch; grid-column:2; }

@media (hover:hover){
  .indice__fila:hover::before{ transform:scaleY(1); }
  .indice__fila:hover{ padding-inline:var(--e4); }
  .indice__fila:hover .indice__n{ transform:translateY(-2px); }
}

@media (min-width:900px){
  .indice__fila{ grid-template-columns:80px minmax(0,5fr) minmax(0,6fr); align-items:baseline; }
  .indice__fila p{ grid-column:3; }
}

/* ==========================================================================
   ESCENA FIJA (cómo trabajo)
   ========================================================================== */
.escena{ display:grid; gap:var(--e4); }
.escena__fijo{ display:none; }
.escena__pasos{ display:grid; gap:var(--e4); }

.paso{
  display:grid; gap:var(--e3);
  padding-top:var(--e4);
  border-top:2px solid var(--verde-200);
  transition:border-color var(--t-lento) var(--ease);
}
.paso__n{
  font-family:var(--f-titulo); font-weight:600; font-size:1.5rem;
  letter-spacing:-0.02em; color:var(--verde-texto); font-variant-numeric:tabular-nums;
}
.paso p{ color:var(--gris-texto); max-width:56ch; }
.paso:hover{ border-color:var(--verde); }

@media (min-width:900px){
  .escena{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--e6); }
  .escena__fijo{
    display:block; position:sticky; top:18vh; align-self:start;
  }
  .escena__num{
    font-family:var(--f-titulo); font-weight:600;
    font-size:clamp(5rem, 3rem + 9vw, 11rem);
    line-height:.86; letter-spacing:-0.05em;
    color:var(--verde); font-variant-numeric:tabular-nums;
    opacity:.14;
  }
  .escena__num + .escena__num{ margin-top:-.14em; }
  .escena__pasos{ gap:clamp(28px, 3.6vw, 56px); }
  .paso{ min-height:20vh; }
  .escena__fijo .escena__rotulo{
    margin-top:var(--e4); font-size:13px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--neutro-700);
  }
}

/* ==========================================================================
   FILAS ENLAZADAS (probalo)
   ========================================================================== */
.filas{ border-top:1px solid var(--neutro-300); }
.fila-link{ border-bottom:1px solid var(--neutro-300); }
.fila-link > a{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; gap:var(--e2) var(--e4);
  grid-template-columns:1fr auto;
  align-items:center;
  padding:clamp(18px, 2vw, 30px) var(--e4);
  margin-inline:calc(var(--e4) * -1);
  border-radius:var(--r-card);
  color:inherit; text-decoration:none;
}
.fila-link > a::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--verde); border-radius:inherit;
  transform:scaleY(0); transform-origin:bottom center;
  transition:transform var(--t-lento) var(--ease-out);
}
.fila-link h3{ transition:color var(--t) var(--ease), transform var(--t-lento) var(--ease-out); }
.fila-link p{ color:var(--gris-texto); max-width:56ch; grid-column:1; grid-row:2; transition:color var(--t) var(--ease); }
.fila-link__flecha{
  display:grid; place-items:center;
  width:56px; height:56px; border-radius:var(--r-pill);
  border:1px solid var(--neutro-300); color:var(--verde-prof);
  grid-row:1 / span 2; grid-column:2;
  transition:transform var(--t-lento) var(--ease-out), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
@media (hover:hover){
  .fila-link > a:hover::before{ transform:scaleY(1); }
  .fila-link > a:hover h3,
  .fila-link > a:hover p{ color:var(--blanco); }
  .fila-link > a:hover h3{ transform:translateX(10px); }
  .fila-link > a:hover .fila-link__flecha{
    transform:translateX(6px) rotate(-45deg);
    border-color:var(--blanco); color:var(--blanco);
  }
}

/* ==========================================================================
   DECLARACIÓN EN VERDE
   ========================================================================== */
.declaracion h2{ color:var(--blanco); max-width:16ch; }
.declaracion .lead{ color:#EAF3F1; }
.declaracion__datos{
  margin-top:var(--e5);
  display:grid; gap:0;
  border-top:1px solid rgba(255,255,255,.28);
}
.declaracion__dato{
  display:grid; gap:var(--e2);
  padding-block:var(--e3);
  border-bottom:1px solid rgba(255,255,255,.28);
}
.declaracion__dato dt{ font-family:var(--f-titulo); font-weight:600; font-size:1.125rem; letter-spacing:-0.02em; }
.declaracion__dato dd{ margin:0; color:#EAF3F1; max-width:58ch; }

@media (min-width:900px){
  .declaracion__dato{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:var(--e5); align-items:baseline; }
}

/* ==========================================================================
   PREGUNTAS
   ========================================================================== */
.faq{ border-top:1px solid var(--neutro-300); }
.qa{ border-bottom:1px solid var(--neutro-300); }
.qa summary{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:var(--e3) var(--e4);
  padding-block:clamp(15px, 1.6vw, 22px);
  cursor:pointer; list-style:none;
  font-family:var(--f-titulo); font-weight:600;
  font-size:clamp(1.0625rem, 1rem + .5vw, 1.375rem);
  line-height:1.25; letter-spacing:-0.025em;
  transition:color var(--t) var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa__n{ font-size:12px; font-weight:500; letter-spacing:.16em; color:var(--verde-texto);
  font-family:var(--f-texto); font-variant-numeric:tabular-nums; }
.qa summary:hover{ color:var(--verde-prof); }
.qa summary .ico--chev{ transition:transform var(--t-lento) var(--ease-out); }
.qa[open] summary .ico--chev{ transform:rotate(180deg); }
.qa__r{ padding:0 0 var(--e4) calc(var(--e4) + 34px); }
.qa__r p{ color:var(--gris-texto); max-width:62ch; }

/* ==========================================================================
   FORMULARIO
   ========================================================================== */
.form{ display:grid; gap:var(--e4); }
.campo{ display:grid; gap:var(--e2); }
.campo label{ font-size:13px; font-weight:600; letter-spacing:.04em; }
.campo input,
.campo textarea{
  width:100%;
  font-family:var(--f-texto); font-size:16px; line-height:1.5; color:var(--carbon);
  background:var(--blanco);
  border:1px solid var(--neutro-300);
  border-radius:var(--r-campo);
  padding:14px var(--e3);
  transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.campo textarea{ min-height:132px; resize:vertical; }
.campo input:hover,
.campo textarea:hover{ border-color:var(--verde-200); }
.campo input:focus,
.campo textarea:focus{ border-color:var(--verde); outline-offset:2px; }
.campo input::placeholder,
.campo textarea::placeholder{ color:var(--neutro-300); }

@media (min-width:900px){
  .form__fila{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e4); }
}

/* ==========================================================================
   ARTÍCULO
   ========================================================================== */
.articulo{ max-width:68ch; display:grid; gap:var(--e3); }
.articulo h2{ font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); margin-top:var(--e4); }
/* Subtítulo dentro de una sección (los puntos 1, 2 y 3 de una lista larga):
   un escalón más abajo en la estructura, idéntico a la vista. */
.articulo h3{
  font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); margin-top:var(--e4);
  line-height:1.06; letter-spacing:-0.035em; text-wrap:balance;
}
.articulo p{ font-size:1.0625rem; line-height:1.7; }
.articulo ul{ display:grid; gap:var(--e2); }
.articulo ul li{ position:relative; padding-left:var(--e4); line-height:1.7; }
.articulo ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:var(--r-pill); background:var(--verde);
}
.articulo__cita{
  font-family:var(--f-titulo); font-weight:600;
  font-size:clamp(1.25rem, 1.1rem + .9vw, 1.75rem);
  line-height:1.2; letter-spacing:-0.03em;
  padding-left:var(--e4); border-left:3px solid var(--verde);
  margin-block:var(--e4);
}

/* ==========================================================================
   PIE
   ========================================================================== */
.pie{ background:var(--carbon); color:var(--apoyo); padding-block:var(--banda); }
.pie__inner{ display:grid; gap:var(--e5); }
.pie__logo{ width:172px; }
.pie__marca p{ margin-top:var(--e4); color:var(--neutro-300); max-width:34ch; }
.pie__cols{ display:grid; gap:var(--e5); }
.pie__titulo{ font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  /* sobre carbón el gris frío da 3,20:1 y no llega a AA; neutro 300 da 8,97:1 */
  color:var(--neutro-300); margin-bottom:var(--e3); }
.pie__lista{ display:grid; gap:var(--e2); }
.pie__lista a{
  display:inline-flex; align-items:center; gap:var(--e2);
  color:var(--blanco); text-decoration:none;
  transition:color var(--t) var(--ease), translate var(--t) var(--ease);
  overflow-wrap:anywhere;
}
.pie__lista a:hover{ color:var(--verde-200); translate:4px 0; }
.pie__legal{
  margin-top:var(--e5); padding-top:var(--e3);
  border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:var(--e3) var(--e5); justify-content:space-between;
  font-size:13px; color:var(--neutro-300);   /* 8,97:1 sobre carbón */
}

@media (min-width:768px){
  :root{ --logo-w:138px; }
  .nav .nav__cta{ display:inline-flex; }
  .pie__inner{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--e6); }
  .pie__cols{ grid-template-columns:auto minmax(0,1fr); }
}

/* ==========================================================================
   MOVIMIENTO
   Progresivo: si el navegador no soporta animaciones de scroll, el contenido
   se ve completo y quieto. main.js suple la aparición con IntersectionObserver.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){

  /* --- Entrada de la página: sólo el hero se anima por tiempo ------------- */
  .hero .linea > span{ animation:subir 1000ms var(--ease-out) both; }
  .hero .linea:nth-child(1) > span{ animation-delay:80ms;  }
  .hero .linea:nth-child(2) > span{ animation-delay:190ms; }
  .hero .linea:nth-child(3) > span{ animation-delay:300ms; }
  .hero__meta > *{ animation:aparecer 800ms var(--ease-out) both; }
  .hero__meta > *:nth-child(1){ animation-delay:420ms; }
  .hero__meta > *:nth-child(2){ animation-delay:520ms; }
  .hero__meta > *:nth-child(3){ animation-delay:620ms; }
  .hero__pie{ animation:aparecer 800ms var(--ease-out) 760ms both; }
  .site-header .logo{ animation:aparecer 700ms var(--ease-out) both; }
  .nav > *{ animation:aparecer 700ms var(--ease-out) both; }
  .nav > *:nth-child(2){ animation-delay:60ms; }
  .nav > *:nth-child(3){ animation-delay:120ms; }
  .nav > *:nth-child(4){ animation-delay:180ms; }
  .nav > *:nth-child(5){ animation-delay:240ms; }

  /* --- Ticker ------------------------------------------------------------- */
  .ticker__pista{ animation:correr 34s linear infinite; }
  .ticker:hover .ticker__pista{ animation-play-state:paused; }

  /* --- Recorrido de scroll ------------------------------------------------ */
  @supports (animation-timeline: view()){

    .indice__fila,
    .qa,
    .fila-link,
    .declaracion__dato,
    .paso,
    .articulo > *{
      animation:aparecer linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 16%;
    }

    .sec-head > *{
      animation:aparecer linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 15%;
    }
    .eyebrow::after{
      animation:trazar linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 18%;
    }

    /* Títulos grandes: revelado por línea también al entrar en pantalla */
    .band:not(.hero) .linea > span{
      animation:subir linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 16%;
    }

    /* Barra de progreso de lectura */
    .progreso{
      animation:trazar linear both;
      animation-timeline:scroll(root);
    }

    /* Encabezado que se compacta */
    .site-header{
      animation:compactar linear both;
      animation-timeline:scroll(root);
      animation-range:0 220px;
    }

    /* Escena fija: cada paso enciende su número */
    @media (min-width:900px){
      .escena{ timeline-scope:--p1, --p2, --p3; }
      .escena__pasos > .paso:nth-child(1){ view-timeline-name:--p1; }
      .escena__pasos > .paso:nth-child(2){ view-timeline-name:--p2; }
      .escena__pasos > .paso:nth-child(3){ view-timeline-name:--p3; }
      .escena__num{ animation:encender linear both; animation-range:cover 0% cover 100%; }
      .escena__num:nth-child(1){ animation-timeline:--p1; }
      .escena__num:nth-child(2){ animation-timeline:--p2; }
      .escena__num:nth-child(3){ animation-timeline:--p3; }
    }

    /* Banda de color que entra a sangre */
    .band--verde{
      animation:escalar linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 90%;
    }
  }
}

/* Fallback sin animation-timeline (lo activa main.js) */
.no-st .rev{ opacity:0; transform:translateY(30px); transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.no-st .rev.visible{ opacity:1; transform:none; }
.no-st .rev.d1{ transition-delay:80ms; }
.no-st .rev.d2{ transition-delay:160ms; }
.no-st .rev.d3{ transition-delay:240ms; }
/* El hilo de la etiqueta se traza igual que con animación de scroll */
.no-st .eyebrow.rev::after{ transform:scaleX(0); transition:transform 900ms var(--ease-out) 200ms; }
.no-st .eyebrow.rev.visible::after{ transform:scaleX(1); }

@keyframes aparecer{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }
@keyframes subir   { from{ opacity:0; transform:translateY(125%); } to{ opacity:1; transform:none; } }
@keyframes trazar  { from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes correr { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes encender{ 0%{ opacity:.14; } 30%,70%{ opacity:1; } 100%{ opacity:.14; } }
@keyframes escalar { from{ border-radius:var(--r-plano); transform:scale(.965); }
                     to  { border-radius:0; transform:none; } }
@keyframes compactar{ from{ --logo-w:138px; } to{ --logo-w:114px; } }

@media (max-width:767px){
  @keyframes compactar{ from{ --logo-w:122px; } to{ --logo-w:108px; } }
}

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

/* --- Impresión -------------------------------------------------------------- */
@media print{
  .site-header, .ticker, .progreso{ position:static; }
  .band--verde{ background:var(--blanco); color:var(--carbon); }
  .declaracion h2{ color:var(--carbon); }
  .pie{ background:var(--blanco); color:var(--carbon); }
  .btn{ border-color:var(--carbon); color:var(--carbon); background:transparent; }
}

/* ==========================================================================
   CANALES DE CONTACTO
   ========================================================================== */
.canales{ display:grid; gap:var(--e4); align-items:start; }
.canal{
  display:grid; gap:var(--e3); align-content:start;
  padding:var(--e4);
  border:1px solid var(--neutro-300);
  border-radius:var(--r-plano);
  background:var(--blanco);
}
.canal--wa{ background:var(--verde-100); border-color:var(--verde-200); }
.canal__rotulo{
  font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris-frio);
}
.canal--wa .canal__rotulo{ color:var(--verde-prof); }
.canal__dato{
  font-family:var(--f-titulo); font-weight:600;
  font-size:clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  letter-spacing:-0.03em; line-height:1.15;
}
.canal__dato a{ color:var(--carbon); text-decoration:none;
  transition:color var(--t) var(--ease); }
/* El mail baja un escalón: en Manrope 600 el tramo previo al @ no entra en
   la columna a 28 px en ningún viewport. */
.canal__dato--mail{ font-size:clamp(1rem, .95rem + .45vw, 1.25rem); letter-spacing:-0.02em; }
.canal__dato a:hover{ color:var(--verde-prof); }
.canal--wa .canal__dato a{ color:var(--verde-prof); font-variant-numeric:tabular-nums; }

@media (min-width:900px){
  .canales{ grid-template-columns:minmax(0,4.5fr) minmax(0,4fr) minmax(0,3.5fr); column-gap:var(--e4); }
  .canal{ min-height:100%; }
}

/* Formulario replegado: deja de ser el protagonista */
.form-desplegable{ margin-top:var(--e5); border-top:1px solid var(--neutro-300); }
.form-desplegable summary{
  display:flex; align-items:center; gap:var(--e3);
  padding-block:var(--e4); cursor:pointer; list-style:none;
  font-family:var(--f-titulo); font-weight:600;
  font-size:clamp(1rem, .95rem + .4vw, 1.25rem); letter-spacing:-0.02em;
  transition:color var(--t) var(--ease);
}
.form-desplegable summary::-webkit-details-marker{ display:none; }
.form-desplegable summary:hover{ color:var(--verde-prof); }
.form-desplegable summary .ico--chev{ transition:transform var(--t-lento) var(--ease-out); }
.form-desplegable[open] summary .ico--chev{ transform:rotate(180deg); }
.form-desplegable__cuerpo{ padding-bottom:var(--e5); max-width:660px; }

/* Aviso de «copiado» */
.copiado{
  position:fixed; left:50%; bottom:var(--e5); translate:-50% 0; z-index:50;
  background:var(--carbon); color:var(--blanco);
  padding:12px var(--e4); border-radius:var(--r-pill);
  font-size:14px; font-weight:500;
  opacity:0; transition:opacity var(--t) var(--ease), translate var(--t) var(--ease);
  pointer-events:none;
}
.copiado.visible{ opacity:1; translate:-50% calc(var(--e2) * -1); }

/* Página de gracias: si el formulario vuelve con ?e= la consulta NO llegó.
   gracias.js marca <html> con .envio-fallido antes de pintar, y se muestra
   el aviso de error en lugar del «Llegó». Sin JavaScript queda el de siempre. */
html:not(.envio-fallido) .aviso-falla,
.envio-fallido .aviso-ok{ display:none !important; }
/* Sin la franja inferior el hero se queda sin cierre: recupera el aire de banda */
.envio-fallido .hero{ padding-bottom:var(--banda); }

/* ==========================================================================
   BIBLIOTECA · Aprendé sobre automatización
   ========================================================================== */
.biblio{ display:grid; gap:var(--e4); }
.ficha{ display:flex; }
.ficha > a{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; gap:var(--e3);
  width:100%; padding:var(--e4);
  border:1px solid var(--neutro-300); border-radius:var(--r-plano);
  background:var(--blanco); color:inherit; text-decoration:none;
  transition:border-color var(--t) var(--ease);
}
.ficha > a::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--verde); border-radius:inherit;
  transform:scaleY(0); transform-origin:bottom center;
  transition:transform var(--t-lento) var(--ease-out);
}
.ficha__cabeza{
  display:flex; align-items:baseline; gap:var(--e3);
  font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde-texto);
}
.ficha__n{ font-variant-numeric:tabular-nums; opacity:.6; }
.ficha h3{ font-size:clamp(1.25rem, 1.1rem + .7vw, 1.5rem); letter-spacing:-0.025em;
  transition:color var(--t) var(--ease); }
.ficha__desc{ color:var(--gris-texto); transition:color var(--t) var(--ease); }
.ficha__pie{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e3);
  margin-top:auto; padding-top:var(--e3);
  border-top:1px solid var(--apoyo);
  font-size:13px; color:var(--gris-texto);
  transition:color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.ficha__pie .ico--btn{ color:var(--verde-prof); transition:transform var(--t-lento) var(--ease-out), color var(--t) var(--ease); }

@media (hover:hover){
  .ficha > a:hover::before{ transform:scaleY(1); }
  .ficha > a:hover h3,
  .ficha > a:hover .ficha__desc,
  .ficha > a:hover .ficha__cabeza,
  .ficha > a:hover .ficha__pie{ color:var(--blanco); }
  .ficha > a:hover .ficha__pie{ border-color:rgba(255,255,255,.35); }
  .ficha > a:hover .ficha__pie .ico--btn{ transform:translateX(6px); color:var(--blanco); }
}

@media (min-width:900px){
  .biblio{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  /* Cuatro fichas: dos por fila, así ninguna queda sola */
  .biblio--cuatro{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* Franja de descubrimiento en otras páginas */
.recurso{
  display:grid; gap:var(--e4);
  padding:var(--e5);
  border:1px solid var(--verde-200); border-radius:var(--r-plano);
  background:var(--verde-100);
}
.recurso h3{ font-size:clamp(1.25rem, 1.1rem + .8vw, 1.625rem); letter-spacing:-0.025em; max-width:20ch; }
.recurso p{ color:var(--verde-prof); max-width:52ch; }
.recurso__lista{ display:grid; gap:var(--e2); align-content:start; }
.recurso__lista a{
  display:flex; align-items:baseline; gap:var(--e2);
  color:var(--verde-prof); font-weight:600; text-decoration:none;
  padding-block:var(--e2); border-bottom:1px solid var(--verde-200);
  transition:translate var(--t) var(--ease), color var(--t) var(--ease);
}
.recurso__lista a:hover{ translate:4px 0; color:var(--carbon); }
.recurso__lista a .ico--inline{ flex:none; align-self:center; }

@media (min-width:900px){
  .recurso{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:var(--e6); align-items:start; }
  .recurso__texto{ display:grid; gap:var(--e3); }
}

/* ==========================================================================
   CATÁLOGO DE PRODUCTOS · tarjetas compactas y comparables
   ========================================================================== */
.catalogo{ display:grid; gap:var(--e3); }
.prod{ display:flex; }
.prod > a{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; gap:var(--e3);
  width:100%; padding:var(--e4);
  border:1px solid var(--neutro-300); border-radius:var(--r-plano);
  background:var(--blanco); color:inherit; text-decoration:none;
  transition:border-color var(--t) var(--ease);
}
.prod > a::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--verde); border-radius:inherit;
  transform:scaleY(0); transform-origin:bottom center;
  transition:transform var(--t-lento) var(--ease-out);
}
.prod__n{
  font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--verde-texto); font-variant-numeric:tabular-nums;
  transition:color var(--t) var(--ease);
}
.prod h3{
  font-size:clamp(1.125rem, 1.05rem + .5vw, 1.375rem); letter-spacing:-0.025em;
  transition:color var(--t) var(--ease);
}
.prod__desc{ color:var(--gris-texto); font-size:15px; line-height:1.5;
  transition:color var(--t) var(--ease); }
.prod__puntos{ display:grid; gap:7px; }
.prod__puntos li{
  position:relative; padding-left:18px; font-size:14px; line-height:1.45;
  color:var(--gris-texto); transition:color var(--t) var(--ease);
}
.prod__puntos li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:6px; height:6px; border-radius:var(--r-pill); background:var(--verde);
  transition:background-color var(--t) var(--ease);
}
.prod__pie{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e3);
  margin-top:auto; padding-top:var(--e3);
  border-top:1px solid var(--apoyo);
  font-size:14px; font-weight:600; color:var(--verde-prof);
  transition:color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.prod__pie .ico--btn{ transition:transform var(--t-lento) var(--ease-out); }

@media (hover:hover){
  .prod > a:hover::before{ transform:scaleY(1); }
  .prod > a:hover h3,
  .prod > a:hover .prod__n,
  .prod > a:hover .prod__desc,
  .prod > a:hover .prod__puntos li,
  .prod > a:hover .prod__pie{ color:var(--blanco); }
  .prod > a:hover .prod__puntos li::before{ background:var(--blanco); }
  .prod > a:hover .prod__pie{ border-color:rgba(255,255,255,.35); }
  .prod > a:hover .prod__pie .ico--btn{ transform:translateX(6px); }
}

@media (min-width:700px){
  .catalogo{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1040px){
  .catalogo{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* Detalle desplegable por producto: mismo mecanismo que las preguntas */
.detalle .qa summary{ grid-template-columns:auto 1fr auto; }
.detalle__cuerpo{ padding:0 0 var(--e4) calc(var(--e4) + 34px); display:grid; gap:var(--e4); }
.detalle__cuerpo p{ color:var(--gris-texto); max-width:62ch; }
.detalle__datos{ display:grid; gap:var(--e3); }
.detalle__dato{ display:grid; gap:4px; }
.detalle__dato dt{ font-size:12px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--verde-texto); }
.detalle__dato dd{ margin:0; color:var(--carbon); max-width:62ch; }
.detalle__monto{
  font-family:var(--f-titulo); font-weight:600;
  font-size:clamp(1.125rem, 1rem + .7vw, 1.5rem); letter-spacing:-0.025em;
  color:var(--verde-prof); font-variant-numeric:tabular-nums;
}

@media (min-width:760px){
  .detalle__datos{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--e5); }
}
@media (max-width:600px){
  .detalle__cuerpo{ padding-left:0; }
}

/* Marca de «tiene herramienta» en las fichas de caso */
.ficha__tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:var(--r-pill);
  border:1px solid var(--verde-200); background:var(--verde-100);
  font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--verde-prof);
  transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
@media (hover:hover){
  .ficha > a:hover .ficha__tag{
    background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.45); color:var(--blanco);
  }
}
.ficha__cabeza{ flex-wrap:wrap; }

/* ==========================================================================
   FILIGRANA · el símbolo A como marca de agua
   Un solo gesto, siempre igual: el símbolo del manual una sola vez, grande,
   rotado -8° y saliendo por el vértice inferior derecho de la superficie.
   No es una trama: se lee como forma, nunca como logo repetido. Hay dos archivos, verde y blanco,
   y cada superficie elige el suyo con una sola variable.
   ========================================================================== */
.wrap{ position:relative; z-index:1; }

.hero,
.band--verde,
.pie,
.recurso{ position:relative; overflow:clip; }

.hero::after,
.band--verde::after,
.pie::after,
.recurso::after{
  content:"";
  position:absolute; z-index:0; pointer-events:none;
  right:var(--fil-x); bottom:var(--fil-y);
  width:var(--fil-w); aspect-ratio:380 / 346;
  background-image:var(--fil-img);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:var(--fil-op);
  rotate:-8deg;
}

/* Sobre blanco el verde necesita muy poca tinta para leerse */
.hero{
  --fil-img:url(assets/amv-simbolo-verde.svg); --fil-op:.05;
  --fil-w:min(560px, 58vw); --fil-x:-13%; --fil-y:-34%;
}
/* Sobre el plano verde, blanco: es la superficie donde la marca de agua
   sostiene la declaración, así que es la más presente de las cuatro */
.band--verde{
  --fil-img:url(assets/amv-simbolo-blanco.svg); --fil-op:.11;
  --fil-w:min(660px, 62vw); --fil-x:-15%; --fil-y:-30%;
}
/* En el pie apenas separa el carbón del negro */
.pie{
  --fil-img:url(assets/amv-simbolo-blanco.svg); --fil-op:.045;
  --fil-w:min(520px, 52vw); --fil-x:-14%; --fil-y:-36%;
}
/* Dentro de la tarjeta de recursos queda contenida por el radio de la caja */
.recurso{
  --fil-img:url(assets/amv-simbolo-verde.svg); --fil-op:.07;
  --fil-w:min(320px, 46vw); --fil-x:-7%; --fil-y:-30%;
}

/* En pantallas chicas el símbolo se corre al pie de la superficie para no
   quedar debajo de la columna de texto, que ahí ocupa todo el ancho */
@media (max-width:699px){
  .hero{        --fil-w:min(420px, 74vw); --fil-x:-14%; --fil-y:-30%; --fil-op:.045; }
  .band--verde{ --fil-w:min(440px, 78vw); --fil-x:-16%; --fil-y:-32%; --fil-op:.10; }
  .pie{         --fil-w:min(380px, 70vw); --fil-x:-14%; --fil-y:-34%; }
  .recurso{     --fil-w:min(230px, 50vw); --fil-x:-12%; --fil-y:-34%; }
}

@media print{
  .hero::after,
  .band--verde::after,
  .pie::after,
  .recurso::after{ display:none; }
}

/* ==========================================================================
   PROYECTOS ENTREGADOS · fichas con captura, vitrina y cifras
   Trabajos reales con página propia (proyecto-*.html). Las capturas van en
   un marco de navegador dibujado con bordes: sin sombras, como todo el sitio.
   ========================================================================== */

/* Fichas con captura arriba (Casos de uso) */
@media (min-width:900px){
  .biblio--dos{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.ficha__img{
  margin:calc(var(--e4) * -1) calc(var(--e4) * -1) 0;
  aspect-ratio:16 / 9; overflow:hidden;
  border-bottom:1px solid var(--neutro-300);
  background:var(--neutro-100);
}
.ficha__img img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform var(--t-escena) var(--ease-out);
}
@media (hover:hover){
  .ficha > a:hover .ficha__img img{ transform:scale(1.04); }
}

/* Marco de navegador */
.captura{ margin:0; display:grid; gap:var(--e3); align-content:start; }
.captura__marco{
  border:1px solid var(--neutro-300); border-radius:var(--r-plano);
  background:var(--blanco); overflow:hidden;
}
.captura__barra{
  display:flex; align-items:center; gap:var(--e3);
  padding:11px var(--e3);
  border-bottom:1px solid var(--neutro-300);
  background:var(--neutro-100);
}
.captura__puntos{ display:flex; gap:6px; flex:none; }
.captura__puntos i{ width:9px; height:9px; border-radius:var(--r-pill); background:var(--neutro-300); }
.captura__url{
  flex:1; min-width:0; max-width:340px; margin-inline:auto;
  padding:4px var(--e3); border-radius:var(--r-pill);
  background:var(--blanco); border:1px solid var(--apoyo);
  font-size:12.5px; color:var(--gris-frio); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.captura__marco img{ width:100%; height:auto; }
.captura figcaption{ font-size:14px; line-height:1.55; color:var(--gris-texto); max-width:62ch; }

/* Celular: el mismo marco, más angosto y más redondo */
.captura--movil .captura__marco{ border-radius:30px; padding:8px; background:var(--neutro-100); }
.captura--movil .captura__marco img{ border-radius:22px; border:1px solid var(--apoyo); }

/* Vitrina: computadora y celular lado a lado */
.vitrina{ display:grid; gap:var(--e4); align-items:end; }
.vitrina .captura--movil{ max-width:280px; }
@media (min-width:900px){
  .vitrina{ grid-template-columns:minmax(0,1fr) 250px; column-gap:var(--e5); }
  .vitrina .captura--movil{ max-width:none; }
}
@media (max-width:899px){
  .vitrina .captura--movil{ justify-self:center; width:62%; }
}

/* Cifras grandes */
.cifras{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--e4) var(--medianil); }
.cifras > div{ display:grid; gap:var(--e2); align-content:start; padding-top:var(--e3); border-top:2px solid var(--carbon); }
.cifras dt{
  font-family:var(--f-titulo); font-weight:600;
  font-size:clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  line-height:1; letter-spacing:-0.045em; color:var(--verde-prof);
  font-variant-numeric:tabular-nums;
}
.cifras dd{ margin:0; color:var(--gris-texto); max-width:28ch; }
@media (min-width:900px){
  .cifras{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}


/* El caso en tres columnas: desafío, qué hicimos, cómo funciona hoy.
   Se lee de un vistazo; la última columna, la del resultado, va en verde. */
.tramo{ display:grid; gap:var(--e4) var(--medianil); }
.tramo > div{ display:grid; gap:var(--e2); align-content:start;
  padding-top:var(--e3); border-top:2px solid var(--carbon); }
.tramo > div:last-child{ border-top-color:var(--verde); }
.tramo dt{ font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--verde-texto); }
.tramo dd{ margin:0; font-size:1.0625rem; line-height:1.6; max-width:42ch; }
@media (min-width:900px){
  .tramo{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* Cuatro pasos de una línea */
.pasos-cortos{ display:grid; gap:var(--e3) var(--medianil); counter-reset:none; }
.pasos-cortos > li{ display:grid; gap:6px; align-content:start;
  padding:var(--e4); border:1px solid var(--neutro-300); border-radius:var(--r-plano); background:var(--blanco); }
.pasos-cortos__n{ font-family:var(--f-titulo); font-weight:600; font-size:1rem;
  color:var(--verde-texto); font-variant-numeric:tabular-nums; }
.pasos-cortos h3{ font-size:clamp(1.125rem, 1.05rem + .4vw, 1.3125rem); letter-spacing:-0.02em; }
.pasos-cortos p{ color:var(--gris-texto); font-size:15px; line-height:1.5; }
@media (min-width:640px){ .pasos-cortos{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1040px){ .pasos-cortos{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* «Puede servirte si…» sobre el plano verde */
.sirve{ display:grid; gap:0; border-top:1px solid rgba(255,255,255,.28); max-width:820px; }
.sirve > li{
  position:relative; padding:var(--e3) 0 var(--e3) var(--e5);
  border-bottom:1px solid rgba(255,255,255,.28);
  font-size:clamp(1.0625rem, 1rem + .4vw, 1.25rem); line-height:1.45; color:var(--blanco);
}
.sirve > li::before{
  content:""; position:absolute; left:4px; top:calc(var(--e3) + .32em);
  width:14px; height:8px; border-left:2px solid var(--verde-200); border-bottom:2px solid var(--verde-200);
  rotate:-45deg;
}

/* Bloque «Proyectos entregados» en la portada */
.portada-proyectos{ margin-top:var(--cabeza); display:grid; gap:var(--e3); }

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .vitrina > *,
    .tramo > div,
    .pasos-cortos > li,
    .cifras > div,
    .sirve > li,
    .biblio--dos > .ficha{
      animation:aparecer linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 16%;
    }
  }
}