/* CIOB: navbar, CTA final, rodapé e WhatsApp flutuante da home.
   Atualizar esta folha ao editar estilos equivalentes em index.html. */
:root{--pu:#39016d;--pu2:#4a1485;--f:'Manrope',system-ui,sans-serif;--pad:clamp(20px,5vw,64px)}
.sec{padding-block:clamp(72px,11vw,160px)}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:14px 26px;border-radius:999px;font:600 16px/1 var(--f);text-decoration:none;border:1.5px solid var(--pu);background:var(--pu);color:#fff;transition:background .25s,color .25s,border-color .25s;cursor:pointer}
.btn i{font-style:normal;transition:transform .25s}
.btn:hover i{transform:translateX(5px)}
.btn:hover{background:var(--pu2)}
.btn.o{background:transparent;color:var(--pu)}
.btn.o:hover{background:var(--pu);color:#fff}
.on-pu .btn{background:#fff;color:var(--pu);border-color:#fff}
.on-pu .btn:hover{background:var(--lav);border-color:var(--lav)}
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s;text-decoration:none}
.ul:hover{background-size:100% 1.5px}
header.h{position:sticky;top:0;z-index:50;transition:background .3s,box-shadow .3s,transform .45s cubic-bezier(.22,1,.36,1)}
header.h.hd{transform:translateY(-100%)}
header.h.s{background:var(--bg);box-shadow:0 1px 0 var(--line)}
.h .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.h img{height:40px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(15px,2.2vw,32px)}
.nav a:not(.btn){font-weight:600;font-size:15px}
.nav .btn{min-height:44px;padding:11px 20px;font-size:15px}
.burger{display:none;min-width:48px;min-height:48px;border:0;background:none;cursor:pointer;color:var(--ink);font:600 15px var(--f)}
.btn .ic{width:20px;height:20px}
.wf{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:60;width:52px;height:52px;border-radius:50%;background:var(--pu);color:#fff;display:grid;place-items:center;opacity:0;transform:translateY(12px);pointer-events:none;box-shadow:0 6px 20px rgba(20,16,28,.2);transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.wf.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
.wf .ic{display:block;width:28px;height:28px}
.wf.is-on:hover{transform:scale(1.06);background:var(--pu2)}
.wf:focus-visible{outline:3px solid #8b5cf6;outline-offset:4px}
.mo .wf{opacity:0;transform:translateY(12px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.wf{transition:none!important;transform:none!important}}
.fin{background:var(--pu);color:#fff;border-radius:clamp(24px,4vw,56px) clamp(24px,4vw,56px) 0 0;overflow:hidden;position:relative}
.fin h2{font-size:clamp(2.6rem,5.4vw,6rem);max-width:12em;margin-bottom:24px}
.fin p.t{font-size:1.2rem;max-width:28em;margin:0 0 36px;color:#e6dff3}
.fin .sy{position:absolute;right:-6%;bottom:-3%;width:min(46vw,560px);opacity:.1;pointer-events:none}
.fin .wrap{position:relative}
footer.ft{margin-top:clamp(72px,9vw,128px);padding-top:56px;border-top:1px solid rgba(255,255,255,.25);font-size:15px;color:#e6dff3}
.ft-g{display:grid;grid-template-columns:1.3fr .8fr 1fr 1.8fr;gap:clamp(32px,4vw,64px)}
.ft h3{font-size:15px;font-weight:700;letter-spacing:0;line-height:1.2;color:#fff;margin:0 0 20px}
.ft img{height:84px;width:auto;margin-bottom:24px}
.ft p{margin:0 0 12px;max-width:26em}
.ft nav,.ft .fs{display:flex;flex-direction:column;gap:10px}
.ft nav h3,.ft .fs h3{margin-bottom:10px}
.ft a{color:#fff;text-decoration:none}
.ft a.ul{background-size:0 1.5px}
.ft a.ul:hover{background-size:100% 1.5px}
.ft .ci{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;max-width:none}
.ft .ci svg{flex:none;margin-top:3px;color:var(--lav)}
.ft .so .ic{width:18px;height:18px;margin:0;color:var(--pu)}
.ft .so{display:flex;gap:12px;margin-top:24px}
.ft .so a{width:40px;height:40px;border-radius:50%;background:var(--lav);color:var(--pu);display:grid;place-items:center;transition:background .25s}
.ft .so a:hover{background:#fff}
.ft .fc b{color:#fff;font-weight:600}
.fbar{margin-top:56px;padding:24px 0 8px;border-top:1px solid rgba(255,255,255,.25);text-align:center;font-size:13px}
@media (max-width:900px){.nav{position:fixed;inset:72px 0 0;background:var(--bg);flex-direction:column;align-items:flex-start;gap:8px;padding:32px var(--pad);transform:translateX(100%);visibility:hidden;transition:transform .35s,visibility .35s}
.nav.o{transform:none;visibility:visible}
.nav a:not(.btn){font-size:28px;font-weight:500;min-height:56px;display:flex;align-items:center}
.nav .btn{margin-top:16px}
.burger{display:block}
.ft-g{grid-template-columns:1fr 1fr}
.ft .fb,.ft .fc{grid-column:1/-1}}
@media (max-width:520px){.ft-g{grid-template-columns:1fr}}
header.h{
 position:fixed;top:0;left:0;right:0;width:100%;z-index:70;
 background:transparent;color:#fff;box-shadow:none;
 transition:background .3s ease,box-shadow .3s ease,transform .45s cubic-bezier(.22,1,.36,1),color .3s ease;
}
header.h .wrap{max-width:none;height:84px;padding-inline:clamp(24px,4.2vw,64px);transition:height .3s ease,padding .3s ease,max-width .3s ease}
header.h .brand{display:inline-flex;align-items:center;position:relative}
header.h .logo-top{display:block}
header.h .logo-scroll{display:none}
header.h .nav a:not(.btn){color:#fff}
header.h .nav .btn{background:rgba(255,255,255,.94);color:var(--pu);border-color:rgba(255,255,255,.94)}
header.h .nav .btn:hover{background:#fff;border-color:#fff;color:var(--pu)}
header.h .burger{color:#fff}
header.h.s{background:var(--bg);color:var(--ink);box-shadow:0 1px 0 var(--line)}
header.h.s .wrap{max-width:none;height:72px;padding-inline:clamp(24px,4.2vw,64px)}
header.h.s .logo-top{display:none}
header.h.s .logo-scroll{display:block}
header.h.s .nav a:not(.btn){color:var(--ink)}
header.h.s .nav .btn{background:var(--pu);color:#fff;border-color:var(--pu)}
header.h.s .nav .btn:hover{background:var(--pu2);border-color:var(--pu2);color:#fff}
header.h.s .burger{color:var(--ink)}
@media (max-width:900px){header.h .wrap{height:72px;padding-inline:var(--pad)}
header.h .nav{inset:72px 0 0;color:var(--ink)}
header.h .nav.o{background:var(--bg)}
header.h .nav.o a:not(.btn){color:var(--ink)}
header.h .nav.o .btn{background:var(--pu);color:#fff;border-color:var(--pu)}}
header.h.s .wrap{max-width:none;padding-inline:clamp(24px,4.2vw,64px)}
@media (max-width:900px){header.h.s .wrap{padding-inline:var(--pad)}}
/* Na página de blogs, a navbar utiliza o mesmo estado claro da home após o scroll. */
.site-header-offset{height:72px}
header.h.s .wrap{width:100%;max-width:none}
.fin>.wrap{width:100%;max-width:1320px;padding-inline:var(--pad);margin:0 auto}
.fin .btn i{font-style:normal}
@media(max-width:900px){.h .nav a:not(.btn){text-decoration:none}}

/* CTA final dos blogs: composição compacta, sem alterar o rodapé nem a home.
   Esta folha é utilizada exclusivamente em /blogs/ e nos artigos. */
.fin.sec{padding-block:clamp(54px,5.5vw,84px) clamp(60px,7vw,100px)}
.fin h2{font-size:clamp(2.05rem,3.35vw,3.85rem);line-height:1.13;letter-spacing:-.045em;font-weight:500;max-width:15em;margin:0 0 16px}
.fin p.t{font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.55;max-width:35em;margin:0 0 24px}
.fin>.wrap>.btn{min-height:48px;padding:12px 22px;font-size:15px}
.fin footer.ft{margin-top:clamp(52px,6vw,86px)}
@media(max-width:600px){
 .fin.sec{padding-block:52px 66px}
 .fin h2{font-size:clamp(1.95rem,8vw,2.75rem);line-height:1.16;margin-bottom:14px}
 .fin p.t{font-size:1rem;margin-bottom:22px}
 .fin footer.ft{margin-top:54px}
}


/* Menu mobile priorizado sobre todos os elementos da pagina. */
@media(max-width:900px){
 body.mo header.h{z-index:200;transform:none!important}
 body.mo header.h .nav.o{z-index:1;height:calc(100dvh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}
}


/* Marca na navbar: símbolo CIOB original + identificação mais legível. */
header.h .brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  width:max-content;
  text-decoration:none;
  color:inherit;
}
header.h .brand-mark{
  width:43px;
  height:52px;
  flex:0 0 43px;
  position:relative;
  display:block;
}
header.h .brand-mark img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
}
header.h .brand-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
  line-height:1;
}
header.h .brand-copy strong{
  font-size:28px;
  font-weight:800;
  line-height:.98;
  letter-spacing:-.045em;
}
header.h .brand-copy small{
  display:block;
  margin-top:3px;
  font-size:9px;
  font-weight:700;
  line-height:1.23;
  letter-spacing:-.02em;
  width:145px;
  max-width:100%;
  text-align:justify;
  text-align-last:justify;
  white-space:normal;
}
@media(max-width:900px){
  header.h .brand{gap:8px}
  header.h .brand-mark{width:38px;height:46px;flex-basis:38px}
  header.h .brand-copy strong{font-size:25px}
  header.h .brand-copy small{font-size:8px;width:130px}
}

/* CIOB: texto branco sobre a Hero e roxo sobre a navbar de fundo claro. */
header.h .brand-copy{color:#fff;transition:color .3s ease}
header.h.s .brand-copy{color:var(--pu)}


/* CIOB: novo fluxo de seções + contato/rodapé inspirados no site de referência. */
.lc.sec{background:#e5e0ed}
.lc .wrap{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 column-gap:clamp(30px,5vw,75px);row-gap:clamp(20px,2.2vw,32px);
 align-items:start
}
.lc h2{grid-column:1;grid-row:1;max-width:15ch}
.lc address{grid-column:1;grid-row:2;font-style:normal;
 font-size:clamp(17px,1.5vw,21px);line-height:1.65;margin:0}
.lc address small{font-size:13px;margin-top:8px}
.lc .ct{grid-column:1;grid-row:3;position:static;top:auto;
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 gap:20px 24px;align-self:start}
.lc .ct>.ci:last-child{grid-column:1/-1}
.lc .ci{font-size:15px;font-weight:600;gap:12px}
.lc .ci small{font-size:12px;margin-top:3px}
.lc .ci .hr{font-size:13px;min-width:0;width:min(100%,360px)}
.lc .hr div{gap:14px}
.lc .mapw{grid-column:2;grid-row:1/5;min-width:0;width:100%;align-self:stretch}
.lc .mapb{height:clamp(390px,37vw,540px);min-height:390px;
 aspect-ratio:auto;border-radius:18px;isolation:isolate;background:#d5c6e3}
.lc .mapb .location-photo{position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;object-position:center 48%;z-index:0;transition:opacity .3s}
.lc .mapb:has(iframe) .location-photo{opacity:0}
.lc .mapb button{position:relative;z-index:1;min-height:48px;
 background:rgba(255,255,255,.94);box-shadow:0 7px 26px rgba(25,9,45,.12)}
.lc .mapb iframe{z-index:2}
.lc .cta{grid-column:1;grid-row:4;display:flex;flex-wrap:wrap;
 justify-content:flex-start;align-items:center;gap:14px;margin:8px 0 0}
.lc .cta .btn{width:max-content;max-width:100%;white-space:nowrap}
.fin.sec{border-radius:0;background:#2a0150;color:#fff;
 padding-top:clamp(70px,7.5vw,110px);padding-bottom:clamp(34px,4vw,58px)}
.fin h2{font-size:clamp(2.3rem,4.3vw,4.1rem);max-width:17ch;
 line-height:1.12;margin-bottom:20px}
.fin p.t{font-size:clamp(16px,1.3vw,18px);max-width:48ch;margin:0 0 26px}
.fin .sy{width:min(270px,33vw);height:auto;opacity:.075;
 top:35px;right:7%;bottom:auto}
.fin footer.ft{margin-top:clamp(64px,7vw,94px);padding-top:48px;
 border-top:1px solid rgba(255,255,255,.21)}
.ft-g{grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.3fr);
 gap:clamp(24px,3vw,50px)}
.ft .fb>img{height:auto;width:min(100%,190px);margin-bottom:18px}
.ft .fb>p{font-size:13px;line-height:1.75;max-width:32ch;color:#ddd1e8}
.ft h3{font-size:13px;margin-bottom:18px}
.ft nav,.ft .fs{align-items:flex-start;gap:10px}
.ft nav h3,.ft .fs h3{margin-bottom:10px}
.ft .fc .ci{font-size:13px;font-weight:400;line-height:1.7}
.ft .so{margin-top:20px}
.ft .so a{width:38px;height:38px}
.ft .fbar{margin-top:40px}
@media(max-width:1000px){
 .lc .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px}
 .lc .ct{grid-template-columns:1fr;gap:18px}
 .lc .ct>.ci:last-child{grid-column:1}
 .lc .mapb{min-height:430px;height:100%}
 .ft-g{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ft .fb,.ft .fc{grid-column:auto}
}
@media(max-width:760px){
 .lc .wrap{display:flex;flex-direction:column;align-items:stretch;gap:24px}
 .lc h2,.lc address,.lc .ct,.lc .mapw,.lc .cta{grid-column:auto;grid-row:auto;width:100%}
 .lc .ct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
 .lc .ct>.ci:last-child{grid-column:1/-1}
 .lc .mapb{height:clamp(330px,76vw,470px);min-height:0}
 .lc .cta{display:flex;align-items:flex-start;gap:14px;flex-direction:column}
 .fin h2{font-size:clamp(2.1rem,7.6vw,3.1rem)}
 .fin .sy{width:160px;right:-20px}
}
@media(max-width:520px){
 .lc .ct{grid-template-columns:1fr}
 .lc .ct>.ci:last-child{grid-column:1}
 .lc .mapb{height:340px}
 .ft-g{grid-template-columns:1fr}
 .fin footer.ft{margin-top:54px}
}

/* Setas em SVG dos botões compartilhados com a home */
.btn i svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn i:has(svg){display:inline-grid;place-items:center;flex:0 0 19px;width:19px;height:19px}


/* Logo oficial CIOB em SVG. A proporção 2:1 do arquivo é preservada. */
header.h .brand.brand-svg{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  position:relative;
  width:clamp(140px, 12vw, 166px);
  height:auto;
  max-width:calc(100vw - 140px);
  line-height:0;
}
header.h .brand.brand-svg img{
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  flex:none;
}
header.h .brand.brand-svg .logo-top{display:block}
header.h .brand.brand-svg .logo-scroll{display:none}
header.h.s .brand.brand-svg{width:144px}
header.h.s .brand.brand-svg .logo-top{display:none}
header.h.s .brand.brand-svg .logo-scroll{display:block}
@media(max-width:900px){
  header.h .brand.brand-svg,
  header.h.s .brand.brand-svg{width:136px}
}
@media(max-width:370px){
  header.h .brand.brand-svg,
  header.h.s .brand.brand-svg{width:124px}
}


/* CIOB: menu mobile único (home, /blogs/ e três artigos).
   Desktop mantém os links e dimensões atuais da navbar. */
.nav .nav-dentistas{display:none}
@media (max-width:900px){
  body.mo header.h{background:var(--bg);color:var(--ink);box-shadow:none}
  body.mo header.h .brand.brand-svg .logo-top{display:none}
  body.mo header.h .brand.brand-svg .logo-scroll{display:block}
  body.mo header.h .burger{color:var(--pu)}
  header.h .nav{
    position:fixed;inset:72px 0 0;
    width:100%;height:calc(100dvh - 72px);
    max-height:calc(100dvh - 72px);
    display:flex;flex-direction:column;align-items:stretch;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    padding:18px var(--pad) max(28px,env(safe-area-inset-bottom));
    gap:0;background:var(--bg);
    visibility:hidden;opacity:0;pointer-events:none;
    transform:translateX(12px);
    transition:opacity .23s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility .3s;
    box-shadow:none;border:0;
  }
  header.h .nav.o{visibility:visible;opacity:1;pointer-events:auto;transform:translateX(0)}
  header.h .nav a:not(.btn),
  header.h .nav .nav-dentistas{
    display:flex;align-items:center;justify-content:flex-start;
    width:100%;flex:0 0 auto;min-height:54px;
    padding:11px 0;margin:0;border-bottom:1px solid rgba(57,1,109,.12);
    font-family:var(--f);font-weight:500;font-size:15px;line-height:1.3;
    color:var(--ink);text-decoration:none;
    background:none;background-image:none;
  }
  header.h .nav a:not(.btn):hover{color:var(--pu);background:none}
  header.h .nav .btn{
    display:inline-flex;align-self:flex-start;flex:0 0 auto;
    width:max-content;max-width:100%;margin:16px 0 0;
    min-height:42px;padding:10px 16px;gap:12px;
    font-size:13px;line-height:1.2;font-weight:700;
    border-radius:9px;background:var(--pu);color:#fff;border-color:var(--pu);
    white-space:nowrap;
  }
  header.h .nav .btn svg{width:17px;height:17px}
  body.mo{overflow:hidden}
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){header.h .nav{transition:none}}


/* 14/10 — Navbar: respiro vertical na marca SVG sem mudar a altura do menu. */
header.h .brand.brand-svg{width:clamp(132px,10.8vw,152px)}
header.h.s .brand.brand-svg{width:130px}
@media(max-width:900px){
 header.h .brand.brand-svg,
 header.h.s .brand.brand-svg{width:116px;max-width:calc(100vw - 132px)}
}
@media(max-width:370px){
 header.h .brand.brand-svg,
 header.h.s .brand.brand-svg{width:110px}
}
/* Instagram: título, descrição, CTA e primeira imagem usam o mesmo alinhamento. */
@media(max-width:640px){
 main #instagram.ig>.in{padding-inline:var(--pad)}
 main #instagram .igt{width:100%;padding:0;margin:0 0 30px;align-items:flex-start}
 main #instagram .igt > h2,
 main #instagram .igt > p:not(.kick),
 main #instagram .igt > .btn{margin-left:0;margin-right:0;max-width:100%}
 main #instagram .igt > p:not(.kick){align-self:flex-start}
 main #instagram .igt > .btn{align-self:flex-start;justify-self:flex-start}
 main #instagram #igs{margin-left:0;padding-left:0}
}


/* Crédito no rodapé: marca em Pixelify Sans Medium, sem alterar a fonte do site. */
.fbar .fbar-credit{color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:.34em}
.fbar .fbar-name{font-family:'Pixelify Sans',monospace;font-weight:500;font-size:17px;line-height:1.25;letter-spacing:.01em;color:#fff}
.fbar .fbar-credit:hover .fbar-name,.fbar .fbar-credit:focus-visible .fbar-name{text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){.fbar .fbar-name{font-size:16px}}