/* ==========================================================================
   Páginas legales · GranadaNight
   --------------------------------------------------------------------------
   Compartida por aviso-legal.html, privacidad.html y cookies.html.
   Mismos colores que la portada, pero pensada para leer texto largo:
   una sola columna estrecha y más aire entre líneas.
   ========================================================================== */

@font-face{
  font-family:'Sora';
  src:url('fuentes/sora-variable.woff2') format('woff2-variations');
  font-weight:100 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Hanken Grotesk';
  src:url('fuentes/hanken-grotesk-variable.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('fuentes/space-grotesk-variable.woff2') format('woff2-variations');
  font-weight:300 700;font-style:normal;font-display:swap;
}

:root{
  --fondo:#131318;
  --fondo-tarjeta:#1b1b20;
  --fondo-pie:#0e0e13;
  --texto:#e4e1e9;
  --texto-suave:#d4c0d7;
  --texto-tenue:#9d8ba0;
  --rosa:#ecb2ff;
  --cian:#00eefc;
  --borde:rgba(255,255,255,.10);
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}

body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}

a{color:var(--rosa);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--cian)}
:focus-visible{outline:2px solid var(--cian);outline-offset:3px;border-radius:6px}

/* -------------------------------------------------------------------------- */

.cabecera{
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(19,19,24,.9);
  position:sticky;top:0;z-index:10;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
}
.cabecera-fila{
  max-width:760px;margin:0 auto;padding:0 22px;
  min-height:62px;display:flex;align-items:center;
}
.marca{
  display:flex;align-items:center;gap:9px;
  font-family:'Sora',sans-serif;font-weight:800;font-size:18px;
  letter-spacing:-.03em;color:var(--texto);text-decoration:none;
}
.marca:hover{color:var(--texto)}
.marca img{width:30px;height:auto;flex:0 0 auto}
.acento{color:var(--rosa)}

/* -------------------------------------------------------------------------- */

main{max-width:760px;margin:0 auto;padding:clamp(34px,7vw,64px) 22px clamp(50px,9vw,90px)}

h1{
  font-family:'Sora',sans-serif;font-weight:800;color:#fff;
  font-size:clamp(30px,7vw,44px);line-height:1.1;letter-spacing:-.03em;
  margin:0 0 10px;text-wrap:balance;
}

.actualizado{
  font-family:'Space Grotesk',monospace;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--texto-tenue);margin:0 0 clamp(26px,5vw,40px);
}

h2{
  font-family:'Sora',sans-serif;font-weight:700;color:#fff;
  font-size:clamp(21px,4.6vw,26px);line-height:1.25;letter-spacing:-.02em;
  margin:clamp(38px,6vw,54px) 0 12px;text-wrap:balance;
}

h3{
  font-family:'Sora',sans-serif;font-weight:700;color:#fff;
  font-size:clamp(17px,3.6vw,19px);line-height:1.3;letter-spacing:-.01em;
  margin:28px 0 8px;
}

p{margin:0 0 16px;color:var(--texto-suave);text-wrap:pretty}
strong{color:var(--texto);font-weight:700}

ul{margin:0 0 18px;padding-left:22px;color:var(--texto-suave)}
li{margin-bottom:9px;text-wrap:pretty}
li::marker{color:var(--rosa)}

.tabla-envoltorio{overflow-x:auto;margin:0 0 22px;border-radius:14px;border:1px solid var(--borde)}
table{border-collapse:collapse;width:100%;font-size:15px}

/* Sólo las tablas de muchas columnas necesitan más ancho del que da un móvil;
   se desplazan solas, sin arrastrar el resto de la página. Las de dos columnas
   caben de sobra, y forzarles un mínimo les cortaba el valor de la derecha. */
.tabla-envoltorio--ancha table{min-width:560px}
th,td{padding:12px 15px;text-align:left;vertical-align:top;border-bottom:1px solid var(--borde)}
tbody tr:last-child td{border-bottom:0}
th{
  font-family:'Space Grotesk',monospace;font-weight:700;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--texto-tenue);
  background:rgba(255,255,255,.04);
}
td{color:var(--texto-suave)}

.destacado{
  background:var(--fondo-tarjeta);border:1px solid var(--borde);
  border-radius:16px;padding:20px 22px;margin:0 0 22px;
}
.destacado p:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   Datos que faltan por rellenar
   --------------------------------------------------------------------------
   Se ven a la legua a propósito: si esta web se publica con alguno todavía
   puesto, tiene que cantar. `scripts/completar-datos.mjs` los sustituye. */
.pendiente{
  background:#ffd400;color:#131318;font-weight:700;
  padding:1px 7px;border-radius:5px;white-space:nowrap;
  font-family:'Space Grotesk',monospace;font-size:.92em;
}

/* -------------------------------------------------------------------------- */

.pie{border-top:1px solid rgba(255,255,255,.08);background:var(--fondo-pie)}
.pie-fila{
  max-width:760px;margin:0 auto;padding:28px 22px 40px;
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
}
.pie-enlaces{display:flex;flex-wrap:wrap;gap:14px 22px;margin:0}
.pie-enlaces a{
  color:var(--texto-suave);text-decoration:none;font-size:14.5px;
  min-height:44px;display:inline-flex;align-items:center;
}
.pie-enlaces a:hover{color:var(--rosa)}
.pie-nota{
  width:100%;margin:0;font-family:'Space Grotesk',monospace;
  font-size:12.5px;letter-spacing:.04em;color:var(--texto-tenue);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
}