/* ==========================================================================
   Projetos e Patrocínios — Design System
   Paleta: petróleo #344d5b · areia #c1ab93 · branco
   ========================================================================== */
:root{
  --petroleo:#344d5b;
  --petroleo-esc:#23353F;
  --petroleo-prof:#182831;
  --petroleo-cla:#4C6A7B;
  --areia:#C1AB93;
  --areia-cla:#DCCEBB;
  --areia-suave:#F1EAE1;
  --areia-esc:#A48D72;
  --branco:#FFFFFF;
  --creme:#FAF8F5;
  --tinta:#1C2A32;
  --cinza:#6E7C85;
  --cinza-cla:#98A4AC;
  --linha:#E4DED5;
  --linha-esc:rgba(255,255,255,.14);

  --ff-d:"Fraunces",Georgia,"Times New Roman",serif;
  --ff:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --maxw:1200px;
  --r:4px;
  --r-lg:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sh-sm:0 2px 14px rgba(28,42,50,.06);
  --sh:0 14px 40px rgba(28,42,50,.10);
  --sh-lg:0 30px 70px rgba(28,42,50,.16);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{
  font-family:var(--ff);font-size:17px;line-height:1.7;color:var(--tinta);
  background:var(--branco);overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--areia);color:var(--petroleo-prof)}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{font-family:var(--ff-d);font-weight:500;line-height:1.12;color:var(--petroleo-esc);letter-spacing:-.015em}
h1{font-size:clamp(2.5rem,5.6vw,4.6rem)}
h2{font-size:clamp(2rem,4.2vw,3.4rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.9rem)}
p{color:var(--cinza)}
strong{color:var(--tinta);font-weight:600}
em.mark{font-style:italic;color:var(--areia-esc)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.75em;
  font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--areia-esc);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--areia);flex-shrink:0}
.eyebrow--c::after{content:"";width:26px;height:1px;background:var(--areia)}
.eyebrow--light{color:var(--areia)}
.eyebrow--light::before,.eyebrow--light::after{background:var(--areia)}

.lead{font-size:clamp(1.05rem,1.7vw,1.22rem);color:var(--cinza);max-width:62ch;line-height:1.75}
.sec-title{margin:.5rem 0 1.1rem}
.sec-title em{font-style:italic;color:var(--areia-esc)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,44px)}
.wrap-lg{max-width:1400px;margin-inline:auto;padding-inline:clamp(20px,5vw,44px)}
.sec{padding:clamp(64px,9vw,124px) 0;position:relative}
.sec--creme{background:var(--creme)}
.sec--areia{background:var(--areia-suave)}
.sec--dark{background:var(--petroleo);color:#fff}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark p,.sec--dark .lead{color:rgba(255,255,255,.76)}
.sec--deep{background:linear-gradient(165deg,var(--petroleo-esc),var(--petroleo-prof));color:#fff}
.sec--deep h1,.sec--deep h2,.sec--deep h3{color:#fff}
.sec--deep p,.sec--deep .lead{color:rgba(255,255,255,.74)}
.center{text-align:center}
.center .lead,.center .eyebrow{margin-inline:auto}
.narrow{max-width:760px}

/* marca d'água do monograma */
.wm{position:absolute;pointer-events:none;user-select:none;opacity:.05;width:min(46vw,540px);z-index:0}
.wm--tr{top:-4%;right:-6%}
.wm--bl{bottom:-8%;left:-7%}
.sec>.wrap,.sec>.wrap-lg{position:relative;z-index:1}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  padding:1.02em 2em;border-radius:100px;font-size:.93rem;font-weight:600;letter-spacing:.01em;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s;
  white-space:nowrap;line-height:1;
}
.btn svg{width:1.05em;height:1.05em;flex-shrink:0}
.btn--areia{background:var(--areia);color:var(--petroleo-prof)}
.btn--areia:hover{background:var(--areia-esc);color:#fff;transform:translateY(-3px);box-shadow:0 12px 28px rgba(164,141,114,.36)}
.btn--petroleo{background:var(--petroleo);color:#fff}
.btn--petroleo:hover{background:var(--petroleo-esc);transform:translateY(-3px);box-shadow:var(--sh)}
.btn--outline{border:1.5px solid var(--linha);color:var(--petroleo-esc)}
.btn--outline:hover{border-color:var(--petroleo);background:var(--petroleo);color:#fff;transform:translateY(-3px)}
.btn--ghost{border:1.5px solid rgba(255,255,255,.34);color:#fff}
.btn--ghost:hover{border-color:var(--areia);background:var(--areia);color:var(--petroleo-prof);transform:translateY(-3px)}
.btn--wa{background:#25D366;color:#fff}
.btn--wa:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(37,211,102,.4)}
.btn--lg{padding:1.15em 2.3em;font-size:1rem}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:2rem}
.center .btn-row{justify-content:center}

/* link com seta */
.arrow-link{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.92rem;color:var(--petroleo);transition:gap .3s var(--ease),color .3s}
.arrow-link svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.arrow-link:hover{color:var(--areia-esc);gap:.85em}

/* ==========================  HEADER  ========================== */
.hdr{position:fixed;inset:0 0 auto;z-index:100;padding:16px 0;transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr__logo img{height:46px;width:auto;transition:height .4s var(--ease)}
.hdr.solid{background:rgba(35,53,63,.97);backdrop-filter:blur(12px);box-shadow:0 4px 26px rgba(24,40,49,.24);padding:9px 0}
.hdr.solid .hdr__logo img{height:38px}
@media(max-width:760px){.hdr__logo img{height:38px}.hdr.solid .hdr__logo img{height:34px}}
.hdr--inner{background:var(--petroleo-esc)}
.nav{display:flex;align-items:center;gap:32px}
.nav__links{display:flex;gap:28px}
.nav__links a{position:relative;font-size:.92rem;font-weight:500;color:rgba(255,255,255,.84);padding:5px 0;transition:color .3s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--areia);transition:width .35s var(--ease)}
.nav__links a:hover,.nav__links a.on{color:var(--areia-cla)}
.nav__links a:hover::after,.nav__links a.on::after{width:100%}
.nav__links a .tag{font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--areia);color:var(--petroleo-prof);padding:.15em .5em;border-radius:100px;margin-left:.4em;vertical-align:middle}
.hdr__cta{display:flex;align-items:center;gap:14px}
/* área de toque de 44px, com as barras visuais menores dentro */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:9px 7px;margin-right:-7px;z-index:120}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:.35s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* rodapé do menu mobile (CTA) — escondido no desktop */
.nav__foot{display:none}

/* fundo escurecido atrás do painel */
.nav-ov{position:fixed;inset:0;z-index:95;background:rgba(12,22,28,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.nav-ov.on{opacity:1;pointer-events:auto}

/* ==========================  HERO  ========================== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;overflow:hidden;background:var(--petroleo-prof)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center right}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(24,40,49,.96) 0%,rgba(30,47,58,.9) 34%,rgba(35,53,63,.66) 60%,rgba(35,53,63,.34) 100%);
}
.hero__in{position:relative;z-index:2;padding:140px 0 90px;max-width:760px}
.hero h1{color:#fff;margin:.5rem 0 0}
.hero h1 em{font-style:italic;color:var(--areia)}
.hero__sub{font-size:clamp(1.05rem,1.9vw,1.28rem);color:rgba(255,255,255,.82);max-width:56ch;margin-top:1.4rem;line-height:1.72}
.hero__marks{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.2rem}
.hero__marks span{
  display:inline-flex;align-items:center;gap:.55em;font-size:.86rem;color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:.6em 1.2em;backdrop-filter:blur(4px);
}
.hero__marks span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--areia)}
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hero__scroll i{width:1px;height:40px;background:linear-gradient(var(--areia),transparent);animation:sd 2.1s infinite}
@keyframes sd{0%{opacity:0;transform:scaleY(0);transform-origin:top}45%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(0);transform-origin:bottom}}

/* hero interno (páginas) */
.phero{position:relative;background:linear-gradient(150deg,var(--petroleo-esc),var(--petroleo-prof));color:#fff;padding:clamp(140px,17vw,200px) 0 clamp(56px,7vw,84px);overflow:hidden}
.phero__bg{position:absolute;inset:0;opacity:.24}
.phero__bg img{width:100%;height:100%;object-fit:cover}
.phero .wrap{position:relative;z-index:1}
.phero h1{color:#fff;max-width:16ch}
.phero h1 em{font-style:italic;color:var(--areia)}
.phero p{color:rgba(255,255,255,.78);max-width:60ch;margin-top:1.1rem;font-size:1.08rem}
.crumbs{display:flex;gap:.55em;align-items:center;font-size:.8rem;color:rgba(255,255,255,.5);margin-bottom:1.5rem}
.crumbs a:hover{color:var(--areia)}
.crumbs span{color:var(--areia)}

/* ==========================  FAIXA CREDENCIAIS  ========================== */
.strip{background:var(--petroleo-esc);border-top:1px solid var(--linha-esc);padding:0;overflow:hidden}
.strip__track{display:flex;width:max-content;animation:mq 42s linear infinite}
.strip__track:hover{animation-play-state:paused}
.strip__g{display:flex;align-items:center;gap:54px;padding:17px 27px}
.strip__g span{display:inline-flex;align-items:center;gap:.7em;font-size:.88rem;color:rgba(255,255,255,.68);white-space:nowrap}
.strip__g span::before{content:"◆";color:var(--areia);font-size:.5rem}
@keyframes mq{to{transform:translateX(-50%)}}

/* ==========================  GRID / CARDS  ========================== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,84px);align-items:center}
.split--rev .split__media{order:-1}
.split__media{position:relative}
.split__media img{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh)}
.split__media::after{content:"";position:absolute;inset:auto -16px -16px auto;width:62%;height:64%;border:1px solid var(--areia);border-radius:var(--r-lg);z-index:-1}

.badge-num{
  position:absolute;left:-22px;bottom:-24px;background:var(--petroleo);color:#fff;
  padding:20px 24px;border-radius:var(--r-lg);box-shadow:var(--sh);text-align:center;min-width:132px;
}
.badge-num b{display:block;font-family:var(--ff-d);font-size:2.5rem;font-weight:500;line-height:1;color:var(--areia)}
.badge-num small{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.78)}

.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* card padrão */
.card{
  position:relative;background:#fff;border:1px solid var(--linha);border-radius:var(--r-lg);
  padding:34px 30px 32px;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;overflow:hidden;
}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--areia);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.card:hover{transform:translateY(-7px);box-shadow:var(--sh);border-color:var(--areia-cla)}
.card:hover::before{transform:scaleY(1)}
.card__n{font-family:var(--ff-d);font-size:.95rem;font-style:italic;color:var(--areia-esc);display:block;margin-bottom:1rem}
.card h3{font-size:1.32rem;margin-bottom:.6rem}
.card p{font-size:.96rem;line-height:1.7}
.card .ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--areia-suave);color:var(--petroleo);margin-bottom:1.1rem}
.card .ico svg{width:22px;height:22px}

/* card escuro */
.card--dark{background:rgba(255,255,255,.05);border-color:var(--linha-esc)}
.card--dark h3{color:#fff}
.card--dark p{color:rgba(255,255,255,.72)}
.card--dark .ico{background:rgba(193,171,147,.16);color:var(--areia)}
.card--dark:hover{background:rgba(255,255,255,.08);border-color:rgba(193,171,147,.42)}

/* ==========================  STATS  ========================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-top:1px solid var(--linha-esc);border-bottom:1px solid var(--linha-esc)}
.stat{padding:38px 22px;text-align:center;border-right:1px solid var(--linha-esc)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--ff-d);font-size:clamp(2.2rem,4vw,3.1rem);font-weight:500;line-height:1;color:var(--areia)}
.stat span{display:block;margin-top:.55rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66)}

/* ==========================  TIMELINE  ========================== */
.tl{position:relative;margin-top:3rem;padding-left:0}
.tl::before{content:"";position:absolute;left:23px;top:12px;bottom:12px;width:1px;background:var(--linha)}
.tl__i{position:relative;padding:0 0 34px 72px}
.tl__i:last-child{padding-bottom:0}
.tl__i .dot{
  position:absolute;left:0;top:0;width:47px;height:47px;border-radius:50%;background:#fff;border:1px solid var(--linha);
  display:grid;place-items:center;font-family:var(--ff-d);font-size:1rem;color:var(--petroleo);transition:.4s var(--ease);
}
.tl__i:hover .dot{background:var(--petroleo);color:var(--areia);border-color:var(--petroleo);transform:scale(1.06)}
.tl__i h4{font-size:1.15rem;margin-bottom:.35rem}
.tl__i p{font-size:.95rem}

/* ==========================  SEGMENTOS  ========================== */
.segs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.seg{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--linha);display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s}
.seg:hover{transform:translateY(-7px);box-shadow:var(--sh)}
.seg__img{aspect-ratio:3/2;overflow:hidden;position:relative}
.seg__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.seg:hover .seg__img img{transform:scale(1.06)}
.seg__img::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(24,40,49,.55));opacity:0;transition:opacity .4s}
.seg:hover .seg__img::after{opacity:1}
.seg__body{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.seg__body h3{font-size:1.24rem;margin-bottom:.5rem}
.seg__body p{font-size:.93rem;line-height:1.68;flex:1}
.seg__body .arrow-link{margin-top:1.1rem}

/* ==========================  ACCORDION  ========================== */
.acc{border-top:1px solid var(--linha)}
.acc__i{border-bottom:1px solid var(--linha)}
.acc__h{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:22px;padding:26px 4px;text-align:left;transition:color .3s}
.acc__h:hover{color:var(--areia-esc)}
.acc__h h3{font-size:1.16rem;line-height:1.4;transition:color .3s;flex:1}
.acc__h:hover h3{color:var(--areia-esc)}
.acc__h .sign{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--linha);display:grid;place-items:center;position:relative;transition:.4s var(--ease);margin-top:2px}
.acc__h .sign::before,.acc__h .sign::after{content:"";position:absolute;background:var(--petroleo);transition:.4s var(--ease)}
.acc__h .sign::before{width:11px;height:1.5px}
.acc__h .sign::after{width:1.5px;height:11px}
.acc__i.open .sign{background:var(--petroleo);border-color:var(--petroleo);transform:rotate(90deg)}
.acc__i.open .sign::before,.acc__i.open .sign::after{background:#fff}
.acc__i.open .sign::after{transform:scaleY(0)}
.acc__c{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.acc__c-in{padding:0 60px 28px 4px}
.acc__c p{font-size:.98rem}
.acc__c .tagline{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--areia-esc);background:var(--areia-suave);padding:.35em .85em;border-radius:100px;margin-bottom:.8rem}
.acc__c ul{margin-top:.7rem}
.acc__c li{position:relative;padding-left:1.3em;font-size:.96rem;color:var(--cinza);margin-bottom:.35rem}
.acc__c li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--areia)}

/* ==========================  LISTAS  ========================== */
.ticks li{position:relative;padding-left:2em;margin-bottom:1rem;color:var(--cinza);font-size:.99rem}
.ticks li strong{display:block;color:var(--tinta);font-weight:600;margin-bottom:.1rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:15px;height:9px;
  border-left:1.6px solid var(--areia-esc);border-bottom:1.6px solid var(--areia-esc);transform:rotate(-45deg);
}
.sec--dark .ticks li,.sec--deep .ticks li{color:rgba(255,255,255,.76)}
.sec--dark .ticks li strong,.sec--deep .ticks li strong{color:#fff}
.sec--dark .ticks li::before,.sec--deep .ticks li::before{border-color:var(--areia)}

/* ==========================  CTA  ========================== */
.cta{position:relative;overflow:hidden;background:var(--petroleo-prof)}
.cta__bg{position:absolute;inset:0}
.cta__bg img{width:100%;height:100%;object-fit:cover}
/* o título ocupa boa parte da largura; o overlay precisa segurar o contraste
   até depois dele (o céu claro da foto zerava a leitura do texto areia) */
.cta__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(20,34,42,.96) 0%,rgba(22,37,45,.93) 42%,rgba(24,40,49,.8) 68%,rgba(28,45,55,.55) 100%)}
.cta__in{position:relative;z-index:1;padding:clamp(60px,9vw,110px) 0;max-width:640px;color:#fff}
.cta__in h2{color:#fff}
.cta__in p{color:rgba(255,255,255,.8);margin-top:1rem}

/* ==========================  ODS  ========================== */
.ods{display:flex;flex-wrap:wrap;gap:10px;margin-top:2rem}
.ods span{
  font-size:.83rem;padding:.55em 1.1em;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid var(--linha-esc);color:rgba(255,255,255,.82);
  transition:.3s var(--ease);
}
.ods span:hover{background:var(--areia);color:var(--petroleo-prof);border-color:var(--areia);transform:translateY(-2px)}

/* ==========================  CONTATO  ========================== */
.contact{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,5vw,70px)}
.cinfo{display:flex;flex-direction:column;gap:24px;margin-top:2rem}
.cinfo__i{display:flex;gap:16px;align-items:flex-start}
.cinfo__i .ico{flex-shrink:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--areia-suave);color:var(--petroleo)}
.cinfo__i .ico svg{width:20px;height:20px}
.cinfo__i .k{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cinza-cla)}
.cinfo__i .v{font-size:1.04rem;color:var(--petroleo-esc);font-weight:500;word-break:break-word}
.cinfo__i a.v:hover{color:var(--areia-esc)}
.socials{display:flex;gap:11px;margin-top:2rem}
.socials a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--petroleo);color:#fff;transition:.35s var(--ease)}
.socials a:hover{background:var(--areia);color:var(--petroleo-prof);transform:translateY(-4px)}
.socials svg{width:19px;height:19px}

.form{background:#fff;border:1px solid var(--linha);border-radius:var(--r-lg);padding:clamp(26px,3.4vw,42px);box-shadow:var(--sh-sm)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{margin-bottom:17px}
.f label{display:block;font-size:.8rem;font-weight:600;color:var(--petroleo-esc);margin-bottom:7px;letter-spacing:.01em}
.f input,.f select,.f textarea{
  width:100%;font-family:var(--ff);font-size:.97rem;color:var(--tinta);
  padding:.85em 1.05em;border:1px solid var(--linha);border-radius:var(--r);background:var(--creme);transition:.3s;
}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--areia);background:#fff;box-shadow:0 0 0 3px rgba(193,171,147,.22)}
.f textarea{resize:vertical;min-height:118px}
.form .btn{width:100%;margin-top:8px}
.form__note{font-size:.79rem;color:var(--cinza-cla);text-align:center;margin-top:14px}

/* ==========================  ESG / EM PRODUÇÃO  ========================== */
.wip{
  display:inline-flex;align-items:center;gap:.65em;background:rgba(193,171,147,.16);border:1px solid rgba(193,171,147,.42);
  color:var(--areia);font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:.55em 1.15em;border-radius:100px;
}
.wip .pulse{width:7px;height:7px;border-radius:50%;background:var(--areia);animation:pl 1.8s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.wip--dark{background:var(--areia-suave);border-color:var(--areia-cla);color:var(--areia-esc)}
.wip--dark .pulse{background:var(--areia-esc)}

.pillar{text-align:center;padding:36px 26px;border:1px solid var(--linha-esc);border-radius:var(--r-lg);background:rgba(255,255,255,.04);transition:.4s var(--ease)}
.pillar:hover{background:rgba(255,255,255,.08);transform:translateY(-6px)}
.pillar .letter{font-family:var(--ff-d);font-size:3.2rem;line-height:1;color:var(--areia);display:block;margin-bottom:.5rem}
.pillar h3{font-size:1.14rem;margin-bottom:.5rem}
.pillar p{font-size:.93rem}

/* ==========================  FOOTER  ========================== */
.ftr{background:var(--petroleo-prof);color:rgba(255,255,255,.66);padding:clamp(56px,7vw,84px) 0 26px}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--linha-esc)}
.ftr__brand img{height:88px;margin-bottom:18px}
.ftr__brand p{font-size:.93rem;color:rgba(255,255,255,.6);max-width:34ch;line-height:1.75}
.ftr h5{color:#fff;font-family:var(--ff);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:17px}
.ftr__col a,.ftr__col li{display:block;font-size:.93rem;padding:5px 0;color:rgba(255,255,255,.66);transition:color .3s}
.ftr__col a:hover{color:var(--areia)}
.ftr__bot{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:24px;font-size:.83rem;color:rgba(255,255,255,.45);flex-wrap:wrap}

/* flutuantes */
.wa-fx{position:fixed;left:20px;bottom:20px;z-index:90;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 26px rgba(37,211,102,.44);transition:.35s var(--ease)}
.wa-fx:hover{transform:scale(1.08) translateY(-2px)}
.wa-fx svg{width:27px;height:27px}
.top-fx{position:fixed;right:20px;bottom:20px;z-index:90;width:46px;height:46px;border-radius:50%;background:var(--petroleo);color:#fff;display:grid;place-items:center;box-shadow:var(--sh);opacity:0;pointer-events:none;transition:.4s var(--ease)}
.top-fx.on{opacity:1;pointer-events:auto}
.top-fx:hover{background:var(--areia);color:var(--petroleo-prof);transform:translateY(-4px)}
.top-fx svg{width:19px;height:19px}

/* ==========================  ANIMAÇÕES  ========================== */
.rv{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}
.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}
.rv[data-d="4"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ==========================  RESPONSIVO  ========================== */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .segs{grid-template-columns:repeat(2,1fr)}
  .ftr__top{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:38px}
  .split--rev .split__media{order:0}
  .split__media{max-width:560px}
  .contact{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat{border-bottom:1px solid var(--linha-esc)}
  .stat:nth-child(3),.stat:nth-child(4){border-bottom:0}
}
@media(max-width:760px){
  body{font-size:16px}
  .nav__links,.hdr__cta .btn{display:none}
  .burger{display:flex}
  .nav{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);background:var(--petroleo-prof);
    display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:96px 28px 32px;
    transform:translateX(100%);transition:transform .45s var(--ease);box-shadow:-12px 0 44px rgba(0,0,0,.42);
    overflow-y:auto;overscroll-behavior:contain;z-index:110}
  .nav.open{transform:translateX(0)}
  .nav__links{display:flex;flex-direction:column;gap:0;width:100%}
  .nav__links li{width:100%}
  /* display:block é essencial: como inline, o padding vertical não empurra o
     layout e os itens se sobrepõem (a borda cortava o texto do item seguinte) */
  .nav__links a{display:block;width:100%;font-size:1.05rem;padding:15px 2px;
    border-bottom:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.9)}
  .nav__links a::after{display:none}
  .nav__links a.on{color:var(--areia)}
  .nav__links a .tag{font-size:.55rem;padding:.2em .55em}
  /* CTA no fim do painel (o botão do header some no mobile) */
  .nav__foot{display:flex;flex-direction:column;gap:12px;margin-top:26px}
  .nav__foot .btn{width:100%}
  .nav__foot .zap{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
    font-size:.9rem;color:rgba(255,255,255,.72);padding:12px}
  .nav__foot .zap svg{width:18px;height:18px;color:#25D366}
  .grid-2,.grid-3,.grid-4,.segs{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .acc__c-in{padding-right:10px}
  .badge-num{left:auto;right:12px;bottom:-18px;padding:15px 18px;min-width:110px}
  .badge-num b{font-size:2rem}
  .hero__in{padding:120px 0 96px}
  .ftr__top{grid-template-columns:1fr;gap:30px}
  .ftr__bot{flex-direction:column;text-align:center}
  .tl__i{padding-left:62px}
  .wm{display:none}
  /* no celular dois botões flutuantes bloqueiam os dois cantos e acabam
     cobrindo CTAs; o "voltar ao topo" é dispensável (rolar é natural) */
  .top-fx{display:none}
  .wa-fx{width:48px;height:48px;left:14px;bottom:14px}
  .wa-fx svg{width:24px;height:24px}
  /* respiro para o último conteúdo não ficar preso sob o flutuante */
  .ftr__bot{padding-bottom:56px}
}
@media(max-width:420px){
  .btn-row .btn{width:100%}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--linha-esc)}
}