/* SafeHelp, página inicial (safehelp.com.br): tokens e componentes base.
   Sistema visual definido em site-safehelp/briefs/03-design.md. Mobile-first.
   Regras: nenhum conteúdo depende de animação para aparecer; foco sempre visível;
   prefers-reduced-motion desliga transições. Sem fonte nem script de terceiros. */

/* ---------- Fontes (woff2 próprios em /inicio/fontes, só latin) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fontes/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fontes/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Raleway";font-style:normal;font-weight:700;font-display:swap;src:url("fontes/raleway-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Raleway";font-style:normal;font-weight:800;font-display:swap;src:url("fontes/raleway-latin-800-normal.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  /* Marca (pixels do logo oficial) */
  --azul:#034991;            /* "Safe" do logo. Primário, links, títulos de destaque */
  --azul-claro:#508DCA;      /* "Help" do logo. Só decorativo, ícone, borda, texto >= 24px */
  /* Escala do azul */
  --azul-950:#071C36;        /* rodapé */
  --azul-900:#022C5A;        /* fundo do herói e da faixa de chamada */
  --azul-700:#023B78;        /* hover do primário */
  --azul-500:#2F6FB4;        /* fim do degradê, sem texto pequeno em cima */
  --azul-300:#8FC0F0;        /* texto de apoio sobre azul-950 */
  --azul-200:#A9CDF2;        /* sobrelinha sobre azul-900 / azul */
  --azul-100:#DCE8F6;
  --azul-50:#EAF2FB;
  /* Neutros */
  --fundo:#F5F7FB;
  --superficie:#FFFFFF;
  --tinta:#16212E;           /* texto principal */
  --texto-2:#46525F;         /* parágrafos de apoio */
  --texto-3:#5D6875;         /* legendas, dicas (mínimo para texto pequeno) */
  --borda:#DDE4EE;           /* divisória decorativa */
  --borda-forte:#C9D3DF;
  --borda-campo:#7A8592;     /* contorno de campo: 3,75:1 (componente de interface >= 3:1) */
  /* Produtos (conversa com safehub.com.br e safeged.com.br) */
  --produto:#0A746C;
  --produto-texto:#085D56;
  --produto-50:#E6F4F1;
  /* Estados */
  --whats:#0E6F3D;
  --whats-hover:#0B5A31;
  --ok:#16804F;
  --ok-texto:#12703F;
  --ok-50:#E7F5EE;
  --aviso:#A15C07;
  --aviso-50:#FFF4E5;
  --erro:#B42318;
  --erro-50:#FEF3F2;
  /* Degradês */
  --degrade-heroi:linear-gradient(135deg,#022C5A 0%,#034991 62%,#0F5AA6 100%);
  --degrade-marca:linear-gradient(135deg,#034991 0%,#508DCA 100%);

  /* Tipografia */
  --fonte-titulo:"Raleway","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fonte-corpo:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --t-h1:clamp(2rem,1.35rem + 3.2vw,3.5rem);        /* 32 a 56 px */
  --t-h2:clamp(1.625rem,1.2rem + 2vw,2.5rem);       /* 26 a 40 px */
  --t-h3:clamp(1.1875rem,1.05rem + .6vw,1.4375rem); /* 19 a 23 px */
  --t-destaque:clamp(1.0625rem,1rem + .35vw,1.25rem); /* 17 a 20 px: subtítulo do herói */
  --t-corpo:1rem;            /* 16 px, nunca menor no corpo */
  --t-pequeno:.9375rem;      /* 15 px: texto de cartão e dica */
  --t-legenda:.8125rem;      /* 13 px: sobrelinha em caixa alta, selo */
  --lh-titulo:1.12;
  --lh-h3:1.3;
  --lh-corpo:1.6;
  --lh-cartao:1.55;

  /* Espaços (base 4) */
  --e-1:4px;--e-2:8px;--e-3:12px;--e-4:16px;--e-5:20px;--e-6:24px;--e-8:32px;--e-10:40px;--e-12:48px;--e-16:64px;
  --lateral:clamp(16px,5vw,40px);
  --secao:clamp(56px,8vw,104px);
  --largura:1160px;
  --largura-texto:68ch;

  /* Raios */
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-pilula:999px;

  /* Sombras (tingidas de azul, nunca preto puro) */
  --sombra-1:0 1px 2px rgba(3,73,145,.06),0 8px 24px -12px rgba(3,73,145,.18);
  --sombra-2:0 2px 6px rgba(3,73,145,.08),0 24px 48px -20px rgba(3,73,145,.32);
  --sombra-3:0 30px 60px -28px rgba(2,22,48,.55);
  --anel-foco:0 0 0 3px #FFFFFF,0 0 0 6px var(--azul);

  /* Movimento */
  --t-rapida:.18s;--t-media:.3s;--curva:cubic-bezier(.2,.7,.2,1);

  /* Toque */
  --toque:44px;
}

/* ---------- Reset base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;min-width:320px;background:var(--fundo);color:var(--tinta);font-family:var(--fonte-corpo);font-size:var(--t-corpo);line-height:var(--lh-corpo);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video,picture{display:block;max-width:100%;height:auto}
img{font-style:italic}
input,button,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--azul);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--fonte-titulo);color:var(--tinta);letter-spacing:-.015em;text-wrap:balance;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;font-variant-ligatures:no-common-ligatures}
h1{font-size:var(--t-h1);font-weight:800;line-height:var(--lh-titulo);letter-spacing:-.025em}
h2{font-size:var(--t-h2);font-weight:800;line-height:var(--lh-titulo)}
h3{font-size:var(--t-h3);font-weight:700;line-height:var(--lh-h3)}
p{text-wrap:pretty;max-width:var(--largura-texto)}
strong,b{font-weight:600}
::selection{background:var(--azul-100);color:var(--tinta)}

/* Foco visível em tudo que é interativo */
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}
.sobre-escuro :focus-visible,.heroi :focus-visible,.faixa-chamada :focus-visible,.rodape :focus-visible{outline-color:#FFFFFF}

/* ---------- Utilitários ---------- */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pular{position:absolute;left:12px;top:-60px;z-index:100;background:var(--azul);color:#fff;padding:12px 16px;border-radius:var(--r-sm);font-weight:600;text-decoration:none}
.pular:focus{top:12px}
.conteiner{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--lateral)}
.secao{padding-block:var(--secao)}
.secao--branca{background:var(--superficie)}
.secao--gelo{background:var(--azul-50)}
.secao-cabeca{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.secao-cabeca--centro{margin-inline:auto;text-align:center}
.secao-cabeca--centro p{margin-inline:auto}
.secao-intro{margin-top:var(--e-4);font-size:var(--t-destaque);line-height:1.6;color:var(--texto-2)}
.sobrelinha{display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--e-3);font:600 var(--t-legenda)/1.3 var(--fonte-corpo);letter-spacing:.14em;text-transform:uppercase;color:var(--azul)}
.sobrelinha::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--degrade-marca)}
.secao-cabeca--centro .sobrelinha::before{display:none}
.icone{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nowrap{white-space:nowrap}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--toque);padding:12px 22px;border-radius:var(--r-pilula);border:1.5px solid transparent;
  font:600 1rem/1.2 var(--fonte-corpo);text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-rapida) ease,border-color var(--t-rapida) ease,color var(--t-rapida) ease,box-shadow var(--t-rapida) ease,transform var(--t-rapida) ease}
.btn .icone{width:20px;height:20px}
.btn--grande{min-height:52px;padding:14px 26px;font-size:1.0625rem}
.btn--primario{background:var(--azul);color:#FFFFFF;box-shadow:0 10px 22px -12px rgba(3,73,145,.8)}
.btn--primario:hover{background:var(--azul-700)}
.btn--secundario{background:var(--superficie);color:var(--azul);border-color:var(--azul)}
.btn--secundario:hover{background:var(--azul-50)}
.btn--whats{background:var(--whats);color:#FFFFFF;box-shadow:0 10px 22px -12px rgba(14,111,61,.8)}
.btn--whats:hover{background:var(--whats-hover)}
/* Variantes para fundo escuro (herói, faixa de chamada) */
.btn--claro{background:#FFFFFF;color:var(--azul)}
.btn--claro:hover{background:var(--azul-50)}
.btn--contorno-claro{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.7)}
.btn--contorno-claro:hover{background:rgba(255,255,255,.12);border-color:#FFFFFF}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn[aria-busy="true"]{cursor:progress}
.acoes{display:flex;flex-wrap:wrap;gap:var(--e-3)}
@media (max-width:519px){.acoes .btn{width:100%}}

/* Link com seta (cartões) */
.link-seta{display:inline-flex;align-items:center;gap:8px;min-height:var(--toque);font-weight:600;color:var(--azul);text-decoration:none}
.link-seta .icone{width:18px;height:18px;transition:transform var(--t-rapida) ease}
.link-seta:hover{text-decoration:underline}
@media (hover:hover){.link-seta:hover .icone{transform:translateX(3px)}}

/* ---------- Cabeçalho (sempre branco: o logo colorido nunca vai sobre foto) ---------- */
.cabecalho{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--borda);-webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px)}
.cabecalho .conteiner{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);min-height:68px}
.cabecalho-logo{display:inline-flex;align-items:center;min-height:var(--toque)}
.cabecalho-logo img{width:150px;height:auto}
.menu{display:none}
.menu a{display:inline-flex;align-items:center;min-height:var(--toque);padding:0 12px;color:var(--tinta);font-weight:600;font-size:.9375rem;text-decoration:none;border-radius:var(--r-sm)}
.menu a:hover{color:var(--azul);background:var(--azul-50)}
.cabecalho .btn{min-height:var(--toque);padding:10px 16px;font-size:.9375rem}
@media (min-width:960px){
  .cabecalho .conteiner{min-height:76px}
  .cabecalho-logo img{width:172px}
  .menu{display:flex;gap:2px}
}

/* ---------- Herói ---------- */
.heroi{position:relative;overflow:hidden;color:#FFFFFF;background:
  radial-gradient(640px 420px at 92% 18%,rgba(80,141,202,.45),transparent 65%),
  var(--degrade-heroi);padding-block:clamp(48px,8vw,96px) clamp(56px,9vw,112px)}
.heroi::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 78% 35%,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse 70% 70% at 78% 35%,#000 20%,transparent 72%)}
.heroi .conteiner{position:relative;display:grid;gap:clamp(32px,5vw,56px);align-items:center}
.heroi h1{color:#FFFFFF}
.heroi .sobrelinha{color:var(--azul-200)}
.heroi .sobrelinha::before{background:var(--azul-200)}
.heroi-texto{margin-top:var(--e-5);font-size:var(--t-destaque);line-height:1.6;color:#DCE8F6;max-width:56ch}
.heroi .acoes{margin-top:var(--e-8)}
.heroi-selos{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:var(--e-6);font-size:var(--t-pequeno);color:#DCE8F6}
.heroi-selos li{display:inline-flex;align-items:center;gap:8px}
.heroi-selos .icone{width:18px;height:18px;color:var(--azul-200)}
.heroi-visual img{width:100%}
@media (min-width:960px){.heroi .conteiner{grid-template-columns:1.05fr .95fr}}

/* ---------- Cartão de sistema ---------- */
.grade-sistemas{display:grid;gap:var(--e-5)}
@media (min-width:720px){.grade-sistemas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.grade-sistemas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cartao-sistema{--acento:var(--azul);--acento-50:var(--azul-50);--acento-texto:var(--azul);
  position:relative;display:flex;flex-direction:column;min-width:0;background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra-1);
  transition:box-shadow var(--t-media) ease,transform var(--t-media) ease,border-color var(--t-media) ease}
.cartao-sistema--produto{--acento:var(--produto);--acento-50:var(--produto-50);--acento-texto:var(--produto-texto)}
.cartao-sistema::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--acento);z-index:1}
.cartao-sistema-midia{aspect-ratio:16/10;background:var(--acento-50);border-bottom:1px solid var(--borda);overflow:hidden}
.cartao-sistema-midia img{width:100%;height:100%;object-fit:cover;object-position:top left}
.cartao-sistema-corpo{display:flex;flex-direction:column;gap:var(--e-3);flex:1;padding:var(--e-6)}
.cartao-sistema-marca{height:30px;width:auto;align-self:flex-start}
.cartao-sistema-titulo-marca{display:flex;align-items:center;min-height:34px}
.cartao-sistema h3{font-size:var(--t-h3)}
.cartao-sistema p{font-size:var(--t-pequeno);line-height:var(--lh-cartao);color:var(--texto-2)}
.cartao-sistema-lista{display:grid;gap:var(--e-2);margin-top:var(--e-1)}
.cartao-sistema-lista li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:var(--t-pequeno);line-height:var(--lh-cartao);color:var(--tinta)}
.cartao-sistema-lista .icone{width:18px;height:18px;margin-top:3px;color:var(--acento);stroke-width:2.2}
.cartao-sistema-rodape{margin-top:auto;padding-top:var(--e-3);border-top:1px solid var(--borda)}
.cartao-sistema-rodape .link-seta{color:var(--acento-texto)}
.selo{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:4px 10px;border-radius:var(--r-pilula);font:600 var(--t-legenda)/1.3 var(--fonte-corpo);letter-spacing:.02em;background:var(--acento-50);color:var(--acento-texto)}
@media (hover:hover){.cartao-sistema:hover{transform:translateY(-3px);box-shadow:var(--sombra-2);border-color:var(--azul-100)}}
/* Carro-chefe: cartão largo, com mídia ao lado no computador */
.cartao-sistema--destaque{grid-column:1/-1}
@media (min-width:900px){
  .cartao-sistema--destaque{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .cartao-sistema--destaque .cartao-sistema-midia{order:2;aspect-ratio:auto;min-height:100%;border-bottom:0;border-left:1px solid var(--borda);display:grid;place-items:center;padding:var(--e-6)}
  .cartao-sistema--destaque .cartao-sistema-midia img{height:auto;object-fit:contain}
  .cartao-sistema--destaque .cartao-sistema-corpo{padding:var(--e-10)}
}

/* ---------- Etapas da implantação (sempre visíveis, sem depender de rolagem) ---------- */
.etapas{display:grid;gap:var(--e-4);counter-reset:etapa}
.etapa{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--e-4);align-items:start;background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--e-5);box-shadow:var(--sombra-1)}
.etapa-numero{counter-increment:etapa;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--azul-50);border:2px solid var(--azul-100);color:var(--azul);font:800 1.125rem/1 var(--fonte-titulo);font-feature-settings:"lnum" 1}
.etapa-numero::before{content:counter(etapa)}
.etapa:first-child .etapa-numero{background:var(--azul);border-color:var(--azul);color:#FFFFFF}
.etapa h3{font-size:1.125rem;line-height:var(--lh-h3)}
.etapa p{margin-top:6px;font-size:var(--t-pequeno);line-height:var(--lh-cartao);color:var(--texto-2)}
@media (min-width:960px){
  .etapas{grid-template-columns:repeat(var(--colunas,4),minmax(0,1fr));gap:var(--e-5)}
  .etapa{grid-template-columns:1fr;padding:var(--e-6)}
  .etapa:not(:last-child)::after{content:"";position:absolute;top:47px;left:calc(var(--e-6) + 56px);right:calc(-1 * var(--e-5) + 8px);height:2px;background:repeating-linear-gradient(90deg,var(--azul-100) 0 6px,transparent 6px 12px)}
}

/* ---------- Perguntas frequentes (details/summary nativo) ---------- */
.faq{display:grid;gap:var(--e-3);max-width:860px;margin-inline:auto}
.faq-item{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-md);box-shadow:var(--sombra-1)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);min-height:56px;padding:14px 20px;cursor:pointer;list-style:none;font-weight:600;font-size:1.0625rem;line-height:1.4;color:var(--tinta);border-radius:var(--r-md)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .icone{width:22px;height:22px;color:var(--azul);transition:transform var(--t-media) var(--curva)}
.faq-item[open] summary .icone{transform:rotate(180deg)}
.faq-item[open]{border-color:var(--azul-100)}
.faq-resposta{padding:0 20px 18px;color:var(--texto-2);line-height:var(--lh-corpo)}
.faq-resposta p+p{margin-top:var(--e-3)}

/* ---------- Formulário ---------- */
.form-cartao{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-xl);padding:clamp(20px,4vw,40px);box-shadow:var(--sombra-2)}
.form-grade{display:grid;gap:var(--e-5)}
@media (min-width:720px){.form-grade{grid-template-columns:repeat(2,minmax(0,1fr))}.campo--inteiro,.form-acoes{grid-column:1/-1}}
.campo{display:grid;gap:6px;min-width:0}
.campo label,.campo legend{font-weight:600;font-size:.9375rem;line-height:1.4;color:var(--tinta);padding:0}
.campo fieldset{border:0;margin:0;padding:0;min-width:0}
.obrigatorio{color:var(--erro);margin-left:2px}
.campo input[type="text"],.campo input[type="email"],.campo input[type="tel"],.campo select,.campo textarea{
  width:100%;min-height:52px;padding:12px 16px;border:1.5px solid var(--borda-campo);border-radius:var(--r-md);background:var(--superficie);
  font-size:1rem;line-height:1.4;color:var(--tinta);-webkit-appearance:none;appearance:none;transition:border-color var(--t-rapida) ease,box-shadow var(--t-rapida) ease}
.campo input::placeholder,.campo textarea::placeholder{color:#6B7684;opacity:1}
.campo input:hover,.campo select:hover{border-color:var(--texto-2)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(3,73,145,.18)}
.campo-dica{font-size:.875rem;line-height:1.45;color:var(--texto-3)}
.campo-erro{display:none;align-items:center;gap:6px;font-size:.875rem;font-weight:600;line-height:1.4;color:var(--erro)}
.campo-erro .icone{width:16px;height:16px}
.campo.invalido input,.campo [aria-invalid="true"]{border-color:var(--erro);background:var(--erro-50)}
.campo.invalido .campo-erro{display:flex}
/* Opções Sim/Não em pílula (o input radio real fica acessível por baixo) */
.opcoes{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:4px}
.opcao{position:relative}
.opcao input{position:absolute;opacity:0;width:1px;height:1px}
.opcao span{display:inline-flex;align-items:center;gap:10px;min-height:var(--toque);min-width:104px;padding:10px 18px;border:1.5px solid var(--borda-campo);border-radius:var(--r-pilula);background:var(--superficie);font-weight:600;cursor:pointer;transition:background-color var(--t-rapida) ease,border-color var(--t-rapida) ease,color var(--t-rapida) ease}
.opcao span::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--borda-campo);background:#FFFFFF;box-shadow:inset 0 0 0 3px #FFFFFF;flex:none}
.opcao input:checked+span{border-color:var(--azul);background:var(--azul-50);color:var(--azul)}
.opcao input:checked+span::before{border-color:var(--azul);background:var(--azul)}
.opcao input:focus-visible+span{outline:3px solid var(--azul);outline-offset:3px}
.form-acoes .btn{width:100%}
@media (min-width:720px){.form-acoes .btn{width:auto;min-width:240px}}
.form-privacidade{display:flex;gap:8px;align-items:flex-start;margin-top:var(--e-4);font-size:.875rem;line-height:1.5;color:var(--texto-3)}
.form-privacidade .icone{width:16px;height:16px;margin-top:3px}
.aviso{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);font-size:var(--t-pequeno);line-height:1.5}
.aviso .icone{width:20px;height:20px;margin-top:1px}
.aviso--info{background:var(--azul-50);border:1px solid var(--azul-100);color:var(--tinta)}
.aviso--info .icone{color:var(--azul)}
.aviso--ok{background:var(--ok-50);border:1px solid #BFE3CF;color:var(--ok-texto)}
.aviso--erro{background:var(--erro-50);border:1px solid #FDDCD8;color:var(--erro)}

/* ---------- Faixa de chamada (fundo escuro) ---------- */
.faixa-chamada{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(28px,5vw,56px);color:#FFFFFF;background:radial-gradient(520px 320px at 100% 0%,rgba(80,141,202,.4),transparent 62%),var(--degrade-heroi);box-shadow:var(--sombra-3)}
.faixa-chamada h2{color:#FFFFFF}
.faixa-chamada p{margin-top:var(--e-3);color:#DCE8F6;font-size:var(--t-destaque)}
.faixa-chamada .acoes{margin-top:var(--e-6)}

/* ---------- Faixa do Grupo SafeWork ---------- */
.faixa-grupo{background:var(--azul-50);border-block:1px solid var(--azul-100);padding-block:clamp(40px,6vw,64px)}
.faixa-grupo-cabeca{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--e-3);margin-bottom:var(--e-6)}
.faixa-grupo-cabeca h2{font-size:clamp(1.25rem,1.05rem + 1vw,1.75rem)}
.grade-grupo{display:grid;gap:var(--e-3)}
@media (min-width:640px){.grade-grupo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.grade-grupo{grid-template-columns:repeat(4,minmax(0,1fr))}}
.marca-grupo{display:flex;flex-direction:column;gap:4px;min-height:var(--toque);padding:var(--e-4) var(--e-5);background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-md);text-decoration:none;color:var(--tinta);transition:border-color var(--t-rapida) ease,box-shadow var(--t-rapida) ease}
.marca-grupo b{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--fonte-titulo);font-weight:800;font-size:1.0625rem;color:var(--azul)}
.marca-grupo b .icone{width:16px;height:16px;color:var(--texto-3)}
.marca-grupo span{font-size:.875rem;line-height:1.45;color:var(--texto-2)}
.marca-grupo:hover{border-color:var(--azul-claro);box-shadow:var(--sombra-1)}

/* ---------- Rodapé ---------- */
.rodape{background:var(--azul-950);color:#C7D3E0;padding:clamp(48px,7vw,72px) 0 calc(28px + env(safe-area-inset-bottom));font-size:var(--t-pequeno);line-height:1.6}
.rodape-grade{display:grid;gap:var(--e-8)}
@media (min-width:900px){.rodape-grade{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--e-10)}}
.rodape-logo{width:160px;height:auto}
.rodape-marca p{margin-top:var(--e-4);max-width:34ch}
.rodape h2{font:600 var(--t-legenda)/1.3 var(--fonte-corpo);letter-spacing:.14em;text-transform:uppercase;color:var(--azul-300);margin-bottom:var(--e-3)}
.rodape ul{display:grid;gap:2px}
.rodape a{display:inline-flex;align-items:center;gap:8px;min-height:var(--toque);color:#FFFFFF;text-decoration:none;overflow-wrap:anywhere}
.rodape a:hover{text-decoration:underline}
.rodape a .icone{width:18px;height:18px;color:var(--azul-300)}
.rodape address{font-style:normal}
.rodape-base{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;margin-top:var(--e-10);padding-top:var(--e-5);border-top:1px solid rgba(255,255,255,.14);font-size:.8125rem;color:#AEBBCB}

/* ---------- Botão flutuante de WhatsApp (só celular) ---------- */
.whats-flutuante{position:fixed;z-index:60;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--whats);color:#FFFFFF;box-shadow:0 14px 28px -10px rgba(14,111,61,.7)}
.whats-flutuante .icone{width:28px;height:28px}
@media (min-width:960px){.whats-flutuante{display:none}}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .cartao-sistema:hover,.btn:active{transform:none}
}

/* ---------- Impressão ---------- */
@media print{
  .cabecalho,.whats-flutuante,.heroi::before{display:none}
  .heroi,.faixa-chamada{background:#FFFFFF;color:var(--tinta)}
  .heroi h1,.faixa-chamada h2{color:var(--tinta)}
}