/* ═══════════════════════════════════════════════════════════════
   FÁBRICA PREMIUM — SALA DE SPINNING
   Página de venda única. Mobile first, comportamento de app.

   REGRA CROMÁTICA (manual oficial 04/04/2025), a mesma do site:
   · Chrome da interface FRIO e acromático: #0E0F0F, #F8FDFF,
     #969CA3 e a textura prata. Nada mais.
   · O ÂMBAR/NEON nunca preenche um elemento de interface. Só
     aparece como LUZ que escapa da fotografia.
   · Nenhum dourado.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:      #0E0F0F;
  --paper:    #F8FDFF;
  --steel:    #969CA3;

  --ink-1:  #121414;
  --ink-2:  #171A1A;
  --ink-3:  #1F2323;
  --ink-4:  #2A2F2F;

  --hair:    rgba(150,156,163,.14);
  --hair-2:  rgba(150,156,163,.26);

  /* alpha calibrado para AA sobre o preto da marca */
  --mute:    rgba(248,253,255,.62);
  --mute-2:  rgba(248,253,255,.52);

  --ember:      32 86% 55%;
  --ember-soft: hsl(32 86% 55% / .18);
  --ember-dim:  hsl(32 70% 45% / .10);

  --silver: linear-gradient(103deg,
      #6E767E 0%,  #C4CCD3 14%, #F4F9FC 27%, #A9B2BA 41%,
      #E2E8ED 56%, #8B939B 70%, #D6DDE3 85%, #79818A 100%);

  --display: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
  --body:    "Chivo", "Segoe UI", system-ui, sans-serif;

  --app:    clamp(320px, 100vw, 560px);
  --pad:    22px;
  --r:      18px;
  --r-lg:   26px;
  --dock-h: calc(76px + env(safe-area-inset-bottom));
  --bar-h:  58px;
}

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  /* clip, não hidden: hidden faria overflow-y virar auto e o body
     poderia virar container de rolagem sem querer */
  overflow-x:clip;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.56;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--dock-h);
}

img,video{ display:block; max-width:100%; height:auto }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit; text-decoration:none }

::selection{ background:rgba(248,253,255,.18) }

:focus-visible{
  outline:2px solid var(--paper);
  outline-offset:3px;
  border-radius:4px;
}

/* ── casca do app ─────────────────────────────────────────── */
.app{
  width:var(--app);
  margin-inline:auto;
  position:relative;
}

.wrap{ padding-inline:var(--pad) }

/* ═══════════ tipografia ═══════════ */
.kicker{
  font-family:var(--display);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--steel);
  margin:0 0 14px;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  line-height:.92;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.9rem, 13.5vw, 4.1rem) }
h2{ font-size:clamp(2.1rem, 9vw, 2.8rem) }
h3{ font-size:1.18rem; line-height:1.06 }

p{ margin:0 }
.lead{ color:var(--mute); font-size:1.02rem }
.small{ color:var(--mute-2); font-size:.86rem; line-height:1.5 }

.prata{
  background:var(--silver);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ═══════════ barra superior ═══════════ */
.bar{
  position:fixed;
  inset:0 auto auto 0;
  width:100%;
  height:var(--bar-h);
  z-index:60;
  display:flex;
  align-items:center;
  pointer-events:none;
  transition:background .35s ease, backdrop-filter .35s ease,
             border-color .35s ease;
  border-bottom:1px solid transparent;
}
.bar.solida{
  background:rgba(14,15,15,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--hair);
}
.bar__in{
  width:var(--app);
  margin-inline:auto;
  padding-inline:var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.bar a,.bar button{ pointer-events:auto }

.logo{ width:108px; display:block }
.logo svg{ width:100%; height:auto; display:block }
.logo svg path,.logo svg polygon,.logo svg rect{ fill:var(--paper) }

.bar__cta{
  font-family:var(--display);
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  padding:9px 15px;
  border:1px solid var(--hair-2);
  border-radius:999px;
  color:var(--paper);
  white-space:nowrap;
  transition:border-color .2s, background .2s;
}
.bar__cta:active{ background:rgba(248,253,255,.08) }

/* ═══════════ hero ═══════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero__midia{
  position:absolute;
  inset:0;
  z-index:-2;
}
.hero__midia img,
.hero__midia video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}
.hero__midia video{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .9s ease;
}
.hero__midia video.on{ opacity:1 }

/* o véu escurece o pé para o texto respirar;
   o glow âmbar é a luz da sala, não um elemento de interface */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(120% 68% at 50% 18%, hsl(var(--ember) / .13), transparent 62%),
    linear-gradient(to bottom,
      rgba(14,15,15,.62) 0%,
      rgba(14,15,15,.22) 26%,
      rgba(14,15,15,.60) 50%,
      rgba(14,15,15,.86) 74%,
      var(--ink) 97%);
}

.hero__txt{
  padding:0 var(--pad) 34px;
  position:relative;
}
.hero h1{ margin-bottom:16px }
.hero .lead{ max-width:33ch }

/* chips de horário no hero */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
}
.chip{
  font-family:var(--display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:7px 13px;
  border:1px solid var(--hair-2);
  border-radius:999px;
  color:var(--paper);
  background:rgba(14,15,15,.4);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.rolar{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:26px;
  color:var(--mute-2);
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-family:var(--display);
  font-weight:600;
}
.rolar i{
  display:block;
  width:1px;
  height:26px;
  background:linear-gradient(var(--steel), transparent);
  animation:desce 2.1s ease-in-out infinite;
}
@keyframes desce{
  0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.4 }
  50%    { transform:scaleY(1);  transform-origin:top; opacity:1 }
}

/* ═══════════ botões ═══════════ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:56px;
  padding:0 24px;
  border-radius:999px;
  font-family:var(--display);
  font-weight:800;
  font-size:1.02rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:transform .14s ease, filter .2s ease;
}
.btn:active{ transform:scale(.976) }

.btn--claro{
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 10px 34px rgba(0,0,0,.5);
}
.btn--claro:active{ filter:brightness(.93) }

.btn--linha{
  border:1px solid var(--hair-2);
  color:var(--paper);
}
.btn--linha:active{ background:rgba(248,253,255,.07) }

.btn svg{ width:19px; height:19px; flex:none }

/* ═══════════ seções ═══════════ */
section{ padding-block:66px }
section > .wrap > .kicker{ margin-bottom:12px }

.secao__intro{ margin-bottom:30px }
.secao__intro .lead{ margin-top:14px }

.risco{
  height:1px;
  background:linear-gradient(90deg, var(--hair-2), transparent);
  border:0;
  margin:0;
}

/* ── cartões de argumento ── */
.pontos{
  display:grid;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.ponto{
  border:1px solid var(--hair);
  border-radius:var(--r);
  background:linear-gradient(180deg, var(--ink-2), var(--ink-1));
  padding:21px 20px;
}
.ponto h3{
  margin-bottom:8px;
  font-size:1.34rem;
  background:var(--silver);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ponto p{ color:var(--mute); font-size:.94rem; line-height:1.52 }

/* ═══════════ horários (o coração da conversão) ═══════════ */
.horarios{
  display:grid;
  gap:12px;
  margin:0 0 20px;
  padding:0;
  list-style:none;
}
.hora{
  position:relative;
  width:100%;
  text-align:left;
  border:1px solid var(--hair-2);
  border-radius:var(--r);
  background:var(--ink-1);
  padding:19px 20px;
  display:flex;
  align-items:center;
  gap:16px;
  transition:border-color .22s ease, background .22s ease, transform .14s ease;
}
.hora:active{ transform:scale(.99) }
.hora.on{
  border-color:rgba(248,253,255,.5);
  background:var(--ink-3);
}
.hora__dia{
  font-family:var(--display);
  font-weight:800;
  font-size:1.45rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.hora__h{
  font-family:var(--display);
  font-weight:800;
  font-size:2.5rem;
  line-height:.86;
  min-width:3.1ch;
}
.hora__nota{
  color:var(--mute-2);
  font-size:.84rem;
  margin-top:3px;
  display:block;
}
.hora__marca{
  margin-left:auto;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid var(--hair-2);
  display:grid;
  place-items:center;
  flex:none;
  transition:background .22s ease, border-color .22s ease;
}
.hora__marca svg{
  width:13px; height:13px;
  opacity:0;
  transform:scale(.5);
  transition:opacity .22s ease, transform .22s ease;
}
.hora.on .hora__marca{
  background:var(--paper);
  border-color:var(--paper);
}
.hora.on .hora__marca svg{ opacity:1; transform:scale(1) }
.hora.on .hora__marca svg path{ stroke:var(--ink) }

.escolha{
  min-height:1.4em;
  color:var(--mute);
  font-size:.9rem;
  margin-bottom:16px;
  transition:opacity .25s ease;
}

/* ═══════════ galeria ═══════════ */
.galeria{
  display:flex;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:2px var(--pad) 4px;
  margin-inline:calc(var(--pad) * -1);
}
.galeria::-webkit-scrollbar{ display:none }

.foto{
  position:relative;
  flex:0 0 74%;
  max-width:300px;
  aspect-ratio:2 / 3;
  border-radius:var(--r-lg);
  overflow:hidden;
  scroll-snap-align:center;
  border:1px solid var(--hair);
  background:var(--ink-2) center/cover no-repeat;
}
.foto img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1), opacity .5s ease;
}
.foto:active img{ transform:scale(1.035) }
.foto img[data-carregando]{ opacity:0 }

.foto__lupa{
  position:absolute;
  right:12px; bottom:12px;
  width:38px; height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(14,15,15,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--hair-2);
}
.foto__lupa svg{ width:16px; height:16px }

/* ═══════════ para quem é ═══════════ */
/* lista editorial, não cartão: fio em cima e ar entre os itens */
.perfis{
  display:grid;
  margin:0;
  padding:0;
  list-style:none;
}
.perfil{
  border-top:1px solid var(--hair);
  padding:19px 0;
}
.perfil:last-child{ border-bottom:1px solid var(--hair) }
.perfil b{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-size:1.26rem;
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-bottom:6px;
}
.perfil p{ color:var(--mute); font-size:.92rem; line-height:1.52 }

/* ═══════════ whey ═══════════
   A foto é o único lugar quente da página. Ela fica contida
   na própria moldura: o creme não vaza para a interface.   */
.whey{ display:grid; gap:20px }

.whey__foto{
  margin:0;
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--ink-2);
}
.whey__foto img{ width:100%; height:auto }
.whey__foto figcaption{
  padding:11px 16px 13px;
  border-top:1px solid var(--hair);
  color:var(--mute-2);
}

.whey__n{
  font-family:var(--display);
  font-weight:800;
  font-size:2.5rem;
  line-height:.9;
  letter-spacing:.005em;
  text-transform:uppercase;
  background:var(--silver);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:12px;
}
.whey__txt p:last-child{ color:var(--mute); font-size:.96rem; line-height:1.54 }

/* ═══════════ planos ═══════════ */
.planos{ display:grid; gap:12px }

.plano{
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--ink-2), var(--ink-1));
  padding:22px 20px;
  position:relative;
  overflow:hidden;
}
.plano--destaque{
  border-color:var(--hair-2);
  background:
    radial-gradient(120% 90% at 50% 0%, hsl(var(--ember) / .09), transparent 60%),
    linear-gradient(180deg, var(--ink-3), var(--ink-1));
}
.plano__tag{
  font-family:var(--display);
  font-weight:700;
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:10px;
}
.plano h3{ font-size:1.42rem; margin-bottom:10px }

.plano__preco{
  font-family:var(--display);
  font-weight:800;
  color:var(--paper);
  font-size:2.7rem;
  line-height:.88;
  letter-spacing:.005em;
  margin-bottom:7px;
}
.plano__aula{
  font-size:.92rem;
  color:var(--paper);
  margin-bottom:10px;
}
.plano__aula span{ color:var(--mute-2) }

/* só aparece quando o pacote realmente sai abaixo da avulsa */
.plano__economia{
  display:inline-block;
  font-size:.79rem;
  line-height:1;
  padding:7px 11px;
  margin-bottom:12px;
  border:1px solid var(--hair-2);
  border-radius:999px;
  color:var(--paper);
}
.plano__d{ color:var(--mute); font-size:.92rem; line-height:1.5 }
.plano .btn{ margin-top:16px }

.nota-plano{
  margin-top:18px;
  padding-top:17px;
  border-top:1px solid var(--hair);
}

/* ═══════════ faq ═══════════ */
.faq{ display:grid; gap:0 }
.q{
  border-bottom:1px solid var(--hair);
}
.q:first-child{ border-top:1px solid var(--hair) }
.q__bt{
  width:100%;
  text-align:left;
  padding:19px 34px 19px 0;
  position:relative;
  font-family:var(--display);
  font-weight:700;
  font-size:1.04rem;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.q__bt::after{
  content:"";
  position:absolute;
  right:4px; top:50%;
  width:11px; height:11px;
  border-right:1.5px solid var(--steel);
  border-bottom:1.5px solid var(--steel);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.q.on .q__bt::after{ transform:translateY(-20%) rotate(225deg) }

.q__r{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .34s cubic-bezier(.2,.7,.3,1);
}
.q.on .q__r{ grid-template-rows:1fr }
.q__r > div{ overflow:hidden }
.q__r p{
  color:var(--mute);
  font-size:.94rem;
  line-height:1.56;
  padding-bottom:19px;
}

/* ═══════════ fecho ═══════════ */
.fecho{
  text-align:center;
  padding-block:78px 60px;
  position:relative;
  isolation:isolate;
}
.fecho::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(90% 60% at 50% 50%, hsl(var(--ember) / .10), transparent 68%);
}
.fecho h2{ margin-bottom:16px }
.fecho .lead{ margin-bottom:28px }

.rodape{
  border-top:1px solid var(--hair);
  padding:26px var(--pad) 34px;
  text-align:center;
  color:var(--mute-2);
  font-size:.79rem;
  line-height:1.6;
}
.rodape a{ text-decoration:underline; text-underline-offset:3px }

/* ═══════════ dock fixo ═══════════ */
.dock{
  position:fixed;
  inset:auto 0 0 0;
  z-index:70;
  padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  background:rgba(14,15,15,.9);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-top:1px solid var(--hair);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.dock.on{ transform:none }
.dock__in{
  width:var(--app);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ═══════════ lightbox ═══════════ */
.lb{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(8,9,9,.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:grid;
  place-items:center;
  padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s;
}
.lb.on{ opacity:1; visibility:visible }

.lb__palco{
  width:100%;
  max-width:460px;
  max-height:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.lb__midia{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--ink-1);
  display:grid;
  place-items:center;
  min-height:0;
}
.lb__midia img,
.lb__midia video{
  width:100%;
  max-height:72svh;
  object-fit:contain;
}
.lb__cap{
  color:var(--mute);
  font-size:.86rem;
  text-align:center;
}
.lb__x{
  position:absolute;
  top:max(14px, env(safe-area-inset-top));
  right:14px;
  width:42px; height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(248,253,255,.1);
  border:1px solid var(--hair-2);
  z-index:2;
}
.lb__x svg{ width:17px; height:17px }

/* ═══════════ revelação no scroll ═══════════ */
.rv{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .66s cubic-bezier(.2,.7,.3,1),
             transform .66s cubic-bezier(.2,.7,.3,1);
}
.rv.on{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none }
  .rolar i{ animation:none }
  *{ transition-duration:.01ms !important }
}

/* ═══════════ desktop: mantém a coluna, muda o entorno ═══════════ */
@media (min-width:900px){
  body{
    background:
      radial-gradient(60% 50% at 50% 0%, var(--ink-2), var(--ink) 70%);
  }
  .app{
    box-shadow:0 0 0 1px var(--hair), 0 40px 120px rgba(0,0,0,.6);
  }
  .hero{ min-height:92svh }
  section{ padding-block:78px }
}

/* ── o hero roda sobre vídeo: o texto precisa de uma sombra
      própria para não depender só do véu ───────────────────── */
.hero h1,
.hero .lead,
.hero .kicker{ text-shadow:0 2px 22px rgba(8,9,9,.6) }