/* =========================================================
   Planear Engenharia — sistema visual
   Claro por padrão · azul da logo só em detalhes · navy de reforço
   Foco: conversão para WhatsApp
   ========================================================= */
:root{
  --paper:#ffffff;
  --paper-2:#eef3f8;
  --paper-3:#e3eaf2;
  --ink:#151a21;
  --ink-2:#4b5563;
  --ink-3:#6b7583;
  --blue:#1f9ad6;
  --blue-600:#1580bd;
  --blue-700:#10689c;
  --navy:#0d2b57;
  --navy-2:#0a2145;
  --navy-3:#123e78;
  --line:rgba(21,26,33,.12);
  --line-2:rgba(21,26,33,.07);
  --wa:#25d366; --wa-dark:#1ebe5b;
  --max:1180px;
  /* margem lateral do conteúdo. Serve de referência para a sangria
     dos carrosséis, então os dois nunca saem de sincronia. */
  --gutter:24px;
  --display:"Archivo",system-ui,sans-serif;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --shadow:0 24px 60px -34px rgba(13,43,87,.5);
  --shadow-sm:0 14px 34px -22px rgba(13,43,87,.45);
}

*{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:var(--sans); color:var(--ink); background:var(--paper); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.02em; color:var(--ink); }
::selection{ background:var(--blue); color:#fff; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }

.wrap{ width:min(var(--max),calc(100% - var(--gutter) * 2)); margin-inline:auto; }

/* eyebrow — filete simples */
.eyebrow{ display:inline-flex; flex-wrap:wrap; row-gap:6px; gap:11px; align-items:center; font:500 11px/1.5 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--blue-700); }
.eyebrow::before{ content:""; width:24px; height:1.6px; background:var(--blue); flex:none; }
.eyebrow.light{ color:var(--blue); }

/* ---------- botões personalizados (chanfro angular + brilho + elevação) ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; gap:10px; padding:16px 30px; font-family:var(--sans); font-weight:600; font-size:14.5px; letter-spacing:.02em; color:#fff; cursor:pointer; overflow:hidden; border:0; border-radius:0;
  clip-path:polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  transition:transform .2s ease, filter .25s ease; }
.btn::before{ content:""; position:absolute; top:0; left:-75%; width:55%; height:100%; pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.42),transparent); transform:skewX(-20deg); transition:left .55s ease; }
.btn:hover::before{ left:135%; }
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }
.btn svg{ width:18px; height:18px; }
.btn-arw{ transition:transform .2s ease; }
.btn:hover .btn-arw{ transform:translateX(4px); }

.btn-wa{ background:linear-gradient(135deg,#2bd06d,#12a152); filter:drop-shadow(0 9px 14px rgba(18,161,82,.45)); }
.btn-wa:hover{ filter:drop-shadow(0 16px 22px rgba(18,161,82,.5)); color:#fff; }
.btn-primary{ background:linear-gradient(135deg,var(--blue-600),var(--navy)); filter:drop-shadow(0 9px 14px rgba(13,43,87,.42)); }
.btn-primary:hover{ filter:drop-shadow(0 16px 24px rgba(13,43,87,.5)); }
.btn-light{ background:#fff; color:var(--navy); filter:drop-shadow(0 9px 14px rgba(0,0,0,.3)); }
.btn-light:hover{ color:var(--navy); filter:drop-shadow(0 16px 24px rgba(0,0,0,.36)); }
.btn-light::before{ background:linear-gradient(120deg,transparent,rgba(13,43,87,.12),transparent); }
.btn-outline{ background:var(--paper-2); color:var(--navy); filter:drop-shadow(0 8px 12px rgba(13,43,87,.14)); }
.btn-outline:hover{ background:var(--paper-3); color:var(--navy); filter:drop-shadow(0 14px 20px rgba(13,43,87,.2)); }
.btn-outline::before{ background:linear-gradient(120deg,transparent,rgba(13,43,87,.1),transparent); }
.btn-ghost{ background:rgba(255,255,255,.12); color:#fff; }
.btn-ghost:hover{ background:#fff; color:var(--navy); }

/* ---------- header (claro, fixo) ---------- */
.site-header{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-2); transition:box-shadow .25s ease; }
.site-header.is-scrolled{ box-shadow:0 8px 24px -18px rgba(13,43,87,.4); }
.nav{ min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:28px; transition:min-height .25s ease; }
.site-header.is-scrolled .nav{ min-height:64px; }
.brand{ display:flex; align-items:center; }
.brand img{ height:52px; width:auto; transition:height .25s ease; }
.site-header.is-scrolled .brand img{ height:36px; }
.nav-links{ display:flex; align-items:center; gap:28px; font-size:14px; font-weight:500; color:var(--ink-2); }
.nav-links a{ position:relative; padding:6px 0; transition:color .2s; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--blue); transition:right .25s ease; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ right:0; }
.nav-cta{ display:inline-flex; }
.nav-cta.btn{ padding:10px 18px; font-size:13px; clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.nav-cta.btn svg{ width:16px; height:16px; }
.menu-button{ display:none; }

/* ---------- hero (fundo com fotos reais, Ken Burns, texto claro) ---------- */
.hero{ position:relative; height:850px; background:var(--navy-2); overflow:hidden; display:flex; align-items:center; color:#fff; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.8s ease; animation:heroKenBurns 26s ease-in-out infinite alternate; }
.hero-bg-slide.is-active{ opacity:1; }
@keyframes heroKenBurns{ from{ transform:scale(1); } to{ transform:scale(1.14); } }
.hero-bg-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,17,34,.88),rgba(8,17,34,.74) 45%,rgba(8,17,34,.92)); }
.hero-inner{ position:relative; z-index:1; width:min(940px,calc(100% - 48px)); margin-inline:auto; text-align:center; }
.hero .eyebrow{ justify-content:center; }
.hero h1{ margin:18px auto 0; font-size:clamp(2.5rem,5.4vw,4.4rem); max-width:22ch; font-weight:800; color:#fff; }
.hero h1 em{ font-style:normal; color:var(--blue); }
.hero h1 .rot{ color:var(--blue); display:inline-block; transition:opacity .3s ease, transform .3s ease; will-change:opacity, transform; }
.hero h1 .rot.is-out{ opacity:0; transform:translateY(-12px); }
.hero-lead{ max-width:62ch; margin:22px auto 32px; font-size:clamp(16px,1.35vw,18px); color:#cdd8ea; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hero-email{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; color:#cdd8ea; font-size:14px; font-weight:500; }
.hero-email svg{ width:16px; height:16px; flex:none; }
.hero-email:hover{ color:#fff; }
.hero-stats{ display:inline-flex; margin-top:44px; }
.hero-stats > div{ padding:0 clamp(20px,3vw,38px); }
.hero-stats > div + div{ border-left:1px solid rgba(255,255,255,.18); }
.hero-stats strong{ display:block; font-family:var(--display); font-weight:700; color:#fff; font-size:28px; letter-spacing:-.02em; }
.hero-stats span{ color:#a9b6cc; font:500 12px/1.35 var(--mono); margin-top:4px; display:block; }

/* ---------- faixa de confiança (título + carrossel infinito) ---------- */
.trust,.brands{ background:var(--paper-2); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.trust .wrap,.brands .wrap{ padding:34px 0; }
.trust .trust-title{ text-align:center; font-family:var(--display); font-weight:600; font-size:clamp(15px,1.5vw,18px); letter-spacing:.02em; text-transform:none; color:var(--ink-2); margin-bottom:24px; }
.marquee{ overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.marquee-track{ display:flex; align-items:center; width:max-content; animation:marquee 26s linear infinite; }
.marquee-track span{ display:inline-flex; align-items:center; font-family:var(--display); font-weight:600; font-size:21px; color:var(--ink-2); white-space:nowrap; padding:0 30px; }
.marquee-track span::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--blue); margin-left:30px; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee + .marquee{ margin-top:20px; }
.marquee-reverse .marquee-track{ animation-name:marquee-reverse; }
@keyframes marquee-reverse{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.marquee-refs .marquee-track span{ font-size:15px; font-weight:500; color:var(--ink-3); padding:0 22px; }
.marquee-refs .marquee-track span::after{ width:4px; height:4px; margin-left:22px; }

/* ---------- seções base ---------- */
section{ padding:clamp(60px,7.5vw,104px) 0; }
.section-head h2{ font-size:clamp(1.9rem,3.7vw,3rem); max-width:20ch; }
.section-head .eyebrow{ margin-bottom:16px; }
.section-head.center{ text-align:center; max-width:660px; margin-inline:auto; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center h2{ margin-inline:auto; }
.lead-copy{ max-width:56ch; margin-top:18px; font-size:17px; color:var(--ink-2); }
.section-head.center .lead-copy{ margin-inline:auto; }
.about-cta{ margin-top:40px; }

/* ---------- quem somos (teaser curto) ---------- */
.about-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.about-split img{ box-shadow:var(--shadow-sm); aspect-ratio:4/3; object-fit:cover; width:100%; }
.about-split blockquote{ margin-top:24px; padding-left:22px; border-left:3px solid var(--blue); font-family:var(--display); font-weight:600; font-size:20px; line-height:1.35; color:var(--ink); }

/* ---------- cards (soluções / vantagens) ---------- */
.cards-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:50px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:30px 26px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--paper-3); }
.card-ico{ width:50px; height:50px; border-radius:12px; background:var(--paper-2); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.card-ico svg{ width:24px; height:24px; stroke:var(--blue-600); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card h3{ font-family:var(--display); font-weight:700; font-size:19px; }
.card p{ margin-top:9px; color:var(--ink-2); font-size:14.5px; line-height:1.55; }

/* cards em imagem (Especialidades técnicas) — slider 2 por página */
.esp-slider{ position:relative; margin-top:50px; padding:0 clamp(40px,5vw,64px); }
.esp-viewport{ overflow:hidden; }
.esp-track{ display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.esp-page{ flex:0 0 100%; display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.esp-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:50px; height:50px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--navy); cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); transition:.2s; }
.esp-nav:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.esp-nav svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.esp-nav.prev{ left:0; }
.esp-nav.next{ right:0; }
.esp-dots{ display:flex; gap:8px; justify-content:center; margin-top:26px; }
.esp-dot{ width:8px; height:8px; border-radius:50%; background:var(--paper-3); border:0; cursor:pointer; padding:0; transition:.25s; }
.esp-dot.active{ background:var(--blue); width:24px; border-radius:100px; }
.img-card{ display:block; }
.img-card img{ width:100%; height:auto; display:block; }

/* sistemas (8 pílulas) */
.sys8{ margin-top:56px; padding-top:36px; border-top:1px solid var(--line); text-align:center; }
.sys8-label{ font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; }
.sys8-list{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; list-style:none; padding:0; }
.sys8-list li{ font:600 13px/1 var(--sans); color:var(--navy); background:var(--paper-2); border:1px solid var(--line); padding:9px 16px; border-radius:100px; }

/* diagramas técnicos */
.diagrams-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:160px; gap:16px; margin-top:32px; }
.diagram-card{ position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--navy); }
.diagram-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.diagram-card span{ position:absolute; inset:auto 0 0 0; z-index:1; padding:10px 12px; font:600 12px/1.3 var(--sans); color:#fff; background:linear-gradient(0deg,rgba(8,17,34,.85),transparent); }
.diagram-feature{ grid-column:span 2; grid-row:span 2; }
.diagram-feature span{ font-size:14px; padding:16px; }

/* vitrine de clientes: logos + lista em texto */
.logo-chip img{ height:38px; width:auto; max-width:150px; object-fit:contain; filter:grayscale(1) opacity(.75); transition:filter .25s ease; }
.marquee:hover .logo-chip img{ filter:grayscale(0) opacity(1); }
.trust-refs{ margin-top:18px; text-align:center; font-size:13px; color:var(--ink-3); max-width:920px; margin-inline:auto; line-height:1.7; }

.vantagens{ background:var(--paper-2); }

/* ---------- divisores de forma (curvas entre seções) ---------- */
.has-divider{ position:relative; }
.shape-divider{ position:absolute; left:0; width:100%; height:52px; overflow:hidden; line-height:0; z-index:3; pointer-events:none; }
.shape-divider svg{ display:block; width:100%; height:100%; }
.shape-divider.sd-top{ top:-1px; }
.shape-divider.sd-bottom{ bottom:-1px; }
@media (max-width:620px){ .shape-divider{ height:30px; } }

/* ---------- faixa de reforço (navy, centralizada, sem foto) ---------- */
.banner{ position:relative; background:linear-gradient(120deg,var(--navy),var(--navy-3)); color:#fff; text-align:center; padding:clamp(72px,9vw,120px) 0; }
.banner-inner{ position:relative; z-index:1; max-width:640px; margin-inline:auto; }
.banner .eyebrow{ color:var(--blue); justify-content:center; }
.banner h2{ color:#fff; font-size:clamp(1.9rem,4vw,3.2rem); margin:14px auto 0; max-width:18ch; }
.banner p{ max-width:52ch; margin:16px auto 26px; color:#cdd8ea; font-size:17px; }

/* ---------- obras ---------- */
.obras{ background:var(--paper); }
.obras-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.obras-top p{ max-width:34ch; color:var(--ink-2); }
.obras-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-auto-rows:290px; grid-auto-flow:dense; gap:16px; margin-top:48px; }
.obra{ position:relative; overflow:hidden; background:var(--navy); color:#fff; border:1px solid var(--line); cursor:pointer; }
.obra.feature{ grid-row:span 2; }
.obra img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.obra:hover img{ transform:scale(1.05); }
.obra::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,26,47,.92),rgba(10,26,47,.05) 62%); }
.obra-info{ position:absolute; inset:auto 20px 18px; z-index:1; }
.obra-info span{ display:inline-block; font:500 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--blue); background:rgba(13,43,87,.55); padding:5px 8px; border-radius:5px; }
.obra-info h3{ color:#fff; font-family:var(--display); font-weight:700; font-size:21px; margin-top:9px; }
.obra-info p{ margin-top:5px; font-size:13.5px; color:#d6ddea; line-height:1.4; }

/* ---------- segmentos (grade ícone + texto) ---------- */
.segments{ background:var(--paper); }
.seg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:50px; }
.seg-item{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.seg-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--paper-3); }
.seg-ico{ width:44px; height:44px; border-radius:11px; background:var(--paper-2); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.seg-ico svg{ width:22px; height:22px; stroke:var(--blue-600); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.seg-item h3{ font-family:var(--display); font-weight:700; font-size:16.5px; }
.seg-item p{ margin-top:8px; color:var(--ink-2); font-size:13.5px; line-height:1.55; }

/* ---------- depoimentos (carrossel infinito, estilo Google Reviews) ---------- */
.depo{ background:var(--paper-2); overflow:hidden; }
.depo-marquee{ overflow:hidden; margin-top:48px; -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.depo-track{ display:flex; gap:18px; width:max-content; animation:depo-marquee 55s linear infinite; }
.depo-marquee:hover .depo-track{ animation-play-state:paused; }
@keyframes depo-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.depo-card{ width:370px; flex:none; background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px 22px; display:flex; flex-direction:column; box-shadow:0 12px 30px -24px rgba(13,43,87,.5); }
.depo-head{ display:flex; align-items:center; gap:12px; }
.depo-avatar{ width:44px; height:44px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display); font-weight:700; font-size:18px; }
.depo-meta{ min-width:0; }
.depo-meta b{ display:block; color:var(--ink); font-size:14.5px; font-weight:600; line-height:1.2; }
.depo-meta span{ color:var(--ink-3); font-size:12.5px; }
.depo-g{ margin-left:auto; width:20px; height:20px; flex:none; }
.depo-stars{ display:flex; gap:2px; margin:14px 0 4px; }
.depo-stars svg{ width:17px; height:17px; fill:#fbbc05; }
.depo-card p{ margin-top:8px; color:var(--ink-2); font-size:14.5px; line-height:1.6; flex:1; }
.depo-date{ margin-top:14px; font-size:12px; color:var(--ink-3); }

/* ---------- diferenciais ---------- */
.diff{ background:var(--paper); }
.diff-layout{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
.diff-layout .section-head{ position:sticky; top:100px; }
.diff-layout .section-head p{ margin-top:18px; color:var(--ink-2); max-width:34ch; }
.diff-list{ display:grid; gap:0; }
.diff-item{ display:grid; grid-template-columns:auto 1fr; gap:22px; padding:24px 4px; border-top:1px solid var(--line); }
.diff-item:last-child{ border-bottom:1px solid var(--line); }
.diff-item b{ font-family:var(--mono); font-weight:600; font-size:14px; color:var(--blue-700); line-height:1.6; }
.diff-item h3{ font-family:var(--display); font-weight:700; font-size:19px; }
.diff-item p{ margin-top:6px; color:var(--ink-2); font-size:15px; }

/* ---------- FAQ (accordion nativo) ---------- */
.faq{ background:var(--paper-2); }
.faq-list{ max-width:820px; margin:48px auto 0; display:grid; gap:12px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px 22px; }
.faq-item summary{ cursor:pointer; list-style:none; padding:18px 30px 18px 0; position:relative; font-family:var(--display); font-weight:700; font-size:16.5px; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:2px; top:16px; font-size:22px; color:var(--blue-600); transition:transform .2s ease; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ color:var(--ink-2); font-size:14.5px; line-height:1.65; padding-bottom:20px; }

/* ---------- formulário de contato (navy — reforço final) ---------- */
.cta-form{ position:relative; background:linear-gradient(120deg,var(--navy),var(--navy-2)); color:#fff; padding:0; }
.cta-form.has-divider .cta-copy,.cta-form.has-divider .cta-form-panel{ padding-top:calc(clamp(48px,6vw,88px) + 26px); }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; }
.cta-copy{ padding:clamp(48px,6vw,88px); display:flex; flex-direction:column; justify-content:center; }
.cta-copy .eyebrow{ color:var(--blue); }
.cta-copy h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3rem); margin-top:14px; }
.cta-copy>p{ max-width:46ch; margin:16px 0 30px; color:#cdd8ea; font-size:17px; }
.cta-contacts{ display:grid; gap:18px; margin-top:6px; }
.cta-contacts div h4{ font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:6px; }
.cta-contacts a,.cta-contacts p{ color:#e7ecf5; font-size:15px; }
.cta-contacts a:hover{ color:#fff; }
.cta-form-panel{ background:rgba(255,255,255,.05); border-left:1px solid rgba(255,255,255,.1); padding:clamp(40px,5vw,66px); }
.field{ margin-top:14px; }
.field label{ display:block; font:500 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#a9b6cc; margin-bottom:7px; }
.field input,.field select,.field textarea{ width:100%; padding:12px 13px; border:1.5px solid rgba(255,255,255,.18); background:rgba(8,20,40,.5); color:#fff; font:inherit; font-size:14px; border-radius:9px; transition:border-color .15s, box-shadow .15s; }
.field input::placeholder,.field textarea::placeholder{ color:#8592a6; }
.field select option{ color:#111; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,154,214,.25); }
.cta-form-panel .field:first-child{ margin-top:0; }
.cta-form-panel .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.cta-form-panel .row .field{ margin-top:0; }
.field-check{ display:flex; align-items:flex-start; }
.check-label{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:#a9b6cc; line-height:1.5; cursor:pointer; }
.check-label input{ margin-top:3px; width:15px; height:15px; flex:none; accent-color:var(--blue); }
.check-label a{ color:var(--blue); text-decoration:underline; }
.check-label a:hover{ color:#fff; }
.form-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.form-actions .btn{ flex:1 1 190px; justify-content:center; margin-top:0; }
.form-actions .btn[disabled]{ opacity:.6; pointer-events:none; }
/* campo isca anti-spam: fora da tela, sem display:none (robôs ignoram display:none) */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ margin-top:14px; padding:11px 14px; border-radius:9px; font-size:13.5px; line-height:1.5; }
.form-status.is-ok{ background:rgba(18,161,82,.16); border:1px solid rgba(43,208,109,.45); color:#c7f3d9; }
.form-status.is-err{ background:rgba(214,69,69,.14); border:1px solid rgba(214,69,69,.4); color:#f6cfcf; }
.form-status.is-info{ background:rgba(31,154,214,.14); border:1px solid rgba(31,154,214,.4); color:#cfe6f6; }
.cta-form-panel small{ display:block; margin-top:14px; color:#8592a6; font-size:12px; text-align:center; }

/* ---------- lightbox (galeria de obras) ---------- */
.lightbox{ position:fixed; inset:0; z-index:80; background:rgba(8,12,20,.94); display:flex; align-items:center; justify-content:center; flex-direction:column; padding:40px; }
.lightbox[hidden]{ display:none; }
.lightbox-img{ max-width:min(1000px,90vw); max-height:74vh; object-fit:contain; box-shadow:0 30px 70px -20px rgba(0,0,0,.6); }
.lightbox-caption{ color:#cdd8ea; font-size:14px; margin-top:18px; text-align:center; }
.lightbox-close{ position:absolute; top:22px; right:26px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:24px; line-height:1; cursor:pointer; }
.lightbox-close:hover{ background:rgba(255,255,255,.18); }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.lightbox-nav:hover{ background:rgba(255,255,255,.18); }
.lightbox-nav.prev{ left:22px; }
.lightbox-nav.next{ right:22px; }
@media (max-width:620px){
  .lightbox{ padding:20px; }
  .lightbox-nav{ width:42px; height:42px; font-size:22px; }
  .lightbox-nav.prev{ left:8px; }
  .lightbox-nav.next{ right:8px; }
}

/* ---------- WhatsApp flutuante ---------- */
.wa-float{ position:fixed; right:20px; bottom:20px; z-index:50; display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#2bd06d,#12a152); color:#fff; font-weight:600; font-size:14px; padding:14px 20px; border-radius:100px;
  box-shadow:0 16px 34px -12px rgba(18,161,82,.7); transition:.2s; }
.wa-float:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 20px 40px -12px rgba(18,161,82,.75); }
.wa-float svg{ width:22px; height:22px; }

/* ---------- rodapé (navy) ---------- */
footer{ background:var(--navy-2); color:#aab6c9; padding:64px 0 0; font-size:14px; }
/* minmax(0,1fr) impede que e-mails longos (palavra sem espaço) estiquem
   a coluna e empurrem a página para fora da tela. */
.footer-grid{ display:grid; grid-template-columns:1.3fr repeat(4,minmax(0,1fr)); gap:36px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand img{ height:34px; filter:brightness(0) invert(1); }
.footer-brand p{ margin:16px 0 20px; max-width:34ch; color:#93a1b6; }
.footer-col h4{ color:#fff; font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.03em; text-transform:uppercase; margin-bottom:15px; }
.footer-col a,.footer-col p{ display:block; color:#93a1b6; margin-bottom:10px; overflow-wrap:anywhere; }
.footer-col a:hover{ color:var(--blue); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 30px; padding:20px 0 28px; font-size:12.5px; color:#7d8ba1; }
.footer-bottom .legal b{ color:#c3ccda; font-weight:600; }
.footer-bottom a{ color:var(--blue); }

/* ---------- página interna (Quem Somos) ---------- */
.page-hero{ position:relative; color:#fff; overflow:hidden; padding:clamp(96px,12vw,150px) 0 clamp(64px,8vw,96px);
  background:linear-gradient(120deg,var(--navy),var(--navy-3)); }
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.14; }
.page-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(13,43,87,.92),rgba(13,43,87,.5)); }
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; font-size:clamp(2.3rem,5vw,4rem); font-weight:800; margin-top:16px; max-width:16ch; }
.page-hero p{ max-width:56ch; margin-top:18px; color:#cdd8ea; font-size:18px; }
.breadcrumb{ font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }

.mvv{ background:var(--paper-2); }
.mvv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.mvv-card{ background:#fff; border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:14px; padding:34px 30px; }
.mvv-card .ico{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--blue-700); }
.mvv-card h3{ font-family:var(--display); font-weight:700; font-size:23px; margin:12px 0 12px; }
.mvv-card p{ color:var(--ink-2); }
.mvv-card ul{ margin:10px 0 0 18px; color:var(--ink-2); }
.mvv-card ul li{ margin-bottom:4px; }

/* ---------- responsivo ---------- */
@media (max-width:960px){
  .hero{ height:auto; padding:72px 0 88px; }
  .cards-grid{ grid-template-columns:1fr 1fr; }
  .diagrams-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .diagram-feature{ grid-column:span 2; grid-row:span 1; }
  .seg-grid{ grid-template-columns:1fr 1fr; }
  .depo-grid{ grid-template-columns:1fr; }
  .diff-layout,.about-split{ grid-template-columns:1fr; gap:40px; }
  .diff-layout .section-head{ position:static; }
  .about-split img{ order:-1; }
  .cta-grid{ grid-template-columns:1fr; }
  .cta-form-panel{ border-left:0; border-top:1px solid rgba(255,255,255,.1); }
  .obras-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:250px; }
  .obra.feature{ grid-row:auto; grid-column:span 2; }
  .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px; }
  .mvv-grid{ grid-template-columns:1fr; }
}
/* Nav vira hambúrguer bem antes do desktop nav apertar (cobre tablets e celulares na horizontal) */
@media (max-width:880px){
  .nav-links,.nav-cta{ display:none; }
  .menu-button{ display:inline-flex; align-items:center; gap:8px; padding:10px 13px; border:1.5px solid var(--line); background:#fff; color:var(--ink); font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; border-radius:8px; cursor:pointer; }
  .nav{ flex-wrap:wrap; }
  .nav.open{ padding-bottom:8px; }
  .nav.open .nav-links{ display:flex; flex-direction:column; align-items:stretch; width:100%; order:3; gap:0; }
  .nav.open .nav-links a{ padding:14px 2px; border-top:1px solid var(--line); font-size:15px; color:var(--ink); }
  .nav.open .nav-cta{ display:flex; width:100%; order:4; margin-top:10px; }
  .nav.open .nav-cta .btn{ width:100%; justify-content:center; }
}
@media (max-width:620px){
  :root{ --gutter:20px; }

  /* ritmo vertical mais curto: no celular a rolagem custa caro */
  section{ padding:44px 0; }
  .hero{ padding:44px 0 52px; }
  .banner{ padding:52px 0; }
  footer{ padding:44px 0 0; }
  .section-head h2{ font-size:clamp(1.6rem,7vw,2rem); }
  .lead-copy{ margin-top:14px; font-size:15.5px; }
  .cards-grid,.seg-grid,.diagrams-grid,.obras-grid{ margin-top:28px; }
  .esp-slider{ margin-top:28px; }
  .sys8{ margin-top:34px; padding-top:26px; }
  .about-cta{ margin-top:28px; }

  /* hero mais enxuto */
  .hero h1{ font-size:clamp(2rem,8.5vw,2.6rem); }
  .hero-lead{ margin:16px auto 24px; font-size:15.5px; }
  .hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:30px; width:100%; }
  .hero-stats > div{ padding:0 6px; }
  .hero-stats > div + div{ border-left:1px solid rgba(255,255,255,.18); }
  .hero-stats strong{ font-size:19px; }
  .hero-stats span{ font-size:10px; letter-spacing:0; }
  .hero-email{ margin-top:16px; font-size:13px; }
  .hero-actions .btn{ width:100%; justify-content:center; }

  /* ---- carrosséis horizontais (padrão mobile: deslizar em vez de empilhar) ----
     Cada grupo vira uma faixa deslizável de borda a borda. O card seguinte
     aparece cortado na lateral, sinalizando que dá para arrastar. */
  .seg-grid,.obras-grid,.diagrams-grid,.cards-grid{
    display:flex;
    grid-template-columns:none;
    grid-auto-rows:auto;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* Sangra até as bordas da tela e devolve o respiro por dentro.
       Usa a margem lateral do .wrap (não 100vw, que conta a barra de
       rolagem e faria o conteúdo vazar para fora da tela). */
    margin-inline:calc(var(--gutter) * -1);
    padding:2px var(--gutter) 14px;
  }
  .seg-grid::-webkit-scrollbar,
  .obras-grid::-webkit-scrollbar,
  .diagrams-grid::-webkit-scrollbar,
  .cards-grid::-webkit-scrollbar{ display:none; }

  .seg-item,.obra,.diagram-card,.card{
    flex:0 0 auto;
    scroll-snap-align:center;
  }
  .seg-item{ width:70%; padding:20px 18px; }
  .seg-ico{ width:38px; height:38px; margin-bottom:12px; }
  .seg-item h3{ font-size:15.5px; }
  .seg-item p{ font-size:13px; margin-top:6px; }

  .card{ width:72%; padding:22px 20px; }
  .card-ico{ width:42px; height:42px; margin-bottom:14px; }
  .card h3{ font-size:17px; }

  .obra{ width:80%; height:220px; grid-row:auto; grid-column:auto; }
  .obra.feature{ grid-column:auto; grid-row:auto; }

  .diagram-card{ width:80%; height:170px; grid-column:auto; grid-row:auto; }
  .diagram-feature{ grid-column:auto; grid-row:auto; }

  /* Especialidades vira a mesma faixa deslizável (antes empilhava 2 imagens
     por página, o que dobrava a altura). As setas e bolinhas saem: no celular
     o gesto é arrastar. */
  .esp-slider{ padding:0; }
  .esp-nav,.esp-dots{ display:none; }
  .esp-viewport{ overflow:visible; }
  .esp-track{
    display:flex;
    transform:none !important;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);
    padding:0 var(--gutter) 14px;
  }
  .esp-track::-webkit-scrollbar{ display:none; }
  .esp-page{ display:contents; }
  .img-card{ flex:0 0 auto; width:78%; scroll-snap-align:center; }

  /* quem somos: foto mais baixa para não ocupar meia tela */
  .about-split{ gap:26px; }
  .about-split img{ aspect-ratio:16/10; }
  .about-split blockquote{ font-size:17px; margin-top:18px; }

  .diff-item{ padding:18px 4px; gap:16px; }
  .faq-list{ margin-top:28px; }

  /* contato: era a seção mais alta do site no celular */
  .cta-copy{ padding:44px var(--gutter) 8px; }
  .cta-form{ }
  .cta-form.has-divider .cta-copy{ padding-top:56px; }
  .cta-form.has-divider .cta-form-panel{ padding-top:24px; }
  .cta-form-panel{ padding:24px var(--gutter) 44px; }
  .cta-copy h2{ font-size:clamp(1.6rem,7vw,2rem); }
  .cta-copy>p{ margin:12px 0 20px; font-size:15.5px; }
  .cta-contacts{ gap:12px; }
  .cta-form-panel .row{ grid-template-columns:1fr; }

  /* rodapé: 2 colunas em vez de 5 empilhadas */
  .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 20px; padding-bottom:32px; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-brand p{ margin:12px 0 16px; }
  .footer-col h4{ margin-bottom:11px; }
  .footer-col a,.footer-col p{ margin-bottom:7px; font-size:13px; }
  .footer-bottom{ flex-direction:column; gap:8px; }

  .trust .wrap,.brands .wrap{ padding:26px 0; }
  .wa-float span{ display:none; }
  .wa-float{ padding:15px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
  .marquee-track,.depo-track{ animation:none !important; }
}