/* ============================================================
   Megamix — Componentes
   specs/design.md §5 a §10
   ============================================================ */

/* ============ ESTRUTURA ============ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margem-lateral);
}

.container-texto { max-width: var(--container-texto); }

.secao { padding-block: var(--secao-y); }

/* Fundo alternado — design.md §2.7 */
.secao--leite { background-color: var(--bg-soft); }

/* Blocos de cor: máximo 4 por página — design.md §2.7 */
.bloco-cor {
  background-color: var(--brand-700);
  color: var(--surface);
}
.bloco-cor--escuro { background-color: var(--brand-900); }

.bloco-cor h1, .bloco-cor h2, .bloco-cor h3, .bloco-cor h4 { color: var(--surface); }

/* Rótulo sobre azul-médio precisa ser branco: --brand-300 sobre --brand-700
   dá 3,02:1 e reprova em texto pequeno. Sobre --brand-900 (6,92:1) pode. */
.bloco-cor .rotulo,
.hero .rotulo { color: var(--surface); }
.bloco-cor--escuro .rotulo { color: var(--brand-300); }

/* Rótulo de seção — design.md §3.3 */
.rotulo {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: var(--sp-2);
}

/* Ritmo: espaço acima do título maior que abaixo — design.md §4 */
.secao__cabecalho { margin-bottom: var(--sp-8); }
.secao__cabecalho p { margin-top: var(--sp-3); }

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.texto-apoio { color: var(--ink-500); font-size: var(--fs-small); }
/* concreto SÓ sobre branco puro — design.md §2.5 / §2.7 */
.secao--leite .texto-apoio,
.bloco-cor .texto-apoio { color: inherit; }

@media (min-width: 768px) {
  .rotulo { margin-bottom: var(--sp-3); }
  .secao__cabecalho { margin-bottom: var(--sp-10); }
}

/* ============ BOTÕES — design.md §6 ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-6);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--t-rapida) var(--ease),
    color var(--t-rapida) var(--ease),
    border-color var(--t-rapida) var(--ease),
    transform var(--t-rapida) var(--ease);
}

@media (min-width: 1024px) {
  .btn { min-height: 52px; padding-inline: var(--sp-8); }
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primário: vermelho SOBRE FUNDO CLARO. Um por seção. */
.btn--primario {
  background-color: var(--accent-600);
  color: var(--surface);
}
.btn--primario:hover { background-color: var(--accent-800); color: var(--surface); }

/* Sobre bloco de cor: branco. NUNCA vermelho aqui — design.md §2.6 */
.btn--sobre-cor {
  background-color: var(--surface);
  color: var(--brand-900);
}
.btn--sobre-cor:hover { background-color: var(--bg-soft); color: var(--brand-900); }

/* Secundário */
.btn--secundario {
  background-color: transparent;
  color: var(--brand-700);
  border: 1.5px solid var(--brand-700);
}
.btn--secundario:hover {
  color: var(--brand-900);
  border-color: var(--brand-900);
}

/* Secundário sobre qualquer fundo escuro (bloco de cor, hero, menu, rodapé).
   Sem isto o botão ficaria azul sobre azul — proibido por design.md §2.6. */
.bloco-cor .btn--secundario,
.hero .btn--secundario,
.menu-lateral .btn--secundario,
.rodape .btn--secundario {
  color: var(--surface);
  border-color: var(--surface);
}
.bloco-cor .btn--secundario:hover,
.hero .btn--secundario:hover,
.menu-lateral .btn--secundario:hover,
.rodape .btn--secundario:hover {
  background-color: var(--surface);
  color: var(--brand-900);
}

/* Link com seta sobre fundo escuro */
.bloco-cor .link-seta,
.hero .link-seta { color: var(--brand-300); }
.bloco-cor .link-seta:hover,
.hero .link-seta:hover { color: var(--surface); }

/* WhatsApp: azul da marca com ícone — design.md §6 nota */
.btn--whatsapp {
  background-color: var(--brand-700);
  color: var(--surface);
}
.btn--whatsapp:hover { background-color: var(--brand-900); color: var(--surface); }

/* Terciário: link com seta */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-weight: 700;
  color: var(--brand-700);
  text-decoration: none;
  transition: color var(--t-rapida) var(--ease), gap var(--t-rapida) var(--ease);
}
.link-seta:hover { color: var(--brand-900); gap: var(--sp-3); }
.link-seta svg { flex-shrink: 0; }

.grupo-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
@media (min-width: 1024px) { .grupo-botoes { margin-top: var(--sp-8); } }

/* ============ CABEÇALHO — design.md §10 ============ */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--brand-700);
  transition: box-shadow var(--t-padrao) var(--ease);
}
.cabecalho[data-rolado="true"] { box-shadow: var(--shadow-lg); }

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-altura);
}

/* Logo: wordmark 916x427 (proporção 2,14:1) após recorte do viewBox.
   min-height 44px garante o alvo de toque exigido em site.md §11. */
.cabecalho__logo { display: flex; align-items: center; flex-shrink: 0; min-height: 44px; }
.cabecalho__logo img,
.logo-cabecalho-img { width: auto; height: 30px; object-fit: contain; }
@media (min-width: 1024px) { .cabecalho__logo img { height: 36px; } }

.nav-principal { display: none; }

.nav-principal ul {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-principal li { max-width: none; }

.nav-principal a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--surface);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--t-rapida) var(--ease);
}
.nav-principal a:hover { background-color: var(--brand-900); color: var(--surface); }

/* Página atual: sublinhado + peso, nunca só cor — site.md §12 */
.nav-principal a[aria-current="page"] {
  background-color: var(--brand-900);
  color: var(--surface);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}

.cabecalho__acoes { display: flex; align-items: center; gap: var(--sp-2); }

.cabecalho .btn--sobre-cor {
  min-height: 44px; /* alvo de toque mínimo — site.md §11 */
  padding-inline: var(--sp-4);
  font-size: var(--fs-small);
}

.botao-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--surface);
  cursor: pointer;
}
.botao-menu:hover { background-color: var(--brand-900); }

@media (min-width: 768px) {
  .nav-principal { display: block; }
  .botao-menu { display: none; }
}

/* ============ MENU MOBILE ============ */

.menu-fundo {
  position: fixed;
  inset: 0;
  z-index: 150;
  background-color: rgb(15 48 84 / 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-menu) var(--ease), visibility var(--t-menu);
}
.menu-fundo[data-aberto="true"] { opacity: 1; visibility: visible; }

.menu-lateral {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 160;
  width: min(20rem, 85vw);
  height: 100dvh;
  padding: var(--sp-4);
  background-color: var(--brand-900);
  color: var(--surface);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t-menu) var(--ease);
}
.menu-lateral[data-aberto="true"] { transform: translateX(0); }

.menu-lateral__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-altura);
  margin-bottom: var(--sp-4);
}

.menu-lateral ul { list-style: none; margin: 0; padding: 0; }
.menu-lateral li { max-width: none; border-bottom: 1px solid rgb(255 255 255 / 0.15); }

/* Só os links de navegação. Sem o :not(.btn), o botão branco do menu
   herdaria texto branco e ficaria invisível. */
.menu-lateral nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-weight: 700;
  color: var(--surface);
  text-decoration: none;
}
.menu-lateral nav a:hover { color: var(--brand-300); }
.menu-lateral a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}
.menu-lateral .btn { width: 100%; margin-top: var(--sp-6); }

@media (min-width: 768px) {
  .menu-fundo, .menu-lateral { display: none; }
}

/* ============ HERO ============ */

.hero { position: relative; background-color: var(--brand-900); }

.hero__midia { position: absolute; inset: 0; overflow: hidden; }
/* <picture> é inline por padrão e não tem altura própria: sem isto o height:100%
   da imagem não resolve, ela volta à proporção natural e sobra ou falta faixa. */
.hero__midia picture { display: block; width: 100%; height: 100%; }
.hero__midia img { width: 100%; height: 100%; object-fit: cover; }

/* Único overlay permitido: gradiente de proteção — design.md §8.4 */
.hero__midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(15 48 84 / 0.45) 0%, rgb(15 48 84 / 0.82) 100%);
}

.hero__conteudo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 480px;
  padding-block: var(--sp-16);
  color: var(--surface);
}

.hero h1 { color: var(--surface); font-size: var(--fs-display); line-height: var(--lh-display); }
.hero p { color: var(--surface); }
.hero .rotulo { color: var(--brand-300); }

.hero__linha-fina {
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--brand-300);
}

@media (min-width: 1024px) {
  /* Piso de 70vh, sem teto. Um max-height combinado com justify-content:flex-end
     faz o texto transbordar para CIMA e sumir sob o cabeçalho fixo em janelas
     baixas — conteúdo escondido viola site.md §7.2 e §12. Ver memoria.md. */
  .hero__conteudo { min-height: 70vh; }
  .hero__texto { max-width: 40rem; }
}

/* Hero compacto das páginas internas */
.hero--interno .hero__conteudo { min-height: 320px; }
@media (min-width: 1024px) {
  .hero--interno .hero__conteudo { min-height: 380px; max-height: none; }
}

/* ============ TRILHA (breadcrumb) ============ */

.trilha { font-size: var(--fs-small); }
.trilha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.trilha li { max-width: none; }
.trilha a { color: var(--brand-300); }
.trilha a:hover { color: var(--surface); }
.trilha [aria-current="page"] { color: var(--surface); font-weight: 700; }

/* ============ GRADES ============ */

.grade { display: grid; gap: var(--gap-cards); align-items: stretch; }

@media (min-width: 640px) { .grade--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .grade--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grade--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grade--setores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grade--setores { grid-template-columns: repeat(3, 1fr); } }

.duas-colunas { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 1024px) {
  .duas-colunas { grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
  .duas-colunas--midia-direita > :first-child { order: 2; }
}

/* Grupo de botões centralizado — CTA que fecha um bloco de largura total.
   Só no desktop: no celular o botão segue alinhado à esquerda, como nas demais seções. */
@media (min-width: 1024px) { .grupo-botoes--centro { justify-content: center; } }

/* ============ CARDS — design.md §7 ============ */

.card-setor {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--t-rapida) var(--ease), border-color var(--t-rapida) var(--ease);
}

/* O card inteiro vira alvo de clique — design.md §7. Também resolve o
   alvo de toque mínimo sem criar um segundo link para a mesma URL. */
.card-setor h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card-setor:has(a:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.card-setor h3 a:focus-visible { outline: none; }
.card-setor:hover, .card-setor:focus-within {
  box-shadow: var(--shadow-sm);
  border-color: var(--brand-700);
}

.card-setor__midia { position: relative; }
.card-setor__midia img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Etiqueta sobreposta — design.md §7 */
.card-setor__etiqueta {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  background-color: rgb(255 255 255 / 0.9);
  color: var(--brand-900);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.card-setor__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-2);
  padding: var(--card-padding);
}
.card-setor__corpo p { flex: 1; }
.card-setor a { text-decoration: none; }
.card-setor h3 a { color: inherit; }
.card-setor h3 a:hover { color: var(--brand-700); }

/* Card de benefício — fundo leite, sem foto */
.card-beneficio {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--card-padding);
  background-color: var(--bg-soft);
  border-radius: var(--radius-lg);
  color: var(--ink-900);
}
.card-beneficio h3, .card-beneficio h4 { color: var(--brand-900); }
.card-beneficio svg { color: var(--brand-700); }
/* Dentro de bloco de cor, o card vira translúcido claro */
.bloco-cor .card-beneficio {
  background-color: rgb(255 255 255 / 0.1);
  color: var(--surface);
}
.bloco-cor .card-beneficio h3,
.bloco-cor .card-beneficio h4 { color: var(--surface); }
.bloco-cor .card-beneficio svg { color: var(--brand-300); }

/* Card de informação */
.card-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--card-padding);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.card-info__rotulo {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.card-info__dado { font-size: var(--fs-h4); font-weight: 700; color: var(--brand-900); }

/* Passo numerado */
.passo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--card-padding);
  background-color: var(--bg-soft);
  border-radius: var(--radius-lg);
}
.passo__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  background-color: var(--brand-700);
  color: var(--surface);
  border-radius: var(--radius-full);
}
.bloco-cor .passo { background-color: rgb(255 255 255 / 0.1); color: var(--surface); }
.bloco-cor .passo__numero { background-color: var(--surface); color: var(--brand-900); }

/* Selo de produção própria — texto grafite, nunca branco (design.md §2.5) */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--accent-300);
  color: var(--ink-900);
  font-size: var(--fs-small);
  font-weight: 700;
  border-radius: var(--radius-sm);
}

/* ============ FIGURAS E GALERIA ============ */

.figura { margin: 0; }
.figura img { width: 100%; border-radius: var(--radius-xl); }
.figura--card img { border-radius: var(--radius-lg); }

.galeria {
  display: grid;
  gap: var(--gap-cards);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
.galeria img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg); }

/* ============ LINHA DO TEMPO ============ */

.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.linha-tempo > li { max-width: none; position: relative; padding-left: var(--sp-8); }
.linha-tempo > li::before {
  content: "";
  position: absolute;
  left: 7px; top: 0.6em; bottom: -1.5rem;
  width: 2px;
  background-color: var(--line);
}
.linha-tempo > li:last-child::before { display: none; }
.linha-tempo > li::after {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 16px; height: 16px;
  background-color: var(--brand-700);
  border-radius: var(--radius-full);
}
.linha-tempo__ano {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--brand-900);
  line-height: 1.2;
}
.linha-tempo p { margin-top: var(--sp-2); }

@media (min-width: 768px) {
  .linha-tempo { gap: var(--sp-8); }
}

/* ============ LISTA DE VALORES ============ */

.lista-valores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.lista-valores li {
  max-width: none;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 700;
  color: var(--brand-900);
}
.lista-valores svg { flex-shrink: 0; color: var(--brand-700); margin-top: 2px; }
@media (min-width: 640px) { .lista-valores { grid-template-columns: repeat(2, 1fr); } }

/* ============ TABELA DE HORÁRIOS ============ */

.tabela-horarios { width: 100%; border-collapse: collapse; text-align: left; }
.tabela-horarios caption {
  text-align: left;
  font-weight: 700;
  color: var(--brand-900);
  margin-bottom: var(--sp-3);
}
.tabela-horarios th, .tabela-horarios td {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tabela-horarios th { font-weight: 400; }
.tabela-horarios td { font-weight: 700; text-align: right; color: var(--brand-900); }
.tabela-envolvente { overflow-x: auto; }

/* ============ FAQ — <details> nativo, zero JS ============ */

.faq { display: flex; flex-direction: column; gap: var(--sp-3); }

.faq__item {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 56px;
  padding: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--brand-900);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--brand-700); }

.faq__item summary svg {
  flex-shrink: 0;
  color: var(--brand-700);
  transition: transform var(--t-acordeao) var(--ease);
}
.faq__item[open] summary svg { transform: rotate(180deg); }

.faq__resposta { padding: 0 var(--sp-4) var(--sp-4); }
.faq__resposta p + p { margin-top: var(--sp-3); }

/* ============ MAPA (fachada até o clique) — site.md §7 ============ */

.mapa {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--bg-soft);
  border: 1px solid var(--line);
}
.mapa__fachada {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  width: 100%;
  min-height: 280px;
  padding: var(--sp-8);
  background-color: var(--bg-soft);
  border: none;
  color: var(--ink-900);
  text-align: center;
  cursor: pointer;
}
.mapa__fachada:hover { background-color: var(--brand-300); }
.mapa__fachada svg { color: var(--brand-700); }
.mapa iframe { display: block; width: 100%; height: 380px; border: 0; }

/* ============ FORMULÁRIO ============ */

.campo { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.campo label { font-weight: 700; font-size: var(--fs-small); color: var(--brand-900); }
.campo input, .campo textarea, .campo select {
  padding: var(--sp-3);
  min-height: 48px;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-900);
}
.campo input:hover, .campo textarea:hover { border-color: var(--brand-700); }
.campo textarea { min-height: 8rem; resize: vertical; }
.campo__ajuda { font-size: var(--fs-small); color: var(--ink-500); }
/* Erro: cor + ícone + texto, nunca só cor — design.md §2.7 */
.campo__erro {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--accent-800);
}

/* ============ RODAPÉ ============ */

.rodape {
  background-color: var(--brand-900);
  color: var(--surface);
  padding-block: var(--sp-16) var(--sp-8);
}
.rodape h2, .rodape h3 { color: var(--surface); }

.rodape__grade { display: grid; gap: var(--sp-8); }
@media (min-width: 640px) { .rodape__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-10); } }

.rodape__titulo {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-300);
  margin-bottom: var(--sp-4);
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.rodape li { max-width: none; }
.rodape a { color: var(--surface); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.rodape a:hover { color: var(--brand-300); text-decoration: underline; text-underline-offset: 0.2em; }
.rodape__logo img { width: auto; height: 40px; margin-bottom: var(--sp-4); }
.rodape address { font-style: normal; }

.rodape__base {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid rgb(255 255 255 / 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-small);
  color: var(--brand-300);
}
.rodape__base p { max-width: none; }

.redes { flex-direction: row !important; gap: var(--sp-2) !important; }
.redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-sm);
}
.redes a:hover { background-color: rgb(255 255 255 / 0.1); }

/* ============ WHATSAPP FLUTUANTE ============ */

.whatsapp-flutuante {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: var(--brand-700);
  color: var(--surface);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  transition: background-color var(--t-rapida) var(--ease), transform var(--t-rapida) var(--ease);
}
.whatsapp-flutuante:hover {
  background-color: var(--brand-900);
  color: var(--surface);
  transform: translateY(-2px);
}

/* ============ AVISO DE PENDÊNCIA (só em desenvolvimento) ============ */

.pendente {
  /* NÃO usar white-space: nowrap — marcadores longos estouram a
     largura e criam scroll horizontal a 320px (site.md §11). */
  display: inline;
  padding: 0.1em 0.45em;
  background-color: var(--accent-300);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 0.85em;
  font-weight: 700;
  border-radius: 4px;
  overflow-wrap: anywhere;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ============ ENTRADA DE SEÇÃO — design.md §9 ============ */

/* O conteúdo é visível POR PADRÃO. A animação só existe quando há
   JavaScript — a classe .js é posta no <html> por script inline.
   Sem JS o conteúdo continua legível, como exige site.md §7.2. */
.js .revelar { opacity: 0; transform: translateY(12px); }
.js .revelar[data-visivel="true"] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--t-entrada) var(--ease), transform var(--t-entrada) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js .revelar { opacity: 1 !important; transform: none !important; }
}

/* ============ VITRINE DE PRODUTOS EM PROMOÇÃO (CARROSSEL CLUBE MEGA) ============ */

#topo {
  margin-bottom: 0 !important;
}

.secao--ofertas-clube,
.secao-promocoes,
#ofertas-vitrine {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.secao--ofertas-clube + #setores,
.secao-promocoes + #setores {
  padding-top: var(--sp-10) !important;
}

@media (min-width: 768px) {
  .secao--ofertas-clube,
  .secao-promocoes,
  #ofertas-vitrine {
    padding-top: 3.75rem !important;    /* distância mais folgada do banner/hero */
    padding-bottom: 3.75rem !important; /* distância mais folgada de nossos setores */
  }

  .secao--ofertas-clube + #setores,
  .secao-promocoes + #setores {
    padding-top: var(--sp-12) !important;
  }
}

.carrossel-promo__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.carrossel-promo__controles {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.carrossel-promo__controles[hidden] {
  display: none !important;
}

.carrossel-promo__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  background-color: var(--surface);
  color: var(--ink-900);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease), border-color var(--t-rapida) var(--ease);
}
.carrossel-promo__seta:hover:not(:disabled) {
  background-color: var(--brand-900);
  border-color: var(--brand-900);
  color: var(--surface);
}
.carrossel-promo__seta:disabled {
  opacity: 0.38;
  cursor: default;
}

.carrossel-promo {
  position: relative;
}

.carrossel-promo__trilha {
  display: flex;
  gap: var(--gap-cards);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--sp-1) var(--sp-4);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.carrossel-promo__trilha[data-arrastando="true"] {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}

.card-promo {
  flex: 0 0 236px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-padrao) var(--ease), box-shadow var(--t-padrao) var(--ease);
}
@media (min-width: 768px) {
  .card-promo {
    flex: 0 0 268px;
  }
}
.card-promo:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.card-promo__midia {
  aspect-ratio: 1 / 1;
  background-color: var(--surface);
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}
.card-promo__midia img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.card-promo__corpo {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

.card-promo__linha-normal {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.card-promo__preco-normal {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-500);
}
.card-promo__preco-normal--riscado {
  text-decoration: line-through;
}

.card-promo__selo-desconto {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  background-color: var(--accent-600);
  color: var(--surface);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.2;
}

.card-promo__linha-oferta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.card-promo__rotulo-oferta {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}

.card-promo__preco-oferta {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink-900);
}

.card-promo__bloco-clube {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}

.card-promo__preco-clube {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-900);
}

.card-promo__unidade {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-500);
}

.card-promo__etiqueta-clube {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-700);
}

.card-promo__nome {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-small);
  color: var(--ink-900);
  margin: var(--sp-1) 0 0;
}