/* ==========================================================================
   legal.css — páginas legales (Aviso Legal, Política de Cookies, Privacidad).
   Plantilla: page-legal.php. Contenido largo desde el editor (the_content()).
   No hay frame de Figma para las legales: se usa el sistema tipográfico del
   sitio (tokens), en medida de lectura estrecha. Solo tokens.css.
   ========================================================================== */

.lfi-legal {
  width: 100%;
  max-width: var(--lfi-content-read);   /* medida de lectura (~1184) */
  margin-inline: auto;
  padding-inline: var(--lfi-gutter);    /* gutter responsivo (24/48/108) */
  padding-block: var(--lfi-pad-card);   /* móvil */
  color: var(--lfi-navy);
}

.lfi-legal__title {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-36);          /* móvil; ≥1024 -> 40 */
  line-height: var(--lfi-lh-display);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
  margin-bottom: var(--lfi-gap-heading);
}

/* Cuerpo del texto legal ---------------------------------------------------- */
.lfi-legal__content {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);
  font-size: var(--lfi-fs-19);
  line-height: var(--lfi-lh-body);      /* 1.48 — cómodo para texto largo */
  letter-spacing: var(--lfi-ls-none);
  color: var(--lfi-navy);
}

/* Ritmo entre bloques. */
.lfi-legal__content > * + * { margin-top: var(--lfi-post-block-space); }   /* 34 */

/* Encabezados de apartado (h2). Piden más aire arriba. */
.lfi-legal__content h2 {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-24);
  line-height: var(--lfi-lh-normal);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
  text-transform: none;
}
.lfi-legal__content > * + h2 { margin-top: var(--lfi-post-heading-mt); }   /* 48 */
.lfi-legal__content h3 {
  font-weight: var(--lfi-weight-bold);
  font-size: var(--lfi-fs-21);
  color: var(--lfi-navy);
}

/* Listas: viñeta roja de marca dentro de la medida de lectura. */
.lfi-legal__content ul,
.lfi-legal__content ol { padding-left: 1.4em; }
.lfi-legal__content ul { list-style: disc; }
.lfi-legal__content ol { list-style: decimal; }
.lfi-legal__content li + li { margin-top: calc(var(--lfi-post-block-space) / 3); }
.lfi-legal__content li::marker { color: var(--lfi-red); }

/* Énfasis. */
.lfi-legal__content strong,
.lfi-legal__content b { font-weight: var(--lfi-weight-bold); }

/* Enlaces: rojo de marca; hover invierte a navy (regla 6). Subrayado siempre. */
.lfi-legal__content a {
  color: var(--lfi-red);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.2s ease;
  overflow-wrap: anywhere;   /* evita desbordes con URLs/correos largos */
}
.lfi-legal__content a:hover,
.lfi-legal__content a:focus-visible { color: var(--lfi-navy); }

/* Tablas (cookies, servicios de terceros). Scroll horizontal en móvil para no
   desbordar (regla: cero scroll horizontal en la página). */
.lfi-legal__table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--lfi-fs-15);
}
.lfi-legal__table th,
.lfi-legal__table td {
  border: 1px solid var(--lfi-navy);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}
.lfi-legal__table th {
  font-weight: var(--lfi-weight-bold);
  background: var(--lfi-soft);
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (min-width: 768px) {
  .lfi-legal__content h2 { font-size: var(--lfi-fs-27); }
}
@media (min-width: 1024px) {
  .lfi-legal { padding-block: var(--lfi-gap-heading); }   /* 72 */
  .lfi-legal__title   { font-size: var(--lfi-fs-40); }
  .lfi-legal__content h2 { font-size: var(--lfi-fs-28); }
}