/* DC Perícias · camada "arredondado" (estilo Apple). Vai depois de dcp-claro.css.
Só forma, sombra e vidro. Sem cores novas, sem texto, sem mexer em rastreio.
Reverter = remover o da página. */
:root{
--r-sm:12px; --r-md:20px; --r-lg:28px; --r-pill:999px;
--sombra-1:0 1px 2px rgba(16,48,60,.05), 0 8px 24px rgba(16,48,60,.07);
--sombra-2:0 2px 4px rgba(16,48,60,.06), 0 18px 44px rgba(16,48,60,.12);
--mola:cubic-bezier(.22,1,.36,1);
}
/* cabeçalho: ilha de vidro flutuante, só do tamanho do conteúdo; encolhe ao rolar */
html body header{
margin:10px auto 0; width:fit-content; max-width:calc(100% - 24px);
border:1.5px solid #8c6a28; border-radius:var(--r-pill);
background:rgba(251,248,241,.78);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset, var(--sombra-1);
-webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
transition:margin .35s var(--mola), box-shadow .35s var(--mola), background-color .35s var(--mola);
}
html body header nav.wrap{padding:8px clamp(14px,1.6vw,22px); gap:14px; transition:padding .35s var(--mola)}
html body header .logo-img{height:46px; transition:height .35s var(--mola)}
html.dcp-rolou body header{margin-top:6px; background:rgba(251,248,241,.9); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, var(--sombra-2)}
html.dcp-rolou body header nav.wrap{padding-top:4px; padding-bottom:4px}
html.dcp-rolou body header .logo-img{height:34px}
@media(max-width:860px){ html body header .logo-img{height:38px} html.dcp-rolou body header .logo-img{height:30px} }
html body .nav-links{gap:2px}
html body .nav-links a{border-radius:var(--r-pill); padding:7px 7px; font-size:13.5px; white-space:nowrap; transition:background-color .25s var(--mola), color .25s var(--mola)}
html body .nav-links a:hover, html body .nav-links a.active{background:rgba(217,184,120,.22)}
html body .nav-excl{
display:inline-flex; align-items:center; gap:7px; margin-left:8px; padding:7px 13px; border-radius:var(--r-pill);
font-size:13px; font-weight:600; color:#8c6a28; text-decoration:none; white-space:nowrap;
border:1px solid rgba(160,124,52,.45); background:rgba(255,253,248,.7);
transition:background-color .25s var(--mola), transform .16s var(--mola);
}
html body .nav-excl:hover{background:#fff}
html body .nav-excl:active{transform:scale(.96)}
html body .nav-excl svg{width:13px; height:13px}
html body .nav-excl{padding:8px 10px; margin-left:4px}
/* botões */
html body .cta-btn, html body .ag2-btn, html body button.cta{border-radius:var(--r-pill)}
html body .cta-btn{padding-left:28px; padding-right:28px}
/* cartões */
html body .quadro-card, html body .area-card, html body .service, html body .why-item,
html body .process-step, html body .roi-item, html body .strip-item, html body .dcp-aval-item,
html body .rung-level, html body .mini-artigo, html body .faq-item{
border-radius:var(--r-md);
}
html body .quadro-card, html body .area-card, html body .service, html body .why-item,
html body .process-step, html body .roi-item, html body .dcp-aval-item{
background:rgba(255,253,248,.82); border:1px solid rgba(160,124,52,.22); box-shadow:var(--sombra-1);
transition:transform .35s var(--mola), box-shadow .35s var(--mola), border-color .35s var(--mola);
}
@media (hover:hover) and (pointer:fine){
html body .quadro-card:hover, html body .area-card:hover, html body .service:hover, html body .why-item:hover{
transform:translateY(-3px); box-shadow:var(--sombra-2); border-color:rgba(160,124,52,.5);
}
}
/* FAQ: mesmo desenho da LP do Tiago (cartão, pergunta em serifa, mais de ouro num círculo) */
html body .faq-item{background:rgba(255,253,248,.82); border:1px solid rgba(160,124,52,.2); box-shadow:var(--sombra-1); margin-bottom:10px; overflow:hidden}
html body .faq-q{display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; padding:20px 24px; text-align:left;
font-family:'Fraunces',Georgia,serif; font-size:1.12rem; line-height:1.3; color:#10303c}
html body .faq-q .plus{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#f3e8cb; color:#8c6a28; font-size:19px; line-height:1}
html body .faq-a p{padding:0 24px 22px; margin:0}
html body .dcp-aval-foto{border-radius:50%}
/* imagens e vídeos de conteúdo */
html body main img:not(.logo-img):not([class*="selo"]), html body .hero-bg{border-radius:0}
html body .brand-outro img{border-radius:var(--r-lg)}
/* campos */
html body input, html body select, html body textarea{border-radius:var(--r-sm)}
/* rodapé: painel arredondado */
html body footer{margin:40px 12px 12px; border-radius:var(--r-lg); border:1px solid rgba(160,124,52,.3)}
@media (prefers-reduced-motion:reduce){ html body *{transition-duration:.01ms !important} }
@media (prefers-reduced-transparency:reduce){ html body header{background:#fbf8f1; -webkit-backdrop-filter:none; backdrop-filter:none} }
@media(max-width:860px){
html body header{margin:8px auto 0; width:calc(100% - 16px); border-radius:22px}
html body footer{margin:28px 8px 8px; border-radius:22px}
html body .nav-excl{margin:14px 0 0}
/* menu lateral do celular: cadeado + texto (no desktop fica só o cadeado) */
html body .nav-excl{padding:8px 14px; gap:8px}
html body .nav-excl::after{content:"Equipe DC Perícias"; font-size:13.5px; font-weight:600; letter-spacing:.01em}
}
/* grades antes coladas (gap de 1–2 px dentro de moldura quadrada): viram cartões soltos */
html body .services-grid, html body .why-grid, html body .roi-grid, html body .ladder{
gap:14px; background:none; border:0;
}
html body .rung{border-radius:var(--r-md); border:1px solid rgba(160,124,52,.22); box-shadow:var(--sombra-1); overflow:hidden}
html body .rung.is-featured, html body .rung:nth-child(2){border-color:rgba(160,124,52,.55)}
html body .cred-photo, html body .cred-photo img{border-radius:var(--r-lg)}
html body .dcp-selo-foto{border-radius:50%}
html body .hero-ctas .cta-btn{box-shadow:0 10px 26px rgba(140,106,40,.24)}
html body .roi-close, html body .midcta, html body .pain-reframe{border-radius:var(--r-md)}
html body .pain-reframe{border-left-width:3px}
html body .process-step{padding:26px 24px}
html body .quadro-card{overflow:hidden}
/* ---- faixa fixa de texto correndo (só celular, só LP-completas; é um CTA que abre o formulário) ---- */
.dcp-faixa{display:none}
@media(max-width:860px){
.dcp-faixa{position:fixed;left:50%;top:8px;z-index:60;width:calc(100% - 16px);box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;
border-radius:999px;background:rgba(251,248,241,.95);border:1.5px solid #8c6a28;box-shadow:0 10px 26px -14px rgba(16,48,60,.45);text-decoration:none;overflow:hidden;
opacity:0;transform:translate(-50%,-14px);pointer-events:none;transition:opacity .4s var(--mola),transform .5s var(--mola)}
html.dcp-faixa-on .dcp-faixa{opacity:1;transform:translate(-50%,0);pointer-events:auto}
body.nav-open .dcp-faixa{opacity:0;pointer-events:none}
.dcp-faixa__lnk{flex:1;min-width:0;display:block;text-decoration:none;overflow:hidden}
.dcp-faixa__vp{display:block;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.dcp-faixa__trilho{display:inline-flex;white-space:nowrap;will-change:transform;animation:dcp-faixa-corre 56s linear infinite}
.dcp-faixa__g{display:inline-flex;align-items:center;flex:none}
.dcp-faixa__g b{font:600 13px/1 Inter,system-ui,sans-serif;color:#10303c;padding:0 14px}
.dcp-faixa__g i{width:5px;height:5px;border-radius:50%;background:#b8924a;flex:none}
.dcp-faixa__cta{flex:none;padding:9px 13px;border-radius:999px;background:#d9b878;color:#0c2530;font:700 12.5px/1 Inter,system-ui,sans-serif;text-decoration:none}
}
@keyframes dcp-faixa-corre{to{transform:translateX(-50%)}}
/* ---- celular, LP-completas: ao rolar fica SÓ a faixa; o cabeçalho some e volta ao chegar no topo ---- */
@media(max-width:860px){
html body header{transition:margin .35s var(--mola),box-shadow .35s var(--mola),background-color .35s var(--mola),transform .45s var(--mola),opacity .35s ease}
html.dcp-faixa-on body:not(.nav-open) header{transform:translateY(-130%);opacity:0;pointer-events:none}
}
/* ---- entrada simples em sequência (dcp-revela.js) ---- */
@media (prefers-reduced-motion:no-preference){
[data-rv] > .rv-item{opacity:0;transform:translate3d(0,24px,0);transition:opacity .6s ease,transform .75s var(--mola)}
[data-rv] > .rv-item.rv-in{opacity:1;transform:none}
}
/* ---- cabeçalho igual em todas as páginas: algumas páginas davam padding de 14px 24px ao