/* ========================= */
/* ANIMACIONES GLOBALES */
/* ========================= */
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes slide-in-left { 0% { transform: translateX(-200%); } 100% { transform: translateX(0); } }
@keyframes slide-in-right { 0% { transform: translateX(200%); } 100% { transform: translateX(0); } }
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink { 50% { border-color: transparent; } }
@keyframes moveGradient { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes animate { from { opacity: 0; transform: translate(0, 50px); filter: blur(10px); } to { opacity: 1; transform: translate(0); filter: blur(0); } }
@keyframes wave { 0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 25% { border-radius: 70% 30% 30% 70% / 40% 60% 60% 40%; } 50% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 75% { border-radius: 70% 30% 30% 70% / 40% 60% 60% 40%; } 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } }

/* ========================= */
/* ANIMACIONES DEL MENÚ */
/* ========================= */
@keyframes menuGlow { 0% { box-shadow: inset -6px 5px 53px 5px rgba(255, 255, 255, 0.259), inset 0 0 0px rgba(255, 255, 255, 0); } 50% { box-shadow: inset -6px 5px 53px 5px rgba(255, 255, 255, 0.259), inset 0 0 30px rgba(255, 255, 255, 0.6); } 100% { box-shadow: inset -6px 5px 53px 5px rgba(255, 255, 255, 0.259), inset 0 0 0px rgba(255, 255, 255, 0); } }
.menu { animation: menuGlow 2s ease-out forwards; }
@media (max-width: 800px) { .menu { animation: none; } }

/* ========================= */
/* ANIMACIONES DEL HEADER */
/* ========================= */
.headerinformation { animation: fadeIn 0.7s ease-in-out forwards; }

/* ========================= */
/* ANIMACIONES DEL TÍTULO */
/* ========================= */
.hero h1 { font-weight: 600; animation-name: fadeIn; animation-duration: 2s; animation-timing-function: ease-in; animation-fill-mode: forwards; color: #91d106; }

/* ========================= */
/* ANIMACIONES DEL HERO */
/* ========================= */
.hero h2 { overflow: hidden; white-space: nowrap; border-right: 3px solid white; max-width: fit-content; animation: typing 4s steps(50, end) forwards, blink 1s step-end infinite; display: inline-block; }
@media screen and (max-width: 400px) { .hero h2 { border-right: none; white-space: wrap; animation: none; } }

/* ========================= */
/* ANIMACIONES DEL SUBMENU   */
/* ========================= */
.itemlistname.a:hover, .itemlistname.b:hover { color: #b5ff08; transition: all 0.3s ease; transform: scale(1.05); }

/* ========================= */
/* ANIMACIONES DE BOTONES */
/* ========================= */
.btn-primary.demo:hover, .btn-primary.learnmore:hover, .flip-hint:hover, .flip-hint:focus { box-shadow: 0 0.5em 0.5em -0.4em #000000, inset -6px 5px 53px 5px rgba(255, 255, 255, 0.259); transform: translateY(-0.25em); }
.btn-secondary.ai:hover, .btn-secondary:hover, .content button:hover, .thirdsection .content button:hover, .button.fac:hover { box-shadow: 0 0 25px 1px #b5ff08; transform: scale(1.03); }

/* ========================= */
/* ANIMACIONES DE LINKS */
/* ========================= */
.menulink:hover, .linksfooter:hover, .freedemotext:hover { color: #b5ff08; transition: all 0.3s ease; transform: scale(1.05); }
.dropdown-link:hover { color: #b5ff08; border-radius: 10px; margin: 0 5px; background: rgba(255, 255, 255, 0.1); }

/* ========================= */
/* ANIMACIONES DEL BOTÓN HAMBURGUESA */
/* ========================= */
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 6px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -5px); }

/* ========================= */
/* ANIMACIONES ACORDEON      */
/* ========================= */

.faq-item:hover { border-color: #94d106; box-shadow: 0 0 15px rgba(148, 209, 6, 0.2); }
.faq-item summary:hover { background: rgba(148, 209, 6, 0.1); border-radius: 20px; }
.faq-item summary::after { content: "▼"; font-size: 0.8rem; color: #94d106; transition: transform 0.3s ease; }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-answer a:hover { text-decoration: underline; filter: brightness(1.1); }
.faq-cta a:hover { text-decoration: underline; filter: brightness(1.1); }