@charset "UTF-8";


/* RESET */
body, a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after {
  box-sizing: border-box;
}
ul[role='list'], ol[role='list'] {
  list-style: none;
}
html:focus-within {
  scroll-behavior: smooth;
}
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
	
}
a:not([class]) {
  text-decoration-skip-ink: auto;
}
img, picture, svg {
  max-width: 100%;
  display: block;
}
input, button, textarea, select {
  font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* END RESET STYLE*/

/* VARIABLES*/

:root {
  --color1: white;
  --color2: #FF8089;
  --color3: #62BEB7;
  --color4: white;
	

  --font1: "BodoniModa9pt Regular";
  --font2: "BodoniModa9pt SemiBold";
  --font3: "Poppins Regular";
  --font4: "Poppins SemiBold";
}

/* VARIABLES*/

body {
  background-color: black;
  font-family: inherit;
  width: 100%;
  margin: 0px !important;
}
a {
  line-height: 1.1;
  text-decoration: none;
  color: var(--color1);
}
a:hover {
  color: #18AAF1;
}
p {
  font-family: var(--font3);
  font-size: .9em;
  color: var(--color1);
}
h1 {
    font-family: "SilkSerif Bold";
    font-size: 3em;
    line-height: 1.4;
    color: var(--color4);
}
h2 {
  font-family: "SilkSerif Bold";
  font-size: 1.4em;
  color: var(--color1);
}
h3 {
  font-family: var(--font3);
  font-size: 1.7em;
  color: var(--color1);
}
h4 {
  font-family: var(--font3);
  font-size: 1em;
  color: var(--color4);
}
h5 {
  font-family: var(--font3);
  font-size: 1.3em;
  color: var(--color1);
}
.maincontainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100vh;
}

video {
grid-column: 1/2;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
	 object-fit: cover;
  width: 100%;
  height: 100vh;
	overflow: hidden;

}

/* HEADER SECTION*/

header {
  background-image:url("../images/postada Desktop-100.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  grid-column: 1/3;
  display: grid;
  grid-template-columns: 1fr;
}
.portada {
  grid-column: 2/3;
  height: 100%;
  overflow: hidden;
}
.infoPortada {
  grid-column: 1/2;
  padding: 100px;
  padding-top: 10%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
	z-index: 99;
}
.slogan {
  padding-top: 50px;
	  
	  display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.subslogan {
  padding-top: 25px;
}
.botonPrincipal {
  margin-top: 30px;
  grid-column: 1/3;
  text-align: center;
  height: 65px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}


.btn {
  font-size: 1em;
  line-height: 1em;
  letter-spacing: 0.04em;
  display: inline-block;
}
.btn--svg {
  position: relative;
  height: 42px;
  width: 190px;
  overflow: hidden;
  border-radius: 21px;
}
.btn--svg:hover .btn--svg__circle circle {
  transform: scale(0);
}
.btn--svg:hover .btn--svg__label {
  color:white;
}

.btn--svg:hover .btn--svg__label2 {
  color: white;
}
.btn--svg:hover .btn--svg__border--left path,
.btn--svg:hover .btn--svg__border--right path {
  stroke-dasharray: 61.8204345703 61.8204345703;
  stroke-dashoffset: 0;
  -webkit-transition-delay: 0.25s;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  -webkit-transition-property: stroke-dashoffset;
  -moz-transition-delay: 0.25s;
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -moz-transition-property: stroke-dashoffset;
  -ms-transition-delay: 0.25s;
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: ease-in-out;
  -ms-transition-property: stroke-dashoffset;
  transition-delay: 0.25s;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  transition-property: stroke-dashoffset;
}
.btn--svg__label {
  -webkit-font-smoothing: antialiased;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  color: white;
  z-index: 3;
  width: 100%;
  transition: color 0.5s ease-in-out;
}


.btn--svg__label2 {
  -webkit-font-smoothing: antialiased;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  color: black;
  z-index: 3;
  width: 100%;
  transition: color 0.5s ease-in-out;
}
.btn--svg__circle circle {
  -webkit-transition: transform 0.5s ease-in-out;
  -webkit-transform: scale(1.1);
  -webkit-transform-origin: 50% 50%;
  -moz-transition: transform 0.5s ease-in-out;
  -moz-transform: scale(1.1);
  -moz-transform-origin: 50% 50%;
  -ms-transition: transform 0.5s ease-in-out;
  -ms-transform: scale(1.1);
  -ms-transform-origin: 50% 50%;
  transition: transform 0.5s ease-in-out;
  transform: scale(1.1);
  transform-origin: 50% 50%;
}
.btn--svg__border--left path, .btn--svg__border--right path {
  stroke-dasharray: 61.8204345703 61.8204345703;
  -webkit-transition-duration: 0s;
  -webkit-transition-timing-function: ease-in-out;
  -webkit-transition-property: stroke-dashoffset;
  -webkit-transition-delay: 0.5s;
  -moz-transition-duration: 0s;
  -moz-transition-timing-function: ease-in-out;
  -moz-transition-property: stroke-dashoffset;
  -moz-transition-delay: 0.5s;
  -ms-transition-duration: 0s;
  -ms-transition-timing-function: ease-in-out;
  -ms-transition-property: stroke-dashoffset;
  -ms-transition-delay: 0.5s;
  transition-duration: 0s;
  transition-timing-function: ease-in-out;
  transition-property: stroke-dashoffset;
  transition-delay: 0.5s;
}
.btn--svg__border--left path {
  stroke-dashoffset: -61.8204345703;
}
.btn--svg__border--right path {
  stroke-dashoffset: 61.8204345703;
}
.btn--svg svg, .btn--svg__label {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
  -moz-transform: translate(-50%, -50%);
  -moz-transform-origin: 50% 50%;
  -ms-transform: translate(-50%, -50%);
  -ms-transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.btn--svg svg, .btn--svg__label2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
  -moz-transform: translate(-50%, -50%);
  -moz-transform-origin: 50% 50%;
  -ms-transform: translate(-50%, -50%);
  -ms-transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.label {
  grid-column: 1/2;
  text-align: center;
  height: 65px;
  background-color: var(--color3);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.hamburger {
  position: fixed;
  top:30px;
  right: 50px;
  z-index: 101;
  cursor: pointer;
	
	}

.line {
  width: 30px;
  height: 2px;
  background: #a77933;
  margin-bottom: 6px;
}

.line:hover {
 
  background: white;
}

.menu {
  width: 320px;
  height: 100%;
  background:black;
  position: fixed;
  top: 0;
  right:-320px;
  transition: right .1s;
	z-index: 100;
	padding-left: 20px;
}

.menu-item:first-child {
  margin-top: 180px;
}

.menu--open {
  right: 0;
}

.menu-item a{
  color: #fff;
  width: 100%;
  padding: 1rem  ;
  box-sizing: border-box;
  line-height: 1.6;
  text-align: right;
  font-family: var(--font3);
  font-size: 1.3em;
}

.menu-item:hover {
	
	border-bottom: 1px solid #FFFFFF;
  cursor: pointer;
}



/* HEADER SECTION*/

main {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: 1fr;

	text-align: center;
}

/* SLIDER*/

.swiper {
  width: 100%;
  margin: 0px;
  grid-column: 1/3;
}
.swiper-slide {
  margin: 0px;
  text-align: left;
 
  margin-right: 0px !important;
  padding: 2px;
  cursor: grab;
  background-color: black;

}
.swiper-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
  margin: 0px;
}
.swiper-pagination {
	
  
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));
  height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius,50%);
  background: var(--swiper-pagination-bullet-inactive-color,#a77933);

}

.swiper-slide img {
 
  padding-bottom: 20px;
}

/* PORTAFOLIO SECTION*/

.portafolio {
  grid-column: 1/2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 50px 100px 50px 100px;
}
.imagen1 {
  grid-column: 1/2;
}
.imagen2 {
  grid-column: 2/3;
}
.imagen3 {
  grid-column: 3/4;
}
.imagen4 {
  grid-column: 4/5;
}

/* ITEMS SECTION*/

.itemsContainer {
  grid-column: 1/2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 50px 100px 0px 100px;
  text-align: center;
}

.itemsBeneficiosContainer {
	
	grid-column: 1/2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 50px 100px 0px 100px;
  text-align: center;
	
}

.item1 {
  grid-column: 1/2;
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
}
.itemIcon {
  text-align: center;
}
.itemTexto {
  margin-top: 20px;
text-align: left;
}
.item2 {
    grid-column: 2/3;
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    font-family: "Nunito Bold";
}
.item3 {
  grid-column: 3/4;
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
}
.item4 {
  grid-column: 4/5;
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
}

/* BENEFICIOS SECTION*/

.beneficios {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 50px 0px 50px 0px;
 
}
.beneficiosBtn {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
}
.fotoBeneficios {
  grid-column: 1/2;
  width: 100%;
	min-height: 900px;
  background-image:url("../images/comida.webp")	;
  background-size:100%;
  background-position: top center;
background-repeat: no-repeat;
	
}
.fotoBeneficios2 {
  grid-column: 1/2;
  width: 100%;
  background-image: url("../images/leonfoto.png")	;
  background-size: cover;
  background-position: top center;
	
}

.fotoBeneficios3 {
  grid-column: 1/2;
  width: 100%;
  background-image: url("../images/leonfoto.png")	;
  background-size: cover;
  background-position: top center;
	
}
.textBeneficios {
  grid-column: 2/3;
  padding: 20%;
  text-align: left;
  padding-top: 50px;
  padding-bottom: 50px;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* NOSOTROS SECTION*/

.nosotrosContainer {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: 1fr 1fr;
	margin-bottom: 100px;

}
.nosotrosInfo {
  grid-column: 1/2;
  width: 100%;
  
  text-align: left;
  padding: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
	justify-content: center;
}
.nosotrosfoto {
  grid-column: 2/3;
   width: 100%;
	min-height: 900px;
  background-image:url("../images/bebida.webp")	;
  background-size:100%;
  background-position: top center;
	background-repeat: no-repeat;
 
}
.nosotrosfoto2 {
  grid-column: 2/3;
  width: 100%;
  text-align: center;
  background-image: url("../images/leonfoto.png")	;
  background-size: cover;
  background-position: top center;
 
}

.nosotrosfoto3 {
  grid-column: 2/3;
  width: 100%;
  text-align: center;
  background-image: url("../images/leonfoto.png")	;
  background-size: cover;
  background-position: top center;

}

.nosotrosInfo p {
 color: var(--color4);
}

/* FOOTER SECTION*/

footer {
  background-color: #3a4f7a;
  grid-column: 1/3;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
footer p {
  color: var(--color4);
  font-size: .9em;
}
footer h1 {
  color: var(--color4);
  font-size: 2em;
}
.infoFooter {
  grid-column: 1/2;
  padding-left: 50px;
  padding-bottom: 30px;
  padding-top: 30px;
}
.redesFooter {
  grid-column: 2/3;
  text-align: right;
  padding-right: 50px;
  padding-top: 30px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
}
.mailFooter {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.telefonoFooter {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: left;
  margin-bottom: 10px;
}
.landsFooter {
  grid-column: 1/3;
  height: 60px;
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 900px) {
  h1 {
    font-family: var(--font1);
    font-size: 3em;
    line-height: 1;
   
  }
  .maincontainer {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    height: 100vh;
  }
	
  /* HEADER SECTION*/
	
  header {
    background-color: #FF8089;
    width: 100%;
    height: 100vh;
    grid-column: 1/2;
    display: grid;
    grid-template-columns: 1fr;
   
  }
  .portada {
    background-image:url("../images/portada Mobile-100.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    grid-column: 1/2;
    overflow: hidden;
    grid-row-start: 1;
    grid-row-end: 2;
    z-index: 1;
  }
  .infoPortada {
    grid-column: 1/2;
    grid-row-start: 1;
    grid-row-end: 2;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
	  justify-content: center;
    flex-wrap: nowrap;
    z-index: 2;
  }
  .subslogan {
    margin-top: 0px;
    padding-top: 20px;
  }
  .botonPrincipal {
    margin-top: 30px;
    grid-column: 1/2;
    text-align: center;
    height: 65px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
  }
  .slogan {
    padding-top: 0px,
  }
	
	.hamburger {
  position: fixed;
  top:20px;
	right: 20px;
  z-index: 101;
  cursor: pointer;
}
	
	
  main {
    grid-column: 1/2;
    display: grid;
    grid-template-columns: 1fr;
    
  }
	
  /* SLIDER SECTION*/
	
  .swiper {
    width: 100%;
    margin: 0px;
    grid-column: 1/2;
  }
  .swiper-slide {
    margin: 0px;
    width: 100%!important;
    text-align: center;
    margin-right: 0px !important;
    padding: 17px;
    cursor: grab;
  }
  .swiper-slide img {
    display: block;
    width: 100%;
    object-fit: cover;
    margin: 0px;
  }
  .swiper-slide .swiper-slide-active .swiper-slide-prev {
    margin-right: 0px !important;
  }
	
  /* PORTAFOLIO SECTION*/
	
  .portafolio {
    grid-column: 1/2;
    display: grid;
    grid-template-columns: 1fr;
    padding: 50px 0px 50px 0px;
  }
  .imagen1 {
    grid-column: 1/2;
  }
  .imagen2 {
    grid-column: 1/2;
  }
  .imagen3 {
    grid-column: 1/2;
  }
  .imagen4 {
    grid-column: 1/2;
  }
	
  /* ITEM SECTION*/
	
  .itemsContainer {
    grid-column: 1/2;
    display: grid;
    grid-template-columns: 1fr;
    padding: 50px 0px 0px 0px;
  }
	
	.itemsBeneficiosContainer {
	
	grid-column: 1/2;
    display: grid;
    grid-template-columns: 1fr;
    padding: 50px 0px 0px 0px;
	
}
  .item1 {
    grid-column: 1/2;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
  }
  .itemIcon {
    text-align: center;
  }
  .itemTexto {
    margin-top: 20px;
  }
  .item2 {
    grid-column: 1/2;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
  }
  .item3 {
    grid-column: 1/2;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
  }
  .item4 {
    grid-column: 1/2;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
  }
	
  /* BENEFICIOS SECTION*/
	
  .beneficios {
    grid-column: 1/2;
    display: grid;
    grid-template-columns: 1fr;
    padding: 50px 0px 50px 0px;
  }
  .beneficiosBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .fotoBeneficios {
    grid-column: 1/2;
    width: 100%;
	min-height: 500px;
  }
	.fotoBeneficios2 {
    grid-column: 1/2;
    width: 100%;
	min-height: 500px;
  }
	.fotoBeneficios3 {
    grid-column: 1/2;
    width: 100%;
	min-height: 500px;
  }
	
  .textBeneficios {
    grid-column: 1/2;
    padding: 10px;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
  }
	
  /* NOSOTROS SECTION*/
	
  .nosotrosContainer {
    grid-column: 1/2;
    display: grid;
    grid-template-columns: 1fr;
	  margin-bottom: 100px;
  
  }
  .nosotrosInfo {
    grid-column: 1/2;
    width: 100%;
   
    text-align: center;
    padding: 30px 10px 30px 10px ;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .nosotrosfoto {
  grid-column: 1/2;
    width: 100%;
	min-height: 500px;
	  grid-row-start: 1;
   
  }
	.nosotrosfoto2 {
    grid-column: 1/2;
    width: 100%;
    text-align: center;
	 min-height: 500px;
  }
	.nosotrosfoto3 {
    grid-column: 1/2;
    width: 100%;
    text-align: center;
	 min-height: 500px;
   
  }
	
  /* FOOTER SECTION*/
	
  footer {
    
    grid-column: 1/2;
    display: grid;
    grid-template-columns: 1fr;
  }
	
	.logoFooter {
	width: 100%;
	text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
		margin-bottom: 50px;
}
	
	
  .infoFooter {
    text-align: center;
    grid-column: 1/2;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
  }
  .redesFooter {
    grid-column: 1/2;
    text-align: center;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-bottom: 35px;
  }
  .mailFooter {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
  }
  .telefonoFooter {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
  }
  .landsFooter {
    grid-column: 1/2;
    height: 60px;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

.separador {
	
	margin-top: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 50px;
	 grid-column: 1/3;
	text-align: center;
}

.mapa {
	 grid-column: 1/3;
	padding-left: 10%;
	padding-right: 10%;
	margin-bottom: 50px;
	
}