@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: #1A1A1A;
  --color2: #FF8089;
  --color3: #62BEB7;
  --color4: white;

  --font1: "Poppins Regular";
  --font2: "Poppins Regular";
  --font3: "Ubuntu Regular";
  --font4: "Ubuntu Medium";
}

/* VARIABLES*/

body {
  background-color: #F4F4F4;
  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: var(--font1);
  font-size: 3em;
  line-height: 1.4;
  color: var(--color4);
}
h2 {
  font-family: var(--font2);
  font-size: 1.7em;
  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;
}

/* HEADER SECTION*/

header {
  background-image:url("../images/portada2.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  grid-column: 1/3;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.portada {
  grid-column: 2/3;
  height: 100%;
  overflow: hidden;
}
.infoPortada {
  grid-column: 1/3;
  padding: 100px;
  padding-top: 10%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
}
.slogan {
  padding-top: 50px,
}
.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:#ed2c88;
}

.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: #ed2c88;
  margin-bottom: 6px;
}

.line:hover {
 
  background: #ed2c88;
}

.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;
  margin-bottom: 50px;
	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: 30px;
  cursor: grab;
  background-color: #EDEDED;
  filter: drop-shadow(2px 3px 4px #BDBDBD);
}
.swiper-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
  margin: 0px;
}
.swiper-pagination {
  
}

/* 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 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;


}
.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: 0px 0px 50px 0px;
 
}
.beneficiosBtn {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
}
.fotoBeneficios {
  grid-column: 1/2;
  width: 100%;
	
}
.textBeneficios {
  grid-column: 2/3;
  padding: 15%;
  text-align: center;
background-color: #ed2c88;
	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;
  padding-top: 50px;
  padding-bottom: 50px;
}
.nosotrosInfo {
  grid-column: 1/2;
  width: 100%;
  background-color: #923092;
  text-align: center;
  padding: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nosotrosfoto {
  grid-column: 2/3;
  width: 100%;
  text-align: center;
 
}

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

/* FOOTER SECTION*/

footer {
  background-color: black;
  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/4;
  padding-left: 0px;
  padding-bottom: 30px;
  padding-top: 30px;
	text-align: center;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.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;
  margin-bottom: 10px;
}

.telefonoFooter {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-bottom: 10px;
}
.landsFooter {
  grid-column: 1/3;
  height: 40px;
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 900px) {
	

	html body{
		
	overflow-x: hidden	
		
		
	}
  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: black;
    width: 100%;
    height: 100vh;
    grid-column: 1/2;
    display: grid;
    grid-template-columns: 1fr;
   
  }
  .portada {
    background-image:url("../images/portadamobile2.png");
    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;
    flex-wrap: nowrap;
    z-index: 2;
	  padding-top: 80px;
  }
  .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;
    margin-bottom: 0px;
  }
	
  /* 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: 0px 0px 50px 0px;
  }
  .beneficiosBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .fotoBeneficios {
    grid-column: 1/2;
    width: 100%;
  
   
  }
  .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;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .nosotrosInfo {
    grid-column: 1/2;
    width: 100%;
    background-color: #923092;
    text-align: center;
    padding: 30px 10px 30px 10px ;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .nosotrosfoto {
    grid-column: 1/2;
    width: 100%;
    text-align: center;
    
	
  }
	
  /* FOOTER SECTION*/
	
  footer {
    background-color: black;
    grid-column: 1/2;
    display: grid;
    grid-template-columns: 1fr;
  }
	
	.logoFooter {
	width: 100%;
	text-align: center;
  display: flex;
 display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
		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: 40px;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}