/* =========================
   BEYO HOUSE - ANIMACIONES
   ========================= */

/* ====== ENTRANCE ANIMATIONS ====== */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-down {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes zoom-in {
    from { opacity: 0; transform: scale(.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Auto-play animations (on load) */
.animate-fade-in { animation: fade-in .6s ease-out forwards; }
.animate-slide-left { animation: slide-in-left .6s ease-out forwards; }
.animate-slide-right { animation: slide-in-right .6s ease-out forwards; }
.animate-slide-up { animation: slide-in-up .6s ease-out forwards; }
.animate-slide-down { animation: slide-in-down .6s ease-out forwards; }
.animate-zoom-in { animation: zoom-in .5s ease-out forwards; }

/* Delays for staggering (animaciones y reveals) */
.delay-1 { animation-delay: 100ms; transition-delay: 100ms; }
.delay-2 { animation-delay: 200ms; transition-delay: 200ms; }
.delay-3 { animation-delay: 300ms; transition-delay: 300ms; }
.delay-4 { animation-delay: 400ms; transition-delay: 400ms; }
.delay-5 { animation-delay: 500ms; transition-delay: 500ms; }
.delay-6 { animation-delay: 600ms; transition-delay: 600ms; }

/* Scroll-triggered reveal */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease-out, transform .6s ease-out;
}
.reveal.active { opacity: 1; transform: translateY(0); }

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity .6s ease-out, transform .6s ease-out;
}
.reveal-left.active { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .6s ease-out, transform .6s ease-out;
}
.reveal-right.active { opacity: 1; transform: translateX(0); }

.reveal-zoom {
    opacity: 0;
    transform: scale(.95);
    transition: opacity .5s ease-out, transform .5s ease-out;
}
.reveal-zoom.active { opacity: 1; transform: scale(1); }

/* =========================
   AJUSTES CON CLASES EXISTENTES
   ========================= */

/* Cinturon de seguridad: ningun desplazamiento lateral debe
   generar scroll horizontal */
html,
body{ overflow-x: clip; }

/* Los reveals se aplican sobre etiquetas inline en algunos casos */
.minititulo.reveal{ display: block; }

/* .plan-destacado mantiene su desnivel al revelarse */
.plan-destacado.reveal,
.plan-destacado.reveal-zoom{ transform: translateY(20px); }
.plan-destacado.reveal.active{ transform: translateY(-14px); }
.plan-destacado.reveal-zoom.active{ transform: translateY(-14px) scale(1); }

@media (max-width: 768px){
    .plan-destacado.reveal.active,
    .plan-destacado.reveal-zoom.active{ transform: none; }
}

/* El hover se declara aqui para ganar al estado .active y conservar
   la duracion rapida de la transicion original */
.servicio-card.reveal:hover,
.servicio-card.reveal-zoom:hover{
    transform: translateY(-6px);
    box-shadow: var(--sombra-media);
    transition: transform .3s ease, box-shadow .3s ease;
}

.contacto-rapido article.reveal:hover,
.contacto-rapido article.reveal-zoom:hover,
.dato-premium.reveal:hover,
.mision-vision article.reveal:hover,
.equipo-grid article.reveal-zoom:hover,
.metricas article.reveal-zoom:hover{
    transform: translateY(-5px);
    box-shadow: var(--sombra-media);
    transition: transform .3s ease, box-shadow .3s ease;
}

.info-extra.reveal:hover,
.info-extra.reveal-zoom:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .03);
    transition: transform .3s ease, box-shadow .3s ease;
}

/* =========================
   RESPONSIVE - MOVIL
   ========================= */
@media (max-width: 768px){
    /* Sin desplazamiento lateral: se usa el vertical para no
       desbordar la pantalla en columnas de una sola unidad */
    .reveal-left,
    .reveal-right{
        transform: translateY(20px);
    }

    .reveal-left.active,
    .reveal-right.active{
        transform: translateY(0);
    }

    .animate-slide-left,
    .animate-slide-right{
        animation-name: slide-in-up;
    }

    .animate-slide-down{
        animation-name: fade-in;
    }
}

/* =========================
   ACCESIBILIDAD
   ========================= */
@media (prefers-reduced-motion: reduce){
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-zoom{
        opacity: 1;
        transform: none;
        transition: none;
    }

    .animate-fade-in,
    .animate-slide-left,
    .animate-slide-right,
    .animate-slide-up,
    .animate-slide-down,
    .animate-zoom-in{
        animation: none;
        opacity: 1;
        transform: none;
    }
}