/* Camada comum a todas as paginas da direcao B (Verde Noturno): menu em tela
   cheia, barra fixa de agendamento no mobile (B8), mapa e ajustes de leitura. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#0E1712}
body{overflow-x:clip}
img{max-width:100%}
.bd{font-family:'Bodoni Moda',Didot,'Times New Roman',serif;font-optical-sizing:auto}
.lbl{font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
:focus-visible{outline:2px solid #C9A96A;outline-offset:3px}

/* botao "Menu" do cabecalho */
.b-open{justify-self:start;display:flex;align-items:center;gap:14px;background:none;border:0;color:#EEE8DC;cursor:pointer;padding:10px 0;min-height:44px;font:inherit}

/* ---------- menu em tela cheia ---------- */
.b-menu:not([hidden]){position:fixed;inset:0;z-index:80;background:#0E1712;color:#EEE8DC;display:flex;flex-direction:column;overflow-y:auto;font-family:'Hanken Grotesk',system-ui,sans-serif}
.b-menu-top,.b-menu-body,.b-menu-foot{max-width:1360px;width:100%;box-sizing:border-box;margin:0 auto;padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px)}
.b-menu-top{padding-top:32px;padding-bottom:32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.b-menu-top img{display:block;width:44px;height:auto}
.b-close{justify-self:start;display:flex;align-items:center;gap:14px;background:none;border:0;color:#EEE8DC;cursor:pointer;padding:10px 0;min-height:44px}
.b-menu-cta{justify-self:end;padding:15px 26px;border:1px solid #C9A96A;border-radius:999px;color:#C9A96A;text-decoration:none;transition:background-color .5s cubic-bezier(.77,0,.18,1),color .5s cubic-bezier(.77,0,.18,1)}
.b-menu-cta:hover{background:#C9A96A;color:#0E1712}
.b-menu-body{flex-grow:1;padding-top:24px;padding-bottom:40px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.b-menu nav{display:flex;flex-direction:column;gap:4px}
.b-mlink{display:flex;align-items:baseline;gap:28px;text-decoration:none;color:#EEE8DC;font-size:clamp(40px,5.4vw,76px);line-height:1.12;font-weight:400;transition:color .4s,padding-left .6s cubic-bezier(.77,0,.18,1)}
.b-mlink .lbl{color:#C9A96A;width:28px;flex:none}
.b-mlink:hover,.b-mlink[aria-current="page"]{color:#C9A96A}
.b-mlink:hover{padding-left:24px}
.b-menu-img{position:relative;height:min(640px,62vh);overflow:hidden}
.b-menu-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.b-menu-img img.on{opacity:1}
.b-menu-foot{padding-top:28px;padding-bottom:36px;display:flex;gap:16px 48px;flex-wrap:wrap;border-top:1px solid rgba(238,232,220,.14);color:#A7A493;font-size:14px;line-height:1.6}
.b-menu-foot a{color:#A7A493;text-decoration:none}
.b-menu-foot a:hover{color:#EEE8DC}

/* ---------- mapa do contato ---------- */
.b-map{margin-top:120px;height:480px;border:1px solid rgba(238,232,220,.14);background:#15221A;overflow:hidden}
.b-map iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(.6) invert(.9) hue-rotate(180deg) brightness(.95) contrast(.9)}

/* ---------- barra fixa de agendamento (so mobile) ---------- */
.b-bar{display:none}

/* ---------- legibilidade: texto sobre foto ----------
   No design B o titulo do hero invade a foto (Home, Sobre, Contato) e, em
   Tratamentos, fica sobre uma ilustracao clara. Um veu na cor do fundo, do lado
   do texto, garante contraste sem esconder o retrato. */
.b-root .hero-img::after{content:"";position:absolute;inset:0;pointer-events:none}
.pg-home .hero-img::after,.pg-contato .hero-img::after{background:linear-gradient(90deg,#0E1712 0%,rgba(14,23,18,.86) 22%,rgba(14,23,18,.35) 46%,rgba(14,23,18,0) 64%)}
.pg-sobre .hero-img::after{background:linear-gradient(90deg,#0E1712 0%,rgba(14,23,18,.8) 30%,rgba(14,23,18,0) 62%),linear-gradient(0deg,#0E1712 0%,rgba(14,23,18,.6) 28%,rgba(14,23,18,0) 55%)}
/* Tratamentos: a faixa escura de 360px vira um degrade de baixo para cima */
.pg-tratamentos .b-root > section:first-of-type > div:nth-child(2){height:100% !important;opacity:1 !important;background:linear-gradient(0deg,#0E1712 0%,rgba(14,23,18,.92) 30%,rgba(14,23,18,.72) 62%,rgba(14,23,18,.5) 100%) !important}
.b-root h1{text-shadow:0 2px 28px rgba(14,23,18,.55)}
/* rotulo sobre a foto da faixa de Tratamentos na Home */
.pg-home .tile > p.lbl{background:rgba(14,23,18,.7);padding:10px 14px}

@media (max-width:900px){
  /* espacamentos de 200px do desktop ficam enormes no telefone */
  .b-root section[style*="padding: 200px 0"],.b-root section[style*="padding: 180px 0"],.b-root section[style*="padding: 160px 0"],.b-root section[style*="padding: 140px 0"]{padding-top:88px !important}
  .b-root section[style*="padding: 200px 0"],.b-root section[style*="padding: 180px 0"],.b-root section[style*="padding: 160px 0"],.b-root section[style*="padding: 0 0 200px"]{padding-bottom:88px !important}
  .b-root div[style*="padding: 200px clamp"],.b-root div[style*="padding: 120px clamp"],.b-root div[style*="padding: 140px clamp"]{padding-top:72px !important;padding-bottom:72px !important}
  .b-root div[style*="padding: 0 clamp(20px,4vw,64px) 200px"]{padding-bottom:88px !important}
  .b-root .g2,.b-root .g3{gap:40px !important}
  .b-root h2.bd,.b-root h3.bd{overflow-wrap:break-word}
  .b-root h3.bd[style*="font-size: 52px"]{font-size:36px !important}
  .b-root .huge{font-size:60px !important}

  /* Home: o nome sobe e sobrepoe o fim do retrato, como no B8 */
  .pg-home .hero-txt{padding-top:0 !important;margin-top:-88px;padding-bottom:64px !important}
  .pg-home #inicio .huge{font-size:64px !important}
  .pg-home #inicio .huge + .huge{padding-left:48px !important}
  .pg-home .tile > p.lbl{top:20px !important}
  /* "Tambem no consultorio": carrossel horizontal em vez de cortar */
  .pg-home div:has(> a.tile[style*="flex: 0 0 300px"]){overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none;margin-left:calc(-1 * clamp(20px,4vw,64px));margin-right:calc(-1 * clamp(20px,4vw,64px));padding:0 20px 8px;margin-top:48px !important}
  .pg-home a.tile[style*="flex: 0 0 300px"]{flex:0 0 260px !important;margin-top:0 !important;scroll-snap-align:start}
  .pg-home a.tile[style*="flex: 0 0 300px"] > div{height:340px !important}
  .pg-home p.bd[style*="font-size: 152px"]{font-size:96px !important}
  .pg-home div[style*="margin: -220px auto 0"]{margin-top:-120px !important}
  .pg-home div[style*="padding: 72px 72px 0 0"]{padding:32px 20px 0 0 !important}

  /* Tratamentos */
  .pg-tratamentos .b-root > section:first-of-type{height:640px !important}
  .pg-tratamentos h1 .huge,.pg-tratamentos h1.huge{font-size:54px !important}
  .pg-tratamentos h1 em{padding-left:32px !important}
  .pg-tratamentos .b-root > section:first-of-type .pill-solid{display:none !important}
  .pg-tratamentos button.idx > span:last-child{font-size:26px !important}
  .pg-tratamentos button.idx{padding:20px 0 !important;grid-template-columns:40px 1fr !important}
  .pg-tratamentos .b-root div[style*="height: 560px"]{height:360px !important}
  .pg-tratamentos .b-root .huge[style*="font-size: 112px"]{font-size:52px !important}

  /* Sobre: o hero deixa de ter altura fixa e o texto vem depois do retrato */
  .pg-sobre .b-root > section:first-of-type{height:auto !important}
  .pg-sobre .b-root > section:first-of-type > div:nth-child(2){height:auto !important;margin-top:-120px;padding-bottom:72px !important}
  .pg-sobre .hero-img::after{background:linear-gradient(0deg,#0E1712 0%,rgba(14,23,18,.7) 22%,rgba(14,23,18,0) 50%)}
  .pg-sobre .b-root > section:first-of-type h1{font-size:76px !important}
  .pg-sobre .b-root div[style*="height: 560px"]{height:420px !important}
  .pg-sobre .b-root section[style*="height: 640px"]{height:auto !important;display:flex;flex-direction:column}
  .pg-sobre .b-root section[style*="height: 640px"] > img{height:360px !important}
  .pg-sobre .b-root section[style*="height: 640px"] > div{position:static !important;max-width:none !important;padding:32px 20px !important}
  .pg-sobre .b-root h2[style*="font-size: 72px"]{font-size:52px !important}

  /* Blog */
  .pg-blog .feat-panel{padding:32px 20px 0 !important}
  .pg-blog .feat-panel h2{font-size:40px !important}
  .pg-blog .a-curtain[style*="height: 760px"]{height:420px !important}
  .pg-blog .grid12{grid-template-columns:minmax(0,1fr) !important;column-gap:0 !important;row-gap:64px !important}
  .pg-blog .grid12 > a{margin-top:0 !important}
  .pg-blog .grid12 > a > div{height:280px !important}
  .pg-blog .grid12 h3{font-size:28px !important}
  .pg-blog nav[aria-label="Categorias"]{flex-wrap:nowrap !important;overflow-x:auto;gap:28px !important;scrollbar-width:none}
  .pg-blog nav[aria-label="Categorias"] > button{flex:none;white-space:nowrap}
  .pg-blog .b-root > section:nth-of-type(1){padding-top:72px !important;padding-bottom:48px !important}
  .pg-blog .b-root p.bd[style*="font-size: 34px"]{font-size:24px !important}

  /* Artigo: as figuras usavam colunas 2-4 do desktop e criavam colunas fantasmas */
  .pg-artigo article .g2 > figure{grid-column:auto !important;margin:8px 0 !important}
  .pg-artigo article .g2 > figure .tile{height:300px !important}
  .pg-artigo article .g2{padding-top:56px !important;padding-bottom:72px !important}
  .pg-artigo .prose h2{font-size:34px !important}
  .pg-artigo .prose > p.bd{font-size:26px !important}
  .pg-artigo .b-root > figure .a-curtain{height:300px !important}
  .pg-artigo .b-root > section:first-of-type{padding:56px 0 48px !important}
  .pg-artigo .b-root .g2 > a.tile{margin-top:0 !important}
  .pg-artigo .b-root .g2 > a.tile > div{height:280px !important}

  /* Contato */
  .pg-contato .b-root > section:first-of-type{min-height:0 !important}
  .pg-contato .b-root > section:first-of-type > div:nth-child(2){padding-top:0 !important;margin-top:-88px;padding-bottom:72px !important}
  .pg-contato .hero-img{height:480px !important}
  .pg-contato .hero-img::after{background:linear-gradient(0deg,#0E1712 0%,rgba(14,23,18,.7) 22%,rgba(14,23,18,0) 50%)}
  .pg-contato h1 em{padding-left:40px !important}
  .pg-contato #mensagem > div > div:last-child{border-left:0 !important;padding-left:0 !important;border-top:1px solid rgba(201,169,106,.4);padding-top:40px}
  .pg-contato #mensagem p.bd[style*="font-size: 34px"]{font-size:26px !important}
  .pg-contato #mensagem h2{font-size:40px !important}

  /* no telefone o veu lateral escureceria metade da foto: vira veu inferior */
  .pg-home .hero-img::after{background:linear-gradient(0deg,#0E1712 0%,rgba(14,23,18,.75) 20%,rgba(14,23,18,0) 48%)}
  /* o cabecalho mobile do B8 nao tem o botao de agendar: ele desce para a barra fixa */
  .b-root > header a.pill{display:none !important}
  .b-root > header{z-index:30}

  .b-bar{display:grid;grid-template-columns:1fr 56px;gap:8px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60}
  .b-bar a{display:grid;place-items:center;height:56px;border-radius:999px;text-decoration:none}
  .b-bar a:first-child{background:#C9A96A;color:#0E1712}
  .b-bar a:last-child{border:1px solid #C9A96A;color:#C9A96A;background:#0E1712}
  .b-bar-dark a:first-child{background:#1A2620;color:#EEE8DC;box-shadow:0 0 0 1px rgba(201,169,106,.5)}
  .b-root > footer{padding-bottom:96px !important}

  .b-menu-top{padding-top:18px;padding-bottom:18px}
  .b-menu-top img{width:32px}
  .b-menu-cta{display:none}
  .b-menu-body{grid-template-columns:1fr;gap:40px;align-items:start;padding-top:40px}
  .b-mlink{gap:16px;padding:14px 0;border-bottom:1px solid rgba(238,232,220,.1);font-size:40px;line-height:1.05}
  .b-mlink:hover{padding-left:0}
  .b-mlink .lbl{width:20px}
  .b-menu-img{height:300px}
  .b-menu-foot{flex-direction:column;gap:10px}

  .b-map{margin-top:64px;height:320px}
}

@media (prefers-reduced-motion:no-preference){
  .b-menu:not([hidden]){animation:b-fade .5s ease both}
  .b-menu:not([hidden]) .b-mlink{animation:b-rise .8s cubic-bezier(.2,.7,.1,1) both}
  .b-menu:not([hidden]) .b-mlink:nth-child(2){animation-delay:.06s}
  .b-menu:not([hidden]) .b-mlink:nth-child(3){animation-delay:.12s}
  .b-menu:not([hidden]) .b-mlink:nth-child(4){animation-delay:.18s}
  .b-menu:not([hidden]) .b-mlink:nth-child(5){animation-delay:.24s}
}
@keyframes b-fade{from{opacity:0}to{opacity:1}}
@keyframes b-rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}

/* 404 */
.p404{margin:0;min-height:100vh;display:flex;align-items:center;background:#0E1712;color:#EEE8DC;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:17px;line-height:1.7}
.p404 main{width:100%;max-width:1360px;margin:0 auto;padding:64px clamp(20px,4vw,64px);box-sizing:border-box;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.p404 h1{margin:0;font-size:clamp(56px,9vw,128px);line-height:.94;letter-spacing:-0.025em;font-weight:400}
.p404 h1 em{color:#C9A96A}
.p404 p{margin:0;max-width:46ch;color:#D9D3C5;font-weight:300}
.p404 main > div{display:flex;flex-wrap:wrap;gap:16px}
.p404-a,.p404-b{display:inline-flex;align-items:center;min-height:56px;padding:0 30px;border-radius:999px;text-decoration:none}
.p404-a{background:#C9A96A;color:#0E1712}
.p404-b{border:1px solid #C9A96A;color:#C9A96A}