/* New Uthopia 80 · páginas legales (aviso legal, privacidad, cookies y condiciones).
   Estas páginas enlazan este archivo con href="../assets/css/legal.css" y ponen su contenido
   dentro de <main class="legal"> … </main> con h1, h2, h3, p, ul, ol y table.
   Es autónomo: no necesita main.css ni JavaScript. */
@font-face { font-family: 'Bebas Neue'; src: url('../fonts/BebasNeue-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-Variable.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'VT323'; src: url('../fonts/VT323-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Sedgwick Ave Display'; src: url('../fonts/SedgwickAveDisplay-Regular.ttf') format('truetype'); font-display: swap; }

:root {
  --bg: #0A0612; --panel: #140b26; --morado: #7B2CBF; --morado-osc: #3C096C; --magenta: #FF2E97; --rosa: #FF4FD8;
  --cian: #00E5FF; --amarillo: #FFE600; --texto: #F4EDFF; --texto-2: #D6CAEB; --texto-3: #A495C2; --borde: rgba(199, 125, 255, .28);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--texto);
  font: 400 1.0625rem/1.7 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 10; background: linear-gradient(90deg, var(--magenta), var(--morado), var(--cian)); box-shadow: 0 0 16px rgba(255, 46, 151, .6); }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 500px at 90% -10%, rgba(123, 44, 191, .25), transparent 60%), radial-gradient(700px 400px at -10% 40%, rgba(255, 46, 151, .08), transparent 60%); }
a { color: var(--cian); text-underline-offset: 3px; overflow-wrap: anywhere; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--magenta); color: #fff; }
img, svg { max-width: 100%; height: auto; }

/* Cabecera y pie de las páginas legales */
.legal-saltar { position: absolute; left: -9999px; top: 10px; z-index: 20; padding: 10px 14px; border-radius: 8px; background: var(--amarillo); color: #1a0b2e; font-weight: 700; text-decoration: none; }
.legal-saltar:focus { left: 12px; }
body > header, .legal-cabecera {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  max-width: 860px; margin: 0 auto; padding: 26px 16px 18px; border-bottom: 1px solid rgba(199, 125, 255, .2);
}
body > header a, .legal-cabecera a { text-decoration: none; }
body > header > a:first-child, .legal-volver {
  display: inline-flex; align-items: center; gap: 8px; font: 400 1.55rem/1 'Sedgwick Ave Display', cursive; color: #fff;
  text-shadow: 0 0 10px rgba(255, 79, 216, .7); letter-spacing: 0;
}
.legal-volver:hover { color: var(--rosa); }
body > header nav, .legal-menu, .legal-enlaces { display: flex; flex-wrap: wrap; gap: 8px 18px; }
body > header nav a, .legal-menu a, .legal-enlaces a { font: 600 .8rem/1.4 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); padding: 4px 0; border-bottom: 2px solid transparent; }
body > header nav a:hover, .legal-menu a:hover, .legal-enlaces a:hover { color: #fff; border-bottom-color: var(--magenta); }
.legal-menu a[aria-current='page'], .legal-enlaces a[aria-current='page'] { color: var(--amarillo); border-bottom-color: var(--amarillo); }
body > footer, .legal-pie { max-width: 860px; margin: 0 auto; padding: 24px 16px 40px; font-size: .85rem; color: var(--texto-3); border-top: 1px solid rgba(255, 255, 255, .08); }
.legal-pie p { margin: 14px 0 0; }
body > footer a, .legal-pie a { color: var(--texto-2); }
.legal-pie a:hover { color: var(--rosa); }

/* Piezas propias de las páginas legales */
.legal .legal-fecha { margin-top: 0; font: 400 1.15rem/1.2 'VT323', monospace; letter-spacing: .06em; color: var(--texto-3); }
.legal .legal-aviso-pendiente { padding: 12px 16px; border: 1px dashed rgba(255, 230, 0, .7); border-radius: 12px; background: rgba(255, 230, 0, .06); color: var(--amarillo); font-size: .95rem; }
.legal .pendiente { padding: 0 6px; border-radius: 5px; background: var(--amarillo); color: #1a0b2e; font-weight: 700; font-size: .9em; white-space: nowrap; }
.legal .legal-indice { margin: 1.6em 0 1.2em; padding: 18px 20px; border-radius: 16px; background: rgba(27, 14, 48, .7); border: 1px solid var(--borde); }
.legal .legal-indice > p { margin: 0 0 10px; font: 400 1.25rem/1 'VT323', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--cian); }
.legal .legal-indice ul, .legal .legal-indice ol { margin: 0; padding-left: 0; list-style: none; columns: 2 240px; column-gap: 28px; font-size: .95rem; }
.legal .legal-indice li { break-inside: avoid; margin: 0 0 8px; }
.legal .legal-indice li::marker { content: none; }
.legal .legal-indice a { color: var(--texto); text-decoration: none; border-bottom: 1px dashed rgba(0, 229, 255, .5); }
.legal .legal-indice a:hover { color: var(--cian); }
.legal .legal-tabla { margin: 1.4em 0; overflow-x: auto; border: 1px solid var(--borde); border-radius: 14px; }
.legal .legal-tabla table { margin: 0; border: 0; border-radius: 0; }
@media (min-width: 641px) { .legal .legal-tabla table { display: table; } }
@media (max-width: 640px) {
  .legal .legal-tabla table { display: block; }
  .legal .legal-tabla td, .legal .legal-tabla th { min-width: 0; }
  .legal .legal-tabla tbody tr:nth-child(even) td { background: none; }
}

/* Contenido */
main.legal { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
.legal > * + * { margin-top: 1em; }
.legal h1 {
  margin: .1em 0 .4em; padding-top: .16em; font: 400 clamp(2.6rem, 8vw, 4.6rem)/.95 'Bebas Neue', Impact, sans-serif; letter-spacing: .01em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, #f6e1ff 45%, #d9a2ff 50%, #8f3fd6 52%, #ff8fe2 85%, #fff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(60, 9, 108, .9));
}
.legal h1 + p { color: var(--texto-2); }
.legal h2 {
  margin: 2.2em 0 .6em; padding-top: .9em; border-top: 1px dashed var(--borde);
  font: 400 clamp(1.7rem, 4.2vw, 2.3rem)/1 'Bebas Neue', Impact, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--cian);
  text-shadow: 0 0 12px rgba(0, 229, 255, .35);
}
.legal h3 { margin: 1.6em 0 .4em; font: 600 1.15rem/1.3 'Space Grotesk', sans-serif; color: var(--rosa); }
.legal p, .legal li { color: var(--texto-2); }
.legal strong, .legal b { color: #fff; font-weight: 600; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal li + li { margin-top: .45em; }
.legal ul li::marker { content: '▸  '; color: var(--rosa); }
.legal ol li::marker { color: var(--rosa); font-family: 'VT323', monospace; font-size: 1.15em; }
.legal code, .legal kbd { font: 400 1.1em/1 'VT323', monospace; color: var(--amarillo); }
.legal small, .legal .nota { display: block; font-size: .88rem; color: var(--texto-3); }
.legal hr { border: 0; border-top: 1px dashed var(--borde); margin: 2em 0; }
.legal blockquote { margin: 1.4em 0; padding: 14px 18px; border-left: 3px solid var(--amarillo); background: rgba(255, 230, 0, .06); border-radius: 0 12px 12px 0; color: var(--texto); }
.legal address { font-style: normal; }

/* Tablas (p. ej. la de cookies): con scroll horizontal en móvil */
.legal table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; border: 1px solid var(--borde); border-radius: 14px; }
.legal thead th { background: rgba(123, 44, 191, .28); color: #fff; font: 400 1.15rem/1.2 'VT323', monospace; letter-spacing: .08em; text-transform: uppercase; }
.legal th, .legal td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, .07); min-width: 120px; }
.legal tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .025); }
.legal tbody th { color: #fff; font-weight: 600; }
.legal caption { caption-side: top; padding: 0 0 8px; text-align: left; color: var(--texto-3); font-size: .88rem; }

/* Enlace de vuelta, si la página lo incluye */
.legal .volver, .legal a.volver { display: inline-flex; align-items: center; gap: 8px; margin-top: 2.4em; padding: .8em 1.2em; border-radius: 999px; text-decoration: none; font: 700 .85rem/1 'Space Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(95deg, #D1006B, var(--morado)); }

@media print {
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
  .legal h1 { background: none; color: #000; filter: none; }
  .legal h2 { color: #000; text-shadow: none; }
  .legal p, .legal li { color: #000; }
}