@charset "utf-8";
/* ============================================================
   CARROSSEL 26 — folha de estilo
   2026-10-09 (Nipotech) — REVISADO.

   MUDANCA DESTA VERSAO
   Antes a caixa tinha proporcao FIXA (aspect-ratio: 12/5) e a imagem usava
   object-fit:cover, que RECORTA para preencher. Com imagens 470x313 (3:2) o
   recorte estourava o enquadramento. Agora a caixa herda a proporcao da
   imagem ATIVA (o JS escreve a variavel --proporcao): a largura e sempre a do
   bloco e a altura acompanha a imagem, sem recorte e sem distorcao.
   ============================================================ */

/* ============================================================
   APARENCIA — os valores abaixo sao os que voce pode querer mudar
   ============================================================ */
.carrossel{
  --cor-destaque: #ffffff;  /* cor das setas e da bolinha ativa */
  --arredondado: 0px;       /* cantos arredondados. Use 0 para cantos retos */
  --proporcao: 3 / 2;       /* so vale ate o JS medir a 1a imagem */

  position: relative;
  width: 100%;
  max-width: 1366px;        /* largura maxima do carrossel */
  margin: 0 auto;           /* centraliza na pagina */
  overflow: hidden;
  border-radius: var(--arredondado);
  background: #eee;         /* cor de fundo enquanto a imagem carrega */

  /* A altura vem da proporcao da imagem ativa. A transicao suaviza a troca
     quando as imagens tem formatos diferentes. */
  aspect-ratio: var(--proporcao);
  transition: aspect-ratio .35s ease;
}

/* Cada imagem ocupa a LARGURA toda; a altura e a natural dela.
   Ficam empilhadas (absolute) para o efeito de transicao. */
.carrossel-slides > a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;               /* escondida */
  transition: opacity .6s ease;   /* o efeito fade (0.6s) */
  display: block;
}
.carrossel-slides > a.ativo{
  opacity: 1;               /* so a imagem ativa aparece */
  z-index: 1;
}
.carrossel-slides img{
  width: 100%;              /* nunca passa da largura do bloco */
  height: auto;             /* altura proporcional, sem recorte */
  display: block;
}

/* ---------- setas ---------- */
.carrossel-seta{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: var(--cor-destaque);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.carrossel-seta:hover{ background: rgba(0,0,0,.70); }
.carrossel-seta:focus-visible{ outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.carrossel-ant { left: 12px; }
.carrossel-prox{ right: 12px; }

/* ---------- bolinhas ---------- */
.carrossel-bolinhas{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 2;
  text-align: center;
}
.carrossel-bolinhas button{
  width: 11px;
  height: 11px;
  margin: 0 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  cursor: pointer;
}
.carrossel-bolinhas button.ativo{ background: var(--cor-destaque); }
.carrossel-bolinhas button:focus-visible{ outline: 2px solid var(--cor-destaque); outline-offset: 2px; }

/* ---------- telas pequenas ---------- */
@media (max-width: 600px){
  .carrossel-seta{ width: 36px; height: 36px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce){
  .carrossel-slides > a{ transition: none; }
  .carrossel{ transition: none; }
}