/* ==========================================================================
   OD3 Data Solutions — od3datasolutions.com
   Mobile-first. O layer >=921px reproduz o mockup aprovado
   (mockup/od3-mockup-b-dois-pilares-v6) em desktop.
   ========================================================================== */

:root{
  --petroleo:#0A0E17;--grafite:#10161F;--grafite2:#161E2A;--aco:#232E3D;
  --oxossi:#0C6046;--od3:#16E88C;--ambar:#F4B740;--ciano:#37C9E0;--coral:#F4736B;
  --nevoa:#F3F7F6;--cinza:#9AA7B4;--cinza2:#5D6B7A;
  --display:'Space Grotesk',sans-serif;--body:'Inter',sans-serif;--mono:'JetBrains Mono',monospace;
}

/* ---------- BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--petroleo);color:var(--nevoa);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.1}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
section{padding:76px 0}

.eyebrow{font:500 13px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--od3);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--od3);flex-shrink:0}
.g{color:var(--od3)}
.a{color:var(--ambar)}

/* utilitários (substituem os style="" inline do mockup) */
.mt20{margin-top:20px}
.pt40{padding-top:40px}
.center{justify-content:center}
.muted{color:var(--cinza2)!important}
/* só o texto muda de cor — o traço segue verde, como no mockup */
.eyebrow.ciano{color:var(--ciano)}
.eyebrow.ambar{color:var(--ambar)}

.btn{display:inline-flex;align-items:center;gap:10px;background:var(--od3);color:#04120B;font:600 16px var(--display);padding:17px 32px;border-radius:12px;transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(22,232,140,.28)}
.btn.ghost{background:transparent;color:var(--nevoa);border:2px solid var(--aco)}
.btn.ghost:hover{border-color:var(--od3);box-shadow:none;color:var(--od3)}
:focus-visible{outline:2px solid var(--od3);outline-offset:3px}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(10,14,23,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--aco)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:72px}
.logo{font:700 24px var(--display);letter-spacing:-.03em;flex-shrink:0}
.logo b{color:var(--od3);font-weight:700}
.logo small{display:block;font:500 8.5px var(--mono);letter-spacing:.4em;color:var(--cinza2);margin-top:1px}
nav ul{display:none;gap:34px;list-style:none}
nav ul a{font:500 14px var(--body);color:var(--cinza);transition:color .15s}
nav ul a:hover{color:var(--od3)}
nav .btn{padding:11px 18px;font-size:13.5px;white-space:nowrap}

/* ---------- HERO ---------- */
.hero{padding:84px 0 70px;background:radial-gradient(1100px 700px at 85% -10%,rgba(22,232,140,.10),transparent 60%),radial-gradient(900px 700px at -5% 110%,rgba(12,96,70,.22),transparent 60%)}
.hero h1{font-size:clamp(34px,7.4vw,76px);max-width:900px;margin:22px 0 22px}
.hero .lead{font-size:17px;color:var(--cinza);max-width:680px}
.hero .lead b{color:var(--nevoa);font-weight:600}
.hero .ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* PILARES */
.pilares{display:grid;grid-template-columns:1fr;gap:20px;margin-top:54px}
.pilar{position:relative;border:1px solid var(--aco);border-radius:22px;background:linear-gradient(165deg,var(--grafite2),var(--grafite));padding:32px 24px;transition:border-color .2s,transform .2s;display:block}
.pilar:hover{border-color:rgba(22,232,140,.55);transform:translateY(-4px)}
.pilar .tag{font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cinza2);padding-right:34px}
.pilar h3{font-size:clamp(23px,5.2vw,30px);margin:16px 0 14px}
.pilar p{color:var(--cinza);font-size:15.5px;max-width:440px}
.pilar .itens{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.pilar .itens span{font:500 12.5px var(--mono);color:var(--cinza);border:1px solid var(--aco);border-radius:100px;padding:7px 14px}
.pilar.dev{border-color:rgba(22,232,140,.35)}
.pilar.dev .tag{color:var(--od3)}
.pilar.dev .itens span{color:var(--od3);border-color:rgba(22,232,140,.35);background:rgba(22,232,140,.06)}
.pilar .go{position:absolute;top:28px;right:24px;font:500 22px var(--mono);color:var(--od3)}

/* ---------- ANTI-GENÉRICO ---------- */
.antig{background:var(--grafite);border-top:1px solid var(--aco);border-bottom:1px solid var(--aco);padding:60px 0}
.antig .wrap{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
.antig h2{font-size:clamp(28px,5.8vw,40px)}
.antig .vs{display:flex;flex-direction:column;gap:14px}
.antig .vs div{display:flex;gap:14px;align-items:baseline;font-size:15.5px}
.antig .no{color:var(--coral);font:500 15px var(--mono);min-width:22px}
.antig .yes{color:var(--od3);font:500 15px var(--mono);min-width:22px}
.antig .vs .d{color:var(--cinza)}
.antig .vs .d b{color:var(--nevoa);font-weight:600}

/* ---------- SEÇÕES DE SERVIÇO ---------- */
.sec-head{max-width:760px}
.sec-head h2{font-size:clamp(27px,5.6vw,48px);margin:20px 0 16px}
.sec-head p{color:var(--cinza);font-size:16px}
.serv-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:40px}
.serv{border:1px solid var(--aco);border-radius:18px;background:var(--grafite);padding:28px 24px;transition:border-color .2s}
.serv:hover{border-color:rgba(22,232,140,.4)}
.serv .ic{font:500 13px var(--mono);color:var(--od3);letter-spacing:.14em}
.serv h4{font:600 20px var(--display);margin:14px 0 10px;letter-spacing:-.01em}
.serv p{font-size:14.5px;color:var(--cinza)}
.serv.data .ic{color:var(--ciano)}
.serv.data:hover{border-color:rgba(55,201,224,.4)}

/* ---------- CUSTO ---------- */
.custo{background:radial-gradient(900px 600px at 50% 120%,rgba(22,232,140,.10),transparent 60%)}
.custo .cards{display:grid;grid-template-columns:1fr;gap:18px;margin-top:40px}
.custo .c{border:1px solid var(--aco);border-radius:18px;background:var(--grafite);padding:30px 24px}
.custo .c .n{font:700 15px var(--mono);color:var(--od3);letter-spacing:.1em}
.custo .c h4{font:600 21px var(--display);margin:16px 0 12px}
.custo .c p{font-size:15px;color:var(--cinza)}
.custo .nota{margin-top:34px;border:1px solid rgba(244,183,64,.4);background:rgba(244,183,64,.05);border-radius:16px;padding:22px 24px;font-size:15.5px;color:var(--cinza)}
.custo .nota b{color:var(--ambar);font-weight:600}

/* ---------- CARROSSEL PROMO ---------- */
.promo{padding:0 0 76px}
.carousel{position:relative;border:1px solid rgba(22,232,140,.4);border-radius:24px;overflow:hidden;background:linear-gradient(165deg,var(--grafite2),var(--grafite))}
.track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.slide-c{min-width:100%;padding:48px 22px 84px;text-align:center}
.slide-c .eyebrow{justify-content:center}
.slide-c h3{font-size:clamp(23px,4.6vw,42px);margin:20px auto 16px;max-width:720px}
.slide-c p{color:var(--cinza);font-size:15.5px;max-width:620px;margin:0 auto}
.slide-c p b{color:var(--nevoa)}
.slide-c .btn{margin-top:30px}
/* as 10 vagas precisam caber numa linha só — é o que comunica 2 preenchidas / 8 livres.
   As pílulas crescem por faixa até chegar nos 34px do mockup (>=600px). */
.vagas{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:30px 0 10px}
.vagas span{width:18px;height:9px;border-radius:100px;background:var(--aco)}
.vagas span.on{background:var(--od3)}
.vagas span.off{background:rgba(244,115,107,.65)}
.vagas-label{font:500 13px var(--mono);color:var(--cinza);letter-spacing:.08em}
.vagas-label b{color:var(--od3);font-weight:500}
.count-wrap{margin-top:30px}
.count-tit{font:500 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cinza2);margin-bottom:14px}
/* O contador tem 4 caixas + 3 separadores numa linha só. Em vez de degraus por
   breakpoint (que estouravam em 320px e na faixa 421-519px), escala fluido até
   travar nos valores do mockup a partir de 921px. */
.count{display:flex;gap:clamp(3px,1.1vw,12px);justify-content:center;align-items:center}
.count>span{font:600 clamp(14px,3.4vw,26px) var(--mono);color:var(--cinza2);padding-bottom:18px}
.cbox{background:var(--petroleo);border:1px solid rgba(244,183,64,.45);border-radius:12px;padding:12px clamp(4px,1.5vw,18px);min-width:clamp(40px,11vw,78px)}
.cbox b{display:block;font:600 clamp(19px,5.6vw,32px) var(--mono);color:var(--ambar);font-variant-numeric:tabular-nums}
.cbox i{display:block;font:500 clamp(8px,2.2vw,10.5px) var(--mono);letter-spacing:clamp(.04em,.5vw,.18em);text-transform:uppercase;color:var(--cinza2);font-style:normal;margin-top:6px}
/* No mobile as setas descem e flanqueiam os dots: nas laterais elas
   atropelariam o texto do slide. A partir de 640px voltam pro centro
   vertical das bordas, como no mockup. */
.c-nav{position:absolute;bottom:12px;width:38px;height:38px;border-radius:50%;border:1px solid var(--aco);background:rgba(10,14,23,.8);color:var(--nevoa);font-size:17px;cursor:pointer;transition:border-color .15s;display:flex;align-items:center;justify-content:center}
.c-nav:hover{border-color:var(--od3);color:var(--od3)}
.c-prev{left:calc(50% - 78px)}
.c-next{right:calc(50% - 78px)}
.dots{display:flex;gap:9px;justify-content:center;position:absolute;bottom:26px;left:0;right:0}
.dots button{width:9px;height:9px;border-radius:50%;border:0;background:var(--aco);cursor:pointer;padding:0}
.dots button.act{background:var(--od3);width:26px;border-radius:100px}
/* promoção expirada (js/main.js) */
.slide-c[hidden],.dots button[hidden],[data-promo-cta][hidden]{display:none!important}
.carousel.single .c-nav,.carousel.single .dots{display:none}
.carousel.single .slide-c{padding-bottom:48px}

/* ---------- MÉTODO ---------- */
.metodo{padding-top:0}
.metodo .passos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.passo{border-top:2px solid var(--aco);padding-top:20px}
.passo:hover{border-color:var(--od3)}
.passo .n{font:500 14px var(--mono);color:var(--od3)}
.passo h5{font:600 17px var(--display);margin:10px 0 8px}
.passo p{font-size:13.5px;color:var(--cinza)}

/* ---------- QUEM SOMOS ---------- */
.time{background:var(--grafite);border-top:1px solid var(--aco);border-bottom:1px solid var(--aco)}
.time .duo{display:grid;grid-template-columns:1fr;gap:20px;margin:40px auto 0;max-width:720px}
.card-p{border:1px solid var(--aco);border-radius:22px;overflow:hidden;background:var(--petroleo)}
.card-p img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.card-p .info{padding:24px 24px 28px;border-top:1px solid var(--aco)}
.card-p .info h4{font:600 21px var(--display)}
.card-p .info h4 .fdr{font:500 13px var(--mono);color:var(--cinza);letter-spacing:.06em;vertical-align:2px}
.card-p .info .cargo{font:500 12.5px var(--mono);color:var(--od3);letter-spacing:.1em;text-transform:uppercase;margin-top:8px;line-height:1.7}
.card-p .info p{font-size:14.5px;color:var(--cinza);margin-top:14px}

/* ---------- CLIENTES ---------- */
.clientes{padding:64px 0;border-top:1px solid var(--aco)}
.clientes .lista{display:grid;grid-template-columns:1fr;gap:16px;margin-top:34px}
.cliente{display:flex;align-items:center;gap:16px;border:1px solid var(--aco);border-radius:14px;background:var(--grafite);padding:16px 18px;transition:border-color .2s}
.cliente:hover{border-color:rgba(244,183,64,.55)}
.cliente .lg{width:54px;height:54px;border-radius:11px;background:var(--nevoa);display:flex;align-items:center;justify-content:center;padding:7px;flex-shrink:0}
.cliente .lg img{max-width:100%;max-height:100%;width:auto;height:auto}
.cliente h5{font:600 16px var(--display)}
.cliente .site{font:500 11px var(--mono);color:var(--od3);margin-top:4px;display:block}
.cliente.conf .lg{background:var(--grafite2);border:1px solid var(--aco);font-size:22px}
.cliente.conf h5{color:var(--nevoa)}
.cliente.conf:hover{border-color:var(--aco)}
.cliente.vaga{border-style:dashed;color:var(--cinza2)}
.cliente.vaga .lg{background:transparent;border:1px dashed var(--aco);font:500 20px var(--mono);color:var(--cinza2)}
.cliente.vaga h5{color:var(--cinza)}

/* ---------- ODÉ ---------- */
.ode .wrap{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.ode .simbolo{width:150px;height:150px;flex-shrink:0}
.ode h2{font-size:clamp(28px,5.8vw,40px);margin-bottom:20px}
.ode p{color:var(--cinza);font-size:16px;max-width:640px;margin-bottom:16px}
.ode p b{color:var(--nevoa);font-weight:600}
.ode .formula{font:500 13.5px var(--mono);color:var(--od3);margin-top:10px;letter-spacing:.04em}

/* ---------- CONTATO ---------- */
.contato{text-align:center;background:radial-gradient(1000px 700px at 50% 130%,rgba(22,232,140,.14),transparent 65%)}
.contato h2{font-size:clamp(28px,5.8vw,52px);max-width:820px;margin:22px auto 18px}
.contato p{color:var(--cinza);font-size:16.5px;max-width:600px;margin:0 auto}
.contato .whats{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.contato .links{margin-top:36px;font:500 13px var(--mono);color:var(--cinza);line-height:2.2;word-break:break-word}
.contato .links b{color:var(--od3);font-weight:500}
.contato .links a{transition:color .15s}
.contato .links a:hover{color:var(--od3)}

footer{border-top:1px solid var(--aco);padding:30px 20px;text-align:center;font:400 12.5px var(--mono);color:var(--cinza2)}

/* ==========================================================================
   >=360px / >=421px — pílulas e respiro lateral
   ========================================================================== */
@media(min-width:360px){
  .vagas{gap:5px}
  .vagas span{width:21px}
}

@media(min-width:421px){
  .wrap{padding:0 32px}
  .slide-c{padding:56px 30px 90px}
}

/* ==========================================================================
   >=640px — grades intermediárias
   ========================================================================== */
@media(min-width:640px){
  .serv-grid,.custo .cards,.clientes .lista{grid-template-columns:1fr 1fr}
  .time .duo{grid-template-columns:1fr 1fr}
  .antig .vs div{font-size:16.5px}
  .vagas span{width:34px;height:10px}
  .vagas{gap:10px}
  .pilar{padding:44px 42px}
  .pilar .go{top:40px;right:40px}
  .ode .simbolo{width:190px;height:190px}
}

/* ==========================================================================
   >=921px — desktop: espelha o mockup aprovado
   ========================================================================== */
@media(min-width:921px){
  section{padding:110px 0}
  nav ul{display:flex}
  nav .btn{padding:11px 20px;font-size:14px}

  .hero{padding:120px 0 90px}
  .hero h1{margin:26px 0 24px}
  .hero .lead{font-size:20px}
  .hero .ctas{gap:16px;margin-top:44px}
  .pilares{grid-template-columns:1.15fr 1fr;gap:26px;margin-top:78px}
  .pilar p{font-size:16px}
  .pilar .itens{gap:10px;margin-top:26px}
  .pilar .itens span{font-size:13px;padding:8px 16px}

  .antig{padding:76px 0}
  .antig .wrap{grid-template-columns:1fr 1fr;gap:60px}
  .antig .vs div{gap:16px}

  .sec-head h2{margin:22px 0 18px}
  .sec-head p{font-size:17.5px}
  .serv-grid{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
  .serv{padding:34px 30px}
  .serv h4{font-size:21px}

  .custo .cards{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
  .custo .c{padding:36px 32px}
  .custo .c h4{font-size:22px}
  .custo .nota{margin-top:44px;padding:26px 32px;font-size:16px}

  .promo{padding:0 0 110px}
  .slide-c{padding:70px 80px 86px}
  /* só aqui o slide tem 80px de padding lateral, folga suficiente
     pras setas voltarem pras bordas sem encostar no texto */
  .c-nav{width:46px;height:46px;font-size:19px;top:50%;bottom:auto;transform:translateY(-50%)}
  .c-prev{left:18px}
  .c-next{right:18px}
  /* valores exatos do mockup no desktop */
  .count{gap:12px}
  .count>span{font-size:26px}
  .cbox{min-width:78px;padding:14px 18px}
  .cbox b{font-size:32px}
  .cbox i{font-size:10.5px;letter-spacing:.18em}
  .slide-c h3{margin:22px auto 18px}
  .slide-c p{font-size:17px}
  .slide-c .btn{margin-top:34px}
  .vagas{margin:36px 0 10px}
  .count-wrap{margin-top:34px}
  .carousel.single .slide-c{padding-bottom:70px}

  .metodo .passos{grid-template-columns:repeat(5,1fr);margin-top:56px}
  .passo{padding-top:22px}
  .passo h5{font-size:18px}

  .time .duo{gap:24px;margin-top:56px}
  .card-p .info{padding:26px 28px 30px}
  .card-p .info h4{font-size:22px}

  .clientes{padding:80px 0}
  .clientes .lista{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
  .cliente{padding:16px 20px}

  .ode .wrap{grid-template-columns:auto 1fr;gap:70px}
  .ode p{font-size:17px}
  .ode .formula{font-size:14px}

  .contato h2{margin:24px auto 20px}
  .contato p{font-size:18px}
  .contato .whats{gap:18px;margin-top:46px}
  .contato .links{margin-top:40px;font-size:14px}

  footer{padding:34px 0;font-size:13px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}