/* ==========================================================
   Yamamoto Odontologia — camada de marca (marfim · dourado · grafite)
   Carregada DEPOIS do estilo da página. Não altera estrutura nem conteúdo.
   ========================================================== */
:root{
  --marfim:#FAF7F3; --areia:#F1EBE3; --linha:#E4DACD;
  --dourado:#AE8E68; --dourado-esc:#8A6C49; --grafite:#29292F; --grafite-2:#222226;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* tokens originais da página, remapeados */
  --primary:var(--dourado);
  --black:var(--grafite);
  --ink:var(--grafite);
  --paper:var(--marfim);
  --paper2:var(--marfim);
  --text:var(--marfim);
  --text2:rgba(250,247,243,.82);
  --lineCard:var(--linha);
  --shadow:0 14px 34px rgba(41,41,47,.08);
  --muted:rgba(174,142,104,.10);
  --mutedStrong:rgba(174,142,104,.18);
}

html,body{ font-family:var(--sans); }
body{ background:var(--marfim) !important; color:var(--grafite); }

/* Títulos em serifa, peso leve, como no e-book */
h1,h2,h3,h4,.ib-title-soft,.mf-title,.manifesto-video-title,.pillar-banner-title,.areas-title{
  font-family:var(--serif) !important;
  font-weight:500 !important;
  letter-spacing:-.005em !important;
}
h2{ line-height:1.12 !important; }
#home + section h1{ font-family:var(--sans) !important; } /* o H1 é a linha pequena de localização */
.text-3xl, .md\:text-4xl{ }
section h2.text-3xl{ font-size:clamp(2.1rem,3.6vw,2.9rem) !important; }
h3.text-lg{ font-size:1.35rem !important; }

/* Sobrelinhas (eyebrows) em dourado */
.tracking-\[\.28em\], .ib-eyebrow, .mf-eyebrow, .areas-kicker{
  color:var(--dourado-esc) !important; font-weight:600 !important; letter-spacing:.26em !important;
}

/* ---------- Cabeçalho claro ---------- */
header.site-header{
  background:rgba(250,247,243,.94) !important;
  border-bottom:1px solid var(--linha) !important;
}
header.site-header.is-scrolled{ background:rgba(250,247,243,.97) !important; box-shadow:0 8px 24px rgba(41,41,47,.06) !important; }
header.site-header nav{ color:var(--grafite) !important; font-weight:500 !important; letter-spacing:.02em; }
header.site-header nav a:hover{ color:var(--dourado-esc) !important; }
#mobileMenu{ background:var(--marfim) !important; border-top:1px solid var(--linha) !important; }
#mobileMenu a{ color:var(--grafite) !important; }

/* ---------- Botões ---------- */
.btn-primary, .ib-btn--light{
  background:var(--dourado) !important; color:#fff !important;
  border:1px solid var(--dourado) !important; box-shadow:none !important;
  border-radius:999px !important; font-weight:500 !important; letter-spacing:.02em;
}
.btn-primary:hover, .ib-btn--light:hover{ background:var(--dourado-esc) !important; border-color:var(--dourado-esc) !important; }
.btn-ghost{
  background:transparent !important; color:var(--grafite) !important;
  border:1px solid rgba(41,41,47,.28) !important; border-radius:999px !important; font-weight:500 !important;
}
.btn-ghost:hover{ border-color:var(--dourado) !important; color:var(--dourado-esc) !important; }
.ib-btn{ font-weight:500 !important; letter-spacing:.02em; }
/* em faixas escuras, o botão “fantasma” fica claro */
.intro-brand-dark .btn-ghost, #manifesto .btn-ghost, .pillar-banner .btn-ghost, footer .btn-ghost{
  color:var(--marfim) !important; border-color:rgba(250,247,243,.38) !important;
}
.ib-btn--outline{ color:var(--marfim) !important; border-color:rgba(250,247,243,.42) !important; }
.ib-btn--outline:hover{ border-color:var(--dourado) !important; color:#fff !important; background:rgba(174,142,104,.18) !important; }
.rounded-xl.btn-primary, .rounded-xl.btn-ghost{ border-radius:999px !important; }
#mobileMenuBtn{ border-radius:12px !important; }

/* ---------- Faixas escuras (grafite) ---------- */
.intro-brand-dark{
  background:var(--grafite) !important; color:var(--marfim) !important;
}
.intro-brand-dark h2, .intro-brand-dark .text-white{ color:#fff !important; }
.ib-lead, .ib-foot{ color:rgba(250,247,243,.80) !important; }

/* Pilares: fundo claro do título */
.bg-brand-light{ background:var(--marfim) !important; color:var(--grafite) !important; }
.bg-brand-light h2{ color:var(--grafite) !important; }

/* Banners dos pilares: véu grafite quente em vez de azul */
.pillar-banner{ background:var(--grafite) !important; }
.pillar-banner-overlay{
  background:linear-gradient(180deg, rgba(34,34,38,.86) 0%, rgba(34,34,38,.58) 45%, rgba(34,34,38,.70) 100%) !important;
}
@media (min-width:768px){
  .pillar-banner-desktop .pillar-banner-overlay{
    background:linear-gradient(90deg, rgba(34,34,38,.80) 0%, rgba(34,34,38,.45) 45%, rgba(34,34,38,.10) 100%) !important;
  }
}
.pillar-banner-title{ font-size:clamp(2.3rem,4.8vw,3.2rem) !important; }

/* Manifesto: grafite */
#apresentacao{ background:var(--grafite-2) !important; border-color:transparent !important; }
.manifesto-video-card{ background:rgba(250,247,243,.04) !important; border-color:rgba(250,247,243,.12) !important; }
.manifesto-video-kicker, .manifesto-video-points span, .manifesto-panel .mf-notes span, .manifesto-toggle{
  background:transparent !important; border-color:rgba(174,142,104,.55) !important; color:var(--marfim) !important;
}
.mf-sub .mf-accent{ color:var(--dourado) !important; }

/* ---------- Seções claras ---------- */
#areas, .areas-green{ background:var(--areia) !important; color:var(--grafite) !important; }
#experiencia, #videos{ background:var(--marfim) !important; }
.section-alt{ background:var(--areia) !important; border-color:var(--linha) !important; }

/* textos que eram claros (para fundo azul) voltam a grafite nas seções claras */
#experiencia h2, #equipe h2, #videos h2, #contato h2, #areas h2{ color:var(--grafite) !important; }
#experiencia .text-gray-700, #equipe .text-gray-700, #videos .text-gray-700, #contato .text-gray-700{ color:rgba(41,41,47,.80) !important; }
#experiencia .text-gray-600, #equipe .text-gray-600, #videos .text-gray-600, #contato .text-gray-600{ color:rgba(41,41,47,.70) !important; }
#experiencia .text-gray-500, #equipe .text-gray-500, #videos .text-gray-500, #contato .text-gray-500{ color:var(--dourado-esc) !important; }
html body #equipe > .max-w-7xl > .text-center h2{ color:var(--grafite) !important; }
#equipe > .max-w-7xl > .text-center p{ color:rgba(41,41,47,.80) !important; }
html body #equipe > .max-w-7xl > .text-center .text-gray-500{ color:var(--dourado-esc) !important; }
#contato .text-white{ color:rgba(41,41,47,.80) !important; }
#contato h2{ color:var(--grafite) !important; }

/* Cartões */
.bg-white, .doctor-card, .reel-card, #areas #espCard{
  background:#fff !important; border:1px solid var(--linha) !important; border-radius:18px !important;
}
.shadow-soft{ box-shadow:0 10px 30px rgba(41,41,47,.06) !important; }
.c-primary{ color:var(--dourado) !important; }
.doctor-card:hover, .reel-card:hover{ border-color:var(--dourado) !important; box-shadow:0 14px 30px rgba(41,41,47,.10) !important; }
.doctor-card p[style]{ color:var(--dourado-esc) !important; font-weight:500 !important; }
.reel-title{ font-family:var(--sans); font-weight:500 !important; color:var(--grafite) !important; }

/* Pílulas e botões das áreas */
.pill, .areas-green .pill{
  background:transparent !important; border:1px solid rgba(138,108,73,.45) !important; color:var(--grafite) !important; font-weight:500 !important;
}
.areas-green .esp-btn:hover{ background:#fff !important; border-color:var(--dourado) !important; }
.esp-btn.active, .areas-green .esp-btn.active{ background:var(--dourado) !important; color:#fff !important; border-color:var(--dourado) !important; }
.areas-green .areas-desc, .areas-green .areas-hint{ color:rgba(41,41,47,.78) !important; }

/* Formulário */
input, select, textarea{ border-color:var(--linha) !important; font-family:var(--sans); }
input:focus, select:focus, textarea:focus{ --tw-ring-color:rgba(174,142,104,.45) !important; }

/* ---------- Rodapé grafite ---------- */
footer.site-footer{ background:var(--grafite) !important; border-top:0 !important; color:var(--marfim); }
footer.site-footer .text-white, footer.site-footer li, footer.site-footer a{ color:rgba(250,247,243,.82) !important; }
footer.site-footer a:hover{ color:var(--dourado) !important; }
footer.site-footer .font-extrabold.mb-3{ color:var(--dourado) !important; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; font-weight:600 !important; }

/* WhatsApp flutuante mais discreto */
.wa-float{ font-weight:500 !important; box-shadow:0 10px 26px rgba(41,41,47,.22) !important; }

/* Ícones da fonte decorativa */
.font-extrabold{ font-weight:600; }

footer.site-footer .border-t{ border-color:rgba(250,247,243,.12) !important; color:rgba(250,247,243,.60) !important; font-size:.82rem; }
footer.site-footer .btn-ghost{ border-radius:999px !important; }

/* Faixa superior (acima do menu) em grafite */
body > div.text-white.text-sm[style]{ background:var(--grafite) !important; color:rgba(250,247,243,.86) !important; font-weight:300; letter-spacing:.01em; }
body > div.text-white.text-sm[style] a:hover{ color:var(--dourado) !important; }

/* Correção: o Tailwind compilado não tem md:inline-flex, por isso o botão
   "Primeira consulta" do cabeçalho nunca aparecia no computador */
@media (min-width:768px){ .md\:inline-flex{ display:inline-flex !important; } }

/* Subtítulo da equipe */
html body #equipe > .max-w-7xl > .text-center p{ color:rgba(41,41,47,.78) !important; }

/* ---------- Menu com pilares (11/2026) ---------- */
.nav-drop{position:relative}
.nav-drop > a{display:inline-flex;align-items:center;gap:6px}
.nav-drop__menu{position:absolute;left:-18px;top:100%;margin-top:14px;min-width:300px;background:#fff;border:1px solid var(--linha);border-radius:16px;box-shadow:0 18px 40px rgba(41,41,47,.12);padding:8px;display:none;z-index:100000}
.nav-drop__menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-drop:hover .nav-drop__menu,.nav-drop:focus-within .nav-drop__menu{display:block}
.nav-drop__menu a{display:block;padding:9px 12px;border-radius:10px;color:var(--grafite) !important}
.nav-drop__menu a:hover{background:var(--areia)}
.nav-drop__menu a b{display:block;font-weight:500;font-size:.92rem}
.nav-drop__menu a small{display:block;font-size:.78rem;color:var(--dourado-esc);font-weight:400}
.nav-drop__menu a.sub{padding:5px 12px 9px 26px;margin-top:-6px}
.nav-drop__menu a.sub b{font-size:.84rem;color:var(--dourado-esc)}
#mobileMenu .mm-label{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dourado-esc);margin-top:4px}
#mobileMenu .mm-sub{padding-left:14px;font-weight:400}
.pilar-ancora,#manifesto,#experiencia,#equipe,#contato,#pilares{scroll-margin-top:84px}

/* Faixa do manifesto (abaixo dos pilares) */
.manifesto-faixa .mf-eyebrow{color:var(--dourado) !important}
.manifesto-faixa .manifesto-panel .mf-title{color:#fff}
.manifesto-faixa .manifesto-panel .mf-p,.manifesto-faixa .manifesto-panel .mf-sub{color:rgba(250,247,243,.86)}
.manifesto-faixa .manifesto-panel.open{max-height:2200px}

/* Vídeo da home no celular: mostra o quadro inteiro (16:9), sem cortar o texto do vídeo */
@media (max-width:767px){
  #home > div{height:auto !important;aspect-ratio:16/9}
}