/* ===========================================================================
   P2E Engenharia — LP  |  Design system monocromático arquitetônico
   =========================================================================== */

:root{
  --ink-900:#0E1116; --ink-800:#14181F; --ink-700:#1B2029; --ink-600:#262C36;
  --paper:#F5F5F3; --paper-2:#ECECE8; --line:#DBDBD5;
  --text-hi:#F4F4F2; --text-mid:#B9BDC4; --text-dim:#808690;
  --text-dk:#16191F; --text-dk-2:#4A4F57;
  --concrete-1:#C9CCD1; --concrete-2:#8A8F98; --concrete-3:#5A5F68;
  --brand-red:#D8272A; --brand-red-2:#8B1A1D;
  --font:"Poppins",system-ui,-apple-system,sans-serif;
  --container:1200px; --gutter:24px; --radius:4px; --radius-lg:8px;
  --header-h:88px;
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.6s;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--header-h); -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); background:var(--ink-900); color:var(--text-hi);
  font-size:clamp(1rem,1.05vw,1.075rem); line-height:1.7; font-weight:400;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-weight:700; line-height:1.1; letter-spacing:-.02em; margin:0}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--brand-red); outline-offset:3px}

.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter)}

/* overline / labels */
.overline{
  display:inline-flex; align-items:center;
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-dim); margin:0 0 20px;
}
.overline.center{justify-content:center}
.section-head{max-width:760px; margin:0 0 56px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.7rem); margin-bottom:18px}
.section-head h2.up{text-transform:uppercase; letter-spacing:-.01em}
.section-head p{color:var(--text-mid); font-size:1.05rem; margin:0}
.on-dark .section-head p{color:var(--text-mid)}
.on-light{background:var(--paper); color:var(--text-dk)}
.on-light .section-head h2{color:var(--text-dk)}
.on-light .section-head p{color:var(--text-dk-2)}
.on-light .overline{color:var(--concrete-3)}

section{padding:clamp(72px,9vw,128px) 0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:16px 30px; border-radius:var(--radius); border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn i{font-style:normal}
.btn-primary{background:var(--text-hi); color:var(--ink-900); border-color:var(--text-hi)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.btn-primary:hover{border-color:var(--brand-red)}
.btn-red{background:var(--brand-red); color:#fff; border-color:var(--brand-red)}
.btn-red:hover{background:var(--brand-red-2); border-color:var(--brand-red-2); transform:translateY(-2px)}
.btn-outline{background:transparent; color:var(--text-hi); border-color:var(--ink-600)}
.btn-outline:hover{border-color:var(--brand-red); transform:translateY(-2px)}
.on-light .btn-primary{background:var(--ink-900); color:var(--text-hi); border-color:var(--ink-900)}
.on-light .btn-outline{color:var(--text-dk); border-color:var(--line)}
.btn-wa .wa-ico{width:18px;height:18px}

/* ---------- Loader ---------- */
#loader{
  position:fixed; inset:0; z-index:9999; background:var(--ink-900);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
#loader.hide{opacity:0; visibility:hidden}
#loader .l-logo{width:120px; opacity:.95}
#loader .l-bar{width:120px; height:2px; background:var(--ink-600); overflow:hidden; position:relative}
#loader .l-bar::after{content:""; position:absolute; inset:0; width:40%; background:var(--brand-red); animation:loadbar 1.1s var(--ease) infinite}
@keyframes loadbar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* ---------- Header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:900; height:var(--header-h);
  display:flex; align-items:center; transition:background .35s var(--ease), height .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.header .container{display:flex; align-items:center; justify-content:space-between; gap:24px}
.header.scrolled{background:rgba(14,17,22,.86); backdrop-filter:blur(12px); border-bottom-color:var(--ink-600); height:72px}
.brand img{height:34px; width:auto}
.nav{display:flex; align-items:center; gap:34px}
.nav a{font-size:.9rem; font-weight:500; color:var(--text-mid); position:relative; transition:color .25s}
.nav a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--brand-red); transition:width .3s var(--ease)}
.nav a:hover{color:var(--text-hi)} .nav a:hover::after{width:100%}
.header .btn{padding:11px 22px; font-size:.85rem}
.burger{display:none; background:none; border:0; color:var(--text-hi); cursor:pointer; width:44px; height:44px; align-items:center; justify-content:center}
.burger svg{width:26px; height:26px}

/* mobile menu off-canvas */
.mmenu{
  position:fixed; top:0; right:0; height:100%; width:min(320px,84vw); z-index:950;
  background:var(--ink-800); border-left:1px solid var(--ink-600);
  transform:translateX(100%); transition:transform .4s var(--ease);
  display:flex; flex-direction:column; padding:96px 30px 30px; gap:6px;
}
.mmenu.open{transform:translateX(0)}
.mmenu a{padding:15px 0; border-bottom:1px solid var(--ink-600); font-weight:500; color:var(--text-hi)}
.mmenu .btn{margin-top:22px; justify-content:center}
.mclose{position:absolute; top:24px; right:24px; background:none; border:0; color:var(--text-hi); cursor:pointer; width:40px;height:40px}
.mclose svg{width:24px;height:24px}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:940; opacity:0; visibility:hidden; transition:opacity .4s}
.scrim.open{opacity:1; visibility:visible}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:var(--header-h); overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.18)}
.hero.enter .hero-bg img{animation:heroZoom 2.6s cubic-bezier(.16,.84,.34,1) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(14,17,22,.72) 0%,rgba(14,17,22,.55) 40%,rgba(14,17,22,.9) 100%);
}
.hero .container{position:relative; z-index:1; padding-top:40px; padding-bottom:8px}
.hero-inner{max-width:960px}
.hero h1{font-size:clamp(1.9rem,4.4vw,3.5rem); line-height:1.08; margin-bottom:26px; font-weight:700; letter-spacing:-.03em}
.hero h1 .ln{display:block; overflow:hidden; padding-bottom:.04em}
.hero h1 .ln > span{display:block; transform:translateY(115%)}
.hero .sub{font-size:clamp(1rem,1.35vw,1.15rem); color:var(--text-mid); max-width:760px; margin:0 0 38px; font-weight:400}
.hero .cta-row{display:flex; gap:16px; flex-wrap:wrap}

/* Entrada do hero (no load) */
.hero .overline, .hero .sub, .hero .cta-row{opacity:0; transform:translateY(22px)}
.hero.enter .overline{animation:heroUp .8s var(--ease) .15s forwards}
.hero.enter h1 .ln:nth-child(1) > span{animation:heroLine 1s cubic-bezier(.16,.84,.34,1) .32s forwards}
.hero.enter h1 .ln:nth-child(2) > span{animation:heroLine 1s cubic-bezier(.16,.84,.34,1) .46s forwards}
.hero.enter .sub{animation:heroUp .85s var(--ease) .72s forwards}
.hero.enter .cta-row{animation:heroUp .85s var(--ease) .9s forwards}
@keyframes heroLine{to{transform:translateY(0)}}
@keyframes heroUp{to{opacity:1; transform:none}}
/* stats strip */
.stats{
  position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.12);
  margin-top:clamp(48px,7vw,84px);
}
.stats .grid{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:30px 24px 30px 0; border-right:1px solid rgba(255,255,255,.1)}
.stat:last-child{border-right:0}
.stat .n{font-size:clamp(1.9rem,3vw,2.6rem); font-weight:700; letter-spacing:-.03em; line-height:1}
.stat .l{font-size:.82rem; color:var(--text-dim); margin-top:8px; letter-spacing:.02em}
.stats-light{border-top-color:var(--line); margin-top:clamp(48px,6vw,72px); padding-top:8px}
.stats-light .stat{border-right-color:var(--line)}
.stats-light .stat .n{color:var(--text-dk)}
.stats-light .stat .l{color:var(--text-dk-2)}
@media(min-width:901px){
  .stats-light .stat{padding:30px 34px}
  .stats-light .stat:first-child{padding-left:0}
  .stats-light .stat:last-child{padding-right:0}
}

/* ---------- Problema (numbered editorial) ---------- */
.prob-list{display:grid; gap:0; border-top:1px solid var(--line)}
.prob{display:grid; grid-template-columns:88px 1fr; gap:28px; padding:34px 0; border-bottom:1px solid var(--line); align-items:start}
.prob .num{font-size:1.6rem; font-weight:700; color:var(--concrete-2); letter-spacing:-.02em}
.prob h3{font-size:1.25rem; color:var(--text-dk); margin-bottom:8px}
.prob p{margin:0; color:var(--text-dk-2)}
.prob:hover .num{color:var(--brand-red)}
.prob .num,.prob h3{transition:color .3s}

/* ---------- Serviços ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.svc{
  background:var(--ink-800); border:1px solid var(--ink-600); border-radius:var(--radius-lg);
  padding:40px; transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.svc:hover{transform:translateY(-4px); border-color:var(--concrete-3)}
.svc .ico{width:56px; height:56px; margin-bottom:22px; object-fit:contain; filter:brightness(0) invert(1); opacity:.92}
.svc h3{font-size:1.3rem; margin-bottom:12px}
.svc p{color:var(--text-mid); margin:0; font-size:.98rem}
.svc-note{margin-top:26px; color:var(--text-dim); font-size:.95rem; border-left:2px solid var(--brand-red); padding-left:18px}

/* ---------- Diferencial-chave ---------- */
/* Grade de 6 colunas: 01-03 ocupam 2 cada (3 por linha) e 04-05 ocupam 3 cada
   (2 por linha). Assim nenhum cartao fica estreito demais e os titulos cabem
   em uma linha so. */
.det-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:20px; margin-top:14px}
.det{
  grid-column:span 2;
  display:flex; flex-direction:column;
  padding:34px 32px 36px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.det:nth-child(4),.det:nth-child(5){grid-column:span 3}
.det:hover{transform:translateY(-3px); border-color:var(--concrete-2)}
.det .k{
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brand-red); margin:0 0 18px; padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.det h3{
  font-size:1.08rem; line-height:1.32; color:var(--text-dk); margin-bottom:12px;
  overflow-wrap:break-word; text-wrap:balance;
}
.det p{
  margin:0; color:var(--text-dk-2); font-size:.94rem; line-height:1.65;
  max-width:52ch; text-wrap:pretty;
}
/* 2 por linha; o 05 fecha a grade ocupando a largura toda */
@media (max-width:1099px){
  .det-grid{grid-template-columns:repeat(2,1fr)}
  .det,.det:nth-child(4),.det:nth-child(5){grid-column:span 1}
  .det:nth-child(5){grid-column:span 2}
}
/* como o 05 fica muito largo aqui, o conteudo dele vai para duas colunas */
@media (min-width:760px) and (max-width:1099px){
  .det:nth-child(5){display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); column-gap:36px; align-items:start}
  .det:nth-child(5) .k{grid-column:1 / -1}
  .det:nth-child(5) h3{margin-bottom:0}
}
@media (max-width:759px){
  .det-grid{grid-template-columns:1fr; gap:16px}
  .det,.det:nth-child(4),.det:nth-child(5){grid-column:span 1}
  .det:nth-child(5){grid-column:span 1}
}
@media (max-width:560px){
  .det{padding:28px 24px 30px}
}

/* parallax band */
.band{position:relative; height:clamp(320px,44vw,520px); overflow:hidden}
.band .par{position:absolute; inset:-14% 0; width:100%; height:128%; will-change:transform}
.band .par img{width:100%; height:100%; object-fit:cover}
.band::after{content:""; position:absolute; inset:0; background:rgba(14,17,22,.5)}
.band .cap{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:48px 0}
.band .cap h3{font-size:clamp(1.4rem,2.6vw,2.1rem); max-width:820px; line-height:1.2}

/* ---------- Comparativo ---------- */
.cmp{width:100%; border-collapse:collapse; font-size:1rem}
.cmp th,.cmp td{padding:20px 22px; text-align:left; border-bottom:1px solid var(--line)}
.cmp thead th{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--concrete-3); font-weight:600}
.cmp thead th:last-child{color:var(--text-dk)}
.cmp td:first-child{color:var(--text-dk-2); font-weight:500}
.cmp td.p2e{color:var(--text-dk); font-weight:600}
.cmp td.p2e::before{content:"\2713"; color:var(--brand-red); font-weight:700; margin-right:10px}
.cmp-quote{margin:0; color:var(--text-dk-2); font-style:italic; border-left:2px solid var(--brand-red); padding-left:20px}
.cmp-quote span{display:block; font-style:normal; font-weight:600; color:var(--text-dk); margin-top:8px; font-size:.9rem}
.cmp-quotes{display:grid; grid-template-columns:repeat(2,1fr); gap:32px; margin-top:38px}
/* variante 2 colunas: Com a P2E / Na pratica */
.cmp-2col{table-layout:fixed}
.cmp-2col th:first-child,.cmp-2col td:first-child{width:30%}
.cmp-2col td:first-child{color:var(--text-dk); font-weight:600}
.cmp-2col thead th:first-child{color:var(--concrete-3)}
.cmp-2col td.p2e{font-weight:400; color:var(--text-dk-2)}
.cmp-2col td.p2e::before{content:none}

/* ---------- Portfólio ---------- */
.port-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.pcard{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
  background:var(--ink-800); aspect-ratio:4/3; border:1px solid var(--ink-600);
}
.pcard img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.pcard:hover img{transform:scale(1.06)}
.pcard .ov{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px; background:linear-gradient(180deg,rgba(14,17,22,0) 40%,rgba(14,17,22,.88) 100%);
}
.pcard .ov .ol{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px}
.pcard .ov h3{font-size:1.15rem; color:var(--text-hi)}
.pcard .ov .meta{font-size:.85rem; color:var(--text-mid); margin-top:4px}
.pcard .zoom{
  position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%;
  background:rgba(14,17,22,.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.8); transition:.3s var(--ease); border:1px solid rgba(255,255,255,.2);
}
.pcard:hover .zoom{opacity:1; transform:scale(1)}
.pcard .zoom svg{width:18px;height:18px; stroke:var(--text-hi)}
.port-cta{text-align:center; margin-top:clamp(48px,6vw,72px)}
.port-cta h3{font-size:clamp(1.25rem,2.2vw,1.65rem); margin-bottom:10px}
.port-cta p{color:var(--text-mid); margin:0 0 26px}

/* ---------- Prova social ---------- */
.quote{margin:0; background:var(--ink-800); border:1px solid var(--ink-600); border-radius:var(--radius-lg);
  padding:36px 34px; height:100%; display:flex; flex-direction:column}
.quote .mark{color:var(--brand-red); font-size:2.4rem; line-height:0; font-weight:700; margin-bottom:22px; display:block; height:20px}
.quote p{color:var(--text-hi); font-size:1.02rem; margin:0 0 26px; flex:1}
.quote .who{font-weight:600; display:block} .quote .role{color:var(--text-dim); font-size:.85rem}

/* --- Esteira de depoimentos --- */
.tcarousel{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px}
.t-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc(50% - 12px); gap:24px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; padding:2px;
}
.t-track::-webkit-scrollbar{display:none}
.t-slide{scroll-snap-align:start; min-width:0}
.t-nav{
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--ink-600); color:var(--text-mid);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.t-nav:hover{border-color:var(--brand-red); color:var(--text-hi)}
.t-nav svg{width:20px; height:20px}
.t-dots{display:flex; justify-content:center; gap:9px; margin-top:26px}
.t-dots button{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--ink-600); border:0; transition:background .25s, transform .25s;
}
.t-dots button[aria-current="true"]{background:var(--brand-red); transform:scale(1.3)}
.t-who{display:flex; align-items:center; gap:14px}
.t-who .av{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%; overflow:hidden;
  background:var(--ink-700); border:1px solid var(--ink-600);
  box-shadow:inset 0 0 0 1px rgba(216,39,42,.28);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:600; letter-spacing:.04em; color:var(--text-hi);
}
.t-who .av img{width:100%; height:100%; object-fit:cover}
.logos-lead{color:var(--text-dim); font-size:.95rem; margin:64px 0 28px}
.logos{position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.logo-track{display:flex; width:max-content; gap:14px; align-items:center; animation:marquee 80s linear infinite; will-change:transform}
.logos:hover .logo-track{animation-play-state:paused}
.logos .lg{flex:0 0 auto; width:268px; height:148px; display:flex; align-items:center; justify-content:center; padding:0 30px}
.logos .lg img{max-height:106px; max-width:100%; width:auto; object-fit:contain; filter:grayscale(1) brightness(0) invert(.85); opacity:.6; transition:opacity .3s}
.logos .lg:hover img{opacity:1}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sobre ---------- */
.sobre-sec{border-top:1px solid var(--line)}
.about{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
.about .txt h2{font-size:clamp(1.7rem,3vw,2.4rem); color:var(--text-dk); margin-bottom:22px}
.about .txt p{color:var(--text-dk-2); margin:0 0 18px}
.about .media{border-radius:var(--radius-lg); overflow:hidden}
.about .media img{width:100%; height:auto; display:block}

/* ---------- FAQ ---------- */
.faq{max-width:860px; margin:0; border-top:1px solid var(--ink-600)}
.qa{border-bottom:1px solid var(--ink-600)}
.qa button{
  width:100%; background:none; border:0; color:var(--text-hi); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left;
  padding:26px 0; font-size:1.1rem; font-weight:500;
}
.qa .ic{flex:0 0 auto; width:26px; height:26px; position:relative; transition:transform .35s var(--ease)}
.qa .ic::before,.qa .ic::after{content:""; position:absolute; background:var(--brand-red); border-radius:2px}
.qa .ic::before{top:12px; left:2px; right:2px; height:2px}
.qa .ic::after{left:12px; top:2px; bottom:2px; width:2px; transition:opacity .3s}
.qa.open .ic{transform:rotate(135deg)}
.qa .ans{max-height:0; overflow:hidden; transition:max-height .4s var(--ease)}
.qa .ans p{color:var(--text-mid); margin:0; padding:0 0 26px; max-width:700px}

/* ---------- CTA final / Como funciona ---------- */
.contato{position:relative; background:var(--ink-800); overflow:hidden}
.cta-wrap{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.cta-wrap .lead h2{font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:22px}
.cta-wrap .lead p{color:var(--text-mid); margin:0 0 34px; max-width:440px}
.steps{position:relative; padding-left:42px}
.steps::before{content:""; position:absolute; left:15px; top:8px; bottom:8px; width:2px; background:var(--ink-600); transform:scaleY(0); transform-origin:top; transition:transform 1s var(--ease)}
.steps.on::before{transform:scaleY(1)}
.step{position:relative; padding:0 0 34px; opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.step:last-child{padding-bottom:0}
.steps.on .step{opacity:1; transform:none}
.steps.on .step:nth-child(1){transition-delay:.18s}
.steps.on .step:nth-child(2){transition-delay:.38s}
.steps.on .step:nth-child(3){transition-delay:.58s}
.step .dot{position:absolute; left:-42px; top:0; width:32px; height:32px; border-radius:50%; background:var(--ink-900); border:2px solid var(--brand-red); display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; color:var(--text-hi)}
.step h3{font-size:1.15rem; margin-bottom:6px}
.step p{color:var(--text-mid); margin:0; font-size:.95rem}

/* ---------- Footer ---------- */
.footer{background:var(--ink-900); border-top:1px solid var(--ink-600); padding:72px 0 40px}
.footer .top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--ink-600)}
.footer .brand-col img{height:46px; margin-bottom:20px}
.footer .brand-col p{color:var(--text-dim); max-width:420px; margin:0; font-size:.92rem; text-wrap:balance}
.footer h4{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); margin-bottom:18px; font-weight:600}
.footer a,.footer .fitem{display:block; color:var(--text-mid); padding:6px 0; font-size:.95rem; transition:color .25s}
.footer a:hover{color:var(--text-hi)}
.footer .bottom{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:28px; color:var(--text-dim); font-size:.82rem; flex-wrap:wrap}
.footer .bottom a{color:var(--text-dim)}

/* ---------- Lightbox ---------- */
.lb{position:fixed; inset:0; z-index:1000; background:rgba(8,10,13,.94); display:none; align-items:center; justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw; max-height:82vh; object-fit:contain; border-radius:var(--radius); animation:lbin .4s var(--ease)}
@keyframes lbin{from{opacity:0; transform:scale(.96)}to{opacity:1; transform:none}}
.lb .x{position:absolute; top:22px; right:24px; z-index:2; background:none; border:0; color:#fff; cursor:pointer; width:46px; height:46px}
.lb .x svg{width:30px;height:30px}
.lb .nav-btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff; cursor:pointer; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center}
.lb .nav-btn svg{width:24px;height:24px}
.lb .prev{left:24px} .lb .next{right:24px}
.lb .count{position:absolute; bottom:26px; left:0; right:0; text-align:center; color:var(--text-mid); font-size:.9rem; letter-spacing:.05em; pointer-events:none}
.lb .cap{position:absolute; top:26px; left:70px; right:70px; text-align:center; color:var(--text-hi); font-weight:600; pointer-events:none}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-reveal].in{opacity:1; transform:none}
[data-reveal-delay="1"]{transition-delay:.1s}
[data-reveal-delay="2"]{transition-delay:.2s}
[data-reveal-delay="3"]{transition-delay:.3s}
[data-reveal-delay="4"]{transition-delay:.4s}

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width:900px){
  .nav,.header>.container>.btn{display:none}
  .burger{display:flex}
  .svc-grid{grid-template-columns:1fr}
  .cmp-quotes{grid-template-columns:1fr; gap:26px}
  .tcarousel{grid-template-columns:1fr}
  .t-nav{display:none}
  .t-track{grid-auto-columns:100%; gap:16px}
  .port-grid{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr; gap:36px}
  .cta-wrap{grid-template-columns:1fr; gap:44px}
  .footer .top{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .quote{padding:28px 24px}
  .stats .grid{grid-template-columns:1fr 1fr}
  .stat{border-right:0; border-bottom:1px solid rgba(255,255,255,.1); padding:22px 0}
  .stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.1); padding-right:24px}
  .stats-light .stat{border-bottom-color:var(--line)}
  .stats-light .stat:nth-child(odd){border-right-color:var(--line)}
  .port-grid{grid-template-columns:1fr}
  .footer .top{grid-template-columns:1fr}
  .logos .lg{width:204px; height:120px; padding:0 20px}
  .logos .lg img{max-height:86px}
  .prob{grid-template-columns:56px 1fr; gap:16px}
  .lb .nav-btn{width:44px;height:44px}
  .lb .prev{left:10px}.lb .next{right:10px}
  /* comparativo -> cartões */
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp td{display:block; width:100%}
  .cmp tr{border:1px solid var(--line); border-radius:var(--radius-lg); margin-bottom:16px; padding:8px 16px}
  .cmp td{border-bottom:1px solid var(--line); padding:12px 0; display:flex; justify-content:space-between; gap:16px; text-align:right}
  .cmp td:first-child{font-weight:700; text-align:left; color:var(--text-dk)}
  .cmp td.p2e{justify-content:space-between}
  .cmp td.p2e::after{content:""}
  .cmp tr td:last-child{border-bottom:0}
  /* variante 2 colunas empilha rotulo + texto */
  .cmp-2col th:first-child,.cmp-2col td:first-child{width:auto}
  .cmp-2col td{display:block; text-align:left}
  .cmp-2col td:first-child{padding-bottom:6px; border-bottom:0}
  .cmp-2col td.p2e{padding-top:0}
}

/* ---------- Cookie ---------- */
.cookie{
  position:fixed; left:20px; right:auto; bottom:20px; z-index:970;
  width:min(500px, calc(100% - 40px)); margin:0; background:var(--ink-700); border:1px solid var(--ink-600);
  border-radius:var(--radius-lg); padding:22px 24px; box-shadow:0 20px 60px -20px rgba(0,0,0,.7);
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  transform:translateY(140%); transition:transform .5s var(--ease);
}
.cookie.show{transform:none}
.cookie p{margin:0; font-size:.9rem; color:var(--text-mid); flex:1 1 260px}
.cookie-acts{display:flex; gap:10px; margin-left:auto}
.cookie .btn{padding:11px 20px; font-size:.85rem}
@media (max-width:560px){ .cookie-acts{width:100%} .cookie-acts .btn{flex:1} }

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important; transition-duration:.001s !important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1; transform:none}
  .band .par{transform:none !important}
  .hero-bg img{transform:none !important; animation:none !important}
  .hero h1 .ln > span{transform:none !important}
  .hero .overline, .hero .sub, .hero .cta-row{opacity:1 !important; transform:none !important}
  .logo-track{animation:none; flex-wrap:wrap; justify-content:center; width:100%}
  .logos{overflow:visible; -webkit-mask-image:none; mask-image:none}
}

/* ===========================================================================
   Páginas internas (legal) — Política de Privacidade
   =========================================================================== */
.page-head{background:var(--ink-900); color:var(--text-hi);
  padding-top:calc(var(--header-h) + 56px); padding-bottom:56px; border-bottom:1px solid var(--ink-600)}
.page-head .overline{color:var(--text-dim)}
.page-head h1{font-size:clamp(2rem,4.4vw,3.2rem); letter-spacing:-.03em; margin:14px 0 10px}
.page-head .sub{color:var(--text-mid); font-size:.95rem}
.legal{padding:72px 0}
.legal .wrap{max-width:820px}
.legal h2{font-size:clamp(1.2rem,2vw,1.5rem); color:var(--text-dk); margin:40px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p, .legal li{color:var(--text-dk-2); font-size:1rem; line-height:1.75}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px; padding-left:20px}
.legal li{margin:0 0 8px}
.legal a{color:var(--brand-red); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s}
.legal a:hover{border-bottom-color:var(--brand-red)}
.legal .lead{font-size:1.08rem; color:var(--text-dk); margin-bottom:28px}
.legal .updated{display:inline-block; margin-top:8px; font-size:.82rem; color:var(--text-dim);
  border:1px solid var(--line); border-radius:var(--radius); padding:6px 12px}