/* ================================================
   RESPONSIVIDADE FINAL - HEADER / NAV / MENU MOBILE
   ================================================ */

/* Esconde elementos mobile no desktop */
.nav-toggle {
  display: none;
}

.mobile-menu-overlay {
  display: none;
}

body.nav-open {
  overflow: hidden !important;
}

/* ================================================
   CENTRALIZAÇÃO DE PROMOÇÕES (TODAS TELAS)
   ================================================ */

.promo-rotator {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.promo-text {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

/* Garante que o bloco central do header sempre ocupe o meio */
#main_header .header-div:nth-child(2) {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

/* Evita que o JS "puxe" o nav pra cima e cause saltos/vãos */
nav#main_nav {
  transform: none !important;
}

/* ================================================
   TABLET (769px - 1024px)
   ================================================ */

@media (max-width: 1024px) and (min-width: 769px) {
  /* Layout fluindo, sem truque de padding-top no body */
  body {
    padding-top: 0 !important;
  }

  /* Header normal, centralizando promo */
  #main_header {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0.75rem 1.5rem;
    margin: 0;
  }

  /* Nav logo abaixo do header, sem vão */
  nav#main_nav {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 0.65rem 1.5rem;
    margin: 0 !important;
    transform: none !important;
  }

  .header-div a {
    font-size: 0.8rem;
  }

  #logo {
    width: 13rem;
  }

  .text_sections {
    font-size: 0.85rem;
  }
}

/* ================================================
   MOBILE (max-width: 768px)
   ================================================ */

@media (max-width: 768px) {
  /* Layout fluindo: sem posições fixas, sem vão entre header/nav */
  body {
    padding-top: 0 !important;
  }

  /* HEADER */
  #main_header {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 0.6rem 1rem !important;
    background: #ffffff !important;
    z-index: 1001 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
  }

  .header-div {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Idioma - esquerda */
  .header-div:nth-child(1) {
    order: 1 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Promoções - linha inteira centralizada */
  .header-div:nth-child(2) {
    order: 3 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-top: 0.4rem !important;
    justify-content: center !important;
  }

  /* Links - direita */
  .header-div.header-actions {
    order: 2 !important;
    flex: 1 !important;
    justify-content: flex-end !important;
  }

  .header-div a {
    font-size: 0.75rem !important;
    margin-left: 0.6rem !important;
  }

  .promo-text {
    font-size: 0.75rem !important;
  }

  /* NAV LOGO ABAIXO DO HEADER (sem gap) */
  nav#main_nav {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    height: 60px !important;
    min-height: 60px !important;
    background: #191919 !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Esconde menus laterais, só logo + hambúrguer */
  .nav-div.nav-left,
  .nav-div.nav-right {
    display: none !important;
  }

  .nav-div.nav-center {
    position: static !important;
    transform: none !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
  }

  #logo {
    width: 10rem !important;
    position: static !important;
    transform: none !important;
  }

  /* Botão hamburguer */
  .nav-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    gap: 4px;
  }

  .nav-toggle-bar {
    width: 24px;
    height: 2.5px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* HERO segue o fluxo normal (sem margens mágicas) */
  #hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Overlay menu */
  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .mobile-menu-overlay.is-open {
    display: flex !important;
    justify-content: flex-end;
    opacity: 1;
    visibility: visible;
  }

  /* Menu lateral */
  .mobile-menu {
    width: 85%;
    max-width: 360px;
    height: 100%;
    background: #111111;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .mobile-menu-overlay.is-open .mobile-menu {
    transform: translateX(0);
  }

  .mobile-menu-header {
    padding: 1.2rem 1.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #191919;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-menu-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
  }

  .mobile-menu-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-menu-body {
    flex: 1;
    padding: 1.5rem 1.3rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .mobile-menu-nav a {
    padding: 0.85rem 1rem;
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 8px;
    transition: background 0.2s;
  }

  .mobile-menu-nav a:active {
    background: rgba(203, 19, 19, 0.2);
  }

  .mobile-menu-secondary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-menu-secondary a {
    padding: 0.7rem 1rem;
    color: #cccccc;
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 6px;
  }

  .mobile-menu-secondary .admin-link {
    color: rgb(223, 16, 16);
    font-weight: 600;
  }

  .mobile-menu-footer {
    padding: 1.2rem 1.3rem;
    background: #0a0a0a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-menu-footer-icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
  }

  .mobile-menu-footer-icons a {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
  }

  .mobile-menu-footer-icons .icons {
    width: 1.5rem;
    margin-right: 0;
  }
}

/* ================================================
   MOBILE PEQUENO (max-width: 480px)
   ================================================ */

@media (max-width: 480px) {
  #main_header {
    padding: 0.5rem 0.8rem !important;
  }

  .header-div a {
    font-size: 0.7rem !important;
  }

  .promo-text {
    font-size: 0.7rem !important;
  }

  nav#main_nav {
    padding: 0.7rem 0.8rem !important;
    height: 56px !important;
  }

  #logo {
    width: 8.5rem !important;
  }

  .nav-toggle {
    width: 36px;
    height: 36px;
  }

  .nav-toggle-bar {
    width: 22px;
  }

  #hero {
    margin-top: 0 !important;
  }

  .mobile-menu {
    width: 92%;
  }

  .mobile-menu-nav a {
    font-size: 0.95rem;
  }

  .mobile-menu-secondary a {
    font-size: 0.85rem;
  }
}

/* ============================================
   CORREÇÃO FINAL DO HEADER-PROMO (FULL/MOBILE)
   ============================================ */

/* Sempre centralizar o container do promo */
#main_header .header-div:nth-child(2) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* O texto ocupa sempre todo o espaço e nunca desloca */
#main_header .promo-text {
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Bloco esquerdo e direito NÃO podem empurrar o centro */
#main_header .header-div:nth-child(1),
#main_header .header-actions {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* No desktop a mesma regra vale */
@media (min-width: 1025px) {
  #main_header .header-div:nth-child(2) {
    flex: 1 1 auto !important;
    width: auto !important;
  }
}

/* ===========================
   AJUSTE FINAL DA PROMOÇÃO
   =========================== */

/* DESKTOP / TABLET: centralizar o texto no header, independente dos lados */
@media (min-width: 769px) {
  /* garante que o header é o contexto para o posicionamento absoluto */
  #main_header {
    position: fixed; /* já é fixed no seu CSS, só reforçando */
    top: 0;
    left: 0;
    right: 0;
  }

  /* promo sempre exatamente no centro do header */
  #main_header .promo-rotator {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap; /* impede “quebra” estranha quando o texto troca */
    pointer-events: none; /* evita clicar sem querer na área da promo */
  }

  #main_header .promo-text {
    display: inline-block;
    text-align: center;
  }
}

/* MOBILE: remove o texto de promo para não poluir o topo */
@media (max-width: 768px) {
  #main_header .promo-rotator {
    display: none;
  }
}

/* ============================================
   FIX DEFINITIVO - TEXTO DE PROMOÇÃO DO HEADER
   ============================================ */

/* DESKTOP / TABLET: promo fixa, sem sair do lugar */
@media (min-width: 769px) {
  /* volta o header para flex simples (3 blocos) */
  #main_header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* coluna central com largura fixa -> não anda nunca */
  #main_header .header-div:nth-child(2) {
    flex: 0 0 420px !important;      /* largura constante */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
  }

  /* limpa qualquer posição absoluta anterior da promo */
  #main_header .promo-rotator {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: auto !important;
  }

  #main_header .promo-text {
    display: inline-block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;   /* não quebra quando o texto troca */
    margin: 0 auto !important;
  }
}

/* MOBILE / HAMBÚRGUER: some com a promoção do topo */
@media (max-width: 768px) {
  #main_header .promo-rotator {
    display: none !important;
  }
}

/* ============================================
   FIX DEFINITIVO - TEXTO DE PROMOÇÃO DO HEADER
   ============================================ */

/* DESKTOP / TABLET: promo fixa, sem sair do lugar */
@media (min-width: 769px) {
  /* volta o header para flex simples (3 blocos) */
  #main_header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* coluna central com largura fixa -> não anda nunca */
  #main_header .header-div:nth-child(2) {
    flex: 0 0 420px !important;      /* largura constante */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
  }

  /* limpa qualquer posição absoluta anterior da promo */
  #main_header .promo-rotator {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: auto !important;
  }

  #main_header .promo-text {
    display: inline-block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;   /* não quebra quando o texto troca */
    margin: 0 auto !important;
  }
}

/* MOBILE / HAMBÚRGUER: some com a promoção do topo */
@media (max-width: 768px) {
  #main_header .promo-rotator {
    display: none !important;
  }
}

/* ============================================
   PROMO FIXA NO CENTRO (DESKTOP)
   ============================================ */

@media (min-width: 1025px) {

  /* HEADER = 3 COLUNAS, NÃO SE MOVE */
  #main_header {
    display: grid !important;
    grid-template-columns: auto 420px auto !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 20px !important;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
  }

  /* COLUNA DO CENTRO = PROMO */
  #main_header .header-div:nth-child(2) {
    grid-column: 2 !important;
    width: 420px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* PROMO = CENTRALIZADA E IMÓVEL */
  #main_header .promo-rotator {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #main_header .promo-text {
    display: inline-block !important;
    text-align: center !important;
    white-space: nowrap !important;   /* impede quebrar linha */
    width: auto !important;
  }
}

/* ============================================
   MOBILE → PROMO SOME (como você pediu)
   ============================================ */

@media (max-width: 1024px) {
  #main_header .promo-rotator {
    display: none !important;
  }
}

/* ============================================
   FIX DEFINITIVO - PROMO CENTRAL NO DESKTOP
   ============================================ */

/* DESKTOP / NOTEBOOK */
@media (min-width: 1025px) {

  /* volta o header para o comportamento base */
  #main_header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }

  /* coluna central volta a ser "auto" */
  #main_header .header-div:nth-child(2) {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
  }

  /* promo segue a regra original: span absoluto no centro */
  #main_header .promo-rotator {
    position: relative !important;
    width: auto !important;
    display: block !important;
  }

  #main_header .promo-text {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: inline-block !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
}

/* MOBILE / TABLET: promo continua escondida como já está */
@media (max-width: 1024px) {
  #main_header .promo-rotator {
    display: none !important;
  }
}

/* =======================================================
   FIX ABSOLUTO: CENTRALIZAÇÃO REAL DO TEXTO DE PROMOÇÃO
   ======================================================= */

/* DESKTOP / NOTEBOOK */
@media (min-width: 1025px) {

  /* Promo vira elemento fixo centralizado na viewport */
  #main_header .promo-rotator {
    position: fixed !important;
    top: 15px !important;                /* ajuste fino da altura */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    width: auto !important;
    display: block !important;
    pointer-events: none !important;     /* não interfere no header */
  }

  #main_header .promo-text {
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    white-space: nowrap !important;
    margin: 0 !important;
    text-align: center !important;
  }
}

/* MOBILE / TABLET → promo some */
@media (max-width: 1024px) {
  #main_header .promo-rotator {
    display: none !important;
  }
}