/* 
 * ANIMACIONES PERSONALIZADAS
 */
/* Marquee Infinito (Usado en Hero - Social Hub) */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
/* Efecto Escáner (Usado en Hero - Rutas Regulares) */
@keyframes scan {
    0% {
        top: 0%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}
/* Efecto Slide Down (Usado en RegularRoutes - Visualización Mapa) */
@keyframes slideDown {
    0% {
        top: -50%;
    }
    100% {
        top: 150%;
    }
}
/* Efecto Shine (Usado en Logo Header) */
@keyframes shine {
    100% {
        left: 125%;
    }
}
/* Fade In Up (Genérico para modales/popups) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Fade In (Overlay móvil) */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Clases de Utilidad para Animación */
.animate-marquee {
    animation: marquee 40s linear infinite;
}
.animate-scan {
    animation: scan 3s linear infinite;
}
.animate-shine {
    animation: shine 1s;
}
.animate-fade-in-up {
    animation: fadeInUp 0.4s ease-out forwards;
}
.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}
.pause-on-hover:hover {
    animation-play-state: paused;
}

/*
 * ── PRESUPUESTO MULTI-STEP v2 ─────────────────────────────
 * Estilos del formulario de solicitud de presupuesto (6 pasos)
 */

/* Shake al fallar validación */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-8px);
    }
    40% {
        transform: translateX(8px);
    }
    60% {
        transform: translateX(-5px);
    }
    80% {
        transform: translateX(5px);
    }
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

/* Grid de 5 columnas para el selector de nº de caballos (2 cols en móvil) */
.yqht-grid-5 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .yqht-grid-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Options legibles en el select de país (fondo del dropdown nativo) */
.yqht-select option {
    background: #0a0f0e;
    color: #f5f5f4;
}

/* Estado de error para grupos de radio obligatorios sin selección */
.yqht-group-error > label > div {
    border-color: rgba(239, 68, 68, 0.5) !important;
}