:root {
  --color-bg: 255 255 255;
  --color-border: 255 255 255;
  --color-box: 255 255 255;
  --box-border: 229 231 235;
  --box-sd: 226 232 240 / 0.5;
  --heading-1: 23 37 84;
  --heading-2: 31 41 55;
  --heading-3: 55 65 81;
}

.dark {
  --color-bg: 3 7 18;
  --color-box: 17 24 39;
  --box-border: 243 244 246/0.1;
  --box-sd: transparent;

  --heading-1: 255 255 255;
  --heading-2: 243 244 246;
  --heading-3: 209 213 219;
}

html {
  scroll-behavior: smooth;
}
body {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

[data-toggle-nav][data-open-nav="true"] #line1 {
  transform: translateY(0.375rem) rotate(40deg);
}
[data-toggle-nav][data-open-nav="true"] #line2 {
  transform: scaleX(0);
  opacity: 0;
}
[data-toggle-nav][data-open-nav="true"] #line3 {
  transform: translateY(-0.375rem) rotate(-40deg);
}

[data-nav-overlay][data-is-visible="true"] {
  visibility: visible;
  display: flex;
}

.glass {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(35px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(35px);
  border-radius: 20px;
  /* border: 2px solid rgba(255, 255, 255, 0.1); */
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  /* padding: 30px 30px 30px 30px; */
}


/* Estados iniciales para las animaciones */
.animate-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estado final cuando el elemento es visible */
.animate-fade-in.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Variaciones de animación */
.animate-fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade-in-left.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.animate-fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade-in-right.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.animate-fade-in-up {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade-in-up.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-scale.animate-in {
  opacity: 1;
  transform: scale(1);
}

/* Delays escalonados para elementos hijos */
.animate-fade-in:nth-child(1) { transition-delay: 0ms; }
.animate-fade-in:nth-child(2) { transition-delay: 100ms; }
.animate-fade-in:nth-child(3) { transition-delay: 200ms; }
.animate-fade-in:nth-child(4) { transition-delay: 300ms; }
.animate-fade-in:nth-child(5) { transition-delay: 400ms; }

/* Reduce motion para usuarios que lo prefieran */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-fade-in-left,
  .animate-fade-in-right,
  .animate-fade-in-up,
  .animate-scale {
    transition: none;
    opacity: 1;
    transform: none;
  }
}