/**
 * Hoja común de las páginas legales.
 *
 * Antes cada página llevaba su propio <style> con fuentes del sistema, esquinas
 * de 12 px y una «P» dibujada a mano en lugar del logotipo: se notaba que no
 * eran de Obrapin. Esto las devuelve al sistema de la landing —los mismos
 * tokens de `landing/src/tokens.css`—, y al ser un solo fichero, cambiar el
 * aspecto de las cuatro es tocar aquí.
 *
 * Dos decisiones que parecen detalle y no lo son:
 *  · Los RADIOS son de 2-5 px. En Obrapin «casi nada es redondo»; las esquinas
 *    de 12 px eran lo que más chirriaba.
 *  · El LIMA es de acento, nunca fondo de texto largo. Aparece en el filete
 *    bajo el título y poco más.
 */

/* Las fuentes van AUTOALOJADAS y con ruta relativa, como en la landing. Las dos
   cosas por el mismo motivo: estos ficheros se sirven desde obrapin.com Y desde
   api.obrapin.com, así que una ruta absoluta a /media/ solo funcionaría en uno
   de los dos dominios; y depender de Google Fonts metería una llamada a un
   tercero en unas páginas que existen precisamente para hablar de privacidad. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('./PlusJakartaSans-VF.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'MuseoModerno';
  src: url('./MuseoModerno-700.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* rampa de tinta — la única rampa neutra, igual que en la landing */
  --ink-900: #0d0d0f;
  --ink-600: #2b2b31;
  --ink-400: #6b6b75;
  --ink-100: #e6e6e9;
  --ink-050: #f7f7f5;
  --paper: #ffffff;
  --lime: #d2fe07;

  --surface-page: var(--paper);
  --surface-panel: var(--ink-050);
  --text-primary: var(--ink-900);
  --text-body: var(--ink-600);
  --text-dim: var(--ink-400);
  --hairline: var(--ink-100);

  --font: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-wordmark: 'MuseoModerno', var(--font);
  --tracking-label: 0.1em;

  --r-media: 2px;
  --r-control: 3px;
  --r-tag: 5px;
}

/* Piel de tinta. La landing va siempre en claro, pero a estas páginas se llega
   desde la app —que es oscura— y deslumbrar a quien viene de ahí es peor que
   no tener el modo. Se invierte la MISMA rampa: sin colores nuevos. */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-page: var(--ink-900);
    --surface-panel: #16161a;
    --text-primary: #f4f4f6;
    --text-body: #d3d3da;
    --text-dim: #9a9aa4;
    --hairline: #26262c;
  }
}

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

html {
  background: var(--surface-page);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.hoja {
  /* ~68 caracteres de medida: por encima, el ojo pierde el renglón */
  max-width: 44rem;
  margin: 0 auto;
  padding: 40px 24px 112px;
}

/* ---------------------------------------------------------------- cabecera */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--hairline);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.marca img {
  width: 26px;
  height: 26px;
  display: block;
  border-radius: var(--r-media);
}
.marca span {
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}

/* Selector de idioma. Eran dos píldoras (EN · ES); diez no caben junto al logo
   en un móvil de 375 px, así que ahora es un `select` NATIVO: abre el selector
   del sistema en el móvil y funciona con teclado y lector de pantalla sin
   montar ningún menú.

   Lo que se VE es la píldora de siempre con el código del idioma («DE») y una
   flecha; el `select` va encima, transparente, y es el que recibe el toque. Su
   letra es de 16 px a propósito: con menos, Safari de iOS amplía la página al
   tocarlo y el lector se queda con la página ampliada. */
.idiomas {
  position: relative;
  display: inline-flex;
  flex: none;
}
.idiomas select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* el desplegado lo pinta el sistema: en escritorio sí hace falta fondo y tinta */
.idiomas option {
  background: var(--surface-page);
  color: var(--text-primary);
}
.idiomas__actual {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-primary);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  padding: 5px 10px;
}
/* la flecha, dibujada con dos bordes: sin ella la píldora no se lee como
   desplegable. Toma el color de la piel, así que vale también en oscuro. */
.idiomas__actual::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--text-dim);
  border-bottom: 1.5px solid var(--text-dim);
  transform: translateY(-2px) rotate(45deg);
}
.idiomas:hover .idiomas__actual {
  border-color: var(--text-dim);
}
/* el foco lo recibe el `select`, que es invisible: el anillo va en la píldora */
.idiomas select:focus-visible + .idiomas__actual {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- tipografía */
h1 {
  color: var(--text-primary);
  font-size: clamp(30px, 5.2vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.9px;
  text-wrap: balance;
  margin: 0;
}

/* el filete lima: el único acento de color de la página */
h1 + .vigencia::before {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  background: var(--lime);
  margin: 18px 0 14px;
}

.vigencia {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin: 0 0 32px;
}

h2 {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.3;
  margin: 48px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

h3 {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
  margin: 28px 0 6px;
}

p,
li {
  margin: 0 0 14px;
}
ul,
ol {
  padding-left: 20px;
}
li::marker {
  color: var(--text-dim);
}
strong {
  color: var(--text-primary);
  font-weight: 700;
}

a {
  color: var(--text-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: var(--lime);
}

/* -------------------------------------------------------------- elementos */
.caja {
  background: var(--surface-panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-tag);
  padding: 20px 22px 8px;
  margin: 22px 0 26px;
}
.caja > :last-child {
  margin-bottom: 14px;
}

/* La tabla necesita su propio contenedor con scroll: si desbordara la página,
   el cuerpo entero se movería de lado en el móvil. */
.tabla {
  overflow-x: auto;
  margin: 18px 0 26px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-tag);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.55;
}
th,
td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  /* palabras compuestas largas (alemán, neerlandés): se parten en vez de
     desbordar la tabla (29-09-2026) */
  hyphens: auto;
  overflow-wrap: anywhere;
}
tr:last-child td {
  border-bottom: 0;
}
th {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background: var(--surface-panel);
  white-space: nowrap;
}

/* las cifras del uso razonable */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
  margin: 24px 0 28px;
}
.cifra {
  border: 1px solid var(--hairline);
  border-radius: var(--r-tag);
  padding: 14px 16px;
}
.cifra b {
  display: block;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.cifra span {
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.35;
  display: block;
  margin-top: 2px;
}

.pie {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  color: var(--text-dim);
  font-size: 13.5px;
}
.pie a {
  color: var(--text-dim);
}

/* --------------------------------------------------------------- idiomas */
/* El HTML sale con el INGLÉS visible: quien lo lea sin JavaScript —el revisor
   de Google, un rastreador— encuentra el idioma por defecto de la ficha, no
   una página en blanco. Los otros nueve los enciende `legal.js` poniendo su
   código en <html lang>.

   Cada idioma va NOMBRADO, en vez de apagar el inglés con un genérico
   «html:not([lang='en'])»: si algo ajeno cambia el <html lang> —un traductor
   automático, una extensión—, la regla genérica apagaría el inglés sin
   encender nada y la página quedaría en blanco. Así, en el peor caso, se ve
   el inglés. */
[data-lang]:not([data-lang='en']) {
  display: none;
}
html[lang='es'] [data-lang='es'],
html[lang='ca'] [data-lang='ca'],
html[lang='fr'] [data-lang='fr'],
html[lang='de'] [data-lang='de'],
html[lang='it'] [data-lang='it'],
html[lang='pt'] [data-lang='pt'],
html[lang='pt-BR'] [data-lang='pt-BR'],
html[lang='nl'] [data-lang='nl'],
html[lang='pl'] [data-lang='pl'] {
  display: revert;
}
html[lang='es'] [data-lang='en'],
html[lang='ca'] [data-lang='en'],
html[lang='fr'] [data-lang='en'],
html[lang='de'] [data-lang='en'],
html[lang='it'] [data-lang='en'],
html[lang='pt'] [data-lang='en'],
html[lang='pt-BR'] [data-lang='en'],
html[lang='nl'] [data-lang='en'],
html[lang='pl'] [data-lang='en'] {
  display: none;
}

@media print {
  .idiomas {
    display: none;
  }
}