/* 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: 999px;
  background: var(--brand-magenta);
  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-magenta) 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-magenta) 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-magenta);
  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);
}
.legales-toc ol {
  margin: 0;
  padding-left: var(--space-5);
  font-size: 15px;
  line-height: 1.85;
  color: var(--fg-primary);
}
.legales-toc a {
  color: var(--fg-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.legales-toc a:hover { color: var(--brand-magenta); }

.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-magenta);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legales-section a:hover { color: var(--brand-burgundy); }

.legales-section table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: 14px;
}
.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-magenta) 6%, transparent);
  border-left: 3px solid var(--brand-magenta);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  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;
}