:root{
  --navy:#4169e1;        /* texto/menu */
  --navy-60:#0f274299;   /* hover */
  --gold:#FFB200;        /* barra inferior, links de ênfase */

  /* hero */
  --hero-overlay:.55;
  --hero-min-h:78vh;
  --hero-text-max:720px;
}

/* Header */
.suprema-header{ background:#4169e1; position:sticky; top:0; z-index:1030; box-shadow:0 0 0 0 transparent; }
.suprema-header .navbar{ padding-top:1.1rem; padding-bottom:1.1rem; overflow:visible; } /* overflow visível p/ dropdown */
.suprema-header .gold-bar{ height:6px; background:var(--gold); width:100%; }

/* Brand */
.brand-wrap{ gap:.9rem; }
.brand-title{ line-height:1; color:var(--navy); font-weight:600; letter-spacing:.45rem; text-transform:uppercase; font-size:1.25rem; }
.brand-sub{ color:var(--navy-60); font-size:.72rem; letter-spacing:.14rem; text-transform:uppercase; }
.brand-logo{ width:44px; height:auto; max-width:44px; }

/* Menu */
.navbar-nav{ gap:2.2rem; }

/* Links do menu (header branco) */
.suprema-header .navbar .nav-link{
  color:white !important;
  text-transform:uppercase;
  letter-spacing:.06rem;
  font-weight:500;
  padding:.25rem 0 !important;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease, color .2s ease, opacity .2s ease;
}
.suprema-header .navbar .nav-link:hover,
.suprema-header .navbar .nav-link:focus{
  color:white !important;
  opacity:.85;
}
.suprema-header .navbar .nav-link.active,
.suprema-header .navbar .nav-link[aria-current="page"],
.suprema-header .navbar .nav-link.show{
  color:white !important;
  border-color:var(--gold);
}

/* Toggler (header branco = ícone escuro padrão, sem inverter) */
.navbar-toggler{ border:0; outline:0; }
.navbar-toggler:focus{ box-shadow:none; }
.navbar-toggler-icon{ filter:none !important; }

/* ====== MOBILE NAVBAR (logo em cima e botão “MENU” abaixo) ====== */
@media (max-width: 991.98px){
  /* empilha tudo verticalmente dentro do .container do nav */
  .suprema-header .navbar .container{
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
  }
  /* logo maior e centralizado */
  .suprema-header .brand-wrap{ order:0; }
  .suprema-header .brand-wrap img{ max-height:60px; width:auto; }

  /* botão MENU ocupando a largura toda, logo abaixo do logo */
  .suprema-header .navbar-toggler{
    order:1;
    width:100%;
    display:flex; align-items:center; justify-content:center;
    padding:.85rem 1rem;
    border:1px solid #dfe3ea;
    border-radius:999px;
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
  }
  /* esconde o hamburger padrão */
  .suprema-header .navbar-toggler .navbar-toggler-icon{ display:none; }
  /* insere o texto MENU no botão */
  .suprema-header .navbar-toggler::after{
    content:"MENU";
    font-weight:800;
    letter-spacing:.16rem;
    color:var(--navy);
  }
  /* quando aberto, troca o rótulo */
  .suprema-header .navbar-toggler[aria-expanded="true"]::after{ content:"FECHAR"; }

  /* menu colapsado ocupa 100% e vem abaixo do botão */
  .suprema-header .navbar-collapse{
    order:2;
    width:100%;
    padding-top:.75rem; padding-bottom:.75rem;
  }
  .suprema-header .navbar-collapse.collapse.show{
    margin-top:.25rem;
    
  }

  /* toques maiores em mobile */
  .suprema-header .navbar-nav{ gap:.25rem; }
  .suprema-header .navbar .nav-link{ padding:.7rem 0 !important; }
}

/* Responsivo header (demais ajustes) */
@media (max-width:1199.98px){ .navbar-nav{ gap:1.25rem; } }
@media (max-width:991.98px){
  .brand-title{ letter-spacing:.35rem; font-size:1.1rem; }
  .navbar-collapse{ padding-top:.75rem; padding-bottom:.75rem; }
  .nav-link{ padding:.45rem 0 !important; }
}

/* ===== HERO ===== */
.hero{
  position:relative; color:#fff; min-height:var(--hero-min-h);
  display:flex; align-items:center; padding-block:clamp(3rem, 6vw, 7rem); overflow:hidden;
}
.hero .container{ position:relative; z-index:1; max-width:1140px; }

/* Fundo do hero com fallback sólido + image-set quando suportado */
.hero .hero-bg{
  position:absolute; inset:0; z-index:0;

  /* paths relativos à pasta /eloclima2/css/ → ../img/ */
  --img1: var(--hero-img-1x, var(--hero-img, url('../img/background-eloclima.webp')));
  --img2: var(--hero-img-2x, var(--hero-img, url('../img/background-eloclima.webp')));

  /* Fallback universal */
  background-image:
    linear-gradient(180deg,
      rgba(0,0,0, calc(var(--hero-overlay, .55) + .06)) 0%,
      rgba(0,0,0, var(--hero-overlay, .55)) 100%),
    var(--img1);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  filter: contrast(1.06) saturate(1.05);
  image-rendering: -webkit-optimize-contrast;
}
/* Modernos */
@supports (background-image: image-set(url("") 1x)){
  .hero .hero-bg{
    background-image:
      linear-gradient(180deg,
        rgba(0,0,0, calc(var(--hero-overlay, .55) + .06)) 0%,
        rgba(0,0,0, var(--hero-overlay, .55)) 100%),
      image-set( var(--img1) 1x, var(--img2) 2x );
  }
}
/* Safari antigos */
@supports (background-image: -webkit-image-set(url("") 1x)){
  .hero .hero-bg{
    background-image:
      linear-gradient(180deg,
        rgba(0,0,0, calc(var(--hero-overlay, .55) + .06)) 0%,
        rgba(0,0,0, var(--hero-overlay, .55)) 100%),
      -webkit-image-set( var(--img1) 1x, var(--img2) 2x );
  }
}

/* textos */
.hero-title{
  font-weight:700; line-height:1.08; margin-bottom:1.2rem;
  max-width:var(--hero-text-max); letter-spacing:.2px;
  font-size:clamp(2.2rem, 2.2rem + 2.8vw, 3rem);
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.hero-sub{
  color:rgba(255,255,255,.92); max-width:var(--hero-text-max);
  font-weight:500; font-size:clamp(1.1rem, .9rem + .9vw, 1.8rem); margin-bottom:1.8rem;
}

/* botão WhatsApp */
.btn-whatsapp{ --wapp:#198754; background:var(--wapp); border-color:#1ebe57; color:#fff; font-weight:700; padding:.95rem 1.6rem; }
.btn-whatsapp:hover{ background:#1ebe57; border-color:#1aae4f; color:#fff; }

/* acessibilidade */
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* mobile */
@media (max-width:575.98px){
  .hero{ min-height:70vh; }
  .btn-whatsapp{ width:100%; }
}

/* ===== Offset para âncoras (header sticky) ===== */
section[id]{ scroll-margin-top: 84px; }

/* ===== Espaçamento seções ===== */
.py-6{ padding-block: clamp(3rem, 5vw, 6rem); }

/* ===== Títulos/Subtítulos ===== */
.section-title {
  color: var(--navy);
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem);
  line-height: 1.2;
}


.section-subtitle{
  color:rgba(15,39,66,.75); font-weight:500; text-align:center;
  font-size:clamp(1rem, .95rem + .3vw, 1.25rem);
}

/* ===== Benefícios ===== */
.feature-item{
  display:flex; align-items:flex-start; gap:.75rem; padding:.35rem 0;
  color:#1b2b44; font-size:clamp(1.05rem, .95rem + .3vw, 1.35rem);
}
.icon-check{ color:var(--gold); font-size:1.15rem; line-height:1; margin-top:.25rem; }

/* ===== Cards de Serviços ===== */
.services .service-card{
  border:2px solid rgba(19, 22, 24, .35);
  border-radius:14px;
  box-shadow:0 2px 12px rgba(19, 22, 24,.06);
}
.services .card-img-top{ aspect-ratio:16/10; object-fit:cover; border-top-left-radius:12px; border-top-right-radius:12px; }
.services .card-body{ padding:1.75rem; }
.services .crown{ display:inline-block; }
.services .service-title{ color:var(--navy); font-weight:800; font-size:clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height:1.2; margin-bottom:.6rem; }
.services .service-text{ color:#000; font-size:clamp(1rem, .96rem + .2vw, 1.1rem); margin:0 auto 1rem; max-width:28rem; }
.services .service-link{ display:inline-block; text-transform:uppercase; font-weight:700; letter-spacing:.04em; color:var(--gold); text-decoration:none; }
.services .service-link:hover{ text-decoration:underline; }

/* ===== Galeria ===== */
.galeria .gal-item{ overflow:hidden; border-radius:8px; }
.galeria .gal-item img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.galeria .carousel-indicators.dots-outside{ position:static; margin-top:1rem; }
.galeria .carousel-indicators [data-bs-target]{ width:12px; height:12px; border-radius:50%; background-color:#0f2742; opacity:.25; border:0; margin:0 .35rem; }
.galeria .carousel-indicators .active{ opacity:1; }
.galeria .cta-big{ padding:.95rem 1.6rem; font-weight:700; }
.galeria .whatsapp-fab{
  position:fixed; right:22px; bottom:22px; width:56px; height:56px; border-radius:50%;
  background:#198754; color:#fff; display:grid; place-items:center; font-size:1.6rem;
  box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:1040; text-decoration:none;
}
.galeria .whatsapp-fab:hover{ filter:brightness(.95); }

/* ===== Por que investir ===== */
.why-section{ background:#f2d81b; }
.why-title{ color:var(--navy); font-weight:700; max-width:24ch; font-size:clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem); line-height:1.15; }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem 1.25rem; }
@media (max-width:1199.98px){ .why-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:767.98px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:479.98px){ .why-grid{ grid-template-columns:1fr; } }
.why-card{
  background:#0f2742; color:#fff; font-weight:800; text-align:center;
  border-radius:12px 22px 12px 22px; padding:1.1rem .9rem; min-height:94px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.08);
}

/* ===== Quem Somos ===== */
.about-section{ color:#fff; overflow:hidden; padding-block:clamp(3rem, 5vw, 5.5rem); position:relative; }
.about-section .container{ max-width:1140px; position:relative; z-index:1; }
.about-bg{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0, calc(var(--about-overlay, .5) + .15)) 0%,
      rgba(0,0,0, var(--about-overlay, .5)) 55%,
      rgba(0,0,0, .35) 100%),
    var(--about-img, url('../img/quem-somos.webp')) center/cover no-repeat;
  filter:saturate(.95) contrast(.95);
}
.gold-line{ position:absolute; left:0; top:0; width:100%; height:6px; background:var(--gold); z-index:1; }
.about-title{ font-weight:800; line-height:1.1; margin-bottom:1rem; font-size:clamp(1.8rem, 1.2rem + 2.2vw, 3rem);}
.about-link{ color:#fff; font-weight:700; text-decoration:none; border-bottom:2px solid rgba(255,255,255,.85); padding-bottom:.1rem; }
.about-link:hover{ opacity:.9; }
@media (max-width:575.98px){ .about-section{ padding-block:2.5rem; } }

/* ===== Vantagens (bandeirinha) ===== */
.perks .perk{
  --perk-bg:#ececec; background:var(--perk-bg); color:var(--navy);
  padding:2.2rem 1.4rem 2.8rem; border-radius:10px 10px 0 0; box-shadow:0 4px 18px rgba(15,39,66,.06);
  clip-path:polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
}
.perks .perk-ico{ font-size:2.8rem; color:#0f2742; opacity:.9; margin-bottom:.6rem; }
.perks .perk-text{ font-weight:600; line-height:1.25; font-size:clamp(1rem, .95rem + .25vw, 1.15rem); }
@media (max-width:575.98px){ .perks .perk{ padding:1.6rem .9rem 2.4rem; } }

/* ===== Clientes ===== */
/* Título */
.clients .section-title{ color:var(--navy); font-weight:700; font-size:clamp(1.8rem, 1.1rem + 2.2vw, 3rem); }

/* LOGO TICKER (substitui o carousel) */
.logo-ticker{ position:relative; overflow:hidden; width:100%; padding-block:.5rem; }
.logo-ticker .track{
  display:flex; align-items:center;
  gap:clamp(24px, 4vw, 56px);
  will-change: transform;
  animation: ticker-scroll var(--dur, 40s) linear infinite;
}
.logo-ticker:hover .track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){ .logo-ticker .track{ animation:none; } }

@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); } /* a trilha é duplicada via JS */
}

/* ===== FAQ ===== */
.faq-section{ background:#1a4556; }
.faq-figure{ margin:0; border:6px solid #fff; border-radius:6px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.faq-figure img{ display:block; width:100%; height:auto; object-fit:cover; }
.faq-acc .accordion-item{ border:0; border-radius:.5rem; overflow:hidden; margin-bottom:.8rem; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.faq-acc .accordion-button{
  position:relative; padding:.9rem 1.25rem .9rem 2.25rem; font-weight:700; color:#0f2742; background:#fff; box-shadow:none;
}
.faq-acc .accordion-button:focus{ box-shadow:none; }
.faq-acc .accordion-button::after{
  filter:invert(16%) sepia(12%) saturate(1516%) hue-rotate(175deg) brightness(96%) contrast(90%);
}
.faq-acc .accordion-button::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:10px; background:var(--gold);
  border-top-left-radius:.5rem; border-bottom-left-radius:.5rem;
}
.faq-acc .accordion-body{ color:#24364f; font-weight:500; }

/* ===== Reviews ===== */
.reviews-clean{ background:#4169e1; }
.reviews-clean .title{ color:var(--navy); font-weight:900; font-size:clamp(1.8rem, 1.1rem + 2.2vw, 3rem); }

/* Google score */
.gscore{
  background:#fff; border:1px solid #e8ebf2; border-radius:14px; padding:1rem 1.1rem;
  max-width:250px; margin-inline:auto; box-shadow:0 10px 28px rgba(15,39,66,.08);
}
.gscore .lbl{ color:var(--navy); font-weight:900; letter-spacing:.02em; }
.gscore .stars{ color:#ffb800; margin:.35rem 0; font-size:1.2rem; }
.gscore .sub{ color:#6b7a90; font-weight:600; }
.gwm{ font-weight:900; font-size:1.5rem; line-height:1; }
.gwm .b{ color:#1a73e8 } .gwm .r{ color:#ea4335 } .gwm .y{ color:#fbbc05 } .gwm .g{ color:#34a853 }

/* Cards */
.r-card{
  background:#fff; border:1px solid #e8ebf2; border-radius:16px; box-shadow:0 6px 20px rgba(15,39,66,.08);
  padding:1rem 1rem 1.1rem; display:flex; flex-direction:column; height:100%;
}
.head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.35rem; }
.user{ display:flex; align-items:center; gap:.65rem; }
.avatar-wrap{ position:relative; width:44px; height:44px; border-radius:50%; overflow:hidden; }
.avatar{ width:100%; height:100%; object-fit:cover; display:block; background:#e9eef7; }
.avatar-fallback{ width:100%; height:100%; place-items:center; display:grid; background:#e9eef7; color:#0f2742; font-weight:800; }
.name{ font-weight:800; color:#0f2742; line-height:1.1; }
.date{ font-size:.82rem; color:#8a99ad; }
.g-badge{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:#fff; font-weight:800; font-size:.95rem; }
.rate{ color:#ffb800; margin:.2rem 0 .4rem; }
.rate .v{ color:#1a73e8; margin-left:.25rem; }
.text{ color:#344256; font-weight:500; }

/* Controles */
.reviews-wrap{ padding:0 28px; }
.nav-btn{ width:auto; opacity:1; }
.nav-btn .circle{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:#334155; border:1px solid #e8ebf2; box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.carousel-control-prev{ left:-4px; }
.carousel-control-next{ right:-4px; }
@media (max-width:991.98px){
  .carousel-control-prev{ left:0; }
  .carousel-control-next{ right:0; }
}
.dots{ position:static; margin-top:.6rem; }
.dots [data-bs-target]{ width:10px; height:10px; border-radius:50%; border:0; background:#0f2742; opacity:.25; margin:0 .25rem; }
.dots .active{ opacity:1; }

/* ===== Footer ===== */
.site-footer{ --footer-bg:#f2f3f5; --footer-bg-bottom:#f2f3f5; background:var(--footer-bg); font-weight:500; }
.site-footer .footer-gold{ height:6px; background:var(--gold); }
.footer-logo{ width:56px; height:auto; }
.footer-brand .brand-title{ letter-spacing:.35rem; font-weight:800; line-height:1; font-size:1.15rem; }
.footer-brand .brand-sub{ font-size:.72rem; letter-spacing:.12rem; opacity:.8; }
.footer-contacts .contact{ display:flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none; padding:.2rem 0; }
.footer-contacts .contact:hover{ opacity:.9; }
.footer-contacts .muted{ opacity:.85; display:flex; align-items:center; gap:.6rem; }
.text-gold{ color:var(--gold) !important; }
.footer-links li{ margin:.2rem 0; }
.footer-links a{ color:#000; text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; color: gray; }
.footer-mail{ color:#fff; text-decoration:none; }
.footer-mail:hover{ text-decoration:underline; }
.social{
  width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  border:1px solid gray; color:#FFB200; text-decoration:none;
}
.social:hover{ background:rgba(255,255,255,.08); }
.footer-bottom{ background:var(--footer-bg-bottom); padding:.8rem 0; margin-top:2rem; }
.footer-bottom-link{ color:#fff; text-decoration:none; }
.footer-bottom-link:hover{ text-decoration:underline; }
@media (max-width:991.98px){ .footer-brand .brand-title{ letter-spacing:.25rem; } }

/* ===== Dropdown Serviços (Bootstrap puro) ===== */
.dropdown-menu-services{ min-width:320px; }
@media (min-width:992px){
  .navbar .dropdown-menu-services[data-bs-popper]{ margin-top:.8rem; }
}
.dropdown-menu-services .dropdown-item{
  white-space:normal;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.15;
  color:var(--navy);
  padding:.6rem 1.1rem;
  border-radius:.6rem;
}
.dropdown-menu-services .dropdown-item:hover,
.dropdown-menu-services .dropdown-item:focus{
  background:#f3f6f9;
  color:var(--navy);
}
.dropdown-menu-services .dropdown-divider{ margin:.35rem 0; opacity:.25; }

/* Override de estado ativo/hover sem “azul” do Bootstrap */
.dropdown-menu-services{
  --bs-dropdown-link-hover-bg:#f3f6f9;
  --bs-dropdown-link-hover-color:var(--navy);
  --bs-dropdown-link-active-bg:#fff7df;
  --bs-dropdown-link-active-color:var(--navy);
}
.dropdown-menu-services .dropdown-item:hover,
.dropdown-menu-services .dropdown-item:focus{
  background:var(--bs-dropdown-link-hover-bg) !important;
  color:var(--bs-dropdown-link-hover-color) !important;
}
.dropdown-menu-services .dropdown-item.active,
.dropdown-menu-services .dropdown-item:active,
.dropdown-menu-services .dropdown-item[aria-current="page"]{
  background:var(--bs-dropdown-link-active-bg) !important;
  color:var(--bs-dropdown-link-active-color) !important;
  box-shadow:none !important;
}

/* Link principal “SERVIÇOS” (sem fundo azul; header branco) */
#navServicos.nav-link{
  background:transparent !important;
  box-shadow:none !important;
  color:white !important;              /* FIX: texto preto no header branco */
}
#navServicos.nav-link:hover,
#navServicos.nav-link:focus,
#navServicos.nav-link.show,
#navServicos.nav-link.active,
#navServicos.nav-link[aria-current="page"]{
  color:white !important;              /* mantém legível */
  border-color:var(--gold);
  background:transparent !important;
  box-shadow:none !important;
}

/* ===== Controles externos do carrossel de serviços (se usado) ===== */
.services .container,
.services .srv-carousel-wrap{ overflow:visible; }

:root{
  --srv-ctrl-bg:#fff6e0;
  --srv-ctrl-fg:#FFB200;
  --srv-ctrl-br:rgba(209,154,0,.35);
}
.srv-ctrl{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5; width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--srv-ctrl-bg); color:var(--srv-ctrl-fg);
  border:1px solid var(--srv-ctrl-br);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition:filter .2s ease, transform .2s ease;
}
.srv-prev{ left:-28px; }
.srv-next{ right:-28px; }
.srv-ctrl:hover{ filter:brightness(.97); }
.srv-ctrl i{ font-size:1.2rem; line-height:1; }
@media (max-width:991.98px){
  .srv-prev{ left:8px; }
  .srv-next{ right:8px; }
}

/* Indicadores do carrossel de serviços */
#servicos .carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:50%;
  background-color:#0f2742; opacity:.25; border:0; margin:0 .25rem;
}
#servicos .carousel-indicators .active{ opacity:1; }

/* Linha dourada no lugar do crown */
.services .crown-line{
  display:inline-block; width:48px; height:8px;
  background:var(--gold); border-radius:999px;
}

/* ===== WHY: todos os cards com mesma altura ===== */
.why-grid{ --why-h:120px; }            /* desktop */
.why-card{
  height:var(--why-h);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1.1rem .9rem;
}
@media (max-width:1199.98px){ .why-grid{ --why-h:136px; } }  /* md/lg */
@media (max-width:767.98px){  .why-grid{ --why-h:160px; } }  /* sm */
@media (max-width:479.98px){  .why-grid{ --why-h:184px; } }  /* xs */

/* HR dourado curto (alinhado à esquerda) */
.hr-gold{
  width:40px; height:4px; background:var(--gold);
  border:none; border-radius:2px; margin:0 0 1rem 0;
}

/* Ticker base */
.logo-ticker{ overflow:hidden; }
.logo-ticker .track{
  display:flex; align-items:center;
  gap:clamp(24px,4vw,56px);
  animation:ticker-scroll var(--dur,40s) linear infinite;
  will-change:transform;
}
@keyframes ticker-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Oculta fallback de ALT quando a imagem falhar */
.client-logo{ display:block; width:100%; height:100%; object-fit:contain; } /* garante que não “corte” */
.client-logo.is-broken{ display:none !important; }
.client-wrap.is-hidden{ display:none !important; }

.hr-retro{
  border:0;
  height:0;
  border-top:1px solid gray;
  border-bottom:1px solid white;
  margin:12px 0;
}

/* ↑ Logo maior no MOBILE (sem mexer no HTML) */
@media (max-width: 991.98px){
  .suprema-header .brand-wrap img{
    max-height: 256px;   /* antes: 60px */
    width: auto;
  }
}


/* ===== FIX MENU mobile: sem flash branco, abertura/fechamento suave ===== */
@media (max-width: 991.98px){
  /* 1) NÃO faça fade/translate no container (evita tela branca) */
  .suprema-header .navbar-collapse{
    opacity: 1 !important;
    transform: none !important;
           /* mantém fundo consistente */
    transition: none !important;
  }

  /* 2) Suaviza apenas a transição de altura padrão do Bootstrap */
  .suprema-header .navbar .collapsing{
    overflow: hidden;
    transition: height .7s cubic-bezier(.2,.8,.2,1);  /* ajuste a duração aqui */
  }

  /* (Opcional) leve “stagger” nos itens — sem atrasar o conteúdo */
  .suprema-header .navbar-nav > li{
    transition: transform .25s ease;
  }
  .suprema-header .navbar-collapse.show .navbar-nav > li{ transform: translateY(0); }
  .suprema-header .navbar .collapsing .navbar-nav > li{ transform: translateY(-4px); }
}

/* Mobile: botão WhatsApp centralizado e ocupando a largura toda */
@media (max-width: 575.98px){
  .btn-whatsapp{
    display: flex !important;      /* sobrescreve d-inline-flex */
    justify-content: center;       /* centraliza ícone + texto */
    align-items: center;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 991.98px){
  .suprema-header .navbar-collapse{ overflow: visible; }
}

/* Desktop: mais área visível + foca no topo da imagem */
@media (min-width: 992px){
  #hero{ --hero-min-h: 88vh; }                 /* ajuste: 80–95vh */
  #hero .hero-bg{ background-position: center 20%; } /* 0% topo, 100% base */
}

/* grid: [ícone][barra][nome] na 1ª linha; slogan ocupa a 2ª linha inteira */
.navbar-brand.brand-wrap{
  display: grid;
  grid-template-columns: auto 1px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0;        /* remove gap global */
  row-gap: 3px;         /* slogan mais perto */
  padding: 0;
}

/* Ícone (remove área morta do PNG) */
.brand-mark{
  margin-right: -8px;   /* cola na barra */
  max-height: 40px;     /* desktop */
  width: auto;
}

/* barra vertical (só na 1ª linha) */
.brand-sep{
  grid-column:2; grid-row:1;
  width:1px; height:clamp(22px,3.4vw,36px);
  background:currentColor; opacity:.25;
  align-self:stretch;
}

/* nome */
.brand-name{
  margin-left: 6px;     /* respiro mínimo */
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 800;
  letter-spacing: .04em;
  color: white;
}

/* slogan: ocupa da COLUNA 1 até o fim (abaixo de tudo) */
.brand-slogan{
  grid-column: 1 / -1;
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .12em;
  margin-top: 2px;
  opacity: .85;
    color: white;
}

/* dark mode levemente mais visível */
@media (prefers-color-scheme:dark){
  .brand-sep{ opacity:.35; }
}

/* muito estreito: esconde slogan e barra */
@media (max-width:420px){
  .brand-slogan, .brand-sep{ display:none; }
}

/* ----- Ajuste fino do espaçamento do logo ----- */
/* Zera o gap do grid e controla cada lado manualmente */
.navbar-brand.brand-wrap{
  column-gap: 0;                /* sem gap global */
}

/* Ícone (logo) mais próximo da barra */
.brand-mark{
  margin-right: 4px;            /* ↓ menor = mais perto da barra */
}

/* Mantém espaço confortável entre barra e o texto “ELOCLIMA” */
.brand-name{
  margin-left: 10px;            /* ↑ ajuste se quiser mais/menos espaço */
}

/* (opcional) altura da barra para harmonizar com o ícone */
.brand-sep{
  height: 1.8em;                /* ajuste fino vertical */
}

/* Aproxima a barra do ícone (compensa área transparente do PNG) */
.navbar-brand.brand-wrap{
  column-gap: 0;                 /* sem gap do grid */
  --logo-tight: -10px;           /* ajuste fino: valor mais negativo = mais perto */
  --bar-to-title: 10px;          /* espaço entre a barra e “ELOCLIMA” */
}

.brand-mark{
  margin-right: var(--logo-tight); /* sobrepõe a barra na área vazia do PNG */
  display:block;
}

.brand-sep{
  margin-left: 0;                 /* gruda na caixa do ícone */
  height: 1.8em;                  /* ajuste vertical opcional */
}

.brand-name{
  margin-left: var(--bar-to-title); /* mantém respiro barra → texto */
}

/* === Ajuste fino da barra central === */
.navbar-brand.brand-wrap{
  /* já usa: --logo-tight e --bar-to-title se quiser */
  --bar-height-em: 2.2em;   /* altura da barra (aumente/diminua) */
  --bar-y-nudge: -1px;      /* empurra a barra para cima/baixo */
  --bar-x-nudge: 0px;       /* empurra a barra na horizontal (caso precise) */
  --bar-opacity: .30;       /* transparência da barra */
}

.brand-sep{
  width: 1px;
  height: var(--bar-height-em);
  opacity: var(--bar-opacity);
  align-self: center;                 /* centraliza verticalmente */
  transform: translate(var(--bar-x-nudge), var(--bar-y-nudge));
  background: currentColor;
}

/* mantém o ícone colado na barra e o título com respiro */
.brand-mark{ margin-right: var(--logo-tight, -10px); }
.brand-name{ margin-left: var(--bar-to-title, 10px); }

/* dica: se o topo da barra parecer mais alto que o ícone, diminua --bar-y-nudge (ex.: -2px);
   se parecer baixo, aumente (ex.: 1px). Para ficar mais longa/curta, ajuste --bar-height-em. */

   /* ========= BRAND MOBILE LEGÍVEL ========= */
@media (max-width: 576px){
  /* mantém layout desktop no mobile, mas com tipografia maior */
  .navbar-brand.brand-wrap{
    display:grid;
    grid-template-columns:auto 1px auto;  /* ícone | barra | nome */
    grid-template-rows:auto auto;         /* slogan embaixo */
    column-gap:6px;
    row-gap:4px;
    white-space:normal;                   /* permite o slogan quebrar */
  }

  /* ícone maior e colado na barra (compensa PNG com área vazia) */
  .brand-mark{

    width:auto;
    margin-right:-10px;    /* mais negativo = mais perto da barra */
    display:block;
  }

  /* barra central ajustada */
  .brand-sep{
    width:1px;
    height:2.1em;
    opacity:.35;
    align-self:center;
    transform:translateY(-1px);
    display:block !important;
  }

  /* “ELOCLIMA” maior */
  .brand-name{
    font-size:20px;        /* ↑ deixe 21–22px se quiser mais */
    line-height:1.05;
    letter-spacing:.04em;  /* menos espaçamento = mais legível */
    font-weight:800;
    margin-left:10px;      /* respiro entre barra e texto */
  }

  /* Slogan maior e podendo quebrar */
  .brand-slogan{
    grid-column:1 / -1;
    grid-row:2;
    display:block !important;
    font-size:.8rem;        /* ↑ 13px se quiser mais */
    line-height:1.2;
    letter-spacing:.12em;  /* reduzido para caber melhor */
    margin-top:4px;
    margin-bottom:16px;
    text-transform:uppercase;
    opacity:.9;
  }

  /* caso exista regra antiga escondendo o slogan no mobile, neutraliza */
  .brand-slogan, .brand-sep{ display:block !important; }
}

/* ====== ELOCLIMA – QUEM SOMOS (LOGOS + CARROSSEL) – PROD ======
   Cole DEPOIS do Bootstrap para ter precedência
   ------------------------------------------------------------ */

:root{
  --brand-gap: 1rem;          /* vão entre os logos */
  --brand-arrow-size: 44px;   /* diâmetro das setas */
}

/* Texto “Somos …” central no mobile, esquerda no md+ */
#quem-somos h3{ text-align:center; }
@media (min-width:768px){
  #quem-somos h3{ text-align:left; }
}

/* Distância do texto para os logos */
#quem-somos .brand-carousel-wrap{ margin-top:.9rem; }

/* ===== Linha de logos (1 linha SEM quebra – 5 colunas iguais) ===== */
#quem-somos .brand-line{
  display:flex;
  align-items:center;
  justify-content:center;      /* centraliza a linha */
  gap: var(--brand-gap);       /* espaço ENTRE os logos */
  flex-wrap: nowrap;           /* não quebra linha */
}

/* 5 itens por linha = largura calculada menos os gaps */
#quem-somos .brand-item{
  flex: 0 0 calc((100% - (4 * var(--brand-gap)))/5);
  min-width:0;
  display:flex; align-items:center; justify-content:center;
  height:64px;
  border:0; border-radius:.5rem; background:transparent;
  padding: clamp(.45rem, 1.4vw, .85rem); /* respiro interno */
}

/* ===== Logos em cores originais (sem grayscale) ===== */
#quem-somos .brand-img{
  max-height:48px; width:auto; object-fit:contain;
  filter: none;                /* cores originais */
  opacity: 1;
  mix-blend-mode: normal;
  transition:none;
}
#quem-somos .brand-img:hover{ filter:none; }

/* ===== Carrossel: reserva espaço lateral para as setas ===== */
#brandCarousel .carousel-inner{ padding:0 calc(var(--brand-arrow-size) + 12px); }

/* ===== Setas (sempre visíveis, fora da faixa dos logos) ===== */
#brandCarousel .carousel-control-prev,
#brandCarousel .carousel-control-next{
  width:var(--brand-arrow-size);
  height:var(--brand-arrow-size);
  top:50%; transform:translateY(-50%);
  background:#fff;
  border-radius:50%;
  opacity:.98;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  z-index:5;           /* acima de tudo */
  color:#1f2937;       /* define “currentColor” dos SVGs */
}
#brandCarousel .carousel-control-prev{ left:-6px; }
#brandCarousel .carousel-control-next{ right:-6px; }

/* ÍCONES – força SVG inline para evitar temas que limpam o background-image */
#brandCarousel .carousel-control-prev-icon,
#brandCarousel .carousel-control-next-icon{
  width:1rem; height:1rem;
  background-repeat:no-repeat;
  background-size:1rem 1rem;
  filter:none;                 /* não aplicar filtros que apaguem o ícone */
}
#brandCarousel .carousel-control-prev-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2 L4 8 L10 14'/%3E%3C/svg%3E");
}
#brandCarousel .carousel-control-next-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 L12 8 L6 14'/%3E%3C/svg%3E");
}

/* ===== Responsivo ===== */
@media (max-width:575.98px){
  :root{ --brand-gap: .9rem; }
  #quem-somos .brand-item{ height:60px; }
  #quem-somos .brand-img{ max-height:36px; }
  #brandCarousel .carousel-inner{ padding:0 calc(var(--brand-arrow-size) + 8px); }
}

@media (min-width:992px){
  #quem-somos .brand-img{ max-height:48px; }
}

/* Remove a faixa branca do topo */
html, body { margin: 0; padding: 0; }

/* Garante que o primeiro bloco não empurre o topo */
body > *:first-child { margin-top: 0 !important; }

/* Se o header/nav tem alguma classe própria, zere também */
header, .site-header, .msn-header-wrap, .navbar { margin-top: 0 !important; }