/* ============================================================
   legal.css — las seis páginas legales de Dry Ice
   Se carga DESPUÉS de dryice.css y reutiliza sus tokens (:root).

   Por qué existe: las legales se escribieron con su propio esqueleto
   (.legal-page, .site-header, .legal-content…) y enlazaban un
   `styles.css` RELATIVO que resolvía a /legal/styles.css y daba 404.
   Cloudflare devolvía el HTML de la 404 con MIME text/html, el navegador
   lo rechazaba, y las seis páginas se veían en Times New Roman con los
   enlaces azules subrayados. Eso es lo que leía un cliente antes de pagar.

   Se ha optado por escribir los estilos que faltaban en vez de rehacer el
   marcado: el HTML legal es semántico y correcto, el problema era la hoja.
   ============================================================ */

/* ── Estructura ─────────────────────────────────────────────────────────── */
.legal-page {
  background: var(--base);
  color: var(--tinta);
  font-family: var(--cuerpo);
  line-height: 1.65;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acento, #45D3C6);
  color: var(--base);
  padding: var(--e-3) var(--e-5);
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
  padding: var(--e-5) var(--e-6);
  border-bottom: 1px solid var(--borde);
  background: rgba(11, 12, 14, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
}
.site-nav { display: flex; gap: var(--e-5); flex-wrap: wrap; }
.nav-link {
  font-size: var(--t-sm);
  color: var(--tinta-suave);
  text-decoration: none;
  transition: color .18s ease;
}
.nav-link:hover, .nav-link[aria-current='page'] { color: var(--tinta); }

/* ── Cuerpo del documento ───────────────────────────────────────────────── */
.legal-content {
  max-width: 74ch;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--e-6) clamp(3rem, 7vw, 5rem);
}
.legal-headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-3xl);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0 0 var(--e-3);
}
.legal-updated {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: var(--e-7, 2rem);
  padding-bottom: var(--e-5);
  border-bottom: 1px solid var(--borde);
}
.legal-section { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.legal-section h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -.01em;
  margin: 0 0 var(--e-4);
  color: var(--tinta);
}
.legal-section h3 {
  font-size: var(--t-lg);
  font-weight: 600;
  margin: var(--e-6) 0 var(--e-3);
  color: var(--tinta);
}
.legal-content p { color: var(--tinta-suave); margin: 0 0 var(--e-4); max-width: none; }
.legal-content strong { color: var(--tinta); font-weight: 600; }
.legal-content a { color: var(--acento, #45D3C6); }
.legal-content ul, .legal-content ol { margin: 0 0 var(--e-4); padding-left: 1.25rem; color: var(--tinta-suave); }
.legal-content li { margin-bottom: var(--e-2); }
.legal-content li::marker { color: var(--tinta-tenue, #5A616B); }

/* Los marcadores que faltan por rellenar. Se ven a propósito: es preferible
   un hueco declarado a un dato inventado. */
.legal-content em,
.legal-pendiente {
  color: var(--acento, #45D3C6);
  font-style: normal;
  font-family: var(--mono);
  font-size: .92em;
}

/* ── Tablas ─────────────────────────────────────────────────────────────── */
/* En móvil desbordaban la pantalla (privacidad +96 px, cookies +54 px)
   justamente porque esta hoja no llegaba a cargarse. El scroll va DENTRO
   de la tabla, nunca en el body. */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  margin: var(--e-4) 0 var(--e-5);
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* El texto se lee mejor en 74ch, pero una tabla de cinco columnas ahí dentro
   se corta por la derecha. En pantallas anchas la tabla se sale de la medida
   del texto hasta donde haya sitio, sin tocar el ancho del cuerpo. */
@media (min-width: 1000px) {
  .legal-table {
    width: calc(100% + 14rem);
    max-width: calc(100vw - 6rem);
    margin-left: -7rem;
  }
}
.legal-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding-bottom: var(--e-3);
}
.legal-table th, .legal-table td {
  text-align: left;
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}
.legal-table th {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  font-weight: 500;
  white-space: nowrap;
}
.legal-table td { color: var(--tinta-suave); }
.legal-table tr:last-child td { border-bottom: 0; }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--borde);
  background: var(--profundo);
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--e-6) var(--e-6);
}
.footer-columns {
  max-width: 1100px;
  margin: 0 auto var(--e-6);
  display: grid;
  gap: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.footer-logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--tinta);
  display: block;
  margin-bottom: var(--e-3);
  text-decoration: none;
}
.footer-tagline { color: var(--tinta-suave); font-size: var(--t-sm); margin: 0; }
.footer-col-title {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  font-weight: 500;
  margin: 0 0 var(--e-3);
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: var(--e-2); }
.footer-links a {
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: var(--t-sm);
  transition: color .18s ease;
}
.footer-links a:hover, .footer-links a[aria-current='page'] { color: var(--tinta); }
.footer-legal, .footer-copy {
  max-width: 1100px;
  margin: 0 auto;
  font-size: var(--t-xs);
  color: var(--tinta-tenue, #5A616B);
}
.footer-legal { padding-top: var(--e-5); border-top: 1px solid var(--borde); margin-bottom: var(--e-2); }

@media (max-width: 640px) {
  .site-header { padding: var(--e-4); }
  .legal-content { padding-left: var(--e-4); padding-right: var(--e-4); }
  .site-footer { padding-left: var(--e-4); padding-right: var(--e-4); }
}