/* ═══════════════════════════════════════════════════════════════════════════════════════
   1on1Spanish · legal.css — hoja común de /terms, /privacy y /cancellation-policy
   Maqueta el Figma «Plantilla legal — Desktop 1440» (321:2).

   Es una página de lectura larga, no de venta: medida de línea corta, ningún elemento
   saturado y ningún botón. Todo por token, como en pricing.css y faq.css.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.legal {
  --lg-ancho: 1440px;
  --lg-lateral: 72px;
  /* Columna del índice y del cuerpo, cotadas contra el Figma (300 + 48 + 652). */
  --lg-indice: 300px;
  --lg-hueco: 48px;
}

.legal .l1__inner,
.legal .l2__inner,
.legal .l3__inner {
  max-width: var(--lg-ancho);
  margin-inline: auto;
  padding-inline: var(--lg-lateral);
}

/* ── L1 · Cabecera del documento ─────────────────────────────────────────────────────── */

.l1 { background: var(--c-crema-calida); }

.l1__inner { padding-block: 56px 48px; }

.l1__titular {
  margin: 0 0 var(--e-3);
  font-size: var(--t-display);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

/* La fecha es obligatoria y visible; no se esconde en letra de pie de página. */
.l1__fecha {
  margin: 0;
  font-size: var(--t-tarjeta);
  color: var(--c-pizarra);
}

/* Caja destacada: hoy solo /cancellation-policy. Fondo blanco sobre el crema del hero, sin
   color saturado — en un documento legal el realce lo da el contraste, no el grito. */
.l1__destacado {
  margin-top: var(--e-5);
  max-width: 64rem;
  background: var(--c-blanco);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-lg);
  padding: 24px 28px;
}

.l1__destacado-titulo {
  margin: 0 0 var(--e-3);
  font-size: var(--t-h5);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.l1__destacado-texto {
  margin: 0 0 var(--e-3);
  font-size: var(--t-cuerpo);
  color: var(--c-navy);
  max-width: 44rem;
}

.l1__destacado-texto:last-child { margin-bottom: 0; }

/* ── L2 · Índice + cuerpo ────────────────────────────────────────────────────────────── */

.l2 { background: var(--c-blanco); }

.l2__inner {
  padding-block: 56px 72px;
  display: grid;
  grid-template-columns: var(--lg-indice) minmax(0, 1fr);
  gap: var(--lg-hueco);
  align-items: start;
}

/* El índice se cuelga de la cabecera sticky y acompaña la lectura. `max-height` + scroll
   propio porque con 23 cláusulas el panel es más alto que la ventana. */
.l2__indice {
  position: sticky;
  top: calc(var(--altura-cabecera) + var(--e-4));
  background: var(--c-crema);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  padding: 20px 18px;
  max-height: calc(100vh - var(--altura-cabecera) - var(--e-6));
  overflow-y: auto;
}

/* El `<details>` nace con `open` (ver el comentario de l2-cuerpo.php): en escritorio el
   resumen sobra y se esconde, y el índice queda como el panel fijo del Figma. */
.legal-indice__resumen { display: none; }

.legal-indice__rotulo {
  margin: 0 0 var(--e-3);
  font-size: var(--t-muletilla);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-pizarra);
}

.legal-indice__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.legal-indice__lista a {
  display: block;
  padding-block: 6px;
  font-size: var(--t-tarjeta);
  line-height: 1.35;
  color: var(--c-navy);
  text-decoration: none;
}

.legal-indice__lista a:hover { color: var(--c-acento); text-decoration: underline; }

.l2__cuerpo { max-width: 100%; }

/* Medida de lectura: el cuerpo no pasa de ~70 caracteres por línea (nota del Figma). */
.l2__preambulo,
.l2__seccion p,
.l2__seccion li,
.l2__vacio { max-width: 42rem; }

.l2__seccion {
  /* Hueco para que el ancla no meta el titular debajo de la cabecera sticky. */
  scroll-margin-top: calc(var(--altura-cabecera) + var(--e-4));
  margin-bottom: var(--e-6);
}

.l2__seccion:last-child { margin-bottom: 0; }

.l2__seccion-titulo {
  margin: 0 0 var(--e-3);
  font-size: var(--t-h3);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.l2__seccion p,
.l2__seccion li {
  font-size: var(--t-cuerpo);
  color: var(--c-navy);
}

.l2__seccion ol,
.l2__seccion ul { padding-left: 1.4rem; }
.l2__seccion li { margin-bottom: var(--e-2); }

/* Sección pendiente de validación legal: solo visible con SUSA_LEGAL_PENDIENTES a true, y
   marcada para que nadie la confunda con texto publicado. */
.l2__seccion--pendiente {
  border: 1px dashed var(--c-acento);
  border-radius: var(--r-md);
  padding: 18px 20px;
}

.l2__seccion--pendiente .l2__seccion-titulo { color: var(--c-acento); }

.l2__vacio { font-size: var(--t-cuerpo); color: var(--c-pizarra); }

/* ── L3 · Cross-links ────────────────────────────────────────────────────────────────── */

.l3 { background: var(--c-crema-calida); }

.l3__inner {
  padding-block: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

/* Píldoras de navegación, nunca botones: en esta página no hay nada que pulsar para comprar. */
.l3__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--e-4);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-pill);
  background: var(--c-blanco);
  font-size: var(--t-tarjeta);
  font-weight: var(--peso-semi);
  color: var(--c-navy);
  text-decoration: none;
}

.l3__enlace:hover { border-color: var(--c-acento); color: var(--c-acento); }

.l3__enlace--actual {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-blanco);
}

/* ── Tablet ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .legal { --lg-lateral: var(--e-6); --lg-indice: 260px; --lg-hueco: 32px; }

  .l1__inner { padding-block: 40px 32px; }
  .l2__inner { padding-block: 40px 56px; }
}

/* ── Móvil ───────────────────────────────────────────────────────────────────────────────
   El índice deja de ser una columna: pasa a ser el `<details>` que ya es en el HTML, cerrado
   de serie. Sin JavaScript, y con 23 cláusulas es la diferencia entre leer el documento y
   scrollear un índice. */

@media (max-width: 860px) {
  .legal { --lg-lateral: 20px; }

  .l2__inner {
    grid-template-columns: 1fr;
    gap: var(--e-5);
  }

  .l2__indice {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
  }

  /* Vuelve el resumen: aquí el `<details>` sí se abre y se cierra. */
  .legal-indice__resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    min-height: 48px;
    padding-inline: 18px;
    font-size: var(--t-tarjeta);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-navy);
    cursor: pointer;
    list-style: none;
  }

  .legal-indice__resumen::-webkit-details-marker { display: none; }

  .legal-indice__resumen::after {
    content: '+';
    font-size: var(--t-h3);
    line-height: 1;
    color: var(--c-acento);
  }

  .l2__indice[open] .legal-indice__resumen::after { content: '\2212'; }

  /* Abierto de serie, pero con techo: 23 cláusulas no pueden empujar el documento fuera de
     la primera pantalla. Quien no lo quiera, lo pliega desde el resumen. */
  .legal-indice__panel {
    padding: 0 18px 16px;
    max-height: 40vh;
    overflow-y: auto;
  }
  .legal-indice__rotulo { display: none; }   /* el resumen ya dice «On this page» */

  .l1__titular { font-size: var(--t-h2); }
  .l1__inner { padding-block: 28px 24px; }
  .l1__destacado { padding: 20px; }
  .l2__inner { padding-block: 32px 40px; }
  .l2__seccion-titulo { font-size: var(--t-h4); }
  .l3__inner { padding-block: 20px; }
}

/* Tabla dentro de un documento legal (hoy solo el inventario de cookies, seis columnas).

   `html, body` llevan `overflow-x: clip`, que en móvil RECORTA lo que desborda en vez de
   dejarlo desplazar — la tabla perdería columnas sin avisar. Por eso la tabla scrollea
   dentro de su propia caja y no arrastra la página de lado. El `tabindex` del contenedor
   lo pone el conversor, para que también se pueda desplazar con teclado. */
.legal__tabla {
  overflow-x: auto;
  margin-block: var(--e-5);
  -webkit-overflow-scrolling: touch;
}

.legal__tabla table { margin-bottom: 0; }

/* Sin esto la tabla se comprime hasta ser ilegible en vez de activar el scroll. */
.legal__tabla th,
.legal__tabla td { min-width: 8rem; }
.legal__tabla th:first-child,
.legal__tabla td:first-child { min-width: 11rem; }

.legal__tabla:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 4px; }