/* ==============================================================
   pages/legal.css — estilos exclusivos de esta página
   Se carga solo en su HTML correspondiente (PageSpeed).
   Requiere: tokens.css, base.css, components.css, layout.css
   ============================================================== */

/* Compartido por garantias.html, privacidad.html y
   terminos-y-condiciones.html — lectura larga, fondo crema,
   contenedor angosto (.container--narrow). */

/* --- Páginas legales: Hero ------------------------------------------ */
/* Compartido por garantias.html, privacidad.html y terminos-y-condiciones.html:
   las 3 páginas usan el mismo sistema (specs docs/componente-garantias- y
   componente-privacidad-noedelaflor.md). Cada página escribe su propio HTML
   con su copy; solo lo que difiere lleva una clase modificadora.
   Fondo carbón con el efecto de puntos (dots-effect.js, data-dots-effect).
   Dos wrappers anidados de 62px verticales cada uno → 124px de padding total. */
.legal-hero {
  --legal-hero-pad-y: clamp(var(--space-7), 8.6vw, 124px);  /* 62 + 62 en desktop */
  --legal-hero-pad-x: 20px;
  --legal-hero-text-max: 1053px;       /* bloque de texto (Figma) dentro de los 1280px */
  --legal-hero-gap: 32px;              /* título → intro */

  position: relative;                /* contiene el canvas absoluto */
  overflow: hidden;
  background-color: var(--color-carbon);
  color: var(--color-crema);
  padding: var(--legal-hero-pad-y) var(--legal-hero-pad-x);
}

/* Canvas del efecto de puntos: detrás de todo, nunca captura el puntero */
.legal-hero .dots-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.legal-hero__inner {
  position: relative;                /* por encima del canvas */
  max-width: var(--legal-hero-text-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--legal-hero-gap);
  text-align: center;
}

.legal-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-body);   /* Fraunces Regular (400) */
  font-size: var(--fs-hero);         /* 36px → 57px (--fs-display fluido) */
  line-height: var(--leading-tight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* Énfasis dentro del título: Garantías lleva una palabra en itálica oro
   ("contigo"), mismo recurso que el Hero de Inicio */
.legal-hero__title em {
  font-style: italic;
  font-weight: inherit;
  color: var(--color-oro);
}

/* Privacidad: el título completo va en oro sólido, sin itálica ni palabra
   de énfasis diferenciada (decisión de Rey, no replicar el patrón de
   Garantías aquí). Ver docs/componente-privacidad-noedelaflor.md §1. */
.legal-hero__title--oro { color: var(--color-oro); }

.legal-hero__intro {
  margin: 0;
  font-weight: var(--weight-semibold);  /* Hanken Grotesk SemiBold (600), cargado en el <link> de fuentes */
  font-size: var(--fs-h2);           /* 24px → 32px */
  line-height: 1.5;
}

/* --- Páginas legales: bloque de copy --------------------------------- */
/* Un solo bloque crema con contenedor de 1024px (más
   angosto que los 1280px del sitio, a propósito, por legibilidad). Spacing
   de desktop (192 / 192 / 92) reducido con clamp en mobile siguiendo el
   criterio de Precios y Testimonios. */
.legal-copy {
  --legal-pad-y: clamp(var(--space-7), 13.3vw, 192px);    /* arriba del índice y abajo del copy */
  --legal-pad-x: 20px;
  --legal-content-max: 1024px;
  --legal-block-gap: clamp(var(--space-7), 13.3vw, 192px);  /* índice → divisor → copy */
  --legal-section-gap: clamp(var(--space-6), 6.4vw, 92px);  /* entre secciones */
  --legal-inner-gap: 32px;             /* título → subtítulo, subtítulo → párrafo, párrafo → párrafo */
  --legal-index-gap: 18px;             /* entre líneas del índice */
  --legal-divider-gap: 12px;           /* entre estrellas */
  --legal-list-indent: 27px;

  background-color: var(--color-crema);
  color: var(--color-carbon);
  padding: var(--legal-pad-y) var(--legal-pad-x);
}

.legal-copy__inner {
  max-width: var(--legal-content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--legal-section-gap);
}

/* Índice (solo Garantías: privacidad y términos no lo llevan): anchors reales; subrayado oro siempre visible que engrosa en hover
   (mismo tratamiento de link-en-copy sobre crema: texto carbón) */
.legal-copy__index {
  margin-bottom: calc(var(--legal-block-gap) - var(--legal-section-gap));
}

.legal-copy__index ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--legal-index-gap);
}

.legal-copy__index a {
  font-size: var(--fs-body);         /* 16px → 18px */
  line-height: 1.5;
  color: var(--color-carbon);
  text-decoration: underline;
  text-decoration-color: var(--color-oro);
  text-decoration-thickness: 1px;
  text-underline-position: from-font;
  transition: text-decoration-thickness var(--ease-base) var(--curve-standard);
}

.legal-copy__index a:hover,
.legal-copy__index a:focus-visible { text-decoration-thickness: 2px; }

/* Divisor de estrellas (solo Garantías): 16 / 24 / 16, alto 24px */
.legal-copy__divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--legal-divider-gap);
  height: 24px;
  margin-bottom: calc(var(--legal-block-gap) - var(--legal-section-gap));
}

/* Sección de contenido: título + bloques (subtítulo, párrafos, lista) */
.legal-copy__section {
  display: flex;
  flex-direction: column;
  gap: var(--legal-inner-gap);
}

.legal-copy__section > * { margin: 0; }

.legal-copy__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h2);           /* 24px → 32px */
  line-height: var(--leading-tight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.legal-copy__subtitle {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h3);           /* 20px → 24px */
  line-height: var(--leading-tight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.legal-copy__text {
  font-size: var(--fs-body);         /* 16px → 18px */
  line-height: 1.5;
}

.legal-copy__list {
  padding-left: var(--legal-list-indent);
  list-style: disc;
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* Espacio entre bloques dentro de una lista y el párrafo que la sigue: el gap
   del flex ya los separa, así que las listas no arrastran márgenes propios */
.legal-copy__list,
.legal-copy__text { margin: 0; }

/* Links dentro del copy (correos, PDF): mismo tratamiento que .prose a sobre
   fondo crema — texto carbón con subrayado oro siempre visible, que engrosa
   a 2px en hover (estilo-noedelaflor.md §5). */
.legal-copy__link {
  color: var(--color-carbon);
  text-decoration: underline;
  text-decoration-color: var(--color-oro);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--ease-base) var(--curve-standard);
}

.legal-copy__link:hover,
.legal-copy__link:focus-visible { text-decoration-thickness: 2px; }

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .legal-copy__index a,
  .legal-copy__link { transition: none; }
}