/* VARIABLES */
    :root {
        --font-family: "Open Sans", sans-serif;
        --font-size: 16px;
        --font-size-s: 14px;
        --font-color: #555;
        --font-color-title: #333;
        --line-height: 1.4;

        --gap: 12px;

        --radius: 5px;

        --ico-size: 32px;

        --hero-imgH: 180px;

        --padding: 12px;
        --half-padding: calc(var(--padding) / 2);
        --double-padding: calc(var(--padding) * 2);
        --less-padding: calc(-1 * var(--padding));
        --less-half-padding: calc(var(--padding) / -2);
        --less-double-padding: calc(var(--padding) * -2);
    }

/* GENERIC */
/* #region Generic */
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: var(--font-family);
        font-size: var(--font-size);
        color: var(--font-color);
    }
    body.active-visor {
        overflow: hidden;
    }

    p {
        margin: 0;
    }
    .hidden { display: none !important;}
    .container {
        margin-inline: auto;
        max-width: 100%;
        padding-inline: 20px;
    }
/* #endregion */

/* HEADER */
/* #region Header */
    .header {
        position: sticky;
        top: 0;
        background: #fff;
        border-bottom: 1px solid #e8e8e8;
        width: 100%;
        transition: 0.3s ease;

        z-index: 10;
    }
    .header.scrolled {
        box-shadow: 0 0 15px #00000021;
    }
    .header > .container {
        --ico-size: 120px;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        }
        .header-logo img {
            width: var(--ico-size);
            height: var(--ico-size);
        }
/* #endregion */

/* MAIN */

/* HERO IMG */
/* #region Hero Img */
    .hero-image-content {
        height: var(--hero-imgH);
        }
        .hero-image-content img {
            width: 100%;
            object-fit: cover;
            height: 100%;
        }
/* #endregion */

/* INFO */
/* #region INFO */
    .info-reserva {
        margin-top: 30px;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--gap);
        }
        .info-reserva-btn {
            margin-bottom: 20px;
            background-color: #2ea921;
            color: #fff;
            text-decoration: none;
            padding: 12px;
            border-radius: 5px;
            }
            .info-reserva-btn:hover {
                background-color: #4ea245;
            }
        .info-reserva-title {
            color: var(--font-color-title);
            font-weight: 600;
            font-size: 18px;
        }
        .info-reserva-icons {
            --gap: 12px;
            --cols: 2;

            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: var(--gap);
            }
            .info-reserva-icons div {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                width: calc((100% - (calc(var(--gap) * calc(var(--cols) - 1)))) / var(--cols));
                gap: 8px;
            }
            .info-reserva-icons span {
                color: var(--font-color-title);
                font-weight: 700;
            }

        .info-reserva-icons i {
            width: var(--ico-size);
            height: var(--ico-size);
            background-repeat: no-repeat;
            background-size: var(--ico-size);
            background-position: center;
            }
            .ico-deporte { background-image: url(/img/iconos/deporte.png);}
            .ico-ocio { background-image: url(/img/iconos/ocio.png);}
            .ico-bienestar { background-image: url(/img/iconos/bienestar.png);}
            .ico-confort { background-image: url(/img/iconos/confort.png);}
/* #endregion */

/* APARTAMENTOS */
/* #region Apartamentos */
    .apartamentos {
        display: flex;
        flex-direction: column;
        margin-top: 40px;
        }
        .apartamentos-img-container {
            display: flex;
            flex-direction: column;
            gap: var(--gap);

        }
        .apartamentos-img-big img {
            width: 100%;
            border-radius: var(--radius);
        }
        .apartamentos-img-content {
            display: flex;
            flex-direction: row;
            gap: var(--gap);
            scroll-snap-type: x mandatory;
            overflow-x: scroll;
            }
            .apartamentos-img-content div {
                scroll-snap-align: start;
            }
            .apartamentos-img-content img {
                border-radius: 5px;
                width: 175px;
                height: 117px;
            }

        .apartamentos-info-container {
            width: var(--sideW);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--double-padding);
            margin-top: var(--double-padding);
            }
            .apartamentos-info-title {
                color: var(--font-color-title);
                font-size: 22px;
                font-weight: 600;
            }

            .apartamentos-info-list {
                margin: 0;
                display: flex;
                flex-direction: column;
                border: 1px solid #d8d8d8;
                border-radius: var(--radius);
                padding-block: 24px;
                padding-right: 24px;
            }
            .apartamentos-info-icons {
                display: flex;
                flex-direction: column;
                gap: var(--gap);
            }
            .apartamentos-info-icons .apartamentos-info-icons-title {
                color: var(--font-color-title);
                font-weight: 700;
                font-size: 18px;
            }
            .apartamentos-icons-container {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                }
                .apartamentos-icons-container i {
                    display: block;
                    width: var(--ico-size);
                    height: var(--ico-size);
                    background-repeat: no-repeat;
                    background-size: var(--ico-size);
                    background-position: center;
                    flex-shrink: 0;
                    }
                    .ico-aire{ background-image: url(/img/iconos/aire-acondicionado.png);}
                    .ico-tv{ background-image: url(/img/iconos/television.png);}
                    .ico-terraza{ background-image: url(/img/iconos/piscina.png);}
                    .ico-piscina{ background-image: url(/img/iconos/piscina.png);}
                    .ico-wifi{ background-image: url(/img/iconos/wifi.png);}
                    .ico-lavadora{ background-image: url(/img/iconos/lavadora.png);}
                    .ico-parking{ background-image: url(/img/iconos/parking.png);}
                    .ico-plancha{ background-image: url(/img/iconos/plancha.png);}

            .apartamentos-icons-content {
                --gap: 12px;
                --cols: 2;
                display: flex;
                flex-direction: row;
                align-items: center;
                line-height: 1;
                gap: 8px;
                width: calc((100% - (calc(var(--gap) * calc(var(--cols) - 1)))) / var(--cols));
            }

            /* Carousel Apartamentos */
                .carousel-wrapper {
                    position: relative;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }

                .btn-left,
                .btn-right {
                    --size: 24px;
                    --controls-h: 42px;
                    height: var(--controls-h);
                    width: var(--controls-h);
                    background-image: url(/img/iconos/ico-carat-r.png);
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: var(--size);
                    cursor: pointer;
                    transition: all .3s ease;
                    background-color: #00000045;
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    margin-inline: 6px;
                    transform: translateY(calc((var(--controls-h) + var(--padding)) / -2));
                }
                .btn-left { 
                    transform: scaleX(-1) translateY(calc((var(--controls-h) + var(--padding)) / -2));
                    left: calc( calc(var(--controls-h) / 2) * -1);
                }
                .btn-right {
                    right: calc( calc(var(--controls-h) / 2) * -1);
                }
                .btn-left:hover,
                .btn-right:hover {
                    background-color: #00000054;
                }
                .apartamentos-img-content {
                    scroll-behavior: smooth;
                    display: flex;
                    overflow-x: scroll;
                    scroll-snap-type: x mandatory;
                    gap: var(--gap);
                }
                

                .apartamentos-img-content {
                    padding-bottom: var(--padding);
                }
                .apartamentos-img-content div {
                    scroll-snap-align: start;
                }

                .apartamentos-img-content::-webkit-scrollbar {
                    height: 8px;
                }

                .apartamentos-img-content::-webkit-scrollbar-track {
                    background: #f6f6f6;
                }
                .apartamentos-img-content::-webkit-scrollbar-thumb {
                    border-radius: 8px;
                    background-color: #bbb
                }
/* #endregion*/

/* CARDS */
/* #region Cards */
    .cards-container {
        display: flex;
        flex-direction: column;
        margin-top: 60px;
        gap: 24px;
        }
        .card-content {
            display: flex;
            flex-direction: column;
            border: 1px solid #e5e5e5;
            border-radius: var(--radius);
            }
            .card-img {
                display: flex;
                }
                .card-img img {
                    width: 100%;
                    height: 100%;
                    border-radius: var(--radius);;
                    object-fit: cover;
                    border-radius: var(--radius) var(--radius) 0 0;
                    max-height: 200px;
                }
            .card-info {
                padding: 40px;
                display: flex;
                flex-direction: column;
                gap: var(--gap);
                }
                .card-title {
                    color: var(--font-color-title);
                    font-weight: 600;
                    font-size: 22px;
                }
                .card-text {
                    display: flex;
                    flex-direction: column;
                    gap: 14px;
                    }
                    .card-text p {
                        line-height: 1.2;
                    }
/* #endregion */

/* GALLERY */
/* #region Gallery */
    .gallery-container {
        margin-top: 60px;
        flex-direction: row;
        display: flex;
        gap: var(--gap);
        flex-wrap: wrap;
        }
        .gallery-content {
            --gap: 12px;
            --cols: 2;
            width: calc((100% - (calc(var(--gap) * calc(var(--cols) - 1)))) / var(--cols));
            }
            .gallery-content img {
                border-radius: 5px;
                width: 100%;
                height: 100%;
            }
/* #endregion */

/* CONTACTO */
/* #region Contacto */
    .contacto-container {
        margin-top: 60px;
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        }
        .contacto-header {
            display: flex;
            flex-direction: column;
            gap: 6px;
            }
            .contacto-header span {
                color: var(--font-color-title);
                font-weight: 600;
                font-size: 22px;
                line-height: 1.2;
            }
        .contacto-content {
            display: flex;
            flex-direction: column;
            gap: 24px;
            }
            .contacto-text {
                display: flex;
                flex-direction: column;
                gap: var(--gap);
                }
                .contacto-text div {
                    display: flex;
                    gap: 4px;
                    flex-direction: column;
                }
                .contacto-text span {
                    color: var(--font-color-title);
                    font-weight: 600;
                    font-size: 16px;
                }

            .contacto-map iframe {
                width: 100%;
                height: 100%;
            }
/* #endregion */

/* FOOTER */
/* #region Footer */
    footer {
        background: #f7f7f7;
        font-size: 12px;
        margin-top: 80px;
        }
        footer .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px var(--gap);
            padding-block: 12px;

        }
        footer .container a {
            text-decoration: none;
            color: var(--font-color);
        }
/* #endregion */

/* VISOR */
/* #region Visor */
        .modal-container {
            --controls-h: 54px;
            position: fixed;
            inset: 0;
            background: #000000cf;
            z-index: 100000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .modal-controls {
            display: flex;
            gap: var(--double-padding);
            position: fixed;
            justify-content: center;
            /* justify-content: space-between; */
            width: 100%;
            z-index: 10000;
            left: 50%;
            transform: translate(-50%, -50%);
            /* top: 50%; */
            bottom: 30px;
            }
            .modal-controls span {
                --size: 24px;
                height: var(--controls-h);
                width: var(--controls-h);
                background-image: url(/img/iconos/ico-carat-r.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: var(--size);
                cursor: pointer;
                transition: all .3s ease;
                background-color: #4f4f4fd9;
                border-radius: 50%;
                opacity: .8;
                margin-inline: var(--double-padding);
                }
                .modal-controls .prev { 
                    transform: rotate(180deg); 
                }
                
                .modal-controls .prev:hover,
                .modal-controls .next:hover { opacity: 1;}

                .modal-container .modal-img img {
                    width: 100%;
                    height: auto;
                    border-radius: var(--radius);
                    box-shadow: 0 0 40px 10px #00000078;
                }
                .modal-container .modal-close {
                    --ico-size: 30px;
                    position: fixed;
                    top: 10px;
                    z-index: 2000;
                    right: 22px;
                    cursor: pointer;
                    display: flex;
                    /* background-color: #555555; */
                    border-radius: 50%;
                    padding: 4px;
                    }
                    .modal-close img {
                        width: var(--ico-size);
                        height: var(--ico-size);
                        opacity: .7;
                        transition: opacity .3s ease;
                    }
                    .modal-close:hover img { opacity: 1;}
/* #endregion */

/* MEDIA QUERY */
/* #region Querys */
    @media (max-width: 767px) {
        /* VARIABLES */
            :root {
                --gap: 12px;
                --radius: 5px;
                --ico-size: 32px;
                --hero-imgH: 180px;
            }

        /* HEADER */
            .header-logo img {
                width: 60px;
                height: 60px;
                transition: 0.3s ease;
            }

        /* MAIN */
            .menu-component {
                --m-panel-bg: #fff;
                --m-panel-w: 200px;
                --m-panel-max-w: 300px;
                --m-panel-fsize: 16px;

                --m-bg: #fff;
                --m-cols: 1;
                --m-title-fsize: calc(var(--m-panel-fsize) * 1.14285);

                --m-item-bg: #fff;
                --m-item-hover: #999;
                --m-item-active: #008900;
                --m-item-h: 36px;
                --m-item-left-offset: var(--half-padding);
                --m-item-color: #555;
                --m-item-radius: 4px;
                --m-item-space: 4px;
                --m-item-fsize: 14px;
                --m-item-border: 1px;
                --m-item-border-color: #e5e5e5;

                --m-trigger-h: 40px;

                --line-w: 18px;
                --line-h: 2px;
                --line-space: 6px;

                --m-arrow-h: 10px;
                --m-arrow-color: #333;
                --m-arrow-y: 20px;

                position: absolute;
                right: 10px;
                bottom: 10px;
            }

            /* Acciones principales */
                .menu-actions {
                    position: relative;
                    white-space: nowrap;
                    }
                    .menu-actions .menu-trigger {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        gap: var(--padding);
                        min-width: var(--m-trigger-h);
                        height: var(--m-trigger-h);
                        cursor: pointer;
                    }
                    .menu-actions .menu-trigger .active-currency {
                        height: 16px;
                        line-height: 16px;
                        font-weight: 600;
                        font-size: 13px;
                        white-space: nowrap;
                    }

            /* Panel de menú */
                .menu-panel {
                    width: var(--m-panel-w);
                    max-width: var(--m-panel-max-w);
                    background-color: var(--m-panel-bg);
                    padding: var(--padding);
                    overflow-y: auto;
                    z-index: calc(var(--z-index-blackbox) + 1);
                    }
                    [data-menu-type="pannel"] .menu-panel {
                        position: fixed;
                        top: 0;
                        bottom: 0;
                        height: 100%;
                        transition: transform .3s ease;
                        }
                        [data-position="right"] .menu-panel {
                            left: 100%;
                            transform: translateX(0%);
                        }
                        [data-position="left"] .menu-panel {
                            left: 0%;
                            transform: translateX(-100%);
                        }
                    [data-menu-type="popup"] .menu-panel {
                        position: absolute;
                        top: calc(var(--m-trigger-h) + 8px);
                        right: 0;
                        transition: all .3s ease;
                        transform: translateY(-8px);
                        opacity: 0;
                        pointer-events: none;
                        box-shadow: 0 0 0 #000;
                        }
                        [data-position="bottom"] .menu-panel {}

            /* Mostrar panel */
                .menu-component.active .menu-panel {
                    }
                    [data-menu-type="pannel"][data-position="right"].active .menu-panel {
                        transform: translateX(-100%);
                    }
                    [data-menu-type="pannel"][data-position="left"].active .menu-panel {
                        transform: translateX(0%);
                    }
                    [data-menu-type="popup"].active .menu-panel {
                        transform: translateY(0%);
                        opacity: 1;
                        pointer-events: all;
                        box-shadow: 0 5px 15px #0000004d;
                        border-top: 1px solid var(--m-arrow-color);
                        }
                        [data-menu-type="popup"]:before {
                            content: "";
                            position: absolute;
                            border-left: var(--m-arrow-h) solid transparent;
                            border-right: var(--m-arrow-h) solid transparent;
                            border-bottom: calc(var(--m-arrow-h) - 2px) solid var(--m-arrow-color);
                            right: var(--m-arrow-y);
                            top: var(--m-trigger-h);
                            z-index: calc(var(--z-index-blackbox) + 1);
                            opacity: 0;
                            transition: all .3s ease;
                            transform: translateY(-8px);
                            }
                            [data-menu-type="popup"].active:before {
                                opacity: 1;
                                transform: translateY(0px);
                            }

            /* Botón de abrir */
                .open-btn {
                    cursor: pointer;
                    display: block;
                    border-radius: 4px;
                    min-width: var(--line-w);
                    width: var(--line-w);
                    height: var(--line-h);
                    position: relative;
                    background-color: #444;
                    transition: all .2s
                    ease-out;
                    }
                    .open-btn::after,
                    .open-btn::before {
                        content: '';
                        position: absolute;
                        border-radius: 4px;
                        display: block;
                        width: var(--line-w);
                        height: var(--line-h);
                        background-color: #444;
                        transition: transform .2s,top .2s
                        }
                        .open-btn::before {
                            bottom: var(--line-space)
                        }
                        .open-btn::after {
                            top: var(--line-space)
                        }
                    .menu-component.active .open-btn {
                        background-color: transparent;
                        }
                        .menu-component.active .open-btn::before {
                            transform: translateY(var(--line-space)) rotate(45deg);
                        }
                        .menu-component.active .open-btn::after {
                            transform: translateY(calc(var(--line-space) * -1)) rotate(-45deg);
                    }

            /* Botón de cerrar */
                .close-btn {
                    width: var(--m-trigger-h);
                    height: var(--m-trigger-h);
                    background: transparent;
                    border: none;
                    font-size: 24px;
                    cursor: pointer;
                    background-image: url(/img/iconos/ico-delete.png);
                    background-size: 16px;
                    background-repeat: no-repeat;
                    background-position: center;
                }

            /* Bloques del menú */
                .menu-block:not(:last-child) {
                    margin-bottom: var(--double-padding);
                    }
                    .menu-header {
                        height: var(--m-trigger-h);
                        margin-inline: var(--less-padding);
                        margin-top: var(--less-padding);
                        padding-left: var(--padding);
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: space-between;
                        }
                        .menu-header .title {
                            font-size: var(--m-title-fsize);
                            font-weight: 600;
                            margin: 0;
                        }
                    [data-menu-type="popup"] .menu-header {
                        height: 42px;
                        display: none;
                    }
                    .menu-block-header {
                        margin-bottom: 8px;
                        }
                        .menu-block-header .title {
                            margin: 0;
                            font-size: 14px;
                            font-weight: 700;
                        }
                .menu-items {
                    list-style: none;
                    padding-left: 0;
                    margin: 0;
                    display: flex;
                    flex-wrap: wrap;
                    /* gap: var(--m-item-space); */
                    }
                    .menu-items .menu-item {
                        width: calc((100% - (var(--m-cols) - 1) * var(--m-item-space)) / var(--m-cols));
                        border-bottom: 1px solid #e8e8e8;
                        }
                        .menu-items .menu-item > span {
                            /* box-shadow: 0 0 0 var(--m-item-border) var(--m-item-border-color) inset; */
                            border-radius: var(--m-item-radius);
                            background-color: var(--m-item-bg);

                            text-decoration: none;
                            color: var(--m-item-color);
                            font-size: var(--m-item-fsize);
                            min-height: var(--m-item-h);
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            padding-left: var(--padding);
                            gap: var(--half-padding);
                            }
                            .menu-items .menu-item > span[onclick] {
                                cursor: pointer;
                            }
                            .menu-items .menu-item > span:hover {
                                --m-item-border-color: var(--m-item-hover);
                            }
                            .menu-items .menu-item.active > span {
                                --m-item-border-color: var(--m-item-active);
                                background-image: url(/img/iconos/tick-mid.png);
                                background-repeat: no-repeat;
                                background-position: right 10px center;
                                background-size: 20px;
                            }

        /* APARTAMENTOS */
            .apartamentos-info-icons {
                width: 100%;
            }
            .apartamentos-icons-container {
                display: grid;
                gap: var(--gap);
                width: 100%;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
            .apartamentos-icons-content {
                width: auto;
            }

        /* CARDS */
            .card-info {
                padding: 24px;
            }
    }

    @media (min-width: 768px) {
        /* MAIN */
            .menu-component {}
            .menu-panel {}
            .menu-actions,
            .menu-header {
                display: none;
            }
            .menu-block {}
            .menu-items {
                --links-gap: 50px;
                all: unset;
                list-style: none;
                display: flex;
                flex-direction: row;
                gap: var(--links-gap);
            }
            .menu-item {
                position: relative;
                cursor: pointer;
                text-decoration: none;
                color: var(--font-color);
                font-size: 16px;
                transition: color .24s ease;
                }
                .menu-item:not(:first-child):before {
                    content: '';
                    position: absolute;
                    width: 1px;
                    height: 100%;
                    background: #d2d2d2;
                    left: calc(var(--links-gap) / -2);
                    }
                    .menu-item:hover {
                        color: #9a9a9a;
                    }
                    .menu-item.active {
                        color: #4CAF50;
                    }
            .menu-item:after {
                content: "";
                width: 0px;
                height: 2px;
                background: #4CAF50;
                position: absolute;
                left: 50%;
                top: calc(100% + 5px);
                transform: translateX(-50%);
                transition: width .24s
                ease;
                }
                .menu-item.active:after {
                    width: 80%;
                }
        .info-reserva-btn {
            font-size: 20px;
            font-weight: 600;
        }
    /* VISOR */
    .modal-container {    
        padding: calc(var(--controls-h) + calc(var(--padding) * 2));
    }
        .modal-controls {
            top: 50%;
            justify-content: space-between;
            bottom: unset;
        }
        .modal-controls span { margin-inline: var(--padding); }

    }
    @media (min-width: 1024px) {
        /* VARIABLES */
            :root {
                --hero-imgH: 260px;
            }

        /* GENERIC */
            .container {
                width: 980px;
                padding-inline: 0;
            }

        /* HEADER */
            .header-logo img {
                width: 150px;
                height: 150px;
                transition: 0.3s ease;
            }

            /* tamaño reducido */
            .header.scrolled .header-logo img {
                width: 80px;
                height: 80px;
            }

        /* HERO IMG */
            .hero-image-content {
                --hero-imgH: 400px;
            }

        /* INFO */
            /* .info-reserva-btn {
                font-size: 16px;
            } */
            .info-reserva-icons {
                flex-direction: row;
                flex-wrap: nowrap;
                gap: 82px;
                margin-top: 60px;
                }
                 .info-reserva-title {
                    text-align: center;
                    font-size: 22px;
                }

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

            .info-reserva-icons div {
                align-items: center;
            }

            .info-reserva-icons p {
                text-align: center;
            }
            .info-reserva-icons div { width: 100%;}

        /* APARTAMENTOS */
            .apartamentos {
                --sideW: 420px;
                gap: 32px;
                flex-direction: row;
                margin-top: 80px;
            }
            .apartamentos-info-container {
                gap: 26px;
                margin-top: 0;
            }
            .apartamentos-info-text {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }
            .apartamentos-info-icons {
                gap: 18px;
            }
            .apartamentos-icons-container {
                justify-content: space-between;
                gap: var(--gap);
            }
            /* .apartamentos-img-content {
                overflow-x: hidden;
            } */
            .apartamentos-img-container {
                width: calc(100% - var(--sideW));
                }
                .apartamentos-img-big { display: flex; }
            .apartamentos-img-content div {
                display: flex;
                width: calc(100% / 4);
            }
            .apartamentos-img-content div:hover img {
                opacity: .8;
            }
            .apartamentos-img-content img {
                /* width: 100%;
                height: 100%; */
                cursor: pointer;
            }

        /* Apartamentos Carousel */ 
        .btn-left,
        .btn-right { margin-inline: 0;}

        /* CARDS */
            .cards-container {
                margin-top: 120px;
                --gap: 24px;
                --cols: 3;
                flex-direction: row;
                flex-wrap: wrap;
                }
                .card-content {
                    /* gap: var(--gap); */
                    display: flex;
                    flex-direction: column;
                    width: calc((100% - (calc(var(--gap) * calc(var(--cols) - 1)))) / var(--cols));
                    }

        /* GALLERY */
            .gallery-container {
                flex-wrap: wrap;
                overflow-x: hidden;
                margin-top: 120px;
                overflow-y: clip;
            }

            .gallery-content {
                --gap: 12px;
                --cols: 6;
                width: calc((100% - (calc(var(--gap) * calc(var(--cols) - 1)))) / var(--cols));
                cursor: pointer;
                }
                .gallery-content:hover img {
                    opacity: .8;
                }

        /* CONTACTO */
            .contacto-container {
                gap: 32px;
            }
            .contacto-header span {
                font-size: 26px;
            }
            .contacto-content {
                flex-direction: row;
                gap: 32px;
            }
            .contacto-text {
                width: 40%;
            }
            .contacto-map {
                width: 100%;
            }
    }
    @media (min-width: 1200px) {
        .container {
            width: 1100px;
        }
    }

    @media (min-width: 1400px) {
        .container {
            width: 1250px;
        }
    }

    @media (min-width: 1500px) {
        .container {
            max-width: 1400px;
        }
    }
/* #endregion Querys */