/* ============================================================================
   Alio · Landing legal
   ----------------------------------------------------------------------------
   Una página legal tiene UN trabajo: que el documento se lea y se pueda citar.
   Por eso aquí no hay recorrido anclado, ni campo de partículas, ni bandas
   oscuras — nada de eso ayuda a leer veintitrés cláusulas. Lo que sí hay:

     · medida de lectura corta (68ch) y un interlineado alto;
     · índice pegajoso al lado en escritorio, plegable en móvil;
     · cada cláusula con su propio ancla, para poder enlazar «la 13.6»;
     · estilos de impresión, porque un documento legal se imprime.

   El sistema visual es el mismo «Pizarra y Latón»: papel, DM Sans, Space
   Grotesk solo en las etiquetas. La barra va clara desde el primer píxel —no
   hay héroe oscuro debajo—, así que fuerza los tokens de banda clara.
   ========================================================================== */

/* Los términos y la privacidad son largos y el pie siempre quedaba abajo por
   su propio peso. La página de la cuenta NO lo es —sin sesión son cuatro
   líneas— y ahí se veía el pie flotando a media pantalla con papel debajo. El
   contenido se estira para empujarlo hasta el borde. */
.legal {
  background: var(--p-bg);
  color: var(--p-text);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.legal > main {
  flex: 1 0 auto;
}

/* --- Barra ----------------------------------------------------------------
   Deliberadamente NO reutiliza `.nav` de css/hero.css: aquella nace en tinta
   clara porque flota sobre el crepúsculo del héroe, es fija y arrastra consigo
   el menú, el conmutador y sus estados. Esta página carga solo los tokens, así
   que su barra se declara entera aquí — cuatro reglas, sin acoplarse a la hoja
   del héroe ni tener que deshacer nada.
   ------------------------------------------------------------------------ */

.lnav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  padding: var(--sp-16) var(--gutter);
  color: var(--p-text);
  background: rgba(246, 247, 248, 0.86);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(23, 28, 34, 0.1);
}

/* El logotipo oficial, tal cual. Estas páginas son siempre de papel, que es
   justo el fondo sobre el que está pensado. */
.lnav__brand {
  display: block;
  flex: none;
}

.lnav__logo {
  display: block;
  height: 24px;
  width: auto;
}

.lnav__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: var(--text-sm);
  color: var(--p-sub);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.lnav__back:hover {
  color: var(--p-text);
  background: rgba(23, 28, 34, 0.06);
}

.lnav__back svg {
  flex: none;
}

/* --- Cabecera del documento ----------------------------------------------- */

.doc__head {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) var(--gutter) 0;
}

.doc__kicker {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--p-sub);
}

.doc__title {
  margin-top: var(--sp-12);
  max-width: 20ch;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  color: var(--p-text);
  text-wrap: balance;
}

/* Los datos de vigencia van arriba y en una fila propia: en un documento legal
   la fecha no es un detalle de pie de página, es lo primero que se comprueba. */
.doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12) var(--sp-32);
  margin-top: clamp(24px, 4vh, 36px);
  padding-top: var(--sp-20);
  border-top: 1px solid var(--p-border);
  font-size: var(--text-sm);
  color: var(--p-sub);
}

.doc__meta b {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--p-text);
  margin-bottom: 2px;
}

.doc__lead {
  max-width: 68ch;
  margin-top: clamp(24px, 4vh, 36px);
  padding: var(--sp-20) var(--sp-24);
  border-radius: var(--r-card);
  border: 1px solid var(--p-border);
  border-left: 3px solid var(--p-slate);
  background: var(--p-surface);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--p-text);
  text-wrap: pretty;
}

/* --- Rejilla: índice + documento ------------------------------------------ */

.doc__grid {
  max-width: var(--page-max);
  margin: clamp(40px, 6vh, 72px) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.doc__toc {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 128px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--sp-8);
}

.doc__toc h2 {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--p-sub);
  margin-bottom: var(--sp-12);
}

.doc__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  display: grid;
  gap: 1px;
}

.doc__toc a {
  display: flex;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--p-sub);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.doc__toc a::before {
  counter-increment: toc;
  content: counter(toc);
  flex: none;
  width: 1.6em;
  font-variant-numeric: tabular-nums;
  color: var(--p-border);
  transition: color 0.2s ease;
}

.doc__toc a:hover {
  color: var(--p-text);
  background: var(--p-slate-soft);
}

.doc__toc a:hover::before {
  color: var(--p-slate);
}

/* --- El documento ---------------------------------------------------------- */

.doc__body {
  max-width: 68ch;
  padding-bottom: clamp(56px, 9vh, 104px);
}

.doc__body section + section {
  margin-top: clamp(40px, 6vh, 64px);
}

.doc__body h2 {
  /* `scroll-margin` para que el ancla no quede debajo de la barra pegajosa */
  scroll-margin-top: 96px;
  display: flex;
  gap: 12px;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--p-text);
  text-wrap: balance;
}

.doc__body h2 span {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--p-sub);
}

.doc__body h3 {
  scroll-margin-top: 96px;
  margin-top: clamp(24px, 3.5vh, 36px);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--p-text);
}

.doc__body p {
  margin-top: var(--sp-16);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--p-sub);
  text-wrap: pretty;
}

.doc__body h2 + p,
.doc__body h3 + p {
  margin-top: var(--sp-12);
}

.doc__body b,
.doc__body strong {
  font-weight: 600;
  color: var(--p-text);
}

.doc__body ul,
.doc__body ol {
  margin: var(--sp-16) 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-12);
}

.doc__body li {
  position: relative;
  padding-left: 24px;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--p-sub);
  text-wrap: pretty;
}

.doc__body ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--p-slate);
}

.doc__body ol {
  counter-reset: item;
}

.doc__body ol > li::before {
  counter-increment: item;
  content: counter(item, lower-alpha) ")";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--p-slate);
}

.doc__body code {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--p-slate-soft);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: var(--p-text);
}

/* El relleno NO es decorativo: sin él estos enlaces —casi todos direcciones de
   correo— se quedaban en 16-21 px de alto, por debajo del mínimo de 24 de la
   WCAG. Es el mismo defecto que ya se corrigió en el pie y en el FAQ del sitio.
   El margen negativo lo devuelve para que el párrafo no crezca. */
.doc__body a {
  display: inline-block;
  padding: 6px 4px;
  margin: -6px -4px;
  color: var(--p-slate);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.doc__body a:hover {
  color: var(--p-slate-deep);
}

/* --- Tablas -----------------------------------------------------------------
   La política de privacidad las usa para «qué dato, de dónde sale, para qué».
   En un móvil no caben tres columnas, así que por debajo de 720 px cada fila
   se convierte en un bloque y cada celda lleva delante su encabezado, tomado
   de `data-th`. Un `overflow-x` habría dejado la tabla escondida a la derecha.
   ------------------------------------------------------------------------ */

.doc__table {
  width: 100%;
  margin-top: var(--sp-16);
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.doc__table th,
.doc__table td {
  padding: 10px 14px 10px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--p-border);
  line-height: 1.55;
}

.doc__table th {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--p-text);
  white-space: nowrap;
}

.doc__table td {
  color: var(--p-sub);
}

.doc__table tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 720px) {
  .doc__table thead {
    /* Fuera de la vista, pero sigue leyéndose: los `data-th` la reemplazan */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .doc__table tr {
    display: block;
    padding: var(--sp-12) 0;
    border-bottom: 1px solid var(--p-border);
  }

  .doc__table tr:last-child {
    border-bottom: 0;
  }

  .doc__table td {
    display: block;
    padding: 4px 0;
    border: 0;
  }

  .doc__table td::before {
    content: attr(data-th);
    display: block;
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--p-text);
    margin-bottom: 2px;
  }
}

/* Cláusula que merece detenerse: la del borrado al cerrar sesión y las de
   responsabilidad. Aviso, no adorno — por eso lleva el color de advertencia
   del sistema semántico y no el latón. */
.doc__warn {
  margin-top: var(--sp-16);
  padding: var(--sp-16) var(--sp-20);
  border-radius: var(--r-card);
  border: 1px solid rgba(176, 132, 43, 0.34);
  background: rgba(176, 132, 43, 0.07);
}

.doc__warn p {
  margin-top: 0;
  color: var(--p-text);
}

.doc__warn p + p {
  margin-top: var(--sp-12);
}

/* Bloque de contacto al cierre */
.doc__card {
  margin-top: var(--sp-16);
  padding: var(--sp-20) var(--sp-24);
  border-radius: var(--r-card);
  border: 1px solid var(--p-border);
  background: var(--p-surface);
}

.doc__card p {
  margin-top: 0;
}

.doc__card p + p {
  margin-top: var(--sp-8);
}

/* --- Pie -------------------------------------------------------------------
   Mismo motivo que la barra: `.foot` vive en css/tail.css junto a la sección
   de contenido, que aquí no existe. Se declara el mínimo.
   ------------------------------------------------------------------------ */

.lfoot {
  border-top: 1px solid var(--p-border);
  background: var(--p-bg-d);
  color: var(--p-text-d);
}

.lfoot__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(32px, 5vh, 48px) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12) var(--sp-32);
  align-items: baseline;
  justify-content: space-between;
}

.lfoot p {
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--p-slate-deep-d);
  max-width: 68ch;
}

.lfoot a {
  display: inline-block;
  padding: 6px 4px;
  margin: -6px -4px;
  color: var(--p-text-d);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lfoot a:hover {
  color: var(--p-brass-d);
}

/* --- Estrecho -------------------------------------------------------------- */

@media (max-width: 900px) {
  .doc__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-32);
  }

  /* El índice deja de ser barra lateral y pasa a ser un desplegable: pegado
     arriba en un móvil se comería media pantalla. */
  .doc__toc {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 1px solid var(--p-border);
    border-radius: var(--r-card);
    background: var(--p-surface);
  }

  .doc__toc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-16);
    padding: var(--sp-16) var(--sp-20);
    list-style: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--p-text);
  }

  .doc__toc summary::-webkit-details-marker {
    display: none;
  }

  .doc__toc summary::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--p-sub);
    border-bottom: 2px solid var(--p-sub);
    rotate: 45deg;
    translate: 0 -2px;
    transition: rotate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
      translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .doc__toc[open] summary::after {
    rotate: -135deg;
    translate: 0 2px;
  }

  .doc__toc ol {
    padding: 0 var(--sp-12) var(--sp-12);
  }
}

/* --- Impresión ------------------------------------------------------------
   Un documento legal se imprime y se archiva. Fuera la barra y el índice; el
   texto a todo el ancho y en negro sobre blanco, y las cláusulas sin partirse
   por la mitad entre dos páginas.
   ------------------------------------------------------------------------ */

@media print {
  .lnav,
  .doc__toc,
  .lfoot {
    display: none !important;
  }

  .legal {
    background: #fff;
  }

  .doc__grid {
    display: block;
    padding: 0;
  }

  .doc__body,
  .doc__lead {
    max-width: none;
  }

  .doc__body p,
  .doc__body li {
    color: #000;
  }

  .doc__body section {
    break-inside: avoid-page;
  }

  .doc__body h2,
  .doc__body h3 {
    break-after: avoid-page;
  }

  /* Las direcciones y enlaces impresos tienen que poder teclearse */
  .doc__body a::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}