/* ===================================================================
   CDB Mais - folha de estilo unica
   Usada por: index.html | servicos.html | empresas.html | contato.html
   Fundo navy + cinza-aco + branco. Titulos: IBM Plex Sans. Texto: Inter.
   =================================================================== */

:root{
  --ink:#0B1524;
  --navy:#122A47;
  --navy2:#1B3C61;
  --navy3:#2A5480;
  --accent:#2F6BA8;
  --wa:#128C7E;
  --bg:#FFFFFF;
  --bg-soft:#F4F6FA;
  --bg-soft2:#EAEFF6;
  --line:#DCE3EC;
  --muted:#5A6B80;
  --r:12px;
  --shadow-s:0 1px 3px rgba(11,21,36,.06);
  --shadow:0 6px 18px rgba(11,21,36,.08);
  --shadow-l:0 14px 34px rgba(11,21,36,.12);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --head:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:var(--bg);line-height:1.68;
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand .n,.btn,.num b,.price b,.svcprice b,.info b,
.eyebrow,.kicker,.pill,.tag,.passo .num,nav.top a,.mobnav summary{
  font-family:var(--head);
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- animacao de entrada ---------- */
.rev{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rev{opacity:0;transform:translateY(20px)}
.js .rev.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rev{opacity:1;transform:none;transition:none}}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:80;background:rgba(11,21,36,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.10)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 22px;max-width:1140px;margin:0 auto}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:#fff}
.brand img{width:48px;height:48px;border-radius:12px}
.brand .n{font-weight:700;font-size:19.5px;letter-spacing:.2px;line-height:1.1;display:block}
.brand .s{font-size:11.4px;color:#9FB6CE;font-weight:500;letter-spacing:.6px;text-transform:uppercase}
nav.top{display:flex;gap:26px}
nav.top a{color:#C2D3E6;text-decoration:none;font-size:14.6px;font-weight:600;position:relative;padding:4px 0}
nav.top a:after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:#6D9CC4;transition:right .25s}
nav.top a:hover{color:#fff}
nav.top a:hover:after{right:0}
nav.top a.on{color:#fff}
nav.top a.on:after{right:0}
.hactions{display:flex;align-items:center;gap:12px}

.mobnav{display:none;position:relative}
.mobnav summary{list-style:none;cursor:pointer;color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:10px 14px;font-size:14.6px;font-weight:600}
.mobnav summary::-webkit-details-marker{display:none}
.mobnav nav{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-l);padding:8px;min-width:210px;display:flex;flex-direction:column}
.mobnav nav a{color:var(--ink);text-decoration:none;padding:11px 14px;border-radius:8px;font-weight:600;font-size:15px}
.mobnav nav a:hover{background:var(--bg-soft)}
.mobnav nav a.on{background:var(--bg-soft2);color:var(--navy2)}
@media(max-width:900px){
  nav.top{display:none}
  .mobnav{display:block}
}
@media(max-width:520px){
  .brand .s{display:none}
  .hactions .btn-wa span{display:none}
}

/* ---------- botoes ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:10px;text-decoration:none;font-weight:600;font-size:15.3px;border:2px solid transparent;transition:transform .15s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:19px;height:19px;flex:0 0 19px}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 2px 10px rgba(18,140,126,.26)}
.btn-wa:hover{background:#0F7A6E}
.btn-accent{background:var(--navy2);color:#fff;box-shadow:0 2px 10px rgba(27,60,97,.24)}
.btn-accent:hover{background:var(--navy3)}
.btn-ghost{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-out{background:#fff;color:var(--navy);border-color:var(--line);box-shadow:var(--shadow-s)}
.btn-out:hover{border-color:var(--navy3)}
.btn-sm{padding:11px 18px;font-size:14.4px;border-radius:9px}
.btn-sm svg{width:17px;height:17px;flex:0 0 17px}

/* ---------- hero (home) ---------- */
.hero{position:relative;overflow:hidden;color:#fff;padding:64px 0 78px;
  background:
    radial-gradient(1100px 520px at 12% -18%,#1B3C61 0%,transparent 62%),
    radial-gradient(820px 440px at 94% 6%,#16405F 0%,transparent 60%),
    linear-gradient(160deg,#0B1524 0%,#122A47 58%,#1B3C61 100%);}
.hero .wrap{position:relative;z-index:2}
.hgrid{display:grid;gap:48px;grid-template-columns:1.08fr .92fr;align-items:center}
@media(max-width:980px){.hgrid{grid-template-columns:1fr;gap:36px}}

/* animacao 3D do topo */
.hero-img{margin:0}
.hero-img picture{display:block}
.hero-img img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 20px 30px rgba(3,8,16,.38))}
@media(max-width:980px){.hero-img{max-width:520px;margin:4px auto 0}}

/* ---------- hero (paginas internas) ---------- */
.pagehero{color:#fff;padding:54px 0 58px;
  background:radial-gradient(900px 380px at 12% -20%,#1B3C61 0%,transparent 62%),
             linear-gradient(160deg,#0B1524,#122A47);}
.pagehero h1{font-size:clamp(26px,3.6vw,40px);line-height:1.14;margin:0 0 12px;letter-spacing:-.7px;font-weight:700}
.pagehero p{color:#BCCBDD;max-width:740px;margin:0;font-size:16.6px}
.breadcrumb{font-size:13.4px;color:#8FA9C4;margin-bottom:16px}
.breadcrumb a{color:#B9C9DC;text-decoration:none}
.breadcrumb a:hover{color:#fff;text-decoration:underline}

/* ---------- textos ---------- */
.kicker{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.20);color:#BFD3E8;font-weight:600;font-size:12.2px;letter-spacing:1.2px;text-transform:uppercase;padding:8px 15px;border-radius:8px;margin-bottom:20px}
.kicker i{width:7px;height:7px;border-radius:50%;background:#6D9CC4;display:block}
h1{font-size:clamp(30px,4.6vw,50px);line-height:1.1;margin:0 0 18px;letter-spacing:-.9px;font-weight:700}
h1 em{font-style:normal;color:#A9C6E4}
.hero p{font-size:clamp(15.5px,1.75vw,18.5px);color:#C3D7E8;max-width:600px;margin:0 0 30px}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.selos{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.selo{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);color:#CFDDEC;padding:8px 15px;border-radius:8px;font-size:13.1px;font-weight:600}
.selo svg{width:15px;height:15px;flex:0 0 15px}

section{padding:82px 0}
section.soft{background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg-soft2) 100%)}
.eyebrow{color:var(--navy3);font-weight:600;font-size:12.4px;letter-spacing:1.7px;text-transform:uppercase;margin-bottom:12px}
h2{font-size:clamp(24px,3.2vw,36px);line-height:1.18;margin:0 0 14px;letter-spacing:-.7px;font-weight:700}
h3{font-weight:700}
.lead{color:var(--muted);font-size:17.4px;max-width:780px;margin:0 0 42px}
.nota{font-size:13.8px;color:var(--muted);margin-top:16px}

/* ---------- ilustracao do hero ---------- */
.art{position:relative}
.art svg{width:100%;height:auto;filter:drop-shadow(0 26px 54px rgba(0,0,0,.42))}
.float-card{position:absolute;background:rgba(255,255,255,.97);border-radius:12px;padding:11px 15px;box-shadow:0 16px 40px rgba(0,0,0,.30);display:flex;align-items:center;gap:10px;font-size:13.3px;font-weight:700;color:var(--ink)}
.float-card small{display:block;font-weight:500;color:var(--muted);font-size:11.5px}
.fc1{top:6%;left:-2%;animation:fl1 6s ease-in-out infinite}
.fc2{bottom:9%;right:-1%;animation:fl2 7s ease-in-out infinite}
.dot{width:10px;height:10px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 4px rgba(18,140,126,.20);flex:0 0 10px}
@keyframes fl1{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes fl2{0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}}
@media(max-width:620px){.float-card{display:none}}

/* ---------- numeros ---------- */
.nums{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:46px}
.nums.up{margin-top:-42px;position:relative;z-index:5}
.num{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;text-align:center;box-shadow:var(--shadow-s)}
.num b{display:block;font-size:25px;font-weight:700;letter-spacing:-.6px;color:var(--navy2)}
.num span{color:var(--muted);font-size:13.8px}

/* ---------- cards de servico ---------- */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 24px;box-shadow:var(--shadow-s);display:flex;flex-direction:column;transition:transform .2s,box-shadow .22s,border-color .22s;overflow:hidden}
.card:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--navy2);opacity:0;transition:opacity .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-l);border-color:#C3D0E0}
.card:hover:before{opacity:1}
.ico{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#EAF3FF,#D8E8FB);color:var(--navy2);margin-bottom:16px;flex:0 0 auto}
.ico svg{width:27px;height:27px}
.card h3{margin:0 0 8px;font-size:19px;letter-spacing:-.3px}
.card p{margin:0 0 18px;color:var(--muted);font-size:14.9px;flex:1}
.price{display:flex;align-items:baseline;gap:8px;border-top:1px dashed var(--line);padding-top:16px;flex-wrap:wrap}
.price b{font-size:20px;font-weight:700;letter-spacing:-.4px}
.price span{font-size:13.4px;color:var(--muted)}
.tag{position:absolute;top:18px;right:18px;background:var(--navy2);color:#fff;font-size:10.6px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;padding:5px 11px;border-radius:6px}

/* ---------- lista detalhada de servicos ---------- */
.svclist{display:grid;gap:16px}
.svc{display:grid;grid-template-columns:60px 1fr auto;gap:22px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-s);transition:box-shadow .22s,border-color .22s}
.svc:hover{box-shadow:var(--shadow);border-color:#C3D0E0}
.svc .ico{margin:0}
.svc h3{margin:0 0 7px;font-size:19.4px;letter-spacing:-.3px}
.svc p{margin:0 0 12px;color:var(--muted);font-size:15px}
.svc ul{margin:0;padding-left:20px;color:var(--muted);font-size:14.6px}
.svc ul li{margin-bottom:6px}
.svcprice{text-align:right;white-space:nowrap}
.svcprice b{display:block;font-size:19px;font-weight:700;color:var(--navy2);letter-spacing:-.3px}
.svcprice span{font-size:12.8px;color:var(--muted)}
@media(max-width:760px){
  .svc{grid-template-columns:52px 1fr;gap:16px;padding:22px}
  .svcprice{grid-column:2;text-align:left;margin-top:6px}
}

/* ---------- antes e depois ---------- */
.ad{display:grid;gap:26px;grid-template-columns:1fr 1fr}
@media(max-width:820px){.ad{grid-template-columns:1fr}}
.adc{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s);transition:box-shadow .25s,transform .25s}
.adc:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.adimg{position:relative;aspect-ratio:16/10;overflow:hidden;background:#E9EFF6}
.adimg img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.adc:hover .adimg img{transform:scale(1.04)}
.adc figcaption{padding:24px 26px 28px}
.adc h3{margin:14px 0 7px;font-size:18.6px;letter-spacing:-.3px}
.adc p{margin:0;color:var(--muted);font-size:14.9px}
.pill{display:inline-block;font-size:11.2px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:6px 13px;border-radius:6px}
.pill-bad{background:#F2E8E8;color:#8B3A3A}
.pill-good{background:#E5F0EB;color:#1E6B4E}

/* ---------- tabela ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.tbl th,.tbl td{padding:17px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:15.2px;vertical-align:top}
.tbl th{background:linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;font-size:13.2px;letter-spacing:.7px;text-transform:uppercase;font-weight:600}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:#F8FBFF}
.tbl td:last-child{font-weight:700;white-space:nowrap;color:var(--navy2)}
.tbl b{display:block;font-size:15.6px;font-family:var(--head)}
.tbl i{font-style:normal;color:var(--muted);font-size:14.2px}

/* tabela de precos: no celular ela rola sozinha, sem arrastar a pagina inteira */
.tbl-wrap{max-width:100%}
.dica-rolagem{display:none}
@media(max-width:820px){
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .tbl{min-width:640px}
  .dica-rolagem{display:block;font-size:13.2px;color:var(--muted);margin:10px 0 0}
}

/* ---------- passos ---------- */
.passos{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
.passo{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow-s)}
.passo .num{width:38px;height:38px;border-radius:9px;background:var(--navy2);color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-family:var(--head)}
.passo h4{margin:0 0 7px;font-size:17px;font-weight:700}
.passo p{margin:0;color:var(--muted);font-size:14.7px}

/* ---------- diferenciais ---------- */
.feats{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.feat{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow-s)}
.feat b{display:block;font-size:15.9px;margin-bottom:3px;font-family:var(--head);font-weight:700}
.feat span{color:var(--muted);font-size:14.4px}
.tick{flex:0 0 28px;width:28px;height:28px;border-radius:7px;background:#E9EFF6;color:var(--navy2);display:flex;align-items:center;justify-content:center;margin-top:1px}
.tick svg{width:16px;height:16px}

/* ---------- area / chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:11px}
.chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 18px;font-size:14.5px;font-weight:600;box-shadow:var(--shadow-s)}
.chip svg{width:15px;height:15px;color:var(--navy3);flex:0 0 15px}

/* ---------- contato ---------- */
.infogrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.info{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:6px}
.info .ico{margin-bottom:12px}
.info b{display:block;font-size:16.6px;font-weight:700}
.info span{color:var(--muted);font-size:14.6px}
.info a{color:var(--accent);text-decoration:none;font-weight:600;font-size:15.4px;word-break:break-word}
.info a:hover{text-decoration:underline}

/* ---------- faixa final ---------- */
.final{position:relative;overflow:hidden;border-radius:14px;padding:56px 40px;text-align:center;color:#fff;
  background:radial-gradient(760px 360px at 12% -10%,#1B3C61 0%,transparent 62%),
             linear-gradient(160deg,#0B1524,#1B3C61)}
.final:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(60% 70% at 50% 50%,#000,transparent 85%)}
.final > *{position:relative;z-index:2}
.final h2{color:#fff;margin-bottom:12px}
.final p{color:#BCCBDD;max-width:680px;margin:0 auto 30px;font-size:16.8px}
.final .cta{justify-content:center}
.final .obs{color:#9FB6CE;font-size:13.6px;margin:22px 0 0}

/* ---------- rodape ---------- */
footer{background:#0B1524;color:#9FB6CE;padding:56px 0 96px;font-size:14.4px;border-top:1px solid rgba(255,255,255,.12)}
footer .cols{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
footer b{color:#fff;display:block;margin-bottom:12px;font-size:15.6px;font-family:var(--head)}
footer a{color:#C3D7E8;text-decoration:none;display:inline-flex;align-items:center;gap:9px;margin-bottom:8px}
footer a:hover{color:#fff;text-decoration:underline}
footer svg{width:16px;height:16px;flex:0 0 16px}
footer nav{display:flex;flex-direction:column}
footer .copy{border-top:1px solid rgba(255,255,255,.13);margin-top:36px;padding-top:20px;font-size:13px;color:#7FA3CE;line-height:1.75}

/* ---------- whatsapp flutuante ---------- */
.float{position:fixed;right:22px;bottom:22px;z-index:90;background:var(--wa);color:#fff;border-radius:10px;padding:15px 22px;font-weight:600;text-decoration:none;box-shadow:0 10px 26px rgba(11,21,36,.26);display:flex;align-items:center;gap:11px;transition:transform .18s;font-family:var(--head)}
.float:hover{transform:translateY(-3px);background:#0F7A6E}
.float svg{width:21px;height:21px}
@media(max-width:640px){.float{right:14px;left:14px;justify-content:center;bottom:14px;font-size:15px;padding:14px 20px}}

/* ---------- FAQ ---------- */
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:12px;box-shadow:var(--shadow-s)}
.faq details[open]{border-color:#C3D0E0}
.faq summary{font-family:var(--head);font-weight:700;font-size:16.4px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";float:right;color:var(--navy3);font-weight:800;font-size:20px;line-height:1}
.faq details[open] summary:after{content:"\2212"}
.faq p{margin:12px 0 0;color:var(--muted);font-size:15px}

/* ---------- utilidades ---------- */
.mt{margin-top:30px}
.mt-s{margin-top:18px}
.center{text-align:center}
.pt0{padding-top:0}