/* ═══════════════════════════════════════════════════════════
   COMERCIAL 5A SEG — style.css (global) — v3 formas fluidas
   ═══════════════════════════════════════════════════════════ */

:root{
  /* cores extraídas do logo e do selo enviados pelo cliente */
  --grafite:#17191C;
  --grafite-2:#22262B;
  --grafite-3:#2E343A;
  --branco:#FFFFFF;
  --areia:#F4F4F2;
  --areia-2:#EAEAE6;
  --laranja:#EA4E1B;        /* marca — superfícies e texto sobre grafite (4,78:1) */
  --laranja-acao:#C33D11;   /* botões — 5,25:1 com branco. O da marca reprova em AA */
  --laranja-hover:#A63310;
  --laranja-suave:#FDEFEA;
  --cinza:#6E7378;
  --cinza-claro:#9AA0A6;
  --linha:#E2E2DD;
  --linha-escura:#343A41;
  --verde-intel:#20AE44;

  /* ── ESCALA DE RAIO — hierarquia, não um valor só ───────
     pílula → botões, chips, tags
     xl     → blocos de seção inteira
     lg     → superfícies grandes (foto, mapa, formulário)
     md     → cards
     sm     → campos e elementos pequenos                  */
  --r-pill:999px;
  --r-xl:clamp(26px,3.6vw,46px);
  --r-lg:clamp(18px,2.4vw,28px);
  --r-md:18px;
  --r-sm:12px;

  --sombra:0 2px 4px rgba(23,25,28,.03), 0 12px 28px rgba(23,25,28,.06);
  --sombra-alta:0 4px 10px rgba(23,25,28,.05), 0 22px 46px rgba(23,25,28,.10);

  --fonte:'Archivo','Helvetica Neue',Arial,sans-serif;
  --col:1200px;
  --topbar-h:38px;
  --header-h:78px;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 14px + env(safe-area-inset-top,0px));
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--branco);
  color:var(--grafite);
  font-family:var(--fonte);
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px;border-radius:var(--r-sm)}

/* ── Tipografia ─────────────────────────────────── */
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.05rem,5.2vw,3.7rem);font-variation-settings:'wdth' 106,'wght' 800}
h2{font-size:clamp(1.65rem,3.6vw,2.6rem);font-variation-settings:'wdth' 104,'wght' 750}
h3{font-size:1.15rem;font-variation-settings:'wght' 700;line-height:1.32;letter-spacing:-.006em}
h4{font-size:1rem;font-variation-settings:'wght' 700;line-height:1.35}
p{margin:0 0 1.1em;max-width:68ch}
p:last-child{margin-bottom:0}
.sub{font-size:clamp(1.02rem,2vw,1.19rem);color:var(--cinza);max-width:58ch;line-height:1.58}
.num{font-variant-numeric:tabular-nums}
.escuro .sub{color:#B4BAC0}

/* ── Estrutura ──────────────────────────────────── */
.env{width:min(100% - 2.4rem,var(--col));margin-inline:auto}
.sec{padding-block:clamp(3.2rem,7vw,5.6rem)}
.sec--curta{padding-block:clamp(2.2rem,4.5vw,3.4rem)}

/* blocos de seção com canto macio — a transição fluida da referência */
.escuro{background:var(--grafite);color:#E7E9EB;border-radius:var(--r-xl);overflow:hidden}
.escuro h2,.escuro h3,.escuro h4{color:var(--branco)}
.escuro p{color:#B4BAC0}
.claro{background:var(--areia);border-radius:var(--r-xl)}
/* seções coladas: a de cima não arredonda embaixo, a de baixo não arredonda em cima */
.cola-abaixo{border-bottom-left-radius:0;border-bottom-right-radius:0}
.cola-acima{border-top-left-radius:0;border-top-right-radius:0}

.cab{max-width:60ch;margin-bottom:clamp(2rem,4vw,2.8rem)}
.cab--meio{margin-inline:auto;text-align:center}
.cab--meio .sub{margin-inline:auto}

/* marcador de seção — traço curto de ponta redonda, o eco do perímetro */
.cab::before{
  content:"";display:block;width:58px;height:5px;border-radius:var(--r-pill);
  background:var(--laranja);margin-bottom:1.3rem;
}
.cab--meio::before{margin-inline:auto}

/* ── Botões: pílula ─────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:54px;padding:.9rem 1.85rem;border:2px solid transparent;border-radius:var(--r-pill);
  font-family:var(--fonte);font-size:1rem;font-variation-settings:'wght' 700;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.btn--p{background:var(--laranja-acao);color:var(--branco);box-shadow:0 6px 16px rgba(195,61,17,.24)}
.btn--p:hover{background:var(--laranja-hover);box-shadow:0 10px 24px rgba(195,61,17,.30)}
.btn--wa{background:var(--verde-intel);color:var(--branco);box-shadow:0 6px 16px rgba(32,174,68,.22)}
.btn--wa:hover{background:#1B9439;box-shadow:0 10px 24px rgba(32,174,68,.28)}
.btn--linha{background:transparent;color:var(--grafite);border-color:var(--linha)}
.btn--linha:hover{background:var(--grafite);color:var(--branco);border-color:var(--grafite)}
.escuro .btn--linha{color:var(--branco);border-color:var(--linha-escura)}
.escuro .btn--linha:hover{background:var(--branco);color:var(--grafite);border-color:var(--branco)}
.btn--sm{min-height:46px;padding:.55rem 1.3rem;font-size:.92rem}
.acoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem}

/* ── Topbar ─────────────────────────────────────── */
.topbar{background:var(--grafite);color:#AEB4BA;font-size:.82rem}
.topbar__in{display:flex;align-items:center;gap:1.6rem;min-height:var(--topbar-h)}
.topbar a{text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.topbar a:hover{color:var(--branco)}
.topbar svg{width:14px;height:14px;flex-shrink:0;color:var(--laranja)}
.topbar__dir{margin-left:auto;display:flex;gap:1.6rem}
@media (max-width:900px){.topbar{display:none}}

/* ── Header ─────────────────────────────────────── */
.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:80;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.6) blur(10px);backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--linha)}
.topo__in{display:flex;align-items:center;gap:1rem;min-height:var(--header-h)}

/* Logo: a arte é NEGATIVA (letras brancas com fio cinza).
   Sobre fundo claro usar logo-5a-h-escuro; sobre grafite, logo-5a-h. */
.marca{display:flex;align-items:center;text-decoration:none;flex-shrink:0;line-height:0}
.marca img{display:block;width:101px;height:46px}
@media (max-width:520px){.marca img{width:88px;height:40px}}

.nav{display:flex;gap:.15rem;margin-left:1.3rem}
.nav > li{list-style:none;position:relative}
.nav__a{display:block;text-decoration:none;padding:.58rem .9rem;border-radius:var(--r-sm);transition:background .18s ease;white-space:nowrap}
.nav__a small{display:block;font-size:.67rem;color:var(--cinza);line-height:1;margin-bottom:.16rem}
.nav__a strong{font-size:.95rem;font-variation-settings:'wght' 700;line-height:1.1}
.nav__a:hover{background:var(--areia)}
/* o li inteiro mantém o menu aberto, inclusive enquanto o ponteiro
   atravessa a ponte */
.nav li:hover .mega,
.nav li:focus-within .mega,
.mega:hover{
  visibility:visible;opacity:1;transform:none;
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear 0s;
}

/* Dropdown com tolerância.
   Dois problemas resolvidos aqui:
   1. o vão de 8px entre o link e o menu fazia o hover cair no meio do
      caminho — a ponte invisível do ::before cobre esse vão;
   2. display:none sumia na hora. Agora é visibility com 400ms de atraso
      no fechamento, então dá tempo de descer sem correr.
   O atraso sobrevive ao prefers-reduced-motion: aquela regra zera a
   DURAÇÃO da transição, não o delay. */
.mega{
  position:absolute;top:calc(100% + 8px);left:0;z-index:90;
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-md);
  min-width:310px;padding:.55rem;box-shadow:var(--sombra-alta);
  visibility:hidden;opacity:0;transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .4s;
}
/* ponte invisível sobre o vão entre o link e o menu */
.mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:14px}
.mega li{list-style:none}
.mega a{display:block;text-decoration:none;padding:.58rem .8rem;font-size:.93rem;border-radius:var(--r-sm)}
.mega a:hover{background:var(--laranja-suave);color:var(--laranja-acao)}

.topo__tel{display:flex;flex-direction:column;line-height:1.15;text-decoration:none;margin-left:auto;text-align:right}
.topo__tel small{font-size:.7rem;color:var(--cinza)}
.topo__tel strong{font-size:1.05rem;font-variation-settings:'wght' 700}

.hamb{display:none;margin-left:auto;background:none;border:1px solid var(--linha);width:50px;height:50px;border-radius:var(--r-pill);cursor:pointer;align-items:center;justify-content:center}
.hamb span,.hamb span::before,.hamb span::after{display:block;width:20px;height:2px;border-radius:var(--r-pill);background:var(--grafite);content:"";position:relative}
.hamb span::before{top:-6px;position:absolute}
.hamb span::after{top:6px;position:absolute}

@media (max-width:1140px){
  .nav,.topo__tel{display:none}
  .hamb{display:flex}
  .topo .btn{display:none}
}

.menu-mob{display:none;background:var(--branco);border-bottom:1px solid var(--linha);padding:.6rem 0 1.3rem}
.menu-mob.aberto{display:block}
.menu-mob a{display:block;text-decoration:none;padding:.78rem 1rem;margin-bottom:.3rem;border-radius:var(--r-sm);background:var(--areia);font-variation-settings:'wght' 600}
.menu-mob .acoes{margin-top:1.1rem}
.menu-mob .btn{flex:1}
@media (min-width:1141px){.menu-mob{display:none!important}}

/* ── Placeholder de foto (nunca banco de imagem) ── */
.foto{position:relative;background:var(--areia-2);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;text-align:center;padding:1.4rem;overflow:hidden}
.foto span{font-size:.78rem;color:#83887E;max-width:28ch;line-height:1.45}
.escuro .foto{background:var(--grafite-2)}
.escuro .foto span{color:#767C83}

/* ── Formulário ─────────────────────────────────── */
.form{background:var(--branco);padding:clamp(1.5rem,3vw,2.2rem);border:1px solid var(--linha);border-radius:var(--r-lg);box-shadow:var(--sombra-alta)}
.campo{margin-bottom:.95rem}
.campo label{display:block;font-size:.87rem;font-variation-settings:'wght' 600;margin-bottom:.34rem}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.85rem 1.05rem;border:1px solid #CFCFC9;border-radius:var(--r-sm);
  font-family:var(--fonte);font-size:1rem;color:var(--grafite);background:var(--branco);min-height:52px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.campo textarea{min-height:108px;resize:vertical;border-radius:var(--r-md)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--laranja-acao);outline:none;box-shadow:0 0 0 4px rgba(234,78,27,.16)
}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
@media (max-width:520px){.dupla{grid-template-columns:1fr}}
.lgpd{display:flex;gap:.65rem;align-items:flex-start;font-size:.85rem;color:var(--cinza);margin:1rem 0 1.2rem;line-height:1.45}
.lgpd input{width:21px;height:21px;min-height:21px;flex-shrink:0;margin-top:1px;accent-color:var(--laranja-acao)}
.lgpd a{color:var(--laranja-acao)}
.hp{position:absolute!important;left:-9999px!important;opacity:0;height:0}
.form .btn{width:100%}
.form__nota{font-size:.79rem;color:var(--cinza);margin:.85rem 0 0;text-align:center}
.aviso{padding:.85rem 1.1rem;border-radius:var(--r-sm);background:var(--laranja-suave);color:var(--laranja-hover);font-size:.9rem;margin-bottom:1.1rem;display:none}
.aviso--ok{background:#E8F7ED;color:#14792F}

/* ── Rodapé ─────────────────────────────────────── */
.rodape{background:var(--grafite);color:#9AA0A6;padding-block:clamp(2.8rem,5vw,4.2rem) 0;font-size:.9rem;border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:clamp(1rem,3vw,2.5rem)}
.rodape__grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:2.2rem}
.rodape .rotulo{font-size:.76rem;letter-spacing:.14em;color:var(--laranja);margin-bottom:.9rem;font-variation-settings:'wght' 700}
.rodape li{list-style:none;margin-bottom:.46rem}
.rodape a{text-decoration:none}
.rodape a:hover{color:var(--branco);text-decoration:underline}
.marca-rodape{display:block;margin-bottom:1.1rem;line-height:0}
.marca-rodape img{display:block;width:128px;height:58px}
.rodape__base{margin-top:2.8rem;border-top:1px solid var(--linha-escura);padding-block:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;font-size:.82rem}
@media (max-width:900px){.rodape__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rodape__grid{grid-template-columns:1fr}}

/* ── Barra fixa mobile: cápsula flutuante ───────── */
.barra-mob{
  position:fixed;left:.7rem;right:.7rem;bottom:calc(.7rem + env(safe-area-inset-bottom,0px));z-index:95;display:none;
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--linha);border-radius:var(--r-pill);
  padding:.45rem;gap:.45rem;box-shadow:var(--sombra-alta);
}
.barra-mob .btn{flex:1;min-height:50px;font-size:.95rem;padding-inline:.6rem}
@media (max-width:1140px){.barra-mob{display:flex}body{padding-bottom:96px}}

.pula{position:absolute;left:-9999px;background:var(--grafite);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-pill);z-index:200}
.pula:focus{left:.5rem;top:.5rem}

/* ── Selo Intelbras ─────────────────────────────────
   O bloco verde é CSS; a arte branca é PNG/WebP transparente.
   Arte nativa 139x53 — até 70px de largura fica nítida em retina. */
.selo{
  display:inline-flex;align-items:center;justify-content:center;line-height:0;
  background:linear-gradient(100deg,#20AE44 0%,#3DC660 100%);
  border-radius:8px;padding:.55rem .85rem;flex-shrink:0;
}
.selo__arte{display:block;height:auto}
/* arte solta, para apoiar direto num fundo que já é verde */
.selo--nu{background:none;padding:0;border-radius:0}
/* horizontal: a arte é baixa e larga, pede menos respiro em cima e embaixo */
.selo--h{padding:.5rem .95rem}
.selo--h.selo--nu{padding:0}

.selo-link--mob{display:flex;text-decoration:none;align-items:center;justify-content:center;margin-top:1.1rem}
@media (min-width:1141px){.selo-link--mob{display:none}}

.selo--rodape{margin-bottom:1.1rem}
.selo--intel{margin-bottom:1.2rem}

/* Rótulo: parece título, não é. Fica fora da hierarquia de headings. */
.rotulo{margin:0 0 .7rem;font-size:.76rem;letter-spacing:.14em;font-variation-settings:'wght' 700}
.rodape .rotulo{color:var(--laranja)}