/*
 * Lunako — páginas legales
 *
 * El texto llega tal cual del editor, con sus párrafos, listas y tablas, y el
 * reset de base.css les quita márgenes y viñetas. Aquí se les devuelven, solo
 * dentro de .lk-legal__texto.
 */

.lk-legal__cab {
  padding-block: var(--lk-header) 48px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.lk-legal__fecha { color: var(--lk-muted); }

/* Índice a la izquierda y texto a la derecha. Sin índice, el texto se queda en
   su columna igualmente: las tres páginas arrancan a la misma altura. */
.lk-legal__cuerpo {
  display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
  gap: 40px; align-items: start;
}
.lk-legal__texto { grid-column: 2; max-width: 65ch; color: var(--lk-muted); text-wrap: pretty; }

.lk-legal__indice {
  position: sticky; top: calc(var(--lk-header) + var(--lk-admin) + 32px);
  display: flex; flex-direction: column; gap: 20px;
}
.lk-legal__rotulo { color: var(--lk-muted); }
.lk-legal__lista {
  display: flex; flex-direction: column; gap: 10px;
  counter-reset: lk-legal;
  font-family: var(--lk-font-body); font-weight: 300;
  font-size: 14px; line-height: 1.45; color: var(--lk-ink);
}
.lk-legal__lista li { counter-increment: lk-legal; display: flex; gap: 12px; }
.lk-legal__lista li::before {
  content: counter(lk-legal, decimal-leading-zero);
  flex: none; padding-top: 1px;
  font-size: 11px; letter-spacing: 1px; color: var(--lk-accent-ink);
}

/* ------------------------------- el texto ------------------------------- */

.lk-legal__texto > * + * { margin-top: 1.1em; }

.lk-legal__texto h2 {
  margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--lk-line-light);
  font-family: var(--lk-font-display); font-weight: 300;
  font-size: 24px; line-height: 1.35; letter-spacing: -.2px; color: var(--lk-ink);
}
.lk-legal__texto h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lk-legal__texto h3 {
  margin-top: 40px;
  font-family: var(--lk-font-display); font-weight: 425;
  font-size: 16px; line-height: 1.4; letter-spacing: .2px; color: var(--lk-ink);
}
.lk-legal__texto h2 + *, .lk-legal__texto h3 + * { margin-top: 16px; }

.lk-legal__texto strong { font-weight: 600; color: var(--lk-ink); }

.lk-legal__texto a {
  color: var(--lk-ink);
  border-bottom: 1px solid rgba(177, 116, 87, .6);
  transition: color var(--lk-dur-veil) var(--lk-ease), border-color var(--lk-dur-veil) var(--lk-ease);
}
.lk-legal__texto a:hover, .lk-legal__texto a:focus-visible { color: var(--lk-accent); border-bottom-color: var(--lk-accent); }

.lk-legal__texto ul, .lk-legal__texto ol { padding-left: 1.3em; }
.lk-legal__texto ul { list-style: disc; }
.lk-legal__texto ol { list-style: decimal; }
.lk-legal__texto li + li { margin-top: .4em; }
.lk-legal__texto li::marker { color: var(--lk-accent); }

/* Las tablas de cookies son anchas: en el móvil se desplazan dentro de su
   bloque en vez de empujar la página hacia los lados.
   La hoja de bloques de WordPress les pone rejilla completa y un filete de
   3 px bajo la cabecera, con la misma especificidad que las reglas de aquí y
   cargada después. Se anula con un nivel más. */
.lk-legal__texto .wp-block-table { margin-inline: 0; overflow-x: auto; }
.lk-legal__texto .wp-block-table :is(thead, th, td) { border: 0; }
.lk-legal__texto table {
  width: 100%; border-collapse: collapse;
  font-size: 14px; line-height: 1.5;
}
.lk-legal__texto th, .lk-legal__texto .wp-block-table th {
  padding: 0 16px 12px 0; text-align: left; vertical-align: bottom;
  font-weight: 400; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--lk-muted);
  border-bottom: 1px solid rgba(26, 25, 22, .2);
}
.lk-legal__texto td, .lk-legal__texto .wp-block-table td {
  padding: 12px 16px 12px 0; vertical-align: top;
  border-bottom: 1px solid var(--lk-line-light);
}
.lk-legal__texto figcaption { margin-top: 10px; font-size: 13px; }

/* En el móvil el índice sube encima del texto y deja de ser fijo. */
@media (max-width: 900px) {
  .lk-legal__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .lk-legal__texto { grid-column: auto; }
  .lk-legal__indice {
    position: static;
    padding-bottom: 32px; border-bottom: 1px solid var(--lk-line-light);
  }
  .lk-legal__lista { font-size: 16px; gap: 4px; }
  .lk-legal__lista a { min-height: 40px; display: inline-flex; align-items: center; }
  .lk-legal__lista li { align-items: center; }
  .lk-legal__lista li::before { padding-top: 0; }
  .lk-legal__texto h2 { margin-top: 48px; font-size: 22px; }
  .lk-legal__texto table { font-size: 15px; }
  .lk-legal__texto th { font-size: 11px; }
}