/* Carrossel do banner da Home: 5 slides, 6 s cada, troca suave.
   Sem JavaScript: troca sozinho por animação CSS e pausa com o mouse em cima.
   Com carrossel.js (classe .carrossel--js): setas, pontinhos clicáveis, arrastar no celular. */
.carrossel { display: block; position: relative; min-height: clamp(300px, 33vw, 440px); }
.carrossel::after { display: none; }
.carrossel__slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; }
.carrossel__slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carrossel__slide::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(5, 25, 48, 0.6), rgba(5, 25, 48, 0.2) 75%); }
.carrossel .banner__texto { position: relative; z-index: 1; }
.banner__titulo { color: #fff; font-size: clamp(2.2rem, 5.4vw, 3.8rem); font-weight: 700; line-height: 1.15; margin-top: 4px; letter-spacing: -0.01em; }

/* ---- Modo só CSS (sem JavaScript) ---- */
.carrossel:not(.carrossel--js) .carrossel__slide { animation: slide 30s infinite; }
.carrossel:not(.carrossel--js) .carrossel__slide:nth-child(1) { opacity: 1; visibility: visible; animation-delay: 0s; }
.carrossel:not(.carrossel--js) .carrossel__slide:nth-child(2) { animation-delay: 6s; }
.carrossel:not(.carrossel--js) .carrossel__slide:nth-child(3) { animation-delay: 12s; }
.carrossel:not(.carrossel--js) .carrossel__slide:nth-child(4) { animation-delay: 18s; }
.carrossel:not(.carrossel--js) .carrossel__slide:nth-child(5) { animation-delay: 24s; }
.carrossel:not(.carrossel--js):hover .carrossel__slide { animation-play-state: paused; }
.carrossel:not(.carrossel--js) .carrossel__seta { display: none; }
@keyframes slide {
  0% { opacity: 0; visibility: visible; }
  3% { opacity: 1; visibility: visible; }
  20% { opacity: 1; visibility: visible; }
  23% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}

/* ---- Modo com JavaScript ---- */
.carrossel--js .carrossel__slide { transition: opacity 0.8s ease, visibility 0.8s; }
.carrossel--js .carrossel__slide.ativo { opacity: 1; visibility: visible; }
.carrossel--js .carrossel__slide > img { transform: scale(1.12); transition: transform 7s ease-out, translate 0.6s ease-out; translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -14px); }
.carrossel--js .carrossel__slide.ativo > img { transform: scale(1.05); }
.carrossel--js .carrossel__slide .banner__texto > * { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.carrossel--js .carrossel__slide.ativo .banner__texto > * { opacity: 1; transform: none; }
.carrossel--js .carrossel__slide.ativo .banner__texto > *:nth-child(2) { transition-delay: 0.1s; }
.carrossel--js .carrossel__slide.ativo .banner__texto > *:nth-child(3) { transition-delay: 0.2s; }
.carrossel--js .carrossel__slide.ativo .banner__texto > *:nth-child(4) { transition-delay: 0.3s; }

/* Setas */
.carrossel__seta { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.2s, transform 0.2s; }
.carrossel__seta:hover { background: rgba(255, 255, 255, 0.32); transform: scale(1.08); }
.carrossel__seta svg { width: 20px; height: 20px; }
.carrossel__seta--ant { left: clamp(10px, 3vw, 28px); }
.carrossel__seta--ant svg { transform: rotate(180deg); }
.carrossel__seta--prox { right: clamp(10px, 3vw, 28px); }

/* Pontinhos */
.carrossel__pontos { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; }
.carrossel__ponto { width: 26px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: background 0.2s, width 0.3s; }
.carrossel__ponto:hover { background: rgba(255, 255, 255, 0.7); }
.carrossel__ponto.ativo { width: 40px; background: #fff; }
.carrossel:not(.carrossel--js) .carrossel__ponto { pointer-events: none; }

@media (max-width: 640px) {
  .carrossel__seta { width: 38px; height: 38px; margin-top: -19px; background: rgba(255, 255, 255, 0.12); }
  .carrossel .banner__texto { padding-inline: 52px; }
}