/* ===== Tipografia Myriad Pro ===== */
@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/MyriadPro-Regular.woff2') format('woff2'),
       url('../fonts/MyriadPro-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/MyriadPro-Semibold.woff2') format('woff2'),
       url('../fonts/MyriadPro-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/MyriadPro-Black.woff2') format('woff2'),
       url('../fonts/MyriadPro-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}



/* ==== RESET ESSENCIAL ==== */
html, body {
  margin: 0;
  padding: 0;
}

/* Evita qualquer "sobrinha" acima do header (iOS safe-area) */
body {
  background: #ffffff;                 /* ou a cor base do seu layout */
  padding-top: env(safe-area-inset-top, 0);
}

/* ==== HEADER (vidro opaco) ==== */
.header {
  position: sticky;
  top: 0;
  z-index: 3000;
  /* vidro opaco */
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0;
  margin: 0;
  /* animação de esconder/mostrar ao rolar */
  transition: transform .25s ease;
  /* cola no topo em telas com notch */
  padding-top: env(safe-area-inset-top, 0);
}

/* Quando rola p/ baixo, escondemos o header fora da tela */
.header--hidden {
  transform: translateY(calc(-100% - env(safe-area-inset-top, 0)));
}

/* Container do header com respiro coerente p/ mobile */
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .625rem 1rem;  /* ~10px 16px */
}

/* ==== ÍCONE HAMBÚRGUER (botão) ==== */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  /* “mais pra dentro” da borda direita */
  margin-right: 8px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* desenhinho do hambúrguer (se usar spans) */
.menu-toggle .bar,
.menu-toggle .bar::before,
.menu-toggle .bar::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: #1737ff;   /* azul do layout */
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.menu-toggle .bar::before { transform: translateY(-6px); }
.menu-toggle .bar::after  { transform: translateY( 6px); }
.menu-toggle.open .bar    { opacity: 0; }
.menu-toggle.open .bar::before { transform: translateY(0) rotate(45deg); }
.menu-toggle.open .bar::after  { transform: translateY(0) rotate(-45deg); }

/* ==== NAV MOBILE (abre abaixo do header) ==== */
.nav-list {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  width: min(88vw, 360px);
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 12px 0 0 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: .75rem 1rem;
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 2999;
}
.nav-list.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (min-width: 769px) {
  .menu-toggle { display: none; }
  .nav-list {
    position: static;
    width: auto;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}



/* ============================================
   RESET E VARIÁVEIS GLOBAIS
   ============================================ */
:root {
    --color-primary-blue: #0033cc;
    --color-primary-orange: #ff6600;
    --color-yellow: #ffdd00;
    --color-white: #ffffff;
    --color-dark: #000000;
    --color-gray: #f5f5f5;
    --font-primary: 'Arial', sans-serif;
    --spacing-unit: 1rem;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    color: var(--color-dark);
    background-color: var(--color-white);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}



/* ============================================
   HEADER / NAVIGATION (efeito vidro opaco)
   ============================================ */

.header {
  position: sticky;
  top: 0;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background-color: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: background-color .4s ease, backdrop-filter .4s ease;
  --header-h: 76px;
  z-index: 3000;                 /* ↑ acima de qualquer elemento da hero */
}


.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}

/* === Mobile Nav (Hambúrguer) === */
.menu-toggle{
  display: none;                  /* só aparece no mobile */
  width: 36px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-direction: column;
  z-index: 3000;                  /* acima de tudo */
}

/* “barrinhas” do hambúrguer */
.menu-toggle span{
  display: block;
  width: 100%;
  height: 3px;
  background: #1d2ae0;            /* azul visível sobre header claro */
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}

/* animação para X */
.menu-toggle.open span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity: 0; }
.menu-toggle.open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

/* Layout mobile do menu */
@media (max-width: 920px){
  .header .container{ gap: .5rem; }
  .nav .nav-list{
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h, 72px);    /* altura do header; ajuste se precisar */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 22px;
    background: rgba(255,255,255,.96); /* vidro opaco */
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
    transform: translateY(-120%);
    transition: transform .35s ease;
    z-index: 2500;
  }
  .nav .nav-list.active{ transform: translateY(0); }

  /* links grandes e fáceis de tocar */
  .nav .nav-list li a{
    display: block;
    padding: .8rem 0;
    font-weight: 700;
  }

  /* mostra o botão e esconde a lista por padrão */
  .menu-toggle{ display: flex; }
}

/* garante que no desktop o menu fica inline e o botão some */
@media (min-width: 921px){
  .nav .nav-list{ transform: none !important; position: static; box-shadow: none; background: transparent; display: flex; }
  .menu-toggle{ display: none; }
}

/* Mantém logo e nav intactos */
.logo-img {
    height: 55px;
    width: auto;
    display: block;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-list a {
    position: relative;
    text-decoration: none;
    color: var(--color-primary-blue);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.nav-list a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 3px;
    background-color: var(--color-primary-orange);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.nav-list a:hover {
    color: var(--color-primary-orange);
    transform: translateY(-2px);
}

.nav-list a:hover::after {
    width: 100%;
}

/* Ícone do menu (mobile) */
.menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    gap: 0.4rem;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--color-primary-blue);
    border-radius: 2px;
    transition: var(--transition);
}

/* Animação do ícone (X) */
.menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-toggle span { transition: transform .25s ease, opacity .2s ease; }

/* Responsividade: remove blur pesado no mobile */
@media (max-width: 768px) {
    .header {
        backdrop-filter: blur(8px) saturate(160%);
        -webkit-backdrop-filter: blur(8px) saturate(160%);
        background-color: rgba(255, 255, 255, 0.8);
    }

    .logo-img {
        height: 45px;
    }
}

/* ============================================
   HERO SECTION (imagem + faixa azul – ajuste fino)
   ============================================ */
.hero{
  position: relative;
  min-height: clamp(440px, 50vw, 600px);
  overflow: hidden;

  background-image: url("../images/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* ALTURA MAIOR DA FAIXA + arte mais próxima do bottom */
  --hero-bar-h: clamp(68px, 10.5vw, 120px);
  --hero-art-overlap: clamp(18px, 2vw, 32px);
  padding-bottom: var(--hero-bar-h);
}

/* faixa azul colada no rodapé da hero */
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:var(--hero-bar-h);
  background:#2001f9;
  z-index:1;
}

/* brilho leve sobre o background */
.hero-background{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.10) 0%, transparent 50%);
  pointer-events:none;
  z-index:1;
}

/* arte principal (hero.png) — centralizada e ancorada na faixa */
.hero-art{
  position:absolute;
  left:50%;
  bottom: calc(var(--hero-bar-h) - var(--hero-art-overlap)); /* encosta/avança um pouco na faixa */
  transform: translateX(-50%);
  transform-origin: center bottom;

  /* um pouco menor que antes */
  width: clamp(480px, 46vw, 820px);
  max-width: 90%;
  height:auto;
  object-fit:contain;
  aspect-ratio: 1.42 / 1;

  filter: drop-shadow(0 8px 20px rgba(0,0,0,.12));
  z-index: 1200; /* abaixo do header (que fica ~3000) */
  transition: transform .45s cubic-bezier(.2,.8,.2,1),
              filter .45s cubic-bezier(.2,.8,.2,1);
}

/* Hover sutil no desktop (zoom leve, sem subir) */
@media (hover:hover) and (pointer:fine){
  .hero-art:hover{
    transform: translateX(-50%) scale(1.025);
    filter: drop-shadow(0 14px 36px rgba(0,0,0,.16));
  }
}

/* Quebras para manter o enquadramento do protótipo */
@media (min-width: 1200px){
  /* desce um pouquinho mais em telas grandes */
  .hero-art{ bottom: calc(var(--hero-bar-h) - var(--hero-art-overlap) - 55px); }
}

@media (max-width: 1024px){
  .hero { min-height: clamp(400px, 52vw, 560px); }
  .hero-art { width: clamp(460px, 50vw, 780px); }
}

@media (max-width: 768px){
  .hero { min-height: clamp(360px, 64vw, 500px); }
  .hero-art{
    width: clamp(380px, 72vw, 640px);
    bottom: calc(var(--hero-bar-h) - var(--hero-art-overlap) - 6px);
  }
}

@media (max-width: 480px){
  .hero { min-height: clamp(320px, 74vw, 440px); }
  .hero-art{
    width: clamp(320px, 86vw, 560px);
    bottom: calc(var(--hero-bar-h) - var(--hero-art-overlap) - 10px);
  }
}


/* ============================================
   BRANDS SECTION
   ============================================ */
.brands {
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-white) 100%);
    padding: 4rem 0;
    position: relative;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    align-items: center;
    justify-items: center;
}

.brand-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.brand-image {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 6px solid var(--color-primary-orange);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.brand-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-label {
    background: linear-gradient(135deg, var(--color-primary-blue) 0%, #0020aa 100%);
    color: var(--color-yellow);
    padding: 1rem;
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    border: 3px solid var(--color-primary-orange);
    line-height: 1.3;
    text-transform: uppercase;
    min-width: 160px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Circle Brand Items */
.brand-circle {
    grid-column: 2;
}

.circle-content {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: var(--color-primary-blue);
    border: 6px solid var(--color-primary-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ============================================
   HOW TO PARTICIPATE SECTION
   ============================================ */
.how-to {
    background-color: var(--color-primary-orange);
    padding: 4rem 0;
    position: relative;
}

.section-title {
    color: var(--color-primary-blue);
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.3);
}

.participation-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.participation-item {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    color: var(--color-white);
    flex: 1;
    min-width: 200px;
}

.amount {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.amount strong {
    font-size: 2rem;
    color: var(--color-white);
}

.raspadinha {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.description {
    font-size: 0.95rem;
    line-height: 1.4;
}

.equals {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color-white);
}

.cta-section {
    text-align: center;
}

.cta-section h3 {
    font-size: 2.5rem;
    color: var(--color-white);
    font-weight: 900;
    text-shadow: 2px 2px 0 var(--color-primary-blue);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: 2rem 0;
    text-align: center;
    font-size: 0.9rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */


@media (max-width: 1024px) {
  .header .container { gap: .75rem; }

  /* esconde a lista no mobile para o botão não “sumir” */
  .nav-list {
    display: none;                 /* some por padrão */
    position: fixed;               /* dropdown fixo sob o header */
    top: calc(var(--header-h, 72px));
    left: 0;
    right: 0;
    background: rgba(255,255,255,.98);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    backdrop-filter: blur(8px) saturate(160%);
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
    z-index: 3500;                 /* abaixo do header, acima do conteúdo */
  }
  .nav-list.active { display: flex; }

  .nav-list li { width: 100%; border-bottom: 1px solid #f0f0f0; }
  .nav-list a { display:block; padding: 1rem 1.25rem; text-align:center; }

  /* mostra o botão */
  .menu-toggle { display: flex; z-index: 3600; }
}   

/* Tablets (768px and below) */
@media (max-width: 768px) {
    .nav-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-white);
        flex-direction: column;
        gap: 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .nav-list.active {
        display: flex;
    }

    .nav-list li {
        border-bottom: 1px solid var(--color-gray);
        width: 100%;
    }

    .nav-list a {
        display: block;
        padding: 1rem;
        text-align: center;
    }

    .menu-toggle {
        display: flex;
    }

    .hero {
        height: 300px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 0.85rem;
    }

    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .brand-circle {
        grid-column: 1 / -1;
    }

    .section-title {
        font-size: 2rem;
    }

    .participation-content {
        flex-direction: column;
        gap: 1rem;
    }

    .equals {
        font-size: 2rem;
    }

    .cta-section h3 {
        font-size: 2rem;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .header .container {
        padding: 0.75rem;
    }

    .logo img {
        height: 40px;
    }

    .hero {
        height: 250px;
    }

    .hero-title {
        font-size: 2rem;
        text-shadow: 2px 2px 0 var(--color-primary-blue), 
                     4px 4px 0 var(--color-primary-orange);
    }

    .hero-subtitle {
        font-size: 0.75rem;
    }

    .brands-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .brand-image {
        width: 150px;
        height: 150px;
        border-width: 4px;
    }

    .brand-label {
        min-width: 140px;
        font-size: 0.8rem;
        padding: 0.75rem;
    }

    .circle-content {
        width: 160px;
        height: 160px;
        font-size: 0.95rem;
        border-width: 4px;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .participation-item {
        padding: 1.5rem;
    }

    .amount {
        font-size: 1.2rem;
    }

    .amount strong {
        font-size: 1.5rem;
    }

    .raspadinha {
        font-size: 1.3rem;
    }

    .cta-section h3 {
        font-size: 1.5rem;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 320px) {
    .hero-title {
        font-size: 1.5rem;
    }

    .brand-image {
        width: 120px;
        height: 120px;
    }

    .circle-content {
        width: 140px;
        height: 140px;
        font-size: 0.85rem;
    }

    .section-title {
        font-size: 1.3rem;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.hidden {
    display: none;
}

.visible {
    display: block;
}



/* zera qualquer folga no topo */
html, body { margin: 0; padding: 0; }

/* altura padrão da barra (ajuste se usar outra) */
:root { --header-h: 72px; }

/* Header fixo e colado no topo, com transição para esconder/mostrar */
.header{
  position: fixed;                /* em vez de sticky */
  top: 0; left: 0; right: 0;
  z-index: 3000;
  background: rgba(255,255,255,.92);   /* “vidro opaco” */
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transform: translateY(0);            /* visível por padrão */
  transition: transform .28s ease;
}

/* Esconde a barra quando adicionarmos a classe via JS */
.header--hidden{ transform: translateY(-100%); }

/* container interno — controla o “respiro” para o ícone não grudar na borda */
.header .container{
  height: var(--header-h);
  padding: 0 14px;                      /* puxa o conteúdo pra dentro */
  display: flex; align-items: center; justify-content: space-between;
}

/* Botão hambúrguer – garante que não encoste na borda */
.menu-toggle{ margin-right: 6px; }      /* mais pra dentro no mobile */

/* Compensa o header fixo para o conteúdo não “subir” por baixo */
body{ padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }

/* Drop do menu mobile (mantém o que já fizemos, só reforçando o topo correto) */
@media (max-width: 920px){
  .nav .nav-list{
    top: var(--header-h);
    left: 0; right: 0;
  }
}





/* --- PATCH: HERO BUGFIX --- */

/* 1) If some line appears in :before, remove it completely */
.hero::before {
  content: none !important;
  display: none !important;
}

/* 2) Avoid cursor/outline/caret and text selection inside the hero */
.hero, .hero * {
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;              /* hide the blinking cursor */
}

.hero-art { 
  outline: none;
  -webkit-tap-highlight-color: transparent; /* remove highlight no mobile */
  border: 0;                                 /* garante sem borda fantasma */

  /* 3) Anti-flicker em transform/hover */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateX(-50%) translateZ(0); /* mantém o seu translateX */
  will-change: transform;
}

/* Se houver alguma borda/linha aplicada por engano ao container, zera */
.hero {
  border: 0;
}




/* === CORREÇÃO HEADER (Remove White Gap no Topo) === */

/* Remove a versão antiga (sticky) */
.header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  z-index: 3000 !important;
}

/* Força o body a compensar exatamente a altura do header */
body {
  margin: 0 !important;
  padding-top: var(--header-h, 72px) !important;
  background-color: var(--color-white) !important;
}

/* Remove qualquer fundo inesperado no html */
html {
  background: var(--color-white) !important;
}

/* Ajusta o container interno do header (reposiciona o ícone) */
.header .container {
  height: var(--header-h, 72px);
  padding: 0 18px !important; /* mais para dentro */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Remove duplicações antigas de box-shadow/border */
.header::before,
.header::after {
  content: none !important;
  border: none !important;
  display: none !important;
}

/* Evita linhas finas de borda entre o header e o topo */
body, .header {
  border: none !important;
}



/* ==== HEADER: sem gap no topo + ícone mais pra dentro ==== */

/* garante colagem absoluta no topo sem sub-pixel gap */
.header{
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  transform: translateZ(0);                  /* evita 1px gap em alguns devices */
  background: rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  backdrop-filter: blur(10px) saturate(160%) !important;
  z-index: 3000 !important;
}

/* cobre qualquer “linha fantasma” acima do header (Chrome mobile/devtools) */
.header::before{
  content:"";
  position:absolute;
  top:-1px; left:0; right:0;
  height:1px;
  background:#fff;                           /* mesma cor do header */
}

/* safe area (notch) – o header incorpora a área segura */
.header{ padding-top: env(safe-area-inset-top, 0px); }

/* compensa a altura total do header (altura + safe-area) no conteúdo */
:root{ --header-h: 72px; }                   /* sua altura de barra */
body{ 
  margin:0 !important;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top,0px)) !important;
  background:#fff !important;
}

/* container interno com respiro correto p/ o hambúrguer */
.header .container{
  height: var(--header-h);
  padding: 0 14px !important;                /* puxa o conteúdo pra dentro */
}

/* hambúrguer mais “pra dentro” no mobile */
.menu-toggle{
  margin-right: 8px;                         /* afasta da borda direita */
}
.menu-toggle span{
  width: 22px;                               /* um pouco menor para caber melhor */
  height: 3px;
}

/* menu drop no mobile ancorado exatamente sob o header fixo */
@media (max-width: 920px){
  .nav .nav-list{
    position: fixed;
    top: calc(var(--header-h) + env(safe-area-inset-top,0px));
    left:0; right:0;
    background: rgba(255,255,255,.98);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    backdrop-filter: blur(8px) saturate(160%);
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
  }
}

/* anti-flicker adicional */
html, body{ border:none !important; }


/* === PATCH FINAL: alinhamento do ícone hamburguer === */

/* Container com respiro consistente */
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h, 72px);
  padding: 0 18px !important;   /* iguala a distância da logo e do botão */
  box-sizing: border-box;
}

/* Logo e menu harmonizados */
.logo {
  display: flex;
  align-items: center;
}
.logo-img {
  display: block;
  height: 48px;
  width: auto;
}

/* Ícone hamburguer: sempre visível no topo direito e com espaçamento correto */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 34px;
  height: 30px;
  background: transparent;
  border: none;
  margin-right: 4px;         /* aproxima um pouco do centro */
  cursor: pointer;
  z-index: 3600;
}

/* Barrinhas do ícone */
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #1737ff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

/* Animação X */
.menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Garante posição correta no mobile */
@media (max-width: 920px) {
  .header .container { padding: 0 16px !important; }
  .menu-toggle { margin-right: 2px; }
}



/* === VISIBILIDADE DO HAMBÚRGUER POR BREAKPOINT === */
.menu-toggle {
  display: none;            /* Desktop padrão: escondido */
}

/* Mobile/Tablet */
@media (max-width: 1024px) {
  .menu-toggle {
    display: flex;          /* Mostra o botão em telas menores */
  }

  /* (opcional) esconder o menu horizontal quando o hambúrguer estiver ativo */
  .nav {
    display: none;
  }
  .nav.open {
    display: block;         /* seu JS já controla .open */
  }
}


/* === MOBILE / TABLET — visibilidade correta do menu === */
@media (max-width: 1024px){
  /* o botão deve aparecer */
  .menu-toggle{ display:flex; }

  /* NUNCA esconda o container .nav; deixe-o vivo */
  .nav{ display:block !important; }

  /* lista fechada por padrão … */
  .nav-list{
    display:none;                 /* escondida */
    position: fixed;
    top: calc(var(--header-h) + env(safe-area-inset-top,0px));
    left: 0; right: 0;
    background: rgba(255,255,255,.98);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    backdrop-filter: blur(8px) saturate(160%);
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
    z-index: 3500;
  }

  /* …e abre quando o JS adicionar .active */
  .nav-list.active{ display:flex; }
}

/* === DESKTOP — esconder o hambúrguer sempre === */
@media (min-width: 1025px){
  .menu-toggle{ display:none !important; }
}

/* === HERO LABELS (data e certificado) === */
.hero-data,
.hero-certificado {
  position: absolute;
  top: clamp(30px, 6vw, 80px);
  width: clamp(190px, 17vw, 280px);
  height: auto;
  z-index: 1250; /* acima do background e abaixo da arte principal */
  pointer-events: none;
  user-select: none;
}

/* posicionamento específico */
.hero-data {
  left: clamp(40px, 7vw, 120px);
}

.hero-certificado {
   position: absolute;
  right: clamp(40px, 7vw, 120px);
  top: auto !important; /* <- libera o posicionamento por bottom */
  bottom: calc(var(--hero-bar-h) + clamp(6px, 0.8vw, 14px)); /* fica pouco acima da faixa azul */
  width: clamp(190px, 17vw, 280px);
  height: auto;
  z-index: 1250;
  pointer-events: none;
  user-select: none;
}

/* Responsividade - ajuste no tablet */
@media (max-width: 1024px) {
  .hero-data,
  .hero-certificado {
     top: auto !important;
    bottom: calc(var(--hero-bar-h) + clamp(4px, 1vw, 10px));
    width: clamp(160px, 24vw, 220px);
  }
  .hero-data { left: clamp(20px, 6vw, 60px); }
  .hero-certificado { right: clamp(20px, 6vw, 60px); }
}

/* Mobile - empilhar as 3 imagens mantendo equilíbrio visual */
@media (max-width: 768px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    position: relative;
  }

  .hero-data,
  .hero-certificado {
    position: relative;
    width: 70%;
    max-width: 280px;
    top: auto;
    left: auto;
    right: auto;
    margin: 6px 0;
  }

    .hero-certificado{
    position: relative;
    top: auto !important;
    bottom: auto;
    width: 70%;
    max-width: 280px;
    margin-top: 10px;
  }

  .hero-art {
    position: relative;
    bottom: 0;
    transform: none;
    width: 90%;
    max-width: 480px;
    z-index: 1260;
  }
}
/* === HERO: posição final do CERTIFICADO (mais perto da faixa azul) === */
.hero-certificado {
  position: absolute;
  right: clamp(40px, 7vw, 120px);
  bottom: clamp(4px, 0.8vw, 10px); /* 👈 desce bem mais — quase colado na faixa azul */
  width: clamp(190px, 17vw, 280px);
  height: auto;
  z-index: 1250;
  pointer-events: none;
  user-select: none;
}

/* tablet (mantém proporção idêntica) */
@media (max-width: 1024px) {
  .hero-certificado {
    bottom: clamp(2px, 1vw, 8px);
    width: clamp(160px, 24vw, 220px);
  }
}

/* mobile (Mabel) — centralizado e empilhado */
@media (max-width: 768px) {
  .hero-certificado {
    position: relative;
    bottom: auto;
    width: 70%;
    max-width: 280px;
    margin-top: 10px;
  }
}




/* === HERO: posição refinada do certificado (ligeiramente acima da faixa azul) === */
.hero-certificado {
  position: absolute;
  right: clamp(40px, 7vw, 120px);
  top: auto !important;
  bottom: calc(var(--hero-bar-h) + clamp(20px, 1.6vw, 28px)); /* 👈 sobe um pouco — ideal visual */
  width: clamp(190px, 17vw, 280px);
  height: auto;
  z-index: 1250;
  pointer-events: none;
  user-select: none;
}

/* Tablet */
@media (max-width: 1024px) {
  .hero-certificado {
    bottom: calc(var(--hero-bar-h) + clamp(12px, 1vw, 18px));
    width: clamp(160px, 24vw, 220px);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero-certificado {
    position: relative;
    top: auto !important;
    bottom: auto;
    width: 70%;
    max-width: 280px;
    margin-top: 10px;
  }
}



/* === HERO MOBILE: empilhar data → certificado → hero === */
@media (max-width: 768px) {
  .hero {
    display: flex;
    flex-direction: column;      /* empilha verticalmente */
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding-top: 16px;           /* espaço extra no topo */
    padding-bottom: var(--hero-bar-h);
    min-height: unset;           /* permite altura automática */
    background-position: center top;
  }

  /* remove posições absolutas */
  .hero-data,
  .hero-certificado,
  .hero-art {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    max-width: 320px;
    width: 80%;
    height: auto;
    z-index: 1250;
    margin: 0 auto;
  }

  /* ordem correta: data → certificado → hero */
  .hero-data   { order: 1; margin-top: 10px; }
  .hero-certificado { order: 2; margin-top: 8px; }
  .hero-art    { order: 3; margin-top: 12px; }

  /* aumenta o fundo da hero para caber tudo confortavelmente */
  .hero::after {
    height: clamp(80px, 12vw, 120px); /* faixa azul ligeiramente maior */
  }
}


/* === PATCH FINAL: altura do fundo da hero no mobile === */
@media (max-width: 768px) {
  .hero {
    /* aumenta a área amarela para acomodar o hero e alinhar a barra azul */
    min-height: clamp(520px, 120vw, 680px);
    background-position: center 24%; /* recorte ligeiramente mais alto */
    padding-top: 12px;
    padding-bottom: var(--hero-bar-h);
  }

  /* garante que a faixa azul tenha altura e sobreposição corretas */
  .hero::after {
    height: clamp(80px, 14vw, 120px);
  }

  /* hero-art um pouco mais próximo da barra azul */
  .hero > .hero-art {
    margin-bottom: calc(-1 * clamp(10px, 3vw, 18px));
  }
}

/* ajuste fino para telas muito estreitas (ex: Mabel) */
@media (max-width: 430px) {
  .hero {
    min-height: clamp(500px, 130vw, 700px);
    background-position: center 26%;
  }

  .hero::after {
    height: clamp(90px, 15vw, 130px);
  }

  .hero > .hero-art {
    margin-bottom: calc(-1 * clamp(12px, 3vw, 20px));
  }
}



/* === PATCH MOBILE: altura da hero e leve sobreposição na faixa azul === */
@media (max-width: 768px) {
  .hero {
    min-height: clamp(460px, 102vw, 590px);
    background-position: center 24%;
    padding-bottom: var(--hero-bar-h);
  }

  /* altura da faixa azul no mobile (continua robusta e proporcional) */
  .hero::after {
    height: clamp(84px, 14.5vw, 120px);
  }

  /* hero.png levemente sobreposto na barra azul (invade um pouco) */
  .hero > .hero-art {
    /* remove qualquer ajuste anterior negativo via margin */
    margin-bottom: 0 !important;
    /* empurra a arte alguns px para baixo, invadindo a barra azul */
    transform: translateX(-50%) translateY(clamp(8px, 2.2vw, 16px));
    /* se preferir, você também pode aumentar a "invasão" trocando o valor acima */
  }
}

/* telas bem estreitas (tipo Mabel) — mantém a mesma intenção visual */
@media (max-width: 430px) {
  .hero {
    min-height: clamp(450px, 108vw, 580px);
    background-position: center 25%;
  }
  .hero::after {
    height: clamp(90px, 16vw, 130px);
  }
  .hero > .hero-art {
    transform: translateX(-50%) translateY(clamp(10px, 2.8vw, 18px));
  }
}

/* === PATCH RESTAURADO MOBILE (proporção + hero maior e mais baixo) === */
@media (max-width: 768px) {

  /* Empilhamento vertical */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    background-position: center top;
    min-height: clamp(480px, 115vw, 660px);
    padding-top: 12px;
    padding-bottom: var(--hero-bar-h);
  }

  /* Imagens da data e certificado menores */
  .hero-data,
  .hero-certificado {
    position: relative;
    width: 64%;
    max-width: 240px;
    height: auto;
    margin: 6px auto;
  }

  /* hero.png maior e levemente mais para baixo */
  .hero > .hero-art {
    position: relative;
    width: 92%;
    max-width: 520px;
    transform: translateY(clamp(22px, 5vw, 34px));
    z-index: 1260;
  }

  /* Faixa azul ajustada proporcionalmente */
  .hero::after {
    height: clamp(84px, 14vw, 120px);
  }
}

/* Versão ultracompacta (Mabel) */
@media (max-width: 430px) {
  .hero {
    min-height: clamp(470px, 125vw, 700px);
  }

  .hero-data,
  .hero-certificado {
    width: 70%;
    max-width: 220px;
  }

  .hero > .hero-art {
    max-width: 500px;
    transform: translateY(clamp(26px, 6vw, 38px));
  }

  .hero::after {
    height: clamp(90px, 16vw, 130px);
  }
}


/* === Ajuste fino MOBILE: fundo menor + hero mais sobreposta === */
@media (max-width: 768px) {
  /* Fundo amarelo da hero mais curto */
  .hero{
    min-height: clamp(420px, 100vw, 560px);
  }

  /* Aperta levemente o respiro entre as imagens de data e certificado */
  .hero-data,
  .hero-certificado{
    margin: 4px auto 2px; /* antes estava maior */
  }

  /* Desce um pouco a arte para sobrepor mais a faixa azul */
  .hero > .hero-art{
    transform: translateY(clamp(34px, 7.5vw, 54px)); /* mais para baixo */
  }

  /* Mantém a faixa azul proporcional (pode ajustar 1–2px se quiser) */
  .hero::after{
    height: clamp(90px, 15vw, 125px);
  }
}

@media (max-width: 430px) {
  .hero{
    min-height: clamp(410px, 108vw, 580px);
  }
  .hero > .hero-art{
    transform: translateY(clamp(38px, 8.5vw, 60px));
  }
}

/* item da grade que vira “imagem cheia” (sem círculo, sem label) */
.brand-as-image {
  /* já herda o alinhamento central do .brand-item */
}

.brand-as-image .brand-png{
  display: block;
  width: min(340px, 100%);  /* desktop */
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
}

/* mobile/tablet – encaixa bem na coluna */
@media (max-width: 768px){
  .brand-as-image .brand-png{
    width: min(90vw, 420px);
  }
}


/* --- Correção da linha preta na borda das imagens de prêmios --- */
.brand-item img,
.brand-as-image img,
.brand-png {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;

  /* CORREÇÃO VISUAL */
  transform: translateZ(0);              /* força renderização na GPU */
  backface-visibility: hidden;           /* elimina anti-alias “bleed” */
  border: none;
  outline: none;
  image-rendering: -webkit-optimize-contrast;
  -webkit-font-smoothing: antialiased;
}

/* Garante que o container não ultrapasse pixels inteiros */
.brands-grid,
.brand-item {
  overflow: hidden;                      /* corta qualquer sub-pixel */
  box-sizing: border-box;
}

/* === Anti-seam/anti-flicker para os prêmios (remove “barinha preta”) === */

/* Container da imagem como “cartão” (aplica sombra aqui, não na imagem) */
.brand-as-image{
  position: relative;
  contain: paint;                 /* isola pintura => evita bleed */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
  border: 0;
  /* sombra suave substituindo o drop-shadow da imagem */


  background: transparent;
}

/* Imagem em si: nada de filter; estabiliza a layer */
.brand-as-image .brand-png{
  display: block;
  width: min(340px, 100%);
  height: auto;
  object-fit: contain;
  border: 0;
  outline: none;

  /* força renderização estável */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Remove qualquer foco/outline que o clique possa aplicar */
.brand-as-image:focus,
.brand-as-image *:focus {
  outline: none !important;
}

/* Evita “sangria” de 1px na coluna da grid quando clica */
.brands-grid, .brand-item, .brand-as-image {
  overflow: hidden;         /* corta qualquer subpixel bleed */
  box-sizing: border-box;
  caret-color: transparent; /* nada de cursor piscando */
}

/* =========================================================
   PATCH [Rede Litoral | Brands] — Brand 2 como imagem PNG

   ========================================================= */

/* Diâmetro de referência dos círculos (ajuste se mudar o restante do grid) */
:root {
  --brand-circle-size: 200px; /* alinha com .circle-content (200px) */
}

/* Wrapper do item que virou imagem (mantém alinhamento da grid) */
.brand-item.brand-as-image{
  display: flex;
  align-items: center;
  justify-content: center;
  /* sombra no CONTAINER (evita drop-shadow na imagem e a “barrinha preta”) */
  box-shadow: 0 6px 14px rgba(0,0,0,.14);
  background: transparent;
  border: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  contain: paint; /* isola pintura → elimina bleed subpixel */
}

/* A própria PNG: tamanho espelhando os círculos + anti-flicker */
.brand-item.brand-as-image .brand-png{
  display: block;
  width: min(var(--brand-circle-size, 200px), 32vw);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 0;
  outline: none;

  /* Estabilização de render (corrige linha preta ao clicar/arrastar) */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
  filter: none; /* garante que nenhum drop-shadow herde daqui */
}

/* Responsividade — mantém proporção e ocupa bem a coluna no mobile */
@media (max-width: 768px){
  .brand-item.brand-as-image .brand-png{
    width: min(90vw, 420px);
  }
}

/* Hardening extra: sem cursor/outline dentro do item */
.brand-item.brand-as-image:focus,
.brand-item.brand-as-image *:focus {
  outline: none !important;
  caret-color: transparent;
}

/* Segurança contra “sangria” em subpixel na coluna da grid */
.brands-grid,
.brand-item,
.brand-item.brand-as-image{
  overflow: hidden;
  box-sizing: border-box;
}


/* =========================================================
   PATCH [Rede Litoral | Brands] — Ajuste de proporção e bordas
   ========================================================= */

/* Remove qualquer borda dos containers e imagens */
.brand-item,
.brand-image,
.brand-as-image {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Remove bordas internas dos círculos que são imagem */
.brand-item.brand-as-image img,
.brand-item img,
.brand-png {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Mantém renderização estável sem linhas pretas */
.brand-item img,
.brand-png {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Garante proporção maior para a Airfryer e menor para o selo azul */
.brand-item:first-child .brand-png {
  width: min(300px, 48vw) !important;   /* Aumenta o tamanho da Airfryer */
  max-width: 360px;
  height: auto;
}

.brand-item.brand-as-image .brand-png {
  width: min(220px, 34vw) !important;   /* Mantém o selo azul proporcional */
  max-width: 260px;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* Mobile — mantém proporção harmoniosa */
@media (max-width: 768px) {
  .brand-item:first-child .brand-png {
    width: min(80vw, 380px) !important;
  }

  .brand-item.brand-as-image .brand-png {
    width: min(68vw, 300px) !important;
  }
}

/* Garante centralização absoluta e elimina bleed subpixel */
.brand-item.brand-as-image {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  contain: paint;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  border: none;
  outline: none;
  box-shadow: none;
}


/* =========================================================
   PATCH — Proporção Brand 1 > Brand 2 (forçado e responsivo)
   ========================================================= */

/* Tamanhos-base responsivos (desktop/tablet) */
:root{
  --brand1-size: clamp(260px, 28vw, 380px); /* Airfryer (maior) */
  --brand2-size: clamp(200px, 22vw, 300px); /* Raspou... (menor) */
}

/* Zera qualquer largura herdada que possa interferir */
.brand-as-image .brand-png{ width: auto; max-width: none; }

/* Força os tamanhos por posição no grid */
.brands-grid > .brand-item:nth-of-type(1) .brand-png{
  width: var(--brand1-size) !important;
  height: auto !important;
}

.brands-grid > .brand-item:nth-of-type(2) .brand-png{
  width: var(--brand2-size) !important;
  height: auto !important;
  aspect-ratio: 1 / 1; /* mantém círculo do selo */
  object-fit: contain;
}

/* Mobile mantém a hierarquia (1 maior que 2) e ajusta limites */
@media (max-width: 768px){
  :root{
    --brand1-size: clamp(300px, 82vw, 420px);
    --brand2-size: clamp(220px, 68vw, 320px);
  }
}

/* Sem bordas/sombras indesejadas (blindagem) */
.brands-grid > .brand-item:nth-of-type(1) .brand-png,
.brands-grid > .brand-item:nth-of-type(2) .brand-png{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* =========================================================
   PATCH — Aumentar apenas o Brand 1 (Airfryer)
   ========================================================= */

/* 0) Neutraliza larguras genéricas anteriores de .brand-as-image */
.brand-as-image .brand-png{
  width: auto !important;
  max-width: none !important;
  height: auto !important;
}

/* 1) Brand 1 (primeiro item do grid) — MAIOR */
.brands-grid > .brand-item:nth-of-type(1) .brand-png{
  width: clamp(300px, 32vw, 420px) !important;
  max-width: clamp(300px, 32vw, 420px) !important;
  height: auto !important;
  aspect-ratio: auto !important;      /* garante imagem livre, não-circular */
  object-fit: contain;
}

/* 2) Brand 2 (segundo item, selo azul) — mantém MENOR (não altera visual atual) */
.brands-grid > .brand-item.brand-as-image:nth-of-type(2) .brand-png{
  width: clamp(200px, 22vw, 280px) !important;  /* menor que o Brand 1 */
  max-width: clamp(200px, 22vw, 280px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;               /* preserva círculo do selo */
  object-fit: contain;
}

/* 3) Mobile — mantém hierarquia (1 > 2) */
@media (max-width: 768px){
  .brands-grid > .brand-item:nth-of-type(1) .brand-png{
    width: min(84vw, 460px) !important;
    max-width: min(84vw, 460px) !important;
  }
  .brands-grid > .brand-item.brand-as-image:nth-of-type(2) .brand-png{
    width: min(64vw, 320px) !important;
    max-width: min(64vw, 320px) !important;
  }
}


/* =========================================================
   PATCH — Balanceado: Brand 1 > Brand 2 (proporção refinada)
   ========================================================= */

/* Neutraliza estilos antigos que travavam largura */
.brand-as-image .brand-png{
  width: auto !important;
  max-width: none !important;
  height: auto !important;
}

/* Brand 1 — Airfryer Polishop (um pouco maior, sem cortar) */
.brands-grid > .brand-item:nth-of-type(1) .brand-png{
  width: clamp(260px, 26vw, 360px) !important; /* tamanho equilibrado */
  max-width: clamp(260px, 26vw, 360px) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain;
}

/* Brand 2 — “Raspou, Achou, Ganhou!” (mantém menor) */
.brands-grid > .brand-item.brand-as-image:nth-of-type(2) .brand-png{
  width: clamp(200px, 22vw, 280px) !important;
  max-width: clamp(200px, 22vw, 280px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain;
}

/* Mobile — mantém diferença harmoniosa (sem cortar) */
@media (max-width: 768px){
  .brands-grid > .brand-item:nth-of-type(1) .brand-png{
    width: min(78vw, 400px) !important;
  }
  .brands-grid > .brand-item.brand-as-image:nth-of-type(2) .brand-png{
    width: min(64vw, 300px) !important;
  }
}

/* Remove qualquer borda ou sombra que interfira */
.brands-grid > .brand-item:nth-of-type(1) .brand-png,
.brands-grid > .brand-item:nth-of-type(2) .brand-png{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* =========================================================
   PATCH — Refinamento final: Brand 1 levemente maior que Brand 2
   ========================================================= */

/* Neutraliza larguras herdadas */
.brand-as-image .brand-png {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
}

/* Brand 1 — Airfryer (reduzido, mas ainda dominante) */
.brands-grid > .brand-item:nth-of-type(1) .brand-png {
  width: clamp(240px, 24vw, 320px) !important; /* ↓ tamanho refinado */
  max-width: clamp(240px, 24vw, 320px) !important;
  height: auto !important;
  object-fit: contain;
}

/* Brand 2 — selo “Raspou, Achou, Ganhou!” (mantém proporção atual) */
.brands-grid > .brand-item.brand-as-image:nth-of-type(2) .brand-png {
  width: clamp(200px, 21vw, 270px) !important;
  max-width: clamp(200px, 21vw, 270px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain;
}

/* Mobile — mantém hierarquia (1 um pouco maior que 2) */
@media (max-width: 768px) {
  .brands-grid > .brand-item:nth-of-type(1) .brand-png {
    width: min(72vw, 360px) !important;
  }
  .brands-grid > .brand-item.brand-as-image:nth-of-type(2) .brand-png {
    width: min(64vw, 300px) !important;
  }
}

/* Remove bordas/sombras indesejadas */
.brands-grid > .brand-item:nth-of-type(1) .brand-png,
.brands-grid > .brand-item:nth-of-type(2) .brand-png {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


/* =========================================================
   PATCH — Brand 3 (Panelas Ichef) como PNG
   ========================================================= */

/* Wrapper sem borda/sombra */
.brand-ichef{
  display:flex;
  align-items:center;
  justify-content:center;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow:hidden;           /* evita qualquer bleed subpixel */
  contain: paint;
}

/* Tamanho e estabilidade da imagem */
.brand-ichef .brand-png{
  width: clamp(220px, 23vw, 320px) !important;  /* equilibrado com fila do topo */
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  /* anti “barrinha preta” */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mobile — ocupa bem a coluna, mantendo proporção */
@media (max-width: 768px){
  .brand-ichef .brand-png{
    width: min(66vw, 320px) !important;
  }
}



/* =========================================================
   PATCH — Brand 3 (Panelas Ichef) ampliado
   ========================================================= */

.brand-ichef .brand-png {
  width: clamp(260px, 27vw, 380px) !important;  /* ↑ aumento suave */
  max-width: clamp(260px, 27vw, 380px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  /* estabilidade de renderização */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mobile — proporcionalmente maior, mas ainda ajustado ao grid */
@media (max-width: 768px) {
  .brand-ichef .brand-png {
    width: min(80vw, 400px) !important;
    max-width: min(80vw, 400px) !important;
  }
}



/* =========================================================
   PATCH — Brand 3 (Panelas Ichef) DOBRADO (versão final)
   ========================================================= */

.brand-ichef .brand-png {
  width: clamp(420px, 42vw, 640px) !important;  /* dobrado em relação ao anterior */
  max-width: clamp(420px, 42vw, 640px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mobile — mantém proporcionalidade sem cortar nas bordas */
@media (max-width: 768px) {
  .brand-ichef .brand-png {
    width: min(90vw, 520px) !important;
    max-width: min(90vw, 520px) !important;
  }
}


/* =========================================================
   HOTFIX — Garantir aumento do Brand 3 (Panelas Ichef)
   ========================================================= */

/* 1) Neutraliza QUALQUER largura/limite herdado só no Brand 3 */
.brands-grid > .brand-item.brand-as-image.brand-ichef .brand-png {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
}

/* 2) Aplica o tamanho desejado com especificidade alta (vence duplicações) */
.brands-grid > .brand-item.brand-as-image.brand-ichef > .brand-png {
  /* ajuste o intervalo conforme quiser; este já fica visivelmente maior */
  width: clamp(380px, 36vw, 560px) !important;
  max-width: clamp(380px, 36vw, 560px) !important;
  object-fit: contain;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 3) Garante que o card do Brand 3 não imponha limites extras */
.brands-grid > .brand-item.brand-as-image.brand-ichef {
  justify-self: center;     /* centraliza na coluna */
  align-self: center;
  overflow: visible;        /* deixa a imagem respirar se precisar */
}

/* Mobile — mantém grande, sem estourar */
@media (max-width: 768px) {
  .brands-grid > .brand-item.brand-as-image.brand-ichef > .brand-png {
    width: min(88vw, 520px) !important;
    max-width: min(88vw, 520px) !important;
  }
}


/* =========================================================
   PATCH — Brand 3 (Panelas Ichef) ajuste fino de tamanho
   ========================================================= */

.brands-grid > .brand-item.brand-as-image.brand-ichef .brand-png {
  width: clamp(300px, 30vw, 440px) !important;   /* ↓ reduziu ~25% */
  max-width: clamp(300px, 30vw, 440px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mobile — ainda responsivo e proporcional */
@media (max-width: 768px) {
  .brands-grid > .brand-item.brand-as-image.brand-ichef .brand-png {
    width: min(80vw, 420px) !important;
    max-width: min(80vw, 420px) !important;
  }
}

/* =========================================================
   PATCH — Brand 3 (Panelas Ichef) redução final equilibrada
   ========================================================= */

.brands-grid > .brand-item.brand-as-image.brand-ichef .brand-png {
  width: clamp(260px, 26vw, 380px) !important;  /* ↓ redução suave (~20%) */
  max-width: clamp(260px, 26vw, 380px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mobile — mantém responsivo e proporcional */
@media (max-width: 768px) {
  .brands-grid > .brand-item.brand-as-image.brand-ichef .brand-png {
    width: min(74vw, 360px) !important;
    max-width: min(74vw, 360px) !important;
  }
}


/* =========================================================
   PATCH — Brand 4 (Panelas Tramontina)
   ========================================================= */

/* Wrapper da imagem — centralizado na segunda fileira */
.brand-tramontina {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1; /* aparece abaixo da Airfryer */
  grid-row: 2;    /* força nova linha no grid */
  overflow: visible;
  contain: paint;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Imagem Tramontina — proporcional à Airfryer, sem ultrapassar */
.brand-tramontina .brand-png {
  width: clamp(260px, 28vw, 400px) !important;
  max-width: clamp(260px, 28vw, 400px) !important;
  height: auto !important;
  object-fit: contain;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  /* suaviza renderização */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mobile — mantém a proporção e o espaçamento */
@media (max-width: 768px) {
  .brand-tramontina {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .brand-tramontina .brand-png {
    width: min(80vw, 380px) !important;
    max-width: min(80vw, 380px) !important;
  }
}



/* =========================================================
   PATCH — Brand 4 (Panelas Tramontina) — aumento de destaque
   ========================================================= */

.brand-tramontina .brand-png {
  width: clamp(320px, 32vw, 480px) !important;   /* ↑ aumento ~25% */
  max-width: clamp(320px, 32vw, 480px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  /* estabilidade e suavização */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mobile — mantém destaque mas sem estourar */
@media (max-width: 768px) {
  .brand-tramontina .brand-png {
    width: min(84vw, 420px) !important;
    max-width: min(84vw, 420px) !important;
  }
}


/* =========================================================
   FIX — Brand 4 (Tramontina) ignorado por regras anteriores
   ========================================================= */

/* Neutraliza larguras genéricas */
.brands-grid > .brand-item.brand-as-image.brand-tramontina .brand-png {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
}

/* Aumenta com força máxima e especificidade extra */
.brands-grid > .brand-item.brand-as-image.brand-tramontina > .brand-png {
  width: clamp(340px, 34vw, 520px) !important;   /* ↑ aumento visível e seguro */
  max-width: clamp(340px, 34vw, 520px) !important;
  height: auto !important;
  object-fit: contain !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mantém responsividade correta */
@media (max-width: 768px) {
  .brands-grid > .brand-item.brand-as-image.brand-tramontina > .brand-png {
    width: min(84vw, 440px) !important;
    max-width: min(84vw, 440px) !important;
  }
}


/* =========================================================
   PATCH — Brand 4 (Panelas Tramontina) — ajuste de proporção
   ========================================================= */

.brands-grid > .brand-item.brand-as-image.brand-tramontina > .brand-png {
  width: clamp(280px, 28vw, 420px) !important;   /* ↓ redução suave (~20%) */
  max-width: clamp(280px, 28vw, 420px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mobile — mantém proporção e centralização */
@media (max-width: 768px) {
  .brands-grid > .brand-item.brand-as-image.brand-tramontina > .brand-png {
    width: min(78vw, 380px) !important;
    max-width: min(78vw, 380px) !important;
  }
}

/* =========================================================
   PATCH — Brand 4 (Panelas Tramontina) — tamanho final refinado
   ========================================================= */

.brands-grid > .brand-item.brand-as-image.brand-tramontina > .brand-png {
  width: clamp(240px, 24vw, 360px) !important;   /* ↓ redução adicional (~15%) */
  max-width: clamp(240px, 24vw, 360px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mobile — mantém proporção agradável e centralizada */
@media (max-width: 768px) {
  .brands-grid > .brand-item.brand-as-image.brand-tramontina > .brand-png {
    width: min(72vw, 340px) !important;
    max-width: min(72vw, 340px) !important;
  }
}


/* =========================================================
   FIX — Brand 4 (Panelas Tramontina) — evitar corte do cabo
   ========================================================= */

/* Permite que a imagem transborde com segurança */
.brands-grid > .brand-item.brand-as-image.brand-tramontina {
  overflow: visible !important;        /* ← essencial para liberar o cabo */
  position: relative !important;
  z-index: 2;
}

/* Mantém o tamanho ajustado, sem cortes */
.brands-grid > .brand-item.brand-as-image.brand-tramontina > .brand-png {
  width: clamp(240px, 24vw, 360px) !important;  /* mesmo tamanho atual */
  max-width: clamp(240px, 24vw, 360px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Garante que o layout inferior tenha espaço suficiente */
.brands-grid {
  overflow: visible !important;
  padding-bottom: 40px; /* espaço extra pra cabos ou sombras */
}

/* Responsivo */
@media (max-width: 768px) {
  .brands-grid > .brand-item.brand-as-image.brand-tramontina > .brand-png {
    width: min(72vw, 340px) !important;
    max-width: min(72vw, 340px) !important;
  }
}

/* =========================================================
   PATCH — Brand 5 (+DE 10MIL PRÊMIOS INSTANTÂNEOS!)
   ========================================================= */

/* Estrutura base e alinhamento lateral com Brand 4 */
.brands-grid > .brand-item.brand-as-image.brand-10mil {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;       /* posiciona ao lado do Brand 4 */
  grid-row: 2;          /* mesma linha da Tramontina */
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* Tamanho ligeiramente menor que Brand 2 */
.brands-grid > .brand-item.brand-as-image.brand-10mil > .brand-png {
  width: clamp(220px, 22vw, 330px) !important;   /* ↓ cerca de 10–15% menor que Brand 2 */
  max-width: clamp(220px, 22vw, 330px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Garante alinhamento vertical com Brand 2 */
.brands-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  justify-items: center;
  align-items: start;
}

/* Mobile — mantém layout empilhado e proporcional */
@media (max-width: 768px) {
  .brands-grid > .brand-item.brand-as-image.brand-10mil {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .brands-grid > .brand-item.brand-as-image.brand-10mil > .brand-png {
    width: min(68vw, 320px) !important;
    max-width: min(68vw, 320px) !important;
  }
}


/* =========================================================
   PATCH — Brand 5 (+DE 10MIL PRÊMIOS INSTANTÂNEOS) — tamanho reduzido
   ========================================================= */

.brands-grid > .brand-item.brand-as-image.brand-10mil > .brand-png {
  width: clamp(180px, 18vw, 270px) !important;   /* ↓ agora menor que Brand 2 */
  max-width: clamp(180px, 18vw, 270px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateY(-8px); /* levanta levemente pra alinhar com o Brand 2 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mantém layout e proporção no mobile */
@media (max-width: 768px) {
  .brands-grid > .brand-item.brand-as-image.brand-10mil > .brand-png {
    width: min(60vw, 300px) !important;
    max-width: min(60vw, 300px) !important;
    transform: none;
  }
}

/* =========================================================
   PATCH — Descer Brand 2 e Brand 5 + anti-corte
   ========================================================= */

/* Nunca corte conteúdo dos itens da grade */
.brands-grid,
.brands-grid > .brand-item { overflow: visible !important; }

/* ↓ Desce o Brand 2 (círculo "Raspou, Achou, Ganhou!") */
.brands-grid > .brand-item:nth-of-type(2) {
  margin-top: 38px;                 /* ajuste fino desktop */
}

/* ↓ Desce o Brand 5 e garante alinhamento lateral com Brand 4 */
.brands-grid > .brand-item.brand-as-image.brand-10mil {
  margin-top: 44px;                 /* levemente mais baixo que o Brand 2 */
  overflow: visible !important;     /* evita cortes na borda do card */
  position: relative;
  z-index: 2;
}

/* Brand 5 um tiquinho menor que antes (e menor que o Brand 2) */
.brands-grid > .brand-item.brand-as-image.brand-10mil > .brand-png{
  width: clamp(170px, 16.5vw, 250px) !important;  /* ↓ ajuste sutil */
  max-width: clamp(170px, 16.5vw, 250px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Mobile — offsets menores para não estourar o empilhamento */
@media (max-width: 768px){
  .brands-grid > .brand-item:nth-of-type(2){ margin-top: 20px; }
  .brands-grid > .brand-item.brand-as-image.brand-10mil{ margin-top: 24px; }
  .brands-grid > .brand-item.brand-as-image.brand-10mil > .brand-png{
    width: min(58vw, 260px) !important;
    max-width: min(58vw, 260px) !important;
  }
}


/* =========================================================
   PATCH — Brand 6 (Potes Tupperware)
   ========================================================= */

/* Posicionamento base: abaixo da Brand 3, alinhada ao lado da Brand 5 */
.brands-grid > .brand-item.brand-as-image.brand-tupperware {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;     /* alinhada com Brand 5 */
  grid-row: 3;        /* nova fileira */
  overflow: visible !important;
  position: relative;
  z-index: 2;
  margin-top: 50px;   /* espaçamento natural entre fileiras */
}

/* Tamanho proporcional — um pouco menor que Brand 3 */
.brands-grid > .brand-item.brand-as-image.brand-tupperware > .brand-png {
  width: clamp(240px, 23vw, 340px) !important;
  max-width: clamp(240px, 23vw, 340px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Responsividade — mantém proporção e espaçamento em mobile */
@media (max-width: 768px) {
  .brands-grid > .brand-item.brand-as-image.brand-tupperware {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 30px;
  }
  .brands-grid > .brand-item.brand-as-image.brand-tupperware > .brand-png {
    width: min(70vw, 360px) !important;
    max-width: min(70vw, 360px) !important;
  }
}

/* =========================================================
   PATCH — Brand 6 (Tupperware) posicionamento correto
   ========================================================= */

/* Coluna 3, LINHA 2 (lado do Brand 5 e abaixo do Brand 3) */
.brands-grid > .brand-item.brand-as-image.brand-tupperware{
  grid-column: 3 !important;
  grid-row: 2 !important;
  margin-top: 44px;            /* igual ao Brand 5 para alinhar a linha */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important; /* evita corte das bordas da imagem */
  position: relative;
  z-index: 2;
}

/* Tamanho proporcional ao conjunto */
.brands-grid > .brand-item.brand-as-image.brand-tupperware > .brand-png{
  width: clamp(230px, 22vw, 330px) !important;
  max-width: clamp(230px, 22vw, 330px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Mobile: empilha e centraliza */
@media (max-width: 768px){
  .brands-grid > .brand-item.brand-as-image.brand-tupperware{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    margin-top: 30px;
  }
  .brands-grid > .brand-item.brand-as-image.brand-tupperware > .brand-png{
    width: min(68vw, 340px) !important;
    max-width: min(68vw, 340px) !important;
  }
}


/* =========================================================
   PATCH — Brand 7 (Canecas Rede Litoral)
   ========================================================= */

/* Posicionamento: mesma coluna do Brand 6, próxima fileira */
.brands-grid > .brand-item.brand-as-image.brand-caneca{
  grid-column: 3 !important;  /* coluna da direita (mesma do Brand 6) */
  grid-row: 3 !important;     /* fileira abaixo do Brand 6 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 46px;            /* respiro entre fileiras */
  overflow: visible !important;/* nada cortado */
  position: relative;
  z-index: 2;
}

/* Tamanho harmonizado com o Brand 6 (ligeiro destaque) */
.brands-grid > .brand-item.brand-as-image.brand-caneca > .brand-png{
  width: clamp(250px, 23vw, 340px) !important;
  max-width: clamp(250px, 23vw, 340px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Mobile — empilha e centraliza */
@media (max-width: 768px){
  .brands-grid > .brand-item.brand-as-image.brand-caneca{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    margin-top: 30px;
  }
  .brands-grid > .brand-item.brand-as-image.brand-caneca > .brand-png{
    width: min(72vw, 360px) !important;
    max-width: min(72vw, 360px) !important;
  }
}

/* =========================================================
   PATCH — Brand 7 (Canecas Rede Litoral) — ajuste de proximidade
   ========================================================= */

/* Mantém posição, mas reduz o espaçamento vertical */
.brands-grid > .brand-item.brand-as-image.brand-caneca {
  grid-column: 3 !important;  /* mesma coluna do Brand 6 */
  grid-row: 3 !important;     /* linha logo abaixo */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px !important; /* ↓ diminui o espaçamento entre Brand 6 e Brand 7 */
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* Tamanho igualado ao Brand 6 */
.brands-grid > .brand-item.brand-as-image.brand-caneca > .brand-png {
  width: clamp(250px, 23vw, 340px) !important;
  max-width: clamp(250px, 23vw, 340px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Mobile — mantém a proporção e alinhamento central */
@media (max-width: 768px) {
  .brands-grid > .brand-item.brand-as-image.brand-caneca {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    margin-top: 18px !important;
  }

  .brands-grid > .brand-item.brand-as-image.brand-caneca > .brand-png {
    width: min(70vw, 340px) !important;
    max-width: min(70vw, 340px) !important;
  }
}


/* =========================================================
   PATCH — Brand 6 (Tupperware) e Brand 7 (Canecas) — ajuste vertical
   ========================================================= */

/* --- Brand 6: sobe um pouco --- */
.brands-grid > .brand-item.brand-as-image.brand-tupperware {
  grid-column: 3 !important;
  grid-row: 2 !important;
  margin-top: 18px !important; /* ↓ antes era ~44px */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* --- Brand 7: sobe e mantém proximidade --- */
.brands-grid > .brand-item.brand-as-image.brand-caneca {
  grid-column: 3 !important;
  grid-row: 3 !important;
  margin-top: 10px !important; /* ↓ antes era 26px */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* Mantém tamanhos equilibrados */
.brands-grid > .brand-item.brand-as-image.brand-tupperware > .brand-png,
.brands-grid > .brand-item.brand-as-image.brand-caneca > .brand-png {
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mobile — respeita empilhamento */
@media (max-width: 768px) {
  .brands-grid > .brand-item.brand-as-image.brand-tupperware {
    margin-top: 24px !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-caneca {
    margin-top: 18px !important;
  }
}


/* =========================================================
   PATCH — Ajuste fino de espaçamento entre Brand 3, 6 e 7
   ========================================================= */

/* --- Brand 3 (Panela Ichef) mantém posição fixa --- */
.brands-grid > .brand-item.brand-as-image.brand-ichef {
  margin-bottom: 0 !important; /* remove qualquer gap extra */
  overflow: visible !important;
}

/* --- Brand 6 (Tupperware) sobe bem mais --- */
.brands-grid > .brand-item.brand-as-image.brand-tupperware {
  grid-column: 3 !important;
  grid-row: 2 !important;
  margin-top: -10px !important; /* ↓ subiu ainda mais (antes 18px) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* --- Brand 7 (Canecas) cola levemente no Tupperware --- */
.brands-grid > .brand-item.brand-as-image.brand-caneca {
  grid-column: 3 !important;
  grid-row: 3 !important;
  margin-top: -6px !important; /* ↓ encosta levemente no Tupperware */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* --- Garantia visual e responsiva --- */
.brands-grid > .brand-item.brand-as-image.brand-tupperware > .brand-png,
.brands-grid > .brand-item.brand-as-image.brand-caneca > .brand-png {
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* --- Mobile: mantém proporção e separação mínima --- */
@media (max-width: 768px) {
  .brands-grid > .brand-item.brand-as-image.brand-tupperware {
    margin-top: 12px !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-caneca {
    margin-top: 10px !important;
  }
}


/* =========================================================
   PATCH — Coluna direita alinhada (Brand 3, 6, 7) + espaçamento curto
   ========================================================= */

/* Grade: garantimos 3 colunas e centralização dos itens */
.brands-grid{
  grid-template-columns: repeat(3, 1fr) !important;
  justify-items: center !important;
  align-items: start !important;
  overflow: visible !important;
}

/* -------- Coluna 3 (direita) — posições fixas -------- */
.brands-grid > .brand-item.brand-as-image.brand-ichef{
  grid-column: 3 !important;  /* Brand 3 (panelas.png) */
  grid-row: 1 !important;
  justify-self: center !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

.brands-grid > .brand-item.brand-as-image.brand-tupperware{
  grid-column: 3 !important;  /* Brand 6 (tupperware.png) */
  grid-row: 2 !important;
  justify-self: center !important;
  margin-top: -12px !important;   /* sobe e aproxima do Brand 3 */
  overflow: visible !important;
  position: relative; z-index: 2;
}

.brands-grid > .brand-item.brand-as-image.brand-caneca{
  grid-column: 3 !important;  /* Brand 7 (caneca.png) */
  grid-row: 3 !important;
  justify-self: center !important;
  margin-top: -14px !important;  /* ↑ sobe mais que antes, cola no Brand 6 */
  overflow: visible !important;
  position: relative; z-index: 2;
}

/* Segurança: nada de cortes nas imagens */
.brands-grid > .brand-item.brand-as-image.brand-ichef  > .brand-png,
.brands-grid > .brand-item.brand-as-image.brand-tupperware > .brand-png,
.brands-grid > .brand-item.brand-as-image.brand-caneca > .brand-png{
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Mobile: empilha normalmente e reduz offsets */
@media (max-width: 768px){
  .brands-grid > .brand-item.brand-as-image.brand-tupperware{ margin-top: 8px !important; }
  .brands-grid > .brand-item.brand-as-image.brand-caneca{ margin-top: 6px !important; }
}


/* =========================================================
   PATCH — Brand 8 (Prêmios Todos os Dias)
   ========================================================= */

/* Posição: mesma coluna do Brand 5, nova linha abaixo dele */
.brands-grid > .brand-item.brand-as-image.brand-premios {
  grid-column: 2 !important;   /* alinha com o Brand 5 (10 MIL) */
  grid-row: 3 !important;      /* aparece logo abaixo */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px !important; /* pequena folga entre os círculos */
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* Mesmo tamanho e proporção do Brand 5 */
.brands-grid > .brand-item.brand-as-image.brand-premios > .brand-png {
  width: clamp(170px, 16.5vw, 250px) !important;   /* idêntico ao Brand 5 */
  max-width: clamp(170px, 16.5vw, 250px) !important;
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mobile — empilha e mantém proporção */
@media (max-width: 768px) {
  .brands-grid > .brand-item.brand-as-image.brand-premios {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    margin-top: 20px !important;
  }

  .brands-grid > .brand-item.brand-as-image.brand-premios > .brand-png {
    width: min(60vw, 280px) !important;
    max-width: min(60vw, 280px) !important;
  }
}

/* =========================================================
   PATCH — Coluna central (Brand 2, Brand 5, Brand 8)
   Distância mínima refinada — versão final colada 🔥
   ========================================================= */

/* Brand 2 — Raspou, Achou, Ganhou */
.brands-grid > .brand-item:nth-of-type(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin-bottom: -28px !important; /* ↓ colou com o Brand 5 */
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* Brand 5 — +10 MIL Prêmios */
.brands-grid > .brand-item.brand-as-image.brand-10mil {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin-top: -20px !important;     /* ↓ quase encostando no Brand 2 */
  margin-bottom: -22px !important;  /* ↓ aproxima do Brand 8 */
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* Brand 8 — Centenas de Prêmios Todos os Dias */
.brands-grid > .brand-item.brand-as-image.brand-premios {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin-top: -14px !important;  /* ↓ colou mais ao Brand 5 */
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* Imagens otimizadas e centradas */
.brands-grid > .brand-item.brand-as-image.brand-10mil > .brand-png,
.brands-grid > .brand-item.brand-as-image.brand-premios > .brand-png {
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mobile — mantém distância mínima sem sobreposição */
@media (max-width: 768px) {
  .brands-grid > .brand-item:nth-of-type(2) { margin-bottom: -8px !important; }
  .brands-grid > .brand-item.brand-as-image.brand-10mil { margin-top: -6px !important; margin-bottom: -6px !important; }
  .brands-grid > .brand-item.brand-as-image.brand-premios { margin-top: -4px !important; }
}

/* =========================================================
   PATCH — Coluna Central Final: mínima distância (Brand 2, 5, 8)
   ========================================================= */

/* Brand 2 — Raspou, Achou, Ganhou */
.brands-grid > .brand-item:nth-of-type(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin-bottom: -34px !important; /* ↓ encosta bem no Brand 5 */
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* Brand 5 — +10 MIL Prêmios */
.brands-grid > .brand-item.brand-as-image.brand-10mil {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin-top: -26px !important;     /* ↓ quase tocando o Brand 2 */
  margin-bottom: -34px !important;  /* ↓ coladinho no Brand 8 */
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* Brand 8 — Centenas de Prêmios Todos os Dias */
.brands-grid > .brand-item.brand-as-image.brand-premios {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin-top: -24px !important; /* ↓ colou praticamente no Brand 5 */
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* Ajuste fino das imagens — nada cortado */
.brands-grid > .brand-item.brand-as-image.brand-10mil > .brand-png,
.brands-grid > .brand-item.brand-as-image.brand-premios > .brand-png {
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mobile — mantém compactação sem sobrepor */
@media (max-width: 768px) {
  .brands-grid > .brand-item:nth-of-type(2) { margin-bottom: -10px !important; }
  .brands-grid > .brand-item.brand-as-image.brand-10mil {
    margin-top: -10px !important;
    margin-bottom: -12px !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-premios { margin-top: -10px !important; }
}

/* =========================================================
   PATCH — Coluna Central (Brand 2, 5, 8)
   Distância mínima possível (visual colado)
   ========================================================= */

/* Brand 2 — Raspou, Achou, Ganhou */
.brands-grid > .brand-item:nth-of-type(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin-bottom: -42px !important; /* ↓ reduz ainda mais */
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* Brand 5 — +10 MIL Prêmios */
.brands-grid > .brand-item.brand-as-image.brand-10mil {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin-top: -34px !important;     /* ↓ aproxima ainda mais do Brand 2 */
  margin-bottom: -44px !important;  /* ↓ quase encostando no Brand 8 */
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* Brand 8 — Centenas de Prêmios Todos os Dias */
.brands-grid > .brand-item.brand-as-image.brand-premios {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin-top: -34px !important;  /* ↓ encosta visualmente no Brand 5 */
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* Garantia de renderização limpa */
.brands-grid > .brand-item.brand-as-image.brand-10mil > .brand-png,
.brands-grid > .brand-item.brand-as-image.brand-premios > .brand-png {
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Mobile — mantém proximidade máxima sem sobrepor */
@media (max-width: 768px) {
  .brands-grid > .brand-item:nth-of-type(2) { margin-bottom: -14px !important; }
  .brands-grid > .brand-item.brand-as-image.brand-10mil {
    margin-top: -14px !important;
    margin-bottom: -16px !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-premios { margin-top: -14px !important; }
}


/* =========================================================
   PATCH — COLUNA CENTRAL (Brand 2, 5, 8) — ZERO GAP MODE 💥
   ========================================================= */

/* --- Base geral: nada de cortes --- */
.brands-grid, .brands-grid > .brand-item { overflow: visible !important; }

/* --- Brand 2 — Raspou, Achou, Ganhou! --- */
.brands-grid > .brand-item:nth-of-type(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin-bottom: -54px !important; /* 🔥 encosta de verdade no Brand 5 */
  z-index: 4; /* mantém sobreposição suave */
  position: relative;
}

/* --- Brand 5 — +10 MIL Prêmios --- */
.brands-grid > .brand-item.brand-as-image.brand-10mil {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin-top: -46px !important;     /* 🔥 cola no Brand 2 */
  margin-bottom: -58px !important;  /* 🔥 cola no Brand 8 */
  z-index: 3;
  position: relative;
}

/* --- Brand 8 — Centenas de Prêmios Todos os Dias --- */
.brands-grid > .brand-item.brand-as-image.brand-premios {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin-top: -50px !important;  /* 🔥 praticamente sobreposto ao Brand 5 */
  z-index: 2;
  position: relative;
}

/* --- Garantia visual: nenhuma imagem cortada --- */
.brands-grid > .brand-item.brand-as-image.brand-10mil > .brand-png,
.brands-grid > .brand-item.brand-as-image.brand-premios > .brand-png {
  height: auto !important;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* --- Mobile: segura a sobreposição visual --- */
@media (max-width: 768px) {
  .brands-grid > .brand-item:nth-of-type(2) { margin-bottom: -20px !important; }
  .brands-grid > .brand-item.brand-as-image.brand-10mil {
    margin-top: -20px !important;
    margin-bottom: -22px !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-premios {
    margin-top: -20px !important;
  }
}

/* =========================================================
   COLUNA CENTRAL COLADA DE VERDADE (2 → 5 → 8)
   Corta row-gap e usa translateY pra aproximar
   ========================================================= */

/* 1) Zera o espaçamento vertical do grid (era o vilão) */
.brands-grid{
  row-gap: 0 !important;
  grid-row-gap: 0 !important;
}

/* 2) Normaliza Brand 2 (sem empurrões extras) */
.brands-grid > .brand-item:nth-of-type(2){
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  position: relative;
  z-index: 4;
}

/* 3) Puxa o Brand 5 (+10 MIL) pra cima */
.brands-grid > .brand-item.brand-as-image.brand-10mil{
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  position: relative;
  z-index: 3;
  transform: translateY(-28px) !important;  /* ajuste fino */
}

/* 4) Puxa o Brand 8 (PRÊMIOS) ainda mais pra cima */
.brands-grid > .brand-item.brand-as-image.brand-premios{
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin: 0 !important;
  position: relative;
  z-index: 2;
  transform: translateY(-62px) !important;   /* encosta visualmente no +10 MIL */
}

/* Imagens seguras (sem corte) */
.brands-grid > .brand-item.brand-as-image.brand-10mil > .brand-png,
.brands-grid > .brand-item.brand-as-image.brand-premios > .brand-png{
  height: auto !important;
  object-fit: contain;
  border: none !important;
  box-shadow: none !important;
}

/* Mobile: mantém próximo, mas com respiro pra não sobrepor */
@media (max-width: 768px){
  .brands-grid{ row-gap: 8px !important; }
  .brands-grid > .brand-item.brand-as-image.brand-10mil{
    transform: translateY(-10px) !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-premios{
    transform: translateY(-18px) !important;
  }
}


/* =========================================================
   COLUNA CENTRAL — ainda mais colada (sem encavalamento)
   ========================================================= */

/* garante que o grid não imponha gap vertical */
.brands-grid {
  row-gap: 0 !important;
  grid-row-gap: 0 !important;
  overflow: visible !important;
}

/* Brand 2 (Raspou...) — base neutra */
.brands-grid > .brand-item:nth-of-type(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  position: relative;
  z-index: 4;
}

/* Brand 5 (+10 MIL) — sobe mais */
.brands-grid > .brand-item.brand-as-image.brand-10mil {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  position: relative;
  z-index: 3;
  transform: translateY(-38px) !important; /* antes: -28px */
}

/* Brand 8 (PRÊMIOS) — sobe bem mais */
.brands-grid > .brand-item.brand-as-image.brand-premios {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin: 0 !important;
  position: relative;
  z-index: 2;
  transform: translateY(-86px) !important; /* antes: -62px */
}

/* =========================================================
   COLUNA DIREITA — micro offset p/ evitar encavalamento
   (somente visual; não mexe em alinhamento de grid)
   ========================================================= */

.brands-grid > .brand-item.brand-as-image.brand-tupperware {
  transform: translateY(6px) !important;   /* empurra um tiquinho p/ baixo */
  position: relative;
  z-index: 2;
}

.brands-grid > .brand-item.brand-as-image.brand-caneca {
  transform: translateY(10px) !important;  /* mais 4px de respiro */
  position: relative;
  z-index: 2;
}

/* Segurança: imagens sem corte */
.brands-grid > .brand-item.brand-as-image.brand-10mil > .brand-png,
.brands-grid > .brand-item.brand-as-image.brand-premios > .brand-png {
  height: auto !important;
  object-fit: contain;
  border: none !important;
  box-shadow: none !important;
}

/* Responsivo: segura proximidade sem sobrepor em telas menores */
@media (max-width: 1100px) {
  .brands-grid > .brand-item.brand-as-image.brand-10mil {
    transform: translateY(-30px) !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-premios {
    transform: translateY(-68px) !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-tupperware {
    transform: translateY(4px) !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-caneca {
    transform: translateY(8px) !important;
  }
}

@media (max-width: 768px) {
  .brands-grid { row-gap: 8px !important; }
  .brands-grid > .brand-item.brand-as-image.brand-10mil {
    transform: translateY(-12px) !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-premios {
    transform: translateY(-22px) !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-tupperware {
    transform: translateY(0) !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-caneca {
    transform: translateY(4px) !important;
  }
}


/* =========================================================
   AJUSTE PRECISO — COLUNA CENTRAL + COLUNA DIREITA
   ========================================================= */

/* Zera qualquer gap do grid */
.brands-grid {
  row-gap: 0 !important;
  grid-row-gap: 0 !important;
  overflow: visible !important;
}

/* --- COLUNA CENTRAL (2 → 5 → 8) --- */
.brands-grid > .brand-item:nth-of-type(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  position: relative;
  z-index: 5;
}

/* +10MIL — sobe mais */
.brands-grid > .brand-item.brand-as-image.brand-10mil {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  position: relative;
  z-index: 4;
  transform: translateY(-48px) !important; /* 🔥 sobe mais que antes */
}

/* PRÊMIOS — cola quase totalmente no +10MIL */
.brands-grid > .brand-item.brand-as-image.brand-premios {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin: 0 !important;
  position: relative;
  z-index: 3;
  transform: translateY(-102px) !important; /* 🔥 encostado mas sem sobreposição */
}

/* --- COLUNA DIREITA (sem encavalar) --- */
.brands-grid > .brand-item.brand-as-image.brand-tupperware {
  transform: translateY(12px) !important; /* leve descida pra respirar */
  position: relative;
  z-index: 2;
}

.brands-grid > .brand-item.brand-as-image.brand-caneca {
  transform: translateY(20px) !important; /* mais espaço ainda p/ evitar toque */
  position: relative;
  z-index: 2;
}

/* Garantia de imagens limpas */
.brands-grid > .brand-item.brand-as-image .brand-png {
  height: auto !important;
  object-fit: contain;
  border: none !important;
  box-shadow: none !important;
  image-rendering: -webkit-optimize-contrast;
}

/* --- MOBILE --- */
@media (max-width: 1024px) {
  .brands-grid > .brand-item.brand-as-image.brand-10mil {
    transform: translateY(-30px) !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-premios {
    transform: translateY(-60px) !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-tupperware {
    transform: translateY(8px) !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-caneca {
    transform: translateY(12px) !important;
  }
}

@media (max-width: 768px) {
  .brands-grid { row-gap: 10px !important; }
  .brands-grid > .brand-item.brand-as-image.brand-10mil {
    transform: translateY(-14px) !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-premios {
    transform: translateY(-24px) !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-tupperware {
    transform: translateY(0) !important;
  }
  .brands-grid > .brand-item.brand-as-image.brand-caneca {
    transform: translateY(6px) !important;
  }
}


/* =========================================================
   AJUSTE DE PROPORÇÃO DO HEADER / HERO
   ========================================================= */

/* 1. Reduz altura e padding do header hero */
.hero-section,
.header-hero,
.block-section-hero {
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  padding-top: 40px !important;   /* antes devia estar 80px+ */
  padding-bottom: 0 !important;
  min-height: 480px !important;   /* altura ideal do protótipo */
  display: flex;
  align-items: flex-end;          /* faz o conteúdo grudar na base */
  justify-content: center;
  overflow: visible;
}

/* 2. Caso o hero.png esteja dentro de uma <img> */
.hero-section img.hero-bg,
.header-hero img.hero-bg {
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-top: -40px !important;   /* sobe o fundo em relação à navbar */
}

/* 3. Corrige o posicionamento do conteúdo (personagem + título) */
.hero-content,
.hero-text,
.block-section-hero .text-overlay {
  margin-top: -50px !important;   /* sobe tudo um pouco */
  transform: translateY(-10px);   /* microajuste suave */
}

/* 4. Navbar intacta */
header.navbar,
.navbar {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 5. Responsividade: evita cortes em telas pequenas */
@media (max-width: 768px) {
  .hero-section,
  .header-hero,
  .block-section-hero {
    padding-top: 20px !important;
    min-height: 420px !important;
  }

  .hero-content,
  .hero-text,
  .block-section-hero .text-overlay {
    margin-top: -30px !important;
    transform: translateY(-5px);
  }
}


/* ==========================================
   HEADER / HERO – reduzir o vão com a navbar
   ========================================== */

/* Garante que a navbar fique por cima e sem empurrar nada */
header.navbar, .navbar {
  position: relative;
  z-index: 10;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Container do hero (usei vários seletores-alvo pra cobrir tua estrutura) */
.hero-section,
.header-hero,
.block-section-hero {
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;

  /* menos “respiro” no topo */
  padding-top: clamp(6px, 1.2vw, 14px) !important;

  /* altura um pouco menor pra aproximar a composição */
  min-height: clamp(420px, 48vw, 540px) !important;

  display: flex;
  align-items: flex-end;      /* conteúdo desce pro rodapé do hero */
  justify-content: center;
  overflow: visible;
}

/* Se o fundo do hero é uma <img> */
.hero-section img.hero-bg,
.header-hero img.hero-bg,
.block-section-hero img.hero-bg {
  width: 100%;
  height: auto;
  object-fit: cover;
  /* puxa a arte de fundo discretamente pra cima */
  margin-top: calc(-1 * clamp(10px, 2vw, 28px)) !important;
}

/* Bloco do conteúdo (menina + airfryer + headline) — sobe de leve */
.hero-content,
.hero-text,
.block-section-hero .text-overlay,
.block-section-hero .hero-inner {
  margin-top: 0 !important;
  transform: translateY(calc(-1 * clamp(22px, 4.8vw, 76px))) !important;
  will-change: transform;
}

/* Evita que a seção seguinte “quebre” o encaixe */
.section-after-hero,
.brands,
#premios {
  margin-top: 0 !important;
}

/* Mobile: mantém próximo, mas com respiro pra não cortar nada */
@media (max-width: 768px) {
  .hero-section,
  .header-hero,
  .block-section-hero {
    padding-top: clamp(4px, 1.5vw, 10px) !important;
    min-height: clamp(380px, 58vw, 460px) !important;
  }
  .hero-section img.hero-bg,
  .header-hero img.hero-bg,
  .block-section-hero img.hero-bg {
    margin-top: calc(-1 * clamp(6px, 1.8vw, 16px)) !important;
  }
  .hero-content,
  .hero-text,
  .block-section-hero .text-overlay,
  .block-section-hero .hero-inner {
    transform: translateY(calc(-1 * clamp(14px, 3.6vw, 40px))) !important;
  }
}


/* === HOTFIX HEADER/HERO — reduzir vão entre navbar e fundo === */
.hero{
  /* altura menor → menos “amarelo” acima da arte */
  min-height: clamp(360px, 44vw, 520px) !important;

  /* puxa o fundo levemente pra cima */
  background-position: center calc(-1 * clamp(14px, 3vw, 64px)) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* telas largas: dá mais uma puxadinha */
@media (min-width: 1200px){
  .hero{
    min-height: clamp(340px, 42vw, 500px) !important;
    background-position: center calc(-1 * clamp(24px, 4vw, 88px)) !important;
  }
}

/* tablet: mantém próximo mas seguro */
@media (max-width: 1024px){
  .hero{
    min-height: clamp(360px, 50vw, 520px) !important;
    background-position: center calc(-1 * clamp(10px, 2.2vw, 28px)) !important;
  }
}

/* ===============================
   HEADER — tamanhos consistentes
   =============================== */

/* Altura padrão do header (desktop) */
:root { --header-h: 72px; }

/* Compacta levemente o header em telas menores */
@media (max-width: 1024px){
  :root { --header-h: 68px; }
  .logo-img{ height: 50px; } /* já existe .logo-img no CSS */
}

@media (max-width: 640px){
  :root { --header-h: 60px; }
  .header .container{ gap: .5rem; }
  .logo-img{ height: 44px; }
}

/* Garante que o body compense a altura real do header em todas */
body{ padding-top: var(--header-h) !important; }

/* A estrutura do header e container já está no arquivo */

/* ====== Menu mobile: sem JS (checkbox hack) ====== */

/* Esconde o checkbox de controle */
#nav-toggle{ position: absolute; left: -9999px; }

/* Mostra o botão hambúrguer no mobile (já existe a classe) */
@media (max-width: 920px){
  .menu-toggle{ display:flex; } /* redundante, mas garante */
}

/* Abre a navegação quando o checkbox está marcado */
@media (max-width: 920px){
  .nav:has(#nav-toggle:checked) .nav-list{
    transform: translateY(0); /* tua lista começa “fechada” com translateY */
  }

  /* Links mais legíveis e sem quebrar linha demais */
  .nav .nav-list{
    gap: 8px;
  }
  .nav .nav-list li a{
    font-size: 1rem;
    padding: .9rem 0;
  }
}


/* === NAVBAR MOBILE — força visibilidade correta === */
@media (max-width: 920px){
  /* o botão hambúrguer precisa aparecer SEMPRE no mobile */
  .menu-toggle{ display:flex !important; }

  /* não esconda o <nav>; deixe vivo pro JS controlar a lista */
  .nav{ display:block !important; }

  /* o dropdown precisa ocupar toda a largura, alinhado sob o header fixo */
  .nav .nav-list{
    position: fixed !important;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    background: rgba(255,255,255,.98);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    backdrop-filter: blur(8px) saturate(160%);
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
    border-bottom: 1px solid rgba(0,0,0,.06);
    transform: translateY(-120%);            /* fechado por padrão */
    transition: transform .28s ease;
    z-index: 3500;
  }
  /* quando o JS adicionar .active, abre */
  .nav .nav-list.active{ transform: translateY(0) !important; }

  /* links confortáveis pro toque */
  .nav .nav-list li a{
    display:block; padding: 1rem 1.25rem; font-weight:700;
  }
}


/* === HERO MOBILE — mais fundo amarelo e faixa azul mais baixa === */
@media (max-width: 480px){
  /* altura da faixa azul consistente */
  :root { --hero-bar-h: clamp(92px, 18vw, 128px); }

  .hero{
    /* mais área amarela → a faixa azul fica mais embaixo na página */
    min-height: 560px !important;
    background-position: center 20% !important;
    padding-bottom: var(--hero-bar-h) !important;
  }

  /* arte menos “colada” na barra azul */
  .hero > .hero-art{
    transform: translateX(-50%) translateY(6px) !important; /* era bem maior */
    max-width: 500px; /* segurança pra não estourar em 390px */
  }

  /* mantém data/certificado proporcionais quando empilhados */
  .hero-data, .hero-certificado{
    width: 66% !important;
    max-width: 240px !important;
    margin: 6px auto !important;
  }
}

/* breakpoint coringa (até ~768) mantendo a intenção do protótipo */
@media (min-width: 481px) and (max-width: 768px){
  :root { --hero-bar-h: clamp(90px, 16vw, 126px); }
  .hero{
    min-height: 520px !important;
    background-position: center 22% !important;
    padding-bottom: var(--hero-bar-h) !important;
  }
  .hero > .hero-art{
    transform: translateX(-50%) translateY(10px) !important;
  }
}

/* =========================================================
   MOBILE FIX: Navbar (hamburger), Hero centralizado e
   barra azul com respiro – COLAR NO FINAL DO style.css
   ========================================================= */
@media (max-width: 480px) {
  /* ===== NAVBAR ===== */
  /* contêiner da navbar ocupa a largura toda e alinha itens */
  .navbar, header .navbar, .site-header .navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-inline: 14px; /* dá um ar nas laterais */
  }

  /* logo à esquerda com largura segura */
  .navbar .brand, .navbar .logo, header .logo {
    max-width: 62%;
    display: inline-block;
  }

  /* botão hamburguer visível à direita */
  .navbar .menu-toggle, .nav-toggle, .hamburger, .navbar .hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    cursor: pointer;
  }

  /* links principais somem no mobile; aparecem ao abrir */
  .navbar .nav-links, nav .nav-links, .navbar ul, nav ul {
    display: none !important;
  }
  /* quando a navbar recebe .is-open (toggle via JS), mostra o menu empilhado */
  .navbar.is-open .nav-links, nav.is-open .nav-links, .menu.is-open {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    background: #fff;
    position: absolute;
    right: 0;
    left: 0;
    top: 100%;
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
  }

  /* ===== HERO / HEADER ===== */
  /* variáveis de espaçamento no mobile */
  .hero, #hero, .header-hero, .banner-hero {
    --hero-gap: 18px;      /* respiro entre navbar e o conteúdo do hero */
    --blue-shift: 26px;    /* quanto a barra azul desce */
    text-align: center;    /* fallback para centrar tudo */
  }

  /* dá o respiro “anti-colo-na-navbar” */
  .hero, #hero, .header-hero, .banner-hero {
    padding-top: calc(var(--hero-gap) + 4px);
  }

  /* garante que a figura principal fique perfeitamente centralizada */
  .hero .hero-art,
  .hero .art,
  .hero .woman,
  .hero figure,
  .header-hero .hero-art,
  #hero .hero-art {
    display: block;
    margin-inline: auto;
    transform: translateX(0) !important; /* neutraliza qualquer empurrão à esquerda */
  }

  /* qualquer elemento do HERO que tenha inline transform com translateX, zera */
  .hero [style*="translateX"] {
    transform: translateX(0) !important;
  }

  /* imagens do hero sempre fluídas */
  .hero img,
  #hero img,
  .header-hero img {
    max-width: 100%;
    height: auto;
  }

  /* “selos/badges” que ficam acima da cabeça – dá um respiro para não colar na navbar */
  .hero .badge,
  .hero .sticker,
  .hero .top-badges,
  .header-hero .badge {
    margin-top: var(--hero-gap);
  }

  /* ===== BARRA AZUL ===== */
  .hero .blue-band,
  .hero .blue,
  .header-hero .blue-strip,
  #hero .blue-strip {
    margin-top: var(--blue-shift) !important; /* desce a barra azul */
  }
}



/* === MOBILE-ONLY HOTFIX (não afeta desktop) ========================== */
@media (max-width: 768px) {
  /* 1) Nunca ter scroll lateral no mobile */
  html, body { overflow-x: hidden !important; }
  body { width: 100%; }

  /* 2) Header: container compacto e hambúrguer posicionado corretamente */
  .header .container { padding: 0 14px !important; position: relative; }
  .menu-toggle{
    display: inline-flex !important;
    position: absolute;
    right: 12px;               /* encosta no canto sem sair da tela */
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 30px;
    margin: 0 !important;
  }

  /* 3) O <nav> nunca some nem cria largura extra */
  .nav{ display:block !important; overflow: visible; }
  .nav-list{
    position: fixed !important;
    top: var(--header-h, 60px) !important;
    left: 0 !important; right: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
    transform: translateY(-120%);          /* fechado por padrão */
  }
  .nav-list.active{ transform: translateY(0) !important; }

  /* 4) Logo nunca estoura a largura; evita empurrar layout pra direita */
  .logo, .logo-img, .navbar .brand, .navbar .logo{
    max-width: 62% !important;
    height: auto;
  }
  .logo-img{ max-width: 100%; height: 44px !important; }

  /* 5) Hero/header: centraliza arte e dá respiro dos selos à navbar */
  .hero, #hero, .header-hero, .banner-hero{
    text-align: center;
    padding-top: 10px !important;           /* ↓ fundo do header */
    min-height: clamp(380px, 58vw, 480px) !important;  /* ↓ altura */
    background-position: center top !important;
  }
  .hero .hero-art, .header-hero .hero-art, .hero figure, .hero img.hero-art{
    display: block; margin: 0 auto; transform: none !important; max-width: 92%;
  }
  .hero .badge, .header-hero .badge, .hero .top-badges{
    margin-top: 10px !important;            /* afasta da navbar */
  }

  /* 6) Barra azul não sobe demais */
  .hero::after{ height: clamp(84px, 15vw, 120px) !important; }

  /* 7) Segurança: qualquer imagem no topo não passa de 100% */
  header img, .hero img, .header-hero img{ max-width: 100% !important; height: auto !important; }
}

/* Extra: telas muito estreitas (390px ~ “Mabel”) */
@media (max-width: 430px){
  :root{ --header-h: 58px; }
  .logo-img{ height: 40px !important; }
  .menu-toggle{ right: 10px; }
}

/* === Ajuste final MOBILE: altura do header + logo proporcional === */
@media (max-width: 768px) {
  /* aumenta levemente a área de fundo do header */
  .hero,
  #hero,
  .header-hero,
  .banner-hero {
    min-height: clamp(440px, 65vw, 500px) !important; /* +altura */
    padding-top: 16px !important;
    padding-bottom: 10px !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  /* garante que o conteúdo continue centralizado visualmente */
  .hero img,
  .header-hero img,
  .banner-hero img {
    max-width: 95%;
    height: auto;
    margin: 0 auto;
  }

  /* desamassa o logo da navbar e mantém proporção */
  .logo,
  .logo img,
  .logo-img,
  .navbar .logo img {
    height: auto !important;
    max-height: 52px !important;
    width: auto !important;
    max-width: 72% !important;
    object-fit: contain;
  }

  /* reposiciona levemente o menu hamburguer */
  .menu-toggle {
    top: 50%;
    transform: translateY(-50%);
    right: 14px;
  }
}

/* para telas bem pequenas (iPhone SE / Galaxy S mini) */
@media (max-width: 430px) {
  .logo img {
    max-height: 48px !important;
    max-width: 78% !important;
  }
  .hero,
  #hero,
  .header-hero,
  .banner-hero {
    min-height: 480px !important;
  }
}

/* ====== MOBILE ONLY ====== */
@media (max-width: 768px) {

  /* botão hamburguer fica clicável por cima de tudo */
  .menu-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    z-index: 10010; /* acima do conteúdo do header */
    cursor: pointer;
  }

  /* nav container */
  .nav {
    position: relative;
    --nav-h: 64px; /* ajuste fino se seu header for um pouco maior/menor */
  }

  /* nav-list “fechada” por padrão no mobile */
  .nav-list {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    display: none;             /* abre via .is-open */
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    background: #fff;
    z-index: 10000;
    max-height: calc(100dvh - var(--nav-h));
    overflow: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }

  /* quando a nav recebe .is-open via JS */
  .nav.is-open .nav-list {
    display: flex;
  }

  /* evita scroll do body quando o menu está aberto */
  body.nav-open {
    overflow: hidden;
  }

  /* links do menu */
  .nav-list a {
    display: block;
    padding: 10px 2px;
    font-weight: 700;
    text-decoration: none;
  }

  /* —— hero: empurra o conjunto de imagens um pouco pra baixo —— */
  .hero img,
  #hero img,
  .header-hero img,
  .banner-hero img {
    /* desce o “hero-art” para invadir mais a barra azul */
    transform: translateY(clamp(12px, 3.8vw, 28px));
  }
}


/* === MOBILE TUNING (hero invade mais a barra azul) === */
@media (max-width: 768px) {
  /* tentei cobrir os seletores mais comuns do seu header sem afetar desktop */
  .header .hero img,
  .header .hero-art img,
  .header .hero-art,
  .header .hero-stack,
  .hero img {
    /* desce o conjunto do hero */
    transform: translateY(clamp(28px, 8vw, 90px));
    will-change: transform;
  }
}

/* === FINAL OVERRIDES — HERO INVASION MOBILE === */

/* 0) Neutraliza "empurrões" genéricos de imagens no hero */
@media (max-width: 768px){
  .hero img { transform: none !important; }               /* zera regra ampla */
  .header .hero img { transform: none !important; }       /* zera a outra ampla */
}

/* 1) Variáveis de controle (ajuste fino se quiser) */
:root{
  --hero-invade-mobile: clamp(46px, 11vw, 72px);  /* quanto o hero.png invade a barra azul */
  --hero-blue-height: clamp(100px, 18vw, 140px);  /* altura da faixa azul no mobile */
}

/* 2) Mobile: aumenta a faixa azul e desce a arte principal */
@media (max-width: 768px){
  .hero::after{
    height: var(--hero-blue-height) !important;
  }
  .hero > .hero-art{
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(var(--hero-invade-mobile)) !important;
    z-index: 1260;
  }
}

/* 3) Telas pequenas (ex.: 390px) — invade um pouco mais */
@media (max-width: 430px){
  :root{ --hero-invade-mobile: clamp(56px, 13vw, 86px); }
}

/* =========================
   MOBILE – AJUSTE FINO HEADER
   ========================= */
@media (max-width: 768px) {

  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Hero base */
  .hero {
    position: relative;
    overflow: visible;
  }

  /* Faixa azul */
  .hero::after {
    height: clamp(135px, 21vw, 175px) !important;
  }

  /* Hero art (imagem da mulher) — sobe um pouco menos */
  .hero img[src*="hero"] {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(clamp(105px, 17vw, 130px)) !important;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    display: block;
  }

  /* Badges superiores (campanha válida e certificado) */
  .hero img[src*="campanha"],
  .hero img[src*="certificado"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(14px, 2.5vw, 20px) !important;
  }

  /* Logo na navbar */
  .header .logo img,
  .nav .logo img {
    height: clamp(20px, 3.8vw, 25px);
    width: auto;
  }

  /* Menu hamburguer */
  .menu-toggle {
    display: block;
  }

  .nav-list {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 2000;
  }

  .nav-list.active {
    display: flex;
  }
}

/* Ajuste fino extra para telas pequenas */
@media (max-width: 400px) {
  .hero img[src*="hero"] {
    transform: translateX(-50%) translateY(clamp(115px, 19vw, 140px)) !important;
  }
}

/* =========================
   MOBILE – AJUSTE FINO HEADER (vFinal+)
   ========================= */
@media (max-width: 768px) {

  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero {
    position: relative;
    overflow: visible;
  }

  /* Faixa azul */
  .hero::after {
    height: clamp(135px, 21vw, 175px) !important;
  }

  /* Hero art (mulher + produtos) — sobe mais 15px */
  .hero img[src*="hero"] {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(clamp(35px, 7vw, 60px)) !important;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    display: block;
  }

  /* Badges superiores (campanha válida e certificado) */
  .hero img[src*="campanha"],
  .hero img[src*="certificado"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(14px, 2.5vw, 20px) !important;
  }

  /* Logo da navbar */
  .header .logo img,
  .nav .logo img {
    height: clamp(20px, 3.8vw, 25px);
    width: auto;
  }

  /* Menu hamburguer */
  .menu-toggle {
    display: block;
  }

  .nav-list {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 2000;
  }

  .nav-list.active {
    display: flex;
  }
}

/* Ajuste fino para telas muito pequenas */
@media (max-width: 400px) {
  .hero img[src*="hero"] {
    transform: translateX(-50%) translateY(clamp(40px, 8vw, 65px)) !important;
  }
}

/* =========================
   MOBILE – CENTRALIZAÇÃO + AJUSTES FINOS DO HEADER
   ========================= */
@media (max-width: 768px) {

  /* Leve nudge para a ESQUERDA e subir um pouco o hero.png */
  .hero img[src*="hero"]{
    position: relative !important;
    left: 50% !important;
    /* nudge X ~2px para a esquerda e ~6–8px MAIS para cima (menor translateY) */
    transform: translateX(calc(-50% - 2px)) translateY(clamp(28px, 6.2vw, 52px)) !important;
    display: block;
    margin: 0 auto;
    z-index: 2;
    pointer-events: none;
    user-select: none;
  }

  /* Diminui um pouco os elementos de topo (campanha válida / certificado)
     e dá um respiro da navbar */
  .hero img[src*="campanha"],
  .hero img[src*="certificado"]{
    display:block;
    margin-inline:auto;
    /* ~6–8% menor, mantendo responsivo */
    width: clamp(290px, 86vw, 340px);
    margin-top: clamp(12px, 2.3vw, 18px) !important;
  }
}

/* =========================
   MOBILE – AJUSTE HERO FINAL
   ========================= */
@media (max-width: 768px) {

  /* Hero principal (mulher + produtos) */
  .hero img[src*="hero"] {
    position: relative !important;
    left: 50% !important;
    /* Mais para cima (~20px) e um leve empurrão pra esquerda (~6px) */
    transform: translateX(calc(-50% - 6px)) translateY(clamp(22px, 5.5vw, 46px)) !important;
    width: clamp(310px, 95vw, 390px) !important; /* aumenta ~6% */
    max-width: none !important;
    display: block;
    margin: 0 auto;
    z-index: 2;
    pointer-events: none;
    user-select: none;
  }

  /* Imagens de topo (campanha e certificado) um pouco menores */
  .hero img[src*="campanha"],
  .hero img[src*="certificado"] {
    width: clamp(275px, 82vw, 325px);
    margin-top: clamp(10px, 2vw, 16px) !important;
    margin-inline: auto;
    display: block;
  }
}

/* =============== PATCH MOBILE (somente <= 768px) =============== */
@media (max-width: 768px) {

  /* Garante âncora de posicionamento do sheet do menu */
  .header .container { position: relative; }

  /* Sheet do menu: escondido por padrão no mobile */
  .nav-list {
    position: absolute;
    top: calc(100% + 6px); /* logo abaixo da navbar */
    left: 0;
    right: 0;
    margin: 0 var(--container-side);
    width: auto;
    display: none;              /* mobile: escondido até .active */
    flex-direction: column;
    gap: 6px;
    background: var(--header-sheet, #fff);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    z-index: 9999;              /* acima do conteúdo */
  }

  /* Ao abrir, vira coluna visível */
  .nav-list.active { display: flex; }

  .nav-list li a {
    display: block;
    padding: 12px 10px;
    font-size: 16px;
    color: var(--blue-700, #1e2ea6);
  }

  /* --------- Hero: micro-ajustes --------- */

  /* intrusão menor na barra azul (sobe um pouco a arte) */
  .hero {
    --hero-art-overlap: clamp(10px, 1.6vw, 22px);
  }

  /* desce a linha superior um tiquinho pra não “colar” na navbar */
  .hero__top {
    gap: clamp(10px, 2vw, 14px);
  }

  /* leve deslocamento à esquerda e aumento sutil do hero.png */
  .hero-art {
    transform: translateX(calc(-50% - 4px));
    width: clamp(330px, 92vw, 520px); /* + ~2% de tamanho */
  }
}


/* ==========================================
   PATCH MOBILE – CORRIGE DROPDOWN HAMBURGUER
   ========================================== */
@media (max-width: 768px) {

  /* esconde o menu mobile por padrão */
  .nav-list {
    display: none !important;
    position: absolute;
    top: calc(100% + 10px); /* logo abaixo da navbar */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background: #fff;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 9999;
  }

  /* exibe o menu quando ativo */
  .nav-list.active {
    display: flex !important;
  }

  /* links do menu mobile */
  .nav-list li {
    width: 100%;
    text-align: center;
  }

  .nav-list li a {
    display: block;
    width: 100%;
    padding: 10px 0;
    color: #1636ff;
    font-weight: 700;
    text-decoration: none;
  }

  /* bloqueia o scroll quando o menu estiver aberto */
  body.nav-open {
    overflow: hidden;
  }

  /* garante que o botão hamburguer fique sempre clicável acima */
  .menu-toggle {
    position: relative;
    z-index: 10000;
  }
}


/* ==========================================
   MOBILE – ALINHAMENTO LOGO x BOTÃO HAMBÚRGUER
   (não afeta o desktop)
   ========================================== */
@media (max-width: 768px) {
  /* altura e referência para posicionamento */
  .header {
    position: sticky;           /* já deve estar, mas reforçamos */
    top: 0;
    height: 56px;               /* altura da barra */
  }

  /* garante que a área da logo fique centrada verticalmente */
  .header .logo,
  .header .brand,
  .header .brand-logo {
    display: flex;
    align-items: center;
    min-height: 56px;           /* casa com a barra */
    padding-left: 16px;         /* respiro à esquerda */
  }

  /* evita “amassar” a logo no mobile */
  .header .logo img,
  .header .brand img,
  .header .brand-logo img {
    height: 26px;               /* ajuste fino da logo */
    width: auto;
  }

  /* botão hamburguer sempre alinhado ao centro vertical da barra,
     e “encostado” à direita com respiro */
  .menu-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%); /* centraliza verticalmente */
    z-index: 10001;              /* acima do dropdown */
  }

  /* como a .nav-list abre logo abaixo da barra, use a mesma altura */
  .nav-list {
    top: calc(56px + 10px);      /* 56 da barra + 10 de respiro */
  }
}


/* ==========================================
   MOBILE – ALTURA DA NAVBAR + ALINHAMENTOS
   (não afeta o desktop)
   ========================================== */
@media (max-width: 768px) {
  :root {
    /* ajuste aqui se quiser maior/menor (64px costuma bater com o visual anterior) */
    --header-h: 64px;
    --header-pad-x: 16px;
    --logo-h: 28px; /* altura da imagem da logo dentro da barra */
  }

  .header {
    height: var(--header-h);
  }

  /* Logo centralizada verticalmente e sem “amassar” */
  .header .logo,
  .header .brand,
  .header .brand-logo {
    display: flex;
    align-items: center;
    min-height: var(--header-h);
    padding-left: var(--header-pad-x);
  }
  .header .logo img,
  .header .brand img,
  .header .brand-logo img {
    height: var(--logo-h);
    width: auto;
  }

  /* Hambúrguer alinhado ao meio da barra */
  .menu-toggle {
    position: absolute;
    right: var(--header-pad-x);
    top: calc(var(--header-h) / 2);
    transform: translateY(-50%);
    z-index: 10001;
  }

  /* Dropdown começa logo abaixo da barra */
  .nav-list {
    top: calc(var(--header-h) + 10px);
  }
}


/* ==========================================
   PATCH – CORRIGE TAMANHO E SIMETRIA DO "X"
   ========================================== */
.menu-toggle {
  position: relative;
  width: 28px;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-toggle span {
  position: absolute;
  width: 24px;
  height: 2.4px;
  background: #2b41ff; /* cor do traço */
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center center; /* garante rotação simétrica */
}

/* espaçamento padrão entre as linhas */
.menu-toggle span:nth-child(1) {
  top: 7px;
}
.menu-toggle span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.menu-toggle span:nth-child(3) {
  bottom: 7px;
}

/* estado ativo ("X" aberto) */
.menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 10px;
}

/* ================================
   MOBILE NAV: alinhamento & ícone
   ================================ */
@media (max-width: 768px) {
  /* Garante uma barra com altura estável e conteúdo centralizado */
  .header {
    height: 64px;              /* mantenha o mesmo valor que estava bom pra você */
  }
  .header .container,
  .header .header-inner,
  .header .nav-bar,
  .header .nav {               /* escolha o wrapper certo que você usa para o topo */
    display: flex;
    align-items: center;       /* ALINHA logo e hamburguer na MESMA ALTURA */
    justify-content: space-between;
    height: 100%;
    padding: 0 16px;           /* ajuste fino lateral, se necessário */
  }

  /* Logo com altura controlada (sem amassar) */
  .header .brand img,
  .header .logo img,
  .brand img {
    max-height: 28px;          /* ajuste se o seu logo pedir 26–30px */
    height: 28px;
    width: auto;
    display: block;
  }

  /* Tira posicionamento absoluto que estava “jogando” o ícone pra cima/baixo */
  .menu-toggle {
    position: static !important;    /* entra no fluxo do flex */
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    cursor: pointer;
    line-height: 0;
    z-index: 4;                      /* acima do conteúdo do header */
  }

  /* Ícone hamburguer – simétrico e nítido */
  .menu-toggle span {
    position: absolute;
    width: 22px;                     /* mesmo comprimento nas duas hastes do X */
    height: 2.2px;                   /* espessura igual */
    background: #2b41ff;
    border-radius: 2px;
    transform-origin: center center; /* evita “um lado maior que o outro” */
    transition: transform .28s ease, opacity .2s ease, top .28s ease, bottom .28s ease;
  }
  .menu-toggle span:nth-child(1) { top: 6px; }
  .menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
  .menu-toggle span:nth-child(3) { bottom: 6px; }

  /* Estado aberto → “X” perfeitamente centrado e proporcional */
  .menu-toggle.open span:nth-child(1) {
    top: 10px;
    transform: rotate(45deg);
  }
  .menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.open span:nth-child(3) {
    bottom: 10px;
    transform: rotate(-45deg);
  }
}

/* =========================================
   MOBILE – Alinhamento logo × menu hambúrguer
   ========================================= */
@media (max-width: 768px) {
  /* Alturas base para a barra e o logo (ajuste fino se quiser) */
  :root{
    --nav-h: 64px;     /* altura da barra */
    --logo-h: 28px;    /* altura visual do logo */
  }

  /* A barra precisa centralizar tudo na vertical */
  .header{
    height: var(--nav-h);
  }
  /* Use o wrapper real do seu topo: container / header-inner / nav-row */
  .header .container,
  .header .header-inner,
  .header .nav,
  .header .nav-row{
    display:flex;
    align-items:center;          /* centraliza logo e botão na MESMA linha */
    justify-content:space-between;
    height:100%;
    padding:0 16px;              /* laterais consistentes */
  }

  /* Logo sem “amassar” e sem padding extra */
  .header .brand,
  .brand{ display:flex; align-items:center; }
  .header .brand img,
  .brand img{
    height: var(--logo-h);
    max-height: var(--logo-h);
    width:auto;
    display:block;
  }

  /* Botão hambúrguer entra no fluxo (nada de absolute) e herda a altura da barra */
  .menu-toggle{
    position: static !important;     /* impede deslocamentos */
    display:inline-flex;
    align-items:center;               /* centra verticalmente dentro da barra */
    justify-content:center;
    width:34px;
    height: var(--nav-h);             /* faz o botão ter a mesma altura do header */
    margin-left:auto;
    cursor:pointer;
    line-height:0;
    /* micro-ajuste óptico: sobe 1px se estiver “um tiquinho” abaixo do logo */
    transform: translateY(-1px);
  }

  /* Ícone – três barras simétricas e centradas */
  .menu-toggle span{
    position:relative;
    display:block;
    width:22px;
    height:2.2px;
    background:#2b41ff;
    border-radius:2px;
    transform-origin:center;
    transition:transform .28s ease, opacity .2s ease;
  }
  .menu-toggle span + span{ margin-top:5px; }  /* espaçamento igual entre as barras */

  /* Estado aberto → “X” perfeito */
  .menu-toggle.open span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
  }
  .menu-toggle.open span:nth-child(2){
    opacity:0;
  }
  .menu-toggle.open span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* =========================
   MOBILE – NAV & HAMBURGER
   ========================= */
@media (max-width: 768px) {

  /* Altura/padding padrão da barra no mobile (ajuste fino se precisar) */
  .header {
    --header-mobile-h: 64px;        /* altura útil da barra */
    height: var(--header-mobile-h);
  }

  /* O wrapper do logo + ícone (caso exista) continua com a altura exata */
  .header .container,
  .header .nav,
  .header .brand {
    height: var(--header-mobile-h);
  }

  /* ----- Ícone hamburguer: caixa clicável e alinhamento ----- */
  .menu-toggle {
    /* centraliza verticalmente em relação à barra */
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);

    /* área de toque confortável */
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    /* evita qualquer corte do X no topo */
    overflow: visible;
    z-index: 1100;
  }

  /* Desenha as 3 linhas idênticas */
  .menu-toggle span,
  .menu-toggle .bar,
  .menu-toggle .line { /* cobre variações de markup */
    position: relative;
    width: 22px;              /* COMPRIMENTO ÚNICO – evita lados diferentes */
    height: 2.5px;            /* mesma espessura nas 3 linhas */
    background: #3a5bff;      /* cor do ícone */
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease;
    display: block;
  }

  /* Se você usa um único <span> com ::before/::after */
  .menu-toggle span::before,
  .menu-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;              /* mesmo comprimento do traço principal */
    height: 2.5px;
    background: currentColor;
    border-radius: 2px;
    transition: inherit;
  }
  .menu-toggle span::before { top: -7px; }
  .menu-toggle span::after  { bottom: -7px; }

  /* Se a marcação já tiver 3 elementos (.bar/.line), garanta o espaçamento: */
  .menu-toggle .bar + .bar,
  .menu-toggle .line + .line {
    margin-top: 7px;
  }

  /* ----- Estado ABERTO: vira “X” simétrico, sem cortes ----- */
  .menu-toggle.open span {
    background: transparent;             /* barra do meio some */
  }
  .menu-toggle.open span::before {
    top: 0;
    transform: rotate(45deg);
  }
  .menu-toggle.open span::after {
    bottom: 0;
    transform: rotate(-45deg);
  }

  /* Caso use 3 elementos em vez de pseudo-elementos, esta alternativa
     mantém as mesmas proporções do “X”: */
  .menu-toggle.open .bar:nth-child(1),
  .menu-toggle.open .line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .menu-toggle.open .bar:nth-child(2),
  .menu-toggle.open .line:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.open .bar:nth-child(3),
  .menu-toggle.open .line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* ----- Dropdown/folha flutuante encostada na navbar ----- */
  /* Use as classes que o seu dropdown usa quando está ativo.
     Abaixo cubro dois cenários comuns (.nav-flyout e .nav-list.active). */
  .nav-flyout,
  .nav-list.active {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-mobile-h) !important;   /* sem folga */
    margin-top: 0 !important;
    z-index: 1000;                             /* abaixo do botão (1100) */
  }

  /* Para evitar qualquer deslocamento visual no topo do “card” do menu */
  .nav-flyout,
  .nav-list.active {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
/* === PATCH FINAL – Hambúrguer simétrico + X perfeito (mobile) =================== */
@media (max-width: 768px) {

  .menu-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
  }

  /* Traços base */
  .menu-toggle::before,
  .menu-toggle::after,
  .menu-toggle span {
    content: "";
    position: absolute;
    left: 9px;
    width: 22px;
    height: 2.5px;
    background: #2a46ff;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease, bottom 0.25s ease;
  }

  /* estado fechado – espaçamento uniforme */
  .menu-toggle::before { top: 13px; }   /* linha superior */
  .menu-toggle span      { top: 19px; } /* linha do meio */
  .menu-toggle::after  { top: 25px; }   /* linha inferior */

  /* estado aberto – vira o “X” */
  .menu-toggle.open span {
    opacity: 0;
  }
  .menu-toggle.open::before {
    top: 19px;
    transform: rotate(45deg);
  }
  .menu-toggle.open::after {
    top: 19px;
    transform: rotate(-45deg);
  }
}


/* === PATCH: Hambúrguer simples (3 linhas) + alinhado ao logo (mobile) === */
@media (max-width: 768px) {

  /* Botão do menu: centralizado verticalmente na navbar */
  .header .menu-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 56px;                /* mesma altura da navbar */
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    z-index: 1100;
  }

  /* As 3 barras (superior, meio, inferior) — reset total do que havia antes */
  .header .menu-toggle::before,
  .header .menu-toggle::after,
  .header .menu-toggle span {
    content: "";
    position: absolute;
    left: 5px !important;
    width: 22px !important;
    height: 2px !important;
    background: #2a46ff !important;
    border-radius: 2px;
    opacity: 1 !important;
    transform: none !important;
    transition: transform .22s ease, opacity .2s ease, top .22s ease;
  }

  /* espaçamento uniforme em relação ao centro da área do botão */
  .header .menu-toggle span         { top: 50% !important; transform: translateY(-50%) !important; }
  .header .menu-toggle::before      { top: calc(50% - 7px) !important; }
  .header .menu-toggle::after       { top: calc(50% + 7px) !important; }

  /* estado aberto: vira “X” preservando proporções */
  .header .menu-toggle.open span    { opacity: 0 !important; }
  .header .menu-toggle.open::before { top: 50% !important; transform: translateY(-50%) rotate(45deg) !important; }
  .header .menu-toggle.open::after  { top: 50% !important; transform: translateY(-50%) rotate(-45deg) !important; }
}

/* ===========================
   PATCH — ÍCONE HAMBÚRGUER
   (3 barras iguais + X simétrico)
   =========================== */

/* caixa do botão, centralizada e clicável */
.menu-toggle{
  width: 44px;                 /* não muda a altura da navbar */
  height: 44px;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}

/* barra central */
.menu-toggle .bar{
  position: relative;
  width: 22px;                 /* COMPRIMENTO DAS 3 BARRAS */
  height: 2px;                 /* ESPESSURA IGUAL PARA TODAS */
  background: #1737ff;         /* azul do layout */
  border-radius: 2px;
  transition: opacity .18s ease, transform .24s ease;
  transform: translateZ(0);    /* evita serrilhado em alguns browsers */
}

/* barras superior e inferior */
.menu-toggle .bar::before,
.menu-toggle .bar::after{
  content: "";
  position: absolute;
  left: 0;
  width: 22px;                 /* mesmo comprimento da barra central */
  height: 2px;                 /* mesma espessura */
  background: #1737ff;
  border-radius: 2px;
  transform-origin: center;
  transition: transform .24s ease;
}

/* distância vertical entre as barras (total 12px) */
.menu-toggle .bar::before{ transform: translateY(-6px); }
.menu-toggle .bar::after { transform: translateY( 6px); }

/* estado “aberto”: X perfeitamente simétrico */
.menu-toggle.open .bar{ opacity: 0; }                /* some a barra do meio */
.menu-toggle.open .bar::before{ transform: rotate(45deg); }
.menu-toggle.open .bar::after { transform: rotate(-45deg); }

/* garante alinhamento vertical com o logo na navbar em telas pequenas */
@media (max-width: 768px){
  .header-inner{ align-items: center; }
  .menu-toggle{ margin-right: 2px; } /* só um ajuste fino */
}


/* ===========================
   PATCH — ÍCONE HAMBÚRGUER
   (3 barras iguais + X simétrico)
   =========================== */

/* caixa do botão, centralizada e clicável */
.menu-toggle{
  width: 44px;                 /* não muda a altura da navbar */
  height: 44px;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}

/* barra central */
.menu-toggle .bar{
  position: relative;
  width: 22px;                 /* COMPRIMENTO DAS 3 BARRAS */
  height: 2px;                 /* ESPESSURA IGUAL PARA TODAS */
  background: #1737ff;         /* azul do layout */
  border-radius: 2px;
  transition: opacity .18s ease, transform .24s ease;
  transform: translateZ(0);    /* evita serrilhado em alguns browsers */
}

/* barras superior e inferior */
.menu-toggle .bar::before,
.menu-toggle .bar::after{
  content: "";
  position: absolute;
  left: 0;
  width: 22px;                 /* mesmo comprimento da barra central */
  height: 2px;                 /* mesma espessura */
  background: #1737ff;
  border-radius: 2px;
  transform-origin: center;
  transition: transform .24s ease;
}

/* distância vertical entre as barras (total 12px) */
.menu-toggle .bar::before{ transform: translateY(-6px); }
.menu-toggle .bar::after { transform: translateY( 6px); }

/* estado “aberto”: X perfeitamente simétrico */
.menu-toggle.open .bar{ opacity: 0; }                /* some a barra do meio */
.menu-toggle.open .bar::before{ transform: rotate(45deg); }
.menu-toggle.open .bar::after { transform: rotate(-45deg); }

/* garante alinhamento vertical com o logo na navbar em telas pequenas */
@media (max-width: 768px){
  .header-inner{ align-items: center; }
  .menu-toggle{ margin-right: 2px; } /* só um ajuste fino */
}

/* ========== HAMBURGUER FIX ==========
   Normaliza o botão, evita barras duplicadas e
   garante alinhamento com o logo na navbar (mobile)
   ---------------------------------------------- */

/* tamanho/posição do botão */
.header .menu-toggle{
  position: absolute;
  right: 16px;                /* encosta na mesma régua do logo */
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  -webkit-tap-highlight-color: transparent;
}

/* zera qualquer estilização antiga de spans internos */
.header .menu-toggle span{
  all: unset;
  display: block;
}

/* usa APENAS o primeiro span como “core” do ícone */
.header .menu-toggle span:not(:first-child){
  display: none !important;
}

/* desenha as 3 barras com 1 span + pseudo-elements */
.header .menu-toggle span:first-child,
.header .menu-toggle span:first-child::before,
.header .menu-toggle span:first-child::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 24px;                /* largura das barras */
  height: 2.5px;              /* espessura das barras */
  background: #3157ff;        /* cor das barras */
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, background .2s ease;
}

/* barra do meio */
.header .menu-toggle span:first-child{
  transform: translateY(0);
}

/* barra superior e inferior */
.header .menu-toggle span:first-child::before{
  transform: translateY(-8px);
}
.header .menu-toggle span:first-child::after{
  transform: translateY(8px);
}

/* estado ABERTO (vira “X”) */
.header .menu-toggle.open span:first-child{
  background: transparent;                 /* some a barra do meio */
}
.header .menu-toggle.open span:first-child::before{
  transform: translateY(0) rotate(45deg);
}
.header .menu-toggle.open span:first-child::after{
  transform: translateY(0) rotate(-45deg);
}

/* garante a mesma altura da navbar de antes (se necessário ajustar) */
@media (max-width: 768px){
  .header{
    height: 56px;                          /* ajuste fino da tua barra */
  }
  .header .logo img{
    max-height: 24px;                       /* evita “amassar” o logo */
  }
}

/* ============ HAMBURGUER: RESET + REBUILD (mobile) ============ */
/* alinhamento do botão na navbar mobile (mesma régua do logo) */
@media (max-width: 768px){
  .header .menu-toggle{
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #3157ff;                 /* cor das barras */
    -webkit-tap-highlight-color: transparent;
  }

  /* ⚠️ esconde QUALQUER filho que o HTML tenha (spans, i, svg..) 
     para evitar barras duplicadas vindas de estilos antigos */
  .header .menu-toggle > *{
    visibility: hidden !important;
    display: none !important;
  }

  /* desenha o hambúrguer com APENAS 2 pseudo-elements */
  .header .menu-toggle::before,
  .header .menu-toggle::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    margin: 0 auto;
    width: 24px;                    /* largura das barras */
    height: 2.5px;                  /* espessura das barras */
    background: currentColor;       /* barra do meio */
    border-radius: 2px;
    transition: transform .22s ease, box-shadow .18s ease, opacity .18s ease;
  }

  /* barra do meio + as outras duas via box-shadow (3 linhas no total) */
  .header .menu-toggle::before{
    top: 50%;
    transform: translateY(-50%);
    /* as “outras” barras: uma 6px acima e outra 6px abaixo */
    box-shadow: 0 -6px 0 0 currentColor, 0 6px 0 0 currentColor;
  }

  /* elemento de apoio para formar o “X” na animação */
  .header .menu-toggle::after{
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;                     /* fica invisível no estado fechado */
  }

  /* ========== estado ABERTO (vira X) ========== */
  .header .menu-toggle.open::before{
    /* tira as barras de cima/baixo e rotaciona para a primeira perna do X */
    box-shadow: none;
    transform: translateY(-50%) rotate(45deg);
  }
  .header .menu-toggle.open::after{
    opacity: 1;
    transform: translateY(-50%) rotate(-45deg); /* segunda perna do X */
  }
}

/* ============================================================
   MOBILE – HAMBÚRGUER LIMPO (3 linhas) + REMOVER LINHA CINZA
   ============================================================ */
@media (max-width: 768px){

  /* zera qualquer conteúdo antigo do botão (evita linha extra) */
  .header .menu-toggle > span,
  .header .menu-toggle > i,
  .header .menu-toggle > svg {
    display: none !important;
    visibility: hidden !important;
  }

  /* botão alinhado na mesma altura do logo */
  .header .menu-toggle{
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #3157ff;                /* cor das barras */
    -webkit-tap-highlight-color: transparent;
  }

  /* desenha APENAS 3 linhas:
     - barra do meio em ::before
     - barras de cima/baixo via box-shadow */
  .header .menu-toggle::before,
  .header .menu-toggle::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    margin: 0 auto;
    width: 24px;
    height: 2.5px;
    border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease, box-shadow .18s ease, background .18s ease;
  }

  /* estado FECHADO */
  .header .menu-toggle::before{
    background: currentColor;               /* barra do meio */
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 -6px 0 0 currentColor,    /* barra de cima */
                0  6px 0 0 currentColor;    /* barra de baixo */
  }
  /* ::after fica completamente invisível (não soma linha) */
  .header .menu-toggle::after{
    background: transparent;
    top: 50%;
    transform: translateY(-50%) scaleX(0);  /* some de vez */
    opacity: 0;
    box-shadow: none;
  }

  /* estado ABERTO (vira X perfeito e simétrico) */
  .header .menu-toggle.open::before{
    box-shadow: none;                        /* remove cima/baixo */
    transform: translateY(-50%) rotate(45deg);
  }
  .header .menu-toggle.open::after{
    background: currentColor;               /* aparece só no X */
    opacity: 1;
    transform: translateY(-50%) rotate(-45deg);
  }

  /* ===== remove a “barrinha cinza” entre navbar e header ===== */
  .header{
    box-shadow: none !important;
    border-bottom: 0 !important;
  }
  .header::after{                           /* se houver algum pseudo com sombra/linha */
    display: none !important;
  }
  /* garante que a próxima seção/hero não crie gap por margem */
  .header + .hero,
  .header + section,
  .header + .hero-wrapper{
    margin-top: 0 !important;
    border-top: 0 !important;
  }
}

/* ===============================
   HAMBÚRGUER — FORÇA 3 LINHAS
   =============================== */
@media (max-width: 768px) {

  /* 1) Não deixa pseudo-elemento virar “4ª barra” */
  .header .menu-toggle::before,
  .header .menu-toggle::after {
    content: none !important;
    display: none !important;
  }

  /* 2) Só os 3 primeiros filhos contam (span, i, b… o que for) */
  .header .menu-toggle > :not(:nth-child(-n+3)) {
    display: none !important;
  }

  /* 3) Botão alinhado com o logo */
  .header .menu-toggle{
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
  }

  /* 4) Normaliza as barras (usando os 3 primeiros filhos) */
  .header .menu-toggle > :nth-child(-n+3) {
    position: absolute;
    left: 0; right: 0;
    margin: 0 auto;
    width: 24px;
    height: 2.5px;
    border-radius: 2px;
    background: #3157ff;                /* cor das barras */
    transition: transform .22s ease, opacity .18s ease, width .18s ease;
  }

  /* top / middle / bottom */
  .header .menu-toggle > :nth-child(1) { top: 2px; }
  .header .menu-toggle > :nth-child(2) { top: 50%; transform: translateY(-50%); }
  .header .menu-toggle > :nth-child(3) { bottom: 2px; }

  /* 5) Estado ABERTO (X) */
  .header .menu-toggle.open > :nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  .header .menu-toggle.open > :nth-child(2) {
    opacity: 0;
    width: 0;
  }
  .header .menu-toggle.open > :nth-child(3) {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
}

/* ===============================
   HAMBÚRGUER À PROVA DE TUDO
   (3 linhas via background; "X" com ::before/::after)
   =============================== */
@media (max-width: 768px) {
  .header .menu-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 22px;
    padding: 0;
    border: 0;
    background:
      /* top */
      linear-gradient(#3157ff, #3157ff) left 2px top 3px / 24px 2px no-repeat,
      /* middle */
      linear-gradient(#3157ff, #3157ff) left 2px center / 24px 2px no-repeat,
      /* bottom */
      linear-gradient(#3157ff, #3157ff) left 2px bottom 3px / 24px 2px no-repeat;
    -webkit-tap-highlight-color: transparent;
    z-index: 1100; /* acima do hero */
  }

  /* Garante que qualquer filho/pseudo antigo não interfira */
  .header .menu-toggle > * { display: none !important; }
  .header .menu-toggle::before,
  .header .menu-toggle::after { content: none; }

  /* Estado ABERTO: vira "X" */
  .header .menu-toggle.open {
    background: none; /* some com as 3 barras pintadas */
  }
  .header .menu-toggle.open::before,
  .header .menu-toggle.open::after {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    height: 2px;
    background: #3157ff;
    top: 50%;
    transform-origin: center;
  }
  .header .menu-toggle.open::before {
    transform: translateY(-50%) rotate(45deg);
  }
  .header .menu-toggle.open::after {
    transform: translateY(-50%) rotate(-45deg);
  }
}

/* =========================
   MOBILE – hamburger fix/align + X
   ========================= */
@media (max-width: 768px) {
  /* altura “oficial” da barra no mobile */
  .header,
  .header .nav,
  .header .nav-bar,
  .header .nav-container { height: 56px; }

  /* botão alinhado com a logo (direita) */
  .menu-toggle{
    position: absolute;
    top: 0;
    right: 16px;               /* ajuste fino se precisar */
    width: 44px;
    height: 56px;              /* mesma altura da navbar */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;             /* acima do conteúdo */
    -webkit-tap-highlight-color: transparent;
  }

  /* — 3 LINHAS EXATAS — 
     Usamos 1 elemento + 2 pseudo-elementos.
     Isso remove “linhas extras” que alguns resets criavam. */
  .menu-toggle .bar{
    position: relative;
    width: 22px;               /* comprimento das linhas */
    height: 2px;
    background: #3148FF;       /* azul do tema */
    border-radius: 2px;
    transition: background .2s ease;
  }
  .menu-toggle .bar::before,
  .menu-toggle .bar::after{
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #3148FF;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .menu-toggle .bar::before{ transform: translateY(-6px); }
  .menu-toggle .bar::after { transform: translateY( 6px); }

  /* ESTADO ABERTO: vira “X” */
  .menu-toggle.open .bar{
    background: transparent;           /* esconde a linha do meio */
  }
  .menu-toggle.open .bar::before{
    transform: rotate(45deg);          /* braço 1 do X */
  }
  .menu-toggle.open .bar::after{
    transform: rotate(-45deg);         /* braço 2 do X */
  }

  /* menu flutuante encostado na barra (sem folga) – ajuste de segurança */
  .nav-list{
    top: 56px;                         /* começa logo abaixo da navbar */
  }
}

/* ===========================
   MOBILE NAV — altura, alinhamento, hamburger e "X"
   =========================== */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }  /* ↑ aumente aqui se quiser mais alto */

  /* Garante a mesma altura em todos os wrappers da barra */
  .header,
  .header .nav,
  .header .nav-bar,
  .header .nav-container {
    height: var(--nav-h) !important;
    min-height: var(--nav-h) !important;
  }

  /* A barra precisa ser referência pro posicionamento absoluto */
  .header .nav-bar { position: relative !important; }

  /* Alinhamento vertical do botão com a logo (centro da navbar) */
  .menu-toggle{
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;          /* ajuste fino horizontal */
    transform: translateY(-50%) !important;
    width: 44px;                      /* área clicável confortável */
    height: 44px;
    display: flex; align-items: center; justify-content: center;
    z-index: 1002;
    -webkit-tap-highlight-color: transparent;
  }

  /* HAMBURGER: força exatamente 3 linhas (1 real + 2 pseudos) */
  .menu-toggle .bar{
    position: relative;
    width: 22px !important;
    height: 2px !important;
    background: #2E46FF !important;
    border-radius: 2px;
    transition: background .2s ease;
  }
  .menu-toggle .bar::before,
  .menu-toggle .bar::after{
    content: "";
    position: absolute;
    left: 0;
    width: 22px !important;
    height: 2px !important;
    background: #2E46FF !important;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .menu-toggle .bar::before{ top: -6px; }
  .menu-toggle .bar::after { top:  6px; }

  /* ESTADO ABERTO → vira "X" visível */
  .menu-toggle.open .bar{
    background: transparent !important;           /* some a linha do meio */
  }
  .menu-toggle.open .bar::before{
    top: 0; transform: rotate(45deg) !important;  /* braço 1 do X */
  }
  .menu-toggle.open .bar::after{
    top: 0; transform: rotate(-45deg) !important; /* braço 2 do X */
  }

  /* Menu flutuante encostado na barra (sem folga cinza) */
  .nav-list{
    top: var(--nav-h) !important;
  }
}

/* ===========================
   FIX FINAL — ÍCONE HAMBURGUER + "X"
   =========================== */
@media (max-width: 768px) {
  .menu-toggle {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1002;
  }

  /* Cria as 3 barras */
  .menu-toggle .bar,
  .menu-toggle .bar::before,
  .menu-toggle .bar::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: #2E46FF;
    border-radius: 1px;
    transition: all 0.3s ease;
  }

  .menu-toggle .bar::before {
    transform: translateY(-6px);
  }

  .menu-toggle .bar::after {
    transform: translateY(6px);
  }

  /* Animação ao abrir — vira X */
  .menu-toggle.open .bar {
    background-color: transparent;
  }

  .menu-toggle.open .bar::before {
    transform: rotate(45deg);
  }

  .menu-toggle.open .bar::after {
    transform: rotate(-45deg);
  }

  /* Ajuste de altura da navbar */
  .header,
  .header .nav,
  .header .nav-bar {
    height: 64px !important;
    min-height: 64px !important;
  }

  /* Remove qualquer sombra ou borda residual */
  .header {
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* Garante que o menu flutuante encoste na barra */
  .nav-list {
    top: 64px !important;
  }
}

/* ========= FIX HAMBURGUER + X + ALINHAMENTO (MOBILE) ========= */
@media (max-width: 768px) {

  /* Altura consistente da navbar */
  .header,
  .header .nav,
  .header .nav-bar {
    height: 64px !important;
    min-height: 64px !important;
    line-height: 64px !important;
  }

  /* Alinha ícone com a logo (centro vertical da navbar) */
  .menu-toggle {
    position: absolute;
    top: 0;
    right: 16px;
    height: 64px !important;
    width: 44px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 1003;
  }

  /* GARANTE que só exista 1 “bar” visível mesmo se houver barras antigas duplicadas */
  .menu-toggle .bar ~ .bar { display: none !important; }

  /* 3 linhas (a central é o .bar; as de cima/baixo são ::before/::after) */
  .menu-toggle .bar,
  .menu-toggle .bar::before,
  .menu-toggle .bar::after {
    content: "" !important;
    position: absolute !important;
    left: 0;
    width: 24px !important;
    height: 2px !important;
    background: #2E46FF !important;
    border-radius: 1px;
    transition: transform .25s ease, top .25s ease, background-color .2s ease;
  }

  .menu-toggle .bar { transform: none !important; }
  .menu-toggle .bar::before { top: -6px !important; }
  .menu-toggle .bar::after  { top:  6px !important; }

  /* Estado ABERTO: vira “X” (a barra central some; as outras cruzam) */
  .menu-toggle.open .bar {
    background: transparent !important;
  }
  .menu-toggle.open .bar::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
  }
  .menu-toggle.open .bar::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
  }

  /* Painel flutuante encostado na navbar */
  .nav-list { top: 64px !important; }
}

/* ========= FIX HAMBURGUER + X + ALINHAMENTO (MOBILE) ========= */
@media (max-width: 768px) {

  /* Altura consistente da navbar */
  .header,
  .header .nav,
  .header .nav-bar {
    height: 64px !important;
    min-height: 64px !important;
    line-height: 64px !important;
  }

  /* Alinha ícone com a logo (centro vertical da navbar) */
  .menu-toggle {
    position: absolute;
    top: 0;
    right: 16px;
    height: 64px !important;
    width: 44px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 1003;
  }

  /* GARANTE que só exista 1 “bar” visível mesmo se houver barras antigas duplicadas */
  .menu-toggle .bar ~ .bar { display: none !important; }

  /* 3 linhas (a central é o .bar; as de cima/baixo são ::before/::after) */
  .menu-toggle .bar,
  .menu-toggle .bar::before,
  .menu-toggle .bar::after {
    content: "" !important;
    position: absolute !important;
    left: 0;
    width: 24px !important;
    height: 2px !important;
    background: #2E46FF !important;
    border-radius: 1px;
    transition: transform .25s ease, top .25s ease, background-color .2s ease;
  }

  .menu-toggle .bar { transform: none !important; }
  .menu-toggle .bar::before { top: -6px !important; }
  .menu-toggle .bar::after  { top:  6px !important; }

  /* Estado ABERTO: vira “X” (a barra central some; as outras cruzam) */
  .menu-toggle.open .bar {
    background: transparent !important;
  }
  .menu-toggle.open .bar::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
  }
  .menu-toggle.open .bar::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
  }

  /* Painel flutuante encostado na navbar */
  .nav-list { top: 64px !important; }
}


/* ====== Ajuste fino: reduzir espaçamento entre as 3 linhas do hambúrguer ====== */
@media (max-width: 768px) {
  /* garante altura/alinhamento como antes */
  .header, .header .nav, .header .nav-bar {
    height: 64px !important;
    min-height: 64px !important;
    line-height: 64px !important;
  }
  .menu-toggle {
    position: absolute;
    top: 0;
    right: 16px;
    width: 44px;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent;
    border: 0;
    z-index: 1003;
  }

  /* mantém só UMA barra base ativa */
  .menu-toggle .bar ~ .bar { display: none !important; }

  .menu-toggle .bar,
  .menu-toggle .bar::before,
  .menu-toggle .bar::after {
    content: "" !important;
    position: absolute !important;
    left: 0;
    width: 22px !important;      /* um pouco menor para ficar mais elegante */
    height: 2px !important;
    background: #2E46FF !important;
    border-radius: 1px;
    transform-origin: center;
    transition: transform .2s ease, top .2s ease, background-color .2s ease;
  }

  /* >>> Espaçamento mais curto entre as linhas (antes ±6px) */
  .menu-toggle .bar::before { top: -4px !important; }
  .menu-toggle .bar::after  { top:  4px !important; }

  /* estado aberto (X visível) */
  .menu-toggle.open .bar { background: transparent !important; }
  .menu-toggle.open .bar::before { top: 0 !important; transform: rotate(45deg) !important; }
  .menu-toggle.open .bar::after  { top: 0 !important; transform: rotate(-45deg) !important; }
}


/* ====== Ajuste fino: reduzir espaçamento entre as 3 linhas do hambúrguer ====== */
@media (max-width: 768px) {
  /* garante altura/alinhamento como antes */
  .header, .header .nav, .header .nav-bar {
    height: 64px !important;
    min-height: 64px !important;
    line-height: 64px !important;
  }
  .menu-toggle {
    position: absolute;
    top: 0;
    right: 16px;
    width: 44px;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent;
    border: 0;
    z-index: 1003;
  }

  /* mantém só UMA barra base ativa */
  .menu-toggle .bar ~ .bar { display: none !important; }

  .menu-toggle .bar,
  .menu-toggle .bar::before,
  .menu-toggle .bar::after {
    content: "" !important;
    position: absolute !important;
    left: 0;
    width: 22px !important;      /* um pouco menor para ficar mais elegante */
    height: 2px !important;
    background: #2E46FF !important;
    border-radius: 1px;
    transform-origin: center;
    transition: transform .2s ease, top .2s ease, background-color .2s ease;
  }

  /* >>> Espaçamento mais curto entre as linhas (antes ±6px) */
  .menu-toggle .bar::before { top: -4px !important; }
  .menu-toggle .bar::after  { top:  4px !important; }

  /* estado aberto (X visível) */
  .menu-toggle.open .bar { background: transparent !important; }
  .menu-toggle.open .bar::before { top: 0 !important; transform: rotate(45deg) !important; }
  .menu-toggle.open .bar::after  { top: 0 !important; transform: rotate(-45deg) !important; }
}


/* ===== FIX FINAL DO ÍCONE HAMBURGUER ===== */
@media (max-width: 768px) {
  .menu-toggle {
    position: absolute;
    top: 0;
    right: 16px;
    height: 64px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 1003;
  }

  /* Desativa barras duplicadas */
  .menu-toggle .bar ~ .bar { display: none !important; }

  /* Define as 3 linhas compactas e centralizadas */
  .menu-toggle .bar,
  .menu-toggle .bar::before,
  .menu-toggle .bar::after {
    content: "" !important;
    position: absolute !important;
    left: 0;
    width: 22px !important;
    height: 2px !important;
    background: #2E46FF !important;
    border-radius: 1px;
    transition: transform .25s ease, top .25s ease;
  }

  /* Espaçamento ajustado (3px entre linhas) */
  .menu-toggle .bar::before { top: -3px !important; }
  .menu-toggle .bar::after  { top:  3px !important; }

  /* Estado aberto — vira X perfeitamente visível */
  .menu-toggle.open .bar { background: transparent !important; }
  .menu-toggle.open .bar::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
  }
  .menu-toggle.open .bar::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
  }

  /* Navbar alta e alinhada à logo */
  .header,
  .header .nav,
  .header .nav-bar {
    height: 64px !important;
    min-height: 64px !important;
    line-height: 64px !important;
  }

  /* Remove borda inferior residual */
  .header { border-bottom: none !important; box-shadow: none !important; }
}


/* ===== FIX FINAL DO ÍCONE HAMBURGUER ===== */
@media (max-width: 768px) {
  .menu-toggle {
    position: absolute;
    top: 0;
    right: 16px;
    height: 64px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 1003;
  }

  /* Desativa barras duplicadas */
  .menu-toggle .bar ~ .bar { display: none !important; }

  /* Define as 3 linhas compactas e centralizadas */
  .menu-toggle .bar,
  .menu-toggle .bar::before,
  .menu-toggle .bar::after {
    content: "" !important;
    position: absolute !important;
    left: 0;
    width: 22px !important;
    height: 2px !important;
    background: #2E46FF !important;
    border-radius: 1px;
    transition: transform .25s ease, top .25s ease;
  }

  /* Espaçamento ajustado (3px entre linhas) */
  .menu-toggle .bar::before { top: -3px !important; }
  .menu-toggle .bar::after  { top:  3px !important; }

  /* Estado aberto — vira X perfeitamente visível */
  .menu-toggle.open .bar { background: transparent !important; }
  .menu-toggle.open .bar::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
  }
  .menu-toggle.open .bar::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
  }

  /* Navbar alta e alinhada à logo */
  .header,
  .header .nav,
  .header .nav-bar {
    height: 64px !important;
    min-height: 64px !important;
    line-height: 64px !important;
  }

  /* Remove borda inferior residual */
  .header { border-bottom: none !important; box-shadow: none !important; }
}



/* =========================
   MOBILE — HAMBÚRGUER FIX
   ========================= */
@media (max-width: 768px) {

  /* garante alinhamento vertical do conteúdo da barra */
  .header,
  .header .header-inner,
  .header .nav {
    display: flex;
    align-items: center;
  }

  /* botão do hambúrguer */
  .menu-toggle{
    position: relative;
    width: 28px;            /* largura do ícone */
    height: 22px;           /* altura total (define o espaçamento entre linhas) */
    display: inline-block;
    line-height: 0;         /* evita “pulos” verticais */
    z-index: 1001;          /* fica acima do overlay do menu */
  }

  /* barra central (apenas 1 span) */
  .menu-toggle span{
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 2px;
    background: #2A55FF;
    transform: translateY(-50%);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }

  /* evita “quarta linha” se houver spans extras no HTML */
  .menu-toggle span ~ span { display: none !important; }

  /* barras superior e inferior (pseudoelementos) */
  .menu-toggle::before,
  .menu-toggle::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #2A55FF;
    border-radius: 2px;
    transition: transform .25s ease, top .25s ease, bottom .25s ease, opacity .2s ease;
  }

  /* espaçamento entre linhas (sem exagero) */
  .menu-toggle::before{ top: 0; }       /* linha de cima */
  .menu-toggle::after { bottom: 0; }    /* linha de baixo */

  /* estado ABERTO (vira X) */
  .menu-toggle.open span{ opacity: 0; } /* some a barra do meio */
  .menu-toggle.open::before{
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  .menu-toggle.open::after{
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
}

/* =============================
   MOBILE – HAMBURGUER + ALINHO
   ============================= */
@media (max-width: 768px) {

  /* garante alinhamento vertical na barra */
  .header { display:flex; align-items:center; }

  /* botão: 3 linhas via background (independe do HTML interno) */
  .menu-toggle{
    position:absolute;
    right:16px;               /* ajuste fino horizontal */
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:20px;              /* controla o espaçamento entre as linhas */
    background:
      linear-gradient(#2A55FF 0 0) 0 0/100% 2px no-repeat,
      linear-gradient(#2A55FF 0 0) 0 9px/100% 2px no-repeat,
      linear-gradient(#2A55FF 0 0) 0 18px/100% 2px no-repeat;
    border:0;
    outline:0;
    z-index:1001;
  }

  /* se existirem spans ou i dentro, não deixam “quarta linha” aparecer */
  .menu-toggle > * { display:none !important; }

  /* barras do X (aparecem somente quando .open) */
  .menu-toggle::before,
  .menu-toggle::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:50%;
    height:2px;
    background:#2A55FF;
    border-radius:2px;
    transform:translateY(-50%);
    opacity:0;
    transition:transform .25s ease, opacity .2s ease;
  }

  /* estado ABERTO: some as 3 linhas e mostra o X */
  .menu-toggle.open{
    background:none; /* remove as 3 linhas */
  }
  .menu-toggle.open::before{
    opacity:1;
    transform:translateY(-50%) rotate(45deg);
  }
  .menu-toggle.open::after{
    opacity:1;
    transform:translateY(-50%) rotate(-45deg);
  }
}


/* ===== PATCH: Hamburger – 3 linhas, espaçamento fixo, X visível (mobile) ===== */
@media (max-width: 768px) {
  /* evita linhas “fantasmas” vindas de outras regras antigas */
  .menu-toggle::before,
  .menu-toggle::after {
    content: none !important;
    display: none !important;
  }

  /* container do botão alinhado verticalmente com a navbar */
  .menu-toggle{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;                 /* área de toque */
    height: var(--nav-h, 56px);  /* usa a altura atual da navbar */
    margin-right: 12px;
  }

  /* dimensões e aparência das 3 barras */
  .menu-toggle .bar,
  .menu-toggle .bar::before,
  .menu-toggle .bar::after{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    background: #2E46FF;
    border-radius: 2px;
    transition: transform .22s ease, background .22s ease, top .22s ease;
    content: "";
    display: block;
  }

  /* barra do meio bem no centro */
  .menu-toggle .bar{ top: 50%; margin-top: -1px; }

  /* espaçamento entre as linhas (gap de 5px) */
  .menu-toggle .bar::before{ top: calc(50% - 1px - 5px); }
  .menu-toggle .bar::after { top: calc(50% - 1px + 5px); }

  /* estado ABERTO: vira “X” perfeito */
  .menu-toggle.open .bar{
    background: transparent; /* some a barra do meio */
  }
  .menu-toggle.open .bar::before{
    top: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
  .menu-toggle.open .bar::after{
    top: 50%;
    transform: translateX(-50%) rotate(-45deg);
  }

  /* garante que o menu flutuante encoste na navbar, sem folga cinza */
  .nav-list{ top: var(--nav-h, 56px) !important; }
}

/* ===== PATCH: Hamburger – 3 linhas, espaçamento fixo, X visível (mobile) ===== */
@media (max-width: 768px) {
  /* evita linhas “fantasmas” vindas de outras regras antigas */
  .menu-toggle::before,
  .menu-toggle::after {
    content: none !important;
    display: none !important;
  }

  /* container do botão alinhado verticalmente com a navbar */
  .menu-toggle{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;                 /* área de toque */
    height: var(--nav-h, 56px);  /* usa a altura atual da navbar */
    margin-right: 12px;
  }

  /* dimensões e aparência das 3 barras */
  .menu-toggle .bar,
  .menu-toggle .bar::before,
  .menu-toggle .bar::after{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    background: #2E46FF;
    border-radius: 2px;
    transition: transform .22s ease, background .22s ease, top .22s ease;
    content: "";
    display: block;
  }

  /* barra do meio bem no centro */
  .menu-toggle .bar{ top: 50%; margin-top: -1px; }

  /* espaçamento entre as linhas (gap de 5px) */
  .menu-toggle .bar::before{ top: calc(50% - 1px - 5px); }
  .menu-toggle .bar::after { top: calc(50% - 1px + 5px); }

  /* estado ABERTO: vira “X” perfeito */
  .menu-toggle.open .bar{
    background: transparent; /* some a barra do meio */
  }
  .menu-toggle.open .bar::before{
    top: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
  .menu-toggle.open .bar::after{
    top: 50%;
    transform: translateX(-50%) rotate(-45deg);
  }

  /* garante que o menu flutuante encoste na navbar, sem folga cinza */
  .nav-list{ top: var(--nav-h, 56px) !important; }
}

/* === PATCH FINAL: ÍCONE HAMBURGUER 3 LINHAS + X CORRETO === */
@media (max-width: 768px) {

  /* zera qualquer coisa antiga */
  .menu-toggle,
  .menu-toggle::before,
  .menu-toggle::after,
  .menu-toggle span,
  .menu-toggle span::before,
  .menu-toggle span::after {
    all: unset;
    box-sizing: border-box;
  }

  /* botão base — alinhado com o logo */
  .menu-toggle {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 24px;
    cursor: pointer;
    z-index: 1001;
  }

  /* container interno */
  .menu-toggle .bar {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2A55FF;
    border-radius: 2px;
    transform: translateY(-50%);
    transition: transform .25s ease, opacity .25s ease;
  }

  /* cria as três linhas */
  .menu-toggle .bar::before,
  .menu-toggle .bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2A55FF;
    border-radius: 2px;
    transition: transform .25s ease, top .25s ease, bottom .25s ease;
  }

  .menu-toggle .bar::before { top: -8px; }
  .menu-toggle .bar::after  { bottom: -8px; }

  /* === estado ABERTO: vira X === */
  .menu-toggle.open .bar {
    background: transparent;
  }

  .menu-toggle.open .bar::before {
    top: 0;
    transform: rotate(45deg);
  }

  .menu-toggle.open .bar::after {
    bottom: 0;
    transform: rotate(-45deg);
  }

  /* remove qualquer espaçamento entre navbar e menu flutuante */
  .nav-list {
    top: 56px !important;
  }
}

/* === PATCH FINAL: ÍCONE HAMBURGUER 3 LINHAS + X CORRETO === */
@media (max-width: 768px) {

  /* zera qualquer coisa antiga */
  .menu-toggle,
  .menu-toggle::before,
  .menu-toggle::after,
  .menu-toggle span,
  .menu-toggle span::before,
  .menu-toggle span::after {
    all: unset;
    box-sizing: border-box;
  }

  /* botão base — alinhado com o logo */
  .menu-toggle {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 24px;
    cursor: pointer;
    z-index: 1001;
  }

  /* container interno */
  .menu-toggle .bar {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2A55FF;
    border-radius: 2px;
    transform: translateY(-50%);
    transition: transform .25s ease, opacity .25s ease;
  }

  /* cria as três linhas */
  .menu-toggle .bar::before,
  .menu-toggle .bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2A55FF;
    border-radius: 2px;
    transition: transform .25s ease, top .25s ease, bottom .25s ease;
  }

  .menu-toggle .bar::before { top: -8px; }
  .menu-toggle .bar::after  { bottom: -8px; }

  /* === estado ABERTO: vira X === */
  .menu-toggle.open .bar {
    background: transparent;
  }

  .menu-toggle.open .bar::before {
    top: 0;
    transform: rotate(45deg);
  }

  .menu-toggle.open .bar::after {
    bottom: 0;
    transform: rotate(-45deg);
  }

  /* remove qualquer espaçamento entre navbar e menu flutuante */
  .nav-list {
    top: 56px !important;
  }
}


/* ===============================
   MENU HAMBURGUER COM IMAGEM FIXA
   =============================== */
@media (max-width: 768px) {
  .menu-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  .menu-toggle .hamburger-img {
    width: 28px;
    height: auto;
    object-fit: contain;
    display: block;
  }

  /* quando o menu estiver aberto, substitui o ícone por um “X” */
  .menu-toggle.open .hamburger-img {
    content: url("images/icon-close.png"); /* crie um ícone X simples */
  }

  /* garante que a navbar mantenha altura e alinhamento com o logo */
  .header {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
  }

  .header .logo img {
    max-height: 28px;
    height: auto;
    width: auto;
  }
}



/* ==== Mobile: ícone do menu por SVG (sem depender de imagens externas) ==== */
@media (max-width: 768px) {
  /* Garante que qualquer “barrinha” antiga não interfira */
  .menu-toggle::before,
  .menu-toggle::after,
  .menu-toggle .bar { display: none !important; }

  .menu-toggle{
    position: absolute;
    right: 16px;
    top: 12px;               /* ajuste fino para alinhar com o logo */
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: transparent; border: 0; padding: 0;
    line-height: 0; cursor: pointer;
  }
  .menu-toggle svg{ display:block; width:26px; height:26px; }

  /* Mostra hambúrguer por padrão, X ao abrir */
  .menu-toggle .icon-close{ display: none; }
  .menu-toggle.open .icon-burger{ display: none; }
  .menu-toggle.open .icon-close{ display: block; }

  /* Navbar mais alta mantém alinhamento com o logo */
  .header, .navbar, .nav { min-height: 56px; }
}

/* ==== MOBILE: Hamburguer “limpa tudo” e usa SVG próprio ==== */
@media (max-width: 768px) {

  /* Mata QUALQUER desenho antigo (pseudo-elementos, spans, barras, BG, etc.) */
  #k-menu-toggle,
  #k-menu-toggle * {
    background: none !important;
    box-shadow: none !important;
  }
  #k-menu-toggle::before,
  #k-menu-toggle::after,
  #k-menu-toggle span,
  #k-menu-toggle i,
  #k-menu-toggle .bar,
  .hamburger, .hamburger::before, .hamburger::after,
  .navbar .menu-toggle::before, .navbar .menu-toggle::after {
    display: none !important;
    content: none !important;
  }

  /* Botão e alinhamento com o logo */
  #k-menu-toggle{
    position: absolute;
    right: 16px;
    top: 12px;              /* ajuste fino p/ alinhar com a logo */
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    line-height: 0;
    cursor: pointer;
    z-index: 1001;
  }
  #k-menu-toggle .k-icon{ width:26px; height:26px; display:block; }
  #k-menu-toggle .k-close{ display:none; }
  #k-menu-toggle.open .k-burger{ display:none; }
  #k-menu-toggle.open .k-close{ display:block; }

  /* Altura confortável da navbar (não mexe no desktop) */
  .header, .navbar, .nav { min-height: 56px; }
}



/* ===============================================
   PATCH FINAL — MOSTRAR ÍCONE SVG DO MENU
   =============================================== */
@media (max-width: 768px) {

  /* neutraliza QUALQUER estilização antiga */
  .menu-toggle,
  .menu-toggle::before,
  .menu-toggle::after,
  .menu-toggle span,
  .menu-toggle span::before,
  .menu-toggle span::after {
    all: unset !important;
    display: block !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* botão base */
  #k-menu-toggle {
    position: absolute !important;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000; /* garante que fica visível */
  }

  /* ícones SVG */
  #k-menu-toggle svg {
    width: 26px;
    height: 26px;
    display: block;
  }

  /* alternância entre hambúrguer e X */
  #k-menu-toggle .k-close { display: none; }
  #k-menu-toggle.open .k-burger { display: none; }
  #k-menu-toggle.open .k-close { display: block; }

  /* Garante que navbar não cobre o botão */
  .header {
    position: relative;
    z-index: 1500;
  }
}



/* ===========================
   MOBILE: HAMBURGER RESET + NOVO
   =========================== */
@media (max-width: 768px) {

  /* Garante contexto p/ posicionar o botão */
  .header,
  .navbar,
  .nav,
  .nav .container,
  .header .container { position: relative; }

  /* Mata QUALQUER hambúrguer antigo */
  .menu-toggle,
  .menu-toggle::before,
  .menu-toggle::after,
  .menu-toggle span,
  .menu-toggle span::before,
  .menu-toggle span::after {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
    background: none !important;
    border: 0 !important;
  }

  /* Botão novo visível e clicável */
  #k-menu-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000; /* acima do header e de quaisquer overlays */
    cursor: pointer;
  }

  /* Ícones */
  #k-menu-toggle svg { display: block; width: 26px; height: 26px; }
  #k-menu-toggle .k-close { display: none; }
  #k-menu-toggle.open .k-burger { display: none; }
  #k-menu-toggle.open .k-close { display: block; }

  /* Evita que algo da nav cobre o botão quando fechada */
  .nav-list:not(.active) {
    display: none !important;
    pointer-events: none;
  }

  /* (opcional) Ajuste fino da altura da barra p/ alinhar à logo */
  .header { min-height: 56px; }
}

/* Remove qualquer “barrinha” entre navbar e header no mobile */
@media (max-width: 768px) {
  .header { border: 0 !important; box-shadow: none !important; }
}

/* Desktop: esconde o botão mobile e força a nav “normal” */
@media (min-width: 769px) {
  #k-menu-toggle { display: none !important; }
  .nav-list {
    display: flex !important;      /* sua nav horizontal normal */
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  body.menu-open { overflow: auto !important; }
}

/* Ajuste fino: subir apenas o item "Panelas Polishop Ichef" */
.brand-ichef { 
  /* mobile/tablet: sem ajuste */
  margin-top: 0;
}

/* Desktop (>= 992px): sobe o bloco */
@media (min-width: 992px){
  .brand-ichef{
    margin-top: -64px;          /* ajuste principal: suba/abaixe aqui */
  }
}

/* (Opcional) telas muito grandes: sobe um pouco mais */
@media (min-width: 1400px){
  .brand-ichef{
    margin-top: -80px;
  }
}

/* Ajuste fino: posicionar Potes Tupperware */
.brand-tupperware {
  position: relative;
  margin-top: -40px;     /* sobe um pouco */
  left: -30px;           /* move levemente pra esquerda */
}

/* Se quiser só aplicar isso no desktop */
@media (min-width: 992px){
  .brand-tupperware {
    margin-top: -50px;
    left: -40px;
  }
}


/* Ajuste fino: alinhar Canecas Rede Litoral */
.brand-caneca {
  position: relative;
  left: -40px;   /* move pra esquerda */
  margin-top: -20px; /* sobe um pouquinho pra encaixar melhor */
}

/* Desktop only */
@media (min-width: 992px){
  .brand-caneca {
    left: -42px;
    margin-top: -25px;
  }
}

/* Ajuste fino: descer Panelas Tramontina */
.brand-tramontina {
  position: relative;
  margin-top: 20px; /* desce o item */
}

/* Desktop refinement */
@media (min-width: 992px){
  .brand-tramontina {
    margin-top: 30px; /* ligeiramente mais pra baixo em telas maiores */
  }
}

/* ===== FLUTUAÇÃO (versão desktop) ===== */
@media (min-width: 992px) {
  .brands .brand-item {
    position: relative;
    animation: floaty 6s ease-in-out infinite;
    transition: transform 0.15s ease-out;
  }

  /* animação de flutuação leve */
  @keyframes floaty {
    0%   { transform: translate(0px, 0px) rotate(0deg); }
    25%  { transform: translate(6px, -8px) rotate(0.5deg); }
    50%  { transform: translate(-5px, -3px) rotate(-0.5deg); }
    75%  { transform: translate(8px, 6px) rotate(0.3deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
  }

  /* variações aleatórias de delay para não flutuarem juntas */
  .brands .brand-item:nth-child(1) { animation-delay: 0s; }
  .brands .brand-item:nth-child(2) { animation-delay: 1s; }
  .brands .brand-item:nth-child(3) { animation-delay: 2s; }
  .brands .brand-item:nth-child(4) { animation-delay: 1.5s; }
  .brands .brand-item:nth-child(5) { animation-delay: 0.8s; }
  .brands .brand-item:nth-child(6) { animation-delay: 2.5s; }
  .brands .brand-item:nth-child(7) { animation-delay: 1.8s; }
  .brands .brand-item:nth-child(8) { animation-delay: 0.4s; }
}


/* ===== Flutuação + composição de transform (desktop) ===== */
@media (min-width: 992px){
  .brands .brand-item { position: relative; }

  /* anima no PNG para evitar conflito com offsets do container */
  .brands .brand-item .brand-png{
    display:block; width:100%; height:auto;
    /* composição: mouse (mx/my) + flutuação (fx/fy/rot) */
    transform:
      translate(var(--mx, 0px), var(--my, 0px))
      translate(var(--fx, 0px), var(--fy, 0px))
      rotate(var(--fr, 0deg));
    transition: transform 120ms ease-out;
    will-change: transform;
    animation: floatyVars 6s ease-in-out infinite;
  }

  @keyframes floatyVars{
    0%   { --fx: 0px;  --fy: 0px;  --fr: 0deg;   }
    25%  { --fx: 6px;  --fy:-8px;  --fr: 0.5deg; }
    50%  { --fx:-5px;  --fy:-3px;  --fr:-0.5deg; }
    75%  { --fx: 8px;  --fy: 6px;  --fr: 0.3deg; }
    100% { --fx: 0px;  --fy: 0px;  --fr: 0deg;   }
  }

  /* delays diferentes para cada item */
  .brands .brand-item:nth-child(1)  .brand-png { animation-delay: 0s;   }
  .brands .brand-item:nth-child(2)  .brand-png { animation-delay: 1s;   }
  .brands .brand-item:nth-child(3)  .brand-png { animation-delay: 2s;   }
  .brands .brand-item:nth-child(4)  .brand-png { animation-delay: 1.5s; }
  .brands .brand-item:nth-child(5)  .brand-png { animation-delay: 0.8s; }
  .brands .brand-item:nth-child(6)  .brand-png { animation-delay: 2.5s; }
  .brands .brand-item:nth-child(7)  .brand-png { animation-delay: 1.8s; }
  .brands .brand-item:nth-child(8)  .brand-png { animation-delay: 0.4s; }
}

/* --- FIX: anima só o PNG; containers livres para receber transform !important --- */
@media (min-width: 992px){
  .brands .brand-item{
    animation: none !important;     /* desliga floaty no container */
    transform: none;                /* não anima/compõe no container */
  }

  /* mantém a flutuação no próprio PNG (já usada no JS de gravidade) */
  .brands .brand-item .brand-png{
    display:block; width:100%; height:auto;
    transform:
      translate(var(--mx, 0px), var(--my, 0px))
      translate(var(--fx, 0px), var(--fy, 0px))
      rotate(var(--fr, 0deg));
    transition: transform 120ms ease-out;
    will-change: transform;
    animation: floatyVars 6s ease-in-out infinite;
  }
}

/* ===== PRÊMIOS: animação controlada por JS (desktop only) ===== */
@media (min-width: 992px){
  .brands { position: relative; }
  .brands .brand-item { position: relative; } /* mantém seus ajustes de layout */
  .brands .brand-item .brand-png{
    display:block; width:100%; height:auto;
    will-change: transform;
    transition: transform 0.08s linear; /* suaviza micro jitter */
  }
}


/* Evitar recorte dos prêmios quando se movem (desktop) */
@media (min-width: 992px){
  .brands,
  .brands .container,
  .brands .brands-grid,
  .brands .brand-item{
    overflow: visible;           /* libera as bordas pra animação */
  }

  /* dá um "respiro" lateral pra não encostar no limite ao mover */
  .brands .container{
    padding-inline: max(24px, 4vw);
  }

  /* segurança: o PNG é quem anima, então o container não clipa */
  .brands .brand-item .brand-png{
    transform-origin: center center;
  }
}

/* PRÊMIOS: mais área útil lateral (desktop) */
@media (min-width: 992px){
  .brands,
  .brands .container,
  .brands .brands-grid,
  .brands .brand-item{
    overflow: visible;
  }

  /* Gutters bem largos para a animação não encostar nas bordas */
  .brands .container{
    padding-left: clamp(64px, 10vw, 180px);
    padding-right: clamp(64px, 10vw, 180px);
  }
}

/* === Brands: espaço seguro para animação (desktop) === */
.brands,
.brands .container,
.brands .brands-grid,
.brands .brand-item {
  overflow: visible !important; /* impede clipping do translate */
}

.brands {
  /* gutters largos para a bolha não encostar nas bordas do viewport */
  --bubble-room: max(7vw, 140px);
  padding-left: var(--bubble-room);
  padding-right: var(--bubble-room);
}

/* se a sua .container tiver padding horizontal, zera aqui só nesta seção */
.brands .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* imagens preparadas para animar */
.brands .brand-png {
  display: block;               /* remove possíveis espaços inline */
  transform-origin: center;     /* rotação/translate a partir do centro */
  will-change: transform;       /* suaviza durante a animação */
}

/* reduzir um pouco o gutter em telas grandes “médias” */
@media (max-width: 1400px) {
  .brands { --bubble-room: max(5vw, 110px); }
}

/* sem efeito no mobile (você vai definir outro layout depois) */
@media (max-width: 991.98px) {
  .brands {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ===============================
   SECÇÃO DE PRÊMIOS — FIX CORTE LATERAL
   =============================== */

/* Remove qualquer limite de recorte da seção e ancestrais */
html, body {
  overflow-x: visible !important;
}

section.brands,
section.brands * {
  overflow: visible !important;
}

/* Remove qualquer transform/perspective herdado na hierarquia */
section.brands {
  isolation: isolate;         /* cria um novo contexto isolado */
  transform: none !important;
  perspective: none !important;
  clip-path: none !important;
  contain: none !important;
  position: relative;
  z-index: 5;
}

/* Garante margem lateral suficiente pra imagens flutuarem */
section.brands .container {
  max-width: 100%;
  padding-left: 12vw;
  padding-right: 12vw;
}

/* Dentro da seção, libera absolutamente todas as bordas */
section.brands .brands-grid,
section.brands .brand-item {
  overflow: visible !important;
  transform: none !important; /* cancela possíveis contextos */
}

/* O PNG é o único que anima */
section.brands .brand-png {
  display: block;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none; /* evita hover quebrar layout */
}

/* Mobile */
@media (max-width: 991.98px){
  section.brands .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* =========================================
   BRANDS – liberar animação sem cortes
   ========================================= */

/* 1) Todos os wrappers dos itens de prêmio NÃO podem conter paint/clipping */
.brands .brand-item,
.brands .brand-as-image,
.brands .brand-item.brand-as-image,
.brands .brand-ichef,
.brands .brand-tramontina,
.brands .brand-10mil,
.brands .brand-tupperware,
.brands .brand-caneca,
.brands .brand-premios {
  contain: none !important;          /* <— remove o “caixote” de pintura */
  overflow: visible !important;      /* <— permite o translate sair do box */
  clip-path: none !important;        /* segurança extra */
}

/* 2) A grade também não pode clipar */
.brands .brands-grid{
  overflow: visible !important;
  contain: none !important;
}

/* 3) A imagem é quem anima; centro correto e sem interferência */
.brands .brand-png{
  display: block;
  transform-origin: center center;
  will-change: transform;
  /* não coloque transform aqui com !important pra não brigar com o JS */
}


/* ===== CTA: Ver Regulamento (desktop) ===== */
:root{
  --rl-blue: #1d2de3;     /* azul campanha */
  --rl-blue-dark:#121a9c;
  --rl-orange:#ff6a00;    /* laranja campanha */
  --rl-yellow:#ffd66c;
}

/* ===== CTA: Ver Regulamento (desktop) ===== */
.brand-cta { 
  position: relative;
  margin-top: 120px;   /* ↓ empurra o botão pra baixo */
  left: -6px;          /* leve ajuste horizontal */
  display: flex;
  justify-content: center;
}

/* botão */
.cta-button{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 28px;
  min-width: 280px;
  border-radius: 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .5px;
  color: #fff;

  background: linear-gradient(180deg,var(--rl-blue) 0%, var(--rl-blue-dark) 100%);
  border: 4px solid var(--rl-orange);
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 0 6px rgba(255,106,0,.08),
    inset 0 -6px 0 rgba(0,0,0,.15);

  /* flutuação suave */
  animation: ctaFloat 4.8s ease-in-out infinite;
  transform: translateZ(0);
}

/* selo borrado na quina */
.cta-sticker{
  position: absolute;
  top: -18px;
  left: -18px;
  width: 64px;
  height: auto;
  transform: rotate(-12deg);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
  pointer-events: none;
}

/* texto */
.cta-label{
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* brilho em “sheen” no hover */
.cta-button::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.25) 40%, transparent 60%);
  mix-blend-mode: screen;
  transform: translateX(-120%);
  transition: transform .6s ease;
  border-radius: inherit;
}
.cta-button:hover::after{
  transform: translateX(120%);
}

/* hover/click feedback */
.cta-button:hover{
  box-shadow:
    0 14px 28px rgba(0,0,0,.22),
    0 0 0 8px rgba(255,106,0,.12),
    inset 0 -6px 0 rgba(0,0,0,.18);
  transform: translateY(-2px);
}
.cta-button:active{
  transform: translateY(0);
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    0 0 0 6px rgba(255,106,0,.10),
    inset 0 -2px 0 rgba(0,0,0,.25);
}

/* flutuação */
@keyframes ctaFloat{
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}

/* desktop only – some no mobile até ajustarmos a seção responsiva */
@media (max-width: 991.98px){
  .brand-cta{ display:none; }
}


/* --- PATCH 2025-10-31: travar scroll lateral no mobile --- */
@media (max-width: 768px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden !important;   /* bloqueia rolagem horizontal */
    overscroll-behavior-x: none;     /* evita elastic scroll lateral no mobile */
  }

  /* Evita que algo dentro do body projete largura além do viewport */
  body > * {
    max-width: 100vw;
  }

  /* Contém qualquer “estouro” apenas na seção de prêmios sem afetar desktop */
  section.brands,
  .brands .brands-grid {
    overflow-x: hidden !important;   /* clip horizontal na área dos prêmios */
  }

  /* Garante que as imagens dos prêmios não causem overflow */
  .brands .brand-item,
  .brands .brand-as-image,
  .brands .brand-png {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* Guard-rails: se algum inline style empurrou para fora (left/right), neutraliza no mobile */
  .brands [style*="left:"],
  .brands [style*="right:"] {
    left: auto !important;
    right: auto !important;
  }
}


/* --- PATCH 2025-10-31: layout mobile para seção #premios --- */
@media (max-width: 768px) {
  /* Garante empilhamento vertical e centralização */
  #premios .brands-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px; /* espaçamento entre as imagens */
  }

  /* Imagens centralizadas, responsivas e com espaçamento proporcional */
  #premios .brand-item,
  #premios .brand-as-image {
    width: 80% !important;       /* largura máxima no mobile */
    max-width: 320px !important; /* limite para evitar estouro */
    margin: 0 auto !important;   /* centraliza horizontalmente */
    transform: none !important;  /* desativa efeitos flutuantes */
  }

  #premios .brand-png {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Ajuste do botão Ver Regulamento no final */
  #premios .ver-regulamento-btn {
    margin-top: 20px;
    align-self: center;
    display: inline-block;
    transform: none !important;
  }

  /* Remove qualquer posicionamento absoluto residual */
  #premios [style*="position: absolute"],
  #premios [style*="left:"],
  #premios [style*="right:"] {
    position: static !important;
    left: auto !important;
    right: auto !important;
  }
}


/* --- PATCH 2025-10-31: ordem exata dos itens em #premios no mobile --- */
@media (max-width: 768px) {

  /* Container em coluna */
  #premios .brands-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px;
  }

  /* Flex items (default) */
  #premios :is(.brand-item, .brand-as-image, .ver-regulamento-btn) {
    order: 100;                 /* fallback alto */
    width: 80%;
    max-width: 320px;
    margin: 0 auto;
    transform: none !important; /* sem flutuação */
    position: static !important;
  }
  #premios .brand-png { width: 100%; height: auto; display: block; }

  /* ORDEM EXATA */
  #premios :is(.brand-item, .brand-as-image):has(img[src$="raspou_achou_ganhou.png"]) { order: 1; }
  #premios :is(.brand-item, .brand-as-image):has(img[src$="airfryer.png"])            { order: 2; }
  #premios :is(.brand-item, .brand-as-image):has(img[src$="10_mil.png"])              { order: 3; }
  #premios :is(.brand-item, .brand-as-image):has(img[src$="tramontina.png"])          { order: 4; }
  #premios :is(.brand-item, .brand-as-image):has(img[src$="premios.png"])             { order: 5; }
  #premios :is(.brand-item, .brand-as-image):has(img[src$="panelas.png"])             { order: 6; }
  #premios :is(.brand-item, .brand-as-image):has(img[src$="tupperware.png"])          { order: 7; }
  #premios :is(.brand-item, .brand-as-image):has(img[src$="caneca.png"])              { order: 8; }
  #premios .ver-regulamento-btn { order: 9; align-self: center; }
}

/* --- PATCH 2025-10-31: ajusta posição do raspou_achou_ganhou.png --- */
@media (max-width: 768px) {
  #premios :is(.brand-item, .brand-as-image):has(img[src$="raspou_achou_ganhou.png"]) {
    margin-top: -10px !important; /* sobe um pouco */
  }
}

/* --- PATCH 2025-10-31: destaque visual raspou_achou_ganhou.png no mobile --- */
@media (max-width: 768px) {
  #premios :is(.brand-item, .brand-as-image):has(img[src$="raspou_achou_ganhou.png"]) {
    margin-top: -35px !important;   /* sobe mais */
    margin-right: 15px !important;  /* leve deslocamento à direita */
    transform: none !important;     /* garante que o efeito flutuante não interfira */
    position: relative !important;
    z-index: 2;                     /* garante sobreposição suave se houver camadas */
  }
}

/* --- PATCH 2025-10-31: flutuação nas imagens no mobile e NÃO no botão --- */

/* 1) Nunca flutuar o botão (desktop e mobile) */
#premios .ver-regulamento-btn {
  animation: none !important;
  transform: none !important; /* neutraliza qualquer JS de “gravidade” */
}

/* 2) Ativar flutuação suave nas IMAGENS no mobile */
@media (max-width: 768px) {
  /* Keyframes leves p/ mobile */
  @keyframes float-mobile {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
  }

  /* Aplica a flutuação só nos PNGs dos prêmios */
  #premios .brand-png {
    animation: float-mobile 5.5s ease-in-out infinite;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0); /* suaviza no mobile */
  }

  /* Pequenas variações de tempo p/ não ficarem sincronizadas */
  #premios .brands-grid > :nth-child(1) .brand-png { animation-duration: 5.2s; }
  #premios .brands-grid > :nth-child(2) .brand-png { animation-duration: 5.8s; }
  #premios .brands-grid > :nth-child(3) .brand-png { animation-duration: 5.4s; }
  #premios .brands-grid > :nth-child(4) .brand-png { animation-duration: 6.0s; }
  #premios .brands-grid > :nth-child(5) .brand-png { animation-duration: 5.6s; }
  #premios .brands-grid > :nth-child(6) .brand-png { animation-duration: 5.9s; }
  #premios .brands-grid > :nth-child(7) .brand-png { animation-duration: 5.3s; }
  #premios .brands-grid > :nth-child(8) .brand-png { animation-duration: 6.1s; }

  /* Garante que o botão continue sem flutuar no mobile */
  #premios .ver-regulamento-btn .brand-png,
  #premios .ver-regulamento-btn {
    animation: none !important;
    transform: none !important;
  }
}

/* --- PATCH FINAL 2025-10-31: botão Ver Regulamento fixo e sem animação --- */
@media (max-width: 768px) {
  #premios .ver-regulamento-btn {
    margin-top: 40px !important;   /* empurra o botão mais pra baixo */
    animation: none !important;    /* desativa qualquer keyframe CSS */
    transform: none !important;    /* neutraliza qualquer movimento residual */
    transition: none !important;   /* cancela efeitos de transição */
    position: relative !important;
    z-index: 3;                    /* garante que fique acima das imagens, se preciso */
  }

  /* remove também se o botão tiver algum wrapper interno com imagem */
  #premios .ver-regulamento-btn *,
  #premios .ver-regulamento-btn img {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- PATCH 2025-10-31: botão Ver Regulamento mais abaixo e estático --- */
@media (max-width: 768px) {
  #premios .ver-regulamento-btn {
    margin-top: 80px !important;   /* empurra mais pra baixo */
    animation: none !important;    /* remove qualquer animação */
    transform: none !important;
    transition: none !important;
    position: relative !important;
    z-index: 3;
  }

  /* Neutraliza qualquer animação interna do botão */
  #premios .ver-regulamento-btn *,
  #premios .ver-regulamento-btn img {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- PATCH 2025-10-31: ajustar botão Ver Regulamento e ordem no mobile --- */
@media (max-width: 768px) {
  /* Empilhamento em coluna no mobile */
  #premios .brands-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px;
  }

  /* Tira QUALQUER animação/movimento do botão (wrapper + filhos) */
  #premios .brand-cta,
  #premios .brand-cta *,
  #premios .brand-cta .cta-button {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  /* Desce o botão (aplique no wrapper flex item) */
  #premios .brand-cta {
    order: 9;                 /* garante que o botão fique por último */
    margin-top: 100px !important;  /* empurra mais pra baixo */
    width: 80%;
    max-width: 320px;
    align-self: center;
  }

  /* Mantém imagens responsivas e sem “gravidade” agressiva no mobile */
  #premios .brand-item.brand-as-image {
    width: 80%;
    max-width: 320px;
    margin: 0 auto;
    position: static !important;
    transform: none !important;
  }
  #premios .brand-item.brand-as-image .brand-png {
    display: block; width: 100%; height: auto;
  }

  /* ORDEM EXATA (1..8) pelos arquivos */
  #premios :is(.brand-item, .brand-as-image):has(img[src$="raspou_achou_ganhou.png"]) { order: 1; }
  #premios :is(.brand-item, .brand-as-image):has(img[src$="airfryer.png"])            { order: 2; }
  #premios :is(.brand-item, .brand-as-image):has(img[src$="10_mil.png"])              { order: 3; }
  #premios :is(.brand-item, .brand-as-image):has(img[src$="tramontina.png"])          { order: 4; }
  #premios :is(.brand-item, .brand-as-image):has(img[src$="premios.png"])             { order: 5; }
  #premios :is(.brand-item, .brand-as-image):has(img[src$="panelas.png"])             { order: 6; }
  #premios :is(.brand-item, .brand-as-image):has(img[src$="tupperware.png"])          { order: 7; }
  #premios :is(.brand-item, .brand-as-image):has(img[src$="caneca.png"])              { order: 8; }
}

/* Paleta base (se já existir, mantenha suas cores e ignore estas linhas) */
:root{
  --rl-blue:#2001f9;
  --rl-orange:#FF6A00;              /* fundo do cartão laranja */
  --rl-orange-soft:#FF7F32;         /* caixas internas mais claras, se usar */
}

/* Seção COMO PARTICIPAR agora tem FUNDO AZUL */
.how-to{
  background: var(--rl-blue);
  /* padding vertical suficiente para o azul “encostar” no rodapé visualmente */
  padding: clamp(32px,4vw,56px) 0 clamp(64px,6vw,96px);
}

/* Cartão laranja arredondado que “flutua” sobre o azul */
.howto-card{
  background: var(--rl-orange);
  border-radius: 28px;
  padding: clamp(24px,3.5vw,48px);
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
}

/* Título dentro do cartão mantém o estilo já usado no site */
.howto-card .section-title{
  margin: 0 0 clamp(16px,2.5vw,28px);
}

/* Garante respiro lateral mesmo em telas grandes */
.how-to .container{
  max-width: 1200px; /* ajuste se seu container global for outro */
  padding-left: clamp(16px,3vw,32px);
  padding-right: clamp(16px,3vw,32px);
}

/* (Opcional) se as caixas internas usarem um laranja mais claro, mantenha */
.participation-content .participation-item{
  background: rgba(255,255,255,.08); /* mantém contraste leve sobre o laranja */
  border-radius: 18px;
}

/* Responsividade: evita que o cartão “cole” nas bordas em mobile estreito */
@media (max-width: 640px){
  .howto-card{ border-radius: 22px; }
}



/* === COMO PARTICIPAR — efeito de sobreposição do card sobre o fundo azul === */
:root{
  /* ajuste fino do ponto onde o AZUL começa (abaixo do topo da seção) */
  --howto-blue-offset: clamp(52px, 7vw, 92px);
  --rl-blue: #2001f9; /* sua nova cor */
}

/* a seção em si fica sem background; o azul vem do ::before */
.how-to{
  position: relative;
  background: transparent;
  padding: clamp(24px, 3vw, 40px) 0 clamp(64px, 6vw, 96px);
}

/* o fundo AZUL começa abaixo do topo (offset), preenchendo até o rodapé da seção */
.how-to::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--howto-blue-offset); /* alinhe com sua “linha vermelha” */
  bottom: 0;
  background: var(--rl-blue);
  z-index: 0;
}

/* garante que o cartão fique acima do azul */
.howto-card{
  position: relative;
  z-index: 1;
  background: var(--rl-orange);
  border-radius: 28px;
  padding: clamp(24px,3.5vw,48px);
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
}

/* responsivo: aproxima um pouco o início do azul em telas pequenas (opcional) */
@media (max-width: 768px){
  :root{ --howto-blue-offset: clamp(36px, 8vw, 56px); }
}


/* Garante que o card seja a âncora dos tickets */
.howto-card {
  position: relative;
  isolation: isolate; /* mantém a pilha de camadas organizada */
}

/* Base para todos os selos */
.ticket-badge {
  position: absolute;
  z-index: 2;                 /* acima do laranja, abaixo do conteúdo flutuante se houver */
  pointer-events: none;       /* puramente decorativo */
  user-select: none;
  will-change: transform;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Tamanhos responsivos (escala suave em desktops) */
.ticket-blurry-tl  { width: clamp(44px, 4.5vw, 72px); }
.ticket-clear-ml   { width: clamp(92px, 9.2vw, 150px); }
.ticket-bottom-ll  { width: clamp(70px, 7vw, 116px); }
.ticket-top-tr     { width: clamp(76px, 7.6vw, 128px); }
.ticket-bottom-rr  { width: clamp(92px, 9.2vw, 150px); }

/* Posições (sempre ancoradas às bordas do card) */
.ticket-blurry-tl {
  top: clamp(-10px, -1.2vw, -18px);
  left: clamp(-6px, -0.6vw, -10px);
}

.ticket-clear-ml {
  top: 50%;
  left: clamp(-16px, -1.2vw, -20px);
  transform: translateY(-50%);
}

.ticket-bottom-ll {
  bottom: clamp(-10px, -1.2vw, -18px);
  left: clamp(-8px, -0.8vw, -12px);
}

.ticket-top-tr {
  top: clamp(-12px, -1.4vw, -20px);
  right: clamp(-10px, -1vw, -16px);
}

.ticket-bottom-rr {
  bottom: clamp(-14px, -1.6vw, -24px);
  right: clamp(-12px, -1.2vw, -18px);
}

/* Se o seu card tiver sombra/raio grandes, pode subir um pouco os tickets em telas bem largas */
@media (min-width: 1600px) {
  .ticket-clear-ml  { left: -18px; }
  .ticket-top-tr    { right: -14px; top: -16px; }
  .ticket-bottom-rr { right: -16px; bottom: -18px; }
}

/* aumenta levemente o selo do meio esquerdo */
.ticket-clear-ml {
  width: clamp(120px, 11vw, 190px); /* era ~92px–150px, agora maior */
  top: 50%;
  left: clamp(-18px, -1.2vw, -22px);
  transform: translateY(-50%);
}

/* === Tipografia dentro do card laranja === */
.howto-card {
  font-family: 'Myriad Pro', sans-serif;
  color: #fff; /* mantém legibilidade no fundo laranja */
}

.howto-card .amount {
  font-weight: 600; /* Myriad Pro Semibold */
}

.howto-card .amount strong {
  font-weight: 900; /* Myriad Pro Black para R$ 20 */
}

.howto-card .description {
  font-weight: 400; /* Myriad Pro Regular */
}

.howto-card .raspadinha {
  font-weight: 900; /* Myriad Pro Black */
}

.howto-card .participation-item:last-child .description {
  font-weight: 400; /* Myriad Pro Regular */
  text-transform: uppercase;
}


/* ===== Destaque para o sinal "=" na seção COMO PARTICIPAR ===== */
.howto-card .equals {
  font-size: clamp(64px, 6vw, 96px); /* aumenta proporcionalmente */
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 3px 6px rgba(0,0,0,0.25);
  transform: translateY(-4px); /* ajuste fino vertical */
}


/* ========== CARD BRANCO — MARCAS PARTICIPANTES (dentro da .how-to) ========== */
.brands-card{
  position: relative;
  z-index: 1; /* acima do azul de fundo, igual ao card laranja */
  background: #fff;
  border-radius: 28px;
  padding: clamp(24px,3.5vw,48px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  margin-top: clamp(20px, 3vw, 32px); /* respiro entre os cards */
  font-family: 'Myriad Pro', sans-serif;
}
/* Reusa o mesmo look do título do card laranja */
.brands-card .section-title{
  /* herda tamanho/peso de .section-title global já usado no card laranja */
  /* centralizado por padrão */
  margin: 0 0 clamp(20px,3vw,28px);
}

/* Grid de logos — 22 itens 250x250, responsivo sem cortar */
.brands-logos-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: center;
  justify-items: center;
}

.brand-logo{
  width: 250px;
  height: 250px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 16px;
  /* opcional: uma bordinha leve pra destacar no branco */
  border: 1px solid rgba(0,0,0,.06);
}

.brand-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;  /* não corta a arte da logo */
  image-rendering: -webkit-optimize-contrast;
}

/* Breakpoints para manter fill perfeito nas telas menores */
@media (max-width: 1280px){
  .brands-logos-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1024px){
  .brands-logos-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .brands-logos-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-logo{ width: 220px; height: 220px; }
}
@media (max-width: 560px){
  .brands-logos-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-logo{ width: 200px; height: 200px; }
}
@media (max-width: 380px){
  .brands-logos-grid{ grid-template-columns: 1fr; }
  .brand-logo{ width: 180px; height: 180px; }
}

/* ================================
   PATCH — Logos 50% menores (sem borda)
==================================*/

.brands-logos-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 20px);
  align-items: center;
  justify-items: center;
}

.brand-logo {
  width: 125px;   /* antes 250px */
  height: 125px;  /* antes 250px */
  display: grid;
  place-items: center;
  background: transparent; /* sem fundo branco sólido */
  border: none;            /* remove a borda sutil anterior */
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* Responsividade */
@media (max-width: 1280px){
  .brands-logos-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 1024px){
  .brands-logos-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 768px){
  .brands-logos-grid { grid-template-columns: repeat(4, 1fr); }
  .brand-logo { width: 110px; height: 110px; }
}
@media (max-width: 560px){
  .brands-logos-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-logo { width: 100px; height: 100px; }
}
@media (max-width: 380px){
  .brands-logos-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-logo { width: 90px; height: 90px; }
}

/* Centralizar a última fileira das logos */
.brands-logos-grid{
  display: grid;
  /* cada coluna tem 125px fixos; cria quantas couberem e centraliza o conjunto */
  grid-template-columns: repeat(auto-fit, minmax(125px, 125px));
  justify-content: center;        /* centra o grid dentro do card */
  gap: clamp(12px, 1.8vw, 20px);
  align-items: center;
  justify-items: center;           /* centra cada logo na sua célula */
}

.brand-logo{
  width: 125px;
  height: 125px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
}

.brand-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* (Opcional) em telas bem pequenas, reduza suavemente */
@media (max-width: 380px){
  .brands-logos-grid{
    grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
  }
  .brand-logo{ width: 100px; height: 100px; }
}

/* --- CENTRALIZAR SEMPRE A ÚLTIMA FILEIRA --- */
.brands-logos-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;     /* <-- centraliza cada linha */
  align-items: center;
  gap: clamp(12px, 1.8vw, 20px);
}

/* Itens continuam com tamanho fixo (50% do original) */
.brand-logo{
  width: 125px;
  height: 125px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
}

.brand-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* Responsividade suave */
@media (max-width: 768px){
  .brand-logo{ width: 110px; height: 110px; }
}
@media (max-width: 560px){
  .brand-logo{ width: 100px; height: 100px; }
}
@media (max-width: 380px){
  .brand-logo{ width: 90px; height: 90px; }
}

/* ========== CARD BRANCO — FAQ (dentro da .how-to) ========== */
.faq-card{
  position: relative;
  z-index: 1;                 /* acima do fundo azul da seção */
  background: #fff;
  border-radius: 28px;
  padding: clamp(24px,3.5vw,48px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  margin-top: clamp(20px, 3vw, 32px);
  font-family: 'Myriad Pro', sans-serif;
}

/* Título reaproveita a mesma classe do card de marcas */
.faq-card .section-title{
  margin: 0 0 clamp(16px,2.5vw,24px);
  text-align: center;
}

/* Lista/itens */
.faq-list{
  display: grid;
  gap: 12px;                          /* espacinho entre os retângulos */
}

/* Cada pergunta como um retângulo clicável (summary) */
.faq-item{
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
}

.faq-item[open]{
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.faq-question{
  list-style: none;                    /* remove triângulo padrão */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;      /* texto à esquerda, seta à direita */
  gap: 12px;
  padding: 14px 16px;                  /* margemzinha nos lados do card */
  font-weight: 700;
  font-size: clamp(14px, 1.7vw, 16px);
}

/* Seta custom (↓) que gira ao abrir */
.faq-question::after{
  content: "▾";                        /* seta para baixo */
  display: inline-block;
  transform: rotate(0deg);
  transition: transform .2s ease;
  font-size: 1.1em;
  line-height: 1;
}

.faq-item[open] .faq-question::after{
  transform: rotate(180deg);           /* seta para cima */
}

/* Resposta */
.faq-answer{
  padding: 0 16px 14px 16px;           /* alinhado às laterais do summary */
  font-weight: 400;
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.45;
  color: #1b1b1b;
}

/* Toque sutil ao focar via teclado */
.faq-question:focus{
  outline: 2px solid #2a50ff20;
  outline-offset: 2px;
}

/* Dark text melhor legibilidade no branco */
.faq-card, .faq-card *{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ================================
   FOOTER — Rede Litoral (laranjão)
==================================*/
.footer {
  background-color: #ff6b00;          /* mesmo laranja do card "Como Participar" */
  color: #fff;                        /* contraste máximo */
  text-align: center;
  padding: 36px 16px;
  font-family: "Myriad Pro", sans-serif;
  font-weight: 700;                   /* bold */
  box-shadow: 0 -6px 24px rgba(0,0,0,.15);
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/background.png") center/cover no-repeat;
  opacity: 0.15;                      /* usa o background amarelo sutil por cima */
  z-index: 0;
}

.footer p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Mobile */
@media (max-width: 480px) {
  .footer {
    padding: 28px 12px;
  
  }
}


/* ================================
   MENU NAV — Hover laranja
==================================*/
.nav-list li a {
  position: relative;
  font-weight: 700;
  color: #2F3DBD;                     /* azul padrão Rede Litoral */
  text-decoration: none;
  padding: 6px 12px;                  /* espaço interno do texto */
  border-radius: 6px;
  transition: color 0.25s ease;
}

/* Cria o retângulo laranja por trás */
.nav-list li a::before {
  content: "";
  position: absolute;
  inset: 0;                           /* cobre toda a área do link */
  background-color: #ff6b00;          /* laranjão */
  border-radius: 6px;
  transform: scaleX(0);               /* começa invisível */
  transform-origin: center;
  transition: transform 0.25s ease;
  z-index: -1;                        /* fica atrás do texto */
}

/* Efeito ao passar o mouse */
.nav-list li a:hover::before {
  transform: scaleX(1);               /* revela o retângulo */
}

.nav-list li a:hover {
  color: #fff;                        /* texto branco sobre o laranja */
}

/* Mantém o destaque também quando estiver ativo/selecionado */
.nav-list li a.active::before {
  transform: scaleX(1);
}

.nav-list li a.active {
  color: #fff;
}

/* ================================
   PATCH — Remove underline antigo
   e mantém só o retângulo laranja
==================================*/

/* Remove o underline e qualquer borda herdada */
.nav-list li a {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  position: relative;
}

/* Neutraliza qualquer pseudo antigo de underline */
.nav-list li a::after {
  content: none !important;
}


/* ================================
   PATCH — Remove barra branca atrás do menu
==================================*/

/* Zera qualquer fundo visível nos itens do menu */
.nav-list,
.nav-list li,
.nav-list li a {
  background: transparent !important;
}

/* Remove qualquer sombra ou borda herdada */
.nav-list li,
.nav-list li a {
  box-shadow: none !important;
  border: none !important;
}

/* Garante que o hover continue com o retângulo laranja funcionando */
.nav-list li a::before {
  background-color: #ff6b00;
}

/* ================================
   PATCH — Remover faixa branca do menu
==================================*/

/* Zera fundo/borda/sombra do(s) contêiner(es) do UL */
.navbar,
.navbar .container,
.navbar .nav-inner,
.navbar .nav-center,
.navbar .nav-wrap,
.navbar .nav-menu,
.nav-list {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Garante que o UL não tenha “placa” branca */
.nav-list {
  padding: 0 !important;
  margin: 0 !important;
}

/* E que nenhum LI gere um bloco branco */
.nav-list li {
  list-style: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Neutraliza pseudo-elementos que possam pintar o fundo */
.nav-list::before,
.nav-list::after,
.navbar::before,
.navbar::after {
  content: none !important;
}

/* Mantém somente o nosso hover laranja atrás do texto */
.nav-list li a {
  background: transparent !important;  /* sem placa branca no link */
}
.nav-list li a::before {
  background-color: #ff6b00;          /* retângulo laranja do hover */
}

/* --- PATCH: remover faixa branca atrás do menu --- */
.header,
.header .container,
.nav,
.nav .nav-list,
.nav .nav-list li,
.nav .nav-list a {
  background: transparent !important;
  box-shadow: none !important;
}

/* se existir algum pseudo-elemento que cria a barra, desativa */
.nav .nav-list::before,
.nav .nav-list::after,
.nav .nav-list li::before,
.nav .nav-list li::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* garante que o item não herde sublinhado do hover antigo */
.nav .nav-list a,
.nav .nav-list a:hover,
.nav .nav-list a:focus {
  text-decoration: none !important;
  border: 0 !important;
}


/* ================================
   NAVBAR — Efeito vidro esbranquiçado
==================================*/

.header {
  background: rgba(255, 255, 255, 0.25);  /* leve branco translúcido */
  backdrop-filter: blur(14px);            /* efeito vidro */
  -webkit-backdrop-filter: blur(14px);    /* suporte Safari */
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* container interno sem fundo */
.header .container {
  background: transparent !important;
}

/* reforço de transparência pro menu mobile aberto */
@media (max-width: 768px) {
  .header {
    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(18px);
  }
}

/* ================================
   NAVBAR — Ajuste desktop + mobile
==================================*/

/* Efeito vidro no desktop */
.header {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Fundo sólido no menu dropdown mobile */
@media (max-width: 768px) {
  .header {
    background: rgba(255, 255, 255, 1) !important;  /* branco sólido */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
  }

  /* garante que o container do menu também seja branco */
  .nav-list,
  .nav,
  .header .container {
    background: #fff !important;
  }

  /* os links continuam coloridos normalmente */
  .nav-list li a {
    color: #2F3DBD;
  }
}

/* ================================
   MENU MOBILE — Fundo laranja em cada item
==================================*/
@media (max-width: 768px) {
  .nav-list {
    background: rgba(255, 255, 255, 0.25);    /* mantém o efeito vidro */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0 0 18px 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .nav-list li {
    position: relative;
    list-style: none;
  }

  .nav-list li a {
    display: block;
    position: relative;
    color: #fff;                              /* texto branco sobre o laranja */
    font-weight: 700;
    text-align: center;
    padding: 12px 14px;
    border-radius: 8px;
    text-decoration: none;
    z-index: 1;
  }

  /* Quadradinho laranja atrás do texto */
  .nav-list li a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ff6b00;
    border-radius: 8px;
    z-index: -1;
    transition: transform 0.25s ease, opacity 0.25s ease;
    opacity: 0.95;
  }

  /* Efeito de pressão no toque */
  .nav-list li a:active::before {
    transform: scale(0.96);
    opacity: 1;
  }

  /* Hover — reforça o brilho */
  .nav-list li a:hover::before {
    opacity: 1;
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.6);
  }

  /* Se o menu tiver muito conteúdo */
  .nav-list {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
}

/* ================================
   MENU MOBILE — quadrado laranja em cada item (100% garantido)
==================================*/
@media (max-width: 768px) {
  /* painel translúcido do menu pode continuar, se quiser */
  .nav-list {
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .nav-list li {
    list-style: none;
    margin: 0;
  }

  /* quadradinho laranja direto no link */
  .nav-list li a {
    display: block;
    background: #ff6b00 !important; /* retângulo laranja */
    color: #fff !important;          /* texto branco por cima */
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
    font-weight: 800;
    text-decoration: none;
  }

  /* desativa o pseudo de hover do desktop no mobile */
  .nav-list li a::before {
    content: none !important;
  }

  /* feedback no toque */
  .nav-list li a:active {
    transform: translateY(1px);
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
  }
}


/* ================================
   MOBILE NAV — barra transparente + menu branco sólido
==================================*/
@media (max-width: 768px) {
  /* Barra fixa transparente com efeito vidro */
  .header {
    background: rgba(255, 255, 255, 0.2);     /* translúcido */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  }

  /* Quando o menu é aberto (ul.nav-list) */
  .nav-list {
    background: #fff !important;              /* branco sólido */
    border-radius: 0 0 18px 18px;
    padding: 16px 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }

  /* Itens do menu */
  .nav-list li {
    list-style: none;
    text-align: center;
    margin: 0;
  }

  /* Links com texto laranja */
  .nav-list li a {
    display: block;
    color: #ff6b00 !important;               /* laranja forte */
    font-weight: 800;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 10px;
    transition: background 0.2s ease, color 0.2s ease;
  }

  /* Hover ou toque: fundo laranja, texto branco */
  .nav-list li a:hover,
  .nav-list li a:active {
    background: #ff6b00;
    color: #fff !important;
  }

  /* remove pseudo dos hovers antigos */
  .nav-list li a::before {
    content: none !important;
  }
}


/* ================================
   INVERSÃO DE CORES — Navbar x Menu Mobile
==================================*/
@media (max-width: 768px) {

  /* Navbar (header): AGORA transparente/esbranquiçada */
  .header {
    background: rgba(255, 255, 255, 0.15) !important; /* vidro leve */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* Menu dropdown (nav-list): AGORA branco sólido */
  .nav-list {
    background: #ffffff !important; /* branco puro */
  }

  /* Itens do menu: texto laranja */
  .nav-list li a {
    color: #ff6b00 !important;
    font-weight: 800;
    text-decoration: none;
    background: transparent !important;
  }

  /* Hover / clique: inverte (laranja com texto branco) */
  .nav-list li a:hover,
  .nav-list li a:active {
    background: #ff6b00 !important;
    color: #fff !important;
  }

  /* Remove pseudo antigo (underline / retângulo) */
  .nav-list li a::before,
  .nav-list li a::after {
    content: none !important;
  }
}

/* ================================
   MOBILE — Inversão simples de cores
==================================*/
@media (max-width: 768px){

  /* 1) Navbar: vidro esbranquiçado, sem “bloco branco” no centro */
  .header{
    background: rgba(255,255,255,0.16) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.28);
  }
  /* remove qualquer fundo que esteja no container interno */
  .header .container,
  .nav{
    background: transparent !important;
  }

  /* 2) Menu aberto: branco sólido (sem transparência) */
  /* cobrimos os estados mais comuns de “menu aberto” */
  .nav-list,
  .nav.open .nav-list,
  .nav-list.is-open,
  body.menu-open .nav-list{
    background: #ffffff !important;         /* branco puro */
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
  }

  /* links laranja sobre o branco */
  .nav-list li a{
    color: #ff6b00 !important;
    background: transparent !important;     /* sem placa atrás do texto */
    font-weight: 800;
    text-decoration: none;
  }
  /* feedback no toque/hover */
  .nav-list li a:hover,
  .nav-list li a:active{
    background: #ff6b00 !important;
    color: #fff !important;
  }

  /* neutraliza qualquer pseudo antigo (underline/placa) */
  .nav-list li a::before,
  .nav-list li a::after{
    content: none !important;
  }
}

/* ================================
   NAVBAR MOBILE — vidro fosco idêntico ao desktop
==================================*/
@media (max-width: 768px) {
  .header {
    background: rgba(255, 255, 255, 0.35) !important; /* branco leitoso translúcido */
    -webkit-backdrop-filter: blur(14px) brightness(1.1);
    backdrop-filter: blur(14px) brightness(1.1);       /* efeito vidro real */
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  }

  /* garante que o container interno não esteja aplicando fundo */
  .header .container {
    background: transparent !important;
  }
}

/* Camadas na hero */
.hero { position: relative; overflow: hidden; }

/* IMPORTANTE: z-index para respeitar a hierarquia pedida
   Header (já está no topo) > hero-art > layer dos selos > hero-background */
.header { position: sticky; top: 0; z-index: 1000; } /* se já existir, mantenha o maior z-index */
.hero .hero-art { position: relative; z-index: 900; }
.hero .hero-burst-layer {
  position: absolute;
  inset: 0;
  z-index: 800;          /* atrás da hero-art e do header */
  pointer-events: none;  /* não bloquear interações da hero */
}

/* Partículas (selos) */
.sticker-particle {
  position: absolute;
  left: 0; top: 0;
  width: auto; height: auto;
  max-width: 200px;           /* limite de tamanho confortável */
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
  user-select: none;
  pointer-events: none;
}

/* Fundo da hero deve ficar por baixo de tudo na hero */
.hero .hero-background { position: absolute; inset: 0; z-index: 700; }

/* A hero só precisa ser contexto de posicionamento */
.hero { position: relative; overflow: hidden; }

/* A layer de selos fica por baixo da hero-art sem mexer nela */
.hero .hero-burst-layer {
  position: absolute;
  inset: 0;
  z-index: 1;            /* abaixo da hero-art por ordem de pintura */
  pointer-events: none;
}

.hero .hero-background { 
  position: absolute; 
  inset: 0; 
  z-index: 0;            /* fundo da hero */
}

/* Partículas */
.sticker-particle {
  position: absolute;
  left: 0; top: 0;
  max-width: 200px;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
  user-select: none;
  pointer-events: none;
}

/* (opcional) header acima de tudo do site */
.header { position: sticky; top: 0; z-index: 1000; }

/* === PATCH: força a hero.png a descer no desktop === */
@media (min-width: 1025px){
  .hero-art {
    position: relative !important;
    bottom: auto !important;
    margin-top: 80px !important; /* <-- controla o quanto ela desce */
    transform: translateX(-50%) !important;
  }
}

/* Ajuste fino pra telas grandes (opcional) */
@media (min-width: 1400px){
  .hero-art {
    margin-top: 100px !important; /* desce um pouco mais */
  }
}

/* === RESET do patch anterior que empurrava layout === */
@media (min-width: 1025px){
  .hero-art{
    margin-top: 0 !important;     /* não empurra layout */
    top: auto !important;
  }
}

/* === POSICIONAMENTO: overlap sem alterar altura do header === */
.hero{ position: relative; }       /* garante contexto para posicionamento */

@media (min-width: 1025px){
  .hero-art{
    position: absolute !important;
    left: 50% !important;
    /* mantém o cálculo original de ancoragem no rodapé da hero */
    bottom: calc(var(--hero-bar-h) - var(--hero-art-overlap)) !important;

    /* desce visualmente sem mudar o fluxo (overlap na barra azul) */
    transform: translate(-50%, 70px) !important;  /* ajuste fino aqui */

    z-index: 3 !important; /* fica por cima da faixa azul */
    /* nenhuma margin que altere layout */
  }
}

/* telas muito largas: pequeno ajuste se quiser um pouco mais de invasão */
@media (min-width: 1400px){
  .hero-art{
    transform: translate(-50%, 80px) !important;
  }
}

/* (opcional) se existir a faixa azul como elemento separado, mantenha abaixo */
.hero .hero-bottom,
.hero .blue-bar,
.hero .faixa-azul {
  z-index: 2; /* abaixo da hero-art */
}

/* === AJUSTE FINO: hero.png levemente mais alta, mantendo overlap === */
@media (min-width: 1025px){
  .hero-art {
    transform: translate(-50%, 45px) !important; /* subiu um tiquinho */
  }
}

@media (min-width: 1400px){
  .hero-art {
    transform: translate(-50%, 55px) !important; /* idem pra telas grandes */
  }
}

/* Itens pesados (prêmios) – um pouco maiores e com sombra mais rica */
.sticker-heavy{
  max-width: 220px;               /* limite superior para desktop */
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.22));
}
@media (max-width: 768px){
  .sticker-heavy{ max-width: 160px; }
}

/* Remove o contorno azul ao clicar em itens do FAQ */
details summary {
  outline: none !important;
}

details summary:focus,
details summary:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

details[open] summary {
  outline: none !important;
  box-shadow: none !important;
}