/*
Theme Name: Buzzo Odontologia
Theme URI: https://buzzoodonto.com.br
Author: Agencia Criade
Author URI: https://agenciacriade.com.br
Description: Tema do site da Buzzo Odontologia (Salto/SP). 19 paginas com JSON-LD por pagina, camada de motion e cluster AEO. Gerado por gen_tema_wp.py - as paginas sao criadas sozinhas ao ativar o tema.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: buzzo
*/
/* ============================================================
BUZZO ODONTOLOGIA — mockup v2 (rev. 27/08/2026)
Base: "Guia de Estilo & Direção de Arte" (Jaqueline, Drive 11/08/2026)
Fundo PREDOMINANTE ... Champagne Claro #D0C4B5
Títulos & destaques .. Grafite Elegante #26211B
Textos & descritivos . Chumbo Suave #48413A
+ paleta de apoio do Manual da Marca (jun/2026) e das artes de agosto.
Display: Cormorant Garamond (stand-in web da Klaristha)
Corpo: Archivo
------------------------------------------------------------
v1 era grafite-dominante. O guia diz o contrário: champagne é a
BASE, grafite é o tom de autoridade. Esta versão inverte isso.
============================================================ */
:root{
/* --- base champagne (o fundo da marca) --- */
--champanhe:#D0C4B5; /* fundo predominante */
--champanhe-2:#DCD2C6; /* variação clara p/ cartões */
--nevoa:#F2EDE6; /* respiro / seções claras */
--areia:#C4A98A; /* nude quente do folder */
--areia-2:#B8996F;
/* --- autoridade --- */
--grafite:#26211B;
--grafite-2:#312A22;
--chumbo:#48413A;
--cimento:#5F5B5A;
/* --- dourados --- */
--ouro-escuro:#634C34;
--ouro:#8C7059;
--ouro-vivo:#C9A87C;
--ouro-luz:#DDBE93;
/* --- texto --- */
--tinta:#26211B; /* sobre champagne/névoa */
--corpo:#48413A;
--luz:#EFE7DA; /* sobre grafite */
--luz-2:#C9C0B4;
--font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
--font-body:"Archivo", "Helvetica Neue", Arial, sans-serif;
--w:1180px;
--r:4px; /* raio base */
--r-foto:28px; /* cartões de foto — linguagem das artes */
/* --- identidade de motion: arquétipo PREMIUM ---------------------
Sóbrio e acolhedor, como a marca: uma curva só para 80% das
animações, três durações, ZERO overshoot. Nada de mola saltitante —
"não pode ficar chique demais senão espanta" vale para o movimento
também. Regra que governa o site inteiro: motion nunca atrasa o
telefone; nada acima da dobra na urgência entra por animação. */
--e:cubic-bezier(.4,0,.2,1); /* assinatura */
--e-saida:cubic-bezier(.3,0,1,1); /* saídas: acelera e vai embora */
--d-rapido:140ms; /* hover, press, toggle */
--d-padrao:320ms; /* cartões, painéis, disclosure */
--d-lento:560ms; /* revelação de seção */
--t:var(--d-padrao) var(--e);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:var(--font-body);
background:var(--champanhe);
color:var(--corpo);
font-size:16px;
line-height:1.7;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ouro-escuro);outline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 28px}
/* ---------- tipografia ---------- */
h1,h2,h3,.display{font-family:var(--font-display);font-weight:500;line-height:1.1;letter-spacing:.005em;color:var(--tinta)}
h1{font-size:clamp(2.35rem,5.4vw,4.3rem)}
h2{font-size:clamp(1.95rem,3.9vw,3.05rem)}
h1 em,h2 em,h3 em{font-style:italic;color:var(--ouro-escuro)}
/* título "funcional" — o caixa-alta pesado das artes de agosto */
.k{
font-family:var(--font-body);font-weight:700;text-transform:uppercase;
font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.12;letter-spacing:-.005em;
color:var(--tinta);
}
.k .v{color:var(--ouro-escuro)}
.eyebrow{
font-family:var(--font-body);font-size:.7rem;font-weight:600;
letter-spacing:.24em;text-transform:uppercase;color:var(--ouro-escuro);
display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;flex:none}
.lead{font-size:1.09rem;color:var(--corpo);max-width:58ch}
/* ---------- temperaturas de seção ---------- */
section{position:relative;padding:106px 0;overflow:hidden}
.claro{background:var(--nevoa)} /* respiro */
.emergencia{background:var(--grafite);color:var(--luz-2)} /* autoridade */
.emergencia h1,.emergencia h2,.emergencia h3,.emergencia .k{color:var(--luz)}
.emergencia .lead{color:var(--luz-2)}
.emergencia .eyebrow{color:var(--ouro-vivo)}
.emergencia h2 em,.emergencia h3 em,.emergencia .assinatura{color:var(--ouro-luz)}
.emergencia .faq summary::after{color:var(--ouro-vivo)}
.emergencia .espec-ico,.emergencia .ico,.emergencia .oico,.emergencia .em{color:var(--ouro-luz)}
.emergencia .k .v{color:var(--ouro-vivo)}
/* ---------- o B como FORMA (assinatura da página) ----------
máscara com o PNG oficial: o desenho é o do cliente, a cor é nossa. */
.ghost-b::after{
content:"";position:absolute;pointer-events:none;
right:-8%;top:50%;transform:translateY(-50%);
/* dimensiona pela ALTURA da seção: em bloco baixo o B não vira faixa cortada */
height:min(88%,860px);width:auto;aspect-ratio:374/508;
background:currentColor;color:var(--grafite);opacity:.055;
-webkit-mask:url("img/icone-b.png") no-repeat center/contain;
mask:url("img/icone-b.png") no-repeat center/contain;
}
.emergencia.ghost-b::after{color:var(--ouro-luz);opacity:.07}
.ghost-b.b-esq::after{right:auto;left:-14%}
/* ripas verticais (assinatura da fachada) */
.ripas{
position:absolute;top:0;bottom:0;width:120px;pointer-events:none;opacity:.5;
background:repeating-linear-gradient(90deg,
rgba(99,76,52,.16) 0 1px, transparent 1px 13px);
}
.ripas.esq{left:0}.ripas.dir{right:0}
.emergencia .ripas{background:repeating-linear-gradient(90deg,
rgba(221,190,147,.16) 0 1px, transparent 1px 13px)}
/* ---------- botões ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--font-body);font-size:.83rem;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;
padding:16px 30px;border-radius:999px;border:1px solid transparent;
transition:var(--t);cursor:pointer;text-align:center;
}
.btn-ouro{background:var(--grafite);color:var(--luz);border-color:var(--grafite)}
.btn-ouro:hover{background:var(--ouro-escuro);border-color:var(--ouro-escuro)}
.btn-linha{border-color:currentColor;color:inherit;background:transparent}
.btn-linha:hover{background:rgba(38,33,27,.07)}
.emergencia .btn-ouro{background:var(--ouro-luz);color:var(--grafite);border-color:var(--ouro-luz)}
.emergencia .btn-ouro:hover{background:#EBD3AE;border-color:#EBD3AE}
.emergencia .btn-linha{color:var(--luz)}
.emergencia .btn-linha:hover{background:rgba(239,231,218,.1)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
/* ---------- topbar / header ---------- */
.topbar{
background:var(--grafite);color:var(--luz-2);
font-size:.76rem;letter-spacing:.08em;
display:flex;align-items:center;justify-content:center;gap:10px;
padding:9px 20px;text-align:center;flex-wrap:wrap;
}
.topbar .dot{width:5px;height:5px;border-radius:50%;background:var(--ouro-luz);flex:none;
animation:pulso 2.4s ease-in-out infinite}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.25}}
.topbar a{color:var(--ouro-luz);font-weight:600;border-bottom:1px solid rgba(221,190,147,.4)}
header.site{
position:sticky;top:0;z-index:60;
background:rgba(208,196,181,.92);backdrop-filter:blur(12px);
border-bottom:1px solid rgba(99,76,52,.16);
}
header.site .wrap{display:flex;align-items:center;gap:26px;min-height:78px}
.logo{flex:none;display:block}
.logo img{height:34px;width:auto}
nav.principal{margin-left:auto;display:flex;align-items:center;gap:4px}
nav.principal>a,nav.principal>.tem-sub>a{
display:block;padding:10px 13px;font-size:.73rem;font-weight:600;
letter-spacing:.13em;text-transform:uppercase;color:var(--chumbo);transition:var(--t);
}
nav.principal>a:hover,nav.principal>.tem-sub>a:hover{color:var(--ouro-escuro)}
nav.principal .vip{color:var(--ouro-escuro)}
nav.principal .vip .sub-vip{display:block;font-size:.62rem;letter-spacing:.1em;opacity:.75}
.cta-header{margin-left:8px}
.cta-header .btn{padding:13px 22px;font-size:.73rem}
/* submenu especialidades */
.tem-sub{position:relative}
.submenu{
position:absolute;top:100%;left:0;min-width:238px;padding:10px;
background:var(--nevoa);border:1px solid rgba(99,76,52,.18);border-radius:14px;
box-shadow:0 24px 50px rgba(38,33,27,.18);
opacity:0;visibility:hidden;transform:translateY(8px);transition:var(--t);
}
.tem-sub:hover .submenu,.tem-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{display:block;padding:9px 13px;border-radius:9px;font-size:.85rem;color:var(--chumbo)}
.submenu a:hover{background:var(--champanhe-2);color:var(--tinta)}
.ham{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.ham span{display:block;width:24px;height:1.5px;background:var(--tinta);margin:5px 0;transition:var(--t)}
/* ---------- faixa de inauguração ---------- */
.faixa-abertura{
background:linear-gradient(100deg,var(--areia),var(--champanhe-2) 62%,var(--areia));
border-top:1px solid rgba(99,76,52,.2);border-bottom:1px solid rgba(99,76,52,.2);
padding:0;overflow:hidden;
}
.faixa-abertura .wrap{
display:flex;align-items:center;justify-content:center;gap:16px 26px;
flex-wrap:wrap;padding-top:15px;padding-bottom:15px;text-align:center;
}
.faixa-abertura .data{
font-family:var(--font-display);font-size:1.9rem;line-height:1;color:var(--grafite);
font-weight:600;letter-spacing:.02em;
}
.faixa-abertura p{color:var(--chumbo);font-size:.95rem;max-width:46ch}
.faixa-abertura strong{color:var(--grafite)}
/* ---------- hero ---------- */
.hero{padding:96px 0 104px}
.hero .cols,
/* rede de proteção: um template que esqueça a classe `cols` ainda ganha o grid.
Foi exatamente esse esquecimento que deixou o hero das 8 páginas internas em
coluna única, com a foto ocupando a largura toda. */
.hero .wrap:has(> .hero-media){display:grid;grid-template-columns:1.06fr .94fr;gap:66px;align-items:center}
.hero h1{margin-bottom:22px}
.hero-media{position:relative}
.retrato{
border-radius:var(--r-foto);overflow:hidden;
box-shadow:0 34px 70px rgba(38,33,27,.22);
background:var(--champanhe-2);
}
/* selo 24h flutuando sobre a foto — como nas artes */
.selo-24{
position:absolute;left:-26px;bottom:38px;width:132px;height:132px;
display:grid;place-items:center;border-radius:50%;
background:var(--grafite);color:var(--ouro-luz);
box-shadow:0 18px 38px rgba(38,33,27,.3);
}
.selo-24 svg{width:74px;height:74px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.chip{
font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--chumbo);
border:1px solid rgba(99,76,52,.3);border-radius:999px;padding:8px 15px;
background:rgba(242,237,230,.5);
}
/* ---------- urgência: passos ---------- */
.fone-grande{
font-family:var(--font-display);font-size:clamp(2.1rem,5vw,3.3rem);
color:var(--ouro-luz);display:inline-block;margin:6px 0 4px;letter-spacing:.01em;
}
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.passo{
border:1px solid rgba(221,190,147,.26);border-radius:16px;padding:26px 24px;
background:rgba(239,231,218,.045);transition:var(--t);
}
.passo:hover{background:rgba(239,231,218,.08);border-color:rgba(221,190,147,.45)}
.passo .n{font-family:var(--font-display);font-size:1.5rem;color:var(--ouro-vivo);display:block;margin-bottom:8px}
.passo h3{font-size:1.16rem;margin-bottom:9px}
.passo p{font-size:.93rem;color:var(--luz-2)}
.nota{font-size:.86rem;color:var(--luz-2);margin-top:26px;max-width:62ch}
.nota strong{color:var(--ouro-vivo)}
/* ---------- dois funis (arquitetura de aquisição) ---------- */
.funis{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:46px}
.funil{
border-radius:22px;padding:36px 34px;position:relative;overflow:hidden;
border:1px solid rgba(99,76,52,.2);background:var(--nevoa);
}
.funil.porta{background:var(--grafite);border-color:var(--grafite);color:var(--luz-2)}
.funil.porta h3,.funil.porta .rot{color:var(--luz)}
.funil .rot{
font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--ouro-escuro);display:block;margin-bottom:14px;font-weight:600;
}
.funil.porta .rot{color:var(--ouro-luz)}
.funil h3{font-size:1.6rem;margin-bottom:12px}
.funil p{font-size:.97rem}
.funil ul{list-style:none;margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.funil li{
font-size:.76rem;letter-spacing:.05em;padding:7px 13px;border-radius:999px;
border:1px solid rgba(99,76,52,.28);
}
.funil.porta li{border-color:rgba(221,190,147,.3)}
.ponte{
text-align:center;font-family:var(--font-display);font-style:italic;
font-size:1.42rem;color:var(--ouro-escuro);margin-top:34px;
}
/* ---------- especialidades ---------- */
.grade-esp{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px}
.card-esp{
display:block;background:var(--nevoa);border:1px solid rgba(99,76,52,.16);
border-radius:18px;padding:28px 24px 24px;transition:var(--t);
}
.claro .card-esp{background:#FBF8F3}
.card-esp:hover{transform:translateY(-4px);border-color:var(--ouro);box-shadow:0 20px 40px rgba(38,33,27,.12)}
.card-esp.destaque{background:var(--grafite);border-color:var(--grafite);color:var(--luz-2)}
.card-esp.destaque h3{color:var(--luz)}
.card-esp.destaque .saiba{color:var(--ouro-luz)}
.espec-ico{width:32px;height:32px;margin-bottom:16px;color:var(--ouro-escuro);display:block}
.card-esp.destaque .espec-ico{color:var(--ouro-luz)}
.card-esp h3{font-size:1.24rem;margin-bottom:8px}
.card-esp p{font-size:.9rem;line-height:1.62}
.saiba{
display:inline-block;margin-top:15px;font-size:.7rem;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--ouro-escuro);
}
/* ---------- galeria da clínica ---------- */
.galeria{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:16px;margin-top:46px}
.galeria figure{border-radius:var(--r-foto);overflow:hidden;background:var(--grafite-2);margin:0}
.galeria figure:first-child{grid-row:span 2}
.galeria img{width:100%;height:100%;object-fit:cover}
/* ---------- Dra. ---------- */
.dra .cols{display:grid;grid-template-columns:.86fr 1.14fr;gap:62px;align-items:center}
.foto{border-radius:var(--r-foto);overflow:hidden;box-shadow:0 30px 62px rgba(38,33,27,.2)}
.assinatura{font-family:var(--font-display);font-style:italic;font-size:1.4rem;color:var(--ouro-escuro);margin-top:24px}
.cro{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cimento);margin-top:4px}
/* ---------- onde estamos ---------- */
.local .cols{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.dado-local{display:grid;grid-template-columns:118px 1fr;gap:14px;padding:17px 0;border-bottom:1px solid rgba(99,76,52,.16)}
.dado-local:last-child{border-bottom:0}
.dado-local dt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-escuro);padding-top:3px}
.dado-local dd{font-size:.98rem;color:var(--corpo)}
.dado-local a{color:var(--ouro-escuro);border-bottom:1px solid rgba(99,76,52,.35)}
.mapa{border-radius:var(--r-foto);overflow:hidden;border:1px solid rgba(99,76,52,.2);min-height:330px}
.local .visual{display:grid;gap:16px}
.local .predio{border-radius:var(--r-foto);overflow:hidden;box-shadow:0 22px 46px rgba(38,33,27,.16)}
.local .predio img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 34%}
.mapa iframe{width:100%;height:100%;min-height:330px;border:0;display:block;filter:saturate(.72) contrast(1.02)}
/* ---------- parcerias ---------- */
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.parceria{border:1px solid rgba(221,190,147,.24);border-radius:16px;padding:26px 24px}
.parceria h3{font-size:1.2rem;margin-bottom:9px}
.parceria p{font-size:.92rem;color:var(--luz-2)}
/* ---------- FAQ ---------- */
.faq{max-width:840px;margin:44px auto 0}
.faq details{border-bottom:1px solid rgba(99,76,52,.2)}
.emergencia .faq details{border-bottom-color:rgba(221,190,147,.2)}
.faq summary{
list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
font-family:var(--font-display);font-size:1.28rem;color:var(--tinta);
}
.emergencia .faq summary{color:var(--luz)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
font-family:var(--font-body);font-size:1.3rem;color:var(--ouro-escuro);transition:var(--t);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{padding:0 40px 24px 0;font-size:.98rem;max-width:70ch}
.faq a{color:var(--ouro-escuro);border-bottom:1px solid rgba(99,76,52,.35)}
.emergencia .faq a{color:var(--ouro-luz);border-bottom-color:rgba(221,190,147,.4)}
/* ---------- CTA final ---------- */
.cta-final{text-align:center}
.cta-final .selo-grande{width:118px;margin:0 auto 26px;opacity:.92}
.cta-final .hero-ctas{justify-content:center}
/* ---------- rodapé ---------- */
footer.site{background:var(--grafite);color:var(--luz-2);padding:64px 0 30px;font-size:.9rem}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1.05fr 1fr;gap:40px}
footer.site h4{
font-family:var(--font-body);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--ouro-vivo);margin-bottom:15px;font-weight:600;
}
footer.site a:hover{color:var(--ouro-luz)}
footer.site .marca img{height:34px;margin-bottom:16px}
footer.site ul{list-style:none;display:grid;gap:8px}
.legal{
margin-top:46px;padding-top:22px;border-top:1px solid rgba(239,231,218,.14);
display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
font-size:.78rem;color:#9C9488;
}
.legal a{color:var(--ouro-vivo)}
/* ---------- botões flutuantes ---------- */
.flutuante{position:fixed;right:18px;bottom:18px;z-index:80;display:grid;gap:10px}
.flutuante a{
width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
box-shadow:0 12px 28px rgba(38,33,27,.32);transition:var(--t);
}
.flutuante a:hover{transform:translateY(-3px)}
.flutuante .zap{background:#25D366;color:#fff}
/* O botão de ligar é grafite. Sobre uma seção grafite ele simplesmente sumia —
e é o CTA mais importante do site. O anel dourado o separa dos dois fundos. */
.flutuante .tel{
background:var(--grafite);color:var(--ouro-luz);
box-shadow:0 0 0 2px var(--ouro-luz),0 12px 28px rgba(0,0,0,.4);
}
.flutuante .tel:hover{background:var(--ouro-escuro);color:#F4E4C6}
.flutuante svg{width:26px;height:26px}
/* ============================================================
RESPONSIVO — validado 320 / 375 / 430 / 768 / 1024
============================================================ */
@media (max-width:980px){
section{padding:76px 0}
.hero{padding:64px 0 72px}
.hero .cols,.hero .wrap:has(> .hero-media),.dra .cols,.local .cols{grid-template-columns:1fr;gap:40px}
.hero-media{order:-1;max-width:440px}
.grade-esp{grid-template-columns:repeat(2,1fr)}
.passos,.cols-3{grid-template-columns:1fr}
.funis{grid-template-columns:1fr}
.galeria{grid-template-columns:1fr 1fr}
.galeria figure:first-child{grid-row:auto;grid-column:span 2}
footer.site .cols{grid-template-columns:1fr 1fr;gap:34px}
.ham{display:block}
nav.principal{
position:fixed;inset:0 0 0 auto;width:min(320px,86vw);
background:var(--nevoa);flex-direction:column;align-items:stretch;
padding:96px 22px 30px;gap:2px;overflow-y:auto;
box-shadow:-20px 0 50px rgba(38,33,27,.25);
/* Fechado ele some por opacidade e desliza 14px PARA DENTRO.
Nada de translateX(100%): um painel fixo estacionado fora da tela
soma no scrollWidth e cria rolagem horizontal no mobile — e as duas
correções óbvias (overflow-x hidden OU clip no ) matam o
position:sticky do header, medido no Chrome. Deslocamento positivo
também vaza (320 + 18 = 338), então o desvio é negativo. */
transform:translateX(-14px);opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .3s ease, transform var(--t), visibility .3s;
}
nav.principal.aberto{transform:none;opacity:1;visibility:visible;pointer-events:auto}
nav.principal>a,nav.principal>.tem-sub>a{padding:14px 6px;font-size:.82rem;border-bottom:1px solid rgba(99,76,52,.12)}
.submenu{
position:static;opacity:1;visibility:visible;transform:none;
box-shadow:none;border:0;background:transparent;padding:0 0 10px 14px;
}
.submenu a{padding:9px 6px;font-size:.8rem;color:var(--cimento)}
.cta-header{margin:18px 0 0}
.cta-header .btn{width:100%}
.fechar{
position:absolute;top:22px;right:20px;background:none;border:0;
font-size:1.7rem;line-height:1;color:var(--tinta);cursor:pointer;padding:6px 10px;
}
.ghost-b::after{height:min(74%,560px);opacity:.045}
.selo-24{width:104px;height:104px;left:-14px;bottom:20px}
.selo-24 svg{width:58px;height:58px}
}
@media (min-width:981px){.fechar{display:none}}
@media (max-width:560px){
.wrap{padding:0 20px}
section{padding:60px 0}
h1{font-size:clamp(2rem,8.4vw,2.7rem)}
h2{font-size:clamp(1.65rem,6.4vw,2.15rem)}
.k{font-size:clamp(1.28rem,5.8vw,1.75rem)}
.grade-esp,.galeria{grid-template-columns:1fr}
.galeria figure:first-child{grid-column:auto}
footer.site .cols{grid-template-columns:1fr;gap:32px}
.hero-ctas .btn{width:100%}
.topbar{font-size:.7rem;gap:6px;padding:8px 14px}
.dado-local{grid-template-columns:1fr;gap:4px;padding:14px 0}
.faixa-abertura .wrap{flex-direction:column;gap:8px}
.faixa-abertura .data{font-size:1.6rem}
.flutuante{right:14px;bottom:14px}
.flutuante a{width:50px;height:50px}
.selo-24{width:88px;height:88px;left:8px;bottom:-16px}
.selo-24 svg{width:48px;height:48px}
.funil{padding:28px 24px}
.passo{padding:22px 20px}
}
@media (max-width:360px){
.wrap{padding:0 16px}
.logo img{height:28px}
.btn{padding:14px 20px;font-size:.76rem;letter-spacing:.09em}
}
/* ============================================================
PÁGINAS DE ESPECIALIDADE — classes herdadas do v1 que
precisam de regra na base nova (auditadas contra o HTML).
============================================================ */
/* hero da especialidade: foto + selo circular flutuando */
.espec-foto{border-radius:var(--r-foto);box-shadow:0 30px 62px rgba(38,33,27,.2);width:100%}
.selo-flutuante{
position:absolute;left:-30px;bottom:-26px;width:118px;height:auto;
opacity:.95;filter:drop-shadow(0 12px 26px rgba(38,33,27,.32));
}
.hero-media{position:relative}
.selo-grande{width:112px;height:auto;margin:0 auto 26px;opacity:.92}
/* ícones de linha (substituem os emojis do v1) */
.ico,.oico,.em{color:var(--ouro-escuro);flex:none}
.ico{width:30px;height:30px;margin-bottom:15px;display:block}
.ico svg{width:100%;height:100%}
.card-esp.destaque .ico{color:var(--ouro-luz)}
.oico,.em{width:19px;height:19px;display:inline-block;vertical-align:-4px;margin-right:9px}
.oico svg,.em svg{width:100%;height:100%}
/* grade "outras especialidades" */
.grade-outras{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:38px}
.outra{
display:flex;align-items:center;gap:2px;padding:16px 18px;border-radius:14px;
background:var(--champanhe-2);border:1px solid rgba(99,76,52,.16);
font-size:.9rem;color:var(--tinta);transition:var(--t);
}
.claro .outra{background:#FBF8F3}
.outra:hover{border-color:var(--ouro);transform:translateY(-3px);box-shadow:0 14px 30px rgba(38,33,27,.1)}
/* variante de 2 colunas da grade de cards */
.grade-esp.cols-2{grid-template-columns:repeat(2,1fr)}
/* resposta do FAQ (mesmo tratamento do solto) */
.faq .resp{padding:0 40px 24px 0;font-size:.98rem;max-width:70ch}
@media (max-width:980px){
.grade-outras{grid-template-columns:repeat(2,1fr)}
.selo-flutuante{width:96px;left:-16px;bottom:-18px}
}
@media (max-width:560px){
.grade-outras,.grade-esp.cols-2{grid-template-columns:1fr}
.selo-flutuante{width:78px;left:10px;bottom:-24px}
.faq .resp{padding-right:0}
}
/* ---------- urgência em 2 colunas (foto da porta real) ---------- */
.emergencia .cols.urg{display:grid;grid-template-columns:1.18fr .82fr;gap:56px;align-items:center}
.emergencia .porta{margin:0;border-radius:var(--r-foto);overflow:hidden;
box-shadow:0 28px 58px rgba(0,0,0,.4);border:1px solid rgba(221,190,147,.16)}
.emergencia .porta img{width:100%;display:block}
/* galeria com a fachada 16:9 como peça de abertura */
.galeria-fachada{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
.galeria-fachada figure:first-child{grid-row:auto;grid-column:span 2;aspect-ratio:16/9}
.galeria-fachada figure:first-child img{aspect-ratio:16/9}
@media (max-width:980px){
.emergencia .cols.urg{grid-template-columns:1fr;gap:34px}
.emergencia .porta{max-width:440px}
}
@media (max-width:560px){
.galeria-fachada{grid-template-columns:1fr}
.galeria-fachada figure:first-child{grid-column:auto}
}
/* ============================================================
CLUSTER SEO/AEO — páginas de intenção de busca (gen_seo.py)
============================================================ */
.hero-aeo{padding:52px 0 92px;background:var(--champanhe)}
.hero-aeo h1{font-size:clamp(2.1rem,4.4vw,3.5rem);margin:6px 0 30px;max-width:19ch}
/* migalhas — reforçam a hierarquia pro crawler e situam o leitor */
.migalhas{
font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
color:var(--cimento);margin-bottom:26px;display:flex;flex-wrap:wrap;gap:8px;
}
.migalhas a{color:var(--ouro-escuro);border-bottom:1px solid rgba(99,76,52,.3)}
.migalhas [aria-current]{color:var(--chumbo)}
/* RESPOSTA DIRETA — o bloco que o motor de resposta levanta.
Fica logo abaixo do H1, tem 40-60 palavras e é autossuficiente
(nome da clínica + cidade + telefone dentro dele). */
.resposta-direta{
background:var(--nevoa);border:1px solid rgba(99,76,52,.22);
border-left:4px solid var(--ouro-escuro);border-radius:0 18px 18px 0;
padding:28px 32px;max-width:70ch;box-shadow:0 16px 38px rgba(38,33,27,.07);
}
.resposta-direta .rot{
font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
color:var(--ouro-escuro);margin-bottom:10px;
}
.resposta-direta p:last-child{font-size:1.12rem;line-height:1.62;color:var(--tinta);margin:0}
.meta-pagina{
font-size:.78rem;color:var(--cimento);margin-top:20px;max-width:70ch;line-height:1.7;
}
/* grade de sinais — 3 colunas, herda o cartão das especialidades */
.grade-esp.cols-3-sinais{grid-template-columns:repeat(3,1fr)}
.sinal{
background:var(--nevoa);border:1px solid rgba(99,76,52,.16);
border-radius:18px;padding:26px 24px;transition:var(--t);
}
.claro .sinal{background:#FBF8F3}
.sinal:hover{border-color:var(--ouro);box-shadow:0 16px 34px rgba(38,33,27,.09)}
.sinal h3{font-size:1.1rem;margin-bottom:7px}
.sinal p{font-size:.9rem;line-height:1.6}
/* passo a passo (HowTo) */
.passo-lista{list-style:none;margin-top:42px;display:grid;gap:14px;counter-reset:passo}
.passo-lista li{
display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;
border:1px solid rgba(221,190,147,.24);border-radius:16px;padding:24px 26px;
background:rgba(239,231,218,.045);
}
.passo-lista .n{
font-family:var(--font-display);font-size:1.7rem;line-height:1;color:var(--ouro-vivo);
}
.passo-lista h3{font-size:1.14rem;margin-bottom:7px}
.passo-lista p{font-size:.94rem;color:var(--luz-2)}
/* o que não fazer */
.nao-fazer{list-style:none;margin-top:34px;display:grid;gap:12px;max-width:78ch}
.nao-fazer li{
position:relative;padding:15px 20px 15px 52px;border-radius:14px;
background:var(--nevoa);border:1px solid rgba(99,76,52,.14);
font-size:.97rem;color:var(--corpo);
}
.nao-fazer li::before{
content:"";position:absolute;left:20px;top:50%;width:16px;height:16px;
margin-top:-8px;border-radius:50%;border:1.5px solid var(--ouro-escuro);
background:
linear-gradient(45deg,transparent 45%,var(--ouro-escuro) 45% 55%,transparent 55%);
}
@media (max-width:980px){
.grade-esp.cols-3-sinais{grid-template-columns:repeat(2,1fr)}
.hero-aeo{padding:40px 0 68px}
}
@media (max-width:560px){
.grade-esp.cols-3-sinais{grid-template-columns:1fr}
.resposta-direta{padding:22px 20px;border-radius:0 14px 14px 0}
.resposta-direta p:last-child{font-size:1.02rem}
.passo-lista li{grid-template-columns:1fr;gap:6px;padding:20px}
.nao-fazer li{padding:14px 16px 14px 46px}
.nao-fazer li::before{left:16px}
}
/* ============================================================
MOTION — arquétipo Premium, três camadas (primária, secundária,
ambiente). Só transform e opacity: rodam na GPU, sem reflow.
============================================================ */
/* ---------- 1. PRIMÁRIA: revelação de seção ----------
FAIL-SAFE: o estado escondido é condicionado a `.js` no , que um
inline de uma linha no
aplica. Se o motion.js não carregar (rede
caindo, bloqueador, erro), a classe não existe e a página aparece inteira.
Site de urgência não pode ficar em branco porque um script falhou. */
.js .reveal{
opacity:0;transform:translateY(18px);
transition:opacity var(--d-lento) var(--e), transform var(--d-lento) var(--e);
}
.js .reveal.in{opacity:1;transform:none}
/* ---------- 2. SECUNDÁRIA: sombra chega DEPOIS do cartão ----------
Follow-through: o objeto assenta, a sombra alcança 90ms atrasada.
É o que separa "apareceu" de "pousou". */
.card-esp,.sinal,.outra,.parceria,.passo,.funil{
transition:transform var(--d-padrao) var(--e),
border-color var(--d-padrao) var(--e),
box-shadow var(--d-padrao) var(--e) 90ms,
background var(--d-padrao) var(--e);
}
.card-esp:hover,.sinal:hover,.outra:hover{transform:translateY(-4px)}
/* o ícone acompanha, mas menos: motion secundária anda a ~40% da primária */
.card-esp .espec-ico,.sinal .ico,.outra .oico{
transition:transform var(--d-padrao) var(--e), color var(--d-padrao) var(--e);
}
.card-esp:hover .espec-ico,.sinal:hover .ico,.outra:hover .oico{transform:translateY(-2px)}
/* ---------- 3. INTERAÇÃO: press feedback ----------
Premium = sem overshoot. Só afunda e volta. */
.btn,.flutuante a{transition:transform var(--d-rapido) var(--e),
background var(--d-rapido) var(--e),
border-color var(--d-rapido) var(--e),
color var(--d-rapido) var(--e),
box-shadow var(--d-rapido) var(--e)}
.btn:active{transform:scale(.985)}
.flutuante a:active{transform:scale(.94)}
/* ---------- 4. AMBIENTE: o B respira com a rolagem ----------
Contra-motion: a página desce, o B sobe a ~18% da velocidade.
Dá profundidade sem que ninguém perceba que existe. */
.ghost-b::after{
transform:translateY(calc(-50% + var(--par,0px)));
will-change:transform;
}
/* ---------- 5. AMBIENTE: o selo 24h respira ---------- */
@keyframes respira{
0%,100%{transform:scale(1)}
50% {transform:scale(1.035)}
}
.selo-24{animation:respira 5.5s var(--e) infinite}
.selo-24 svg{transition:transform var(--d-lento) var(--e)}
/* ---------- 6. cabeçalho condensa ao rolar ----------
Libera altura de tela no celular sem tirar o CTA de urgência. */
header.site{transition:box-shadow var(--d-padrao) var(--e)}
header.site .wrap{transition:min-height var(--d-padrao) var(--e)}
header.site .logo img{transition:height var(--d-padrao) var(--e)}
header.site.compacto{box-shadow:0 10px 30px rgba(38,33,27,.13)}
header.site.compacto .wrap{min-height:60px}
header.site.compacto .logo img{height:27px}
/* ---------- 7. barra de progresso de leitura (páginas de guia) ---------- */
.progresso{
position:fixed;top:0;left:0;height:2px;width:100%;z-index:90;
transform:scaleX(var(--p,0));transform-origin:0 50%;
background:linear-gradient(90deg,var(--ouro-escuro),var(--ouro-luz));
pointer-events:none;
}
/* ---------- 8. FAQ: disclosure animada ----------
`` abre no talho. A altura é animada por JS (mede e solta),
e o conteúdo continua no DOM — o crawler lê fechado do mesmo jeito. */
.faq details>p,.faq details>.resp{
overflow:hidden;
transition:height var(--d-padrao) var(--e), opacity var(--d-rapido) var(--e);
}
.faq summary{transition:color var(--d-rapido) var(--e)}
.faq summary:hover{color:var(--ouro-escuro)}
.emergencia .faq summary:hover{color:var(--ouro-luz)}
/* ---------- 9. flutuantes entram depois do hero ----------
Também fail-safe, e pelo mesmo motivo: o botão de ligar é o elemento
mais importante do site. Ele nasce VISÍVEL; o JS é que o recolhe
enquanto o hero (que já tem o telefone) está na tela. */
.flutuante{transition:opacity var(--d-padrao) var(--e), transform var(--d-padrao) var(--e)}
.js .flutuante.recolhido{opacity:0;transform:translateY(14px) scale(.9);pointer-events:none}
/* ---------- 10. copiar telefone (desktop): feedback de sucesso ----------
No desktop `tel:` geralmente não faz nada — o clique vira beco sem
saída justo no elemento mais importante da página. Aqui ele copia. */
.copiado{
position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(12px);
background:var(--grafite);color:var(--ouro-luz);
padding:13px 22px;border-radius:999px;font-size:.84rem;font-weight:600;
letter-spacing:.05em;box-shadow:0 16px 40px rgba(38,33,27,.34);
opacity:0;pointer-events:none;z-index:120;
transition:opacity var(--d-rapido) var(--e), transform var(--d-padrao) var(--e);
}
.copiado.vis{opacity:1;transform:translateX(-50%)}
/* ---------- 11. link de âncora: sublinhado que cresce ---------- */
.dado-local a,.faq a,.migalhas a{
background-image:linear-gradient(currentColor,currentColor);
background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
border-bottom-color:transparent!important;
transition:background-size var(--d-padrao) var(--e);
}
.dado-local a:hover,.faq a:hover,.migalhas a:hover{background-size:100% 1px}
/* ============================================================
prefers-reduced-motion — obrigatório. Desliga TUDO que é
movimento e mantém o site inteiramente utilizável.
============================================================ */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important;
}
.js .reveal{opacity:1;transform:none}
.js .flutuante.recolhido{opacity:1;transform:none;pointer-events:auto}
.ghost-b::after{transform:translateY(-50%)}
.selo-24{animation:none}
.progresso{display:none}
}
/* ============================================================
CAMADA DE INTERAÇÃO — passada sistemática de hover e foco.
Amplitudes pequenas de propósito: o arquétipo é Premium, não
Playful. Nada salta; tudo assenta.
============================================================ */
/* ---------- 12. FOCO VISÍVEL — o detalhe que todo mundo esquece ----------
Quem navega por teclado precisa ver onde está. A cor troca conforme
o fundo, para o anel não sumir no grafite. */
:focus-visible{
outline:2px solid var(--ouro-escuro);outline-offset:3px;border-radius:6px;
}
.emergencia :focus-visible,footer.site :focus-visible,.topbar :focus-visible{
outline-color:var(--ouro-luz);
}
.btn:focus-visible{outline-offset:4px}
/* ---------- 13. FOTOS — zoom contido + sombra que aprofunda ----------
O recorte fica no invólucro; a imagem é que escala. Sem isso a
escala vaza e empurra o layout. */
.retrato,.dra .foto,.galeria figure,.local .predio,.emergencia .porta,.mapa{
overflow:hidden;
}
.retrato img,.dra .foto img,.galeria figure img,.local .predio img,.emergencia .porta img{
transition:transform 640ms var(--e), filter var(--d-padrao) var(--e);
will-change:transform;
}
.retrato:hover img,.dra .foto:hover img,.galeria figure:hover img,
.local .predio:hover img,.emergencia .porta:hover img{
transform:scale(1.045);
}
.retrato,.dra .foto,.local .predio,.emergencia .porta{
transition:box-shadow var(--d-padrao) var(--e);
}
.retrato:hover,.dra .foto:hover,.local .predio:hover{box-shadow:0 40px 84px rgba(38,33,27,.3)}
.emergencia .porta:hover{box-shadow:0 36px 72px rgba(0,0,0,.5);border-color:rgba(221,190,147,.4)}
.galeria figure{transition:box-shadow var(--d-padrao) var(--e)}
.galeria figure:hover{box-shadow:0 26px 54px rgba(0,0,0,.42)}
/* a foto das especialidades é a própria ![]()
, sem invólucro: ali o gesto
é luz e sombra, não escala — escalar vazaria por cima do selo. */
img.espec-foto{transition:box-shadow var(--d-padrao) var(--e), filter var(--d-padrao) var(--e)}
img.espec-foto:hover{box-shadow:0 40px 80px rgba(38,33,27,.28);filter:brightness(1.04) saturate(1.04)}
/* mapa: reage ao cursor para convidar ao clique */
.mapa{transition:box-shadow var(--d-padrao) var(--e),border-color var(--d-padrao) var(--e)}
.mapa iframe{transition:filter var(--d-padrao) var(--e)}
.mapa:hover{border-color:var(--ouro);box-shadow:0 22px 48px rgba(38,33,27,.16)}
.mapa:hover iframe{filter:saturate(.95) contrast(1.04)}
/* ---------- 14. SPOTLIGHT — luz que segue o cursor nos cartões ----------
Radial ancorado em --mx/--my, alimentado pelo JS. É o gesto que mais
entrega "caro" sem mover nada de lugar. */
.card-esp,.sinal,.passo,.parceria,.funil{position:relative;overflow:hidden;isolation:isolate}
.card-esp::before,.sinal::before,.passo::before,.parceria::before,.funil::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
rgba(99,76,52,.10), transparent 62%);
transition:opacity var(--d-padrao) var(--e);
}
.emergencia .passo::before,.emergencia .parceria::before,
.funil.porta::before,.card-esp.destaque::before{
background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
rgba(221,190,147,.15), transparent 62%);
}
.card-esp:hover::before,.sinal:hover::before,.passo:hover::before,
.parceria:hover::before,.funil:hover::before{opacity:1}
/* cartões que ainda não tinham gesto nenhum */
.passo:hover,.parceria:hover,.funil:hover{transform:translateY(-3px)}
.funil{transition:transform var(--d-padrao) var(--e),box-shadow var(--d-padrao) var(--e) 90ms}
.funil:hover{box-shadow:0 26px 54px rgba(38,33,27,.14)}
.funil.porta:hover{box-shadow:0 26px 54px rgba(0,0,0,.4)}
.parceria:hover{border-color:rgba(221,190,147,.5)}
/* ---------- 15. NAVEGAÇÃO — sublinhado que cresce do centro ---------- */
@media (min-width:981px){
nav.principal>a,nav.principal>.tem-sub>a{position:relative}
nav.principal>a::after,nav.principal>.tem-sub>a::after{
content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;
background:currentColor;transform:scaleX(0);transform-origin:50% 50%;
transition:transform var(--d-padrao) var(--e);
}
nav.principal>a:hover::after,nav.principal>.tem-sub>a:hover::after,
nav.principal>a.aqui::after{transform:scaleX(1)}
nav.principal>a.aqui{color:var(--ouro-escuro)}
}
/* ---------- 16. BOTÕES — elevar, não inflar ---------- */
.btn-ouro:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(38,33,27,.26)}
.emergencia .btn-ouro:hover{box-shadow:0 14px 30px rgba(0,0,0,.4)}
.btn-linha:hover{transform:translateY(-2px);border-color:var(--ouro-escuro)}
.emergencia .btn-linha:hover{border-color:var(--ouro-luz)}
.btn:active,.btn-ouro:active,.btn-linha:active{transform:translateY(0) scale(.985)}
/* ---------- 17. AS MIUDEZAS QUE FALTAVAM ---------- */
.chip{transition:transform var(--d-rapido) var(--e),border-color var(--d-rapido) var(--e),
background var(--d-rapido) var(--e)}
.chip:hover{transform:translateY(-2px);border-color:var(--ouro);background:rgba(242,237,230,.85)}
.logo{transition:opacity var(--d-rapido) var(--e)}
.logo:hover{opacity:.72}
.topbar a{transition:color var(--d-rapido) var(--e),border-color var(--d-rapido) var(--e)}
.topbar a:hover{color:#F0DDBB;border-color:var(--ouro-luz)}
footer.site ul a{
background-image:linear-gradient(currentColor,currentColor);
background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
transition:background-size var(--d-padrao) var(--e),color var(--d-rapido) var(--e);
}
footer.site ul a:hover{background-size:100% 1px}
footer.site .marca img{transition:opacity var(--d-rapido) var(--e)}
footer.site .marca:hover img{opacity:.75}
.legal a{transition:color var(--d-rapido) var(--e)}
.legal a:hover{color:var(--ouro-luz)}
.dado-local{transition:background var(--d-rapido) var(--e)}
.dado-local:hover{background:rgba(99,76,52,.045)}
/* o número grande é o elemento mais importante da página: merece gesto */
.fone-grande{position:relative;transition:color var(--d-rapido) var(--e)}
.fone-grande::after{
content:"";position:absolute;left:0;right:0;bottom:.06em;height:1px;
background:currentColor;transform:scaleX(0);transform-origin:0 50%;
transition:transform var(--d-lento) var(--e);
}
.fone-grande:hover{color:#F0DDBB}
.fone-grande:hover::after{transform:scaleX(1)}
/* o selo para de respirar quando o cursor chega: deixa de ser enfeite
e vira objeto sob o controle de quem olha */
.selo-24:hover{animation-play-state:paused}
.selo-24 svg{transition:transform var(--d-padrao) var(--e)}
.selo-24:hover svg{transform:scale(1.06)}
.selo-grande{transition:transform var(--d-lento) var(--e),opacity var(--d-padrao) var(--e)}
.selo-grande:hover{transform:rotate(4deg) scale(1.04);opacity:1}
/* bloco de resposta direta: a barra lateral engrossa no hover */
.resposta-direta{transition:box-shadow var(--d-padrao) var(--e),
border-left-width var(--d-rapido) var(--e)}
.resposta-direta:hover{box-shadow:0 22px 46px rgba(38,33,27,.11);border-left-width:6px}
/* ---------- 18. LIGHTBOX da galeria ---------- */
.galeria figure{cursor:zoom-in}
.lightbox{
position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:5vmin;
background:rgba(20,17,14,.92);backdrop-filter:blur(6px);
opacity:0;visibility:hidden;
transition:opacity var(--d-padrao) var(--e),visibility var(--d-padrao);
}
.lightbox.aberto{opacity:1;visibility:visible}
.lightbox img{
max-width:100%;max-height:88vh;border-radius:18px;
box-shadow:0 40px 100px rgba(0,0,0,.6);
transform:scale(.965);transition:transform var(--d-padrao) var(--e);
}
.lightbox.aberto img{transform:none}
.lightbox .legenda{
position:absolute;left:0;right:0;bottom:22px;text-align:center;
color:var(--luz-2);font-size:.86rem;padding:0 20px;
}
.lightbox .fechar-lb{
position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;
border:1px solid rgba(239,231,218,.3);background:transparent;color:var(--luz);
font-size:1.5rem;line-height:1;cursor:pointer;
transition:background var(--d-rapido) var(--e),transform var(--d-rapido) var(--e);
}
.lightbox .fechar-lb:hover{background:rgba(239,231,218,.12);transform:scale(1.06)}
/* ---------- 19. ÍNDICE LATERAL nas páginas de guia (só ≥1200px) ---------- */
.indice{
position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:70;
display:none;flex-direction:column;gap:14px;
}
@media (min-width:1280px){.indice{display:flex}}
.indice a{display:flex;align-items:center;gap:11px;color:var(--cimento);
font-size:.72rem;letter-spacing:.06em}
.indice .ponto{
width:8px;height:8px;border-radius:50%;flex:none;
border:1px solid var(--ouro-escuro);background:transparent;
transition:background var(--d-padrao) var(--e),transform var(--d-padrao) var(--e);
}
.indice .rot{
/* etiqueta flutuante: ganha fundo próprio para poder passar por cima do
conteúdo sem virar sopa de letras quando a tela é justa */
max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
background:var(--nevoa);border:1px solid rgba(99,76,52,.18);
border-radius:999px;box-shadow:0 8px 22px rgba(38,33,27,.14);
padding:0;line-height:1;
transition:max-width var(--d-padrao) var(--e),opacity var(--d-padrao) var(--e),
padding var(--d-padrao) var(--e);
}
.indice a:hover .rot,.indice a.aqui .rot{padding:8px 14px}
.indice a:hover .rot{max-width:210px;opacity:1}
.indice a:hover .ponto,.indice a.aqui .ponto{background:var(--ouro-escuro);transform:scale(1.3)}
.indice a.aqui .rot{max-width:210px;opacity:.9}
/* ---------- 20. VOLTAR AO TOPO ---------- */
.ao-topo{
position:fixed;right:18px;bottom:150px;z-index:80;
width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
background:rgba(242,237,230,.94);color:var(--grafite);
border:1px solid rgba(99,76,52,.22);cursor:pointer;
box-shadow:0 10px 24px rgba(38,33,27,.2);
opacity:0;transform:translateY(10px);pointer-events:none;
transition:opacity var(--d-padrao) var(--e),transform var(--d-padrao) var(--e),
background var(--d-rapido) var(--e);
}
.ao-topo.vis{opacity:1;transform:none;pointer-events:auto}
.ao-topo:hover{background:#fff;transform:translateY(-3px)}
.ao-topo svg{width:19px;height:19px}
@media (max-width:560px){.ao-topo{bottom:128px;right:14px;width:40px;height:40px}}
/* ---------- reduced motion: some tudo o que é deslocamento ---------- */
@media (prefers-reduced-motion:reduce){
.retrato:hover img,.dra .foto:hover img,.galeria figure:hover img,
.local .predio:hover img,.emergencia .porta:hover img,
.selo-24:hover svg,.selo-grande:hover,
.passo:hover,.parceria:hover,.funil:hover,
.btn-ouro:hover,.btn-linha:hover,.chip:hover,.ao-topo:hover{transform:none}
.card-esp::before,.sinal::before,.passo::before,
.parceria::before,.funil::before{display:none}
.lightbox img{transform:none}
.indice,.ao-topo{transition:none}
}