/* =========================
   EDISON MATCON — estilos
   ========================= */

/* =========================
   TOKENS (um único :root)
   ========================= */
:root{
  --pad: clamp(16px, 3vw, 28px);
  --radius: 14px;
  --gap: 14px;

  --bg:#0b0f19;
  --panel:#11172a;
  --line:#2a3554;

  --text:#eaeef7;
  --muted:#a8b3d1;

  --brand-1:#d60404;
  --brand-2:#0285ff;
  --brand-3:#1d4ed8;
  --brand-4:#1d30d8;

  --shadow:0 8px 30px rgba(0,0,0,.35);

  /* Altura do logo no topo (desktop) */
  --logo-h: 44px;

  /* ===== HERO (vídeo) ===== */
  --hero-h: clamp(340px, 38vw, 520px);
  --hero-video-x: 50%;   /* centro no eixo X */
  --hero-video-y: 30%;   /* foca mais para baixo */

  /* ===== Cards (carrossel) ===== */
  --card-w: 260px;
  --card-h: 480px;
  --img-h: 200px;
  --title-lines: 2;
  --desc-lines: 2;
}

/* =========================
   BASE / RESET
   ========================= */
*{ box-sizing:border-box }
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
.container{ max-width:1200px; margin:auto; padding:var(--pad) }

/* =========================
   TOPBAR / NAVBAR
   ========================= */
.topbar{
  position: sticky; top: 0; z-index: 50;
  background:#0d137f;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
}
.topbar .brand{ display:inline-flex; align-items:center; text-decoration:none; gap:.5rem; }
.topbar .brand img{ height:var(--logo-h, 44px); width:auto; display:block; }

.main-nav{ display:flex; gap:24px; }
.main-nav a{ color:#cbd5e1; font-weight:500; }
.main-nav a:hover{ color:#fff; }

/* ===== MOBILE: logo central acima do menu ===== */
@media (max-width: 768px){
  :root{ --logo-h: 34px; } /* tamanho do logo só no mobile */

  .topbar .container{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
  }

  .topbar .brand{ order: -1; } /* garante logo em cima */
  .main-nav{
    order: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
    font-size: .95rem;
  }
  /* caso o menu seja <ul><li> */
  .main-nav ul{
    margin:0; padding:0; list-style:none;
    display:flex; flex-wrap:wrap; justify-content:center; gap:12px 18px;
  }
}

/* =========================
   HERO (com vídeo + overlay)
   ========================= */
.hero{
  position:relative;
  height: var(--hero-h);
  overflow:hidden;
  border-bottom:1px solid var(--line);
  color:#fff;
  isolation:isolate; /* garante camadas corretas */
}

/* Vídeo de fundo */
.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: var(--hero-video-x) var(--hero-video-y);
  z-index:0;
  filter:saturate(1.05) contrast(1.05);
}

/* Overlay gradiente acima do vídeo e abaixo do conteúdo */
.hero::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background:
    radial-gradient(1200px 500px at 85% 40%, rgba(2, 6, 23, .65), transparent 60%),
    linear-gradient(120deg,
      rgba(15, 23, 42, .88) 0%,
      rgba(37, 99, 235, .50) 45%,
      rgba(239, 68, 68, .55) 100%
    );
  mix-blend-mode:multiply;
}

/* Conteúdo do hero */
.hero-inner{
  position:relative; z-index:2;
  padding:40px 0 28px;
  width:min(1200px, 92vw);
  margin:0 auto;
}
.hero h1{ font-size:clamp(1.6rem,3.8vw,2.4rem); margin:0 0 8px }
.hero p{ color:var(--muted); margin:0 0 14px }

.grad{
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent
}

.cta{
  display:inline-block; background:var(--brand-4); color:#fff;
  padding:12px 16px; border-radius:12px; font-weight:800
}

/* blobs antigos (mantidos; ficam por baixo do conteúdo) */
.decor{ position:absolute; inset:auto; pointer-events:none; filter:blur(60px); opacity:.25; z-index:1 }
.decor-a{ width:280px; height:280px; background:radial-gradient(closest-side,var(--brand-1),transparent); left:-80px; top:-40px }
.decor-b{ width:280px; height:280px; background:radial-gradient(closest-side,var(--brand-2),transparent); right:-80px; bottom:-40px }

/* Menos movimento se usuário prefere */
@media (prefers-reduced-motion: reduce){
  .hero__video{ animation: none; }
}

/* =========================
   SECTION HEAD
   ========================= */
.section-head h2{ margin:0 0 4px; font-size:clamp(1.2rem,3.2vw,1.6rem) }
.section-head p{ margin:0 0 12px; color:var(--muted) }

/* =========================
   CARROSSEL (scroll horizontal)
   ========================= */
.promocoes{ padding:36px 0 }

.carousel{
  --gap: 14px;
  --per: 5;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}
.carousel .track{
  display:flex;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior:smooth;
  align-items:stretch;
  will-change: transform;
  scrollbar-width: none;
}
.carousel .track::-webkit-scrollbar{ display:none }

.carousel .item{
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  display:flex;
}

/* Cards base */
.promo-card,.product-card{
  background: linear-gradient(180deg, #0e1530, #0a1022);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  position: relative;
  display: grid;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  height:100%;
}
.promo-card .img,.product-card .img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:14px; border:1px solid #e64b0e; background:#b69529;
  box-shadow:0 10px 28px rgba(245,158,11,.18);
}
.promo-card .title,.product-card .title{
  font-weight:800; margin:8px 4px 2px; font-size:.98rem; line-height:1.25;
  max-height:2.6em; overflow:hidden;
}
.promo-card .desc,.product-card .desc{
  color:var(--muted); font-size:.92rem; margin:0 4px 8px; min-height:2.6rem; overflow:hidden;
}

/* Preços */
.promo-card .price,.product-card .price{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; margin:0 4px 8px; white-space:nowrap;
}
.promo-card .price .real,
.product-card .price .real{
  font-size:1.85rem; color:#e8f9fd; font-weight:800;
  text-shadow:
    0 0 16px rgba(2,133,255,.55),
    0 0 18px rgba(2, 255, 213, 0.35),
    0 2px 10px rgba(0,0,0,.35);
}
.promo-card .price .old,.product-card .price .old{
  color:#eed705; font-size:1.1rem; text-decoration:line-through
}

/* CTAs */
.promo-actions{ display:flex; gap:10px; margin-top:8px }
.btn-cta{ flex:1; text-align:center; padding:10px 12px; border-radius:12px; font-weight:800; border:1px solid transparent }
.btn-cta.wa{ background: var(--brand-3); color:#fff }
.btn-cta.more{ background: transparent; color:#eaf0ff; border-color:#40542a }
.btn-cta.more:hover{ background:#0f2a14 }

/* Faixa de promo */
.promo-ribbon{
  position:absolute; top:10px; left:10px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  color:#fff; font-weight:900; padding:6px 10px; border-radius:999px; font-size:.8rem;
}

/* Setas */
.nav{
  position:absolute; top:45%; transform:translateY(-50%);
  z-index: 5;
  background:#0b0f19a0; border:1px solid var(--line); color:#fff;
  border-radius:999px; width:40px; height:40px;
  display:grid; place-items:center; cursor:pointer; transition:.15s;
}
.nav:hover{ background:#0b0f19cc; box-shadow:0 8px 20px rgba(0,0,0,.35) }
.prev{ left:-10px } .next{ right:-10px }

/* Dots */
.dots{ display:flex; gap:6px; justify-content:center; margin-top:10px }
.dots .dot{ width:8px; height:8px; border-radius:999px; background:#653b31; opacity:.6; transition:.15s }
.dots .dot.active{ background:linear-gradient(180deg,var(--brand-2),var(--brand-3)); opacity:1; transform:scale(1.05) }

/* Empty */
.promo-empty{ color:var(--muted); padding:8px 2px; font-size:.95rem }

/* Breakpoints do carrossel */
@media (max-width:1200px){ .carousel{ --per:4 } }
@media (max-width:900px) { .carousel{ --per:3 } }
@media (max-width:680px) { .carousel{ --per:2 } }
@media (max-width:420px) { .carousel{ --per:1 } }
@media (max-width:560px){ .prev{left:0} .next{right:0} }

/* =========================
   CATEGORIAS
   ========================= */
.categorias{ padding:18px 0 60px }
.categorias .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px
}
.cat{
  display:block;
  background:linear-gradient(180deg,#1c2442,#0a0f20);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  color:var(--text);
  box-shadow:var(--shadow)
}
.cat:hover{ outline:2px solid #2b3c69 }
.cat.is-active{ outline:2px solid rgba(255,255,255,.35); background:rgba(255,255,255,.06); }

/* =========================
   DESTAQUE (badge/borda)
   ========================= */
.badge-destaque{
  position:absolute; top:10px; right:10px;
  padding:6px 10px; border-radius:999px;
  font-weight:900; font-size:.78rem; letter-spacing:.2px;
  color:#0b0f19;
  background:linear-gradient(90deg,#f59e0b,#fcd34d);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.is-destaque{
  background:linear-gradient(180deg,#0e1530,#0a1022) padding-box,
             linear-gradient(90deg,#f59e0b,#fcd34d) border-box;
  border:1px solid transparent;
  box-shadow:0 10px 28px rgba(245,158,11,.18);
}
.is-destaque:hover{ box-shadow:0 12px 32px rgba(245,158,11,.25) }

/* =========================
   FOOTER
   ========================= */
.site-footer{ border-top:1px solid var(--line); background:#081021 }
.footer-inner{ display:grid; gap:16px }
.links a{ color:var(--muted); margin-right:12px }
.copy{ color:var(--muted); font-size:.9rem; margin-top:8px }
/* Logo menor no footer */
.site-footer .brand.small img{ height:24px; width:auto }

/* ==== Padrão de largura/altura dos cards e imagens ==== */

/* LARGURA fixa por item do carrossel */
.carousel .item{ flex: 0 0 var(--card-w); display: flex; }

/* CARD com altura mínima e layout em coluna */
.promo-card, .product-card{
  display: flex; flex-direction: column;
  min-height: var(--card-h); width: 100%;
}

/* IMAGEM com altura fixa (mantém proporção dentro) */
.promo-card .img, .product-card .img{
  width: 100%; height: var(--img-h);
  object-fit: contain;
  background: #0e1323;
  border-radius: 14px; border: 1px solid #2351e6;
  box-shadow: 0 10px 28px rgba(245,158,11,.18);
  flex: 0 0 auto;
}

/* Limita linhas do título/descrição */
.promo-card .title, .product-card .title{
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.25em * var(--title-lines) + 4px);
}
.promo-card .desc, .product-card .desc{
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.1em * var(--desc-lines) + 6px);
}

/* Preço/CTA no rodapé do card */
.promo-card .price, .product-card .price{ margin-top: auto; }

/* Responsivo: confortável no mobile */
@media (max-width: 680px){
  :root{
    --card-w: 85vw;
    --card-h: 460px;
    --img-h: 220px;
  }
}

/* ===== Ações do card ===== */
.promo-actions{
  display:flex; gap:12px; align-items:stretch; margin-top:10px;
}

/* Base neutra */
.btn-cta{
  display:inline-block; box-sizing:border-box; text-align:center; font-weight:800;
  border-radius:12px; text-decoration:none; background:none; border:0; color:inherit; padding:0; flex:unset;
}

/* WhatsApp */
.btn-cta.wa{
  padding:8px 14px; min-width:130px;
  background:#25D366; color:#0b0f19; border:1px solid #1fa855;
  box-shadow:0 4px 10px rgba(37,211,102,.18);
  flex:0 0 auto;
}
.btn-cta.wa:hover{ filter:brightness(.95); }

/* Detalhes */
.btn-cta.more{
  padding:8px 14px; min-width:130px;
  background:transparent; color:#eaf0ff; border:1px solid #40542a;
  flex:1 1 auto;
}
.btn-cta.more:hover{ background:#0f2a14; }

/* Botões por cima do card/overlay/setas */
.promo-card .btn-cta, .product-card .btn-cta{
  position: relative; z-index: 10; pointer-events: auto;
}

/* Setas não cobrirem botões */
.nav{ z-index: 4; }

/* Evitar overlay capturar clique */
.promo-card, .product-card, .carousel .item{ position: relative; }

/* =========================
   TEMAS CLAROS (PATCH)
   Cole no final do arquivo
   ========================= */

/* Paleta clara base (aplica na página toda) */
body.theme-light{
  --bg:#f6f8fb;         /* fundo geral claro */
  --panel:#ffffff;       /* cards/painéis */
  --line:#e6eaf3;        /* bordas suaves */
  --text:#0f172a;        /* texto principal (quase preto) */
  --muted:#475569;       /* texto secundário (cinza-azulado) */
}

/* HÍBRIDO: header/rodapé escuros, miolo claro */
body.theme-hybrid{
  --bg:#0b0f19; /* mantém tokens escuros por padrão */
}
body.theme-hybrid .promocoes,
body.theme-hybrid .categorias,
body.theme-hybrid main,
body.theme-hybrid .container.section,
body.theme-hybrid .section,
body.theme-hybrid .page-section{
  background:#f6f8fb;
  color:#0f172a;
}

/* ---------- Topbar e Footer ---------- */
body.theme-light .topbar,
body.theme-hybrid .topbar{
  background:#0d1117;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.theme-light .site-footer,
body.theme-hybrid .site-footer{
  background:#0a1324;
  border-top:1px solid rgba(255,255,255,.08);
  color:#cbd5e1;
}

/* ---------- Hero overlay mais leve ---------- */
body.theme-light .hero::before,
body.theme-hybrid .hero::before{
  background:
    radial-gradient(1200px 500px at 85% 40%, rgba(2, 6, 23, .35), transparent 60%),
    linear-gradient(120deg,
      rgba(15, 23, 42, .35) 0%,
      rgba(37, 99, 235, .18) 45%,
      rgba(239, 68, 68, .20) 100%
    );
}
body.theme-light .hero p,
body.theme-hybrid .hero p{ color:rgba(255,255,255,.9) }

/* ---------- Cards claros ---------- */
body.theme-light .promo-card,
body.theme-light .product-card,
body.theme-hybrid .promo-card,
body.theme-hybrid .product-card{
  background: var(--panel);
  border:1px solid var(--line);
  color: var(--text);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .08);
}
body.theme-light .promo-card .img,
body.theme-light .product-card .img,
body.theme-hybrid .promo-card .img,
body.theme-hybrid .product-card .img{
  background:#ffffff;
  border:1px solid #dde3f0;
  box-shadow:none;
}
body.theme-light .promo-card .title,
body.theme-light .product-card .title,
body.theme-hybrid .promo-card .title,
body.theme-hybrid .product-card .title{
  color:#0f172a;
}
body.theme-light .promo-card .desc,
body.theme-light .product-card .desc,
body.theme-hybrid .promo-card .desc,
body.theme-hybrid .product-card .desc{
  color:#475569;
}
body.theme-light .promo-card .price .real,
body.theme-light .product-card .price .real,
body.theme-hybrid .promo-card .price .real,
body.theme-hybrid .product-card .price .real{
  color:#0f172a;
  text-shadow:none;
}
body.theme-light .promo-card .price .old,
body.theme-light .product-card .price .old,
body.theme-hybrid .promo-card .price .old,
body.theme-hybrid .product-card .price .old{
  color:#9ca3af;
}

/* Botões */
body.theme-light .btn-cta.more,
body.theme-hybrid .btn-cta.more{
  color:#0f172a;
  border-color:#cbd5e1;
}
body.theme-light .btn-cta.more:hover,
body.theme-hybrid .btn-cta.more:hover{
  background:#eef2f7;
}
body.theme-light .btn-cta.wa,
body.theme-hybrid .btn-cta.wa{
  background:#22c55e; color:#0b0f19; border:1px solid #16a34a;
  box-shadow:0 4px 12px rgba(34,197,94,.18);
}

/* Categorias claras */
body.theme-light .cat,
body.theme-hybrid .cat{
  background:#ffffff;
  border:1px solid var(--line);
  color:#0f172a;
}
body.theme-light .cat:hover,
body.theme-hybrid .cat:hover{
  outline:2px solid #bfd3ff;
}

/* Dots claros */
body.theme-light .dots .dot,
body.theme-hybrid .dots .dot{
  background:#cbd5e1; opacity:.9;
}
body.theme-light .dots .dot.active,
body.theme-hybrid .dots .dot.active{
  background:#1d4ed8;
}

/* Setas claras */
body.theme-light .nav,
body.theme-hybrid .nav{
  background:#ffffffcc; color:#0f172a; border:1px solid #cfd7e6;
}
body.theme-light .nav:hover,
body.theme-hybrid .nav:hover{
  background:#fff; box-shadow:0 8px 18px rgba(15,23,42,.12);
}

/* Links auxiliares do footer */
body.theme-light .links a,
body.theme-hybrid .links a{ color:#cbd5e1 }

/* ======== Correção: manter tamanho do logo no DESKTOP ======== */
:root{ --logo-h: 96px; }  /* valor original no desktop */

@media (min-width: 769px){
  .topbar .container{ flex-direction: row; }             /* garante linha no desktop */
  .topbar .brand img{ height: var(--logo-h, 96px) !important; }
}

/* ======== Só no MOBILE: logo em cima e menor ======== */
@media (max-width: 768px){
  :root{ --logo-h: 34px; }   /* tamanho apenas no mobile */

  .topbar .container{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
  }

  .topbar .brand{ order: -1; }  /* logo em cima */
  .topbar .brand img{
    height: var(--logo-h, 34px);
    width: auto;
    display: block;
  }

  .main-nav{
    order: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
    font-size: .95rem;
  }
  .main-nav ul{
    margin:0; padding:0; list-style:none;
    display:flex; flex-wrap:wrap; justify-content:center; gap:12px 18px;
  }
}

/* ===== TOPBAR: logo com a MESMA altura da faixa (desktop) ===== */
:root{
  --topbar-h: 110px; /* ajuste aqui até ficar perfeito */
}

@media (min-width: 769px){

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

  .topbar .container{
    height: 100%;
    padding: 0 20px;            /* mantém espaço lateral */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .topbar .brand{
    height: 100%;
    display: flex;
    align-items: center;
  }

  .topbar .brand img{
    height: 100% !important;    /* logo vira do tamanho da faixa */
    width: auto !important;     /* sem deformar */
    display: block;
    object-fit: contain;
  }
}


/* ===== MOBILE: logo grande central + menu hambúrguer ===== */
@media (max-width: 768px){

  :root{
    --logo-h: 72px;   /* <== AUMENTA/DIMINUI o tamanho do logo no mobile */
    --pad: 12px;
  }

  /* usa a largura toda no mobile */
  .container{
    max-width: 100%;
    width: 100%;
    padding-left: var(--pad);
    padding-right: var(--pad);
  }

  .topbar .container{
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr 44px; /* burger | logo | “espelho” */
    align-items: center;
    gap: 8px;
    padding: 10px var(--pad);
  }

  /* Logo bem grande e centralizado */
  .topbar .brand{
    justify-self: center;
    height: auto;
    padding: 0;
    margin: 0;
  }
  .topbar .brand img{
    height: var(--logo-h) !important;
    width: auto !important;
    display: block;
    object-fit: contain;
  }

  /* Botão hambúrguer */
  .nav-toggle{
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    display: grid;
    gap: 6px;
    align-content: center;
    justify-items: center;
    cursor: pointer;
    padding: 0;
  }
  .nav-toggle span{
    width: 22px;
    height: 2px;
    background: rgba(255,255,255,.92);
    border-radius: 999px;
    display: block;
  }

  /* “espelho” pra manter o logo perfeitamente central */
  .nav-spacer{
    width: 44px;
    height: 44px;
    display: block;
  }

  /* Esconde o menu no mobile até abrir */
  .main-nav{
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #0d137f;
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding: 12px var(--pad) 16px;
    flex-direction: column;
    gap: 10px;
    z-index: 60;
  }

  /* Quando abre */
  .topbar.nav-open .main-nav{
    display: flex;
  }

  /* Links do menu */
  .main-nav a{
    display: block;
    text-align: center;
    padding: 12px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    color: #eaf0ff;
    font-weight: 600;
  }
  .main-nav a:hover{
    background: rgba(255,255,255,.12);
    color: #fff;
  }
}

/* ===== OVERLAY do menu (mobile) ===== */
@media (max-width: 768px){

  /* trava rolagem quando menu abre */
  body.nav-lock{
    overflow: hidden;
    touch-action: none;
  }

  /* backdrop por trás do menu */
  .topbar .nav-backdrop{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .55);
    backdrop-filter: blur(2px);
    z-index: 55; /* abaixo do menu (60) e acima da página */
  }

  .topbar.nav-open .nav-backdrop{
    display: block;
  }

  /* animação simples do menu descendo */
  .main-nav{
    transform: translateY(-8px);
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
  }

  .topbar.nav-open .main-nav{
    opacity: 1;
    transform: translateY(0);
  }

  /* opcional: transforma o hambúrguer em “X” */
  .topbar.nav-open .nav-toggle span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .topbar.nav-open .nav-toggle span:nth-child(2){
    opacity: 0;
  }
  .topbar.nav-open .nav-toggle span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }
  .nav-toggle span{
    transition: transform .15s ease, opacity .15s ease;
  }
}

/* =========================
   NAVBAR v2: Desktop + Mobile Drawer
   Cole no FINAL do CSS
   ========================= */

/* Desktop: mantém sua navbar normal */
@media (min-width: 769px){
  .topbar .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 20px;
  }

  .nav-toggle, .nav-spacer, .nav-backdrop{ display:none !important; }

  .main-nav{
    display:flex;
    gap:24px;
  }
}

/* Mobile: logo grande central + hamburger + drawer */
@media (max-width: 768px){
  :root{
    --logo-mobile-h: 68px;   /* aumenta aqui se quiser mais */
    --drawer-w: min(86vw, 320px);
  }

  /* NÃO deixa a topbar ficar gigante no mobile */
  .topbar{ height:auto !important; }

  .topbar .container{
    position: relative;
    display:grid;
    grid-template-columns: 44px 1fr 44px; /* burger | logo | espelho */
    align-items:center;
    padding: 10px 12px !important;
  }

  /* Logo grande e central */
  .topbar .brand{
    justify-self:center;
    display:flex;
    align-items:center;
  }
  .topbar .brand img{
    height: var(--logo-mobile-h) !important;
    width: auto !important;
    display:block;
    object-fit: contain;
  }

  /* Hambúrguer */
  .nav-toggle{
    width:44px; height:44px;
    border:0;
    background:transparent;
    display:grid;
    gap:6px;
    align-content:center;
    justify-items:center;
    cursor:pointer;
    padding:0;
  }
  .nav-toggle span{
    width:22px;
    height:2px;
    background: rgba(255,255,255,.95);
    border-radius:999px;
    transition: transform .18s ease, opacity .18s ease;
  }

  /* Espelho (só pra centralizar o logo perfeitamente) */
  .nav-spacer{ width:44px; height:44px; display:block; }

  /* Backdrop (overlay) */
  body.nav-lock{ overflow:hidden; touch-action:none; }

  .nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 90;
  }
  .topbar.nav-open .nav-backdrop{
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer menu (gaveta pela direita) */
  .main-nav{
    position: fixed;
    top: 0;
    right: 0;
    width: var(--drawer-w);
    height: 100vh;
    background: #0d137f;
    border-left: 1px solid rgba(255,255,255,.10);
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    transform: translateX(110%);
    transition: transform .20s ease;
    z-index: 100;
  }
  .topbar.nav-open .main-nav{
    transform: translateX(0);
  }

  .main-nav a{
    display:block;
    text-align:center;
    padding: 12px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #eaf0ff;
    font-weight: 700;
  }
  .main-nav a:hover{ background: rgba(255,255,255,.14); color:#fff; }

  /* Hambúrguer vira X */
  .topbar.nav-open .nav-toggle span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .topbar.nav-open .nav-toggle span:nth-child(2){
    opacity: 0;
  }
  .topbar.nav-open .nav-toggle span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* =========================
   NAV PATCH FINAL (cole no fim)
   ========================= */

/* trava scroll quando abre menu */
body.nav-lock{ overflow:hidden; touch-action:none; }

/* ===== DESKTOP: logo ocupando a faixa inteira ===== */
@media (min-width: 769px){
  .topbar{ height: var(--topbar-h, 110px) !important; }

  .topbar .container{
    height: 100% !important;
    padding: 0 20px !important;     /* mata padding que cria “faixa falsa” */
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  .topbar .brand{
    height: 100% !important;
    display:flex !important;
    align-items:center !important;
  }

  .topbar .brand img{
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    object-fit: contain;
  }

  .nav-toggle, .nav-spacer, .nav-backdrop{ display:none !important; }

  .main-nav{
    display:flex !important;
    gap:24px;
  }
}

/* ===== MOBILE: logo GRANDE + hambúrguer + drawer + overlay ===== */
@media (max-width: 768px){
  :root{
    --logo-mobile-h: 86px; /* AQUI aumenta o logo (era pequeno) */
    --drawer-w: min(86vw, 320px);
  }

  .topbar{ height:auto !important; }

  .topbar .container{
    display:grid !important;
    grid-template-columns: 44px 1fr 44px !important; /* burger | logo | espelho */
    align-items:center !important;
    padding: 12px 12px !important;
  }

  .topbar .brand{ justify-self:center !important; }
  .topbar .brand img{
    height: var(--logo-mobile-h) !important;
    width:auto !important;
  }

  .nav-toggle{
    width:44px; height:44px;
    border:0;
    background:transparent;
    display:grid;
    gap:6px;
    align-content:center;
    justify-items:center;
    cursor:pointer;
    padding:0;
    position: relative;
    z-index: 120; /* garante clique */
  }
  .nav-toggle span{
    width:22px;
    height:2px;
    background: rgba(255,255,255,.95);
    border-radius:999px;
    display:block;
    transition: transform .18s ease, opacity .18s ease;
  }

  .nav-spacer{ width:44px; height:44px; display:block; }

  /* overlay */
  .nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 90;
  }
  .topbar.nav-open + .nav-backdrop,
  .topbar.nav-open ~ .nav-backdrop{
    opacity: 1;
    pointer-events: auto;
  }
  .topbar.nav-open .nav-backdrop{
    opacity: 1;
    pointer-events: auto;
  }

  /* drawer */
  .main-nav{
    position: fixed;
    top: 0;
    right: 0;
    width: var(--drawer-w);
    height: 100vh;
    background: #0d137f;
    border-left: 1px solid rgba(255,255,255,.10);
    padding: 18px 14px;
    display:flex;
    flex-direction:column;
    gap:10px;

    transform: translateX(110%);
    transition: transform .20s ease;
    z-index: 110;
  }

  .topbar.nav-open .main-nav{
    transform: translateX(0);
  }

  .main-nav a{
    display:block;
    text-align:center;
    padding: 12px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #eaf0ff;
    font-weight: 700;
  }

  /* hambúrguer vira X */
  .topbar.nav-open .nav-toggle span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .topbar.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  .topbar.nav-open .nav-toggle span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* ===== MOBILE: LOGO BEM MAIOR + CENTRAL + TOPBAR MENOR ===== */
@media (max-width: 768px){

  /* controla o tamanho do logo aqui */
  :root{
    --logo-mobile-h: 130px;  /* << aumenta aqui (110/120/140) */
  }

  /* deixa a faixa azul mais “justa” no mobile */
  .topbar{
    height: auto !important;
    padding: 0 !important;
  }

  .topbar .container{
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important; /* burger | logo | espelho */
    align-items: center !important;
    padding: 10px 12px !important;
    min-height: calc(var(--logo-mobile-h) + 18px) !important; /* acompanha o logo */
  }

  /* logo centralizado no meio */
  .topbar .brand{
    justify-self: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .topbar .brand img{
    height: var(--logo-mobile-h) !important;
    width: auto !important;
    max-width: 92vw !important;  /* não estoura a tela */
    object-fit: contain !important;
  }

  /* hambúrguer sempre clicável e visível */
  .nav-toggle{
    position: relative !important;
    z-index: 200 !important;
  }

  .nav-spacer{
    display: block !important;
  }
}

/* ===== MOBILE: NAVBAR EM 2 COLUNAS (hamburguer + logo central gigante) ===== */
@media (max-width: 768px){

  /* grid apenas com 2 colunas */
  .topbar .container{
    display: grid !important;
    grid-template-columns: 44px 1fr !important; /* burger | logo */
    align-items: center !important;
    padding: 10px 12px !important;
  }

  /* hambúrguer colado à esquerda */
  .topbar .nav-toggle{
    grid-column: 1 / 2 !important;
    justify-self: start !important;
    z-index: 200 !important;
  }

  /* some com o espelho (não precisamos mais) */
  .topbar .nav-spacer{
    display: none !important;
  }

  /* logo sozinho na coluna 2 e CENTRALIZADO */
  .topbar .brand{
    grid-column: 2 / 3 !important;
    justify-self: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* logo maior */
  .topbar .brand img{
    height: 140px !important;     /* ajuste aqui: 120/140/160 */
    width: auto !important;
    max-width: 92vw !important;   /* não estoura tela */
    object-fit: contain !important;
    display: block !important;
  }
}

/* ===== MOBILE: LOGO CENTRAL + HAMBURGUER CENTRAL ABAIXO ===== */
@media (max-width: 768px){

  :root{
    --logo-mobile-h: 140px; /* ajuste aqui */
  }

  .topbar{ height:auto !important; }

  .topbar .container{
    display:flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px 12px !important;
  }

  /* Logo central grande */
  .topbar .brand{
    width: 100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
  }
  .topbar .brand img{
    height: var(--logo-mobile-h) !important;
    width: auto !important;
    max-width: 92vw !important;
    object-fit: contain !important;
    display:block !important;
  }

  /* Hambúrguer centralizado abaixo */
  .nav-toggle{
    width: 54px !important;
    height: 44px !important;
    border: 0 !important;
    background: rgba(255,255,255,.08) !important;
    border-radius: 12px !important;
    display: grid !important;
    gap: 6px !important;
    align-content: center !important;
    justify-items: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 200 !important;
  }
  .nav-toggle span{
    width: 26px !important;
    height: 2px !important;
    background: rgba(255,255,255,.95) !important;
    border-radius: 999px !important;
    display:block !important;
    transition: transform .18s ease, opacity .18s ease;
  }

  /* não precisa mais de spacer no mobile */
  .nav-spacer{ display:none !important; }
}