/* ==========================================================================
   MAKRO CHUÍ - EXACT VISUAL DESIGN SYSTEM (GROUNDED IN OFFICIAL SCREENSHOTS)
   ========================================================================== */

:root {
  --color-dark-banner: #003f0b;
  --color-footer-bg: #002d08;
  --color-primary-red: #d71e20;
  --color-primary-green: #0db14b;
  --color-primary-orange: #f97316;
  --color-light-mint: #f0fdf4;
  --color-section-bg: #f3fbf6;
  --color-card-bg: #ffffff;
  --color-border: #e2e8f0;
  --color-border-green: #bbf7d0;
  --color-text-dark: #0f172a;
  --color-text-muted: #475569;
  --color-waze: #00c0ff;
  --color-maps: #2563eb;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.12);
  --radius-pill: 9999px;
  --radius-card: 16px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
  color: var(--color-text-dark);
  line-height: 1.5;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   CONTAINER GENÉRICO — usado por Encarte, Dias, Lojas, Cotização,
   Restaurante e o banner do App. Mesma largura/padding dos demais
   *-container (header, hero, footer) para manter o alinhamento consistente
   em qualquer tamanho de tela.
   -------------------------------------------------------------------------- */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 480px) {
  .container,
  .header-container,
  .hero-container,
  .footer-container {
    padding: 0 16px;
  }
}

/* --------------------------------------------------------------------------
   LANGUAGE SWITCHER (in header)
   -------------------------------------------------------------------------- */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}

.lang-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.lang-btn:hover {
  color: var(--color-text-dark);
}

.lang-btn.active {
  background: var(--color-primary-green);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   SITE HEADER
   -------------------------------------------------------------------------- */
.site-header {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 12px 0;
  box-shadow: var(--shadow-sm);
}

.header-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo-svg {
  height: 42px;
  width: auto;
}

.brand-slogan {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-size: 15px;
  color: #274e13;
  font-weight: 700;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-link {
  color: var(--color-text-dark);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--color-primary-green);
}

.btn-header-cta {
  background: var(--color-primary-red);
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(215, 30, 32, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-header-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(215, 30, 32, 0.4);
}

/* --------------------------------------------------------------------------
   MENU HAMBÚRGUER (tablet & mobile) — evita que os 5 links + seletor de
   idioma + 2 botões do header quebrem o layout em telas estreitas.
   -------------------------------------------------------------------------- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: transparent;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
}

.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2.5px;
  background: var(--color-text-dark);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1239px) {
  .nav-hamburger {
    display: flex;
  }

  .header-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: #ffffff;
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
  }

  .header-nav.is-open {
    max-height: 70vh;
    overflow-y: auto;
    opacity: 1;
    padding: 14px 20px 20px 20px;
  }

  .header-nav .nav-link {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .header-nav .lang-switcher {
    align-self: flex-start;
    margin: 8px 0;
  }

  .header-nav .btn-header-cta {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }
}

/* header-container tops out at max-width:1240px no matter how wide the
   viewport gets, so the nav's available room is a FIXED ~1200px budget from
   1240px up — never bigger on wider monitors. The nav only renders in this
   horizontal form at >=1240px (see the 1239px hamburger cutoff above), so
   this compact spacing must comfortably clear that fixed 1200px ceiling. */
@media (min-width: 1240px) {
  /* A tagline decorativa cede espaço para o nav horizontal (ela já aparece
     de novo no rodapé, e no header quando o nav está recolhido no menu
     hambúrguer, onde há espaço de sobra). */
  .brand-slogan {
    display: none;
  }

  .header-nav {
    gap: 8px;
    /* 7 nav-links + seletor de idioma + CTA já ocupam quase todo o
       orçamento fixo de ~1200px; se não couberem numa linha só, quebra
       para uma segunda linha em vez de estourar a largura do header. */
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }

  .nav-link {
    font-size: 12.5px;
    gap: 4px;
    white-space: nowrap;
  }

  .btn-header-cta {
    padding: 9px 16px;
    font-size: 12.5px;
    white-space: nowrap;
  }

  .lang-btn {
    font-size: 10.5px;
    padding: 5px 8px;
  }
}

/* --------------------------------------------------------------------------
   HERO SECTION
   -------------------------------------------------------------------------- */
.hero-section {
  background-color: var(--color-light-mint);
  padding: 40px 0 44px 0;
  position: relative;
}

.hero-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  /* Alinha os topos das duas colunas (badge ≈ topo da imagem) em vez de
     centralizar verticalmente — evita espaço vazio desigual dos dois lados. */
  align-items: start;
}

.category-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #dcfce7;
  border: 1px solid var(--color-border-green);
  color: var(--color-primary-green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
  text-transform: uppercase;
}

.hero-title {
  font-size: 44px;
  font-weight: 900;
  line-height: 1.15;
  color: var(--color-text-dark);
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}

.hero-title span {
  color: var(--color-primary-green);
}

.hero-subtitle {
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 540px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.btn-pill-red {
  background: var(--color-primary-red);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(215, 30, 32, 0.35);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.btn-pill-red:hover {
  transform: translateY(-2px);
}

.btn-pill-outline {
  background: #ffffff;
  color: var(--color-text-dark);
  font-weight: 800;
  font-size: 14px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #cbd5e1;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-pill-outline:hover {
  background: #f8fafc;
}

/* Faixa inferior do Hero (características + CTA do App lado a lado),
   ocupando toda a largura do grid do Hero — abaixo das duas colunas
   (texto e imagens), não dentro delas. */
.hero-bottom-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin-top: 16px;
}

.hero-bottom-row .hero-features-grid {
  flex: 1.7;
  min-width: 0;
}

/* Entre o fim do Hero em 2 colunas (992px) e o empilhamento total em
   mobile (600px), a faixa inferior já é larga o bastante para ficar lado a
   lado, mas 4 colunas ficam estreitas demais para textos como "Estacionamento
   Grátis" — muda para 2x2 nessa faixa intermediária. */
@media (max-width: 900px) {
  .hero-bottom-row .hero-features-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.hero-bottom-row .hero-app-banner {
  flex: 1;
  min-width: 0;
  /* era pensado para ficar empilhado abaixo de outro conteúdo (por isso o
     margin-top original); aqui é um irmão flex ao lado das características,
     então o margin-top desalinharia os dois topos — zera só neste contexto. */
  margin-top: 0;
}

.hero-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.feature-mini-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* item de grid com texto: sem isso, o track "1fr" não encolhe abaixo do
     min-content do texto e a grade estoura a largura do card na faixa
     inferior do Hero (mais estreita que a largura total da seção). */
  min-width: 0;
}

.feature-mini-card > div:last-child {
  min-width: 0;
}

.feature-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: #eef8f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  color: var(--color-primary-green);
}

.feature-icon-box--letter {
  font-size: 20px;
  font-weight: 900;
  font-family: 'Baloo 2', sans-serif;
}

.feature-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-dark);
  line-height: 1.2;
  margin-bottom: 2px;
}

.feature-desc {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.hero-encarte-preview-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 12px;
  box-shadow: var(--shadow-lg);
  border: 1px solid #cbd5e1;
  position: relative;
}

.hero-encarte-img-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 14px;
}

/* Altura travada (em vez de altura livre pela proporção do folheto, que é
   bem mais alto que largo) para o card caber no mesmo espaço vertical da
   coluna de texto — object-fit:cover garante que a imagem não deforme,
   só recorta; object-position:top mantém visível o topo do encarte
   ("OFERTAS DA SEMANA"), a parte mais importante para reconhecer de relance. */
.hero-encarte-img {
  width: 100%;
  height: 300px;
  border-radius: 14px;
  display: block;
  object-fit: cover;
  object-position: top center;
}

/* Rodapé do card do Hero: vigência + contador + acesso ao Explorar Ofertas,
   substituindo o antigo overlay flutuante sobre a imagem. */
.hero-encarte-footer {
  background: var(--color-dark-banner);
  border-radius: 14px;
  margin-top: 12px;
  padding: 14px 16px;
  color: #ffffff;
}

.hero-encarte-status-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.encarte-overlay-tag {
  font-size: 10.5px;
  font-weight: 800;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

.encarte-overlay-tag.is-expired {
  color: #f87171;
}

.hero-encarte-date {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

.hero-encarte-countdown {
  font-size: 12px;
  font-weight: 700;
  color: #4ade80;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.btn-explorer-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--color-primary-red);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(215, 30, 32, 0.35);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.btn-explorer-hero:hover {
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   BANNERS SECUNDÁRIOS DO HERO — Ferragens / Cafeteria, independentes entre
   si (cada um leva direto à sua própria seção real, sem carrossel
   compartilhado nem depender um do outro).
   -------------------------------------------------------------------------- */
.hero-mini-banners-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.hero-mini-banner {
  position: relative;
  display: block;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-mini-banner:hover,
.hero-mini-banner:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.hero-mini-banner:hover .hero-mini-banner-img {
  transform: scale(1.06);
}

.hero-mini-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Logo do Makro Café (fundo branco, texto pequeno) precisa aparecer
   INTEIRO e legível — "cover" (padrão acima) cortava o topo/texto pra
   preencher a caixa. "contain" encolhe a imagem mantendo a proporção, sem
   nunca ultrapassar o tamanho atual do banner, e o fundo branco preenche o
   espaço sobrando (mesmo branco do próprio PNG, sem "salto" de cor). */
.hero-mini-banner-img--contain {
  object-fit: contain;
  background: #ffffff;
}

.hero-mini-banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 20, 8, 0.82) 100%);
}

.hero-mini-banner-label {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.2px;
}

/* Distribuição horizontal do Hero em telas largas: Textos | Encarte |
   Ferragens/Cafeteria (essas duas empilhadas ao lado do encarte, já que
   lado a lado ficariam estreitas demais). Abaixo de 993px mantém-se o
   comportamento padrão (empilhado) já existente, sem nenhuma alteração. */
@media (min-width: 993px) {
  .hero-container {
    grid-template-columns: 1fr 1.3fr;
  }

  .hero-right-preview {
    display: flex;
    align-items: stretch;
    gap: 12px;
  }

  .hero-encarte-preview-card {
    flex: 1.6;
    min-width: 0;
  }

  .hero-mini-banners-row {
    flex: 1;
    min-width: 0;
    margin-top: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .hero-mini-banner {
    height: 100%;
  }
}

/* --------------------------------------------------------------------------
   ENCARTE SECTION
   -------------------------------------------------------------------------- */
.encarte-section {
  background-color: var(--color-section-bg);
  padding: 44px 0;
  text-align: center;
}

.section-badge-center {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #dcfce7;
  border: 1px solid var(--color-border-green);
  color: var(--color-primary-green);
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.section-main-title {
  font-size: 34px;
  font-weight: 900;
  color: var(--color-text-dark);
  margin-bottom: 10px;
}

.section-main-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  max-width: 620px;
  margin: 0 auto 22px auto;
  line-height: 1.5;
}

.encarte-banner-bar {
  background: var(--color-dark-banner);
  color: #ffffff;
  max-width: 860px;
  margin: 0 auto 24px auto;
  padding: 14px 24px;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-md);
}

.encarte-banner-title {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.encarte-banner-sub {
  font-size: 11px;
  color: #86efac;
  font-weight: 600;
  margin-top: 2px;
  transition: color 0.2s ease;
}

.encarte-banner-sub.is-expired {
  color: #fca5a5;
}

.encarte-banner-countdown {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.encarte-toggles-wrap {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}

.btn-toggle-active {
  background: var(--color-dark-banner);
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}

.btn-toggle-inactive {
  background: #ffffff;
  color: var(--color-text-dark);
  font-weight: 800;
  font-size: 13px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid #cbd5e1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}

.encarte-viewer-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
  max-width: 440px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

.encarte-graphic-img {
  width: 100%;
  border-radius: 12px;
  display: block;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.btn-green-full {
  background: var(--color-primary-green);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  padding: 13px 20px;
  border-radius: 12px;
  width: 100%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(13, 177, 75, 0.3);
  margin-bottom: 12px;
  text-decoration: none;
}

.btn-outline-full {
  background: #ffffff;
  color: var(--color-text-dark);
  font-weight: 800;
  font-size: 13px;
  padding: 11px 20px;
  border-radius: 12px;
  width: 100%;
  border: 1.5px solid #cbd5e1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   DÍAS ESPECIALES SECTION
   -------------------------------------------------------------------------- */
.dias-section {
  background-color: #ffffff;
  padding: 44px 0;
  text-align: center;
}

.dias-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
  align-items: stretch;
}

.dia-card {
  background: #ffffff;
  border: 1.5px solid var(--color-border);
  border-radius: 18px;
  padding: 24px 20px;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dia-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.dia-card.is-today {
  border-color: var(--color-primary-red);
  box-shadow: 0 8px 25px rgba(215, 30, 32, 0.2);
}

.today-top-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-primary-red);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.dia-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 6px;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 14px;
  width: fit-content;
}

.dia-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.dia-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--color-text-dark);
  margin-bottom: 8px;
}

.dia-desc {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin-bottom: 10px;
}

/* Horário de disponibilidade do dia especial */
.dia-availability {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  width: fit-content;
  margin-bottom: 14px;
}

.dia-availability.dia-availability-special {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.dia-pill-footer {
  background: #f1f5f9;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  width: fit-content;
  display: inline-flex;
  align-items: center;
}

/* Garante que o atributo `hidden` realmente oculte o selo (a classe acima
   define `display`, que sem isso venceria o `display:none` nativo do
   [hidden] por estarem empatados em especificidade). */
.dia-pill-footer[hidden] {
  display: none;
}

/* Estado en vivo del Restaurante (tarjeta de Domingo) */
.dia-pill-footer.status-open {
  background: #dcfce7;
  color: var(--color-primary-green);
  border: 1px solid var(--color-border-green);
  font-weight: 800;
}

.dia-pill-footer.status-closed {
  background: #fee2e2;
  color: var(--color-primary-red);
  border: 1px solid #fecaca;
  font-weight: 800;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
}

.status-dot.dot-open {
  background: var(--color-primary-green);
  animation: statusPulse 1.6s ease-in-out infinite;
}

.status-dot.dot-closed {
  background: var(--color-primary-red);
}

.status-dot.dot-pause {
  background: #d97706;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13, 177, 75, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(13, 177, 75, 0); }
}

/* --------------------------------------------------------------------------
   STORES SECTION
   -------------------------------------------------------------------------- */
.stores-section {
  background-color: var(--color-section-bg);
  padding: 44px 0;
  text-align: center;
}

.store-tabs-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.store-tab-pill {
  background: #e2e8f0;
  color: var(--color-text-dark);
  font-weight: 800;
  font-size: 13px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.store-tab-pill.active {
  background: var(--color-dark-banner);
  color: #ffffff;
  box-shadow: var(--shadow-md);
}

.store-detail-card {
  background: #ffffff;
  border-radius: 24px;
  max-width: 1040px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  text-align: left;
}

.store-detail-info {
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.store-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.store-badges-row .store-status-pill {
  margin-bottom: 0;
}

.store-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
  width: fit-content;
}

.store-status-pill.is-open {
  background: #dcfce7;
  color: var(--color-primary-green);
  border: 1px solid var(--color-border-green);
}

.store-status-pill.is-closed {
  background: #fee2e2;
  color: var(--color-primary-red);
  border: 1px solid #fecaca;
}

.store-status-pill.is-pause {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Contador regressivo de fechamento — só aparece nos últimos 30 min */
.store-closing-countdown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: #f0fdf4;
  border: 1.5px solid var(--color-border-green);
  border-radius: 14px;
  padding: 10px 16px;
  margin-bottom: 14px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}

.store-closing-countdown[hidden] {
  display: none;
}

.store-closing-countdown-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.4px;
  color: var(--color-primary-green);
  text-transform: uppercase;
}

.store-closing-countdown-value {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-dark-banner);
  font-variant-numeric: tabular-nums;
}

.store-closing-countdown-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Semáforo: 15-5min restantes = laranja (alerta) */
.store-closing-countdown.is-warning {
  background: #fff7ed;
  border-color: #fed7aa;
}

.store-closing-countdown.is-warning .store-closing-countdown-label,
.store-closing-countdown.is-warning .store-closing-countdown-value {
  color: #c2410c;
}

.store-closing-countdown.is-urgent {
  background: #fef2f2;
  border-color: #fecaca;
  animation: storeClosingPulse 1.2s ease-in-out infinite;
}

.store-closing-countdown.is-urgent .store-closing-countdown-label,
.store-closing-countdown.is-urgent .store-closing-countdown-value {
  color: var(--color-primary-red);
}

@keyframes storeClosingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(215, 30, 32, 0.15); }
  50% { box-shadow: 0 0 0 6px rgba(215, 30, 32, 0); }
}

/* Contador regressivo de ABERTURA — só aparece nos últimos 30 min antes de
   abrir. Mesma estrutura/tamanho do contador de fechamento acima, mas
   sempre com fundo SÓLIDO e números brancos (pedido explícito do cliente):
   30-15min restantes = vermelho (mesmo tom do botão "Consultar Ferragens
   por WhatsApp"), 15-5min = laranja, últimos 5min = verde — ordem invertida
   da do fechamento (lá começa verde/calmo e termina vermelho/urgente; aqui
   começa vermelho/"ainda fechada" e termina verde/"já vai abrir"). */
.store-opening-countdown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border-radius: 14px;
  padding: 10px 16px;
  margin-bottom: 14px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  border: 1.5px solid transparent;
}

.store-opening-countdown[hidden] {
  display: none;
}

.store-opening-countdown.tier-red {
  background: var(--color-primary-red);
  border-color: var(--color-primary-red);
  animation: storeClosingPulse 1.2s ease-in-out infinite;
}

.store-opening-countdown.tier-orange {
  background: var(--color-primary-orange);
  border-color: var(--color-primary-orange);
}

.store-opening-countdown.tier-green {
  background: var(--color-primary-green);
  border-color: var(--color-primary-green);
}

.store-opening-countdown.tier-red .store-closing-countdown-label,
.store-opening-countdown.tier-red .store-closing-countdown-value,
.store-opening-countdown.tier-red .store-closing-countdown-sub,
.store-opening-countdown.tier-orange .store-closing-countdown-label,
.store-opening-countdown.tier-orange .store-closing-countdown-value,
.store-opening-countdown.tier-orange .store-closing-countdown-sub,
.store-opening-countdown.tier-green .store-closing-countdown-label,
.store-opening-countdown.tier-green .store-closing-countdown-value,
.store-opening-countdown.tier-green .store-closing-countdown-sub {
  color: #ffffff;
}

@media (max-width: 600px) {
  .store-opening-countdown {
    width: 100%;
  }

  .store-opening-countdown .store-closing-countdown-value {
    font-size: 22px;
  }
}

@media (max-width: 600px) {
  .store-closing-countdown {
    width: 100%;
  }

  .store-closing-countdown-value {
    font-size: 22px;
  }
}

/* Classificação Minorista / Mayorista+Minorista de cada loja */
.store-retail-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  width: fit-content;
}

.store-retail-badge.is-retail {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.store-retail-badge.is-wholesale {
  background: #fef3c7;
  color: #92400e;
  border: 1.5px solid #fbbf24;
}

.store-name-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--color-text-dark);
  margin-bottom: 4px;
}

.store-tagline {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.store-address-box {
  font-size: 13px;
  color: var(--color-text-dark);
  margin-bottom: 16px;
}

.store-schedule-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.schedule-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  margin-bottom: 4px;
}

.schedule-row strong {
  color: var(--color-text-dark);
}

.schedule-row span {
  color: var(--color-primary-green);
  font-weight: 800;
}

.store-features-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.store-features-note {
  width: 100%;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.feature-tag-pill {
  background: #f1f5f9;
  color: var(--color-text-dark);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Serviços exclusivos de uma loja (ex: Carga Elétrica, Cafeteria e
   Ferragens só existem no Makro II) ganham um selo em destaque */
.feature-tag-pill.feature-tag-highlight {
  background: #fef3c7;
  color: #92400e;
  border: 1.5px solid #fcd34d;
  font-weight: 900;
}

.store-actions-row {
  display: flex;
  gap: 12px;
}

.btn-waze {
  background: var(--color-waze);
  color: #ffffff;
  font-weight: 800;
  font-size: 13.5px;
  padding: 12px 24px;
  border-radius: 12px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
}

.btn-maps {
  background: var(--color-maps);
  color: #ffffff;
  font-weight: 800;
  font-size: 13.5px;
  padding: 12px 24px;
  border-radius: 12px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
}

.store-photo-col {
  width: 100%;
  height: 100%;
  min-height: 380px;
  background-size: cover;
  background-position: center;
}

/* QR de Google Maps por loja (troca junto com o botão "Google Maps" —
   ver selectStoreTab em app.js) */
.store-qr-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
}

.store-qr-img {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 4px;
}

.store-qr-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.store-qr-text strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-dark);
}

.store-qr-text span {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   CALCULADORA DE AHORRO FRONTERIZO
   -------------------------------------------------------------------------- */
.calc-section {
  background-color: var(--color-section-bg);
  padding: 44px 0;
  text-align: center;
}

.calc-card-container {
  background: #f4fbf7;
  border: 1.5px solid var(--color-border-green);
  border-radius: 24px;
  max-width: 820px;
  margin: 0 auto;
  padding: 32px;
  box-shadow: var(--shadow-md);
  text-align: left;
}

.calc-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 16px;
}

.calc-input-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: 8px;
  display: block;
}

.calc-select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: var(--color-text-dark);
  font-size: 14.5px;
  font-weight: 800;
  outline: none;
  cursor: pointer;
}

.calc-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.calc-input-wrap .currency-symbol {
  position: absolute;
  left: 16px;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text-dark);
}

.calc-input-wrap input {
  width: 100%;
  padding: 12px 16px 12px 36px;
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: var(--color-text-dark);
  font-size: 18px;
  font-weight: 900;
  outline: none;
}

/* Atalhos rápidos em Reais — mesma largura do campo de valor acima:
   R$100 na ponta esquerda, R$200 no centro, R$500 na ponta direita, sem
   passar da borda do campo. */
.calc-quick-brl-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.calc-quick-suggestions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.calc-quick-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--color-text-dark);
  cursor: pointer;
  transition: all 0.2s ease;
}

.calc-quick-btn:hover {
  background: #eef8f2;
  border-color: var(--color-primary-green);
  color: var(--color-primary-green);
}

.calc-result-box {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-primary-green);
  padding: 24px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.calc-result-main-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: 4px;
}

.calc-result-primary-val {
  font-size: 32px;
  font-weight: 900;
  color: var(--color-dark-banner);
  line-height: 1.1;
  margin-bottom: 6px;
}

.calc-result-secondary-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 6px;
}

.calc-result-savings-highlight {
  font-size: 13px;
  font-weight: 900;
  color: var(--color-primary-green);
}

.calc-result-info-col {
  border-left: 1.5px solid #e2e8f0;
  padding-left: 20px;
  display: flex;
  align-items: stretch;
  gap: 14px;
}

.calc-info-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calc-info-block {
  font-size: 11.5px;
  color: var(--color-text-muted);
}

.calc-info-block strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: 3px;
}

/* Notas de moeda no espaço vazio à direita das taxas/formas de pagamento —
   em leque, ligeiramente sobrepostas e rotacionadas (efeito "maço de
   notas"), empilhadas de baixo para cima: Dólar, Real, Peso Uruguaio (ver
   ordem no HTML). --coin-w controla o tamanho e escala por breakpoint. */
.calc-info-currency-images {
  --coin-w: 64px;
  --coin-h: calc(var(--coin-w) * 0.46);
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--coin-w) + 22px);
  height: calc(var(--coin-h) * 2.95);
}

.calc-currency-thumb {
  position: absolute;
  width: var(--coin-w);
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.calc-currency-thumb:nth-child(1) {
  top: 0;
  left: 22px;
  transform: rotate(-8deg);
  z-index: 3;
}

.calc-currency-thumb:nth-child(2) {
  top: calc(var(--coin-h) * 0.95);
  left: 0;
  transform: rotate(6deg);
  z-index: 2;
}

.calc-currency-thumb:nth-child(3) {
  top: calc(var(--coin-h) * 1.9);
  left: 18px;
  transform: rotate(-4deg);
  z-index: 1;
}

.calc-currency-thumb:hover {
  transform: scale(1.14) rotate(0deg) translateY(-3px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.32);
  z-index: 5;
}

@media (min-width: 601px) {
  .calc-info-currency-images {
    --coin-w: 84px;
  }
}

@media (min-width: 993px) {
  .calc-info-currency-images {
    --coin-w: 104px;
  }
}

/* --------------------------------------------------------------------------
   RESTAURANTE MAKRO CHUÍ SECTION
   -------------------------------------------------------------------------- */
.restaurante-section {
  background-color: #0b160e;
  color: #ffffff;
  padding: 52px 0;
  position: relative;
}

.restaurante-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(234, 88, 12, 0.2);
  border: 1px solid #ea580c;
  color: #fb923c;
  font-size: 11.5px;
  font-weight: 900;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.restaurante-title {
  font-size: 36px;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 4px;
}

.restaurante-subtitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-green);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0 0 16px;
}

.restaurante-desc {
  font-size: 14.5px;
  color: #cbd5e1;
  max-width: 620px;
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.6;
}

.restaurante-live-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

/* .store-status-pill traz margin-bottom:14px do seu uso na seção de lojas;
   aqui, dentro da linha flex do restaurante, isso desalinha o selo em
   relação ao contador ao lado — zera só neste contexto. */
.restaurante-live-row .store-status-pill {
  margin-bottom: 0;
}

.restaurante-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #4ade80;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  line-height: 1.4;
}

.restaurante-countdown[hidden] {
  display: none;
}

.restaurante-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Só na seção Restaurante (não em Cafeteria/Ferragens, que reaproveitam a
   mesma classe): stretch em vez de center, para a foto única ocupar a MESMA
   altura da coluna de texto (do subtítulo até o botão), sem precisar de
   nenhum valor fixo em px que quebraria ao trocar de idioma ou de tela. */
#restaurante .restaurante-grid,
#ferreteria .restaurante-grid {
  align-items: stretch;
}

.restaurante-features-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.restaurante-feature-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rest-feature-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

.rest-feature-header span {
  font-size: 18px;
}

.rest-feature-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

.restaurante-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
}

.btn-restaurante-wa {
  background: var(--color-primary-red);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(215, 30, 32, 0.4);
}

.btn-restaurante-location {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-weight: 800;
  font-size: 13.5px;
  padding: 12px 24px;
  border-radius: 12px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* QR do Kayta Restaurante — mesma mapsUrl do Makro II (ver botão
   "Localização do Restaurante" acima e qr-makro2.png em imagen/qr/). */
.rest-qr-box {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 14px;
  max-width: 380px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
}

.rest-qr-img {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  background: #ffffff;
  border-radius: 8px;
  padding: 4px;
}

.rest-qr-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rest-qr-text strong {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.rest-qr-text span {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.35;
}

.restaurante-photos-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.restaurante-photo-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Restaurante agora tem só 1 foto real (a de stock foi removida). Com
   #restaurante .restaurante-grid em align-items:stretch (acima), esta coluna
   já nasce com a MESMA altura da coluna de texto — só falta a imagem (e o
   grid interno de 1 coluna) preencherem 100% dessa altura recebida. */
.restaurante-photos-col--single {
  grid-template-columns: 1fr;
}

.restaurante-photos-col--single .restaurante-photo-img {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   CAFETERIA E FERRAGENS — mesma estrutura do Restaurante (título, grid de
   características, ações, coluna de fotos: classes .restaurante-* acima,
   reaproveitadas tal como estão), só com fundo e selo de cor própria para
   dar identidade visual distinta a cada seção.
   -------------------------------------------------------------------------- */
.cafeteria-section {
  background-color: #241407;
  color: #ffffff;
  padding: 52px 0;
  position: relative;
}

.cafeteria-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(180, 83, 9, 0.25);
  border: 1px solid #b45309;
  color: #fbbf24;
  font-size: 11.5px;
  font-weight: 900;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

.ferreteria-section {
  background-color: #14181c;
  color: #ffffff;
  padding: 52px 0;
  position: relative;
}

.ferreteria-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(217, 119, 6, 0.2);
  border: 1px solid #d97706;
  color: #fbbf24;
  font-size: 11.5px;
  font-weight: 900;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   SITE FOOTER (NEW FOOTER SCREENSHOT)
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: #ffffff;
  color: var(--color-text-muted);
  padding: 44px 0 26px 0;
  font-size: 13px;
  border-top: 1px solid var(--color-border);
}

.footer-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-main-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 0.85fr 0.85fr;
  gap: 32px;
  margin-bottom: 28px;
}

.footer-col-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-brand-slogan {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-size: 18px;
  color: #86efac;
  font-weight: 700;
  margin-top: 4px;
}

.footer-brand-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.footer-phone-box {
  color: var(--color-primary-red);
  font-weight: 800;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
}

.footer-phone-box:hover {
  text-decoration: underline;
}

.footer-col-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--color-text-dark);
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}

.footer-stores-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-store-item {
  line-height: 1.4;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.footer-store-item strong {
  color: var(--color-text-dark);
}

.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.footer-link-item a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}

.footer-link-item a:hover {
  color: var(--color-primary-green);
}

.footer-bottom-row {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copyright {
  font-size: 12px;
  color: var(--color-text-muted);
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-section-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.footer-social-btn:hover {
  background: var(--color-primary-green);
  border-color: var(--color-primary-green);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Fullscreen Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content-img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 25px;
  background: #ffffff;
  color: #000;
  border: none;
  font-size: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   APP MAKRO CHUÍ - CRO ELEMENTS
   -------------------------------------------------------------------------- */
.btn-app-small {
  background: var(--color-primary-green);
  color: #ffffff;
  font-weight: 800;
  font-size: 12.5px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.btn-app-small:hover {
  transform: translateY(-1px);
}

/* Hero mini banner */
.hero-app-banner {
  margin-top: 22px;
  background: #ffffff;
  border: 1.5px solid var(--color-border-green);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

.hero-app-banner-icon {
  font-size: 28px;
}

.hero-app-banner-text {
  flex: 1;
  min-width: 220px;
}

.hero-app-banner-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--color-text-dark);
  margin-bottom: 4px;
}

.hero-app-banner-desc {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Full-width highlight banner between Hero and Encarte */
.app-highlight-section {
  background: linear-gradient(135deg, var(--color-primary-red) 0%, #a5151d 100%);
  padding: 38px 0;
  text-align: center;
  color: #ffffff;
}

.app-highlight-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.app-highlight-title {
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.app-highlight-desc {
  font-size: 15px;
  max-width: 560px;
  margin: 0 auto 26px auto;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.btn-app-highlight {
  background: #ffffff;
  color: var(--color-primary-red);
  font-weight: 900;
  font-size: 15px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.btn-app-highlight:hover {
  transform: translateY(-2px);
}

.app-highlight-platforms {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

/* Encarte inline CTA */
.app-cta-inline-box {
  max-width: 440px;
  margin: 24px auto 0 auto;
  background: #f0fdf4;
  border: 1.5px dashed var(--color-primary-green);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.app-cta-inline-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--color-text-dark);
  margin-bottom: 6px;
}

.app-cta-inline-desc {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Tiendas: app CTA under Waze / Maps */
.store-bottom-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.store-app-cta {
  background: #f0fdf4;
  border: 1px solid var(--color-border-green);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.store-app-cta-text {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.store-app-cta-text strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: var(--color-text-dark);
  margin-bottom: 2px;
}

/* Floating App bar (bottom-left) */
.floating-app-bar {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #ffffff;
  color: var(--color-text-dark);
  padding: 8px 10px 8px 16px;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1000;
  border: 1.5px solid var(--color-primary-green);
}

.floating-app-icon {
  font-size: 16px;
}

.floating-app-text {
  font-size: 12.5px;
  font-weight: 800;
}

/* Footer App column */
.footer-app-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-app-desc {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.footer-app-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-store-badge-img {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn-store-badge-img img {
  height: 40px;
  width: auto;
  display: block;
  border-radius: 8px;
}

.btn-store-badge-img:hover {
  transform: translateY(-2px);
  opacity: 0.88;
}

.btn-store-badge-img:focus-visible {
  outline: 2px solid var(--color-primary-green);
  outline-offset: 2px;
}

/* Responsive Grid Adjustments */
@media (max-width: 992px) {
  .hero-container, .restaurante-grid, .footer-main-grid {
    grid-template-columns: 1fr;
  }

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

  .store-detail-card, .calc-result-box {
    grid-template-columns: 1fr;
  }

  .calc-result-info-col {
    border-left: none;
    border-top: 1.5px solid #e2e8f0;
    padding-left: 0;
    padding-top: 16px;
  }
}

@media (max-width: 600px) {
  .dias-grid, .calc-inputs-grid, .restaurante-features-2x2, .restaurante-photos-col {
    grid-template-columns: 1fr;
  }

  .restaurante-photos-col--single .restaurante-photo-img {
    height: 240px;
  }

  .hero-title {
    font-size: 32px;
  }

  .hero-features-grid {
    grid-template-columns: 1fr 1fr;
  }

/* Características (2x2) e CTA do App empilhados em telas pequenas —
     lado a lado ficariam apertados demais para ler confortavelmente. */
  .hero-bottom-row {
    flex-direction: column;
  }

  /* Ferragens e Cafeteria empilhadas em telas pequenas, cada uma ocupando
     a largura toda — em vez de ficarem lado a lado espremidas. */
  .hero-mini-banners-row {
    grid-template-columns: 1fr;
  }

  .hero-mini-banner {
    height: 110px;
  }

  .encarte-banner-bar {
    flex-direction: column;
    gap: 12px;
  }

  .encarte-toggles-wrap {
    flex-wrap: wrap;
  }

  .store-actions-row {
    flex-wrap: wrap;
  }

  .schedule-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .store-detail-info {
    padding: 24px 20px;
  }

  .floating-app-bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }

  .floating-app-text {
    flex: 1;
  }
}

@media (max-width: 420px) {
  .brand-slogan {
    display: none;
  }

  .brand-logo-svg {
    height: 34px;
  }
}

/* --------------------------------------------------------------------------
   CINTA VIVA DE OFERTAS (LIVE TICKER)
   -------------------------------------------------------------------------- */
.live-ticker {
  background: var(--color-dark-banner);
  overflow: hidden;
  position: relative;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.live-ticker::before,
.live-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.live-ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-dark-banner), transparent);
}

.live-ticker::after {
  right: 0;
  background: linear-gradient(270deg, var(--color-dark-banner), transparent);
}

.live-ticker-track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  animation: liveTickerScroll 65s linear infinite;
}

.live-ticker:hover .live-ticker-track,
.live-ticker:focus-within .live-ticker-track,
.live-ticker-track.is-paused {
  animation-play-state: paused;
}

@keyframes liveTickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ticker-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 6px 8px 6px 14px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ticker-card:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

.ticker-card-badge {
  font-size: 11px;
  font-weight: 800;
  color: #4ade80;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ticker-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.ticker-card-price {
  font-size: 13px;
  font-weight: 900;
  color: #fbbf24;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.ticker-card-price small {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

.ticker-card-cta {
  background: var(--color-primary-red);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 900;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ticker-sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .live-ticker-track {
    animation: none;
  }
}

@media (max-width: 600px) {
  .live-ticker {
    padding: 8px 0;
  }

  .live-ticker::before,
  .live-ticker::after {
    width: 30px;
  }

  .ticker-card {
    gap: 8px;
    padding: 5px 6px 5px 10px;
  }

  .ticker-card-name {
    font-size: 12px;
  }

  .ticker-card-price,
  .ticker-card-badge {
    font-size: 11px;
  }
}

/* --------------------------------------------------------------------------
   VOLTAR AO SITE PRINCIPAL (www.makrochui.com)
   Desktop: link no header. Celular/tablet: pílula flutuante na borda esquerda.
   -------------------------------------------------------------------------- */
.nav-link-main {
  border: 1.5px solid var(--color-primary-green);
  color: var(--color-primary-green);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  font-size: 12px;
  white-space: nowrap;
}
.nav-link-main:hover {
  background: var(--color-primary-green);
  color: #ffffff;
}
.back-to-main-fab {
  display: none;
}
@media (max-width: 1239px) {
  .back-to-main-fab {
    display: inline-flex;
    align-items: center;
    position: fixed;
    left: 0;
    top: 128px;
    z-index: 9990;
    background: var(--color-dark-banner);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    padding: 6px 11px 6px 8px;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    box-shadow: var(--shadow-md);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   MODAL DE DESCARGA DEL APP (iPhone / Android)
   -------------------------------------------------------------------------- */
.app-dl-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0, 31, 6, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.app-dl-modal[hidden] { display: none; }
body.app-dl-open { overflow: hidden; }
.app-dl-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #ffffff;
  border-radius: 20px;
  padding: 28px 22px 22px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.app-dl-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 50%;
}
.app-dl-close:hover { background: #f1f5f9; }
.app-dl-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--color-dark-banner);
  margin: 4px 24px 4px;
}
.app-dl-sub {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}
.app-dl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  margin-top: 10px;
  padding: 8px 16px;
  border: 2px solid var(--color-primary-green);
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: var(--color-dark-banner);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}
.app-dl-btn img { height: 30px; width: auto; max-width: 96px; object-fit: contain; }
.app-dl-btn:hover, .app-dl-btn:focus-visible {
  background: var(--color-primary-green);
  color: #ffffff;
  outline: none;
}

/* --------------------------------------------------------------------------
   FOOTER: la barra "Preço exclusivo no App" (abajo-izquierda) y el chat
   (abajo-derecha) son fixed y tapaban el copyright y los iconos de redes al
   llegar al final de la página. Solo se mueve el texto/los iconos; ni la
   barra ni el chat se tocan.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .footer-bottom-row {
    padding-left: 360px;
    padding-right: 96px;
  }
}
@media (max-width: 1023px) {
  .site-footer {
    padding-bottom: 104px;
  }
}

/* Evita overflow horizontal en el hero: los items del grid (1fr) no pueden
   encogerse por debajo de su contenido mínimo, y el carrusel de encartes
   empujaba toda la columna a 438px en pantallas de 390px. */
.hero-container > * {
  min-width: 0;
}

/* ==========================================================================
   PC (>=1240px): a página abrange toda a largura da tela, de ponta a ponta
   (antes parava em 1240px centralizado, deixando margens vazias nos monitores
   largos). O espaçamento lateral cresce com a tela, como no site principal.
   Telas menores (tablet/celular) não mudam: continuam com o layout de antes.
   ========================================================================== */
@media (min-width: 1240px) {
  .container,
  .header-container,
  .hero-container,
  .footer-container {
    max-width: none;
    padding-left: clamp(24px, 3vw, 64px);
    padding-right: clamp(24px, 3vw, 64px);
  }

  .dias-grid,
  .store-detail-card,
  .calc-card-container,
  .encarte-banner-bar {
    max-width: none;
  }
}

/* ==========================================================================
   Fotos de Restaurante, Cafeteria e Ferragens: mesma proporção (9:4) e mesma
   escala da foto do Restaurante no site principal (www.makrochui.com/restaurante,
   ~570–600px de largura no PC) — sem esticar nem passar do limite do quadro.
   ========================================================================== */
#restaurante .restaurante-photos-col--single,
#cafeteria .restaurante-photos-col--single,
#ferreteria .restaurante-photos-col--single {
  align-self: start;
}

#restaurante .restaurante-photos-col--single .restaurante-photo-img,
#cafeteria .restaurante-photos-col--single .restaurante-photo-img,
#ferreteria .restaurante-photos-col--single .restaurante-photo-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  aspect-ratio: 9 / 4;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   "Ofertas da Semana" e "Calculadora de Churrasco" também abrem de ponta a
   ponta no PC (antes o cartão parava em 1080px / 960px / 820px no centro).
   Em telas muito largas, a grade de ofertas ganha mais colunas para
   aproveitar o espaço sem esticar os cartões de produto.
   ========================================================================== */
@media (min-width: 1240px) {
  #encarte .offers-explorer-card,
  #churrasco .bbq-card,
  #churrasco .bbq-result-card {
    max-width: none;
  }
}

@media (min-width: 1500px) {
  #encarte .offers-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1900px) {
  #encarte .offers-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ==========================================================================
   HERO: carrossel vertical (anúncios + miniaturas Ferragens/Cafeteria) no
   lugar das miniaturas. A cada 4s o próximo slide entra DE CIMA PARA BAIXO e
   o anterior sai para baixo; os demais ficam invisíveis. (js/hero-slot-carousel.js)
   ========================================================================== */
.hero-slot {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  margin-top: 10px;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 960 / 1104;
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--shadow-sm);
  background: #0f172a;
}

.hero-slot-slide {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  transform: translateY(-100%);
  opacity: 0;
  z-index: 1;
}

.hero-slot-slide.is-active,
.hero-slot-slide.is-leaving {
  transition: transform 0.8s ease, opacity 0.8s ease;
}

.hero-slot-slide.is-active {
  transform: translateY(0);
  opacity: 1;
  z-index: 2;
}

.hero-slot-slide.is-leaving {
  transform: translateY(100%);
  opacity: 0;
  z-index: 1;
}

/* Fundo desfocado + imagem inteira por cima (sem cortar o texto do anúncio). */
.hero-slot-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px) brightness(0.75);
  transform: scale(1.15);
}

.hero-slot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hero-slot-slide--minis .hero-mini-banners-row {
  height: 100%;
  margin-top: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}

.hero-slot-slide--minis .hero-mini-banner {
  height: 100%;
}

.hero-slot-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.hero-slot-dot {
  pointer-events: auto;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.hero-slot-dot.is-on {
  background: #ffffff;
  width: 18px;
  border-radius: 6px;
}

@media (min-width: 993px) {
  /* Ocupa o lugar da coluna das miniaturas: mesma altura do cartão do encarte. */
  .hero-slot {
    flex: 1;
    min-width: 0;
    max-width: none;
    aspect-ratio: auto;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slot-slide,
  .hero-slot-slide.is-active,
  .hero-slot-slide.is-leaving {
    transform: none;
    transition: opacity 0.4s ease;
  }
}

/* ==========================================================================
   MENU (PC largo, >=1600px): os itens se abrem com espaço entre eles ao longo
   de TODA a linha, do logo até os botões, numa única linha (em vez de ficarem
   agrupados num bloco à direita). Em PCs menores (1240–1599px) o menu mantém o
   comportamento anterior, porque nessa largura os 11 itens não cabem numa linha.
   ========================================================================== */
@media (min-width: 1600px) {
  .header-container {
    gap: clamp(24px, 3vw, 64px);
  }

  .header-nav {
    flex: 1 1 auto;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: clamp(8px, 1vw, 24px);
  }
}

/* ==========================================================================
   Carrossel de fotos da Ferragens (troca por esmaecimento a cada 3s,
   js/photo-carousel.js). Mesmo quadro 9:4 e mesma escala das fotos de
   Restaurante e Cafeteria.
   ========================================================================== */
#ferreteria .restaurante-photos-col--single .photo-carousel {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 9 / 4;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0f172a;
}

.photo-carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.photo-carousel-slide.is-active {
  opacity: 1;
}