/* --- Vars --- */
:root {
    --color-accent: #03a5dd;
    --color-accent-variant: #0381ab;
    --color-dark-bg: #000;
    --color-dark-bg-alpha: rgba( 0, 0, 0, .6 );
    --color-gray-bg: #eaeaec;
    --color-dark: #3f322c;
    --color-light: #fff;
    --font-alt: 'Montserrat', sans-serif;
    --font-main: 'Lato', sans-serif;
    --width-container-large: 960px;
    --width-container-xlarge: 1140px;
    --width-container-xxlarge: 1320px;
    scroll-behavior: smooth;
}



/* --- Resets --- */
* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: 0;
}

address {
    font-style: normal;
}

ul {
    list-style: none;
}



/* --- General styles --- */
a {
    color: var( --color-accent );
    text-decoration: none;
    font-weight: 700;
}

    a:hover,
    a:focus,
    a:active {
        color: var( --color-accent-variant );
    }

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4
{
    font-family: var( --font-alt );
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
}

h1, .h1 {
    font-size: 30px;
}

h2, .h2 {
    font-size: 26px;
}

h3, .h3 {
    font-size: 24px;
}

h4, .h4 {
    font-size: 20px;
}

:is(dd, p):not(:last-child) {
    margin-bottom: 15px;
}

body {
    background-color: var( --color-light );
    color: var( --color-dark );
    font-family: var( --font-main );
    font-size: 20px;
    line-height: 1.4;
}

video,
picture,
picture > img {
    display: block;
}

video,
.swiper img,
picture > img {
    object-fit: cover;
    width: 100%;
}

form {
    background-color: var( --color-gray-bg );
    padding: 20px 0;
}

    form .container {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-left: auto;
        margin-right: auto;
        width: 300px;
    }

    form button {
        background-color: var( --color-accent );
        color: var( --color-light );
        cursor: pointer;
        display: block;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        margin: 0 auto;
        padding: 15px;
        text-align: center;
        text-transform: uppercase;
        width: 100%;
    }

        form button:is(:hover, :active, :focus) {
            background-color: var( --color-accent-variant );
        }

    form label {
        display: block;
        font-weight: 700;
        text-align: center;
        width: 100%;
    }

    form :is(input, textarea) {
        display: block;
        font-family: inherit;
        font-size: inherit;
        padding: 10px;
        width: 100%;
    }

    form textarea {
        height: 200px;
    }

    form .error {
        color: #900;
        background-color: #f99;
        border: 2px solid #f00;
    }

    form div.error {
        margin-top: 15px;
        padding: 15px;
    }

    form div.success {
        color: #070;
        font-weight: 700;
        padding: 5px;
        text-align: center;
    }


.hidden {
    display: none!important;
}

.dotted {
    padding-left: 10px;
    position: relative;
}

    .dotted li::before {
        color: var( --color-accent );
        content: '·';
        display: inline-block;
        font-weight: 700;
        left: 0;
        position: absolute;
    }

.img-full-width {
    height: 250px;
}

.container {
    padding-right: 20px;
    padding-left: 20px;
}

.bordered > * {
    border: solid var( --color-dark-bg );
    border-width: 2px 0;
}

.bordered:first-of-type > :first-child {
    border-top: 0;
}

.bordered:last-of-type > :last-child {
    border-bottom: 0;
}

:is(.split-30, .split-50) > p {
    margin-bottom: 0;
}

.split-content {
    padding: 20px;
}

.specs {
    background-color: var( --color-gray-bg );
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-transform: uppercase;
}



/* --- Pages --- */
.top-w {
    border-bottom: 1px solid var(--color-accent-variant);
}

.top-btn {
    background-color: var( --color-accent );
    border-radius: 50%;
    box-shadow: 1px 1px 4px 0 var(--color-dark-bg-alpha);
    bottom: 20px;
    height: 50px;
    padding: 16px 14px;
    position: fixed;
    right: 20px;
    width: 50px;
}

    .top-btn:hover,
    .top-btn:active {
        background-color: var( --color-accent-variant );
    }

    @keyframes top-arrow {
        0% {
            top: 27px;
        }

        50% {
            top: 22px;
        }

        100% {
            top: 27px;
        }
    }

    /* Arrow bars */
    .top-btn span,
    .top-btn:before {
        animation: top-arrow .6s infinite;
        background-color: var( --color-light );
        border-radius: 2px;
        content: '';
        display: block;
        font-size: 0;
        height: 4px;
        position: absolute;
        width: 15px;
    }

    /* Right */
    .top-btn:before {
        transform: rotateZ( 45deg ) translate( 1px, -12px );
        transform-origin: 2px 2px;
    }

    /* Left */
    .top-btn span {
        transform: rotateZ( -45deg ) translate( 2px, -3px);
    }


body > header {
    position: relative;
}

.top-w,
.footer-bottom {
    background-color: var( --color-dark-bg );
    color: var( --color-light );
}

.top-bar {
    padding: 20px 20px 35px;
    text-align: center;
}

    .top-bar img {
        display: block;
        margin: 0 auto 10px;
        width: 200px;
    }

    .top-bar .h3 {
        font-size: 16px;
    }


/* -- Menu -- */
.menu {
    display: none;
    padding-top: 30px;
}

    .opened .menu {
        display: block;
    }

/* - Animated burger - */
.menu-w {
    position: relative;
}

    .menu-w button {
        align-items: stretch;
        background-color: var( --color-accent );
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        height: 50px;
        justify-content: space-between;
        left: 50%;
        padding: 16px 14px;
        position: absolute;
        top: -25px;
        transform: translateX( -50% );
        width: 50px;
    }

        .menu-w button:active {
            background-color: var( --color-accent-variant );
        }

        /* Burger bars */
        .menu-w button span,
        .menu-w button:after,
        .menu-w button:before {
            border-radius: 2px;
            content: '';
            background-color: var( --color-light );
            font-size: 0;
            flex: 0 0 4px;
        }

        /* Top */
        .menu-w button:before {
            transition: transform .3s;
            transform: rotateZ( 0 ) translate( 0 );
            transform-origin: 2px 2px;
        }

            .menu-w.opened button:before {
                transform: rotateZ( 45deg ) translate( 2px, -2px );
            }

        /* Middle */
        .menu-w button span {
            transition: transform .3s;
            transform: rotateX( 0 );
        }

            .menu-w.opened button span {
                transform: rotateX( .25turn );
            }

        /* Bottom */
        .menu-w button:after {
            transition: transform .3s;
            transform: rotateZ( 0 ) translateX( 0 );
            transform-origin: 2px 2px;
        }

            .menu-w.opened button:after {
                transform: rotateZ( -45deg ) translate( 3px, 1px );
            }

/* - Menu content - */
.menu li {
    border-top: 1px solid var(--color-accent-variant);
}

    .menu li a {
        color: var( --color-light );
        display: block;
        padding: 15px;
        text-align: center;
    }

        .menu li a:focus,
        .menu li a:active {
            background-color: var( --color-accent );
        }


/* -- Photo -- */
.photo-w img {
    height: 250px;
    width: 100%;
}


/* -- Main -- */
.header,
section > header,
article > header {
    padding-top: 50px;
    padding-bottom: 20px;
    text-align: center;
}


/* -- Footer -- */
.footer-bottom {
    padding: 20px 0;
}

address {
    text-align: center;
}

/* --- Responsive --- */
/* -- From 576px to 991px -- */
@media (min-width: 576px) and (max-width: 991px) {

    .specs {
        flex-direction: row;
    }

        .specs > div {
            flex: 1 0 50%;
        }

    form .container {
        width: 450px;
    }

}


/* -- 992px and more -- */
@media (min-width: 992px) {

    /* --- General styles --- */
    h1, .h1 {
        font-size: 36px;
    }

    h2, .h2 {
        font-size: 28px;
    }

    form .container {
        width: 450px;
    }

    .img-full-width {
        height: 500px;
    }

    .split-30,
    .split-50,
    .container {
        margin-left: auto;
        margin-right: auto;
        width: var( --width-container-large );
    }

    .row {
        display: flex;
    }

    .bordered > * {
        border-width: 2px;
    }

    .bordered > :first-child {
        border-left: 0;
    }
    
    .bordered > :last-child {
        border-right: 0;
    }
    
    .bordered:first-of-type > :last-child {
        border-top: 0;
    }

    .bordered:last-of-type > * {
        border-bottom: 0;
    }    

    .split-30 > * {
        flex: 0 0 calc(100% / 3);
    }

        .split-30 > .grow {
            flex: 1 1 auto;
        }

    .split-50 > * {
        flex: 1 0 50%;
    }

    .specs {
        order: -1;
    }

    .photo-split-left > img {
        object-position: left;
    }

        #bienvenidos .photo-split-left > img {
            height: 440px;
        }

    .photo-split-right > img {
        object-position: right;
    }

    :not(.no-image) > .top-w {
        background-color: var( --color-dark-bg-alpha );
        position: absolute;
        width: 100%;
        z-index: 10;
    }

    .top-bar {
        padding-bottom: 20px;
    }

        .top-bar img {
            width: 300px;
        }

        .top-bar .h3 {
            font-size: 20px;
        }


   /* -- Menu -- */
    .menu,
    .opened .menu {
        border-top: 1px solid var( --color-accent-variant );
        display: flex;
        justify-content: center;
        padding-top: 0;
    }

    .menu-w button {
        display: none;
    }


    /* - Contenu du menu - */
    .menu li {
        border-top: 0;
        border-left: 1px solid var( --color-accent-variant );
    }

        .menu li:last-of-type {
            border-right: 1px solid var( --color-accent-variant );
        }

        .menu li a:hover {
            background-color: var( --color-accent );
        }

    /* -- Photo -- */
    .photo-w :is(img, video) {
        height: 85vh;
    }

}


/* -- 1200px and more -- */
@media (min-width: 1200px) {

    .split-30,
    .split-50,
    .container {
        width: var( --width-container-xlarge );
    }

}


/* -- 1200px and more -- */
@media (min-width: 1400px) {

    .split-30,
    .split-50,
    .container {
        width: var( --width-container-xxlarge );
    }

}