/* Hoja compartida por las páginas legales.

   Son HTML sueltos y no vistas de la app a propósito: el texto legal NO puede
   depender de JavaScript para ser visible. Si mañana el bundle falla, la
   política sigue leyéndose. Es la misma regla que se aplicó en el sitio en
   vivo, y ahí se verificó renderizando la página en un iframe sin scripts. */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
}

:root {
  --surface: #0a0a0c;
  --ink: #f2f4f6;
  --ink-body: #c3c9d1;
  --ink-mute: #7a828d;
  --line: rgba(242, 244, 246, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 1.5rem 6rem;
  background: var(--surface);
  color: var(--ink-body);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.envoltura {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
}

.volver {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 2rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  text-decoration: none;
}

.volver:hover {
  color: var(--ink);
}

h1 {
  margin: 2.5rem 0 0.5rem;
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 4.5rem);
  line-height: 1.09;
  letter-spacing: -0.015em;
  color: var(--ink);
}

h2 {
  margin: 3rem 0 0.75rem;
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.fecha {
  margin: 0 0 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
}

p,
li {
  max-width: 68ch;
}

ul {
  padding-left: 1.2rem;
}

li {
  margin-bottom: 0.4rem;
}

a {
  color: var(--ink);
}

strong {
  font-weight: 600;
  color: var(--ink);
}

.pendiente {
  display: block;
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--ink-mute);
  background: rgba(242, 244, 246, 0.04);
  font-size: 0.92rem;
  color: var(--ink-mute);
}

footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--ink-mute);
}