/* Consultórios Inteligentes — MD1 Academy / Vitor Jaci
   Paleta e tipografia derivadas do design de referência.

   TEMAS (set/2026): a página alterna faixas claras e escuras. Isso é feito
   redefinindo os MESMOS tokens dentro de `.theme-light` / `.theme-dark`, que vão
   na <section>. Nenhuma regra de componente sabe em que tema está — ela lê o
   token e a cascata resolve. Por isso vale a regra:

     NÃO escreva cor literal em regra de componente. Se precisar de uma cor nova,
     crie o token nos dois blocos abaixo. Uma `rgba(232,236,242,…)` solta funciona
     no escuro e some no claro.

   Os tokens de texto acentuado são separados dos de preenchimento de propósito:
   `--acc` (#5FE3D2) é lindo como fundo de botão e ilegível como texto sobre
   branco — quem escreve texto usa `--acc-txt`, que escurece no tema claro. */

:root,
.theme-dark,
.bar,
.tarja,
.modal{
  --bg:#05060a;
  --bg-alt:#07080e;
  --txt:#E8ECF2;
  --txt-strong:#F4F7FB;
  --txt-soft:#D3DAE4;
  --txt-soft2:#C4CCD8;
  --txt-mut:#A9B3C1;
  --txt-dim:#8B95A6;
  --txt-dimmer:#68727F;
  --txt-foot:#5B6473;

  --acc-txt:#5FE3D2;
  --vio-txt:#A79BFF;

  --line:rgba(232,236,242,.10);
  --line-2:rgba(232,236,242,.08);
  --line-3:rgba(232,236,242,.18);
  --surf:rgba(232,236,242,.03);
  --surf-2:rgba(232,236,242,.06);
  --acc-line:rgba(95,227,210,.28);
  --acc-soft:rgba(95,227,210,.06);
  --acc-soft-2:rgba(95,227,210,.045);
  --acc-soft-hi:rgba(95,227,210,.14);

  --grid-line:rgba(255,255,255,.045);
  --panel-deep:rgba(5,6,10,.5);
  --card-a:rgba(232,236,242,.045);
  --card-b:rgba(5,6,10,.2);
  --wash-acc:rgba(95,227,210,.13);
  --wash-vio:rgba(122,108,255,.15);
  --glow:rgba(95,227,210,.28);
  --glow-hi:rgba(95,227,210,.40);

  --erro-txt:#FF9A8B;
  --erro-line:rgba(255,120,100,.45);
  --erro-soft:rgba(255,120,100,.08);
}

.theme-light{
  /* Branco nos dois: as faixas claras são brancas, ponto. Ter um cinza como
     `--bg` e branco como `--bg-alt` fazia duas faixas claras vizinhas terem
     tons diferentes, e a emenda aparecia. */
  --bg:#FFFFFF;
  --bg-alt:#FFFFFF;
  --txt:#232B36;
  --txt-strong:#0C1119;
  --txt-soft:#39424F;
  --txt-soft2:#454F5C;
  --txt-mut:#586372;
  --txt-dim:#6B7583;
  --txt-dimmer:#828C99;
  --txt-foot:#8A93A1;

  --acc-txt:#0B7F72;
  --vio-txt:#5541D8;

  --line:rgba(12,17,25,.14);
  --line-2:rgba(12,17,25,.09);
  --line-3:rgba(12,17,25,.20);
  --surf:rgba(12,17,25,.035);
  --surf-2:rgba(12,17,25,.055);
  --acc-line:rgba(11,127,114,.30);
  --acc-soft:rgba(11,127,114,.07);
  --acc-soft-2:rgba(11,127,114,.05);
  --acc-soft-hi:rgba(11,127,114,.13);

  --grid-line:rgba(12,17,25,.055);
  --cd-cell:rgba(255,255,255,.78);
  --panel-deep:rgba(255,255,255,.62);
  --card-a:rgba(255,255,255,.75);
  --card-b:rgba(12,17,25,.03);
  --wash-acc:rgba(11,127,114,.09);
  --wash-vio:rgba(85,65,216,.07);
  --glow:rgba(12,17,25,.10);
  --glow-hi:rgba(12,17,25,.16);

  --erro-txt:#B3261E;
  --erro-line:rgba(179,38,30,.45);
  --erro-soft:rgba(179,38,30,.05);
}

/* Cores fixas, independentes de tema: o botão sólido é sempre a mesma pastilha
   turquesa com texto escuro — funciona sobre as duas faixas. */
:root{
  --acc:#5FE3D2;
  --acc-2:#38C9E8;
  --acc-hi:#8CF3E6;
  --on-acc:#04211E;
  --verde:#3EE08A;
  --verde-2:#1FB866;
  --on-verde:#03220F;
  --verde-glow:rgba(31,184,102,.32);
  --verde-glow-hi:rgba(31,184,102,.45);
  --vio:#7A6CFF;
  --vio-2:#A79BFF;

  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --disp:'Space Grotesk',var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --pad-y:clamp(56px,7vw,104px);
  --pad-x:clamp(20px,5vw,64px);
  --r:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt);
  font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--acc-txt);text-decoration:none}
a:hover{opacity:.8}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0;color:var(--txt-strong);text-wrap:pretty}
h2{font-size:clamp(26px,3.2vw,42px)}
h3{font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

:where(a,button,summary):focus-visible{outline:2px solid var(--acc-txt);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--acc);color:var(--on-acc);
  padding:12px 18px;border-radius:0 0 8px 0;font-family:var(--disp);font-weight:600}
.skip:focus{left:0}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto}
.wrap--mid{max-width:1000px}
.wrap--narrow{max-width:900px}
.wrap--faq{max-width:860px}

.sec{padding:var(--pad-y) var(--pad-x)}
.sec--alt{background:var(--bg-alt);border-top:1px solid var(--line-2)}
.sec--dor{background:radial-gradient(80% 60% at 20% 0%,var(--wash-vio),transparent 65%),var(--bg)}
.sec--leva{background:radial-gradient(70% 60% at 85% 20%,var(--wash-acc),transparent 60%),var(--bg)}
.sec--crono{background:radial-gradient(80% 60% at 15% 30%,var(--wash-vio),transparent 60%),var(--bg)}
.sec--invest{background:radial-gradient(90% 70% at 50% 0%,var(--wash-acc),transparent 60%),var(--bg)}
.sec--invest{scroll-margin-top:clamp(12px,3vw,28px)}
/* `is-joined` = esta faixa tem o MESMO tema da anterior, então as duas têm que
   ler como um bloco só: sem linha divisória e com o mesmo fundo (a `.sec--alt`
   traz um `--bg-alt` diferente e uma borda própria, e a emenda aparecia).
   Quem põe a classe é o /root/lp-tema.sh — e não um seletor de irmão adjacente,
   porque a hero fica FORA do <main> e `+` não alcança a emenda hero→autoridade.
   O `.sec--alt` no segundo seletor é de propósito: neutraliza só o fundo chapado,
   nunca o gradiente das seções que têm um (dor, leva, crono, invest, final). */
.is-joined{border-top:none}
.is-joined.sec--alt{background:var(--bg)}

.stack{display:flex;flex-direction:column;gap:22px;min-width:0}
.stack--sm{gap:14px}
.stack--lg{gap:clamp(24px,3vw,40px)}

.two-cols{display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.two-cols--center{align-items:center}

/* ---------- tipografia auxiliar ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-txt)}
.eyebrow--dim{color:var(--txt-dim);letter-spacing:.14em}
.lead{font-size:clamp(15px,1.5vw,17px);line-height:1.65;color:var(--txt-mut);max-width:56ch}
.body-lg{font-size:clamp(16px,1.6vw,19px);line-height:1.7;color:var(--txt-mut)}
.note{font-size:16px;line-height:1.65;color:var(--txt-soft2)}
.quote-bar{font-size:clamp(17px,1.8vw,21px);line-height:1.6;color:var(--txt-strong);
  border-left:2px solid var(--acc-txt);padding-left:20px;text-wrap:pretty}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--disp);font-weight:700;letter-spacing:-.01em;border-radius:12px;
  padding:18px 30px;font-size:clamp(16px,1.7vw,19px);
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease}
.btn--solid{background:linear-gradient(135deg,var(--acc),var(--acc-2));color:var(--on-acc);
  box-shadow:0 14px 40px var(--glow)}
.btn--solid:hover{color:var(--on-acc);transform:translateY(-2px);box-shadow:0 18px 48px var(--glow-hi)}
.btn--ghost{border:1px solid var(--acc-line);color:var(--acc-txt);background:var(--acc-soft);
  font-weight:600;font-size:17px;padding:17px 28px}
.btn--ghost:hover{background:var(--acc-soft-hi);color:var(--acc-txt)}
.btn--lg{padding:20px 36px;font-size:clamp(17px,1.8vw,20px);box-shadow:0 16px 46px var(--glow)}
.btn--sm{padding:11px 18px;font-size:14px;border-radius:9px;gap:8px;box-shadow:none}
.btn--sm:hover{transform:translateY(-1px);box-shadow:none}
.btn--block{width:100%;padding:19px 28px;font-size:18px}

/* ---------- preço ---------- */
.price-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;font-size:15px;color:var(--txt-dim)}
.price-line s{color:var(--txt-dimmer)}
.price-line__mid{color:var(--txt)}
.price-line strong{font-family:var(--disp);font-weight:700;font-size:24px;color:var(--acc-txt)}
.price-line--center{justify-content:center}
.price-line--center strong{font-size:22px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;
  padding:clamp(28px,5vw,64px) var(--pad-x) clamp(56px,7vw,96px);
  background:
    radial-gradient(120% 90% at 78% 8%,var(--wash-acc) 0%,transparent 55%),
    radial-gradient(90% 70% at 10% 100%,var(--wash-vio) 0%,transparent 60%),
    var(--bg)}
.hero__grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 25%,#000 0%,transparent 80%);
          mask-image:radial-gradient(80% 60% at 50% 25%,#000 0%,transparent 80%)}
.hero__inner{position:relative;display:flex;flex-direction:column;gap:clamp(28px,4vw,44px)}
/* align-items:start é o que alinha o topo da foto com os badges acima do h1:
   as duas colunas passam a começar na mesma linha, em qualquer largura.
   Com o antigo `center`, encolher a foto só reequilibrava as duas — elas nunca
   encostavam sem que as colunas tivessem exatamente a mesma altura. */
.hero__cols{display:grid;gap:clamp(28px,4vw,56px);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.hero__copy{display:flex;flex-direction:column;gap:24px;min-width:0}
.hero__aside{display:flex;flex-direction:column;gap:18px;min-width:0}
.hero h1{font-size:clamp(24px,2.9vw,38px);line-height:1.15;letter-spacing:-.022em}
.hero h1 em{font-style:normal;color:var(--acc-txt)}
/* Variante B do teste A/B (ver /root/lp-variante-b.sh): a promessa de B é curta
   ("IA na Prática para Consultórios Médicos"), e o tamanho do h1 de A — que foi
   reduzido justamente por causa de um título longo — deixa B miúdo no hero. */
.hero--b h1{font-size:clamp(34px,5.4vw,66px)}
.hero__lead{font-size:clamp(15px,1.5vw,18px);line-height:1.6;color:var(--txt-mut);max-width:56ch;text-wrap:pretty}
.hero__lead strong{font-weight:700;color:var(--txt-strong)}
.hero__cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start}

.tags{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase}
.tags li{padding:7px 12px;border-radius:8px;background:var(--surf-2);
  border:1px solid var(--line);color:var(--txt-soft2)}

/* ---------- popup de captação ---------- */
.modal{margin:auto;padding:0;border:0;background:transparent;color:var(--txt);
  max-width:min(520px,calc(100vw - 32px));width:100%;max-height:calc(100dvh - 32px);
  overflow:visible}
/* o scrim é literal de propósito, como o fundo da .bar: ele cobre a página
   inteira, clara ou escura, e precisa ser sempre o mesmo véu escuro. */
.modal::backdrop{background:rgba(3,4,8,.72);backdrop-filter:blur(3px)}
.modal__box{position:relative;max-height:calc(100dvh - 32px);overflow-y:auto;
  padding:clamp(24px,4vw,34px);border-radius:20px;border:1px solid var(--acc-line);
  /* --card-a é translúcido; sem a camada opaca de --bg embaixo, a página
     inteira aparece através da caixa. */
  background:linear-gradient(160deg,var(--card-a),transparent),var(--bg);
  display:flex;flex-direction:column;gap:22px;text-align:left}
.modal__fechar{position:absolute;top:10px;right:10px;width:38px;height:38px;
  display:grid;place-items:center;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--surf-2);color:var(--txt-dim);
  font-size:22px;line-height:1;transition:color .15s,border-color .15s}
.modal__fechar:hover{color:var(--txt-strong);border-color:var(--line-3)}
.modal__cab{display:flex;flex-direction:column;gap:8px;padding-right:46px}
.modal__cab .eyebrow{font-size:11px;letter-spacing:.12em}
.modal__titulo{font-size:clamp(22px,3vw,28px);line-height:1.15;letter-spacing:-.02em}
.modal__sub{font-size:15px;line-height:1.55;color:var(--txt-mut)}

.form{display:flex;flex-direction:column;gap:16px}
.campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.campo label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-dim)}
.campo input{width:100%;padding:14px 16px;border-radius:12px;font:inherit;font-size:16px;
  color:var(--txt-strong);background:var(--surf-2);border:1px solid var(--line);
  transition:border-color .15s,background .15s}
/* 16px no input não é estética: abaixo disso o iOS dá zoom ao focar o campo. */
.campo input::placeholder{color:var(--txt-dimmer)}
.campo input:focus{outline:none;border-color:var(--acc-line);background:var(--acc-soft)}
.campo.is-erro input{border-color:var(--erro-line);background:var(--erro-soft)}
.campo__erro{font-size:13px;line-height:1.4;color:var(--erro-txt)}
.form__nota{font-size:12px;line-height:1.5;color:var(--txt-dimmer);text-align:center}
/* isca de robô: fora da tela, sem display:none (bot preenche o que "não existe") */
.mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- tarja do topo ---------- */
.tarja{margin:0;padding:12px var(--pad-x);text-align:center;
  font-family:var(--disp);font-weight:700;font-size:clamp(12px,1.5vw,15px);
  letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--acc),var(--acc-2));color:var(--on-acc)}

/* ---------- fotos ---------- */
.photo{position:relative;margin:0;border-radius:18px;overflow:hidden;
  border:1px solid var(--line)}
.photo--tall{aspect-ratio:11/12;background:linear-gradient(160deg,var(--wash-vio),var(--wash-acc));
  animation:floatY 7s ease-in-out infinite}
/* o corte sai por cima (era teto), não pelos dois lados como faria o padrão */
.photo--tall img{object-position:50% 100%}
.photo--square{aspect-ratio:1/1;background:linear-gradient(160deg,var(--wash-acc),var(--panel-deep))}
.photo img{width:100%;height:100%;object-fit:cover}
.photo__hint{display:none;position:absolute;inset:0;flex-direction:column;justify-content:flex-end;
  gap:6px;padding:22px;font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--txt-soft2);
  background-image:repeating-linear-gradient(135deg,var(--surf-2) 0 2px,transparent 2px 10px)}
.photo__tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-txt)}
.photo.is-empty img{display:none}
.photo.is-empty .photo__hint{display:flex}

/* ---------- estatísticas ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px}
.stats li{padding:16px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surf)}
.stats strong{display:block;font-family:var(--disp);font-weight:700;
  font-size:clamp(20px,2vw,26px);color:var(--acc-txt);white-space:nowrap}
.stats span{display:block;font-size:14px;color:var(--txt-dim);line-height:1.45;margin-top:6px}

/* ---------- cards numerados ---------- */
/* 180px é o que faz caber 5 numa .wrap de 1152px; abaixo disso o auto-fit
   vai descendo para 4, 3, 2 e 1 sozinho. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:16px}
.card{padding:26px 22px;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(160deg,var(--card-a),var(--card-b));
  display:flex;flex-direction:column;gap:16px;min-height:170px;transition:border-color .18s ease}
.card:hover{border-color:var(--acc-line)}
.card__num{font-family:var(--mono);font-size:12px;color:var(--acc-txt);letter-spacing:.1em}
.card p{font-size:16px;line-height:1.55;color:var(--txt);text-wrap:pretty}

/* ---------- fotos do evento (variante B) ---------- */
.event-gallery{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.event-gallery img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:18px}

/* ---------- takeaways ---------- */
.takeaways{display:flex;flex-direction:column;min-width:0}
.takeaways li{display:flex;gap:16px;align-items:flex-start;padding:20px 0;
  border-bottom:1px solid var(--line-2);font-size:16px;line-height:1.6;color:var(--txt-soft);text-wrap:pretty}
.takeaways li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:2px;
  background:var(--acc-txt);margin-top:8px}

/* ---------- checks ---------- */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.checks li{padding:24px;border-radius:var(--r);border:1px solid var(--acc-line);
  background:var(--acc-soft-2);display:flex;gap:14px;align-items:flex-start;
  font-size:16px;line-height:1.55;color:var(--txt);text-wrap:pretty}
.checks li::before{content:"✓";flex:0 0 auto;width:22px;height:22px;border-radius:6px;
  border:1px solid var(--acc-line);color:var(--acc-txt);display:grid;place-items:center;
  font-size:13px;font-weight:700}
.notfor{display:flex;gap:14px;align-items:flex-start;padding:22px 24px;border-radius:var(--r);
  border:1px dashed var(--line-3);background:var(--surf);
  font-size:16px;line-height:1.55;color:var(--txt-dim)}
.notfor__x{flex:0 0 auto;width:22px;height:22px;border-radius:6px;border:1px solid var(--line-3);
  display:grid;place-items:center;font-size:14px}

/* ---------- cronograma ---------- */
.days{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.day{padding:clamp(24px,3vw,36px);border-radius:18px;border:1px solid var(--line);
  display:flex;flex-direction:column;gap:16px}
.day--1{background:linear-gradient(160deg,var(--wash-acc),var(--panel-deep))}
.day--2{background:linear-gradient(160deg,var(--wash-vio),var(--panel-deep))}
.day__label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-txt)}
.day--2 .day__label{color:var(--vio-txt)}
.day h3{font-size:clamp(20px,2.2vw,26px);line-height:1.2}
.day p{font-size:16px;line-height:1.65;color:var(--txt-mut)}

/* ---------- oferta ---------- */
.offer{border-radius:20px;border:1px solid var(--acc-line);
  background:linear-gradient(165deg,var(--wash-acc),var(--panel-deep));
  padding:clamp(26px,4vw,44px);display:grid;gap:clamp(26px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.offer__included{min-width:0;display:flex;flex-direction:column;gap:14px}
.ticks{display:flex;flex-direction:column;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--txt-soft)}
.ticks li::before{content:"✓";flex:0 0 auto;color:var(--acc-txt);font-size:14px;margin-top:2px}
.offer__price{min-width:0;display:flex;flex-direction:column;gap:18px;justify-content:center;text-align:center}
.offer__from s{font-size:16px;color:var(--txt-dimmer)}
.offer__now{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap}
.offer__now strong{font-family:var(--disp);font-weight:700;font-size:clamp(40px,6vw,64px);
  line-height:1;color:var(--acc-txt);letter-spacing:-.03em}
.offer__now span{font-size:16px;color:var(--txt-soft2)}
.offer__inst{font-size:15px;color:var(--txt-mut);margin-top:-12px}
.offer__foot{font-size:14px;line-height:1.55;color:var(--txt-dim)}
.why{padding:clamp(24px,3vw,32px);border-radius:var(--r);border:1px solid var(--line);
  background:var(--surf);display:flex;flex-direction:column;gap:12px}
.why h3{font-size:20px}
.why p{font-size:16px;line-height:1.7;color:var(--txt-mut);max-width:72ch}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{border:1px solid var(--line);border-radius:14px;
  background:var(--surf);overflow:hidden}
.faq summary{display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:20px 22px;cursor:pointer;color:var(--txt-strong);font-family:var(--disp);
  font-weight:600;font-size:clamp(15px,1.6vw,17px);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--acc-txt)}
.faq summary::after{content:"+";flex:0 0 auto;color:var(--acc-txt);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq__a{padding:0 22px 22px}
.faq__a p{font-size:16px;line-height:1.7;color:var(--txt-mut)}

/* ---------- fechamento ---------- */
.sec--final{position:relative;overflow:hidden;
  padding:clamp(64px,8vw,120px) var(--pad-x) clamp(96px,10vw,140px);
  background:
    radial-gradient(100% 80% at 50% 100%,var(--wash-vio),transparent 60%),
    radial-gradient(80% 70% at 50% 0%,var(--wash-acc),transparent 60%),
    var(--bg)}
.hero__grid--final{background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 80%);
          mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 80%)}
.final__inner{position:relative;align-items:center;text-align:center}
.sec--final h2{font-size:clamp(28px,4vw,52px);line-height:1.08;letter-spacing:-.025em}
.sec--final .lead{font-size:clamp(16px,1.7vw,19px);line-height:1.6;max-width:none}

/* ---------- rodapé e barra fixa ---------- */
.foot{padding:28px var(--pad-x) clamp(110px,18vw,150px);border-top:1px solid var(--line-2);background:var(--bg)}
.foot__inner{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--mono);font-size:12px;color:var(--txt-foot);letter-spacing:.04em}

/* A barra é sempre escura (ela recebe os tokens escuros lá no topo da folha):
   flutua por cima de faixas claras e escuras, e precisa ler como camada de
   interface, não como parte da seção de baixo. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:12px var(--pad-x);
  background:rgba(5,6,10,.92);border-top:1px solid rgba(95,227,210,.22);
  color:var(--txt);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* Sem JS a barra fica sempre visível (é um CTA). Com JS ela nasce escondida
   e o app.js põe .is-on quando a 2a seção entra na tela. */
.js .bar{visibility:hidden;opacity:0;transform:translateY(110%);
  transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s}
.js .bar.is-on{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.bar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(18px,4vw,40px)}
.bar__price{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--txt-dim);min-width:0}
.bar__price s{text-decoration:line-through}
.bar__price strong{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--acc-txt)}

/* ---------- animações ---------- */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .photo--tall{animation:none}
}

/* ---------- variante C (/c/, copy nova de 21/09/2026) ----------
   Página própria, não derivada de A: /c/index.html é editado à mão. */
/* Hero da C no molde da Consultas Vendedoras: foto de fundo + véu escuro,
   tudo centralizado. A foto é escura e azulada; o véu garante contraste do
   texto em cima do rosto do Vitor, que cai no meio do enquadramento. */
.hero--c{display:flex;align-items:center;min-height:min(92svh,860px);
  padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px);background:var(--bg)}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;opacity:.8}
.hero__veu{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(55% 48% at 50% 52%,color-mix(in srgb,var(--bg) 72%,transparent) 0%,color-mix(in srgb,var(--bg) 35%,transparent) 70%,transparent 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 60%,transparent) 0%,color-mix(in srgb,var(--bg) 40%,transparent) 45%,color-mix(in srgb,var(--bg) 92%,transparent) 100%)}
.hero--c .hero__inner{align-items:center;text-align:center;gap:clamp(20px,2.6vw,28px);max-width:980px}
.hero--c .tags{justify-content:center}
.hero--c h1{font-size:clamp(32px,4.6vw,58px);text-shadow:0 2px 18px color-mix(in srgb,var(--bg) 85%,transparent),0 0 2px color-mix(in srgb,var(--bg) 60%,transparent)}
.hero--c h1 em{display:block}
.hero--c .hero__lead{max-width:60ch;color:var(--txt-strong);text-shadow:0 1px 12px var(--bg)}
.hero--c .hero__cta{align-items:center;margin-top:clamp(6px,1.2vw,14px)}
.hero--c .hero__vagas{align-self:center}
/* Na C todos os botões sólidos são verdes (pedido do cliente, 21/09/2026):
   os três CTAs e o "enviar" do popup. A e B seguem turquesa. */
[data-variante="C"] .btn--solid{background:linear-gradient(135deg,var(--verde),var(--verde-2));
  color:var(--on-verde);border:0;box-shadow:0 14px 40px var(--verde-glow)}
[data-variante="C"] .btn--solid:hover{color:var(--on-verde);box-shadow:0 18px 48px var(--verde-glow-hi)}
.hero__vagas{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px;border-radius:999px;border:1px solid var(--acc-line);background:var(--acc-soft-hi);
  font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc-txt)}
.hero__vagas::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--acc-txt)}
.photo--wide{aspect-ratio:3/2;background:linear-gradient(160deg,var(--wash-vio),var(--wash-acc))}
.cards--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.card h3{font-size:clamp(18px,1.8vw,21px);line-height:1.25}
.card--area{min-height:0;gap:12px}
.card--area p{color:var(--txt-mut)}
.event-gallery--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* height:auto: com width/height no <img> (evita salto de layout), o atributo
   de altura venceria o aspect-ratio e a foto ficaria esticada na vertical. */
.event-gallery--3 img{aspect-ratio:3/2;height:auto}
.recursos__fecho{align-items:center;text-align:center;padding-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--line-2)}
.recursos__fecho h3{font-size:clamp(22px,2.4vw,30px)}
.recursos__fecho .lead{max-width:48ch}
.prof__nome{font-family:var(--disp);font-weight:700;font-size:clamp(18px,1.8vw,22px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc-txt)}
.final__info{display:flex;flex-direction:column;gap:6px;font-size:clamp(16px,1.7vw,19px);color:var(--txt-mut)}
.final__info strong{font-family:var(--disp);font-weight:700;font-size:clamp(24px,2.8vw,34px);
  letter-spacing:.02em;text-transform:uppercase;color:var(--txt-strong)}
.lead--full{max-width:none}
/* o padding de baixo do .foot reserva lugar para a barra fixa; a C não tem barra */
.foot--sem-barra{padding-bottom:28px}
.final__preco{font-size:clamp(17px,1.8vw,20px);color:var(--txt-soft)}
.final__preco strong{font-family:var(--disp);font-weight:700;font-size:clamp(26px,2.8vw,34px);color:var(--acc-txt);margin-left:6px}

/* Seção 2 (Autoridade): no HTML o texto vem antes da foto, que é a ordem pedida
   para o celular — empilhado, o texto abre a seção. No desktop o cliente quis a
   foto à esquerda, como era antes, e é só isso que esta regra faz. Manter a ordem
   do DOM com o texto primeiro deixa a leitura (leitor de tela, tabulação) começar
   pelo conteúdo nos dois casos. É a única seção com foto dentro de `.two-cols`. */
@media (min-width:521px){
  .two-cols .photo{order:-1}
}

@media (max-width:520px){
  /* Na barra, o botão vai para a linha de baixo (width:100% num item flex
     força a quebra) e ocupa a faixa inteira; aqui o gap é vertical. */
  .bar__inner{gap:12px}
  .bar__price{font-size:13px}
  .bar__price strong{font-size:17px}
  /* Todos os CTAs viram bloco no celular — alvo de toque cheio. */
  .btn{width:100%}
  /* .final__inner centraliza por align-items, o que encolhe os <p> ao conteúdo
     e impediria o CTA de esticar. */
  .final__inner p{width:100%}

  /* --- Celular: conteúdo centralizado (pedido do cliente, 10/09/2026) ---
     `text-align` resolve só o texto. Tudo que é caixa flex precisa ter o eixo
     principal centralizado à mão, senão o item continua encostado à esquerda
     mesmo com o texto centrado dentro dele. */
  body{text-align:center}
  .tags{justify-content:center}
  .hero__cta{align-items:center}
  .foot__inner{justify-content:center}
  /* Linhas com ícone (✓, quadradinho, ✗): `justify-content` não resolve — o texto
     quebra em várias linhas, o item flex já ocupa a largura toda e não sobra folga
     para distribuir, então o ícone fica preso à esquerda e só o texto centraliza.
     Vira bloco: o marcador entra no fluxo como inline-block e a linha inteira
     (ícone + texto) centraliza junto, como marcador de lista centrada. */
  .ticks li,.checks li,.takeaways li,.notfor{display:block}
  .ticks li::before,.checks li::before,.takeaways li::before,.notfor__x{
    display:inline-block;vertical-align:middle;margin:0 8px 3px 0}
  .checks li::before,.notfor__x{line-height:20px;text-align:center}
  /* o filete da citação vira topo — barra à esquerda com texto centrado fica torto */
  .quote-bar{border-left:0;border-top:2px solid var(--acc-txt);
    padding-left:0;padding-top:18px}
  /* o summary do FAQ mantém o "+" na ponta direita: é a affordance de abrir */
  .faq summary{justify-content:space-between;text-align:left}
  /* resposta do FAQ alinhada à esquerda: é o texto mais longo da página e
     centralizado fica difícil de ler linha a linha */
  .faq__a{text-align:left}

  /* "Presencial" e "Belo Horizonte" na mesma linha. Os três badges não cabem numa
     linha só (~448px de conteúdo em 350px úteis), então a quebra tem que cair
     depois do primeiro. Um `flex-basis:100%` no próprio <li> resolveria a quebra
     mas esticaria a pastilha da data pela largura toda; em vez disso entra um item
     flex vazio de 100% como separador, posicionado por `order` entre o 1º e os
     outros dois — assim cada pastilha mantém a largura do texto. */
  .tags::after{content:"";flex-basis:100%;height:0;order:1}
  .tags li:first-child{order:0}
  .tags li{order:2}
  /* o preço logo abaixo do CTA é flex: text-align não centraliza os itens */
  .price-line{justify-content:center}
  /* os 3 números do Vitor empilhados, um por linha */
  .stats{grid-template-columns:1fr}
  .event-gallery{grid-template-columns:1fr;gap:10px}
  .hero__vagas{align-self:center}
}