/* =========================================================
   RB Protect — Segurança Eletrônica
   Direção: "Guarda Noturna" — base clara + âncoras deep navy + acento dourado
   Tokens = design-system/MASTER.md (fonte da verdade)
   ========================================================= */

:root{
  /* cor */
  --ink:#0B0D10; --navy:#122A46; --navy-2:#0E2038; --navy-3:#1E3D63;
  --silver:#A7ADB5;
  --paper:#FFFFFF; --paper-2:#F4F6F8; --paper-3:#E9EDF1; --line:#DDE3E9;
  --text:#101820; --muted:#556274;
  --gold:#C9A24D; --gold-2:#E3C489;
  --wa:#0B7D63; --wa-deep:#096451;

  /* tipografia */
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --fs-h1:clamp(1.72rem,3.5vw,2.95rem);
  --fs-h2:clamp(1.8rem,3.4vw,2.9rem);
  --fs-h3:1.25rem;
  --fs-lead:clamp(1.02rem,1.3vw,1.18rem);
  --fs-sm:.875rem;
  --fs-eyebrow:.75rem;

  /* espaço (escala de 8) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:80px; --s8:112px;

  /* forma */
  --r-sm:10px; --r:16px; --r-lg:24px; --r-band:32px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 18px 44px rgba(11,13,16,.10);
  --shadow-lg:0 26px 70px rgba(11,13,16,.22);
  --hdr-h:88px;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  color-scheme:only light;
  overflow-x:clip;                 /* NUNCA overflow-x:hidden no body (quebra o FAB fixed) */
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + 12px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0; width:100%; overflow-x:clip;
  background:var(--paper); color:var(--text);
  font-family:var(--font-body); font-size:1rem; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; background:linear-gradient(135deg,var(--paper-3),var(--line))}
a{color:inherit; text-decoration:none}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; letter-spacing:-.02em; line-height:1.06}
h1{font-size:var(--fs-h1); font-weight:800; letter-spacing:-.03em; line-height:1.02}
h2{font-size:var(--fs-h2); font-weight:800}
h3{font-size:var(--fs-h3); font-weight:700; letter-spacing:-.01em}
p{margin:0}
figure,figcaption,blockquote{margin:0}   /* UA aplica margin:1em 40px em <figure> — mataria o hero no mobile */
ul,ol{margin:0; padding:0; list-style:none}
::selection{background:var(--gold); color:var(--ink)}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:4px}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--s3); position:relative; z-index:2}
section{padding-block:var(--s5); position:relative}
@media(min-width:768px){section{padding-block:var(--s6)}}
@media(min-width:1024px){section{padding-block:var(--s7)}}
.sec-soft{background:var(--paper-2)}
.sec-dark{background:var(--ink); color:var(--paper)}
.sec-dark h2,.sec-dark h3{color:var(--paper)}
.sec-dark p{color:var(--silver)}
.legal{padding-top:calc(var(--hdr-h) + var(--s6));min-height:100svh}
.legal .wrap{max-width:860px}
.legal h1{margin-bottom:var(--s3)}
.legal h2{font-size:1.3rem;margin:var(--s5) 0 var(--s2)}
.legal p,.legal li{color:var(--muted)}
.legal p+p{margin-top:var(--s2)}
.legal ul{display:grid;gap:8px;margin:var(--s2) 0;padding-left:20px;list-style:disc}
.legal a{color:var(--navy);text-decoration:underline}
.legal-back{display:inline-flex;margin-top:var(--s5)}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:var(--fs-eyebrow); font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; color:var(--muted); margin:0 0 var(--s2)
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold); flex:none}
.sec-dark .eyebrow,.hero .eyebrow{color:var(--gold-2)}
.section-head{max-width:760px; margin-bottom:var(--s4)}
.section-head p{margin-top:var(--s2); color:var(--muted); font-size:var(--fs-lead)}
.sec-dark .section-head p{color:var(--silver)}
.gold{color:var(--gold-2)}
.lead{font-size:var(--fs-lead); color:var(--muted)}

/* ---------- botões ---------- */
.btn{
  position:relative; overflow:hidden; z-index:0;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 26px; border:1px solid transparent; border-radius:var(--r-sm);
  font-family:var(--font-display); font-weight:700; font-size:.95rem; letter-spacing:.01em;
  cursor:pointer; will-change:transform;
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn svg{width:19px; height:19px; flex:none}
.btn-primary{background:var(--gold); color:var(--ink)}
.btn-primary:hover{background:var(--gold-2); box-shadow:0 14px 34px rgba(201,162,77,.34)}
.btn-wa{background:var(--wa); color:#fff}
.btn-wa:hover{background:var(--wa-deep); box-shadow:0 14px 34px rgba(11,125,99,.32)}
.btn-ghost{background:transparent; color:var(--paper); border-color:rgba(255,255,255,.34)}
.btn-ghost:hover{background:rgba(255,255,255,.10); border-color:var(--gold)}
.btn-dark{background:var(--navy); color:#fff}
.btn-dark:hover{background:var(--ink); box-shadow:var(--shadow)}
.btn-line{background:transparent; color:var(--text); border-color:var(--line)}
.btn-line:hover{border-color:var(--navy); background:var(--paper)}
.btn-sm{min-height:44px; padding:0 18px; font-size:.85rem}
.btn-block{width:100%}

/* brilho deslizante — contínuo em TODO CTA de destaque */
.btn::before{
  content:""; position:absolute; top:0; left:0; height:100%; width:0; opacity:0; z-index:-1;
  background:#fff; box-shadow:0 0 30px 20px rgba(255,255,255,.6);
  transform:skewX(-30deg); mix-blend-mode:plus-lighter; pointer-events:none;
}
.btn-primary::before,.btn-wa::before,.btn-cta::before{animation:brilho 3.4s linear infinite}
.btn:hover::before{animation:brilho 1.1s linear}
@keyframes brilho{0%{opacity:0;left:0}50%{opacity:1}100%{opacity:0;left:100%}}

/* seta que anda no hover */
.arw{transition:transform .35s var(--ease)}
.lnk:hover .arw,.btn:hover .arw{transform:translateX(5px)}
.lnk{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:.86rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--navy);
  transition:color .3s var(--ease)
}
.lnk svg{width:16px;height:16px}
.lnk:hover{color:var(--ink)}
.sec-dark .lnk{color:var(--gold-2)}

/* ---------- grafismo ---------- */
.wing{                         /* feixe de chevrons — eco da asa da águia */
  position:absolute; pointer-events:none; z-index:1; opacity:.22;
  width:min(560px,58vw); aspect-ratio:1;
  background:repeating-linear-gradient(135deg,
    var(--gold) 0 1px, transparent 1px 26px);
  mask-image:radial-gradient(closest-side,#000 5%,rgba(0,0,0,.35) 55%,transparent 100%);
  -webkit-mask-image:radial-gradient(closest-side,#000 5%,rgba(0,0,0,.35) 55%,transparent 100%);
}
.grid-tech{                    /* malha técnica sutil */
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.32;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,transparent,#000 35%,#000 65%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 35%,#000 65%,transparent);
}
.sec-dark .grid-tech,.hero .grid-tech,.ft .grid-tech,.trust-band .grid-tech,.mnav .grid-tech{
  opacity:1;
  background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px)
}
.ghost{                        /* monograma fantasma */
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  opacity:.05; width:min(560px,60vw)
}
.media{overflow:hidden; border-radius:var(--r)}
.media img{transition:transform 1s var(--ease)}
.media:hover img{transform:scale(1.06)}

/* ---------- header ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:50; height:var(--hdr-h);
  display:flex; align-items:center;
  background:rgba(11,13,16,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),height .35s var(--ease)
}
.hdr.scrolled{background:rgba(11,13,16,.95); box-shadow:0 10px 34px rgba(0,0,0,.34)}
.hdr .wrap{display:flex; align-items:center; gap:var(--s4)}
.brand{display:flex; align-items:center; flex:none}
.brand img{height:56px; width:auto; background:none; transition:transform .4s var(--ease)}
.brand:hover img{transform:scale(1.03)}
.nav{display:flex; align-items:center; gap:26px; margin-left:auto}
.nav a{
  font-family:var(--font-display); font-size:.8rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; color:#E7EAEE; position:relative; padding:6px 0;
  transition:color .3s var(--ease)
}
.nav a::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--gold); transition:width .35s var(--ease)}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.is-active::after{width:100%}
.hdr-cta{display:flex; align-items:center; gap:10px; flex:none}
.hdr-wa{
  display:grid; place-items:center; width:48px; height:48px; border-radius:var(--r-sm);
  background:var(--wa); color:#fff; transition:background .3s var(--ease),transform .3s var(--ease)
}
.hdr-wa:hover{background:var(--wa-deep); transform:translateY(-2px)}
.hdr-wa svg{width:23px;height:23px}
.burger{
  display:none; width:48px; height:48px; border:1px solid rgba(255,255,255,.22); border-radius:var(--r-sm);
  background:transparent; color:#fff; place-items:center; cursor:pointer; flex:none
}
.burger svg{width:22px;height:22px}
/* faixa apertada: entre o menu aparecer (981) e sobrar espaço (1180) o header
   precisa de gaps menores, senão logo+menu+CTA comem o padding do container */
@media(min-width:981px) and (max-width:1180px){
  .hdr .wrap{gap:var(--s3)}
  .nav{gap:18px}
  .nav a{font-size:.76rem; letter-spacing:.08em}
  .brand img{height:48px}
}

/* menu mobile — overlay full-screen */
.mnav{
  position:fixed; inset:0; z-index:60; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:var(--s2);
  padding:var(--s7) var(--s4) var(--s5); overflow-y:auto;
}
.mnav[hidden]{display:none}          /* obrigatório: display:flex sobrescreveria o [hidden] */
@media(min-width:981px){.mnav{display:none}}
.mnav .grid-tech{opacity:.7}
.mnav-close{
  position:absolute; top:16px; right:20px; width:48px; height:48px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-sm); background:transparent; color:#fff; cursor:pointer
}
.mnav-close svg{width:22px;height:22px}
.mnav nav{display:flex; flex-direction:column; gap:2px; position:relative; z-index:2; margin-bottom:var(--s3)}
.mnav nav a{
  font-family:var(--font-display); font-size:1.55rem; font-weight:800; letter-spacing:-.02em;
  color:#fff; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.09)
}
.mnav nav a:hover{color:var(--gold-2)}
.mnav .mnav-actions{display:flex; flex-direction:column; gap:12px; position:relative; z-index:2}
.mnav .mnav-actions .btn{width:100%}
.mnav .btn-primary{color:var(--ink)}
.mnav .btn-wa{color:#fff}
.mnav .mnav-foot{margin-top:var(--s4); position:relative; z-index:2; color:var(--silver); font-size:var(--fs-sm)}

/* ---------- hero (fundo full-bleed em slideshow + degradê, igual à referência) ---------- */
.hero{
  background:var(--ink); color:var(--paper); overflow:hidden;
  display:flex; align-items:center;
  min-height:min(760px,94svh);
  padding-top:calc(var(--hdr-h) + var(--s5)); padding-bottom:calc(var(--s7) + 52px)
}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.4s var(--ease)
}
/* o 1º slide aparece por padrão: se o JS cair, o hero vira foto estática (nunca buraco) */
.hero-slide:first-child,.hero-slide.is-active{opacity:1}
.hero-slide img{width:100%; height:100%; object-fit:cover; object-position:50% 46%; background:var(--ink)}
.hero-slide.is-active img{animation:kenburns 9s var(--ease) forwards}
@keyframes kenburns{from{transform:scale(1.005)} to{transform:scale(1.07)}}

.hero-veil{                      /* degradê: sólido à esquerda, foto respirando à direita */
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,
      var(--ink) 0%, var(--ink) 22%,
      rgba(11,13,16,.90) 38%, rgba(11,13,16,.62) 54%,
      rgba(11,13,16,.28) 72%, rgba(11,13,16,.12) 88%, rgba(11,13,16,.34) 100%),
    linear-gradient(180deg, rgba(11,13,16,.72) 0%, rgba(11,13,16,.10) 26%,
      rgba(11,13,16,.10) 58%, rgba(11,13,16,.80) 100%)
}
.hero .grid-tech{z-index:1}
.hero-grid{display:grid; position:relative; z-index:2}
.hero-text{max-width:730px}
.hero h1{
  color:#fff; margin-bottom:var(--s3);
  text-transform:uppercase; letter-spacing:-.02em; text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.45)
}
.hero h1 .word{display:inline-block; overflow:hidden; padding-bottom:.06em}
.hero .lead{color:#D2D8E0; max-width:46ch; text-shadow:0 1px 16px rgba(0,0,0,.5)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s4)}
.hero-ticks{display:flex; flex-wrap:wrap; gap:14px 20px; margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid rgba(255,255,255,.14)}
.hero-ticks li{display:flex; align-items:center; gap:9px; font-size:.82rem; font-weight:500; color:#E2E7ED; white-space:nowrap}
.hero-ticks .tick{
  width:21px; height:21px; border-radius:50%; flex:none;
  background:var(--gold); color:var(--ink); display:grid; place-items:center
}
.hero-ticks .tick svg{width:12px; height:12px}
.hero-mobile-media{display:none}

/* ---------- faixa de benefícios (sobrepõe o hero) ---------- */
.trust{padding-block:0; margin-top:-88px; z-index:5}
/* a faixa é mais larga que o container padrão (como na referência) p/ o texto
   dos 4 itens caber em 2–3 linhas ao lado do ícone grande */
@media(min-width:1240px){.trust .wrap{max-width:1300px}}
.trust-band{
  background:var(--navy); border-radius:var(--r-lg); padding:var(--s4);
  box-shadow:var(--shadow-lg); border:1px solid var(--navy-3); position:relative; overflow:hidden
}
.trust-grid{display:grid; gap:var(--s3); position:relative; z-index:2}
@media(min-width:600px){.trust-grid{grid-template-columns:repeat(2,1fr); gap:var(--s4)}}
@media(min-width:981px){.trust-grid{grid-template-columns:repeat(4,1fr)}}
.trust-item{display:flex; gap:16px; align-items:flex-start}
@media(min-width:981px){
  .trust-item+.trust-item{border-left:1px solid rgba(255,255,255,.12); padding-left:var(--s4)}
}
.trust-item svg{width:42px; height:42px; color:var(--gold); flex:none; margin-top:0; stroke-width:1.2}
.trust-item h3{font-size:.9rem; color:#fff; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; line-height:1.25}
.trust-item p{font-size:.82rem; color:var(--silver); line-height:1.5}

/* ---------- manifesto ---------- */
.manifesto-grid{display:grid; gap:var(--s5); align-items:center}
@media(min-width:981px){.manifesto-grid{grid-template-columns:1.05fr .95fr; gap:var(--s7)}}
.manifesto h2{max-width:16ch}
.manifesto .rule{width:64px; height:3px; background:var(--gold); margin:var(--s3) 0}
.manifesto-body p+p{margin-top:var(--s2)}
.manifesto-body{color:var(--muted); font-size:var(--fs-lead)}
.manifesto-body strong{color:var(--text); font-weight:600}
.manifesto .btn{margin-top:var(--s4)}

/* ---------- ambientes ---------- */
.amb-grid{display:grid; gap:var(--s3)}
@media(min-width:700px){.amb-grid{grid-template-columns:repeat(3,1fr)}}
.amb{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)
}
.amb:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--navy)}
.amb-fig{position:relative; aspect-ratio:16/11; overflow:hidden}
.amb-fig img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.amb:hover .amb-fig img{transform:scale(1.06)}
.amb-ic{                          /* inteiramente DENTRO da figura (overflow:hidden) — nada cortado */
  position:absolute; left:16px; bottom:16px; z-index:2;
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  background:rgba(11,13,16,.66); backdrop-filter:blur(8px);
  border:1px solid rgba(201,162,77,.42); color:var(--gold);
  transition:background .4s var(--ease),transform .4s var(--ease)
}
.amb:hover .amb-ic{background:var(--navy); transform:translateY(-3px)}
.amb-ic svg{width:23px;height:23px}
.amb-body{padding:var(--s3); display:flex; flex-direction:column; flex:1; gap:10px}
.amb-body p{color:var(--muted); font-size:.94rem; flex:1}
.amb-body .btn{margin-top:6px}

/* ---------- CFTV ---------- */
.cftv-grid{display:grid; gap:var(--s5); align-items:center}
@media(min-width:981px){.cftv-grid{grid-template-columns:.85fr 1.15fr; gap:var(--s6)}}
.cftv-fig{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:3/4; max-height:520px}
.cftv-fig img{width:100%; height:100%; object-fit:cover}
.cftv-sub{
  font-family:var(--font-display); font-weight:700; font-size:1.06rem; line-height:1.4;
  color:var(--text); margin:var(--s2) 0 var(--s3); max-width:40ch
}
.pontos{display:grid; gap:10px 18px; margin:var(--s4) 0}
@media(min-width:560px){.pontos{grid-template-columns:repeat(3,1fr)}}
.pontos li{display:flex; align-items:center; gap:9px; font-size:.92rem; color:var(--text)}
.pontos svg{width:17px; height:17px; color:var(--gold); flex:none}
.sec-dark .pontos li{color:#E4E8ED}

/* ---------- visão noturna colorida ---------- */
.noturna{overflow:hidden}
.noturna-intro{display:grid; gap:var(--s4); align-items:start}
@media(min-width:981px){.noturna-intro{grid-template-columns:1fr 1fr; gap:var(--s6)}}
.noturna-intro h2{max-width:16ch}
.noturna-intro .lead{margin-top:var(--s3); max-width:50ch}
.noturna-contexto{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s4)
}
.noturna-contexto h3{font-size:1.08rem; margin-bottom:10px}
.noturna-contexto p{color:var(--muted); font-size:.94rem}
.noturna-contexto p+p{margin-top:10px}
.noturna-grid{display:grid; gap:var(--s3); margin-top:var(--s5)}
@media(min-width:760px){.noturna-grid{grid-template-columns:repeat(2,1fr)}}
.noturna-card{
  overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 14px 36px rgba(11,13,16,.08); transition:transform .45s var(--ease),box-shadow .45s var(--ease)
}
.noturna-card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.noturna-img{position:relative; overflow:hidden; aspect-ratio:553/383; background:var(--ink)}
.noturna-img img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.noturna-card:hover .noturna-img img{transform:scale(1.025)}
.noturna-labels{
  position:absolute; inset:14px 12px auto; display:grid; grid-template-columns:1fr 1fr;
  gap:24px; pointer-events:none
}
.noturna-labels span{
  justify-self:center; padding:7px 10px; border-radius:999px;
  background:rgba(11,13,16,.74); border:1px solid rgba(255,255,255,.24);
  color:#fff; font-family:var(--font-display); font-size:.7rem; font-weight:700;
  letter-spacing:.06em; line-height:1; text-align:center; text-transform:uppercase;
  backdrop-filter:blur(7px)
}
.noturna-labels span:last-child{background:rgba(13,42,70,.82); border-color:rgba(201,162,77,.58)}
.noturna-card figcaption{padding:var(--s3); color:var(--muted); font-size:.9rem; line-height:1.6}
.noturna-footer{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s3); margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line)
}
.noturna-note{max-width:66ch; color:var(--muted); font-size:.84rem}
@media(max-width:479px){
  .noturna-labels{inset:10px 5px auto; gap:8px}
  .noturna-labels span{padding:6px 7px; font-size:.58rem; letter-spacing:.035em}
  .noturna-footer .btn{width:100%}
}

/* ---------- projeto (fundo fixo + 2 colunas de texto — o "wow" com pin+scrub) ---------- */
.projeto{overflow:hidden}
/* no desktop a seção é a que fica pinada — precisa preencher a viewport, sem sobra */
@media(min-width:981px){
  .projeto{
    min-height:100svh; display:flex; flex-direction:column; justify-content:center;
    /* a seção fica PINADA no topo: o header fixo cobriria o eyebrow sem esta folga */
    padding-top:calc(var(--hdr-h) + var(--s4)); padding-bottom:var(--s5)
  }
  .projeto>.wrap{width:100%; min-width:0}
}
/* fundo fotográfico FIXO (reaproveita um slide do hero) */
.projeto-bg{
  position:absolute; inset:0; z-index:0;
  background-image:url(../assets/img/hero-2.webp);
  background-size:cover; background-position:50% 50%;
  background-attachment:fixed
}
/* iOS/Android ignoram (ou quebram) o background-attachment:fixed → volta pro normal */
@media(hover:none),(max-width:980px){.projeto-bg{background-attachment:scroll}}
.projeto-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(11,13,16,.94) 0%, rgba(11,13,16,.86) 46%, rgba(11,13,16,.72) 100%),
    linear-gradient(180deg, rgba(11,13,16,.60), transparent 32%, transparent 68%, rgba(11,13,16,.60))
}
.projeto .grid-tech{z-index:1}
.projeto .ghost{right:-6%; top:8%; z-index:1}
.projeto-grid{display:grid; gap:var(--s4)}
@media(min-width:981px){.projeto-grid{grid-template-columns:1.05fr .95fr; gap:var(--s7); align-items:center}}
.projeto h2{max-width:19ch}
.projeto-lista .lead{color:var(--silver); margin-bottom:var(--s3)}
.checks{display:grid; gap:0}
.checks li{
  display:flex; align-items:center; gap:12px; font-size:.96rem; color:#E4E8ED;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.10)
}
.checks li:first-child{border-top:1px solid rgba(255,255,255,.10)}
.checks svg{width:17px;height:17px;color:var(--gold);flex:none}
.pull{
  border-left:3px solid var(--gold); padding:6px 0 6px var(--s3); margin:var(--s4) 0;
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.08rem,1.7vw,1.4rem);
  line-height:1.34; letter-spacing:-.01em; color:#fff; max-width:36ch
}
.pull em{font-style:normal; color:var(--gold-2)}

/* ---------- processo (timeline) ---------- */
.passos{display:grid; gap:var(--s3); counter-reset:p}
@media(min-width:700px){.passos{grid-template-columns:repeat(5,1fr); gap:var(--s2)}}
.passo{position:relative; padding-top:var(--s4)}
.passo::before{                  /* trilho */
  content:""; position:absolute; top:14px; left:0; right:0; height:1px; background:var(--line)
}
@media(max-width:699px){
  .passo::before{width:1px; height:100%; top:24px; left:13px; right:auto}
  .passo{padding:0 0 var(--s3) 46px}
}
.passo-n{
  position:absolute; top:0; left:0; z-index:2;
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--navy); color:var(--gold);
  font-family:var(--font-display); font-size:.74rem; font-weight:800
}
.passo h3{font-size:1rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; padding-right:var(--s2)}
.passo p{font-size:.88rem; color:var(--muted); padding-right:var(--s2)}

/* ---------- serviços ---------- */
.serv-grid{display:grid; gap:var(--s2)}
@media(min-width:600px){.serv-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:981px){.serv-grid{grid-template-columns:repeat(3,1fr); gap:var(--s3)}}
.serv{
  position:relative; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s4) var(--s3); display:flex; flex-direction:column; gap:12px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)
}
.serv::after{content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--gold); transition:width .5s var(--ease)}
.serv:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--navy)}
.serv:hover::after{width:100%}
.serv-ic{width:46px; height:46px; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--paper-3); color:var(--navy)}
.serv-ic svg{width:23px;height:23px}
.serv p{font-size:.92rem; color:var(--muted); flex:1}

/* ---------- por que a RB Protect ---------- */
.porque-grid{display:grid; gap:var(--s5)}
@media(min-width:981px){.porque-grid{grid-template-columns:.9fr 1.1fr; gap:var(--s6); align-items:center}}
.pilares{display:grid; gap:var(--s3)}
@media(min-width:600px){.pilares{grid-template-columns:repeat(2,1fr); gap:var(--s4)}}
.pilar{display:flex; gap:14px; align-items:flex-start}
.pilar-ic{
  width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(201,162,77,.12); border:1px solid rgba(201,162,77,.35); color:var(--gold)
}
.pilar-ic svg{width:22px;height:22px}
.pilar h3{font-size:.98rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; color:#fff}
.pilar p{font-size:.88rem; color:var(--silver)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden; background:var(--navy); border-block:1px solid var(--navy-3); padding-block:0}
.marquee__track{display:inline-flex; align-items:center; white-space:nowrap; will-change:transform; animation:marquee 42s linear infinite}
.marquee__track>span{
  font-family:var(--font-display); font-weight:700; font-size:.92rem;
  letter-spacing:.2em; text-transform:uppercase; color:#E7EAEE; padding:16px 0
}
/* precisa do >span junto: .marquee__track>span (0,1,1) vencia .marquee__sep (0,1,0)
   e pintava o losango de branco */
.marquee__track>span.marquee__sep{color:var(--gold); padding:0 24px}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ---------- prova social ---------- */
.prova{text-align:center}
.prova .wrap{max-width:820px}
.prova .eyebrow{justify-content:center}
.prova .stars{display:flex; justify-content:center; gap:6px; margin-bottom:var(--s3)}
.prova .stars svg{width:26px; height:26px; color:var(--gold)}
.prova h2{margin-bottom:var(--s2)}
.prova .lead{margin-inline:auto; max-width:56ch}
.prova-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:var(--s4)}
.prova-note{
  margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px var(--s4);
  font-size:.84rem; color:var(--muted)
}
.prova-note li{display:flex; align-items:center; gap:8px}
.prova-note svg{width:16px; height:16px; color:var(--gold); flex:none}
/* grade de depoimentos reais (usar quando o cliente enviar as avaliações) */
.prova-depos{display:grid; gap:var(--s3); margin-top:var(--s5); text-align:left}
@media(min-width:760px){.prova-depos{grid-template-columns:repeat(2,1fr)}}
.depo{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:var(--s4)}
.depo .stars{display:flex; gap:3px; margin-bottom:12px}
.depo .stars svg{width:16px;height:16px;color:var(--gold)}
.depo blockquote{margin:0 0 var(--s3); font-size:.96rem; color:var(--text); line-height:1.65}
.depo footer{display:flex; align-items:center; gap:12px}
.depo-av{width:40px; height:40px; border-radius:50%; background:var(--navy); color:var(--gold); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:.9rem; flex:none}
.depo cite{font-style:normal; font-family:var(--font-display); font-weight:700; font-size:.92rem; display:block}
.depo small{color:var(--muted); font-size:.8rem}

/* ---------- áreas atendidas ---------- */
.areas-grid{display:grid; gap:var(--s5); align-items:center}
@media(min-width:981px){.areas-grid{grid-template-columns:1fr 1.1fr; gap:var(--s6)}}
/* margem inferior > deslocamento do reveal: sem ela, os cards sobem por cima
   do parágrafo seguinte enquanto a animação em cascata roda */
.cidades{display:grid; gap:10px; grid-template-columns:repeat(2,1fr); margin-bottom:var(--s2)}
@media(min-width:600px){.cidades{grid-template-columns:repeat(3,1fr)}}
.cidade{
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm);
  padding:14px 16px; background:rgba(255,255,255,.03);
  font-family:var(--font-display); font-weight:700; font-size:.92rem; color:#fff;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)
}
.cidade:hover{border-color:var(--gold); background:rgba(201,162,77,.10); transform:translateY(-3px)}
.cidade svg{width:16px;height:16px;color:var(--gold);flex:none}
.areas-map{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--navy-3); min-height:300px}
.areas-map iframe{display:block; width:100%; height:340px; border:0; filter:grayscale(.35) contrast(1.05)}

/* ---------- FAQ ---------- */
.faq-list{display:grid; gap:10px; max-width:860px}
.faq-item{border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); overflow:hidden}
.faq-item[open]{border-color:var(--navy)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px var(--s3); display:flex; align-items:center; gap:var(--s2);
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text);
  transition:background .3s var(--ease)
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--paper-2)}
.faq-item summary svg{width:20px; height:20px; margin-left:auto; flex:none; color:var(--navy); transition:transform .35s var(--ease)}
.faq-item[open] summary svg{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 var(--s3) 20px; color:var(--muted); font-size:.95rem; max-width:70ch}

/* ---------- contato / CTA final ---------- */
.contato{overflow:hidden}
.contato .wing{right:-16%; top:-12%; opacity:.3}
.contato-grid{display:grid; gap:var(--s5)}
@media(min-width:981px){.contato-grid{grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center}}
.contato h2{max-width:14ch}
.contato-notes{display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:var(--s4)}
.contato-notes li{display:flex; align-items:center; gap:9px; font-size:.9rem; color:#D6DBE2}
.contato-notes svg{width:18px;height:18px;color:var(--gold);flex:none}
.contato-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s4)}
.form{
  background:var(--paper); border-radius:var(--r-lg); padding:var(--s4);
  box-shadow:var(--shadow-lg); position:relative; z-index:2
}
.form h3{margin-bottom:4px; color:var(--text)}   /* .sec-dark h3 é branco — aqui o card é claro */
.form label,.form small{color:var(--muted)}
.form>p{font-size:.88rem; color:var(--muted); margin-bottom:var(--s3)}
.field{margin-bottom:14px}
.field label{display:block; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); color:var(--text); font:inherit; font-size:.95rem;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)
}
.field textarea{min-height:92px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(18,42,70,.10)
}
.field-row{display:grid; gap:14px}
@media(min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
.form small{display:block; margin-top:12px; font-size:.76rem; color:var(--muted); text-align:center}

/* ---------- footer ---------- */
.ft{background:var(--ink); color:var(--silver); padding-block:var(--s6) var(--s4); position:relative; overflow:hidden}
.ft-grid{display:grid; gap:var(--s4); position:relative; z-index:2}
@media(min-width:700px){.ft-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:981px){.ft-grid{grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:var(--s5)}}
.ft img.ft-logo{height:52px; width:auto; background:none; margin-bottom:var(--s2)}
.ft p{font-size:.88rem; line-height:1.65; max-width:34ch}
.ft h4{font-family:var(--font-display); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:#fff; margin:0 0 var(--s2)}
.ft ul{display:grid; gap:8px}
.ft ul a,.ft ul li{font-size:.88rem; transition:color .3s var(--ease)}
.ft ul a:hover{color:var(--gold-2)}
.ft-social{display:flex; gap:10px; margin-top:var(--s3)}
.ft-social a{
  width:42px; height:42px; border-radius:var(--r-sm); display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); color:#fff;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)
}
.ft-social a:hover{background:var(--navy); border-color:var(--gold); transform:translateY(-2px)}
.ft-social svg{width:19px;height:19px}
.ft-bot{
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid rgba(255,255,255,.10);
  display:flex; flex-wrap:wrap; gap:10px var(--s3); justify-content:space-between;
  font-size:.8rem; position:relative; z-index:2
}
.ft-bot a:hover{color:var(--gold-2)}

/* ---------- FAB WhatsApp (filho direto de <body>) ---------- */
.fab-wa{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:70;
  display:flex; align-items:center; height:60px; width:60px; border-radius:999px;
  background:var(--wa); color:#fff; overflow:hidden; white-space:nowrap;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.28));
  transform:translateY(28px); opacity:0; pointer-events:none;
  transition:width .42s var(--ease),background .3s var(--ease),transform .5s var(--ease),opacity .5s var(--ease)
}
.fab-wa.visible{transform:none; opacity:1; pointer-events:auto; animation:fab-pulse 3s ease-out infinite}
body.menu-open .fab-wa{display:none}     /* o menu full-screen é o único plano visível */
.fab-wa svg{width:30px; height:30px; flex:none; margin:0 15px}
.fab-wa .fab-label{font-family:var(--font-display); font-weight:700; font-size:.9rem; opacity:0; transition:opacity .3s var(--ease); padding-right:0}
.fab-wa:hover{width:216px; background:var(--wa-deep); animation:none}
.fab-wa:hover .fab-label{opacity:1; padding-right:22px}
@keyframes fab-pulse{0%{box-shadow:0 0 0 0 rgba(11,125,99,.45)}70%{box-shadow:0 0 0 16px rgba(11,125,99,0)}100%{box-shadow:0 0 0 0 rgba(11,125,99,0)}}

/* ---------- consentimento de medição ---------- */
.consent{
  position:fixed; inset:auto 20px 20px auto; z-index:90; width:min(520px,calc(100% - 40px));
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:18px; border:1px solid rgba(255,255,255,.14); border-radius:var(--r);
  background:rgba(11,13,16,.97); color:#fff; box-shadow:var(--shadow-lg)
}
.consent[hidden]{display:none}
.consent strong{font-family:var(--font-display)}
.consent p{margin-top:4px;color:var(--silver);font-size:.8rem;line-height:1.5}
.consent p a{color:var(--gold-2);text-decoration:underline}
.consent-actions{display:flex;gap:8px;flex:none}
.consent .btn-line{border-color:rgba(255,255,255,.3);color:#fff}
@media(max-width:640px){
  .consent{inset:auto 12px 12px;width:calc(100% - 24px);align-items:stretch;flex-direction:column}
  .consent-actions{width:100%}
  .consent-actions .btn{flex:1}
}

/* =========================================================
   MOBILE — desenhado, não encolhido
   ========================================================= */
@media(max-width:980px){
  :root{--hdr-h:80px}
  .nav{display:none}
  .hdr-cta .btn{display:none}      /* orçamento vira o menu */
  .hdr-wa{display:none}            /* sem ícone WhatsApp no header (o FAB cobre) */
  .burger{display:grid; width:44px; height:44px}
  .burger svg{width:20px;height:20px}
  .brand img{height:58px}
  /* no mobile a .nav some, e era ELA que tinha o margin-left:auto que empurrava
     tudo pra direita — sem isso o hambúrguer encostava no logo. */
  .hdr-cta{margin-left:auto}
  .hdr .wrap{padding-right:var(--s2)}
  .hero{
    min-height:auto;
    padding-top:calc(var(--hdr-h) + var(--s5)); padding-bottom:calc(var(--s6) + 52px)
  }
  /* sem coluna lateral: o degradê vira vertical p/ o texto ficar legível sobre a foto inteira */
  .hero-veil{
    background:
      linear-gradient(180deg, rgba(11,13,16,.90) 0%, rgba(11,13,16,.80) 40%,
        rgba(11,13,16,.48) 66%, rgba(11,13,16,.88) 100%),
      linear-gradient(90deg, rgba(11,13,16,.62), rgba(11,13,16,.20))
  }
  .hero-slide img{object-position:58% 46%}
  .hero-mobile-media{
    display:block; position:relative; aspect-ratio:4/3; width:100%; margin-top:var(--s4);
    overflow:hidden; border-radius:var(--r-lg); background:var(--navy-2);
    border:1px solid rgba(201,162,77,.58);
    box-shadow:0 22px 52px rgba(0,0,0,.44),0 0 0 5px rgba(201,162,77,.07)
  }
  .hero-mobile-media::before{
    content:""; position:absolute; inset:0 0 auto; height:3px; z-index:4;
    background:linear-gradient(90deg,var(--gold),var(--gold-2),transparent 82%)
  }
  .hero-mobile-slide{
    position:absolute; inset:0; opacity:0; visibility:hidden;
    transition:opacity 1.1s var(--ease),visibility 1.1s var(--ease)
  }
  .hero-mobile-slide.is-active{opacity:1; visibility:visible}
  .hero-mobile-slide img{
    width:100%; height:100%; object-fit:cover; object-position:63% 50%; background:var(--ink)
  }
  .hero-mobile-slide.is-active img{animation:hero-mobile-zoom 7s var(--ease) forwards}
  .hero-mobile-slide::after{
    content:""; position:absolute; inset:38% 0 0;
    background:linear-gradient(180deg,transparent,rgba(11,13,16,.88))
  }
  .hero-mobile-slide figcaption{
    position:absolute; inset:auto 58px 18px 18px; z-index:2; display:flex; flex-direction:column; gap:4px;
    color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.7)
  }
  .hero-mobile-slide figcaption span{
    color:var(--gold-2); font-family:var(--font-display); font-size:.65rem; font-weight:700;
    letter-spacing:.14em; line-height:1.3; text-transform:uppercase
  }
  .hero-mobile-slide figcaption strong{
    font-family:var(--font-display); font-size:clamp(.98rem,4.4vw,1.18rem); line-height:1.2
  }
  .hero-mobile-dots{
    position:absolute; right:18px; bottom:22px; z-index:3; display:flex; align-items:center; gap:6px
  }
  .hero-mobile-dots span{
    width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.42);
    transition:width .4s var(--ease),background .4s var(--ease)
  }
  .hero-mobile-dots span.is-active{width:18px; background:var(--gold-2)}
  .trust{margin-top:-40px}
  .trust-band{padding:var(--s3)}
  .hero-cta .btn{flex:1 1 100%}
}
@keyframes hero-mobile-zoom{from{transform:scale(1.01)}to{transform:scale(1.065)}}
@media(max-width:600px){
  .hero-ticks{gap:12px 18px}
  .hero-ticks li{font-size:.8rem}
  .trust-item svg{width:38px; height:38px}
  .trust-item h3{font-size:.84rem}
  .trust-item>div{padding-right:var(--s1)}   /* o título não pode encostar na borda da faixa */
  .fab-wa{right:16px; bottom:calc(16px + env(safe-area-inset-bottom))}
  .fab-wa:hover{width:60px}
  .fab-wa:hover .fab-label{opacity:0; padding-right:0}
  .form{padding:var(--s3)}
  .wing{width:min(340px,80vw)}
  .marquee__track>span{font-size:.82rem}
  .ft-bot{flex-direction:column}
}

/* =========================================================
   Acessibilidade + força modo claro (vem DEPOIS das regras base)
   ========================================================= */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
  .fab-wa{transform:none; opacity:1; pointer-events:auto}
}
@media(prefers-color-scheme:dark){
  html,body{background:var(--paper); color:var(--text)}
  .sec-soft{background:var(--paper-2)}
  .amb,.serv,.faq-item,.form,.google-card,.depo,.depo-nav button{background:var(--paper); color:var(--text)}
  .field input,.field select,.field textarea{background:var(--paper); color:var(--text)}
}