/* ===========================================================================
   LANDING

   Quem chega aqui é médico dono de consultório pequeno, no celular, entre um
   paciente e outro. Tem uns 40 segundos de atenção e já foi decepcionado por
   dois ou três sistemas antes.

   TRÊS DECISÕES QUE VÊM DISSO:

   1. O PREÇO APARECE. Quase todo concorrente esconde atrás de "fale com um
      consultor". Para quem tem 40 segundos, isso é o fim da visita — e para
      quem gerencia o próprio consultório, é sinal de que vai ser caro.

   2. NADA DE FOTO DE BANCO DE IMAGENS. Médico sorrindo de jaleco com tablet
      não convence ninguém que já viu essa foto em dez sites. O produto se
      mostra pela tela dele.

   3. TIPOGRAFIA GRANDE, POUCA COISA POR VEZ. Leitura no celular, com pressa.
   =========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --tinta:#0D1117;
  --tinta-2:#4A5462;
  --tinta-3:#8A93A2;
  --papel:#FFFFFF;
  --papel-2:#F6F8FB;
  --linha:rgba(13,17,23,.09);
  --azul:#0B57D0;
  --azul-claro:#E8F0FE;
  --azul-fundo:#0A2A5E;
  --verde:#0A7A47;
  --verde-claro:#E7F5EE;
  --r:16px;
  --largura:1080px;
}

html{scroll-behavior:smooth}
body{
  font:400 16px/1.6 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

.faixa{max-width:var(--largura);margin:0 auto;padding:0 22px}

/* ── Cabeçalho ──────────────────────────────────────────────────────────── */
.topo-site{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--linha);
}
.topo-site .faixa{
  display:flex;align-items:center;gap:16px;height:60px;
}
.marca-site{
  display:flex;align-items:center;gap:9px;
  font-size:17px;font-weight:680;letter-spacing:-.025em;
  margin-right:auto;
}
.marca-site .sinal{
  width:28px;height:28px;border-radius:8px;flex:none;
  background:var(--azul);color:#fff;
  display:grid;place-items:center;
}
.topo-site nav{display:none;gap:22px;font-size:14.5px;color:var(--tinta-2)}
.topo-site nav a:hover{color:var(--tinta)}
@media(min-width:820px){ .topo-site nav{display:flex} }

.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:0 18px;min-height:44px;border-radius:11px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .1s ease,background .14s,box-shadow .14s;
}
.bt:active{transform:scale(.98)}
.bt.pri{background:var(--azul);color:#fff;box-shadow:0 1px 3px rgba(11,87,208,.3)}
.bt.pri:hover{background:#0947AE}
.bt.sec{background:var(--papel);color:var(--tinta);border-color:var(--linha)}
.bt.sec:hover{border-color:var(--tinta-3)}
.bt.gr{min-height:52px;padding:0 26px;font-size:16.5px}

/* ── Herói ──────────────────────────────────────────────────────────────── */
.heroi{padding:52px 0 40px;text-align:center}
@media(min-width:820px){ .heroi{padding:78px 0 56px} }

.etiqueta{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:999px;
  background:var(--verde-claro);color:var(--verde);
  font-size:12.5px;font-weight:650;letter-spacing:-.005em;
  margin-bottom:20px;
}
.etiqueta .ponto{
  width:6px;height:6px;border-radius:50%;background:var(--verde);
  animation:pulsa 2.4s infinite;
}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}}

.heroi h1{
  font-size:clamp(31px,7vw,54px);
  font-weight:730;letter-spacing:-.04em;line-height:1.08;
  max-width:15ch;margin:0 auto;
}
.heroi h1 em{font-style:normal;color:var(--azul)}

.heroi .abaixo{
  font-size:clamp(16.5px,2.4vw,19px);
  color:var(--tinta-2);line-height:1.55;
  max-width:52ch;margin:18px auto 0;
}

.acoes-heroi{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin-top:28px;
}
.selo-heroi{
  margin-top:14px;font-size:13px;color:var(--tinta-3);
}

/* ── Tela do produto ────────────────────────────────────────────────────── */
.vitrine{
  margin-top:44px;
  border-radius:var(--r);
  border:1px solid var(--linha);
  background:var(--papel);
  box-shadow:0 20px 50px -22px rgba(13,17,23,.28);
  overflow:hidden;
}
.vitrine-barra{
  display:flex;align-items:center;gap:6px;
  padding:11px 14px;border-bottom:1px solid var(--linha);
  background:var(--papel-2);
}
.vitrine-barra i{width:10px;height:10px;border-radius:50%;background:#D6DBE3}
.vitrine-corpo{padding:20px 18px;text-align:left}

/* ── Blocos ─────────────────────────────────────────────────────────────── */
.bloco{padding:56px 0}
.bloco.claro{background:var(--papel-2)}
.bloco h2{
  font-size:clamp(25px,4.4vw,36px);
  font-weight:700;letter-spacing:-.032em;line-height:1.16;
  max-width:20ch;
}
.bloco .sub{
  font-size:16.5px;color:var(--tinta-2);line-height:1.6;
  max-width:56ch;margin-top:12px;
}
.olho{
  font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--azul);margin-bottom:11px;
}

/* ── Recursos ───────────────────────────────────────────────────────────── */
.grade{
  display:grid;gap:14px;margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.cartao{
  background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--r);padding:22px 20px;
  transition:transform .16s ease,box-shadow .16s;
}
.cartao:hover{transform:translateY(-2px);box-shadow:0 10px 26px -14px rgba(13,17,23,.24)}
.cartao .ico{
  width:38px;height:38px;border-radius:11px;
  background:var(--azul-claro);color:var(--azul);
  display:grid;place-items:center;margin-bottom:14px;
}
.cartao .ico svg{width:19px;height:19px;stroke-width:1.8}
.cartao h3{font-size:16.5px;font-weight:640;letter-spacing:-.018em;margin-bottom:6px}
.cartao p{font-size:14.5px;color:var(--tinta-2);line-height:1.55}

/* ── Fluxo da consulta ──────────────────────────────────────────────────── */
.passos{display:grid;gap:2px;margin-top:34px}
.passo{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--papel);border:1px solid var(--linha);
  padding:20px;
}
.passo:first-child{border-radius:var(--r) var(--r) 0 0}
.passo:last-child{border-radius:0 0 var(--r) var(--r)}
.passo .n{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--azul);color:#fff;
  display:grid;place-items:center;
  font-size:13.5px;font-weight:700;
}
.passo h3{font-size:16px;font-weight:620;letter-spacing:-.015em;margin-bottom:4px}
.passo p{font-size:14.5px;color:var(--tinta-2);line-height:1.5}

/* ── Preços ─────────────────────────────────────────────────────────────── */
.planos{
  display:grid;gap:14px;margin-top:36px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
}
.plano{
  background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--r);padding:26px 22px;
  display:flex;flex-direction:column;
}
.plano.destaque{
  border-color:var(--azul);
  box-shadow:0 0 0 3px var(--azul-claro);
  position:relative;
}
.plano .fita{
  position:absolute;top:-11px;left:22px;
  background:var(--azul);color:#fff;
  padding:3px 11px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.plano h3{font-size:18px;font-weight:680;letter-spacing:-.02em}
.plano .preco{margin:12px 0 4px}
.plano .preco b{font-size:38px;font-weight:730;letter-spacing:-.04em}
.plano .preco span{font-size:14px;color:var(--tinta-3)}
.plano .quem{font-size:13.5px;color:var(--tinta-2);margin-bottom:18px;min-height:2.6em}
.plano ul{list-style:none;flex:1;margin-bottom:20px}
.plano li{
  display:flex;gap:9px;align-items:flex-start;
  font-size:14.5px;line-height:1.5;padding:6px 0;
}
.plano li svg{width:15px;height:15px;flex:none;margin-top:4px;color:var(--verde)}

/* ── Segurança ──────────────────────────────────────────────────────────── */
.confianca{
  display:grid;gap:12px;margin-top:32px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.confianca div{
  display:flex;gap:12px;align-items:flex-start;
  padding:18px;border-radius:var(--r);
  background:var(--papel);border:1px solid var(--linha);
}
.confianca svg{width:19px;height:19px;flex:none;color:var(--azul);margin-top:2px;stroke-width:1.8}
.confianca b{display:block;font-size:14.5px;font-weight:620;margin-bottom:3px}
.confianca span{font-size:13.5px;color:var(--tinta-2);line-height:1.5}

/* ── Perguntas ──────────────────────────────────────────────────────────── */
.perguntas{margin-top:32px;max-width:720px}
.pergunta{border-bottom:1px solid var(--linha)}
.pergunta summary{
  padding:18px 0;cursor:pointer;list-style:none;
  font-size:16px;font-weight:600;letter-spacing:-.015em;
  display:flex;align-items:center;gap:12px;
}
.pergunta summary::-webkit-details-marker{display:none}
.pergunta summary::after{
  content:'+';margin-left:auto;font-size:21px;font-weight:400;
  color:var(--tinta-3);transition:transform .2s;
}
.pergunta[open] summary::after{content:'−'}
.pergunta p{
  font-size:15px;color:var(--tinta-2);line-height:1.65;
  padding-bottom:18px;max-width:62ch;
}

/* ── Chamada final ──────────────────────────────────────────────────────── */
.final{
  background:linear-gradient(165deg,#0A2A5E,#08234F);
  color:#fff;text-align:center;padding:64px 0;
}
.final h2{color:#fff;margin:0 auto;max-width:18ch}
.final .sub{color:rgba(255,255,255,.76);margin:14px auto 26px}
.final .bt.pri{background:#fff;color:var(--azul-fundo)}
.final .bt.pri:hover{background:#F0F4FA}
.final .bt.sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.pe{padding:40px 0;border-top:1px solid var(--linha);font-size:13.5px;color:var(--tinta-3)}
.pe .linhas-pe{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.pe a:hover{color:var(--tinta)}
.pe .aviso{margin-top:18px;line-height:1.6;max-width:70ch;font-size:12.5px}