.text-center {
    text-align: center;
}

.site-inner {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: unset !important;
}


.content {
    width: 100% !important;
}

.bg-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


section.habitacion, section.grid {
    padding: 4rem 15px 3rem;
    max-width: 1280px;
    margin: auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    place-content: center;
    place-items: start center;

    h2, p {
        font-family: 'Poppins', sans-serif;
        font-weight: 300;
    }

    h2 {
        font-size: 35px;
        color: var(--titles);
        line-height: 1;
        margin: 0 0 20px;
    }

    p {
        font-size: 18px;
        margin: 0;
    }

    .content {
        padding: 5px 10px;
    }

    .article-inner-container {
        display: grid;
        gap: 20px;
        place-items: stretch;
        place-content: stretch;
        grid-template-rows: 35px 1fr 375px 40px;

        h2 {
            margin: 0;
            font-weight: 400;
        }

        .content {
            padding: 20px 0;
            height: auto;

            > * {
                display: flex;
                gap: 10px;
                flex-flow: row;
                align-items: center;
                justify-content: start;
            }
        }

        .content:first-of-type {
            border-top: solid 1px var(--orange);
        }
        
        .content:last-of-type {
            border-top: solid 1px var(--orange);
            border-bottom: solid 1px var(--orange);
        }

    }

}

section#reservas {

    color: var(--white);
    background-color: var(--titles);
    padding: 1.5rem 15px;
    position: absolute;
    bottom: 0;
    width: 100%;

    form {
        max-width: 1280px;
        width: 100%;
        margin: auto;

        > *:not(:last-of-type) {
            border-right: solid 1px var(--white);
            display: grid;
            place-content: center;
            place-items: center;
        }

        h2 {
            font-weight: 700;
            text-align: center;
        }

        input, button {
            border-radius: 3rem;
            padding: 15px 25px;
            width: 100%;
            display: block;
            text-decoration: none;
            text-transform: uppercase;
        }

        input {
            color: var(--white);
            background-color: var(--titles);
            text-align: center;
        }

        /* WebKit / Blink (Chrome, Safari, Edge, Opera) */
        input[type="date"]::-webkit-calendar-picker-indicator {
            opacity: 0;
            cursor: pointer;
        }

        /* Firefox */
        input[type="date"] {
            -moz-appearance: textfield;
            appearance: textfield;
        }

        /* Firefox (versiones que usan este pseudoelemento) */
        input[type="date"]::-moz-calendar-picker-indicator {
            display: none;
        }

        button {
            color: var(--titles);
            background-color: var(--white);
        }

    }

    form, .in, .out {
        gap: 1.5rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        place-content: center stretch;
        place-items: stretch;
    }


    h2, input, button, label {
        font-weight: 500;
        margin: 0;
        font-family: 'Poppins', sans-serif;
        text-transform: uppercase;
        font-size: 16px;
    }


}

.splide__slide img {
    vertical-align: bottom;
    aspect-ratio: 1;
    object-fit: cover;
}

div.reserva {
    width: 100%;
    display: grid;
    text-align: center;
    padding: 0 20px;
    max-width: 400px;
    width: 100%;
    margin: auto;

    a.reserva {
        background-color: var(--titles);
        color: var(--white);
        font-size: 16px;
        font-family: 'Poppins', sans-serif;
        text-transform: uppercase;
        border-radius: 3rem;
        padding: 10px 25px;
    }
}

h2.habitacion {
    margin: 0;
    font-weight: 300;
    font-size: 40px;
    color: var(--titles);
    line-height: 1;
    font-family: 'Poppins', sans-serif;
}

section.servicios {
    padding: 0 0 2rem;

    article {
        padding: 0 15px;

        .article-inner-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            max-width: 1280px;
            place-content: center;
            place-items: center;
            margin: auto;
            width: 100%;
            padding: 3rem 0;
        }

        .ficheros {
            direction: ltr;
        }

        .article-inner-container > * {
            display: block;
        }

        h2 {
            color: var(--titles);
            font-size: 35px;
            font-family: 'Poppins', sans-serif;
            font-weight: 400;
        }

        p {
            color: var(--black);
            font-size: 18px;
            font-family: 'Poppins', sans-serif;
            font-weight: 300;
        }

    }

    article:nth-of-type(odd) {
        background-color: var(--servicio-bg);
    }
    
    article:nth-of-type(even) {
        direction: rtl;
        
        .content-container * {
            direction: ltr;
            text-align: left; 
        }
    }
}

.splide__arrow:active,
.splide__arrow:focus,
.splide__arrow:hover,
.splide__arrow {
    background: var(--white) !important;
    opacity: 1 !important;
}

@media(max-width: 1270px) {
    section.grid {
        max-width: 860px;
    }
}

@media(max-width: 1250px) {
    .in, .out {
        grid-template-columns: repeat(2, 1fr) !important;
        place-content: center start;
        place-items: center start;
        max-width: 650px;
        margin: auto;
        width: 100%;
    }

    section#reservas {
        form {
            grid-template-columns: minmax(0, 650px);
            place-content: center;

            h2 {
                font-size: 26px;
            }

            > *:not(:last-of-type) {
                border-right: unset;
            }
        }
    }
}

@media(max-width: 1000px) {
    section.servicios article .article-inner-container {
        grid-template-columns: 1fr;
        direction: ltr;
        max-width: 600px;
    }
}

@media(max-width: 850px) {
    section.habitacion,
    section.grid {
        grid-template-columns: minmax(0, 600px);
    }

    section.habitacion {
        gap: 60px;
    }
}

@media(max-width: 620px) {
    section.grid {
        grid-template-columns: 1fr;
    }
}