/* ==========================================================================
   MOLDURA — cabeçalho (.bbh) e rodapé (.bbf) do site
   Arquivo à parte desde 30/09/2026 (QA S16): antes ia num <style> dentro
   de partials/header.php e partials/footer.php, e voltava no HTML de toda página. Aqui fica em cache
   (1 ano, com ?v= do filemtime). Entra no FIM do <head>, depois do CSS da
   página, como antes (a ordem da cascata não mudou).
   ========================================================================== */

/* ---------- CABEÇALHO (era o <style> de partials/header.php) ---------- */
/* line-height 1.72 = o do body do styles.css (QA2 01/10/2026, VA2-06): o
   blog não carrega o styles.css e herdava 1.6 do blog.css — o botão
   "Agendar avaliação" tinha 46,4px no blog contra 48,1px no site. */
.bbh{position:sticky;top:0;z-index:60;font-family:var(--font-sans,'Manrope',system-ui,sans-serif);
  line-height:1.72;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(71,64,54,.08);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
/* O vidro mora num PSEUDO-ELEMENTO, e nao no proprio .bbh. Dois motivos, os
   dois so aparecem no Safari do iPhone:
   1) backdrop-filter no elemento o transforma em containing block, e qualquer
      descendente position:fixed passa a se ancorar nele em vez da viewport;
   2) backdrop-filter dentro de position:sticky pisca ou borra errado ao rolar
      no iOS. O translateZ(0) da camada propria e resolve.
   z-index:0 — nunca negativo: com z-index negativo o vidro some no iOS. */
.bbh::before{content:"";position:absolute;inset:0;z-index:0;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  transform:translateZ(0);pointer-events:none}
/* Escopado nos dois divs de conteudo, e nao em `> *`: o terceiro filho
   direto e o <input class="bbh-toggle">, que precisa continuar
   position:absolute — com `> *` a regra empatava com a dele e so
   vencia por ordem no arquivo. */
.bbh > .in{position:relative;z-index:1}
/* O painel do celular saiu daqui em 22/09/2026, quando virou sobreposicao:
   `.bbh > .bbh-mobile` vale (0,2,0) e ganhava de `.bbh-mobile{position:
   absolute}` por ESPECIFICIDADE — mover a regra no arquivo nao resolveria.
   O z-index:1 que ele precisava (ficar acima do vidro do ::before) foi junto
   para a propria regra do painel. */
.bbh.is-stuck{background:rgba(255,255,255,.97);border-bottom-color:rgba(71,64,54,.12);
  box-shadow:0 1px 2px rgba(36,32,27,.04),0 10px 30px -18px rgba(36,32,27,.28)}
.bbh .in{max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,.9rem + 1.8vw,3rem);
  height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px}
/* Altura CONSTANTE de propósito: encolher o header no scroll (86→70) deslocava
   todo o documento e gerava CLS. O estado .is-stuck muda só fundo/sombra/marca. */

/* --- marca: logotipo horizontal (imagens/logo-rafaela-header.webp) ---
   Versão marrom para fundo claro, 859×150 (5,73:1): monograma, fio e o nome
   em duas linhas. A altura exibida é controlada aqui; o width/height do
   <img> é lido do próprio arquivo e só preserva a proporção antes do
   carregamento (sem CLS).
   48px no desktop (≈275px de largura) e 44px na barra compacta (is-stuck).
   Abaixo de 400px, 34px (≈195px): a 320px sobram 280px entre os recuos, e
   logo + gap de 14px + botão de menu de 46px precisam caber sem empurrar o
   botão para dentro do recuo da direita (com 40px o conjunto passava 9px). */
.bbh a.marca{display:flex;align-items:center;flex-shrink:0;text-decoration:none;line-height:0}
.bbh .marca img.logo{height:48px;width:auto;display:block;
  transition:height .3s cubic-bezier(.25,1,.5,1),opacity .22s ease}
.bbh.is-stuck .marca img.logo{height:44px}
.bbh a.marca:hover img.logo{opacity:.82}
/* o .is-stuck precisa entrar aqui: ele vale 0,4,1 e vencia esta media query
   (0,3,1) — abaixo de 400px o logo CRESCIA ao rolar. */
@media (max-width:400px){.bbh .marca img.logo,.bbh.is-stuck .marca img.logo{height:34px}}

/* --- navegação --- */
.bbh nav{display:flex;align-items:center;gap:2px;align-self:stretch}
.bbh nav>a,.bbh-sub-wrap>a{position:relative;display:inline-flex;align-items:center;
  padding:10px 13px;font-size:.875rem;font-weight:600;color:var(--text-body,#777777);text-decoration:none;
  border-radius:9px;white-space:nowrap;transition:color .22s ease,background .22s ease}
/* fio marrom que cresce no hover e fica fixo na página ativa */
.bbh nav>a::after,.bbh-sub-wrap>a::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;
  height:2px;background:var(--teal-500,#a37d5a);border-radius:2px;transform:scaleX(0);transform-origin:left center;
  transition:transform .34s cubic-bezier(.25,1,.5,1)}
.bbh nav>a:hover,.bbh-sub-wrap>a:hover{color:var(--tinta,#474036)}
.bbh nav>a:hover::after,.bbh-sub-wrap:hover>a::after,.bbh-sub-wrap:focus-within>a::after{transform:scaleX(1)}
.bbh nav>a.on,.bbh-sub-wrap>a.on{color:var(--tinta,#474036)}
.bbh nav>a.on::after,.bbh-sub-wrap>a.on::after{transform:scaleX(1)}
/* TRACINHO ENTRE OS ITENS.
   Mora dentro do gap de 2px, e o gap NAO aumenta: a 1181px, a largura mais
   estreita em que este menu ainda aparece, a navegação já está no limite da
   janela — é a mesma faixa em que o painel do Blog estourava (ver .is-blog).
   O respiro já vem dos 13px de padding de cada item: sobram 14px de cada
   lado do fio.
   15px de altura, não a altura inteira: de borda a borda ele leria como
   divisão de blocos; curto, lê como separação entre irmãos.
   O ::after de cada item já é o fio marrom do hover — por isso este usa o
   ::before, que estava livre nos dois tipos de filho (<a> e .bbh-sub-wrap).
   Absoluto, então não vira item de flex dentro do .bbh-sub-wrap. */
.bbh nav>*+*::before{content:"";position:absolute;left:-1px;top:50%;
  width:1px;height:15px;margin-top:-7.5px;border-radius:1px;
  background:rgba(71,64,54,.16);pointer-events:none}

.bbh .right{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* Botão de agendar do cabeçalho: --agendar #a37d5a com rótulo branco, o
   mesmo do .btn-secondary do styles.css (29/09/2026). Hover #8c6a4b. */
.bbh .cta{display:inline-flex;align-items:center;gap:9px;background:var(--agendar,#a37d5a);color:#fff;
  font-weight:700;font-size:.875rem;padding:12px 21px;border-radius:12px;text-decoration:none;
  white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 24px -12px rgba(163,125,90,.6);
  transition:transform .16s cubic-bezier(.22,.61,.36,1),background .25s ease,box-shadow .25s ease}
.bbh .cta:hover{background:var(--agendar-hover,#8c6a4b);transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 16px 30px -14px rgba(140,106,75,.7)}
.bbh .cta:active{transform:translateY(0) scale(.985)}
.bbh .cta svg{width:15px;height:15px;flex-shrink:0;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.bbh .cta:hover svg{transform:translateX(2px)}

/* --- dropdown --- */
.bbh-sub-wrap{position:relative;align-self:stretch;display:flex;align-items:center}
.bbh-sub-wrap>a{gap:6px}
.bbh-sub-wrap>a .cv{width:11px;height:11px;transition:transform .25s cubic-bezier(.25,1,.5,1);opacity:.65}
.bbh-sub-wrap:hover>a .cv,.bbh-sub-wrap:focus-within>a .cv{transform:rotate(180deg);opacity:1}
/* O painel do BLOG abre para a esquerda: "Blog" e o ultimo item da navegacao,
   e a 1181px — a largura mais estreita em que o menu horizontal ainda aparece
   — o painel ancorado a esquerda chegava a 1178px contra 1166px de area util.
   Nao aparecia barra de rolagem porque html,body tem overflow-x:hidden: o
   canto arredondado da direita era simplesmente CORTADO, sem sintoma. */
.bbh-sub-wrap.is-blog>.bbh-sub{left:auto;right:6px}
.bbh-sub{position:absolute;top:calc(100% - 6px);left:6px;min-width:322px;background:#fff;
  border:1px solid rgba(71,64,54,.1);border-radius:16px;
  box-shadow:0 4px 8px rgba(36,32,27,.04),0 26px 56px -20px rgba(36,32,27,.26);
  padding:10px;display:flex;flex-direction:column;gap:5px;z-index:70;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .28s cubic-bezier(.25,1,.5,1),visibility 0s .28s}
.bbh-sub-wrap:hover .bbh-sub,.bbh-sub-wrap:focus-within .bbh-sub{
  opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
/* Esc fecha o submenu aberto por hover/foco (WCAG 1.4.13, "dispensável");
   o reveal.js tira a classe quando o ponteiro ou o foco saem do item. */
.bbh-sub-wrap.bbh-fechado .bbh-sub,.bbh-sub-wrap.bbh-fechado .bbh-sub2{
  opacity:0!important;visibility:hidden!important;transition:none!important}
.bbh-sub a{position:relative;display:flex;align-items:center;gap:10px;padding:11px 14px;
  font-size:.875rem;font-weight:600;color:var(--text-body,#777777);border-radius:10px;text-decoration:none;
  line-height:1.35;transition:background .2s ease,color .2s ease,padding-left .24s cubic-bezier(.25,1,.5,1)}
/* ponto marrom do item em hover/ativo; o realce é o creme --papel-2 */
.bbh-sub a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal-500,#a37d5a);
  flex-shrink:0;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .24s cubic-bezier(.25,1,.5,1)}
.bbh-sub a:hover,.bbh-sub a.on{background:var(--papel-2,#f4ece0);color:var(--tinta,#474036)}
.bbh-sub a:hover::before,.bbh-sub a.on::before{opacity:1;transform:scale(1)}
/* FIO ENTRE AS LINHAS DO PAINEL. Fica NO VÃO, a 3px do topo do item: com o
   gap de 5px ele nunca encosta na pilula arredondada do hover. Colado na
   borda, cruzaria o canto de 10px do realce.
   .08 aqui contra .16 do tracinho vertical: este atravessa o painel inteiro,
   e com a mesma densidade o painel viraria uma grade. */
.bbh-sub>*+*::after{content:"";position:absolute;top:-3px;left:14px;right:14px;
  height:1px;background:rgba(71,64,54,.08);pointer-events:none}
/* Onde já existe divisor — o "Ver todos os artigos" do Blog tem
   border-bottom próprio, mais forte de propósito — o fio novo sai, para não
   virar linha dupla. */
.bbh-sub a.all+*::after{display:none}
.bbh-sub a.all{color:var(--teal-acao,#a37d5a);font-weight:700;border-bottom:1px solid rgba(71,64,54,.08);
  border-radius:10px 10px 0 0;margin-bottom:2px;padding-bottom:13px}

/* --- terceiro nível: seções da página da área, abrindo à direita ---
   Só existe para as áreas que declaram 'secoes' em areas-data.php. Abre no
   hover E no focus-within: menu que só responde ao mouse é inacessível por
   teclado. Sem gap entre o item e o painel — qualquer folga faria o menu
   fechar no caminho do cursor. */
.bbh-sub-item{position:relative}
.bbh-sub-item>a{padding-right:30px}
.bbh-sub-item>a .cv2{position:absolute;right:12px;top:50%;width:9px;height:9px;
  margin-top:-4.5px;opacity:.5;transition:opacity .2s ease,transform .24s cubic-bezier(.25,1,.5,1)}
.bbh-sub-item:hover>a .cv2,.bbh-sub-item:focus-within>a .cv2{opacity:1;transform:translateX(2px)}
.bbh-sub2{position:absolute;left:100%;top:-10px;min-width:266px;background:#fff;
  border:1px solid rgba(71,64,54,.1);border-radius:16px;
  box-shadow:0 4px 8px rgba(36,32,27,.04),0 26px 56px -20px rgba(36,32,27,.26);
  padding:10px;display:flex;flex-direction:column;gap:5px;z-index:80;
  opacity:0;visibility:hidden;transform:translateX(-6px);
  transition:opacity .2s ease,transform .26s cubic-bezier(.25,1,.5,1),visibility 0s .26s}
.bbh-sub-item:hover>.bbh-sub2,.bbh-sub-item:focus-within>.bbh-sub2{
  opacity:1;visibility:visible;transform:translateX(0);transition-delay:0s}
/* Mesmo fio do primeiro nível, no painel das seções. O seletor precisa ser
   >a+a e não >*+*: o primeiro filho é o rótulo "IR PARA", que já tem o seu
   próprio border-bottom. */
.bbh-sub2>a+a::after{content:"";position:absolute;top:-3px;left:14px;right:14px;
  height:1px;background:rgba(71,64,54,.08);pointer-events:none}
.bbh-sub2 .rot{padding:6px 14px 9px;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted,#777777);border-bottom:1px solid rgba(71,64,54,.08);margin-bottom:2px}
/* a partir de 1180px a janela já não tem folga à direita: abre para a esquerda */
@media (max-width:1240px){
  .bbh-sub2{left:auto;right:100%;transform:translateX(6px)}
  .bbh-sub-item:hover>.bbh-sub2,.bbh-sub-item:focus-within>.bbh-sub2{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .bbh-sub2{transition:opacity .01s,visibility 0s;transform:none}
  .bbh-sub-item:hover>.bbh-sub2,.bbh-sub-item:focus-within>.bbh-sub2{transform:none}
}

/* --- menu mobile (CSS puro: checkbox + details) --- */
.bbh-toggle{display:none}
/* padding/font/appearance: com JavaScript o <label> vira um <button> de
   verdade (reveal.js, QA 30/09/2026) — sem isto o botão herdaria o padding e
   a fonte do navegador e mudaria de tamanho */
.bbh-burger{display:none;width:46px;height:46px;border:1px solid rgba(71,64,54,.14);border-radius:12px;
  background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;
  padding:0;font:inherit;color:inherit;-webkit-appearance:none;appearance:none;
  transition:border-color .22s ease,background .22s ease}
.bbh-burger:hover{border-color:rgba(71,64,54,.3);background:var(--papel-2,#f4ece0)}
.bbh-burger span{display:block;width:18px;height:2px;background:var(--tinta,#474036);border-radius:2px;
  transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .18s ease}
.bbh-toggle:checked~.in .bbh-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.bbh-toggle:checked~.in .bbh-burger span:nth-child(2){opacity:0}
.bbh-toggle:checked~.in .bbh-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* visibility:hidden e o que tira o painel fechado da ordem de tabulacao e da
   arvore de acessibilidade — so altura 0 + opacity 0 deixava 7 paradas de
   tabulacao invisiveis em toda pagina. Mesmo padrao ja usado no .bbh-sub. */
/* SOBREPOSICAO desde 22/09/2026. Antes o painel era item de grade animando
   grid-template-rows de 0fr para 1fr — e como o cabecalho e sticky e ocupa
   espaco no fluxo, cada quadro dessa animacao reposicionava o documento
   inteiro embaixo. Sessenta recalculos de layout da pagina toda em 380ms:
   era essa a "travada". Encurtar a animacao nao resolveria, porque o custo e
   POR QUADRO.
   Agora so opacity e transform animam — as duas propriedades que o navegador
   resolve na composicao, sem recalcular layout nenhum. A pagina embaixo fica
   parada e o painel desliza por cima. */
.bbh-mobile{position:absolute;top:100%;left:0;right:0;z-index:1;background:#fff;
  border-top:1px solid rgba(71,64,54,.08);
  box-shadow:0 24px 44px -26px rgba(36,32,27,.5);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .2s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
.bbh-toggle:checked~.bbh-mobile{opacity:1;visibility:visible;transform:none;
  transition:opacity .18s ease,transform .34s cubic-bezier(.22,1,.36,1),visibility 0s}
/* A altura REAL disponivel, nao 74dvh fixos: com o cabecalho de 70px no
   celular, num iPhone de 844px os 74dvh desperdicavam ~150px — o menu rolava
   por dentro tendo tela sobrando. O dvh (e nao vh) porque no iOS o vh e
   medido contra a viewport GRANDE, ignorando a barra de endereco; o vh fica
   de reserva para navegador sem dvh. */
.bbh-mobile-in{min-height:0;overflow-y:auto;overscroll-behavior:contain;
  max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);
  display:flex;flex-direction:column;padding:10px clamp(1.25rem,.9rem + 1.8vw,3rem) 18px}
/* Cortina: fecha o menu ao tocar fora, sem uma linha de JS — e um <label> do
   mesmo checkbox. Fica ANTES do painel no HTML e sem z-index, entao pinta
   abaixo dele e abaixo da barra do cabecalho, que continua legivel. */
.bbh-scrim{position:fixed;inset:0;background:rgba(36,32,27,.4);cursor:pointer;
  opacity:0;visibility:hidden;transition:opacity .26s ease,visibility 0s linear .26s;
  /* sem rolar a página por trás da cortina (QA 29/09/2026) */
  touch-action:none;overscroll-behavior:contain}
.bbh-toggle:checked~.bbh-scrim{opacity:1;visibility:visible;transition:opacity .26s ease,visibility 0s}
/* o fundo branco é do .bbh (raiz do empilhamento) e ficava sob a cortina: a
   barra escurecia e o logo perdia contraste. A faixa .in ganha fundo próprio. */
.bbh-toggle:checked~.in{background:#fff}
/* ...e de ponta a ponta: acima de 1180px (tela de toque larga, que também
   usa o hambúrguer — QA 29/09/2026) o .in tem max-width e as laterais da
   barra ficavam cinza sob a cortina. A sombra estende o branco para os
   lados; o clip-path corta o que passaria para cima e para baixo. A lista
   do painel fica na mesma coluna de 1180px do logo. */
@media (min-width:1181px){
  .bbh-toggle:checked~.in{box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax)}
  .bbh-mobile-in{max-width:1180px;margin:0 auto}
}
/* Acima de 1180px o painel e a cortina saem do documento. O checkbox fica
   display:none nessa faixa, mas o ESTADO dele sobrevive a um redimensionamento:
   abrir o menu a 800px e alargar a janela deixava o painel marcado como aberto.
   Antes ele so empurrava o conteudo; agora, como e sobreposicao, cobriria a
   pagina. O display:none corta os dois casos.
   and (hover:hover) (QA 29/09/2026): tablet em paisagem com toque e 1180px
   ou mais usa o hambúrguer (ver o bloco max-width:1179px), então o painel
   precisa existir para ele. */
@media (min-width:1180px) and (hover:hover){.bbh-scrim,.bbh-mobile{display:none}}
/* 11px de padding e .94rem, contra 13px e .97rem: sao varios itens e
   precisam caber sem rolagem. Ver tambem o bloco (hover:none)
   logo abaixo, que e quem manda na altura final no dedo. */
/* line-height DECLARADO: sem ele o item herdava ~1,6 do corpo e a altura
   final saia do padding + linha (46px), ignorando o min-height. Com 1.35, o
   min-height do bloco (hover:none) volta a ser quem decide, e os tres
   degraus 42/38/36 sao o que aparece na tela. */
.bbh-mobile a{padding:10px 13px;font-weight:600;color:var(--text-body,#777777);text-decoration:none;border-radius:10px;
  font-size:.94rem;line-height:1.35;transition:background .2s ease,color .2s ease}
.bbh-mobile a.on{background:var(--papel-2,#f4ece0);color:var(--tinta,#474036)}
@media (hover:hover){.bbh-mobile a:hover{background:var(--papel-2,#f4ece0);color:var(--tinta,#474036)}}
/* No dedo: sem o retangulo cinza do iOS, com retorno proprio no :active, e com
   alvo de 44px (a WCAG 2.2 pede 24, a Apple recomenda 44). O bloco e
   (hover:none) para nao engordar nada no mouse. */
/* Alturas em tres degraus: 42 / 38 / 36. A WCAG 2.5.8 pede 24x24 e os tres
   passam com folga — e o alvo real e a LINHA INTEIRA, que tem a largura do
   painel. Os 44px uniformes de antes eram a recomendacao da Apple aplicada a
   todos os niveis, e somavam altura justamente onde ha mais itens.
   Os seletores sao longos de proposito: `.bbh-mobile a` tambem casa os itens
   de submenu, e com a mesma especificidade quem vence e quem vem depois. */
@media (hover:none){
  .bbh a,.bbh label,.bbh button{-webkit-tap-highlight-color:transparent}
  .bbh-mobile a{min-height:42px;display:flex;align-items:center}
  .bbh-mobile .bbh-mlist a{min-height:38px}
  .bbh-mobile .bbh-mlist2 a{min-height:36px}
  /* No toque o texto vai para a tinta, como no hover: o cinza secundário
     #6b675a dos subitens cai para 4,4:1 sobre o --papel-3 e reprovaria
     enquanto o dedo está no item; a tinta dá 9,4:1. O CTA (.bbh-mcta) e o
     "Ver a página completa" (.ir) vêm depois no arquivo e mantêm a cor
     própria. */
  .bbh-mobile a:active{background:var(--papel-3,#ebe1d3);color:var(--tinta,#474036)}
  .bbh-burger{min-width:44px;min-height:44px}
  .bbh .marca{min-height:44px;display:inline-flex;align-items:center}
}
.bbh-mobile details summary{padding:10px 13px;min-height:42px;font-weight:600;color:var(--text-body,#777777);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:.94rem;line-height:1.35;
  border-radius:10px;transition:background .2s ease,color .2s ease}
.bbh-mobile details[open]>summary{color:var(--tinta,#474036)}
.bbh-mobile details summary:hover{background:var(--papel-2,#f4ece0)}
.bbh-mobile details summary::-webkit-details-marker{display:none}
.bbh-mobile details summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--teal-500,#a37d5a);
  border-bottom:2px solid var(--teal-500,#a37d5a);transform:rotate(45deg) translateY(-2px);
  transition:transform .28s cubic-bezier(.25,1,.5,1)}
/* `>` e nao descendente: com o seletor solto, abrir "Procedimentos" fazia
   `details[open] summary` casar TAMBEM os sumarios aninhados, e as setinhas
   das areas com secoes (as que tem submenu) apontavam para cima com as
   listas delas fechadas. */
.bbh-mobile details[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
/* FIO ENTRE OS ITENS: o gap solto de 1px nao lia como lista. O fio e rgba .07 — discreto o bastante para nao
   competir com o trilho bege da borda esquerda, que e quem marca o
   nivel. overflow:hidden porque o reveal.js anima a altura deste bloco.
   Subitens no cinza secundario #6b675a (5,7:1 no branco). */
.bbh-mlist{display:flex;flex-direction:column;padding:2px 0 6px 10px;overflow:hidden;
  border-left:2px solid #efe4d6;margin:2px 0 3px 13px}
.bbh-mlist>*+*{border-top:1px solid rgba(71,64,54,.07)}
.bbh-mlist a{font-size:.875rem;line-height:1.35;font-weight:600;padding:8px 11px;color:var(--text-muted,#777777);border-radius:8px}
/* segundo nível no celular: as seções da página da área */
.bbh-msub>summary{font-size:.875rem!important;line-height:1.35;font-weight:600;color:var(--text-muted,#777777);
  min-height:38px!important;padding:8px 11px!important}
.bbh-msub>summary::after{width:8px;height:8px}
.bbh-mlist2{display:flex;flex-direction:column;padding:2px 0 5px 9px;overflow:hidden;
  border-left:2px solid #efe4d6;margin:2px 0 3px 11px}
.bbh-mlist2>*+*{border-top:1px solid rgba(71,64,54,.06)}
.bbh-mlist2 a{font-size:.83rem;line-height:1.35;font-weight:600;padding:7px 11px;color:var(--text-muted,#777777);
  border-radius:8px;text-decoration:none}
.bbh-mlist2 a:hover,.bbh-mlist2 a.on{background:var(--papel-2,#f4ece0);color:var(--tinta,#474036)}
.bbh-mlist2 a.ir{color:var(--teal-acao,#a37d5a);font-weight:700}
.bbh-mobile .bbh-msep{height:1px;background:rgba(71,64,54,.08);margin:10px 2px 2px}
/* CTA do painel do celular: o mesmo botão do desktop */
.bbh-mobile a.bbh-mcta{margin-top:10px;background:var(--agendar,#a37d5a);color:#fff;font-weight:700;
  justify-content:center;text-align:center;
  border-radius:12px;padding:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 24px -12px rgba(163,125,90,.6)}
.bbh-mobile a.bbh-mcta:hover{background:var(--agendar-hover,#8c6a4b);color:#fff}
/* foco no marrom: 6,7:1 no branco, acima dos 3:1 de indicador */
.bbh a:focus-visible,.bbh summary:focus-visible,.bbh label:focus-visible{
  outline:2px solid var(--teal-700,#a37d5a);outline-offset:3px;border-radius:10px}
.bbh a.cta:focus-visible,.bbh-mobile a.bbh-mcta:focus-visible{border-radius:12px}

@media(prefers-reduced-motion:reduce){
  .bbh,.bbh *{transition:none!important}
  .bbh .cta:hover{transform:none}
}
/* 1180, não 1120: entre 1120 e ~1171px o menu voltava, mas o botão de
   agendar saía pela direita, e com overflow-x:hidden não havia como
   alcançá-lo.
   Também em tela de toque larga (QA 29/09/2026): num tablet em paisagem
   (1180px ou mais, sem hover) os submenus do desktop só abrem por hover ou
   foco, e Procedimentos e Blog ficavam inalcançáveis ao dedo. */
@media (max-width:1179px), (hover:none) and (pointer:coarse){
  .bbh nav{display:none}
  .bbh-burger{display:flex}
  /* display:none tiraria o checkbox da ordem de foco e o <label> não é focável:
     aqui ele fica focável, porém invisível. */
  /* position:FIXED (QA 29/09/2026): absolute dentro do cabeçalho sticky fazia
     o Chrome rolar a página ~470px para "mostrar" o checkbox a cada toque no
     hambúrguer (o toque no <label> dá foco ao checkbox). Fixo, ele está
     sempre na tela e o foco não rola nada. */
  .bbh-toggle{display:block;position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
  .bbh-toggle:focus-visible+.in .bbh-burger,
  .bbh-burger:focus-visible{outline:2px solid var(--teal-700,#a37d5a);outline-offset:3px}
}
@media(max-width:680px){
  .bbh .cta{display:none}
  .bbh .in{height:70px;gap:14px}
}

/* ---------- RODAPÉ (era o <style> de partials/footer.php) ---------- */
/* ============================================================
   RODAPÉ — sistema visual (revisão de 29/09/2026, pedido do Marco:
   "minimalista, sofisticado, sem poluir"; ícones sem sombra; itens com
   respiro e linha discreta; sem buracos; cores, tamanhos e tipografia
   padronizados).

   Escala única (Manrope em tudo; a Marcellus fica para os títulos de
   conteúdo do site):
     rótulo de coluna  .72rem 700, caixa alta, .16em, creme
     texto principal   .9rem 500, --tx-1 (branco .84 ≈ 8,4:1 no oliva)
     texto de apoio    .8rem 400, --tx-2 (branco .64 ≈ 5,9:1)
     base legal        .75rem, --tx-2
   Linhas: --linha (.09) entre itens; --linha-bloco (.12) entre blocos.
   Acento: dourado #a37d5a CHAPADO nos chips (sem sombra, sem brilho), traço
   creme por cima (3,4:1, acima dos 3:1 de elemento não textual); dourado
   claro #c8a07a (4,3:1) nas setas e hovers de texto. Foco: bege #D7C4B3.

   Desktop em TRÊS colunas de altura parecida — marca e contato; os links
   (procedimentos + navegação, empilhados); local de atendimento. Em quatro
   colunas, procedimentos e navegação eram curtas e deixavam vãos embaixo.
   ============================================================ */
.bbf{--ouro:#a37d5a;--ouro-claro:#c8a07a;--creme:#F9F2E8;
  --tx-1:rgba(255,255,255,.84);--tx-2:rgba(255,255,255,.64);
  --linha:rgba(255,255,255,.09);--linha-bloco:rgba(255,255,255,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
  position:relative;isolation:isolate;background:var(--azul-500,#474036);color:var(--tx-2);
  /* fio na emenda + sombra interna no topo: o rodapé lê como um plano recuado
     sob a faixa escura que vem antes (mesmo oliva) */
  border-top:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 22px 34px -22px rgba(0,0,0,.42);
  font-family:var(--font-sans,'Manrope',system-ui,sans-serif);font-size:.9rem;line-height:1.65}
/* grão + halo dourado bem diluído (decorativos) */
.bbf::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;
  mix-blend-mode:overlay;background-size:140px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
.bbf::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 70% at 88% 0%,rgba(163,125,90,.18) 0%,rgba(163,125,90,0) 60%)}
.bbf a{color:inherit;text-decoration:none}

.bbf .in{max-width:1180px;margin:0 auto;padding:clamp(3.25rem,5vw,4.5rem) clamp(1.25rem,.9rem + 1.8vw,3rem) 3rem;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4.5vw,72px)}
.bbf .in>*{min-width:0}
.bbf .bloco+.bloco{margin-top:36px}
.bbf .c-marca .bloco{margin-top:36px}

/* marca: logotipo creme (859×150). object-fit:contain para só encolher, sem
   espremer, abaixo de ~350px de tela */
.bbf .marca{display:inline-block;max-width:100%;margin-bottom:20px;line-height:0}
.bbf .marca img{height:50px;width:auto;max-width:100%;display:block;object-fit:contain;object-position:left center;transition:opacity .22s ease}
.bbf a.marca:hover img{opacity:.82}
.bbf .sobre{margin:0 0 12px;font-size:.9rem;line-height:1.7;max-width:40ch;color:var(--tx-2)}
.bbf .rt{margin:0;font-size:.8rem;line-height:1.6;color:var(--tx-2)}

/* rótulo de coluna (Manrope: o styles.css põe .bbf h2 em var(--font-sans);
   no blog o h2 herda o Manrope do .bbf) */
.bbf h2{display:flex;align-items:center;gap:11px;margin:0 0 10px;color:var(--creme);
  font-size:.72rem;font-weight:700;line-height:1.3;letter-spacing:.16em;text-transform:uppercase}
/* chip dourado chapado, traço creme — sem sombra (pedido do Marco) */
.bbf h2 .ic,.bbf .ci,.bbf .mapa-face .pin{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  background:var(--ouro);color:var(--creme)}
.bbf h2 .ic{width:24px;height:24px;border-radius:7px}
.bbf h2 .ic svg{width:13px;height:13px;display:block}

/* LINHAS DE LISTA — procedimentos, navegação e contato usam a mesma linha:
   10px de respiro em cima e embaixo, fio discreto entre os itens, texto
   principal à esquerda e seta dourada à direita que surge no hover. A linha
   inteira é o alvo (≥ 42px, acima dos 24px da WCAG 2.5.8). */
.bbf .lst,.bbf .ctt{display:flex;flex-direction:column}
.bbf .lst a,.bbf .ct{display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--tx-1);
  font-size:.9rem;font-weight:500;line-height:1.45;transition:color .22s ease}
.bbf .lst a+a,.bbf .ct+.ct{border-top:1px solid var(--linha)}
.bbf .lst .lt{flex:1;min-width:0;overflow-wrap:anywhere}
.bbf .sg{flex-shrink:0;width:14px;height:14px;margin-left:auto;color:var(--ouro-claro);opacity:0;
  transform:translateX(-5px);transition:opacity .25s ease,transform .3s var(--ease)}
.bbf .lst a:hover,.bbf .ct:hover{color:#fff}
.bbf .lst a:hover .sg,.bbf .ct:hover .sg,.bbf .lst a:focus-visible .sg,.bbf .ct:focus-visible .sg{opacity:1;transform:none}

/* contato: chip do canal + nome e detalhe */
.bbf .ct .ci{width:30px;height:30px;border-radius:8px}
.bbf .ct .ci svg{width:14px;height:14px;display:block}
.bbf .ct .ctx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.bbf .ct b{font-weight:500;font-size:.9rem;color:inherit}
.bbf .ct small{font-size:.8rem;color:var(--tx-2);overflow-wrap:anywhere;transition:color .22s ease}
.bbf .ct:hover small{color:var(--ouro-claro)}

/* LOCAL DE ATENDIMENTO */
/* overflow:visible (QA 29/09/2026): o .un{overflow:hidden} do cartão de
   unidade (styles.css §10.8, /agendamento) vazava para cá e cortava o anel
   de foco do "Traçar rota" */
.bbf .un{padding-top:10px;font-size:.9rem;line-height:1.6;overflow:visible}
.bbf .un strong{display:block;font-weight:600;color:var(--creme);margin-bottom:4px;font-size:.9rem}
.bbf .un>span{display:block;font-size:.8rem;line-height:1.65;color:var(--tx-2)}
.bbf .nota{margin:14px 0 0;font-size:.8rem;line-height:1.6;color:var(--tx-2)}

/* MAPA — fachada primeiro, Google só depois do toque (reveal.js troca o
   botão pelo <iframe>): nada de terceiro carrega antes do pedido. Malha de
   ruas em CSS sobre #312c25 (até 29/09/2026 era o oliva antigo #2d2f21). */
.bbf .mapa{position:relative;margin-top:16px;border-radius:12px;overflow:hidden;
  border:1px solid var(--linha-bloco);background:#312c25;transition:border-color .25s ease}
.bbf .mapa:hover{border-color:rgba(200,160,122,.4)}
.bbf .mapa::before{content:"";position:absolute;inset:-30%;pointer-events:none;opacity:.5;transform:rotate(-22deg);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 34px),
                   repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 46px)}
.bbf .mapa-face{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;
  padding:0;background:transparent;border:0;color:var(--tx-1);font:inherit;text-align:left;cursor:pointer}
.bbf .mapa-face:focus-visible{outline:2px solid var(--teal-400,#D7C4B3);outline-offset:-4px}
/* vista: duas avenidas sobre a malha e o alfinete com o raio tracejado */
.bbf .mapa-face .mv{position:relative;display:flex;align-items:center;justify-content:center;height:96px;overflow:hidden}
.bbf .mapa-face .mv::before,.bbf .mapa-face .mv::after{content:"";position:absolute;background:rgba(255,255,255,.06)}
.bbf .mapa-face .mv::before{left:-10%;right:-10%;top:60%;height:6px;transform:rotate(-7deg)}
.bbf .mapa-face .mv::after{top:-20%;bottom:-20%;left:64%;width:5px;transform:rotate(16deg)}
.bbf .mapa-face .raio{position:absolute;width:76px;height:76px;border-radius:50%;
  border:1px dashed rgba(200,160,122,.42);transition:transform .6s var(--ease),border-color .3s ease}
.bbf .mapa-face .pin{position:relative;width:34px;height:34px;border-radius:50%;transition:transform .3s var(--ease)}
.bbf .mapa-face .pin svg{width:16px;height:16px;display:block}
.bbf .mapa-face:hover .pin{transform:translateY(-2px)}
.bbf .mapa-face:hover .raio{transform:rotate(45deg) scale(1.06);border-color:rgba(200,160,122,.7)}
/* faixa de baixo: rótulo e seta sobre um véu escuro, para ler bem sobre a malha */
.bbf .mapa-face .mr{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-top:1px solid var(--linha);background:rgba(0,0,0,.16);transition:background .25s ease}
.bbf .mapa-face:hover .mr{background:rgba(0,0,0,.24)}
.bbf .mapa-face .tx{min-width:0;flex:1}
.bbf .mapa-face .tx b{display:block;font-size:.9rem;font-weight:600;color:var(--creme);line-height:1.35}
.bbf .mapa-face .tx small{display:block;font-size:.8rem;color:var(--tx-2);line-height:1.4}
.bbf .mapa-face .seta{flex-shrink:0;width:14px;height:14px;color:var(--ouro-claro);transition:transform .3s var(--ease)}
.bbf .mapa-face:hover .seta{transform:translateX(3px)}
.bbf .mapa iframe{display:block;width:100%;height:190px;border:0;filter:saturate(.9)}
/* o .un .mapa do /agendamento (styles.css) não pode vazar para cá */
.bbf .un .mapa{min-height:0;display:block}
.bbf .un .mapa iframe{min-height:0}
.bbf .mapa.aberto:focus-within{box-shadow:inset 0 0 0 2px var(--teal-400,#D7C4B3)}
.bbf .mapa.aberto::before{display:none}
.bbf .mapa-rota{display:inline-flex;align-items:center;gap:7px;margin-top:12px;min-height:24px;
  font-size:.8rem;font-weight:600;color:var(--tx-1);transition:color .22s ease}
.bbf .mapa-rota svg{width:13px;height:13px;color:var(--ouro-claro);transition:transform .3s var(--ease)}
.bbf .mapa-rota:hover{color:#fff}
.bbf .mapa-rota:hover svg{transform:translate(2px,-2px)}

/* botão de agendar: o mesmo do site (#a37d5a, rótulo branco, borda bege a 70%) */
.bbf .agendar{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:22px;
  padding:13px 24px;background:var(--agendar,#a37d5a);color:#fff;font-weight:700;font-size:.9rem;
  border:2px solid rgba(215,196,179,.7);border-radius:12px;
  transition:transform .18s var(--ease),background .25s ease,border-color .25s ease}
.bbf .agendar svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.bbf .agendar:hover{background:var(--agendar-hover,#8c6a4b);border-color:rgba(215,196,179,.9);color:#fff;transform:translateY(-2px)}
.bbf .agendar:hover svg{transform:translateX(3px)}

/* foco por teclado: bege (o dourado daria 2,7:1 no oliva) */
.bbf a:focus-visible{outline:2px solid var(--teal-400,#D7C4B3);outline-offset:3px;border-radius:4px}
.bbf a.agendar:focus-visible{border-radius:12px}
.bbf .lst a:focus-visible,.bbf a.ct:focus-visible{outline-offset:-2px;border-radius:6px}

/* toque: sem hover, a seta fica visível e discreta; a linha já tem ≥ 42px */
@media (hover:none){
  .bbf a{-webkit-tap-highlight-color:transparent}
  .bbf .sg{opacity:.5;transform:none}
  .bbf .lst a:active,.bbf .ct:active{color:#fff}
  .bbf .legais a{min-height:36px;display:inline-flex;align-items:center}
  /* "Traçar rota" com alvo de 44px (QA2 01/10/2026, C7) sem mexer no
     desenho: os 20px a mais saem da margem de cima (12 → 2) e da de baixo
     (-10), e o texto fica no mesmo lugar */
  .bbf .mapa-rota{min-height:44px;margin-top:2px;margin-bottom:-10px}
}

/* BASE LEGAL */
.bbf .bottom{border-top:1px solid var(--linha-bloco)}
.bbf .bottom .bin{max-width:1180px;margin:0 auto;padding:26px clamp(1.25rem,.9rem + 1.8vw,3rem) 30px}
.bbf .legal{margin:0;font-size:.75rem;line-height:1.7;color:var(--tx-2)}
.bbf .legais{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px 24px;font-size:.8rem}
.bbf .legais a{font-weight:600;color:var(--tx-1);transition:color .22s ease}
.bbf .legais a:hover{color:var(--ouro-claro)}
.bbf .assina{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--linha);font-size:.75rem;
  display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;color:var(--tx-2)}
.bbf .assina a{font-weight:600;color:var(--tx-1);text-decoration:underline;text-decoration-color:rgba(200,160,122,.6);
  text-underline-offset:3px;transition:color .22s ease}
.bbf .assina a:hover{color:var(--ouro-claro)}

/* TABLET: marca e local lado a lado (os dois blocos altos); embaixo, os
   links em duas colunas (procedimentos | navegação), abertos por um fio */
@media(max-width:1040px){
  .bbf .in{grid-template-columns:1fr 1fr;gap:44px 48px;grid-template-areas:"marca local" "links links"}
  .bbf .c-marca{grid-area:marca}.bbf .c-local{grid-area:local}
  .bbf .c-links{grid-area:links;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;
    padding-top:36px;border-top:1px solid var(--linha-bloco)}
  .bbf .c-links .bloco+.bloco{margin-top:0}
}
/* CELULAR: marca e contato, depois o local com mapa e agendar, e só então
   os links. O fio entre blocos segue a ordem do HTML (*+*): a marca é a
   primeira também na tela. */
@media(max-width:620px){
  .bbf .in{grid-template-columns:1fr;gap:0;padding-top:2.75rem;grid-template-areas:none}
  .bbf .in>*{grid-area:auto}
  .bbf .in>*+*{border-top:1px solid var(--linha-bloco);margin-top:32px;padding-top:32px}
  .bbf .c-marca{order:1}.bbf .c-local{order:2}.bbf .c-links{order:3}
  .bbf .c-links{display:block}
  .bbf .c-links .bloco+.bloco{margin-top:32px}
  .bbf .agendar{width:100%;padding:15px 24px;font-size:.95rem}
  .bbf .sobre{max-width:none}
  .bbf .marca img{height:46px}
}
@media(prefers-reduced-motion:reduce){
  .bbf *{transition:none!important}
  .bbf .agendar:hover{transform:none}
}

/* ==========================================================================
   TRANSIÇÃO ENTRE PÁGINAS (01/10/2026, pedido da médica: "o corte entre uma
   página e outra está muito seco").
   Transição de documento (@view-transition): a página que sai esmaece até
   um fundo creme suave e a que entra aparece por cima dele. O cabeçalho
   fica parado (ganha o nome bb-cabecalho só durante a troca, por
   partials/transicao.php). Chrome/Edge 126+ e Safari 18.2+; os outros
   navegadores trocam de página como antes. Mesmo bloco, copiado, nas
   páginas autônomas: biolink.php, pre-agendamento-confirmado.php e 404.php.
   ========================================================================== */
@view-transition{navigation:auto}
::view-transition{background:radial-gradient(120% 85% at 50% 0%,#fffdf9 0%,#F9F2E8 72%)}
::view-transition-old(root){animation:bbvt-sai .24s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:bbvt-entra .44s cubic-bezier(.22,.61,.36,1) .12s both}
::view-transition-group(bb-cabecalho){animation-duration:.36s}
@keyframes bbvt-sai{to{opacity:0}}
@keyframes bbvt-entra{from{opacity:0}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}