/* Fuentes alojadas en el sitio (antes Google Fonts): sin servidores externos que
   bloqueen la carga. Son variables: un archivo cubre todos los grosores. */
@font-face{
  font-family:'Baloo 2'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/baloo2-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito Sans'; font-style:normal; font-weight:200 1000; font-display:swap;
  src:url('../fonts/nunitosans-latin.woff2') format('woff2');
}

:root{
  --black:#111111;
  --black-soft:#1b1b1b;
  --white:#ffffff;
  --orange:#ff6a12;
  --orange-dark:#e0570a;
  --gray:#6c6c6c;
  --gray-light:#f5f5f5;
  --line:#e4e4e4;
  --maxw:1240px;
  --ff-head:'Baloo 2', system-ui, sans-serif;
  --ff-body:'Nunito Sans', system-ui, sans-serif;
  --ease-out-power2: cubic-bezier(.25,.46,.45,.94);
  --ease-out-power3: cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--ff-body); color:var(--black); background:var(--white); line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
[hidden]{ display:none !important; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
h1,h2,h3{ font-family:var(--ff-head); font-weight:800; letter-spacing:.01em; line-height:1.08; }

/* Foco visible y consistente al navegar con teclado (Tab) */
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
/* Al ir a una sección con un link #ancla, el título no queda tapado por el header fijo */
section[id]{ scroll-margin-top:var(--header-h, 67px); }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section{ padding:96px 0; }
.section-sm{ padding:48px 0; }
.center-heading{ text-align:center; font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:52px; }
.center-heading--light{ color:var(--white); }

/* ============ SCROLL ANIMATIONS ============ */
[data-anim]{ opacity:0; transition:opacity .8s var(--ease-out-power3), transform .8s var(--ease-out-power3); }
[data-anim="up"]{ transform:translateY(38px); }
[data-anim="in"]{ transform:none; }
[data-anim="left"]{ transform:translateX(-52px); }
[data-anim="right"]{ transform:translateX(52px); }
[data-anim="scale"]{ transform:scale(.93); }
[data-anim].in{ opacity:1; transform:none; }

.stagger > [data-anim]:nth-child(1){ transition-delay:0s; }
.stagger > [data-anim]:nth-child(2){ transition-delay:.09s; }
.stagger > [data-anim]:nth-child(3){ transition-delay:.18s; }
.stagger > [data-anim]:nth-child(4){ transition-delay:.27s; }
.stagger > [data-anim]:nth-child(5){ transition-delay:.36s; }
.stagger > [data-anim]:nth-child(6){ transition-delay:.45s; }
.d1{ transition-delay:.12s; }
.d2{ transition-delay:.2s; }
.d3{ transition-delay:.3s; }

@media (prefers-reduced-motion: reduce){
  [data-anim]{ opacity:1 !important; transform:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* buttons: pill shape */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 32px; border:1.5px solid var(--black); border-radius:999px;
  font-family:var(--ff-head); font-weight:700; font-size:.9rem;
  transition:transform .4s var(--ease-out-power2), box-shadow .4s var(--ease-out-power2), background .3s ease, color .3s ease, border-color .3s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 14px 26px -14px rgba(0,0,0,.4); }
.btn:active{ transform:translateY(-1px) scale(1.01); }
.btn-fill-orange{ background:var(--orange); color:var(--white); border-color:var(--orange); }
.btn-fill-orange:hover{ background:var(--orange-dark); border-color:var(--orange-dark); }
.btn-outline-dark{ background:transparent; color:var(--black); border-color:var(--black); }
.btn-outline-dark:hover{ background:var(--black); color:var(--white); }
.btn-sm{ padding:9px 20px; font-size:.82rem; }
.btn-block{ width:100%; }

.tag-orange{ color:var(--orange); font-family:var(--ff-head); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }

/* photo blocks: real images, inner layer scales on hover without affecting layout */
.ph{
  position:relative; overflow:hidden; background:var(--black-soft);
}
.ph::before{
  content:''; position:absolute; inset:-2%;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .6s ease, transform .8s var(--ease-out-power2);
}
.ph:hover::before{ transform:scale(1.08); }
/* Carga diferida: la foto se pide recién cuando el bloque está por entrar en
   pantalla (main.js le agrega .bg-in). Antes de eso no tiene imagen de fondo. */
.ph:not(.bg-in)::before{ background-image:none; }
.ph.bg-in::before{ opacity:1; }
.hero-ph-inner{
  position:absolute; inset:-12%; width:124%; height:124%;
  background-size:cover; background-position:center; will-change:transform;
}
.hero-ph-inner.bg-1{ background-image:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55)), url('../assets/img/hero-1-v2.jpg'); }
.hero-ph-inner.bg-2{ background-image:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55)), url('../assets/img/hero-2-v2.jpg'); }
.hero-ph-inner.bg-3{ background-image:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55)), url('../assets/img/hero-3-v2.jpg'); }
.ph-funcional::before{ background-image:linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.5)), url('../assets/img/clase-funcional-v2.jpg'); }
.ph-cross::before{ background-image:linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.5)), url('../assets/img/clase-cross-v2.jpg'); }
.ph-boxeo::before{ background-image:linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.5)), url('../assets/img/clase-boxeo.jpg'); }
.ph-running::before{ background-image:linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.5)), url('../assets/img/clase-running.jpg'); }
.ph-sede-palermo::before{ background-image:url('../assets/img/sede-palermo-v2.jpg'); }
.ph-sede-belgrano::before{ background-image:url('../assets/img/sede-belgrano.jpg'); }
.ph-sede-caballito::before{ background-image:url('../assets/img/sede-caballito.jpg'); }
.ph-sede-san-isidro::before{ background-image:url('../assets/img/sede-san-isidro-v2.jpg'); }
.ph-sede-pilar::before{ background-image:url('../assets/img/sede-pilar.jpg'); }
.ph-sede-cordoba::before{ background-image:url('../assets/img/sede-cordoba.jpg'); }
.ph-sede-rosario::before{ background-image:url('../assets/img/sede-rosario.jpg'); }
.ph-sede-neuquen::before{ background-image:url('../assets/img/sede-neuquen.jpg'); }

/* ============ HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:1000; background:var(--white);
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(-16px);
  transition:opacity .7s var(--ease-out-power3), transform .7s var(--ease-out-power3), box-shadow .35s var(--ease-out-power2);
}
/* transform:none (no translateY(0)) para que el menú lateral, que es position:fixed,
   se ubique respecto de la ventana y no del header */
.site-header.loaded{ opacity:1; transform:none; }
.site-header.scrolled{ box-shadow:0 8px 24px rgba(0,0,0,.08); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:var(--maxw); margin:0 auto; gap:20px; }
.brand{ display:flex; align-items:flex-end; gap:3px; }
.brand-word{ font-family:var(--ff-head); font-weight:800; font-size:1.4rem; line-height:1; text-transform:uppercase; letter-spacing:.02em; }
.brand-dot{ width:8px; height:8px; border-radius:50%; background:var(--orange); margin-bottom:4px; }
/* menú lateral que se abre con el botón hamburguesa */
.main-nav{
  position:fixed; top:0; right:0; z-index:1100;
  width:min(360px, 100%); height:100vh; height:100dvh;
  display:flex; flex-direction:column; gap:6px; padding:100px 36px 40px; overflow-y:auto;
  background:var(--white); box-shadow:-20px 0 50px -20px rgba(0,0,0,.3);
  transform:translateX(100%); visibility:hidden;
  transition:transform .45s var(--ease-out-power3), visibility 0s linear .45s;
}
.main-nav.mobile-open{ transform:none; visibility:visible; transition:transform .45s var(--ease-out-power3); }
.main-nav a{ font-family:var(--ff-head); font-size:1.4rem; font-weight:700; color:var(--black); padding:14px 0; border-bottom:1px solid var(--line); transition:color .25s ease, padding-left .3s var(--ease-out-power2); }
.main-nav a:hover{ color:var(--orange); padding-left:8px; }
.nav-backdrop{
  position:fixed; inset:0; z-index:1050; background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s;
}
.nav-backdrop.show{ opacity:1; visibility:visible; transition:opacity .35s ease; }
.header-actions{ display:flex; align-items:center; gap:14px; }

.menu-toggle{ display:flex; border:none; background:transparent; position:relative; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; z-index:1200; }
.menu-toggle span{ display:block; width:100%; height:2px; background:var(--black); border-radius:2px; transition:transform .3s, opacity .3s; }
.menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============ HERO TRIPTYCH (GSAP ScrollTrigger pin) ============ */
.hero{ position:relative; }
.hero-split{
  display:flex; position:relative; overflow:hidden; background:var(--black);
  height:calc(100vh - var(--header-h, 67px)); height:calc(100svh - var(--header-h, 67px));
  /* must always fill the viewport below the sticky header: GSAP pins the hero as
  position:fixed right under the header at this height, so anything shorter leaves the
  page's white background exposed below it while pinned. svh avoids mobile address-bar
  resize gaps. --header-h is set from JS. */
}
.hero-col{
  flex:1; position:relative; overflow:hidden; will-change:transform; z-index:1;
  margin-right:-1px; /* overlap neighbours by a hair to hide the subpixel/compositor seam
  that appears between transformed flex items with photographic backgrounds */
}
.hero-col:last-child{ margin-right:0; }
/* darkening lives inside each panel (under its word), so it moves with the photo */
.hero-col::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.7) 100%); }
.hero-word{
  position:absolute; left:0; right:0; bottom:11%; z-index:2; padding:0 16px;
  display:flex; flex-direction:column; align-items:center; text-align:center; color:var(--white);
}
.hw-big{
  font-family:var(--ff-head); font-weight:800; text-transform:uppercase; line-height:1;
  font-size:clamp(1.4rem, 5.6vw, 5.4rem); letter-spacing:.01em; text-shadow:0 4px 24px rgba(0,0,0,.35);
}
.hw-big::after{ content:''; display:block; width:48px; height:4px; margin:16px auto 14px; border-radius:2px; background:var(--orange); }
.hw-small{ font-size:clamp(.72rem, 1.2vw, 1rem); font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.9; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero-reveal{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.hero-reveal h2{
  font-family:var(--ff-head); font-weight:800; color:var(--white);
  font-size:clamp(2.6rem, 13vw, 9.5rem); letter-spacing:.03em; line-height:1;
  text-align:center; margin:0; white-space:nowrap;
}

/* ============ INTRO ============ */
.intro-inner{ max-width:680px; margin:0 auto; text-align:center; }
.intro-title{ font-size:clamp(1.8rem,3.6vw,2.4rem); margin:10px 0 18px; }
.intro-inner p{ color:#333; font-size:1.05rem; }

.stats-row{ display:flex; justify-content:center; gap:56px; margin-top:64px; flex-wrap:wrap; text-align:center; }
.stat{ display:flex; flex-direction:column; align-items:center; }
.stat-figure{ display:flex; align-items:flex-end; }
.stat-num{ font-family:var(--ff-head); font-weight:800; font-size:2.4rem; color:var(--black); }
.stat-plus{ font-family:var(--ff-head); font-weight:800; font-size:2.4rem; color:var(--orange); margin-left:2px; }
.stat-label{ display:block; font-size:.82rem; color:var(--gray); margin-top:4px; }

/* ============ CINTA ============ */
.marquee{ background:var(--orange); color:var(--white); overflow:hidden; padding:16px 0; position:relative; z-index:1; }
.marquee-track{ display:flex; align-items:center; gap:28px; width:max-content; animation:marquee 28s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee span{ font-family:var(--ff-head); font-weight:800; font-size:clamp(1.3rem, 2.6vw, 2rem); text-transform:uppercase; letter-spacing:.02em; line-height:1; white-space:nowrap; }
.marquee i{ font-style:normal; font-size:1.1rem; color:var(--black); }
/* el contenido está duplicado: al mover -50% vuelve a empezar sin salto */
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 14px)); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ============ CHIPS (filtros) ============ */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-row--center{ justify-content:center; margin:-28px 0 36px; }
.chip{
  border:1.5px solid var(--line); background:var(--white); color:var(--black); border-radius:999px;
  padding:7px 16px; font-size:.85rem; font-weight:700;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.chip:hover{ border-color:var(--black); }
.chip[aria-pressed="true"]{ background:var(--black); border-color:var(--black); color:var(--white); }

/* ============ HORARIOS ============ */
.schedule-box{ max-width:900px; margin:0 auto; }
.day-tabs{ display:flex; gap:6px; background:var(--gray-light); padding:6px; border-radius:999px; margin-bottom:18px; overflow-x:auto; scrollbar-width:none; }
.day-tabs::-webkit-scrollbar{ display:none; }
.day-tab{
  flex:1; border:none; background:transparent; border-radius:999px; padding:11px 10px;
  font-family:var(--ff-head); font-weight:700; font-size:.95rem; color:var(--gray); white-space:nowrap;
  transition:background .3s ease, color .3s ease;
}
.day-tab:hover{ color:var(--black); }
.day-tab[aria-pressed="true"]{ background:var(--orange); color:var(--white); }
.dt-short{ display:none; }
.schedule-box .chip-row{ margin-bottom:22px; }
.schedule-list{ border-top:1px solid var(--line); }
.schedule-row{
  display:grid; grid-template-columns:90px 1fr auto auto; align-items:center; gap:20px;
  padding:18px 6px; border-bottom:1px solid var(--line);
  animation:rowIn .5s var(--ease-out-power3) both; animation-delay:calc(var(--i) * 60ms);
  transition:background .25s ease;
}
.schedule-row:hover{ background:#fafafa; }
@keyframes rowIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .schedule-row{ animation:none; } }
.sr-time{ font-family:var(--ff-head); font-weight:800; font-size:1.5rem; line-height:1; }
.sr-info{ display:flex; flex-direction:column; min-width:0; }
.sr-class{ display:flex; align-items:center; gap:8px; font-size:1.02rem; }
.sr-class::before{ content:''; width:10px; height:10px; border-radius:50%; background:var(--orange); flex-shrink:0; }
.sr-class.c-cross::before{ background:var(--black); }
.sr-class.c-boxeo::before{ background:#d93025; }
.sr-class.c-running::before{ background:#1e88e5; }
.sr-meta{ font-size:.85rem; color:var(--gray); margin-left:18px; }
.sr-level{ font-size:.75rem; font-weight:700; color:var(--gray); background:var(--gray-light); padding:4px 10px; border-radius:999px; white-space:nowrap; }
.sr-book{
  font-family:var(--ff-head); font-weight:700; font-size:.9rem; color:var(--orange);
  border:1.5px solid var(--orange); border-radius:999px; padding:7px 18px; white-space:nowrap;
  transition:background .25s ease, color .25s ease;
}
.sr-book:hover{ background:var(--orange); color:var(--white); }
.schedule-empty{ padding:36px 0; text-align:center; color:var(--gray); }

/* ============ SEDES ============ */
/* auto-fill: 4 columnas en escritorio, 3 o 2 en tablet y 1 en celular, sin breakpoints fijos */
.sedes-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap:22px; }
.sede-card{
  display:flex; flex-direction:column; background:var(--white); border:1.5px solid var(--line); border-radius:16px; overflow:hidden;
  transition:opacity .8s var(--ease-out-power3), transform .45s var(--ease-out-power2), box-shadow .45s var(--ease-out-power2);
}
.sede-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -22px rgba(0,0,0,.25); }
.sede-photo{ aspect-ratio:4/3; }
.sede-body{ display:flex; flex-direction:column; flex:1; padding:20px 20px 22px; }
.sede-body h3{ font-size:1.35rem; margin:4px 0 8px; }
.sede-address{ font-size:.88rem; color:#333; }
.sede-hours{ font-size:.8rem; color:var(--gray); margin:4px 0 12px; }
.sede-extras{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.sede-extras li{ font-size:.72rem; font-weight:700; background:var(--gray-light); border-radius:999px; padding:3px 10px; }
.sede-link{ margin-top:auto; font-family:var(--ff-head); font-weight:700; color:var(--orange); align-self:flex-start; }
.sede-link span{ display:inline-block; transition:transform .3s var(--ease-out-power2); }
.sede-link:hover span{ transform:translateX(4px); }

/* ============ METHODS ============ */
.methods-band{ position:relative; padding:70px 0; background:var(--black); }
.methods-cards{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.method-card{ display:flex; flex-direction:column; transition:transform .45s var(--ease-out-power2); }
.method-card:hover{ transform:translateY(-8px); }
.method-photo{ aspect-ratio:3/4; margin-bottom:16px; border-radius:12px; transition:box-shadow .4s ease; }
.method-card:hover .method-photo{ box-shadow:0 18px 34px -16px rgba(0,0,0,.55); }
.method-card h3{ font-family:var(--ff-head); color:var(--orange); font-size:1.15rem; margin-bottom:8px; }
.method-card p{ color:rgba(255,255,255,.7); font-size:.85rem; }

/* scroll horizontal (solo escritorio, lo activa main.js) */
.methods-band.is-horizontal{
  overflow:hidden; min-height:calc(100vh - var(--header-h, 67px)); min-height:calc(100svh - var(--header-h, 67px));
  display:flex; flex-direction:column; justify-content:center; padding:48px 0;
}
.methods-band.is-horizontal .center-heading{ margin-bottom:36px; }
.methods-band.is-horizontal .methods-cards{
  display:flex; gap:28px; width:max-content; max-width:none; will-change:transform;
  /* los bordes quedan alineados con el contenido centrado del resto de la página */
  padding:0 max(28px, calc((100vw - var(--maxw)) / 2 + 28px));
}
/* el ancho también depende del alto de la pantalla: en notebooks bajas la tarjeta se
   achica para que la sección fija entre completa (foto 4/3 + texto + título ≈ 280px) */
.methods-band.is-horizontal .method-card{
  flex:0 0 auto;
  width:clamp(240px, min(31vw, calc((100vh - var(--header-h, 67px) - 280px) * 4 / 3)), 440px);
  width:clamp(240px, min(31vw, calc((100svh - var(--header-h, 67px) - 280px) * 4 / 3)), 440px);
}
.methods-band.is-horizontal .method-photo{ aspect-ratio:4/3; }

/* ============ CONTACT ============ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.contact-text h2{ font-size:clamp(1.9rem,4vw,2.6rem); margin:10px 0 18px; }
.contact-text p{ color:#444; font-size:1rem; }
.contact-card{
  background:var(--black); color:var(--white); padding:36px 32px; border-radius:16px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.45);
}
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:.72rem; color:rgba(255,255,255,.6); margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em; }
.field input, .field textarea, .field select{
  width:100%; background:transparent; border:none; border-bottom:1.5px solid rgba(255,255,255,.35);
  color:var(--white); padding:6px 2px; font-size:.9rem; transition:border-color .3s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--orange); }
.field textarea{ resize:none; min-height:44px; }
.form-msg{ display:none; font-size:.82rem; color:var(--orange); margin-bottom:14px; }
.form-msg.show{ display:block; }
.form-msg.is-error{ color:#ffb08a; }
/* campo trampa contra spam (Netlify Forms): invisible para las personas */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.btn:disabled{ opacity:.7; cursor:wait; transform:none; }

/* ============ MEMBRESÍAS ============ */
#memberships{ background:var(--gray-light); }
.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.plan-card{
  background:var(--white); border:1.5px solid var(--line); padding:34px 28px; border-radius:16px;
  transition:transform .45s var(--ease-out-power2), box-shadow .45s var(--ease-out-power2);
}
.plan-card:hover{ transform:translateY(-8px); box-shadow:0 22px 40px -20px rgba(0,0,0,.18); }
.plan-card--dark{ background:var(--black); color:var(--white); border:none; }
.plan-card--dark:hover{ box-shadow:0 22px 40px -20px rgba(0,0,0,.55); }
.plan-card h3{ font-size:1.4rem; margin:10px 0 14px; }
.plan-card--dark h3{ color:var(--white); }
.plan-card p{ font-size:.9rem; margin-bottom:22px; color:#555; }
.plan-card--dark p{ color:rgba(255,255,255,.7); }

/* ============ PÁGINA DE PLANES ============ */
.page-hero{ background:var(--black); color:var(--white); text-align:center; padding:80px 0 120px; }
.page-hero h1{ font-size:clamp(2rem,5vw,3.4rem); margin:10px 0 14px; }
.page-hero p{ color:rgba(255,255,255,.72); font-size:1.05rem; margin-bottom:32px; }
.billing-toggle{ display:inline-flex; background:rgba(255,255,255,.1); border-radius:999px; padding:5px; gap:4px; }
.billing-opt{
  border:none; background:transparent; color:var(--white); padding:10px 22px; border-radius:999px;
  font-family:var(--ff-head); font-weight:700; font-size:.9rem;
  transition:background .3s ease, color .3s ease;
}
.billing-opt.active{ background:var(--white); color:var(--black); }
.billing-save{ color:var(--orange); margin-left:4px; }

.pricing-section{ padding-top:0; background:var(--gray-light); }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:-70px; align-items:start; }
.price-card{
  position:relative; background:var(--white); border:1.5px solid var(--line); border-radius:16px; padding:36px 30px;
  display:flex; flex-direction:column;
  transition:opacity .8s var(--ease-out-power3), transform .45s var(--ease-out-power2), box-shadow .45s var(--ease-out-power2);
  scroll-margin-top:100px;
}
.price-card:hover{ transform:translateY(-8px); box-shadow:0 22px 40px -20px rgba(0,0,0,.18); }
.price-card.is-selected{ border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,106,18,.25); }
.price-card--featured{ border:2px solid var(--orange); box-shadow:0 22px 40px -22px rgba(255,106,18,.45); }
.price-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--orange); color:var(--white); font-family:var(--ff-head); font-weight:700; font-size:.75rem;
  padding:4px 14px; border-radius:999px; white-space:nowrap;
}
.price-card h2{ font-size:1.4rem; margin:8px 0 18px; }
.price{ display:flex; align-items:baseline; gap:4px; }
.price-amount{ font-family:var(--ff-head); font-weight:800; font-size:2.4rem; line-height:1; }
.price-period{ color:var(--gray); font-size:.95rem; }
.price-note{ color:var(--gray); font-size:.82rem; margin:6px 0 22px; min-height:1.3em; }
.price-features{ border-top:1px solid var(--line); padding-top:20px; margin-bottom:28px; display:flex; flex-direction:column; gap:10px; }
.price-features li{ position:relative; padding-left:26px; font-size:.92rem; color:#333; }
.price-features li::before{
  content:''; position:absolute; left:0; top:.3em; width:16px; height:16px; border-radius:50%;
  background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.pricing-footnote{ text-align:center; color:var(--gray); font-size:.82rem; margin-top:36px; }
.pricing-footnote a{ color:var(--black); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.pricing-footnote a:hover{ color:var(--orange); }

/* modal de pago */
body.modal-open{ overflow:hidden; }
.pay-modal{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:20px; }
.pay-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); opacity:0; transition:opacity .25s ease; }
.pay-dialog{
  position:relative; width:100%; max-width:480px; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow-y:auto;
  background:var(--white); border-radius:16px; padding:34px 30px 28px;
  opacity:0; transform:translateY(20px) scale(.97);
  transition:opacity .25s var(--ease-out-power3), transform .25s var(--ease-out-power3);
}
.pay-modal.open .pay-backdrop{ opacity:1; }
.pay-modal.open .pay-dialog{ opacity:1; transform:none; }
.pay-close{
  position:absolute; top:12px; right:14px; width:34px; height:34px; border:none; border-radius:50%;
  background:var(--gray-light); font-size:1.4rem; line-height:1;
}
.pay-dialog h3{ font-size:1.5rem; margin:6px 0 20px; }
.pay-summary{ margin-bottom:24px; }
.pay-summary div{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.pay-summary dt{ color:var(--gray); }
.pay-summary dd{ font-weight:700; }
.pay-summary .pay-total{ border-bottom:none; font-size:1.1rem; }
.pay-summary .pay-total dd{ color:var(--orange); font-family:var(--ff-head); font-size:1.4rem; }
.pay-summary s{ color:var(--gray); font-weight:400; font-size:.9rem; font-family:var(--ff-body); margin-right:6px; }
.pay-secure{ color:var(--gray); font-size:.78rem; margin-top:14px; text-align:center; }

.pay-methods{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.pay-method{
  position:relative; display:flex; align-items:center; gap:10px; padding:12px;
  border:1.5px solid var(--line); border-radius:12px; cursor:pointer;
  transition:border-color .25s ease, background .25s ease;
}
.pay-method:hover{ border-color:#c9c9c9; }
.pay-method input{ position:absolute; opacity:0; pointer-events:none; }
.pay-method:has(input:checked){ border-color:var(--orange); background:#fff5ee; }
.pay-method:has(input:focus-visible){ outline:2px solid var(--orange); outline-offset:2px; }
.pm-icon{
  flex-shrink:0; width:36px; height:36px; border-radius:10px; background:var(--gray-light);
  display:flex; align-items:center; justify-content:center; color:var(--black);
  transition:background .25s ease, color .25s ease;
}
.pay-method:has(input:checked) .pm-icon{ background:var(--orange); color:var(--white); }
.pm-icon svg{ width:18px; height:18px; }
.pm-text{ display:flex; flex-direction:column; line-height:1.25; }
.pm-text strong{ font-size:.88rem; }
.pm-text small{ font-size:.74rem; color:var(--gray); }
.pm-text .pm-discount{ color:var(--orange); font-weight:700; }

.pay-panel > p{ font-size:.9rem; color:#444; margin-bottom:16px; }
.bank-data{ background:var(--gray-light); border-radius:12px; padding:6px 14px; margin-bottom:18px; }
.bank-data div{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.86rem; }
.bank-data div:last-child{ border-bottom:none; }
.bank-data dt{ color:var(--gray); flex-shrink:0; }
.bank-data dd{ display:flex; align-items:center; gap:10px; font-weight:700; text-align:right; word-break:break-all; }
.copy-btn{
  flex-shrink:0; border:1px solid var(--line); background:var(--white); border-radius:999px;
  padding:6px 12px; min-height:28px; font-size:.72rem; font-weight:700; color:var(--black);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.copy-btn:hover{ border-color:var(--orange); }
.copy-btn.copied{ background:var(--orange); border-color:var(--orange); color:var(--white); }
.copy-helper{ position:fixed; top:0; left:0; opacity:0; pointer-events:none; }

/* formulario de tarjeta (demo) */
.card-preview{
  position:relative; overflow:hidden; aspect-ratio:1.586; max-width:320px; margin:0 auto 20px;
  border-radius:14px; padding:18px 20px; color:var(--white);
  background:linear-gradient(135deg, #2a2a2a 0%, #111 55%, #3a1a06 100%);
  box-shadow:0 18px 34px -16px rgba(0,0,0,.5);
  display:flex; flex-direction:column; justify-content:space-between;
}
.card-preview::after{
  content:''; position:absolute; width:220px; height:220px; border-radius:50%;
  right:-80px; top:-90px; background:radial-gradient(circle, rgba(255,106,18,.45), transparent 70%);
}
.cp-top{ display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; }
.cp-chip{ width:38px; height:28px; border-radius:6px; background:linear-gradient(135deg, #e9c46a, #b8892b); }
.cp-brand{ font-family:var(--ff-head); font-weight:800; font-size:1.05rem; font-style:italic; min-height:1.2em; }
.cp-number{ font-family:ui-monospace, 'Courier New', monospace; font-size:clamp(1rem, 4.6vw, 1.3rem); letter-spacing:.08em; position:relative; z-index:1; white-space:nowrap; }
.cp-bottom{ display:flex; justify-content:space-between; gap:12px; position:relative; z-index:1; }
.cp-bottom div{ display:flex; flex-direction:column; min-width:0; }
.cp-bottom small{ font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; opacity:.6; }
.cp-bottom span{ font-size:.82rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.card-form .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cf-field{ margin-bottom:14px; min-width:0; }
.cf-field label{ display:block; font-size:.74rem; font-weight:700; color:#555; margin-bottom:5px; }
.cf-field input, .cf-field select{
  width:100%; border:1.5px solid var(--line); border-radius:10px; padding:11px 12px;
  font-size:.92rem; color:var(--black); background:var(--white);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cf-field input:focus, .cf-field select:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,106,18,.15); }
.cf-field input.invalid{ border-color:#d93025; }
.cf-error{ color:#d93025; font-size:.82rem; margin:-4px 0 12px; }
#ccSubmit.loading{ opacity:.8; pointer-events:none; }
#ccSubmit.loading::before{
  content:''; width:14px; height:14px; margin-right:10px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:var(--white); animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.pay-success{ text-align:center; padding:10px 0 0; }
.ps-check{
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:#1e9e5a; color:var(--white);
  display:flex; align-items:center; justify-content:center; animation:pop .45s var(--ease-out-power3);
}
.ps-check svg{ width:30px; height:30px; }
.pay-success h4{ font-family:var(--ff-head); font-size:1.4rem; margin-bottom:8px; }
.pay-success p{ font-size:.9rem; color:#444; margin-bottom:6px; }
.pay-success small{ display:block; color:var(--gray); font-size:.76rem; margin-bottom:20px; }
@keyframes pop{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ============ TÉRMINOS Y CONDICIONES ============ */
.legal-back{ font-family:var(--ff-head); font-weight:700; font-size:.95rem; color:var(--black); transition:color .25s ease; }
.legal-back:hover{ color:var(--orange); }
.page-hero--legal{ padding-bottom:80px; }
.page-hero--legal p{ margin-bottom:0; }
.page-hero--legal .todo{ font-size:.95rem; }

.legal-layout{ display:grid; grid-template-columns:260px minmax(0, 1fr); gap:56px; align-items:start; }
.legal-toc{
  position:sticky; top:calc(var(--header-h, 67px) + 24px);
  background:var(--gray-light); border-radius:16px; padding:22px 20px;
}
.legal-toc-title{ display:block; font-family:var(--ff-head); font-weight:800; font-size:1.05rem; margin-bottom:10px; }
.legal-toc ol{ list-style:none; counter-reset:toc; display:flex; flex-direction:column; gap:2px; }
.legal-toc li{ counter-increment:toc; }
.legal-toc a{
  display:flex; gap:10px; padding:7px 10px; border-radius:10px; font-size:.86rem; line-height:1.35; color:#444;
  transition:background .25s ease, color .25s ease;
}
.legal-toc a::before{ content:counter(toc, decimal-leading-zero); font-family:var(--ff-head); font-weight:800; color:var(--gray); flex-shrink:0; }
.legal-toc a:hover{ background:var(--white); color:var(--black); }
.legal-toc a.active{ background:var(--white); color:var(--black); font-weight:700; box-shadow:0 6px 16px -10px rgba(0,0,0,.25); }
.legal-toc a.active::before{ color:var(--orange); }

.legal-content{ max-width:760px; }
.legal-notice{
  background:#fff5ee; border:1.5px dashed var(--orange); border-radius:14px; padding:18px 20px;
  font-size:.92rem; color:#5c2a0a; margin-bottom:44px;
}
.legal-block{ padding-bottom:40px; margin-bottom:40px; border-bottom:1px solid var(--line); scroll-margin-top:calc(var(--header-h, 67px) + 24px); }
.legal-block:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.legal-block h2{ display:flex; align-items:baseline; gap:14px; font-size:clamp(1.45rem, 3vw, 1.9rem); margin-bottom:18px; }
.legal-block h2 span{ font-size:.95rem; color:var(--orange); letter-spacing:.04em; }
.legal-block h3{ font-size:1.12rem; margin:24px 0 10px; }
.legal-block p{ color:#333; margin-bottom:14px; }
.legal-block ul:not(.legal-data){ display:flex; flex-direction:column; gap:10px; margin:0 0 14px; }
.legal-block ul:not(.legal-data) li{ position:relative; padding-left:22px; color:#333; }
.legal-block ul:not(.legal-data) li::before{ content:''; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--orange); }
.legal-block a{ color:var(--orange); font-weight:700; }
.legal-block a:hover{ text-decoration:underline; }
.legal-data{ border:1.5px solid var(--line); border-radius:14px; overflow:hidden; }
.legal-data li{ display:grid; grid-template-columns:170px 1fr; gap:14px; padding:12px 18px; border-bottom:1px solid var(--line); font-size:.94rem; }
.legal-data li:last-child{ border-bottom:none; }
.legal-data li span{ color:var(--gray); font-weight:700; }
.legal-quote{ border-left:3px solid var(--orange); background:var(--gray-light); padding:14px 18px; border-radius:0 12px 12px 0; font-size:.9rem; }
/* datos pendientes: bien visibles para no olvidarse de completarlos */
.todo{ background:#fff0e5; color:#b3470a; font-weight:700; border:1px dashed var(--orange); border-radius:6px; padding:1px 7px; font-size:.9em; }

/* ============ FOOTER ============ */
.footer{ background:var(--black); color:rgba(255,255,255,.72); }
/* padding-top/bottom (no el atajo "padding") para no pisar el margen lateral del .container */
.footer-main{ padding-top:70px; padding-bottom:50px; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:40px; }
.footer-brand .brand-word{ color:var(--white); }
.footer-brand{ display:flex; align-items:flex-end; gap:3px; margin-bottom:14px; }
.footer-col h2{ font-family:var(--ff-head); font-weight:700; line-height:1.3; color:var(--white); font-size:.95rem; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.85rem; color:rgba(255,255,255,.65); transition:color .2s ease; }
.footer-col a:hover{ color:var(--orange); }
.footer-col p{ font-size:.85rem; color:rgba(255,255,255,.65); margin-bottom:4px; }
.footer-bar{
  background:var(--orange); text-align:center; padding:14px 0; font-size:.8rem; color:#1a0a00; font-weight:700;
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px;
}
.footer-bar a{ text-decoration:underline; text-underline-offset:3px; }
.footer-bar a:hover{ color:var(--white); }

/* ============ FLOATING CHAT ============ */
.chat-float{
  position:fixed; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); right:24px; z-index:900;
  display:flex; align-items:center; gap:8px;
  background:var(--black); color:var(--white); padding:13px 20px 13px 16px; border-radius:999px;
  font-size:.85rem; font-weight:700; box-shadow:0 12px 26px -10px rgba(0,0,0,.5);
  opacity:0; transform:translateY(16px) scale(.92);
  transition:opacity .6s var(--ease-out-power3), transform .5s var(--ease-out-power2), background .3s ease;
}
.chat-float.loaded{ opacity:1; transform:translateY(0) scale(1); }
.chat-float.loaded:hover{ transform:translateY(-4px) scale(1.05); background:var(--orange); }
.chat-float svg{ width:18px; height:18px; }

/* ============ RESPONSIVE ============ */
/* Tablet (horizontal y vertical) */
@media (max-width:980px){
  .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .methods-cards{ grid-template-columns:repeat(2,1fr); }
  /* 3 planes no entran bien de a 2: una columna centrada */
  .plan-grid, .pricing-grid{ grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; }
  /* términos: el índice deja de estar fijo al costado y pasa arriba del texto, en 2 columnas */
  .legal-layout{ grid-template-columns:1fr; gap:36px; }
  .legal-toc{ position:static; }
  .legal-toc ol{ display:grid; grid-template-columns:1fr 1fr; gap:2px 10px; }
  .legal-content{ max-width:none; }
  .pricing-grid{ gap:36px; }
}

/* Celular */
@media (max-width:760px){
  .container{ padding:0 20px; }
  .header-inner{ padding:12px 20px; }
  .section{ padding:68px 0; }
  .center-heading{ margin-bottom:36px; }
  .chip-row--center{ margin:-16px 0 28px; }
  .header-cta{ display:none; }

  /* hero: en vertical los 3 paneles se apilan como franjas, cada una con su palabra
     grande a la izquierda (main.js anima las franjas hacia los costados) */
  .hero-split{ flex-direction:column; }
  .hero-col{ margin-right:0; margin-bottom:-1px; }
  .hero-col:last-child{ margin-bottom:0; }
  /* franjas con la misma proporción que las fotos (3:2): menos margen extra = menos zoom */
  .hero-ph-inner{ inset:-8%; width:116%; height:116%; }
  /* fotos más livianas en celular (800px); se precargan desde el <head> con media */
  .hero-ph-inner.bg-1{ background-image:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55)), url('../assets/img/hero-1-m-v2.jpg'); }
  .hero-ph-inner.bg-2{ background-image:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55)), url('../assets/img/hero-2-m-v2.jpg'); }
  .hero-ph-inner.bg-3{ background-image:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55)), url('../assets/img/hero-3-m-v2.jpg'); }
  .hero-col::after{ background:linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.1) 100%); }
  .hero-word{ top:0; bottom:0; left:0; right:auto; justify-content:center; align-items:flex-start; text-align:left; padding:0 24px; }
  .hw-big{ font-size:clamp(2.2rem, 12vw, 3.6rem); }
  .hw-big::after{ width:36px; height:3px; margin:10px 0 8px; }
  .hw-small{ font-size:.72rem; letter-spacing:.16em; }

  .marquee{ padding:12px 0; }
  .stats-row{ gap:32px; margin-top:44px; }
  .stat-num, .stat-plus{ font-size:1.9rem; }

  .methods-band{ padding:56px 0; }
  .methods-cards{ grid-template-columns:1fr; gap:32px; }
  .method-photo{ aspect-ratio:16/10; }

  .dt-long{ display:none; }
  .dt-short{ display:inline; }
  .day-tab{ padding:10px 8px; }
  .schedule-row{ grid-template-columns:64px 1fr auto; gap:12px; padding:16px 2px; }
  .sr-time{ font-size:1.2rem; }
  .sr-level{ grid-column:2; justify-self:start; margin-top:-6px; }
  .sr-book{ grid-row:1; grid-column:3; padding:6px 14px; }

  .sede-photo{ aspect-ratio:16/9; }

  .contact-card{ padding:30px 22px; }
  /* 16px evita que el iPhone haga zoom al tocar un campo */
  .field input, .field textarea, .field select, .cf-field input, .cf-field select{ font-size:16px; }

  .page-hero{ padding:56px 0 100px; }
  .price-card{ padding:32px 22px; }
  .pay-dialog{ padding:30px 20px 24px; }

  .footer-main{ padding-top:52px; padding-bottom:40px; }
  /* marca y contacto ocupan todo el ancho; Menú y Horarios quedan lado a lado (dense) */
  .footer-grid{ grid-template-columns:1fr 1fr; grid-auto-flow:row dense; gap:34px 20px; }
  .footer-col:nth-child(1), .footer-col:nth-child(3){ grid-column:1 / -1; }
  .footer-col h2{ margin-bottom:12px; }
  .footer-col ul{ gap:10px; }
  /* texto a la izquierda y margen a la derecha para que el botón de chat no lo tape */
  .footer-bar{ text-align:left; justify-content:flex-start; padding:16px 84px 16px 20px; line-height:1.5; gap:8px; }

  .legal-toc ol{ grid-template-columns:1fr; }
  .legal-back{ font-size:.88rem; }
  .legal-data li{ grid-template-columns:1fr; gap:2px; padding:12px 16px; }
  .legal-block{ padding-bottom:32px; margin-bottom:32px; }

  /* el botón de chat queda solo como ícono para no tapar contenido */
  .chat-float{ right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); padding:14px; }
  .chat-float span{ display:none; }
  .chat-float svg{ width:22px; height:22px; }
}

/* Celular chico (iPhone SE, Android de 360px o menos) */
@media (max-width:420px){
  .form-grid-2{ grid-template-columns:1fr; }
  .pay-modal{ padding:10px; }
  .pay-dialog{ max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); }
  .billing-opt{ padding:10px 16px; }
}
@media (max-width:360px){
  .container{ padding:0 16px; }
  .header-inner{ padding:12px 16px; }
  .brand-word{ font-size:1.25rem; }
  .schedule-row{ grid-template-columns:52px 1fr auto; gap:10px; }
  .sr-time{ font-size:1.05rem; }
  .sr-book{ padding:5px 11px; font-size:.82rem; }
  .pay-methods{ grid-template-columns:1fr; }
  .card-form .cf-row{ grid-template-columns:1fr; gap:0; }
  .price-amount{ font-size:2rem; }
}

/* Celular en horizontal (pantalla baja): menos aire vertical */
@media (max-height:500px) and (orientation:landscape){
  .main-nav{ padding-top:70px; }
  .main-nav a{ padding:9px 0; font-size:1.15rem; }
  .hero-word{ bottom:7%; }
  .hw-big::after{ margin:6px auto 5px; }
  .page-hero{ padding:40px 0 90px; }
}

/* Pantallas táctiles: sin efectos de hover que quedan "pegados" al tocar */
@media (hover:none){
  .btn:hover, .method-card:hover, .sede-card:hover, .plan-card:hover, .price-card:hover,
  .chat-float.loaded:hover{ transform:none; box-shadow:none; }
  .ph:hover::before{ transform:none; }
  .main-nav a:hover{ padding-left:0; }
}