/* Estilos Cartunescos (Neo-brutalism) */
* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 96px;
}

/* Ajuda no scroll via âncoras com navbar fixa */
[id] {
  scroll-margin-top: 96px;
}

body {
  background-color: #F8F9FA;
  background-image: radial-gradient(#FFD166 2px, transparent 2px);
  background-size: 30px 30px;
  -webkit-text-size-adjust: 100%;
}

.toon-wrap img,
img {
  max-width: 100%;
  height: auto;
}

.nav-bg { background-color: #FFFFFF; }

.toon-border { border: 3px solid #1C1C1C; }
@media (min-width: 768px) { .toon-border { border-width: 4px; } }

.toon-shadow { box-shadow: 4px 4px 0px #1C1C1C; }
@media (min-width: 768px) { .toon-shadow { box-shadow: 6px 6px 0px #1C1C1C; } }

.toon-shadow-sm { box-shadow: 3px 3px 0px #1C1C1C; }

.toon-btn { transition: all 0.2s ease-in-out; }
.toon-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #1C1C1C;
}
.toon-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0px 0px 0px #1C1C1C;
}

.card-hover { transition: all 0.3s ease; }
.card-hover:hover {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 8px 8px 0px #1C1C1C;
}
@media (min-width: 768px) {
  .card-hover:hover {
    transform: translateY(-10px) rotate(-2deg);
    box-shadow: 12px 12px 0px #1C1C1C;
  }
}

.toon-input {
  border: 3px solid #1C1C1C;
  border-radius: 1rem;
  padding: 0.875rem;
  background-color: #FFFFFF;
  transition: all 0.2s;
  box-shadow: 3px 3px 0px #1C1C1C;
}
@media (min-width: 768px) {
  .toon-input {
    border-width: 4px;
    padding: 1rem;
    box-shadow: 4px 4px 0px #1C1C1C;
  }
}
.toon-input:focus {
  outline: none;
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px #1C1C1C;
}

.blob {
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
  0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
  34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
  67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}