@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap");

/* ============================================================
   INFRARED — Fotobiomodulação Sistêmica
   Tokens copiados de business/design-system/infrared/
   Padrão: DESIGN-INFRARED.md
   Quarto preto, uma única fonte de luz vermelha.
   O vermelho é o único evento cromático da página.
   ============================================================ */

:root{
  /* Rampa do vermelho da marca */
  --red-300:#EC6165;--red-400:#E63A3F;--red-500:#E11F26;
  --red-600:#C2161C;--red-700:#951014;--red-900:#380406;

  /* Neutros: preto de gabinete → branco de estúdio */
  --ink-950:#050506;--ink-900:#0B0B0D;--ink-850:#121215;--ink-800:#18181C;
  --ink-700:#232329;--ink-600:#33333B;--ink-500:#4D4D57;--ink-400:#6E6E79;
  --ink-300:#9A9AA4;--ink-200:#C6C6CD;--ink-100:#E4E4E8;
  --white:#FFFFFF;--off-white:#F4F2F2;
  --ir-glow:#FF3B33;

  --bg-page:var(--ink-950);
  --bg-surface:var(--ink-900);
  --bg-raised:var(--ink-850);
  --bg-inset:var(--ink-800);

  --text-primary:var(--white);
  --text-secondary:var(--ink-300);
  --text-muted:var(--ink-400);
  --text-accent:var(--red-500);
  --text-on-red:var(--white);

  --border-hairline:rgba(255,255,255,.08);
  --border-subtle:rgba(255,255,255,.14);
  --border-strong:rgba(255,255,255,.28);
  --border-accent:var(--red-500);

  --action-primary:var(--red-500);
  --action-primary-hover:var(--red-400);
  --action-primary-press:var(--red-600);
  --focus-ring:var(--red-400);

  /* A assinatura: o bloom infravermelho */
  --shadow-md:0 8px 24px rgba(0,0,0,.55);
  --shadow-lg:0 24px 64px rgba(0,0,0,.65);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.06);
  --glow-sm:0 0 12px rgba(225,31,38,.35);
  --glow-md:0 0 28px rgba(225,31,38,.45);
  --glow-lg:0 0 64px rgba(225,31,38,.55);
  --glow-text:0 0 18px rgba(255,59,51,.6);
  --glow-edge:inset 0 0 0 1px rgba(225,31,38,.5),0 0 22px rgba(225,31,38,.35);

  /* Gradientes: vermelho-para-preto apenas. Nunca azul-roxo. */
  --grad-ember:linear-gradient(180deg,#050506 0%,#180406 60%,#3A070A 100%);
  --grad-red:linear-gradient(135deg,var(--red-500) 0%,var(--red-700) 100%);
  --grad-scrim:linear-gradient(180deg,rgba(5,5,6,0) 0%,rgba(5,5,6,.85) 70%,#050506 100%);
  --grad-hairline:linear-gradient(90deg,rgba(225,31,38,0),var(--red-500),rgba(225,31,38,0));
  --grad-vignette:radial-gradient(120% 90% at 50% 0%,rgba(225,31,38,.22) 0%,rgba(5,5,6,0) 60%);
  --glass-fill:rgba(18,18,21,.66);

  /* Espaçamento — seções respiram a 128px */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:24px;--space-6:32px;--space-7:40px;--space-8:56px;--space-9:72px;
  --space-10:96px;--space-11:128px;--space-12:180px;

  --gutter:24px;
  --container-max:1240px;
  --container-narrow:760px;

  --radius-sm:4px;
  --radius-md:8px;   /* controles e wells */
  --radius-lg:14px;  /* card */
  --radius-xl:22px;  /* painéis de herói */
  --radius-pill:999px;
  --radius-circle:50%;

  /* Tipografia */
  --font-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-body:"Manrope","Helvetica Neue",Arial,sans-serif;

  --fs-3xs:11px;--fs-2xs:12px;--fs-xs:13px;--fs-sm:15px;--fs-base:17px;
  --fs-lg:20px;--fs-xl:25px;--fs-2xl:31px;--fs-3xl:39px;--fs-4xl:49px;
  --fs-5xl:61px;--fs-6xl:76px;

  --ls-display:-0.02em;
  --ls-wide:0.08em;
  --ls-wider:0.18em;   /* eyebrows, nav, labels */
  --ls-widest:0.32em;  /* a linha do lockup */

  /* Movimento — duas velocidades. Sem bounce, sem spring, sem parallax. */
  --dur-fast:160ms;--dur-base:260ms;--dur-slow:420ms;--dur-ambient:2400ms;
  --ease-standard:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-glow:cubic-bezier(.4,0,.2,1);
}

@keyframes ir-pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg-page);
  color:var(--text-secondary);
  font:400 var(--fs-base)/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;color:var(--text-primary);font-family:var(--font-display);letter-spacing:var(--ls-display)}
p{margin:0}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:none;border-color:var(--focus-ring);box-shadow:var(--glow-sm)}

/* ── Primitivas ───────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:var(--container-narrow)}

/* Caixa alta larga é o tell verbal mais forte da marca. */
.eyebrow{
  font-family:var(--font-display);
  font-size:var(--fs-2xs);
  font-weight:600;
  letter-spacing:var(--ls-widest);
  text-transform:uppercase;
  color:var(--red-500);
  margin:0;
}
.eyebrow--muted{color:var(--text-muted)}

.divider{
  height:1px;
  background:var(--grad-hairline);
  border:0;
  margin:var(--space-5) 0;
}

section{padding-block:var(--space-11)}
@media (max-width:760px){section{padding-block:var(--space-9)}}

.section-head{margin-bottom:var(--space-9);max-width:var(--container-narrow)}
.section-head h2{
  font-size:var(--fs-3xl);
  font-weight:700;
  line-height:1.15;
  margin-top:var(--space-4);
}
.section-head p{margin-top:var(--space-5);color:var(--text-secondary)}
@media (max-width:760px){.section-head h2{font-size:var(--fs-2xl)}}

/* ── Botões — hover é MAIS LUZ, nunca fade de opacidade ───── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  min-height:56px;
  padding:0 var(--space-7);
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-family:var(--font-display);
  font-size:var(--fs-2xs);
  font-weight:700;
  letter-spacing:var(--ls-wider);
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-glow),
             transform var(--dur-fast) var(--ease-standard);
}
.btn--primary{background:var(--action-primary);color:var(--text-on-red);box-shadow:var(--glow-sm)}
.btn--primary:hover{background:var(--action-primary-hover);box-shadow:var(--glow-md)}
.btn--primary:active{background:var(--action-primary-press);transform:scale(.97)}
.btn--outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn--outline:hover{border-color:var(--red-500);color:var(--white);box-shadow:var(--glow-sm)}
.btn--outline:active{transform:scale(.97)}
.btn--sm{min-height:44px;padding:0 var(--space-5);font-size:var(--fs-3xs)}
.btn--block{width:100%}
.btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none}

/* ── Header ───────────────────────────────────────────────── */
.header{
  position:sticky;top:0;z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard);
}
.header.is-scrolled{
  background:var(--glass-fill);
  backdrop-filter:blur(18px) saturate(120%);
  border-bottom-color:var(--border-hairline);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:84px}
/* ── Lockup INFRARED LABS ─────────────────────────────────
   Símbolo e LABS empilhados à esquerda, filete de luz, e o
   wordmark com o descritor ao lado. Aprovado em 19/08/2026.
   ⚠️ O wordmark aqui é tipografia (Montserrat), não o PNG
   original — provisório até existir o arquivo vetorial. */
/* Uma altura só governa o lockup inteiro: os dois lados ocupam
   exatamente --lockup-h, então nada fica mais alto que o outro. */
.logo{--lockup-h:40px;display:flex;align-items:center;gap:14px;text-decoration:none}
.logo__mark{
  height:var(--lockup-h);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
}
.logo__mark img{height:calc(var(--lockup-h) * .66);width:auto;display:block}
.logo__labs{
  font-family:var(--font-display);
  font-size:calc(var(--lockup-h) * .21);
  font-weight:600;
  letter-spacing:.4em;
  color:var(--off-white);
  padding-left:.4em;
  line-height:1;
}
.logo__rule{width:1px;height:var(--lockup-h);background:var(--red-500);box-shadow:var(--glow-sm);flex:none}
/* O wordmark é a LETRA ORIGINAL da marca, recortada do logo horizontal —
   não é tipografia recriada. Ver assets/logo-wordmark-onDark.png */
.logo__wordmark{height:var(--lockup-h);width:auto;display:block}
@media (max-width:600px){
  .logo{--lockup-h:30px;gap:10px}
}
.footer__logo .logo{margin-bottom:var(--space-4)}
.header nav{display:none;gap:var(--space-7);align-items:center}
@media (min-width:1000px){.header nav{display:flex}}
.header nav a{
  font-family:var(--font-display);
  font-size:var(--fs-3xs);
  font-weight:600;
  letter-spacing:var(--ls-wider);
  text-transform:uppercase;
  color:var(--text-secondary);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-standard),text-shadow var(--dur-base) var(--ease-glow);
}
.header nav a:hover{color:var(--white);text-shadow:var(--glow-text)}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{
  position:relative;
  padding-block:var(--space-12) var(--space-11);
  overflow:hidden;
  background:var(--bg-page);
}
@media (max-width:760px){.hero{padding-block:var(--space-9)}}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.hero__bg::after{content:"";position:absolute;inset:0;background:var(--grad-scrim)}
.hero__vignette{position:absolute;inset:0;background:var(--grad-vignette);pointer-events:none}
.hero__inner{position:relative;z-index:2;max-width:820px}
.hero h1{
  font-size:var(--fs-5xl);
  font-weight:800;
  line-height:1.02;
  margin-top:var(--space-5);
}
@media (max-width:760px){.hero h1{font-size:var(--fs-3xl)}}
.hero h1 em{font-style:normal;color:var(--red-500);text-shadow:var(--glow-text)}
.hero__lead{margin-top:var(--space-6);font-size:var(--fs-lg);color:var(--text-secondary);max-width:60ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-8)}
.hero__strip{
  display:flex;flex-wrap:wrap;gap:var(--space-7);
  margin-top:var(--space-9);padding-top:var(--space-6);
  border-top:1px solid var(--border-hairline);
}
.hero__strip div{min-width:150px}
.hero__strip dt{
  font-family:var(--font-display);
  font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:var(--space-2);
}
.hero__strip dd{margin:0;font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;color:var(--white)}

/* ── Cards de benefício — ícone circulado em vermelho ─────── */
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-5)}
.bcard{
  background:var(--bg-raised);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);
  padding:var(--space-7);
  transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-glow);
}
.bcard:hover{border-color:rgba(225,31,38,.45);box-shadow:var(--glow-sm)}
.bcard__icon{
  width:48px;height:48px;border-radius:var(--radius-circle);
  border:1px solid var(--red-500);
  display:grid;place-items:center;margin-bottom:var(--space-5);
}
.bcard__icon svg{width:22px;height:22px;stroke:var(--red-500);stroke-width:1.5;fill:none}
/* Padrão de benefício: título de duas palavras, caixa alta, vermelho */
.bcard h3{
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:var(--ls-wider);
  text-transform:uppercase;
  color:var(--red-500);
  margin-bottom:var(--space-3);
}
.bcard p{font-size:var(--fs-sm);color:var(--text-secondary)}

/* ── Comparação ───────────────────────────────────────────── */
.compare{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--border-hairline);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
@media (max-width:760px){.compare{grid-template-columns:1fr}}
.compare__col{background:var(--bg-surface);padding:var(--space-7)}
.compare__col--ours{background:var(--bg-raised);box-shadow:var(--glow-edge)}
.compare__title{
  font-family:var(--font-display);font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:var(--space-5);
}
.compare__col--ours .compare__title{color:var(--red-500)}
.compare__col li{
  display:flex;gap:var(--space-4);padding:var(--space-4) 0;
  border-bottom:1px solid var(--border-hairline);
  font-size:var(--fs-sm);color:var(--text-secondary);
}
.compare__col li:last-child{border-bottom:0}
.compare__col li b{color:var(--white);font-weight:600;min-width:96px;flex:none;
  font-family:var(--font-display);font-size:var(--fs-3xs);letter-spacing:var(--ls-wide);text-transform:uppercase}

/* ══ CICLOS — a área de compra ═════════════════════════════ */
.cycles-section{background:var(--grad-ember);border-block:1px solid var(--border-hairline)}
.cycles{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--space-5);align-items:stretch}
.cycle{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--bg-raised);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl);
  padding:var(--space-7);
  transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-glow);
}
.cycle:hover{border-color:rgba(225,31,38,.45);box-shadow:var(--glow-md)}
.cycle--featured{border-color:var(--red-500);box-shadow:var(--glow-md)}
.cycle__flag{
  position:absolute;top:-11px;left:var(--space-7);
  background:var(--action-primary);color:var(--text-on-red);
  font-family:var(--font-display);font-size:var(--fs-3xs);font-weight:700;
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);
  box-shadow:var(--glow-sm);
}
.cycle__step{
  font-family:var(--font-display);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);
}
.cycle__name{
  font-family:var(--font-display);
  font-size:var(--fs-2xl);font-weight:800;
  letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--white);margin:var(--space-3) 0 var(--space-2);
}
.cycle--featured .cycle__name{color:var(--red-500);text-shadow:var(--glow-text)}
.cycle__sessions{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-wide);color:var(--text-secondary);text-transform:uppercase}
.cycle__price{margin:var(--space-6) 0 var(--space-2);display:flex;align-items:baseline;gap:var(--space-3)}
.cycle__price strong{font-family:var(--font-display);font-size:var(--fs-4xl);font-weight:800;color:var(--white);line-height:1}
.cycle__price span{font-size:var(--fs-sm);color:var(--text-muted)}
.cycle__terms{font-size:var(--fs-xs);color:var(--text-muted)}
.cycle__desc{margin:var(--space-6) 0;font-size:var(--fs-sm);color:var(--text-secondary)}
.cycle__list{margin:0 0 var(--space-7);display:grid;gap:var(--space-3)}
.cycle__list li{display:flex;gap:var(--space-3);font-size:var(--fs-sm);color:var(--text-secondary)}
.cycle__list svg{width:16px;height:16px;stroke:var(--red-500);stroke-width:1.5;fill:none;flex:none;margin-top:5px}
.cycle .btn{margin-top:auto}

.cycles-note{
  margin-top:var(--space-8);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);
  background:rgba(18,18,21,.5);
  padding:var(--space-6);
  font-size:var(--fs-sm);
  color:var(--text-muted);
  max-width:var(--container-narrow);
}

/* ── Jornada ──────────────────────────────────────────────── */
.journey{display:grid;gap:var(--space-2)}
.jstep{
  display:grid;grid-template-columns:64px 1fr;gap:var(--space-6);
  align-items:start;padding:var(--space-6) 0;
  border-bottom:1px solid var(--border-hairline);
}
.jstep:last-child{border-bottom:0}
.jstep__mark{
  width:44px;height:44px;border-radius:var(--radius-circle);
  border:1px solid var(--red-500);display:grid;place-items:center;
  font-family:var(--font-display);font-size:var(--fs-2xs);font-weight:700;
  color:var(--red-500);
}
.jstep h3{
  font-size:var(--fs-sm);font-weight:700;
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--white);margin-bottom:var(--space-2);
}
.jstep p{font-size:var(--fs-sm);color:var(--text-secondary);max-width:64ch}

/* ── Parceria ─────────────────────────────────────────────── */
.partner{
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);
  background:var(--bg-raised);
  padding:var(--space-8);
  max-width:var(--container-narrow);
}
.partner p{color:var(--text-secondary)}
.partner p + p{margin-top:var(--space-4)}

/* ── CTA final ────────────────────────────────────────────── */
.cta{background:var(--grad-ember);border-top:1px solid var(--border-hairline);text-align:center}
.cta h2{font-size:var(--fs-3xl);font-weight:800;line-height:1.1}
.cta p{margin:var(--space-5) auto var(--space-8);max-width:56ch;color:var(--text-secondary)}

/* ── Footer ───────────────────────────────────────────────── */
.footer{background:var(--bg-page);border-top:1px solid var(--border-hairline);padding-block:var(--space-9)}
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-8);margin-bottom:var(--space-8)}
.footer h4{
  font-family:var(--font-display);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--text-muted);margin:0 0 var(--space-4);
}
.footer li{margin-bottom:var(--space-2);font-size:var(--fs-sm);color:var(--text-secondary)}
.footer a{color:var(--text-secondary);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
.footer a:hover{color:var(--red-500)}
.footer__base{
  border-top:1px solid var(--border-hairline);padding-top:var(--space-6);
  display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;
  font-size:var(--fs-xs);color:var(--ink-500);
}
.footer__logo img{height:30px;width:auto;margin-bottom:var(--space-4)}

/* ── CTA flutuante (mobile) ───────────────────────────────── */
.float-cta{position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:60;box-shadow:var(--glow-md)}
@media (min-width:1000px){.float-cta{display:none}}

/* ── Reveal — fade 420ms + subida de 16px, nunca lateral ────
   Só esconde quando o JavaScript está ativo (classe .js no html).
   Sem JS, o conteúdo aparece inteiro — nunca uma página em branco. */
.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════
   O FLUXO DE COMPRA — acrescentado em 19/08/2026
   Site oficial: processo, acesso, pacote único e checkout.
   ══════════════════════════════════════════════════════════ */

/* ── Botão de rótulo longo ────────────────────────────────
   "QUERO REALIZAR MEU PROTOCOLO INFRARED" não cabe numa linha
   com tracking de 0.18em. Reduz o tracking e deixa quebrar,
   sem perder a caixa alta que é o tell da marca. */
.btn--long{
  letter-spacing:var(--ls-wide);
  padding-inline:var(--space-6);
  text-align:center;
  line-height:1.3;
  white-space:normal;
}
@media (max-width:420px){.btn--long{font-size:var(--fs-3xs)}}

.header__back{
  font-family:var(--font-display);
  font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--text-secondary);text-decoration:none;
  transition:color var(--dur-fast) var(--ease-standard),text-shadow var(--dur-base) var(--ease-glow);
}
.header__back:hover{color:var(--white);text-shadow:var(--glow-text)}

/* ── Os cinco protocolos ──────────────────────────────────── */
.protocols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-5)}
.protocol{
  display:flex;flex-direction:column;
  background:var(--bg-raised);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);
  padding:var(--space-7);
  transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-glow);
}
.protocol:hover{border-color:rgba(225,31,38,.45);box-shadow:var(--glow-sm)}
.protocol__step{
  font-family:var(--font-display);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);
}
.protocol__name{
  font-family:var(--font-display);
  font-size:var(--fs-xl);font-weight:800;
  letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--red-500);text-shadow:var(--glow-text);
  margin:var(--space-3) 0 var(--space-3);
}
.protocol__struct{
  font-size:var(--fs-xs);color:var(--text-muted);
  padding-bottom:var(--space-5);
  border-bottom:1px solid var(--border-hairline);
}
.protocol__body{padding-top:var(--space-5)}
.protocol__body h4{
  font-family:var(--font-display);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--text-muted);margin:0 0 var(--space-3);
}
.protocol__body p{font-size:var(--fs-sm);color:var(--text-secondary)}

/* ── Callout — bloco de aviso e destaque ──────────────────── */
.callout{
  margin-top:var(--space-8);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);
  background:var(--bg-raised);
  padding:var(--space-6);
  max-width:var(--container-narrow);
  box-shadow:var(--shadow-inset-top);
}
.callout__label{
  font-family:var(--font-display);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--red-500);margin-bottom:var(--space-3);
}
.callout__text{font-size:var(--fs-sm);color:var(--text-secondary)}
.callout__text strong{color:var(--white);font-weight:600}
.callout--data{background:var(--bg-inset)}

/* ── Perguntas frequentes ─────────────────────────────────── */
.faq{max-width:var(--container-narrow);border-top:1px solid var(--border-hairline)}
.faq__item{border-bottom:1px solid var(--border-hairline)}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding:var(--space-6) 0;
  font-family:var(--font-display);
  font-size:var(--fs-base);font-weight:600;
  color:var(--text-primary);
  transition:color var(--dur-fast) var(--ease-standard),text-shadow var(--dur-base) var(--ease-glow);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";flex:none;width:12px;height:12px;
  border-right:1.5px solid var(--red-500);
  border-bottom:1.5px solid var(--red-500);
  transform:rotate(45deg);margin-bottom:4px;
  transition:transform var(--dur-base) var(--ease-standard);
}
.faq__item[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px}
.faq__item summary:hover{color:var(--white);text-shadow:var(--glow-text)}
.faq__item p{padding-bottom:var(--space-6);font-size:var(--fs-sm);color:var(--text-secondary);max-width:66ch}

/* ── Pacote único — a área de investimento ────────────────── */
.pack{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-5);align-items:start}
@media (max-width:860px){.pack{grid-template-columns:1fr}}
.pack__main{
  background:var(--bg-raised);
  border:1px solid var(--red-500);
  border-radius:var(--radius-xl);
  padding:var(--space-8);
  box-shadow:var(--glow-md);
}
.pack__main .cycle__list{margin-bottom:var(--space-8)}
.pack__side{
  background:rgba(18,18,21,.5);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl);
  padding:var(--space-7);
}
.pack__side-title{
  font-family:var(--font-display);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:var(--space-4);
}
.pack__side p{font-size:var(--fs-sm);color:var(--text-secondary)}
.pack__side p + p{margin-top:var(--space-4)}

/* ── Páginas de compra e retorno ──────────────────────────── */
.checkout{padding-block:var(--space-10) var(--space-11)}
.checkout__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-6);align-items:start}
@media (max-width:900px){.checkout__grid{grid-template-columns:1fr}}

.order{
  background:var(--bg-raised);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl);
  padding:var(--space-8);
}
.order__label{
  font-family:var(--font-display);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:var(--space-5);
}
.order__line{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5);
  padding-bottom:var(--space-6);border-bottom:1px solid var(--border-hairline);
}
.order__item{
  font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;
  color:var(--white);
}
.order__meta{font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--space-2)}
.order__value{
  font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:800;
  color:var(--white);line-height:1;flex:none;
}
.order__includes{margin:var(--space-6) 0 var(--space-8)}
.order__pay{padding-top:var(--space-6);border-top:1px solid var(--border-hairline);margin-bottom:var(--space-7)}
.paygrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:520px){.paygrid{grid-template-columns:1fr}}
.paycard{
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);
  background:var(--bg-inset);
  padding:var(--space-5);
}
.paycard__name{
  font-family:var(--font-display);font-size:var(--fs-3xs);font-weight:700;
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--red-500);margin-bottom:var(--space-2);
}
.paycard__value{font-size:var(--fs-sm);color:var(--text-secondary)}
.order__note{margin-top:var(--space-4);font-size:var(--fs-xs);color:var(--text-muted);text-align:center}

.afterpay{
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl);
  background:rgba(18,18,21,.5);
  padding:var(--space-7);
}
.afterpay .jstep{grid-template-columns:52px 1fr;gap:var(--space-5);padding:var(--space-5) 0}
.afterpay .jstep__mark{width:36px;height:36px;font-size:var(--fs-3xs)}
.afterpay .callout{margin-top:var(--space-6)}

/* ── Ajustes de tela pequena ──────────────────────────────── */
@media (max-width:520px){
  /* "R$ 420" a 49px quebra em duas linhas num aparelho estreito */
  .cycle__price{flex-wrap:wrap;gap:var(--space-2)}
  .cycle__price strong,.order__value{font-size:var(--fs-2xl)}
  .pack__main{padding:var(--space-6)}
  .order{padding:var(--space-6)}
  .protocol{padding:var(--space-6)}
}
/* O CTA flutuante não pode cobrir o fim da página */
@media (max-width:999px){
  body{padding-bottom:92px}
}