/* =========================================================
   Agenda IA Med — folha de estilo única
   ========================================================= */

/* ---------- Fontes (self-hosted, sem chamada externa) ---------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600 800;font-display:swap;
  src:url("/assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600 800;font-display:swap;
  src:url("/assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  --ink:#0E2A31;
  --ink-2:#163A43;
  --texto:#15343C;
  /* --suave e --teal-esc foram escurecidos 1 passo para fechar AA 4.5:1
     também sobre os fundos tingidos (--teal-claro é o mais claro deles). */
  --suave:#546C72;
  --teal:#00B6AE;
  --teal-esc:#00726D;
  --teal-claro:#E2F5F3;
  --teal-borda:#BFE9E5;
  --areia:#F8F6F1;
  --neblina:#F3F7F6;
  --papel:#FFFFFF;
  --linha:#DCE7E5;
  --linha-forte:#C3D5D2;
  --coral:#E4573D;

  --fonte-display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fonte-texto:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --largura:1200px;
  --gutter:clamp(20px,5vw,44px);
  --raio:4px;
  --raio-g:10px;

  --alt-topo:74px;
  --sombra-s:0 1px 2px rgba(14,42,49,.05), 0 6px 18px -10px rgba(14,42,49,.18);
  --sombra-m:0 2px 4px rgba(14,42,49,.04), 0 18px 44px -22px rgba(14,42,49,.32);
  --transicao:200ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--alt-topo) + 18px)}
body{
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font-family:var(--fonte-texto);
  font-size:clamp(16px,.42vw + 15px,17.5px);
  line-height:1.62;
  font-feature-settings:"cv05" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,picture{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--fonte-display);font-weight:700;letter-spacing:-.022em;line-height:1.08;margin:0 0 .5em;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
em{font-style:normal;color:var(--teal-esc)}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:2.5px solid var(--teal-esc);outline-offset:3px;border-radius:2px}

.container{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--gutter)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 18px}
.skip:focus{left:12px;top:12px}

/* ---------- Ícones ---------- */
.i{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 22px;
  border:1px solid transparent;border-radius:var(--raio);
  font-family:var(--fonte-display);font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  cursor:pointer;text-align:center;
  transition:background var(--transicao),color var(--transicao),border-color var(--transicao),box-shadow var(--transicao),transform var(--transicao);
}
.btn--g{min-height:56px;padding:15px 28px;font-size:1.02rem}
.btn--bloco{width:100%}
.btn--primario{background:var(--ink);color:#fff;box-shadow:var(--sombra-s)}
.btn--primario:hover{background:var(--teal-esc);box-shadow:var(--sombra-m)}
.btn--contorno{background:transparent;color:var(--ink);border-color:var(--linha-forte)}
.btn--contorno:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--fantasma{background:var(--papel);color:var(--ink);border-color:var(--linha)}
.btn--fantasma:hover{border-color:var(--teal);color:var(--teal-esc)}
.btn--claro{background:#fff;color:var(--ink)}
.btn--claro:hover{background:var(--teal-claro)}
.btn:active{transform:translateY(1px)}

/* ---------- Rótulo de seção ---------- */
.rotulo{
  display:flex;align-items:center;gap:12px;
  margin:0 0 18px;
  font-family:var(--fonte-display);font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-esc);
}
.rotulo .num{
  font-variant-numeric:tabular-nums;color:var(--suave);
  padding-right:12px;border-right:1px solid var(--linha-forte);
}
.rotulo--claro{color:#7FE3DC}
.rotulo--claro .num{color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.24)}

/* ---------- Topo ---------- */
.topo{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color var(--transicao),box-shadow var(--transicao)}
.topo[data-fixo]{border-bottom-color:var(--linha);box-shadow:0 1px 20px -8px rgba(14,42,49,.2)}
.topo__barra{
  width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--gutter);
  min-height:var(--alt-topo);display:flex;align-items:center;gap:24px;
}
.marca{display:inline-flex;align-items:center;gap:11px;margin-right:auto}
.marca img{width:24px;height:auto}
.marca__nome{font-family:var(--fonte-display);font-weight:800;font-size:1.06rem;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.marca__nome em{color:var(--teal-esc)}
.marca--claro .marca__nome{color:#fff}
.marca--claro .marca__nome em{color:#7FE3DC}

.menu{display:flex;align-items:center;gap:4px}
.menu a{
  position:relative;padding:9px 13px;border-radius:var(--raio);
  font-size:.94rem;font-weight:500;color:var(--suave);
  transition:color var(--transicao);
}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="true"]{color:var(--ink);font-weight:600}
.menu a[aria-current="true"]::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--teal);
}
.menu__cta{display:none}
.topo__cta{padding:11px 18px;min-height:44px;font-size:.9rem}
.hamburguer{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;padding:clamp(48px,6vw,86px) 0 clamp(56px,7vw,96px);background:var(--papel)}
.hero__fundo{
  position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 0%, var(--teal-claro) 0%, rgba(226,245,243,0) 62%),
    linear-gradient(180deg,#FBFDFC 0%,var(--papel) 55%);
}
.hero__fundo::after{
  content:"";position:absolute;right:-70px;top:-40px;width:340px;height:600px;
  background:url("/assets/img/logo-mark.svg") no-repeat center/contain;
  opacity:.05;transform:rotate(8deg);
}
.hero__grade{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2.3rem,4.6vw,4.05rem);letter-spacing:-.035em;margin-bottom:22px;color:var(--ink)}
.hero__sub{max-width:34ch;font-size:clamp(1.04rem,.5vw + .95rem,1.22rem);color:var(--suave);margin-bottom:30px}
.hero__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:38px}

.hero__provas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;border-top:1px solid var(--linha)}
.hero__provas > div{padding:18px 20px 0 0}
.hero__provas > div + div{padding-left:22px;border-left:1px solid var(--linha)}
.hero__provas dt{font-family:var(--fonte-display);font-weight:700;font-size:1.02rem;color:var(--ink);margin-bottom:3px}
.hero__provas dd{margin:0;font-size:.87rem;line-height:1.45;color:var(--suave)}

/* ---------- Mock de conversa ---------- */
.hero__demo{display:flex;flex-direction:column;align-items:center;gap:14px}
.fone{
  width:min(340px,100%);
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:22px;
  box-shadow:var(--sombra-m);
  overflow:hidden;
}
.fone__topo{display:flex;align-items:center;gap:11px;padding:13px 16px;background:var(--ink);color:#fff}
.fone__topo img{width:14px}
.fone__topo div{margin-right:auto;line-height:1.25}
.fone__topo strong{display:block;font-family:var(--fonte-display);font-size:.9rem;font-weight:700}
.fone__topo span{font-size:.74rem;color:#7FE3DC}
.fone__topo .i{width:16px;height:16px;opacity:.5}
.fone__conversa{
  min-height:326px;padding:16px 14px 20px;
  display:flex;flex-direction:column;gap:9px;
  background:#EFF3F1;
  background-image:radial-gradient(rgba(14,42,49,.045) 1px,transparent 1px);
  background-size:16px 16px;
}
.fone__dia{
  align-self:center;margin:0 0 4px;padding:4px 12px;
  background:rgba(255,255,255,.9);border-radius:999px;
  font-size:.7rem;color:var(--suave);letter-spacing:.02em;
}
.bolha{
  max-width:84%;padding:9px 13px;border-radius:12px;
  font-size:.88rem;line-height:1.45;box-shadow:0 1px 1px rgba(14,42,49,.07);
  animation:surge 260ms ease-out both;
}
.bolha--paciente{align-self:flex-start;background:#fff;border-top-left-radius:3px}
.bolha--ia{align-self:flex-end;background:#D8F4E9;border-top-right-radius:3px}
.bolha b{font-weight:600}
.bolha .hora{display:block;margin-top:3px;font-size:.66rem;color:var(--suave);text-align:right}
.bolha--digitando{display:inline-flex;gap:4px;align-items:center;padding:12px 15px}
.bolha--digitando i{width:6px;height:6px;border-radius:50%;background:var(--suave);opacity:.5;animation:pulsar 1.1s infinite}
.bolha--digitando i:nth-child(2){animation-delay:.16s}
.bolha--digitando i:nth-child(3){animation-delay:.32s}
@keyframes surge{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pulsar{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}}
.fone__nota{margin:0;font-size:.78rem;color:var(--suave);text-align:center;max-width:340px;line-height:1.5}
.fone__nota a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.fone__nota a:hover{text-decoration:none}

/* ---------- Faixa ---------- */
.faixa{background:var(--ink);color:#fff}
.faixa__grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-block:0}
.faixa__grade > div{padding:32px 30px 32px 0}
.faixa__grade > div + div{padding-left:32px;border-left:1px solid rgba(255,255,255,.13)}
.faixa strong{display:block;font-family:var(--fonte-display);font-weight:700;font-size:1.06rem;margin-bottom:6px}
.faixa span{color:#B9D2D2;font-size:.92rem;line-height:1.5}

/* ---------- Seções ---------- */
.secao{padding-block:clamp(52px,5.4vw,82px)}
.secao--claro{background:var(--neblina)}
.secao--tom{background:var(--areia)}
.secao--escuro{background:var(--ink);color:#fff}
.secao--escuro h2{color:#fff}

/* Cabeçalho em duas colunas: título à esquerda, chamada apoiada na base à
   direita. Antes usava 52% da largura e deixava a metade direita de CADA
   seção vazia — era a maior fonte da sensação de página vaga. */
.cabecalho{
  margin-bottom:clamp(30px,3.2vw,46px);
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:0 clamp(28px,4vw,60px);
  align-items:end;
}
.cabecalho .rotulo{grid-column:1/-1}
.cabecalho h1,
.cabecalho h2{grid-column:1;margin-bottom:0;max-width:19ch;font-size:clamp(1.8rem,3.1vw,3rem);color:var(--ink)}
.cabecalho h2:last-child{grid-column:1/-1;max-width:26ch}   /* sem chamada, ocupa a linha toda */
.cabecalho .chamada{grid-column:2;margin:0;padding-bottom:.4em;font-size:clamp(1rem,.4vw + .95rem,1.14rem);color:var(--suave)}
.cabecalho .btn{grid-column:1;justify-self:start;margin-top:26px}

.cabecalho--centro{display:block;max-width:64ch;margin-inline:auto;text-align:center}
.cabecalho--centro .rotulo{justify-content:center}
.cabecalho--centro h2{max-width:none;margin-bottom:16px}
.cabecalho--centro .chamada{margin-inline:auto;padding-bottom:0}

/* no FAQ o cabeçalho vive numa coluna estreita: volta a empilhar */
.duvidas .cabecalho{display:block}
.duvidas .cabecalho h2{max-width:none;margin-bottom:16px}
.duvidas .cabecalho .chamada{padding-bottom:0}

/* precisa de especificidade maior que .cabecalho h2, senão o título
   da seção escura fica pintado na cor do próprio fundo (contraste 1:1). */
.secao--escuro .cabecalho h2{color:#fff}
.secao--escuro .cabecalho .chamada{color:#D5E8E7}

/* ---------- O desafio ---------- */
.desafio{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(18px,2.4vw,30px);align-items:start}
.painel{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);padding:clamp(26px,3vw,40px)}
.painel h3{font-size:clamp(1.28rem,1.6vw,1.62rem);color:var(--ink);margin-bottom:20px}
.painel p{color:var(--suave)}
.painel__assinatura{margin-top:22px;padding-top:20px;border-top:1px solid var(--linha);color:var(--ink)!important;font-weight:600}
.painel--escuro{background:var(--ink);border-color:var(--ink);color:#fff}
.painel--escuro h3{color:#fff}
.lista-limpa{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:0}
.lista-limpa li{padding:15px 0 15px 30px;border-top:1px solid rgba(255,255,255,.14);position:relative;color:#CFE3E3;font-size:.98rem}
.lista-limpa li::before{
  content:"";position:absolute;left:2px;top:23px;width:12px;height:2px;background:var(--coral);
}

/* ---------- Calculadora do custo das faltas ---------- */
.custo{margin:24px 0 4px;padding:22px;border:1px solid var(--linha);border-radius:var(--raio-g);background:var(--teal-claro)}
.custo__campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.custo__campo label{display:block;margin-bottom:6px;font-size:.86rem;color:var(--suave);line-height:1.35}
.custo__campo input{width:100%;height:44px;padding:0 12px;border:1px solid var(--linha-forte);border-radius:var(--raio);background:var(--papel);color:var(--ink);font-family:var(--fonte-display);font-weight:700;font-variant-numeric:tabular-nums;transition:border-color var(--transicao),box-shadow var(--transicao)}
/* um rótulo ocupa 1 linha e o outro 2: sem isto os inputs ficam 18px
   desnivelados. E o "R$" no fluxo roubava 28px de largura de um só campo. */
.custo__campo{display:flex;flex-direction:column}
.custo__campo > .custo__entrada,
.custo__campo > input{margin-top:auto}
.custo__entrada{position:relative;display:block}
.custo__entrada span{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:.95rem;color:var(--suave);pointer-events:none}
.custo__entrada input{padding-left:34px}
.custo__campo input:focus{outline:none;border-color:var(--teal-esc);box-shadow:0 0 0 3px rgba(0,114,109,.20)}
.custo__campo input:focus-visible{outline:2.5px solid var(--teal-esc);outline-offset:2px}
.custo__saida{margin:18px 0 8px!important;font-size:1.02rem;color:var(--ink)!important}
.custo__saida strong{font-family:var(--fonte-display);font-size:1.5rem;color:var(--teal-esc)}
.custo__nota{margin:0 0 8px!important;font-size:.9rem}
.custo__aviso{margin:0!important;font-size:.8rem}

/* ---------- Cartões ---------- */
.cartoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.cartao{padding:clamp(24px,2.4vw,32px);background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);transition:border-color var(--transicao),box-shadow var(--transicao)}
.cartao:hover{border-color:var(--teal-borda);box-shadow:var(--sombra-s)}
.cartao__icone{display:grid;place-items:center;width:46px;height:46px;margin-bottom:22px;border-radius:var(--raio);background:var(--teal-claro);color:var(--teal-esc)}
.cartao__icone .i{width:22px;height:22px;stroke-width:1.6}
.cartao h3{font-size:1.16rem;color:var(--ink);margin-bottom:10px}
.cartao p{color:var(--suave);font-size:.96rem;margin:0}

/* ---------- Dados / prova ---------- */
.dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.dado{margin:0;padding:clamp(24px,2.4vw,32px);background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);display:flex;flex-direction:column;gap:14px}
.dado__num{
  font-family:var(--fonte-display);font-weight:800;
  font-size:clamp(2.6rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.04em;
  color:var(--teal-esc);font-variant-numeric:tabular-nums;
}
.dado figcaption p{margin:0 0 10px;color:var(--texto);font-size:1rem}
.dado cite{font-style:normal;font-size:.8rem;color:var(--suave);letter-spacing:.01em}
.dados__fecho{
  margin-top:clamp(24px,3vw,36px);padding:22px 26px;
  background:var(--ink);color:#CFE3E3;border-radius:var(--raio-g);
  font-size:clamp(1rem,.5vw + .9rem,1.16rem);
}
.dados__fecho strong{color:#fff;font-weight:600}

/* ---------- Solução ---------- */
.solucao{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,58px);align-items:start}
.criterios{list-style:none;margin:0;padding:0;counter-reset:crit}
.criterios li{position:relative;padding:26px 0 26px 62px;border-top:1px solid var(--linha-forte)}
.criterios li:last-child{border-bottom:1px solid var(--linha-forte)}
.criterios li::before{
  counter-increment:crit;content:counter(crit,decimal-leading-zero);
  position:absolute;left:0;top:26px;
  font-family:var(--fonte-display);font-weight:700;font-size:.86rem;
  color:var(--teal-esc);font-variant-numeric:tabular-nums;letter-spacing:.06em;
}
.criterios h3{font-size:1.14rem;color:var(--ink);margin-bottom:7px}
.criterios p{margin:0;color:var(--suave);font-size:.97rem}
.solucao__foto{margin:0;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);overflow:hidden;position:sticky;top:calc(var(--alt-topo) + 24px)}
.solucao__foto img{width:100%;aspect-ratio:1/1;object-fit:cover}
.solucao__foto figcaption{padding:24px;font-size:.94rem;color:var(--suave)}
.solucao__foto figcaption strong{display:block;font-family:var(--fonte-display);font-size:1.08rem;color:var(--ink);margin-bottom:8px}

/* ---------- Passos ---------- */
.passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:passo}
.passo{position:relative;padding:0 26px 0 0;counter-increment:passo}
.passo + .passo{padding-left:28px;border-left:1px solid var(--linha)}
.passo::before{
  content:counter(passo,decimal-leading-zero);
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:22px;
  border:1px solid var(--teal-borda);border-radius:50%;background:var(--teal-claro);
  font-family:var(--fonte-display);font-weight:700;font-size:.9rem;color:var(--teal-esc);
  font-variant-numeric:tabular-nums;
}
.passo h3{font-size:1.1rem;color:var(--ink);margin-bottom:9px}
.passo p{margin:0;color:var(--suave);font-size:.95rem}

/* ---------- Antes / Depois ---------- */
.comparativo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(14px,2vw,24px);align-items:stretch}
.coluna{padding:clamp(24px,2.6vw,34px);border-radius:var(--raio-g);border:1px solid var(--linha);background:var(--papel);display:flex;flex-direction:column}
.coluna__tag{
  align-self:flex-start;margin-bottom:20px;padding:5px 12px;border-radius:999px;
  font-family:var(--fonte-display);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.coluna--antes{background:var(--papel)}
.coluna--antes .coluna__tag{background:#FBEAE6;color:#B23F27}
.coluna--depois{background:var(--ink);border-color:var(--ink);color:#fff}
.coluna--depois .coluna__tag{background:rgba(127,227,220,.16);color:#7FE3DC}
.coluna ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.coluna li{position:relative;padding:13px 0 13px 30px;border-top:1px solid var(--linha);font-size:.98rem}
.coluna li:last-child{border-bottom:1px solid var(--linha)}
.coluna--antes li{color:var(--suave)}
.coluna--antes li::before{
  content:"";position:absolute;left:4px;top:20px;width:11px;height:11px;
  background:linear-gradient(45deg,transparent 44%,var(--coral) 44% 56%,transparent 56%),
             linear-gradient(-45deg,transparent 44%,var(--coral) 44% 56%,transparent 56%);
}
.coluna--depois li{color:#D5E8E7;border-color:rgba(255,255,255,.14)}
.coluna--depois li:last-child{border-bottom-color:rgba(255,255,255,.14)}
.coluna--depois li::before{
  content:"";position:absolute;left:3px;top:19px;width:13px;height:8px;
  border-left:2px solid #4ED6C9;border-bottom:2px solid #4ED6C9;transform:rotate(-45deg);
}
.coluna--depois .btn{margin-top:26px}
.comparativo__seta{display:grid;place-items:center;color:var(--linha-forte)}
.comparativo__seta svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Agenda enchendo ---------- */
.agenda{
  margin-top:clamp(20px,2.6vw,32px);
  padding:clamp(22px,2.6vw,34px);
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:var(--raio-g);
}
.agenda__topo{max-width:62ch;margin-bottom:26px}
.agenda__topo h3{font-size:clamp(1.16rem,1.5vw,1.42rem);color:var(--ink);margin-bottom:8px}
.agenda__aviso{margin:0;font-size:.88rem;color:var(--suave)}
.agenda__aviso strong{color:var(--texto);font-weight:600}

.agenda__grade{
  display:grid;
  grid-template-columns:auto repeat(5,minmax(0,1fr));
  gap:5px;
}
.agenda__canto{display:block}
.agenda__dia{
  padding-bottom:8px;text-align:center;
  font-family:var(--fonte-display);font-size:.74rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--suave);
}
.agenda__hora{
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:11px;
  font-size:.72rem;color:var(--suave);font-variant-numeric:tabular-nums;
}

.slot{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:clamp(34px,4.4vw,44px);
  border:1px dashed var(--linha-forte);
  border-radius:4px;
  background:transparent;
}
.slot--ocupado{
  border:1px solid var(--linha);
  background:var(--neblina);
}
.slot--ocupado::before{
  content:"";width:34%;height:2px;border-radius:2px;background:var(--linha-forte);
}
.slot--novo{
  border:1px solid var(--teal-esc);
  background:var(--teal-esc);
  box-shadow:0 6px 16px -8px rgba(0,128,122,.7);
  animation:encaixa 420ms cubic-bezier(.2,.9,.3,1.25) both;
}
.slot--novo::after{
  content:attr(data-em);
  font-family:var(--fonte-display);font-weight:700;
  font-size:clamp(.6rem,.85vw,.72rem);
  color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
/* Anel de destaque via box-shadow: não entra no cálculo de layout,
   então não estoura a grade na última coluna (o inset negativo estourava). */
.slot--novo::before{
  content:"";position:absolute;inset:0;border-radius:4px;
  animation:anel 760ms ease-out both;
}
@keyframes encaixa{
  0%{opacity:0;transform:scale(.72)}
  60%{opacity:1;transform:scale(1.04)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes anel{
  0%{box-shadow:0 0 0 0 rgba(0,182,174,.85)}
  100%{box-shadow:0 0 0 10px rgba(0,182,174,0)}
}

.agenda__pe{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 26px;margin-top:24px;padding-top:20px;border-top:1px solid var(--linha);
}
.agenda__resumo{margin:0;font-size:1rem;color:var(--suave);max-width:46ch}
.agenda__resumo strong{color:var(--ink);font-weight:700}
.agenda__resumo [data-agenda-num]{
  font-family:var(--fonte-display);font-size:1.28rem;color:var(--teal-esc);
  font-variant-numeric:tabular-nums;
}
.agenda__legenda{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none}
.agenda__legenda li{display:inline-flex;align-items:center;gap:7px;font-size:.83rem;color:var(--suave)}
.chave{width:15px;height:15px;border-radius:3px;flex:0 0 15px}
.chave--ocupado{border:1px solid var(--linha);background:var(--neblina)}
.chave--novo{border:1px solid var(--teal-esc);background:var(--teal-esc)}
.chave--livre{border:1px dashed var(--linha-forte)}

/* ---------- Calculadora de plano ---------- */
.calculadora{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 20px;
  max-width:660px;margin:0 auto clamp(30px,3.5vw,46px);
  padding:18px 24px;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);
}
.calculadora label{font-size:.94rem;color:var(--suave)}
.calculadora__campo{display:inline-flex;align-items:center;border:1px solid var(--linha-forte);border-radius:var(--raio);overflow:hidden}
.calculadora__campo button{
  width:40px;height:42px;border:0;background:var(--papel);color:var(--ink);
  font-size:1.15rem;line-height:1;cursor:pointer;transition:background var(--transicao);
}
.calculadora__campo button:hover{background:var(--teal-claro)}
.calculadora__campo button:focus-visible{outline-offset:-3px}  /* o overflow:hidden do pai recorta o anel */
.calculadora__campo button:disabled{opacity:.35;cursor:not-allowed}
.calculadora__campo output{
  min-width:52px;text-align:center;font-family:var(--fonte-display);font-weight:700;font-size:1.05rem;
  font-variant-numeric:tabular-nums;border-inline:1px solid var(--linha-forte);line-height:42px;
}
.calculadora__dica{margin:0;width:100%;text-align:center;font-size:.94rem;color:var(--suave)}
.calculadora__dica strong{color:var(--teal-esc)}

/* ---------- Planos ---------- */
.planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:stretch}
.plano{
  display:flex;flex-direction:column;
  padding:clamp(26px,2.6vw,34px);
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);
  transition:border-color var(--transicao),box-shadow var(--transicao),transform var(--transicao);
}
.plano--destaque{border-color:var(--ink);box-shadow:var(--sombra-m)}
.plano[data-sugerido]{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-claro),var(--sombra-m)}
.plano__tag{
  align-self:flex-start;margin-bottom:16px;padding:5px 12px;border-radius:999px;
  background:var(--neblina);color:var(--suave);
  font-family:var(--fonte-display);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.plano__tag--forte{background:var(--ink);color:#fff}
.plano h3{font-size:1.6rem;color:var(--ink);margin-bottom:10px}
.plano__resumo{color:var(--suave);font-size:.94rem;margin-bottom:0}
/* Alinha as 4 faixas dos 3 cards (resumo, preço, itens, botão) na mesma linha.
   Antes, o min-height era uma muleta que nunca batia com o texto real, e o
   margin-top:auto do botão empurrava o CTA do Growth ~100px pra cima, porque
   ali existe a .plano__extra depois dele.
   O @supports é obrigatório: sem subgrid, o grid-row:span 5 quebraria a coluna. */
@supports (grid-template-rows:subgrid){
  @media (min-width:1081px){
    .planos{grid-template-rows:repeat(5,auto)}
    .plano{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
    .plano > header{grid-row:1}
    .plano__preco{grid-row:2}
    .plano__itens{grid-row:3}
    .plano .btn{grid-row:4;align-self:end;margin-top:0}
    .plano__extra{grid-row:5}
  }
}
.plano__preco{
  display:flex;align-items:baseline;gap:5px;margin:24px 0 6px;padding-top:22px;border-top:1px solid var(--linha);
  font-family:var(--fonte-display);color:var(--ink);
}
.plano__preco strong{font-size:clamp(2.4rem,3.4vw,3rem);font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.plano__moeda{font-size:1.1rem;font-weight:700;color:var(--suave)}
.plano__ciclo{font-size:.98rem;font-weight:600;color:var(--suave)}
.plano__preco--consulta strong{font-size:clamp(1.7rem,2.4vw,2.15rem)}
.plano__itens{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:11px}
.plano__itens li{position:relative;padding-left:28px;font-size:.95rem;color:var(--texto)}
.plano__itens li::before{
  content:"";position:absolute;left:2px;top:7px;width:12px;height:7px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);
}
.plano .btn{margin-top:auto;width:100%}
.plano__extra{margin:16px 0 0;font-size:.86rem;color:var(--suave);line-height:1.5}
.planos__notas{max-width:760px;margin:clamp(30px,3.5vw,44px) auto 0;text-align:center}
.planos__notas p{font-size:.94rem;color:var(--suave)}
.planos__implantacao{
  margin-top:18px;padding:20px 24px;text-align:left;
  background:var(--papel);border:1px solid var(--linha);border-left:3px solid var(--teal);border-radius:var(--raio);
}
.planos__implantacao strong{color:var(--ink)}

/* ---------- Resultado ---------- */
.resultado{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3.5vw,48px);align-items:center}
.resultado__lista{font-size:clamp(1.14rem,1.5vw,1.5rem);line-height:1.42;color:#D5E8E7;margin:0}
.resultado__frase{
  margin:0;padding:clamp(26px,3vw,36px);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--raio-g);
}
.resultado__frase p{
  font-family:var(--fonte-display);font-weight:700;font-size:clamp(1.24rem,1.9vw,1.72rem);
  line-height:1.2;letter-spacing:-.025em;color:#fff;margin:0 0 22px;
}
.resultado__frase .btn{width:auto}

/* ---------- FAQ ---------- */
.duvidas{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,64px);align-items:start}
.duvidas .cabecalho{margin-bottom:0;position:sticky;top:calc(var(--alt-topo) + 24px)}
.acordeao{border-top:1px solid var(--linha-forte)}
.item{border-bottom:1px solid var(--linha-forte)}
.item summary{
  display:flex;align-items:center;gap:18px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--fonte-display);font-weight:600;font-size:1.05rem;color:var(--ink);
  transition:color var(--transicao);
}
.item summary::-webkit-details-marker{display:none}
.item summary span{flex:1}
.item summary:hover{color:var(--teal-esc)}
.item summary i{
  position:relative;flex:0 0 20px;width:20px;height:20px;
  transition:transform var(--transicao);
}
.item summary i::before,.item summary i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--teal-esc);border-radius:2px;
  transform:translate(-50%,-50%);
}
.item summary i::before{width:14px;height:2px}
.item summary i::after{width:2px;height:14px;transition:opacity var(--transicao),transform var(--transicao)}
.item[open] summary i::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.item__corpo{padding:0 44px 26px 0}
.item__corpo p{margin:0;color:var(--suave);font-size:.98rem}

/* ---------- Fechamento + formulário ---------- */
.fechamento{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
.fechamento__reforco{margin-top:20px;font-weight:600;color:var(--ink)}
.fechamento__itens{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px}
.fechamento__itens li{position:relative;padding-left:28px;color:var(--texto);font-size:.98rem}
.fechamento__itens li::before{
  content:"";position:absolute;left:2px;top:8px;width:12px;height:7px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);
}

.formulario{
  padding:clamp(26px,3vw,38px);
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);box-shadow:var(--sombra-m);
}
.formulario h3{font-size:1.4rem;color:var(--ink);margin-bottom:6px}
.formulario__intro{font-size:.94rem;color:var(--suave);margin-bottom:24px}
.campo{margin-bottom:16px}
.campo label{display:block;margin-bottom:6px;font-size:.86rem;font-weight:600;color:var(--ink)}
.campo label span{color:#B23F27}   /* --coral puro não fecha 4.5:1 em texto */
.campo input[type=text],.campo select{
  width:100%;min-height:48px;padding:11px 14px;
  background:var(--papel);border:1px solid var(--linha-forte);border-radius:var(--raio);
  font-size:1rem;transition:border-color var(--transicao),box-shadow var(--transicao);
}
.campo select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A7379' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:17px;padding-right:38px;
  text-overflow:ellipsis}
/* :focus some com outline:none; o :focus-visible devolve o anel — sem ele o
   checkbox de consentimento ficava com indicador de foco de 1,13:1 (falha A). */
.campo input:focus,.campo select:focus{outline:none;border-color:var(--teal-esc);box-shadow:0 0 0 3px var(--teal-claro)}
.campo input:focus-visible,.campo select:focus-visible{outline:2.5px solid var(--teal-esc);outline-offset:2px}
.campo input[aria-invalid="true"]{border-color:var(--coral)}
.campo--check{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;margin:22px 0 20px}
.campo--check input{width:24px;height:24px;margin-top:0;accent-color:var(--teal-esc);cursor:pointer}
.campo--check label{margin:0;font-weight:400;font-size:.88rem;color:var(--suave);cursor:pointer}
.campo--check .erro{grid-column:1/-1}
.erro{margin:6px 0 0;min-height:0;font-size:.82rem;color:#B23F27;font-weight:500}  /* --coral puro dá 3,67:1 */
.erro:empty{display:none}
.formulario__rodape{margin:14px 0 0;font-size:.8rem;color:var(--suave);text-align:center}
/* link sozinho num parágrafo não tem a isenção "inline" do WCAG 2.5.8:
   precisa de 24px de altura de alvo. */
.formulario__rodape a{display:inline-block;padding:5px 4px;color:var(--teal-esc);text-decoration:underline;text-underline-offset:3px}
.formulario__rodape a:hover{color:var(--ink)}

/* ---------- Rodapé ---------- */
.rodape{background:var(--ink);color:#B9D2D2;padding-top:clamp(48px,6vw,76px)}
.rodape__grade{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);padding-bottom:clamp(36px,4vw,54px)}
.rodape__marca p{margin-top:16px;font-size:.94rem;max-width:44ch}
.rodape h2{font-family:var(--fonte-display);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7FE3DC;margin-bottom:16px}
.rodape__links{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.rodape__links a{font-size:.95rem;transition:color var(--transicao)}
.rodape__links a:hover{color:#fff}
.rodape__whats{display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:var(--fonte-display);font-weight:700;font-size:1.1rem;transition:color var(--transicao)}
.rodape__whats:hover{color:#7FE3DC}
.rodape__horario{margin-top:12px;font-size:.87rem}
.rodape__fim{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  padding-block:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.83rem;color:#8AAAAA;
}
.rodape__fim p{margin:0}
.rodape__legal a{display:inline-block;padding:5px 4px;text-decoration:underline;text-underline-offset:3px;transition:color var(--transicao)}
.rodape__legal a:hover{color:#fff}

/* ---------- Páginas legais ---------- */
.legal{max-width:72ch}
.legal h3{margin:38px 0 12px;font-size:1.18rem;color:var(--ink)}
.legal h3:first-child{margin-top:0}
.legal p{color:var(--suave);font-size:1rem}
.legal strong{color:var(--texto);font-weight:600}
.legal code{padding:2px 6px;background:var(--papel);border:1px solid var(--linha);border-radius:3px;font-size:.85em}
.legal__lista{margin:0 0 1em;padding:0;list-style:none;display:grid;gap:10px}
.legal__lista li{position:relative;padding-left:26px;color:var(--suave)}
.legal__lista li::before{content:"";position:absolute;left:2px;top:11px;width:10px;height:2px;background:var(--teal)}
.legal__data{margin-top:14px;font-size:.88rem;color:var(--suave)}
.legal__fecho{margin-top:38px;padding:20px 24px;background:var(--papel);border:1px solid var(--linha);border-left:3px solid var(--teal);border-radius:var(--raio)}
.legal__fecho a{color:var(--teal-esc);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- Atalho de contato no FAQ ---------- */
.atalho{margin-top:36px;padding-top:26px;border-top:1px solid var(--linha-forte)}
.atalho__titulo{margin:0 0 10px;font-size:.86rem;font-weight:600;color:var(--suave);letter-spacing:.02em}
.atalho__numero{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--fonte-display);font-weight:800;font-size:1.32rem;letter-spacing:-.02em;
  color:var(--ink);transition:color var(--transicao),transform var(--transicao);
}
.atalho__numero .i{width:21px;height:21px;color:var(--teal-esc);transition:transform var(--transicao)}
.atalho__numero:hover{color:var(--teal-esc)}
.atalho__numero:hover .i{transform:scale(1.12) rotate(-6deg)}
.atalho__nota{margin:12px 0 0;font-size:.86rem;color:var(--suave)}

/* ---------- Botão flutuante ---------- */
.flutuante{
  position:fixed;
  right:calc(18px + env(safe-area-inset-right,0px));
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:45;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 18px;border-radius:999px;
  background:var(--teal-esc);color:#fff;
  font-family:var(--fonte-display);font-weight:700;font-size:.9rem;
  box-shadow:0 10px 30px -8px rgba(0,128,122,.6);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity 260ms ease,transform 260ms ease,background var(--transicao);
}
.flutuante[data-visivel]{opacity:1;transform:none;pointer-events:auto}
.flutuante:hover{background:var(--ink)}
.flutuante svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Revelação ---------- */
[data-revelar]{opacity:0;transform:translateY(18px);transition:opacity 620ms cubic-bezier(.22,.61,.36,1),transform 620ms cubic-bezier(.22,.61,.36,1)}
[data-revelar][data-visivel]{opacity:1;transform:none}

/* =========================================================
   INTERAÇÃO — o que responde ao mouse
   Regra: o que é clicável reage forte; o que é informativo
   reage de leve. Tudo é desligado por prefers-reduced-motion.
   ========================================================= */

/* botões: a seta anda junto */
.btn .i{transition:transform var(--transicao)}
.btn:hover .i{transform:translateX(3px)}
.btn--fantasma:hover .i,
.btn--claro:hover .i{transform:scale(1.1) rotate(-6deg)}
.btn--primario:hover{transform:translateY(-2px)}
.btn--contorno:hover,.btn--fantasma:hover{transform:translateY(-2px);box-shadow:var(--sombra-s)}

/* menu: sublinhado que cresce da esquerda */
.menu a::before{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform 260ms cubic-bezier(.22,.61,.36,1);
}
.menu a:hover::before{transform:scaleX(1)}
.menu a[aria-current="true"]::before{display:none}

/* cartões: sobem, ganham borda e o ícone acende */
.cartao{transition:border-color var(--transicao),box-shadow var(--transicao),transform var(--transicao)}
.cartao:hover{transform:translateY(-4px);border-color:var(--teal-borda);box-shadow:var(--sombra-m)}
.cartao__icone{transition:background var(--transicao),color var(--transicao),transform var(--transicao)}
.cartao:hover .cartao__icone{background:var(--teal-esc);color:#fff;transform:scale(1.06) rotate(-4deg)}

/* dados: o número cresce um tico */
.dado{transition:border-color var(--transicao),box-shadow var(--transicao),transform var(--transicao)}
.dado:hover{transform:translateY(-4px);border-color:var(--teal-borda);box-shadow:var(--sombra-m)}
.dado__num{display:inline-block;transition:transform 260ms cubic-bezier(.22,.61,.36,1)}
.dado:hover .dado__num{transform:scale(1.06)}

/* critérios numerados: a linha inteira desliza e o número acende */
.criterios li{transition:background var(--transicao),padding-left var(--transicao)}
.criterios li::before{transition:color var(--transicao),transform var(--transicao)}
.criterios li:hover{background:var(--papel);padding-left:70px}
.criterios li:hover::before{color:var(--teal);transform:scale(1.15)}
.criterios h3{transition:color var(--transicao)}
.criterios li:hover h3{color:var(--teal-esc)}

/* passos: a bolinha do número preenche */
.passo::before{transition:background var(--transicao),color var(--transicao),border-color var(--transicao),transform var(--transicao)}
.passo:hover::before{background:var(--teal-esc);border-color:var(--teal-esc);color:#fff;transform:scale(1.08)}
.passo h3{transition:color var(--transicao)}
.passo:hover h3{color:var(--teal-esc)}

/* planos: sobem; o destacado sobe um pouco mais */
.plano:hover{transform:translateY(-5px);border-color:var(--teal-borda);box-shadow:var(--sombra-m)}
.plano--destaque:hover{border-color:var(--ink)}
.plano__preco strong{display:inline-block;transition:transform 260ms cubic-bezier(.22,.61,.36,1)}
.plano:hover .plano__preco strong{transform:scale(1.04)}

/* FAQ: a pergunta desliza e o sinal gira */
.item{transition:background var(--transicao)}
.item:hover{background:var(--neblina)}
.item summary span{display:block;transition:transform var(--transicao)}
.item summary:hover span{transform:translateX(5px)}
.item summary:hover i{transform:rotate(90deg)}
.item[open] summary:hover i{transform:none}

/* foto da solução: zoom lento */
.solucao__foto{overflow:hidden}
.solucao__foto picture{display:block;overflow:hidden}
.solucao__foto img{transition:transform 700ms cubic-bezier(.22,.61,.36,1)}
.solucao__foto:hover img{transform:scale(1.045)}

/* agenda: o horário marcado responde ao toque do mouse */
.slot--novo{transition:transform var(--transicao),box-shadow var(--transicao),background var(--transicao)}
.slot--novo:hover{transform:translateY(-2px) scale(1.04);background:var(--teal);box-shadow:0 10px 20px -8px rgba(0,128,122,.75);z-index:2}

/* faixa escura e provas do hero: reação discreta */
.faixa__grade > div,
.hero__provas > div{transition:transform var(--transicao)}
.faixa__grade > div:hover,
.hero__provas > div:hover{transform:translateY(-2px)}
.faixa strong,.hero__provas dt{transition:color var(--transicao)}
.faixa__grade > div:hover strong{color:#7FE3DC}
.hero__provas > div:hover dt{color:var(--teal-esc)}

/* celular do hero: profundidade real, sem biblioteca nenhuma */
.hero__demo{perspective:1400px}
.fone{transition:transform 520ms cubic-bezier(.22,.61,.36,1),box-shadow 520ms ease}
.hero__demo:hover .fone{transform:rotateY(-6deg) rotateX(2deg) translateY(-6px);box-shadow:0 34px 70px -30px rgba(14,42,49,.5)}

/* rodapé: links deslizam */
.rodape__links a{transition:color var(--transicao),transform var(--transicao)}
.rodape__links a:hover{transform:translateX(4px)}

/* links de texto */
.fone__nota a,.legal__fecho a,.item__corpo a{transition:color var(--transicao),text-decoration-color var(--transicao)}
.item__corpo a,.legal__fecho a{text-decoration:underline;text-underline-offset:3px;color:var(--teal-esc)}
.fone__nota a:hover,.item__corpo a:hover,.legal__fecho a:hover{color:var(--ink)}

/* painéis e colunas */
.painel{transition:box-shadow var(--transicao),transform var(--transicao)}
.painel:hover{box-shadow:var(--sombra-s)}
.coluna--depois li,.coluna--antes li{transition:color var(--transicao)}
.coluna--depois li:hover{color:#fff}
.coluna--antes li:hover{color:var(--texto)}

/* flutuante */
.flutuante:hover{transform:translateY(-3px) scale(1.03)}

/* nada disso vale para quem tem toque em vez de mouse */
@media (hover:none){
  .cartao:hover,.dado:hover,.plano:hover,.faixa__grade > div:hover,
  .hero__provas > div:hover,.btn--primario:hover,.btn--contorno:hover,
  .btn--fantasma:hover,.flutuante:hover{transform:none}
  .hero__demo:hover .fone{transform:none}
  .criterios li:hover{padding-left:62px;background:transparent}
  .solucao__foto:hover img{transform:none}
}


/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width:1080px){
  /* cabeçalho volta a empilhar quando não sobra largura para 2 colunas */
  .cabecalho{display:block}
  .cabecalho h1,.cabecalho h2{max-width:22ch;margin-bottom:14px}
  .cabecalho .chamada{padding-bottom:0;max-width:60ch}
  .fechamento{align-items:start}

  .hero__grade{grid-template-columns:1fr;gap:44px}
  .hero__texto{max-width:640px}
  .hero__sub{max-width:52ch}
  .hero__demo{align-items:flex-start}
  .hero__fundo::after{display:none}
  .solucao,.duvidas,.fechamento,.resultado{grid-template-columns:1fr}
  .duvidas .cabecalho,.solucao__foto{position:static}
  .solucao__foto img{aspect-ratio:16/9}
  .passos{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0}
  .passo{padding-right:24px}
  .passo:nth-child(odd){padding-left:0;border-left:0}
  .passo:nth-child(even){padding-left:28px;border-left:1px solid var(--linha)}

  /* O header desktop só cabe a partir de ~1065px: abaixo disso o menu e o CTA
     quebravam em 2 linhas e a marca vazava 24px. O drawer entra aqui, não em 900. */
  .menu{
    position:fixed;inset:var(--alt-topo) 0 auto;
    display:grid;gap:2px;
    padding:16px var(--gutter) 26px;
    background:var(--papel);border-bottom:1px solid var(--linha);
    box-shadow:0 24px 40px -24px rgba(14,42,49,.35);
    transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:opacity 200ms ease,transform 200ms ease,visibility 200ms;
    max-height:calc(100dvh - var(--alt-topo));overflow-y:auto;
  }
  .menu[data-aberto]{transform:none;opacity:1;visibility:visible}
  .menu a{padding:14px 4px;font-size:1.02rem;border-bottom:1px solid var(--linha)}
  .menu a[aria-current="true"]::after{display:none}
  .menu__cta{
    display:flex;align-items:center;justify-content:center;
    margin-top:14px;padding:15px 20px!important;border:0!important;border-radius:var(--raio);
    background:var(--ink);color:#fff!important;font-family:var(--fonte-display);font-weight:700;
  }
  .topo__cta{display:none}
  .hamburguer{
    display:grid;gap:5px;place-content:center;
    width:44px;height:44px;padding:0;margin-right:-8px;
    background:transparent;border:0;cursor:pointer;
  }
  .hamburguer span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform 220ms ease,opacity 160ms ease}
  .hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

@media (max-width:900px){
  :root{--alt-topo:64px}

  .faixa__grade,.desafio,.cartoes,.dados,.planos,.rodape__grade{grid-template-columns:1fr}
  .faixa__grade > div{padding:24px 0}
  .faixa__grade > div + div{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.13);padding-top:24px}
  .comparativo{grid-template-columns:1fr}
  .comparativo__seta{transform:rotate(90deg);padding:4px 0}
  .plano__resumo{min-height:0}
  .item__corpo{padding-right:0}
}

@media (max-width:600px){
  .hero__provas{grid-template-columns:1fr;border-top:0}
  .hero__provas > div{padding:16px 0;border-top:1px solid var(--linha)}
  .hero__provas > div + div{padding-left:0;border-left:0}
  .hero__acoes{gap:10px}
  .hero__acoes .btn{width:100%}
  .passos{grid-template-columns:1fr}
  .passo,.passo:nth-child(even){padding-left:0;border-left:0}
  .passo::before{margin-bottom:16px}
  .custo__campos{grid-template-columns:1fr}
  .rodape__fim{justify-content:flex-start}
  .flutuante span{display:none}
  .flutuante{padding:15px;
    right:calc(14px + env(safe-area-inset-right,0px));
    bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  /* o +/- do FAQ não pode morar embaixo do flutuante (50x50 no canto) */
  .item summary{padding-right:58px}
  .fone{width:100%}
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-revelar]{opacity:1;transform:none}
}

/* ---------- Impressão ---------- */
@media print{
  .topo,.flutuante,.hero__demo,.formulario{display:none}
  body{color:#000}
  .secao{padding-block:24px}
  /* A revelação é enfeite de tela. No papel nada pode sair invisível: o
     IntersectionObserver não roda contra a paginação de impressão, então
     tudo que não foi rolado sairia em branco no PDF que circula na clínica. */
  [data-revelar]{opacity:1!important;transform:none!important;transition:none!important}
}