/*Responsive 0px - 767px -> Phone*/
@media screen AND (max-width: 767px) {
    /*Header*/

    nav .containernav {
        display: initial;

    }

    nav .containernav .logoinfocontainer {
        display: initial;
        align-items: center;
        justify-content: space-between;

        
    }

    nav .containernav .logoinfocontainer .phone {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 80%;
        margin: auto;
        margin-top: 2rem;
    }
    nav .containernav .logoinfocontainer .phone .menuburger {
        visibility: visible;
        display: initial;
        justify-content: space-between;
    }

    nav .containernav .logoinfocontainer .phone .menuburger img {
        width: 3rem;
        filter: invert();
    }


    nav .containernav .logoinfocontainer .logoimg {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        
    }

    nav .containernav .logoinfocontainer .logoimg .logo {
        color:  #c49d48;
        display: flex;
        gap: 0.5rem;
        font-size: 1.3rem;
    }

    nav .containernav .logoinfocontainer .logoimg .brujula {
        width: 1.5rem;
        height: 100%;
        filter: invert(65%) sepia(34%) saturate(692%) hue-rotate(3deg) brightness(93%) contrast(84%);
    }

    nav .containernav .logoinfocontainer .telefono {
        visibility: hidden;
        display: none;
    }

    nav .containernav .logoinfocontainer .correo {
        visibility: hidden;
        display: none;
    }


    nav .containernav .navegacion {
        visibility: hidden;
        display: none;
    }

    /*Inicio*/

    :root {
    --fontsizeh2: min(7vw, 25px);
    --fontsizep: min(4.2vw, 20px);

    }

    .inicio .containerinicio .containerpostimage {
        width: 80%;
        margin: auto;
    }

    .inicio .containerinicio .containerpostimage .textoinimage {
        position: absolute;
        top: 13rem;
        width: 80vw;
        color: white;
    }

    .inicio .containerinicio .containerpostimage .textoinimage h1 {
        font-size: 3rem;
        padding-bottom: 3rem;
        font-weight: 100;
        
    }

    .inicio .containerinicio .containerpostimage .textoinimage p {
        line-height: 1.8;
    }

    /*row baja*/


    .inicio .containerinicio .lastrow {
        display: flex;
        flex-direction: column;
        margin-left: 10%;
    }

    .inicio .containerinicio .lastrow .textorow {
        margin-bottom: 10rem;
    }
    .inicio .containerinicio .lastrow .imageneslastrow {
        display: flex;
        flex-direction: column;
        width: 90%;
        height: 200%;
        gap: 1.5rem;
        margin-bottom: 20rem;
        

    } 

    .inicio .containerinicio .lastrow .imageneslastrow img {
        position: static;
        z-index: 2;
        height: 25rem;
        object-fit: cover;
        width: 100%;
    }

    .inicio .containerinicio .lastrow .imageneslastrow .tu4 {
        display: none;
        }

    .inicio .containerinicio .lastrow .imageneslastrow p {
        position: relative;
        z-index: 3;
        top: 3rem;
        left: 2rem;
        font-size: 1.5rem;
        color: rgb(201, 201, 201);
    }

    /*Seccion visita*/
    .seccionvisita .containervisita {
        position: relative;
        
    }

    .seccionvisita .containervisita .visitaimg {
        position: relative;
        width: 100%;
        object-fit: cover;
        height: 55rem;
        margin-top: 0rem;
        max-height: 55rem;
    }

    .seccionvisita .containervisita .containerborder {
        margin: auto;
        position: absolute;  
        top: -10rem;

    }

    .seccionvisita .containervisita .containerborder .conmtainermostrador {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: repeat(2,50%);
        grid-template-areas: 
        "visita visita"
        "texto texto";
        position: relative;
        top: -2rem;
        background-color: rgba(0, 0, 0, 0);
        width: 80%;
        margin: auto;
        padding-right: 0rem;
        box-shadow: none; 

    }

    .seccionvisita .containervisita .containerborder .conmtainermostrador .imgzona {
        height: 40vh;
        max-height: 700px;
        width: auto;
        object-fit: cover;
        max-width: 70%;
        object-position: 20% 0%;
        grid-area: visita;
    }

    .seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita {
        display: grid;   
        grid-template-columns: repeat(2 ,calc(50% - 7px));
        grid-template-rows: 80% 20%;
        grid-template-areas: 
        "texto texto"
        ". explorar";
        width: 100%;
        height: 100%;
        column-gap: 13px;
        margin-left: 0rem;
        grid-area: texto;
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    }

    .seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita .textovisita {
        grid-area: texto;
        align-self: center;
        padding-top: 3rem;
        width: 80%;
        margin: auto;
        height: 45vh;
        

    }

    .seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita .textovisita p {
        line-height: 1.5;
    }

    .seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita .imgplaya1{
        display: initial;
        position: absolute;
        width: 38vw;
        height: 38vw;
        bottom: -35vw;
        left: -1vw;
        
    }

    .seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita img{
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        border-radius: 10px;
        margin-top: 0rem;
        
    }

    .seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita  .imgplaya2{
        display: initial;
        position: absolute;
        width: 38vw;
        height: 38vw;
        bottom: -35vw;
        right: 1vw;
    }

    .seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita  .imgplaya3{
        display: none;
    }

    .seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita  .imgplaya4{
        display: none;
    }

    .seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita .explorar {
        grid-area: explorar;
        align-self: end;
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 2rem;
        margin-bottom: 3rem;
        margin-right: 1rem;
    }


    /*seccion galeria*/
    .secciongaleria .containergaleria {
        width: 85%;
        margin: auto;

    }

    .secciongaleria .containergaleria .textogaleria {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .secciongaleria .containergaleria .textogaleria h2 {
        font-weight: 100;
        padding-bottom: 1rem;
        margin-top: 6rem;
        font-size: var(--fontsizeh2);
    }

    .secciongaleria .containergaleria .textogaleria p {
        width: 90%;
        font-size: var(--fontsizep);
        margin-bottom: 5rem;
    }

    .secciongaleria .containergaleria .galeriagrid {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        grid-template-rows: auto;
        gap: 0.5rem;
        margin-bottom: 5rem;
    }
    /*galeria*/

    .secciongaleria .containergaleria .galeriagrid .galeria1 {
        display: grid;
        grid-template-rows: 40% 40% 20%;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .secciongaleria .containergaleria .galeriagrid .galeria1 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }

    .secciongaleria .containergaleria .galeriagrid .galeria1 .imagen3 {
        object-position: 0% 80%;
    }

    .secciongaleria .containergaleria .galeriagrid .galeria2 {
        display: grid;
        grid-template-rows: 30% 35% 35%;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .secciongaleria .containergaleria .galeriagrid .galeria2 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }

    .secciongaleria .containergaleria .galeriagrid .galeria3 {
        display: grid;
        grid-template-rows: 70% 30%;
        height: calc(100% + 1rem);
        gap: 0.5rem;
    }

    .secciongaleria .containergaleria .galeriagrid .galeria3 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }

    .secciongaleria .containergaleria .galeriagrid .galeria3 .imagen1 {
        object-position: 40% 0%;
    }

    .secciongaleria .containergaleria .galeriagrid .galeria4 {
        display: grid;
        grid-template-rows: 30% 70%;
        height: calc(100% + 1rem);
        gap: 0.5rem;
    }

    .secciongaleria .containergaleria .galeriagrid .galeria4 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }

    .secciongaleria .containergaleria .galeriagrid .galeria4 .imagen2 {
        object-position: 20% 0%;
    }

    /*footer*/

    .infofooter .containerfooter  {
        width: 80%;
        margin: auto;
    }

    .infofooter .containerfooter .firstpartfooter {
        display: grid;
        grid-template-columns: repeat(2,50%);
        grid-template-rows: repeat(3, 33,33%);
        grid-template-areas: 
        "logo logo"
        "enlaces1 enlaces2"
        "contacto contacto";
        gap: 1rem;
    }

    .infofooter .containerfooter .firstpartfooter .column1 {
        grid-area: logo;
    }

    .infofooter .containerfooter .firstpartfooter .column1 .logoimg {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin-bottom: 2rem;
    }

    .infofooter .containerfooter .firstpartfooter .column1 .logoimg img {
        width: 1.5rem;
        height: 100%;
        filter: invert(65%) sepia(34%) saturate(692%) hue-rotate(3deg) brightness(93%) contrast(84%);
    }

    .infofooter .containerfooter .firstpartfooter .column1 .logoimg a {
        color: #c49d48;
        display: flex;
        gap: 0.5rem;

    }

    .infofooter .containerfooter .firstpartfooter .column1 .logoimg .logo .h22 {
        font-weight: 100;
    }

    .infofooter .containerfooter .firstpartfooter .column1 .texto p {
        color: rgb(88, 88, 88);
        width: 80%;
        line-height: 1.8;
        font-size: var(--fontsizep);
    }


    .infofooter .containerfooter .firstpartfooter .column1 .iconos {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        margin-top: 2rem;
    }

    .infofooter .containerfooter .firstpartfooter .column1 .iconos a {
        border-radius: 1px;
        border-style: solid ;
        border-radius: 50%;
        padding: 5px;
        border-width: 1px;
    }

    .infofooter .containerfooter .firstpartfooter .column1 .iconos a:visited {
        color: #c49d48;
    }

    .infofooter .containerfooter .firstpartfooter .column1 .iconos img {
        width: 2rem;
        filter: invert(65%) sepia(34%) saturate(692%) hue-rotate(3deg) brightness(93%) contrast(84%);
    }

    .infofooter .containerfooter .firstpartfooter .column2 {
        grid-area: enlaces1;
        justify-self: start;
    }

    .infofooter .containerfooter .firstpartfooter .column2 h2{
        font-weight: 100;
        color: rgb(88, 88, 88);
        margin-bottom: 1rem;
        font-size: var(--fontsizeh2);
    }

    .infofooter .containerfooter .firstpartfooter .column2 ul li a {
        color: rgb(100, 100, 100);
        font-size: var(--fontsizep);
    }

    .infofooter .containerfooter .firstpartfooter .column2 ul li {
        list-style: none;
        padding-bottom: 1rem;
    }

    .infofooter .containerfooter .firstpartfooter .column2 ul li::before {
        content: "\2192";
        position: relative;
        top: -4px;
        right: 10px;
        font-size: 0.6rem;
        color: rgb(119, 119, 119);
    }

     .infofooter .containerfooter .firstpartfooter .column3 {
        grid-area: enlaces2;
        margin-left: 3rem;

    }


    .infofooter .containerfooter .firstpartfooter .column3 h2{
        font-weight: 100;
        color: rgb(88, 88, 88);
        margin-bottom: 1rem;
        font-size: var(--fontsizeh2);
       
    }

    .infofooter .containerfooter .firstpartfooter .column3 ul li a {
        color: rgb(100, 100, 100);
        font-size: var(--fontsizep);
        
    }

    .infofooter .containerfooter .firstpartfooter .column3 ul li {
        list-style: none;
        padding-bottom: 1rem;
    }

    .infofooter .containerfooter .firstpartfooter .column3 ul li::before {
        content: "\2192";
        position: relative;
        top: -4px;
        right: 10px;
        font-size: 0.6rem;
        color: rgb(119, 119, 119);
    }

    .infofooter .containerfooter .firstpartfooter .column4 {
        grid-area: contacto;
    }

    .infofooter .containerfooter .firstpartfooter .column4 h2 {
        font-weight: 100;
        color: rgb(88, 88, 88);
        margin-bottom: 2rem;
        font-size:var(--fontsizeh2);

    }

    .infofooter .containerfooter .firstpartfooter .column4 .colum {
        margin-bottom: 2rem;
        line-height: 1.8;
        color: rgb(88, 88, 88);
        font-size: var(--fontsizep);
    }


    .infofooter .containerfooter .firstpartfooter .column4 .coreonumero {
        display: flex;
        flex-direction: column;
        font-size: 1.2rem;
        gap: 1rem;
        color: #2c4458;
    } 

    .infofooter .containerfooter .firstpartfooter .column4 .coreonumero .numerotelefono {
        font-weight: bold;
    }

    /*footer 2 la venganza*/
    .borderinfo {
        background-color: #688095;
        padding: 1rem;
        margin-top: 3rem;

    }

    .borderinfo .bordercontainer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 80%;
        margin: auto;
        color: white;
        text-align: center;
    }

    .borderinfo .bordercontainer .izquierda {
        margin-bottom: 2vw;
        color: rgb(221, 221, 221);
    }

    .borderinfo .bordercontainer .derecha {
        display: flex;
        gap: 2rem;
        align-items: center;
    } 

    .borderinfo .bordercontainer .derecha a {
        color: white;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
} 
}