/* =========================================
   ESTILOS GENERALES
========================================= */

html {

    scroll-behavior: smooth;

}


body {

    background-color: #111111;

}



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

.navbar {

    border-bottom:
        1px solid rgba(255, 193, 7, 0.25);

    box-shadow:
        0 3px 15px rgba(0, 0, 0, 0.35);

}


.navbar-brand {

    letter-spacing: 2px;

    transition: 0.3s;

}


.navbar-brand:hover {

    transform: scale(1.05);

}


.nav-link {

    position: relative;

    transition: 0.3s;

}


.nav-link:hover {

    color: #ffc107 !important;

}


.nav-link::after {

    content: "";

    position: absolute;

    width: 0;

    height: 2px;

    left: 50%;

    bottom: 2px;

    background-color: #ffc107;

    transition: 0.3s;

}


.nav-link:hover::after {

    width: 70%;

    left: 15%;

}



/* =========================================
   PORTADA
========================================= */

#inicio {

    min-height: 88vh;

    display: flex;

    align-items: center;


    /*
       ESTA ES LA ÚNICA PARTE
       QUE LLAMA A LA IMAGEN
    */

    background-image:

        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.55) 50%,
            rgba(0, 0, 0, 0.35) 100%
        ),

        url("../img/portada-barberia.jpg");


    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


/* Animación del título */

#inicio h1 {

    animation:
        aparecerIzquierda
        0.8s ease;

}


/* Animación del texto superior */

#inicio .col-lg-6:first-child > p {

    animation:
        aparecerArriba
        0.8s ease;

}


/* Tarjeta de la derecha */

#inicio .card {

    background-color:
        rgba(0, 0, 0, 0.85) !important;

    backdrop-filter:
        blur(4px);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.5);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;

    animation:
        aparecerDerecha
        0.9s ease;

}


#inicio .card:hover {

    transform:
        translateY(-8px)
        scale(1.02);

    box-shadow:
        0 25px 60px
        rgba(255, 193, 7, 0.12);

}


#inicio .display-1 {

    transition: 0.4s;

}


#inicio .card:hover .display-1 {

    transform:
        rotate(-10deg)
        scale(1.1);

}



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

.btn-warning {

    transition:
        transform 0.3s,
        box-shadow 0.3s;

}


.btn-warning:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 20px
        rgba(255, 193, 7, 0.25);

}



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

#servicios {

    padding-top:
        90px !important;

    padding-bottom:
        90px !important;

}


#servicios .card {

    border-radius: 15px;

    transition:
        transform 0.35s,
        border-color 0.35s,
        box-shadow 0.35s;

    animation:
        aparecerAbajo
        0.8s ease both;

}


#servicios
.col-lg-4:nth-child(1)
.card {

    animation-delay: 0.1s;

}


#servicios
.col-lg-4:nth-child(2)
.card {

    animation-delay: 0.25s;

}


#servicios
.col-lg-4:nth-child(3)
.card {

    animation-delay: 0.4s;

}


#servicios .card:hover {

    transform:
        translateY(-10px);

    border-color:
        #ffc107 !important;

    box-shadow:
        0 15px 35px
        rgba(255, 193, 7, 0.12);

}


#servicios .display-4 {

    transition: 0.4s;

}


#servicios
.card:hover
.display-4 {

    transform:
        scale(1.15)
        rotate(-5deg);

}



/* =========================================
   RESERVACIONES
========================================= */

#reservaciones {

    padding-top:
        90px !important;

    padding-bottom:
        90px !important;

}


#reservaciones .card {

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.4);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;

}


#reservaciones .card:hover {

    border-color:
        #ffc107 !important;

}


#reservaciones .form-control,
#reservaciones .form-select {

    transition:
        border-color 0.3s,
        box-shadow 0.3s;

}


#reservaciones .form-control:focus,
#reservaciones .form-select:focus {

    border-color:
        #ffc107;

    box-shadow:
        0 0 0 0.25rem
        rgba(255, 193, 7, 0.15);

}



/* =========================================
   MIS CITAS
========================================= */

#misCitas {

    padding-top:
        90px !important;

    padding-bottom:
        90px !important;

}


#misCitas .card {

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.4);

    transition:
        border-color 0.3s ease;

}


#misCitas .card:hover {

    border-color:
        #ffc107 !important;

}


#misCitas .form-control:focus {

    border-color:
        #ffc107;

    box-shadow:
        0 0 0 0.25rem
        rgba(255, 193, 7, 0.15);

}



/* =========================================
   LOGIN
========================================= */

.login-contenedor {

    min-height:
        calc(100vh - 75px);

    display: flex;

    align-items: center;

    padding:
        60px 0;

    background:

        radial-gradient(

            circle at 50% 50%,

            rgba(255, 193, 7, 0.08),

            transparent 35%

        ),

        #212529;

}


.login-card {

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.55);

    animation:
        aparecerAbajo
        0.7s ease;

}


.login-card:hover {

    border-color:
        #ffc107 !important;

}


.login-card .form-control:focus {

    border-color:
        #ffc107;

    box-shadow:
        0 0 0 0.25rem
        rgba(255, 193, 7, 0.15);

}



/* =========================================
   PANEL DEL ENCARGADO
========================================= */

.panel-card {

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.4);

    animation:
        aparecerAbajo
        0.7s ease;

}


.panel-card:hover {

    border-color:
        #ffc107 !important;

}


.table {

    margin-bottom: 0;

}



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

footer {

    border-top:
        1px solid
        rgba(255, 193, 7, 0.18);

}



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

@keyframes aparecerIzquierda {

    from {

        opacity: 0;

        transform:
            translateX(-40px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


@keyframes aparecerDerecha {

    from {

        opacity: 0;

        transform:
            translateX(40px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


@keyframes aparecerArriba {

    from {

        opacity: 0;

        transform:
            translateY(-25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes aparecerAbajo {

    from {

        opacity: 0;

        transform:
            translateY(35px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}



/* =========================================
   RESPONSIVO - TABLETS
========================================= */

@media (max-width: 991px) {

    #inicio {

        min-height: auto;

        text-align: center;

        background-position:
            35% center;

    }


    #inicio .card {

        margin-top: 25px;

    }

}



/* =========================================
   RESPONSIVO - CELULARES
========================================= */

@media (max-width: 576px) {

    #inicio {

        background-position:
            30% center;

    }


    #inicio h1 {

        font-size:
            2.8rem;

    }


    #inicio .card-body {

        padding:
            2rem !important;

    }


    .login-card
    .card-body {

        padding:
            2rem !important;

    }

}



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

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

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

        animation-duration:
            0.01ms !important;

        transition-duration:
            0.01ms !important;

    }

}