/*reset*/
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-style: none;
    text-decoration: none;

}
/*endreset*/

/*body rules*/
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    width: 100%;
    overflow-x: hidden;
}

/*Header*/

nav .containernav {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: auto;
    z-index: 2;
    padding-top: 2rem;
    padding-bottom: 2rem;
    position: relative;
    align-items: center;
    flex-wrap: wrap;
}

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

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

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


nav .containernav .logoinfocontainer .logoimg .logo {
    color: #8e6e28;
    display: flex;
    gap: 0.5rem;
}

nav .containernav .logoinfocontainer .logoimg .logo .h22 {
    font-weight: 100 ;
}

nav .containernav .logoinfocontainer .logoimg .brujula {
    width: 1.5rem;
    height: 100%;
    filter: invert(39%) sepia(8%) saturate(3539%) hue-rotate(3deg) brightness(107%) contrast(80%);
}

nav .containernav .logoinfocontainer .telefono {
    display: flex;
    gap: 0.5rem;
    padding-left: 3rem;
    align-items: center;
    color: rgb(212, 212, 212);
}

nav .containernav .logoinfocontainer .telefono img {
    width: 35px;
    height: 35px;
    background-color: #c2c2bebd;
    padding: 0.5rem;
    border-radius: 50%;
    filter: invert();
    
}

nav .containernav .logoinfocontainer .correo {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: rgb(212, 212, 212);
}

nav .containernav .logoinfocontainer .correo img {
    width: 35px;
    height: 35px;
    background-color: #c2c2bebd;
    padding: 0.5rem;
    border-radius: 50%;
    filter: invert();
}

nav .containernav .navegacion ul{
    display: flex;
    list-style: none;
    gap: 2.5rem;
    font-size: 100%;

}

nav .containernav .navegacion ul li a {
    color: rgb(255, 255, 255);
}

/*Inicio*/

:root {
--fontsizeh2: min(1.5vw, 25px);
--fontsizep: min(1.2vw, 17px);

}

.inicio .containerinicio .imageninicio {
    width: 100%;
    height: 50rem;
    object-fit: cover;
    position: relative;
    margin-top: -141px;
    z-index: 0;
}

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

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

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

.inicio .containerinicio .containerpostimage .textoinimage p {
    margin-bottom: 5rem;
    font-size: var(--fontsizep);
}

.inicio .containerinicio .containerpostimage .textoinimage a {
    color: black;
    background-color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

.inicio .containerinicio .containerpostimage .textoinimage a::after {
    content: " >>";
}

/*row baja*/

.inicio .containerinicio .lastrow {
    display: grid;
    grid-template-columns: 25% 75%;
    margin-left: 5%;

}

.inicio .containerinicio .lastrow .textorow {
    margin-top: 7rem;
    margin-right: 6rem;
    height: 1vh;
}

.inicio .containerinicio .lastrow .textorow h3 {
    margin-bottom: 2vw;
    font-size: var(--fontsizeh2);
    
}

.inicio .containerinicio .lastrow .textorow p {
    color: rgb(85, 85, 85);
    font-size: var(--fontsizep);
}
.inicio .containerinicio .lastrow .imageneslastrow {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    width: 100%;
    height: 100%

} 

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



}

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

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

}

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

.seccionvisita .containervisita .containerborder {
    margin: auto;
    position: absolute;  
    top: 5rem;
    animation: bounceInLeft;
    animation-duration: 2s;

}

.seccionvisita .containervisita .containerborder .conmtainermostrador {
    display: grid;
    grid-template-columns: 30% auto;
    position: relative;
    top: -2rem;
    background-color: white;
    width: 70%;
    margin: auto;
    padding-right: 6rem;
    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 .imgzona {
    height: 100vh;
    max-height: 700px;
    width: auto;
    object-fit: cover;
    max-width: 100%;
    object-position: 20% 0%;
}

.seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita {
    display: grid;   
    width: calc(100% - 50px);
    height: 100%;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(3, 33.33%); 
    column-gap: 13px;
    grid-template-areas: 
    "texto texto texto texto"
    "imagen1 imagen2 imagen3 imagen4"
    ". . . explorar";
    margin-left: 5rem;

}

.seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita .textovisita {
    grid-area: texto;
    align-self: center;
    animation: rubberBand;
    animation-duration: 2s;
    animation-delay: 2s;

}

.seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita .textovisita .imgplaya1{
    grid-area: imagen1;
}

.seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita img{
    width: 10vw;
    height: 10vw;
    max-width: 100%;
    object-fit: cover;
    border-radius: 5px;
    margin-top: 5rem;
    animation: bounceIn;
    animation-duration: 1s;
    animation-delay: 2s;
    animation-iteration-count: 3;
}


.seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita .textovisita h2 {
    font-weight: 100;
    padding-bottom: 2rem;
    font-size: var(--fontsizeh2);
}

.seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita .textovisita p {
    font-size: var(--fontsizep);
}

.seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita .textovisita .imgplaya2{
    grid-area: imagen2;
}

.seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita .textovisita .imgplaya3{
    grid-area: imagen3;
}

.seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita .textovisita .imgplaya4{
    grid-area: imagen4;
}

.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;
}

.seccionvisita .containervisita .containerborder .conmtainermostrador .interiorvisita .explorar .botonir {
    background-color: #c49d48;
    padding: 10px 15px;
    border-radius: 50%;
}

/*Portrait animacion*/

.containerportrait {
    display: flex;
    justify-content: center;
    padding-top: 5rem;
}

.containerportrait .recuadroportrait {
    width: 50%;
    height: 25vw;
    background-color: rgb(121, 119, 230);
    position: relative;
    overflow: hidden;
}

.containerportrait .recuadroportrait .mar {
    position: absolute;
    width: 100%;
    height: 8vw;
    background-color: rgb(94, 80, 146);
    bottom: 1px;
    animation: mar 2s ;
}

@keyframes mar {
    0% {
        translate: 0vw 10vw;
    }

    100% {
        translate: 0vw 0vw;
    }
}

.containerportrait .recuadroportrait .bote {
    position: absolute;
    border-top: 3vw solid #a12323;
	border-left: 2vw solid transparent;
	border-right: 2vw solid transparent;
	height: 0px;
	width: 10vw;
    bottom: 3vw;
    left: 27vw;
    animation: bote 5s infinite ease-in-out;
    animation-direction: alternate;
    z-index: 2;
}

@keyframes bote {
    0%{
        translate: 20px;
    }
    50% {
        translate: 30px;
    }
    100% {
        translate: 40x;
    }
}

.containerportrait .recuadroportrait .casitabote {
    width: 3vw;
    height: 3vw;
    background-color: antiquewhite;
    position: absolute;
    bottom: 6vw;
    right: 15vw;
    animation: bote 5s infinite ease-in-out;
    animation-direction: alternate;
    z-index: 3;
}


.containerportrait .recuadroportrait .tierra {
    position: absolute;
    width: 100%;
    height: 2vw;
    background-color: #7c7159;
    bottom: 8vw;
    z-index: 2;
    animation: tierra 1s ;
}

@keyframes tierra {
    0% {
        bottom: -1vw;
    }

    100% {
        bottom: 8vw;
    }
}
.containerportrait .recuadroportrait .montana1 {
    position: absolute;
    top: 4vw;
    left: 4vw;
    z-index: 1;
}

.containerportrait .recuadroportrait .montana1 img {
    width: 13vw;
    height: auto;
    animation: aparicion-montana 2s;
}

.containerportrait .recuadroportrait .montana2 {
    position: absolute;
    top: 4vw;
    left: 15vw;
    opacity: 1;
    scale: 1.2;
    z-index: 1;
}

.containerportrait .recuadroportrait .montana2 img {
    width: 13vw;
    height: auto;
    animation: aparicion-montana 2s;
}


.containerportrait .recuadroportrait .montana3 {
    position: absolute;
    top: 5vw;
    left: 30vw;
    opacity: 1;
    scale: 0.8;
    z-index: 1;
}

.containerportrait .recuadroportrait .montana3 img {
    width: 13vw;
    height: auto;
    animation: aparicion-montana 2s;
}


.containerportrait .recuadroportrait .montana4 {
    position: absolute;
    top: 5vw;
    left: 25vw;
    opacity: 1;
    scale: 1;
    z-index: 1;
}

.containerportrait .recuadroportrait .montana4 img {
    width: 13vw;
    height: auto;
    animation: aparicion-montana 2s;
}


.containerportrait .recuadroportrait .montana5 {
    position: absolute;
    top: 5vw;
    left: -5vw;
    opacity: 1;
    scale: 1;
    z-index: 1;
}

.containerportrait .recuadroportrait .montana5 img {
    width: 13vw;
    height: auto;
    animation: aparicion-montana 2s;
}

.containerportrait .recuadroportrait .montana6 {
    position: absolute;
    top: 5vw;
    right: -5vw;
    opacity: 1;
    scale: 1;
    z-index: 1;
}

.containerportrait .recuadroportrait .montana6 img {
    width: 13vw;
    height: auto;
    animation: aparicion-montana 2s;
}

@keyframes aparicion-montana {
    0% {
        scale:0.0;
    }

    100% {
        scale: 1;
    }
}

.containerportrait .recuadroportrait .nube {
    position: absolute;
    z-index: 0;
    animation: nube 8s linear infinite;
    left: -17vw;

}

.containerportrait .recuadroportrait .nube img {
    width: 13vw;
    height: auto;
}

@keyframes nube {
    0% {
        left: -17vw;
    }
    100% {
        left: 100%;
    }
}

.containerportrait .recuadroportrait .ola .ola1 {
    position: absolute;
    width: 6vw;
    height: 0.5vw;
    background-color: rgb(224, 230, 245);
    bottom: 2vw;
    left: 3vw;
    animation: ola 2s ease-in-out infinite alternate;
}

.containerportrait .recuadroportrait .ola .ola2 {
    position: absolute;
    width: 6vw;
    height: 0.5vw;
    background-color: rgb(224, 230, 245);
    bottom: 2vw;
    left: 20vw;
    animation: ola 2s ease-in-out infinite alternate;
}

.containerportrait .recuadroportrait .ola .ola3 {
    position: absolute;
    width: 6vw;
    height: 0.5vw;
    background-color: rgb(224, 230, 245);
    bottom: 5vw;
    left: 12vw;
    animation: ola 2s ease-in-out infinite alternate;
}

.containerportrait .recuadroportrait .ola .ola4 {
    position: absolute;
    width: 6vw;
    height: 0.5vw;
    background-color: rgb(224, 230, 245);
    bottom: 5vw;
    left: 27vw;
    animation: ola 2s ease-in-out infinite alternate;
    z-index: 1;
}

.containerportrait .recuadroportrait .ola .ola5 {
    position: absolute;
    width: 6vw;
    height: 0.5vw;
    background-color: rgb(224, 230, 245);
    bottom: 2vw;
    left: 35vw;
    animation: ola 2s ease-in-out infinite alternate;
    z-index: 1;
}

@keyframes ola {
    0% {
        translate: 1vw;
    }

    100% {
        translate: 3vw
    }
}




/*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: 50%;
    font-size: var(--fontsizep);
    margin-bottom: 5rem;
}

.secciongaleria .containergaleria .galeriagrid {
    display: grid;
    grid-template-columns: 27% 27% 19% 27%;
    gap: 1rem;
    margin-bottom: 5rem;
    animation: fadeInUp;
    animation-duration: 3s;

}
/*galeria*/

.secciongaleria .containergaleria .galeriagrid .galeria1 {
    display: grid;
    grid-template-rows: 40% 40% 20%;
    gap: 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: 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: 1rem;
}

.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: 1rem;
}

.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;
    animation: slideInUp;
    animation-duration: 2s;
}

.infofooter .containerfooter .firstpartfooter {
    display: grid;
    grid-template-columns: 30% 20% 20% 30%;
    gap: 1rem;
}

.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 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 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 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;
    font-size: 1rem;
    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: 13rem;
}

.borderinfo .bordercontainer {
    display: flex;
    justify-content: space-between;
    width: 70%;
    margin: auto;
    color: white;
}

.borderinfo .bordercontainer .derecha {
    display: flex;
    gap: 2rem;
} 

.borderinfo .bordercontainer .derecha a {
    color: white;
}