/* ===========================================================================
   Plantilla de landing para clubes.
   Los colores llegan por variables desde el panel (data del club), así que un
   mismo archivo sirve para todos los clubes sin tocar una línea de código.
   =========================================================================== */

:root{
  --primario:#12b3e3;
  --secundario:#04121f;
  --acento:#ff6a2b;
  --texto:#eaf4fa;
  --texto-2:#a7bdcd;
  --panel:rgba(255,255,255,.04);
  --linea:rgba(255,255,255,.10);
  --titular:'Anton',Impact,sans-serif;
  --cuerpo:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--cuerpo);color:var(--texto);
  background:var(--secundario);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.contenedor{max-width:var(--max);margin:0 auto;padding:0 22px}

/* ---------------------------- ambiente acuático -------------------------- */
.rayos{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
    linear-gradient(105deg,transparent 42%,rgba(255,255,255,.05) 45%,transparent 48%),
    linear-gradient(75deg,transparent 62%,rgba(255,255,255,.04) 65%,transparent 69%);
  animation:rayos 14s ease-in-out infinite alternate}
@keyframes rayos{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
.burbujas{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.burbuja{position:absolute;bottom:-40px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),rgba(255,255,255,.05));
  animation:subir linear infinite}
@keyframes subir{to{transform:translateY(-115vh) translateX(24px);opacity:0}}

/* --------------------------------- nav ---------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:16px;
  padding:14px 24px;transition:background .3s,padding .3s;backdrop-filter:blur(0)}
.nav.compacta{background:rgba(0,0,0,.55);backdrop-filter:blur(12px);padding:9px 24px;
  border-bottom:1px solid var(--linea)}
.nav__marca{display:flex;align-items:center;gap:11px}
.nav__logo{height:42px;width:auto;border-radius:8px}
.nav__nombre strong{display:block;font-family:var(--titular);font-size:19px;letter-spacing:.03em;line-height:1}
.nav__nombre small{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-2)}
.nav__links{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav__links a{padding:8px 13px;font-size:14px;font-weight:500;color:var(--texto-2);border-radius:9px}
.nav__links a:hover{color:#fff;background:var(--panel)}
.nav__cta{background:var(--primario)!important;color:var(--secundario)!important;font-weight:700!important}
.nav__toggle{display:none;background:none;border:1px solid var(--linea);border-radius:9px;
  width:40px;height:40px;color:#fff;font-size:19px;cursor:pointer}

/* -------------------------------- hero ---------------------------------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero__velo{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.30) 40%,var(--secundario) 96%)}
.hero__contenido{position:relative;z-index:2;padding:120px 22px 90px;max-width:900px}
.hero__eyebrow{display:inline-block;font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--primario);margin-bottom:16px;font-weight:600}
.hero__titulo{font-family:var(--titular);font-size:clamp(2.8rem,9vw,6rem);line-height:.94;
  letter-spacing:.01em;margin:0 0 14px;text-transform:uppercase;
  text-shadow:0 6px 40px rgba(0,0,0,.5)}
.hero__sub{font-size:clamp(1rem,2.2vw,1.3rem);color:var(--texto-2);max-width:620px;margin:0 auto 30px}
.hero__acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero__scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  width:26px;height:44px;border:2px solid rgba(255,255,255,.4);border-radius:14px}
.hero__scroll span{display:block;width:4px;height:9px;background:#fff;border-radius:3px;margin:8px auto;
  animation:baja 1.6s ease-in-out infinite}
@keyframes baja{0%{opacity:0;transform:translateY(-4px)}50%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:50px;
  font-weight:700;font-size:15px;letter-spacing:.02em;cursor:pointer;border:2px solid transparent;
  transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px)}
.btn--primario{background:var(--primario);color:var(--secundario);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.btn--fantasma{border-color:rgba(255,255,255,.35);color:#fff}
.btn--fantasma:hover{background:rgba(255,255,255,.08)}
.btn--acento{background:var(--acento);color:#fff}

/* ------------------------------ secciones -------------------------------- */
.seccion{position:relative;z-index:2;padding:88px 0}
.seccion--alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.03),transparent)}
.cabecera{text-align:center;max-width:720px;margin:0 auto 46px}
.kicker{display:inline-block;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--primario);font-weight:700;margin-bottom:12px}
.cabecera h2{font-family:var(--titular);font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;
  margin:0 0 12px;text-transform:uppercase;letter-spacing:.01em}
.cabecera p{color:var(--texto-2);font-size:1.05rem;margin:0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split p{color:var(--texto-2);font-size:1.05rem}
.split__media img,.split__media video{border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.ticks{list-style:none;padding:0;margin:20px 0 0}
.ticks li{padding:9px 0 9px 32px;position:relative;color:var(--texto-2)}
.ticks li::before{content:'';position:absolute;left:0;top:15px;width:16px;height:9px;
  border-left:3px solid var(--primario);border-bottom:3px solid var(--primario);transform:rotate(-45deg)}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
/* La tarjeta se sostiene sin icono: un filete de color arriba hace de marca y
   el titular lleva el peso. Así dejar el icono vacío es una opción digna y no
   un hueco —antes la plantilla empujaba a poner un emoji en cada una, que es
   lo que hace que todos los sitios se parezcan. */
.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:18px;padding:30px 26px;
  position:relative;overflow:hidden;transition:transform .25s,border-color .25s}
.tarjeta::before{content:'';position:absolute;inset:0 auto auto 0;width:46px;height:3px;
  background:var(--primario);transition:width .25s}
.tarjeta:hover{transform:translateY(-5px);border-color:var(--primario)}
.tarjeta:hover::before{width:100%}
.tarjeta__icono{font-size:2.4rem;margin-bottom:14px;line-height:1}

/* Un torneo se busca por la fecha: eso va primero y en grande, no un trofeo. */
.tarjeta__cuando{font-family:var(--titular);text-transform:uppercase;letter-spacing:.06em;
  font-size:.82rem;color:var(--primario);margin:0 0 6px}
.tarjeta h3{font-family:var(--titular);font-size:1.35rem;text-transform:uppercase;margin:0 0 8px;letter-spacing:.02em}
.tarjeta p{color:var(--texto-2);margin:0;font-size:.97rem}

.horario{max-width:820px;margin:0 auto}
.horario__fila{display:grid;grid-template-columns:1fr 1.2fr 1.4fr;gap:14px;align-items:center;
  padding:18px 24px;border:1px solid var(--linea);border-radius:14px;margin-bottom:11px;
  background:var(--panel);transition:border-color .2s,transform .2s}
.horario__fila:hover{border-color:var(--primario);transform:translateX(4px)}
.horario__dia{font-family:var(--titular);font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em}
.horario__hora{color:var(--primario);font-weight:700}
.horario__tipo{color:var(--texto-2);font-size:.94rem;text-align:right}
.horario__nota{text-align:center;color:var(--texto-2);font-size:.88rem;margin-top:18px}

.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.galeria figure{margin:0;border-radius:16px;overflow:hidden;background:var(--panel);border:1px solid var(--linea)}
.galeria img,.galeria video{width:100%;aspect-ratio:16/10;object-fit:cover}
.galeria figcaption{padding:14px 18px}
.galeria figcaption b{display:block;font-size:.98rem}
.galeria figcaption small{color:var(--texto-2)}

.logros{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;text-align:center}
.logro b{display:block;font-family:var(--titular);font-size:clamp(2.4rem,6vw,3.6rem);color:var(--primario);line-height:1}
.logro span{color:var(--texto-2);font-size:.95rem}

.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;align-items:stretch}
.plan{background:var(--panel);border:1px solid var(--linea);border-radius:20px;padding:32px 26px;
  display:flex;flex-direction:column}
.plan--destacado{border-color:var(--primario);box-shadow:0 0 0 1px var(--primario),0 20px 60px rgba(0,0,0,.4);
  position:relative}
.plan--destacado::before{content:'Más elegido';position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--primario);color:var(--secundario);font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 14px;border-radius:20px;white-space:nowrap}
.plan h3{font-family:var(--titular);text-transform:uppercase;font-size:1.35rem;margin:0 0 6px;letter-spacing:.02em}
.plan__precio{font-size:2.3rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.plan__precio small{font-size:.9rem;font-weight:500;color:var(--texto-2);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:20px 0 24px;flex:1}
.plan li{padding:7px 0 7px 26px;position:relative;color:var(--texto-2);font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.06)}
.plan li::before{content:'✓';position:absolute;left:0;color:var(--primario);font-weight:700}
.planes__nota{text-align:center;color:var(--texto-2);font-size:.9rem;margin-top:22px}

.cta{max-width:720px;margin:0 auto;text-align:center;background:var(--panel);
  border:1px solid var(--linea);border-radius:24px;padding:46px 34px}
.cta h2{font-family:var(--titular);font-size:clamp(1.9rem,4.6vw,2.9rem);text-transform:uppercase;margin:0 0 10px}
.cta p{color:var(--texto-2)}
.form{margin-top:24px;text-align:left}
.form__fila{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.form input,.form textarea{width:100%;padding:14px 16px;border-radius:12px;font-family:inherit;font-size:15px;
  background:rgba(0,0,0,.28);border:1px solid var(--linea);color:#fff}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--primario)}
.form textarea{resize:vertical;min-height:96px;margin-bottom:14px}
.form .btn{width:100%;justify-content:center}
.aviso{padding:14px 18px;border-radius:12px;margin-bottom:18px;font-size:14.5px}
.aviso--ok{background:rgba(46,204,143,.14);border:1px solid rgba(46,204,143,.4);color:#a8f0d3}
.aviso--error{background:rgba(255,90,99,.14);border:1px solid rgba(255,90,99,.4);color:#ffb9bd}

.redes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.red{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:50px;
  border:1px solid var(--linea);font-size:14px;font-weight:600}
.red:hover{border-color:var(--primario);color:var(--primario)}

.pie{position:relative;z-index:2;border-top:1px solid var(--linea);padding:44px 0 30px;text-align:center;
  background:rgba(0,0,0,.25)}
.pie__logo{height:56px;margin:0 auto 12px;border-radius:10px}
.pie__lema{color:var(--texto-2);font-size:.95rem;margin:0 0 22px}
.pie__legal{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:var(--texto-2);border-top:1px solid var(--linea);padding-top:18px;margin-top:18px}
.pie__legal a{color:var(--primario)}

.wa{position:fixed;right:18px;bottom:18px;z-index:50;width:56px;height:56px;border-radius:50%;
  background:#25d366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.wa svg{width:30px;height:30px;fill:#fff}

.revelar{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.revelar.visible{opacity:1;transform:none}

@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:28px}
  .nav__links{position:fixed;inset:64px 14px auto 14px;flex-direction:column;align-items:stretch;
    background:rgba(4,18,31,.97);border:1px solid var(--linea);border-radius:16px;padding:12px;
    display:none;backdrop-filter:blur(14px)}
  .nav__links.abierto{display:flex}
  .nav__links a{padding:13px 16px;font-size:15px}
  .nav__toggle{display:block;margin-left:auto}
  .horario__fila{grid-template-columns:1fr;text-align:center;gap:5px}
  .horario__tipo{text-align:center}
  .form__fila{grid-template-columns:1fr}
  .seccion{padding:62px 0}
}

/* ===========================================================================
   Bloques opcionales: franja cinematográfica, novedades, avisos y muro.
   Cada club los prende o apaga desde el panel.
   =========================================================================== */

/* ------------------------ franja cinematográfica ----------------------- */
.cine{position:relative;height:min(58vh,460px);overflow:hidden;z-index:2}
.cine__img{width:100%;height:100%;object-fit:cover}
.cine__velo{position:absolute;inset:0;
  background:linear-gradient(180deg,var(--secundario),transparent 22%,transparent 72%,var(--secundario))}
.cine__texto{position:absolute;inset:auto 0 34px;text-align:center;margin:0;padding:0 22px;
  font-family:var(--titular);font-size:clamp(1.3rem,3.4vw,2.2rem);text-transform:uppercase;
  letter-spacing:.02em;text-shadow:0 4px 30px rgba(0,0,0,.6)}

/* --------------------------- aviso destacado --------------------------- */
.aviso-franja{
  max-width:820px;margin:0 auto 22px;padding:15px 22px;text-align:center;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--linea);border-left:4px solid var(--acento);border-radius:14px;
  font-size:1rem;font-weight:600;
}

/* ------------------------- novedades: destacado ------------------------ */
.destacado{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:center;margin:0 0 34px}
.destacado__media{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.destacado__video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.destacado__controles{position:absolute;right:12px;bottom:12px;display:flex;gap:8px}
.vbtn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.55);color:#fff;font-size:13px;cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(6px)}
.vbtn:hover{background:rgba(0,0,0,.75)}
.destacado__badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--primario);margin-bottom:8px}
.destacado__pie h3{font-family:var(--titular);font-size:1.5rem;text-transform:uppercase;margin:0 0 8px}
.destacado__pie p{color:var(--texto-2);margin:0 0 12px}
.post__enlace{color:var(--primario);font-weight:600;font-size:.94rem}
.post__enlace:hover{text-decoration:underline}

/* -------------------------- novedades: carrusel ------------------------ */
.feed{position:relative}
.feed__pista{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:12px;scrollbar-width:none}
.feed__pista::-webkit-scrollbar{display:none}
.post{flex:0 0 min(320px,82vw);scroll-snap-align:start;background:var(--panel);
  border:1px solid var(--linea);border-radius:16px;overflow:hidden}
.post__media img,.post__media video{width:100%;aspect-ratio:16/10;object-fit:cover;background:#000}
.post__cuerpo{padding:15px 18px}
.post__cuerpo b{display:block;margin-bottom:5px}
.post__cuerpo p{color:var(--texto-2);font-size:.93rem;margin:0 0 8px}
.feed__nav{display:flex;gap:8px;justify-content:center;margin-top:16px}
.feed__btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--linea);
  background:var(--panel);color:var(--texto);font-size:20px;cursor:pointer}
.feed__btn:hover{border-color:var(--primario);color:var(--primario)}
.feed__pie{text-align:center;color:var(--texto-2);font-size:.92rem;margin-top:20px}
.feed__pie a{color:var(--primario)}

/* ------------------------- avisos del club ---------------------------- */
.avisos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:28px}
.avisos__item{background:var(--panel);border:1px solid var(--linea);border-left:3px solid var(--primario);
  border-radius:0 14px 14px 0;padding:18px 20px}
.avisos__item time{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2)}
.avisos__item b{display:block;margin:5px 0 6px;font-size:1.02rem}
.avisos__item p{color:var(--texto-2);font-size:.94rem;margin:0}

/* ------------------------------ muro ---------------------------------- */
.muro{display:flex;justify-content:center}
.muro .fb-page{max-width:100%}

/* ------------------------ medidor de profundidad ----------------------- */
.medidor{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2)}
.medidor__valor{font-weight:700;color:var(--primario);font-size:12px;letter-spacing:.04em}
.medidor__barra{width:3px;height:150px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.medidor__relleno{width:100%;height:0;background:linear-gradient(180deg,var(--primario),var(--acento));
  border-radius:3px;transition:height .12s linear}

@media (max-width:860px){
  .destacado{grid-template-columns:1fr}
  .medidor{display:none}
  .cine{height:min(42vh,300px)}
}

/* ===========================================================================
   Estilos de sitio.
   Todos los clubes comparten la misma plantilla, pero no tienen por qué verse
   iguales: el estilo cambia tipografía, contraste, esquinas y efectos, y los
   colores siguen saliendo de la marca de cada club.
   =========================================================================== */

/* ---------------------- claro: para clubes de sala ---------------------- */
body[data-tema="claro"]{
  --texto:#122534; --texto-2:#4e6a7e;
  --panel:rgba(0,0,0,.035); --linea:rgba(0,0,0,.10);
}
body[data-tema="claro"] .rayos,
body[data-tema="claro"] .burbujas,
body[data-tema="claro"] .medidor{display:none}
/* El hero sigue sobre foto o video, así que ahí el texto se mantiene claro. */
body[data-tema="claro"] .hero,
body[data-tema="claro"] .hero .hero__sub{color:#fff}
body[data-tema="claro"] .hero__sub{color:rgba(255,255,255,.85)}
body[data-tema="claro"] .cine__velo{
  background:linear-gradient(180deg,var(--secundario),transparent 25%,transparent 70%,var(--secundario))}
body[data-tema="claro"] .seccion--alt{
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.035),transparent)}
body[data-tema="claro"] .form input,
body[data-tema="claro"] .form textarea{background:rgba(0,0,0,.04);color:var(--texto)}
body[data-tema="claro"] .nav.compacta{background:rgba(255,255,255,.9)}
body[data-tema="claro"] .nav.compacta .nav__nombre strong,
body[data-tema="claro"] .nav.compacta .nav__links a{color:var(--texto)}
body[data-tema="claro"] .pie{background:rgba(0,0,0,.03)}

/* --------------- energía: contacto, contraste y esquinas rectas ---------- */
body[data-tema="energia"] .tarjeta,
body[data-tema="energia"] .plan,
body[data-tema="energia"] .post,
body[data-tema="energia"] .avisos__item,
body[data-tema="energia"] .cta,
body[data-tema="energia"] .galeria figure{border-radius:2px}
body[data-tema="energia"] .btn{border-radius:2px;text-transform:uppercase;letter-spacing:.06em}
body[data-tema="energia"] .horario__fila{border-radius:2px;border-left:4px solid var(--acento)}
body[data-tema="energia"] .cabecera h2{font-style:italic;transform:skewX(-6deg)}
body[data-tema="energia"] .hero__titulo{font-style:italic;transform:skewX(-6deg)}
body[data-tema="energia"] .kicker{color:var(--acento)}
body[data-tema="energia"] .burbujas{display:none}

/* ------------------- clásico: sobrio, para clubes con historia ---------- */
body[data-tema="clasico"] .hero__titulo,
body[data-tema="clasico"] .cabecera h2,
body[data-tema="clasico"] .tarjeta h3,
body[data-tema="clasico"] .plan h3,
body[data-tema="clasico"] .destacado__pie h3,
body[data-tema="clasico"] .cta h2{text-transform:none;letter-spacing:0}
body[data-tema="clasico"] .tarjeta,
body[data-tema="clasico"] .plan,
body[data-tema="clasico"] .cta,
body[data-tema="clasico"] .post{border-radius:6px}
body[data-tema="clasico"] .kicker{letter-spacing:.34em;font-weight:600}
body[data-tema="clasico"] .rayos,
body[data-tema="clasico"] .burbujas{display:none}
body[data-tema="clasico"] .seccion{padding:104px 0}
body[data-tema="clasico"] .cabecera{border-bottom:1px solid var(--linea);padding-bottom:26px}