*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte-base);
  font-weight: var(--peso-regular);
  font-size: var(--texto-18);
  line-height: 1.6;
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--espaco-4);
}

/* ---------- Cabeçalho ---------- */

.cabecalho {
  position: sticky;
  top: 0;
  /* leve gradiente vertical (mesmo tom, luminância +4%) em vez de chapa
     sólida — dá profundidade de "superfície desenhada", não cor de div */
  background: linear-gradient(180deg, #8a3f6e 0%, var(--cor-acao) 100%);
  box-shadow: 0 4px 16px rgba(51, 17, 38, 0.18);
  color: #fff;
  z-index: 20;
}

/* Dentro do cabeçalho, o botão de ação inverte (branco/vinho) — solid
   vinho-sobre-vinho ficaria invisível. Continua sendo a mesma e única cor
   de ação do site, só que em tratamento invertido neste contexto. */
.cabecalho .botao-primario {
  background: #fff;
  color: var(--cor-acao);
  border-color: #fff;
}
.cabecalho .botao-primario:hover {
  background: var(--cor-fundo-alt);
  border-color: var(--cor-fundo-alt);
}

.cabecalho .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  padding-top: var(--espaco-3);
  padding-bottom: var(--espaco-3);
}

.logo-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  white-space: nowrap;
}

.logo-img {
  height: 44px;
  width: auto;
  /* Mesmo tratamento do site atual: silhueta branca sobre fundo escuro.
     O degradê do ícone se perde nesse tratamento — esperado pela decisão
     da Fase 1 (degradê é só decorativo pontual, nunca em elemento
     funcional como o cabeçalho). */
  filter: brightness(0%) invert(100%);
}

/* O arquivo original empilha "DRA / GRAZIELA / CANHEO" em 3 linhas ao
   lado do ícone — ilegível em altura de cabeçalho. Usamos só o ícone
   (recortado do arquivo original) + o nome como texto real, numa linha —
   mais nítido em qualquer tela e resolve o lockup apertado. */
.logo-texto {
  font-size: var(--texto-18);
  font-weight: var(--peso-semibold);
  color: #fff;
  line-height: 1.15;
}

.nav-desktop { display: none; }
.botao.cta-cabecalho { display: none; }

.nav-toggle {
  border: 1px solid rgba(255,255,255,0.4);
  background: none;
  color: #fff;
  border-radius: var(--raio-sutil);
  padding: var(--espaco-2) var(--espaco-3);
  font-size: var(--texto-16);
  font-family: inherit;
}

/* O menu completo só cabe em uma linha a partir de ~1100px; abaixo disso
   (celular, tablet e laptop pequeno) usa o botão "Menu". */
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .botao.cta-cabecalho { display: inline-flex; white-space: nowrap; }
  .nav-desktop > li > a { white-space: nowrap; }
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: var(--espaco-6);
    font-size: var(--texto-16);
    font-weight: var(--peso-semibold);
    position: relative;
  }
  .nav-desktop > li { position: relative; }
  .grupo-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sutil);
    padding: var(--espaco-3);
    min-width: 260px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .nav-desktop > li:hover .grupo-dropdown,
  .nav-desktop > li:focus-within .grupo-dropdown { display: block; }
  .grupo-dropdown .rotulo-grupo {
    font-size: var(--texto-14);
    font-weight: var(--peso-bold);
    color: var(--cor-texto-apagado);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: var(--espaco-3) 0 var(--espaco-1);
  }
  .grupo-dropdown .rotulo-grupo:first-child { margin-top: 0; }
  .grupo-dropdown li { padding: var(--espaco-1) 0; font-weight: var(--peso-regular); }
}

/* ---------- Menu mobile (abaixo de 1100px): o botão "Menu" abre este
   painel — sem isso, a navegação inteira fica inacessível em celular. ---------- */
@media (max-width: 1099px) {
  .cabecalho .wrap { flex-wrap: wrap; }
  .nav-desktop.aberto {
    display: flex;
    flex-direction: column;
    width: 100%;
    order: 3;
    gap: 0;
    margin-top: var(--espaco-3);
    padding-top: var(--espaco-3);
    border-top: 1px solid rgba(255,255,255,0.25);
  }
  .nav-desktop.aberto > li { padding: var(--espaco-2) 0; }
  .nav-desktop.aberto > li > a {
    display: block;
    font-size: var(--texto-16);
    font-weight: var(--peso-semibold);
    color: #fff;
  }
  .nav-desktop.aberto .grupo-dropdown {
    position: static;
    display: block;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: var(--espaco-1) 0 0 var(--espaco-3);
    min-width: 0;
  }
  .nav-desktop.aberto .grupo-dropdown .rotulo-grupo { color: rgba(255,255,255,0.65); }
  .nav-desktop.aberto .grupo-dropdown li a { color: rgba(255,255,255,0.92); font-weight: var(--peso-regular); }
}

ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-botao);
  padding: 18px 44px;
  font-family: inherit;
  font-size: var(--texto-16);
  font-weight: var(--peso-bold);
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 2px solid var(--cor-acao);
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

.botao:active { transform: scale(0.98); }

.botao-primario {
  background: var(--cor-acao);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.botao-primario:hover { background: var(--cor-acao-hover); border-color: var(--cor-acao-hover); }

.botao-secundario {
  background: transparent;
  color: var(--cor-acao);
}
.botao-secundario:hover { background: var(--cor-acao); color: #fff; }

/* ---------- Hero: mensagem única, sem carrossel ---------- */

.hero {
  padding: var(--espaco-8) 0;
}

/* Duas colunas no desktop (texto + rosto real) — hero sem foto lia como
   impessoal pra uma marca pessoal construída em cima de "a consulta é
   comigo". Uma coluna no mobile, foto depois do texto. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-7);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--espaco-8); }
}

.hero h1 {
  font-size: var(--texto-36);
  font-weight: var(--peso-bold);
  line-height: 1.15;
  margin: 0 0 var(--espaco-5);
}

/* Barra de degradê curta e fixa — o único lugar do site onde o degradê
   decorativo aparece por inteiro, de forma direcional e específica em vez
   de um blob genérico atrás do texto. */
.hero .barra-degrade {
  width: 64px;
  height: 4px;
  border-radius: var(--raio-sutil);
  background: var(--gradiente-decorativo);
  margin: 0 0 var(--espaco-4);
}

@media (min-width: 700px) {
  .hero h1 { font-size: var(--texto-48); }
}

.hero p.subtitulo {
  font-size: var(--texto-18);
  color: var(--cor-texto-secundario);
  margin: 0 0 var(--espaco-6);
  max-width: 56ch;
}

.hero .acoes { display: flex; gap: var(--espaco-4); flex-wrap: wrap; }

.hero-foto {
  border-radius: var(--raio-card);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(51, 17, 38, 0.04), 0 24px 48px -16px rgba(51, 17, 38, 0.22);
  max-width: 420px;
  margin: 0 auto;
}

.hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}
/* Variante para logotipo de parceiro no lugar da foto: cartão claro, logo centralizado sem corte */
.hero-foto--logo {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--espaco-7);
  border: 1px solid var(--cor-borda);
}
.hero-foto--logo img {
  width: 100%;
  max-width: 260px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* ---------- Seções ---------- */

.secao { padding: var(--espaco-8) 0; }
.secao--alt { background: var(--cor-fundo-alt); }

.secao h2 {
  font-size: var(--texto-28);
  font-weight: var(--peso-bold);
  margin: 0 0 var(--espaco-3);
}

.secao .intro {
  color: var(--cor-texto-secundario);
  max-width: 64ch;
  margin: 0 0 var(--espaco-7);
}

/* ---------- Cards ---------- */

.grade-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-5);
}

@media (min-width: 700px) {
  .grade-cards { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--cor-fundo);
  border-radius: var(--raio-card);
  padding: var(--espaco-6);
  /* sombra tingida de vinho (não preto puro) — lê "superfície levantada",
     não caixa com borda de template */
  box-shadow: 0 1px 2px rgba(51, 17, 38, 0.04), 0 16px 40px -12px rgba(51, 17, 38, 0.14);
}

/* Demonstra o degradê decorativo em uso real (regra da Fase 3, seção 2) —
   uma barra fina no topo de um card em destaque, nunca em área grande.
   overflow:hidden + pseudo-elemento (em vez de border-image) pra respeitar
   o raio arredondado do card sem quebrar o canto. */
.card--destaque {
  position: relative;
  overflow: hidden;
}
.card--destaque::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradiente-decorativo);
}

.card h3 {
  font-size: var(--texto-22);
  font-weight: var(--peso-bold);
  margin: 0 0 var(--espaco-2);
}

.card p {
  color: var(--cor-texto-secundario);
  margin: 0 0 var(--espaco-4);
  font-size: var(--texto-16);
}

.card a.link-card {
  color: var(--cor-acao);
  font-weight: var(--peso-semibold);
  font-size: var(--texto-16);
}

/* ---------- Presença digital (Instagram / YouTube) ---------- */

.grade-redes {
  display: grid;
  gap: var(--espaco-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .grade-redes { grid-template-columns: repeat(2, 1fr); }
}

.card-rede {
  background: var(--cor-fundo);
  border-radius: var(--raio-card);
  padding: var(--espaco-6);
  box-shadow: 0 1px 2px rgba(51, 17, 38, 0.04), 0 16px 40px -12px rgba(51, 17, 38, 0.14);
}

.card-rede .cabeca-rede {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-4);
}

.icone-rede {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cor-fundo-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-acao);
}

.card-rede .identificacao-rede h3 { margin: 0; font-size: var(--texto-18); }
.card-rede .identificacao-rede .metrica-rede {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-14);
}

.card-rede p { color: var(--cor-texto-secundario); margin: 0 0 var(--espaco-4); }

.lista-videos { margin: 0 0 var(--espaco-5); padding: 0; }
.lista-videos li {
  border-top: 1px solid var(--cor-borda);
  padding: var(--espaco-2) 0;
}
.lista-videos li:first-child { border-top: none; }
.lista-videos a {
  font-weight: var(--peso-semibold);
  font-size: var(--texto-16);
}
.lista-videos a:hover { color: var(--cor-acao); }

.grade-videos {
  display: grid;
  gap: var(--espaco-4);
}
@media (min-width: 700px) {
  .grade-videos { grid-template-columns: repeat(3, 1fr); }
}
.video-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--raio-sutil);
  overflow: hidden;
  background: var(--cor-fundo-alt);
  margin-bottom: var(--espaco-2);
}
.video-embed-wrap iframe,
.video-embed-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.video-thumb-wrap {
  display: block;
  text-decoration: none;
  color: inherit;
}
.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(51, 17, 38, 0.72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.video-thumb-wrap:hover .video-play-icon { background: var(--cor-acao); }
.legenda-video {
  font-size: var(--texto-14);
  font-weight: var(--peso-semibold);
  margin: 0;
}
.video-thumb-wrap:hover .legenda-video { color: var(--cor-acao); }

.instagram-embed-wrap {
  border-radius: var(--raio-card);
  overflow: hidden;
}

.mapa-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--raio-card);
  overflow: hidden;
}
.mapa-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Foto real (reaproveitada do site atual) ---------- */

.foto-real {
  margin: 0;
  border-radius: var(--raio-card);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(51, 17, 38, 0.04), 0 16px 40px -12px rgba(51, 17, 38, 0.14);
}

.foto-real img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
}

.foto-real figcaption {
  padding: var(--espaco-3) var(--espaco-4);
  font-size: var(--texto-14);
  color: var(--cor-texto-secundario);
  background: var(--cor-fundo);
}

/* ---------- Placeholder de foto (regra: nunca banco de imagem clichê) ---------- */

.placeholder-foto {
  background: var(--cor-fundo-alt);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-card);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-14);
  text-align: center;
  padding: var(--espaco-4);
}

/* ---------- FAQ ---------- */

.faq details {
  border-bottom: 1px solid var(--cor-borda);
  padding: var(--espaco-4) 0;
}

.faq summary {
  font-weight: var(--peso-semibold);
  font-size: var(--texto-18);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espaco-3);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary .chevron {
  flex-shrink: 0;
  color: var(--cor-acao);
  transition: transform .2s ease;
}

.faq details[open] summary .chevron { transform: rotate(180deg); }

.faq p {
  color: var(--cor-texto-secundario);
  margin: var(--espaco-3) 0 0;
}

/* ---------- Rodapé ---------- */

.rodape {
  background: var(--cor-fundo-alt);
  padding: var(--espaco-8) 0 var(--espaco-6);
  font-size: var(--texto-16);
  color: var(--cor-texto-secundario);
}

.rodape .grade {
  display: grid;
  gap: var(--espaco-6);
  margin-bottom: var(--espaco-6);
}

@media (min-width: 700px) {
  .rodape .grade { grid-template-columns: repeat(3, 1fr); }
}

.rodape h4 {
  font-size: var(--texto-16);
  font-weight: var(--peso-semibold);
  color: var(--cor-texto);
  margin: 0 0 var(--espaco-3);
}

.rodape .creditos {
  border-top: 1px solid var(--cor-borda);
  padding-top: var(--espaco-5);
  font-size: var(--texto-14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-5);
  justify-content: space-between;
}

.creditos-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
}

.creditos-icone {
  height: 22px;
  width: auto;
  opacity: 0.55; /* toque de marca discreto, não compete com o texto legal */
}

.rodape a.link-privacidade { color: var(--cor-acao); font-weight: var(--peso-semibold); }

.aviso-exemplo {
  background: #FFF7E6;
  border: 1px solid #F0D48A;
  color: #6b5518;
  font-size: var(--texto-14);
  text-align: center;
  padding: var(--espaco-3);
}

/* ================================================================
   Componentes novos — Fase 3b (estrutura completa do site)
   ================================================================ */

/* ---------- Índice de templates (só nesta página de revisão, não
   faz parte do site real) ---------- */

.indice-templates {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--cor-texto);
  color: #fff;
  padding: var(--espaco-3) 0;
  overflow-x: auto;
  white-space: nowrap;
}
.indice-templates .wrap { display: flex; gap: var(--espaco-5); align-items: center; }
.indice-templates strong { flex-shrink: 0; font-size: var(--texto-14); color: rgba(255,255,255,0.6); }
.indice-templates a {
  font-size: var(--texto-14);
  color: #fff;
  opacity: 0.85;
  flex-shrink: 0;
}
.indice-templates a:hover { opacity: 1; text-decoration: underline; }

/* ---------- Rótulo de template (mostra a URL alvo, pra handoff de dev) ---------- */

.marcador-template {
  background: var(--cor-fundo-alt);
  border-bottom: 1px solid var(--cor-borda);
  padding: var(--espaco-4) 0;
}
.marcador-template .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espaco-2) var(--espaco-4);
}
.marcador-template .nome {
  font-size: var(--texto-14);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-acao);
}
.marcador-template code {
  font-size: var(--texto-14);
  color: var(--cor-texto-secundario);
  font-family: 'SF Mono', 'Courier New', monospace;
}

/* ---------- Bloco de template individual (isola cada mockup) ---------- */

.template { border-bottom: 12px solid var(--cor-fundo-alt); }

/* ---------- Breadcrumb ---------- */

.breadcrumb {
  padding: var(--espaco-4) 0 0;
  font-size: var(--texto-14);
  color: var(--cor-texto-apagado);
}
.breadcrumb a { color: var(--cor-texto-secundario); }
.breadcrumb a:hover { color: var(--cor-acao); }
.breadcrumb .sep { margin: 0 var(--espaco-2); }

/* ---------- Faixa de credenciais / confiança ---------- */

.faixa-credenciais {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3) var(--espaco-6);
  align-items: center;
  padding: var(--espaco-5) 0;
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
  font-size: var(--texto-14);
  color: var(--cor-texto-secundario);
}
.faixa-credenciais .item { display: flex; align-items: center; gap: var(--espaco-2); }
.faixa-credenciais .item svg { color: var(--cor-acao); flex-shrink: 0; }

/* ---------- Galeria de logos (afiliações hospitalares) ---------- */

.galeria-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espaco-5);
  align-items: center;
}
@media (min-width: 700px) { .galeria-logos { grid-template-columns: repeat(4, 1fr); } }
/* estilo do .item-logo definido mais abaixo, alinhado ao placeholder-foto */

/* ---------- Corpo de artigo / procedimento (tipografia de leitura longa) ---------- */

.corpo-artigo { max-width: 68ch; }
.corpo-artigo h2 {
  font-size: var(--texto-28);
  font-weight: var(--peso-bold);
  margin: var(--espaco-7) 0 var(--espaco-3);
}
.corpo-artigo h2:first-child { margin-top: 0; }
.corpo-artigo p { margin: 0 0 var(--espaco-4); }
.corpo-artigo ul { list-style: disc; padding-left: 1.3em; margin: 0 0 var(--espaco-4); }
.corpo-artigo li { margin-bottom: var(--espaco-2); }

.meta-artigo {
  display: flex;
  gap: var(--espaco-4);
  font-size: var(--texto-14);
  color: var(--cor-texto-apagado);
  margin: var(--espaco-3) 0 var(--espaco-6);
}

/* Caixa de CTA embutida no meio do artigo — convite pra consulta sem
   interromper a leitura de forma agressiva */
.caixa-cta {
  background: var(--cor-fundo-alt);
  border-radius: var(--raio-card);
  padding: var(--espaco-6);
  margin: var(--espaco-7) 0;
  max-width: 68ch;
}
.caixa-cta h3 { font-size: var(--texto-22); font-weight: var(--peso-bold); margin: 0 0 var(--espaco-2); }
.caixa-cta p { color: var(--cor-texto-secundario); margin: 0 0 var(--espaco-4); }

/* ---------- Formulário (contato / landing page) ---------- */

.formulario { display: flex; flex-direction: column; gap: var(--espaco-4); }
.campo { display: flex; flex-direction: column; gap: var(--espaco-2); }
.campo label { font-size: var(--texto-14); font-weight: var(--peso-semibold); }
.campo input, .campo select, .campo textarea {
  font-family: inherit;
  font-size: var(--texto-16);
  padding: var(--espaco-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sutil);
  background: var(--cor-fundo);
  color: var(--cor-texto);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--cor-acao);
  outline-offset: 1px;
}
.nota-privacidade {
  font-size: var(--texto-14);
  color: var(--cor-texto-apagado);
}
.nota-privacidade a { color: var(--cor-acao); }

/* ---------- Aviso de dado pendente (TODO estrutural, não visual) ---------- */

.aviso-todo {
  background: #FFF7E6;
  border: 1px solid #F0D48A;
  border-radius: var(--raio-sutil);
  color: #6b5518;
  padding: var(--espaco-4) var(--espaco-5);
  font-size: var(--texto-16);
  margin: var(--espaco-5) 0;
}
.aviso-todo strong { display: block; margin-bottom: var(--espaco-1); }

/* ---------- Texto institucional (privacidade) ---------- */

.texto-institucional { max-width: 68ch; }
.texto-institucional h2 {
  font-size: var(--texto-22);
  font-weight: var(--peso-bold);
  margin: var(--espaco-6) 0 var(--espaco-2);
}
.texto-institucional h2:first-child { margin-top: 0; }
.texto-institucional p { margin: 0 0 var(--espaco-3); color: var(--cor-texto-secundario); }

/* ---------- Cabeçalho reduzido (landing page de campanha) ---------- */

.cabecalho--lp .wrap { justify-content: center; }
.cabecalho--lp .logo-marca { pointer-events: none; }

/* ---------- Mapa (placeholder) ---------- */

.mapa-placeholder {
  background: var(--cor-fundo-alt);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-card);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-14);
  text-align: center;
}

/* ---------- Variações de grade responsivas (evita estilo inline não-responsivo) ---------- */

.grade-cards--2col { grid-template-columns: 1fr; }
@media (min-width: 600px) { .grade-cards--2col { grid-template-columns: repeat(2, 1fr); } }

.grade-cards--5col { grid-template-columns: 1fr; }
@media (min-width: 600px) { .grade-cards--5col { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grade-cards--5col { grid-template-columns: repeat(5, 1fr); } }

/* ---------- Bloco de confiança pessoal (citação da médica) ----------
   Revisado após auditoria de design: era visualmente idêntico aos cards
   "sem jargão" logo abaixo — mesmo peso pro conteúdo mais diferenciado do
   site (a história pessoal dela, que nenhum concorrente tem). Ganhou
   sombra própria, uma barra do degradê decorativo na lateral (uso pontual,
   mesma regra do card--destaque) e um retrato pequeno junto da assinatura,
   pra parar de se confundir com os cards genéricos ao redor. */

.bloco-pessoal {
  position: relative;
  background: var(--cor-fundo);
  border-radius: var(--raio-card);
  padding: var(--espaco-7) var(--espaco-6) var(--espaco-6);
  padding-left: calc(var(--espaco-6) + 6px);
  max-width: 72ch;
  box-shadow: 0 1px 2px rgba(51, 17, 38, 0.05), 0 20px 44px -14px rgba(51, 17, 38, 0.20);
  overflow: hidden;
}
.bloco-pessoal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 6px;
  background: var(--gradiente-decorativo);
}
.bloco-pessoal p.citacao {
  font-size: var(--texto-22);
  font-weight: var(--peso-semibold);
  line-height: 1.45;
  color: var(--cor-texto);
  margin: 0 0 var(--espaco-5);
}
.bloco-pessoal p.citacao::before { content: "\201C"; color: var(--cor-acao); }
.bloco-pessoal p.citacao::after { content: "\201D"; color: var(--cor-acao); }
.bloco-pessoal .assinatura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-3);
  font-size: var(--texto-14);
  color: var(--cor-texto-secundario);
}
.bloco-pessoal .assinatura strong { color: var(--cor-texto); font-weight: var(--peso-semibold); }
.bloco-pessoal .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.bloco-pessoal .assinatura-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ---------- Modo dev — esconde avisos internos por padrão (achado da
   auditoria de design: banners de "Fase 4 — rascunho" e "TEMPLATE: X"
   tomavam a tela inteira no mobile antes de qualquer conteúdo real
   aparecer). Fica escondido pra apresentação ao cliente; um botão discreto
   no canto liga de volta pra revisão de desenvolvimento. ---------- */

body:not(.modo-dev) .aviso-exemplo,
body:not(.modo-dev) .marcador-template,
body:not(.modo-dev) .indice-templates,
body:not(.modo-dev) .aviso-todo .rotulo-todo {
  display: none;
}

.alterna-modo-dev {
  position: fixed;
  bottom: var(--espaco-4);
  right: var(--espaco-4);
  z-index: 100;
  background: var(--cor-texto);
  color: #fff;
  border: none;
  border-radius: var(--raio-sutil);
  padding: var(--espaco-2) var(--espaco-3);
  font-size: var(--texto-14);
  font-family: inherit;
  font-weight: var(--peso-semibold);
  cursor: pointer;
  opacity: 0.55;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.alterna-modo-dev:hover { opacity: 1; }

/* ---------- Galeria de logos — alinhado ao padrão do placeholder-foto
   (achado da auditoria de design: estava com um tratamento genérico de
   wireframe, sem relação visual com o resto dos placeholders do site) ---------- */

.galeria-logos .item-logo {
  aspect-ratio: 3 / 2;
  background: var(--cor-fundo-alt);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-14);
  text-align: center;
  padding: var(--espaco-3);
}

/* ---------- Seletor de templates (troca o scroll infinito por
   "ver um template por vez") — achado crítico da auditoria de design:
   rolar 10 templates empilhados não é como se mostra isso pra cliente. ---------- */

.template { display: none; }

.picker {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--espaco-8) var(--espaco-4);
}
.picker h1 {
  font-size: var(--texto-36);
  font-weight: var(--peso-bold);
  margin: 0 0 var(--espaco-2);
}
.picker .intro {
  color: var(--cor-texto-secundario);
  max-width: 64ch;
  margin: 0 0 var(--espaco-7);
  font-size: var(--texto-18);
}
.picker-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-5);
}
@media (min-width: 700px) { .picker-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .picker-grade { grid-template-columns: repeat(3, 1fr); } }

.picker-card {
  display: block;
  background: var(--cor-fundo);
  border-radius: var(--raio-card);
  padding: var(--espaco-5);
  box-shadow: 0 1px 2px rgba(51, 17, 38, 0.04), 0 16px 40px -12px rgba(51, 17, 38, 0.14);
  transition: transform .15s ease, box-shadow .15s ease;
}
.picker-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(51, 17, 38, 0.06), 0 22px 48px -12px rgba(51, 17, 38, 0.20);
}
.picker-card .rotulo {
  font-size: var(--texto-14);
  font-weight: var(--peso-bold);
  color: var(--cor-acao);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--espaco-2);
}
.picker-card h3 { font-size: var(--texto-22); font-weight: var(--peso-bold); margin: 0 0 var(--espaco-2); }
.picker-card p { color: var(--cor-texto-secundario); font-size: var(--texto-16); margin: 0 0 var(--espaco-3); }
.picker-card code { font-size: var(--texto-14); color: var(--cor-texto-apagado); }

.voltar-picker {
  display: none;
  align-items: center;
  gap: var(--espaco-2);
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  background: var(--cor-texto);
  color: #fff;
  border: none;
  padding: var(--espaco-3) var(--espaco-4);
  font-family: inherit;
  font-size: var(--texto-14);
  font-weight: var(--peso-semibold);
  cursor: pointer;
}


/* ---------- GEO: resposta direta, tabelas comparativas, fontes e selo de revisão ---------- */
.resposta-direta {
  border-left: 4px solid var(--gradiente-lavanda);
  background: var(--cor-fundo-alt);
  padding: var(--espaco-4) var(--espaco-5);
  border-radius: 0 var(--raio-sutil) var(--raio-sutil) 0;
  margin: 0 0 var(--espaco-6);
}
.resposta-direta .rotulo {
  display: block;
  font-size: var(--texto-14);
  font-weight: var(--peso-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
  margin-bottom: var(--espaco-1);
}
.corpo-artigo .resposta-direta p { margin: 0; }
.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--espaco-4); }
.tabela-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--texto-16); }
.tabela-wrap th, .tabela-wrap td {
  text-align: left; vertical-align: top;
  padding: var(--espaco-3) var(--espaco-4);
  border-bottom: 1px solid var(--cor-borda);
}
.tabela-wrap th { background: var(--cor-fundo-alt); border-bottom: 2px solid var(--cor-borda); font-weight: var(--peso-semibold); }
.tabela-wrap caption { text-align: left; font-size: var(--texto-14); color: var(--cor-texto-secundario); padding-bottom: var(--espaco-2); }
.nota-tabela { font-size: var(--texto-14); color: var(--cor-texto-secundario); margin: 0; }
.fontes ul { list-style: disc; padding-left: 1.3em; margin: 0; font-size: var(--texto-14); }
.fontes li { margin-bottom: var(--espaco-2); overflow-wrap: anywhere; }
.selo-revisao { font-size: var(--texto-14); color: var(--cor-texto-secundario); margin: 0 0 var(--espaco-4); }


/* ---------- Hubs: grupos de temas (TASK-006). Classe local, sem efeito nas demais páginas ---------- */
.hub-grupo + .hub-grupo { margin-top: var(--espaco-8); }
.hub-grupo > h2 { margin: 0 0 var(--espaco-5); scroll-margin-top: 110px; }