@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800;900&display=swap');

:root {
  --color-dark: #1e1e1e;
  --color-cyan: #2CA0B4;
  --color-yellow: #FFD166;
  --color-orange: #EF476F; 
  --color-bg: #FFF8E7; /* Soft beige to blend with fondo.png */
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--color-bg);
  background-image: url('images/fondo.png');
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  color: var(--color-dark);
  overflow-x: hidden;
}

/* Nav */
.glass-nav {
  background: rgba(255, 248, 231, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 4px solid var(--color-dark);
  transition: all 0.3s ease;
}

/* Neo-brutalist UI Elements */
.brutal-card {
  background: white;
  border: 4px solid var(--color-dark);
  border-radius: 24px;
  box-shadow: 8px 8px 0px var(--color-dark);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  z-index: 10;
}

.brutal-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0px var(--color-dark);
}

.bg-brutal-cyan { background-color: var(--color-cyan); color: white; }
.bg-brutal-yellow { background-color: var(--color-yellow); color: var(--color-dark); }
.bg-brutal-orange { background-color: var(--color-orange); color: white; }
.bg-brutal-white { background-color: white; }

.brutal-btn {
  background: var(--color-orange);
  color: white;
  border: 3px solid var(--color-dark);
  box-shadow: 5px 5px 0px var(--color-dark);
  border-radius: 12px;
  font-weight: 800;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.brutal-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0px var(--color-dark);
}

.brutal-tag {
  border: 3px solid var(--color-dark);
  border-radius: 9999px;
  padding: 0.25rem 1rem;
  font-weight: 800;
  font-size: 0.875rem;
  display: inline-block;
  box-shadow: 3px 3px 0px var(--color-dark);
}

/* Float animations for illustrations */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float-reverse {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(15px) rotate(-2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.floating-img {
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0px 15px 20px rgba(0,0,0,0.15));
}

.floating-img-reverse {
  animation: float-reverse 7s ease-in-out infinite;
  filter: drop-shadow(0px 15px 20px rgba(0,0,0,0.15));
}

/* Scroll Reveal Vanilla Classes */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Dialog / Modal Styling */
dialog::backdrop {
  background: rgba(11, 11, 26, 0.85);
  backdrop-filter: blur(8px);
}

dialog[open] {
  animation: modalShow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalShow {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}