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

        --brand-color: #80001b;

        --container-width: 100%;
        --container-padding: var(--half-padding);

        --logo-size: 60px;
        --logo-scrolled-size: 60px;

        --gap: 12px;
        --radius: 5px;
        --ico-size: 32px;
        --hero-imgH: 180px;

        --space: 24px;
        --offset-Y: 12px;
        --offset-X: 0px;
        --space-V: calc(var(--space) + var(--offset-Y));
        --space-H: calc(var(--space) + var(--offset-X));

        --half-space: calc(var(--space) / 2);

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

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

        --cols-num: 4;

        --CTA-bg: #2ea921;
        --CTA-bg-hover: #4ea245;

        /* gallery */
        --thumb-w: 150px;

        --z-index-relative-element: 10;
        --z-index-sticky-element: 20;
        --z-index-mains: 40;
        --z-index-blackbox: 200;
        --z-index-modal: 210;

        /* Footer */
        --footer-bg: #f7f7f7;
    }

/* GENERIC */
    body {
        margin: 0;
        font-family: var(--font-family);
        font-size: var(--font-size);
        color: var(--font-color);
        line-height: 1.4;
        background-color: #fff8fe;
        }
        body[data-visor="open"] {
            overflow: hidden;
        }
    * {
        box-sizing: border-box;
    }
    strong {
        color: #222;
        font-weight: 600;
    }
    img {
        display: block;
    }
    h1,h2,h3,h4,h5,h6 {
        margin: 0;
    }
    p {
        margin: 0;
    }
    .hidden {
        display: none !important;
    }
    .container {
        width: var(--container-width);
        padding-inline: var(--container-padding);
        margin-inline: auto;
    }

/* BTN */
    .btn {
        --h: 42px;
        --space: calc(var(--h) / 1.5);
        --f-size: 14px;
        --radius: 5px;
        --bg: #2ea921;
        --bg-hover: #2c9e1f;
        --color: white;

        text-decoration: none;
        display: flex;
        align-items: center;
        font-weight: 600;

        padding-inline: var(--space);
        height: var(--h);
        border-radius: var(--radius);
        font-size: var(--f-size);
        background-color: var(--bg);
        color: var(--color);
        }
        .btn:hover {
            --bg: var(--bg-hover);
        }
        .btn__big {
            --h: 50px;
            --f-size: 18px;
        }

/* ICONS */
    i[class*="ico-"] {
        width: var(--ico-size);
        height: var(--ico-size);
        background-repeat: no-repeat;
        background-size: var(--ico-size);
        background-position: center;
        flex-shrink: 0;
        }
        .ico-deporte { background-image: url(/img/icons/sports.png);}
        .ico-ocio { background-image: url(/img/icons/leisure.png);}
        .ico-bienestar { background-image: url(/img/icons/wellness.png);}
        .ico-confort { background-image: url(/img/icons/comfort.png);}
        .ico-aire{ background-image: url(/img/icons/air-conditioning.png);}
        .ico-tv{ background-image: url(/img/icons/television.png);}
        .ico-terraza{ background-image: url(/img/icons/terrace.png);}
        .ico-piscina{ background-image: url(/img/icons/swimming-pool.png);}
        .ico-wifi{ background-image: url(/img/icons/wifi.png);}
        .ico-lavadora{ background-image: url(/img/icons/washing-machine.png);}
        .ico-parking{ background-image: url(/img/icons/parking.png);}
        .ico-plancha{ background-image: url(/img/icons/iron.png);}

/* GRID */
	.grid-container {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 2px;
	}
	.container > .grid-container {
		margin-top: var(--space-V);
	}

	/* Mobile first */
	.grid-container > * {
		grid-column: span 12;
		padding: var(--padding);
	}
    .actions-container {
        display: flex;
        justify-content: center;
        gap: var(--padding);
    }

	/* --- Clases para Tablet y Desktop (min-width: 768px) --- */
	@media (min-width: 768px) {
	}
    @media (min-width: 1024px) {
        .col-8-lg { grid-column: span 8;}
        .col-4-lg { grid-column: span 4;}
    }

/* FLEX */
	.flex-h,
	.flex-v {
		display: flex;
		gap: var(--padding);
		}
		.flex-h {
			flex-direction: row;
		}
		.flex-v {
			flex-direction: column;
		}
    .flex-1 {
        flex: 1;
    }

/* GALLERY COMPONENT */
    .gallery__container {
        --img-W: 100%;
        --img-H: auto;

        --thumbs-img-container-W: 100%;
        --thumbs-list-wrap: nowrap;
        --thumbs-overflow-x: scroll;
        --thumbs-cols: 3;

        --scrollbar-padding: var(--padding);

        --control-size: 42px;
        --stroke-width: 2px;
        --control-icon-size: 24px;
        --control-radius: 50%;
        --control-bg: var(--brand-color); /* #000000 */
        --control-color: white;
        --control-opacity: .5;
        }
        .gallery__img {
            width: var(--img-W);
            height: var(--img-H);

            flex-shrink: 0;
            border-radius: var(--radius);
            overflow: hidden;
            }
            .gallery__img  img {
                width: 100%;
                height: auto;

                object-fit: cover;
                object-position: center;
            }

        /* preview */
        .gallery__preview {
            position: relative;
            overflow: hidden;
            }
            .gallery__preview .gallery__img  img {
                height: 100%;
            }
            .gallery__preview .gallery__img-info {
                position: absolute;
                bottom: 10px;
                left: 10px;
                /*width: 100%;*/
                z-index: 100;
                background-color: #ffffffb0;
                color: black;
                text-align: center;
                padding-inline: 16px;
                font-size: 14px;
                font-weight: 600;
                transition: all .24s ease;
                transform: translateY(100%);
                opacity: 0;
                height: 36px;
                display: flex;
                align-items: center;
                }
                .gallery__preview .gallery__img-info.active {
                    transform: translateY(0);
                    opacity: 1;
                }

        /* thumbs */
        .gallery__thumbs {
            --img-W: calc((100% - var(--gap) * (var(--thumbs-cols) - 1)) / var(--thumbs-cols));

            position: relative;
            display: flex;
            align-items: center;
            }
            .gallery__thumbs-list {
                display: flex;
                flex-wrap: var(--thumbs-list-wrap);
                gap: var(--gap);

                overflow-x: var(--thumbs-overflow-x);
                scroll-behavior: smooth;
                scroll-snap-type: x mandatory;

                padding-bottom: var(--scrollbar-padding);
                }
                .gallery__thumbs-list::-webkit-scrollbar {
                    height: 8px;
                }
                .gallery__thumbs-list::-webkit-scrollbar-track {
                    background: #f6f6f6;
                }
                .gallery__thumbs-list::-webkit-scrollbar-thumb {
                    border-radius: 8px;
                    background-color: #bbb
                }
            .gallery__thumbs .gallery__img {
                scroll-snap-align: start;
                cursor: pointer;
                position: relative;
            }
            .gallery__thumbs .gallery__overlay {
                background-color: #00000075;
                background-image: url(/img/icons/zoom.png);
                background-size: 42px;
                width: 100%;
                height: 100%;
                position: absolute;
                background-repeat: no-repeat;
                background-position: center;
                border-radius: var(--radius);

                opacity: 0;
                transition: opacity .3s ease;
                pointer-events: none;
                }
                .gallery__thumbs .gallery__img:hover .gallery__overlay {
                    opacity: 1;
                }

        /* preview controls */
        .gallery__container .control {
            width: var(--control-size);
            height: var(--control-size);
            background-color: var(--control-bg);
            border-radius: var(--control-radius);
            opacity: var(--control-opacity);
            color: var(--control-color);
            flex-shrink: 0;

            border: none;
            outline: none;

            background-repeat: no-repeat;
            background-position: center;
            background-size: var(--control-icon-size);

            transition: opacity .24s ease;

            display: flex;
            align-items: center;
            justify-content: center;

            cursor: pointer;
            }
            .gallery__container .control[disabled] {
                --control-bg: #666;
                --control-opacity: 0;
                cursor: default;
                }
                .gallery__container .control:not([disabled]):hover {
                    --control-opacity: .8;
                }
            .gallery__container .control.prev {
                transform: scaleX(-1);
            }
            .gallery__container .control svg {
                fill: none;
                stroke: currentColor;
                stroke-width: var(--stroke-width);
                stroke-linecap: round;
                stroke-linejoin: round;

                width: var(--control-icon-size);
                height: var(--control-icon-size);
            }

        /* thumnbs controls */
        .gallery__thumbs .control {
            position: absolute;
            top: 50%;
            margin-inline: 6px;
            transform: translateY(calc((var(--control-size) + var(--half-space)) / -2));
            }
            .gallery__thumbs .control.prev {
                transform: scaleX(-1) translateY(calc( (var(--control-size) + var(--scrollbar-padding) ) / -2));
                left: calc( calc(var(--control-size) / 2) * -1);
            }
            .gallery__thumbs .control.next {
                right: calc( calc(var(--control-size) / 2) * -1);
            }

        /* zoom gallery */
        .gallery__container.zoom {
            --img-H: 100%;

            --control-size: 54px;
            --control-icon-size: 32px;

            position: fixed;
            inset: 0;
            background-color: #000000e6;
            z-index: 100000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--space);
            }
            .zoom .gallery__preview {
                max-height: 60vh;
            }
            .zoom .gallery__thumbs-list {
                justify-content: center;
                flex-wrap: wrap;
                overflow: visible;
                }
                .zoom .gallery__thumbs-list .gallery__img {
                    flex-basis: 80px;
                    transition: opacity .24s ease;
                    }
                    .zoom .gallery__thumbs-list .gallery__img:not(.active):not(:hover) {
                        opacity: .3;
                    }
                /* overlay */
                .zoom .gallery__img .gallery__overlay {
                    display: none;
                }

            /* zoom preview controls */
            .zoom .controls {
                display: flex;
                justify-content: center;
                align-items: flex-end;
                gap: var(--double-padding);

                position: fixed;
                z-index: 10;
                left: 0;
                right: 0;
                bottom: var(--space);
            }
            .zoom .gallery__close {
                --control-bg: #000000;
                position: fixed;
                top: 10px;
                right: 10px;
                z-index: 10;
            }
            /* default preview controls */
            .gallery__container:not(.zoom) .gallery__preview .controls {
                --control-icon-size: 350px;
                --stroke-width: .2px;

                position: absolute;
                inset: 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                }
                .gallery__container:not(.zoom) .gallery__preview .controls .control {
                    width: 50%;
                    height: 100%;
                    border-radius: 0;
                    opacity: 0;
                    justify-content: flex-end;
                    background: linear-gradient(270deg, var(--control-bg), transparent);
                    }
                    .gallery__container:not(.zoom) .gallery__preview .controls .control:not([disabled]):hover {
                        opacity: 0.2;
                    }
                .gallery__container:not(.zoom) .gallery__preview .controls svg {
                    transform: scaleX(0.5);
                }

/* 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 {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding-inline: var(--padding);
            }
            .header-logo img {
                width: var(--logo-size);
                height: var(--logo-size);
                transition: 0.3s ease;
            }
            .header.scrolled .header-logo img {
                --logo-size: var(--logo-scrolled-size);
            }

/* MAIN */

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

/* PRESENTATION BLOCK */
	.presentation {
		text-align: center;
		}
		.presentation .title {
			color: var(--font-color-title);
			font-size: var(--font-size-l);
			font-weight: 600;
		}

/* BENEFITS BLOCK */
    .benefits {
		text-align: center;

		}
		.benefits .benefit {
			align-items: center;
            max-width: 260px;
            margin-inline: auto;
		}

/* APARTMENTS SECTION */

/* SERVICES SECTION */
    /* gallery */
        .services .gallery__thumbs .gallery__img {
            transition: opacity .24s ease;
            opacity: 1;
            }
            .services .gallery__thumbs .gallery__img:not(:hover):not(.active) {
                opacity: .4;
            }
    .services-title {
        color: var(--font-color-title);
    }
    .services ul {
        margin: 0;
        display: flex;
        flex-direction: column;
        border: 1px solid #d8d8d8;
        border-radius: var(--radius);
        padding-block: var(--double-padding);
        padding-right: var(--double-padding);
        gap: var(--gap);
    }
    .icon-list {
        --gap: 6px;
        --ico-size: 24px;

        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
        }
        .icon-component {
            --gap: 12px;

            display: flex;
            flex-direction: row;
            align-items: center;
            gap: var(--gap);
            border: 1px solid #d8d8d8;
            border-radius: var(--radius);
            padding: var(--half-padding);
        }

/* CARDS SECTION */
    .card {
        border: 1px solid #e5e5e5;
        border-radius: var(--radius);
        height: 100%;
        background-color: white;
        }
        .card-text {
            padding: var(--double-padding);
        }
        .card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--radius) var(--radius) 0 0;
            max-height: 200px;
        }
        .card-title {
            color: var(--font-color-title);
            font-size: 20px;
            font-weight: bold;
            line-height: 1.2;
        }

/* GALLERY SECTION */
    /* gallery */
        .gallery  .gallery__container {
            --thumbs-img-container-W: calc((100% - (calc(var(--gap) * calc(var(--cols) - 1)))) / var(--cols));
            --thumbs-cols: 3;

            --thumbs-list-wrap: wrap;
            --thumbs-overflow-x: hidden;
            --scrollbar-padding: 0;

            /*--cols: 2;*/
            }
            .gallery .gallery__preview,
            .gallery .gallery__thumbs .control { display: none; }

/* CONTACT SECTION */
    .contact .contact-title {
        color: var(--font-color-title);
    }
    .contact .map-container {
        height: 300px;
    }

/* FOOTER */
    footer {
        background: var(--footer-bg);
        font-size: var(--font-size-s);
        margin-top: calc(var(--space-V) * 4);
        }
        footer .container {
            display: flex;
            justify-content: center;
            padding-block: var(--padding);
        }

/* MEDIA QUERY */
    @media (max-width: 767px) { /* Only mobile */
        /* VARIABLES */
        /* GENERIC */
        /* BTN */
        /* ICONS */
        /* GRID */
        /* FLEX */
        /* GALLERY COMPONENT */
        /* HEADER */

        /* 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: var(--brand-color); /* #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-x: calc((var(--m-trigger-h) / 2) - var(--m-arrow-h));

                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;
                        justify-content: 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);
                    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-x);
                            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/icons/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));
                        }
                        .menu-items .menu-item:not(:last-child) {
                            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/icons/tick-mid.png);
                                background-repeat: no-repeat;
                                background-position: right 10px center;
                                background-size: 20px;
                                */

                                border-left: 4px solid var(--m-item-border-color);
                                color: var(--brand-color);
                                font-weight: 600;
                            }

        /* HERO IMG */
        /* PRESENTATION BLOCK */
        /* BENEFITS BLOCK */
        /* APARTMENTS SECTION */
        /* SERVICES SECTION */
        /* CARDS SECTION */
        /* GALLERY SECTION */
        /* CONTACT SECTION */
        /* FOOTER */
    }
    @media (min-width: 768px) { /* Tablet */
        /* VARIABLES */
            :root {
                --logo-size: 100px;
                --logo-scrolled-size: 60px;
                --hero-imgH: 360px;
                --offset-Y: 24px;
                --container-padding: var(--padding);
            }

        /* GENERIC */

        /* BTN */

        /* ICONS */

        /* GRID */
            .col-m-2 { grid-column: span 2; }
            .col-m-3  { grid-column: span 3; }
            .col-m-4  { grid-column: span 4; }
            .col-m-5  { grid-column: span 5; }
            .col-m-6  { grid-column: span 6; }
            .col-m-7  { grid-column: span 7; }
            .col-m-8  { grid-column: span 8; }
            .col-m-9  { grid-column: span 9; }
            .col-m-10 { grid-column: span 10; }
            .col-m-11 { grid-column: span 11; }
            .col-m-12 { grid-column: span 12; }

        /* FLEX */

        /* GALLERY COMPONENT */
            .gallery__container {
                --thumbs-cols: 7;
            }

            /* zoom gallery */
            .gallery__container.zoom {
                padding: calc(var(--control-size) + calc(var(--padding) * 2));
                }
                .zoom .controls {
                    top: 50%;
                    justify-content: space-between;
                    bottom: unset;
                    }
                    .zoom .controls .control {
                        margin-inline: var(--padding)
                    }
                .zoom .gallery__close {
                    top: 10px;
                }

        /* HEADER */

        /* MAIN */
            .menu-actions,
            .menu-header {
                display: none;
            }
            .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: #000;
                    }
                    .menu-item.active {
                        color: #c30735; /* #4CAF50 */
                    }
            .menu-item:after {
                content: "";
                width: 0px;
                height: 2px;
                background: #c30735; /* #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;
            }

        /* HERO IMG */

        /* PRESENTATION BLOCK */

        /* BENEFITS BLOCK */
            .benefits .benefit {
                max-width: 80%;
            }

        /* APARTMENTS SECTION */

        /* SERVICES SECTION */
            /* gallery */
                .services .gallery__container .gallery__preview {
                    --img-H: 500px;
                }

            .icon-component {
                padding: var(--padding);
            }
            .icon-list {
                --gap: 12px;
                --ico-size: 24px;
            }

        /* CARDS SECTION */

        /* GALLERY SECTION */
            /* gallery */
                .gallery .gallery__container {
                    --thumbs-cols: 4;
                }

        /* CONTACT SECTION */
            .contact .map-container {
                height: 100%;
                min-height: 450px;
            }

        /* FOOTER */
    }
    @media (min-width: 1024px) { /* Desktop */
        /* VARIABLES */
            :root {
                --logo-size: 150px;
                --logo-scrolled-size: 80px;
                --hero-imgH: 500px;
                /* --font-size-l: 22px; */
                --offset-Y: 32px;
                --container-width: 980px;
                --container-padding: 0;
            }

        /* GENERIC */

        /* BTN */

        /* ICONS */

        /* GRID */
            .col-2 { grid-column: span 2; }
            .col-3  { grid-column: span 3; }
            .col-4  { grid-column: span 4; }
            .col-5  { grid-column: span 5; }
            .col-6  { grid-column: span 6; }
            .col-7  { grid-column: span 7; }
            .col-8  { grid-column: span 8; }
            .col-9  { grid-column: span 9; }
            .col-10 { grid-column: span 10; }
            .col-11 { grid-column: span 11; }
            .col-12 { grid-column: span 12; }

            .col-4-lg { grid-column: span 4;}
            .col-8-lg { grid-column: span 8;}

        /* FLEX */

        /* GALLERY COMPONENT */
            .gallery__container {
                --thumbs-cols: 5;
            }

            /* zoom gallery */
            .zoom .gallery__preview {
                max-height: 80vh;
            }

        /* HEADER */

        /* MAIN */

        /* HERO IMG */

        /* PRESENTATION BLOCK */
            .presentation .title {
                font-size: var(--font-size-xl);
            }

        /* BENEFITS BLOCK */
            .benefits .benefit {
                max-width: none;
            }

        /* APARTMENTS SECTION */

        /* SERVICES SECTION */
            /* gallery */
                .services .gallery__container .gallery__preview {
                    --img-H: 600px;
                }

        /* CARDS SECTION */

        /* GALLERY SECTION */
            /* gallery */
                .gallery .gallery__container {
                    --thumbs-cols: 6;
                }

        /* CONTACT SECTION */

        /* FOOTER */
    }
    @media (min-width: 1200px) {
        /* VARIABLES */
            :root {
                --container-width: 1100px;
            }
    }
    @media (min-width: 1400px) {
        /* VARIABLES */
            :root {
                --container-width: 1250px;
            }
    }
    @media (min-width: 1500px) {
        /* VARIABLES */
            :root {
                --container-width: 1400px;
            }
    }