/* ============================================================
   Penwork — capa base del sistema de diseño

   Reset mínimo, tipografía auto-hospedada, elementos de documento,
   accesibilidad y utilidades. Sin un solo literal de color: todo
   sale de `tokens.css`, que se carga antes.

   Orden de la cascada, y hace falta que sea ese:
     tokens.css → base.css → componentes.css → hoja del consumidor
   ============================================================ */

/* --- Tipografía de marca -------------------------------------------------- */
/* Auto-hospedada: `style-src 'self'` y `font-src 'self'` descartan Google
   Fonts, y servirlas desde Google filtraría la IP de cada visitante a un
   tercero (ADR-1c.2).

   Ruta ABSOLUTA y nunca relativa: estos ficheros se sirven sin huella de
   contenido, y una `url()` relativa desde esta hoja resolvería contra el hash
   de la hoja en vez de contra el de la fuente — 404 mudo, que ni las pruebas ni
   el gate de humo detectan porque ambos solo miran el HTML.

   El contrato para cualquier consumidor: servir `design/fuentes/` bajo
   `/static/fuentes/`. Ver `fuentes/PROCEDENCIA.md`. */

@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fuentes/gabarito-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fuentes/gabarito-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/static/fuentes/gabarito-latin-900-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fuentes/karla-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fuentes/karla-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fuentes/karla-latin-700-normal.woff2") format("woff2");
}

/* --- Reset --------------------------------------------------------------- */

* { box-sizing: border-box; }

/* `[hidden]` gana siempre, y hace falta que sea así.
 *
 * El navegador oculta los elementos con el atributo `hidden` mediante una regla
 * `[hidden] { display: none }` de su hoja de user-agent, y en la cascada CSS
 * **cualquier** regla de autor que fije `display` la anula, sin importar la
 * especificidad. Le pasó al aviso de versión nueva: `.aviso-version` es flex,
 * así que el banner se veía siempre y ni el botón de descartar ni la recarga lo
 * quitaban. Con esto, `elemento.hidden = true` oculta de verdad, y ese es el
 * contrato que asume todo el JavaScript del producto. */
[hidden] { display: none !important; }

/* `color-scheme: light` no es un tema: es lo que le dice al motor cómo dibujar
   lo que NO podemos estilar —el desplegable abierto de un `select`, las barras
   de desplazamiento, el cursor de texto—. Sin esto, con el sistema operativo en
   oscuro esos trozos salen oscuros dentro de una interfaz clara: en la web se
   nota poco, y en el agente de escritorio (que mantiene la identidad clara y no
   sigue al SO, ADR-2at.4) se ve una lista blanca sobre blanco al desplegar un
   certificado. Lo destapó la auditoría de ventanas pequeñas de la Fase 2a-ter.
   No es una consulta de medios del tema del sistema y no trae paleta ninguna:
   aquí no hay modo oscuro que elegir (ADR-1c.8). */
html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--txt);
  font-family: var(--tipo-texto);
  font-size: var(--texto-cuerpo);
  line-height: var(--interlinea);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--tipo-titulo);
  font-weight: 900;
  letter-spacing: var(--apiete-titulo);
  line-height: var(--interlinea-titulo);
}
h1 { font-size: var(--texto-h1); }
h2 { font-size: var(--texto-h2); }
h3 { font-size: var(--texto-h3); }
h4 { font-size: var(--texto-cuerpo); }

p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; }

a { color: inherit; text-decoration-thickness: from-font; }
a:hover { color: var(--azul); }

img, svg { max-width: 100%; }

hr {
  border: 0;
  border-top: var(--borde-ancho) solid var(--borde);
  margin: var(--esp-5) 0;
}

code, kbd, samp, pre { font-family: var(--tipo-mono); font-size: 0.9375em; }

/* --- Accesibilidad ------------------------------------------------------- */

/* Anillo de foco visible en todo momento. Sale del token `--foco`, que cada
   superficie redefine para su subárbol: azul sobre claro (7,58:1 sobre blanco)
   y mantequilla sobre oscuro, porque el azul sobre negro se hunde a 2,45:1.
   Ver «Contratos de superficie» en `componentes.css`. */
:focus-visible {
  outline: var(--foco-ancho) solid var(--foco);
  outline-offset: var(--foco-margen);
}
/* Salto al contenido: el primer tabulador de cada página. Visible solo al
   enfocarlo, pero nunca `display: none` — un lector de pantalla tiene que
   poder anunciarlo. */
.salto {
  position: absolute;
  left: var(--esp-1);
  top: calc(-1 * var(--esp-8));
  z-index: 100;
  background: var(--mantequilla);
  color: var(--negro);
  border: var(--borde-ancho) solid var(--borde);
  box-shadow: var(--sombra);
  font-family: var(--tipo-titulo);
  font-weight: 700;
  padding: var(--esp-2) var(--esp-3);
  text-decoration: none;
  transition: top var(--micro);
}
.salto:focus { top: var(--esp-1); color: var(--negro); }

/* Contenido para lectores de pantalla que no ocupa sitio en la página. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hay transiciones y desplazamientos por toda la identidad —el botón que se
   levanta, la sombra que crece—, así que esta regla no es un adorno: es la
   única forma de que quien pida menos movimiento no lo reciba. Va al final de
   la capa base para ganar a cualquier `transition` declarada antes. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* El desplazamiento del hover se anula por completo: reducir su duración no
     bastaría, el elemento seguiría moviéndose. */
  *:hover, *:active { transform: none !important; }
}

/* --- Utilidades --------------------------------------------------------- */

/* Texto funcional: en Gabarito, como los titulares. Etiquetas, cifras,
   cabeceras de tabla y todo lo que se lee de un vistazo. */
.g { font-family: var(--tipo-titulo); font-weight: 700; }

/* Texto secundario. Nunca por debajo de AA: --txt-2 da 6,43 sobre blanco. */
.tenue { color: var(--txt-2); }

/* Wordmark: Pen[work], con el segundo tramo sobre mantequilla. El subrayado se
   quita a propósito —`<u>` es el elemento con la semántica correcta para un
   tramo marcado— y lo sustituye el fondo. */
.marca {
  font-family: var(--tipo-titulo);
  font-weight: 900;
  letter-spacing: var(--apiete-marca);
  text-decoration: none;
  color: inherit;
}
.marca u {
  text-decoration: none;
  background: var(--mantequilla);
  color: var(--negro);
  padding: 0 3px;
}
.marca:hover { color: inherit; }

/* Rótulo en mayúsculas sobre mantequilla: el «eyebrow» de las secciones. */
.eyebrow {
  display: inline-block;
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: var(--texto-micro);
  letter-spacing: var(--separa-etiqueta);
  text-transform: uppercase;
  background: var(--mantequilla);
  color: var(--negro);
  padding: var(--esp-0) var(--esp-2);
}

/* Rótulo de sección sin fondo, en azul. Sobre superficie oscura hereda el
   color de su contenedor (`.oscuro .rotulo` en componentes). */
.rotulo {
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: var(--texto-micro);
  letter-spacing: var(--separa-etiqueta);
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: var(--esp-2);
}

/* Entradilla: el párrafo que acompaña a un titular. */
.lede {
  font-size: var(--texto-guia);
  line-height: var(--interlinea-guia);
  max-width: var(--ancho-lede);
}

/* Contenedor de las páginas públicas. */
.envoltura {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--esp-4);
}

/* Medida de lectura para los textos largos (privacidad, términos). */
.prosa { max-width: var(--ancho-texto); }
.prosa p, .prosa ul, .prosa ol { margin-top: var(--esp-3); }
.prosa h2 { margin-top: var(--esp-5); }
.prosa h3 { margin-top: var(--esp-4); }
.prosa li { margin-left: var(--esp-4); }

@media (max-width: 640px) {
  .envoltura { padding: 0 var(--esp-3); }
}