:root {
  --bg: #0a0a0a;
  --bg-2: #121212;
  --bg-3: #1a1a1a;
  --surface: #161616;
  --line: rgba(255, 255, 255, 0.1);
  --text: #f4f4f4;
  --muted: #a8a8a8;
  --accent: #b33a2e;          /* brick red */
  --accent-2: #d45242;
  --accent-soft: rgba(179, 58, 46, 0.16);
  --whatsapp: #25d366;
  --danger: #f87171;
  --radius: 14px;
  --container: 1320px;
  --header-h: 68px;
  --font: Lato, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
html.smooth-scroll { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3 { margin: 0 0 0.7rem; line-height: 1.12; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); font-weight: 900; text-transform: uppercase; }
h2 { font-size: clamp(1.7rem, 4vw, 2.55rem); font-weight: 900; text-transform: uppercase; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1rem; color: var(--muted); }
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.narrow { max-width: 720px; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:.75rem 1rem; z-index:1000; }
.skip-link:focus { left:1rem; top:1rem; }
.eyebrow {
  display:inline-block; margin:0 0 .65rem; color:var(--accent-2);
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.ph {
  display:inline-block; padding:.05rem .4rem; border-radius:6px;
  background: rgba(248,113,113,.12); color:#fecaca; border:1px dashed rgba(248,113,113,.4);
  font-weight:700; font-size:.95em;
}
.badge {
  display:inline-block; margin-top:.4rem; padding:.15rem .5rem; border-radius:999px;
  background:rgba(248,113,113,.15); color:#fecaca; font-size:.72rem; font-weight:700;
}

/* Buttons — Primetime-like pills */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:.75rem 1.35rem; border-radius:999px;
  border:1px solid transparent; font-weight:700; font-size:.82rem;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn-sm { min-height:40px; padding:.45rem 1rem; font-size:.75rem; }
.btn-lg { min-height:54px; padding:.9rem 1.5rem; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-2); }
.btn-outline-accent {
  background:transparent; color:var(--text);
  border:1.5px solid var(--accent); outline:1.5px dotted var(--accent); outline-offset:4px;
}
.btn-outline-accent:hover { background:var(--accent); color:#fff; outline-color:transparent; }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover { border-color:rgba(255,255,255,.3); }
.btn-ghost-accent { background:transparent; color:var(--accent-2); border:1px solid rgba(179,58,46,.5); }
.btn-dark { background:#111; color:#fff; }
.btn-dark:hover { background:#000; }
.btn-outline-dark { background:transparent; color:#111; border:1.5px solid #111; }
.arr { font-size:1rem; line-height:1; }

/* Topbar + header */
.topbar { background:#000; border-bottom:1px solid var(--line); font-size:.78rem; }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:40px; }
.topbar-promo { margin:0; color:var(--accent-2); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.7rem; }
.topbar-actions { display:flex; gap:1rem; }
.topbar-actions a { color:var(--muted); font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:.04em; }
.topbar-actions a:hover { color:var(--text); }

.site-header {
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px); background:rgba(10,10,10,.82);
  border-bottom:1px solid var(--line);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h); gap:1rem; }
.logo { display:inline-flex; align-items:center; gap:.7rem; color:var(--text); text-decoration:none; font-weight:900; text-transform:uppercase; letter-spacing:.02em; }
.logo:hover { text-decoration:none; }

.logo em { font-style:normal; color:var(--muted); font-weight:700; }
.nav { display:none; align-items:center; gap:1.15rem; }
.nav a { color:var(--muted); font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; }
.nav a:hover { color:var(--text); }
.nav-toggle {
  width:44px; height:44px; border:1px solid var(--accent); border-radius:10px;
  background:transparent; display:grid; place-items:center; gap:5px; padding:0; cursor:pointer;
}
.nav-toggle span { display:block; width:18px; height:2px; background:var(--text); }
.nav.open {
  display:flex; position:absolute; top:var(--header-h); left:0; right:0;
  flex-direction:column; align-items:stretch; padding:1rem;
  background:rgba(10,10,10,.97); border-bottom:1px solid var(--line);
}
.nav.open a { padding:.85rem .5rem; border-bottom:1px solid var(--line); }
@media (min-width:980px) {
  .nav-toggle { display:none; }
  .nav { display:flex; }
}

/* Hero */
.hero {
  position:relative; min-height:min(92svh, 780px); display:flex; align-items:flex-end;
  padding:5rem 0 3.5rem; overflow:hidden; isolation:isolate;
}
.hero-media {
  position:absolute; inset:0; z-index:-2;
  background:
    url("img/storefront-night-full.jpg") center/cover no-repeat,
    #111;
}
.hero-overlay {
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.35) 100%),
    linear-gradient(0deg, rgba(0,0,0,.75) 0%, transparent 45%);
}
.hero-grid {
  display:grid; gap:1.5rem; width:100%;
}
@media (min-width:900px) {
  .hero-grid { grid-template-columns: 1.45fr 0.7fr; align-items:end; gap:2.5rem; }
}
@media (min-width:1200px) {
  .hero {
    min-height: min(92svh, 860px);
    padding: 6.5rem 0 4.5rem;
  }
  .hero-lead { max-width: 40rem; font-size: 1.25rem; }
  h1 { font-size: clamp(3.2rem, 5.5vw, 5.2rem); }
}
.brand-kicker {
  margin:0 0 .4rem; color:var(--accent-2); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; font-size:.78rem;
}
.hero-lead { font-size:clamp(1.05rem, 2.2vw, 1.2rem); max-width:34rem; color:#ddd; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.4rem; }
.hero-aside { display:grid; gap:.9rem; }
.rating-chip, .offer-card {
  background:rgba(0,0,0,.62); border:1px solid var(--line); border-radius:14px;
  backdrop-filter:blur(8px); padding:1rem 1.1rem;
}
.rating-chip { display:flex; align-items:center; gap:.8rem; }
.rating-chip strong { display:block; color:#fff; }
.rating-chip span { color:var(--muted); font-size:.8rem; }
.g-mark {
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:#4285f4; font-weight:900;
}
.offer-label { margin:0 0 .35rem; color:var(--accent-2); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.offer-price { margin:0 0 .4rem; color:#fff; font-size:1.6rem; font-weight:900; }
.offer-price small { font-size:.9rem; color:var(--muted); font-weight:700; }
.offer-note { margin:0 0 .8rem; font-size:.88rem; }

/* Promo */
.promo-strip { background:var(--bg-2); border-block:1px solid var(--line); padding:3.5rem 0; }
.promo-inner { display:grid; gap:1.5rem; }
@media (min-width:860px) { .promo-inner { grid-template-columns:1.2fr .8fr; align-items:center; } }
.promo-price-block {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem;
}
.promo-price-block .was { margin:0; text-decoration:line-through; color:#777; }
.promo-price-block .now { margin:.2rem 0 1rem; color:#fff; font-size:2rem; font-weight:900; }
.promo-price-block .now small { font-size:1rem; color:var(--muted); }
.promo-price-block ul { margin:0 0 1.1rem; padding-left:1.1rem; color:var(--muted); }

/* Sections */
.section { padding:4.2rem 0; }
.section-alt { background:var(--bg-2); border-block:1px solid var(--line); }
.section-head { max-width:640px; margin-bottom:2rem; }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head.light p, .section-head.light h2 { color:#eee; }
.card-dark {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem;
}

/* Studio */
.studio-grid { display:grid; gap:1rem; }
@media (min-width:900px) { .studio-grid { grid-template-columns:1fr 1.05fr; } }
.loc-label { margin:0 0 .35rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700; }
.studio-actions { display:grid; gap:.55rem; margin:1.1rem 0; }
.link-row {
  display:flex; justify-content:space-between; gap:1rem; padding:.85rem 1rem;
  border:1px solid var(--line); border-radius:12px; color:var(--text); text-decoration:none;
}
.link-row span { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; }
.link-row:hover { border-color:var(--accent); text-decoration:none; }
.hours { display:grid; gap:.55rem; margin:1rem 0 1.2rem; }
.hours > div { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:.55rem 0; }
.hours span { color:var(--muted); }
.hours .closed { color:var(--danger); }
.amenity-list { list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:.55rem; }
.amenity-list li { color:var(--muted); display:flex; gap:.55rem; }
.amenity-list .ico { color:var(--accent-2); }
.address { color:var(--text); }
.source-note { margin-top:1rem; font-size:.78rem; color:#777; }
.studio-map, .map-sm {
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); min-height:340px; background:#111;
}
.studio-map iframe, .map-sm iframe { width:100%; height:100%; min-height:360px; border:0; filter:grayscale(.35) contrast(1.05); }

/* Gallery */
.gallery-rail {
  display:grid; gap:1rem;
  grid-template-columns:repeat(2, 1fr);
}
@media (min-width:800px) { .gallery-rail { grid-template-columns:repeat(3, 1fr); } }
.gallery-card {
  margin:0; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#111;
  aspect-ratio: 3/4;
}
.gallery-card img { width:100%; height:100%; object-fit:cover; }

/* Branches */
.branch-grid {
  display:grid; gap:1rem;
  grid-template-columns:1fr;
}
@media (min-width:640px) { .branch-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px) { .branch-grid { grid-template-columns:repeat(3,1fr); } }
.branch-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.25rem 1.3rem; transition:border-color .15s ease;
}
.branch-card:hover { border-color:rgba(179,58,46,.55); }
.branch-card h3 { color:#fff; }
.formats {
  list-style:none; margin:.85rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem;
}
.formats li {
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent-2); background:var(--accent-soft); border:1px solid rgba(179,58,46,.35);
  border-radius:999px; padding:.35rem .65rem;
}

/* Reviews */
.review-grid { display:grid; gap:1rem; }
@media (min-width:800px) { .review-grid { grid-template-columns:repeat(3,1fr); } }
.review-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem;
}
.stars { color:var(--accent-2); letter-spacing:.1em; margin-bottom:.5rem; }
.review-card p { color:#ddd; }
.review-card footer { color:#777; font-size:.8rem; }

/* Why */
.why-section { position:relative; isolation:isolate; overflow:hidden; }
.why-bg {
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.88)),
    url("img/gym-floor-full.jpg") center/cover no-repeat;
}
.feature-grid { display:grid; gap:1rem; }
@media (min-width:800px) { .feature-grid { grid-template-columns:repeat(4,1fr); } }
.feature-card {
  background:rgba(0,0,0,.55); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:12px; padding:1.2rem; backdrop-filter:blur(4px);
}
.feature-ico { color:var(--accent-2); font-weight:900; margin-bottom:.6rem; }
.feature-card h3 { color:#fff; }
.feature-card p { color:#ccc; margin:0; font-size:.92rem; }

/* Pricing */
.pricing-grid { display:grid; gap:1rem; }
@media (min-width:860px) { .pricing-grid { grid-template-columns:repeat(3,1fr); align-items:stretch; } }
.price-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; display:flex; flex-direction:column;
}
.price-card.featured { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.plan-tag { margin:0 0 .5rem; color:var(--accent-2); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.price { margin:.4rem 0 1rem; color:#fff; font-size:1.8rem; font-weight:900; }
.price small { font-size:.95rem; color:var(--muted); }
.price-card ul { margin:0 0 1.3rem; padding-left:1.1rem; color:var(--muted); flex:1; }
.price-card .btn { width:100%; }

/* CTA band */
.cta-band {
  background: #0c0c0c;
  padding: 0;
  color: var(--text);
}
.cta-split {
  display:grid;
  grid-template-columns: 1fr;
  min-height: 360px;
}
@media (min-width:900px) {
  .cta-split { grid-template-columns: 1.05fr 0.95fr; min-height: 420px; }
}
.cta-photo {
  margin:0; min-height:280px;
  background: #111 url("img/sign-full.jpg") center 35%/cover no-repeat;
}
.cta-panel {
  display:flex; flex-direction:column; justify-content:center;
  padding: 3rem 1.75rem;
  background: linear-gradient(160deg, #141414 0%, #0a0a0a 100%);
  border-left: 1px solid var(--line);
}
@media (max-width:899px) {
  .cta-panel { border-left:0; border-top:1px solid var(--line); text-align:center; align-items:center; }
  .cta-actions { justify-content:center; }
}
.cta-panel .eyebrow { color: var(--accent-2); }
.cta-panel h2 {
  color:#fff; text-transform:none; font-size:clamp(1.55rem, 3vw, 2.15rem);
  max-width: 22ch;
}
.cta-panel p { color: var(--muted); max-width: 36ch; }
.cta-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.2rem; }
.cta-band .btn-dark { background: var(--accent); color:#fff; }
.cta-band .btn-dark:hover { background: var(--accent-2); }
.cta-band .btn-outline-dark {
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35);
}
.cta-band .btn-outline-dark:hover { border-color:#fff; }

/* Contact */
.contact-final { display:grid; gap:1.5rem; }
@media (min-width:860px) { .contact-final { grid-template-columns:1fr 1fr; } }
.contact-list { list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.contact-list span {
  display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:#777; font-weight:700; margin-bottom:.2rem;
}
.contact-list a, .contact-list em { color:var(--text); font-style:normal; text-decoration:none; }
.contact-list a:hover { color:var(--accent-2); text-decoration:underline; }

/* Footer */
.site-footer { border-top:1px solid var(--line); padding:2.2rem 0 6rem; background:#050505; }
.footer-grid { display:grid; gap:1.2rem; }
.footer-brand { display:flex; align-items:center; gap:.85rem; }

.footer-brand strong { display:block; }
.footer-brand p { margin:0; }
.footer-links { display:flex; flex-wrap:wrap; gap:1rem; }
.footer-links a { color:var(--muted); }
.copy { margin:0; font-size:.85rem; color:#666; }
@media (min-width:900px) {
  .site-footer { padding-bottom:2.5rem; }
  .footer-grid { grid-template-columns:1fr auto; align-items:center; }
  .copy { grid-column:1 / -1; }
}

.fab-wa {
  position:fixed; right:1rem; bottom:1rem; width:56px; height:56px; border-radius:50%;
  background:var(--whatsapp); color:#062814; display:grid; place-items:center;
  box-shadow:0 10px 28px rgba(37,211,102,.35); z-index:60; text-decoration:none;
}
.fab-wa:hover { transform:translateY(-2px) scale(1.03); }




/* === Desktop-wide enhancements (website, not phone column) === */
@media (min-width: 1100px) {
  .container { width: min(100% - 3.5rem, var(--container)); }
  .section { padding: 5.5rem 0; }
  .section-head { max-width: 720px; margin-bottom: 2.5rem; }
  .nav { gap: 1.5rem; }
  .nav a { font-size: 0.8rem; }

  .gallery-rail {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.1rem;
  }
  .gallery-card { aspect-ratio: 3/4; }

  .branch-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .studio-grid {
    grid-template-columns: 0.95fr 1.15fr;
    gap: 1.5rem;
  }
  .studio-map iframe { min-height: 480px; }

  .promo-inner {
    grid-template-columns: 1.35fr 0.85fr;
    gap: 3rem;
  }

  .review-grid { gap: 1.25rem; }
  .feature-grid { gap: 1.25rem; }
  .pricing-grid { gap: 1.25rem; }
  .contact-final { gap: 2rem; }
  .map-sm iframe { min-height: 420px; }

  .hero-aside { max-width: 360px; margin-left: auto; width: 100%; }
  .offer-card, .rating-chip { padding: 1.2rem 1.3rem; }
}

@media (min-width: 1400px) {
  body { font-size: 17px; }
  .header-inner { min-height: 76px; }
}


/* About */
.about-grid { display:grid; gap:2rem; }
@media (min-width:900px) {
  .about-grid { grid-template-columns: 1.15fr 0.85fr; align-items:start; gap:3rem; }
}
.about-points { list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.about-points li {
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:12px; padding:1rem 1.1rem;
}
.about-points strong { display:block; color:#fff; margin-bottom:.25rem; }
.about-points span { color:var(--muted); font-size:.92rem; }

.hero-copy h1 span { color: var(--accent-2); }
.review-card footer {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem;
  margin-top:1rem; color:#888; font-size:.82rem;
}
.review-card footer strong { color:#ddd; font-weight:700; }
.center-note { text-align:center; margin-top:1.5rem; }
@media (min-width:1100px) {
  .review-grid { grid-template-columns: repeat(3, 1fr); }
}



.about-visual {
  margin:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  min-height:280px;
}
.about-visual img { width:100%; height:100%; object-fit:cover; min-height:320px; }
@media (min-width:900px) {
  .about-grid { grid-template-columns: 0.95fr 1.05fr; }
}


@media (min-width:1100px) {
  
}

@media (min-width:1100px) {
  
}






.logo img {
  width: 42px; height: 42px; border-radius: 50%;
  background: transparent !important;
  object-fit: cover; display: block;
}
.footer-brand img {
  width: 48px; height: 48px; border-radius: 50%;
  background: transparent !important;
  object-fit: cover;
}

/* Team — mobile-safe circular avatars */
.team-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
}
@media (min-width: 700px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 1000px) {
  .team-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
}
.team-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 0.7rem;
  text-align: center;
  min-width: 0;
  overflow: hidden;
}
.team-photo,
.team-card .avatar {
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 0.85rem;
  display: block;
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 3px rgba(179, 58, 46, 0.2);
}
.team-card .avatar {
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: clamp(1.4rem, 5vw, 2rem);
  letter-spacing: 0.04em;
  color: #fff;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(145deg, #6e2a22, #b33a2e 55%, #1a1a1a);
}
@media (min-width: 1100px) {
  .team-photo,
  .team-card .avatar { max-width: 180px; }
}
.team-card h3 {
  margin-bottom: 0.35rem;
  text-transform: none;
  font-size: 1.05rem;
  word-break: break-word;
}
.team-role { margin: 0; font-size: 0.9rem; }

/* Prevent any page-wide horizontal scroll on phones */
html, body { overflow-x: hidden; max-width: 100%; }
.container { max-width: 100%; }
img, iframe, video { max-width: 100%; }