
@font-face{font-family:'Bricolage';font-weight:600;font-display:swap;src:url('../fonts/Bricolage-600.woff2') format('woff2');}
@font-face{font-family:'Bricolage';font-weight:700;font-display:swap;src:url('../fonts/Bricolage-700.woff2') format('woff2');}
@font-face{font-family:'Bricolage';font-weight:800;font-display:swap;src:url('../fonts/Bricolage-800.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url('../fonts/Manrope-400.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url('../fonts/Manrope-700.woff2') format('woff2');}

:root{
  --purple:#a200ff; --purple-deep:#6a00a8; --purple-vivid:#b93bff;
  --lilac:#f6ebff; --lilac2:#ecd6ff; --ball:#ff6a1a;
  --sevilla:#e5484d; --valencia:#8b5cf6; --tomares:#2f7ded; --marbella:#0fb5a0;
  --ink:#17121f; --muted:#6b6577; --line:#e9e4f2; --paper:#ffffff;
  --fd:'Bricolage',system-ui,sans-serif; --fb:'Manrope',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
#app{scroll-margin-top:90px}
body{background:var(--paper);color:var(--ink);font-family:var(--fb);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--fd);font-weight:800;line-height:1.02;letter-spacing:-.025em}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);font-weight:700;font-size:.9rem;
  padding:13px 24px;border-radius:100px;background:var(--purple);color:#fff;border:none;cursor:pointer;
  transition:transform .18s,box-shadow .18s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(109,40,217,.32)}
.btn.ghost{background:#fff;color:var(--purple);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--purple);box-shadow:0 8px 20px rgba(109,40,217,.12)}

/* NAV */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;color:var(--purple)}.brandlogo{height:26px;width:auto;display:block}.footlogo{height:30px;width:auto;margin-bottom:16px;display:block}

.nav-links{display:flex;gap:32px;font-size:.9rem;font-weight:700}
.nav-links a{color:var(--ink);opacity:.72;transition:opacity .2s}
.nav-links a:hover{opacity:1;color:var(--purple)}
.nav-right{display:flex;align-items:center;gap:18px}
.lang{font-size:.74rem;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.lang a{color:var(--muted);transition:color .2s}.lang a:hover{color:var(--purple)}.lang a.lang-active{color:var(--purple);font-weight:800}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none}
.burger span{width:26px;height:2.5px;background:var(--ink);border-radius:2px}

/* HERO */
.hero{position:relative;overflow:hidden;padding:96px 0 88px;text-align:center;
  background:radial-gradient(120% 90% at 50% -10%,var(--lilac) 0%,#fff 60%)}
.hero .mesh{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.76rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--purple);background:#fff;border:1px solid var(--lilac2);
  padding:8px 16px;border-radius:100px;margin-bottom:28px;box-shadow:0 4px 16px rgba(109,40,217,.08)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ball)}
.hero h1{position:relative;z-index:1;font-size:clamp(2.9rem,8vw,6rem);letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--purple);position:relative}
.hero p.lead{position:relative;z-index:1;max-width:600px;margin:26px auto 0;font-size:1.18rem;color:var(--muted)}
.hero-cta{position:relative;z-index:1;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero .btn{padding:16px 30px;font-size:.98rem}
.ball{position:absolute;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 32% 28%,#ffd3ac,var(--ball) 58%,#d9490a);
  box-shadow:0 16px 40px rgba(255,106,26,.35)}
.ball.b1{width:56px;height:56px;top:130px;left:11%;animation:fl 6s ease-in-out infinite}
.ball.b2{width:30px;height:30px;top:250px;right:13%;animation:fl 5s ease-in-out infinite reverse}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:52px 40px;margin-top:-40px;
  position:relative;z-index:2;background:#fff;border:1px solid var(--line);border-radius:24px;
  box-shadow:0 20px 50px rgba(76,29,149,.08)}
.stat{text-align:center}
.stat .n{font-family:var(--fd);font-weight:800;font-size:clamp(1.9rem,4.5vw,3rem);line-height:1;color:var(--purple)}
.stat:nth-child(2) .n{color:var(--sevilla)}.stat:nth-child(3) .n{color:var(--tomares)}.stat:nth-child(4) .n{color:var(--ball)}
.stat .l{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:8px}

/* SECTION */
.sec{padding:88px 0}
.sec-head{margin-bottom:48px;max-width:640px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.tag{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--purple)}
.sec-head h2{font-size:clamp(2rem,5vw,3.3rem);margin-top:14px}
.sec-head p{color:var(--muted);margin-top:16px;font-size:1.1rem}

/* CLUBS */
.clubs{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.club{position:relative;aspect-ratio:1/1;border-radius:22px;overflow:hidden;box-shadow:0 8px 30px rgba(23,18,31,.10);transition:transform .3s,box-shadow .3s}.club:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(76,29,149,.18)}.club>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}.club:hover>img{transform:scale(1.06)}.club .cov{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,5,22,.9) 2%,rgba(12,5,22,.35) 38%,rgba(12,5,22,0) 66%)}.club .cbody{position:absolute;left:0;right:0;bottom:0;padding:28px}.club.sevilla{--c:var(--sevilla)}.club.valencia{--c:var(--valencia)}.club.tomares{--c:var(--tomares)}.club.marbella{--c:var(--marbella)}.club .yr{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;background:var(--c);color:#fff;padding:5px 12px;border-radius:100px;margin-bottom:10px}.club .city{font-family:var(--fd);font-weight:800;font-size:2rem;color:#fff;line-height:1;margin-bottom:8px}.club .desc{color:rgba(255,255,255,.92);font-size:.93rem;line-height:1.5}

/* BENEFITS */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ben{border:1px solid var(--line);border-radius:20px;padding:30px;background:#fff;transition:transform .2s,box-shadow .2s}
.ben:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(76,29,149,.08)}
.ben .ic{width:52px;height:52px;border-radius:14px;background:var(--lilac);display:grid;place-items:center;font-size:1.5rem;margin-bottom:18px}
.ben h3{font-size:1.2rem;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.ben p{color:var(--muted);font-size:.95rem}

/* APP BAND (PongPlay) */
.app{background:linear-gradient(120deg,var(--purple-deep),var(--purple-vivid));border-radius:28px;
  padding:56px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;color:#fff;position:relative;overflow:hidden}
.app::after{content:"🏓";position:absolute;font-size:16rem;right:-30px;bottom:-60px;opacity:.08;transform:rotate(-15deg)}
.app .tag{color:#d9c7ff}
.app h2{font-size:clamp(1.8rem,4vw,2.8rem);margin:12px 0 14px;color:#fff}
.app p{color:#e4d8fb;font-size:1.05rem;max-width:440px}
.stores{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.stores{align-items:center}.badge{display:block;transition:transform .18s,filter .18s}.badge img{height:56px;width:auto;display:block}.badge:hover{transform:translateY(-2px);filter:brightness(1.08)}.stores-soon{color:#e4d8fb;font-size:.85rem;margin-top:12px;font-weight:600}
.store small{display:block;font-size:.62rem;font-weight:400;opacity:.7;letter-spacing:.03em}
.app .phone{justify-self:center;width:180px;height:340px;background:#0f0a18;border-radius:32px;border:6px solid #241636;
  display:grid;place-items:center;box-shadow:0 30px 60px rgba(0,0,0,.35);position:relative;z-index:1}
.app .phone .scr{font-family:var(--fd);font-weight:800;color:#fff;text-align:center;line-height:1.1}
.app .phone .scr span{color:var(--ball);font-size:2.6rem;display:block}

/* OFFER */
.offer-in{background:var(--lilac);border:1px solid var(--lilac2);border-radius:28px;padding:60px 44px;text-align:center;position:relative;overflow:hidden}
.offer-in h2{font-size:clamp(1.9rem,4.5vw,3rem);color:var(--purple-deep)}
.offer-in p{color:#5b5568;max-width:520px;margin:16px auto 0;font-size:1.08rem}
.offer-in .btn{margin-top:26px;background:var(--ball);color:#231204;padding:16px 32px}
.offer-in .btn:hover{box-shadow:0 12px 30px rgba(255,106,26,.35)}
.offer-in .lil{font-size:.78rem;color:var(--muted);margin-top:16px}

/* TESTIMONIALS */
.tests{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.test{border:1px solid var(--line);border-radius:20px;padding:28px;background:#fff;box-shadow:0 4px 20px rgba(23,18,31,.04)}
.test .stars{color:var(--ball);letter-spacing:2px;margin-bottom:14px}
.test p{color:#4b4657;font-size:.98rem}
.test .who{margin-top:16px;font-weight:700;font-size:.9rem;color:var(--purple)}

/* FOOTER */
footer{background:var(--purple-deep);color:#e4d8fb;padding:64px 0 30px;margin-top:20px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot h4{font-family:var(--fd);font-size:1.5rem;color:#fff;margin-bottom:14px;display:flex;align-items:center;gap:8px}
footer .sede{font-family:var(--fd);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;color:#fff;margin-bottom:10px}
.foot p{font-size:.88rem;opacity:.82;margin-bottom:2px}
.foot a.ig{color:#fff;opacity:.85;font-size:.88rem;font-weight:700}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:48px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.15);font-size:.85rem;font-weight:500;opacity:.9}
.foot-bottom a{margin-left:16px;font-weight:600}
.foot-bottom a:hover{opacity:1;text-decoration:underline}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

@media(max-width:860px){
  .nav-links,.lang{display:none}.burger{display:flex}
  .stats{grid-template-columns:repeat(2,1fr);gap:32px;margin-top:-30px}
  .clubs,.benefits,.tests{grid-template-columns:1fr}
  .app{grid-template-columns:1fr;padding:40px 28px;text-align:center}
  .app .phone,.stores{margin:0 auto}.app p{margin:0 auto}
  .foot-grid{grid-template-columns:1fr 1fr}
  .ball{display:none}
}

/* ---- PÁGINAS INTERNAS / LEGALES ---- */
main.wp-block-group{max-width:820px;margin:0 auto;padding-left:24px;padding-right:24px}
main h1{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,5vw,2.8rem);letter-spacing:-.02em;margin-bottom:6px}
main h2{font-family:var(--fd);font-weight:700;font-size:1.5rem;margin:36px 0 12px;color:var(--ink)}
main h3{font-weight:700;font-size:1.1rem;margin:22px 0 8px}
main p,main li{color:#3a3444;line-height:1.75;margin-bottom:12px;font-size:1.02rem}
main ul,main ol{padding-left:24px;margin-bottom:16px}
main li{margin-bottom:6px}
main a{color:var(--purple);text-decoration:underline}
main strong{color:var(--ink)}
main table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.96rem}
main th,main td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
main th{background:var(--lila)}
.legal-meta{color:var(--muted);font-size:.92rem;margin-bottom:8px}
.legal-note{background:var(--lila);border:1px solid var(--lilac2);border-radius:12px;padding:16px 20px;margin:22px 0;font-size:.95rem}
.legal-note strong{color:var(--purple-deep)}

/* ---- LANDING PRUEBA GRATIS ---- */
.faq{max-width:760px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;background:#fff;overflow:hidden;transition:box-shadow .2s}
.faq details[open]{box-shadow:0 10px 30px rgba(76,29,149,.08)}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--purple);font-size:1.5rem;font-weight:800;line-height:1}
.faq details[open] summary{color:var(--purple)}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 22px 20px;color:#3a3444;margin:0;line-height:1.7}
.includes{max-width:560px;margin:26px auto 0;list-style:none;padding:0;display:grid;gap:10px;text-align:left}
.includes li{background:#fff;border:1px solid var(--lilac2);border-radius:12px;padding:13px 18px;font-weight:600;color:var(--ink)}
.includes li::before{content:"\2713";color:var(--purple);font-weight:800;margin-right:10px}
.donde{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}
.donde span{background:var(--lila);border:1px solid var(--lilac2);border-radius:100px;padding:10px 20px;font-weight:700;color:var(--purple)}
.donde span.soon{background:#fff;color:var(--muted)}

/* ---- MODAL SELECTOR DE SEDE ---- */
.sede-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.sede-modal[hidden]{display:none}
.sede-modal__backdrop{position:absolute;inset:0;background:rgba(12,5,22,.55);backdrop-filter:blur(4px)}
.sede-modal__card{position:relative;background:#fff;border-radius:22px;padding:38px 32px;max-width:420px;width:100%;box-shadow:0 30px 70px rgba(0,0,0,.35);text-align:center;z-index:1}
.sede-modal__card h3{font-family:var(--fd);font-weight:800;font-size:1.7rem;margin-bottom:6px}
.sede-modal__card>p{color:var(--muted);margin-bottom:22px}
.sede-modal__x{position:absolute;top:12px;right:16px;background:none;border:none;font-size:1.7rem;cursor:pointer;color:var(--muted);line-height:1}
.sede-modal__opts{display:grid;gap:12px}
.sede-opt{display:block;padding:15px;border-radius:14px;font-weight:700;color:#fff;background:var(--c,var(--purple));transition:transform .15s,box-shadow .15s}
.sede-opt:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.sede-opt.sevilla{--c:var(--sevilla)}.sede-opt.valencia{--c:var(--valencia)}.sede-opt.tomares{--c:var(--tomares)}
.sede-opt.soon{background:var(--lila);color:var(--muted);cursor:default}
.sede-opt.soon:hover{transform:none;box-shadow:none}

/* ---- KIT DIGITAL (obligatorio, footer) ---- */
.kitdigital{background:#fff;border-radius:14px;padding:16px 26px;margin:34px 0 6px}
.kitdigital img{display:block;max-width:660px;width:100%;height:auto;margin:0 auto}

/* ---- SELECTOR DE IDIOMA (banderas) ---- */
.langsel{position:relative;font-size:.85rem;font-weight:700}
.langsel__btn{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:7px 12px 7px 10px;cursor:pointer;color:var(--ink);font:inherit;line-height:1}
.langsel__btn:hover{border-color:var(--purple)}
.langsel__flag,.langsel__menu img{width:20px;height:14px;border-radius:3px;object-fit:cover;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.langsel__chev{opacity:.5;transition:transform .2s}
.langsel.open .langsel__chev{transform:rotate(180deg)}
.langsel__menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(23,18,31,.14);padding:6px;min-width:160px;display:none;z-index:60}
.langsel.open .langsel__menu{display:block}
.langsel__menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--ink);font-weight:600}
.langsel__menu a:hover{background:var(--lila);color:var(--purple)}
.langsel__menu a.active{color:var(--purple)}

/* ---- Logo PongPlay en el mockup del móvil ---- */
.app .phone .pp-logo{width:60%;height:auto;display:block;transform:translateX(5%);filter:drop-shadow(0 6px 18px rgba(250,116,22,.35))}

/* ---- Instagram por sede en el footer ---- */
.iglink{margin-top:4px}
.iglink a{color:#fff;opacity:.78;font-size:.85rem;font-weight:700}
.iglink a:hover{opacity:1;text-decoration:underline}
footer a.ig{color:#fff;opacity:.9;font-weight:700}
