/* =========================================================
   Náyade Natación — demo
   Concepto: la alberca de competencia. Carriles numerados, cuerdas
   de carril rojo/blanco/azul, tablero de tiempos. Tipografía condensada
   en mayúsculas (cartel de torneo) + texto de lectura amplio.
========================================================= */
:root{
  --navy: #06263A;        /* fondo profundo */
  --navy-deep: #031823;
  --teal: #0A5A7A;
  --aqua: #19B8E6;        /* agua de alberca */
  --aqua-light: #A5E6F8;
  --sand: #E4412E;        /* rojo cuerda de carril (acento) */
  --sand-dark: #C23220;
  --cream: #F2F7F9;
  --white: #FFFFFF;
  --ink: #0A1F2B;
  --muted: #58707C;
  --line: #D6E8EE;
  --shadow: 0 18px 40px rgba(3, 24, 35, 0.14);
  --radius: 14px;
  --font-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --wa: #25D366;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{ font-family: var(--font-body); color: var(--ink); background: var(--cream); line-height:1.6; overflow-x:hidden; }
img, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1240px; margin:0 auto; padding:0 24px; }
section{ padding:110px 0; }
h1,h2,h3,h4{ font-family: var(--font-head); font-weight:800; text-transform:uppercase; line-height:.95; letter-spacing:.005em; color: var(--navy); text-wrap:balance; }
.kicker{ font-family: var(--font-head); font-weight:700; font-size:.95rem; letter-spacing:.18em; text-transform:uppercase; color: var(--sand); display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.kicker::before{ content:''; width:28px; height:2px; background: currentColor; }
.eyebrow{ font-family: var(--font-head); font-weight:700; font-size:.9rem; letter-spacing:.18em; text-transform:uppercase; color: var(--sand); display:inline-block; margin-bottom:14px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family: var(--font-head); font-weight:700; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; padding:14px 28px; border-radius:6px; border:none; cursor:pointer; transition: transform .2s ease, background .2s ease, color .2s ease; }
.btn-primary{ background: var(--sand); color:#fff; }
.btn-primary:hover{ background: var(--sand-dark); transform: translateY(-2px); }
.btn-outline{ background: transparent; color:#fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.btn-outline:hover{ background:#fff; color: var(--navy); }
.btn-dark{ background: var(--navy); color:#fff; }
.btn-dark:hover{ background: var(--teal); transform: translateY(-2px); }
.btn:focus-visible, .tab-btn:focus-visible, .quiz-opt:focus-visible{ outline:3px solid var(--aqua); outline-offset:3px; }

/* ---------- Header ---------- */
header{ position:fixed; top:0; left:0; right:0; z-index:100; padding:20px 0; transition: background .3s, padding .3s; }
header.scrolled{ background: rgba(3,24,35,.94); backdrop-filter: blur(8px); padding:12px 0; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ font-family: var(--font-head); font-weight:800; font-size:1.7rem; letter-spacing:.06em; color:#fff; display:flex; align-items:center; gap:10px; }
.logo .drop{ width:24px; height:24px; }
.nav-links{ display:flex; gap:30px; }
.nav-links a{ font-family: var(--font-head); font-weight:600; font-size:1.02rem; letter-spacing:.1em; text-transform:uppercase; color: rgba(255,255,255,.85); }
.nav-links a:hover{ color:#fff; }

/* ---------- Hero con video ---------- */
.hero{ position:relative; min-height: 94vh; display:flex; align-items:flex-end; overflow:hidden; background: var(--navy-deep); padding:0; }
.hero-video-slot{ position:absolute; inset:0; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(3,24,35,.88) 0%, rgba(3,24,35,.55) 45%, rgba(3,24,35,.05) 80%), linear-gradient(0deg, rgba(3,24,35,.7), transparent 45%); }
.hero-content{ position:relative; z-index:2; width:100%; padding-bottom:70px; padding-top:140px; }
.hero h1{ color:#fff; font-size: clamp(3.4rem, 9vw, 8.2rem); line-height:.86; margin-bottom:26px; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:block; transform: translateY(105%); animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards; }
.hero h1 .line:nth-child(2) > span{ animation-delay:.12s; color: var(--aqua-light); }
.hero h1 .line:nth-child(3) > span{ animation-delay:.24s; -webkit-text-stroke: 2px #fff; color: transparent; }
@keyframes rise{ to{ transform:none; } }
.hero-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.hero p.lead{ color: rgba(255,255,255,.88); font-size:1.12rem; max-width:470px; margin-bottom:28px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-board{ display:grid; grid-template-columns: repeat(3, auto); gap:0; background: rgba(3,24,35,.72); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.14); border-radius:10px; overflow:hidden; }
.hero-board div{ padding:14px 22px; border-right:1px solid rgba(255,255,255,.12); }
.hero-board div:last-child{ border-right:none; }
.hero-board b{ display:block; font-family: var(--font-head); font-size:2rem; font-weight:700; color:#fff; font-variant-numeric: tabular-nums; line-height:1; }
.hero-board span{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--aqua-light); }

/* ---------- Carriles 1-4: nadadores que cruzan con el scroll (demo GSAP .row / .square) ---------- */
.race{ background: var(--navy-deep); padding:100px 0 90px; }
.race-head{ margin-bottom:40px; }
.race-head h2{ color:#fff; font-size: clamp(2.6rem,5vw,4.2rem); }
.race-head .kicker{ color: var(--aqua-light); }
.race-lanes{ border-top:1px solid rgba(255,255,255,.12); }
.race-row{ display:grid; grid-template-columns: 90px 1fr 230px; gap:28px; align-items:center; padding:26px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.lane-tag{ font-family: var(--font-head); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.9rem; color: rgba(255,255,255,.55); }
.track{ position:relative; height:44px; }
.track::before{ content:''; position:absolute; left:0; right:24px; top:50%; height:4px; margin-top:-2px; background: rgba(255,255,255,.08); border-radius:2px; }
.track::after{ content:''; position:absolute; right:0; top:4px; bottom:4px; width:4px; background: rgba(255,255,255,.35); box-shadow: -10px 0 0 -0px transparent; }
.trail{ position:absolute; left:0; top:50%; height:4px; margin-top:-2px; width:calc(100% - 24px); background: linear-gradient(90deg, rgba(25,184,230,0), var(--aqua)); border-radius:2px; transform: scaleX(1); transform-origin:left; }
.square{ position:absolute; left:0; top:50%; width:40px; height:40px; margin-top:-20px; border-radius:10px; background: var(--aqua); box-shadow: 0 0 0 6px rgba(25,184,230,.18), 0 10px 24px rgba(0,0,0,.35); transform: translateX(var(--end, 0px)); }
#css-selector-id{ background: var(--sand); box-shadow: 0 0 0 6px rgba(228,65,46,.2), 0 10px 24px rgba(0,0,0,.35); }
.race-stat h3{ color:#fff; font-size: clamp(2.6rem,4.4vw,3.8rem); font-weight:700; font-variant-numeric: tabular-nums; line-height:1; }
.race-stat p{ color: rgba(255,255,255,.62); font-size:.9rem; margin-top:4px; }

/* ---------- Filas divididas con parallax (floridafast) ---------- */
.split{ padding:0; background: var(--white); }
.split-row{ display:grid; grid-template-columns: 1fr 1fr; min-height: 78vh; }
.split-row:nth-child(even) .split-media{ order:2; }
.split-media{ position:relative; overflow:hidden; background: var(--navy); }
.split-media img{ position:absolute; left:0; top:-15%; width:100%; height:130%; object-fit:cover; will-change: transform; }
.split-media .tagline{ position:absolute; left:28px; bottom:24px; z-index:2; font-family: var(--font-head); font-weight:800; font-size: clamp(4rem,9vw,8rem); color: rgba(255,255,255,.92); line-height:.8; mix-blend-mode: overlay; }
.split-text{ display:flex; flex-direction:column; justify-content:center; padding: 80px clamp(28px, 6vw, 96px); }
.split-text h2{ font-size: clamp(2.6rem, 5vw, 4.4rem); margin-bottom:22px; }
.split-text p{ color: var(--muted); font-size:1.08rem; max-width:480px; margin-bottom:28px; }
.split-text ul{ list-style:none; margin-bottom:30px; display:grid; gap:10px; }
.split-text li{ display:flex; gap:12px; align-items:baseline; font-weight:600; }
.split-text li::before{ content:''; width:18px; height:3px; flex-shrink:0; background: var(--aqua); transform: translateY(-4px); }

/* ---------- Carriles (programas editables) ---------- */
.lanes-sec{ background: var(--navy); color:#fff; }
.lanes-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:48px; flex-wrap:wrap; }
.lanes-head h2{ color:#fff; font-size: clamp(2.8rem, 6vw, 5.2rem); }
.lanes-head p{ color: rgba(255,255,255,.7); max-width:380px; }
.lanes{ border-top:1px solid rgba(255,255,255,.14); }
.lane{ position:relative; display:grid; grid-template-columns: 90px 1.3fr 1fr 150px 170px; gap:24px; align-items:center; padding:26px 20px; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.14); isolation:isolate; }
.lane::before{ content:''; position:absolute; inset:0; background: linear-gradient(90deg, var(--teal), var(--aqua)); transform: scaleX(0); transform-origin:left; transition: transform .6s cubic-bezier(.2,.8,.2,1); z-index:-1; }
.lane:hover::before{ transform: scaleX(1); }
.lane-num{ font-family: var(--font-head); font-weight:800; font-size:3.6rem; line-height:1; color: rgba(255,255,255,.22); font-variant-numeric: tabular-nums; transition: color .3s; }
.lane:hover .lane-num{ color:#fff; }
.lane-name h3{ color:#fff; font-size:1.9rem; }
.lane-name span{ font-family: var(--font-head); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.85rem; color: var(--aqua-light); }
.lane-desc{ color: rgba(255,255,255,.72); font-size:.93rem; }
.lane-price{ font-family: var(--font-head); font-weight:700; font-size:2rem; color:#fff; font-variant-numeric: tabular-nums; }
.lane-price small{ font-size:.9rem; font-weight:600; color: rgba(255,255,255,.6); }
.lane .btn{ justify-self:end; }
.lane:hover .btn-primary{ background:#fff; color: var(--navy); }

/* ---------- Quiz ---------- */
.quiz-sec{ background: var(--cream); }
.quiz{ display:grid; grid-template-columns: .9fr 1.1fr; gap:60px; align-items:start; }
.quiz-intro h2{ font-size: clamp(2.6rem, 5vw, 4.4rem); margin-bottom:18px; }
.quiz-intro p{ color: var(--muted); max-width:420px; }
.quiz-box{ background:#fff; border-radius: var(--radius); box-shadow: var(--shadow); padding:36px; min-height:360px; position:relative; overflow:hidden; }
.quiz-steps{ display:flex; gap:6px; margin-bottom:26px; }
.quiz-steps i{ flex:1; height:5px; border-radius:3px; background: var(--line); transition: background .3s; }
.quiz-steps i.on{ background: var(--aqua); }
.quiz-q{ font-family: var(--font-head); font-weight:700; text-transform:uppercase; font-size:1.9rem; color: var(--navy); margin-bottom:20px; line-height:1; }
.quiz-opts{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.quiz-opt{ text-align:left; background: var(--cream); border:2px solid transparent; border-radius:10px; padding:16px 18px; cursor:pointer; font-family: var(--font-body); font-size:.98rem; font-weight:700; color: var(--ink); transition: border-color .2s, background .2s, transform .2s; }
.quiz-opt small{ display:block; font-weight:500; color: var(--muted); font-size:.82rem; margin-top:2px; }
.quiz-opt:hover{ border-color: var(--aqua); background:#fff; transform: translateY(-2px); }
.quiz-panel{ animation: fadeIn .4s ease; }
@keyframes fadeIn{ from{ opacity:0; transform: translateX(18px);} to{ opacity:1; transform:none; } }
.quiz-result .lane-pill{ display:inline-block; font-family: var(--font-head); font-weight:700; letter-spacing:.12em; text-transform:uppercase; background: var(--navy); color:#fff; padding:6px 14px; border-radius:4px; font-size:.85rem; margin-bottom:14px; }
.quiz-result h3{ font-size:2.6rem; margin-bottom:10px; }
.quiz-result p{ color: var(--muted); margin-bottom:14px; }
.quiz-result .meta{ display:flex; gap:22px; margin-bottom:24px; flex-wrap:wrap; align-items:baseline; font-weight:700; }
.quiz-result .meta b{ font-family: var(--font-head); font-size:1.8rem; color: var(--sand); }
.quiz-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.link-btn{ background:none; border:none; font-family: var(--font-head); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--teal); cursor:pointer; font-size:1rem; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Tienda ---------- */
.shop-sec{ background: var(--white); }
.shop-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:44px; flex-wrap:wrap; }
.shop-head h2{ font-size: clamp(2.6rem,5vw,4.2rem); }
.shop-head p{ color: var(--muted); max-width:360px; }
.grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.card{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; background:#fff; transition: background .3s; }
.card:hover{ background: var(--cream); }
.card-media{ position:relative; aspect-ratio: 4/3; max-width:100%; margin:18px 18px 0; border-radius:10px; overflow:hidden; }
.card-media .ico{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.85); }
.card-media .ico svg{ width:34%; height:auto; }
.card-media .tag{ position:absolute; top:12px; left:12px; background:#fff; color: var(--navy); font-family: var(--font-head); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:4px; }
.card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-body h4{ font-size:1.6rem; }
.card-body p{ color: var(--muted); font-size:.92rem; flex:1; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.price{ font-family: var(--font-head); font-weight:700; font-size:1.9rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.price small{ font-size:.85rem; color: var(--muted); }
.card .btn{ padding:10px 18px; font-size:.9rem; }

/* ---------- Ruta de aprendizaje: celular ---------- */
.journey{ background: var(--navy-deep); padding:0; overflow:hidden; }
.journey-pin{ min-height:100vh; display:flex; align-items:center; padding:80px 0; }
.journey-inner{ display:grid; grid-template-columns: 1fr 360px; gap:64px; align-items:center; width:100%; }
.journey .kicker{ color: var(--aqua-light); }
.journey-slides{ position:relative; min-height:340px; }
.j-slide{ position:absolute; inset:0 auto auto 0; opacity:0; transform: translateY(24px); transition: opacity .45s ease, transform .45s ease; pointer-events:none; }
.j-slide.is-active{ opacity:1; transform:none; }
.j-num{ font-family: var(--font-head); font-weight:700; font-size:1rem; color: var(--sand); letter-spacing:.16em; text-transform:uppercase; }
.j-slide h2{ color:#fff; font-size: clamp(3rem,6vw,5.4rem); margin:6px 0 16px; }
.j-slide p{ color: rgba(255,255,255,.75); font-size:1.08rem; max-width:460px; }
.j-progress{ position:relative; height:3px; width:240px; background: rgba(255,255,255,.14); border-radius:3px; margin-top:28px; }
.j-progress-dot{ position:absolute; top:50%; left:0; width:12px; height:12px; margin-top:-6px; margin-left:-6px; border-radius:50%; background: var(--aqua); box-shadow: 0 0 0 5px rgba(25,184,230,.22); }
.phone{ position:relative; width:320px; height:650px; justify-self:center; border-radius:48px; background:#0a0f12; padding:12px; box-shadow: 0 40px 80px rgba(0,0,0,.5), inset 0 0 0 2px #2a3338; }
.phone-notch{ position:absolute; top:22px; left:50%; transform:translateX(-50%); width:96px; height:26px; border-radius:20px; background:#0a0f12; z-index:3; }
.phone-screen{ position:relative; width:100%; height:100%; border-radius:37px; overflow:hidden; background:#F2F8FA; }
.phone-feed{ padding:58px 16px 24px; display:flex; flex-direction:column; gap:10px; will-change: transform; }
.pf-top{ position:absolute; top:18px; left:26px; right:26px; display:flex; justify-content:space-between; font-size:.72rem; font-weight:700; color: var(--navy); z-index:2; }
.pf-card{ background:#fff; border-radius:16px; padding:14px; box-shadow: 0 4px 14px rgba(3,24,35,.06); font-size:.8rem; color: var(--ink); }
.pf-label{ font-family: var(--font-head); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#6C8792; margin-top:6px; }
.pf-student{ display:flex; gap:12px; align-items:center; background: var(--navy); color:#fff; }
.pf-student strong{ display:block; font-size:.92rem; }
.pf-student span{ font-size:.72rem; color: rgba(255,255,255,.7); }
.pf-avatar{ width:40px; height:40px; border-radius:50%; background: var(--aqua); color: var(--navy-deep); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:1.2rem; }
.pf-level{ display:flex; justify-content:space-between; font-size:.76rem; margin-top:8px; }
.pf-level:first-child{ margin-top:0; }
.pf-level b{ color: var(--teal); }
.pf-level.done b{ color:#1E9E6A; }
.pf-level.muted{ color:#9AB0B8; }
.pf-bar{ height:6px; background: var(--line); border-radius:6px; margin-top:6px; overflow:hidden; }
.pf-bar i{ display:block; height:100%; background: linear-gradient(90deg, var(--teal), var(--aqua)); border-radius:6px; }
.pf-checks div{ padding:6px 0 6px 24px; position:relative; color:#6C8792; border-bottom:1px solid var(--line); }
.pf-checks div:last-child{ border-bottom:none; }
.pf-checks div::before{ content:''; position:absolute; left:0; top:8px; width:14px; height:14px; border-radius:50%; border:1.5px solid #B9CDD3; }
.pf-checks div.ok{ color: var(--ink); }
.pf-checks div.ok::before{ background:#1E9E6A; border-color:#1E9E6A; }
.pf-cal{ display:grid; grid-template-columns: repeat(9,1fr); gap:6px; align-items:center; }
.pf-cal i{ height:18px; border-radius:5px; background: var(--line); }
.pf-cal i.y{ background: var(--aqua); }
.pf-cal i.n{ background:#F2C9C4; }
.pf-cal small{ grid-column: 1 / -1; color:#6C8792; font-size:.72rem; }
.pf-note{ font-style:italic; line-height:1.5; }
.pf-note span{ display:block; margin-top:6px; font-style:normal; font-size:.72rem; color:#6C8792; }
.pf-time strong{ display:block; font-family: var(--font-head); font-size:2rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.pf-time span{ color: var(--teal); font-size:.76rem; font-weight:600; }
.pf-values div{ padding:8px 0; border-bottom:1px solid var(--line); }
.pf-values div:last-child{ border-bottom:none; }
.pf-values b{ display:block; font-family: var(--font-head); text-transform:uppercase; letter-spacing:.06em; font-size:.95rem; color: var(--navy); }
.pf-values span{ color:#6C8792; font-size:.76rem; }
.pf-medals{ display:grid; grid-template-columns: repeat(3,1fr); text-align:center; gap:6px; }
.pf-medals i{ display:block; width:26px; height:26px; margin:0 auto 6px; border-radius:50%; }
.pf-medals i.g{ background: radial-gradient(circle at 35% 35%, #FFE58A, #D4A017); }
.pf-medals i.s{ background: radial-gradient(circle at 35% 35%, #F4F6F8, #A7B1B8); }
.pf-medals i.b{ background: radial-gradient(circle at 35% 35%, #F0B48A, #A8612F); }
.pf-medals b{ display:block; font-family: var(--font-head); font-size:1.6rem; color: var(--navy); line-height:1; font-variant-numeric: tabular-nums; }
.pf-medals span{ font-size:.68rem; color:#6C8792; text-transform:uppercase; letter-spacing:.08em; }
.pf-timeline div{ display:grid; grid-template-columns: 44px 1fr; gap:8px; padding:7px 0 7px 0; border-left:2px solid var(--aqua); padding-left:10px; position:relative; }
.pf-timeline div::before{ content:''; position:absolute; left:-6px; top:12px; width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid var(--aqua); }
.pf-timeline b{ font-family: var(--font-head); font-size:1rem; color: var(--sand); }
.pf-timeline span{ font-size:.76rem; }
.pf-next{ background: var(--sand); }
.pf-next span{ display:block; font-size:.7rem; color:#fff; opacity:.85; }
.pf-next strong{ font-size:.9rem; color:#fff; }

/* ---------- Testimonios ---------- */
.testimonials{ background: var(--cream); overflow:hidden; }
.section-head{ margin-bottom:50px; }
.section-head h2{ font-size: clamp(2.6rem,5vw,4.2rem); }
.depth-carousel{ position:relative; height:320px; max-width:760px; margin:0 auto; }
.depth-card{ position:absolute; top:50%; left:50%; width:540px; max-width:86vw; padding:34px 34px; border-radius:12px; background:#fff; box-shadow: var(--shadow); transition: transform .6s ease, opacity .6s ease, filter .6s ease; }
.depth-card .stars{ color: var(--sand); margin-bottom:12px; letter-spacing:2px; }
.depth-card p.quote{ font-size:1.05rem; margin-bottom:18px; }
.depth-card .who{ display:flex; align-items:center; gap:12px; }
.depth-card .avatar{ width:42px; height:42px; border-radius:50%; background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:1.2rem; }
.depth-card .who strong{ display:block; font-size:.92rem; }
.depth-card .who span{ font-size:.8rem; color: var(--muted); }
.carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:24px; }
.carousel-dots button{ width:9px; height:9px; border-radius:50%; border:none; background: var(--line); cursor:pointer; }
.carousel-dots button.active{ background: var(--sand); width:24px; border-radius:6px; transition: all .25s ease; }

/* ---------- CTA ---------- */
.cta-band{ position:relative; padding:130px 0; color:#fff; overflow:hidden; background: var(--navy); }
.cta-band > img{ position:absolute; left:0; top:-15%; width:100%; height:130%; object-fit:cover; opacity:.45; will-change: transform; }
.cta-band .container{ position:relative; z-index:2; }
.cta-band h2{ color:#fff; font-size: clamp(3rem,7vw,6rem); margin-bottom:18px; }
.cta-band p{ color: rgba(255,255,255,.88); max-width:500px; margin-bottom:30px; font-size:1.1rem; }

/* ---------- Ubicación ---------- */
.location{ background: var(--white); }
.location-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
.location h2{ font-size: clamp(2.6rem,5vw,4rem); margin-bottom:14px; }
.location-map{ height:380px; border-radius: var(--radius); background: linear-gradient(135deg, var(--line), #fff); display:flex; align-items:center; justify-content:center; color: var(--muted); text-align:center; padding:20px; }
.schedule-table{ width:100%; border-collapse:collapse; margin-top:20px; }
.schedule-table td{ padding:12px 0; border-bottom:1px solid var(--line); }
.schedule-table td:last-child{ text-align:right; font-family: var(--font-head); font-weight:700; font-size:1.2rem; color: var(--navy); font-variant-numeric: tabular-nums; }

/* ---------- Footer ---------- */
footer{ background: var(--navy-deep); color: rgba(255,255,255,.72); padding:72px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:44px; }
footer h5{ color:#fff; font-family: var(--font-head); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:1rem; margin-bottom:16px; }
footer a{ display:block; font-size:.9rem; margin-bottom:10px; color: rgba(255,255,255,.66); }
footer a:hover{ color: var(--aqua-light); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:22px; text-align:center; font-size:.82rem; color: rgba(255,255,255,.45); }

/* ---------- Admin ---------- */
.demo-banner{ background: var(--sand); color:#fff; text-align:center; font-size:.85rem; font-weight:700; padding:10px 16px; position:sticky; top:0; z-index:200; }
.tabs{ display:flex; justify-content:center; gap:10px; margin-bottom:44px; flex-wrap:wrap; }
.tab-btn{ font-family: var(--font-head); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:1rem; padding:10px 22px; border-radius:6px; border:1.5px solid var(--line); background:#fff; color: var(--muted); cursor:pointer; }
.tab-btn.active, .tab-btn:hover{ background: var(--navy); border-color: var(--navy); color:#fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .nav-links{ display:none; }
  .race-row{ grid-template-columns: 70px 1fr 170px; gap:18px; }
  .lane{ grid-template-columns: 60px 1fr auto; row-gap:10px; }
  .lane-num{ font-size:2.6rem; }
  .lane-desc{ grid-column: 2 / -1; }
  .lane-price{ grid-column: 2; font-size:1.6rem; }
  .lane .btn{ grid-column: 3; grid-row: 1; }
  .quiz{ grid-template-columns: 1fr; gap:36px; }
  .grid{ grid-template-columns: repeat(2,1fr); }
  .location-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
  .split-row{ grid-template-columns:1fr; min-height:0; }
  .split-row:nth-child(even) .split-media{ order:0; }
  .split-media{ height:340px; }
  /* Celular: la sección ocupa exactamente la pantalla y se queda fija mientras
     se recorre el contenido del teléfono (texto arriba, teléfono abajo). */
  .journey-pin{ height:100vh; height:100svh; min-height:0; padding:78px 0 18px; }
  .journey-inner{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); gap:12px; height:100%; }
  .journey .kicker{ margin-bottom:8px; }
  .journey-slides{ min-height:178px; }
  .j-slide h2{ font-size:2.1rem; margin:2px 0 6px; }
  .j-slide p{ font-size:.92rem; line-height:1.5; }
  .j-progress{ margin-top:0; position:absolute; left:24px; right:24px; bottom:-6px; width:auto; }
  .journey-text{ position:relative; }
  .phone{ height:100%; max-height:560px; width:auto; aspect-ratio: 320 / 650; border-radius:40px; padding:10px; min-height:0; }
  .phone-screen{ border-radius:31px; }
  .phone-notch{ top:18px; width:80px; height:22px; }
}
@media (max-width: 620px){
  section{ padding:80px 0; }
  .hero-board{ grid-template-columns: repeat(3,1fr); width:100%; }
  .hero-board div{ padding:12px 14px; }
  .hero-board b{ font-size:1.5rem; }
  .race-row{ grid-template-columns: 1fr auto; row-gap:12px; padding:22px 0; }
  .race-row .track{ grid-column: 1 / -1; grid-row: 2; }
  .race-stat{ text-align:right; }
  .race-stat h3{ font-size:2.2rem; }
  .square{ width:32px; height:32px; margin-top:-16px; }
  .quiz-box{ padding:24px; }
  .quiz-opts{ grid-template-columns:1fr; }
  /* Tienda: 2 columnas compactas en vez de una tarjeta por pantalla */
  .grid{ grid-template-columns: repeat(2,1fr); }
  .card-media{ margin:10px 10px 0; aspect-ratio: 1 / 1; border-radius:8px; }
  .card-media .tag{ top:8px; left:8px; font-size:.62rem; letter-spacing:.08em; padding:3px 7px; }
  .card-media .ico svg{ width:44%; }
  .card-body{ padding:12px 12px 14px; gap:6px; }
  .card-body h4{ font-size:1.05rem; line-height:1.1; }
  .card-body p{ font-size:.78rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
  .card-foot{ flex-direction:column; align-items:stretch; gap:8px; margin-top:4px; }
  .card-foot .price{ font-size:1.35rem; }
  .card .btn{ width:100%; justify-content:center; padding:10px 8px; font-size:.78rem; letter-spacing:.06em; }
  .shop-head{ margin-bottom:28px; gap:12px; }
  .hero{ min-height:100svh; }
  .hero-overlay{ background: linear-gradient(0deg, rgba(3,24,35,.92) 0%, rgba(3,24,35,.7) 55%, rgba(3,24,35,.35) 100%); }
  .hero-content{ padding-top:110px; padding-bottom:36px; }
  .lane{ grid-template-columns: 48px 1fr; padding:22px 8px; }
  .lane-desc, .lane-price{ grid-column: 2; }
  .lane .btn{ grid-column: 2; grid-row: auto; justify-self:start; padding:10px 18px; font-size:.9rem; }
  .lane-name h3{ font-size:1.6rem; }
  .nav-inner > .btn{ padding:8px 14px !important; font-size:.85rem !important; white-space:nowrap; }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero h1 .line > span{ animation:none; transform:none; }
  .journey-pin{ height:auto; }
  .journey-inner{ height:auto; }
  .journey-slides{ min-height:0; display:flex; flex-direction:column; gap:28px; }
  .j-slide{ position:static; opacity:1; transform:none; }
  .j-progress{ display:none; }
  .phone{ height:560px; }
}

/* ---------- WhatsApp ---------- */
.btn-wa{ background: var(--wa); color:#fff; }
.btn-wa:hover{ background:#1DA851; transform: translateY(-2px); }
.btn-wa svg{ width:20px; height:20px; }
.wa-float{ position:fixed; right:22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index:150; width:60px; height:60px; border-radius:50%; background: var(--wa); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 28px rgba(0,0,0,.28); transition: transform .2s; }
.wa-float:hover{ transform: scale(1.08); }
.wa-float svg{ width:32px; height:32px; }
.wa-float::after{ content:''; position:absolute; inset:0; border-radius:50%; box-shadow: 0 0 0 0 rgba(37,211,102,.6); animation: waPulse 2.4s infinite; }
@keyframes waPulse{ 70%{ box-shadow: 0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* ---------- Carrito ---------- */
.nav-actions{ display:flex; align-items:center; gap:14px; }
.cart-btn{ position:relative; width:44px; height:44px; border-radius:50%; border:none; background: rgba(255,255,255,.12); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: background .2s; }
.cart-btn:hover{ background: rgba(255,255,255,.22); }
.cart-btn svg{ width:22px; height:22px; }
.cart-count{ position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background: var(--sand); color:#fff; font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; font-variant-numeric: tabular-nums; }
.cart-count[hidden]{ display:none; }
.cart-count.bump{ animation: bump .4s ease; }
@keyframes bump{ 50%{ transform: scale(1.35);} }
.cart-overlay{ position:fixed; inset:0; background: rgba(3,24,35,.5); z-index:300; opacity:0; pointer-events:none; transition: opacity .3s; }
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{ position:fixed; top:0; right:0; bottom:0; width: min(420px, 100%); background:#fff; z-index:301; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.cart-drawer.open{ transform:none; }
.cart-head{ display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid var(--line); }
.cart-head h3{ font-size:1.8rem; }
.cart-close{ background:none; border:none; font-size:1.6rem; cursor:pointer; color: var(--muted); width:40px; height:40px; }
.cart-items{ flex:1; overflow-y:auto; padding:8px 24px; }
.cart-empty{ text-align:center; color: var(--muted); padding:60px 10px; }
.cart-item{ display:grid; grid-template-columns: 64px 1fr auto; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-thumb{ width:64px; height:64px; border-radius:10px; display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.85); overflow:hidden; }
.cart-thumb svg{ width:55%; }
.cart-item strong{ display:block; font-size:.95rem; line-height:1.3; }
.cart-item .unit{ font-size:.8rem; color: var(--muted); }
.qty{ display:inline-flex; align-items:center; gap:0; margin-top:8px; border:1.5px solid var(--line); border-radius:8px; overflow:hidden; }
.qty button{ width:30px; height:30px; border:none; background:#fff; cursor:pointer; font-size:1rem; color: var(--navy); }
.qty button:hover{ background: var(--cream); }
.qty span{ min-width:28px; text-align:center; font-weight:700; font-size:.9rem; font-variant-numeric: tabular-nums; }
.cart-line{ text-align:right; font-family: var(--font-head); font-weight:700; font-size:1.3rem; font-variant-numeric: tabular-nums; }
.cart-remove{ display:block; background:none; border:none; color: var(--muted); font-size:.78rem; cursor:pointer; margin-top:6px; text-decoration:underline; margin-left:auto; }
.cart-foot{ padding:20px 24px 24px; border-top:1px solid var(--line); background: var(--cream); }
.cart-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.cart-total span{ font-weight:700; }
.cart-total b{ font-family: var(--font-head); font-size:2.2rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.cart-note{ font-size:.8rem; color: var(--muted); margin-bottom:16px; }
.cart-foot .btn{ width:100%; }
.shop-toast{ position:fixed; left:50%; bottom:28px; transform: translate(-50%, 20px); background: var(--navy); color:#fff; padding:12px 20px; border-radius:8px; font-weight:600; font-size:.92rem; z-index:320; opacity:0; transition: all .3s; display:flex; gap:14px; align-items:center; }
.shop-toast.show{ opacity:1; transform: translate(-50%, 0); }
.shop-toast button{ background:none; border:none; color: var(--aqua-light); font-weight:800; cursor:pointer; font-family: var(--font-head); letter-spacing:.08em; text-transform:uppercase; font-size:.95rem; }
.card .btn.added{ background: #1E9E6A; }
@media (max-width:620px){ .nav-actions .btn{ display:none; } .wa-float{ width:54px; height:54px; right:16px; } }