:root{
  --primary:#C5161D;       /* vermelho principal */
  --primary-dark:#9B0F14;  /* vermelho mais escuro */
  --accent:#111111;        /* preto para ênfase/bordas */
  --ink:#111111;           /* texto principal (quase preto) */
  --muted:#6B7280;         /* cinza texto secundário */
  --bg:#ffffff;
  --paper:#ffffff;
  --line:#E5E7EB;          /* cinza borda clara */
  --soft:#F6F7F8;          /* cinza de fundo */
  --shadow:0 10px 30px rgba(17,17,17,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Poppins,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#fff;color:var(--ink)}
a{text-decoration:none;color:var(--primary)}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* --- TOPBAR preta com ícones vermelhos --- */
.topbar{background:#111;color:#fff;font-size:14px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:6px 0;gap:12px}
.tb-left,.tb-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tb-item{display:inline-flex;align-items:center;gap:6px;color:#fff}
.tb-item .ico{color:#C5161D;flex:0 0 auto}
.tb-sep{color:#bdbdbd;opacity:.9}

/* --- HEADER principal similar ao site de referência --- */
.header--inove{background:#fff;border-bottom:4px solid #cfcfcf}
.header--inove .header-inner{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;column-gap:24px;padding:18px 0;
}
.header--inove .logo{width:360px !important;height:auto !important;max-height:110px}
.header--inove .nav{justify-self:center;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.header--inove .nav a{color:#111;text-transform:uppercase;letter-spacing:.02em;font-weight:700}
.header--inove .nav a:hover{color:#C5161D}

/* Dropdown Serviços */
.nav-dropdown{position:relative}
.nav-dropdown .caret{color:#C5161D;font-weight:800;margin-left:4px}
.dropdown-menu{
  position:absolute;left:0;top:100%;min-width:240px;background:#fff;border:1px solid #E5E7EB;
  box-shadow:0 10px 30px rgba(0,0,0,.08);border-radius:8px;padding:8px 0;display:none;z-index:50;
}
.dropdown-menu a{display:block;padding:10px 14px;color:#111;text-transform:none;font-weight:600}
.dropdown-menu a:hover{background:#f6f7f8;color:#C5161D}
.nav-dropdown:hover .dropdown-menu{display:block}

/* CTA vermelho retangular */
.cta-inove{
  background:linear-gradient(90deg,#E21D2F,#B20D18);color:#fff;border:none;border-radius:6px;
  padding:12px 18px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;
}

/* Botão hambúrguer (desktop oculto) */
.hamburger{display:none;background:transparent;border:none;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:#111;margin:5px 0}

/* WhatsApp flutuante */
.float-whats{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:999px;background:#25D366;display:grid;place-items:center;box-shadow:var(--shadow);z-index:25}
.float-whats img{width:28px;height:28px}

/* Slider */
.slider{position:relative;overflow:hidden;background:#000}
.slides{position:relative;height:64vh;min-height:420px}
.slide{position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;transform:scale(1.02);opacity:0;transition:opacity .6s ease}
.slide::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,.08) 100%)}
.slide.active{opacity:1;transform:none}
.slide-inner{position:relative;height:100%;display:grid;align-content:center;gap:10px;color:#fff}
.slide-inner h1{font-size:clamp(28px,5vw,56px);line-height:1.05;margin:0}
.hl{color:#fff;border-bottom:4px solid var(--primary);padding-bottom:2px}
.slider-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px}
.slider-dots button{width:10px;height:10px;border-radius:999px;border:1px solid #fff;background:transparent;opacity:.7}
.slider-dots button.active{background:#fff;opacity:1}

/* Cards e seções */
.ribbons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.ribbon{background:#fff;border:1px solid #EAEAEA;color:#111;font-weight:600;text-align:center}

.services{padding:24px 0}
.services h2{margin:0 0 10px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc h3{margin:6px 0}
.link{color:var(--primary);font-weight:600}

.steps{padding:8px 0 0}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}

.testimonials{padding:14px 0}
.snap-cards{display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.snap{scroll-snap-align:start;min-width:300px}

.clients .client-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:center;filter:grayscale(100%);opacity:.9}
.client-logos img{border:1px dashed var(--line);border-radius:12px;padding:12px;background:#fff}

.cta-band{margin:24px 0}
.cta-inner{display:grid;place-items:center;text-align:center;padding:24px;border-radius:16px;background:#fff;border:1px solid var(--line)}

.page-head{padding-top:28px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.masonry{columns:4 240px;column-gap:12px}
.masonry img{width:100%;margin:0 0 12px;border-radius:12px;border:1px solid var(--line);break-inside:avoid}

.form label{display:block;font-weight:700;margin:10px 0 6px}
.form input,.form textarea{width:100%;padding:12px;border-radius:12px;border:1px solid #D1D5DB;background:#fff;color:#111}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.file input{padding:8px}

/* Rodapé */
.site-footer{margin-top:36px;border-top:1px solid var(--line);background:#fff}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:24px 0}
.footer-links{display:flex;gap:10px;flex-wrap:wrap}
.copy{text-align:center;color:#6b7280;padding:12px 0;border-top:1px solid #eef2f6}

/* Mobile */
@media (max-width:980px){
  .header--inove .header-inner{grid-template-columns:auto auto 1fr;gap:12px}
  .header--inove .nav{position:fixed;inset:70px 16px auto 16px;background:#fff;border:1px solid #E5E7EB;
    border-radius:14px;padding:14px;flex-direction:column;gap:10px;display:none}
  .header--inove .nav.open{display:flex}
  .header--inove .logo{width:240px !important;max-height:90px}
  .dropdown-menu{position:static;display:block;border:none;box-shadow:none;padding:0;margin-left:8px}
  .hamburger{display:block}
}
@media (max-width:600px){
  .masonry{columns:2 140px}
}

/* largura um pouco maior pra caber logo + menu + CTA sem quebrar */
.container{max-width:1280px}

/* header em 3 colunas (logo | nav | cta) e alinhado ao centro */
.header--inove .header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto; /* era auto 1fr auto auto */
  align-items:center;
  column-gap:18px; /* menos espaço entre colunas */
  padding:18px 0;
}

/* logo grande, mas com limite de altura p/ não “empurrar” o header */
.header--inove .logo{
  width:340px !important;   /* se ainda quebrar, teste 320px */
  height:auto !important;
  max-height:100px;         /* reduz um pouco a altura máxima */
  display:block;
}

/* nav central SEM quebrar linha e com menos gap */
.header--inove .nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:22px;                 /* era 26px */
  flex-wrap:nowrap;         /* impede quebra */
  white-space:nowrap;       /* impede quebra de texto */
}

/* cta alinhado verticalmente e um pouco mais compacto */
.cta-inove{
  align-self:center;
  padding:12px 16px;        /* era 12px 18px */
}

/* dropdown não desloca layout */
.nav-dropdown{position:relative}
.dropdown-menu{top:100%}

/* MOBILE: mantém o comportamento anterior */
@media (max-width:1200px){
  .header--inove .logo{width:300px !important;max-height:96px}
  .header--inove .nav{gap:18px}
}
@media (max-width:1100px){
  .header--inove .logo{width:260px !important;max-height:90px}
  .cta-inove{padding:10px 14px}
}

/* ==== FOOTER DARK (estilo referência) ==== */
.footer-dark{
  background:#0f0f0f; color:#eee; border-top:4px solid #cfcfcf;
}
.footer-top{
  display:grid; grid-template-columns:1.2fr 1fr 1.2fr;
  gap:28px; padding:34px 0;
}
.footer-logo{width:220px; height:auto; margin-bottom:12px}
.footer-dark .about{color:#d9d9d9; line-height:1.6; margin:6px 0 0}

.ft-title{
  color:#fff; font-weight:800; letter-spacing:.02em; margin:4px 0 10px;
  text-transform:uppercase; position:relative; display:inline-block;
}
.ft-title::after{
  content:""; display:block; width:48px; height:3px; background:var(--primary);
  margin-top:6px;
}

/* listas */
.ft-list, .ft-nav, .ft-contact{list-style:none; margin:0; padding:0}
.ft-list.bullets li{
  position:relative; padding-left:14px; margin:8px 0; color:#f0f0f0;
}
.ft-list.bullets li::before{
  content:""; position:absolute; left:0; top:.6em; width:6px; height:6px;
  background:var(--primary); border-radius:1px;
}
.ft-nav li{margin:10px 0}
.ft-nav a{color:#fff; font-weight:800; letter-spacing:.02em}
.ft-nav a:hover{color:var(--primary)}

/* mapa */
.ft-map{margin:12px 0 12px}
.ft-map iframe{
  width:100%; height:160px; border:3px solid var(--primary); border-radius:6px;
  filter:grayscale(.15) contrast(1.05);
}

/* contatos + ícones */
.ft-contact li{
  display:flex; gap:8px; align-items:flex-start; margin:10px 0; color:#e8e8e8;
}
.ft-contact .ico{width:18px; height:18px; color:#e8e8e8; flex:0 0 auto}
.ft-contact a{color:#fff}
.ft-contact a:hover{color:var(--primary)}
.ft-social{display:flex; gap:12px; margin-top:6px}
.ft-social .ico{width:22px; height:22px; color:#fff}
.ft-social a:hover .ico{color:var(--primary)}

/* barra inferior */
.footer-bottom{
  margin-top:18px; background:linear-gradient(90deg,#E21D2F,#B20D18); color:#fff;
}
.fb-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0; font-weight:600;
}
.fb-credit{opacity:.95}

/* responsivo */
@media (max-width:980px){
  .footer-top{grid-template-columns:1fr; gap:20px}
  .footer-logo{width:200px}
  .fb-inner{flex-direction:column; gap:6px; text-align:center}
}
/* Centralizar TODO o conteúdo do body como no header/footer */
.container{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}

/* Páginas antigas que usam .content (seu snippet) */
.content{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}

/* Garante que seções soltas dentro de <main> também centralizem */
main > section:not(.slider):not(.full-bleed){
  max-width:1280px;
  margin-left:auto; margin-right:auto;
  padding-left:20px; padding-right:20px;
}
/* ===== WhatsApp flutuante com anéis (igual à imagem) ===== */
.float-whats{
  position:fixed;
  right:18px; bottom:18px;
  width:60px; height:60px;
  border-radius:9999px;
  background:#25D366;           /* verde WhatsApp */
  color:#fff;
  display:grid; place-items:center;
  /* anel branco fino + anel verde-claro maior */
  box-shadow:
    0 0 0 4px #ffffff,          /* anel branco */
    0 0 0 14px rgba(37,211,102,.28); /* anel verde-claro */
  z-index:9999;
  transition:transform .15s ease;
}
.float-whats:hover{ transform: translateY(-2px); }
.float-whats:focus-visible{ outline:3px solid rgba(37,211,102,.45); outline-offset:3px; }

/* ícone interno */
.float-whats .fw-ico{
  width:26px; height:26px; color:#fff; display:block;
}

/* esconder qualquer label que você tenha usado antes */
.fw-label{ display:none !important; }

/* safe-area iOS */
@supports (bottom: env(safe-area-inset-bottom)){
  .float-whats{
    right: calc(18px + env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
  }
}
/* Evita scroll lateral fantasma em telas pequenas */
html, body { max-width: 100%; overflow-x: hidden; }

/* Ajustes progressivos das grades e do header */
@media (max-width: 1200px){
  .ribbons{grid-template-columns:repeat(3,1fr)}
  .clients .client-logos{grid-template-columns:repeat(3,1fr)}
  .header--inove .nav{gap:18px}
  .header--inove .logo{width:300px !important; max-height:96px}
}

/* Tablet / landscape */
@media (max-width: 980px){
  /* Header: menu como “drawer” sem estourar a tela */
  .header--inove .nav{
    position:fixed; inset:70px 16px auto 16px; z-index:9999;
    background:#fff; border:1px solid #E5E7EB; border-radius:14px; padding:14px;
    flex-direction:column; gap:10px; display:none; max-height:calc(100dvh - 120px); overflow:auto;
  }
  .header--inove .nav.open{display:flex}

  /* Grids principais */
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-5{grid-template-columns:repeat(3,1fr)}
  .ribbons{grid-template-columns:1fr 1fr}
  .clients .client-logos{grid-template-columns:1fr 1fr}

  /* Slider um pouco mais baixo */
  .slides{height:56vh; min-height:360px}
}

/* Celulares */
@media (max-width: 680px){
  .grid-3{grid-template-columns:1fr}
  .grid-5{grid-template-columns:1fr 1fr}
  .ribbons{grid-template-columns:1fr}
  .clients .client-logos{grid-template-columns:1fr 1fr}

  /* Topbar: some só o endereço (linha enorme) para caber tudo */
  .tb-left .tb-item:first-child{display:none}

  .cta-inner{padding:18px}
  .slides{height:50vh; min-height:320px}
}

/* Telas muito pequenas */
@media (max-width: 480px){
  .grid-5{grid-template-columns:1fr}
  .clients .client-logos{grid-template-columns:1fr}
}

/* WhatsApp “fw”: respeita safe area do iOS como o .float-whats */
@supports (bottom: env(safe-area-inset-bottom)){
  .fw{
    right: calc(18px + env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

.topbar{
  background:#0f0f10; color:#fff; font-size:14px;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0; gap:12px;
}
.tb-left,.tb-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tb-item{display:inline-flex; align-items:center; gap:6px; color:#fff}
.tb-item .ico{color:var(--primary); flex:0 0 auto}
.tb-sep{color:#bdbdbd; opacity:.9}
.tb-item.wa .ico{color:#25D366}     /* verde WhatsApp */
.tb-item.ph .ico{color:#9ad1ff}     /* sutil pro telefone */
.tb-item.mail .ico{color:#ffd27a}   /* sutil pro e-mail */

/* Texto que pode ser ocultado no mobile */
.tb-text{display:inline}

/* ===== Quebra para tablet/celular ===== */
@media (max-width: 980px){
  .topbar-inner{
    display:grid;
    grid-template-columns: 1fr auto; /* endereço/esquerda | botões/direita */
    row-gap:6px;
  }
  .tb-left{min-width:0} /* permite ellipsis */
  .tb-left .addr{
    max-width:100%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    opacity:.95;
  }
  .tb-sep{display:none} /* remove os pipes verticais */
  /* botões com área de toque maior */
  .tb-right .tb-item{
    padding:7px 10px;
    background:#151515; border:1px solid #242424; border-radius:8px;
  }
}

/* ===== Celulares — ainda mais compacto ===== */
@media (max-width: 680px){
  /* mantém endereço, mas truncado; esconde textos longos dos botões */
  .tb-text{display:none}
  .tb-right{gap:8px}
  .tb-right .tb-item{padding:8px}       /* vira botão quadradinho de ícone */
  .tb-right .tb-item .ico{width:18px;height:18px}
}

/* ======= PATCH DE LAYOUT (coloque no FINAL do style.css) ======= */

/* Container único e consistente */
.container{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}

/* Topbar preta — alinhamento e quebra elegantes */
.topbar{background:#111;color:#fff;font-size:14px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 0}
.tb-left,.tb-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tb-item{display:inline-flex;align-items:center;gap:6px;color:#fff}
.tb-item .ico{width:16px;height:16px;color:var(--primary);flex:0 0 auto}
.tb-sep{color:#bdbdbd;opacity:.7}
@media (max-width:640px){
  .topbar-inner{justify-content:center;text-align:center}
  .tb-left,.tb-right{justify-content:center}
  .tb-sep{display:none}
}

/* Header em 3 colunas (logo | nav | CTA) e menu mobile */
.header--inove .header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:18px;padding:14px 0}
.header--inove .logo{width:clamp(180px,26vw,340px)!important;height:auto!important;max-height:100px}
.header--inove .nav{justify-self:center;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.header--inove .nav a{color:#111;text-transform:uppercase;letter-spacing:.02em;font-weight:700}
.header--inove .nav a:hover{color:var(--primary)}

@media (max-width:980px){
  .header--inove .nav{
    position:fixed; inset:70px 16px auto 16px; background:#fff; border:1px solid #E5E7EB;
    border-radius:14px; padding:14px; flex-direction:column; gap:10px; display:none; z-index:60;
  }
  .header--inove .nav.open{display:flex}
  .dropdown-menu{position:static;display:block;border:none;box-shadow:none;padding:0;margin-left:8px}
  .hamburger{display:block}
}

/* Grid e cards coerentes */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:980px){ .grid-2{grid-template-columns:1fr} }
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.about-head{padding-top:28px}

/* WhatsApp flutuante – mantém a versão bonita e responsiva */
.float-whats{
  position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:9999px;background:#25D366;color:#fff;
  display:grid;place-items:center;box-shadow:0 0 0 4px #fff,0 0 0 14px rgba(37,211,102,.28);z-index:9999;transition:transform .15s ease;
}
.float-whats:hover{transform:translateY(-2px)}
.float-whats .fw-ico{width:26px;height:26px;color:#fff}
@supports (bottom: env(safe-area-inset-bottom)){
  .float-whats{right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom))}
}