/* ═══════════════════════════════════════════════════════════════
   EasyGuia — site institucional · v2 "registro de periódico"
   (11/08/2026, direção do Dr. Vinícius: alto padrão intelectual,
   interface coerente com o público cirurgião)

   O vocabulário visual é o da LITERATURA MÉDICA, não o do formulário:
   resumo estruturado no hero, figuras numeradas com legenda, Tabela 1
   com fios de periódico. Três vozes tipográficas:
     prosa      → serifa de sistema (Iowan/New York/Palatino/Georgia)
     interface  → sans de sistema
     códigos    → monoespaçada (só onde há código de verdade)
   Nenhuma fonte externa: o site não entrega IP de visitante a CDN —
   coerente com "o dado não sai do aparelho".
   ═══════════════════════════════════════════════════════════════ */
:root{
  --tinta:#111a26;
  --tinta-60:rgba(17,26,38,.64);
  --tinta-40:rgba(17,26,38,.42);
  --azul:#1a52e8;
  --azul-esc:#1140c4;
  --marinho:#0b1f4a;
  --papel:#fbfcfd;
  --superficie:#ffffff;
  --abstrato:#f2f5f9;
  --linha:#d9dfe7;
  --linha-forte:#9fabbc;
  --verde:#0e7c66;
  --glosa:#a31621;
  --sombra-folha:0 1px 2px rgba(17,26,38,.08), 0 12px 28px -12px rgba(17,26,38,.22), 0 30px 56px -30px rgba(17,26,38,.18);
  --serif:ui-serif,"Iowan Old Style","New York","Palatino","Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Roboto Mono",monospace;
  --lg:clamp(16px,4vw,28px);
  --max:1120px;
}
@media (prefers-color-scheme:dark){
  :root{
    --tinta:#e9edf4;
    --tinta-60:rgba(233,237,244,.68);
    --tinta-40:rgba(233,237,244,.45);
    --azul:#7ba2ff;
    --azul-esc:#9cb9ff;
    --marinho:#0b1f4a;
    --papel:#0a1730;
    --superficie:#101f3d;
    --abstrato:#0e1c38;
    --linha:#263557;
    --linha-forte:#3d5480;
    --verde:#3ec9a7;
    --glosa:#ff8b80;
    --sombra-folha:0 1px 2px rgba(0,0,0,.5), 0 16px 36px -12px rgba(0,0,0,.6), 0 36px 72px -30px rgba(0,0,0,.5);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font:400 17.5px/1.66 var(--serif);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%; height:auto; display:block}
a{color:var(--azul); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--azul); outline-offset:3px; border-radius:2px}
em{font-style:italic}

.env{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--lg)}

/* ── rótulo de seção: kicker de periódico (sans, versalete, fio) ── */
.campo{
  display:flex; align-items:baseline; gap:14px;
  font:600 11.5px/1.4 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:var(--tinta-40); margin:0 0 22px;
}
.campo::after{content:""; flex:1; height:1px; background:var(--linha); align-self:center}
.campo .n{
  font:500 11px/1 var(--mono); letter-spacing:.05em; color:var(--tinta-40);
  border:1px solid var(--linha); border-radius:2px; padding:3px 6px;
}

/* numeração de figura/tabela/vídeo — a mobília do periódico */
.fig-n{font:600 13px/1 var(--sans); color:var(--tinta); letter-spacing:.01em}

/* ── cabeçalho ── */
.topo{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--papel) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--linha);
}
.topo .env{display:flex; align-items:center; gap:20px; min-height:60px}
.marca{display:flex; align-items:center; gap:9px; font:700 18px/1 var(--sans); letter-spacing:-.02em; color:var(--tinta)}
.marca:hover{text-decoration:none}
.marca svg{flex:none}
.nav{display:flex; align-items:center; gap:26px; margin-left:auto}
.nav a.link{font:500 14.5px/1 var(--sans); color:var(--tinta-60)}
.nav a.link:hover{color:var(--tinta); text-decoration:none}
@media (max-width:820px){ .nav a.link{display:none} }

/* ── botões: a voz de instrumento (sans, firme, sem enfeite) ── */
.bt{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:4px; font:600 15.5px/1 var(--sans); letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease;
}
.bt:hover{text-decoration:none}
.bt-cheio{background:var(--azul); color:#fff}
.bt-cheio:hover{background:var(--azul-esc)}
@media (prefers-color-scheme:dark){ .bt-cheio{color:#07142c} }
.bt-vazio{border-color:var(--linha-forte); color:var(--tinta); background:transparent}
.bt-vazio:hover{border-color:var(--tinta)}
.bt-peq{padding:10px 18px; font-size:14.5px}

/* ── hero: título de artigo + resumo estruturado ── */
.hero{padding:clamp(44px,6.5vw,80px) 0 clamp(36px,5vw,58px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(34px,5vw,70px); align-items:start}
@media (max-width:940px){ .hero-grid{grid-template-columns:1fr; gap:40px} }

.kicker{
  margin:0 0 20px; font:600 11.5px/1.5 var(--sans); letter-spacing:.22em;
  text-transform:uppercase; color:var(--tinta-40);
}
h1{
  margin:0 0 26px; font-family:var(--serif); font-weight:600; letter-spacing:-.018em;
  font-size:clamp(34px,4.9vw,52px); line-height:1.12; text-wrap:balance;
}
h1 em{font-style:normal; color:var(--azul)}
.abertura{margin:0 0 26px; font-size:clamp(17px,2vw,19px); color:var(--tinta-60); max-width:36em; line-height:1.66}

/* o resumo estruturado — a assinatura da página */
.resumo{
  margin:0 0 28px; padding:20px 22px;
  background:var(--abstrato); border:1px solid var(--linha); border-left:3px solid var(--marinho);
  border-radius:3px; display:grid; gap:13px;
}
@media (prefers-color-scheme:dark){ .resumo{border-left-color:var(--azul)} }
.resumo > div{display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:baseline}
@media (max-width:560px){ .resumo > div{grid-template-columns:1fr; gap:3px} }
.resumo dt{
  font:600 11px/1.6 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-40); margin:0;
}
.resumo dd{margin:0; font-size:15.5px; line-height:1.6; color:var(--tinta)}
.resumo dd strong{font-weight:600}

.acoes{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px}
.gratis-nota{
  display:flex; align-items:center; gap:7px; margin:0 0 18px;
  font:500 13px/1.4 var(--sans); letter-spacing:.02em; color:var(--verde);
}
.gratis-nota svg{flex:none}
.selo{display:flex; align-items:flex-start; gap:9px; font:400 14px/1.55 var(--sans); color:var(--tinta-60); max-width:46ch; margin:0}
.selo svg{flex:none; margin-top:3px; color:var(--verde)}

/* Figura 1: a folha, reta como em página de artigo */
.folha-caixa{margin:0}
.folha{
  border:1px solid var(--linha); border-radius:2px; box-shadow:var(--sombra-folha);
  background:#fff; width:100%;
}
.folha-caixa figcaption, .legenda{
  margin-top:12px; font:400 13px/1.55 var(--sans); color:var(--tinta-60);
}

/* ── Tabela 1: fios de periódico (grosso em cima, fino no meio) ── */
.tabela-faixa{border-top:1px solid var(--linha); border-bottom:1px solid var(--linha); background:var(--superficie)}
.tabela-faixa .env{padding-block:clamp(26px,4vw,40px)}
.t1-wrap{overflow-x:auto}
table.t1{width:100%; border-collapse:collapse; min-width:560px}
table.t1 caption{
  text-align:left; padding-bottom:12px; font:400 13px/1.5 var(--sans); color:var(--tinta-60);
}
table.t1 thead th{
  text-align:left; font:600 11px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-40); padding:10px 18px 8px 0;
  border-top:2px solid var(--tinta); border-bottom:1px solid var(--linha);
}
table.t1 tbody td{
  font:500 clamp(24px,2.8vw,31px)/1.2 var(--serif); letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; padding:14px 18px 16px 0;
  border-bottom:2px solid var(--tinta);
}
table.t1 td small{display:block; font:400 13px/1.5 var(--sans); color:var(--tinta-60); letter-spacing:0; margin-top:3px}

/* ── seções ── */
section{padding:clamp(52px,7.5vw,88px) 0}
h2{
  margin:0 0 16px; font-family:var(--serif); font-weight:600; letter-spacing:-.015em;
  font-size:clamp(26px,3.6vw,38px); line-height:1.16; text-wrap:balance; max-width:22ch;
}
.intro{margin:0 0 42px; font-size:17.5px; color:var(--tinta-60); max-width:58ch; line-height:1.66}

/* problema: três parágrafos com fio clínico, sem cartões chamativos */
.dores{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,40px)}
@media (max-width:820px){ .dores{grid-template-columns:1fr} }
.dor{padding-top:16px; border-top:2px solid var(--glosa)}
.dor h3{margin:0 0 8px; font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:-.01em; line-height:1.3}
.dor p{margin:0; font-size:15.5px; color:var(--tinta-60); line-height:1.62}
.marca-dor{display:none}

/* método: os passos, com linha fina de sumário */
.passos{display:grid; gap:0; border-top:1px solid var(--linha)}
.passo{
  display:grid; grid-template-columns:56px minmax(0,1fr) minmax(0,.9fr); gap:0 22px;
  align-items:start; border-bottom:1px solid var(--linha);
}
@media (max-width:860px){ .passo{grid-template-columns:44px minmax(0,1fr)} }
.passo-n{
  padding:30px 0; font:500 14px/1 var(--mono); color:var(--tinta-40);
  font-variant-numeric:tabular-nums;
}
.passo-txt{padding:28px 0 30px}
.passo-txt h3{margin:0 0 8px; font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:-.012em; line-height:1.3}
.passo-txt p{margin:0; font-size:15.5px; color:var(--tinta-60); line-height:1.64}
.passo-img{padding:24px 0 26px; align-self:center}
@media (max-width:860px){
  .passo-img{grid-column:1/-1; padding:0 0 28px}
  .passo-txt{padding-bottom:18px}
}
.passo-img img{
  border:1px solid var(--linha); border-radius:2px; width:100%;
  box-shadow:0 2px 10px rgba(17,26,38,.08);
  max-height:330px; object-fit:cover; object-position:top center;
}

/* demonstração */
.video-caixa{
  border:1px solid var(--linha); border-radius:10px; overflow:hidden;
  box-shadow:var(--sombra-folha); background:#000; max-width:330px; margin-inline:auto;
}
.video-caixa video{width:100%; display:block; aspect-ratio:9/16; object-fit:cover; background:#000}
.demo-grid{display:grid; grid-template-columns:330px minmax(0,1fr); gap:clamp(28px,5vw,60px); align-items:center}
@media (max-width:820px){ .demo-grid{grid-template-columns:1fr; gap:34px} }
.demo-lista{list-style:none; margin:0; padding:0; display:grid; gap:13px; counter-reset:d}
.demo-lista li{
  display:grid; grid-template-columns:24px minmax(0,1fr); gap:13px; align-items:baseline;
  font-size:16px; color:var(--tinta-60); line-height:1.55;
}
.demo-lista li::before{
  counter-increment:d; content:counter(d);
  font:500 13px/1 var(--mono); color:var(--tinta-40); font-variant-numeric:tabular-nums;
}

/* vídeos curtos */
.reels{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:22px; margin-top:12px}
.reel{margin:0}
.reel .moldura{
  border:1px solid var(--linha); border-radius:10px; overflow:hidden; background:#000;
  box-shadow:0 2px 10px rgba(17,26,38,.1);
}
.reel video{width:100%; display:block; aspect-ratio:9/16; object-fit:cover; background:#000}
.reel figcaption{padding:11px 2px 0; font:400 13px/1.5 var(--sans); color:var(--tinta-60)}
.reel b{display:block; font:600 15px/1.3 var(--sans); letter-spacing:-.01em; color:var(--tinta)}
.reel span{display:block; margin-top:2px}

/* resultados: a galeria como prancha de figuras */
.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:22px}
.gcard{margin:0}
.gcard a{display:block; border:1px solid var(--linha); border-radius:2px; background:#fff; padding:8px;
  box-shadow:0 1px 3px rgba(17,26,38,.06); transition:box-shadow .18s ease, transform .18s ease}
.gcard a:hover{transform:translateY(-3px); box-shadow:0 12px 26px -10px rgba(17,26,38,.28); text-decoration:none}
.gcard img{border-radius:1px; width:100%}
.gcard figcaption{padding:11px 3px 0; font:400 13px/1.5 var(--sans); color:var(--tinta-60); text-align:left}
.gcard figcaption b{display:block; font:600 15px/1.3 var(--sans); letter-spacing:-.01em; color:var(--tinta)}
.gcard figcaption span{display:block; margin-top:2px}
.nota{margin:28px 0 0; font:400 14px/1.6 var(--sans); color:var(--tinta-40); max-width:66ch}

/* privacidade */
.privacidade{background:var(--superficie); border-top:1px solid var(--linha); border-bottom:1px solid var(--linha)}
.priv-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:start}
@media (max-width:860px){ .priv-grid{grid-template-columns:1fr} }
.lista{list-style:none; margin:0; padding:0; display:grid; gap:15px}
.lista li{display:flex; gap:12px; font-size:16px; color:var(--tinta-60); line-height:1.58}
.lista svg{flex:none; margin-top:4px; color:var(--verde)}

/* perguntas */
details{border-bottom:1px solid var(--linha)}
details:first-of-type{border-top:1px solid var(--linha)}
summary{
  list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-family:var(--serif); font-size:18.5px; font-weight:600; letter-spacing:-.01em; line-height:1.4;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font:300 24px/1 var(--sans); color:var(--tinta-40);
}
details[open] summary::after{content:"−"}
details p{margin:0 0 24px; color:var(--tinta-60); font-size:16px; max-width:66ch; line-height:1.66}

/* fecho */
.fecho{text-align:center}
.fecho h2{margin-inline:auto; max-width:18ch}
.fecho .intro{margin-inline:auto; text-align:center}
.fecho .acoes{justify-content:center; margin-bottom:0}

/* rodapé */
.rodape{border-top:1px solid var(--linha); padding:44px 0 56px; background:var(--superficie)}
.rodape-grid{display:flex; flex-wrap:wrap; gap:28px 48px; justify-content:space-between; align-items:flex-start}
.rodape p{margin:0 0 7px; font:400 14.5px/1.6 var(--sans); color:var(--tinta-60)}
.rodape .aviso{font-size:13px; color:var(--tinta-40); max-width:62ch; margin-top:18px}
.rodape-links{display:grid; gap:9px}
.rodape-links a{font:400 14.5px/1 var(--sans); color:var(--tinta-60)}
.rodape-links a:hover{color:var(--azul)}

/* ── contato: o site nao tinha nenhum, e o canal do projeto e WhatsApp ── */
.rodape-contato{display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  font:500 14.5px/1.4 var(--sans); color:var(--azul)}
.rodape-contato:hover{text-decoration:none; color:var(--azul-esc)}
.rodape-contato svg{flex:none}

/* ── assinatura do estudio que construiu o EasyGuia ──
   Marca desenhada em SVG inline com currentColor de proposito: herda o tema
   claro/escuro sozinha, coisa que um PNG de logo nao faz. */
.estudio{margin-top:30px; padding-top:22px; border-top:1px solid var(--linha);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px}
.estudio-marca{display:inline-flex; align-items:center; gap:9px; flex:none;
  font:600 15px/1 var(--sans); letter-spacing:-.012em; color:var(--tinta)}
.estudio-marca svg{flex:none; color:var(--azul)}
.estudio-lema{margin:0; font:400 13.5px/1.5 var(--serif); font-style:italic;
  color:var(--tinta-40); max-width:54ch}

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

/* ───────────────────────────────────────────────
   Páginas internas (Como usar)
   ─────────────────────────────────────────────── */
.pag-topo{padding:clamp(40px,6vw,68px) 0 clamp(26px,4vw,42px); border-bottom:1px solid var(--linha)}
.pag-topo h1{font-size:clamp(30px,4.2vw,44px); max-width:18ch}
.pag-topo .abertura{margin-bottom:0}
.volta{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:18px;
  font:500 13px/1 var(--sans); color:var(--tinta-60);
}
.volta:hover{color:var(--azul); text-decoration:none}

/* rótulo de botão do app citado no texto */
.ui{
  display:inline-block; padding:2px 7px; border:1px solid var(--linha-forte); border-radius:4px;
  background:var(--superficie); font:600 13.5px/1.35 var(--sans); color:var(--tinta);
  white-space:nowrap; vertical-align:baseline;
}

/* passos do tutorial */
.tut{display:grid; gap:0; border-top:1px solid var(--linha); margin-bottom:14px}
.tut-item{
  padding:26px 0 28px; display:grid; grid-template-columns:44px minmax(0,1fr); gap:0 16px;
  align-items:start; border-bottom:1px solid var(--linha);
}
@media (max-width:620px){ .tut-item{grid-template-columns:36px minmax(0,1fr); gap:0 12px} }
.tut-n{
  width:32px; height:32px; border:1px solid var(--linha-forte); border-radius:50%;
  display:grid; place-items:center; font:500 14px/1 var(--mono); color:var(--tinta-60);
  font-variant-numeric:tabular-nums; margin-top:-1px;
}
.tut-item h3{margin:2px 0 9px; font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:-.012em; line-height:1.3}
.tut-item p{margin:0 0 12px; font-size:16px; color:var(--tinta-60); line-height:1.64}
.tut-item p:last-child{margin-bottom:0}
.tut-item ul{margin:0 0 12px; padding-left:20px; color:var(--tinta-60); font-size:16px; line-height:1.64}
.tut-item li{margin-bottom:6px}
.tut-item img{margin-top:16px; border:1px solid var(--linha); border-radius:2px;
  box-shadow:0 2px 10px rgba(17,26,38,.08); width:100%; max-height:430px; object-fit:cover; object-position:top center}
.tut-corpo{min-width:0}

/* observações */
.aviso-caixa{
  border:1px solid var(--linha); border-left:3px solid var(--verde); border-radius:3px;
  background:var(--abstrato); padding:16px 19px; margin:16px 0 0;
}
.aviso-caixa.atencao{border-left-color:var(--glosa)}
.aviso-caixa p{margin:0; font-size:15px; color:var(--tinta-60); line-height:1.62}
.aviso-caixa strong{color:var(--tinta); font-weight:600}

/* duas colunas */
.duas{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,36px)}
@media (max-width:760px){ .duas{grid-template-columns:1fr} }
.duas > div{padding-top:16px; border-top:1px solid var(--linha)}
.duas h3{margin:0 0 12px; font-family:var(--serif); font-size:18.5px; font-weight:600; letter-spacing:-.01em}
.duas ol,.duas ul{margin:0; padding-left:20px; color:var(--tinta-60); font-size:15.5px; line-height:1.68}
.duas li{margin-bottom:8px}
.duas li:last-child{margin-bottom:0}

/* ───────────────────────────────────────────────
   Fecho em faixa navy — a página precisava de um clímax.
   Terminava em papel branco, sem peso. A faixa usa o navy do
   próprio app, então o clique para /app não troca de mundo.
   ─────────────────────────────────────────────── */
.fecho{
  background:var(--marinho); color:#eef2fa; text-align:center;
  border-top:1px solid var(--linha);
  padding-block:clamp(60px,8vw,104px);
}
.fecho h2{color:#fff; margin-inline:auto; max-width:19ch}
.fecho .intro{color:rgba(238,242,250,.72); margin-inline:auto; text-align:center; max-width:52ch}
.fecho .acoes{justify-content:center; margin-bottom:0}
.fecho .gratis-nota{color:#7fe3c6; justify-content:center}
/* no navy o botão cheio some se ficar azul sobre azul */
.fecho .bt-cheio{background:#fff; color:var(--marinho)}
.fecho .bt-cheio:hover{background:#dce6ff}
.fecho .bt-vazio{border-color:rgba(238,242,250,.42); color:#eef2fa}
.fecho .bt-vazio:hover{border-color:#fff; background:rgba(255,255,255,.08)}