/* ==========================================================================
   BANNERS DA HOME (carrossel). Carregado só na home, depois de site.css.
   As cores vêm das variáveis de identidade.css.
   ========================================================================== */

.carrossel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.carrossel__trilho {
  position: relative; flex: 1; display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; border-radius: var(--raio-grande);
}
/* Com JavaScript as setas e os pontos fazem a navegação, então a barra de rolagem some */
.js .carrossel__trilho { scrollbar-width: none; }
.js .carrossel__trilho::-webkit-scrollbar { display: none; }
/* O trilho já arredonda os cantos; o banner fica reto para não deixar o vizinho aparecer */
.carrossel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; border-radius: 0; }

/* ---------- Banner de texto ---------- */
.faixa--principal {
  grid-template-columns: minmax(0, 1fr) 42%; grid-template-areas: "texto texto" "acoes foto";
  align-items: end; gap: 14px 8px; padding: 26px 22px 22px;
}
.faixa__texto { grid-area: texto; align-self: start; min-width: 0; }
.faixa--principal .faixa__titulo {
  margin: 0; max-width: none; color: inherit; text-wrap: balance;
  font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); line-height: var(--titulo-entrelinha);
  letter-spacing: var(--titulo-espacamento); font-size: clamp(2rem, 1.25rem + 2.5vw, 3.05rem);
}
.faixa--principal .faixa__titulo span:not(.faixa__rotulo) { color: var(--acento); }
.faixa--principal .faixa__titulo span.faixa__rotulo {
  display: block; width: fit-content; max-width: 100%; line-height: 1.3; letter-spacing: 0;
  background: var(--rotulo-fundo); color: var(--rotulo-texto);
}
.faixa--principal .faixa__apoio { color: var(--apoio); }
.faixa--principal .faixa__acoes { grid-area: acoes; margin-top: 0; }
.faixa--principal .faixa__foto { grid-area: foto; justify-self: end; width: 122%; margin: 0 -22% -24% 0; }

/* As três cores de banner */
.faixa--principal.banner--marca {
  background: var(--cor-marca); color: var(--cor-sobre-marca);
  --acento: var(--cor-destaque); --apoio: var(--cor-sobre-marca-suave);
  --rotulo-fundo: var(--cor-destaque); --rotulo-texto: var(--cor-sobre-destaque);
}
.faixa--principal.banner--destaque {
  background: var(--cor-destaque); color: var(--cor-sobre-destaque); --foco: var(--cor-marca-profunda);
  --acento: var(--cor-marca); --apoio: var(--cor-sobre-destaque);
  --rotulo-fundo: var(--cor-marca); --rotulo-texto: var(--cor-sobre-marca);
}
.faixa--principal.banner--claro {
  background: var(--cor-palco); color: var(--cor-texto);
  --acento: var(--cor-destaque-texto); --apoio: var(--cor-texto-suave);
  --rotulo-fundo: var(--cor-marca); --rotulo-texto: var(--cor-sobre-marca);
}

/* ---------- Banner de arte pronta: a imagem preenche o espaço ---------- */
.banner-arte { display: block; background: var(--cor-palco); }
.banner-arte picture { display: block; height: 100%; }
.banner-arte img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Setas, pontos e pausa (criados pelo banners.js) ---------- */
.carrossel__controles { display: flex; align-items: center; justify-content: center; }
.carrossel__controles button {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--cor-texto); transition: background-color .2s;
}
.carrossel__controles button:hover { background: var(--cor-palco); }
.carrossel__controles svg { width: 22px; height: 22px; }
.carrossel__ponto::before {
  content: ''; width: 10px; height: 10px; border-radius: 999px; background: var(--cor-superficie);
  border: 2px solid var(--cor-texto-suave); transition: width .25s, background-color .25s, border-color .25s;
}
.carrossel__ponto[aria-current="true"]::before { width: 26px; background: var(--cor-marca); border-color: var(--cor-marca); }

/* No celular fica só o botão principal: o WhatsApp já está no cabeçalho e no botão flutuante */
@media (max-width: 899.98px) { .faixa--principal .faixa__acoes .botao + .botao { display: none; } }

@media (min-width: 900px) {
  .carrossel { grid-row: span 2; }
  .faixa--principal {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); grid-template-rows: auto auto;
    grid-template-areas: "texto foto" "acoes foto"; align-content: center; align-items: center;
    gap: 22px 28px; padding: 40px 44px 40px 48px; min-height: 400px;
  }
  .faixa__texto { align-self: end; }
  .faixa--principal .faixa__acoes { align-self: start; }
  .faixa--principal .faixa__foto { justify-self: stretch; width: 100%; margin: 0; }
}