/* ==========================================================================
   CLÍNICA CANEVER — site
   Layout construído sobre brand.css. Nenhuma cor, fonte ou raio é definido
   aqui: tudo vem dos tokens da marca. Se precisar mudar uma cor, mude no
   brand.css — assim o site, o app e o CRM continuam iguais.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }

/* --- utilidades de estrutura ------------------------------------------- */
.caixa { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--e-6); }
.faixa { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.faixa--curta { padding-block: clamp(2.5rem, 5vw, 4rem); }
.faixa--marfim { background: var(--cor-fundo-marfim); }
.faixa--sutil  { background: var(--cor-fundo-sutil); }
.centro { text-align: center; }
.centro p { margin-inline: auto; }

/* pular para o conteúdo — primeiro item do Tab */
.pular {
  position: absolute; left: var(--e-4); top: -100px; z-index: 100;
  background: var(--cor-dourado); color: #000; padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-md); font-weight: 700; text-decoration: none;
  transition: top .15s ease;
}
.pular:focus { top: var(--e-4); }

/* --- cabeçalho ---------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cor-fundo) 92%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--cor-borda);
}
.topo__linha { display: flex; align-items: center; gap: var(--e-6); min-height: 72px; }
.topo__logo { display: flex; align-items: center; flex-shrink: 0; }
.topo__logo img { width: 168px; height: auto; display: block; }
.topo__nav { display: flex; gap: var(--e-6); margin-left: auto; }
.topo__nav a {
  color: var(--cor-texto-2); text-decoration: none; font-size: var(--texto-pequeno);
  padding-block: var(--e-2);
}
.topo__nav a:hover { color: var(--cor-dourado-profundo); text-decoration: underline; }
.topo__acao { flex-shrink: 0; }
.topo__menu { display: none; }

/* --- hero --------------------------------------------------------------- */
.hero {
  background: var(--cor-preto);
  position: relative; overflow: hidden;
  padding-block: clamp(4rem, 11vw, 8.5rem);
}
.hero__marca {
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: min(46%, 560px); opacity: .1; pointer-events: none;
}
.hero__conteudo { position: relative; max-width: 46rem; }
.hero h1 { font-size: var(--texto-display); margin: var(--e-3) 0 var(--e-6); }
.hero__sub {
  font-size: var(--texto-corpo-g); color: var(--cor-texto-2);
  max-width: 38rem; margin: 0 0 var(--e-8);
}
.hero__acoes { display: flex; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-8); }
.hero__registro { font-size: var(--texto-pequeno); color: var(--cor-texto-3); margin: 0; }

/* --- faixa de credenciais ---------------------------------------------- */
.credenciais { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.credencial__rotulo {
  font-family: var(--fonte-titulo); font-stretch: 80%; font-weight: 700;
  font-size: var(--texto-micro); letter-spacing: var(--tracking-sobrescrito);
  text-transform: uppercase; color: var(--cor-dourado-profundo); margin: 0 0 var(--e-2);
}
.credencial p { margin: 0; color: var(--cor-texto-2); font-size: var(--texto-pequeno); max-width: none; }
.credencial strong { color: var(--cor-texto); font-weight: 600; }

/* --- títulos de seção --------------------------------------------------- */
.secao__topo { max-width: 44rem; margin-bottom: var(--e-12); }
.secao__topo p { color: var(--cor-texto-2); font-size: var(--texto-corpo-g); }
.centro .secao__topo { margin-inline: auto; }

/* --- especialidades ----------------------------------------------------- */
.especialidades { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.esp {
  background: var(--cor-fundo); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg); padding: var(--e-8) var(--e-6);
  display: flex; flex-direction: column;
}
.esp__num {
  font-family: var(--fonte-titulo); font-stretch: 80%; font-weight: 700;
  font-size: var(--texto-pequeno); letter-spacing: var(--tracking-sobrescrito);
  color: var(--cor-dourado-profundo); margin: 0 0 var(--e-4);
}
.esp h3 { margin: 0 0 var(--e-3); }
.esp p { color: var(--cor-texto-2); font-size: var(--texto-pequeno); margin: 0; max-width: none; }
.esp::before {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--cor-dourado); margin-bottom: var(--e-6);
}

/* --- médico ------------------------------------------------------------- */
.medico { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.medico__foto {
  aspect-ratio: 4 / 5; border-radius: var(--raio-lg); overflow: hidden;
  background: var(--cor-fundo-marfim);
  display: flex; align-items: center; justify-content: center;
}
.medico__foto img { width: 100%; height: 100%; object-fit: cover; }
.medico__lista { list-style: none; padding: 0; margin: var(--e-6) 0 0; }
/* nada de flex aqui: o gap do flex entraria entre cada <span> e <em> do texto,
   abrindo buracos no meio da linha */
.medico__lista li {
  padding: var(--e-3) 0 var(--e-3) var(--e-6); border-top: 1px solid var(--cor-borda);
  position: relative; font-size: var(--texto-pequeno); color: var(--cor-texto-2);
}
.medico__lista li::before {
  content: "—"; color: var(--cor-dourado);
  position: absolute; left: 0; top: var(--e-3);
}

/* --- app do paciente (faixa escura) ------------------------------------- */
.app { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
.app__passos { list-style: none; padding: 0; margin: var(--e-8) 0 0; counter-reset: p; }
.app__passos li {
  counter-increment: p; position: relative; padding: 0 0 var(--e-6) var(--e-12);
  color: var(--cor-texto-2); font-size: var(--texto-pequeno);
}
.app__passos li::before {
  content: counter(p, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  font-family: var(--fonte-titulo); font-stretch: 80%; font-weight: 700;
  color: var(--cor-dourado); font-size: var(--texto-h3);
}
.app__passos strong { display: block; color: var(--cor-texto); font-weight: 600; margin-bottom: var(--e-1); }
.app__visual { display: flex; align-items: center; justify-content: center; padding: var(--e-8); }
.app__visual img { width: min(240px, 60%); }

/* --- localização -------------------------------------------------------- */
.local { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.local__mapa {
  min-height: 320px; border-radius: var(--raio-lg); overflow: hidden;
  border: 1px solid var(--cor-borda); background: var(--cor-fundo-marfim);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--e-8);
}
.local__mapa iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.local dl { margin: 0; }
.local dt {
  font-family: var(--fonte-titulo); font-stretch: 80%; font-weight: 700;
  font-size: var(--texto-micro); letter-spacing: var(--tracking-sobrescrito);
  text-transform: uppercase; color: var(--cor-dourado-profundo);
  margin-top: var(--e-6);
}
.local dd { margin: var(--e-2) 0 0; color: var(--cor-texto-2); font-size: var(--texto-pequeno); }
.local dd a { color: var(--cor-link); }

/* --- perguntas ---------------------------------------------------------- */
.faq { max-width: 46rem; }
.faq details {
  border-bottom: 1px solid var(--cor-borda);
}
.faq summary {
  cursor: pointer; list-style: none; padding: var(--e-6) var(--e-8) var(--e-6) 0;
  font-family: var(--fonte-titulo); font-stretch: 80%; font-weight: 700;
  font-size: var(--texto-h3); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: var(--cor-dourado-profundo); font-size: 1.5rem; line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--cor-texto-2); font-size: var(--texto-pequeno); margin: 0 0 var(--e-6); }

/* --- chamada final ------------------------------------------------------ */
.cta__acoes { display: flex; gap: var(--e-4); flex-wrap: wrap; justify-content: center; margin-top: var(--e-8); }

/* --- rodapé ------------------------------------------------------------- */
.rodape { padding-block: var(--e-16) var(--e-8); }
.rodape__grade { display: grid; gap: var(--e-8); grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(160px, 1fr)); }
.rodape__logo img { width: 180px; margin-bottom: var(--e-4); }
.rodape h2 {
  font-size: var(--texto-micro); letter-spacing: var(--tracking-sobrescrito);
  text-transform: uppercase; color: var(--cor-dourado); margin: 0 0 var(--e-4);
}
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: var(--e-2); }
.rodape a { color: var(--cor-texto-2); text-decoration: none; font-size: var(--texto-pequeno); }
.rodape a:hover { color: var(--cor-dourado); text-decoration: underline; }
.rodape p { font-size: var(--texto-pequeno); color: var(--cor-texto-2); max-width: 30rem; }
.rodape__legal {
  margin-top: var(--e-12); padding-top: var(--e-6);
  border-top: 1px solid var(--cor-borda);
  display: flex; justify-content: space-between; gap: var(--e-6); flex-wrap: wrap;
}
.rodape__legal p { font-size: var(--texto-micro); color: var(--cor-texto-3); margin: 0; }

/* --- botão flutuante de WhatsApp ---------------------------------------- */
.zap {
  position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 60;
  display: inline-flex; align-items: center; gap: var(--e-3);
  min-height: var(--alvo-toque); padding: var(--e-3) var(--e-6);
  background: var(--cor-dourado); color: #000; font-weight: 700;
  border-radius: var(--raio-pill); text-decoration: none;
  box-shadow: var(--sombra-lg);
}
.zap:hover { background: var(--cor-dourado-profundo); color: #fff; text-decoration: none; }
.zap svg { width: 20px; height: 20px; flex-shrink: 0; }


/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 900px) {
  .medico, .app, .local { grid-template-columns: 1fr; }
  .medico__foto { max-width: 380px; }
  .app__visual { order: -1; }
}

@media (max-width: 760px) {
  .topo__nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda);
    padding: var(--e-2) var(--e-6) var(--e-6);
  }
  .topo__nav.aberto { display: flex; }
  .topo__nav a { padding: var(--e-4) 0; border-bottom: 1px solid var(--cor-borda); font-size: var(--texto-corpo); }
  .topo__menu {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: var(--alvo-toque); height: var(--alvo-toque);
    background: none; border: 1px solid var(--cor-borda); border-radius: var(--raio-md);
    cursor: pointer;
  }
  .topo__menu span { display: block; width: 18px; height: 2px; background: var(--cor-texto); position: relative; }
  .topo__menu span::before, .topo__menu span::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--cor-texto);
  }
  .topo__menu span::before { top: -6px; }
  .topo__menu span::after  { top: 6px; }
  .topo__acao { display: none; }
  .hero__marca { opacity: .06; right: -22%; width: 78%; }
  .zap { padding: var(--e-3) var(--e-4); }
  .zap span { display: none; }
  .rodape__grade { grid-template-columns: 1fr; }
}

/* números que nunca devem quebrar no meio (CRM, RQE, telefone) */
.nb { white-space: nowrap; }

/* --- mapa carregado sob demanda ----------------------------------------- */
.local__mapa-aviso { display: flex; flex-direction: column; gap: var(--e-4); align-items: center; }
.local__mapa-aviso p { margin: 0; max-width: none; color: var(--cor-texto-2); font-size: var(--texto-pequeno); }
.local__mapa-nota { font-size: var(--texto-micro) !important; }
.local__mapa.carregado { padding: 0; display: block; }
.local__mapa.carregado .local__mapa-nota { padding: var(--e-3); text-align: center; }

/* ==========================================================================
   BLOG
   Regra que rege esta seção: a IA extrai TRECHOS, não páginas. Por isso cada
   bloco precisa fazer sentido sozinho, fora do contexto ao redor.
   ========================================================================== */

/* --- listagem ----------------------------------------------------------- */
.posts { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.post-card {
  border: 1px solid var(--cor-borda); border-radius: var(--raio-lg);
  padding: var(--e-8) var(--e-6); background: var(--cor-fundo);
  display: flex; flex-direction: column; gap: var(--e-3);
}
.post-card h2 { font-size: var(--texto-h3); margin: 0; }
.post-card h2 a { color: var(--cor-texto); text-decoration: none; }
.post-card h2 a:hover { color: var(--cor-dourado-profundo); text-decoration: underline; }
.post-card p { margin: 0; font-size: var(--texto-pequeno); color: var(--cor-texto-2); max-width: none; }
.post-card__meta { font-size: var(--texto-micro); color: var(--cor-texto-3); }

/* --- artigo ------------------------------------------------------------- */
.artigo { max-width: 46rem; margin-inline: auto; }
.artigo > * { max-width: none; }
.migalhas { font-size: var(--texto-micro); color: var(--cor-texto-3); margin-bottom: var(--e-6); }
.migalhas a { color: var(--cor-texto-2); }
.artigo h1 { font-size: var(--texto-h1); margin: 0 0 var(--e-4); }
.artigo__meta {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  font-size: var(--texto-pequeno); color: var(--cor-texto-2);
  padding-bottom: var(--e-6); border-bottom: 1px solid var(--cor-borda);
}
.artigo__meta strong { color: var(--cor-texto); font-weight: 600; }

/* Bloco de resposta: 40 a 60 palavras, direto. É o trecho que a IA extrai e
   cita. Se você ler só ele, já respondeu a pergunta do título. */
.resposta {
  background: var(--cor-fundo-marfim); border-left: 3px solid var(--cor-dourado);
  border-radius: 0 var(--raio-md) var(--raio-md) 0;
  padding: var(--e-6); margin: var(--e-8) 0;
}
.resposta p { margin: 0; font-size: var(--texto-corpo-g); }
.resposta__rotulo {
  font-family: var(--fonte-titulo); font-stretch: 80%; font-weight: 700;
  font-size: var(--texto-micro); letter-spacing: var(--tracking-sobrescrito);
  text-transform: uppercase; color: var(--cor-dourado-profundo);
  display: block; margin-bottom: var(--e-2);
}

.sumario {
  border: 1px solid var(--cor-borda); border-radius: var(--raio-md);
  padding: var(--e-6); margin: var(--e-8) 0;
}
.sumario p { font-weight: 600; margin: 0 0 var(--e-3); font-size: var(--texto-pequeno); }
.sumario ol { margin: 0; padding-left: var(--e-6); }
.sumario li { margin-bottom: var(--e-2); font-size: var(--texto-pequeno); }

.artigo h2 { font-size: var(--texto-h2); margin: var(--e-12) 0 var(--e-4); }
.artigo h3 { margin: var(--e-8) 0 var(--e-3); }
.artigo p, .artigo li { font-size: var(--texto-corpo); }
.artigo ul, .artigo ol { padding-left: var(--e-6); }
.artigo li { margin-bottom: var(--e-2); }

.artigo table { width: 100%; border-collapse: collapse; margin: var(--e-6) 0; font-size: var(--texto-pequeno); }
.artigo th, .artigo td { text-align: left; padding: var(--e-3); border-bottom: 1px solid var(--cor-borda); vertical-align: top; }
.artigo th {
  font-family: var(--fonte-titulo); font-stretch: 80%; text-transform: uppercase;
  letter-spacing: var(--tracking-sobrescrito); font-size: var(--texto-micro);
  color: var(--cor-texto-2); border-bottom: 2px solid var(--cor-texto);
}
.tabela-rolavel { overflow-x: auto; }

.fontes { margin-top: var(--e-12); padding-top: var(--e-6); border-top: 1px solid var(--cor-borda); }
.fontes ol { font-size: var(--texto-pequeno); color: var(--cor-texto-2); }

.autor-box {
  display: flex; gap: var(--e-6); align-items: flex-start;
  background: var(--cor-fundo-sutil); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg); padding: var(--e-6); margin-top: var(--e-12);
}
.autor-box img { width: 72px; height: 72px; flex-shrink: 0; }
.autor-box h2 { font-size: var(--texto-h3); margin: 0 0 var(--e-1); }
.autor-box p { font-size: var(--texto-pequeno); color: var(--cor-texto-2); margin: 0 0 var(--e-2); }

.aviso-medico {
  margin-top: var(--e-8); padding: var(--e-4) var(--e-6);
  border-left: 3px solid var(--cor-borda-media);
  font-size: var(--texto-pequeno); color: var(--cor-texto-2);
}

/* ==========================================================================
   REVISÃO CLÍNICA PENDENTE
   Amarelo = afirmação clínica que o Dr. Marcio precisa confirmar ou reescrever.
   Nenhum artigo vai ao ar com marcador aberto. Apague esta regra quando não
   sobrar nenhum.
   ========================================================================== */
.revisar {
  background: #FFF3C4; color: #6B4E00; padding: 0 .35em; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #E0B700;
}

/* legenda de tabela: lida por leitor de tela, invisível na tela */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   CONSENTIMENTO (LGPD)
   Barra que aparece na primeira visita. Some depois da escolha e não volta
   por 12 meses. z-index 70: acima do botão de WhatsApp (60) e do cabeçalho
   fixo (50), porque enquanto ela estiver aberta nada foi carregado ainda.
   ========================================================================== */
.consentimento {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--cor-fundo-marfim);
  border-top: 2px solid var(--cor-dourado-profundo);
  box-shadow: var(--sombra-lg);
  padding: var(--e-4);
}

.consentimento__caixa {
  max-width: 68rem; margin: 0 auto;
  display: flex; align-items: center; gap: var(--e-6); flex-wrap: wrap;
}

.consentimento__texto { flex: 1 1 24rem; }

.consentimento__texto h2 {
  font-size: var(--texto-corpo); margin: 0 0 var(--e-1);
}

.consentimento__texto p {
  font-size: var(--texto-pequeno); color: var(--cor-texto-2); margin: 0;
}

/* Os dois botões têm o mesmo tamanho e o mesmo peso. Recusar não pode ser
   mais discreto que aceitar — é o ponto em que a maioria dos banners falha. */
.consentimento__botoes {
  display: flex; gap: var(--e-3); flex-shrink: 0;
}

.consentimento__botoes .btn { min-width: 8.5rem; }

/* no celular a barra vira coluna e os botões dividem a largura */
@media (max-width: 40rem) {
  .consentimento__caixa { gap: var(--e-4); }
  .consentimento__botoes { width: 100%; }
  .consentimento__botoes .btn { flex: 1 1 0; min-width: 0; }
}

/* link do rodapé para reabrir a escolha: parece link, é botão */
.consentimento__link {
  background: none; border: none; padding: 0;
  font: inherit; color: inherit;
  text-decoration: underline; cursor: pointer;
}
.consentimento__link:hover { color: var(--cor-dourado); }