/* =========================
       VARIÁVEIS GLOBAIS
    ========================= */
 :root {
   --verde: #2E7D32;
   --castanho: #5D4037;
   --header-height: 80px;
 }

 /* =========================
       RESET E BASE
    ========================= */
 html,
 body {
   max-width: 100%;
   overflow-x: hidden;
   font-family: 'Times New Roman', Times, serif;
   scroll-behavior: smooth;
   background-color: #fff;
   color: #222;
 }

 /* =========================
       HEADER / NAV
    ========================= */
 #main-header {
   width: 100vw;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;
   background-color: transparent;
   backdrop-filter: blur(0);
   transition:
     background-color 0.6s ease,
     padding 0.6s ease,
     backdrop-filter 0.6s ease,
     box-shadow 0.6s ease;
   box-shadow: none;
 }

 #main-header.scrolled {
   background: rgba(46, 125, 50, 0.95);
   backdrop-filter: blur(6px);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }

 /* =========================
   MENU MOBILE FULLSCREEN
========================= */
 #mobile-menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: var(--castanho);
   color: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transform: translateX(-100%);
   transition: transform 0.5s ease-in-out;
   z-index: 10000;
 }

 #mobile-menu.open {
   transform: translateX(0);
 }

 #mobile-menu a {
   display: block;
   padding: 1rem 0;
   font-size: 1.8rem;
   color: #fff;
   text-align: center;
   transition: color 0.3s ease;
 }

 #mobile-menu a:hover {
   color: #b5ffa6;
 }

 /* Botão de fechar */
 #close-menu {
   position: absolute;
   top: 1.5rem;
   right: 1.5rem;
   background: transparent;
   border: none;
   color: white;
   font-size: 2rem;
   cursor: pointer;
   transition: transform 0.3s ease, color 0.3s ease;
 }

 #close-menu:hover {
   transform: rotate(90deg);
   color: #b5ffa6;
 }


 /* =========================
       HERO SECTION
    ========================= */
 #home {
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 #hero-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: scale(1);
   opacity: 0;
   transition: transform 1.2s ease-in-out, opacity 1.2s ease-in-out;
 }

 #hero-overlay {
   position: absolute;
   inset: 0;
   background-color: rgba(0, 0, 0, 0);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 1.2s ease-in-out, background-color 1.2s ease-in-out;
 }

 #scroll-down {
   position: absolute;
   bottom: 8rem;
   left: 50%;
   transform: translateX(-50%);
   cursor: pointer;
   opacity: 0.8;
 }

 #scroll-down:hover {
   opacity: 1;
 }

 /* =========================
       ANIMAÇÕES
    ========================= */
 @keyframes float {
   0% {
     transform: translateY(30px);
   }

   50% {
     transform: translateY(-30px);
   }

   100% {
     transform: translateY(30px);
   }
 }

 .animate-float {
   animation: float 5s ease-in-out infinite;
 }

 @keyframes bounceSlow {

   0%,
   100% {
     transform: translateY(0);
     opacity: 0.6;
   }

   50% {
     transform: translateY(10px);
     opacity: 1;
   }
 }

 .animate-bounceSlow {
   animation: bounceSlow 1.8s ease-in-out infinite;
 }

 /* =========================
       WORDSEARCH (JOGO)
    ========================= */
 .wordsearch-wrap {
   width: 100%;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }

 #grid-container {
   width: 100%;
   touch-action: manipulation;
 }

 #grid {
   display: grid;
   gap: 6px;
   justify-content: center;
   grid-template-columns: repeat(var(--cols, 10), 1fr);
   max-width: 500px;
   margin-inline: auto;
 }

 .grid-cell {
   aspect-ratio: 1/1;
   display: flex;
   align-items: center;
   justify-content: center;
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
   font-weight: 700;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.95);
   color: #25412a;
   cursor: pointer;
   transition: transform 0.12s ease, background-color 0.12s ease, color 0.12s ease;
   font-size: clamp(12px, 3.2vw, 18px);
   padding: 2px;
 }

 .grid-cell.selected {
   background: rgba(181, 255, 166, 0.95);
 }

 .grid-cell.found {
   background: var(--verde);
   color: white;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 }

 #word-list li.found {
   text-decoration: line-through;
   opacity: 0.6;
 }

 @media (max-width: 420px) {
   .grid-cell {
     font-size: clamp(11px, 3.8vw, 16px);
   }

   #grid {
     gap: 5px;
   }
 }

 @media (min-width: 1024px) {
   #grid {
     gap: 3px;
   }

   .grid-cell {
     font-size: 14px;
   }
 }

 @media (min-width: 1280px) {
   #grid {
     gap: 2px;
   }
 }




 /* =========================
       ECOQUIZ
    ========================= */

 #quiz-container button {
   transition: all 0.3s ease;
 }

 #quiz-container button:disabled {
   cursor: not-allowed;
   opacity: 0.8;
 }