@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Jost:wght@300;400&display=swap');

:root {
    --blue: 232, 40%, 24%;
    --light-blue: 195, 50%, 52%;
    --white-blue: 194, 50%, 93%;
    --yellow: 47, 70%, 60%;
    --light-yellow: 47, 70%, 75%;
    --gray: 195, 19%, 93%;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: snow;
    font-family: 'Jost', sans-serif;
}

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1, h2, h3, h4, .h1 {
    font-family: 'IBM Plex Sans', sans-serif;
    margin-bottom: 0.75em;
}

h3 {
    font-size: 1.75rem;
}

.h1 {
    font-size: 2rem;
}

.error {
    font-size: 0.9rem;
    color: red;
    text-align: center;
    margin-bottom: 0;
}

.seccion {
    padding-block: min(15vh, 5rem);
}

.primera-seccion {
    margin-top: 4rem;
    transition: 400ms ease-in-out;
}

.seccion-amarillo {
    background-color: hsl(var(--yellow));
}

.seccion-azul {
    background-color: hsl(var(--white-blue));
}

.container-large {
    width: 90%;
    margin-inline: auto;
    max-width: 1600px;
}

.container {
    width: 80%;
    margin-inline: auto;
    max-width: 1600px;
}

.container-small {
    width: 60%;
    margin-inline: auto;
    max-width: 1600px;
}

.error-modal .modal-content {
    background-color: rgb(255 220 220);
    color: red;
}

.success-modal .modal-content {
    background-color: rgb(220 235 220);
    color: green;
}

/****** NAVBAR ******/
.navbar-section {
    z-index: 100;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: hsl(var(--blue));
    color: white;
    box-shadow: 0px 0px 8px hsl(var(--blue));
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    padding: 0.5em;
    height: 4rem;
    transition: height 400ms ease-in-out;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding-block: 2px;
}
    .logo a {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .logo img {
        height: 100%;
        min-height: 40px;
        max-height: 100px;
    }

footer img {
        height: 40px;
}

#menu {
    display: flex;
    gap: 1em;
    list-style-type: none;
    align-items: center;
    height: 100%;
}

    #menu a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 0.5em 1em;
        border-radius: 3px;
    }

        #menu a:hover {
            background-color: rgba(176,205,255,0.5);
        }

#login, #Logout {
    width: 100%;
    min-width: max-content;
}

#hamburger-icon {
    position: absolute;
    top: 1.1em;
    right: 1.5em;
    cursor: pointer;
    display: none;
}

    #hamburger-icon div {
        width: 25px;
        height: 3px;
        background-color: white;
        margin: 5px 0;
        transition: 0.4s;
    }

.open .bar1 {
    -webkit-transform: rotate(-45deg) translate(-6px, 6px);
    transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
    opacity: 0;
}

.open .bar3 {
    -webkit-transform: rotate(45deg) translate(-6px, -8px);
    transform: rotate(45deg) translate(-6px, -8px);
}

.col-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.col-gap {
    column-gap: 3rem;
}

.fullspan {
    grid-column: 1 / -1;
}

.hero-title {
    padding-block: 1rem;
    text-align: center;
}

    .hero-title > * {
        margin-bottom: 0;
    }

p {
    line-height: 2em;
    margin-bottom: 1rem;
}

.large {
    font-size: 1.25em;
}

.mision {
    text-align: center;
}

#valores {
    width: 80%;
    max-width: 300px;
}

.center {
    display: flex;
    justify-content: center;
}

.vertical-center {
    display: flex;
    align-items: center;
}

/****** SLIDER *****/
.slider {
    position: relative;
    width: 100%;
    max-width: 1600px;
    aspect-ratio: 3/1;
    margin-inline: auto;
    overflow: hidden;
}

    .slider input {
        display: none;
    }

    .slider .slides {
        width: 500%;
        height: 100%;
        display: flex;
    }

    .slider .slide {
        width: 20%;
        height: 100%;
        transition: 2s;
    }

        .slider .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .slider .controls {
        position: absolute;
        padding: 0.25em;
        background-color: hsl(var(--white-blue), 0.25);
        opacity: 0;
        transition: opacity 200ms ease;
    }

        .slider .controls:hover {
            background-color: hsl(var(--white-blue), 0.5);
        }

        .slider .controls button {
            background-color: transparent;
            border: none;
            font-size: 1.5em;
            color: hsla(var(--blue),0.75);
            cursor: pointer;
            padding: 0.25em;
            z-index: 1;
        }

            .slider .controls button:hover {
                color: hsl(var(--blue));
            }

    .slider .navigation-btns {
        font-size: 2em;
        width: 100%;
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: calc(50% - 1.5em);
    }

        .slider .navigation-btns button {
            background-color: hsla(var(--white-blue),0.25);
            border: none;
            z-index: 1;
            padding: 1em 0.5em;
            font-size: 1em;
            color: hsla(var(--blue),0.75);
            cursor: pointer;
            opacity: 0;
            transition: opacity 200ms ease;
        }

    .slider:hover .navigation-btns button, .slider:hover .controls {
        opacity: 1;
    }

    .slider .navigation-btns button:hover {
        background-color: hsla(var(--white-blue),0.5);
        color: hsl(var(--blue));
    }

.navigation-manual {
    position: absolute;
    z-index: 1;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: 1em;
    padding-bottom: 1em;
}

    .navigation-manual .manual-btn {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid hsl(var(--light-blue));
        background-color: hsla(var(--white-blue),0.5);
        transition: 1s;
    }

        .navigation-manual .manual-btn:hover {
            background-color: hsl(var(--light-blue));
        }

#radio1:checked ~ .slide.first {
    margin-left: 0%;
}

#radio2:checked ~ .slide.first {
    margin-left: -20%;
}

#radio3:checked ~ .slide.first {
    margin-left: -40%;
}

#radio4:checked ~ .slide.first {
    margin-left: -60%;
}

#radio1:checked ~ .navigation-manual .manual-btn.mb1,
#radio2:checked ~ .navigation-manual .manual-btn.mb2,
#radio3:checked ~ .navigation-manual .manual-btn.mb3,
#radio4:checked ~ .navigation-manual .manual-btn.mb4 {
    background-color: hsl(var(--light-blue));
}

/***** SERVICIOS *****/
.servicios {
    background: linear-gradient( hsl(var(--blue), 0.85), hsl(var(--blue), 0.85) ), url("https://images.unsplash.com/photo-1605367615038-4e3f139fa991?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1825&q=80");
    background-repeat: no-repeat;
    background-size: cover;
}

/***** CARDS *****/
.card-heading {
    text-align: center;
    color: white;
    margin-bottom: 2rem;
}

    .card-heading img {
        width: 75px;
        margin-bottom: 1rem;
    }

.card-body {
    background-color: snow;
    padding: 2rem 3rem;
    border-radius: 3px;
    box-shadow: 0px 5px 10px 8px rgba(0, 0, 0, 0.35);
    max-width: 400px;
    margin: 1rem auto;
}

    .card-body ul li {
        list-style-type: none;
        line-height: 2em;
        font-size: 1.15em;
    }

        .card-body ul li::before {
            content: '';
            display: inline-block;
            height: 0.75em;
            width: 0.8em;
            background-image: url('https://i.ibb.co/WKjp8DC/bullet.png');
            background-size: contain;
            background-repeat: no-repeat;
            margin-right: 0.75em;
        }

/***** SIMPLE BANNER *****/
.banner {
    width: 100%;
    aspect-ratio: 4/1;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    min-height: 250px;
    max-height: 400px;
}

.banner-image {
    grid-row: 1 / 2;
    background-image: url('https://images.unsplash.com/photo-1628348068343-c6a848d2b6dd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.banner-desc {
    position: relative;
    grid-row: 1 / 2;
    z-index: 1;
    font-size: 1.15rem;
    background-color: snow;
    display: flex;
    align-items: center;
}

    .banner-desc:before {
        content: '';
        width: 60%;
        height: 100%;
        position: absolute;
        top: 0;
        background: snow;
        z-index: -1;
        transform: skewX(30deg);
        transform-origin: 0 0;
    }

.left .banner-desc:before {
    border-right: 15px solid hsl(var(--yellow));
    right: 0;
}

.right .banner-desc:before {
    left: -20%;
    border-left: 12px solid hsl(var(--yellow));
    box-shadow: -10px 0 0 snow, -24px 0 0 hsl(var(--light-blue));
}

.left .banner-desc {
    grid-column: 1 / 4;
    padding-inline: 6rem 4rem;
    border-top-right-radius: 50%;
}

.right .banner-desc {
    grid-column: 3 / -1;
    padding-inline: 4rem 6rem;
    border-bottom-left-radius: 50%;
}

.left .banner-image {
    grid-column: 3 / -1;
}

.right .banner-image {
    grid-column: 1 / 4;
}

/***** FORM *****/
.form-title {
    text-align: center;
}

.input-group {
    margin-bottom: 1rem;
}

    .input-group label, .input-group p {
        font-size: 0.9em;
        display: inline-block;
        margin-bottom: 0.25em;
    }

    .input-group input:not([type="submit"]), .input-group select, .input-group textarea {
        width: 100%;
        border: none;
        padding: 5px;
        font-size: 1rem;
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    }

    .input-group input[type="file"] {
        box-shadow: none;
        width: initial;
    }

    .input-group input:not([type="file"]):focus, .input-group textarea:focus {
        outline: none;
        box-shadow: 0px 1px 8px hsla(var(--light-blue));
    }

    .input-group textarea {
        resize: none;
    }

.submit {
    float: right;
    background-color: hsl(var(--yellow));
    border: none;
    font-size: 1rem;
    padding: 0.25em 1.25em;
    letter-spacing: 1px;
    font-family: 'Jost', sans-serif;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 1em;
    cursor: pointer;
}

footer {
    background-color: hsl(var(--blue));
    color: white;
    padding: 0.5rem 2rem;
}

@media only screen and (min-width: 769px) {
    .navbar-container.grow {
        height: 8rem;
    }
    .primera-seccion.grow {
        margin-top: 8rem;
    }
}

@media only screen and (max-width: 768px) {
    .navbar-container {
        flex-direction: column;
    }

    #hamburger-icon {
        display: block;
    }

    #menu {
        flex-direction: column;
        width: 100%;
    }

    #mobile-nav {
        display: none;
        width: 100%;
        padding: 1rem;
        position: absolute;
        top: 100%;
        background-color: hsl(var(--blue));
    }

        #mobile-nav.active {
            display: block;
        }
}

@media only screen and (max-width: 600px) {
    .container, .container-large, .container-small {
        width: 85%;
    }

    .slider {
        aspect-ratio: 2 / 1;
    }
}


/***** LOCKSCREEN *****/
#lockscreen {
    display: none;
    visibility: hidden;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 999;
    inset: 0;
    width: 100%;
    height: 100vh;
    background-color: #ccc;
    opacity: 0.75;
}

    #lockscreen.lockon {
        display: flex;
        visibility: visible;
    }

.loader {
    font-size: 10px;
    margin: 50px auto;
    text-indent: -9999em;
    width: 11em;
    height: 11em;
    border-radius: 50%;
    background: #ffffff;
    background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

    .loader:before {
        width: 50%;
        height: 50%;
        background: #ffffff;
        border-radius: 100% 0 0 0;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
    }

    .loader:after {
        width: 75%;
        height: 75%;
        border-radius: 50%;
        content: '';
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #ccc;
    }

@-webkit-keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}