:root {
  --void: #08090a;
  --panel: #0e130f;
  --panel-border: rgba(166, 206, 57, 0.16);
  --green: #a6ce39;
  --green-bright: #c8e85c;
  --white: #f5f7f1;
  --gray: #a4ad9a;
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bottom-bar-h: 68px;
}

/* Base: tudo abaixo é pensado pro celular primeiro. Telas maiores só recebem
   ajustes extras lá embaixo, em @media (min-width: ...) */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--white);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: var(--bottom-bar-h);
}

img { max-width: 100%; display: block; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: #000;
  padding: 0.75rem 1rem;
  z-index: 300;
}
.skip-link:focus { left: 0; }

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.accent { color: var(--green-bright); }

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.14;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2rem, 9vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 7vw, 2.4rem); margin-bottom: 1.1rem; }
h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  color: var(--green-bright);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 0.7rem;
}
.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(166, 206, 57, 0.2);
  flex-shrink: 0;
}

.lead-answer {
  color: var(--white);
  font-size: 1.05rem;
  max-width: 640px;
}

p { color: var(--gray); }

/* Sem cabeçalho fixo no site. A marca aparece só no escudo do hero e no rodapé */
.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--white);
  text-decoration: none;
  flex-shrink: 0;
}
.logo-badge { border-radius: 50%; flex-shrink: 0; }

/* Buttons: alvo de toque generoso pro polegar */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--green); color: #05060a; }
.btn-primary:hover { box-shadow: 0 10px 28px rgba(166, 206, 57, 0.35); }
.btn-whatsapp { background: #25d366; color: #05060a; }
.btn-whatsapp:hover { box-shadow: 0 10px 28px rgba(37, 211, 102, 0.35); }
.btn-ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(245, 247, 241, 0.25); }
.btn-ghost:hover { border-color: var(--green); color: var(--green-bright); }
.btn-sm { min-height: 44px; padding: 0.6rem 1.2rem; font-size: 0.85rem; }
.hero-actions { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1.5rem; }
.hero-actions.center { align-items: center; margin-top: 2.2rem; }
.hero-actions .btn { width: 100%; }
.hero-actions.center .btn { width: auto; }

/* Barra fixa de WhatsApp: única ação persistente do site, sempre visível */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  height: var(--bottom-bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  background: rgba(8, 9, 10, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--panel-border);
}
.mobile-cta .btn { width: 100%; max-width: 420px; min-height: 46px; }

/* Hero */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: 2.5rem 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 10, 0.75) 0%, rgba(8, 9, 10, 0.97) 75%);
}
.hero-content { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; text-align: center; }
.hero-content .eyebrow { justify-content: center; }
.hero-lead { font-size: 1rem; margin-bottom: 0.5rem; }

.hero-crest {
  display: flex;
  justify-content: center;
  position: relative;
  margin-bottom: 1.4rem;
}
.hero-crest::before {
  content: '';
  position: absolute;
  inset: -34px;
  background: radial-gradient(circle, rgba(166, 206, 57, 0.4), transparent 70%);
  filter: blur(6px);
  z-index: -1;
}
.hero-crest-img {
  width: clamp(92px, 28vw, 140px);
  height: clamp(92px, 28vw, 140px);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(166, 206, 57, 0.45), 0 20px 50px rgba(0, 0, 0, 0.55);
}

/* Marquee: faixa diagonal de assinatura entre seções */
.marquee {
  background: var(--green);
  transform: rotate(-1.5deg) scale(1.06);
  overflow: hidden;
  white-space: nowrap;
  margin: -0.9rem 0;
  position: relative;
  z-index: 2;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  animation: marquee 18s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 4.5vw, 1.3rem);
  color: #05060a;
  text-transform: uppercase;
  padding: 0.8rem 1.1rem;
  white-space: nowrap;
}
.marquee-track span:not(:last-child)::after { content: '\2726'; margin-left: 1.1rem; opacity: 0.5; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Mural de prova social: fotos e vídeos reais passando pela tela sem parar,
   mesma técnica de rolagem infinita da faixa de texto (duplica o conteúdo). */
.reels-wall {
  overflow: hidden;
  white-space: nowrap;
  margin-top: 2.5rem;
}
.reels-track {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  animation: reels-scroll 34s linear infinite;
}
.reel-tile {
  flex: 0 0 auto;
  width: 150px;
  aspect-ratio: 9/16;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  background: var(--void);
}
.reel-tile img, .reel-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes reels-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.reels-wall--reverse { margin-top: 0.8rem; }
.reels-track--reverse { animation-direction: reverse; }

/* Manifesto: frases de impacto + comparação direta com academia de rede */
.manifesto-lines { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0; }
.manifesto-lines span { display: block; }
.manifesto-lines > [data-reveal]:nth-child(1) { transition-delay: 0.05s; }
.manifesto-lines > [data-reveal]:nth-child(2) { transition-delay: 0.2s; }
.manifesto-lines > [data-reveal]:nth-child(3) { transition-delay: 0.35s; }

.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 2.5rem 0;
}
.compare-col { position: relative; border-radius: 16px; padding: 1.6rem; border: 1px solid var(--panel-border); }
.compare-col--bad { background: var(--void); opacity: 0.8; }
.compare-col--good {
  background: var(--panel);
  border: 2px solid var(--green);
  box-shadow: 0 0 0 1px rgba(166, 206, 57, 0.3), 0 25px 60px rgba(166, 206, 57, 0.18);
}
.compare-badge {
  display: inline-block;
  background: var(--green);
  color: #05060a;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  margin: 0 0 0.9rem;
}
.compare-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--white);
}
.compare-col--good .compare-label { color: var(--green-bright); }
.compare-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.compare-col li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--gray); font-size: 0.95rem; }
.compare-col--good li { color: var(--white); }
.compare-col li svg { flex-shrink: 0; margin-top: 0.1rem; }
.compare-col--bad li svg { color: var(--gray); }
.compare-col--good li svg { color: var(--green); }
.compare-col:nth-child(2) { transition-delay: 0.1s; }

/* Sections */
.section { padding: 3.5rem 0; }
.section-dark { background: var(--panel); }
.section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.tilt-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  will-change: transform;
  transition: transform 0.15s ease-out;
}
.tilt-card img { width: 100%; height: 100%; object-fit: cover; }
/* Essa foto tem um texto de post do Instagram colado no rodapé da imagem
   original; corta quadrado a partir do topo pra nunca mostrar esse texto */
.diferencial-photo { aspect-ratio: 1/1; }
.diferencial-photo img { object-position: center top; }

/* Brilho que segue o cursor: só nos cards que são foto (nunca por cima de texto), e só
   onde existe cursor de verdade (ver media hover:hover mais abaixo) */
.tilt-card:has(> img)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), rgba(166, 206, 57, 0.4), transparent 70%);
  mix-blend-mode: overlay;
  transition: opacity 0.4s ease;
}

.modalidades-photo { margin-top: 2rem; max-height: 320px; }
.modalidades-photo img { max-height: 320px; object-fit: cover; }

/* Cards */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 2rem;
}
.card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 1.6rem;
}
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--green);
  color: var(--green-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.cards-grid > *:nth-child(1) { transition-delay: 0.05s; }
.cards-grid > *:nth-child(2) { transition-delay: 0.15s; }
.cards-grid > *:nth-child(3) { transition-delay: 0.25s; }

/* Team */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.team-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  text-align: center;
  border-radius: 16px;
}
.team-card img {
  aspect-ratio: 3/4;
  object-fit: cover;
  height: auto;
  border-radius: 16px 16px 0 0;
  filter: grayscale(85%);
  transition: filter 0.5s ease;
}
.team-card--initials { display: flex; flex-direction: column; justify-content: center; aspect-ratio: 3/4; }
.team-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(166, 206, 57, 0.12);
  border: 2px solid var(--green);
  color: var(--green-bright);
  font-family: var(--font-display);
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 0 25px rgba(166, 206, 57, 0.4);
}

/* Fotos com fundo recortado, "iluminadas" por um brilho verde atrás, tipo LED.
   O card vira coluna flexível pra pessoa sempre encostar embaixo, na moldura,
   em vez de flutuar solta no meio do card (a sobra de altura fica em cima, no
   espaço do brilho, nunca embaixo). */
.team-card--cutout { overflow: visible; display: flex; flex-direction: column; }
.cutout-wrap {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 180px;
  padding: 1.2rem 0.4rem 0;
  overflow: visible;
}
.cutout-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 65% 60% at 50% 100%, rgba(166, 206, 57, 0.4), transparent 72%);
  filter: blur(8px);
}
.team-card--cutout .cutout-img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 98%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 0;
  filter: drop-shadow(0 0 16px rgba(166, 206, 57, 0.55)) drop-shadow(0 0 42px rgba(166, 206, 57, 0.3));
  transition: filter 0.4s ease;
}
.team-info { position: relative; z-index: 2; padding: 0.85rem 0.6rem; }
.team-info h3 { margin-bottom: 0.1rem; font-size: 1rem; }
.team-info p { margin: 0; font-size: 0.82rem; }
.team-grid > *:nth-child(1) { transition-delay: 0.05s; }
.team-grid > *:nth-child(2) { transition-delay: 0.12s; }
.team-grid > *:nth-child(3) { transition-delay: 0.19s; }
.team-grid > *:nth-child(4) { transition-delay: 0.26s; }
/* Número ímpar de pessoas: no celular (2 colunas) a última fica centralizada */
.team-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.5rem); }

/* Plans */
.plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 2rem;
}
.plan-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 1.8rem 1.5rem;
  text-align: center;
  position: relative;
}
.plan-card--highlight { border-color: var(--green); background: rgba(166, 206, 57, 0.07); }
.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: #05060a;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
}
.plan-freq { color: var(--gray); margin-bottom: 0.5rem; }
.plan-price { font-family: var(--font-display); font-size: 2rem; color: var(--white); margin: 0; }
.plan-price span { font-family: var(--font-body); font-weight: 400; font-size: 1rem; color: var(--gray); }
.plans-note { text-align: center; margin-top: 1.5rem; }
.plans-grid > *:nth-child(1) { transition-delay: 0.05s; }
.plans-grid > *:nth-child(2) { transition-delay: 0.15s; }
.plans-grid > *:nth-child(3) { transition-delay: 0.25s; }
.plans-grid > *:nth-child(4) { transition-delay: 0.35s; }

/* FAQ */
.faq { margin-top: 2.5rem; max-width: 720px; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--panel-border);
  padding: 1rem 0;
}
.faq summary {
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--green-bright); font-size: 1.3rem; }
.faq details[open] summary::after { content: '\2013'; }
.faq p { margin: 0.8rem 0 0; }

/* Location */
.address { font-size: 1rem; color: var(--white); }
.hours-table { border-collapse: collapse; margin: 1rem 0 1.5rem; width: 100%; max-width: 360px; }
.hours-table th, .hours-table td {
  text-align: left;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--panel-border);
  font-weight: 400;
  color: var(--gray);
}
.hours-table th { color: var(--white); font-weight: 500; }
.map-embed { aspect-ratio: 1/1; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--panel-border);
  padding: 2.5rem 0 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; position: relative; z-index: 1; }
.footer-inner .logo { margin-bottom: 0.6rem; font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.03em; }
.footer-inner p { margin: 0.3rem 0; color: var(--gray); font-size: 0.9rem; }
.footer-inner a { color: var(--green-bright); text-decoration: none; }
/* Crédito da eazymode: padrão em todo site feito pela eazymode */
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.footer-credit, .footer-inner a.footer-credit { color: rgba(255, 255, 255, 0.8); }
.footer-credit img { width: 48px; height: 48px; }
.site-footer::before {
  content: 'NO LIMITE';
  position: absolute;
  left: 50%;
  bottom: -2.2rem;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 18vw, 9rem);
  color: var(--panel);
  white-space: nowrap;
  letter-spacing: 0.01em;
  z-index: 0;
  line-height: 1;
}

/* Rolagem suave (Lenis): arquivo em assets/lenis.min.js, licença MIT */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.map-embed iframe { pointer-events: auto !important; }

[id] { scroll-margin-top: 16px; }

/* Grão fino sobre a página inteira: evita que o tema escuro pareça "chapado" */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%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");
  background-size: 180px 180px;
}

/* Só liga o brilho e o giro 3D dos cards em telas que realmente têm cursor (mouse) */
@media (hover: hover) and (pointer: fine) {
  .tilt-card:has(> img):hover::before { opacity: 1; }
  .team-card--cutout:hover .cutout-img {
    filter: drop-shadow(0 0 20px rgba(166, 206, 57, 0.75)) drop-shadow(0 0 56px rgba(166, 206, 57, 0.45));
  }
}

/* Scroll reveal: só esconde o conteúdo quando o JS realmente rodou (o site inteiro
   continua legível sem JS e pra robôs de busca que não executam JS) */
.js [data-reveal] {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out),
              filter 0.9s var(--ease-out),
              transform 0.7s var(--ease-snap);
}
.js [data-reveal].is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.js [data-reveal="text"] {
  filter: blur(6px);
  letter-spacing: 0.1em;
  transition: opacity 1.1s var(--ease-out),
              filter 1.1s var(--ease-out),
              transform 1.1s var(--ease-out),
              letter-spacing 1.1s var(--ease-out);
}
.js [data-reveal="text"].is-visible { letter-spacing: 0.01em; }

.hero-content > [data-reveal]:nth-child(1) { transition-delay: 0.05s; }
.hero-content > [data-reveal]:nth-child(2) { transition-delay: 0.2s; }
.hero-content > [data-reveal]:nth-child(3) { transition-delay: 0.4s; }
.hero-content > [data-reveal]:nth-child(4) { transition-delay: 0.55s; }
.hero-content > [data-reveal]:nth-child(5) { transition-delay: 0.7s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; filter: none; transform: none; transition: none; }
  .js [data-reveal="text"] { letter-spacing: 0.01em; }
  .tilt-card { transition: none !important; transform: none !important; }
  .tilt-card::before { display: none; }
  .marquee-track { animation: none; }
  .reels-track { animation: none; }
  .reels-wall { overflow-x: auto; }
  .team-card--cutout .cutout-img { transition: none; }
}

/* A partir daqui, telas maiores que celular ganham extras: grades em colunas,
   menos empilhamento. A barra fixa de WhatsApp continua em todas as telas */
@media (min-width: 640px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid > :last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
  .team-card--initials { aspect-ratio: auto; }
  .plans-grid { grid-template-columns: repeat(2, 1fr); }
  .compare { grid-template-columns: 1fr 1fr; align-items: center; }
  .compare-col--good { margin-top: -10px; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .hero-actions .btn { width: auto; }
  .hero-content .hero-actions, .hero-actions.center { justify-content: center; }
}

@media (min-width: 860px) {
  .hero { min-height: 92vh; }
  .hero-lead { font-size: 1.05rem; }
  .section { padding: 5.5rem 0; }
  .section-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .cards-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
  .modalidades-photo { margin-top: 2.5rem; max-height: 420px; }
  .modalidades-photo img { max-height: 420px; }
  .plans-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
  .map-embed { aspect-ratio: 4/3; }
}