:root{
  --bg:#080d15; --bg2:#0e1626; --panel:#121c2f; --panel2:#0d1526;
  --text:#eef4ff; --muted:#c7d3ea; --line:#24324f;
  --gold:#f6c84e; --gold2:#ff9f2d; --accent:#6bc7ff; --ok:#38f2a5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 700px at 10% -10%, #122247 0%, var(--bg) 55%);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;line-height:1.65}
img{max-width:100%;display:block}
a{color:var(--text);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:22px}
.small{font-size:14px;color:#cdd7ee}
/* Increase contrast for subtle text site-wide */
.text-muted{ color:#d6def2 !important; opacity:.95; }
/* NAV */
.navbar{position:sticky;top:0;z-index:80;background:rgba(9,14,24,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.navbar .inner{display:flex;gap:16px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.3px}
.brand img{height:40px;width:40px;border-radius:50%;border:1px solid var(--line)}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a{padding:12px 14px;border-radius:12px;color:#eaf1ff;position:relative}
.nav a.active{color:#ffeaa7;font-weight:800}
.nav a::after{content:'';position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.nav a:hover::after{transform:scaleX(1)}
.lang select{background:#0b1220;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px 10px}

/* Global select styling for dark theme */
select {
    background: #1a1a1a !important;
    color: white !important;
    border: 1px solid rgba(246, 200, 78, 0.3) !important;
    border-radius: 8px !important;
}

select option {
    background: #1a1a1a !important;
    color: white !important;
    padding: 8px !important;
}

/* Dark dropdown styling for user menu */
.dropdown-menu{ background:#0f172a; color:#eaf1ff; border:1px solid #23314f; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.dropdown-menu .dropdown-item{ color:#eaf1ff; }
.dropdown-menu .dropdown-item:hover{ background:#16213a; color:#fff; }
.dropdown-menu .dropdown-item-text{ color:#cfd9f4; }
.dropdown-divider{ border-top-color:#23314f; }
.title-gradient{background:linear-gradient(90deg,var(--gold),#ffb84d,#ff8733);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.5px rgba(0,0,0,.35)}
.text-glow{text-shadow:0 3px 12px rgba(0,0,0,.5)}
/* LAYOUT */
.section{padding:72px 0}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(1,1fr)}@media(min-width:980px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-4{grid-template-columns:repeat(1,1fr)}@media(min-width:1100px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:22px;box-shadow:0 25px 60px rgba(0,0,0,.45);color:var(--text)}
.card h3{margin:0 0 6px}
.card p{margin:8px 0 0;color:#e3eafb}
.badge{display:inline-block;border:1px solid var(--line);color:var(--muted);padding:4px 10px;border-radius:999px;font-size:12px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--text)}
.btn:hover{background:rgba(255,255,255,.12)} .btn-gold{background:linear-gradient(90deg,var(--gold),var(--gold2));border:none;color:#0c111b;font-weight:800}
.hr-shine{height:1px;background:linear-gradient(90deg,transparent,#ffffff2e,transparent);border:none;margin:28px 0}
.footer{border-top:1px solid var(--line);padding:30px 0;color:#cbd5e1;text-align:center}
/* HERO */
.hero{position:relative;min-height:82vh;display:grid;place-items:center;text-align:center;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:
 linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.86)),
 url('assets/hero-fitness.jpg') center/cover no-repeat;transform:scale(1.02)}
.hero .content{position:relative;z-index:1;max-width:1000px}
.kpis{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.kpi{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:16px;padding:10px 14px;min-width:200px}
.kpi .num{font-size:28px;font-weight:900;color:var(--gold)}
/* FEATURES - animated 3D tilt */
.feature{padding:20px;transform-style:preserve-3d;transition:transform .2s ease, box-shadow .2s ease;will-change:transform}
.feature:hover{box-shadow:0 50px 120px rgba(0,0,0,.55)}

/* PROFILE SECTION */
.profile-info .row {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 8px 0;
}
.profile-info .row:last-child {
    border-bottom: none;
}
.profile-info .text-muted {
    opacity: 0.7;
}
.feature .icon{font-size:28px;transform:translateZ(18px)}
.feature h3{font-size:28px;transform:translateZ(16px);word-break:keep-all;hyphens:none}
.feature p{transform:translateZ(10px)}
/* GALLERY equal sizing */
.gallery{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}@media(min-width:980px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery a{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0e1627}
.gallery img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover}
/* PRICING */
.price-grid{display:grid;gap:18px;grid-template-columns:repeat(1,1fr)}@media(min-width:1100px){.price-grid{grid-template-columns:repeat(4,1fr)}}
.price{background:linear-gradient(180deg,#101a33,#0c1121);border:1px solid var(--line);border-radius:22px;padding:56px 22px 22px;box-shadow:0 25px 60px rgba(0,0,0,.4);color:var(--text);position:relative;overflow:hidden}
.price .tag{font-size:40px;font-weight:900;color:var(--gold)}
.price .save{position:absolute;top:10px;right:-12px;transform:rotate(8deg);background:linear-gradient(90deg,var(--ok),#2de0ff);color:#061016;padding:6px 14px;border-radius:999px;border:1px solid #0ff3;letter-spacing:.3px;font-size:12px;white-space:nowrap;max-width:72%;text-overflow:ellipsis;overflow:hidden;z-index:1;pointer-events:none}
.price ul{padding-left:18px;margin:10px 0 16px}
.price li{margin:6px 0}

@media (max-width: 576px){
  .price{padding-top:68px}
  .price .save{right:-16px;font-size:11px}
}
/* FAQ */
.search{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:#0b1220;color:#eaf0ff}
.accordion-button{background:#0f1a2e!important;color:#eaf0ff!important;border:1px solid var(--line);border-radius:12px!important}
.accordion-button:not(.collapsed){box-shadow:none;color:#fff!important}
.accordion-body{background:#0d1629;border:1px solid var(--line);border-radius:12px;color:#eaf0ff}
/* TESTIMONIALS */
.tcard{display:flex;gap:14px;padding:18px}
.tcard img{width:56px;height:56px;border-radius:50%;border:1px solid var(--line)}
.tcard .name{font-weight:800}
/* Floating WhatsApp */
.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:90;background:#25D366;color:#04120c;border-radius:999px;padding:14px 18px;font-weight:900;border:2px solid #1ca851;box-shadow:0 8px 24px rgba(0,0,0,.3)}

/* === Stage 10 additions: hero visuals, parallax & count-up === */
.hero{--mx:0;--my:0}
.hero::before{
  opacity:.98;
  background:
    linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.58)),
    url('assets/hero-fitness.jpg') center / cover no-repeat;
  will-change: transform, opacity;
  transform: translate(calc(var(--mx)*-6px), calc(var(--my)*-6px)) scale(1.06);
}
.hero::after{
  content:'';position:absolute;inset:-10%;
  background: radial-gradient(60% 40% at 50% 20%, #ffb64922 0%, transparent 60%),
              radial-gradient(40% 30% at 80% 60%, #7cc7ff18 0%, transparent 55%);
  mix-blend-mode: screen; pointer-events:none;
}
.kpi{position:relative;overflow:hidden}
.kpi::after{content:'';position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 1px #ffffff12;pointer-events:none}
.kpi .num[data-target]{font-variant-numeric:tabular-nums}

/* feature visuals */
.feature .icon{
  width:42px;height:42px;display:grid;place-items:center;
  border-radius:12px;margin-bottom:8px;
  background: radial-gradient(120% 120% at 30% 20%, #ffffff2b 0%, transparent 60%);
  border:1px solid var(--line);
}
.feature:hover .icon{box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* === Stage 10.2: Feature PRO visuals === */
.feature{position:relative;overflow:hidden}
.feature.pro::before{
  content:'';position:absolute;inset:-1px;border-radius:22px;
  background: conic-gradient(from 180deg, #f6c84e55, #ff9f2d33, #6bc7ff44, #f6c84e55);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px; pointer-events:none; filter:blur(.4px);
  animation: spinBorder 10s linear infinite;
}
@keyframes spinBorder {to{transform:rotate(360deg)}}
.feature.pro:hover::before{animation-duration: 5s;}
.feature .icon{background: radial-gradient(160% 140% at 20% 10%, #ffffff33 0%, transparent 60%)}
.feature.pro .icon{box-shadow: inset 0 0 14px #ffffff18, 0 12px 26px rgba(0,0,0,.35)}

/* CTA strip */
.cta-strip{
  background: radial-gradient(120% 90% at 10% -20%, #ffb84d22, transparent 50%),
              radial-gradient(120% 90% at 80% 140%, #7cc7ff1c, transparent 40%),
              linear-gradient(180deg, #0d1422, #0b101b);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:56px 0;
  text-align:center;
}
.cta-strip h2{margin:0 0 12px;color:#fff}
.cta-strip p{color:#d9e3ff;margin:0 0 18px}
.cta-strip .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Footer booster */
.footer .container{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
.footer a{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  color:#0c111b;border:1px solid #0003;font-weight:800
}
.footer a.secondary{background:rgba(255,255,255,.06);color:#eaf1ff;border:1px solid var(--line)}
.footer small{opacity:.8}
/* 1) Reset e contenção de overflow horizontal */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { width:100%; max-width:100%; overflow-x:hidden; }

/* 2) Tipografia fluida (melhor leitura em telas pequenas) */
:root{
  --step--1: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --step-0:  clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.1rem + 1vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.2rem + 1.8vw, 2rem);
  --gap:  clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}
body { font-size: var(--step-0); line-height: 1.6; }

/* 3) Containers e seções com respiro coerente */
.section { padding: clamp(2rem, 4vw, 4rem) 0; }
.container-narrow { max-width: 980px; margin-inline: auto; padding-inline: 1rem; }

/* 4) Imagens 100% e figuras com ratio estável */
img { max-width: 100%; height: auto; display: block; }
.figure-ratio { position:relative; width:100%; aspect-ratio: 16/9; overflow:hidden; border-radius: 16px; }
.figure-ratio > img { width:100%; height:100%; object-fit: cover; }

/* 5) Grid responsivo padrão para cards (1/2/3 col) */
.grid { display:grid; gap: var(--gap); }
.grid-tiles { grid-template-columns: 1fr; }
@media (min-width: 576px){ .grid-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px){ .grid-tiles { grid-template-columns: repeat(3, 1fr); } }

/* 6) Cartões tocáveis e acessíveis */
.card-touch { padding: 1.25rem; border-radius: 16px; backdrop-filter: blur(6px); }
.card-touch a.btn, .card-touch button { min-height: 44px; }

/* 7) Botões e inputs “dedo-friendly” */
.btn, .form-control { min-height: 44px; font-size: 1rem; }
input, select, textarea { font-size: 1rem; }

/* 8) Hero com overlay (legibilidade no mobile) */
.hero {
  position: relative; min-height: clamp(380px, 46vh, 620px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding: 4rem 1rem;
  color: #fff;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.35));
}
.hero > * { position: relative; z-index: 1; }

/* 9) Tabelas/FAQs nunca estouram a tela */
.table-responsive, .overflow-x { overflow-x:auto; -webkit-overflow-scrolling: touch; }
.break-words { word-wrap: break-word; overflow-wrap: anywhere; }

/* 10) Navbar colapsável – aumenta área de toque */
.navbar .nav-link { padding: .75rem 1rem; }

/* 11) Pricing – empilha colunas no mobile */
.pricing-row { display:grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 768px){ .pricing-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px){ .pricing-row { grid-template-columns: repeat(4, 1fr); } }

/* 12) Testimonials – controla altura de texto */
.testimonial { display:flex; flex-direction:column; gap:.75rem; }
.testimonial .content { max-height: none; }

/* 13) Espaçamento de footer e CTAs fixos flutuantes */
.footer { padding-block: 2rem; }
.whatsapp-fab { bottom: 1rem; right: 1rem; }
@media (max-width: 575.98px){ .whatsapp-fab { bottom: .75rem; right: .75rem; } }

/* 14) Evita glare/tilt agressivo no mobile (se classe adicionada via JS) */
.no-tilt { transform: none !important; box-shadow: none !important; }


/* Contact form – enhancements (usa o mesmo tema do site) */
.visually-hidden{
  position:absolute!important;clip:rect(1px,1px,1px,1px);
  padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap;
}
.contact-card{
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 24px 28px;
  backdrop-filter: blur(6px);
}
.form-label{ font-weight:600; }
.form-text{ font-size:.85rem; color: var(--muted); }

/* Inputs idênticos ao FAQ */
.form-control, .form-select{
  background:#0b1220;                 /* mesmo do .search do FAQ */
  border:1px solid var(--line);
  color:#eaf0ff;
  border-radius:14px;
  padding:14px 16px;
}
.form-control::placeholder{ color: var(--muted); }
.form-control:focus, .form-select:focus{
  outline:0;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(246, 200, 78, .25);
}

.hp{ display:none !important; }

/* Botão com o mesmo gradiente gold do tema */
.btn-gradient{
  display:inline-flex;align-items:center;justify-content:center;
  border:none;border-radius:12px;padding:12px 18px;font-weight:800;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  color:#0c111b;
  transition:transform .06s ease; position:relative;
}
.btn-gradient:hover{ transform: translateY(-1px); }
.btn-gradient:disabled{ opacity:.65; cursor:not-allowed; }

.spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid transparent;border-top-color:#0c111b;
  margin-left:10px;display:none
}
.is-loading .spinner{ display:inline-block; animation:spin .8s linear infinite }
@keyframes spin{ to{ transform: rotate(360deg) } }

.input-error{
  border-color:#ff6b6b!important;
  box-shadow:0 0 0 3px rgba(255,107,107,.2)!important;
}
.form-footnote{ font-size:.85rem; color:#cdd7ee }

/* Mobile */
@media (max-width: 576px){
  .contact-card{ padding:18px 16px 22px }
}


/* ==== Background com imagem + overlay (sem pseudo-elementos) ==== */
.section.has-bg{
  /* 2 camadas: overlay escuro + imagem */
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 22%),
    var(--bg, url('assets/bg-contact.jpg'));
  background-size: cover;
  background-position: var(--bg-pos, center);
  background-repeat: no-repeat;
}
.section.has-bg .page-subtitle,
.section.has-bg .text-muted{ color:#eaf0ff; opacity:.96; } /* legível */


/* Texto mais legível sobre imagem */
.section.has-bg h1,
.section.has-bg .page-title{ color: var(--gold); }
.section.has-bg .page-subtitle,
.section.has-bg .text-muted{ color:#dbe7ff; opacity:.96; }
.text-readable{ color:#eaf0ff!important; text-shadow:0 1px 2px rgba(0,0,0,.35); }

/* Card do formulário mais destacado sobre o bg */
.contact-card{
  background: rgba(11,18,32,.70);          /* vidro mais escuro */
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

/* Inputs iguais ao FAQ, mas com melhor contraste do placeholder */
.form-control,.form-select{ background: rgba(9,14,25,.88); }
.form-control::placeholder{ color:#aab7d1; }

/* Contact page specific background */
section#contact.section.has-bg.contact-bg {
  background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 22%), url('assets/bg-contact.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: 100vh !important;
}

/* Auth buttons in navbar */
.user-menu .btn {
  transition: all 0.3s ease;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.user-menu .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.user-menu .btn[style*="background: linear-gradient"] {
  position: relative;
  overflow: hidden;
}

.user-menu .btn[style*="background: linear-gradient"]:hover {
  box-shadow: 0 4px 15px rgba(246, 200, 78, 0.4);
}

.user-menu .btn[style*="border-color: #F6C84E"]:hover {
  background-color: rgba(246, 200, 78, 0.1);
  border-color: #e6b73e !important;
  color: #e6b73e !important;
}

/* Auth buttons positioning */
#auth-buttons {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 16px;
}

@media (max-width: 768px) {
  #auth-buttons {
    margin-left: 0;
    margin-right: 8px;
  }

  #auth-buttons .btn {
    font-size: 0.875rem;
    padding: 6px 10px;
  }

  /* Keep button text visible on small screens for clarity */
  #auth-buttons .btn span {
    display: inline;
  }

  #auth-buttons .btn i {
    margin: 0;
  }
}