:root {
  --navy: #001c4c;
  --navy-2: #002d62;
  --blue-text: #123a7a;
  --wave: #7eb6d9;
  --wa: #25d366;
  --bg: #ffffff;
  --muted: #5b6b82;
  --line: #d7dee8;
  --radius: 10px;
  --max: 1200px;
  --header-h: 92px;
  --font: "Montserrat", "Segoe UI", Arial, sans-serif;
  
  /* Novas variáveis customizáveis pelo painel */
  --header-text-color: #ffffff;
  --footer-text-color: #ffffff;
  --h1-color: #001c4c;
  --h2h3-color: #001c4c;
  --general-text-color: #333333;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--general-text-color, var(--navy));
  background: var(--bg);
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font-family: inherit; }

.site-header {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 40;
  max-width: var(--max);
  margin: 0 auto;
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Estilização do texto customizado abaixo da logo do header */
.header-logo-text {
  display: block;
  color: var(--header-text-color, #fff);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  margin-top: 4px;
}

.brand { display: flex; align-items: center; flex-direction: column; }
.brand-logo {
  height: 76px;
  width: auto;
  mix-blend-mode: lighten;
}
.brand-logo--sm { height: 72px; }

.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
}

.nav-link {
  color: var(--header-text-color, #fff);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  position: relative;
}
.nav-link.is-active,
.nav-link:hover { 
  text-decoration: underline; 
  text-underline-offset: 6px; 
  color: #9fd0ea; /* Efeito hover padronizado */
}

/* Botão "Produtos" do menu principal: hover padronizado */
.nav-produtos-btn:hover,
.nav-produtos > button:hover {
  color: #9fd0ea !important; /* Efeito hover padronizado */
  text-decoration: underline;
  text-underline-offset: 6px;
  background-color: rgba(255, 255, 255, 0.25) !important; /* Fundo mais visível no hover */
}

.cart-badge {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 99px;
  background: var(--wa);
  color: #fff;
  font-size: 0.7rem;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  vertical-align: super;
}

.search-form {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  overflow: hidden;
  min-width: 180px;
}
.search-form input {
  border: 0;
  padding: 8px 14px;
  width: 140px;
  outline: none;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.search-form button {
  border: 0;
  background: transparent;
  color: var(--navy-2);
  padding: 6px 12px 6px 0;
  cursor: pointer;
}

.wa-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wa);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wa-btn svg { display: block; }

/* Link "Carrinho / Lista de Cotação" do cabeçalho.
   Desktop: oculto — a navegação já tem o item "Lista de Cotação" no menu.
   Mobile: aparece como ícone circular ao lado do botão do WhatsApp
   (regra dentro da media query ≤768px). */
.header-cart-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.14);
  color: var(--header-text-color, #fff);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.header-cart-btn:hover,
.header-cart-btn:focus-visible {
  color: #9fd0ea;
  border-color: #9fd0ea;
  background: rgba(255, 255, 255, 0.24);
}
.header-cart-btn svg { display: block; }

/* O atributo hidden precisa vencer o display do .cart-badge */
.cart-badge[hidden] { display: none; }

.nav-toggle {
  /* O hambúrguer foi removido do cabeçalho (ver renderHeader em js/main.js).
     A regra fica inerte, pronta caso o botão volte a ser renderizado. */
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: #fff;
}

/* Agrupador dos botões à direita do cabeçalho: carrinho + WhatsApp.
   No desktop mostra apenas o WhatsApp (o carrinho está oculto porque o
   menu já tem o item "Lista de Cotação"); no mobile mostra os dois. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Ordem dos blocos do cabeçalho no desktop:
   logo | menu principal | pesquisa | WhatsApp.
   Vale a partir de 769px, exatamente acima do layout mobile empilhado
   (≤768px), para não haver duas media queries a disputar a mesma faixa
   de largura. Em ≤768px a ordem é redefinida nas 3 linhas do mobile. */ 
@media (min-width: 769px) {
  .header-inner > .brand { order: 1; }
  .header-inner > .main-nav { order: 2; }
  .header-inner > .search-form { order: 3; }
  .header-inner > .header-actions { order: 4; }
}

/* A seta de expansão de subcategorias só faz sentido no layout mobile:
   no desktop o mega menu já mostra todas as subcategorias de uma vez. */
.mega-sub-toggle { display: none; }

/* Título posicionado acima das imagens, fora do bloco de conteúdo.
   Usa posicionamento estático normal (não absoluto).
   Mantém cores definidas pelo painel de cores. */
.wave-title {
  text-align: center;
  padding: 8px 0;
  margin: 0 auto;
  max-width: var(--max);
  width: 100%;
  box-sizing: border-box;
  background: white; /* Fundo branco para separação visual */
}

.wave-title h1,
.wave-title h2 {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  /* A cor será definida inline pelo painel (via style attribute) */
  font-weight: 700;
}

.section { padding: 22px 16px 28px; }
.section-inner { max-width: var(--max); margin: 0 auto; }

/* ==========================================================
   HOMEPAGE — COMPACTAÇÃO MÁXIMA ENTRE BLOCOS
   Zera todo o espaço vertical entre header, blocos dinâmicos
   e footer na página principal, criando layout contínuo.
   ========================================================== */
body[data-page="home"] {
  /* Remove qualquer margem de body que crie espaço abaixo do header */
  margin: 0;
}

/* Container principal sem margens */
body[data-page="home"] #lancamentos-destaques-container {
  margin: 0;
  padding: 0;
  display: block;
}

/* Cada bloco dinâmico: posicionamento normal (não relativo).
   Adiciona espaçamento de 30px entre blocos. */
body[data-page="home"] .section.bloco-dinamico-sec {
  padding: 0;
  margin: 0;
  margin-top: 30px; /* Espaçamento reduzido para 30px */
}

/* Primeiro bloco não precisa de margem superior (cola no header) */
body[data-page="home"] .section.bloco-dinamico-sec:first-of-type {
  margin-top: 0;
}

/* Garante que o conteúdo interno dos blocos dinâmicos respeite o max-width */
body[data-page="home"] .bloco-dinamico-sec .carousel,
body[data-page="home"] .bloco-dinamico-sec .bloco-estatico-grid {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Título na homepage: posicionamento estático normal (não absoluto) */
body[data-page="home"] .wave-title {
  margin: 0 auto;
  padding: 8px 0;
  border-top: 0;
  width: 100%;
  max-width: var(--max);
  box-sizing: border-box;
  background: white;
}

/* Título dentro dos blocos dinâmicos: posicionamento estático normal */
body[data-page="home"] .bloco-dinamico-sec .wave-title {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 8px 0;
  box-sizing: border-box;
  background: white;
}

/* Barra de legendas do carrossel removida — cada nome vive agora dentro da foto */

/* O carrossel em si: sem margem extra */
body[data-page="home"] .carousel {
  margin-bottom: 0;
}

/* Grid estático: sem margem vertical */
body[data-page="home"] .bloco-estatico-grid {
  margin: 0 auto;
}

/* Footer imediatamente após o último bloco */
body[data-page="home"] .site-footer {
  margin-top: 0;
}

/* Alerta CSV (oculto por padrão): sem margens que criem espaço */
body[data-page="home"] .alert {
  margin: 0;
}

/* Header sem folga inferior — a primeira barra de calçadão encosta nele */
body[data-page="home"] .site-header {
  margin-bottom: 0;
  border-bottom: 0;
}

/* Qualquer elemento intermediário que possa introduzir vão branco */
body[data-page="home"] .page-hero,
body[data-page="home"] .section + .section,
body[data-page="home"] .bloco-dinamico-sec + .bloco-dinamico-sec {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ==========================================================
   BADGE DE TÍTULO/LEGENDA DENTRO DA FOTO (SEO-friendly)
   O texto continua a ser HTML real (indexável), mas é sobreposto
   no canto superior esquerdo da imagem dentro de um balão branco
   semi-transparente com contorno arredondado.
   ========================================================== */
.bloco-media,
.slide {
  position: relative;
}

/* Título/legenda sobre a imagem (carrossel e bloco estático).
   Padrão único: fixo no TOPO e centralizado horizontalmente sobre a foto.
   O centramento usa left:50% + translateX(-50%), mantendo o badge sempre
   dentro da largura da imagem (max-width + ellipsis). */
.bloco-item-badge {
  position: absolute;
  top: 8px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-block;
  max-width: calc(100% - 16px);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 2px solid var(--primary-color, var(--navy));
  color: var(--primary-color, var(--navy));
  font-size: clamp(0.68rem, 1.1vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  box-sizing: border-box;
}

/* Dentro de carrossel com múltiplos visíveis, o badge não deve estourar a coluna */
.bloco-dinamico-sec .slide .bloco-item-badge {
  max-width: calc(100% - 16px);
}

/* (Regra .bloco-carrossel-legenda removida — era a antiga barra acima das fotos;
   o estilo equivalente vive agora em .bloco-item-badge.) */

/* Aviso: os indicadores de slides (.carousel-dots / .dot) foram REMOVIDOS
   para limpar a visualização e evitar que invadissem o espaço inferior da
   imagem. A navegação continua pelas setas laterais e pelo auto-play. */

.carousel {
  position: relative;
  max-width: var(--max);
  max-height: 400px;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.carousel-track {
  display: flex;
  transition: transform 0.55s ease;
  width: 100%;
}

.slide {
  min-width: 33.333%;
  flex: 0 0 33.333%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: block;
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 4px;
}

/* ==========================================================
   CARROSSEL FADE (cross-fade) — bloco dinâmico "carrossel-fade"
   As imagens ficam empilhadas na MESMA célula do grid e alternam
   apenas por opacidade, sem deslocamento lateral. A troca é feita
   por JS (classe .is-active) e a duração vem de
   bloco.transicaoSegundos (definido no painel admin-front-page.html).
   O carrossel tradicional (.carousel sem --fade) não é afetado.
   ========================================================== */
.carousel--fade .carousel-track {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  /* O track não desliza no modo fade */
  transition: none;
  transform: none !important;
}

.carousel--fade .slide {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
  flex: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--fade-duration, 0.8s) ease,
              visibility 0s linear var(--fade-duration, 0.8s);
  will-change: opacity;
}

.carousel--fade .slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  transition: opacity var(--fade-duration, 0.8s) ease,
              visibility 0s linear 0s;
}

/* Mantém as imagens do fade com o mesmo enquadramento do carrossel normal */
.carousel--fade .slide img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  display: block;
}

/* Setas: embutidas na área da foto, com contraste reforçado (azul/vermelho) */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary-color, var(--navy));
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  transition: background 0.2s, color 0.2s;
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
  background: #e01b24;
  color: #ffffff;
  border-color: #ffffff;
}

.carousel-arrow.prev { left: 6px; }
.carousel-arrow.next { right: 6px; }

/* Os indicadores de slides (.carousel-dots / .dot) foram REMOVIDOS — as
   bolinhas de navegação inferiores já não são renderizadas em js/main.js,
   pelo que o espaço inferior da imagem fica totalmente livre. */

.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.product-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
}
.product-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.product-name {
  padding: 8px 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  color: var(--blue-text);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.cat-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
}
.cat-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.cat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,28,76,.12); }

/* Vitrine de categorias da homepage (#categorias-grid): cards clicáveis para o catálogo */
.cat-card { color: var(--general-text-color, var(--navy)); text-decoration: none; border-radius: 8px; transition: transform .25s, box-shadow .25s; }
.cat-card .cat-thumb { overflow: hidden; background: #f4f6f9; }
.cat-card .cat-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cat-card .cat-name { display: block; padding: 10px 12px; font-weight: 700; font-size: .95rem; line-height: 1.3; text-align: center; }

.inst-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 8px auto 0;
}
.inst-card {
  display: block;
}
.inst-card img {
  width: 100%;
  height: 92px;
  object-fit: contain;
}

.site-footer {
  background: var(--navy);
  color: var(--footer-text-color, #fff);
  margin-top: 12px;
  position: relative;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.site-footer > * {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
.footer-acc { max-width: var(--max); margin: 0 auto; padding: 22px 16px 8px; }
.acc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 18px;
}
.acc-btn {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--footer-text-color, #fff); /* Sincronizado com textos do rodapé */
  font-weight: 700;
  text-align: left;
  padding: 8px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.92rem;
  transition: color 0.3s ease;
}
.acc-btn:hover {
  text-decoration: underline;
  color: #9fd0ea; /* Efeito hover padronizado */
}
.acc-btn[aria-expanded="true"] { color: #9fd0ea; }
.acc-panel ul {
  margin: 0 0 10px;
  padding: 0 0 0 8px;
  list-style: none;
}
.acc-panel a {
  color: var(--footer-text-color, #d6e4f7); /* Indexado à cor dos textos do rodapé */
  text-decoration: none;
  font-size: 0.85rem;
  line-height: 1.7;
  transition: color 0.3s ease;
}
.acc-panel a:hover { 
  text-decoration: underline; 
  color: #9fd0ea; /* Efeito hover padronizado */
}

.footer-bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 16px 28px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  align-items: center;
}
.footer-brand p,
.footer-meta p { 
  margin: 4px 0; 
  font-size: 0.88rem; 
  color: var(--footer-text-color, #fff);
}
/* Coluna 1 do rodapé (logomarca cto-br.png + linha de texto do endereço).
   Forma a primeira coluna da grelha de 3 colunas definida em .footer-bottom
   e mantém-se visível também no mobile (ver "REFINAMENTO MOBILE"). */ 
.footer-brand {
  display: block;
  text-align: left;
}

/* Logo da Coluna 1 (footer.col1.logo). Opcional: só existe no HTML quando
   está cadastrada no painel. Altura fixa e largura automática para que
   logos de proporções diferentes não desalinhem a coluna. */
.footer-brand .footer-logo {
  height: 54px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 0 8px;
  mix-blend-mode: lighten;
}

.footer-meta { text-align: center; }
.social { display: flex; justify-content: center; gap: 18px; margin-top: 10px; }
.social a { 
  color: var(--footer-text-color, #fff); 
  font-weight: 600; 
  text-decoration: none;
  transition: color 0.3s ease;
}
.social a:hover {
  text-decoration: underline;
  color: #9fd0ea; /* Efeito hover padronizado */
}

.to-top {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  background: #000;
  color: #fff;
  border: 0;
  cursor: pointer;
}

.alert {
  max-width: var(--max);
  margin: 12px auto;
  padding: 10px 14px;
  background: #fff4d6;
  border: 1px solid #e2c56b;
  color: #5a4300;
}

/* Variante de sucesso: confirmação de envio (index.html?enviado=1) */
.alert-success {
  background: #e6f7f2;
  border-color: #7ecdb8;
  color: #0f5a48;
  text-align: center;
}

.alert-success a.btn-primary {
  margin-top: 10px;
}

/* ============================================
   PÁGINAS DE AGRADECIMENTO
   (obrigado.html para a cotação e obrigado-contato.html para o contato)
   Ambas são abertas pelo campo _next do FormSubmit após o envio e
   partilham a mesma caixa — o texto vem de renderObrigado() (js/main.js).
   ============================================ */
.obrigado-box {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 28, 76, 0.08);
  text-align: center;
}

.obrigado-box h2 {
  margin: 8px 0 12px;
  font-weight: 800;
}

.obrigado-box p {
  margin: 0 0 14px;
  line-height: 1.5;
}

.obrigado-icone {
  font-size: 2.6rem;
  line-height: 1;
  margin: 0 0 8px !important;
}

/* Texto secundário de apoio: recebe a confirmação por e-mail e o
   retorno da proposta comercial, logo abaixo do título. */
.obrigado-sub {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* ============================================
   BARRA SUPERIOR DA PÁGINA DE PRODUTO (trilha + botão Voltar)
   O caminho substitui o antigo título "Brindes no Rio de Janeiro"
   ============================================ */
#produto-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

#produto-topbar #produto-titulo {
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  font-weight: 600;
  line-height: 1.4;
  /* Anula o clamp grande de .wave-title h1 para o caminho caber na barra */
  padding: 0 60px;
  color: var(--catalog-text-color, var(--navy));
}

#produto-topbar .breadcrumb-atual { font-weight: 700; }

#produto-topbar a {
  text-decoration: none;
  transition: color 0.2s;
}

#produto-topbar a:hover { text-decoration: underline; }

/* Botão "Voltar" reutilizável (produto e listagem de categoria) */
.btn-voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f6f8fb;
  color: var(--catalog-text-color, var(--navy));
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.btn-voltar:hover {
  background: #e8eef7;
  border-color: var(--navy);
  text-decoration: none;
}

#produto-topbar .btn-voltar {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

/* Botão Voltar na listagem (breadcrumb do catálogo) */
.catalog-breadcrumb .btn-voltar { margin-bottom: 10px; }

/* Em telas estreitas o botão deixa de ser absoluto para não sobrepor a trilha */
@media (max-width: 600px) {
  #produto-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 16px;
  }
  #produto-topbar .btn-voltar {
    position: static;
    transform: none;
  }
  #produto-topbar #produto-titulo {
    text-align: left;
    padding: 0;
  }
}

/* ============================================
   BREADCRUMB DO CATÁLOGO (Trilha de Navegação)
   Exibido apenas na página de catálogo
   Versão estática sem links, usa a cor de textos do catálogo
   ============================================ */
.catalog-breadcrumb {
  margin-bottom: 20px;
  font-size: 0.875rem;
  color: var(--catalog-text-color, var(--navy));
}

.catalog-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.catalog-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.catalog-breadcrumb li:not(:last-child)::after {
  content: "/";
  color: var(--catalog-text-color, var(--navy));
  opacity: 0.6;
}

.catalog-breadcrumb span {
  color: var(--catalog-text-color, var(--navy));
}

.catalog-breadcrumb .current {
  font-weight: 600;
}

/* ============================================
   TÍTULO DO CATÁLOGO - CALÇADÃO
   Aumenta significativamente o tamanho da fonte
   (classe .catalogo-page garante isolamento: produto.html não é afetado)
   ============================================ */
.catalogo-page .wave-title h1 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}

/* ============================================
   COR DE FONTES DO CATÁLOGO (Isolado)
   Aplica cor personalizada apenas aos textos e legendas
   dos cartões de produtos na página de catálogo (.catalogo-page),
   sem tocar na página de detalhe individual (produto.html)
   ============================================ */
.catalogo-page .catalog-card h3,
.catalogo-page .catalog-card .muted,
.catalogo-page .catalog-card .sku {
  color: var(--catalog-text-color, var(--navy)) !important;
}

.catalog-card {
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Performance: o navegador pula a renderização (layout/paint) dos cards
     fora da viewport, mantendo-os no DOM. Essencial para lotes de 320+
     produtos — a vitrine rola fluida sem travar. */
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}
.catalog-thumb {
  background: #f6f8fb;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.catalog-thumb img { max-height: 180px; object-fit: contain; }
.catalog-card h3 { margin: 0; font-size: 0.95rem; }
.muted, .sku { margin: 0; color: var(--muted); font-size: 0.8rem; }
.empty { text-align: center; padding: 40px 10px; }

.produto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 16px;
}

/* Breadcrumb completo de 4 níveis */
.produto-breadcrumb {
  font-size: 0.85rem;
  color: var(--catalog-text-color, var(--muted));
  margin-bottom: 12px;
  font-weight: 500;
}

.produto-breadcrumb a {
  color: var(--catalog-text-color, var(--navy));
  text-decoration: none;
  transition: color 0.2s;
}

.produto-breadcrumb a:hover {
  color: #1aa3a3;
  text-decoration: underline;
}

/* Container da mídia: thumbs à esquerda + imagem principal */
.produto-media {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Coluna vertical de miniaturas (estilo Mercado Livre) */
/* Quebra automaticamente em novas colunas quando há mais de 5 miniaturas */
.thumbs {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: 8px;
  flex-shrink: 0;
}

.thumb {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0;
  cursor: pointer;
  width: 64px;
  height: 64px;
  transition: border-color 0.2s;
}

.thumb:hover {
  border-color: var(--navy);
}

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

/* Container de zoom para a imagem principal */
.produto-zoom-container {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}

/* Imagem principal reduzida (aproximadamente metade do tamanho original) */
.produto-main-wrapper {
  flex: 1;
  max-width: 420px;
}

#produto-main {
  width: 100%;
  max-height: 60vh;
  background: #f4f6fa;
  border-radius: 8px;
  object-fit: contain;
  transition: transform 0.1s ease-out;
}

/* Lente de zoom */
.zoom-lens {
  position: absolute;
  border: 2px solid #1aa3a3;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  pointer-events: none;
  background: rgba(26, 163, 163, 0.1);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
}

.breadcrumb { font-weight: 800; letter-spacing: 0.04em; }
.status { color: #1aa3a3; font-weight: 700; }

/* Alteração aplicada aqui: width do input aumentado para 75px */
.qty { display: inline-flex; border: 1px solid var(--line); }
.qty button { border: 0; background: #fff; padding: 8px 10px; width: 42px; text-align: center; cursor: pointer; }
.qty input { border: 0; background: #fff; padding: 8px 4px; width: 75px; text-align: center; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.75rem;
}
.swatch.is-active { outline: 2px solid var(--navy); }
.print-colors { display: flex; gap: 12px; margin-bottom: 16px; }
.btn-primary {
  display: inline-block;
  background: #1aa3a3;
  color: #fff;
  border: 0;
  padding: 12px 18px;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: #168a8a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 163, 163, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(26, 163, 163, 0.3);
}
.btn-ghost {
  background: var(--navy);
  color: #fff;
  border: 0;
  padding: 12px 18px;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
}
.meta { color: var(--muted); font-size: 0.82rem; }
.descricao { margin-top: 28px; }
.descricao h2 { color: var(--navy-2); }

/* Seção de produtos relacionados */
.produtos-relacionados {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.produtos-relacionados h2 {
  font-size: 1.3rem;
  margin-bottom: 16px;
  color: var(--navy);
}

.relacionados-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.relacionado-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  text-decoration: none;
  transition: box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.relacionado-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.relacionado-thumb {
  background: #f6f8fb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border-radius: 4px;
  padding: 8px;
  min-height: 100px;
}

.relacionado-thumb img {
  max-height: 100px;
  max-width: 100%;
  object-fit: contain;
}

.relacionado-card h3 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--navy);
  line-height: 1.3;
}

.relacionado-card .sku {
  margin-top: 4px;
  font-size: 0.75rem;
}

/* Estilos para chips de cor */
.options {
  margin-bottom: 16px;
}

.options label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--navy);
}

/* Seletor de cores dinâmico com imagens */
.color-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  max-width: 100%;
}

.color-box {
  border: 3px solid var(--line);
  background: #fff;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 110px;
}

.color-box img {
  width: 100%;
  height: 70px;
  object-fit: contain;
  border-radius: 4px;
  background: #f6f8fb;
}

.color-box .color-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

.color-box:hover {
  border-color: #1aa3a3;
  background: #f0fafa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 163, 163, 0.2);
}

.color-box.active {
  border-color: #1aa3a3;
  background: #e6f7f7;
  box-shadow: 0 0 0 2px #1aa3a3;
}

.color-box.active .color-label {
  color: #1aa3a3;
}

/* Chips tradicionais (fallback) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  border: 2px solid var(--line);
  background: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  transition: all 0.2s ease;
}

.chip:hover {
  border-color: #1aa3a3;
  background: #f0fafa;
}

.chip.active {
  border-color: #1aa3a3;
  background: #1aa3a3;
  color: #fff;
}

/* Notificação Toast */
.toast-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #0B0E14;
  color: #F8FAFC;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 0;
  transform: translateX(400px);
  transition: all 0.3s ease;
  max-width: 400px;
  border-left: 4px solid #22D3EE;
}

.toast-notification.show {
  opacity: 1;
  transform: translateX(0);
}

.toast-notification.toast-erro {
  border-left-color: #F97316;
}

.toast-notification.toast-sucesso {
  border-left-color: #22D3EE;
}

/* Aplicar cor de textos do painel ("Cor Fontes Textos") a TODA a página de produto */
#produto-topbar,
#produto-view .produto-info h1,
#produto-view .produto-info h2,
#produto-view .produto-info h3,
#produto-view .produto-info p,
#produto-view .produto-info label,
#produto-view .produto-info li,
#produto-view .produto-info strong,
#produto-view .produto-info span,
#produto-view .produto-info small,
#produto-view .produtos-relacionados h2,
#produto-view .produtos-relacionados h3,
#produto-view .produtos-relacionados p,
#produto-view .produtos-relacionados .sku,
#produto-view .relacionado-card h3,
#produto-view .relacionado-card .sku {
  color: var(--catalog-text-color, var(--navy)) !important;
}

/* Ficha de medidas do produto (dimensões vindas do produtos.json) */
.produto-medidas {
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.produto-medidas h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.produto-medidas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 4px 16px;
}

.produto-medidas li {
  font-size: 0.85rem;
  color: var(--muted);
}

.table-wrap { overflow-x: auto; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  background: #e9eef5;
  text-align: left;
  padding: 10px;
}
.cart-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.cart-table .codigo-col {
  font-weight: 700;
  color: var(--navy);
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  white-space: nowrap;
}
.cart-table img { width: 64px; height: 64px; object-fit: contain; display: inline-block; margin-right: 8px; vertical-align: middle; }
.icon-del {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  margin-right: 8px;
}
.cart-actions {
  display: flex;
  justify-content: space-between;
  margin: 18px 0 32px;
}
.quote-form, .contact-form {
  display: grid;
  gap: 12px;
  max-width: 640px;
}
.quote-form label, .contact-form label { display: grid; gap: 4px; font-weight: 700; color: var(--blue-text); }
.quote-form input, .quote-form textarea,
.contact-form input, .contact-form textarea {
  border: 1px solid var(--line);
  padding: 10px;
  border-radius: 4px;
  font-weight: 400;
}

.page-hero {
  background: #ffffff !important;
  background-color: #ffffff !important;
  padding: 40px 16px 48px;
}

.page-hero h1,
.page-hero h2,
.page-hero h3,
.page-hero p,
.page-hero span,
.page-hero li {
  color: var(--primary-color, var(--navy)) !important;
}
.page-hero-inner { max-width: var(--max); margin: 0 auto; }
.page-hero h1 { margin-top: 0; }
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: var(--max);
  margin: 0 auto;
}

@media (max-width: 1020px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .acc-grid { grid-template-columns: repeat(2, 1fr); }
  /* Faixa intermédia (769–1020px): o cabeçalho é flex, por isso a barra
     de navegação ganha uma linha própria em vez de espremer a logo.
     Fica: logo + pesquisa + WhatsApp na 1.ª linha, menu na 2.ª. */
  .header-inner {
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: space-between;
  }
  .header-inner > .brand { order: 1; }
  .header-inner > .search-form { order: 2; flex: 0 1 auto; }
  .header-inner > .header-actions { order: 3; }
  .header-inner > .main-nav {
    order: 4;
    flex: 1 1 100%;
    justify-content: center;
    /* Faixa sólida: a segunda linha cai sobre o horizonte da imagem de
       fundo do cabeçalho, onde o texto branco perderia contraste. */
    background: var(--navy);
    padding: 8px 12px;
    border-radius: 0 0 8px 8px;
  }
  .brand-logo { height: 64px; }
  .brand-logo--sm { height: 58px; }
  .slide img { height: 220px; }
  .relacionados-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  /* O cabeçalho mobile é empilhado em 3 linhas na media query de 768px
     (ver "REFINAMENTO MOBILE" mais abaixo). Aqui a navegação principal
     é ocultada e a barra de pesquisa mantém-se sempre visível — já não
     existe hambúrguer nem gaveta. */
  .main-nav { display: none; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .inst-grid, .produto-grid, .contact-layout, .footer-bottom { grid-template-columns: 1fr; }
  .produto-media { flex-direction: column; }
  .thumbs { flex-direction: row; }
  .produto-main-wrapper { max-width: 100%; }
  .relacionados-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr; }
  .footer-meta { text-align: left; }
  .social { justify-content: flex-start; }
  .slide img { height: 200px; }
  .bloco-estatico-grid { flex-wrap: wrap; }
  .bloco-estatico-item { flex: 1 1 calc(50% - 4px); }
  
  /* Seletor de cores responsivo no mobile */
  .color-selector {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .color-box {
    min-height: 90px;
    padding: 4px;
  }
  
  .color-box img {
    height: 55px;
  }
  
  .color-box .color-label {
    font-size: 0.65rem;
  }
  
  /* Zoom desabilitado no mobile (touch devices) */
  .produto-zoom-container {
    cursor: default;
  }
  
  .zoom-lens {
    display: none !important;
  }
}
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 24px;
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 16px 28px;
}

.footer-right-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: right;
}

.footer-right-links a {
  color: var(--footer-text-color, #fff);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
}

.footer-right-links a:hover {
  text-decoration: underline;
  color: #9fd0ea;
}
/* ===========================
    MEGA MENU PRODUTOS
   =========================== */

.nav-produtos {
  position: relative;
}

.mega-menu-produtos {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1150px, 95vw);
  background: #ffffff;
  padding: 25px 30px;
  /* Indexado à cor global do painel (variável principal) */
  border-top: 4px solid var(--navy); 
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  z-index: 9999;
}

.nav-produtos:hover .mega-menu-produtos {
  display: block;
}

.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 32px;
  row-gap: 14px;
}

.mega-menu-grid a {
  display: block;
  /* Textos das categorias indexados à cor global do painel */
  color: var(--navy); 
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.mega-menu-grid a:hover {
  /* Hover indexado à cor contrastante do painel */
  color: var(--wave, #7eb6d9); 
  text-decoration: underline;
  background-color: rgba(126, 182, 217, 0.1);
  padding: 2px 4px;
  border-radius: 3px;
}

@media (max-width: 1020px) {
  .mega-menu-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .mega-menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Alinhamento elegante e correto das subcategorias */
.site-header div[class*="menu"] ul,
.site-header nav ul,
.mega-menu ul,
.dropdown-menu ul {
  list-style-type: disc !important;
  list-style-position: outside !important;
  padding-left: 15px !important;
  margin-left: 0 !important;
  text-align: left !important;
}

.site-header div[class*="menu"] li,
.site-header nav li,
.mega-menu li,
.dropdown-menu li {
  list-style-type: disc !important;
  list-style-position: outside !important;
  text-align: left !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}
/* ==========================================================
   INDEXAÇÃO TOTAL E DEFINITIVA: BOTÃO + CATEGORIAS DO MEGA MENU
   ========================================================== */

/* 1. Força o botão do Mega Menu a ter fundo transparente e texto na cor do header */
.nav-produtos-btn,
.nav-produtos > button,
.nav-produtos > a {
  background-color: rgba(255, 255, 255, 0.15) !important; /* Transparência para destaque do texto */
  color: var(--header-text-color, #fff) !important; /* Indexado à cor dos textos do cabeçalho */
  border-radius: 999px !important; /* Arredondamento igual ao campo Pesquisar */
  padding: 8px 16px !important;
  backdrop-filter: blur(4px); /* Efeito de desfoque suave no fundo */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 2. Força a cor primária global em todos os textos, títulos e links do Mega Menu */
.mega-menu-produtos,
.mega-menu-produtos *,
.mega-menu-grid a,
.mega-menu-grid span,
.mega-column a,
.mega-parent,
.mega-subcategories a,
.mega-menu-produtos ul li a {
  color: var(--primary-color, var(--navy)) !important;
}

/* Efeito Hover dinâmico para os itens do mega menu */
.mega-menu-grid a:hover,
.mega-column a:hover,
.mega-subcategories a:hover,
.mega-menu-produtos ul li a:hover {
  color: var(--wave, #7eb6d9) !important; /* Cor contrastante no hover */
  text-decoration: underline !important;
  background-color: rgba(126, 182, 217, 0.1) !important; /* Fundo suave para melhor visibilidade */
  padding: 2px 4px !important;
  border-radius: 3px !important;
}
/* ==========================================================
   AJUSTES DA PÁGINA DE CONTATO (WhatsApp Verde + Cores Globais)
   ========================================================== */

/* 1. Botão do WhatsApp em Verde fixo/padrão */
body[data-page="contato"] .btn-primary,
body[data-page="contato"] a.btn-primary {
  background-color: #25d366 !important;
  color: #ffffff !important;
}

body[data-page="contato"] .btn-whatsapp:hover,
body[data-page="contato"] a.btn-whatsapp:hover {
  background-color: #1ebe5d !important;
}

/* 2. Rótulos e textos descritivos indexados à cor global */
body[data-page="contato"] .page-hero label,
body[data-page="contato"] .page-hero p,
body[data-page="contato"] .page-hero h1,
body[data-page="contato"] .page-hero h2,
body[data-page="contato"] .page-hero h3,
body[data-page="contato"] .contact-form label {
  color: var(--primary-color, var(--navy)) !important;
}

/* 3. Botão Enviar indexado à cor global */
body[data-page="contato"] button[type="submit"],
body[data-page="contato"] .btn-submit {
  background-color: var(--primary-color, var(--navy)) !important;
  color: #ffffff !important;
}
/* ==========================================================
   CORREÇÃO DA BARRA DE PESQUISA NA PÁGINA DE CONTATO
   ========================================================== */
body[data-page="contato"] .search-container,
body[data-page="contato"] .site-header .search-box,
body[data-page="contato"] input.search-input,
body[data-page="contato"] .search-bar {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
body[data-page="contato"] .search-form button {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
}
/* ==========================================================
   INDEXAÇÃO DA PÁGINA DE CARRINHO À COR GLOBAL
   ========================================================== */
body[data-page="carrinho"] .btn-primary {
  background-color: var(--primary-color, var(--navy)) !important;
}

body[data-page="carrinho"] .empty {
  color: var(--primary-color, var(--navy)) !important;
}

/* ==========================================================
/* ========================================
   APLICAÇÃO DAS CORES CUSTOMIZÁVEIS
   ======================================== */

/* H1 - Títulos principais (Nome de produtos nas páginas de detalhes) */
h1,
.produto-info h1,
.page-hero h1 {
  color: var(--h1-color, var(--navy)) !important;
}

/* H2 e H3 - Títulos de seção e subtítulos */
h2,
h3,
.produto-info h2,
.produto-info h3,
.page-hero h2,
.page-hero h3,
.descricao h2,
.produtos-relacionados h2 {
  color: var(--h2h3-color, var(--navy)) !important;
}

/* Textos gerais - Parágrafos, Mega Menu, Lista de Cotação */
p,
.page-hero p,
.page-hero span,
.page-hero li,
.cart-table,
.empty {
  color: var(--general-text-color, var(--navy));
}

/* Textos do Mega Menu */
.mega-menu-produtos,
.mega-menu-produtos *,
.mega-menu-grid a,
.mega-menu-grid span,
.mega-column a,
.mega-parent,
.mega-subcategories a,
.mega-menu-produtos ul li a {
  color: var(--general-text-color, var(--primary-color, var(--navy))) !important;
}

.mega-menu-grid a:hover,
.mega-column a:hover,
.mega-subcategories a:hover,
.mega-menu-produtos ul li a:hover {
  color: var(--wave, #7eb6d9) !important; /* Cor contrastante no hover */
  text-decoration: underline !important;
  background-color: rgba(126, 182, 217, 0.1) !important; /* Fundo suave para melhor visibilidade */
  padding: 2px 4px !important;
  border-radius: 3px !important;
}


   BLOCOS DINÂMICOS DA FRONT PAGE
   ========================================================== */

/* Grelha estática — fotos lado a lado a preencher 1200px.
   --ar é definido via JS com o aspect ratio nativo de cada foto (largura/altura).
   Como flex-grow = --ar e flex-basis = 0, cada item recebe uma largura
   proporcional à sua imagem: todas as fotos acabam com a MESMA altura e
   nenhuma sofre corte nem estiramento (sem object-fit: cover). */
.bloco-estatico-grid {
  display: flex;
  flex-wrap: wrap; /* Permite quebra de linha automática */
  align-items: flex-start;
  max-width: var(--max); /* 1200px */
  max-height: 400px;
  width: 100%;
  margin: 0 auto;
  gap: 8px; /* Espaçamento entre imagens */
  overflow: hidden;
}

.bloco-estatico-item {
  flex: var(--ar, 1) 1 0;
  min-width: 0;
  max-width: 100%; /* Evita estouro */
  display: flex;
  flex-direction: column;
}

.bloco-estatico-item .bloco-media {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.bloco-estatico-item .bloco-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 400px; /* Altura máxima de 400px */
  object-fit: contain; /* Mantém proporções sem distorção */
}

/* .bloco-estatico-legenda foi substituída pelo .bloco-item-badge (overlay absoluto
   dentro da foto). Mantida aqui como tombstone para referência — CSS sem uso. */
/* .bloco-estatico-legenda { ... } */

/* ==========================================================
   IMAGE GALLERY / MASONRY GRID
   ========================================================== */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  max-width: var(--max);
  max-height: 400px;
  margin: 0 auto; /* Remove espaçamento vertical */
  padding: 0; /* Remove padding */
  overflow: hidden;
}

.gallery-item-large {
  grid-column: span 2;
  grid-row: span 2;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  transition: transform 0.3s ease;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  transition: transform 0.3s ease;
}

.gallery-item:hover,
.gallery-item-large:hover {
  transform: scale(1.02);
}

.gallery-item img,
.gallery-item-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;
  padding: 15px;
  font-weight: 700;
}

/* Custom Image Gallery (Layout Builder) */
.custom-image-gallery {
  max-width: var(--max);
  height: 400px;
  margin: 0 auto; /* Remove espaçamento vertical */
  padding: 0; /* Remove padding */
  overflow: hidden;
}

.custom-gallery-item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-gallery-item:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1;
}

/* ==========================================================
   PRODUCT CARDS
   ========================================================== */
.product-cards-grid {
  display: grid;
  gap: 20px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0;
  justify-items: center; /* Centraliza os cards quando sobram espaços */
}

/* Configurações dinâmicas de colunas */
.product-cards-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(280px, 400px));
  justify-content: center; /* Centraliza o grid quando há menos itens */
}

.product-cards-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(260px, 350px));
  justify-content: center;
}

.product-cards-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(240px, 300px));
  justify-content: center;
}

.product-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  width: 100%;
  max-height: 400px; /* Altura máxima rígida do card completo */
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}

.product-card-image {
  display: block;
  width: 100%;
  height: 200px; /* Reduzido de 250px para 200px */
  overflow: hidden;
  background: #f8f9fa;
  flex-shrink: 0;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.product-card:hover .product-card-image img {
  transform: scale(1.05);
}

.product-card-body {
  padding: 12px 15px; /* Reduzido de 20px para 12px vertical e 15px horizontal */
  display: flex;
  flex-direction: column;
  gap: 6px; /* Espaçamento uniforme entre elementos */
  flex-grow: 1;
}

.product-card-body h3 {
  font-size: 1rem; /* Reduzido de 1.1rem */
  margin: 0;
  color: var(--h2h3-color, var(--navy));
  line-height: 1.3;
}

.product-card-body h3 a {
  text-decoration: none;
  color: inherit;
}

.product-card-body h3 a:hover {
  color: var(--wave);
  text-decoration: underline;
}

.product-card-category {
  color: var(--muted);
  font-size: 0.85rem; /* Reduzido de 0.9rem */
  margin: 0;
}

.product-card-sku {
  color: var(--muted);
  font-size: 0.8rem; /* Reduzido de 0.85rem */
  margin: 0;
}

.product-card-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 8px 15px; /* Reduzido de 10px 20px */
  background: var(--navy);
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.3s ease;
  margin-top: auto; /* Empurra o botão para o final do card */
}

.product-card-btn:hover {
  background: var(--navy-2);
}

/* Responsividade para novos blocos */
@media (max-width: 768px) {
  .gallery-item-large {
    grid-column: span 1;
    grid-row: span 1;
  }
  
  /* Layout Builder: empilha tudo em coluna única no mobile */
  .custom-image-gallery {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .custom-gallery-item {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 220px;
  }
  
  .product-cards-grid,
  .product-cards-grid.cols-2,
  .product-cards-grid.cols-3,
  .product-cards-grid.cols-4 {
    grid-template-columns: 1fr !important;
  }
  
  .image-gallery {
    grid-template-columns: repeat(2, 1fr);
    max-height: none !important;
    overflow: visible !important;
  }
  
  .carousel {
    max-height: none !important;
  }
  
  .bloco-estatico-grid {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ==========================================================
   POP-UP DE ESCOLHA DE CORES DO PRODUTO
   ========================================================== */

.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

.popup-overlay[style*="display: flex"] {
  display: flex !important;
}

.popup-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: popupSlideIn 0.3s ease-out;
}

@keyframes popupSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--navy);
  color: #fff;
}

.popup-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.popup-close {
  background: #ef4444;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.2s;
}

.popup-close:hover {
  background: #dc2626;
}

.popup-body {
  padding: 20px;
  overflow-y: auto;
  max-height: 60vh;
}

.popup-subtitle {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.popup-footer {
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #f8fafc;
}

.popup-empty {
  text-align: center;
  padding: 30px 20px;
  color: #64748b;
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Itens de cor com checkbox/radio */
.cor-item-checkbox {
  margin-bottom: 10px;
}

.cor-checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cor-checkbox-label:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.cor-checkbox-label input[type="radio"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #1aa3a3;
}

.cor-checkbox-label input[type="radio"]:checked + .cor-item-codigo {
  color: #1aa3a3;
  font-weight: 700;
}

.cor-item-codigo {
  font-weight: 600;
  color: #1e293b;
  flex: 1;
  font-size: 0.95rem;
}

.cor-item-nome {
  background: #0ea5e9;
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.cor-checkbox-label:has(input:checked) {
  background: #e6f7f7;
  border-color: #1aa3a3;
}

.cor-checkbox-label:has(input:checked) .cor-item-nome {
  background: #1aa3a3;
}

/* Botão de escolher cor */
.produto-cor-selection {
  margin-bottom: 20px;
}

.btn-escolher-cor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  transition: all 0.3s ease;
  width: auto;
  justify-content: center;
}

.btn-escolher-cor:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  border-color: #94a3b8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-escolher-cor.cor-selecionada {
  background: linear-gradient(135deg, #e6f7f7 0%, #d1f2f2 100%);
  border-color: #1aa3a3;
  color: #1aa3a3;
}

.cor-icon {
  font-size: 1.1rem;
}

.cor-text {
  flex: 1;
}

.cor-selected {
  font-size: 0.9rem;
  color: #1aa3a3;
  font-weight: 700;
  padding: 4px 10px;
  background: #fff;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .popup-content {
    max-width: 95%;
    max-height: 85vh;
  }
  
  .popup-header h3 {
    font-size: 0.95rem;
  }
  
  .cor-checkbox-label {
    padding: 10px 12px;
    gap: 10px;
  }
  
  .cor-item-codigo {
    font-size: 0.85rem;
  }
  
  .btn-escolher-cor {
    padding: 12px 16px;
    font-size: 0.95rem;
  }
}



/* A barra de legendas antiga foi removida — ver .bloco-item-badge acima. */



/* min-width: 0 permite que a largura seja controlada pelo flex-basis inline
   (definido via JS conforme visiveisSimultaneos), evitando quebra de layout
   quando vis !== 3 (o min-width:33.333% do .slide global é herdado da Secção 3) */
.bloco-dinamico-sec .slide {
  min-width: 0;
}

.bloco-dinamico-sec .slide .bloco-media {
  border-radius: 0;
}

.bloco-dinamico-sec .slide .bloco-media img,
.bloco-dinamico-sec .slide img {
  display: block;
  width: 100%;
  max-height: 400px;
  object-fit: contain;
}

/* Item de média — imagem ou vídeo */
.bloco-media {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.bloco-media img {
  display: block;
  width: 100%;
  height: auto;       /* Altura orgânica — sem contentor fixo */
  max-height: 400px;  /* Limite para imagens quadradas */
  border-radius: 4px;
  object-fit: contain;
}

/* Ícone play sobre itens de vídeo */
.bloco-media--video .bloco-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.bloco-media--video:hover .bloco-play,
.bloco-media--video:focus-visible .bloco-play {
  opacity: 1;
}

.bloco-media--video:focus-visible {
  outline: 3px solid var(--primary-color, #0b1f3b);
  outline-offset: 2px;
}

/* Modal de vídeo */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.video-modal.is-open {
  display: flex;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
  cursor: pointer;
}

.video-modal-box {
  position: relative;
  z-index: 1;
  width: min(92vw, 900px);
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
}

.video-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal-close:hover { background: rgba(0,0,0,.85); }
.video-modal-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.video-modal-body iframe,
.video-modal-body video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* Responsivo */
@media (max-width: 1020px) {
  .bloco-carousel {
    gap: 2px;
  }
}

@media (max-width: 600px) {
  .video-modal-box {
    width: 98vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bloco-carousel .carousel-track {
    transition: none;
  }
  /* Carrossel fade: sem animação de opacidade (troca instantânea) */
  .carousel--fade .slide,
  .carousel--fade .slide.is-active {
    transition: none;
  }
  .video-modal,
  .bloco-media--video .bloco-play {
    transition: none;
  }
}
/* ----------------------------------------------------------
   Itens de bloco SEM destino configurado (SKU, Categoria e
   Link/URL todos vazios): são renderizados sem <a> para não
   terem ação de clique. Mantêm o mesmo visual, mas sem cursor
   de navegação nem animação de hover.
   ---------------------------------------------------------- */
.bloco-media--sem-link,
.bloco-media--sem-link img,
.slide--sem-link,
.slide--sem-link img,
.gallery-item--sem-link,
.gallery-item-large--sem-link,
.custom-gallery-item--sem-link,
.product-card-image--sem-link {
  cursor: default;
}

.gallery-item--sem-link:hover,
.gallery-item-large--sem-link:hover,
.custom-gallery-item--sem-link:hover {
  transform: none;
  box-shadow: none;
}

/* ==========================================================
   REFINAMENTO MOBILE (max-width: 768px)
   Cabeçalho empilhado em 3 linhas, faixa de chamadas fluida,
   espaçamento vertical compacto, rodapé reorganizado e mega menu
   em 2 colunas + subitens verticais dentro do rodapé.
   Todas as regras vivem DENTRO desta media query, pelo que os
   pontos de quebra de desktop (1020px / 760px) ficam intactos.
   ========================================================== */

@media (max-width: 768px) {

  /* ---------- 1. CABEÇALHO EM 3 LINHAS ----------
     Linha 1: logo centrada.
     Linha 2: barra PESQUISAR de largura total.
     Linha 3: carrinho/lista de cotação + WhatsApp, lado a lado e centrados. */
  .header-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 14px 12px;
    min-height: 0;
  }

  .header-inner > .brand {
    order: 1;
    align-self: center;
  }

  .brand-logo {
    height: 58px;
  }
  .brand-logo--sm {
    height: 52px;
  }

  /* A pesquisa passa a ser o segundo item, ocupando 100% da largura.
     Fica sempre visível no mobile (não há gaveta nem hambúrguer). */
  .header-inner > .search-form {
    order: 2;
    display: flex;
    width: 100%;
    min-width: 0;
  }

  .search-form input {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
  }

  /* Menu principal: removido do topo mobile junto com o hambúrguer.
     Continua a ser renderizado no DOM (o mega menu desktop depende dele),
     mas fica oculto em ecrãs ≤768px. */
  .header-inner > .main-nav {
    display: none;
  }

  /* Linha 3 do topo mobile: carrinho/lista de cotação + WhatsApp,
     lado a lado e centrados. */
  .header-inner > .header-actions {
    order: 3;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

  /* Carrinho no mobile: ícone circular (o rótulo de texto fica para o
     desktop), com o mesmo diâmetro do botão do WhatsApp para alinhar a linha. */
  .header-cart-btn {
    display: inline-flex;
    position: relative;
    width: 42px;
    height: 42px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
  }

  /* Badge menor para caber dentro do círculo de 42px */
  .header-cart-btn .cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    margin: 0;
    min-width: 16px;
    height: 16px;
    font-size: 0.62rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
  }

  .wa-btn {
    width: 42px;
    height: 42px;
  }

  .header-logo-text {
    font-size: 0.72rem;
  }

  /* ---------- 2. CÁPSULAS DE CHAMADA (badges sobre a foto) ----------
     No mobile o texto deixa de ser cortado com reticências: passa a
     quebrar em várias linhas, alinhado ao centro e sem cortes laterais. */
  .bloco-item-badge {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: calc(100% - 12px);
    width: max-content;
    padding: 5px 10px;
    font-size: 0.72rem;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
    /* Mantém o conteúdo afastado das margens da foto */
    box-sizing: border-box;
  }

  /* Com 3+ slides lado a lado o badge ficaria ilegível: os itens
     ganham largura total empilhada, o que também libera espaço.
     O seletor de bloco dinâmico é repetido para vencer a regra de
     16px de margem definida fora da media query. */
  .slide .bloco-item-badge,
  .bloco-dinamico-sec .slide .bloco-item-badge {
    max-width: calc(100% - 12px);
    left: 50%;
    transform: translateX(-50%);
  }

  /* ---------- 3. FAIXA BRANCA E BARRAS PRETAS ----------
     O título do bloco deixa de ter fundo branco sobrante e a barra
     preta do botão "voltar ao topo" alinha-se à cor global. */
  .wave-title,
  body[data-page="home"] .wave-title,
  body[data-page="home"] .bloco-dinamico-sec .wave-title {
    background: transparent;
    padding: 4px 0 2px;
  }

  .to-top {
    background: var(--primary-color, var(--navy));
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    left: auto;
    right: 12px;
    bottom: 12px;
  }

  /* ---------- 4. ESPAÇAMENTO VERTICAL COMPACTO ----------
     Encurta a distância entre banners/carrossel e os títulos das secções. */
  body[data-page="home"] .section.bloco-dinamico-sec {
    margin-top: 14px;
  }

  body[data-page="home"] .section.bloco-dinamico-sec:first-of-type {
    margin-top: 0;
  }

  .wave-title h1,
  .wave-title h2 {
    font-size: 1.05rem;
    line-height: 1.35;
    padding: 0 12px;
  }

  .section {
    padding: 12px 12px 18px;
  }

  .carousel,
  .bloco-estatico-grid,
  .image-gallery {
    max-height: none;
  }

  /* ---------- 5. MEGA MENU ----------
     O menu principal (.main-nav) está oculto em ≤768px, pelo que as
     antigas regras da "gaveta" (mega menu em 2 colunas, setas de
     subcategoria e painel branco) deixaram de ter efeito e foram
     removidas. As subcategorias continuam acessíveis no rodapé
     (.footer-acc) e na página de catálogo. */

  /* Setas do carrossel: menores e mais afastadas da borda para não
     cobrirem o texto das fotos no ecrã estreito. */
  .carousel-arrow {
    width: 34px;
    height: 34px;
    font-size: 1.4rem;
  }

  .carousel-arrow.prev { left: 4px; }
  .carousel-arrow.next { right: 4px; }

  /* ---------- 6. RODAPÉ EM BLOCOS EMPILHADOS ----------
     Ordem: menus de categorias -> links institucionais -> área inferior
     centrada (contactos, horário e redes sociais). */
  .footer-acc {
    padding: 16px 14px 4px;
  }

  .acc-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .acc-btn {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.95rem;
  }

  /* Os links institucionais passam para baixo dos menus, em coluna,
     e centrados no mesmo eixo da logomarca e de "Brindes no Rio de
     Janeiro" (Coluna 1). */
  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: stretch;
    text-align: center;
    padding: 16px 14px 24px;
  }

  .footer-right-links {
    order: 2;
    text-align: center;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 8px;
  }

  .footer-right-links a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-right-links a:last-child {
    border-bottom: 0;
  }

  /* Área inferior: faixa centrada e organizada, pronta para receber
     contactos, horário e ícones de redes sociais. */
  .footer-meta {
    order: 3;
    text-align: center;
  }

  /* Coluna 1 (logo opcional + linhas de footer.col1) — visível também no
     mobile, exatamente como no desktop. Fica em primeiro lugar no
     empilhamento, antes dos links institucionais, para que logo e
     contacto apareçam logo no início do rodapé. */
  .footer-brand {
    display: block;
    order: 1;
    text-align: center;
  }

  .footer-brand .footer-logo {
    margin: 0 auto 8px;
  }

  .footer-brand p,
  .footer-meta p {
    font-size: 0.85rem;
    line-height: 1.6;
  }

  .social {
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
  }

  /* Afasta o botão "voltar ao topo" do canto inferior esquerdo do
     rodapé, onde colidia com os textos. */
  .site-footer {
    padding-bottom: 8px;
  }

  /* ---------- 7. CARROSSEL DO BLOCO 2 SEM A FAIXA PRETA (SÓ MOBILE) ----------
     No desktop as mensagens do Bloco 2 correm sobre a faixa preta
     fotos-vitrine/018.png. Essa imagem mede 900×33 px (proporção ~27:1):
     num ecrã de ~1200 px ela rende ~44 px de altura e o texto assenta bem,
     mas num ecrã estreito colapsa para ~13 px, enquanto a cápsula de texto
     passa a ocupar 2–3 linhas (~45–60 px) e transborda por cima e por baixo
     do preto — é o descasamento visível no mobile.

     Aqui, apenas em ecrãs ≤768 px, a faixa preta é retirada e a cápsula
     regressa ao fluxo normal do documento, passando a cartão branco com
     contorno azul, um por mensagem. Sem a imagem, os slides deixam de
     colapsar (não ficam absolutos uns sobre os outros) porque a cápsula,
     que era `position: absolute`, passa a definir a altura do slide.

     O alvo é identificado pelo próprio `src` renderizado — nenhum ficheiro
     JS, HTML ou JSON é alterado. Nota: se a foto deste bloco for trocada no
     painel administrativo, esta regra deixa de casar. */

  /* 1. A faixa preta 018.png desaparece (continua visível no desktop). */
  .bloco-dinamico-sec .carousel .carousel-track .slide img[src$="018.png"] {
    display: none;
  }

  /* 2. O slide passa a ser uma caixa de altura automática, moldada pelo
        texto — deixa de depender da altura da imagem. */
  .bloco-dinamico-sec .carousel .carousel-track .slide:has(img[src$="018.png"]) {
    display: flex;
    align-items: stretch;
    padding: 3px 0;
  }

  /* 2b. Os cartões ficam alinhados pelo centro vertical da faixa visível:
        como cada mensagem quebra em número diferente de linhas, sem isto os
        cartões de alturas diferentes ficariam desalinhados entre si.
        O :has(img...) limita a regra ao carrossel do Bloco 2 (o outro
        carrossel da página usa fotos e mantém o alinhamento original). */
  .bloco-dinamico-sec .carousel .carousel-track:has(img[src$="018.png"]) {
    align-items: center;
  }

  /* 3. A cápsula sai do modo absoluto: sem a foto, ela É o conteúdo do
        slide. Ganha cara de cartão (fundo branco + contorno azul, herdado da
        regra base) e centra o texto tanto na horizontal como na vertical. */
  .bloco-dinamico-sec .carousel .carousel-track .slide:has(img[src$="018.png"]) .bloco-item-badge {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 58px;
    margin: 0;
    /* 42px nas laterais: reserva o corredor das setas do carrossel
       (34px de largura, a 4px da borda = ocupam até 38px) para que o
       texto do cartão nunca fique por baixo delas. */
    padding: 12px 42px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
  }

  /* 4. Aproxima o Bloco 3 (o bloco imediatamente seguinte) das mensagens:
        corta o fundo sobrante do carrossel e reduz o intervalo entre os
        dois blocos de 14 px (regra acima) para 6 px. */
  body[data-page="home"] .section.bloco-dinamico-sec:has(.carousel img[src$="018.png"]) {
    padding-bottom: 4px;
  }

  body[data-page="home"] .section.bloco-dinamico-sec:has(.carousel img[src$="018.png"]) + .section.bloco-dinamico-sec {
    margin-top: 6px;
  }
}

/* ==========================================================
   RODAPÉ — LINKS INSTITUCIONAIS CENTRADOS NO TABLET
   Na faixa 769–1020px o rodapé ainda usa a grelha de 3 colunas do
   desktop e os links institucionais ficavam encostados à direita, na
   terceira coluna. Aqui o bloco passa a ocupar a largura toda numa
   linha própria e centra-se no ecrã, no mesmo eixo da logomarca e de
   "Brindes no Rio de Janeiro". Só o rodapé é afetado; o cabeçalho, o
   menu e as restantes colunas ficam exatamente como estavam.
   ========================================================== */

@media (min-width: 769px) and (max-width: 1020px) {
  .footer-right-links {
    grid-column: 1 / -1;
    text-align: center;
    align-items: center;
  }
}