body {
    background-color: var(--bs-body-bg)
}

#auth {
    height: 100vh;
    overflow-x: hidden
}

#auth #auth-right {
    height: 100%;
    background-image: url(./../img/jpg/abire-oficina.jpg) !important;
    background-size: cover !important;
    background-position: 25% 55% !important;
}

#auth #auth-left {
    padding: 5rem
}

#auth #auth-left .auth-title {
    font-size: 4rem;
    margin-bottom: 1rem
}

#auth #auth-left .auth-welcome {
    font-size: 3rem;
    margin-bottom: 1rem
}

#auth #auth-left .auth-subtitle {
    font-size: 1.7rem;
    line-height: 2.5rem;
    color: #a8aebb
}

#auth #auth-left .auth-logo {
    margin-bottom: 5.5rem
}

#auth #auth-left .auth-logo img {
    height: 6rem
}

/* ---- ESTILOS PARA ENLACES A SERVICIOS ---- */
.servicio-card {
    display: block;
    width: 100%;
    position: relative;
    border-radius: 2.5em;
    padding: 2em;
    transition: transform 0.4s ease;
}

.servicio-card .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5em;
    height: 100%;
    transition: transform 0.4s ease;
}

.servicio-card .card-top, .servicio-card .card-bottom { display: flex; }
.servicio-card .card-top { 
    justify-content: space-between;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 120%;
    margin-bottom: 5%;
}
.servicio-card .card-bottom { justify-content: right; }

.servicio-card .card-top p, .servicio-card .card-top .card-title, .servicio-card .card-bottom p, .servicio-card .card-bottom .card-title {
    margin: 0;
}

.servicio-card .card-title {
    font-weight: bold;
}

.servicio-card .card-top p, .servicio-card .card-bottom p {
    font-weight: 600;
}

.servicio-card .card-bottom {
    align-items: flex-end;
}

.servicio-card .card-image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.servicio-card .card-image svg {
    width: 4em;
    height: 4em;
    transition: transform 0.4s ease;
}

.servicio-card:hover {
    cursor: pointer;
    transform: scale(0.97);
}

.servicio-card:hover .card-content {
    transform: scale(0.96);
}

.servicio-card:hover .card-image svg {
    transform: scale(1.05);
}

.servicio-card:active {
    transform: scale(0.9);
}

/* ---- MEDIA QUERIES ---- */
@media screen and (max-width: 1399.9px) {
    #auth #auth-left {
        padding: 3rem
    }
}

@media screen and (max-width: 767px) {
    #auth #auth-left {
        padding: 5rem
    }
}

@media screen and (max-width: 576px) {
    #auth #auth-left {
        padding: 5rem 3rem
    }
}

html[data-bs-theme=dark] #auth-right {
    background: url(./../img/jpg/abire-oficina.jpg), linear-gradient(90deg, #2d499d, #3f5491)
}