/* ==========================================================================
   CLUB PÁDEL LA MAYORÍA — v4 · «Transmisión»
   Capítulos a sangre como una transmisión de pádel: foto completa, marcador
   encima y letra condensada gigante. Una sola apariencia oscura, la de marca:
   verde #042F24 · lima #D6F502 (el color exacto del logo) · hueso #F5F3F0.

   Fotos sin cabezas cortadas: cada foto lleva --fp, su punto de enfoque (la
   cara del jugador). El recorte (object-position) y el zoom (transform-origin)
   salen de ese punto, y los marcos son verticales u horizontales según la foto.
   ========================================================================== */

:root{
  --honda:#021C15;
  --pista:#042F24;
  --alta:#0A4334;
  --hueso:#F5F3F0;
  --blanco:#FFFFFF;
  --hueso-2:rgba(245,243,240,.72);
  --hueso-3:rgba(245,243,240,.52);
  --linea:rgba(245,243,240,.14);
  --vidrio-l:rgba(245,243,240,.22);
  --lima:#D6F502;
  --lima-sombra:#BFD902;
  --tinta:#042F24;
  --tinta-2:rgba(4,47,36,.74);
  --linea-o:rgba(4,47,36,.16);
  --error:#FF9B8A;

  --display:"Archivo","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --texto:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --gut:max(clamp(16px,4.2vw,48px), env(safe-area-inset-left,0px), env(safe-area-inset-right,0px));
  --ancho:1280px;
  --sec:clamp(76px,10vw,150px);
  --r:18px;
  --ease:cubic-bezier(.22,1,.36,1);
  --intro-d:0s;
  color-scheme:dark;
}
html.intro{--intro-d:1.05s}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;background:var(--honda)}
body{
  margin:0;background:var(--pista);color:var(--hueso);
  font-family:var(--texto);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;overflow-x:clip;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--lima);color:var(--tinta)}
:focus-visible{outline:2px solid var(--lima);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:min(var(--ancho), 100% - 2 * var(--gut));margin-inline:auto}
.skip{position:fixed;left:-999px;top:8px;z-index:400;background:var(--lima);color:var(--tinta);padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{left:8px}

/* ---------- tipografía ---------------------------------------------------- */

.h2,.hero__words,.game__title,.rate__price,.stat dt b,.foot__word{
  font-family:var(--display);font-stretch:66%;font-weight:850;
  text-transform:uppercase;letter-spacing:-.005em;
}
.h2{margin:0;font-size:clamp(46px,7vw,108px);line-height:.88;text-wrap:balance}
.eyebrow{
  margin:0 0 18px;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lima);
}
.eyebrow::before{content:"// "}
.lead{margin:0;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--hueso-2);max-width:52ch}

/* ---------- botones -------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:14px;
  height:52px;padding:0 6px 0 24px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  transition:transform .4s var(--ease), background-color .3s, color .3s, box-shadow .3s;
}
.btn i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .45s var(--ease)}
.btn i svg,.round svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--lima{background:var(--lima);color:var(--tinta)}
.btn--lima i{background:var(--tinta);color:var(--lima)}
.btn--dark{background:var(--tinta);color:var(--hueso)}
.btn--dark i{background:var(--lima);color:var(--tinta)}
.btn--line{color:var(--hueso);box-shadow:inset 0 0 0 1.5px var(--vidrio-l)}
.btn--line i{background:var(--hueso);color:var(--tinta)}
.btn--line-dark{color:var(--tinta);box-shadow:inset 0 0 0 1.5px rgba(4,47,36,.35)}
.btn--line-dark i{background:var(--tinta);color:var(--lima)}
.btn--full{width:100%;justify-content:center;padding:0 20px}
.btn--nav{height:44px;padding:0 22px}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn[target]:hover i{transform:rotate(-45deg)}
  .btn--line:hover{box-shadow:inset 0 0 0 1.5px var(--lima)}
  .btn--line-dark:hover{box-shadow:inset 0 0 0 1.5px var(--tinta)}
}

.round{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .35s var(--ease), background-color .3s, opacity .3s}
.round svg{width:18px;height:18px}
.round--lima{background:var(--lima);color:var(--tinta)}
.round--white{background:var(--hueso);color:var(--tinta)}
.round--line{box-shadow:inset 0 0 0 1.5px var(--vidrio-l);color:var(--hueso)}
.round[disabled]{opacity:.35;pointer-events:none}
@media (hover:hover){.round:hover{transform:scale(1.06)}}

.glass{
  background:rgba(2,28,21,.46);border:1px solid var(--vidrio-l);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
}
.tag{
  display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(2,28,21,.55);border:1px solid var(--vidrio-l);color:var(--hueso);white-space:nowrap;
}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--lima);flex:none;animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(214,245,2,.55)}70%{box-shadow:0 0 0 10px rgba(214,245,2,0)}100%{box-shadow:0 0 0 0 rgba(214,245,2,0)}}

/* ---------- foto con punto de enfoque ---------------------------------------- */

.ph{position:relative;margin:0;overflow:hidden;background:var(--alta);border-radius:var(--r);isolation:isolate}
.ph>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--fp,50% 40%);transform-origin:var(--fp,50% 40%);
  transition:transform 1.6s var(--ease);
}
.js .ph.rv:not(.in)>img,.js .rv:not(.in) .ph>img{transform:scale(1.1)}
@media (hover:hover){.ph:hover>img{transform:scale(1.04)}}
.ph>figcaption:not(.chip){
  position:absolute;left:12px;bottom:12px;z-index:1;
  display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hueso);
  background:rgba(2,28,21,.5);border:1px solid var(--vidrio-l);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* ---------- aparición ------------------------------------------------------- */

.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js .rv.in,.sin-js .rv{opacity:1;transform:none}
.sin-js .ph>img{transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* ---------- intro (solo la primera visita de la sesión) ---------------------- */

#intro{display:none}
.intro #intro{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--pista);
  animation:introOut .85s cubic-bezier(.76,0,.24,1) 1.1s forwards;
}
.intro__in{width:min(400px,72vw)}
.intro__in img{width:100%;height:auto}
.intro__bar{height:2px;margin-top:28px;background:rgba(245,243,240,.16);border-radius:2px;overflow:hidden}
.intro__bar i{display:block;height:100%;background:var(--lima);transform-origin:left;animation:introBar 1s var(--ease) both}
.intro__in p{margin:12px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hueso-3)}
@keyframes introBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes introOut{to{clip-path:inset(0 0 100% 0);visibility:hidden}}

/* ---------- navegación ------------------------------------------------------- */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;padding-top:env(safe-area-inset-top,0px);
  border-bottom:1px solid transparent;
  transition:transform .55s var(--ease), background-color .4s, border-color .4s;
}
.nav.is-solid{
  background:rgba(2,28,21,.86);border-bottom-color:var(--linea);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
}
.nav.is-hidden{transform:translateY(-110%)}
.nav__bar{
  max-width:calc(var(--ancho) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut);
  height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav__logo img{height:34px;width:auto}
.nav__links{display:flex;gap:clamp(16px,1.8vw,28px)}
.nav__links a{font-size:14px;font-weight:500;color:rgba(245,243,240,.84);transition:color .25s}
.nav__links a:hover{color:var(--lima)}
.nav__end{display:flex;align-items:center;gap:8px}
.burger{display:none;width:44px;height:44px;border-radius:50%;background:var(--hueso);place-items:center}
.burger span,.burger span::before,.burger span::after{display:block;width:16px;height:1.6px;border-radius:2px;background:var(--tinta)}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-5px}.burger span::after{top:5px}

.menu{
  position:fixed;inset:0;z-index:95;background:var(--honda);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 22px);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .7s cubic-bezier(.76,0,.24,1), visibility 0s .7s;
}
.menu.is-open{clip-path:inset(0);visibility:visible;transition:clip-path .7s cubic-bezier(.76,0,.24,1)}
.menu__top{display:flex;align-items:center;justify-content:space-between;min-height:58px}
.menu__top img{height:30px;width:auto}
.menu__x{width:44px;height:44px;border-radius:50%;background:var(--hueso);color:var(--tinta);display:grid;place-items:center}
.menu__x svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.menu__list{list-style:none;margin:auto 0;padding:24px 0;display:grid;gap:4px}
.menu__list a{
  display:flex;align-items:center;gap:14px;padding:5px 0;
  font-family:var(--display);font-stretch:66%;font-weight:850;text-transform:uppercase;
  font-size:clamp(30px,8.6vw,44px);line-height:1;color:var(--hueso);
}
.menu__list a:hover{color:var(--lima)}
.menu__list img{width:44px;height:44px;border-radius:12px;object-fit:cover;object-position:var(--fp,50% 50%);flex:none}
.menu__foot{display:grid;gap:12px}
.menu__foot p{margin:0;color:var(--hueso-3);font-size:13px}

/* ---------- héroe ------------------------------------------------------------ */

.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--honda);color:var(--hueso);
}
.hero__media{position:absolute;inset:0;z-index:-2;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.hero__shot{position:relative;margin:0;overflow:hidden;background:var(--alta)}
.hero__shot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--fp);transform-origin:var(--fp);
  transition:filter .9s var(--ease), transform 1.6s var(--ease);
}
.hero__shade{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(2,28,21,.6) 0%, rgba(2,28,21,0) 20%),
    linear-gradient(0deg, rgba(2,28,21,.96) 0%, rgba(2,28,21,.74) 22%, rgba(2,28,21,0) 50%);
}
.hero__body{position:relative;padding:calc(env(safe-area-inset-top,0px) + 112px) 0 clamp(24px,4.5vh,48px)}
.hero__kicker{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 16px;padding-inline:var(--gut);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--hueso-2);
}
.live{
  display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 14px;border-radius:999px;
  background:rgba(2,28,21,.55);border:1px solid var(--vidrio-l);color:var(--hueso);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.live b{font-weight:500}
.hero__words{
  margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  font-size:min(7.8vw,19vh);font-size:min(7.8vw,19svh);line-height:.84;
}
.hw{display:block;overflow:hidden;padding:0 clamp(14px,1.6vw,28px) .05em;color:var(--hueso);transition:color .6s var(--ease)}
.hw>span{display:block;animation:wordUp 1.1s var(--ease) both;animation-delay:calc(var(--intro-d) + .25s + var(--d,0s))}
.hw.is-on{color:var(--lima)}
.hw::after{content:"";display:block;height:3px;margin-top:.1em;background:currentColor;transform:scaleX(0);transform-origin:left}
.hw.is-on::after{animation:hwBar var(--dur,5s) linear both}
.hero.is-hold .hw.is-on::after{animation:none;transform:scaleX(1)}
@keyframes wordUp{from{transform:translateY(106%)}to{transform:none}}
@keyframes hwBar{to{transform:scaleX(1)}}
.hero__cta{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-top:clamp(18px,2.8vh,30px);padding-inline:var(--gut)}
.hero__text h2{margin:0 0 6px;font-size:clamp(17px,1.45vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.hero__text p{margin:0;max-width:46ch;font-size:15px;color:var(--hueso-2)}
.hero__btns{display:flex;flex-wrap:wrap;gap:10px;flex:none}

/* escritorio: tríptico; la columna «al aire» se ilumina y las otras bajan */
@media (min-width:900px){
  .hero__shot{animation:shotIn 1.25s cubic-bezier(.76,0,.24,1) both;animation-delay:var(--intro-d)}
  .hero__shot:nth-child(2){animation-delay:calc(var(--intro-d) + .1s)}
  .hero__shot:nth-child(3){animation-delay:calc(var(--intro-d) + .2s)}
  .hero__shot:not(.is-on) img{filter:brightness(.6) saturate(.85)}
  .hero__shot.is-on img{transform:scale(1.03)}
}
@keyframes shotIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}

/* ---------- datos -------------------------------------------------------------- */

.facts{background:var(--honda);border-top:1px solid var(--linea)}
.facts__row{width:min(var(--ancho), 100% - 2 * var(--gut));margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.facts__row>div{padding:20px 18px 22px;border-left:1px solid var(--linea)}
.facts__row>div:first-child{border-left:0;padding-left:0}
.facts dt{margin-bottom:6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hueso-3)}
.facts dd{margin:0;font-size:15px;font-weight:500;display:flex;align-items:center;gap:10px}

/* ---------- cinta ---------------------------------------------------------------- */

.ticker{position:relative;overflow:hidden;padding-block:clamp(28px,4vw,52px);background:var(--honda)}
.ticker__band{
  display:flex;overflow:hidden;width:108%;margin-left:-4%;
  background:var(--lima);color:var(--tinta);transform:rotate(-1.6deg);
}
.ticker__track{
  flex:none;display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);
  padding:clamp(12px,1.4vw,18px) clamp(9px,1.2vw,17px);
  animation:tick 42s linear infinite;
}
.ticker__track span{
  font-family:var(--display);font-stretch:66%;font-weight:850;font-style:italic;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,46px);line-height:1;white-space:nowrap;
}
.ticker__track svg{width:clamp(22px,2.6vw,34px);height:clamp(22px,2.6vw,34px);flex:none;fill:var(--tinta);stroke:var(--lima);stroke-width:1.5}
@keyframes tick{to{transform:translateX(-100%)}}

/* ---------- el club --------------------------------------------------------------- */

.club{background:var(--honda);padding:clamp(40px,6vw,90px) 0 var(--sec)}
.club__title{max-width:15ch}
.mani{
  margin:clamp(30px,4vw,56px) 0 0;max-width:27ch;
  font-family:var(--display);font-stretch:82%;font-weight:600;
  font-size:clamp(30px,4.2vw,62px);line-height:1.08;letter-spacing:-.012em;color:var(--hueso);
}
.mani .pic{display:inline-block;vertical-align:middle;height:.82em;width:1.9em;border-radius:999px;overflow:hidden;margin:0 .06em;position:relative;top:-.06em}
.mani .pic img{width:100%;height:100%;object-fit:cover}
.mani.is-split .mw{opacity:.22;transition:opacity .45s var(--ease)}
.mani.is-split .mw.on{opacity:1}
.club__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-top:clamp(30px,4vw,56px)}
.idx{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.idx a{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;
  border:1px solid var(--vidrio-l);font-size:14px;font-weight:500;
  transition:background-color .25s, color .25s, border-color .25s;
}
.idx a::after{content:"→";color:var(--lima);transition:color .25s}
.idx a:hover{background:var(--lima);border-color:var(--lima);color:var(--tinta)}
.idx a:hover::after{color:var(--tinta)}
.trio{
  width:min(var(--ancho), 100% - 2 * var(--gut));margin:clamp(40px,5vw,72px) auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);align-items:start;
}
.trio .ph{aspect-ratio:4/5}
.trio .ph:nth-child(2){margin-top:clamp(24px,4vw,64px)}

/* ---------- números ---------------------------------------------------------------- */

.stats{background:var(--pista);padding:var(--sec) 0}
.stats__grid{margin:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linea)}
.stat{padding:clamp(22px,2.4vw,34px) clamp(16px,2vw,28px) 0;border-left:1px solid var(--linea)}
.stat:first-child{border-left:0;padding-left:0}
.stat dt{display:flex;align-items:baseline;gap:4px}
.stat dt b{font-size:clamp(64px,7.2vw,118px);line-height:.85;font-variant-numeric:tabular-nums}
.stat dt small{font-family:var(--display);font-stretch:66%;font-weight:800;font-size:clamp(24px,2.4vw,38px);color:var(--lima);text-transform:uppercase}
.stat dd{margin:16px 0 0;font-size:15px;line-height:1.5;color:var(--hueso-2);max-width:30ch}
.stat dd strong{color:var(--hueso);font-weight:600}
.bars{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;height:46px;align-items:end;margin-top:18px}
.bars i{display:block;height:38%;border-radius:2px;background:rgba(245,243,240,.13);transform-origin:bottom}
.bars i.on{height:100%;background:var(--lima)}
.in .bars i{animation:barUp .9s var(--ease) both;animation-delay:calc(var(--i) * 26ms)}
@keyframes barUp{from{transform:scaleY(.1)}to{transform:none}}
.bars__axis{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--hueso-3)}

/* ---------- capítulos con foto (canchas, academia, kids, torneos) --------------------- */

.feat{--bg:var(--pista);background:var(--bg);padding:var(--sec) 0}
.feat--honda{--bg:var(--honda)}
.feat--lima{--bg:var(--lima);color:var(--tinta)}
.feat__grid{
  width:min(var(--ancho), 100% - 2 * var(--gut));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;
}
.feat--flip .feat__media{order:2}
.feat__media{position:sticky;top:88px;height:min(calc(100vh - 120px),780px);height:min(calc(100svh - 120px),780px);min-height:460px}
.feat__body{min-width:0}
.feat__body .h2{margin-bottom:24px}
.specs{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;border-top:1px solid var(--linea)}
.specs--3{grid-template-columns:1fr}
.specs li{padding:20px 0 22px;border-bottom:1px solid var(--linea)}
.specs h3{margin:0 0 6px;display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.specs h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lima);flex:none}
.specs p{margin:0;font-size:15px;line-height:1.5;color:var(--hueso-2)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(24px,3vw,36px)}
.pair .ph{aspect-ratio:3/4}
.feat__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,3vw,40px)}
.feat--lima .eyebrow{color:var(--tinta)}
.feat--lima .lead,.feat--lima .specs p{color:var(--tinta-2)}
.feat--lima .specs,.feat--lima .specs li{border-color:var(--linea-o)}
.feat--lima .specs h3::before{background:var(--tinta)}
.feat--lima .ph{background:var(--lima-sombra)}
.sello{
  position:absolute;right:16px;top:16px;z-index:1;width:96px;height:96px;border-radius:50%;
  display:grid;place-content:center;text-align:center;background:var(--lima);color:var(--tinta);
  font-family:var(--display);font-stretch:66%;font-weight:850;font-size:30px;line-height:.9;transform:rotate(-8deg);
}
.sello small{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}

/* ---------- precios -------------------------------------------------------------------- */

.precios{background:var(--honda);padding:var(--sec) 0}
.head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px 48px;align-items:end;margin-bottom:clamp(32px,4.4vw,60px)}
.head .lead{justify-self:end}
.head__side{justify-self:end;display:grid;gap:18px;justify-items:start}
.rates{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rate{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r);background:var(--pista);border:1px solid var(--linea)}
.rate p{margin:0}
.rate__n{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin-bottom:18px!important}
.rate__n b{font-family:var(--display);font-stretch:66%;font-weight:850;font-size:64px;line-height:.8;color:var(--lima)}
.rate__n span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--hueso-2)}
.rate__n em{
  margin-left:auto;align-self:center;line-height:1.2;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;background:var(--tinta);color:var(--lima);
}
.rate__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font-size:clamp(32px,3vw,46px);line-height:.9}
.rate__price small{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--hueso-3)}
.rate__usd{font-family:var(--mono);font-size:13px;color:var(--hueso-2)}
.rate__per{margin:auto 0 10px!important;padding-top:14px;border-top:1px solid var(--linea);font-size:14px}
.rate--best{background:var(--lima);border-color:var(--lima);color:var(--tinta)}
.rate--best .rate__n b{color:var(--tinta)}
.rate--best .rate__n span,.rate--best .rate__usd{color:var(--tinta-2)}
.rate--best .rate__price small{color:var(--tinta-2)}
.rate--best .rate__per{border-top-color:var(--linea-o)}
.notes{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14px;color:var(--hueso-2)}
.notes li{display:flex;align-items:center;gap:10px}
.notes li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lima);flex:none}
.notes b{color:var(--hueso);font-weight:600}
.notes a{color:var(--lima);text-decoration:underline;text-underline-offset:3px}
.memb{
  margin-top:clamp(44px,5vw,80px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  border-radius:calc(var(--r) + 6px);overflow:hidden;background:var(--lima);color:var(--tinta);
}
.memb__ph{border-radius:0;min-height:440px;background:var(--lima-sombra)}
.memb__body{padding:clamp(26px,4vw,56px)}
.memb .eyebrow{color:var(--tinta)}
.checks{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;font-size:16px;font-weight:500}
.checks li{display:flex;align-items:flex-start;gap:10px}
.checks li::before{
  content:"";flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;
  background:var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6F502' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat;
}
.memb__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;padding-top:24px;border-top:1px solid var(--linea-o)}
.memb__price{margin:0;display:flex;align-items:baseline;gap:10px}
.memb__price b{font-family:var(--display);font-stretch:66%;font-weight:850;font-size:clamp(52px,6vw,84px);line-height:.85}
.memb__price span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- cómo reservar -------------------------------------------------------------- */

.steps{background:var(--pista);padding:var(--sec) 0}
.steps__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.steps__ph{aspect-ratio:4/5}
.chip{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;color:var(--hueso)}
.chip span{font-size:13px;color:var(--hueso-2)}
.chip b{display:block;font-size:18px;font-weight:600;color:var(--hueso)}
.steps__list{list-style:none;margin:clamp(28px,3.6vw,48px) 0 clamp(28px,3.6vw,40px);padding:0;border-top:1px solid var(--linea)}
.steps__list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--linea)}
.steps__list b{font-family:var(--display);font-stretch:66%;font-weight:850;font-size:clamp(40px,4vw,56px);line-height:.85;color:var(--lima);min-width:1.3em}
.steps__list h3{margin:2px 0 6px;font-size:clamp(19px,1.7vw,24px);font-weight:600;letter-spacing:-.015em}
.steps__list p{margin:0;font-size:15px;color:var(--hueso-2)}

/* ---------- Rally 3D -------------------------------------------------------------------- */

.rally{background:var(--honda);padding:var(--sec) 0}
.game{position:relative;border-radius:calc(var(--r) + 6px);overflow:hidden;background:var(--honda);aspect-ratio:16/9;border:1px solid var(--linea)}
.game canvas{display:block;width:100%;height:100%}
.game.is-playing canvas{touch-action:none;cursor:none}
.game__hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(12px,2vw,24px)}
.game__top,.game__bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.game__bottom{align-items:flex-end}
.score{display:flex;align-items:center;gap:6px;border-radius:999px;padding:6px}
.score div{display:flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px}
.score div:first-child{background:var(--lima);color:var(--tinta)}
.score b{font-family:var(--display);font-stretch:66%;font-weight:850;font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
.score span{font-size:12px}
.game__tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.game__hint{font-size:12px;color:var(--hueso-2)}
.game__overlay{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;padding:var(--gut);
  background:rgba(2,28,21,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:opacity .45s var(--ease), visibility .45s;
}
.game__overlay.is-off{opacity:0;visibility:hidden}
.game__title{margin:0 0 10px;font-size:clamp(40px,6vw,92px);line-height:.88}
.game__overlay p:not(.eyebrow){margin:0 auto 24px;max-width:42ch;color:var(--hueso-2);font-size:15px}

/* ---------- galería ---------------------------------------------------------------------- */

.gallery{background:var(--pista);padding:var(--sec) 0;overflow:hidden}
.track{
  --lado:calc((100% - min(var(--ancho), 100% - 2 * var(--gut))) / 2);
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--lado);scroll-padding-inline:var(--lado);
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
}
.track::-webkit-scrollbar{display:none}
.track::after{content:"";flex:0 0 1px}
.slide{flex:0 0 clamp(240px,24vw,330px);aspect-ratio:3/4;scroll-snap-align:start}
.gallery__ctrl{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:26px}
.dashes{flex:1;max-width:560px;display:flex;gap:5px}
.dashes i{flex:1;height:3px;border-radius:3px;background:rgba(245,243,240,.16);overflow:hidden;position:relative}
.dashes i::after{content:"";position:absolute;inset:0;background:var(--lima);transform:scaleX(0);transform-origin:left}
.dashes i.done::after{transform:scaleX(1)}
.dashes i.now::after{animation:hwBar var(--dur,4.2s) linear forwards}
.gallery__nav{display:flex;gap:10px}

/* ---------- testimonios -------------------------------------------------------------------- */

.says{background:var(--pista);padding:0 0 var(--sec)}
.says__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.say{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:clamp(22px,2.4vw,32px);border-radius:var(--r);background:var(--alta);border:1px solid var(--linea)}
.say blockquote{margin:0;font-family:var(--display);font-stretch:82%;font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.16;letter-spacing:-.01em}
.say figcaption{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--hueso-2)}
.say figcaption b{display:block;color:var(--hueso);font-size:15px;font-weight:600}
.av{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--lima);color:var(--tinta);font-family:var(--display);font-stretch:66%;font-weight:850;font-size:22px}

/* ---------- preguntas (sección clara) -------------------------------------------------------- */

.faq{background:var(--hueso);color:var(--tinta);padding:var(--sec) 0}
.faq .eyebrow{color:var(--tinta)}
.faq__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
.faq__side{position:sticky;top:110px}
.faq__side .h2{margin-bottom:28px}
.qa{display:grid;gap:10px}
.qa details{background:var(--blanco);border:1px solid var(--linea-o);border-radius:16px}
.qa summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;font-size:clamp(16px,1.4vw,19px);font-weight:600;letter-spacing:-.01em;
}
.qa summary::-webkit-details-marker{display:none}
.pm{width:28px;height:28px;border-radius:50%;background:var(--tinta);flex:none;position:relative}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.8px;background:var(--lima);transform:translate(-50%,-50%);transition:transform .35s var(--ease)}
.pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa details[open] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.qa details p{margin:-4px 22px 22px;max-width:62ch;font-size:15px;color:var(--tinta-2)}

/* ---------- contacto ----------------------------------------------------------------------- */

.contact{position:relative;isolation:isolate;overflow:hidden;background:var(--honda);padding:var(--sec) 0}
.contact__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.contact__bg img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}
.contact__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(2,28,21,.95) 0%, rgba(2,28,21,.8) 50%, rgba(2,28,21,.62) 100%)}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center}
.contact__title{font-size:clamp(56px,9vw,150px);margin-bottom:22px}
.info{margin:32px 0 0;border-top:1px solid var(--linea)}
.info>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--linea)}
.info dt{padding-top:3px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hueso-3)}
.info dd{margin:0;font-size:16px;overflow-wrap:anywhere}
.info dd a:hover{color:var(--lima)}
.info__link{display:inline-block;margin-top:6px;color:var(--lima);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.contact__form{border-radius:calc(var(--r) + 6px);padding:clamp(22px,3vw,36px)}
.form{display:grid;gap:12px}
.f{position:relative}
.f input,.f textarea{
  width:100%;padding:24px 16px 10px;border-radius:12px;border:1px solid var(--vidrio-l);
  background:rgba(2,28,21,.5);color:var(--hueso);font:inherit;font-size:16px;outline:none;
  transition:border-color .25s;
}
.f textarea{resize:vertical;min-height:120px;display:block}
.f label{position:absolute;left:17px;top:17px;font-size:15px;color:var(--hueso-3);pointer-events:none;transform-origin:left top;transition:transform .2s var(--ease), color .2s}
.f input:focus,.f textarea:focus{border-color:var(--lima)}
.f input:focus+label,.f input:not(:placeholder-shown)+label,.f textarea:focus+label,.f textarea:not(:placeholder-shown)+label{transform:translateY(-10px) scale(.78);color:var(--lima)}
.f.is-bad input,.f.is-bad textarea{border-color:var(--error)}
.f.is-bad label{color:var(--error)}
.form .btn{justify-self:start;margin-top:6px}
.form__note{margin:2px 0 0;font-size:13px;color:var(--hueso-3)}
.form__note.is-ok{color:var(--lima)}
.form__note.is-bad{color:var(--error)}

/* ---------- pie lima -------------------------------------------------------------------------- */

.foot{background:var(--lima);color:var(--tinta);overflow:hidden;padding:clamp(56px,7vw,96px) 0 calc(28px + env(safe-area-inset-bottom,0px))}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot__logo{display:inline-block;padding:16px 18px;border-radius:var(--r);background:var(--tinta)}
.foot__logo img{height:44px;width:auto}
.foot__brand p{margin:18px 0 0;max-width:36ch;font-size:15px}
.foot h3{margin:0 0 14px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px}
.foot a{overflow-wrap:anywhere}
.foot a:hover{text-decoration:underline;text-underline-offset:3px}
.foot__word{margin:clamp(40px,6vw,80px) 0 0;font-stretch:62%;font-weight:900;font-size:clamp(60px,18.4vw,320px);line-height:.8;letter-spacing:-.015em;text-align:center;white-space:nowrap}
.foot__end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:clamp(24px,3vw,36px);padding-top:20px;border-top:1px solid var(--linea-o);font-size:13px;opacity:.8}

/* ---------- dock del celular -------------------------------------------------------------------- */

.dock{
  position:fixed;z-index:80;display:none;gap:8px;padding:6px;border-radius:999px;
  left:max(12px, env(safe-area-inset-left,0px));right:max(12px, env(safe-area-inset-right,0px));
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(2,28,21,.86);border:1px solid var(--linea);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transform:translateY(170%);transition:transform .5s var(--ease);
}
.dock.is-up{transform:none}
.dock .btn{flex:1;height:52px}

/* ---------- «Reducir movimiento» acorta, no apaga ------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{transform:translateY(10px);transition-duration:.45s}
  .intro #intro{animation-delay:.45s;animation-duration:.5s}
  html.intro{--intro-d:.4s}
  .ticker__track{animation-duration:110s}
  .hero__shot.is-on img{animation:none!important}
}

/* ---------- responsive ------------------------------------------------------------------------------ */

@media (max-width:1199px){
  .nav__links{display:none}
  .burger{display:grid}
}

@media (max-width:1080px){
  .stats__grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--linea);margin-top:clamp(22px,2.4vw,34px)}
  .foot__grid{grid-template-columns:1fr 1fr}
}

/* tableta y celular: héroe en historias, capítulos a sangre */
@media (max-width:899px){
  .hero__media{display:block}
  .hero__shot{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
  .hero__shot.is-on{opacity:1}
  .hero__shot.is-on img{animation:kb 7s ease-out both}
  .hero__shade{
    background:
      linear-gradient(180deg, rgba(2,28,21,.62) 0%, rgba(2,28,21,0) 18%),
      linear-gradient(0deg, rgba(2,28,21,.97) 0%, rgba(2,28,21,.84) 32%, rgba(2,28,21,0) 60%);
  }
  .hero__words{display:block;padding-inline:var(--gut);font-size:min(23vw,9.4vh);font-size:min(23vw,9.4svh)}
  .hw{padding:0;color:transparent;-webkit-text-stroke:1.5px rgba(245,243,240,.82)}
  .hw.is-on{color:var(--lima);-webkit-text-stroke-color:var(--lima)}
  .hw::after{width:1.1em;height:4px;margin-top:.06em}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__btns{flex-wrap:nowrap}
  .hero__btns .btn--lima{flex:1}

  .head{grid-template-columns:1fr;gap:16px}
  .head .lead,.head__side{justify-self:start}

  .feat{padding:0 0 var(--sec)}
  .feat__grid{width:auto;display:block}
  .feat__media{position:relative;top:auto;width:100%;height:auto;min-height:0;aspect-ratio:4/5;max-height:84vh;max-height:84svh;border-radius:0}
  .feat__media::after{content:"";position:absolute;inset:auto 0 0;height:42%;z-index:0;pointer-events:none;background:linear-gradient(0deg, var(--bg), transparent)}
  .feat__body{position:relative;z-index:2;margin-top:-88px;padding-inline:var(--gut)}

  .steps__grid{grid-template-columns:1fr}
  .steps__ph{max-width:560px}

  .memb{grid-template-columns:1fr}
  .memb__ph{min-height:0;aspect-ratio:16/11}

  .says__grid{grid-template-columns:1fr}
  .faq__grid{grid-template-columns:1fr}
  .faq__side{position:static}

  .contact__grid{grid-template-columns:1fr}
  .contact__bg::after{background:linear-gradient(180deg, rgba(2,28,21,.9) 0%, rgba(2,28,21,.8) 50%, rgba(2,28,21,.92) 100%)}

  .rates{grid-template-columns:1fr 1fr}
}
@keyframes kb{from{transform:scale(1.1)}to{transform:none}}

/* celular */
@media (max-width:759px){
  .nav__bar{height:64px}
  .nav__logo img{height:28px}
  .btn--nav{display:none}

  /* en el celular la cara del jugador queda a media altura: arriba solo foto */
  .hero__kicker,.hero__text p{display:none}
  .hero__words{font-size:min(21vw,10.5vh);font-size:min(21vw,10.5svh)}
  .hero__btns .btn--line{width:52px;padding:0 5px;gap:0;font-size:0;justify-content:center}

  .facts__row{grid-template-columns:1fr 1fr}
  .facts__row>div{padding:16px 0 18px 16px}
  .facts__row>div:nth-child(odd){border-left:0;padding-left:0}
  .facts__row>div:nth-child(-n+2){border-bottom:1px solid var(--linea)}
  .facts dd{font-size:14px}

  .club__row{grid-template-columns:1fr}
  .idx{justify-content:flex-start}
  .idx a{height:38px;padding:0 14px;font-size:13px}
  .trio{
    width:auto;margin-inline:0;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;
  }
  .trio::-webkit-scrollbar{display:none}
  .trio::after{content:"";flex:0 0 1px}
  .trio .ph{flex:0 0 78%;scroll-snap-align:start}
  .trio .ph:nth-child(2){margin-top:0}

  .stats__grid{grid-template-columns:1fr}
  .stat,.stat:first-child,.stat:nth-child(3){display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;align-items:start;padding:22px 0;border-left:0;margin-top:0}
  .stat+.stat{border-top:1px solid var(--linea)}
  .stat dt b{font-size:60px}
  .stat dt small{font-size:24px}
  .stat dd{margin:0;font-size:14px}

  .specs{grid-template-columns:1fr}

  .rate{padding:16px}
  .rate__n{margin-bottom:12px!important}
  .rate__n b{font-size:48px}
  .rate__n em{margin-left:0}
  .rate__price{font-size:30px}
  .rate__per{font-size:13px}
  .btn--full{height:46px;font-size:14px}
  .checks{grid-template-columns:1fr}

  .game{aspect-ratio:3/4}

  .slide{flex-basis:74%}
  .gallery__ctrl{gap:16px}
  .round{width:44px;height:44px}

  .info>div{grid-template-columns:1fr;gap:4px}

  .foot__grid{gap:28px 18px;grid-auto-flow:row dense}
  .foot__brand,.foot__grid>div:nth-child(3){grid-column:1/-1}
  .foot{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}

  .dock{display:flex}
}

@media (max-width:759px) and (max-height:700px){
  .hero__words{font-size:min(19vw,9.4vh);font-size:min(19vw,9.4svh)}
  .hero__text h2{font-size:16px}
}

@media print{.nav,.dock,.menu,#intro,.ticker{display:none}}