/* Clínica Ana Carolina Sumam — site institucional
   Paleta e tipografia: Guia de cores e assinaturas (mar/2024).
   Para usar só Montserrat nos títulos, troque --display por var(--texto). */
:root {
  --marrom: #806E5F;
  --marrom-escuro: #5E5045;
  --tinta: #3F362E;
  --bege: #D8D3C6;
  --rose: #DDC8B9;
  --rose-claro: #E8DBD1;
  --cinza: #D9D8D6;
  --papel: #FFFFFF;
  --fundo-suave: #F7F2EE;
  --display: "Marcellus", "Times New Roman", serif;
  --texto: "Montserrat", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.0625rem/1.75 var(--texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marrom-escuro); text-underline-offset: 0.2em; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 2px solid var(--marrom); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--marrom);
  line-height: 1.15;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.35rem; line-height: 1.3; }
p { margin: 0 0 1.2em; max-width: 68ch; }
ul { padding-left: 1.2em; margin: 0 0 1.2em; max-width: 68ch; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--rose); }

.wrap { width: min(1120px, 100% - 48px); margin-inline: auto; }
.estreito { width: min(760px, 100% - 48px); margin-inline: auto; }
.pular { position: absolute; left: -999px; }
.pular:focus { left: 16px; top: 16px; z-index: 50; background: var(--papel); padding: 8px 16px; }

main > section { padding-block: clamp(56px, 8vw, 104px); }
main > section.suave { background: var(--fundo-suave); }
.abertura { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.abertura p { margin-inline: auto; font-size: 1.15rem; color: var(--marrom-escuro); }

/* Botões */
.botao {
  display: inline-block;
  padding: 0.85em 1.9em;
  border: 1px solid var(--marrom);
  border-radius: 999px;
  background: var(--marrom);
  color: var(--papel);
  font: 500 0.95rem/1.2 var(--texto);
  text-decoration: none;
  cursor: pointer;
}
.botao:hover { background: var(--marrom-escuro); border-color: var(--marrom-escuro); color: var(--papel); }
.botao.claro { background: var(--rose-claro); border-color: var(--rose-claro); color: var(--tinta); }
.botao.claro:hover { background: var(--rose); border-color: var(--rose); color: var(--tinta); }
.botao.vazado { background: transparent; color: var(--marrom-escuro); }
.botao.vazado:hover { background: var(--marrom); color: var(--papel); }
.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6em; }
.acoes.centro { justify-content: center; }

/* Cabeçalho */
.topo { position: sticky; top: 0; z-index: 20; background: var(--papel); border-bottom: 1px solid var(--rose-claro); }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.topo .logo img { height: 46px; width: auto; }
.menu { display: flex; gap: clamp(20px, 4vw, 56px); list-style: none; margin: 0; padding: 0; max-width: none; }
.menu li { margin: 0; }
.menu a { color: var(--marrom-escuro); text-decoration: none; font-weight: 500; padding-block: 6px; border-bottom: 1px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--marrom); }
.abre-menu { display: none; background: none; border: 1px solid var(--marrom); border-radius: 999px; padding: 8px 18px; color: var(--marrom-escuro); font: 500 0.95rem var(--texto); cursor: pointer; }
@media (max-width: 760px) {
  .abre-menu { display: block; }
  .topo nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--papel); border-bottom: 1px solid var(--rose-claro); padding: 8px 24px 20px; }
  .topo nav.aberto { display: block; }
  .menu { flex-direction: column; gap: 4px; }
  .menu a { display: block; padding-block: 12px; }
}

/* Hero da home */
.hero { position: relative; padding: 0; background: var(--marrom-escuro); }
.hero > img { width: 100%; height: clamp(440px, 46vw, 640px); object-fit: cover; object-position: 72% 20%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(63, 54, 46, 0.78) 0%, rgba(63, 54, 46, 0.5) 38%, rgba(63, 54, 46, 0) 62%); }
.hero .conteudo { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; }
.hero .texto { max-width: 560px; }
.hero h1 { color: var(--papel); }
.hero p { color: var(--papel); font-size: 1.1rem; }
@media (max-width: 760px) {
  .hero > img { height: 300px; object-position: 78% 15%; }
  .hero::after { display: none; }
  .hero .conteudo { position: static; padding-block: 36px 44px; }
}

/* Pilares (3 colunas, sem caixas) */
.pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(24px, 4vw, 48px); }
.pilares > div { border-top: 1px solid var(--rose); padding-top: 22px; }
.pilares p { margin: 0; }

/* Texto + imagem em arco (as curvas da clínica) */
.dupla { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.dupla.inverte { grid-template-columns: 0.85fr 1.25fr; }
.arco img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 0 0; }
@media (max-width: 760px) {
  .dupla, .dupla.inverte { grid-template-columns: 1fr; }
  .arco { max-width: 340px; margin-inline: auto; order: -1; }
}
blockquote { margin: clamp(32px, 5vw, 56px) auto; text-align: center; font: 400 clamp(1.4rem, 2.6vw, 1.9rem)/1.4 var(--display); color: var(--marrom); max-width: 30ch; }

/* Lista de tratamentos em linhas */
.linhas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(32px, 6vw, 80px); }
.linhas > article { border-top: 1px solid var(--rose); padding-block: 26px; }
.linhas p { margin-bottom: 0.8em; }
@media (max-width: 760px) { .linhas { grid-template-columns: 1fr; } }

.tratamento { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: clamp(20px, 5vw, 64px); border-top: 1px solid var(--rose); padding-block: clamp(28px, 4vw, 44px); scroll-margin-top: 100px; }
.tratamento h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin: 0; }
@media (max-width: 760px) { .tratamento { grid-template-columns: 1fr; gap: 12px; } }

/* Tratamentos: ícones e categorias */
.icones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: clamp(40px, 6vw, 72px); }
.icones > div { background: var(--rose-claro); border-radius: 6px; padding: 28px 24px; text-align: center; }
.icones img { width: 72px; margin: 0 auto 12px; }
.icones p { margin: 0 auto; font-weight: 500; color: var(--marrom-escuro); max-width: 26ch; }
.categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.categorias a { text-decoration: none; text-align: center; }
.categorias img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 0 0; }
.categorias span { display: block; padding-top: 16px; font: 400 1.35rem var(--display); color: var(--marrom); }
.categorias a:hover span { text-decoration: underline; text-underline-offset: 0.25em; }

/* FAQ */
.faq dt { font: 400 1.3rem/1.3 var(--display); color: var(--marrom); border-top: 1px solid var(--rose); padding-top: 24px; margin-bottom: 10px; }
.faq dd { margin: 0 0 28px; }

/* Galeria */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.galeria button { padding: 0; border: 0; background: none; cursor: zoom-in; }
.galeria img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.galeria button:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 760px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
dialog.ampliada { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; }
dialog.ampliada::backdrop { background: rgba(63, 54, 46, 0.88); }
dialog.ampliada img { max-height: 90vh; width: auto; }
dialog.ampliada button { position: fixed; top: 16px; right: 16px; }

/* Blog */
.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.filtros button { background: none; border: 1px solid var(--rose); border-radius: 999px; padding: 7px 18px; font: 500 0.9rem var(--texto); color: var(--marrom-escuro); cursor: pointer; }
.filtros button[aria-pressed="true"] { background: var(--marrom); border-color: var(--marrom); color: var(--papel); }
.busca { display: flex; max-width: 520px; margin: 0 auto clamp(32px, 5vw, 56px); }
.busca input { flex: 1; min-width: 0; }
.posts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px 24px; }
.post { grid-column: span 2; display: flex; flex-direction: column; }
.posts.com-destaque .post:nth-child(-n+2) { grid-column: span 3; }
.post .capa { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-radius: 6px; background: var(--rose-claro); }
.post h3 { margin: 16px 0 12px; }
.posts.com-destaque .post:nth-child(-n+2) h3 { font-size: 1.6rem; }
.post h3 a { color: inherit; text-decoration: none; }
.post h3 a:hover { text-decoration: underline; }
.post .meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rose-claro); font-size: 0.85rem; color: var(--marrom); }
.post .meta span { display: block; }
.vazio { grid-column: 1 / -1; text-align: center; margin-inline: auto; }
@media (max-width: 900px) { .post, .posts.com-destaque .post:nth-child(-n+2) { grid-column: span 3; } }
@media (max-width: 600px) { .post, .posts.com-destaque .post:nth-child(-n+2) { grid-column: 1 / -1; } }

/* Contato e formulário */
.atendimento { border: 1px solid var(--rose); border-radius: 6px; padding: 24px 28px; margin-top: 1.6em; }
.atendimento h2 { font-size: 1.5rem; }
.atendimento ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; max-width: none; }
.atendimento li { margin: 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"] {
  width: 100%;
  padding: 0.95em 1.1em;
  border: 1px solid var(--cinza);
  border-radius: 6px;
  background: var(--fundo-suave);
  font: 400 1rem var(--texto);
  color: var(--tinta);
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 500; font-size: 0.9rem; margin-bottom: 6px; color: var(--marrom-escuro); }
form .botao { margin-top: 12px; }
.aviso-lgpd { font-size: 0.88rem; color: var(--marrom-escuro); margin-top: 20px; }
.mapa iframe { width: 100%; height: clamp(320px, 45vw, 480px); border: 0; display: block; }
main > section.mapa { padding: 0; }

/* Páginas legais */
.legal h2 { font-size: 1.5rem; margin-top: 2em; }

/* Rodapé */
.rodape { background: var(--marrom); color: var(--papel); padding-block: 56px 28px; font-size: 0.95rem; }
.rodape a { color: var(--papel); }
.rodape .colunas { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: clamp(28px, 5vw, 72px); }
.rodape .logo img { height: 52px; width: auto; margin-bottom: 20px; }
.rodape h2 { font: 600 0.95rem var(--texto); color: var(--papel); margin-bottom: 14px; }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: 10px; }
.rodape button.link { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.rodape .fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid rgba(255, 255, 255, 0.4); margin-top: 40px; padding-top: 20px; font-size: 0.85rem; }
.rodape .fim p { margin: 0; max-width: none; }
@media (max-width: 760px) { .rodape .colunas { grid-template-columns: 1fr; } }

/* Banner de cookies */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; max-width: 720px; margin-inline: auto; background: var(--papel); border: 1px solid var(--rose); border-radius: 8px; padding: 22px 24px; box-shadow: 0 12px 40px rgba(63, 54, 46, 0.22); font-size: 0.93rem; }
.cookies[hidden] { display: none; }
.cookies p { margin-bottom: 0.9em; max-width: none; }
.cookies fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.cookies label { display: block; margin-bottom: 8px; }
.cookies .acoes { margin-top: 8px; gap: 10px; }
.cookies .botao { padding: 0.7em 1.4em; font-size: 0.9rem; }

/* Sobretítulo dentro do H1: cidade + serviço para o SEO, sem mudar o título de marca */
.chapeu { display: block; font-family: 'Montserrat', sans-serif; font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; margin-bottom: 0.9em; }

/* Artigo do blog (páginas geradas por gera_blog_html.py)
   Título, capa e texto na mesma coluna, com as mesmas bordas. */
.artigo { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 104px); }
.artigo .estreito, .capa-artigo { width: min(820px, 100% - 48px); margin-inline: auto; }
.artigo p, .artigo ul, .artigo h1 { max-width: none; }
.artigo h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 0.5em; }
.voltar { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--marrom); }
.voltar a { color: inherit; }
.linha-fina { font-size: 1.2rem; color: var(--marrom-escuro); }
.meta-artigo { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--marrom); border-top: 1px solid var(--rose-claro); padding-top: 16px; }
.meta-artigo .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.capa-artigo { margin-block: clamp(24px, 4vw, 40px); }
.capa-artigo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.capa-artigo figcaption, .texto-artigo figcaption { font-size: 0.85rem; color: var(--marrom); margin-top: 10px; }
.texto-artigo { font-size: 1.05rem; line-height: 1.75; }
.texto-artigo::after { content: ""; display: block; clear: both; }
.texto-artigo h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-top: 1.6em; clear: both; }
/* imagem no meio do texto: quadro à direita, texto em coluna à esquerda */
.texto-artigo figure { float: right; width: min(300px, 42%); margin: 0.4em 0 1.2em 32px; padding: 10px; background: var(--fundo-suave); border: 1px solid var(--rose-claro); border-radius: 6px; }
.texto-artigo figure img { border-radius: 4px; }
@media (max-width: 600px) { .texto-artigo figure { float: none; width: 100%; margin: 1.6em 0; } }
/* fala da médica */
.texto-artigo blockquote.fala { clear: both; margin: 1.8em auto; max-width: 46ch; text-align: center; font: 400 clamp(1.15rem, 2vw, 1.35rem)/1.5 var(--display); color: var(--marrom); }
/* barra de CTA */
.cta-artigo { clear: both; background: var(--fundo-suave); border: 1px solid var(--rose-claro); border-radius: 8px; padding: clamp(24px, 4vw, 36px); margin: 2.4em 0; text-align: center; }
.cta-artigo .chapeu-cta { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--marrom); margin-bottom: 10px; }
.cta-artigo h2 { margin: 0 auto 0.4em; font-size: clamp(1.3rem, 2.4vw, 1.65rem); max-width: 30ch; }
.cta-artigo p { margin: 0 auto; max-width: 52ch; color: var(--marrom-escuro); }
.cta-artigo .botao { margin-top: 20px; }
.form-artigo { clear: both; border: 1px solid var(--rose); border-radius: 6px; padding: 28px 32px; margin: 2.2em 0; }
.form-artigo h2 { margin-top: 0; }
.assinatura { margin-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--rose); padding-top: 24px; font-size: 0.9rem; color: var(--marrom-escuro); text-align: center; }
.assinatura .acoes { justify-content: center; }
/* "Leia também": imagem à esquerda, título à direita; no celular, imagem em cima */
.leia-tambem { margin-top: clamp(32px, 5vw, 48px); }
.leia-tambem h2 { font-size: 1.3rem; margin-bottom: 16px; }
.relacionado { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 32px); align-items: center; padding: 16px; background: var(--fundo-suave); border: 1px solid var(--rose-claro); border-radius: 8px; text-decoration: none; color: inherit; transition: border-color 0.2s; }
.relacionado + .relacionado { margin-top: 16px; }
.relacionado:hover { border-color: var(--rose); }
.relacionado img, .relacionado .sem-capa { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; display: block; background: var(--rose-claro); }
.relacionado .meta-rel { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marrom); margin-bottom: 8px; }
.relacionado .titulo-rel { display: block; font: 400 clamp(1.2rem, 2.2vw, 1.5rem)/1.3 var(--display); color: var(--marrom); }
.relacionado .ler-rel { display: inline-block; margin-top: 14px; font-size: 0.9rem; font-weight: 500; color: var(--marrom-escuro); border-bottom: 1px solid var(--rose); }
.relacionado:hover .ler-rel { border-color: var(--marrom); }
@media (max-width: 600px) { .relacionado { grid-template-columns: 1fr; } }