/* =========================================================
   APEX VOLEIBOL — hoja de estilos del sitio
   Paleta: alto contraste (negro + dorado vibrante + blanco)
   Tipografías: Bebas Neue (títulos/nav), Passion One (frases de
   impacto), Barlow (texto de cuerpo — sustituto de AdihaUS DIN,
   que no está disponible como fuente web).
   ========================================================= */

:root{
  --bg:#FAFAF8;
  --bg-alt:#F2F2EF;
  --ink:#111111;
  --ink-soft:#5C5C57;
  --dark:#0E0B08;
  --panel-dark:#171310;
  --white:#FFFFFF;
  --line:#E4E4E0;
  --accent:#D9A24C;      /* dorado vibrante — color de marca APEX */
  --accent-dark:#B8823A;

  --font-display:'Bebas Neue', system-ui, sans-serif;
  --font-impact:'Passion One', system-ui, sans-serif;
  --font-body:'Barlow', system-ui, sans-serif;

  --container: 1200px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--font-display); letter-spacing:0.02em; margin:0 0 .4em 0; }
p{ margin:0 0 1em 0; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-dark); }
ul{ list-style:none; margin:0; padding:0; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ---------- utility bar ---------- */
.utility-bar{
  background:var(--dark); color:#B9AD98; font-size:13px;
}
.utility-bar .container{
  display:flex; justify-content:space-between; align-items:center; height:40px; flex-wrap:wrap; gap:8px;
}
.utility-bar a{ color:#B9AD98; }
.utility-bar a:hover{ color:var(--accent); }
.utility-left, .utility-right{ display:flex; align-items:center; gap:20px; }
.utility-item{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.icon{ width:14px; height:14px; flex:none; }
/* Red social sin cuenta real todavía (data/contacto.js, url en null) —
   ver setupRedSocial() en js/main.js. Se ve apagada y no es clickeable. */
a.utility-item.is-coming-soon{ cursor:default; opacity:.55; }
a.utility-item.is-coming-soon:hover{ color:#B9AD98; }

/* ---------- main nav ---------- */
.main-nav{ background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.main-nav .container{ display:flex; align-items:center; justify-content:space-between; height:84px; }
.brand{ display:flex; align-items:center; gap:10px; }
/* Logo real del club (assets/apex-logo.png) — alto fijo, el ancho se
   ajusta solo respetando su proporción. Para cambiar qué tan grande se
   ve en el header, solo toca esta altura. */
.brand-logo{ height:64px; width:auto; flex:none; }

.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{
  font-family:var(--font-display); letter-spacing:0.06em; font-size:14px; color:var(--ink);
}
.nav-links a:hover, .nav-links a.active{ color:var(--accent); }

.nav-actions{ display:flex; align-items:center; gap:12px; }
.btn{
  font-family:var(--font-display); letter-spacing:0.06em; font-size:14px;
  padding:11px 22px; border-radius:2px; display:inline-block; border:1.5px solid transparent;
  cursor:pointer;
}
.btn-primary{ background:var(--accent); color:var(--dark); }
.btn-primary:hover{ background:var(--accent-dark); color:var(--white); }
.btn-outline-dark{ border-color:var(--ink); color:var(--ink); }
.btn-outline-dark:hover{ background:var(--ink); color:var(--white); }
.btn-outline-light{ border-color:#4A4030; color:var(--white); }
.btn-outline-light:hover{ border-color:var(--accent); color:var(--accent); }
.btn-block{ width:100%; text-align:center; }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; }

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--dark); overflow:hidden; padding:100px 0 90px 0; }
.hero-lines{ position:absolute; inset:0; pointer-events:none; }
/* Rastro de partículas del cursor (solo escritorio) — ver js/main.js,
   setupHeroCursorTrail. pointer-events:none para no bloquear los botones
   del héroe; .container (position:relative, más abajo en el HTML) queda
   por encima sin necesidad de z-index. */
.hero-trail-canvas{ position:absolute; inset:0; pointer-events:none; }
.hero .container{ position:relative; }
.hero-kicker{
  font-family:var(--font-impact); font-weight:700; letter-spacing:0.18em; font-size:14px;
  color:var(--accent); text-transform:uppercase;
}
.hero h1{ font-size:clamp(38px,6vw,72px); line-height:0.98; color:var(--white); margin-top:16px; max-width:760px; }
/* Letras individuales generadas por SplitType para la entrada "de impacto"
   (ver js/main.js, setupHeroKineticTitle) — deben poder moverse/rotar. */
.hero h1 .char{ display:inline-block; will-change:transform, opacity; }
.hero p.lead{ font-size:18px; line-height:1.6; color:#C7BFAF; margin-top:22px; max-width:560px; }
.hero-actions{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }
.hero-tag{
  margin-top:36px; display:inline-block; border-left:2px solid var(--accent); padding-left:14px;
  font-size:13px; letter-spacing:0.04em; color:#B9AD98;
}

/* page title band (páginas internas) */
.page-title{ background:var(--dark); padding:52px 0; }
.breadcrumb{ font-size:13px; color:#B9AD98; }
.page-title h1{ font-size:clamp(32px,5vw,52px); color:var(--white); margin-top:10px; }
.page-title p{ font-size:15.5px; color:#C7BFAF; max-width:640px; margin-top:8px; }

/* ---------- quick cards ---------- */
.quick-cards{ margin-top:-56px; position:relative; }
.quick-cards .grid-3{ gap:24px; }
.card{
  background:var(--white); border-radius:4px; box-shadow:0 12px 28px rgba(0,0,0,0.18);
  padding:26px;
}
.card svg{ width:26px; height:26px; color:var(--accent); }
.card h3{ font-size:21px; margin-top:10px; }
.card p{ font-size:14.5px; color:var(--ink-soft); }
.card .card-link{ font-family:var(--font-display); font-size:13px; letter-spacing:0.05em; color:var(--accent); }

/* ---------- generic layout helpers ---------- */
section{ padding:88px 0; }
section.tight{ padding:56px 0; }
section.alt{ background:var(--bg-alt); }
.eyebrow{ font-family:var(--font-display); letter-spacing:0.18em; font-size:13px; color:var(--accent); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; gap:16px; flex-wrap:wrap; }
.section-head h2{ font-size:32px; }
.link-arrow{ font-family:var(--font-display); font-size:13px; letter-spacing:0.05em; color:var(--accent); white-space:nowrap; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }

.placeholder-box{
  background:var(--bg-alt); border:1px dashed #CFCFC9; border-radius:4px;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:13px;
  min-height:160px; text-align:center; padding:12px;
}
.placeholder-box.square{ aspect-ratio:1; min-height:0; }

.chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.chip{ background:var(--bg-alt); padding:9px 16px; border-radius:20px; font-size:13.5px; }
.chip.tab{ background:transparent; border:1px solid var(--line); color:var(--ink-soft); cursor:pointer; }
.chip.tab.active{ background:var(--accent); border-color:var(--accent); color:var(--dark); }

/* ---------- banner (torneo / cta) ---------- */
.banner{
  background:var(--panel-dark); border-top:3px solid var(--accent);
  padding:36px 0;
}
.banner .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.banner-info{ display:flex; align-items:center; gap:20px; }
.banner-info svg{ width:34px; height:34px; color:var(--accent); flex:none; }
.banner-label{ font-family:var(--font-display); letter-spacing:0.14em; font-size:12.5px; color:var(--accent); }
.banner-title{ font-size:24px; color:var(--white); margin-top:4px; }
.banner-sub{ font-size:14px; color:#C9BB9E; margin-top:2px; }

.cta-banner{ background:var(--panel-dark); border-top:3px solid var(--accent); padding:60px 0; }
.cta-banner .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-banner h2{ color:var(--white); font-size:30px; }
.cta-banner p{ color:#C9BB9E; font-size:15px; margin-top:6px; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- table (horarios) ---------- */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; }
th{
  text-align:left; font-family:var(--font-display); letter-spacing:0.06em; font-size:13px;
  color:var(--ink-soft); font-weight:400; padding:0 12px 12px 0; border-bottom:2px solid var(--line);
  white-space:nowrap;
}
td{ padding:16px 12px 16px 0; border-bottom:1px solid var(--line); font-size:14.5px; white-space:nowrap; }
td.cat{ font-weight:600; }

/* ---------- roster (jugadores / entrenadores / staff) ----------
   Tarjeta con dos capas de interacción, independientes entre sí:
   1) .roster-tilt — inclinación 3D + brillo, controlada por JS solo en
      escritorio (dispositivos con mouse real). Nunca se activa en táctil.
   2) .roster-flip — giro de 180° al hacer clic/tocar, para ver la ficha
      técnica en la cara de atrás. Funciona igual en cualquier dispositivo.
   Ver GUIA-DE-ESTILO.md antes de tocar esta sección. */
.roster-grid{ row-gap:36px; }

.roster-card{
  perspective:1000px;
  cursor:pointer;
  border-radius:4px;
}
.roster-card:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

.roster-tilt{
  position:relative;
  aspect-ratio:3/4;
  transform-style:preserve-3d;
  transition:transform .15s ease-out;
  will-change:transform;
}

.roster-glare{
  position:absolute; inset:0; z-index:5; border-radius:4px; pointer-events:none;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  opacity:0; transition:opacity .2s ease; mix-blend-mode:overlay;
}
.roster-card.can-tilt:hover .roster-glare{ opacity:1; }

.roster-flip{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.roster-card.is-flipped .roster-flip{ transform:rotateY(180deg); }

.roster-face{
  position:absolute; inset:0; border-radius:4px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.roster-face-front{ background:var(--bg-alt); }
.roster-face-back{
  transform:rotateY(180deg);
  background:var(--dark); color:var(--white);
  padding:18px; display:flex; flex-direction:column;
}

.roster-photo{ height:100%; min-height:0; border-radius:0; }

.roster-number{
  position:absolute; top:12px; left:12px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  background:var(--dark); color:var(--accent); border:2px solid var(--accent);
  font-family:var(--font-display); font-size:20px;
  display:flex; align-items:center; justify-content:center;
}
.roster-flip-hint{
  position:absolute; top:12px; right:12px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background:rgba(14,11,8,0.55); color:var(--white);
  display:flex; align-items:center; justify-content:center;
}
.roster-flip-hint svg{ width:15px; height:15px; }

.roster-info{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:14px 14px 12px 14px;
  background:linear-gradient(0deg, rgba(14,11,8,.88) 0%, rgba(14,11,8,0) 100%);
  color:var(--white);
}
.roster-info h4{ font-size:16px; margin:0; color:var(--white); }

.roster-back-content{ display:flex; flex-direction:column; height:100%; }
.roster-back-content h4{ font-size:16px; margin:0; color:var(--white); }
/* white-space:pre-line respeta los saltos de línea reales que haya en el
   texto (bio de jugadores/entrenadores/staff, resumen de eventos pasados)
   — así, si en el archivo de datos escriben el texto con comillas
   invertidas (`texto`) y Enter, el salto se ve igual en la página. */
.roster-bio{ font-size:12.5px; color:#E9DFCB; margin:10px 0 0 0; line-height:1.5; white-space:pre-line; }
/* Dato destacado en la parte trasera de una tarjeta (por ahora, solo el
   "1er lugar" de Eventos pasados en torneos.html) — misma jerarquía que
   .roster-bio, pero con la etiqueta en dorado para que resalte un poco. */
.roster-fact{ font-size:12.5px; color:#E9DFCB; margin:12px 0 0 0; line-height:1.5; }
.roster-fact b{ color:var(--accent); font-weight:600; }

.roster-position{
  display:inline-block; margin-top:6px; font-family:var(--font-display);
  font-size:12px; letter-spacing:0.06em; color:var(--accent-dark);
  background:var(--bg-alt); padding:4px 12px; border-radius:12px;
}
.roster-face-back .roster-position{ color:var(--dark); }

/* radar de habilidades (solo tarjetas de jugadores) */
.radar-chart{ margin-top:auto; padding-top:10px; }
.radar-chart svg{ display:block; width:100%; max-width:150px; margin:0 auto; }
.radar-grid{ fill:none; stroke:#4A4030; stroke-width:1; }
.radar-axis{ stroke:#4A4030; stroke-width:1; }
.radar-fill{ fill:var(--accent); fill-opacity:.35; stroke:var(--accent); stroke-width:1.5; }
.radar-label{ font-family:var(--font-display); font-size:6.5px; letter-spacing:.02em; fill:#B9AD98; }
.radar-legend{ display:grid; grid-template-columns:1fr 1fr; gap:3px 10px; margin-top:8px; font-size:10px; color:#C9BB9E; }
.radar-legend b{ color:var(--accent); font-weight:600; }

@media (max-width:760px){
  .radar-chart svg{ max-width:130px; }
}

@media (prefers-reduced-motion: reduce){
  .roster-tilt, .roster-flip{ transition:none; }
}

/* ---------- roster: carrusel "coverflow" en móvil (Swiper) ----------
   Envuelve las mismas tarjetas .roster-card del roster de Jugadores.
   Swiper solo se inicializa en pantallas ≤760px (ver js/main.js,
   setupJugadoresSwiper) — en escritorio la clase .grid-3 sigue mandando
   y esto queda como cuadrícula normal. */
.roster-swiper{ padding-bottom:44px; }
.roster-swiper .swiper-slide{ width:78%; max-width:300px; height:auto; }
.roster-swiper .swiper-pagination-bullet{ background:var(--accent); opacity:.4; }
.roster-swiper .swiper-pagination-bullet-active{ opacity:1; }

@media (min-width:761px){
  /* Red de seguridad: si Swiper no se inicializó (escritorio), forzar que
     el wrapper se vea como la cuadrícula normal en vez del layout flex
     por defecto de Swiper. */
  .roster-swiper{ padding-bottom:0; }
  .roster-swiper .swiper-wrapper{ transform:none !important; transition:none !important; }
  .roster-swiper .swiper-slide{ width:auto; max-width:none; }
  .roster-swiper .swiper-pagination{ display:none; }
}

@media (max-width:760px){
  /* El wrapper del carrusel es el mismo elemento que .grid-3 (necesario
     para que en escritorio se vea como cuadrícula normal, ver arriba) —
     pero .grid-3 pone display:grid, y al estar declarada después en este
     mismo archivo le gana a display:flex de Swiper aunque Swiper sí se
     haya inicializado en móvil. Sin esto, las tarjetas de jugadores se
     "pierden" al deslizar (el carrusel mueve un contenedor que en
     realidad sigue siendo una cuadrícula). Esto fuerza a que gane Swiper. */
  .roster-swiper .swiper-wrapper{ display:flex !important; }
}

/* ---------- roster: entrada en cascada (GSAP) ----------
   gsap.set dentro de setupRosterEntranceAnimation ya deja las tarjetas en
   su estado inicial (opacity:0, desplazadas); esta regla es un respaldo
   por si GSAP no llegó a cargar (ej. sin conexión), para que las tarjetas
   nunca queden invisibles. */
.roster-card{ opacity:1; }

/* ---------- forms ---------- */
.form-card{ background:var(--white); border-radius:4px; box-shadow:0 8px 24px rgba(0,0,0,0.08); padding:36px; max-width:560px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:3px;
  font-family:var(--font-body); font-size:14.5px; background:var(--white); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent); border-color:var(--accent); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note{ font-size:13px; color:var(--ink-soft); margin-top:14px; }
.form-success{
  display:none; background:#F1E8D6; border:1px solid var(--accent); border-radius:4px;
  padding:16px 18px; font-size:14px; margin-top:18px;
}
.form-success.visible{ display:block; }

/* ---------- footer ---------- */
footer{ background:var(--dark); color:#B9AD98; padding:60px 0 26px 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; }
.footer-brand-line{ display:flex; align-items:center; }
/* Logo completo (assets/apex-logo.png), igual que en el header — mismo
   criterio que .brand-logo: alto fijo, ancho automático. */
.footer-logo{ height:56px; width:auto; }
footer p{ font-size:13.5px; color:#9C9488; max-width:280px; }
.footer-social{ display:flex; gap:14px; margin-top:16px; }
.footer-social svg{ width:18px; height:18px; }
.footer-col h4{ font-family:var(--font-display); letter-spacing:0.1em; font-size:13px; color:var(--white); margin-bottom:14px; }
.footer-col ul li{ font-size:14px; margin-bottom:10px; }
.footer-col ul li a{ color:#B9AD98; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; border-top:1px solid #2A2620;
  margin-top:44px; padding-top:20px; font-size:12.5px; color:#7A7468; flex-wrap:wrap; gap:8px;
}

/* ---------- floating whatsapp ---------- */
.whatsapp-float{
  position:fixed; right:28px; bottom:28px; width:56px; height:56px; border-radius:50%;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.35); z-index:60; transition:transform .15s ease;
}
.whatsapp-float:hover{ transform:scale(1.06); }
.whatsapp-float svg{ width:26px; height:26px; color:var(--dark); }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .grid-2{ grid-template-columns:1fr; gap:32px; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
  .grid-5{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .field-row{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--white);
    flex-direction:column; align-items:flex-start; gap:0; border-bottom:1px solid var(--line);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:14px 24px; width:100%; }
  .nav-actions .btn-outline-dark{ display:none; }
  .nav-toggle{ display:block; }
  .main-nav .container{ position:relative; flex-wrap:wrap; height:auto; padding-top:16px; padding-bottom:16px; }
  .brand-logo{ height:48px; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
  .grid-5{ grid-template-columns:1fr 1fr; }
  .banner .container, .cta-banner .container{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ grid-template-columns:1fr; }
  /* La barra de utilidad (teléfono/correo + redes) tenía una altura fija
     (40px, ver regla base arriba) pensada para una sola línea. En
     pantallas angostas el teléfono, correo y redes ya no caben en una
     sola línea y se envuelven en varias — con la altura fija, esas líneas
     de más no cabían en la caja y se encimaban con el menú de abajo. Por
     eso aquí se apila cada mitad en su propia línea (en vez de dejar que
     el navegador decida cómo envolver los 4 elementos sueltos) y se deja
     que la altura crezca según haga falta. */
  .utility-bar .container{
    flex-direction:column; justify-content:center; height:auto; padding:10px 24px; gap:6px; text-align:center;
  }
  .utility-left, .utility-right{ justify-content:center; flex-wrap:wrap; row-gap:6px; }
}