/* Dr. Vitor Ferrer · Cirurgia Geral — folha de estilo do site
   Paleta definitiva (aprovada pelo médico). Um acento por tela: Verde Petróleo.
   Contrastes testados em _gerador/gerar.py (falha o build se < 4.5:1). */
:root {
  --tinta: #1B3F6B;        /* Azul Profundo — texto, botões, blocos de autoridade */
  --azul: #2F5E83;         /* Azul Clássico — texto de apoio */
  --petroleo: #4F7F7B;     /* Verde Petróleo — acento (fio, marcador, detalhe) */
  --petroleo-texto: #3A6460; /* petróleo escurecido só para texto pequeno */
  --salvia: #A7C4BE;       /* Verde Sálvia */
  --salvia-clara: #E3EDEA; /* sálvia a ~35% sobre o papel — fundo de seção */
  --papel: #F4F8F7;        /* Neutro Suave — fundo geral */
  --branco: #FFFFFF;
  --linha: #CFDDD9;
  --erro: #A8432F;         /* só estado de erro de formulário (mesmo tom do painel) */
  --erro-texto: #7C2E1E;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --raio: 12px;
  --largura: 1180px;
  --medida: 41rem;
  --gutter: clamp(20px, 5vw, 48px);
  --bloco: clamp(64px, 9vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration-color: var(--petroleo); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.escuro :focus-visible, .rodape :focus-visible { outline-color: var(--salvia); }

h1, h2, .serif {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.12; }
h3 { font-family: var(--sans); font-weight: 600; font-size: 1.125rem; line-height: 1.35; margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--petroleo); }
strong { font-weight: 600; }
small, .apoio { font-size: 0.9rem; line-height: 1.55; color: var(--azul); }

.pular { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: var(--branco); padding: 10px 16px; border-radius: 8px; z-index: 100; }
.pular:focus { left: 8px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.caixa { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }
.bloco { padding-block: var(--bloco); }
.bloco--curto { padding-block: calc(var(--bloco) * 0.6); }
.fio { border-top: 1px solid var(--linha); }
.claro { background: var(--salvia-clara); }
.escuro { background: var(--tinta); color: var(--papel); }
.escuro a { text-decoration-color: var(--salvia); }
.escuro .apoio, .escuro small { color: var(--salvia); }
.medida { max-width: var(--medida); }
.lead { font-size: 1.2rem; line-height: 1.55; color: var(--azul); max-width: 36rem; }
.escuro .lead { color: var(--salvia-clara); }

/* [CONFIRMAR: ...] — marcador visível de dado pendente (some quando o dado chegar) */
.confirmar {
  background: #FFF6D6; color: #5A4300; border: 1px dashed #B08900;
  border-radius: 4px; padding: 0 6px; font-family: var(--sans); font-size: 0.82em;
  font-weight: 500; letter-spacing: 0; white-space: normal; line-height: 1.5;
  display: inline-block;
}

/* ---------- Botões ---------- */
.botoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px; border-radius: var(--raio);
  font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; border: 1px solid var(--tinta); cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.botao--cheio { background: var(--tinta); color: var(--branco); }
.botao--cheio:hover { background: #15335A; border-color: #15335A; }
.botao--linha { background: transparent; color: var(--tinta); }
.botao--linha:hover { background: var(--tinta); color: var(--branco); }
.escuro .botao--cheio { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.escuro .botao--cheio:hover { background: var(--branco); border-color: var(--branco); }
.escuro .botao--linha { color: var(--papel); border-color: var(--salvia); }
.escuro .botao--linha:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.botao svg { width: 20px; height: 20px; flex: none; }
.link-seta { font-weight: 600; text-decoration: underline; text-decoration-color: var(--petroleo); }

/* ---------- Cabeçalho ---------- */
.topo { background: var(--papel); border-bottom: 1px solid var(--linha); position: relative; z-index: 20; }
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; }
.topo__marca { display: block; flex: none; }
.topo__marca img { height: 56px; width: auto; }
.menu { display: flex; align-items: center; gap: 24px; }
.menu ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.menu li { margin: 0; }
.menu a { font-size: 0.95rem; font-weight: 500; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--petroleo); }
.menu .botao { min-height: 44px; padding: 8px 18px; font-size: 0.95rem; border-bottom: 1px solid var(--tinta); }
.menu__abrir { display: none; background: none; border: 1px solid var(--linha); border-radius: 10px; width: 46px; height: 46px; color: var(--tinta); cursor: pointer; align-items: center; justify-content: center; }
.menu__abrir svg { width: 22px; height: 22px; }

@media (max-width: 1180px) {
  .menu__abrir { display: inline-flex; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--papel); border-bottom: 1px solid var(--linha); padding: 8px var(--gutter) 24px; flex-direction: column; align-items: stretch; gap: 16px; }
  .menu.aberto { display: flex; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--linha); font-size: 1.05rem; }
  .topo__marca img { height: 44px; }
  .topo__linha { min-height: 64px; }
}

/* ---------- Migalhas ---------- */
.migalhas { font-size: 0.875rem; color: var(--azul); padding-top: 28px; }
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 0; margin: 0; }
.migalhas li { margin: 0; }
.migalhas li + li::before { content: "/"; margin-right: 10px; color: var(--salvia); }
.migalhas a { text-decoration: none; }
.migalhas a:hover { text-decoration: underline; }

/* ---------- Hero da home ---------- */
.hero { padding-block: clamp(40px, 6vw, 88px) clamp(56px, 8vw, 112px); }
.hero__grade { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(3rem, 8.4vw, 6.25rem); line-height: 0.96; letter-spacing: -0.02em; }
.hero h1 .sub { display: block; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; letter-spacing: -0.005em; margin-top: 0.55em; color: var(--azul); }
.assinatura { border-left: 1px solid var(--petroleo); padding-left: 18px; margin: 28px 0; font-size: 1rem; line-height: 1.5; }
.assinatura span { display: block; }
.assinatura .crm { color: var(--azul); font-variant-numeric: tabular-nums; }
.hero__foto { position: relative; margin: 0; max-width: 460px; justify-self: center; width: 100%; }
.hero__moldura { position: relative; }
.hero__moldura::before { content: ""; position: absolute; inset: 9% -5% -5% 12%; background: var(--salvia); border-radius: var(--raio); }
.hero__foto img { position: relative; border-radius: var(--raio); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero__foto figcaption { position: relative; margin-top: 44px; font-size: 0.82rem; color: var(--azul); line-height: 1.5; }
@media (min-width: 900px) {
  .hero__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); }
  .hero__foto { justify-self: end; }
}

/* ---------- Fatos (prova de competência) ---------- */
.fatos { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.fatos li { margin: 0; padding: 22px 0; border-top: 1px solid var(--linha); }
.fatos .instit { font-family: var(--serif); font-size: 1.55rem; line-height: 1.15; display: block; margin-bottom: 6px; }
.fatos .oque { font-size: 0.95rem; color: var(--azul); display: block; }
@media (min-width: 760px) {
  .fatos { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
}
@media (min-width: 1100px) {
  .fatos { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
  .fatos li { border-top: 0; border-left: 1px solid var(--linha); padding: 4px 28px; }
  .fatos li:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- Cabeça de seção ---------- */
.cabeca { display: grid; gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 900px) {
  .cabeca--lado { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: end; }
}

/* ---------- Lista de problemas (spokes) ---------- */
.problemas { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid var(--tinta); }
.problemas li { margin: 0; border-bottom: 1px solid var(--linha); }
.problemas a { display: block; padding: 24px 0; text-decoration: none; height: 100%; transition: background-color 160ms ease; }
.problemas .nome { font-family: var(--serif); font-size: 1.7rem; line-height: 1.15; display: block; margin-bottom: 6px; }
.problemas .desc { font-size: 0.95rem; color: var(--azul); display: block; max-width: 30ch; }
.problemas a:hover .nome { text-decoration: underline; text-decoration-color: var(--petroleo); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.problemas .urgencia { color: var(--petroleo-texto); font-weight: 600; font-size: 0.85rem; display: block; margin-top: 8px; }
@media (min-width: 700px) {
  .problemas { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
}
@media (min-width: 1040px) {
  .problemas { grid-template-columns: repeat(3, 1fr); column-gap: 56px; }
}

/* ---------- Duas colunas genéricas ---------- */
.duas { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 900px) {
  .duas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .duas--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .duas--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ---------- Passos (sequência real) ---------- */
.passos { list-style: none; counter-reset: passo; padding: 0; margin: 0; display: grid; gap: 0; }
.passos li { counter-increment: passo; margin: 0; padding: 28px 0; border-top: 1px solid var(--linha); display: grid; grid-template-columns: 3.2rem 1fr; gap: 8px; }
.passos li::before { content: counter(passo); font-family: var(--serif); font-size: 2.6rem; line-height: 0.9; color: var(--petroleo); }
.passos h3 { margin-bottom: 6px; }
.passos p { color: var(--azul); font-size: 0.98rem; }
@media (min-width: 900px) {
  .passos { grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
}

/* ---------- Endereço / mapa ---------- */
.endereco { font-style: normal; font-size: 1.05rem; line-height: 1.6; }
.endereco strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.15; margin-bottom: 8px; }
.mapa { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--salvia-clara); aspect-ratio: 4 / 3; }
.mapa iframe { width: 100%; height: 100%; border: 0; }
.ficha { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--linha); }
.ficha li { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--linha); display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; font-size: 0.98rem; }
.ficha .rotulo { color: var(--azul); }
@media (max-width: 480px) { .ficha li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--tinta); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-family: var(--serif); font-size: 1.45rem; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -9px; border-right: 1.5px solid var(--petroleo); border-bottom: 1.5px solid var(--petroleo); transform: rotate(45deg); transition: transform 180ms ease; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .resposta { padding: 0 0 26px; max-width: var(--medida); color: var(--azul); }

/* ---------- Formulário ---------- */
.form { display: grid; gap: 18px; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: 0.92rem; font-weight: 600; }
.campo .opc { font-weight: 400; color: var(--azul); }
.campo input, .campo select, .campo textarea {
  font: inherit; color: var(--tinta); background: var(--branco);
  border: 1px solid #8FA6B8; border-radius: 10px; padding: 13px 14px; min-height: 52px; width: 100%;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--tinta); outline-offset: 1px; border-color: var(--tinta); }
.form__duas { display: grid; gap: 18px; }
@media (min-width: 620px) { .form__duas { grid-template-columns: 1fr 1fr; } }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 0.9rem; color: var(--azul); line-height: 1.5; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--tinta); }
[data-lead-status] { font-size: 0.95rem; min-height: 1.5em; }
[data-lead-status]:empty { display: none; }
/* Estados do formulário (o rastreio.js marca aria-invalid nos campos e data-estado na mensagem) */
.campo [aria-invalid="true"], .campo [aria-invalid="true"]:focus { border-color: var(--erro); box-shadow: inset 0 0 0 1px var(--erro); }
.consent input[aria-invalid="true"] { outline: 2px solid var(--erro); outline-offset: 2px; }
[data-lead-status][data-estado="erro"], [data-lead-status][data-estado="sucesso"] { border: 1px solid var(--tinta); border-radius: 10px; padding: 12px 14px; background: var(--branco); font-weight: 500; }
[data-lead-status][data-estado="erro"] { border-color: var(--erro); color: var(--erro-texto); }
.painel { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: clamp(22px, 4vw, 40px); }

/* ---------- Página interna: cabeçalho ---------- */
.intro { padding-block: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 72px); }
.intro h1 { max-width: 18ch; margin-bottom: 24px; }
.intro--larga h1 { max-width: 24ch; }

/* ---------- Spoke ---------- */
.resposta-curta {
  font-family: var(--serif); font-size: clamp(1.35rem, 2.3vw, 1.7rem); line-height: 1.38;
  border-left: 2px solid var(--petroleo); padding-left: clamp(18px, 2.5vw, 28px); max-width: 44rem; margin: 0;
}
.autoria { font-size: 0.875rem; color: var(--azul); margin-top: 22px; }
.spoke { display: grid; gap: 48px; padding-bottom: var(--bloco); }
.indice { font-size: 0.95rem; }
.indice p { font-weight: 600; margin-bottom: 10px; }
.indice ol { list-style: none; counter-reset: i; padding: 0; margin: 0; border-top: 1px solid var(--linha); }
.indice li { counter-increment: i; margin: 0; border-bottom: 1px solid var(--linha); }
.indice a { display: grid; grid-template-columns: 1.6rem 1fr; padding: 11px 0; text-decoration: none; color: var(--azul); }
.indice a::before { content: counter(i); color: var(--petroleo-texto); font-variant-numeric: tabular-nums; }
.indice a:hover { color: var(--tinta); text-decoration: underline; }
.texto { max-width: var(--medida); }
.texto section { padding-top: 12px; margin-bottom: 52px; scroll-margin-top: 24px; }
.texto h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 18px; }
.texto h3 { margin: 28px 0 10px; }
.texto .alerta { border: 1px solid var(--tinta); border-radius: var(--raio); padding: 18px 20px; background: var(--branco); }
@media (min-width: 980px) {
  .spoke { grid-template-columns: 250px minmax(0, 1fr); gap: 80px; }
  .indice { position: sticky; top: 28px; align-self: start; }
}

/* Emergência (abdome agudo) */
.emergencia { background: var(--tinta); color: var(--papel); border-radius: var(--raio); padding: clamp(24px, 4vw, 40px); margin-bottom: 40px; max-width: 46rem; }
.emergencia h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 14px; }
.emergencia p { color: var(--salvia-clara); }
.emergencia .fone { display: inline-flex; align-items: baseline; gap: 12px; font-family: var(--serif); font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; text-decoration: none; margin: 10px 0 6px; color: var(--branco); border-bottom: 1px solid var(--salvia); padding-bottom: 6px; }
.emergencia .fone small { font-family: var(--sans); font-size: 0.95rem; color: var(--salvia); }

/* CTA ao fim das páginas */
.fecho { display: grid; gap: 28px; }
.fecho h2 { max-width: 18ch; }
@media (min-width: 900px) { .fecho { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; gap: 64px; } }

.relacionadas { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linha); }
.relacionadas li { margin: 0; border-bottom: 1px solid var(--linha); }
.relacionadas a { display: block; padding: 14px 0; text-decoration: none; font-weight: 500; }
.relacionadas a:hover { text-decoration: underline; }

/* ---------- Tabela (sobre) ---------- */
.tabela-rolo { overflow-x: auto; }
.tabela-rolo table { min-width: 32rem; } /* no celular a tabela rola de lado em vez de quebrar palavra por palavra */
table { border-collapse: collapse; width: 100%; font-size: 0.96rem; }
th, td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--linha); vertical-align: top; }
thead th { font-weight: 600; border-bottom: 1px solid var(--tinta); font-size: 0.88rem; color: var(--azul); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--azul); }

.retrato { margin: 0; }
.retrato img { border-radius: var(--raio); width: 100%; aspect-ratio: 1; object-fit: cover; }
.retrato figcaption { font-size: 0.82rem; color: var(--azul); margin-top: 10px; }

/* ---------- Artigos ---------- */
.rascunho { background: #FFF6D6; color: #5A4300; border-bottom: 1px dashed #B08900; font-size: 0.92rem; font-weight: 500; }
.rascunho .caixa { padding-block: 10px; }
.lista-artigos { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--tinta); }
.lista-artigos li { margin: 0; border-bottom: 1px solid var(--linha); padding: 28px 0; }
.lista-artigos h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 8px; }
.lista-artigos h2 a { text-decoration: none; }
.lista-artigos h2 a:hover { text-decoration: underline; text-decoration-color: var(--petroleo); text-decoration-thickness: 1px; }
.lista-artigos p { color: var(--azul); max-width: 44rem; }
.etiqueta { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px dashed #B08900; background: #FFF6D6; color: #5A4300; margin-bottom: 12px; }
.etiqueta--neutra { border: 1px solid var(--linha); background: transparent; color: var(--azul); }
.artigo .texto h2 { margin-top: 44px; }
.artigo .texto ul { margin-bottom: 1.2em; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--tinta); color: var(--salvia-clara); padding-block: 64px 40px; font-size: 0.95rem; }
.rodape a { text-decoration: none; }
.rodape a:hover { text-decoration: underline; text-decoration-color: var(--salvia); }
.rodape__grade { display: grid; gap: 40px; }
.rodape__marca img { height: 132px; width: auto; }
.rodape h2 { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: var(--branco); margin-bottom: 14px; letter-spacing: 0; }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: 9px; }
.rodape__legal { border-top: 1px solid rgba(167, 196, 190, 0.35); margin-top: 48px; padding-top: 24px; display: grid; gap: 12px; font-size: 0.875rem; color: var(--salvia); max-width: 60rem; }
.rodape__legal p { margin: 0; }
@media (min-width: 860px) { .rodape__grade { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; } }

/* ---------- Barra fixa de agendar (mobile) ---------- */
.barra { display: none; }
@media (max-width: 760px) {
  .barra {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--papel); border-top: 1px solid var(--linha);
  }
  .barra .botao { min-height: 50px; padding: 10px 12px; font-size: 0.95rem; }
  .barra--uma { grid-template-columns: 1fr; }
  body { padding-bottom: 76px; }
  html { scroll-padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
}
@media print {
  .topo, .barra, .rodape, .rascunho { display: none; }
}