:root {
  
  --verde-oscuro: #022c22;
  
  --verde-medio: #065f46;
  
  --verde-vivo: #10b981;
  
  --verde-claro: #ecfdf5;
}



body { font-family: 'Inter', system-ui, sans-serif; }



.hero {
  
  background:
    
    linear-gradient(180deg, rgba(2,44,34,.55) 0%, rgba(2,44,34,.9) 100%),
    
    url('../img/bosque.svg') center / cover no-repeat;
  
  background-color: var(--verde-oscuro);
}



.tab-btn {
  
  
  
  
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  
  padding: 1.25rem .75rem;
  
  
  background: #fff; color: #334155;
  
  
  border: 1px solid #d1fae5; border-radius: 1rem;
  
  
  font-size: .875rem; font-weight: 600;
  
  transition: transform .2s, background .2s, color .2s, box-shadow .2s;
  
  cursor: pointer;
}



.tab-btn i { font-size: 1.25rem; color: #059669; }


.tab-btn:hover { background: #f0fdf4; }



.tab-btn:focus-visible { outline: 3px solid var(--verde-vivo); outline-offset: 2px; }

.tab-btn.activo {
  
  
  
  background: #059669; color: #fff; border-color: #059669;
  
  box-shadow: 0 8px 20px rgba(5,150,105,.35);
  
  transform: translateY(-2px);
}


.tab-btn.activo i { color: #fff; }






#d-flora li, #d-fauna li { display: flex; align-items: center; gap: .5rem; }

#d-flora li::before, #d-fauna li::before {
  
  
  
  
  
  
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--verde-vivo); flex: none;
}




.fade-in { animation: aparecer .45s ease; }





@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }



.q-opt {
  
  
  
  
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  
  
  padding: 1rem 1.25rem; text-align: left;
  
  
  border: 1px solid #e2e8f0; border-radius: .75rem;
  
  
  
  font-size: .95rem; color: #334155; background: #fff;
  
  
  transition: border-color .2s, background .2s; cursor: pointer;
}







.q-opt::after { content: ''; width: 18px; height: 18px; border: 2px solid #cbd5e1; border-radius: 50%; flex: none; }



.q-opt:hover:not(:disabled) { border-color: var(--verde-vivo); background: #f0fdf4; }



.q-opt:focus-visible { outline: 3px solid var(--verde-vivo); outline-offset: 2px; }





.q-opt.correcta { border-color: #10b981; background: #d1fae5; color: #065f46; font-weight: 600; }







.q-opt.correcta::after { content: '✓'; border: none; color: #059669; width: auto; height: auto; font-weight: 700; }




.q-opt.incorrecta { border-color: #f87171; background: #fee2e2; color: #991b1b; }







.q-opt.incorrecta::after { content: '✕'; border: none; color: #dc2626; width: auto; height: auto; font-weight: 700; }


.q-opt:disabled { cursor: default; }



.card-accion {
  
  
  
  background: #fff; border: 1px solid #d1fae5; border-radius: 1rem;
  
  
  padding: 1.75rem; box-shadow: 0 4px 14px rgba(6,95,70,.08);
}





.card-accion h3 { margin-top: 1.25rem; font-size: 1.2rem; font-weight: 700; color: #0f172a; }





.card-accion p  { margin-top: .5rem; font-size: .9rem; line-height: 1.6; color: #475569; }

.icono-accion {
  
  
  
  width: 48px; height: 48px; border-radius: .75rem;
  
  
  
  display: flex; align-items: center; justify-content: center;
  
  
  
  background: #d1fae5; color: #047857; font-size: 1.2rem;
}


@media (prefers-reduced-motion: reduce) {
  
  
  .fade-in { animation: none; }
  
  
  html { scroll-behavior: auto; }
}