/* ============================================================
   bigpickle — ESTILOS COMPARTIDOS
   Componentes repetidos en todas las páginas.
   Cargar DESPUÉS de tokens.css y ANTES del <style> propio:
     <link rel="stylesheet" href="tokens.css">
     <link rel="stylesheet" href="shared.css">
   ============================================================ */

/* ── FOOTER ──────────────────────────────────────────────── */
footer { background:var(--gray); padding:3rem 4rem 2rem; border-top:1px solid var(--muted); }
.footer-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:2rem; border-bottom:1px solid var(--muted); margin-bottom:1.5rem; }
.fl { font-family:'Bebas Neue',sans-serif; font-size:var(--fs-2xl); letter-spacing:.12em; color:var(--neon); }
.fc { font-size:.8rem; font-weight:300; letter-spacing:.1em; color:var(--dim); text-align:center; line-height:1.9; }
.fr { font-size:.8rem; font-weight:300; letter-spacing:.1em; color:var(--dim); text-align:right; line-height:1.9; }
.fr a { color:var(--green); text-decoration:none; }
.fr a:hover { color:var(--neon); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; font-size:.7rem; font-weight:300; color:var(--dim); letter-spacing:.1em; }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { color:var(--dim); text-decoration:none; transition:color var(--dur); }
.footer-links a:hover { color:var(--green); }

/* ── MARQUEE ─────────────────────────────────────────────── */
.marquee-wrap { overflow:hidden; padding:1.2rem 0; background:var(--neon); }
.marquee-track { display:flex; white-space:nowrap; animation:marquee 22s linear infinite; }
.marquee-item { font-family:'Bebas Neue',sans-serif; font-size:var(--fs-lg); letter-spacing:.14em; color:var(--black); padding:0 1.8rem; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── FOCUS VISIBLE (a11y) base ───────────────────────────── */
a:focus-visible, button:focus-visible { outline:2px solid var(--neon); outline-offset:2px; }

/* ── COOKIE BANNER (componente) ──────────────────────────── */
.cookie-banner {
  display:none;
  position:fixed; bottom:1.2rem; left:1.2rem; right:1.2rem;
  max-width:520px; margin:0 auto;
  background:var(--gray);
  border:1px solid var(--muted);
  border-left:3px solid var(--green);
  padding:1.2rem 1.5rem;
  z-index:9999;
  font-family:'Montserrat',sans-serif;
}
.cookie-text { font-size:var(--fs-sm); font-weight:300; color:var(--white); line-height:1.7; margin-bottom:.8rem; }
.cookie-text a { color:var(--neon); text-decoration:none; }
.cookie-actions { display:flex; gap:.6rem; }
.cookie-btn {
  flex:1; padding:.7rem 1rem;
  font-family:'Bebas Neue',sans-serif;
  font-size:var(--fs-md); letter-spacing:.1em;
  cursor:pointer;
}
.cookie-accept  { background:var(--neon); color:var(--black); border:none; }
.cookie-decline { background:transparent; color:var(--dim); border:1px solid var(--muted); }

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation:none !important; }
}