/*
Theme Name: Paula Brandão
Author: Open Care
Description: Tema da Dra. Paula Brandão, cirurgiã vascular na Tijuca, Rio de Janeiro. Derivado do tema da Dra. Thaís Elmôr Semprine (base técnica do tema da Dra. Rafaela Torres Portugal), na paleta definida na estratégia do Google dela (marca.md): creme, vinho e verde-escuro. Sem logo: ela não enviou marca. Playfair Display e Montserrat locais.
Version: 1.0
Text Domain: paula
*/

:root {
  --fundo: #F2EDE6;
  --fundo2: #FAF7F3;
  --tinta: #7B2D3B;
  --acento: #7B2D3B;
  --acento2: #5E2230;
  --rose: #D9CFC4;
  --fio: #D9CFC4;
  --texto: #4A4A46;
  --texto2: #6F6A64;
  --largura: 1080px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Montserrat', 'Segoe UI', sans-serif; color: var(--tinta); background: var(--fundo); font-size: 16.5px; line-height: 1.85; font-weight: 400; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { max-width: var(--largura); margin: 0 auto; padding: 0 32px; }

/* Cabeçalho */
.topo { background: var(--fundo2); border-bottom: 1px solid var(--fio); position: sticky; top: 0; z-index: 50; }
.topo-in { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 20px; position: relative; }
.marca { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.marca img { flex: none; }
.marca b { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--acento2); }
.marca b small { display: block; font-family: 'Montserrat', sans-serif; font-size: 10px; color: var(--texto2); letter-spacing: .16em; text-transform: uppercase; font-weight: 400; }
.menu { display: flex; gap: 24px; list-style: none; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.menu a { text-decoration: none; opacity: .82; padding-bottom: 3px; }
.menu a:hover, .menu .current-menu-item > a, .menu .current-page-ancestor > a { opacity: 1; border-bottom: 1px solid var(--rose); }
.menu-toggle { display: none; background: none; border: 1px solid var(--acento); color: var(--acento); font-family: inherit; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; border-radius: 2px; cursor: pointer; }

/* Botões */
.btn { display: inline-block; background: var(--acento); color: #FFF; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 15px 30px; border-radius: 2px; text-decoration: none; border: 1px solid var(--acento); transition: background .2s; }
.btn:hover { background: var(--acento2); }
.btn.linha { background: transparent; color: var(--acento); }
.btn.linha:hover { background: var(--acento); color: #FFF; }

/* Hero */
.hero { position: relative; background: var(--fundo); overflow: hidden; border-bottom: 1px solid var(--fio); }
.hero-in { position: relative; display: flex; align-items: center; gap: 40px; min-height: 420px; }
.hero-txt { flex: 1.4; padding: 70px 0 62px; position: relative; z-index: 2; }
.hero-arte { flex: 1; display: flex; justify-content: center; opacity: .9; }
.hero-arte img { width: 300px; max-width: 100%; }
.kicker { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500; color: var(--texto2); margin-bottom: 16px; }
.migalhas { font-size: 11.5px; letter-spacing: .08em; color: var(--texto2); margin-bottom: 26px; line-height: 1.7; }
.migalhas a { text-decoration: none; }
.migalhas a:hover { border-bottom: 1px solid var(--rose); }
.migalhas span { margin: 0 7px; color: var(--fio); }
.migalhas b { color: var(--texto); font-weight: 500; }
.hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 46px; line-height: 1.15; font-weight: 600; max-width: 620px; color: var(--tinta); }
.hero-sub { margin: 22px 0 32px; max-width: 560px; font-size: 17px; color: var(--texto); font-weight: 300; }
.hero-cred { font-size: 11px; letter-spacing: .14em; color: var(--texto2); text-transform: uppercase; margin-top: 22px; font-weight: 500; }

/* Cápsula de resposta (o trecho que as IAs citam) */
.capsula { background: var(--fundo2); border-left: 3px solid var(--rose); padding: 22px 26px; margin: 0 0 8px; font-size: 16.5px; color: var(--tinta); font-weight: 400; }

/* Seções */
.sec { padding: 64px 0; }
.sec.claro { background: var(--fundo2); border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); }
h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 30px; font-weight: 600; line-height: 1.25; margin-bottom: 18px; color: var(--tinta); }
h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 600; margin: 8px 0 10px; color: var(--tinta); }
.sec-kicker { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--texto2); font-weight: 500; margin-bottom: 10px; }
.filete { width: 56px; height: 1px; background: var(--rose); margin: 16px 0 24px; }
p { color: var(--texto); font-weight: 300; }
p + p { margin-top: 14px; }
p b, p strong { color: var(--tinta); font-weight: 500; }
.sec ul, .sec ol { color: var(--texto); font-weight: 300; margin: 14px 0 14px 22px; }
.sec li + li { margin-top: 8px; }
.duas-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--fio); border: 1px solid var(--fio); margin-top: 30px; }
.cols.duas { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--fundo2); padding: 34px 30px; }
.sec.claro .card { background: var(--fundo); }
.card p { font-size: 14.5px; }
.card a.mais, a.mais { display: inline-block; margin-top: 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--acento); border-bottom: 1px solid var(--rose); padding-bottom: 2px; }

/* Tabela (linha do tempo da recuperação) */
.tabela { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; }
.tabela th, .tabela td { border-bottom: 1px solid var(--fio); padding: 12px 14px; text-align: left; vertical-align: top; color: var(--texto); font-weight: 300; }
.tabela th { font-weight: 500; color: var(--tinta); background: var(--fundo2); }


/* Bloco escuro */
.escuro { background: linear-gradient(115deg, var(--acento) 0%, var(--acento2) 100%); }
.escuro h2 { color: #FFF; }
.escuro .sec-kicker { color: #EBE0CE; }
.escuro p { color: #F0E8D8; max-width: 680px; }
.escuro .filete { background: #EBE0CE; }
.escuro .btn { background: #FFF; color: var(--acento2); border-color: #FFF; }

/* Perguntas frequentes */
.faq-item { border-bottom: 1px solid var(--fio); padding: 22px 4px; }
.faq-item:first-of-type { border-top: 1px solid var(--fio); }
.faq-item summary { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; color: var(--tinta); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--rose); font-size: 22px; font-weight: 400; }
.faq-item[open] summary::after { content: "\00D7"; }
.faq-item p { font-size: 15px; margin-top: 10px; max-width: 860px; }

/* Autoria */
.autoria { display: flex; gap: 18px; align-items: center; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); padding: 22px 0; }
.autoria b { display: block; font-family: 'Playfair Display', serif; font-size: 17px; color: var(--tinta); }
.autoria span { display: block; font-size: 13px; color: var(--texto2); }

/* Chamada final */
.cta-final { text-align: center; padding: 76px 0; }
.cta-final h2 { max-width: 640px; margin: 0 auto 14px; }
.cta-final p { max-width: 540px; margin: 0 auto 28px; }
.cta-final .filete { margin: 0 auto 24px; }

/* Rodapé */
.rodape { background: #1F3D35; color: #E3D9C6; font-size: 13.5px; padding: 44px 0 30px; font-weight: 300; }
.rodape .cols-rod { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.rodape b { font-family: 'Playfair Display', serif; color: #FAF7F3; display: block; margin-bottom: 8px; font-size: 15.5px; font-weight: 600; }
.rodape a { color: #E3D9C6; text-decoration: none; }
.rodape a:hover { color: #FFF; }
.rodape .legal { border-top: 1px solid rgba(255,255,255,.1); margin-top: 30px; padding-top: 18px; font-size: 11.5px; color: #C9B892; }

/* Blog */
.lista-post { border-bottom: 1px solid var(--fio); padding: 24px 0; }
.lista-post h3 { margin: 4px 0 8px; font-size: 22px; }
.lista-post a { text-decoration: none; }
.artigo { max-width: 760px; margin: 0 auto; }
.artigo h2 { font-size: 26px; margin-top: 36px; }

/* Responsivo */
@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .menu { display: none; position: absolute; top: 100%; left: -32px; right: -32px; background: var(--fundo2); flex-direction: column; gap: 0; padding: 10px 32px 22px; border-bottom: 1px solid var(--fio); }
  .menu.aberto { display: flex; }
  .menu li { padding: 12px 0; border-bottom: 1px solid var(--fio); }
  .topo-in > .btn { display: none; }
  .hero-arte { display: none; }
  .hero-in { min-height: 0; }
  .hero-txt { padding: 46px 0 40px; }
  .hero h1 { font-size: 32px; }
  .duas-col, .cols, .cols.duas, .portas, .rodape .cols-rod { grid-template-columns: 1fr; }
  h2 { font-size: 25px; }
  .sec { padding: 48px 0; }
  .wrap { padding: 0 20px; }
  .tabela { font-size: 14px; }
}

/* Cabeçalho: Instagram */
.topo-acoes { display: flex; align-items: center; gap: 16px; }
.insta { color: var(--acento); display: flex; opacity: .85; }
.insta:hover { opacity: 1; }

/* Botão fixo de WhatsApp */
.whats-fixo { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: #25A55F; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.whats-fixo:hover { background: #1E8C50; }

/* Aviso de cookies */
.cookies { position: fixed; left: 20px; right: 96px; bottom: 20px; z-index: 70; max-width: 720px; background: #FFF; border: 1px solid var(--fio); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 18px 22px; display: flex; gap: 18px; align-items: center; }
.cookies[hidden] { display: none; }
.cookies p { font-size: 13.5px; margin: 0; }
.cookies p a { color: var(--acento); }
.cookies div { display: flex; gap: 8px; flex: none; }
.cookies .btn { padding: 10px 16px; font-size: 11.5px; }
@media (max-width: 900px) {
  .topo-acoes .btn { display: none; }
  .cookies { left: 12px; right: 12px; bottom: 86px; flex-direction: column; align-items: stretch; }
}

/* Artigos do blog */
.artigo > p:first-child { font-size: 17.5px; color: var(--tinta); }
.artigo h2 { font-size: 26px; margin: 40px 0 14px; }
.artigo h3 { font-size: 20px; margin: 26px 0 10px; }
.artigo ul, .artigo ol { color: var(--texto); font-weight: 300; margin: 14px 0 14px 22px; }
.artigo .cta-topo { background: var(--fundo2); border-left: 3px solid var(--rose); padding: 18px 22px; margin: 26px 0 8px; }
.artigo .cta-topo p { margin: 0; }
.artigo .cta-topo p + p { margin-top: 6px; }
.artigo .cta-topo a { color: var(--acento); }
.artigo p a, .artigo li a { color: var(--acento); }
.leia-tambem { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--fio); }

/* Bloco de experiência real da médica (fonte: podcast) */
.experiencia { background: var(--fundo2); border: 1px solid var(--fio); border-left: 3px solid var(--rose); border-radius: 4px; padding: 26px 30px; margin: 10px 0; }
.experiencia p { color: var(--tinta); }
.experiencia .fonte-exp { font-size: 13px; color: var(--texto2); margin-top: 14px; }
.experiencia .fonte-exp a { color: var(--acento); }
.artigo .experiencia { margin: 34px 0; }
.video-podcast { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 30px 0 0; border-radius: 6px; overflow: hidden; background: #000; }
.video-podcast iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Fotos dentro das páginas */
.foto-pagina { margin: 28px auto 0; max-width: 460px; }
.foto-pagina img { width: 100%; height: auto; border-radius: 6px; display: block; }
.foto-pagina figcaption { font-size: 12.5px; color: var(--texto2); margin-top: 8px; text-align: center; }

/* Duas fotos lado a lado (consultório) */
.galeria-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; max-width: 760px; }
.galeria-2 .foto-pagina { margin: 0; max-width: none; }
.galeria-2 img { aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 600px) { .galeria-2 { grid-template-columns: 1fr; } }


/* Retrato da médica no topo */
.hero-arte .retrato-hero { width: 340px; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.12); }
@media (max-width: 900px) { .hero-arte { display: flex; order: -1; padding-top: 26px; } .hero-in { flex-direction: column; align-items: stretch; } .hero-arte .retrato-hero { width: 100%; max-height: 360px; } .hero-arte .monograma { display: none; } }


.lista-artigos { list-style: none; margin: 10px 0 0 !important; }
.lista-artigos li { border-bottom: 1px solid var(--fio); padding: 12px 0; }
.lista-artigos a { text-decoration: none; color: var(--acento); font-weight: 500; }


.cta-final .siga { margin-top: 18px; font-size: 14px; }
.cta-final .siga a { color: var(--acento); }

/* Ajustes da marca da Dra. Thaís */
body { font-size: 16.5px; line-height: 1.8; }
.marca b { color: var(--acento); letter-spacing: .01em; }
.hero { background: linear-gradient(180deg, var(--fundo) 0%, #EBE0CE 100%); }
.cards-servicos .card h3 { color: var(--acento2); }
.consultorios { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; }
.consultorios .card { border: 1px solid var(--fio); border-radius: 6px; }
@media (max-width: 900px) { .consultorios { grid-template-columns: 1fr; } }
.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) { .tabela th, .tabela td { padding: 10px 8px; } }

/* Menu sem quebra de linha; celular com texto e botão antes da foto */
.menu { gap: 20px; }
.menu a { white-space: nowrap; }
.marca b { font-size: 17px; }
@media (max-width: 1100px) and (min-width: 901px) { .menu { gap: 14px; font-size: 11px; letter-spacing: .1em; } .topo-acoes .btn { padding: 12px 16px; } }
@media (max-width: 900px) {
  .hero-arte { order: 2; padding: 0 0 34px; }
  .hero-txt { padding: 34px 0 26px; }
  .hero-arte .retrato-hero { max-height: 300px; aspect-ratio: auto; object-position: center 20%; }
  .marca b { font-size: 16px; }
}

/* Foto horizontal no topo (consultório) */
.hero-arte .retrato-hero.largo { width: 460px; aspect-ratio: 3 / 2; object-position: center; }
@media (max-width: 900px) { .hero-arte .retrato-hero.largo { width: 100%; max-height: 260px; } }

/* Vídeo com capa própria (foto da médica) */
.capa-video button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; }
.capa-video img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; }
.capa-video .play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(94,34,48,.92); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.capa-video .play::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #FFF; }
.capa-video button:hover .play { background: var(--acento2); }
.capa-video .legenda { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; background: linear-gradient(0deg, rgba(94,34,48,.85), rgba(94,34,48,0)); color: #FFF; font-size: 15px; font-weight: 500; text-align: left; }
@media (max-width: 600px) { .capa-video .play { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .capa-video .play::after { left: 24px; top: 18px; border-width: 12px 0 12px 19px; } .capa-video .legenda { font-size: 13px; padding: 10px 12px; } }
/* Play fora do título e do rosto na capa do episódio */
.capa-video .play { left: 50%; top: 80%; }

/* Ajustes da identidade da Dra. Paula (paleta do marca.md): títulos em vinho, rótulos e assinatura em verde-escuro, filetes em areia. Sem logo nem monograma. */
body { font-size: 15.5px; line-height: 1.85; color: var(--texto); }
.hero h1 { font-size: 46px; font-weight: 600; line-height: 1.12; }
h2 { font-size: 31px; font-weight: 600; line-height: 1.2; }
h3 { font-size: 20px; font-weight: 600; }
.artigo h2 { font-size: 28px; }
.artigo h3 { font-size: 20px; }
.lista-post h3 { font-size: 21px; }
.marca b { font-size: 19px; font-weight: 600; color: #7B2D3B; }
.marca b small { color: #1F3D35; }
.kicker, .sec-kicker { color: #1F3D35; }
.btn:hover { background: var(--acento2); border-color: var(--acento2); }
@media (max-width: 760px) {
  .hero h1 { font-size: 36px; }
  h2 { font-size: 29px; }
  .marca b { font-size: 18px; }
}

/* Cabeçalho com 8 itens de menu: nome numa linha e menu compacto até 1320 px. */
.marca b { white-space: nowrap; }
@media (max-width: 1320px) and (min-width: 901px) {
  .menu { gap: 14px; font-size: 11px; letter-spacing: .08em; }
  .topo-acoes .btn { padding: 11px 14px; font-size: 11px; }
  .marca b { font-size: 18px; }
  .marca b small { font-size: 9px; letter-spacing: .12em; }
}
@media (max-width: 900px) {
  .marca b { white-space: normal; font-size: 16px; line-height: 1.15; }
  .marca b small { font-size: 8.5px; letter-spacing: .1em; }
  .marca img { width: 36px; height: auto; }
  .tabela { display: block; overflow-x: auto; }
}

/* Entre 901 e 1120 px o menu de 7 itens não cabia ao lado do nome: menu mais compacto e Instagram só no rodapé. */
@media (max-width: 1120px) and (min-width: 901px) {
  .menu { gap: 10px; font-size: 10.5px; letter-spacing: .05em; }
  .topo-acoes .insta { display: none; }
  .topo-in { gap: 12px; }
}