/* css/legales.css — páginas legales (aviso, privacidad, cookies).
   Tipografía orientada a lectura larga, márgenes generosos, contraste alto. */

main.legales-page {
  background: var(--bg-primary);
  color: var(--fg-primary);
}

/* Banner "Volver al formulario" — sólo se inyecta cuando el usuario
   llega a /privacidad.html desde el form de contacto o presupuesto.
   El banner es fixed (no sticky) para que el botón quede siempre anclado
   bajo el topbar pase lo que pase con el scroll. Position:fixed evita
   los problemas de sticky en contenedores con overflow:clip. */
.privacy-return-banner {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  z-index: 40; /* debajo del topbar (z 50) pero encima de polígonos y hero */
  /* El propio banner es click-through; sólo el botón captura clics.
     Así el contenido legal que pasa por detrás sigue siendo interactivo. */
  pointer-events: none;
}
.privacy-return-banner > .container {
  display: flex;
  justify-content: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
}
.privacy-return-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 2px;
  background: var(--brand-blue);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  pointer-events: auto; /* re-habilita el clic SOLO sobre el botón */
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--brand-blue) 60%, transparent),
              0 2px 6px rgba(10, 10, 10, 0.08);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.privacy-return-btn:hover,
.privacy-return-btn:focus-visible {
  outline: none;
  transform: translateX(-3px);
  background: color-mix(in srgb, var(--brand-blue) 88%, #000);
}
.privacy-return-btn svg { flex-shrink: 0; width: 16px; height: 16px; }

.legales-hero {
  padding: calc(var(--topbar-height) + var(--space-10)) 0 var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  background: transparent;
}

/* Cuando el banner está presente reservamos hueco extra arriba para que
   no tape el eyebrow del hero. El banner es fixed (no flujo) así que hay
   que añadir el padding manualmente. */
body.has-privacy-return .legales-hero {
  padding-top: calc(var(--topbar-height) + 76px);
}

.legales-hero .container { position: relative; z-index: 2; }

.legales-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brand-blue);
  margin-bottom: var(--space-4);
}

.legales-hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4);
  color: var(--fg-primary);
  max-width: 22ch;
}

.legales-hero-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-muted);
}

.legales-body {
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 112px);
  position: relative;
}

.legales-body .container {
  max-width: 760px;
  position: relative;
  z-index: 2;
}

.legales-toc {
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.legales-toc-title {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  margin: 0 0 var(--space-3);
}
/* reset.css quita la numeración a todas las listas. Aquí hay que
   devolvérsela: los apartados del cuerpo van rotulados "1. Objeto de la
   web", "2. Acceso a la web"… y un índice sin cifras no se puede casar
   con ellos de un vistazo. */
.legales-toc ol {
  margin: 0;
  padding-left: var(--space-5);
  font-size: 15px;
  line-height: 1.85;
  color: var(--fg-primary);
  list-style: decimal;
}
.legales-toc li::marker {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-muted);
}
.legales-toc a {
  color: var(--fg-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.legales-toc a:hover { color: var(--brand-blue); }

.legales-section {
  margin-top: clamp(32px, 4vw, 52px);
}
.legales-section h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  color: var(--fg-primary);
}
.legales-section h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  margin: var(--space-6) 0 var(--space-3);
  color: var(--fg-primary);
}
.legales-section p,
.legales-section ul,
.legales-section ol {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-primary);
  margin: 0 0 var(--space-4);
}
.legales-section ul,
.legales-section ol { padding-left: var(--space-5); }
.legales-section li { margin-bottom: var(--space-2); }
.legales-section strong { font-weight: 600; color: var(--fg-primary); }
.legales-section a {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legales-section a:hover { color: var(--brand-navy); }

.legales-section table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: 14px;
}

/* La tabla de cookies mide 455px por el contenido de sus celdas. En una
   pantalla de 375px se salía SIN contenedor desplazable de ningún tipo:
   la última columna quedaba cortada y era imposible llegar a ella.
   `display: block` convierte la propia tabla en el contenedor. */
@media (max-width: 600px) {
  .legales-section table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .legales-section td { white-space: normal; min-width: 150px; }
}
.legales-section th,
.legales-section td {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.legales-section th {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  font-weight: 600;
  background: var(--bg-soft);
}

.legales-callout {
  background: color-mix(in srgb, var(--brand-blue) 6%, transparent);
  border-left: 3px solid var(--brand-blue);
  border-radius: 2px;
  padding: var(--space-5);
  margin: var(--space-6) 0;
}
.legales-callout p { margin: 0; font-size: 15px; }

.legales-section-end {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  text-align: center;
}

/* --- Rediseño: alineación ---
   El cierre de los textos legales también va al margen izquierdo. */
.legales-section-end { text-align: left; }

/* ==================================================================
   TABLAS RGPD Y BLOQUES DE DATOS
   ------------------------------------------------------------------
   Las tablas de "Responsable / Finalidad / Legitimación / …" son el
   formato en que la AEPD espera esta información. Se maquetan como
   tabla de verdad —con <th scope="row">— y no como lista de párrafos,
   para que un lector de pantalla relacione cada valor con su rótulo.
   ================================================================== */
.legales-tabla-wrap {
  margin: var(--space-5) 0;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.legales-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0;
}
.legales-tabla th[scope="row"] {
  width: 190px;
  min-width: 150px;
  text-align: left;
  vertical-align: top;
  padding: var(--space-4);
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-primary);
  border-bottom: 1px solid var(--border);
}
.legales-tabla thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.legales-tabla td {
  padding: var(--space-4);
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
  line-height: 1.6;
}
.legales-tabla tr:last-child th,
.legales-tabla tr:last-child td { border-bottom: 0; }
.legales-tabla ul { margin: 0 0 var(--space-3); padding-left: 1.1em; }
.legales-tabla li { margin-bottom: 4px; }
.legales-tabla p:last-child { margin-bottom: 0; }

/* En móvil la tabla de dos columnas se queda sin sitio: el rótulo pasa
   encima del valor, en bloque, en vez de forzar un desplazamiento
   lateral en un texto que hay que poder leer entero. */
@media (max-width: 640px) {
  .legales-tabla-wrap { overflow-x: visible; }
  .legales-tabla,
  .legales-tabla tbody,
  .legales-tabla tr,
  .legales-tabla th[scope="row"],
  .legales-tabla td { display: block; width: auto; }
  .legales-tabla th[scope="row"] {
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border-bottom: 0;
  }
  .legales-tabla td { padding: 0 var(--space-4) var(--space-4); }
  .legales-tabla tr { border-bottom: 1px solid var(--border); }
  .legales-tabla tr:last-child { border-bottom: 0; }
  /* La tabla de terceros sí tiene cabecera y ahí el desplazamiento es
     preferible a romperla: son cuatro columnas cortas. */
  .legales-tabla:has(thead) { display: table; }
  .legales-tabla:has(thead) tbody { display: table-row-group; }
  .legales-tabla:has(thead) tr { display: table-row; }
  .legales-tabla:has(thead) th,
  .legales-tabla:has(thead) td { display: table-cell; }
  .legales-tabla-wrap:has(thead) { overflow-x: auto; }
}

/* Ficha de datos identificativos */
.legales-ficha {
  background: var(--bg-soft);
  border-left: 3px solid var(--brand-blue);
  padding: var(--space-4) var(--space-5);
  border-radius: 2px;
  line-height: 1.9;
}

/* Aviso de que la web no pone cookies: es la información principal de
   esa página, no una nota al pie. */
.legales-destacado {
  background: var(--brand-blue-tint, var(--bg-soft));
  border-left: 3px solid var(--brand-blue);
  padding: var(--space-4) var(--space-5);
  border-radius: 2px;
}

/* Aviso de traducción de cortesía en las páginas /en/ */
.legales-nota {
  font-size: 14px;
  color: var(--fg-muted);
  border-left: 2px solid var(--border);
  padding-left: var(--space-4);
}