/* V4 · Fusão — estética da V2 (acolhimento) com a máquina de SEO/GEO da V3 (referência)
   Home = conversão e jornada da paciente. Páginas de condição = guia de referência.
   Regra de cor: ameixa SÓLIDO só como fundo de capítulo. A cápsula de resposta usa
   apenas a barra ameixa sobre areia, para o sinal "aqui está a resposta" não competir. */
:root{
  --ameixa:#4A2C33; --ameixa-2:#653C46; --argila:#C4917F; --argila-2:#E4C4B7; --areia:#F7EFEA; --areia-2:#EFE3DB;
  --tinta:#2B2226; --cinza:#7A6A6E; --linha:#E3D3CB; --branco:#FFFFFF; --verde-zap:#2E7D5B;
  --display:"Cormorant Garamond", "Times New Roman", serif;
  --texto:"Manrope", "Helvetica Neue", Arial, sans-serif;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--areia);color:var(--tinta);font-family:var(--texto);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:500}
h1,h2{font-family:var(--display);letter-spacing:-.005em}
h1{font-size:clamp(2.8rem,6vw,5.4rem);line-height:.98;font-weight:500}
h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.08}
h3{font-size:1.15rem;line-height:1.35;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
:focus-visible{outline:2px solid var(--ameixa);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Cabeçalho flutuante e leve */
.topo{position:absolute;top:0;left:0;right:0;z-index:10;padding:22px 0}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.marca{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ameixa)}
/* logo real da Beatriz: a flor e o nome sao recortes do arquivo original,
   recoloridos para a ameixa da paleta. Nao ha mais texto no cabecalho. */
.marca{gap:8px;flex:none}
.marca img{flex:none;max-width:none}
.marca .marca-nome{width:auto;height:18px}
.marca .marca-flor{width:auto;height:46px}
.nav{display:flex;gap:26px;font-size:.95rem;font-weight:600}
.nav a{text-decoration:none;color:var(--ameixa);opacity:.85}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--ameixa);color:#fff;text-decoration:none;padding:13px 24px;border-radius:999px;font-weight:700;font-size:.95rem}
.pill:hover{background:var(--ameixa-2)}
.pill.claro{background:var(--branco);color:var(--ameixa);border:1px solid var(--linha)}
.pill.claro:hover{background:var(--areia-2)}
.pill svg{width:18px;height:18px}
@media (max-width:900px){.nav{display:none}.topo .pill{padding:10px 16px;font-size:.9rem}
  .marca .marca-nome{height:13px}.marca .marca-flor{height:34px}}

/* Hero: retrato à direita, título grande à esquerda. Altura definida pelo texto, não pela janela. */
.hero{position:relative;display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch;background:linear-gradient(180deg,var(--areia-2) 0%,var(--areia) 60%)}
.hero .texto{padding:150px 28px 80px calc((100vw - var(--max))/2 + 28px);position:relative;z-index:2;align-self:end}
.hero .pre{font-size:1rem;color:var(--ameixa);font-weight:600;margin-bottom:18px}
.hero h1{color:var(--ameixa);max-width:12ch}
.hero h1 i{font-style:italic;font-weight:400}
.hero .lead{font-size:1.15rem;max-width:46ch;margin:26px 0 32px;color:#4a3d42}
.hero .acoes{display:flex;gap:12px;flex-wrap:wrap}
.hero .foto{position:relative;min-height:640px;max-height:860px;margin:0}
.hero .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.hero .foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--areia) 0%,rgba(247,239,234,0) 28%)}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero .texto{padding:32px 28px 24px}.hero .foto{height:480px;min-height:0;order:-1;margin-top:0}.hero .foto::after{background:linear-gradient(0deg,var(--areia) 0%,rgba(247,239,234,0) 40%)}.hero h1{max-width:none}.topo{background:var(--areia)}}

/* Blocos */
section.bloco{padding:100px 0}
section.bloco.branco{background:var(--branco)}
section.bloco.ameixa{background:var(--ameixa);color:#fff}
.cab{max-width:64ch;margin-bottom:52px}
.cab h2{color:var(--ameixa);margin-bottom:16px}
.ameixa .cab h2{color:#fff}
.cab p{font-size:1.1rem;color:#4a3d42}
.ameixa .cab p{color:rgba(255,255,255,.8)}

/* "Marque o que sente": lista interativa que vira mensagem, não diagnóstico */
.sinais{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
.sinais ul{list-style:none;margin:0;padding:0}
.sinais li{border-top:1px solid var(--linha)}
.sinais li:last-child{border-bottom:1px solid var(--linha)}
.sinais label{display:flex;gap:16px;align-items:flex-start;padding:18px 4px;cursor:pointer;font-size:1.05rem}
.sinais input{appearance:none;width:22px;height:22px;flex:none;border:1.5px solid var(--ameixa);border-radius:50%;margin-top:3px;display:grid;place-items:center;background:#fff}
.sinais input:checked{background:var(--ameixa)}
.sinais input:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.sinais .resultado{background:var(--branco);border:1px solid var(--linha);border-radius:24px;padding:32px;position:sticky;top:28px}
.sinais .resultado h3{font-family:var(--display);font-size:1.7rem;font-weight:500;color:var(--ameixa);margin-bottom:10px}
.sinais .resultado p{color:#4a3d42}
.sinais .resultado .n{font-family:var(--display);font-size:3.4rem;line-height:1;color:var(--argila);margin-bottom:6px}
@media (max-width:900px){.sinais{grid-template-columns:1fr}.sinais .resultado{position:static}}

/* Jornada: sequência real, desenhada como caminho */
.jornada{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:20px}
.jornada::before{content:"";position:absolute;left:4%;right:4%;top:22px;height:1px;background:rgba(255,255,255,.3)}
.jornada li{list-style:none;position:relative;padding-top:56px}
.jornada li::before{content:"";position:absolute;left:0;top:14px;width:17px;height:17px;border-radius:50%;background:var(--argila);border:4px solid var(--ameixa);box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.jornada b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:500;margin-bottom:8px}
.jornada span{color:rgba(255,255,255,.8);font-size:.98rem}
@media (max-width:900px){.jornada{grid-template-columns:1fr;gap:0}.jornada::before{left:8px;right:auto;top:0;bottom:0;width:1px;height:auto}.jornada li{padding:0 0 32px 40px}.jornada li::before{top:6px}}

/* Condições: blocos SEMPRE ABERTOS. Nada de <details> aqui — este é o corpo principal
   da página e texto colapsado é lido com menos peso pelo Google e extraído pior pelas IAs.
   A profundidade mora na página de condição, para a home não competir com ela na mesma busca. */
.condicoes{border-top:1px solid var(--linha)}
.condicao{border-bottom:1px solid var(--linha);padding:38px 0}
.condicao h3{font-family:var(--display);font-size:2rem;font-weight:500;color:var(--ameixa);margin-bottom:18px}
.condicao .par{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.condicao h4{margin:0 0 10px;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--argila);font-weight:700}
.condicao ul{margin:0;padding-left:18px;color:#4a3d42}
.condicao li{margin-bottom:5px}
.condicao .pill{margin-top:22px}
@media (max-width:900px){.condicao .par{grid-template-columns:1fr;gap:26px}}

/* Cápsula de resposta: bloco curto e autocontido que as IAs extraem e citam.
   Sem rótulo, marcado só pela barra ameixa — rótulo dava cara de texto gerado. */
.capsula{background:var(--areia);border-left:3px solid var(--ameixa);border-radius:0 16px 16px 0;padding:20px 24px}
.branco .capsula{background:var(--areia)}
.capsula p{margin:0;color:#3d3136;font-size:1.05rem;line-height:1.62}

/* Quem cuida: retrato + credenciais em prosa */
.quem{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.quem img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:220px 220px 24px 24px}
.quem h2{color:var(--ameixa);margin-bottom:20px}
.quem p{font-size:1.08rem;color:#4a3d42}
.quem .titulos{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.quem .titulos li{padding-left:22px;position:relative}
.quem .titulos li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:10px;border-radius:50%;background:var(--argila)}
@media (max-width:900px){.quem{grid-template-columns:1fr}}

/* Consulta e depois: duas colunas com foto */
.consulta{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* retrato 823x1152 num quadro 4/5: sem object-position o corte centralizado
   come o alto da cabeca */
.consulta img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 6%;border-radius:24px}
.consulta h3{font-family:var(--display);font-size:1.7rem;font-weight:500;color:var(--ameixa);margin:26px 0 8px}
.consulta h3:first-child{margin-top:0}
.consulta p{color:#4a3d42}
@media (max-width:900px){.consulta{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:760px}
.faq details{border-top:1px solid var(--linha);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--linha)}
.faq summary{cursor:pointer;list-style:none;font-weight:700;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--ameixa);font-family:var(--display);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0;color:#4a3d42}

/* Local */
.local{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.local .mapa{aspect-ratio:4/3;border-radius:24px;background:var(--areia-2);overflow:hidden}
.local .mapa iframe{width:100%;height:100%;border:0;display:block}
.local address{font-style:normal;font-size:1.1rem;line-height:1.7;color:#4a3d42}
@media (max-width:900px){.local{grid-template-columns:1fr}}

/* Rodapé */
footer{background:var(--ameixa);color:rgba(255,255,255,.85);padding:56px 0 40px;font-size:.93rem}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
footer a{color:#fff}
footer .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.18);padding-top:20px;font-size:.84rem;color:rgba(255,255,255,.65)}
@media (max-width:900px){footer .wrap{grid-template-columns:1fr}}

/* Página de condição */
.pagina-topo{padding:140px 0 56px;background:var(--areia-2)}
.pagina-topo .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end}
.pagina-topo h1{font-size:clamp(2.6rem,5vw,4.4rem);color:var(--ameixa)}
.pagina-topo .lead{font-size:1.2rem;color:#4a3d42;margin-top:22px;max-width:56ch}
/* foto do topo e retrato (823x1152); 4/5 respeita o enquadramento e o
   object-position mantem o rosto dentro do corte */
.pagina-topo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;border-radius:24px}
@media (max-width:900px){.pagina-topo .wrap{grid-template-columns:1fr}.pagina-topo{padding-top:110px}}
/* O padding horizontal TEM de ficar aqui. O .artigo também é .wrap, e o
   `padding:0 28px` do .wrap é sobrescrito por este shorthand — se o lado zerar,
   o texto encosta na borda no celular. No desktop não se percebe, porque a
   coluna de 66ch é centrada e sobra folga dos dois lados. */
.artigo{display:block;padding:64px 28px 96px}
.artigo .corpo{max-width:68ch;margin:0 auto}
.artigo .corpo h2{font-size:1.9rem;color:var(--ameixa);margin:44px 0 12px}
.artigo .corpo ul{padding-left:20px;color:#4a3d42}
.artigo .corpo li{margin-bottom:6px}
.artigo .corpo p{color:#3d3136}
.autor{display:flex;gap:18px;align-items:center;margin-top:48px;padding-top:28px;border-top:1px solid var(--linha);font-size:.95rem;color:#4a3d42}
.autor img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.revisao{font-size:.85rem;color:var(--cinza);margin-top:14px}
.artigo .cta{margin-top:48px;background:var(--ameixa);color:#fff;border-radius:24px;padding:32px}
.artigo .cta h2{color:#fff;margin:0 0 8px}
.artigo .cta p{color:rgba(255,255,255,.85)}
mark{background:#ffe9a8;padding:0 4px}

/* ---------- V4: acréscimos ---------- */

/* Para colegas médicos: canal de encaminhamento, hoje inexistente. */
.colegas{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.colegas h2{color:var(--ameixa);margin-bottom:18px}
.colegas p{color:#4a3d42}
.colegas .cartao{background:var(--areia-2);border-radius:24px;padding:34px}
.colegas .cartao b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:500;color:var(--ameixa);margin-bottom:12px}
.colegas .cartao a{color:var(--ameixa)}
@media (max-width:900px){.colegas{grid-template-columns:1fr;gap:32px}}
/* O e-mail de contato e uma palavra so, de 36 caracteres. Sem isto ele vira o
   min-content da coluna e empurra a secao inteira 12 px para fora da tela no
   celular — a mesma armadilha da tabela larga, com outra roupa. */
.colegas>div{min-width:0}
.colegas a{overflow-wrap:anywhere}

/* Hospitais: fato verificável, permitido pela CFM 2.336/2023 e forte em E-E-A-T. */
.hospitais{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:0;list-style:none}
.hospitais li{border:1px solid var(--linha);background:var(--branco);border-radius:999px;padding:9px 18px;font-size:.93rem;color:#4a3d42}

/* Assinatura de autoria e data de revisão, em toda página. Sinal de E-E-A-T e de GEO. */
.assinatura{display:flex;gap:16px;align-items:center;max-width:760px;margin-top:44px;padding-top:24px;border-top:1px solid var(--linha);font-size:.93rem;color:#4a3d42}
.assinatura img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.assinatura .revisao{margin-top:6px}

/* Glossário: ajuda a paciente e dá às IAs definições curtas e citáveis. */
.glossario{max-width:820px;margin:0;display:grid;gap:0}
.glossario div{border-top:1px solid var(--linha);padding:16px 0;display:grid;grid-template-columns:190px 1fr;gap:28px}
.glossario div:last-child{border-bottom:1px solid var(--linha)}
.glossario dt{font-weight:700;color:var(--ameixa)}
.glossario dd{margin:0;color:#4a3d42}
@media (max-width:900px){.glossario div{grid-template-columns:1fr;gap:4px}}

/* Tabela comparativa de técnicas: formato que as IAs extraem bem. */
.tabela{width:100%;border-collapse:collapse;margin:22px 0;font-size:.98rem}
.tabela th,.tabela td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--linha);vertical-align:top}
.tabela thead th{background:var(--areia-2);color:var(--ameixa);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.tabela tbody th{font-weight:600;color:var(--ameixa);width:34%}
.tabela-rolagem{overflow-x:auto}

/* Página de condição: leitura longa. Manrope mantido (identidade única),
   compensado por corpo maior, entrelinha 1.75 e medida de 66ch. */
/* O grid de duas colunas saiu em 07/09 junto com o quadro lateral, entao o
   min-width:0 ja nao e o que segura a tabela larga: quem segura e o
   .tabela-rolagem. Fica aqui porque nao custa nada e volta a valer se o artigo
   um dia voltar a ser grid. Teste no celular:
   document.documentElement.scrollWidth - innerWidth tem de dar 0. */
.artigo .corpo{max-width:66ch;min-width:0;margin:0 auto;font-size:19px;line-height:1.75}
.artigo{min-width:0}
.artigo .corpo h2{font-size:1.9rem;color:var(--ameixa);margin:48px 0 14px;scroll-margin-top:24px}
.artigo .corpo .capsula{margin:0 0 32px}
/* O bloco de chamada e ameixa cheia. A regra .artigo .cta h2 pinta o titulo de
   branco la em cima, mas a .artigo .corpo h2 acima tem a mesma especificidade e
   vem depois, entao ganhava: o "Agende sua consulta" saia ameixa sobre ameixa,
   invisivel. Esta regra e mais especifica e encerra a disputa. */
.artigo .corpo .cta h2{color:#fff;margin:0 0 8px}


/* ================= Cabecalho fixo (opcao B, escolhida em 07/09) ================= */
/* No desktop muda pouco. O ganho real e no celular, onde hoje o cabecalho
   sai de cena no primeiro scroll e o indice lateral cai para o rodape. */

.topo{position:sticky;top:0;padding:14px 0;background:var(--areia);
      border-bottom:1px solid var(--linha);backdrop-filter:saturate(140%) blur(6px)}
.topo .marca svg{width:17px;height:30px}
.topo .marca span{font-size:1.2rem}

/* O hero deixava 150px de folga para o cabecalho absoluto; agora nao precisa. */
.hero .texto{padding-top:64px}
.pagina-topo{padding-top:48px}
@media (max-width:900px){.hero .texto{padding-top:28px}.pagina-topo{padding-top:28px}}

/* Trilha de secoes: gruda logo abaixo do cabecalho e rola na horizontal.
   E o substituto do indice lateral, que no celular e inutil porque vai parar no fim. */
.chips{position:sticky;z-index:9;background:var(--branco);border-bottom:1px solid var(--linha);
       overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips div{display:flex;gap:8px;padding:12px 28px;max-width:var(--max);margin:0 auto;width:max-content}
.chips a{white-space:nowrap;text-decoration:none;font-size:.9rem;font-weight:600;color:var(--ameixa);
         border:1px solid var(--linha);border-radius:999px;padding:8px 16px;background:var(--areia)}
.chips a:hover{background:var(--areia-2)}
.artigo .corpo h2{scroll-margin-top:132px}

/* em tela larga sobra espaco: a trilha quebra linha em vez de ficar cortada na borda */
@media (min-width:901px){
  .chips{overflow:visible}
  .chips div{flex-wrap:wrap;width:auto}
}

/* No celular o cabecalho fixo tem de custar pouca altura: a marca nao pode
   quebrar em duas linhas e o botao encurta. Sobra tela para o conteudo. */
@media (max-width:900px){
  .topo{padding:10px 0}
  .topo .marca .marca-flor{height:30px}
  .topo .marca .marca-nome{height:11px}
  .topo .pill{padding:9px 15px;font-size:.85rem;white-space:nowrap}
  .chips div{padding:9px 20px;gap:7px}
  .chips a{font-size:.84rem;padding:7px 13px}
  .artigo .corpo h2{scroll-margin-top:112px}
}

/* Em telas estreitas a marca e o botao disputam a mesma linha e nao ha nav para
   ceder espaco: o botao perde o "Falar pelo" e a marca encolhe. Sem isso o botao
   sai pela borda direita num aparelho de 390 px. */
@media (max-width:560px){
  .topo .wrap{padding:0 20px;gap:12px}
  .topo .marca{gap:6px}
  .topo .marca .marca-nome{height:12px}
  .topo .marca .marca-flor{height:26px}
  .topo .pill{padding:9px 14px;font-size:.82rem}
  .topo .pill .longo{display:none}
}

/* Abaixo de 400 px (iPhone mini, Android compacto) ainda faltam uns 15 px:
   a marca cede mais um pouco e a folga lateral encolhe. */
@media (max-width:400px){
  .topo .wrap{padding:0 16px;gap:10px}
  .topo .marca{gap:5px}
  .topo .marca .marca-nome{height:11px}
}