/* ==========================================================================
   Cherry Fitness Boutique — Landing page styles
   Paleta y tipografía según manual de marca:
   #000000 / #540404 / #810100 / #F5EDD8 / #FFFFFF
   Tipografía real (Akira Expanded, Fontspring Black/Light) no está
   licenciada aún: se usan Maven Pro (títulos/wordmark — geométrica,
   redondeada, con espíritu minimalista/wellness) y Poppins (cuerpo)
   como alternativas de Google Fonts con espíritu similar.
   ========================================================================== */

:root{
  --black:#000000;
  --maroon:#540404;
  --red:#810100;
  --red-light:#a3120f;
  --charcoal:#000000;
  --cream:#f5edd8;
  --cream-soft: rgba(245,237,216,.78);
  --white:#ffffff;

  --ink: var(--black);
  --bg: var(--cream);
  --font-display:'Maven Pro', system-ui, sans-serif;
  --font-body:'Poppins', system-ui, sans-serif;

  --container: 1180px;
  --radius: 18px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ margin:0; font-weight:400; }

.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: 24px;
}

.text-white{ color: var(--white); }

.eyebrow{
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--red);
  font-weight:600;
  margin:0 0 14px;
}

.section-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.22;
  letter-spacing: .01em;
  max-width: 720px;
  margin-bottom: 18px;
}

.section-sub{
  max-width: 560px;
  color: rgba(0,0,0,.65);
  margin-bottom: 48px;
}

.section-head-center{
  text-align:center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.section-head-center .section-title{ margin-inline:auto; margin-bottom:0; }

section{ padding: 110px 0; position:relative; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 15px 30px;
  border-radius: 999px;
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.02em;
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: transform .35s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
  white-space:nowrap;
  font-family: var(--font-body);
}
.btn:hover{ transform: translateY(-3px); }
.btn:active{ transform: translateY(-1px) scale(.97); transition: transform 100ms ease-out; }
.btn-primary{ background: var(--red); color: var(--white); }
.btn-primary:hover{ background: var(--red-light); }
.btn-outline{ background: transparent; color: var(--red); border-color: var(--red); }
.btn-outline:hover{ background: var(--red); color: var(--white); }
.btn-ghost{ background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-ghost:hover{ background: rgba(255,255,255,.12); border-color:#fff; }
.btn-ghost-light{ background: transparent; color: var(--cream); border-color: rgba(245,237,216,.5); }
.btn-ghost-light:hover{ background: rgba(245,237,216,.12); border-color: var(--cream); }
.btn-promo{ background: var(--cream); color: var(--red); border-color: var(--cream); }
.btn-promo:hover{ background: transparent; color: var(--cream); border-color: var(--cream); }

/* ---------- grain overlay (textura sutil) ---------- */
.grain-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9000;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- reveal on scroll ---------- */
/* Only hide .reveal content once JS confirms it's running and will reveal it —
   if JS fails or is disabled, content must never be stuck invisible. */
.js-ready .reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.in-view{ opacity:1; transform:none; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  --header-fg: var(--cream);
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  padding: 22px 0;
  background: transparent;
  transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), transform .4s var(--ease);
}
.site-header.scrolled{
  padding: 12px 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.site-header.hide{ transform: translateY(-100%); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

.brand{ display:flex; align-items:center; }
.brand-logo{ height: 42px; width:auto; display:block; }

.main-nav{ display:flex; align-items:center; gap:30px; }
.nav-link{
  color: var(--header-fg);
  font-size:.86rem; font-weight:600; letter-spacing:.02em;
  position:relative; padding:4px 0;
  transition: color .35s var(--ease);
}
.nav-link::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--red-light); transition: right .3s var(--ease);
}
.nav-link:hover::after{ right:0; }
.nav-ig{ display:flex; color: var(--header-fg); }
.btn-preventa{
  background: var(--red);
  color: var(--white);
  padding: 11px 22px;
  font-size:.8rem;
}
.btn-preventa:hover{ background: var(--red-light); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; border:none; background:none; cursor:pointer;
}
.nav-toggle span{ height:2px; width:100%; background: var(--header-fg); border-radius:2px; transition: all .3s var(--ease); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:flex-end;
  padding-bottom: 120px;
  color: var(--cream);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:-1; background: var(--charcoal); }
.hero-slide{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity:0;
  transition: opacity 1.6s var(--ease);
  animation: kenburns 12s ease-in-out infinite alternate;
}
.hero-slide.is-active{ opacity:1; z-index:1; }
@keyframes kenburns{
  from{ transform: scale(1); }
  to{ transform: scale(1.08); }
}
@media (hover: hover) and (pointer: fine){
  .hero-slide{ background-attachment: fixed; }
}
.hero-overlay{
  position:absolute; inset:0; z-index:2;
  background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.18) 26%, rgba(0,0,0,.2) 58%, rgba(0,0,0,.8) 100%);
}

.eyebrow.hero-eyebrow, .hero .eyebrow{ color: var(--cream); opacity:.9; }
.hero-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height:1.1;
  letter-spacing: .005em;
  margin: 10px 0 22px;
  max-width: 16ch;
}
.hero-sub{ max-width: 620px; font-size:1.05rem; font-weight:400; color: rgba(245,237,216,.9); margin-bottom: 34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-dots{
  position:absolute; left:0; right:0; bottom:36px;
  display:flex; justify-content:center; gap:10px; margin:0; z-index:3;
}
.hero-dots button{
  width:9px; height:9px; border-radius:50%; border:none;
  background: rgba(245,237,216,.4); cursor:pointer; padding:0;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.hero-dots button.active{ background: var(--cream); transform:scale(1.2); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items:center;
}
.about-media{ border-radius: var(--radius); overflow:hidden; aspect-ratio: 1/1; box-shadow: 0 24px 60px rgba(0,0,0,.14); }
.about-video{ width:100%; height:100%; object-fit:cover; display:block; }
.about-title{ color: var(--red); }
.about-copy p{ color: rgba(0,0,0,.68); margin: 0 0 16px; }
.about-stats{
  display:flex; gap:36px; margin-top:34px; padding-top:28px;
  border-top:1px solid rgba(0,0,0,.12);
}
.about-stats strong{ display:block; font-family: var(--font-display); font-weight:600; font-size:1.5rem; color: var(--red); }
.about-stats span{ font-size:.78rem; opacity:.7; }

/* ==========================================================================
   BENEFICIOS
   ========================================================================== */
.benefits{ background: var(--white); }
.benefits-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.benefit-card{ display:flex; flex-direction:column; transition: transform .45s var(--ease); }
.benefit-media{
  position:relative;
  height: 260px;
  border-radius: var(--radius);
  overflow:hidden;
  margin-bottom:16px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  cursor: zoom-in;
}
.benefit-card h3{ font-family: var(--font-body); font-weight:600; font-size:1rem; margin:0; text-align:center; transition: color .3s ease; }
.benefit-card p{ font-size:.83rem; color: rgba(0,0,0,.58); text-align:center; margin:6px 0 0; }

@media (hover: hover) and (pointer: fine){
  .benefit-card:hover{ transform: translateY(-10px); }
  .benefit-card:hover .benefit-media{ transform: scale(1.04); box-shadow: 0 22px 44px rgba(0,0,0,.16); }
  .benefit-card:hover h3{ color: var(--red); }
}

/* ==========================================================================
   MODALIDADES
   ========================================================================== */
.modalities{ background: var(--charcoal); color: var(--cream); overflow:hidden; }
.modalities-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
  flex-wrap:wrap; margin-bottom: 50px;
}
.modalities .eyebrow{ color: var(--cream); opacity:.8; }
.modalities .section-title{ color: var(--cream); margin-bottom:0; }
.modalities-sub{ max-width: 360px; color: rgba(245,237,216,.6); font-size:.92rem; margin:0 0 6px; }

.modalities-carousel{ position:relative; max-width: var(--container); margin-inline:auto; padding: 0 56px; }
.modalities-track{
  display:flex; gap:18px;
  overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
  padding: 4px 0 10px;
}
.modalities-track::-webkit-scrollbar{ display:none; }
.modality-card{
  position:relative;
  flex: 0 0 240px;
  height: 340px;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  overflow:hidden;
  transition: flex-basis .5s var(--ease), transform .5s var(--ease);
}
.modality-card::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.8) 100%);
}
.modality-info{
  position:absolute; left:20px; right:20px; bottom:18px; z-index:1;
}
.modality-title{
  display:block; font-family: var(--font-body); font-weight:600; font-size:1.05rem; color: var(--cream);
  margin-bottom:4px;
}
.modality-desc{
  display:block; font-size:.78rem; line-height:1.35; color: rgba(245,237,216,.78);
  max-height:0; opacity:0; overflow:hidden;
  transition: max-height .4s var(--ease), opacity .35s var(--ease), margin-top .4s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .modality-card:hover{ flex-basis: 290px; }
  .modality-card:hover .modality-desc{ max-height:3em; opacity:1; margin-top:4px; }
}
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background: rgba(245,237,216,.1); color: var(--cream);
  border: 1px solid rgba(245,237,216,.3);
  font-size:1.4rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .3s, transform .3s;
  z-index:3;
}
.carousel-arrow:hover{ background: rgba(245,237,216,.22); }
.carousel-arrow.prev{ left:0; }
.carousel-arrow.next{ right:0; }

/* ==========================================================================
   UBICACIÓN
   ========================================================================== */
.location-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:60px; align-items:center; }
.location-address{ font-size:1.02rem; color: rgba(0,0,0,.75); margin-bottom: 20px; }
.contact-info{ margin-bottom: 30px; }
.contact-info li{ margin-bottom:10px; font-size:.92rem; }
.contact-info a{ color: var(--red); font-weight:600; }
.contact-info .tbd{ color: rgba(0,0,0,.5); font-style: italic; }
.location-map{ border-radius: var(--radius); overflow:hidden; box-shadow: 0 20px 50px rgba(0,0,0,.12); }
.location-map iframe{ width:100%; height:380px; border:0; display:block; }

/* ==========================================================================
   TESTIMONIOS
   ========================================================================== */
.testimonials{
  background:
    linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.86)),
    url('../assets/espacio/recepcion.jpeg') center/cover no-repeat;
  color: var(--cream); text-align:center;
}
.testimonials .eyebrow{ color: var(--cream); opacity:.8; }
.testimonials .section-title{ margin-inline:auto; color: var(--white); }
.testi-carousel{ max-width: 720px; margin: 40px auto 0; position:relative; overflow:hidden; }
.testi-track{ display:flex; transition: transform .6s var(--ease); }
.testi-slide{ min-width:100%; margin:0; padding: 0 20px; }
.testi-stars{ color:#e8c15a; font-size:1.1rem; letter-spacing:.2em; margin-bottom:14px; }
.testi-slide p{ font-size:1.3rem; font-weight:300; line-height:1.5; margin:0 0 18px; }
.testi-slide cite{ font-style:normal; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.testi-dots{ display:flex; justify-content:center; gap:10px; margin-top:30px; }
.testi-dots button{
  width:9px; height:9px; border-radius:50%; border:none; background: rgba(245,237,216,.35);
  cursor:pointer; padding:0; transition: background .3s;
}
.testi-dots button.active{ background: var(--cream); }

/* ==========================================================================
   PLANES
   ========================================================================== */
.plans{ background: var(--white); }
.plans .section-title{ max-width: none; white-space: nowrap; }
.preventa-wrap{ display:flex; justify-content:center; margin: 64px 0 40px; }
.plan-card{
  position:relative;
  background: var(--white);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px;
  padding: 42px 30px 32px;
  display:flex; flex-direction:column;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.plan-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0,0,0,.08); border-color: rgba(0,0,0,.16); }
.plan-card.featured{ background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }
.plan-card.featured .plan-price span{ color: rgba(255,255,255,.6); }
.plan-card h3{ font-family: var(--font-display); font-weight:700; font-size:1.15rem; margin-bottom:8px; letter-spacing:.01em; }
.plan-desc{ font-size:.84rem; color: rgba(0,0,0,.55); margin: 0 0 22px; }
.plan-card.featured .plan-desc{ color: rgba(255,255,255,.85); }
.plan-ribbon{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background: var(--cream); color: var(--charcoal);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding: 9px 22px; border-radius: 999px; white-space:nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  z-index:2;
}
.plan-price{ font-family: var(--font-display); font-weight:700; font-size:1.7rem; margin: 0 0 2px; }
.plan-price span{ font-family: var(--font-body); font-size:.75rem; font-weight:400; color: rgba(0,0,0,.45); margin-left:4px; }
.plan-card.featured .plan-price span{ color: rgba(245,237,216,.55); }
.plan-features{ margin: 18px 0 30px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.08); flex:1; display:flex; flex-direction:column; gap:14px; }
.plan-card.featured .plan-features{ border-top-color: rgba(255,255,255,.15); }
.plan-card .btn{ align-self:stretch; }

.preventa-card{ max-width: 440px; width:100%; }
.preventa-features{ font-size:.9rem; }
.preventa-features li{ position:relative; padding-left: 26px; line-height:1.4; }
.preventa-features li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color: var(--red-light); font-weight:700;
}

.plans-secondary{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.promo-banner{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  background: var(--red); color: var(--white);
  border-radius: var(--radius);
  padding: 34px 36px;
}
.promo-banner h3{ font-family: var(--font-body); font-weight:600; margin-bottom:6px; }
.promo-price{ font-size:.92rem; opacity:.85; margin:0; max-width:44ch; }
.proximamente-ribbon{
  position:absolute; top:22px; right:-58px;
  width:210px;
  transform:rotate(40deg);
  transform-origin:center;
  background: var(--charcoal); color: var(--cream);
  text-align:center;
  font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding: 9px 0;
  border-top: 3px solid; border-bottom: 3px solid;
  border-image: repeating-linear-gradient(45deg, var(--cream) 0 8px, var(--charcoal) 8px 16px) 3;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  z-index:2;
}

.app-cta{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  background:
    linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.8)),
    url('../assets/espacio/saladedescansoEntrada.jpg') center/cover no-repeat,
    var(--charcoal);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 34px 36px;
}
.app-cta h3{ font-family: var(--font-body); font-weight:600; margin-bottom:6px; }
.app-cta p{ opacity:.7; margin:0; max-width:44ch; }

/* ==========================================================================
   COMUNIDAD
   ========================================================================== */
.community{ background: var(--cream); }
.community-head{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-bottom: 40px;
}
.community-head .eyebrow{ margin:0; }
.community-head .section-title{ margin:0; }
.ig-pill{
  display:inline-flex; align-items:center; gap:9px;
  border: 1.5px solid rgba(0,0,0,.18); border-radius: 999px;
  padding: 11px 20px; font-size:.85rem; font-weight:600;
  transition: border-color .3s, color .3s, transform .3s;
}
.ig-pill:hover{ border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.community-strip{
  display:grid; grid-template-columns: repeat(6, 1fr); gap:16px;
}
.community-strip a{ display:block; }
.community-strip img, .community-strip video{
  width:100%; height: 260px; object-fit:cover; border-radius: 14px;
  transition: transform .5s var(--ease);
}
.community-strip a:nth-child(2n){ margin-top: 26px; }
@media (hover: hover) and (pointer: fine){
  .community-strip img:hover, .community-strip video:hover{ transform: scale(1.04); }
}

/* ==========================================================================
   WELLHUB
   ========================================================================== */
.wellhub{ padding: 30px 0; background: var(--white); border-top: 1px solid rgba(0,0,0,.08); }
.wellhub-inner{ text-align:center; }
.wellhub-logo{ height:20px; width:auto; margin:0 auto 12px; display:block; }
.wellhub-inner p{ margin:0; font-size:.86rem; color: rgba(0,0,0,.6); }
.wellhub-inner strong{ color: var(--red); font-weight:600; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--charcoal); color: var(--cream); padding: 60px 0 24px; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; padding-bottom: 34px; border-bottom: 1px solid rgba(245,237,216,.15); }
.footer-logo{ height: 46px; width:auto; }
.footer-nav{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-nav a{ font-size:.86rem; opacity:.75; transition: opacity .3s; }
.footer-nav a:hover{ opacity:1; }
.footer-social{ display:flex; align-items:center; gap:18px; }
.footer-social a{ color: var(--cream-soft); transition: color .3s, transform .3s; display:flex; }
.footer-social a:hover{ color: var(--red-light); transform: translateY(-2px); }
.footer-copy{ text-align:center; font-size:.75rem; opacity:.45; margin: 22px 0 0; }

/* ==========================================================================
   WHATSAPP FAB
   ========================================================================== */
.wa-fab-wrap{ position: fixed; right: 26px; bottom: 26px; z-index: 800; display:flex; align-items:center; gap:12px; }
.wa-fab{
  width:58px; height:58px; border-radius:50%;
  background: var(--red); color: var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 30px rgba(129,1,0,.4);
  transition: transform .35s var(--ease);
  animation: wafab-pulse 2.6s infinite;
}
.wa-fab:hover{ transform: scale(1.08); }
@keyframes wafab-pulse{
  0%,100%{ box-shadow: 0 12px 30px rgba(129,1,0,.4); }
  50%{ box-shadow: 0 12px 30px rgba(129,1,0,.4), 0 0 0 10px rgba(129,1,0,.12); }
}
.wa-tooltip{
  position:absolute; right:70px; bottom:6px;
  background: var(--white); color: var(--ink);
  font-size:.78rem; line-height:1.4;
  padding: 12px 16px; border-radius: 12px; width: 220px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  opacity:0; transform: translateX(10px);
  pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.wa-fab-wrap:hover .wa-tooltip, .wa-fab-wrap.show-tip .wa-tooltip{ opacity:1; transform:none; }

.grid-lines{ display:none; }

/* ==========================================================================
   MODAL DE SIMULACIÓN (planes / app — sin pagos ni links reales)
   ========================================================================== */
.sim-modal{
  position: fixed; inset:0; z-index: 2000;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
}
.sim-modal[hidden]{ display:none; }
.sim-modal-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  animation: sim-fade .25s var(--ease);
}
.sim-modal-card{
  position:relative;
  background: var(--white);
  color: var(--ink);
  max-width: 440px; width:100%;
  border-radius: var(--radius);
  padding: 42px 36px 36px;
  text-align:center;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  animation: sim-pop .3s var(--ease);
}
.sim-modal-tag{
  display:inline-block;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color: var(--red); background: rgba(129,1,0,.08);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.sim-modal-card h3{ font-family: var(--font-display); font-weight:600; font-size:1.25rem; margin-bottom: 14px; }
.sim-modal-card p{ font-size:.92rem; color: rgba(0,0,0,.68); margin-bottom: 26px; }
.sim-modal-cta{ width:100%; }
.sim-modal-close{
  position:absolute; top:16px; right:16px;
  width:32px; height:32px; border-radius:50%; border:none;
  background: rgba(0,0,0,.06); color: var(--ink);
  cursor:pointer; font-size:.9rem; line-height:1;
  transition: background .3s;
}
.sim-modal-close:hover{ background: rgba(0,0,0,.12); }

@keyframes sim-fade{ from{opacity:0;} to{opacity:1;} }
@keyframes sim-pop{ from{opacity:0; transform: translateY(16px) scale(.97);} to{opacity:1; transform:none;} }

/* ==========================================================================
   LIGHTBOX DE IMÁGENES (beneficios)
   ========================================================================== */
.img-lightbox{
  position: fixed; inset:0; z-index: 2100;
  display:flex; align-items:center; justify-content:center;
  padding: 48px 24px;
}
.img-lightbox[hidden]{ display:none; }
.img-lightbox-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(3px);
  animation: sim-fade .25s var(--ease);
}
.img-lightbox-figure{
  position:relative;
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  margin:0;
  animation: sim-pop .3s var(--ease);
  display:flex; flex-direction:column; align-items:center;
}
.img-lightbox-figure img{
  max-width:100%;
  max-height: 78vh;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  display:block;
}
.img-lightbox-figure figcaption{
  margin-top: 14px;
  color: var(--white);
  font-family: var(--font-body);
  font-weight:600;
  font-size:.95rem;
  text-align:center;
}
.img-lightbox-close{
  position:absolute; top:16px; right:16px;
  width:40px; height:40px; border-radius:50%; border:none;
  background: rgba(255,255,255,.12); color: var(--white);
  cursor:pointer; font-size:1rem; line-height:1;
  transition: background .3s;
  z-index:1;
}
.img-lightbox-close:hover{ background: rgba(255,255,255,.22); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .plans .section-title{ white-space: normal; }
  .about-grid, .location-grid{ grid-template-columns: 1fr; }
  .benefits-grid{ grid-template-columns: repeat(3, 1fr); }
  .plans-secondary{ grid-template-columns: 1fr; }
  .community-strip{ grid-template-columns: repeat(3, 1fr); }
  .community-strip a:nth-child(2n){ margin-top:0; }
  .modalities-head{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 720px){
  section{ padding: 76px 0; }
  .main-nav{
    position:fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    background: var(--charcoal); flex-direction:column; align-items:flex-start;
    padding: 110px 32px 32px; gap: 26px;
    transform: translateX(100%); transition: transform .4s var(--ease);
    box-shadow: -10px 0 40px rgba(0,0,0,.35);
  }
  .main-nav.open{ transform:none; }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .btn-preventa{ width:100%; }
  .benefits-grid{ grid-template-columns: 1fr 1fr; }
  .community-strip{ grid-template-columns: repeat(2, 1fr); }
  .community-head{ flex-direction:column; align-items:flex-start; }
  .wa-tooltip{ display:none; }
  /* Hero: sin zoom Ken Burns en mobile — el scale animado hace que el navegador
     reescale la imagen ya rasterizada y se ve pixelada; además se fija el centrado. */
  .hero-slide{ animation:none; transform:none; background-position: center center; }
  /* Versiones verticales 9:16 del banner, solo mobile (!important pisa el
     background-image inline de desktop, así el celular no descarga ambas). */
  .hero-slide--hero{ background-image:url('../assets/imgsMobile/hero.jpg') !important; }
  .hero-slide--pilates1{ background-image:url('../assets/imgsMobile/pilates1.jpg') !important; }
  .hero-slide--saladedescansoEntrada{ background-image:url('../assets/imgsMobile/saladedescansoEntrada.jpg') !important; }
  .hero-slide--fuerzaYCaminadoras{ background-image:url('../assets/imgsMobile/fuerzaYCaminadoras.jpg') !important; }
  .hero-slide--vestuarios2{ background-image:url('../assets/imgsMobile/vestuarios2.jpg') !important; }
  .hero-slide--banos{ background-image:url('../assets/imgsMobile/banos.jpg') !important; }
  .hero-slide--hyrox{ background-image:url('../assets/imgsMobile/hyrox.jpg') !important; }

  /* Modalidades: en celular el carrusel se arrastra, no hacen falta flechas */
  .modalities-carousel{ padding: 0 16px; }
  .carousel-arrow{ display:none; }

  .testi-slide p{ font-size:1.05rem; }

  /* IG: intercambia el último video con la última imagen */
  .community-strip a:nth-child(5){ order:6; }
  .community-strip a:nth-child(6){ order:5; }

  .footer-inner{ flex-direction:column; justify-content:center; text-align:center; }
  .footer-nav{ justify-content:center; }
  .footer-social{ justify-content:center; }
}

/* Modalidades en pantallas táctiles: no hay hover, así que la descripción
   se muestra siempre sobre la imagen. */
@media (hover: none), (pointer: coarse){
  .modality-desc{ max-height:4.2em; opacity:1; margin-top:4px; }
  .modality-card::after{ background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85) 100%); }
}

@media (max-width: 480px){
  .benefits-grid{ grid-template-columns: 1fr; }
  .community-strip{ grid-template-columns: 1fr 1fr; }
  .modality-card{ flex-basis: 200px; height:290px; }
}

/* ==========================================================================
   REDUCED MOTION — a gentler, non-vestibular equivalent, not zero feedback
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ transform:none; }
  .hero-slide{ animation: none !important; background-attachment: initial !important; }
  .stat-value{ transition: none !important; }
}