/* ================================= */
/* FRASES CAMBIANTES DEL HERO */
/* ================================= */

.frase-1 {
    animation: frase1 12s infinite;
}

.frase-2 {
    animation: frase2 12s infinite;
}

.frase-3 {
    animation: frase3 12s infinite;
}

.frase-1 span:nth-child(1) { animation: palabra1 12s infinite; }
.frase-1 span:nth-child(2) { animation: palabra2 12s infinite; }
.frase-1 span:nth-child(3) { animation: palabra3 12s infinite; }
.frase-1 span:nth-child(4) { animation: palabra4 12s infinite; }

.frase-2 span:nth-child(1) { animation: palabra1-2 12s infinite; }
.frase-2 span:nth-child(2) { animation: palabra2-2 12s infinite; }
.frase-2 span:nth-child(3) { animation: palabra3-2 12s infinite; }
.frase-2 span:nth-child(4) { animation: palabra4-2 12s infinite; }

.frase-3 span:nth-child(1) { animation: palabra1-3 12s infinite; }
.frase-3 span:nth-child(2) { animation: palabra2-3 12s infinite; }
.frase-3 span:nth-child(3) { animation: palabra3-3 12s infinite; }

@keyframes frase1 {
    0%, 30% { opacity: 1; }
    33%, 100% { opacity: 0; }
}

@keyframes frase2 {
    0%, 33% { opacity: 0; }
    36%, 63% { opacity: 1; }
    66%, 100% { opacity: 0; }
}

@keyframes frase3 {
    0%, 66% { opacity: 0; }
    69%, 96% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes palabra1 {
    0%, 2% { opacity: 0; transform: translateY(8px); }
    5%, 30% { opacity: 1; transform: translateY(0); }
    33%, 100% { opacity: 0; }
}

@keyframes palabra2 {
    0%, 4% { opacity: 0; transform: translateY(8px); }
    7%, 30% { opacity: 1; transform: translateY(0); }
    33%, 100% { opacity: 0; }
}

@keyframes palabra3 {
    0%, 6% { opacity: 0; transform: translateY(8px); }
    9%, 30% { opacity: 1; transform: translateY(0); }
    33%, 100% { opacity: 0; }
}

@keyframes palabra4 {
    0%, 8% { opacity: 0; transform: translateY(8px); }
    11%, 30% { opacity: 1; transform: translateY(0); }
    33%, 100% { opacity: 0; }
}

@keyframes palabra1-2 {
    0%, 34% { opacity: 0; transform: translateY(8px); }
    37%, 63% { opacity: 1; transform: translateY(0); }
    66%, 100% { opacity: 0; }
}

@keyframes palabra2-2 {
    0%, 36% { opacity: 0; transform: translateY(8px); }
    39%, 63% { opacity: 1; transform: translateY(0); }
    66%, 100% { opacity: 0; }
}

@keyframes palabra3-2 {
    0%, 38% { opacity: 0; transform: translateY(8px); }
    41%, 63% { opacity: 1; transform: translateY(0); }
    66%, 100% { opacity: 0; }
}

@keyframes palabra4-2 {
    0%, 40% { opacity: 0; transform: translateY(8px); }
    43%, 63% { opacity: 1; transform: translateY(0); }
    66%, 100% { opacity: 0; }
}

@keyframes palabra1-3 {
    0%, 67% { opacity: 0; transform: translateY(8px); }
    70%, 96% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; }
}

@keyframes palabra2-3 {
    0%, 69% { opacity: 0; transform: translateY(8px); }
    72%, 96% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; }
}

@keyframes palabra3-3 {
    0%, 71% { opacity: 0; transform: translateY(8px); }
    74%, 96% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; }
}

/* ================================= */
/* BOTÓN PRINCIPAL Y TARJETAS */
/* ================================= */

.btn-principal:hover .flecha {
    transform: translateY(3px);
}

.icono-boton:active,
.filtro-chip:active {
    transform: scale(0.96);
}