/*
header{
    width: 100%;
    aspect-ratio: 9/4;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 5%;

    background-image: url(../img/banners/banner.webp);
    background-position: center; 
    background-size: cover;
    margin-bottom: 2rem;

    .banner-bienvenida{
        background-color: var(--tema-color2);
        opacity: 0.90;
        color: var(--text-color-tema0);
        padding: 4rem 2rem;
        border-radius: 1rem;
        width: min(600px, 100%);
        font-size: var(--clamp-text-1);
    }
}

body{
    margin-top: 100px;
}

.desig-1__container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}

.galeria__container{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    align-items: center;
    color: var(--tema-color1);

    .galeria__vista{
        width: 100%;
        display: flex;
        justify-content: space-evenly;

        .galeria__flecha-izquierda,
        .galeria__flecha-derecha{
            font-size: 3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            i{
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .galeria__items{
            width: min(700px, 70%);
            aspect-ratio: 3/2;
            display: flex;
            align-items: center;
            justify-content: center;

            .galeria__item{
                width: 100%;
                height: 100%;
                background-color: var(--tema-color2);
                padding: 1.5rem;
                display: flex;
                align-items: end;
                justify-content: center;
                border-radius: 20px;
                overflow: hidden;

                position: relative;

                img{
                    height: 100%;
                    width: 100%;
                    display: block;
                    object-fit: fill;
                    object-position: center center;
                }
            }
        }
    }
}

.ubicacion__container{
    width: 90%;
    height: min(80vh, 600px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3rem;

    .ubicacion__mapa{
        grid-area: 1 / 2 / 3 / 5;
        iframe{
            width: 100%;
            height: 100%;
        }
    }

    .ubicacion_dialogo{
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--tema-color1);
        padding: 1rem;
        text-align: center;
        border: var(--tema-color1) 1px solid;
        border-radius: 10px;

        font-size: var(--clamp-text-0);
    }

    & :nth-child(2){
        grid-area: 1 / 1 / 2 / 2;
    }

    & :nth-child(3){
        grid-area: 2 / 1 / 3 / 2;
    }

    @media (width < 700px){
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 1.5rem;

        & :nth-child(2){
            grid-area: 1 / 1 / 2 / 2;
        }

        & :nth-child(3){
            grid-area: 1 / 2 / 2 / 3;
        }
        
        .ubicacion__mapa{
            grid-area: 2 / 1 / 4 / 3;
        }
    }
}

.amenidades__container{
    width: 90%;
    height: min(60vh, 400px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3rem;

    .amenidades__item{
        color: var(--tema-color1);
        border: var(--tema-color1) 2px solid;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        text-align: center;
        padding: 5px;

        img{
            display: block;
            width: 20%;
            height: 40%;
            object-fit: contain;
            object-position: center;
        }

        p{
            font-size: var(--clamp-text-1);
        }

        i{
            font-size: var(--clamp-header-01);
        }
    }

    @media (width < 450px){
        grid-template-columns: repeat(2, 1fr);
    }
}

.plano__container{
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .plano__header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 8rem;
        width: 100%;
        padding: 0 2rem;

        border: var(--tema-color1) 1px solid;
        border-radius: 10px;

        img{
            width: 20%;
            height: 80%;
            object-fit: contain;
            object-position: center;
        }
    }

    .plano__form{
        display: flex;
        justify-content:center ;
        align-items: center;
        padding: 1rem 2rem;

        border: var(--tema-color1) 1px solid;
        border-top: none;
        border-radius: 0 0 1rem 1rem;

        form{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;

            select, input{
                border: none;
                border-radius: 1rem;
                background-color: rgb(230, 230, 230);
                padding: .5rem;
            }

            input{
                cursor: pointer;
                background-color: var(--tema-color1);
                color: var(--blanco);
            }
        }
    }

    .plano__mapa__container{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;

        h2{
            width: 100%;
            text-align: center;
            margin-bottom: 0;
            padding-bottom: 0;
            position: absolute;
            top: 7%;
        }

        .plano__mapa{
            width: 100%;
            height: 100%;
            position: relative;

            svg path{
                transition: fill .1s;
                &:hover{
                    fill: var(--tema-color1) !important;

                }
            }

            &.o2{

                .plano__indicadores{
                    bottom: inherit;
                    top: 15%;
                }

                h2{
                    top: 5%;
                }
            }
        }

        .plano__indicadores{
            width: 160px;
            position: absolute;
            bottom: 15%;
            left: 0;

            p{
                font-size: var(--clamp-text-1);
                margin-bottom: .5rem;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            span{
                width: 1rem;
                height: 1rem;
            }

            :nth-child(1) span{
                background-color: rgb(210, 210, 210);
            }

            :nth-child(2) span{
                background-color: rgb(0, 63, 235);
            }

            :nth-child(3) span{
                background-color: rgb(218, 8, 8);
            }
        }

        @media (width < 450px){
            h2, .plano__indicadores{
                position: static;
            }
            padding: 2rem 0;
        }
    }
}

.tapalpa__banner{
    object-fit: contain;
    object-position: center;
    width: min(80%, 800px) !important;
    display: block;
}

.atractivos__container{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    align-items: center;
    color: var(--tema-color1);

    .atractivos__header{
        width: min(800px, 80%);
        padding: .5rem;
        border-radius: 1.5rem;
        margin-top: 2rem;
        text-align: center;
        color: white;
        background-color: var(--tema-color1);
    }

    .atractivos__vista{
        width: 100%;
        display: flex;
        justify-content: space-evenly;

        .atractivos__flecha-izquierda,
        .atractivos__flecha-derecha{
            font-size: 3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            i{
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .atractivos__items{
            width: min(700px, 70%);
            height: min(700px, 90vh);
            display: flex;
            align-items: center;
            justify-content: center;

            .atractivos__item{
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                position: relative;
                gap: 1.5rem;
                text-align: center;

                div{
                    width: 100%;
                    padding: 1rem;
                    border-radius: 1rem;
                    background-color: var(--tema-color2);
                    img{
                        height: 100%;
                        width: 100%;
                        display: block;
                        object-fit: fill;
                        object-position: center center;
                    }
                }
            }
        }
    }
}
*/
/* safari fix */

header {
    width: 100%;
    aspect-ratio: 9/4;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 5%;
    background-image: url(../img/banners/banner.webp);
    background-position: center;
    background-size: cover;
    margin-bottom: 2rem;
}

header .banner-bienvenida {
    background-color: var(--tema-color2);
    opacity: 0.9;
    color: var(--text-color-tema0);
    padding: 4rem 2rem;
    border-radius: 1rem;
    width: min(600px, 100%);
    font-size: var(--clamp-text-1);
}

body {
    margin-top: 100px;
}

.desig-1__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}

.galeria__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    align-items: center;
    color: var(--tema-color1);
}

.galeria__container .galeria__vista {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.galeria__container .galeria__vista .galeria__flecha-izquierda, .galeria__container .galeria__vista .galeria__flecha-derecha {
    font-size: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.galeria__container .galeria__vista .galeria__flecha-izquierda i, .galeria__container .galeria__vista .galeria__flecha-derecha i {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.galeria__container .galeria__vista .galeria__items {
    width: min(700px, 70%);
    aspect-ratio: 3/2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.galeria__container .galeria__vista .galeria__items .galeria__item {
    width: 100%;
    height: 100%;
    background-color: var(--tema-color2);
    padding: 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.galeria__container .galeria__vista .galeria__items .galeria__item img {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: fill;
    object-position: center center;
}

.ubicacion__container {
    width: 90%;
    height: min(80vh, 600px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3rem;
}

.ubicacion__container .ubicacion__mapa {
    grid-area: 1 / 2 / 3 / 5;
}

.ubicacion__container .ubicacion__mapa iframe {
    width: 100%;
    height: 100%;
}

.ubicacion__container .ubicacion_dialogo {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--tema-color1);
    padding: 1rem;
    text-align: center;
    border: var(--tema-color1) 1px solid;
    border-radius: 10px;
    font-size: var(--clamp-text-0);
}

.ubicacion__container :nth-child(2) {
    grid-area: 1 / 1 / 2 / 2;
}

.ubicacion__container :nth-child(3) {
    grid-area: 2 / 1 / 3 / 2;
}

@media (max-width: 700px) {
    .ubicacion__container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .ubicacion__container :nth-child(2) {
        grid-area: 1 / 1 / 2 / 2;
    }

    .ubicacion__container :nth-child(3) {
        grid-area: 1 / 2 / 2 / 3;
    }

    .ubicacion__container .ubicacion__mapa {
        grid-area: 2 / 1 / 4 / 3;
    }
}
.amenidades__container {
    width: 90%;
    height: min(60vh, 400px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3rem;
}

.amenidades__container .amenidades__item {
    color: var(--tema-color1);
    border: var(--tema-color1) 2px solid;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding: 5px;
}

.amenidades__container .amenidades__item img {
    display: block;
    width: 20%;
    height: 40%;
    object-fit: contain;
    object-position: center;
}

.amenidades__container .amenidades__item p {
    font-size: var(--clamp-text-1);
}

.amenidades__container .amenidades__item i {
    font-size: var(--clamp-header-01);
}

@media (max-width: 450px) {
    .amenidades__container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.plano__container {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.plano__container .plano__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 8rem;
    width: 100%;
    padding: 0 2rem;
    border: var(--tema-color1) 1px solid;
    border-radius: 10px;
}

.plano__container .plano__header img {
    width: 20%;
    height: 80%;
    object-fit: contain;
    object-position: center;
}

.plano__container .plano__form {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 2rem;
    border: var(--tema-color1) 1px solid;
    border-top: none;
    border-radius: 0 0 1rem 1rem;
}

.plano__container .plano__form form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.plano__container .plano__form form select, .plano__container .plano__form form input {
    border: none;
    border-radius: 1rem;
    background-color: #e6e6e6;
    padding: 0.5rem;
}

.plano__container .plano__form form input {
    cursor: pointer;
    background-color: var(--tema-color1);
    color: var(--blanco);
}

.plano__container .plano__mapa__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.plano__container .plano__mapa__container h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 0;
    position: absolute;
    top: 7%;
}

.plano__container .plano__mapa__container .plano__mapa {
    width: 100%;
    height: 100%;
    position: relative;
}

.plano__container .plano__mapa__container .plano__mapa svg path {
    transition: fill 0.1s;
}

.plano__container .plano__mapa__container .plano__mapa svg path:hover {
    fill: var(--tema-color1) !important;
}

.plano__container .plano__mapa__container .plano__mapa.o2 .plano__indicadores {
    bottom: inherit;
    top: 15%;
}

.plano__container .plano__mapa__container .plano__mapa.o2 h2 {
    top: 5%;
}

.plano__container .plano__mapa__container .plano__indicadores {
    width: 160px;
    position: absolute;
    bottom: 15%;
    left: 0;
}

.plano__container .plano__mapa__container .plano__indicadores p {
    font-size: var(--clamp-text-1);
    margin-bottom: 0.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plano__container .plano__mapa__container .plano__indicadores span {
    width: 1rem;
    height: 1rem;
}

.plano__container .plano__mapa__container .plano__indicadores :nth-child(1) span {
    background-color: #d2d2d2;
}

.plano__container .plano__mapa__container .plano__indicadores :nth-child(2) span {
    background-color: #003feb;
}

.plano__container .plano__mapa__container .plano__indicadores :nth-child(3) span {
    background-color: #da0808;
}

@media (max-width: 450px) {
    .plano__container .plano__mapa__container {
        padding: 2rem 0;
    }
    .plano__container .plano__mapa__container h2, .plano__container .plano__mapa__container .plano__indicadores {
        position: static;
    }
}

.tapalpa__banner {
    object-fit: contain;
    object-position: center;
    width: min(80%, 800px) !important;
    display: block;
}

.atractivos__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    align-items: center;
    color: var(--tema-color1);
}

.atractivos__container .atractivos__header {
    width:  min(800px, 80%);
    padding: 0.5rem;
    border-radius: 1.5rem;
    margin-top: 2rem;
    text-align: center;
    color: white;
    background-color: var(--tema-color1);
}

.atractivos__container .atractivos__vista {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.atractivos__container .atractivos__vista .atractivos__flecha-izquierda, .atractivos__container .atractivos__vista .atractivos__flecha-derecha {
    font-size: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.atractivos__container .atractivos__vista .atractivos__flecha-izquierda i, .atractivos__container .atractivos__vista .atractivos__flecha-derecha i {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.atractivos__container .atractivos__vista .atractivos__items {
    width: min(700px, 70%);
    height: min(700px, 90vh);
    display: flex;
    align-items: center;
    justify-content: center;
}

.atractivos__container .atractivos__vista .atractivos__items .atractivos__item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    gap: 1.5rem;
    text-align: center;
}

.atractivos__container .atractivos__vista .atractivos__items .atractivos__item div {
    width: 100%;
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--tema-color2);
}

.atractivos__container .atractivos__vista .atractivos__items .atractivos__item div img {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: fill;
    object-position: center center;
}