:root{
  --bg:#060d18; --bg-2:#04101d; --bg-3:#071523;
  --ink:#eaf1fb; --ink-dim:rgba(234,241,251,.72); --ink-faint:rgba(234,241,251,.55);
  --cyan:#0ea5e9; --cyan-lt:#38bdf8; --cyan-pale:#7dd3fc; --yellow:#ffd400;
  --line:rgba(255,255,255,.12); --glass:rgba(255,255,255,.055);
  --r:16px; --r-lg:22px;
  --ease:cubic-bezier(.16,.84,.36,1);
  --pad:clamp(20px,5vw,72px);
  --font-d:'Chakra Petch',system-ui,sans-serif;
  --font-b:Manrope,system-ui,-apple-system,sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-b);font-size:16px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--font-d);letter-spacing:-.02em;line-height:1.06}
p{margin:0}
.wrap{max-width:1440px;margin:0 auto}
.sec{padding:clamp(56px,8vw,96px) var(--pad)}
.eyebrow{font-family:var(--font-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-pale)}
.h2{font-size:clamp(28px,4.4vw,46px)}
.lede{font-size:clamp(15px,1.6vw,17px);line-height:1.62;color:var(--ink-dim)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,4vw,40px);flex-wrap:wrap;margin-bottom:clamp(30px,5vw,48px)}
.sec-head>div{display:flex;flex-direction:column;gap:14px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--yellow);color:#0b1626;padding:12px 18px;border-radius:10px;font-weight:700}

/* ── animación ── */
@keyframes float{0%,100%{transform:translateY(0) rotateX(8deg) rotateY(-13deg)}50%{transform:translateY(-16px) rotateX(8deg) rotateY(-13deg)}}
@keyframes floatM{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(-2deg)}}
@keyframes chip{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes glow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(420%)}}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(9px);opacity:1}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.f-piece{animation:float 7s ease-in-out infinite}
.f-chip{animation:chip 5.5s ease-in-out infinite}
.f-chip-b{animation:chip 6.5s ease-in-out infinite .8s}
.f-glow{animation:glow 9s ease-in-out infinite}
.f-scan{animation:scan 4.5s ease-in-out infinite}
.f-cue{animation:cue 2.2s ease-in-out infinite}
.f-ring{animation:spin 26s linear infinite}
.marquee-track{animation:marquee 26s linear infinite}

/* reveal al hacer scroll: nativo donde exista, IntersectionObserver como respaldo */
.rise{opacity:1;transform:none}
@supports (animation-timeline: view()){
  @keyframes rise{from{opacity:.2;transform:translateY(46px)}to{opacity:1;transform:none}}
  @keyframes tiltIn{from{transform:perspective(1400px) rotateX(14deg) translateY(40px)}to{transform:perspective(1400px) rotateX(0) translateY(0)}}
  .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 6% cover 34%}
  .tilt-in{animation:tiltIn linear both;animation-timeline:view();animation-range:entry 4% cover 40%}
}
html.js-reveal:not(.has-vt) .rise{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js-reveal:not(.has-vt) .rise.in{opacity:1;transform:none}

/* ── profundidad ── */
.card{transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s ease}
@media (hover:hover){
  .card:hover{transform:translateY(-10px) perspective(1200px) rotateX(3deg);box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 0 1px rgba(56,189,248,.38);border-color:rgba(56,189,248,.38)}
  .cta:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 22px 52px rgba(14,165,233,.55)}
}
.cta{transition:transform .4s var(--ease),box-shadow .4s ease}
/* los hijos de una rejilla no deben empujarla: el email es una palabra larga */
.contact>*,.g2>*,.g3>*,.mosaic>*,.faq>*{min-width:0}
.btn{max-width:100%;overflow-wrap:anywhere}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}html.js-reveal .rise{opacity:1!important;transform:none!important}}

/* ── botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;border-radius:var(--r);padding:17px 30px;font-size:clamp(15px,1.6vw,17px)}
.btn-p{background:linear-gradient(135deg,var(--cyan),var(--cyan-lt));color:#04111d;box-shadow:0 20px 46px rgba(14,165,233,.45),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-s{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);font-weight:600;backdrop-filter:blur(10px)}

/* ── nav ── */
.nav{position:relative;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:18px var(--pad) 0;padding:12px 12px 12px 16px;border-radius:18px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 18px 44px rgba(0,0,0,.38)}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:clamp(42px,5vw,52px);height:clamp(42px,5vw,52px);border-radius:14px;background:#fff;overflow:hidden;flex:none;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.wordmark{font-family:var(--font-d);font-weight:700;font-size:clamp(17px,2vw,21px);line-height:1;display:flex;align-items:baseline;gap:2px}
.wordmark .s{color:var(--cyan-lt)}
.wordmark .t{color:var(--yellow);font-size:.52em;margin-left:4px;transform:translateY(-.55em);display:inline-block}
.tagline{display:block;white-space:nowrap;font-family:var(--font-m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(234,241,251,.45);margin-top:3px}
.nav-links{display:flex;gap:clamp(16px,2.2vw,30px);font-size:14px;font-weight:500;color:rgba(234,241,251,.72)}
.nav-links a:hover{color:var(--yellow)}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-tel{font-family:var(--font-m);font-size:13px;color:var(--ink-faint)}
.nav-cta{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--cyan),var(--cyan-lt));color:#04111d;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:800;box-shadow:0 14px 32px rgba(14,165,233,.42)}
.only-mobile{display:none}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.05);color:var(--ink);cursor:pointer;padding:0;flex:none}
.nav-toggle:hover{color:var(--yellow)}
@media(max-width:980px){
  .nav{position:relative}
  .nav-tel{display:none}
  .nav-toggle{display:inline-flex}
  .only-mobile{display:block}
  .nav-links{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;gap:0;
    background:rgba(9,18,31,.94);backdrop-filter:blur(18px);
    border:1px solid var(--line);border-radius:16px;
    box-shadow:0 26px 56px rgba(0,0,0,.5);
    padding:6px;overflow:hidden;z-index:40;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  }
  .nav-links[data-open]{opacity:1;visibility:visible;transform:none}
  .nav-links a{padding:13px 14px;border-radius:10px;font-size:16px;color:var(--ink)}
  .nav-links a+a{border-top:1px solid var(--line-faint,rgba(255,255,255,.07))}
  .nav-links a:active{background:rgba(255,255,255,.06)}
}
@media(max-width:420px){.tagline{display:none}}

/* ── hero ── */
.hero{position:relative;overflow:hidden;padding-bottom:clamp(48px,7vw,96px);background:radial-gradient(900px 620px at 78% 8%,rgba(14,165,233,.30),transparent 62%),radial-gradient(760px 520px at 8% 72%,rgba(255,212,0,.13),transparent 60%),linear-gradient(180deg,#071120,var(--bg))}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(1100px 640px at 50% 24%,#000 40%,transparent 78%);mask-image:radial-gradient(1100px 640px at 50% 24%,#000 40%,transparent 78%);pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(30px);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:1.04fr 1fr;gap:clamp(28px,5vw,60px);align-items:center;padding:clamp(40px,6vw,74px) var(--pad) 0}
.hero-copy{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.badge{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:8px 16px 8px 10px;border-radius:999px;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.3);font-family:var(--font-m);font-size:clamp(9px,1.1vw,11px);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-pale)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 12px var(--yellow);flex:none}
h1{font-size:clamp(38px,7vw,76px);line-height:.99;text-wrap:balance;text-shadow:0 1px 0 rgba(255,255,255,.22),0 2px 0 rgba(0,0,0,.35),0 12px 34px rgba(0,0,0,.55)}
.pop{color:var(--yellow);text-shadow:0 1px 0 #a88c00,0 2px 0 #8a7300,0 3px 0 #6d5b00,0 4px 0 #514400,0 6px 12px rgba(0,0,0,.6),0 14px 40px rgba(255,212,0,.32)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.stars{display:flex;gap:2px}
.rating{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px;color:var(--ink-dim)}
.rating b{color:#fff;font-size:15px}
.stage{position:relative;perspective:1600px;min-height:clamp(340px,48vw,600px);display:flex;align-items:center;justify-content:center}
.ring{position:absolute;width:min(520px,88%);aspect-ratio:1;border-radius:50%;border:1px dashed rgba(56,189,248,.28);pointer-events:none}
.piece{position:relative;width:min(420px,78%);transform-style:preserve-3d}
.piece-frame{border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 60px 110px rgba(0,0,0,.62),0 0 0 1px rgba(56,189,248,.14),inset 0 1px 0 rgba(255,255,255,.22);position:relative}
.piece-frame img{width:100%;aspect-ratio:420/470;object-fit:cover}
.sheen{position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 42%,rgba(6,13,24,.5))}
.scanline{position:absolute;left:0;right:0;top:0;height:90px;background:linear-gradient(180deg,transparent,rgba(56,189,248,.28),transparent);mix-blend-mode:screen}
.reflect{height:26%;margin-top:6px;border-radius:24px;overflow:hidden;opacity:.26;transform:scaleY(-1);-webkit-mask-image:linear-gradient(180deg,transparent 18%,#000);mask-image:linear-gradient(180deg,transparent 18%,#000)}
.reflect img{width:100%;aspect-ratio:420/470;object-fit:cover}
.chip{position:absolute;background:rgba(10,20,34,.82);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);border-radius:var(--r);padding:14px 18px;display:flex;flex-direction:column;gap:3px;box-shadow:0 26px 56px rgba(0,0,0,.55)}
.chip .k{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-pale)}
.chip .v{font-family:var(--font-d);font-weight:700;font-size:clamp(19px,2.4vw,26px);line-height:1;color:#fff}
.chip-tl{left:0;top:12%}
.emblem{position:absolute;left:-20px;bottom:31%;z-index:2;width:clamp(64px,11vw,96px);aspect-ratio:1;border-radius:50%;background:#fff;overflow:hidden;border:3px solid rgba(255,255,255,.9);box-shadow:0 26px 56px rgba(0,0,0,.6),0 0 0 8px rgba(56,189,248,.12)}
.emblem img{width:100%;height:100%;object-fit:cover}
.pill{position:absolute;right:-16px;bottom:48%;z-index:2;background:linear-gradient(135deg,var(--yellow),#ffc400);color:#0b1626;border-radius:var(--r);padding:13px 18px;font-family:var(--font-d);font-weight:700;font-size:clamp(13px,1.5vw,15px);box-shadow:0 26px 56px rgba(255,212,0,.28)}
.cue{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:34px;font-family:var(--font-m);font-size:10px;letter-spacing:.22em;color:rgba(234,241,251,.5)}
@media(max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:26px}
  .stage{min-height:0;margin-top:4px}
  .piece{width:min(360px,86%)}
  .chip-tl{left:-4px;top:6%}
  .cue{display:none}
}

/* ── marquesina ── */
.marquee{border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);background:var(--bg-2);overflow:hidden;padding:18px 0}
.marquee-track{display:flex;gap:clamp(28px,5vw,56px);width:max-content;font-family:var(--font-d);font-weight:600;font-size:clamp(15px,2vw,20px);color:rgba(234,241,251,.34);white-space:nowrap}
.marquee-track .c{color:var(--yellow)}
.marquee-track .b{color:var(--cyan-lt)}

/* ── rejillas ── */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;perspective:1500px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;perspective:1500px}
@media(max-width:1040px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.tilt-in{animation:none!important;transform:none!important}}
@media(max-width:720px){.g3,.g2{grid-template-columns:1fr}}

.step{background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:14px;box-shadow:0 26px 60px rgba(0,0,0,.42);backdrop-filter:blur(10px)}
.step.hot{background:linear-gradient(160deg,var(--cyan),#0284c7);border-color:rgba(125,211,252,.5);box-shadow:0 34px 70px rgba(14,165,233,.34)}
.step .n{font-family:var(--font-d);font-weight:700;font-size:clamp(42px,5vw,56px);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(56,189,248,.55)}
.step.hot .n{-webkit-text-stroke-color:rgba(255,255,255,.75)}
.step h3{font-size:clamp(19px,2.2vw,23px);font-weight:600;color:#fff}
.step p{font-size:15px;line-height:1.65;color:rgba(234,241,251,.66)}
.step.hot p{color:rgba(255,255,255,.88)}

.tile{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 66px rgba(0,0,0,.48);background:#0a1524}
.tile img{width:100%;height:280px;object-fit:cover}
.tile .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 32%,rgba(4,12,22,.94) 86%)}
.tile .body{position:absolute;left:24px;right:24px;bottom:22px;display:flex;flex-direction:column;gap:8px}
.tag{align-self:flex-start;font-family:var(--font-m);font-size:10px;letter-spacing:.12em;background:rgba(56,189,248,.18);border:1px solid rgba(56,189,248,.4);color:var(--cyan-pale);padding:4px 10px;border-radius:6px}
.tag.y{background:rgba(255,212,0,.16);border-color:rgba(255,212,0,.42);color:var(--yellow)}
.tile h3{font-size:clamp(18px,2vw,22px);font-weight:600;color:#fff}
.tile p{font-size:14px;line-height:1.6;color:var(--ink-dim)}

.mat{border-radius:var(--r-lg);padding:clamp(26px,3.4vw,40px);display:flex;flex-direction:column;gap:20px;box-shadow:0 34px 72px rgba(0,0,0,.44);backdrop-filter:blur(12px)}
.mat.c{background:linear-gradient(155deg,rgba(56,189,248,.16),rgba(255,255,255,.03));border:1px solid rgba(56,189,248,.28)}
.mat.y{background:linear-gradient(155deg,rgba(255,212,0,.16),rgba(255,255,255,.03));border:1px solid rgba(255,212,0,.3)}
.mat-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mat-h b{font-family:var(--font-d);font-weight:700;font-size:clamp(34px,4.6vw,50px);line-height:1;color:#fff}
.mat.c .mat-h b{text-shadow:0 2px 0 rgba(0,0,0,.4),0 10px 30px rgba(56,189,248,.35)}
.mat.y .mat-h b{text-shadow:0 2px 0 rgba(0,0,0,.4),0 10px 30px rgba(255,212,0,.32)}
.mat-h span{font-size:clamp(15px,1.7vw,17px);font-weight:600;color:rgba(234,241,251,.76)}
.mat p{font-size:16px;line-height:1.66;color:rgba(234,241,251,.68)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{font-size:13px;font-weight:600;background:rgba(255,255,255,.07);border:1px solid var(--line);padding:9px 15px;border-radius:10px}
.claim{margin-top:36px;font-family:var(--font-d);font-weight:600;font-size:clamp(20px,3vw,30px);line-height:1.28;color:#fff;max-width:48ch}

.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,17vw,230px);gap:16px;perspective:1800px}
.mosaic>*{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:0 26px 58px rgba(0,0,0,.45)}
.mosaic img{width:100%;height:100%;object-fit:cover}
.big{grid-column:span 2;grid-row:span 2}
.stat{border-color:rgba(56,189,248,.3)!important;background:linear-gradient(150deg,rgba(56,189,248,.2),rgba(255,255,255,.03));display:flex;flex-direction:column;justify-content:center;gap:8px;padding:clamp(18px,2.4vw,28px);backdrop-filter:blur(10px)}
.stat b{font-family:var(--font-d);font-weight:700;font-size:clamp(26px,3.6vw,36px);color:var(--yellow);line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.stat span{font-size:14px;color:rgba(234,241,251,.75);line-height:1.5}
@media(max-width:720px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}}

.quote{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:16px;box-shadow:0 26px 58px rgba(0,0,0,.42);backdrop-filter:blur(10px)}
.quote p{font-size:16px;line-height:1.66;color:rgba(234,241,251,.9)}
.quote cite{font-size:14px;font-weight:700;color:var(--yellow);font-style:normal}
.score{display:flex;align-items:center;gap:14px}
.score b{font-family:var(--font-d);font-weight:700;font-size:clamp(38px,5vw,54px);line-height:1;color:var(--yellow);text-shadow:0 2px 0 #8a7300,0 12px 34px rgba(255,212,0,.3)}

.contact{position:relative;border-radius:28px;overflow:hidden;border:1px solid rgba(56,189,248,.28);background:radial-gradient(700px 340px at 22% 0%,rgba(14,165,233,.34),transparent 62%),linear-gradient(150deg,#0a1c2e,var(--bg-3));box-shadow:0 40px 90px rgba(0,0,0,.5);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.contact-copy{display:flex;flex-direction:column;gap:20px}
.info{background:rgba(4,12,22,.6);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:20px;backdrop-filter:blur(12px)}
.info .k{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-pale)}
.info address{font-style:normal;font-size:16px;font-weight:600;line-height:1.55;color:#fff}
.hr{height:1px;background:var(--line)}
.hours{display:flex;flex-direction:column;gap:10px}
.hours div{display:flex;justify-content:space-between;gap:16px;font-size:15px}
.hours span:first-child{color:rgba(234,241,251,.62)}
.hours span:last-child{font-weight:600}
.link-y{font-size:15px;font-weight:700;color:var(--cyan-lt)}
.link-y:hover{color:var(--yellow)}

.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
@media(max-width:720px){.faq{grid-template-columns:1fr}}
.faq>div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:24px 26px;display:flex;flex-direction:column;gap:8px}
.faq h3{font-size:clamp(17px,1.9vw,19px);font-weight:600;color:#fff}
.faq p{font-size:15px;line-height:1.62;color:rgba(234,241,251,.66)}

footer{background:var(--bg-2);border-top:1px solid rgba(255,255,255,.1);color:var(--ink-faint);padding:clamp(36px,5vw,54px) var(--pad) clamp(90px,10vw,46px);display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
footer .f-links{display:flex;gap:clamp(16px,3vw,28px);font-size:14px;font-weight:500;flex-wrap:wrap}
footer .f-links a:hover{color:var(--yellow)}
footer small{font-size:14px;line-height:1.65;display:block}



/* ── Club ManoMaker ── */
.club-caja{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,4vw,48px);align-items:center;
  background:linear-gradient(150deg,rgba(14,165,233,.14),rgba(255,212,0,.07));
  border:1px solid rgba(125,211,252,.28);border-radius:var(--r-lg);padding:clamp(26px,4vw,52px)}
.club-caja>*{min-width:0}
.club-lista{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px;font-size:15px;color:var(--ink-dim)}
.club-lista li{padding-left:20px;position:relative}
.club-lista li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:99px;background:var(--yellow)}
.club-lista b{color:#fff}
.club-tarjeta{background:rgba(4,17,29,.55);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  padding:26px 22px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.club-chip{font-family:var(--f-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-pale)}
.club-puntos{font-family:var(--f-d);font-size:clamp(44px,6vw,62px);font-weight:700;line-height:1;color:var(--yellow);margin-top:14px}
.club-pie{font-size:13px;color:var(--ink-faint);margin-top:8px}
@media(max-width:760px){
  .club-caja{grid-template-columns:1fr}
  .club-tarjeta{order:-1;max-width:220px;margin:0 auto}
}

/* ── pantallas estrechas: plegable cerrado, moviles pequenos ── */
@media(max-width:560px){
  :root{--pad:16px}
  .nav{margin:12px var(--pad) 0;padding:9px 9px 9px 11px;gap:10px;border-radius:15px}
  .brand{gap:9px}
  .brand-mark{width:38px;height:38px;border-radius:11px}
  .wordmark{font-size:16px}
  .nav-cta{padding:11px;border-radius:999px;gap:0}
  .nav-cta-label{display:none}
  h1{font-size:clamp(30px,9.2vw,40px)}
  .badge{font-size:9px;letter-spacing:.1em;padding:7px 12px 7px 8px;gap:8px}
  .hero-in{padding-top:26px;gap:20px}
  .hero-actions{gap:10px}
  .btn{width:100%;padding:15px 18px}
  .piece{width:min(420px,88%)}
  .chip{padding:11px 14px}
  .rating{font-size:14px;gap:9px}
  .sec-head{margin-bottom:24px;gap:16px}
  .sec-head>div{gap:10px}
  .tile img{height:220px}
  .tile .body{left:18px;right:18px;bottom:18px}
  .mat{padding:22px}
  .mat-h{gap:8px}
  .claim{margin-top:26px}
  .mosaic{grid-auto-rows:130px;gap:12px}
  .quote,.step{padding:22px}
  .faq>div{padding:20px}
  .contact{padding:22px;border-radius:22px}
  .info{padding:20px}
  .hours div{font-size:14px;flex-direction:column;gap:2px}
  .hours span:last-child{font-weight:700}
  footer{padding-bottom:96px;gap:22px}
  .dock{font-size:15px;padding:15px}
}
@media(max-width:380px){
  h1{font-size:29px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .dock{font-size:15px;gap:8px}
  .dock-long{display:none}
  .marquee-track{font-size:14px}
}

/* ── galería ampliada ── */
.mosaic-2{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,16vw,215px);margin-top:16px}
.mosaic-2>*{grid-column:span 1;grid-row:span 1}
.gal-hint{margin-top:18px;font-size:14px;color:var(--ink-faint);font-family:var(--font-m)}

/* ── ambiente de Navidad (solo cuando <html data-navidad>) ── */
[data-navidad]{
  --cyan-pale:#ffd9a8;
  --glass:rgba(255,236,214,.06);
  --line:rgba(255,226,196,.16);
}
[data-navidad] body{
  background:
    radial-gradient(900px 600px at 78% 4%,rgba(200,50,63,.14),transparent 62%),
    radial-gradient(700px 500px at 6% 26%,rgba(255,196,64,.10),transparent 60%),
    var(--bg);
}
[data-navidad] .hero{
  background:
    radial-gradient(900px 620px at 78% 8%,rgba(200,50,63,.32),transparent 62%),
    radial-gradient(760px 520px at 8% 72%,rgba(255,212,0,.20),transparent 60%),
    linear-gradient(180deg,#0d1220,var(--bg));
}
[data-navidad] .badge{background:rgba(200,50,63,.16);border-color:rgba(230,120,120,.38);color:#ffd9a8}
[data-navidad] .eyebrow{color:#ffce87}
[data-navidad] .orb.f-glow{background:radial-gradient(circle,rgba(200,50,63,.34),transparent 65%)!important}
[data-navidad] .ring{border-color:rgba(255,205,120,.34)}
[data-navidad] .marquee{background:#120c12}
[data-navidad] .marquee-track .b{color:#e0606c}
[data-navidad] .pill{background:linear-gradient(135deg,#d4404f,#b8323f);color:#fff4e2;box-shadow:0 26px 56px rgba(200,50,63,.34)}

/* guirnalda de luces en el borde superior */
[data-navidad] .lights{display:block}
.lights{display:none;position:fixed;top:0;left:0;right:0;height:10px;z-index:120;pointer-events:none;
  background-image:radial-gradient(circle at 10px 4px,#ffd06b 2.6px,transparent 3px),radial-gradient(circle at 34px 4px,#e2606c 2.6px,transparent 3px),radial-gradient(circle at 58px 4px,#8fd6a0 2.6px,transparent 3px);
  background-size:72px 10px;background-repeat:repeat-x;
  filter:drop-shadow(0 0 5px rgba(255,190,110,.75));
  animation:luces 3.6s ease-in-out infinite}
@keyframes luces{0%,100%{opacity:.62}50%{opacity:1}}

/* barra de fecha límite */
.xmas-bar{display:none;position:relative;z-index:60;background:linear-gradient(90deg,#b8323f,#d4404f 45%,#a8862a);color:#fff6e8;
  text-align:center;padding:11px clamp(14px,3vw,24px);font-size:clamp(13px,1.6vw,15px);font-weight:600;line-height:1.45}
[data-navidad] .xmas-bar[data-on]{display:block}
.xmas-bar b{color:#ffe08a;font-weight:800;white-space:nowrap}
.xmas-bar a{text-decoration:underline;text-underline-offset:3px;font-weight:800;white-space:nowrap}
.xmas-bar a:hover{color:#ffe08a}
.xmas-in{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}

/* nieve */
#nieve{display:none;position:fixed;inset:0;z-index:110;pointer-events:none}
[data-navidad] #nieve{display:block}
@media (prefers-reduced-motion:reduce){
  .lights{animation:none}
  [data-navidad] #nieve{display:none}
}


/* gorro de Navidad sobre el logotipo (barra y pie) */
.brand{position:relative}
[data-navidad] .brand::before{
  content:"";position:absolute;z-index:2;pointer-events:none;
  left:-17px;top:-25px;width:50px;height:41px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2052%22%3E%3Cpath%20d%3D%22M60%2044C58%2022%2044%208%2026%208%2014%208%206%2015%207%2023c1%208%2010%2011%2017%209%2012-3%2024%201%2030%2012z%22%20fill%3D%22%23d33b46%22%2F%3E%3Cpath%20d%3D%22M60%2044c-5-11-15-15-26-13%208%202%2016%207%2020%2014z%22%20fill%3D%22%23a82833%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%2239%22%20width%3D%2231%22%20height%3D%2213%22%20rx%3D%226.5%22%20fill%3D%22%23fffaf2%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2223%22%20r%3D%228%22%20fill%3D%22%23fffaf2%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  transform:rotate(-9deg);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
@media(max-width:560px){
  [data-navidad] .brand::before{left:-13px;top:-20px;width:40px;height:33px}
}


/* avisos festivos que asoman de vez en cuando */
.hohoho{position:fixed;right:clamp(12px,3vw,26px);bottom:clamp(16px,3vw,26px);z-index:130;
  display:flex;align-items:center;gap:11px;max-width:min(330px,86vw);
  padding:13px 17px;border-radius:16px;
  background:linear-gradient(145deg,rgba(24,12,16,.95),rgba(38,16,20,.95));
  border:1px solid rgba(255,205,120,.34);
  box-shadow:0 22px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,225,180,.16);
  color:#ffeccf;font-size:14.5px;font-weight:600;line-height:1.45;
  opacity:0;transform:translateX(16px) scale(.96);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.hohoho[data-ver]{opacity:1;transform:none;pointer-events:auto}
.hohoho b{color:#ffd06b;font-weight:800}
.hohoho .gorrito{flex:none;font-size:20px;line-height:1}
.hohoho button{flex:none;margin-left:2px;width:26px;height:26px;border-radius:8px;border:0;
  background:rgba(255,255,255,.08);color:#ffeccf;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.hohoho button:hover{background:rgba(255,255,255,.18);color:#ffd06b}
@media(max-width:700px){.hohoho{bottom:84px;font-size:13.5px;padding:11px 14px}}


/* ── ambiente de Halloween (solo cuando <html data-halloween>) ── */
[data-halloween]{
  --cyan-pale:#ffb765;
  --glass:rgba(255,180,90,.06);
  --line:rgba(255,190,120,.16);
}
[data-halloween] body{
  background:
    radial-gradient(900px 600px at 80% 4%,rgba(240,120,30,.13),transparent 62%),
    radial-gradient(700px 520px at 4% 30%,rgba(120,60,180,.15),transparent 60%),
    var(--bg);
}
[data-halloween] .hero{
  background:
    radial-gradient(900px 620px at 78% 8%,rgba(240,130,30,.30),transparent 62%),
    radial-gradient(760px 520px at 8% 72%,rgba(120,55,180,.30),transparent 60%),
    linear-gradient(180deg,#150e1c,var(--bg));
}
[data-halloween] .badge{background:rgba(240,130,30,.16);border-color:rgba(255,170,80,.40);color:#ffc98a}
[data-halloween] .badge .dot{background:#f0a03c;box-shadow:0 0 12px #f0a03c}
[data-halloween] .eyebrow{color:#ffb765}
[data-halloween] .orb.f-glow{background:radial-gradient(circle,rgba(240,130,30,.30),transparent 65%)!important}
[data-halloween] .ring{border-color:rgba(255,170,90,.30)}
[data-halloween] .marquee{background:#140d1a}
[data-halloween] .marquee-track .b{color:#a978e0}
[data-halloween] .marquee-track .c{color:#f0a03c}
[data-halloween] .pill{background:linear-gradient(135deg,#f0902c,#d9701a);color:#1a1008;box-shadow:0 26px 56px rgba(240,130,30,.30)}
[data-halloween] .pop{color:#ffa93d;text-shadow:0 1px 0 #8a4a00,0 2px 0 #6d3a00,0 3px 0 #512c00,0 4px 0 #3a1f00,0 6px 12px rgba(0,0,0,.6),0 14px 40px rgba(240,130,30,.32)}

/* sombrero de bruja sobre el logotipo */
[data-halloween] .brand::before{
  content:"";position:absolute;z-index:2;pointer-events:none;
  left:-16px;top:-27px;width:50px;height:41px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2052%22%3E%3Cpath%20d%3D%22M57%2045C52%2030%2040%206%2030%205c-6-1-9%209-11%2018-2%209-5%2017-11%2022z%22%20fill%3D%22%235b3a8e%22%2F%3E%3Cpath%20d%3D%22M57%2045C52%2032%2044%2016%2036%208c3%2011%209%2026%2012%2037z%22%20fill%3D%22%23472c72%22%2F%3E%3Cpath%20d%3D%22M3%2045c0-3%2012-6%2027-6s28%203%2028%206-13%206-28%206S3%2048%203%2045z%22%20fill%3D%22%233a2560%22%2F%3E%3Cpath%20d%3D%22M17%2041c4-2%2011-3%2017-3%204%200%208%200%2011%201l1%206c-4-1-8-1-12-1-6%200-12%201-16%202z%22%20fill%3D%22%23f0a03c%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  transform:rotate(-10deg);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
@media(max-width:560px){
  [data-halloween] .brand::before{left:-12px;top:-21px;width:40px;height:33px}
}

/* telarañas en las esquinas de arriba */
[data-halloween] .telas{display:block}
.telas{display:none;position:fixed;top:0;left:0;right:0;height:130px;z-index:115;pointer-events:none}
.telas i{position:absolute;top:0;width:120px;height:120px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C210%2C160%2C.30%29%22%20stroke-width%3D%221.6%22%3E%3Cpath%20d%3D%22M0%200%20L120%2040%20M0%200%20L100%2070%20M0%200%20L70%20100%20M0%200%20L40%20120%20M0%200%20L118%2012%20M0%200%20L12%20118%22%2F%3E%3Cpath%20d%3D%22M22%204C18%2012%2012%2018%204%2022M44%208C38%2022%2026%2034%2010%2042M66%2014C56%2034%2038%2052%2016%2062M88%2020C74%2046%2050%2070%2022%2082M110%2027C92%2058%2062%2088%2028%20104%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center/contain;opacity:.85}
.telas i:first-child{left:0}
.telas i:last-child{right:0;transform:scaleX(-1)}
@media(max-width:700px){.telas i{width:82px;height:82px}}

[data-halloween] #nieve{display:block}
@media (prefers-reduced-motion:reduce){[data-halloween] #nieve{display:none}}

[data-halloween] .hohoho{
  background:linear-gradient(145deg,rgba(22,14,26,.95),rgba(38,20,12,.95));
  border-color:rgba(255,175,90,.36);color:#ffdcb5;
  box-shadow:0 22px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,200,140,.16)}
[data-halloween] .hohoho b{color:#ffab4d}

/* ── visor de fotos ── */
.zoomable{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;display:none;background:rgba(3,9,17,.94);backdrop-filter:blur(10px)}
.lb[data-open]{display:grid;grid-template-rows:auto 1fr auto}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(14px,3vw,26px)}
.lb-count{font-family:var(--font-m);font-size:13px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.lb-btn{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer;padding:0;flex:none;transition:background .2s ease,color .2s ease}
.lb-btn:hover{background:rgba(255,255,255,.14);color:var(--yellow)}
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:0 clamp(8px,2vw,20px);min-height:0}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(10,20,34,.8);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .2s ease,color .2s ease}
.lb-nav:hover{background:rgba(14,165,233,.85);color:#04111d}
.lb-prev{left:clamp(6px,1.5vw,18px)}
.lb-next{right:clamp(6px,1.5vw,18px)}
.lb-cap{padding:14px clamp(14px,3vw,26px) calc(14px + env(safe-area-inset-bottom));text-align:center;font-size:15px;color:var(--ink-dim);min-height:20px}
@media(max-width:600px){
  .lb-nav{width:44px;height:44px}
  .lb-cap{font-size:14px}
}

/* barra fija de WhatsApp en móvil */
.dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:none;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--cyan),var(--cyan-lt));color:#04111d;padding:16px;border-radius:var(--r);font-weight:800;font-size:16px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
@media(max-width:700px){.dock{display:flex}}