/* ============================================================
   legal.css — Las páginas de aviso de privacidad y términos.

   Mismo mundo que el sitio («Pedestal»), pero en modo LECTURA:
   aquí el visitante viene a entender algo, no a admirarlo. Eso
   cambia tres cosas frente al portafolio: la medida de lectura
   manda, la interlínea se abre, y hay un índice para orientarse.

   Sin hash en el nombre a propósito: si usara el main.<hash>.css
   del build, estas páginas se romperían en la siguiente compilación.
   Por eso los tokens van copiados aquí, no importados.
   ============================================================ */

:root {
  /* La rampa, igual que en el sitio. Nada fuera de ella. */
  --n0: #08090b;
  --n1: #0e0f12;
  --n2: #16181d;
  --n3: #21242b;
  --n4: #363b45;
  --n5: #7d8593;
  --n6: #b3bac6;
  --n7: #f2f4f7;

  /* Del trío sólo entra el oro, y como señal: enlaces y el filete
     del encabezado. Azul y rojo son campos que poseen bandas del
     portafolio; una página legal no es una banda de ese relato. */
  --oro: #d9a21b;
  --oro-senal: #eab63f;
  --tinta: #14110c;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --lectura: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-titulo: clamp(2rem, 1.35rem + 2.8vw, 3.25rem);
  --t-sub: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-cuerpo: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-menor: 0.9375rem;
  --t-pie: 0.8125rem;

  --tr-titulo: -0.025em;
  --tr-sub: -0.018em;
  --tr-cuerpo: -0.011em;
  --tr-pie: 0.005em;

  --e1: 0.5rem;
  --e2: 1rem;
  --e3: 1.5rem;
  --e4: 2.5rem;
  --e5: 4rem;
  --e6: 6rem;

  --margen: clamp(1rem, 0.4rem + 3vw, 3rem);
  --medida: 68ch;
  --r-pildora: 980px;
  --r-1: 6px;
  --r-3: 16px;

  --responde: cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: dark;
  accent-color: var(--oro);
}

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

html {
  /* Desplazamiento progresivo al pulsar el índice, y margen para que
     el título de la sección no quede pegado al borde superior. */
  scroll-behavior: smooth;
  scroll-padding-top: var(--e4);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--n1);
  color: var(--n7);
  font-family: var(--lectura);
  font-size: var(--t-cuerpo);
  /* 1.65, más abierta que el 1.55 del sitio: esto es texto largo y
     seguido, y la interlínea es lo que evita que se pierda el renglón. */
  line-height: 1.65;
  letter-spacing: var(--tr-cuerpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Superficies del navegador ---------- */

::selection { background: var(--oro); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--oro-senal);
  outline-offset: 3px;
  border-radius: 2px;
}

:focus:not(:focus-visible) { outline: none; }

* { caret-color: var(--oro-senal); scrollbar-width: thin; scrollbar-color: var(--n4) var(--n0); }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--n0); }
::-webkit-scrollbar-thumb {
  background: var(--n4);
  border: 3px solid var(--n0);
  border-radius: var(--r-pildora);
}
::-webkit-scrollbar-thumb:hover { background: var(--n5); }

/* ---------- La barra de vuelta ---------- */
/* No es la barra de vidrio del portafolio: aquí no hay contenido
   corriendo por debajo que justifique el material. Es un filete y
   una salida, que es lo que esta página necesita. */

.barra {
  border-bottom: 1px solid var(--n3);
  background: var(--n0);
}

.barra-inner {
  max-width: 76rem;
  margin-inline: auto;
  padding: var(--e1) var(--margen);
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--n6);
  font-size: var(--t-menor);
  text-decoration: none;
  transition: color 180ms var(--responde);
}

.volver:hover { color: var(--n7); }
.volver svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; }

/* ---------- Portada del documento ---------- */

.portada {
  max-width: 76rem;
  margin-inline: auto;
  padding: var(--e5) var(--margen) var(--e4);
}

.portada h1 {
  font-family: var(--display);
  font-size: var(--t-titulo);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: var(--tr-titulo);
  text-wrap: balance;
  font-optical-sizing: auto;
}

/* El filete de oro: la única marca cromática del documento. */
.portada h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-top: var(--e3);
  background: var(--oro);
}

.meta {
  margin-top: var(--e3);
  color: var(--n5);
  font-size: var(--t-menor);
}

.meta b { color: var(--n6); font-weight: 500; }

/* ---------- La rejilla: índice + texto ---------- */

.cuerpo {
  max-width: 76rem;
  margin-inline: auto;
  padding: 0 var(--margen) var(--e6);
  display: grid;
  gap: var(--e5);
}

/* Los hijos de una rejilla llevan `min-width: auto`, así que la columna
   se estira hasta caber el contenido más ancho que haya dentro. La tabla
   de transferencias mide 34rem de mínimo y arrastraba consigo TODA la
   columna: en un teléfono de 390px el documento se salía 172px, índice
   incluido. Con `min-width: 0` la columna manda, y el `overflow-x` de la
   envoltura de la tabla hace por fin su trabajo. */
.cuerpo > * { min-width: 0; }

/* ---------- El índice ---------- */
/* Responde a «¿dónde estoy y a dónde puedo ir?», que en un documento
   largo es la diferencia entre leerlo y abandonarlo. */

.indice {
  font-size: var(--t-menor);
}

.indice h2 {
  font-family: var(--lectura);
  font-size: var(--t-pie);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n5);
  margin-bottom: var(--e2);
}

.indice ol {
  list-style: none;
  counter-reset: seccion;
  border-left: 1px solid var(--n3);
}

.indice li { counter-increment: seccion; }

.indice a {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  min-height: 2.75rem;
  padding: 0.375rem 0 0.375rem var(--e2);
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--n6);
  text-decoration: none;
  line-height: 1.35;
  transition:
    color 180ms var(--responde),
    border-color 180ms var(--responde);
}

.indice a::before {
  content: counter(seccion);
  flex: none;
  min-width: 1.1em;
  color: var(--n5);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.indice a:hover,
.indice a:focus-visible {
  color: var(--n7);
  border-left-color: var(--oro);
}

.indice a:hover::before { color: var(--oro-senal); }

/* ---------- El texto ---------- */

.texto > section + section { margin-top: var(--e5); }

/* Más aire encima de un título que debajo: la sección empieza con
   el encabezado, no lo arrastra la anterior. */
.texto h2 {
  font-family: var(--display);
  font-size: var(--t-sub);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tr-sub);
  margin-bottom: var(--e2);
  text-wrap: balance;
  font-optical-sizing: auto;
}

.texto h2 .num {
  color: var(--n5);
  font-weight: 400;
  margin-right: 0.5ch;
  font-variant-numeric: tabular-nums;
}

.texto h3 {
  font-family: var(--lectura);
  font-size: var(--t-cuerpo);
  font-weight: 600;
  color: var(--n7);
  margin: var(--e3) 0 var(--e1);
}

.texto p,
.texto li { max-width: var(--medida); color: var(--n6); }

.texto p + p { margin-top: var(--e2); }

/* `p + p` sólo cubre uno de los casos. Un párrafo que sigue a una lista,
   a una nota o a la tabla se quedaba pegado al bloque anterior: medido,
   0px, frente a los 16px que hay entre párrafos. Mismo escalón. */
.texto ul + p,
.texto ol + p,
.texto .nota + p,
.texto .tabla-envoltura + p { margin-top: var(--e2); }

.texto strong { color: var(--n7); font-weight: 600; }

.texto a {
  color: var(--oro-senal);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.texto a:hover { color: var(--oro); }

/* Listas: el filete corto como viñeta, igual que en los paquetes
   del sitio. Nada de puntos por defecto. */
.texto ul,
.texto ol.pasos {
  list-style: none;
  margin-top: var(--e2);
  display: grid;
  gap: 0.6rem;
}

.texto ul li {
  position: relative;
  padding-left: 1.4rem;
}

.texto ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 0.5rem;
  height: 1px;
  background: var(--n4);
}

.texto ol.pasos { counter-reset: paso; }

.texto ol.pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 2rem;
}

.texto ol.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--n5);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- La tabla de transferencias ---------- */
/* Sin bordes de caja: filetes horizontales, como la lista de
   certificados del sitio. Se escanea más rápido. */

.tabla-envoltura {
  margin-top: var(--e3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.texto table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--t-menor);
}

.texto th {
  text-align: left;
  font-weight: 600;
  font-size: var(--t-pie);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n5);
  padding: 0 var(--e2) var(--e1) 0;
  border-bottom: 1px solid var(--n4);
}

.texto td {
  padding: 0.875rem var(--e2) 0.875rem 0;
  border-bottom: 1px solid var(--n3);
  color: var(--n6);
  vertical-align: top;
}

.texto td:first-child { color: var(--n7); font-weight: 500; }
.texto tr:last-child td { border-bottom: none; }

/* ---------- La nota de resalte ---------- */

.nota {
  margin-top: var(--e3);
  padding: var(--e3);
  border-radius: var(--r-1);
  background: var(--n2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nota p { max-width: none; }
.nota p + p { margin-top: var(--e1); }

/* ---------- Pie ---------- */

.pie-legal {
  border-top: 1px solid var(--n3);
  background: var(--n0);
}

.pie-legal-inner {
  max-width: 76rem;
  margin-inline: auto;
  padding: var(--e4) var(--margen);
  color: var(--n5);
  font-size: var(--t-menor);
  display: grid;
  gap: var(--e1);
}

.pie-legal a { color: var(--n6); text-underline-offset: 0.18em; }
.pie-legal a:hover { color: var(--oro-senal); }

.pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e3);
  margin-top: var(--e2);
}

.pie-enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  /* «Inicio» medía 34px de ancho: cumple, pero se pulsa mejor con aire.
     El margen negativo lo devuelve a su sitio en la fila. */
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
}

/* ---------- Escritorio: el índice se queda a la vista ---------- */

@media (min-width: 62rem) {
  .cuerpo {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--e6);
  }

  .indice {
    position: sticky;
    top: var(--e3);
    align-self: start;
    max-height: calc(100vh - var(--e5));
    overflow-y: auto;
  }
}

/* ---------- Teléfono ---------- */

@media (max-width: 40rem) {
  .portada { padding-top: var(--e4); }
  .texto > section + section { margin-top: var(--e4); }
  .nota { padding: var(--e2); }
}

/* ---------- Índice en pantallas estrechas ---------- */
/* De columna a hilera. Dieciséis entradas apiladas ocupaban la primera
   pantalla entera del teléfono y empujaban el documento fuera de vista;
   en hilera envuelven en unas siete líneas. El filete de la izquierda
   es la guía de una barra lateral: en hilera no guía nada, se quita. */

@media (max-width: 61.999rem) {
  .indice ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1);
    border-left: none;
  }

  .indice a {
    min-height: 2.75rem;
    padding: 0.375rem 0.875rem;
    margin-left: 0;
    gap: 0.5rem;
    border: 1px solid var(--n3);
    border-radius: var(--r-pildora);
    background: var(--n2);
  }

  .indice a:hover,
  .indice a:focus-visible { border-color: var(--oro); }
}

/* ---------- Preferencias del sistema ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .volver,
  .indice a { transition: none; }
}

@media (prefers-contrast: more) {
  .texto p,
  .texto li,
  .texto td { color: var(--n7); }
  .indice ol { border-left-color: var(--n5); }
  .texto td { border-bottom-color: var(--n4); }
}

/* ---------- Impresión ---------- */
/* Un aviso de privacidad se guarda en PDF. Si no se contempla,
   sale un folio negro que gasta tinta y no se lee. */

@media print {
  :root { color-scheme: light; }

  body {
    background: #fff;
    color: #111;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  .barra,
  .indice,
  .pie-enlaces { display: none; }

  .portada,
  .cuerpo,
  .pie-legal-inner { max-width: none; padding: 0; }

  .cuerpo { display: block; }

  /* Sin medida, la caja de texto ocupa el ancho de la hoja: 105
     caracteres por línea, medidos. El ojo pierde el renglón al
     volver. Se contiene aquí y no en los hijos para que el título,
     la tabla y la nota compartan el mismo eje. */
  .texto { max-width: 78ch; }

  .portada h1 { font-size: 20pt; color: #000; }
  .portada h1::after { background: #111; }
  .portada .meta { color: #444; }
  .texto h2 .num { color: #666; }

  .texto h2 {
    font-size: 12pt;
    color: #000;
    /* Que un encabezado no quede solo al final de la hoja. */
    break-after: avoid;
    page-break-after: avoid;
  }

  .texto h3 { color: #000; }
  .texto p,
  .texto li,
  .texto td { color: #222; max-width: none; }
  /* Especificidad: la regla de pantalla es (0,2,1) y ésta (0,1,1),
     así que sin esto la primera columna —los proveedores— se imprime
     en #f2f4f7 sobre papel blanco. Invisible. */
  .texto td:first-child { color: #000; }
  .texto strong { color: #000; }
  .texto section { break-inside: avoid-page; }

  .texto a { color: #111; text-decoration: underline; }
  /* En papel el enlace no se puede pulsar: se imprime su destino. */
  .texto a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }

  .nota { background: none; border: 1px solid #bbb; box-shadow: none; }
  .texto th { color: #000; border-bottom-color: #888; }
  .texto td { border-bottom-color: #ccc; }
  .pie-legal { border-top-color: #bbb; }
}