/* CACHE-BUSTING — LEE ESTO ANTES DE TOCAR CUALQUIER CSS/JS DE public/
   ═══════════════════════════════════════════════════════════════════
   Todos los <link rel="stylesheet" href="/css/...">  y <script src="/js/...">
   propios del proyecto (NO los de fonts.googleapis.com) llevan un query string
   ?v=YYYYMMDD en los 14 HTML de public/. /css/*.css y /js/*.js los sirve nginx
   directamente como estáticos (no pasan por Express/Node), así que el nombre de
   archivo nunca cambia entre deploys — sin este query string el navegador (sobre
   todo en móvil) puede seguir sirviendo la copia cacheada en disco indefinidamente,
   aunque el servidor ya tenga el archivo nuevo, y solo se ve la versión correcta en
   incógnito o con hard-refresh.

   Antes de comitear CUALQUIER deploy que toque uno o más archivos de public/css/ o
   public/js/, sube la versión en los 14 HTML con este único comando (no hace falta
   editarlos uno a uno):

     sed -i "s/?v=[0-9]\{8\}/?v=$(date +%Y%m%d)/g" public/*.html

   Esto actualiza TODAS las referencias ?v=... de golpe, se haya tocado ese archivo
   concreto o no — más simple y seguro que llevar la cuenta de cuáles cambiaron. */

/* Compartido por las páginas públicas (about, aviso-legal, index, inscripcion, login,
   politica-cookies, politica-privacidad, recuperar-contrasena, restablecer-contrasena,
   solicitar-acceso): variables de diseño, reset y cabecera comunes. */
:root {
  --bg: #ffffff;
  --surface: #f4f4fa;
  --surface2: #eaeaf5;
  --border: #e0e0ee;
  --accent: #6e091a;
  --accent2: #6b1609;
  --accent2-bright: #faa8b6;
  --accent3: #6c092a;
  --text: #12121f;
  --text-dim: #55556e;
  --radius: 12px;
  --glow: 0 0 20px rgba(110,9,26,0.25);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: 'Syne', sans-serif; min-height: 100vh; overflow-x: hidden; }

header {
  position: sticky; top:0; z-index:100;
  background: rgba(5,5,15,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  display:flex; align-items:center; justify-content:space-between;
  height: 64px;
}
.logo { display:flex; align-items:center; text-decoration:none; }
.logo-text { font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:1.375rem; font-weight:700; letter-spacing:-0.02em; color:#fff; }
.logo-text span { color:var(--accent2-bright); }

/* NAV pública — centralizado aquí porque .header-actions/.nav-links/.nav-link/.btn-back
   salían duplicados tal cual en index.css, about.css, aviso-legal.css, politica-cookies.css
   y politica-privacidad.css (cada CSS de página solo deja ya su override mínimo si lo hay).
   Mobile-first: por debajo de 768px .nav-links viaja oculto y se despliega como panel con
   .open (lo añade/quita public/js/nav-toggle.js al pulsar .nav-toggle); desde 768px vuelve
   a mostrarse en línea y el botón hamburguesa desaparece. */
.header-actions { display:flex; align-items:center; gap:20px; }
/* position:fixed (no absolute) a propósito: .header-actions no ocupa el ancho completo
   del header, así que un position:absolute quedaría acotado a su propio contenedor
   (pegado a la derecha) en vez de a todo el ancho de página bajo la cabecera. */
.nav-links {
  display:none;
  flex-direction:column; align-items:stretch; gap:0;
  position:fixed; top:64px; left:0; right:0; z-index:99;
  background:rgba(5,5,15,0.97); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0.25rem 2rem 0.75rem;
}
.nav-links.open { display:flex; }
.nav-link { font-family:'Syne',sans-serif; font-size:0.85rem; font-weight:600; color:#fff; text-decoration:none; transition:color 0.2s; padding:0.7rem 0; }
.nav-link:hover { color:var(--accent2-bright); }
.btn-back { font-family:'Space Mono',monospace; font-size:0.7rem; padding:6px 14px; border-radius:6px; border:1px solid var(--border); background:transparent; color:#fff; cursor:pointer; text-decoration:none; transition:all 0.2s; }
.btn-back:hover { border-color:var(--accent2-bright); color:var(--accent2-bright); }

.nav-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0;
  font-size:1.1rem; line-height:1;
  background:transparent; border:1px solid var(--border); border-radius:6px;
  color:#fff; cursor:pointer; transition:all 0.2s;
}
.nav-toggle:hover { border-color:var(--accent2-bright); color:var(--accent2-bright); }

@media(min-width:768px) {
  .nav-links {
    display:flex; flex-direction:row; align-items:center; gap:20px;
    position:static; background:none; backdrop-filter:none; border-bottom:none; padding:0;
  }
  .nav-link { padding:0; }
  .nav-toggle { display:none; }
}

@media(max-width:575px) {
  .logo-text { font-size:1.15rem; }
  .btn-back { font-size:0.65rem; padding:5px 10px; }
}