@charset "UTF-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{background-color: #FFFFFF;  color: #FFFFFF; font-family: "neo-sans", sans-serif;
 font-weight: 400; line-height: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden;}

h1, h2, h3, h4, h5, h6, ul, li, a, p, figure{
padding: 0 0 0 0; margin: 0 0 0 0; list-style-type: none; font-weight: inherit; font-size: inherit; line-height: inherit;}

.h1{font-size: 44px; letter-spacing: -2px; line-height: 36px; font-weight: 900;}
.h2{font-size: 21px; letter-spacing: -0.63px; line-height: 36px; font-weight: 900;}
.h3{font-size: 15px; line-height: 28px; letter-spacing: -0.45px; font-weight: 900;}

button{cursor: pointer; background: transparent; border: none;}

a{color: inherit; text-decoration: none;}

.btn{min-width: 151px; height: 47px; border-radius: 14px; font-size: 17px; font-weight: 400; text-align: center; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s;}
.btn-358F39{color: #FFFFFF; background-color: #358F39;}
.btn-CE0C2E{color: #FFFFFF; background-color: #CE0C2E;}
.btn-2246DD{color: #FFFFFF; background-color: #2246DD;}

.btn-FFFFFF{color: #358F39; background-color: #FFFFFF;}

.btn-358F39:hover{background-color: rgb(53,143,57, 0.90);}
.btn-CE0C2E:hover{background-color: rgb(206,12,46, 0.80);}
.btn-2246DD:hover{background-color: rgb(34,70,221, 0.90);}

p{font-size: 18px; line-height: 25px; letter-spacing: -0.54px; margin-bottom: 28px;}
p:last-child{margin-bottom: 0;}
.small{font-size: 14px; line-height: 17px; letter-spacing: -0.42px;}
.fs-20{font-size: 20px;}
.fs-18{font-size: 18px !important;}

img{display: block; max-width: 100%; height: auto; border: 0; border: none;}


.color-FFFFFF{color: #FFFFFF !important;}
.color-4A4A4A{color: #4A4A4A !important;}
.color-FFEB00{color: #FFEB00 !important;}
.color-FFEA05{color: #FFEA05 !important;}
.color-CE0C2E{color: #CE0C2E !important;}
.color-FFD800{color: #FFD800 !important;}
.color-{color: #358F39 !important;}

.bg-FFFFFF{background-color: #FFFFFF;}
.bg-FFEB00{background-color: #FFEB00;}
.bg-CE0C2E{background-color: #CE0C2E;}

.text-uppercase{text-transform: uppercase !important;}
.text-left{text-align: left !important;}
.text-center{text-align: center !important;}

.fw-400{font-weight: 400 !important;}
.fw-900{font-weight: 900 !important;}

.fs-19{font-size: 19px !important; letter-spacing: -0.57px !important;}

.lh-19{line-height: 19px !important;}
.lh-25{line-height: 25px !important;}

/*Display property*/
.d-block{display: block;}
.d-inline-block{display: inline-block !important;}
.d-none{display: none;}
.d-grid{display: grid;}
.d-flex{display: flex;}
.align-item-start{align-items: start;}
.align-item-center{align-items: center;}
.align-item-end{align-items: end;}
.justify-content-between{justify-content: space-between;}
.justify-content-start{justify-content: start;}
.justify-content-center{justify-content: center;}
.justify-content-end{justify-content: end;}
.justify-self-center{justify-self: center;}
.flex-direction-column{flex-direction: column;}
/*Display property*/

.position-relative{position: relative;}
.position-absolute{position: absolute;}
.z-index-2{z-index: 2;}

.w-100{width: 100%;}
.mw-100{max-width: 100% !important;}
.h-100{height: 100%;}
.h-100-vh{height: 100vh;}
.mh-100-vh{min-height: 100vh;}

.m0-auto{margin: 0 auto;}
.mb-42{margin-bottom: 42px !important;}
.mb-28{margin-bottom: 28px !important;}
.mb-18{margin-bottom: 18px !important;}
.mb-12{margin-bottom: 12px !important;}
.mb-0{margin-bottom: 0 !important;}
.pb-0{padding-bottom: 0 !important;}
.pt-0{padding-top: 0 !important;}

.mt-32{margin-top: 32px !important;}
.mt-8{margin-top: 8px !important;}
.mr-5{margin-right: 5px !important;}
.mt-3{margin-top: 2px !important;}


.after-gradiet:after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 60px;
background: rgb(206,12,46);
background: -moz-linear-gradient(0deg, rgba(206,12,46,1) -10%, rgba(206,12,46,0) 76%);
background: -webkit-linear-gradient(0deg, rgba(206,12,46,1) -10%, rgba(206,12,46,0) 76%);
background: linear-gradient(0deg, rgba(206,12,46,1) -10%, rgba(206,12,46,0) 76%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00473d",endColorstr="#00473d",GradientType=1);}

.sep-gradiet{position: absolute; left: 0; bottom: 0; width: 100%; height: 200px; z-index: 2;
background: rgb(206,12,46);
background: -moz-linear-gradient(0deg, rgba(206,12,46,1) 9%, rgba(206,12,46,0) 100%);
background: -webkit-linear-gradient(0deg, rgba(206,12,46,1) 9%, rgba(206,12,46,0) 100%);
background: linear-gradient(0deg, rgba(206,12,46,1) 9%, rgba(206,12,46,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00473d",endColorstr="#00473d",GradientType=1);}
.sep-gradiet-top{top: 0; bottom: inherit; transform: rotate(180deg);}

.overflow-hidden{overflow: hidden;}

.section{position: relative; width: 100%; padding-top: 52px; padding-bottom: 52px;}
.container{width: 100%; max-width: 700px; margin: 0 auto; padding-left: 15px; padding-right: 15px;}
.section-title{margin-bottom: 18px;}

.main-header{position: fixed; top: 0; left: 0; width: 100%; z-index: 999;}
.main-header:before{content: ""; display: block; width: 100%; height: 12px; background-color: #CE0E2D; border-radius: 0 0 12px 12px;}
.header-logo{height: 49.09px; width: auto;}


.section-hero{/*background-image: url("../images/img-hero-01.webp");*/ background-size: cover; background-repeat: no-repeat; background-position: center center;}
#section-hero {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
.frame {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      opacity: 0;
    }
/*.section-hero:after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0,71,61, 0.35);}*/
.btn-scroll-container{position: absolute; bottom: 100px; width: 100%; z-index: 5;}
.btn-scroll{background-color: transparent; width: 70px; height: 70px; border: solid 3px #FFD800; border-radius: 50%;}
.btn-scroll svg{width: 24px; height: 8px; margin-top: 4px;}
.btn-scroll-container p{margin-bottom: 18px; font-size: 16px;}

.img-que-es-negatos{mix-blend-mode: screen;}

.indicaciones-de-uso{border-radius: 24px; border: solid 1px #CE0C2E; padding: 14px 18px; margin-bottom: 28px;}


#que-es-negatos .h1{margin-bottom: 28px;}
#que-es-negatos .pack{max-width: 80%;}

#presentacion .pack{max-width: 50%; margin-left: 18px;}

.btn-prospecto{padding-left: 18px; padding-right: 18px;}
.btn-prospecto svg{margin-right: 9px;}
.nav-actions{display: flex ; justify-content: center; border-top: solid 1px #CE0C2E; padding-top: 18px; margin-top: 18px;}
.nav-actions li{margin: 0 4px;}

.faq-item {
border-bottom: 1px solid #CE0C2E;
overflow: hidden; margin-bottom: 18px;
}
.faq-question {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
	margin-bottom: 18px;

}
.faq-symbol{font-size: 20px; transition: transform 0.3s; color: #4A4A4A; font-weight: 400;}
.faq-answer{display: none; padding-bottom: 22px;}
.faq-answer p{font-size: 15px; line-height: 19px; color: #4A4A4A; letter-spacing: -0.45px;}
.faq-item.active .faq-answer{display: block;}

.last-section-content{position: absolute; left: 50%; bottom: 15%; transform: translateX(-50%); z-index: 100; display: flex ; align-items: center; justify-content: center;}
.last-section-content .pack{width: 40%;}

/*SIDENAV*/
.sidenav{position: fixed; top: 0; right: -100%; z-index: 1000; width: 100%; height: 100%; overflow-x: hidden; transition: 0.3s; padding: 30px; background-color: rgb(0, 71, 61, 0.80); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
.sidenav .closebtn{position: absolute; top: 35px; right: 35px;}
.sidenav .closebtn img{width: 25px;}
.sidenav ul{width: 100%;}
.sidenav ul li{font-size: 22px;}
.sidenav ul li a{color: #FFFFFF; max-width: 320px; display: block; margin: 0 auto; border-bottom: solid 1px #D7DF23; padding: 15px 0;}
.sidenav ul li a:hover{opacity: 0.8;}
.icon-opennav{width: 70px; height: 70px;}
/*SIDENAV*/

/* Botón hamburguesa cuadrado */
.menu-toggle {
  position: fixed;
  top: 10px;
  right: 12px;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

/* Barras del botón */
.menu-toggle .bar {
  position: absolute;
  width: 24px;
  height: 3px;
  background-color: #CE0E2D;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Posiciones normales */
.menu-toggle .top {
  transform: translateY(-8px);
}

.menu-toggle .middle {
  transform: translateY(0);
}

.menu-toggle .bottom {
  transform: translateY(8px);
}

/* Animación a X */
.menu-toggle.active .bar{background-color: #FFFFFF;}
.menu-toggle.active .top {
  transform: rotate(45deg);
}

.menu-toggle.active .middle {
  opacity: 0;
}

.menu-toggle.active .bottom {
  transform: rotate(-45deg);
}

/* Menú móvil */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background-color: rgb(206,14,45, 0.97);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 998;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu ul {
  list-style: none;
  text-align: center;
  padding: 0;
}

.mobile-menu li {
  margin: 15px 0 10px 0; border-bottom: solid 1px rgb(255,255,255, 0.25); padding-bottom: 15px;
}
.mobile-menu li:last-child{margin-bottom: 0; padding-bottom: 0; border-bottom: none;}

.mobile-menu a {
  text-decoration: none;
  font-size: 24px; font-weight: 900;
  color: #FFFFFF;
  transition: color 0.3s;
}

.mobile-menu a:hover {
  color: #FFFFFF;
}

/*LOADING*/
#preloader{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #CE0C2E; z-index: 9999; width: 100%; height: 100%;}
#status{display: inline-block; position: relative; width: 80px; height: 80px; top: 50%; transform: translate(-50%, -50%); left: 50%;}
.lds-ripple{display: inline-block; position: relative; width: 80px; height: 80px;}
.lds-ripple div{position: absolute; border: 4px solid #FFFFFF; opacity: 1; border-radius: 50%; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
/* Ocultar preloader con transición */
#preloader.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
}
/*LOADING*/
.main-footer{padding: 40px 15px 30px 15px;}
.main-footer-grid{display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(1, 1fr); gap: 10px;}
.main-footer-grid .start-2{grid-column-start: 2;}
.main-footer-grid .start-3{grid-column-start: 3;}

.video-wrapper { position: relative; width: 100%; height: auto; margin-top: 42px; margin-bottom: 62px;}
.video{opacity: 1; transition: opacity 1s ease; display: block; width: 100%;}
.ratio-16x9{aspect-ratio: 16 / 9 !important; object-fit: cover !important;}
.poster { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 10; opacity: 1; transition: opacity 0.5s ease;}


@media (orientation: landscape) {
	.btn-scroll-container{bottom: 30px;}
}

@media screen and (min-width: 980px) and (orientation: landscape) {
	
	.mb-28{margin-bottom: 38px !important;}
	
	.hero-content .h1{font-size: 76px; line-height: 66px;}
	
	.btn-scroll svg{width: 28px; height: 11px; margin-top: 4px;}
	.btn-scroll-container p{font-size: 19px;}
	
	.section-title{margin-bottom: 26px;}
	
	.h2{font-size: 36px; letter-spacing: -1.08px;}
	.h3{font-size: 18px; letter-spacing: -0.54px;}
	.small{font-size: 16px; line-height: 20px;}
	
	.section{padding-top: 68px; padding-bottom: 68px;}
	
	.indicaciones-de-uso{padding: 18px 22px;}
	
	#que-es-negatos .pack{max-width: 60%;}
	
	.nav-actions{padding-top: 28px; margin-top: 28px;}
	.nav-actions li{margin: 0 8px;}
	
	
}

@media (max-width: 768px){
	.btn-scroll{width: 60px; height: 60px;}
}
@media (max-width: 576px){
	
	.last-section-content{justify-content: center; flex-direction: column; bottom: 0;}
	.last-section-image{aspect-ratio: 1 / 1; object-fit: cover;}
	.last-section-content .h1{font-size: 21px; letter-spacing: -0.63px; line-height: 36px;}
	.last-section-content .pack{width: 75%; margin-left: 20px; max-width: 187px;}
	
	.main-footer-grid .start-2 {
    grid-column-start: 1;
}
}