/* =====================================================
   ANIMATIONS.CSS
   Animaciones elegantes - Página Web Abogado
   ===================================================== */


/* ================================
   VARIABLES DE ANIMACIÓN
================================ */

:root {
    --transition-fast: 0.25s ease;
    --transition-normal: 0.4s ease;
    --transition-slow: 0.7s ease;
}


/* ================================
   ANIMACIONES DE ENTRADA
================================ */


/* Aparición suave */

.fade-in {
    opacity: 0;
    animation: fadeIn var(--transition-slow) forwards;
}


@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* Entrada desde abajo */

.slide-up {

    opacity: 0;
    transform: translateY(25px);

    animation: slideUp var(--transition-slow) forwards;

}


@keyframes slideUp {

    from {

        opacity: 0;
        transform: translateY(25px);

    }


    to {

        opacity: 1;
        transform: translateY(0);

    }

}



/* Entrada desde la izquierda */

.slide-left {

    opacity: 0;
    transform: translateX(-30px);

    animation: slideLeft var(--transition-slow) forwards;

}


@keyframes slideLeft {

    from {

        opacity: 0;
        transform: translateX(-30px);

    }


    to {

        opacity: 1;
        transform: translateX(0);

    }

}



/* Entrada desde la derecha */

.slide-right {

    opacity: 0;
    transform: translateX(30px);

    animation: slideRight var(--transition-slow) forwards;

}


@keyframes slideRight {

    from {

        opacity: 0;
        transform: translateX(30px);

    }


    to {

        opacity: 1;
        transform: translateX(0);

    }

}



/* ================================
   HEADER / NAVBAR
================================ */


/* Logo */

.logo img {

    transition: transform var(--transition-normal);

}


.logo img:hover {

    transform: scale(1.03);

}



/* Links del menú */

.nav-links a {

    position: relative;
    transition: color var(--transition-fast);

}



.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 0%;
    height: 2px;

    background: #C19B53;

    transition: width var(--transition-normal);

}



.nav-links a:hover::after {

    width: 100%;

}



/* Dropdown */

.dropdown-menu {

    opacity: 0;

    transform: translateY(10px);

    pointer-events: none;

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);

}



.dropdown:hover .dropdown-menu {

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;

}



/* ================================
   BOTONES
================================ */


.btn-primary,
.btn-outline {

    transition:

        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);

}



.btn-primary:hover,
.btn-outline:hover {

    transform: translateY(-2px);

}



.btn-primary:hover {

    box-shadow: 0 8px 20px rgba(0,0,0,0.15);

}




/* ================================
   HERO / CARRUSEL
================================ */


.hero-slide {

    opacity: 0;

    transition:

        opacity 0.8s ease,
        transform 0.8s ease;

}



.hero-slide.active {

    opacity: 1;

}



.slider-arrow {

    transition:

        background var(--transition-fast),
        transform var(--transition-fast);

}



.slider-arrow:hover {

    transform: scale(1.05);

}




.slider-dot {

    transition:

        transform var(--transition-fast),
        background var(--transition-fast);

}



.slider-dot:hover {

    transform: scale(1.2);

}




/* ================================
   TARJETAS / SERVICIOS
================================ */


.service-card,
.card {

    transition:

        transform var(--transition-normal),
        box-shadow var(--transition-normal);

}



.service-card:hover,
.card:hover {


    transform: translateY(-6px);


    box-shadow:

        0 15px 35px rgba(0,0,0,0.08);


}




/* Iconos */

.service-icon {

    transition:

        transform var(--transition-normal),
        color var(--transition-normal);

}



.service-card:hover .service-icon {

    transform: translateY(-4px);

}



/* ================================
   IMÁGENES
================================ */


.image-hover {

    overflow: hidden;

}



.image-hover img {

    transition:

        transform 0.6s ease;

}



.image-hover:hover img {

    transform: scale(1.04);

}



/* ================================
   SECCIONES AL HACER SCROLL
================================ */


.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:

        opacity 0.7s ease,
        transform 0.7s ease;

}



.reveal.active {

    opacity: 1;

    transform: translateY(0);

}



/* ================================
   FOOTER
================================ */


.footer-links a {

    transition:

        color var(--transition-fast),
        padding-left var(--transition-fast);

}



.footer-links a:hover {

    padding-left: 5px;

    color: #C19B53;

}



/* ================================
   MENU MOBILE
================================ */


.menu-toggle span {

    transition:

        transform var(--transition-fast),
        opacity var(--transition-fast);

}


.menu-toggle.active span:nth-child(1) {

    transform: translateY(7px) rotate(45deg);

}


.menu-toggle.active span:nth-child(2) {

    opacity: 0;

}


.menu-toggle.active span:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg);

}



/* ================================
   ACCESIBILIDAD
================================ */


@media (prefers-reduced-motion: reduce) {


    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        transition-duration: 0.01ms !important;

    }


}



/* =====================================================
   TRANSICIÓN CON MOVIMIENTO DEL CARRUSEL PRINCIPAL
===================================================== */
.slide.is-leaving{
    visibility:visible;
    pointer-events:none;
}
.slide.enter-next{animation:dvHeroEnterNext .95s cubic-bezier(.22,1,.36,1) both;}
.slide.enter-prev{animation:dvHeroEnterPrev .95s cubic-bezier(.22,1,.36,1) both;}
.slide.leave-next{animation:dvHeroLeaveNext .95s cubic-bezier(.22,1,.36,1) both;z-index:1;}
.slide.leave-prev{animation:dvHeroLeavePrev .95s cubic-bezier(.22,1,.36,1) both;z-index:1;}
@keyframes dvHeroEnterNext{from{opacity:0;transform:translateX(7%)}to{opacity:1;transform:translateX(0)}}
@keyframes dvHeroEnterPrev{from{opacity:0;transform:translateX(-7%)}to{opacity:1;transform:translateX(0)}}
@keyframes dvHeroLeaveNext{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4%)}}
@keyframes dvHeroLeavePrev{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4%)}}
@media (prefers-reduced-motion: reduce){
    .slide.enter-next,.slide.enter-prev,.slide.leave-next,.slide.leave-prev{animation:none!important;}
}