/* =============================================================================
   legal.css — páginas de texto legal (/privacidad/)
   -----------------------------------------------------------------------------
   Se carga SOLA, junto a base.css. No convive con layout/components/animations/
   responsive: esos son de la landing y traen reglas con !important que pisarían
   la tipografía de lectura. Por eso acá se redefine lo poco que se necesita
   (header, footer) en vez de reutilizar sus clases.

   Mobile-first: la mayoría abre esta página desde un link de WhatsApp, en el
   celular. Los @media solo agrandan.

   Todos los colores salen de las variables de base.css — no hay literales.
   ============================================================================= */

/* ── Tipografía de lectura ────────────────────────────────────────────────── */
/* 17px en móvil (base.css deja 16px, que para un texto largo cansa) y
   line-height holgado: es un documento para leer, no una landing. */
.legal-page {
  font-size: 17px;
  line-height: 1.7;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
/* Sticky para que siempre haya una salida de vuelta al sitio, incluso a mitad
   de un documento largo. Su alto es el que compensa el scroll-margin-top de los
   h2 más abajo. */
.legal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0.9rem 1.2rem;
  background: rgba(6, 6, 10, 0.92);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
}

.legal-logo {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--white);
  text-decoration: none;
}

.legal-logo span { color: var(--red); }

.legal-logo:hover { color: var(--white); }

/* ── Contenedor de lectura ────────────────────────────────────────────────── */
/* 72ch es el ancho de línea cómodo clásico; más largo obliga a "buscar" el
   inicio del renglón siguiente. z-index:1 lo pone sobre los gradientes
   ambientales que base.css dibuja en body::before/::after. */
.legal {
  position: relative;
  z-index: 1;
  max-width: 72ch;
  margin: 0 auto;
  padding: 2rem 1.2rem 3.5rem;
}

.legal h1 {
  font-size: 1.7rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}

/* El h2 se separa bastante de lo anterior y poco de lo que sigue: así el
   título "pertenece" visualmente a su sección. */
.legal h2 {
  font-size: 1.2rem;
  line-height: 1.35;
  font-weight: 700;
  margin: 2.6rem 0 0.9rem;
  padding-top: 0.2rem;
  border-top: 1px solid var(--glass-border);
  /* Compensa el header sticky: sin esto el ancla deja el título tapado.
     Los ids se usan desde WhatsApp y desde la app de Meta. */
  scroll-margin-top: 4.5rem;
}

.legal p { margin-bottom: 1rem; }

.legal ul,
.legal ol { margin: 0 0 1rem 1.4rem; }

.legal li { margin-bottom: 0.5rem; }

.legal strong { color: var(--white); font-weight: 700; }

/* Fecha de actualización y línea de contacto del cierre: secundarias. */
.legal-updated,
.legal-contact {
  color: var(--gray-5);
  font-size: 0.92em;
}

.legal-contact { margin-top: 1.5rem; }

.legal hr {
  border: 0;
  border-top: 1px solid var(--glass-border);
  margin: 2.5rem 0;
}

/* ── Índice ───────────────────────────────────────────────────────────────── */
/* Numeración propia desactivada: los títulos ya vienen numerados en el texto
   legal ("1. Quién es…") y se duplicaría. */
.legal-toc {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  margin: 1.8rem 0 2rem;
}

/* Va con `.legal` delante a propósito: compite con `.legal h2` (misma
   especificidad sin él, y ese gana por venir antes). Sin esto el título del
   índice se lleva el margen y el border-top de los h2 de sección. */
.legal .legal-toc-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-5);
  margin: 0 0 0.7rem;
  border: 0;
  padding: 0;
  scroll-margin-top: 4.5rem;
}

.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.legal-toc li { margin-bottom: 0.4rem; }

/* ── Links ────────────────────────────────────────────────────────────────── */
/* Subrayado visible siempre: en un texto legal el color solo no basta para
   distinguir un link (y no discrimina a quien no ve bien el rojo). */
.legal a,
.legal-contact a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.legal a:hover { color: var(--white); }

/* Foco visible en TODO lo interactivo, incluido el wrapper scrollable de las
   tablas, que es focusable por tabindex. */
a:focus-visible,
.legal-table-wrap:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Tablas ───────────────────────────────────────────────────────────────── */
/* El wrapper es el que scrollea: una tabla de 3 columnas no entra en 360px y
   sin esto desbordaría el body (que base.css recorta con overflow-x:hidden,
   o sea: el contenido quedaría inalcanzable). */
.legal-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.2rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
}

.legal table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--glass-border);
}

.legal thead th {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-5);
  background: var(--glass-bg);
  white-space: nowrap;
}

/* Filas alternadas sutiles: ayudan a seguir el renglón cuando la tabla
   scrollea en horizontal. */
.legal tbody tr:nth-child(even) { background: var(--glass-bg); }

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

/* ── Footer ───────────────────────────────────────────────────────────────── */
/* Mismo markup y mismo aspecto que el de la landing, replicado acá porque
   components.css no se carga en esta página. */
footer {
  padding: 1.5rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  text-align: center;
  background: rgba(6, 6, 10, 0.9);
  border-top: 1px solid var(--glass-border);
  position: relative;
  z-index: 1;
}

.footer-logo {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.footer-logo span { color: var(--red); }

footer p { font-size: 0.72rem; color: var(--gray-4); }

/* ── Desktop ──────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .legal-page { font-size: 18px; }

  .legal-header { padding: 1.1rem 2.5rem; }

  .legal { padding: 3rem 2rem 4.5rem; }

  .legal h1 { font-size: 2.2rem; }

  .legal h2 { font-size: 1.35rem; }

  footer {
    padding: 1.8rem 2.5rem;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ── Impresión / guardar como PDF ─────────────────────────────────────────── */
/* Meta y algunos clientes piden la política impresa o en PDF. En papel el fondo
   negro es ilegible y gasta tinta, y los links pierden su destino. */
@media print {
  .legal-page {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  /* base.css pinta dos gradientes fijos que en papel salen como manchas. */
  .legal-page::before,
  .legal-page::after { display: none; }

  .legal-header,
  footer { display: none; }

  .legal {
    max-width: none;
    padding: 0;
  }

  .legal h1,
  .legal h2,
  .legal strong { color: #000; }

  .legal h2 {
    border-top: 1px solid #999;
    page-break-after: avoid;
  }

  .legal-updated,
  .legal-contact { color: #333; }

  .legal a { color: #000; }

  /* La URL solo en los links que llevan fuera de la página: en las anclas del
     índice ("#derechos") sería ruido, porque la sección está más abajo. */
  .legal a[href]:not([href^="#"])::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  .legal-toc,
  .legal-table-wrap {
    background: transparent;
    border: 1px solid #999;
  }

  .legal .legal-toc-title { color: #000; }

  .legal thead th {
    background: transparent;
    color: #000;
  }

  .legal tbody tr:nth-child(even) { background: transparent; }

  .legal th,
  .legal td { border-bottom: 1px solid #ccc; }

  .legal-table-wrap { overflow-x: visible; }

  .legal table { min-width: 0; }
}