/* ==========================================================================
   ANGCOR — base
   Sistema de tipografia suizo, tokens de color, reset y accesibilidad.

   Dos familias, una funcion cada una:
   Archivo   grotesca. Condensada 700 para todo lo que titula,
             normal 400/500 para leer.
   IBM Plex Mono  rotulos, indices, datos. Nunca texto corrido.
   ========================================================================== */

@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-stretch:100%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+2215;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-stretch:100%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+2215;
}
/* La condensada viaja como familia aparte para que nada la herede por error. */
@font-face{
  font-family:'Archivo Cond';
  src:url('../fonts/archivo-cond-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+2215;
}
@font-face{
  font-family:'Plex Mono';
  src:url('../fonts/plexmono-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+2215;
}

:root{
  /* --- paleta: la del brief, con papel calido en vez de blanco puro ------- */
  --navy-900:#060F26;
  --navy-800:#0A1F44;
  --navy-700:#122B4A;
  --navy-600:#1B3A5C;
  --gold-500:#C9A227;
  --gold-400:#D4B24A;
  /*
   * El dorado de marca no alcanza contraste AA como texto sobre papel: da
   * 2.2:1. Esta version oscura da 5.4:1 y se usa solo cuando el dorado es
   * texto sobre fondo claro. Como filete, borde o relleno sigue el de marca.
   */
  --gold-ink:#7A5F0E;
  --bronze:#B08D57;
  --white:#FFFFFF;
  --paper:#F4F2ED;
  --paper-deep:#EAE7DF;
  --grey-050:#F5F6F8;
  --grey-200:#E2E5EA;
  --grey-500:#8A93A3;
  --ink:#0B1220;

  /* --- tipografia -------------------------------------------------------- */
  --font-display:'Archivo Cond','Archivo Narrow','Arial Narrow',system-ui,sans-serif;
  --font-body:'Archivo',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --font-mono:'Plex Mono',ui-monospace,'SFMono-Regular','Menlo',monospace;

  --gutter:clamp(1.25rem,5vw,6rem);
  --section-y:clamp(6rem,14vh,12rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out-expo:cubic-bezier(.19,1,.22,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1);

  /*
   * Radios: la pildora sobrevive solo en controles. Los bloques de contenido
   * van a esquina viva y se marcan con una sola muesca, --r-notch, en la
   * esquina que toque. Asi el redondeo vuelve a significar algo.
   */
  --r-xs:2px;
  --r-sm:3px;
  --r-md:0px;
  --r-lg:0px;
  --r-xl:0px;
  --r-notch:clamp(28px,4vw,56px);
  --r-pill:999px;

  /* derivados */
  --rule:rgba(201,162,39,.32);
  --rule-soft:rgba(201,162,39,.16);
  --rule-ghost:rgba(201,162,39,.06);
  --ink-60:rgba(11,18,32,.62);
  --ink-40:rgba(11,18,32,.40);
  --ink-12:rgba(11,18,32,.10);
  --ink-06:rgba(11,18,32,.06);
  --white-70:rgba(255,255,255,.72);
  --white-45:rgba(255,255,255,.45);
  --white-12:rgba(255,255,255,.12);
  --white-06:rgba(255,255,255,.06);
  --nav-h:5rem;

  /* progreso de scroll, lo escribe motion.js */
  --scroll:0;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-h);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.62;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:'ss01' 1,'cv01' 1;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
  margin:0;
  text-wrap:balance;
}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

a{color:inherit;text-decoration:none}

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

ul{margin:0;padding:0;list-style:none}

button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

address{font-style:normal}

::selection{background:var(--gold-500);color:var(--navy-900)}

/* --- escala de tipografia ---------------------------------------------------
   Un solo estilo titula: condensada 700 en versal. La jerarquia la hace el
   tamano, no el peso ni la familia. Es lo que separa un sistema de un
   surtido de estilos.
   ------------------------------------------------------------------------- */

.t-display{
  font-family:var(--font-display);
  font-size:clamp(3.25rem,10.5vw,10rem);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:.88;
  text-transform:uppercase;
}
.t-h2{
  font-family:var(--font-display);
  font-size:clamp(2.25rem,6.4vw,5.5rem);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:.94;
  text-transform:uppercase;
}
.t-h3{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2.2vw,2rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.04;
  text-transform:uppercase;
}
.t-mono{
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.5;
  font-feature-settings:'zero' 1;
}
.t-lead{
  font-size:clamp(1.0625rem,.98rem + .5vw,1.375rem);
  line-height:1.5;
  font-weight:400;
  max-width:36ch;
  text-wrap:pretty;
}
.t-small{font-size:.9375rem;line-height:1.6}

/* Numeros grandes: la pieza visual que lleva el peso de la composicion. */
.t-numeral{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(5rem,16vw,15rem);
  line-height:.78;
  letter-spacing:-.05em;
  font-feature-settings:'tnum' 1;
}

.accent{color:var(--gold-ink)}
.accent-i{font-style:normal;font-weight:700}
.on-dark .accent{color:var(--gold-400)}

/*
 * Contorno: el titular deja de ser una masa solida y respira. Se usa en una
 * sola palabra por titular, nunca en dos.
 */
.outline{
  color:transparent;
  -webkit-text-stroke:1px currentColor;
  paint-order:stroke fill;
}
.on-dark .outline{-webkit-text-stroke-color:var(--gold-400)}
@supports not (-webkit-text-stroke:1px currentColor){
  .outline{color:inherit}
}

/* --- accesibilidad -------------------------------------------------------- */

.screen-reader-text{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-100px;
  z-index:2000;
  background:var(--navy-800);
  color:var(--white);
  padding:.85rem 1.5rem;
  border:1px solid var(--gold-500);
  border-radius:var(--r-pill);
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:top .25s var(--ease);
}
.skip-link:focus{top:.75rem}

:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
.on-dark :focus-visible{outline-color:var(--gold-400)}