/* ════════════════════════════════════════════════════════════════
   MISIÓN LATAM · «atlas editorial»
   La web como un atlas de la región: tipografía monumental (Anton),
   lectura en Inter, papel hueso con grano, coordenadas como motivo
   (Quito → CDMX), reglas finas en vez de tarjetas, una sola franja
   oscura (México 2027) y color solo donde significa algo:
   turquesa = el continente · azul Misión = donde operamos · coral = acento.
   ════════════════════════════════════════════════════════════════ */
@font-face{font-family:Anton;src:url(assets/fonts/Anton.ttf) format('truetype');font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/Inter-400.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/Inter-600.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/Inter-700.ttf) format('truetype');font-weight:700;font-display:swap}

:root{
  --hueso:#F4F1EA; --navy:#121427; --azul:#213C74; --turquesa:#4CE7CC;
  --coral:#FF6B5B; --amarillo:#FFCC5D; --tinta2:#4A5068; --regla:rgba(18,20,39,.16);
  --m:clamp(20px,4.2vw,72px);                 /* margen lateral */
  --cap:clamp(96px,13vw,200px);               /* aire entre capítulos */
  --e-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--hueso);color:var(--navy);font-family:Inter,system-ui,sans-serif;
  font-size:clamp(16px,.5vw + 13px,19px);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* grano de papel: ruido SVG, muy tenue */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,.pais-nombre,.lista h3,.mx-anio,.cifras dt{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.005em}
em{font-style:normal;color:var(--coral)}
:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
.saltar{position:absolute;left:-999px;top:8px;background:var(--navy);color:var(--hueso);padding:10px 16px;z-index:200}
.saltar:focus{left:8px}

/* rótulo de capítulo: «(01) Propósito» */
.rotulo{display:flex;align-items:baseline;gap:12px;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta2)}
.rotulo small{font:inherit;color:var(--coral);letter-spacing:.06em}
.rotulo-claro{color:#AEB4C6}

/* enlace con flecha: sin botones-píldora */
.flecha{display:inline-flex;align-items:center;gap:14px;font-weight:700;text-decoration:none;font-size:1.02em;
  padding-bottom:6px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;transition:gap .35s var(--e-out)}
.flecha::after{content:"→";transition:transform .35s var(--e-out)}
.flecha:hover{gap:22px}
.flecha-clara{color:var(--hueso)}

/* ── barra ── */
.barra{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
  padding:12px var(--m);background:var(--hueso);
  border-bottom:1px solid var(--regla)}
.barra-logo img{height:42px;width:auto}
.barra-coord{justify-self:center;display:flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta2);font-variant-numeric:tabular-nums}
.barra-coord i{width:56px;height:1px;background:currentColor;position:relative}
.barra-coord i::after{content:"";position:absolute;right:-1px;top:-3px;border:3.5px solid transparent;border-left-color:currentColor;border-right:0}
.indice{display:flex;gap:22px;font-size:14px;font-weight:600}
.indice a{text-decoration:none;display:flex;gap:6px;align-items:baseline}
.indice small{font-size:11px;color:var(--coral)}
.indice a:hover{color:var(--azul)}
.barra-menu{display:none;font:inherit;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:0;border-bottom:2px solid var(--navy);padding:4px 0;color:var(--navy);cursor:pointer}
@media (max-width:1180px){.barra-coord{display:none}.barra{grid-template-columns:auto 1fr auto}}
@media (max-width:900px){
  .barra-menu{display:block;grid-column:3}
  .indice{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--hueso);
    border-bottom:1px solid var(--regla);padding:8px var(--m) 20px}
  .indice.abierto{display:flex}
  .indice a{padding:14px 0;border-bottom:1px solid var(--regla);font-size:18px}
}

/* ── portada ── */
.portada{position:relative;min-height:min(calc(100svh - 67px),980px);padding:clamp(28px,4vw,56px) var(--m) clamp(28px,4vw,56px);
  display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:1fr auto;column-gap:20px}
.portada-titulo{grid-column:1 / 9;grid-row:1;position:relative;z-index:2;align-self:start;
  font-size:clamp(64px,9.6vw,180px);line-height:1;pointer-events:none}
.portada-titulo .l{display:block;overflow:hidden;padding-top:.26em;margin-top:-.26em}   /* aire para las tildes */
.portada-titulo .l:nth-child(2){padding-left:12%;margin-top:-.08em}   /* la tilde de AMÉRICA en Anton es alta */
.portada-mapa{grid-column:8 / 13;grid-row:1 / 3;position:relative;align-self:center;justify-self:end;width:min(100%,600px);z-index:1}
.portada-mapa img{width:100%}
.pin{position:absolute;transform:translate(14px,-50%);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta2);white-space:nowrap;padding-left:46px}
.pin::before{content:"";position:absolute;left:0;top:50%;width:40px;height:1px;background:var(--navy)}
.pin b{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:22px;letter-spacing:.02em;color:var(--navy);line-height:1}
.pin-ec{transform:translate(18px,-50%)}
.pin-mx{transform:translate(64px,-50%)}
.portada-pie{grid-column:1 / 7;grid-row:2;align-self:end;max-width:520px;position:relative;z-index:2}
.portada-lema{font-weight:700;font-size:1.15em;color:var(--azul)}
.portada-texto{margin:12px 0 26px;color:var(--tinta2)}
@media (max-width:900px){
  .portada{grid-template-rows:auto auto auto;min-height:auto}
  .portada-titulo{grid-row:1;grid-column:1 / 13;font-size:clamp(52px,16.5vw,150px)}
  .portada-titulo .l:nth-child(2){padding-left:7%}
  .portada-mapa{grid-column:2 / 13;grid-row:2;margin-top:-6vw;width:100%}
  .portada-pie{grid-column:1 / 13;grid-row:3;margin-top:28px}
  .pin{font-size:10px;padding-left:30px}.pin::before{width:24px}.pin b{font-size:16px}
}

/* ── cinta ── */
.cinta{background:var(--navy);color:var(--hueso);overflow:hidden;border-block:1px solid var(--navy)}
.cinta-pista{display:flex;width:max-content;animation:cinta 38s linear infinite}
.cinta span{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:clamp(28px,3.4vw,52px);padding:16px 0;white-space:nowrap}
.cinta span::after{content:"✦";font-family:Inter,sans-serif;font-size:.42em;color:var(--turquesa);margin:0 .9em;vertical-align:middle}
@keyframes cinta{to{transform:translateX(-50%)}}

/* ── capítulos ── */
.capitulo{padding:var(--cap) var(--m) 0}
.capitulo h2{font-size:clamp(44px,6.6vw,112px);line-height:.92;margin-top:22px}

.manifiesto{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px}
.manifiesto .rotulo{grid-column:1 / 4}
.manifiesto-texto{grid-column:4 / 13;font-size:clamp(26px,3.1vw,50px);line-height:1.18;font-weight:600;letter-spacing:-.018em}
.manifiesto-texto mark{background:none;color:var(--azul);box-shadow:inset 0 -.32em 0 rgba(76,231,204,.55)}
.manifiesto-texto u{text-decoration:none;color:var(--coral)}
@media (max-width:900px){.manifiesto .rotulo,.manifiesto-texto{grid-column:1 / 13}.manifiesto-texto{margin-top:24px}}

/* objetivos: índice editorial, cabeza pegajosa */
.objetivos{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px}
.objetivos-cabeza{grid-column:1 / 6;align-self:start;position:sticky;top:110px}
.lista{grid-column:6 / 13;list-style:none;border-top:1px solid var(--navy)}
.lista li{position:relative;display:grid;grid-template-columns:96px 1fr;column-gap:24px;padding:30px 0 34px;border-bottom:1px solid var(--regla);isolation:isolate}
.lista li::before{content:"";position:absolute;inset:0 calc(-1 * var(--m)) 0 -24px;background:var(--turquesa);z-index:-1;
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e-out)}
.lista li:hover::before{transform:scaleX(1)}
.lista-n{grid-row:1 / 3;font-family:Anton,Impact,sans-serif;font-size:64px;line-height:.9;color:transparent;-webkit-text-stroke:1.4px var(--navy)}
.lista h3{font-size:clamp(28px,2.6vw,40px);line-height:1}
.lista p{color:var(--tinta2);margin-top:10px;max-width:46ch}
.lista li:hover p{color:var(--navy)}
@media (max-width:900px){.objetivos-cabeza{grid-column:1 / 13;position:static}.lista{grid-column:1 / 13;margin-top:40px}
  .lista li{grid-template-columns:64px 1fr}.lista-n{font-size:44px}}

/* territorio: dos nombres monumentales y una ruta */
.paises{display:grid;grid-template-columns:1fr 120px 1fr;gap:24px;align-items:end;margin-top:48px}
.pais{border-top:1px solid var(--navy);padding-top:18px}
.pais-coord{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2);font-variant-numeric:tabular-nums}
.pais-nombre{font-size:clamp(64px,10vw,176px)!important;line-height:.85!important;margin-top:10px!important;color:var(--azul)}
.pais-rol{margin-top:14px;font-weight:700;color:var(--coral);text-transform:uppercase;letter-spacing:.12em;font-size:13px}
.pais-texto{margin-top:10px;color:var(--tinta2);max-width:40ch}
.ruta svg{width:100%;height:60px;overflow:visible}
.ruta path{fill:none;stroke:var(--navy);stroke-width:1.2;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
@media (max-width:900px){.paises{grid-template-columns:1fr}.ruta{display:none}}

/* México 2027: la única franja oscura */
.mx{position:relative;margin-top:var(--cap);background:var(--navy);color:var(--hueso);overflow:hidden;
  padding:var(--cap) var(--m)}
.mx-anio{position:absolute;right:-.04em;bottom:-.17em;font-size:clamp(200px,34vw,600px);line-height:1;color:transparent;
  -webkit-text-stroke:1.5px rgba(76,231,204,.45);pointer-events:none;user-select:none}
.mx-dentro{position:relative;max-width:900px}
.mx h2{font-size:clamp(44px,6.2vw,104px);line-height:.92;margin-top:22px}
.mx-texto{margin-top:26px;color:#C9CEDC;max-width:52ch;font-size:1.08em}
.mx-sectores{list-style:none;columns:2;column-gap:40px;margin-top:44px;max-width:640px}
.mx-sectores li{break-inside:avoid;padding:14px 0;border-bottom:1px solid rgba(244,241,234,.18);font-weight:600;font-size:1.06em;display:flex;gap:14px;align-items:baseline}
.mx-sectores small{color:var(--turquesa);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.mx-ejes{display:flex;flex-wrap:wrap;gap:10px 28px;margin:36px 0 40px;font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--amarillo)}
@media (max-width:600px){.mx-sectores{columns:1}}

/* método: un recorrido de cinco paradas */
.metodo-titulo{max-width:18ch}
.recorrido{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);margin-top:64px;position:relative;counter-reset:r}
.recorrido::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--navy)}
.recorrido li{counter-increment:r;position:relative;padding:44px 22px 0 0;color:var(--tinta2);font-size:.95em}
.recorrido li::before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;border-radius:50%;background:var(--hueso);border:1.5px solid var(--navy)}
.recorrido li:last-child::before{background:var(--coral);border-color:var(--coral)}
.recorrido b{display:block;color:var(--navy);font-size:1.12em;margin-bottom:8px}
.recorrido b::before{content:"0" counter(r) "  ";color:var(--coral);font-weight:700}
@media (max-width:900px){.recorrido{grid-template-columns:1fr}.recorrido::before{left:7px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .recorrido li{padding:0 0 30px 40px}}

/* trayectoria */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;border-top:1px solid var(--navy)}
.cifras div{padding:30px 24px 36px 0;border-bottom:1px solid var(--regla)}
.cifras div:not(:nth-child(3n)){border-right:1px solid var(--regla)}
.cifras div:nth-child(3n+2),.cifras div:nth-child(3n){padding-left:24px}
.cifras dt{font-size:clamp(56px,6.4vw,108px);line-height:.9;color:var(--azul);font-variant-numeric:tabular-nums}
.cifras dd{margin-top:12px;color:var(--tinta2);max-width:24ch}
@media (max-width:760px){.cifras{grid-template-columns:1fr 1fr}.cifras div{border-right:0!important;padding-left:0!important}}
.nota{font-size:13px;color:var(--tinta2);margin-top:16px;max-width:72ch}
.aliados{margin-top:72px;max-width:1000px}
.aliados-titulo{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta2)}
.aliados-lista{margin-top:16px;font-size:clamp(20px,2vw,30px);line-height:1.4;font-weight:600;letter-spacing:-.01em}
.aliados-lista i{font-style:normal;color:var(--turquesa);margin:0 .25em;-webkit-text-stroke:.6px var(--azul)}

/* contacto */
.contacto{padding-bottom:var(--cap)}
.contacto-intro{margin-top:26px;font-size:clamp(20px,1.8vw,28px);font-weight:600;max-width:34ch;line-height:1.3}
.contacto-correo{display:flex;align-items:flex-start;gap:.15em;margin:36px 0 40px;font-family:Anton,Impact,sans-serif;
  font-size:clamp(40px,8.6vw,156px);line-height:.95;text-decoration:none;word-break:break-word;color:var(--navy);
  background:linear-gradient(var(--turquesa),var(--turquesa)) 0 92%/0 .14em no-repeat;transition:background-size .6s var(--e-out)}
.contacto-correo:hover{background-size:100% .14em}
.contacto-correo span{font-family:Inter,sans-serif;font-size:.4em;color:var(--coral);transition:transform .4s var(--e-out)}
.contacto-correo:hover span{transform:translate(.1em,-.1em)}

/* pie */
.pie{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:28px var(--m) 36px;border-top:1px solid var(--navy);font-size:14px;color:var(--tinta2)}
.pie a{color:var(--navy);font-weight:700}
.pie-coord{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
@media (max-width:700px){.pie{grid-template-columns:1fr}}

/* movimiento: una sola secuencia de entrada y revelado al hacer scroll */
.js .portada-titulo .l>*,.js .portada-titulo .l{animation:subir 1.1s var(--e-out) both}
.js .portada-titulo .l:nth-child(2){animation-delay:.08s}.js .portada-titulo .l:nth-child(3){animation-delay:.16s}
.js .portada-mapa{animation:aparecer 1.4s .25s var(--e-out) both}
@keyframes subir{from{transform:translateY(60%);opacity:0}}
@keyframes aparecer{from{opacity:0;transform:translateY(24px) scale(.98)}}
.js .revela{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
.js .revela.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.cinta-pista{animation:none}
  .js .revela,.js .portada-titulo .l,.js .portada-mapa{animation:none;opacity:1;transform:none;transition:none}
}