/* Breakpoint adicional */
@media screen and (max-width: 907px) {
    .circulo-naranja {
        width: 110%;
        height: 110%;
    }
}

/* Extra small devices (tablets) */
@media screen and (max-width: 767.98px) {
    /* CONTENIDO PAG. INICIO :::::::::::::::: */
        .contenido {
            grid-template-rows: 1fr repeat(2, auto);
        }
    
        .cta-image img {
            max-width: 80%;
        }
    
        .contenido .cta-faqs-contacto {
            grid-template-columns: 1fr;
            grid-template-rows: 2fr;
            grid-gap: 30px;
            margin: 30px;
        }
    
        .cta-1, .cta-2 {
            grid-auto-rows: auto;
        }

        .cta-home-alojamientos {
            margin: 20px 0;
            width: 90%;
        }

        .cta-home-alojamientos .container {
            max-width: 650px;
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr;
            margin-left: -10px;
        }

        .cta-home-alojamientos .col-2 {
            grid-template-columns: 185px 1fr 150px;
        }

        .cta-home-alojamientos .texto-cta {
            padding: 40px 20px 40px 35px;
        }

        .cta-home-alojamientos .col-1 .olas {
         display: none;
        }

        .hero .info {
            margin: 0 0 0 30px;
        }
      
}        

/* Celular horizontal - 575.98px */
/* @media only screen and (max-height: 575.98px) and (orientation: landscape) {
    .circulo-naranja {
        display: none;
    }
} */

/* Breakpoint adicional */
@media (max-width: 700px) {
    .cta-home-alojamientos .col-2 {
        grid-template-columns: 185px 1fr;
    }

    .cta-home-alojamientos .col-1 img {
        display: none;
    }

    .cta-home-alojamientos .container {
        margin-left: 0;
        margin-right: 0;
    }

    .circulo-naranja {
        width: 100%;
        height: 100%;
        left: 0;
    }

}

/* Extra small devices (phones, 600px and down) */
@media (max-width: 575.98px) {
    h3 {
        font-size: 1.9rem !important;
    }
    
    h4 {
        font-size: 1.3rem !important;
    }

    .observaciones {
        border: 1px solid #FF7530;
    }

    .boton-primario {
        padding: 15px 28px;
    }

    /* MENÚ :::::::::::::::: */
    .carousel {
        width: 100%;
    }

    /* MENÚ :::::::::::::::: */
    nav {
        position: fixed;
        background-color: white;
        width: 100%;
        height: 80px;
        z-index: 9999;
        box-shadow: 1px 9px 12px -2px rgba(0,0,0,0.10);
        -webkit-box-shadow: 1px 9px 12px -2px rgba(0,0,0,0.10);
        -moz-box-shadow: 1px 9px 12px -2px rgba(0,0,0,0.10);
    }

    nav .logo {
        max-width: 100px;
    }

    nav ul {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: flex-start;
        padding: 12% 0;
        width: 100%;
    }

    nav ul li {
        position: relative;
        display: block;
        padding: 20px 10px;
        text-align: center;
    }

    nav ul li a {
        padding: 20px 10px;
    }

    nav ul li:nth-child(2) {
        padding-bottom: 0;
    }

    nav ul li ul li:nth-child(2) {
        padding-bottom: inherit;
    }

    nav ul li ul, nav ul li:hover > ul {
        display: inherit;
        position:relative;
        z-index: 995;
        display: inherit;
        padding: 15px 0;
    }
    
    nav ul li:hover > ul {
        margin-top: inherit;
        width: auto;
    }

    /* ENCABEZADO :::::::::::::::: */
    .encabezado {
        margin: 0 auto 35px auto;
        height: 195px;
        text-align: center;
        justify-content: center;
    }

    .encabezado h1 {
        margin-top: 115px;
        top: 10px;
        position: relative;
    }
    
    
    .encabezado h2 {
        position: relative;
        text-align: center;
        margin-top: 0;
        top: 10px;
    }

    .encabezado div {
        display: flex;
        justify-content: end;
        top: 12px;
        right: 18%;
        position: fixed;
        z-index: 9999;
    }

    .box1 .olas {
        top: 40px;
    }

    /* opacidad fotos slider */
    .opacity-50 {
        opacity: 0 !important;
    }

    /* HOME :::::::::::::::: */
    .contenido .cta-faqs-contacto {
        width: 90%;
        grid-gap: 20px;
        margin: 0 0 30px 0;
    }

    .contenido .cta-1 .contenedor {
        grid-template-columns: 80px 1fr;
    }

    .contenido .cta-2 .contenedor {
        grid-template-columns: 1fr 80px;
    }

    .cta-2 .cta-image img {
        /* right: 0; */
    }

    .cta-image img {
        max-width: 120%;
        height: auto;
    }

    .cta-home-alojamientos .container {
        margin-left: 0;
    }

    .cta-home-alojamientos .col-1 img {
        object-fit: cover;
        /* background-size: cover; */
        width: 100%;
        max-width: 280px;
        height: 180px;
        right: inherit;
        display: inherit;
    }

    .cta-home-alojamientos .col-2 img {
        height: 180px;
    }

    .cta-home-alojamientos .col-2 {
        grid-template-columns: 1fr;
    }

    /* FAQS ::::::::::::::::::::::: */
    .faqs.box1 {
        padding: 50px 0;
    }

    .caja-azul {
        width: 95vw;
        padding: 15px;
    }

    /* ALOJAMIENTO :::::::::::::::: */
    .alojamientos {
        margin-bottom: 10px;
    }

    .alojamientos .list-hab-item {
        grid-template-columns: 1fr;
        grid-template-rows: 170px 1fr;
        padding: 25px;
        margin: 3%;
    }

    .alojamientos .list-hab-item .foto .formato {
        width: 100%;
    }

    .alojamientos .list-hab-item .foto .olas {
        display: none;
    }

    .habitacion .box1 {
        width: 99vw;
        padding-top: 20px;
    }

    .habitacion .iconos {
        /* grid-template-columns: repeat(auto-fill, minmax(110px, 85%)); */
        grid-template-columns: repeat(auto-fill, 90%) !important;
        grid-gap: 15px 0;
    }

    .habitacion .iconos div {
        padding: 20px;
    }

    .habitacion .precios-cta-hab {
        grid-template-columns: 1fr;
        width: 95%;
    }

    .habitacion .precios-cta-hab .container {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 0 20px 0;
    }

    .material-symbols-outlined {
        font-size: 3.5rem !important;
    }

    /* CONTENIDO PAG. INICIO :::::::::::::::: */
    .contenido {
        grid-template-rows: repeat(2, auto) 1fr;
    }

    /* HERO :::::::::::::::: */
    .hero {
        grid-template-columns: 1fr;
        grid-template-rows: 25vh 50vh;
        padding-top: 85px;
    }
    .hero .info {
        align-self: center;
        justify-self: center;
    }
    .circulo-naranja {
        display: none;
        /* width: 105%;
        height: 105%;
        bottom: -45px;
        left: 0; */
    }

    /* MAPA :::::::::::::::: */
        .mapa {
        padding: 0;
    }

    /* CONTACTO :::::::::::::::: */
    .datos-contacto {
        grid-template-columns: 1fr;
    }
    .datos-contacto .direccion, .datos-contacto .correo {
        border-right: 0;
        border-bottom: 2px solid var(--gris);
    }


    /* FOOTER :::::::::::::::: */
    footer {
        grid-template-columns: 2fr 3fr;
        grid-template-rows: 1fr 1fr;
        grid-auto-rows: 1fr;
        grid-gap: 6px;
        padding: 5% 5%;
    }

    footer .social {
        grid-area: 1 / 1 / 2 / 3;
    }

    /* BURGER MENU :::::::::::::::: */
    .hide-on-desktop {display: inherit;}

    .hideoverflow {
        overflow: hidden;
    }

    .burger-button, .burger-menu {
        position: absolute;
        position: fixed;
        top: 0;
        right: 0;
    }
    .burger-button {
        position: fixed;
        background: url("../images/lnr-menu.svg") no-repeat center center;
        width: 30px;
        margin-right: 20px;
        margin-top: 17px;
        padding: 30px 17px 9px;
        transition: var(--trans);
        z-index: 991;
    }
    .burger-button:hover {
        background: url("../images/lnr-menu-hover.svg") no-repeat center center;
    }
    .burger-menu {
        background: rgba(255,255,255,0.95);
        z-index: 9999;
        height: 100vh;
        right: -100vw;
        width: 100vw;
        transition: all 0.4s ease-in-out;
    }
    .burger-menu.is-active {
        right: 0;
    }
    a.boton-cerrar {
        position: absolute;
        background: url("../images/close.svg") no-repeat center center;
        background-size: cover;
        width: 50px;
        height: 50px;
        right: 10px;
        cursor: pointer;
        margin: 7px 7px 0;
        z-index: 9999;
        transition: var(--trans);
    }
    a.boton-cerrar:hover {
        transform: rotate(90deg);
        background: url("../images/close-hover.svg") no-repeat center center;
    }
    .boton-cerrar img {
        width: 50px;
    }

}