/*
  CSS para exibir cada imagem completamente dentro de sua própria seção.
  - As seções ocupam o tamanho visível da imagem sem cortes.
  - As imagens mantêm proporção e nunca são cortadas.
  - A viewport pode ser menor que a imagem: a seção permite scroll somente nesse caso.
*/

:root {
  color-scheme: light dark;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Contêiner geral da galeria */
.image-gallery {
  display: block;
}

/* Cada seção envolve uma única imagem */
.image-section {
  display: block;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Imagem ocupa 100% da largura, altura proporcional, sem bordas laterais */
.image-section img {
  display: block;
  width: 100vw;
  height: auto;
  max-width: 100vw;
}

/* Preferência reduzida de movimento não altera nada aqui, reservado para futuras animações */
@media (prefers-reduced-motion: reduce) {
}

/* ======================== */
/* Carrossel (imagens 7-21) */
/* ======================== */
.carousel {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 16px 0;
}

.carousel-track {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  width: 90vw;
  max-width: 1024px;
  margin: 0 auto;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
  flex: 0 0 100%; /* 1 slide por largura do trilho (centralizado) */
  scroll-snap-align: start;
  position: relative; /* base para posicionar botões sobre a imagem */
}

.carousel-slide img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Card que envolve a imagem do slide */
.carousel-card {
  width: 85%;            /* reduz o tamanho visível da imagem */
  max-width: 900px;      /* limite no desktop */
  margin: 0 auto;        /* centraliza dentro do slide */
  border-radius: 12px;   /* cantos levemente arredondados */
  overflow: hidden;      /* aplica o arredondamento à imagem */
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  background: #fff;      /* garante fundo limpo ao redor da imagem */
}

/* Última seção (formulário) com fundo branco */
.form-section {
  background: #fff;
}

.form-container {
  padding: 24px;
}

/* Botões de navegação sobrepostos */
.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 999px;
  transition: background 0.2s ease-in-out;
}
.carousel-button:hover, .carousel-button:focus-visible {
  background: rgba(0, 0, 0, 0.55);
}
.carousel-button.prev { left: 8px; }
.carousel-button.next { right: 8px; }

/* Rolagem suave para navegação por âncora */
html { scroll-behavior: smooth; }
/* Botão flutuante de inscrição */
.floating-cta {
  position: fixed;
  left: 16px;
  top: 16px;
  background: #7BB627;
  color: #fff;
  font-weight: 700;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-decoration: none;
  padding: 16px 22px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  z-index: 1000;
  font-size: 18px;
}
.floating-cta:hover, .floating-cta:focus-visible {
  filter: brightness(0.95);
}