/*
Theme Name: Dr. Eduardo Tiburcio
Author: Open Care
Description: Tema do Dr. Eduardo Tiburcio, médico de família no Rio de Janeiro. Derivado do tema da Dra. Thaís Elmôr Semprine, na paleta da marca dele (azuis da espiral em aquarela), com Source Sans 3 nos textos e Lora nos títulos.
Version: 1.0
Text Domain: eduardo
*/
:root {
  --fundo: #F6F8FB;
  --fundo2: #FCFDFE;
  --tinta: #1F3550;
  --acento: #2C4A6E;
  --acento2: #1F3652;
  --rose: #5B87B8;
  --fio: #DCE8F4;
  --texto: #4A5568;
  --texto2: #66768A;
  --largura: 1080px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Source Sans 3', '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: 'Lora', Georgia, serif; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--acento2); }
.marca b small { display: block; font-family: 'Source Sans 3', 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: 'Lora', 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: 'Lora', Georgia, serif; font-size: 30px; font-weight: 600; line-height: 1.25; margin-bottom: 18px; color: var(--tinta); }
h3 { font-family: 'Lora', 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: #D3E0EE; }
.escuro p { color: #EAF1F8; max-width: 680px; }
.escuro .filete { background: #D3E0EE; }
.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: 'Lora', 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: 'Lora', 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: var(--tinta); color: #C4D4E6; 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: 'Lora', serif; color: #F2F6FB; display: block; margin-bottom: 8px; font-size: 15.5px; font-weight: 600; }
.rodape a { color: #C4D4E6; 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: #9FB3CB; }

/* 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%, #E8EFF7 100%); }
.monograma { flex: none; }
.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(44,74,110,.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(31,53,80,.85), rgba(31,53,80,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%; }