/* Estilos base y utilidades para animaciones */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Toast Global Styles */
.toast {
    @apply px-4 py-3 rounded shadow-lg flex items-center gap-3 backdrop-blur-md font-body-md text-white transition-all duration-500 ease-in-out transform translate-x-full opacity-0 max-w-sm pointer-events-auto;
}

.toast.show {
    @apply translate-x-0 opacity-100;
}

.toast.hide {
    @apply opacity-0 translate-x-10 pointer-events-none;
}

/* Success Toast: Verde traslúcido */
.toast.success {
    background-color: rgba(0, 62, 28, 0.85); /* Primary color traslúcido */
    border-left: 4px solid #b5f1bf; /* Primary fixed */
}

/* Error Toast: Rojo traslúcido */
.toast.error {
    background-color: rgba(186, 5, 25, 0.85); /* Secondary color traslúcido */
    border-left: 4px solid #ffdad6; /* Secondary fixed */
}

/* Fondo Animado de Partículas (Codepen Johnm__) */
.square {
  animation: squares 9.5s linear infinite;
  align-self: flex-end;
  width: 1em;
  height: 1em;
  transform: translateY(100%);
  border-radius: 4px;
}

.square:nth-child(2) { height: 1.5em; width: 3em; animation-delay: 1s; animation-duration: 17s; filter: blur(5px); }
.square:nth-child(3) { height: 2em; width: 1em; animation-delay: 1.5s; animation-duration: 8s; filter: blur(0px); }
.square:nth-child(4) { height: 1em; width: 1.5em; animation-delay: 0.5s; filter: blur(3px); animation-duration: 13s; }
.square:nth-child(5) { height: 1.25em; width: 2em; animation-delay: 4s; filter: blur(2px); animation-duration: 11s; }
.square:nth-child(6) { height: 2.5em; width: 2em; animation-delay: 2s; filter: blur(1px); animation-duration: 9s; }
.square:nth-child(7) { height: 5em; width: 2em; filter: blur(2.5px); animation-duration: 12s; }
.square:nth-child(8) { height: 1em; width: 3em; animation-delay: 5s; filter: blur(6px); animation-duration: 18s; }
.square:nth-child(9) { height: 1.5em; width: 2em; filter: blur(0.5px); animation-duration: 9s; }
.square:nth-child(10) { height: 3em; width: 2.4em; animation-delay: 6s; filter: blur(0.5px); animation-duration: 12s; }
.square:nth-child(11) { height: 2em; width: 1.5em; animation-delay: 3s; filter: blur(2px); animation-duration: 14s; }
.square:nth-child(12) { height: 1em; width: 2.5em; animation-delay: 7s; filter: blur(4px); animation-duration: 10s; }
.square:nth-child(13) { height: 4em; width: 1.5em; animation-delay: 1.2s; filter: blur(1.5px); animation-duration: 15s; }
.square:nth-child(14) { height: 1.5em; width: 1.5em; animation-delay: 8s; filter: blur(0px); animation-duration: 8s; }
.square:nth-child(15) { height: 2.5em; width: 3em; animation-delay: 4.5s; filter: blur(3.5px); animation-duration: 16s; }

@keyframes squares { 
  from { transform: translateY(100%) rotate(-50deg); }
  to   { transform: translateY(calc(-100vh + -100%)) rotate(20deg); }
}