:root{
  --amarillo: 247 202 24;
  --azul: 0 56 168;
  --rojo: 206 17 38;
  --bg: 12 18 28;
  --panel: 18 24 36;
  --text: 244 247 250;
}
body { font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background: rgb(var(--bg)); color: rgb(var(--text)); }
html { scroll-behavior: smooth; }
.brand-grad { background: linear-gradient(135deg, rgba(var(--amarillo),0.9), rgba(var(--azul),0.9) 55%, rgba(var(--rojo),0.9)); }
.chip-active { background: rgb(var(--amarillo)); color: #111; border-color: rgba(0,0,0,0.15); }
.chip { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); }
.panel { background: rgba(var(--panel)/1); border: 1px solid rgba(255,255,255,0.1); }
.panel-soft { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.badge { background: rgba(247,202,24,0.14); border: 1px solid rgba(247,202,24,0.35); color: rgb(var(--amarillo)); }
.glow { box-shadow: 0 0 0 0 rgba(247,202,24,0.35); animation: glow 3s ease-in-out infinite; }
@keyframes glow { 0%,100%{ box-shadow: 0 0 0 0 rgba(247,202,24,0.25);} 50%{ box-shadow: 0 0 28px 6px rgba(0,56,168,0.35);} }
.view { display: none; }
.view.active { display: block; }
:focus-visible { outline: 2px dashed rgba(247,202,24,0.8); outline-offset: 2px; }
.icon-btn { display:inline-flex; align-items:center; gap:.5rem; }

/* NUEVO: Estilos para la animación de scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Ocultar la barra de scroll en el carrusel de menú */
#menuCarousel::-webkit-scrollbar { display: none; }
#menuCarousel { -ms-overflow-style: none; scrollbar-width: none; }