/* =========================================================================
   PÁGINAS LEGALES — 03/08/2026
   Política de privacidad, aviso legal y política de cookies.

   PROBLEMA QUE RESUELVE
   Estas páginas usaban los estilos genéricos de sección: fondo gris medio
   (#414140) con el color de texto secundario (#7C7B7B). El contraste era de
   2:1, muy por debajo del mínimo legible (4,5:1), y el texto no se leía.

   Aquí se pone fondo oscuro de la web (#272626) con texto claro, y se ajusta
   la tipografía a un texto largo (ancho de lectura, interlineado y espacios).

   Se carga DESPUÉS de styles.css, sólo en las tres páginas legales, desde:
     views/policies/politica-privacidad.head.php
     views/policies/aviso-legal.head.php
     views/policies/politica-cookies.head.php

   No afecta a la home ni a ninguna otra página.
   ========================================================================= */

:root {
  /* Texto legal: blanco roto ligeramente apagado. Contraste 8,7:1 sobre #272626 */
  --color-legal-text: #cfcac1;
  --color-legal-border: rgba(236, 231, 221, 0.18);
}


/* -------------------------------------------------------------------------
   1. FONDO Y CAJA DE LECTURA
   ------------------------------------------------------------------------- */
.politica-legal .section.light,
.politica-legal .section.dark {
  background-color: var(--color-bg-dark);
}

/* El contenedor centra sus hijos por defecto (align-items: center), lo que
   estrecha el bloque de texto a su contenido. En un texto largo interesa que
   ocupe todo el ancho disponible y alineado a la izquierda. */
.politica-legal .section .container {
  align-items: flex-start;
}

/* Ancho de lectura: 1350px son demasiados caracteres por línea para un texto
   de 16px. Se limita a 860px, que es lo cómodo de leer. */
.politica-legal .section .section-header,
.politica-legal .section .section-text {
  width: 100%;
  max-width: 860px;
}


/* -------------------------------------------------------------------------
   2. TÍTULO DE LA PÁGINA
   ------------------------------------------------------------------------- */
.politica-legal .section .section-header {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-divider);
}
.politica-legal .section .section-header h2,
.politica-legal .section .section-header .section-title {
  font-family: var(--font-secondary);
  font-size: 34px;
  line-height: 1.2;
  color: var(--color-heading-light);
}
@media (max-width: 992px) {
  .politica-legal .section .section-header h2,
  .politica-legal .section .section-header .section-title {
    font-size: 26px;
  }
}


/* -------------------------------------------------------------------------
   3. CUERPO DEL TEXTO
   Se sobrescribe el color heredado de `.section.light .section-text`, que era
   el que dejaba el texto ilegible.
   ------------------------------------------------------------------------- */
.politica-legal .section.light .section-text,
.politica-legal .section.dark .section-text,
.politica-legal .section .section-text {
  color: var(--color-legal-text);
  text-align: left;
}

.politica-legal .section-text p,
.politica-legal .section-text li,
.politica-legal .section-text span,
.politica-legal .section-text td,
.politica-legal .section-text th {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-legal-text);
}
@media (max-width: 576px) {
  .politica-legal .section-text p,
  .politica-legal .section-text li,
  .politica-legal .section-text span,
  .politica-legal .section-text td,
  .politica-legal .section-text th {
    font-size: 15px;
  }
}

.politica-legal .section-text p {
  margin: 0 0 18px 0;
}

/* Los apartados del texto legal van marcados con <strong> o <b>: se tratan
   como titulillos, en claro y con aire por encima. */
.politica-legal .section-text strong,
.politica-legal .section-text b {
  display: inline-block;
  font-family: var(--font-primary-bold);
  font-weight: 700;
  color: var(--color-heading-light);
  line-height: 1.4;
}
.politica-legal .section-text p > strong:only-child,
.politica-legal .section-text p > b:only-child {
  margin-top: 22px;
  font-size: 18px;
  letter-spacing: 0.3px;
}
.politica-legal .section-text p:first-child > strong:only-child,
.politica-legal .section-text p:first-child > b:only-child {
  margin-top: 0;
}

.politica-legal .section-text h1,
.politica-legal .section-text h2,
.politica-legal .section-text h3,
.politica-legal .section-text h4,
.politica-legal .section-text h5,
.politica-legal .section-text h6 {
  color: var(--color-heading-light);
  font-family: var(--font-secondary);
  line-height: 1.3;
  margin: 34px 0 14px 0;
}
.politica-legal .section-text h1 { font-size: 26px; }
.politica-legal .section-text h2 { font-size: 24px; }
.politica-legal .section-text h3 { font-size: 20px; }
.politica-legal .section-text h4,
.politica-legal .section-text h5,
.politica-legal .section-text h6 { font-size: 18px; }


/* -------------------------------------------------------------------------
   4. LISTAS
   ------------------------------------------------------------------------- */
.politica-legal .section-text ul,
.politica-legal .section-text ol {
  margin: 0 0 20px 0;
  padding-left: 22px;
}
.politica-legal .section-text li {
  margin-bottom: 8px;
}
.politica-legal .section-text li::marker {
  color: var(--color-primary);
}


/* -------------------------------------------------------------------------
   5. ENLACES
   ------------------------------------------------------------------------- */
.politica-legal .section-text a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
  transition: color var(--transition-duration) ease-in-out;
}
.politica-legal .section-text a:hover,
.politica-legal .section-text a:focus {
  color: var(--color-heading-light);
}


/* -------------------------------------------------------------------------
   6. TABLAS (las usa la política de cookies)
   En móvil la tabla se desplaza en horizontal dentro de su caja en vez de
   desbordar la página.
   ------------------------------------------------------------------------- */
.politica-legal .section-text table {
  width: 100%;
  margin: 10px 0 28px 0;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}
.politica-legal .section-text table td,
.politica-legal .section-text table th {
  padding: 10px 14px;
  border: 1px solid var(--color-legal-border);
  vertical-align: top;
  min-width: 140px;
}
.politica-legal .section-text table tr:first-child td,
.politica-legal .section-text table th {
  background-color: rgba(236, 231, 221, 0.06);
  color: var(--color-heading-light);
  font-family: var(--font-primary-bold);
  font-weight: 700;
}


/* -------------------------------------------------------------------------
   7. VOLVER A LA WEB
   Estas páginas se abren en pestaña nueva y no tienen menú: se añade un
   enlace de vuelta al final para quien llegue por buscador o enlace directo.
   ------------------------------------------------------------------------- */
.politica-legal .legal-back {
  width: 100%;
  max-width: 860px;
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid var(--color-divider);
}
.politica-legal .legal-back a {
  color: var(--color-primary);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition-duration) ease-in-out;
}
.politica-legal .legal-back a:hover,
.politica-legal .legal-back a:focus {
  color: var(--color-heading-light);
}