/* ==========================================================================
   WILDCATS AMERICAN FOOTBALL TEAM — hoja de estilos compartida
   Se carga en todas las páginas junto al runtime de Tailwind (CDN).
   Aquí va TODO lo que no es una utilidad de Tailwind: tipografía, texturas,
   animaciones de scroll, componentes y estados que alterna el JS.
   Los estados que toca el JS (.is-in, .is-open, .is-scrolled…) viven aquí a
   propósito: Tailwind no compila clases que aparecen después de la carga.
   ========================================================================== */

/* ---------------------------------- Base --------------------------------- */
html { background:#011024; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif; color:#eaf0f8; background:#011024; overflow-x:hidden; }
h1,h2,h3,h4,.font-display { font-family:"Barlow Condensed","Arial Narrow",sans-serif; }
::selection { background:#ffb900; color:#011937; }
section[id] { scroll-margin-top:96px; }
a { text-decoration:none; }
img { max-width:100%; }

/* ---------------------------- Tipografía display ------------------------- */
.display { text-transform:uppercase; font-weight:900; line-height:.9; letter-spacing:-.01em; }
.eyebrow { text-transform:uppercase; letter-spacing:.22em; font-weight:700; font-size:.72rem; }
.stroke-text { -webkit-text-stroke:1.5px rgba(255,185,0,.55); color:transparent; }

/* ----------------------------- Fondos y texturas ------------------------- */
.grid-lines {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
}
.yard-lines { background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 100px); }
.yard-lines-dark { background-image:repeating-linear-gradient(90deg, rgba(1,25,55,.09) 0 2px, transparent 2px 90px); }
.noise::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
.gold-glow { box-shadow:0 0 0 1px rgba(255,185,0,.25), 0 24px 60px -24px rgba(255,185,0,.35); }
.claw { position:absolute; pointer-events:none; }

/* ------------------------------ Scroll reveal ---------------------------- */
[data-reveal] { opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; }
[data-reveal="left"]  { transform:translateX(-40px); }
[data-reveal="right"] { transform:translateX(40px); }
[data-reveal="zoom"]  { transform:scale(.94); }
[data-reveal].is-in   { opacity:1; transform:none; }

/* --------------------------------- Header -------------------------------- */
.site-header { transition:background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; }
.site-header.is-scrolled {
  background:rgba(1,16,36,.88); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8); border-bottom:1px solid rgba(255,185,0,.16);
}
.site-header.is-scrolled .header-logo { height:44px; }
.header-logo { height:64px; transition:height .35s ease; }
.nav-link { position:relative; }
.nav-link::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:#ffb900;
  transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover::after, .nav-link.is-active::after { transform:scaleX(1); }

/* ------------------------------- Menú móvil ------------------------------ */
.mobile-panel { transform:translateX(100%); transition:transform .4s cubic-bezier(.16,1,.3,1); }
.mobile-panel.is-open { transform:translateX(0); }
body.menu-open { overflow:hidden; }

/* --------------------------------- Marquee ------------------------------- */
.marquee { display:flex; width:max-content; animation:marquee 38s linear infinite; }
.marquee:hover { animation-play-state:paused; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ---------------------------------- Hero --------------------------------- */
.hero-media { position:absolute; inset:-8% 0 -8% 0; will-change:transform; }
.scroll-cue span { display:block; width:1px; height:44px; background:linear-gradient(#ffb900, transparent); animation:cue 1.9s ease-in-out infinite; }
@keyframes cue {
  0%,100% { opacity:.2; transform:scaleY(.4); transform-origin:top; }
  50%     { opacity:1;  transform:scaleY(1);  transform-origin:top; }
}

/* -------------------------------- Tarjetas ------------------------------- */
.card-hover { transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease; }
.card-hover:hover { transform:translateY(-8px); border-color:rgba(255,185,0,.5); box-shadow:0 30px 60px -30px rgba(0,0,0,.9); }
.mode-card img { transition:transform .8s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.mode-card:hover img { transform:scale(1.07); filter:saturate(1.15); }
.gal-item img { transition:transform .7s cubic-bezier(.16,1,.3,1); }
.gal-item:hover img { transform:scale(1.08); }

/* Botón con destello */
.btn-shine { position:relative; overflow:hidden; isolation:isolate; }
.btn-shine::before {
  content:""; position:absolute; top:0; left:-140%; width:60%; height:100%; z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg); transition:left .7s ease;
}
.btn-shine:hover::before { left:160%; }

/* ---------------------------- Tabla de categorías ------------------------ */
.cat-table { width:100%; border-collapse:collapse; font-size:15px; }
.cat-table th {
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.12em;
  font-size:12px; font-weight:800; color:#ffb900; text-align:left;
  padding:14px 18px; background:#011024; border-bottom:1px solid rgba(255,185,0,.25); white-space:nowrap;
}
.cat-table td { padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.07); color:rgba(234,240,248,.75); }
.cat-table tbody tr { transition:background-color .25s ease; }
.cat-table tbody tr:hover { background:rgba(255,185,0,.05); }
.cat-table td:first-child { font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-weight:800; font-size:19px; color:#fff; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ------------------------------- Formulario ------------------------------ */
.field { position:relative; }
.field label {
  display:block; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.14em; font-size:12px; font-weight:800; color:rgba(255,255,255,.55); margin-bottom:8px;
}
.field input, .field select, .field textarea {
  width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);
  border-radius:2px; padding:14px 16px; color:#fff; font-size:16px; font-family:inherit;
  transition:border-color .25s ease, background-color .25s ease;
}
.field input::placeholder, .field textarea::placeholder { color:rgba(255,255,255,.3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:#ffb900; background:rgba(255,185,0,.06);
}
.field select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23ffb900' stroke-width='2'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:44px; }
.field select option { background:#011937; color:#fff; }
.field input:user-invalid, .field select:user-invalid { border-color:#ef4444; }
.form-note { font-size:13px; color:rgba(255,255,255,.45); line-height:1.6; }

/* -------------------------------- Instagram ------------------------------ */
.ig-text {
  background:linear-gradient(90deg,#f9ce34,#ee2a7b 45%,#6228d7);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ig-glow { background:radial-gradient(circle, rgba(238,42,123,.22), rgba(255,185,0,.12) 60%, transparent 70%); }
.ig-card {
  background:linear-gradient(135deg, rgba(249,206,52,.14), rgba(238,42,123,.16) 45%, rgba(98,40,215,.16));
  border:1px solid rgba(255,255,255,.14);
  transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .4s ease;
}
.ig-card:hover { transform:translateY(-6px); border-color:rgba(238,42,123,.5); }
.ig-btn { background:linear-gradient(90deg,#f9ce34,#ee2a7b 50%,#6228d7); background-size:200% 100%; transition:background-position .5s ease, transform .3s ease; }
.ig-btn:hover { background-position:100% 0; transform:translateY(-2px); }

/* ---------------------------------- Mapa --------------------------------- */
.map-shell { position:relative; aspect-ratio:16/10; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#011937; }
.map-shell iframe { width:100%; height:100%; border:0; display:block; }

/* ------------------------- Banner de cookies (RGPD) ---------------------- *
 * Oculto por defecto: el JS solo lo muestra si no hay decisión guardada.     */
#cookie-banner {
  position:fixed; inset:auto 0 0 0; z-index:120; display:none;
  background:rgba(1,13,31,.97); backdrop-filter:blur(16px) saturate(1.2);
  border-top:2px solid #ffb900; box-shadow:0 -20px 50px -20px rgba(0,0,0,.9);
  padding:20px 5%; animation:cookieUp .45s cubic-bezier(.16,1,.3,1);
}
#cookie-banner.is-visible { display:block; }
@keyframes cookieUp { from { transform:translateY(100%); } to { transform:translateY(0); } }

.cookie-inner { max-width:1400px; margin:0 auto; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.cookie-copy { flex:1 1 420px; min-width:0; }
.cookie-actions { display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0; }
@media (max-width:860px) {
  #cookie-banner { padding:18px 20px calc(18px + env(safe-area-inset-bottom)); }
  .cookie-actions { width:100%; }
  .cookie-actions > * { flex:1 1 auto; justify-content:center; }
}
/* Cuando el banner está visible, la barra CTA móvil se aparta */
body.cookie-open .mobile-cta { transform:translateY(120%) !important; }

/* Modal de configuración */
#cookie-modal {
  position:fixed; inset:0; z-index:130; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.72); backdrop-filter:blur(6px);
}
#cookie-modal.is-open { display:flex; }
.cookie-modal-box {
  width:100%; max-width:560px; max-height:88dvh; overflow-y:auto;
  background:#011024; border:1px solid rgba(255,185,0,.3);
  animation:cookieZoom .35s cubic-bezier(.16,1,.3,1);
}
@keyframes cookieZoom { from { opacity:0; transform:scale(.95) translateY(12px); } to { opacity:1; transform:none; } }

.cookie-row { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.cookie-row:last-of-type { border-bottom:0; }

/* Interruptor */
.switch { position:relative; display:inline-block; width:50px; height:28px; flex-shrink:0; }
.switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.switch .track {
  position:absolute; inset:0; background:rgba(255,255,255,.16); border-radius:999px;
  transition:background-color .3s ease; pointer-events:none;
}
.switch .track::before {
  content:""; position:absolute; top:4px; left:4px; width:20px; height:20px;
  background:#fff; border-radius:50%; transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.switch input:checked + .track { background:#ffb900; }
.switch input:checked + .track::before { transform:translateX(22px); background:#011937; }
.switch input:disabled + .track { opacity:.45; }
.switch input:disabled { cursor:not-allowed; }
.switch input:focus-visible + .track { outline:3px solid #ffb900; outline-offset:3px; }

/* ----------------------------------- FAQ --------------------------------- */
.faq-item button svg { transition:transform .35s ease; }
.faq-item.is-open button svg { transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.16,1,.3,1), opacity .35s ease; opacity:0; }
.faq-item.is-open .faq-answer { opacity:1; }

/* ------------------------------ Barra CTA móvil -------------------------- */
.mobile-cta { transform:translateY(120%); transition:transform .4s cubic-bezier(.16,1,.3,1); }
.mobile-cta.is-visible { transform:translateY(0); }

/* ------------------------------ Páginas legales -------------------------- */
.legal-prose { color:rgba(234,240,248,.72); line-height:1.75; }
.legal-prose h2 { font-size:1.9rem; color:#fff; text-transform:uppercase; font-weight:900; margin:2.75rem 0 1rem; line-height:1.05; }
.legal-prose h3 { font-size:1.35rem; color:#ffb900; text-transform:uppercase; font-weight:800; margin:2rem 0 .75rem; }
.legal-prose p { margin-bottom:1.1rem; }
.legal-prose ul, .legal-prose ol { margin:0 0 1.4rem 1.35rem; }
.legal-prose li { margin-bottom:.6rem; }
.legal-prose ul { list-style:disc; }
.legal-prose ol { list-style:decimal; }
.legal-prose a { color:#ffb900; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,185,0,.4); }
.legal-prose a:hover { text-decoration-color:#ffb900; }
.legal-prose strong { color:#fff; font-weight:600; }
.legal-prose table { width:100%; border-collapse:collapse; margin-bottom:1.6rem; font-size:15px; }
.legal-prose th, .legal-prose td { border:1px solid rgba(255,255,255,.12); padding:10px 14px; text-align:left; }
.legal-prose th { background:rgba(255,185,0,.08); color:#fff; font-weight:600; }

/* ------------------------------ Accesibilidad ---------------------------- */
:focus-visible { outline:3px solid #ffb900; outline-offset:3px; border-radius:4px; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:1rem; top:1rem; z-index:200; padding:.75rem 1rem; background:#ffb900; color:#011937; font-weight:700; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal] { opacity:1 !important; transform:none !important; }
}

/* --------------------------- Recortes diagonales ------------------------- */
.slant-top  { clip-path:polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%); }
.slant-both { clip-path:polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%); }
@media (max-width:768px) { .slant-top, .slant-both { clip-path:none; } }