/* ═══════════════════════════════════════════════════════════════
   ZONA DOGSO · BASE
   1 Tipografías · 2 Tokens · 3 Reset · 4 Texto · 5 Utilidades
   6 Botones y enlaces · 7 Rótulos y metadatos · 8 Movimiento reducido
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · TIPOGRAFÍAS ────────────────────────────────────────────
   Alojadas en la propia web (no en Google Fonts): carga más rápida y
   ningún dato del lector viaja a terceros. Son variables: un único
   fichero cubre todos los grosores. */
@font-face{font-family:'Montserrat';src:url('/assets/fonts/montserrat.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/source-sans-3.woff2') format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/source-sans-3-italic.woff2') format('woff2');font-weight:200 900;font-style:italic;font-display:swap}

/* ── 2 · TOKENS ─────────────────────────────────────────────────
   Paleta del briefing ajustada a los ficheros del logo. Contrastes
   medidos sobre blanco salvo indicación:
   --tinta 17.7:1 · --tinta-2 7.6:1 · --tinta-3 4.8:1 · --azul 5.3:1
   El azul del briefing (#2F6BFF) da 4.5:1 justo; se oscurece un punto
   hasta el del propio logo para que los enlaces pasen AA con holgura.
   El dorado sólo funciona sobre marino (6.9:1) o en cifras grandes
   (--oro-txt, 4.6:1). El cian es exclusivo de los datos. */
:root{
  --marino:#0B1F3A;
  --marino-2:#13305A;
  --marino-3:#1D3E6E;
  --azul:#1F5BFF;
  --azul-hover:#1748D0;
  --azul-suave:#E6EDFF;
  --azul-nav:#2F6BFF;              /* el azul claro del briefing, para la navegación */
  --cian:#00C2D1;
  --cian-txt:#007A85;
  --oro:#D4A82A;
  --oro-txt:#8C6A0B;

  --tinta:#111827;
  --tinta-2:#3F4A5C;
  --tinta-3:#5F6B7D;
  --papel:#FFFFFF;
  --papel-2:#F3F6FA;
  --papel-3:#E9EEF5;
  --linea:#DCE3EC;
  --linea-2:#C4CFDD;

  /* Series de los gráficos, en este orden. */
  --c-serie-1:#1F5BFF;
  --c-serie-2:#00B3C1;
  --c-serie-3:#0B1F3A;
  --c-serie-4:#D4A82A;
  --c-destacado:#1F5BFF;
  --c-atenuado:#C4CFDD;

  --titular:'Montserrat',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --texto:'Source Sans 3',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --caja:1680px;
  --gut:clamp(16px,3.5vw,48px);
  --radio:6px;
  --e:cubic-bezier(.22,1,.36,1);
  --sombra:0 1px 2px rgba(11,31,58,.06),0 8px 24px -12px rgba(11,31,58,.18);
}

/* ── 3 · RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1.0625rem/1.6 var(--texto);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
table{border-collapse:collapse}
[hidden]{display:none !important}

/* ── 4 · TEXTO ──────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--titular);font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--marino);
  text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--azul);color:#fff}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px;border-radius:2px}

/* ── 5 · UTILIDADES ─────────────────────────────────────────── */
.caja{width:100%;max-width:calc(var(--caja) + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saltar{position:absolute;left:var(--gut);top:-60px;z-index:100;background:var(--marino);color:#fff;padding:10px 16px;
  font:700 .875rem var(--titular);border-radius:var(--radio)}
.saltar:focus{top:10px}

/* ── 6 · BOTONES Y ENLACES ──────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border:0;
  border-radius:var(--radio);background:var(--azul);color:#fff;text-decoration:none;
  font:700 .9375rem/1 var(--titular);letter-spacing:.01em;transition:background .2s,transform .2s var(--e)}
.btn:hover{background:var(--azul-hover)}
.btn:active{transform:translateY(1px)}
.btn--sm{min-height:38px;padding:0 16px;font-size:.8125rem}
.btn--dorado{background:var(--oro);color:var(--marino)}
.btn--dorado:hover{background:#E4B935}

.icono-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;
  color:var(--marino);transition:background .2s}
.icono-btn:hover{background:var(--papel-3)}

/* Enlace con flecha: «Leer el análisis →». La flecha avanza al pasar. */
.enl-flecha{display:inline-flex;align-items:center;gap:8px;font:700 .875rem/1.2 var(--titular);color:var(--azul);
  text-decoration:none}
.enl-flecha::after{content:'→';font-weight:600;transition:transform .25s var(--e)}
.enl-flecha:hover::after{transform:translateX(4px)}
.enl-flecha:hover{text-decoration:underline;text-underline-offset:4px}

/* ── 7 · RÓTULOS Y METADATOS ────────────────────────────────── */
/* Kicker: la sección encima de cada titular. El cuadradito azul es la
   «marca de banda»: el único adorno que se repite en toda la web. */
.kicker{display:inline-flex;align-items:center;gap:8px;font:800 .6875rem/1 var(--titular);letter-spacing:.12em;
  text-transform:uppercase;color:var(--azul);text-decoration:none}
.kicker::before{content:'';width:8px;height:8px;background:currentColor}
.kicker:hover{text-decoration:underline;text-underline-offset:3px}

.rotulo{display:flex;align-items:center;gap:12px;font:800 .75rem/1 var(--titular);letter-spacing:.14em;
  text-transform:uppercase;color:var(--marino)}
.rotulo::after{content:'';flex:1;height:2px;background:var(--marino)}
.rotulo--claro{color:inherit}
.rotulo--claro::after{background:currentColor;opacity:.35}

.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font:500 .8125rem/1.3 var(--texto);color:var(--tinta-3)}
.meta>*+*::before{content:'';display:inline-block;width:3px;height:3px;margin-right:12px;border-radius:50%;
  background:currentColor;vertical-align:middle}
.marca-borrador{font-weight:700;color:#B42318}

/* ── 8 · MOVIMIENTO REDUCIDO ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
}