/* ============================================================
   BDS Engenharia — Joinville · joinville.css
   ÚNICO CSS de Joinville (autocontido — não depende de style.css
   nem de home.css da raiz). Direção de arte "A LINHA DE NÍVEL":
   papel técnico + prancha petrol + laser neon (neon = MEDIÇÃO).
   ============================================================ */

/* ---------- Fontes (self-hosted na raiz /assets/fonts/) ---------- */
@font-face{font-family:"Sora";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/sora-600-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026}
@font-face{font-family:"Sora";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/sora-700-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-sans-400-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-sans-500-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-400-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-600-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026}
/* Fallbacks métricos (swap sem CLS — §11.1). Valores aproximados; calibrar com fontaine/capsize se sobrar shift. */
@font-face{font-family:"Sora Fallback";src:local("Arial");size-adjust:104%;ascent-override:96%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"DM Sans Fallback";src:local("Arial");size-adjust:99.5%;ascent-override:94%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:"JetBrains Mono Fallback";src:local("Courier New");size-adjust:100%;ascent-override:102%;descent-override:30%;line-gap-override:0%}
/* Inter — usada SÓ nos cards de avaliação. Hospedada em /joinville/assets/fonts/ e não
   em /assets/fonts/, que é compartilhada com Florianópolis e BC (§5 do checklist). */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/joinville/assets/fonts/inter-400-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/joinville/assets/fonts/inter-500-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/joinville/assets/fonts/inter-600-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(/joinville/assets/fonts/inter-700-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}

/* ---------- Tokens (§4.2 — paleta canônica do briefing) ---------- */
:root{
  /* Cor — paleta BDS canônica do briefing (NÃO usar os valores clareados de home.css) */
  --ink:#0B1620;        --ink-2:#122230;
  --petrol:#0E2B3D;     --petrol-2:#163A52;   --petrol-line:#1F4A66;
  --paper:#FBFAF7;      --paper-2:#F3F1EB;    --mist:#E6E4DD;
  --graphite:#2B3640;   --graphite-2:#4A5763; --steel:#7A8896;
  --neon:#D0FF00;       --neon-dark:#B8E600;
  --whats:#25D366;      --whats-dark:#1DA851;
  --line:rgba(11,22,32,.08);         --line-strong:rgba(11,22,32,.16);
  --line-dark:rgba(251,250,247,.10); --line-dark-strong:rgba(251,250,247,.2);
  --neon-glow:0 0 14px rgba(208,255,0,.35);
  /* Aliases semânticos */
  --bg:var(--paper); --bg-alt:var(--paper-2); --bg-dark:var(--ink);
  --text:var(--graphite); --text-strong:var(--ink); --text-mute:var(--steel);
  --accent:var(--neon);

  /* Tipografia — self-hosted em /assets/fonts/ */
  --font-display:"Sora","Sora Fallback",system-ui,sans-serif;
  --font-body:"DM Sans","DM Sans Fallback",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,monospace;
  --fs-display:clamp(2.125rem,1.2rem + 4.2vw,3.75rem);  /* 34→60 */
  --fs-h2:clamp(1.75rem,1.3rem + 2.2vw,2.625rem);       /* 28→42 */
  --fs-h3:1.25rem;
  --fs-lede:clamp(1.0625rem,1rem + .4vw,1.1875rem);     /* 17→19 */
  --fs-body:1rem;  --fs-micro:.75rem;

  /* Espaço / forma / sombra / container */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px;
  --sh-card:0 1px 2px rgba(11,22,32,.06),0 8px 24px rgba(11,22,32,.08);
  --sh-pop:0 12px 40px rgba(11,22,32,.18);
  --maxw:1200px;

  /* Motion (§5) */
  --ease-out:cubic-bezier(.16,1,.3,1);      /* out-expo — reveals, entradas */
  --ease-soft:cubic-bezier(.25,1,.5,1);     /* out-quart — hovers */
  --ease-inout:cubic-bezier(.65,0,.35,1);   /* acordeões, trocas de estado */
  --t-fast:150ms; --t-base:240ms; --t-reveal:640ms; --t-hero:900ms;
}

/* ---------- Reset enxuto + base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.65;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong{font-weight:600}
h1,h2,h3{font-family:var(--font-display);font-weight:600;color:var(--text-strong);letter-spacing:-.02em}
h1{font-size:var(--fs-display);line-height:1.05}
h2{font-size:var(--fs-h2);line-height:1.15}
h3{font-size:var(--fs-h3);line-height:1.3}
p{max-width:62ch}
::selection{background:var(--neon);color:var(--ink)}

/* ---------- A11y ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--neon);color:var(--ink);font-family:var(--font-mono);
  padding:12px 20px;border-radius:0 0 var(--r-md) 0;
}
.skip-link:focus{left:0}
/* Anel duplo: neon (fundos escuros) + anel ink (fundos claros) — AA em qualquer superfície */
:focus-visible{outline:2px solid var(--neon);outline-offset:2px;border-radius:2px;box-shadow:0 0 0 2px var(--ink)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Layout / seções ---------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s-5)}
.sec{padding-block:var(--s-9)}
.sec--paper{background:var(--paper)}
.sec--paper2{background:var(--paper-2)}
.sec--dark{background:var(--ink);color:var(--mist)}
.sec--petrol{background:var(--petrol);color:var(--mist)}
.sec--dark h2,.sec--petrol h2,.sec--dark h3,.sec--petrol h3{color:var(--paper)}
.sec--dark p,.sec--petrol p{color:var(--mist)}
h2 em,h1 em{font-style:normal;color:var(--petrol-2)}
.sec--dark h2 em,.sec--petrol h2 em,.hero h1 em{color:var(--neon)}

/* Grade blueprint — só seções escuras, desktop (drift em §motion) */
.has-grid{position:relative;overflow:hidden}
.has-grid::before{
  content:"";position:absolute;inset:-64px;pointer-events:none;
  background-image:
    linear-gradient(rgba(251,250,247,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(251,250,247,.035) 1px,transparent 1px);
  background-size:64px 64px;
}
html.js-motion .has-grid::before{animation:grid-drift 60s linear infinite}
@keyframes grid-drift{from{transform:translate(0,0)}to{transform:translate(64px,64px)}}
.has-grid>.container{position:relative}

/* ---------- Cabeça de seção: eyebrow + H2 + cota + lede ---------- */
.sec-head{margin-bottom:var(--s-7)}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--petrol-2);
  margin-bottom:var(--s-4);
}
.eyebrow::before{content:"";width:24px;height:2px;background:currentColor;flex:none}
.sec--dark .eyebrow,.sec--petrol .eyebrow,.hero .eyebrow,.cta-band .eyebrow{color:var(--neon);text-shadow:var(--neon-glow)}
.cota{
  position:relative;display:flex;align-items:center;gap:var(--s-3);
  margin-top:var(--s-4);max-width:280px;height:12px;
}
.cota::before{
  content:"";flex:1;height:1px;background:currentColor;opacity:.45;
  /* ticks nas pontas */
  box-shadow:0 0 0 0 transparent;
}
.cota .tick{width:1px;height:9px;background:currentColor;opacity:.45;flex:none}
.cota-lbl{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);white-space:nowrap;
}
.sec--dark .cota-lbl,.sec--petrol .cota-lbl{color:var(--steel)}
.lede{font-size:var(--fs-lede);color:var(--graphite-2);margin-top:var(--s-4)}
.sec--dark .lede,.sec--petrol .lede{color:var(--mist)}

/* Microlabel mono estrutural (SERVIÇO / 01 etc.) */
.mlabel{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel);
}
/* Em fundo claro, steel falha AA para 11px — escurece (overrides de componente vêm depois e ainda vencem) */
.sec--paper .mlabel,.sec--paper2 .mlabel,.legal .mlabel{color:var(--graphite-2)}

/* Dot de status (neon = medição/status ativo) */
.dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--neon);flex:none;vertical-align:middle;
}
html.js-motion .dot{animation:dot-pulse 2s ease-in-out infinite;animation-delay:1.2s}
@keyframes dot-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(208,255,0,.45)}
  50%{box-shadow:0 0 0 6px rgba(208,255,0,0)}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(11,22,32,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background var(--t-base) var(--ease-soft),backdrop-filter var(--t-base) var(--ease-soft),
             border-color var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft);
}
.site-header.is-scrolled{background:rgba(11,22,32,.96);border-bottom-color:var(--line-dark);box-shadow:0 8px 24px rgba(11,22,32,.35)}

/* Páginas com hero: cabeçalho limpo sobre a foto e materializa ao rolar (is-scrolled em
   y>8, motion.js). A política de privacidade NÃO leva esta classe — ela não tem hero e
   abre numa seção clara, onde texto off-white sobre transparente ficaria ilegível. */
.site-header--hero:not(.is-scrolled){
  /* Véu que se dissolve, não barra: sem borda e sem blur, o olho lê como parte da foto.
     Transparência pura reprova — o topo do hero-overlay só escurece 25% e o menu
     off-white some sobre foto clara. O degradê garante a leitura sem virar bloco. */
  background:linear-gradient(to bottom,rgba(11,22,32,.62) 0%,rgba(11,22,32,.28) 65%,rgba(11,22,32,0) 100%);
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
}
/* O topo do hero só tem 25% de escurecimento (§hero-overlay): sem uma sombra sutil o
   menu some quando a foto é clara — é o que mantém a leitura sem precisar de placa. */
.site-header--hero:not(.is-scrolled) .nav-link,
.site-header--hero:not(.is-scrolled) .header-tel,
.site-header--hero:not(.is-scrolled) .brand-city{
  text-shadow:0 1px 10px rgba(11,22,32,.65);
}
.site-header--hero:not(.is-scrolled) .brand-logo,
.site-header--hero:not(.is-scrolled) .menu-btn{
  filter:drop-shadow(0 1px 8px rgba(11,22,32,.55));
}
.header-in{display:flex;align-items:center;gap:var(--s-5);min-height:68px}
.brand{display:flex;align-items:center;gap:14px;color:var(--paper)}
/* Logo oficial da BDS (PNG com transparência, 648×260). Sem fundo, borda ou sombra;
   width:auto + object-fit:contain garantem que nunca estique nem recorte. */
.brand-logo{height:48px;width:auto;display:block;object-fit:contain}
.brand-logo--drawer{height:36px}
.brand-city{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#DCE6ED;white-space:nowrap;
}
.nav-desk{display:flex;gap:var(--s-5);margin-inline:auto}
.nav-link{
  position:relative;color:var(--mist);font-size:15px;padding:6px 2px;min-height:44px;display:inline-flex;align-items:center;
}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:6px;height:1px;width:100%;
  background:var(--neon);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--ease-soft);
}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link[aria-current="page"]{color:var(--paper)}
.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nav-link[aria-current="page"]::before{
  content:"";position:absolute;right:-8px;top:14px;width:4px;height:4px;border-radius:50%;background:var(--neon);
}
.header-actions{display:flex;align-items:center;gap:var(--s-4)}
.header-tel{
  font-family:var(--font-mono);font-size:13.5px;color:var(--mist);
  min-height:44px;display:inline-flex;align-items:center;
}
.header-tel:hover{color:var(--neon)}
.menu-btn{
  display:none;width:44px;height:44px;border-radius:var(--r-sm);
  color:var(--paper);align-items:center;justify-content:center;
}
.menu-btn:hover{background:var(--ink-2)}

/* ---------- Drawer mobile ---------- */
.drawer{
  position:fixed;inset:0;z-index:200;background:rgba(11,22,32,.6);
  opacity:0;visibility:hidden;transition:opacity var(--t-base) var(--ease-soft),visibility 0s linear var(--t-base);
}
.drawer[data-open="true"]{opacity:1;visibility:visible;transition-delay:0s}
.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);
  background:var(--ink);border-left:1px solid var(--line-dark);
  display:flex;flex-direction:column;padding:var(--s-5);
  transform:translateX(100%);transition:transform 320ms var(--ease-out);
}
.drawer[data-open="true"] .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-6)}
.drawer-close{width:44px;height:44px;border-radius:var(--r-sm);color:var(--paper);display:grid;place-items:center}
.drawer-close:hover{background:var(--ink-2)}
.drawer-nav{display:flex;flex-direction:column;gap:var(--s-2)}
.drawer-nav a{
  color:var(--paper);font-family:var(--font-display);font-size:19px;font-weight:600;
  padding:var(--s-3) 0;min-height:44px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line-dark);
}
.drawer-nav a .mlabel{color:var(--steel)}
.drawer-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--s-4)}
.drawer-cities{font-size:13px;color:var(--steel)}
.drawer-cities a{color:var(--mist);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 var(--s-5);border-radius:var(--r-md);
  font-family:var(--font-body);font-weight:500;font-size:16px;line-height:1.2;
  transition:transform var(--t-fast) var(--ease-soft),background var(--t-fast) var(--ease-soft),
    box-shadow var(--t-fast) var(--ease-soft),border-color var(--t-fast) var(--ease-soft);
}
.btn--whats{background:var(--whats);color:#fff}
.btn--whats:hover{background:var(--whats-dark);transform:translateY(-2px)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn--ghost-dark{background:transparent;color:var(--paper);border:1px solid var(--line-dark-strong)}
.btn--ghost-dark:hover{border-color:var(--paper);transform:translateY(-2px)}
.btn--call{
  background:transparent;color:var(--paper);border:1px solid var(--line-dark-strong);
}
.btn--call .tel-num{font-family:var(--font-mono);font-size:14.5px}
.btn--call:hover{border-color:var(--paper)}
.btn--lg{min-height:56px;padding:0 var(--s-6)}
.btn--block{width:100%}
/* Glyph WhatsApp (2 cores — injetado/normalizado pelo main.js) */
.wa-glyph{width:20px;height:20px;flex:none}
.wa-glyph__bg{fill:#fff}
.wa-glyph__fg{fill:var(--whats)}
/* CTA hero — variante grande com ícone em quadrado, sublabel com dot e shimmer */
.btn--cta-hero{
  position:relative;overflow:hidden;min-height:64px;padding:10px var(--s-5) 10px 10px;
  text-align:left;gap:var(--s-4);
}
.btn--cta-hero .cta-ic{
  width:40px;height:40px;border-radius:var(--r-sm);background:rgba(255,255,255,.16);
  display:grid;place-items:center;flex:none;
}
.btn--cta-hero .cta-ic .wa-glyph{width:22px;height:22px}
.btn--cta-hero .lbl{display:flex;flex-direction:column;gap:2px}
.btn--cta-hero .lbl strong{font-weight:600;font-size:16.5px}
.btn--cta-hero .lbl small{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:400;opacity:.92;
}
.btn--cta-hero .cta-arrow{flex:none;transition:transform var(--t-fast) var(--ease-soft)}
.btn--cta-hero:hover .cta-arrow{transform:translateX(4px)}
html.js-motion .btn--cta-hero::after{
  content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:34%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translateX(-120%) rotate(8deg);
  animation:shimmer 6s var(--ease-soft) infinite;
}
@keyframes shimmer{
  0%{transform:translateX(-140%) rotate(8deg)}
  15%,100%{transform:translateX(460%) rotate(8deg)}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:min(92svh,860px);background:var(--ink);color:var(--mist);
  /* O cabeçalho é sticky — ocupa lugar no fluxo, então o hero nasceria ABAIXO dele e
     o véu do topo cairia sobre o fundo claro do body, não sobre a foto. O hero sobe a
     altura do header (68px + 1px de borda) e devolve o espaço em padding. */
  margin-top:-69px;padding-top:69px;
}
.hero--service{min-height:min(74svh,700px)}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media picture{position:absolute;inset:0}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 600ms var(--ease-soft);
}
.hero-video.is-on{opacity:1}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,var(--ink) 0%,rgba(11,22,32,.55) 45%,rgba(11,22,32,.25) 100%);
}
.hero-content{position:relative;padding-block:var(--s-8) var(--s-9);max-width:760px}

/* ---------- Hero banner: arte já composta (zona escura à esquerda, foto à direita) ----
   A diagonal dourada do banner corta em 55,1% da largura (medido no arquivo: x=1365 no
   topo, x=1128 na base) — por isso o texto fica preso em 52%, com folga. A altura segue
   a razão 768/2048 = 37,5vw para não cortar a composição no desktop. */
.hero--banner{
  align-items:center;
  min-height:max(37.5vw,460px);
  background-color:#02192C;      /* navy da própria arte: sem emenda nas bordas */
  background-image:url("/joinville/assets/images/hero-banner-fundo-1200.webp");
  background-size:cover;background-position:left center;background-repeat:no-repeat;
}
/* Painel direito recortado na diagonal — 66,7% no topo, 55,1% na base (medido no
   arquivo). Remontado em CSS de propósito: com a arte inteira em object-fit:cover,
   assim que o hero passa de ~540px o corte horizontal arrasta a diagonal para 26%
   da tela e o texto cai em cima da foto. Assim ela fica firme em qualquer altura. */
.hero--banner .hero-media{
  left:auto;right:0;width:48%;z-index:1;
  clip-path:polygon(30.5% 0,100% 0,100% 100%,6.4% 100%);
}
.hero--banner .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero--banner .hero-overlay{display:none}
/* Filete dourado: mesmo recorte 0,5% mais à esquerda, aparecendo como fresta */
.hero--banner::before{
  content:"";position:absolute;inset:0 0 0 auto;width:48%;pointer-events:none;
  background:#A3775A;clip-path:polygon(30% 0,100% 0,100% 100%,5.9% 100%);
}
/* Padding menor que o hero padrão (64/96): com a arte centrada verticalmente a folga
   simétrica basta, e cada pixel a mais aqui empurra o CTA para fora da dobra.
   O z-index é obrigatório: a .hero-media do banner sobe para z-index:1 e, no mobile,
   ela ocupa a largura toda — sem isto ela cobre o H1 e o CTA. */
.hero--banner .hero-content{position:relative;z-index:2;max-width:var(--maxw);padding-block:var(--s-6)}
.hero-banner-copy{max-width:min(560px,46%)}

.hero h1{color:var(--paper);margin-top:var(--s-4)}
.hero-lede{font-size:var(--fs-lede);color:var(--mist);margin-top:var(--s-5);max-width:56ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-6)}
.micro-trust{
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);margin-top:var(--s-5);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--mist);
}
.micro-trust li{display:inline-flex;align-items:center;gap:8px}
.micro-trust li::before{content:"";width:5px;height:5px;background:var(--neon);flex:none}
/* Breadcrumbs (páginas de serviço — no lugar do eyebrow) */
.breadcrumbs{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.breadcrumbs a{color:var(--steel)}
.breadcrumbs a:hover{color:var(--neon)}
.breadcrumbs .sep{color:var(--steel);margin-inline:6px}
.breadcrumbs [aria-current]{color:var(--neon)}

/* Coreografia do hero (§5.2) — estados ocultos SÓ antes de .hero-in; as
   transições/delays valem só até .hero-done (motion.js adiciona ao fim da
   coreografia), para não sequestrar as transições de hover dos CTAs. */
html.js-motion .hero:not(.hero-done) [data-h]{transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-out)}
html.js-motion .hero:not(.hero-done) [data-h="eyebrow"]{transition-duration:320ms}
html.js-motion .hero:not(.hero-done) [data-h="lede"]{transition-delay:400ms}
html.js-motion .hero:not(.hero-done) [data-h="cta1"]{transition-duration:480ms;transition-delay:520ms}
html.js-motion .hero:not(.hero-done) [data-h="cta2"]{transition-duration:480ms;transition-delay:600ms}
html.js-motion .hero:not(.hero-done) [data-h="trust"] li{transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out);transition-delay:calc(660ms + var(--i,0)*60ms)}
/* A foto entra cedo, junto do H1 — ela é a âncora emocional; esperar o fim da
   coreografia faria o hero parecer lento. */
html.js-motion .hero:not(.hero-done) [data-h="shot"]{transition-duration:760ms;transition-delay:240ms}
html.js-motion .hero:not(.hero-in) [data-h]{opacity:0}
html.js-motion .hero:not(.hero-in) [data-h="lede"]{transform:translateY(14px)}
html.js-motion .hero:not(.hero-in) [data-h="cta1"],
html.js-motion .hero:not(.hero-in) [data-h="cta2"]{transform:translateY(12px) scale(.97)}
html.js-motion .hero:not(.hero-in) [data-h="trust"] li{opacity:0;transform:translateY(8px)}
html.js-motion .hero:not(.hero-in) [data-h="shot"]{transform:translateY(18px) scale(.985)}
/* Eyebrow: traço desenha */
html.js-motion .hero:not(.hero-done) .eyebrow::before{transform-origin:left;transition:transform 480ms var(--ease-out) 40ms}
html.js-motion .hero:not(.hero-in) .eyebrow::before{transform:scaleX(0)}
/* H1 — split por palavra (desktop hub); .wi sobe de 110% */
.hero h1 .w{display:inline-block;overflow:clip;vertical-align:top}
html.js-motion .hero h1 .wi{display:inline-block}
html.js-motion .hero:not(.hero-done) h1 .wi{transition:transform 700ms var(--ease-out);transition-delay:calc(80ms + var(--wi,0)*70ms)}
html.js-motion .hero:not(.hero-in) h1 .wi{transform:translateY(110%)}
/* H1 sem split (mobile/serviço): rise como bloco */
html.js-motion .hero:not(.hero-done) h1[data-h="h1"]{transition-delay:80ms;transition-duration:700ms}
html.js-motion .hero:not(.hero-in) h1[data-h="h1"]{transform:translateY(12px)}
html.js-motion .hero--service:not(.hero-done) h1[data-h="h1"]{transition-duration:520ms}
html.js-motion .hero--service:not(.hero-in) h1[data-h="h1"]{transform:none}

/* ---------- Barra de números (fundida ao hero) ---------- */
.num-bar{background:linear-gradient(180deg,var(--ink) 0%,var(--petrol) 100%);color:var(--mist);padding-block:var(--s-7) var(--s-8)}
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6)}
.num-item{border-left:1px solid var(--petrol-line);padding-left:var(--s-4)}
.num-val{
  font-family:var(--font-mono);font-weight:600;color:var(--neon);
  font-size:clamp(28px,4vw,44px);font-variant-numeric:tabular-nums;line-height:1.1;
  text-shadow:var(--neon-glow);
}
.num-lbl{font-size:14px;color:var(--mist);margin-top:6px}
.num-src{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--mist);margin-top:var(--s-5)}

/* ---------- Cards de serviço ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.svc-card{
  position:relative;display:flex;flex-direction:column;gap:var(--s-4);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-6);box-shadow:var(--sh-card);
  transition:transform var(--t-base) var(--ease-soft),border-color var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft);
  transform-style:preserve-3d;
}
.svc-card .num{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--petrol-2)}
.svc-card h3{font-size:1.375rem}
.svc-card p{font-size:15px;color:var(--graphite-2)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  padding:5px 10px;border:1px solid var(--line-strong);border-radius:999px;color:var(--graphite-2);
}
.svc-card .arrow{
  margin-top:auto;padding-top:var(--s-4);
  font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--petrol-2);
  display:inline-flex;align-items:center;gap:8px;
}
.svc-card .arrow::after{content:"→";transition:transform var(--t-fast) var(--ease-soft)}
@media(hover:hover){
  .svc-card:hover{transform:translateY(-4px);border-color:var(--petrol-line);box-shadow:var(--sh-pop)}
  .svc-card:hover .arrow::after{transform:translateX(4px)}
  html.js-motion .svc-card.tilt{transform:translateY(-4px) rotateX(calc(var(--my,0)*-3deg)) rotateY(calc(var(--mx,0)*3deg))}
}
.svc-card:active{transform:scale(.99)}
.svc-card>a.svc-link{position:absolute;inset:0;border-radius:inherit}

/* ---------- Processo ---------- */
.process{display:grid;grid-template-columns:repeat(var(--steps,4),1fr);gap:var(--s-6);position:relative}
.process--6{--steps:6}
.step{position:relative;padding-top:var(--s-5)}
.step::before{
  content:"";position:absolute;top:0;left:0;right:calc(-1*var(--s-6));height:1px;
  background:var(--petrol-line);opacity:.5;
}
.step:last-child::before{right:0}
html.js-motion .rv-group .step::before{transform:scaleX(0);transform-origin:left;transition:transform 560ms var(--ease-out) calc(var(--i,0)*120ms)}
html.js-motion .rv-group.in .step::before{transform:scaleX(1)}
.step-num{
  font-family:var(--font-mono);font-weight:600;font-size:15px;color:var(--neon);
  background:var(--ink);display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-sm);margin-bottom:var(--s-4);
}
.sec--paper2 .step-num,.sec--paper .step-num{box-shadow:var(--sh-card)}
.step h3{font-size:1.0625rem;margin-bottom:6px}
.step p{font-size:14.5px;color:var(--graphite-2)}
.prazo{
  display:inline-block;margin-top:10px;font-family:var(--font-mono);font-size:12px;
  color:var(--petrol-2);border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:3px 8px;
}
.sec--dark .prazo,.sec--petrol .prazo{color:var(--neon);border-color:var(--line-dark-strong)}

/* ---------- Garantias ---------- */
.garantias{
  margin-top:var(--s-8);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);
}
.g-item{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-5);font-size:14.5px;color:var(--graphite);display:flex;gap:var(--s-3);align-items:flex-start;
}
.g-item .g-ic{
  flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--ink);color:var(--neon);font-family:var(--font-mono);font-size:12px;
  display:grid;place-items:center;
}

/* ---------- Por que a BDS (lista numerada escura) ---------- */
.why-list{display:grid;gap:0;border-top:1px solid var(--line-dark)}
.why-item{
  display:flex;gap:var(--s-5);align-items:baseline;
  padding:var(--s-4) 0;border-bottom:1px solid var(--line-dark);
  font-size:16.5px;color:var(--paper);
}
.why-item .num{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--neon);flex:none}
.why-item small{display:block;font-size:14px;color:var(--mist);margin-top:2px}

/* ---------- Equipe ---------- */
.team-grid{display:grid;grid-template-columns:minmax(0,560px);justify-content:center;gap:var(--s-5);margin-top:var(--s-7)}
.team-card{
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
}
.team-media{aspect-ratio:3/2;overflow:hidden;background:var(--petrol)}
.team-media img{width:100%;height:100%;object-fit:cover}
.team-body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.team-fn{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--neon)}
.team-card h3{font-size:1.0625rem;color:var(--paper)}
.team-card p{font-size:14.5px;color:var(--mist)}
.team-close{margin-top:var(--s-7);font-size:var(--fs-lede);color:var(--paper);max-width:62ch}
/* Tile tipográfico do RT (até chegar foto real — §8.2 card 1) */
.team-media--rt{display:grid;place-content:center;gap:var(--s-3);text-align:center;background:var(--petrol)}
.rt-big{font-family:var(--font-display);font-weight:700;font-size:64px;color:var(--paper);line-height:1}
.rt-big-sub{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);padding-inline:var(--s-4)}
/* CTA inline (pós-processo) */
.cta-inline{margin-top:var(--s-7);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-5)}
/* Credencial do RT no card "Validação por engenheiro civil" — presa ao pé do card */
.team-cred{
  margin-top:auto;display:flex;flex-direction:column;gap:2px;
  border-left:2px solid var(--neon);padding:5px 0 5px var(--s-4);
}
.team-cred-nome{font-size:13.5px;font-weight:600;color:var(--paper)}
.team-cred-crea{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--neon)}
/* CTA centralizado abaixo dos cards da equipe */
.cta-inline--center{flex-direction:column;justify-content:center;text-align:center;gap:var(--s-3)}
/* steel (4.04:1) reprova WCAG AA em 11px sobre o petrol — mist dá 11.5:1 */
.cta-inline--center .mlabel{color:var(--mist)}

/* ---------- Selo RT (o lugar do Bruno — e só este) ---------- */
.rt-seal{
  display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-6);
  border:1px solid var(--line-dark);border-radius:var(--r-md);padding:var(--s-4) var(--s-5);
  background:rgba(251,250,247,.03);max-width:640px;
}
.sec--paper .rt-seal,.sec--paper2 .rt-seal{border-color:var(--line-strong);background:var(--paper)}
.rt-mark{
  flex:none;width:48px;height:48px;border-radius:var(--r-sm);
  background:var(--petrol);color:var(--paper);
  font-family:var(--font-display);font-weight:700;font-size:22px;
  display:grid;place-items:center;
}
.rt-txt{font-size:13.5px;line-height:1.5;color:var(--mist)}
.sec--paper .rt-txt,.sec--paper2 .rt-txt{color:var(--graphite)}
.rt-txt strong{color:var(--paper)}
.sec--paper .rt-txt strong,.sec--paper2 .rt-txt strong{color:var(--ink)}
.rt-status{
  display:inline-flex;align-items:center;gap:7px;margin-left:2px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--neon);
}
.sec--paper .rt-status,.sec--paper2 .rt-status{color:var(--petrol-2)}

/* ---------- Dores (.pains) — a única 1ª pessoa do site ---------- */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.pain{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-5) var(--s-5) var(--s-5) 52px;font-size:15.5px;color:var(--graphite);
}
.pain::before{
  content:"\201C";position:absolute;left:18px;top:10px;
  font-family:var(--font-display);font-size:34px;line-height:1;color:var(--petrol-2);opacity:.55;
}

/* ---------- Checks (escopo fechado) ---------- */
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3) var(--s-6)}
.check{
  display:flex;gap:var(--s-3);align-items:flex-start;font-size:15.5px;
  padding:var(--s-3) 0;border-bottom:1px solid var(--line);
}
.check .ck{
  flex:none;width:20px;height:20px;margin-top:2px;border-radius:5px;
  background:var(--ink);color:var(--neon);font-family:var(--font-mono);font-size:12px;
  display:grid;place-items:center;
}
.scope-note{margin-top:var(--s-5);font-size:14px;color:var(--graphite-2);font-style:normal}

/* ---------- Trust strip (mini-processo das páginas de serviço) ---------- */
.trust-strip{background:var(--petrol);color:var(--mist);padding-block:var(--s-4);border-top:1px solid var(--petrol-line)}
.strip-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;
}
.strip-step{display:inline-flex;align-items:center;gap:var(--s-4)}
.strip-step+.strip-step::before{content:"→";color:var(--neon);margin-right:var(--s-2)}

/* ---------- Autoridade processual local ---------- */
.auth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.auth-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-5);font-size:14.5px;color:var(--graphite-2);
}
.auth-card h3{font-size:15.5px;margin-bottom:8px}
.auth-card .mlabel{display:block;margin-bottom:10px;color:var(--petrol-2)}

/* ---------- Urgência (carta da Prefeitura) ---------- */
.urgency{
  margin-top:var(--s-7);border:1px solid var(--line-strong);border-left:3px solid var(--neon);
  border-radius:var(--r-md);background:var(--paper);padding:var(--s-6);
  box-shadow:var(--sh-card);
}
.urgency h3{font-size:1.375rem}
.urgency p{margin-top:var(--s-3);font-size:15.5px}

/* ---------- Avaliações ---------- */
.reviews-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--petrol-2);margin-bottom:var(--s-6);
}
.reviews-head a{text-decoration:underline;text-underline-offset:3px}

/* Carrossel: scroll-snap nativo, sem biblioteca. O mesmo track vale para as três
   larguras — só muda quantos cards cabem. Arrastar no celular é comportamento
   nativo do overflow-x; as setas apenas empurram o scrollLeft. */
.reviews-track{
  display:flex;gap:var(--s-5);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;
  padding-block:4px;                       /* respiro para a sombra não ser cortada */
  margin-inline:calc(-1*var(--s-2));padding-inline:var(--s-2);
}
.reviews-track::-webkit-scrollbar{display:none}
.review-card{
  flex:0 0 calc((100% - 2*var(--s-5))/3);  /* desktop: 3 visíveis */
  scroll-snap-align:start;
  background:#fff;border:1px solid rgba(31,74,102,.13);border-radius:18px;
  padding:var(--s-6);box-shadow:0 1px 2px rgba(11,22,32,.04),0 10px 28px rgba(11,22,32,.07);
  display:flex;flex-direction:column;gap:var(--s-4);
  font-family:"Inter","Inter Fallback",var(--font-body);
  transition:transform var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft),
             border-color var(--t-base) var(--ease-soft);
}
@media(hover:hover){
  .review-card:hover{
    transform:translateY(-2px);border-color:rgba(31,74,102,.22);
    box-shadow:0 2px 4px rgba(11,22,32,.05),0 16px 36px rgba(11,22,32,.10);
  }
}
/* Topo do card: avatar + identificação + "G" decorativo */
.rev-top{display:flex;align-items:center;gap:var(--s-4)}
.rev-avatar{
  flex:none;width:44px;height:44px;border-radius:50%;background:var(--petrol-2);
  color:var(--paper);display:grid;place-items:center;
  font-family:"Inter","Inter Fallback",var(--font-body);font-weight:600;font-size:18px;line-height:1;
}
.rev-id{min-width:0;flex:1}
.rev-name{display:block;font-weight:600;font-size:15.5px;color:var(--ink);letter-spacing:-.01em}
.rev-sub{display:block;font-size:13px;color:var(--graphite-2);margin-top:2px}
.rev-g{flex:none;width:18px;height:18px;opacity:.85}
.stars{display:flex;gap:3px;color:#FBBC04}
.stars svg{width:16px;height:16px;fill:currentColor}
.review-card blockquote{font-size:14.5px;line-height:1.65;color:var(--graphite);margin:0}
.rev-svc{
  margin-top:auto;padding-top:var(--s-4);border-top:1px solid rgba(31,74,102,.10);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel);
}
/* Controles */
.rev-ctrl{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);margin-bottom:var(--s-5)}
.car-btn{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(31,74,102,.18);background:#fff;color:var(--petrol-2);
  transition:background var(--t-fast),border-color var(--t-fast),opacity var(--t-fast);
}
.car-btn:hover{background:var(--paper-2);border-color:rgba(31,74,102,.34)}
.car-btn[disabled]{opacity:.35;cursor:default}
.car-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.car-dots{display:flex;justify-content:center;gap:8px;margin-top:var(--s-5)}
.car-dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:background var(--t-fast)}
.car-dot.on{background:var(--petrol-2)}

/* ---------- Caso real ---------- */
.case-card{
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--neon);
  border-radius:var(--r-md);padding:var(--s-6);box-shadow:var(--sh-card);max-width:760px;
}
.case-card .mlabel{color:var(--petrol-2);display:block;margin-bottom:var(--s-4)}
.case-row{font-size:15.5px;margin-top:var(--s-2)}
.case-row strong{color:var(--ink)}
.case-result{
  display:inline-block;margin-top:var(--s-4);font-family:var(--font-mono);font-weight:600;
  font-size:14px;letter-spacing:.06em;color:var(--ink);background:var(--neon);
  padding:6px 12px;border-radius:var(--r-sm);
}

/* ---------- Bairros ---------- */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-6)}
.pill{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:999px;padding:8px 14px;color:var(--graphite-2);
}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5) 0;text-align:left;font-family:var(--font-display);font-weight:600;
  font-size:1.0625rem;color:var(--ink);min-height:44px;
}
.faq-ic{
  flex:none;width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  display:grid;place-items:center;color:var(--petrol-2);
  transition:transform 320ms var(--ease-inout),background var(--t-fast);
}
.faq-item[data-open="true"] .faq-ic{transform:rotate(135deg);background:var(--paper-2)}
/* Sem JS, a resposta fica sempre visível; com JS (html.js), o main.js mede e anima */
.faq-a{overflow:hidden}
html.js .faq-a{max-height:0;transition:max-height 320ms var(--ease-inout)}
.faq-a-inner{padding:0 0 var(--s-5);font-size:15.5px;color:var(--graphite-2);max-width:62ch}
.faq-a-inner a{text-decoration:underline;text-underline-offset:3px}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);color:var(--mist);padding-block:var(--s-9)}
.cta-band-in{max-width:640px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:var(--s-6)}
.cta-band h2{color:var(--paper)}
.cta-tel{
  font-family:var(--font-mono);font-size:15px;color:var(--mist);
  display:inline-flex;align-items:center;gap:10px;justify-content:center;min-height:44px;
}
.cta-tel:hover{color:var(--neon)}

/* ---------- Também fazemos ---------- */
.also{border-top:1px solid var(--line)}
.also-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.also-card{
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-5);
  display:flex;flex-direction:column;gap:8px;background:var(--paper);
  transition:transform var(--t-fast) var(--ease-soft),border-color var(--t-fast) var(--ease-soft);
}
.also-card:hover{transform:translateY(-2px);border-color:var(--petrol-line)}
.also-card .mlabel{color:var(--petrol-2)}
.also-card strong{font-family:var(--font-display);color:var(--ink)}
.also-card span{font-size:14px;color:var(--graphite-2)}

/* ---------- Página legal (política de privacidade) ---------- */
.legal{max-width:820px}
.legal h1{margin-top:var(--s-6)}
.legal h2{font-size:1.375rem;margin:var(--s-7) 0 var(--s-3)}
.legal p,.legal li{color:var(--graphite-2);margin-bottom:var(--s-3)}
.legal ul{list-style:disc;padding-left:22px}
.legal code{font-family:var(--font-mono);font-size:.875em;background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.breadcrumbs--light{margin-bottom:var(--s-5)}
.breadcrumbs--light a,.breadcrumbs--light .sep{color:var(--steel)}
.breadcrumbs--light [aria-current]{color:var(--petrol-2)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--mist);padding-block:var(--s-8) var(--s-6);border-top:1px solid var(--line-dark)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:var(--s-7)}
/* Lockup completo (com ENGENHARIA): a 56px o subtítulo ainda lê; abaixo disso vira borrão */
.foot-brand{margin-bottom:var(--s-4)}
.foot-logo{height:56px;width:auto;display:block}
.foot-col h3{
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin-bottom:var(--s-4);
}
.foot-col ul+h3{margin-top:var(--s-5)}
.foot-col p,.foot-col li{font-size:14px;color:var(--mist);line-height:1.7}
.foot-col ul{display:flex;flex-direction:column;gap:var(--s-2)}
.foot-col a{min-height:44px;display:inline-flex;align-items:center}
.foot-col a:hover{color:var(--neon)}
.foot-wa{display:inline-flex;align-items:center;gap:8px;color:var(--paper)}
.foot-legal{
  margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);
  font-family:var(--font-mono);font-size:11.5px;color:var(--steel);
}
.foot-legal a{text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.foot-legal a:hover{color:var(--neon)}

/* ---------- Sticky bar mobile (conversor principal — §5.6) ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--petrol);border-top:1px solid var(--petrol-line);
  padding:8px var(--s-4) calc(8px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:4px;
  /* visibility acompanha o transform: oculta = fora da ordem de tab (WCAG 4.1.2) */
  transform:translateY(100%);visibility:hidden;
  transition:transform 320ms var(--ease-out),visibility 0s linear 320ms;
}
.sticky-cta.is-visible{transform:translateY(0);visibility:visible;transition-delay:0s,0s}
.sticky-cta.kb-hidden{transform:translateY(100%);visibility:hidden}
.sticky-btn{
  width:90%;min-height:44px;border-radius:var(--r-md);
  background:var(--neon);color:var(--ink);font-weight:600;font-size:16px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.sticky-btn:active{background:var(--neon-dark)}
.sticky-btn .wa-glyph__bg{fill:var(--ink)}
.sticky-btn .wa-glyph__fg{fill:var(--neon)}
.sticky-sub{font-size:11.5px;color:var(--mist)}
@media(min-width:1024px){.sticky-cta{display:none}}

/* ---------- Scroll progress (só páginas de serviço) ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:var(--neon);transform:scaleX(0);transform-origin:left;pointer-events:none;
}

/* ---------- Placeholder (.ph-block — regra 1.9/§7.3) ---------- */
.ph-block{
  background:repeating-linear-gradient(45deg,#FFF3B0,#FFF3B0 14px,#FFE066 14px,#FFE066 28px);
  border:2px dashed #E05252;border-radius:var(--r-md);
  padding:var(--s-5);color:#7A1F1F;font-family:var(--font-mono);font-size:13.5px;line-height:1.6;
  margin-block:var(--s-4);
}
.ph-block::before{
  content:"⚠ PLACEHOLDER";display:block;font-weight:600;letter-spacing:.1em;
  margin-bottom:6px;font-size:12px;
}

/* ---------- Sistema de reveal (§5.4 — só sob html.js-motion) ----------
   Estados OCULTOS ficam em :not(.in); o estado final não fixa transform/opacity
   para não competir com hover/tilt/:active (§4.5/§5.5). Em [data-stagger], a
   transition/delay do reveal sai de cena via .rvd (adicionada pelo motion.js
   ~1s após o reveal) — devolvendo aos filhos suas próprias transições. */
html.js-motion .rv{transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out)}
html.js-motion .rv:not(.in){opacity:0;transform:translateY(16px)}
html.js-motion .rv-clip{transition:clip-path 700ms var(--ease-out)}
html.js-motion .rv-clip:not(.in){clip-path:inset(0 0 100% 0)}
html.js-motion .rv-line{transform-origin:left;transition:transform 560ms var(--ease-out)}
html.js-motion .rv-line:not(.in){transform:scaleX(0)}
html.js-motion [data-stagger]:not(.rvd)>*{transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out);transition-delay:calc(var(--i,0)*70ms)}
html.js-motion [data-stagger]:not(.in)>*{opacity:0;transform:translateY(16px)}

/* ---------- Mobile / responsivo ---------- */
@media(max-width:1023px){
  .nav-desk,.header-tel,.nav-cta{display:none}
  .menu-btn{display:inline-flex}
  /* Hero banner no mobile: a diagonal não funciona em retrato. A foto passa a ocupar
     a largura toda, sem recorte, e o texto volta a assentar embaixo sobre o overlay. */
  .hero--banner{align-items:flex-end;min-height:min(86svh,660px);background-image:none}
  .hero--banner::before{display:none}
  .hero--banner .hero-media{left:0;right:0;width:100%;clip-path:none}
  .hero--banner .hero-media img{object-position:center top}
  /* Overlay mais forte que o padrão: aqui o texto cai em cima do casal, e o gradiente
     normal (25% no topo) deixa a lede disputando com a roupa clara. */
  .hero--banner .hero-overlay{
    display:block;
    background:linear-gradient(to top,var(--ink) 0%,rgba(11,22,32,.88) 38%,rgba(11,22,32,.66) 100%);
  }
  .hero-banner-copy{max-width:none}
}
@media(max-width:900px){
  /* Tablet: 2 cards, para não comprimir o texto da avaliação */
  .review-card{flex-basis:calc((100% - var(--s-5))/2)}
  .sec{padding-block:var(--s-8)}
  .svc-grid,.pains,.auth-grid,.also-grid{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr}
  .garantias{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .checks{grid-template-columns:1fr}
}
@media(max-width:640px){
  .brand-logo{height:36px}
  .btn{min-height:56px}
  .hero{min-height:min(88svh,720px)}
  .hero-content{padding-block:var(--s-7) var(--s-8)}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%}
  .num-grid{grid-template-columns:1fr 1fr;gap:var(--s-5)}
  .svc-grid,.pains,.auth-grid,.also-grid,.process,.garantias{grid-template-columns:1fr}
  /* Processo mobile: vertical, linha à esquerda */
  .process{gap:var(--s-5)}
  .step{padding-top:0;padding-left:var(--s-5);border-left:1px solid var(--petrol-line)}
  .step::before{display:none}
  .foot-grid{grid-template-columns:1fr;gap:var(--s-6)}
  /* Hero do hub no celular: arte 16:9 num painel de ~0,43 de razão. Os dois extremos
     falham — full-bleed com cover corta 76% da largura (a casa fica "colada"), e contain
     deixa uma faixa solta de 219px no topo. Meio-termo medido: a mídia ocupa 42% da
     altura com cover (377px de vídeo, 58% da largura visível) e o degradê a dissolve no
     ink justo onde o H1 começa — 3,47:1 no branco e 3,10:1 no neon, acima do 3:1 que o
     H1 exige por ser texto grande. Vale para o vídeo E para o poster, que é a mesma arte.
     O hero--banner (páginas de serviço) fica de fora: lá a foto já é retrato. */
  .hero:not(.hero--banner) .hero-media{height:42%;bottom:auto}
  .hero:not(.hero--banner) .hero-media img,
  .hero:not(.hero--banner) .hero-video{object-fit:cover;object-position:center 45%}
  .hero:not(.hero--banner) .hero-overlay{
    background:linear-gradient(to top,var(--ink) 0%,rgba(11,22,32,.95) 22%,
                               rgba(11,22,32,.55) 62%,rgba(11,22,32,.2) 100%);
  }

  /* Celular: 1 card por vez, ocupando quase toda a largura */
  .reviews-track{gap:var(--s-4);margin-inline:calc(-1*var(--s-5));padding-inline:var(--s-5)}
  .review-card{flex-basis:88%;padding:var(--s-5)}
  /* Grade blueprint: nunca em mobile */
  .has-grid::before{display:none}
  /* Reveals mais curtos no mobile */
  html.js-motion .rv:not(.in),html.js-motion [data-stagger]:not(.in)>*{transform:translateY(10px)}
  html.js-motion [data-stagger]:not(.rvd)>*{transition-delay:calc(var(--i,0)*50ms)}
  /* espaço para a sticky bar não cobrir o fim da página */
  .site-footer{padding-bottom:calc(var(--s-9) + env(safe-area-inset-bottom))}
}
/* Com o "bds" na altura do símbolo o logo ficou 25% mais largo, e o rótulo voltou a
   ser "ENGENHARIA · JOINVILLE" (22 caracteres): abaixo de ~420px o conjunto estoura
   e a página ganha rolagem horizontal. Encolhe o rótulo para caber. */
@media(max-width:420px){
  .brand-city{font-size:9px;letter-spacing:.1em}
}

/* ---------- prefers-reduced-motion: zero animação (§5.1-6) ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js-motion .rv:not(.in),html.js-motion .rv-clip:not(.in),html.js-motion .rv-line:not(.in),
  html.js-motion [data-stagger]:not(.in)>*,html.js-motion .hero:not(.hero-in) [data-h],
  html.js-motion .hero:not(.hero-in) [data-h="trust"] li,html.js-motion .hero:not(.hero-in) h1 .wi{
    opacity:1;transform:none;clip-path:none;
  }
}

/* ---------- Registros de campo (galeria compartilhada BC/Floripa) ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-4);margin-top:var(--s-7)}
.gal-item{position:relative;margin:0;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line-dark);grid-column:span 2;aspect-ratio:4/3;background:var(--petrol)}
.gal-item:nth-child(4),.gal-item:nth-child(5){grid-column:span 3;aspect-ratio:16/9}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gal-item:hover img{transform:scale(1.04)}
.gal-item figcaption{position:absolute;inset-inline:0;bottom:0;padding:28px var(--s-4) 10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);background:linear-gradient(to top,rgba(4,12,20,.85),transparent)}
@media (max-width:900px){.gal-grid{grid-template-columns:1fr 1fr}.gal-item,.gal-item:nth-child(4){grid-column:span 1;aspect-ratio:4/3}.gal-item:nth-child(5){grid-column:span 2;aspect-ratio:16/9}}
@media (max-width:640px){.gal-grid{grid-template-columns:1fr}.gal-item,.gal-item:nth-child(4),.gal-item:nth-child(5){grid-column:span 1;aspect-ratio:3/2}}