/* Layout infantil - Mundo da Maitê */

:root {
  --rosa: #ff6fa5;
  --rosa-claro: #ffd6e8;
  --roxo: #b57bee;
  --amarelo: #ffd35a;
  --azul-ceu: #a6e1fa;
  --verde: #7be0a8;
}

body {
  font-family: "Baloo 2", "Comic Sans MS", cursive, sans-serif;
  background-color: #fff9fc;
  color: #5a3d5c;
}

/* Navbar */
.navbar-fun {
  background: linear-gradient(90deg, var(--rosa), var(--roxo));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.navbar-fun .navbar-brand,
.navbar-fun .nav-link {
  color: #fff !important;
  font-weight: 700;
}

.navbar-fun .nav-link:hover {
  color: var(--amarelo) !important;
}

/* Hero */
.hero-section {
  position: relative;
  min-height: 70vh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--azul-ceu), var(--rosa-claro));
}

.hero-title {
  font-weight: 800;
  color: #7a3e8c;
  text-shadow: 2px 2px 0 #fff;
}

.hero-subtitle {
  color: #6a4a6e;
}

.cloud, .star {
  position: absolute;
  font-size: 3rem;
  opacity: 0.8;
  animation: flutuar 6s ease-in-out infinite;
}

.cloud1 { top: 15%; left: 8%; }
.cloud2 { top: 60%; right: 10%; animation-delay: 1.5s; }
.star1 { top: 25%; right: 15%; font-size: 2rem; animation-delay: 0.8s; }
.star2 { bottom: 15%; left: 15%; font-size: 2rem; animation-delay: 2.2s; }
.star3 { top: 40%; left: 25%; font-size: 2rem; animation-delay: 1.5s; }

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Seções */
.section-title {
  font-weight: 800;
  color: var(--roxo);
}

.bg-section {
  background-color: var(--rosa-claro);
}

/* Cards */
.card-fun {
  border: none;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(181, 123, 238, 0.25);
  transition: transform 0.2s ease;
}

.card-fun:hover {
  transform: translateY(-6px);
}

.icone-brincadeira {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

/* Foto placeholder */
.foto-placeholder {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--amarelo), var(--rosa));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  border: 6px solid #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Galeria */
.galeria-item {
  height: 150px;
  border-radius: 16px;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--azul-ceu), var(--verde));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Botão divertido */
.btn-fun {
  background: linear-gradient(90deg, var(--amarelo), var(--rosa));
  border: none;
  color: #5a3d5c;
  font-weight: 700;
  border-radius: 50px;
  padding: 0.6rem 1.6rem;
  transition: transform 0.2s ease;
}

.btn-fun:hover {
  transform: scale(1.05);
  color: #5a3d5c;
}

/* Footer */
.footer-fun {
  background: linear-gradient(90deg, var(--roxo), var(--rosa));
  color: #fff;
  font-weight: 700;
}

/* Slide de imagens */
.slide-imagens {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  cursor: grab;
  padding: 1rem;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(181, 123, 238, 0.25);
  user-select: none;
}

.slide-imagens.arrastando {
  cursor: grabbing;
  scroll-behavior: auto;
}

.slide-imagens::-webkit-scrollbar {
  height: 8px;
}

.slide-imagens::-webkit-scrollbar-thumb {
  background: var(--rosa);
  border-radius: 8px;
}

.slide-item {
  flex: 0 0 auto;
  width: 220px;
  height: 160px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}