/* ============================================================================
   HERSAFE · PÁGINAS LEGALES (Términos y condiciones · Cookies · Privacidad)
   Sólo estilos propios de estas páginas. El sistema visual completo (tokens,
   tipografías, .container, .button, .site-header, .site-footer) se hereda de
   styles.css — aquí no se redefine ningún color ni tipografía.
   ========================================================================== */

/* --- Cabecera --------------------------------------------------------------
   La cabecera de la landing es fija y transparente (se vuelve azul al hacer
   scroll). En las páginas legales no hay Hero detrás: la dejamos sólida y en
   flujo (sticky) desde el primer momento, con el logo en blanco. */
.legal-page .site-header {
  position: sticky;
  background-color: var(--color-blue-electric);
}

.legal-page .site-header__logo img {
  filter: brightness(0) invert(1);
}

/* --- Zona de lectura ------------------------------------------------------ */
.legal {
  padding-block: var(--space-2xl) var(--space-3xl);
}

.legal__wrap {
  width: 100%;
  max-width: 44rem; /* longitud de línea cómoda para lectura larga */
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.legal__title {
  margin-bottom: var(--space-2xs);
}

.legal__updated {
  font-size: var(--font-size-link);
  color: color-mix(in srgb, var(--color-black) 62%, transparent);
  margin-bottom: var(--space-2xl);
}

/* --- Cuerpo del texto legal --------------------------------------------- */
.legal__body {
  font-size: 1.0625rem;
  line-height: 1.65;
}

.legal__body > * + * {
  margin-top: var(--space-md);
}

.legal__body h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-heading);
  margin-top: var(--space-2xl);
}

.legal__body h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-heading);
  margin-top: var(--space-xl);
}

.legal__body h2:first-child,
.legal__body h3:first-child {
  margin-top: 0;
}

.legal__body ul,
.legal__body ol {
  padding-inline-start: var(--space-lg);
}

.legal__body ul { list-style: disc; }
.legal__body ol { list-style: decimal; }

.legal__body li + li {
  margin-top: var(--space-2xs);
}

.legal__body li::marker {
  color: var(--color-purple);
}

.legal__body a {
  color: var(--color-blue-electric);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.legal__body strong {
  font-weight: var(--font-weight-bold);
}

/* Bloque de datos de contacto: líneas juntas, sin el aire de un párrafo */
.legal__contact > * + * {
  margin-top: var(--space-3xs);
}

/* Cierre del documento (firma / fecha) */
.legal__signoff {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid color-mix(in srgb, var(--color-black) 14%, transparent);
  font-size: var(--font-size-link);
  color: color-mix(in srgb, var(--color-black) 62%, transparent);
}

.legal__signoff > * + * {
  margin-top: var(--space-3xs);
}

/* --- Enlace legal activo en el footer ----------------------------------- */
.site-footer__legal-link[aria-current="page"] {
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 40rem) {
  .legal {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .legal__body {
    font-size: 1rem;
  }

  .legal__body h2 {
    margin-top: var(--space-xl);
  }
}