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

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


body{margin: 0 0 0 0; padding: 0 0 0 0; background-color: #FFD9E5; font-family: "Sora", sans-serif; font-weight: 400; line-height: 1.2; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;}

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;}
img{display: block; max-width: 100%; height: auto; border: 0; border: none;}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fredoka One', sans-serif;
}

.display-1{font-size: 75px; line-height: 75px; margin-bottom: 24px;}
.h2{font-size: 45px;}

p{font-size: 18.75px;}
.subtitle{font-size: 18px; letter-spacing: 1.6px;}

.btn{cursor: pointer;color: #FFFFFF; text-decoration: none; text-align: center; background-color: #991642; text-transform: uppercase; border: none; border-radius: 50px; display: inline-flex; align-content: center; justify-content: center; flex-wrap: wrap; transition: color .15s ease-in-out, background-color .35s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; height: 72px; padding: 0 36px; font-size: 18px; letter-spacing: 1.6px;}
.btn:hover{background-color: #7b1135;}

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

.d-none{display: none !important;}
.d-block{display: block !important;}
.d-inline-block{display: inline-block!important;}
.d-flex{display: flex !important;}

.justify-content-center{justify-content: center;}


.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}

.color-ffffff{color: #FFFFFF;}
.color-991642{color: #991642;}

.mb-16{margin-bottom: 16px;}
.mb-32{margin-bottom: 32px;}
.mb-64{margin-bottom: 64px !important;}

.pt-128{padding-top: 128px;}
.pt-64{padding-top: 64px;}
.pt-32{padding-top: 32px;}

.pb-128{padding-bottom: 128px;}
.pb-64{padding-bottom: 64px;}
.pb-32{padding-bottom: 32px;}

.section{width: 100%; position: relative;}
.container{margin: 0 auto; padding-left: 16px; padding-right: 16px;}
.section-title{margin-bottom: 24px;}
.section-title .icon-heart{width: 54px; height: auto; margin: 0 auto; margin-bottom: 8px;}


.main-header{width: 100%; position: absolute; top: 0; left: 0; z-index: 999; padding: 56px 0;}
.main-header .header-content{max-width: 1380px; margin: 0 auto; padding: 0 16px; position: relative;}
.main-header .header-content .header-logos{display: flex; justify-content: flex-start; align-items: center;}
.main-header .header-content .header-logos .divider{width: 2px; height: 60px; background-color: #FFFFFF; margin: 0 24px;}
.main-header .header-logo{height: 26.25px; width: auto;}
.main-header .header-logo-cipharma{height: 29.68px; width: auto;}

.main-header.main-header-fixed{position: fixed; padding: 16px 0 !important;}
.main-header.main-header-fixed .header-content{padding: 16px 32px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgb(245, 189, 209, 0.8); border-radius: 50px;}
.main-header.main-header-fixed .header-content .menu-toggle{top: 22px; right: 20px;}

.main-hero{position: relative; width: 100%; min-height: 100vh; padding: 165px 0 72px 0; display: flex ; align-items: center; justify-content: center;
background: #DA83A1;
background: linear-gradient(36deg, rgba(218, 131, 161, 1) 0%, rgba(250, 188, 208, 1) 100%);}
.main-hero .hero-wrapper{/*position: relative;*/ display: flex ; align-items: center; justify-content: space-between; flex-wrap: wrap; max-width: 1220px; margin: 0 auto; flex: 1; padding: 0 16px;}
.main-hero .hero-wrapper .hero-content{flex: 1;}
.main-hero .hero-content .logo{max-width: 412.5px; height: auto; margin-bottom: 38px;}
.main-hero .hero-content .h2{font-family: "Sora", sans-serif; font-size: 26.25px; line-height: 39px; font-weight: 600; margin-bottom: 54px;}
.main-hero .hero-wrapper .hero-image{flex: 1; display: flex; justify-content: end;}
.main-hero .hero-wrapper .hero-image .img-hero{max-width: 515px; border-radius: 32px;}
.main-hero .img-hero-hand{position: absolute; left: calc(50% + 42px); bottom: 0; transform: translateX(-50%);}
.main-hero .img-hero-hand img{max-width: 526px;}

#que-es-gino-parche{display: flex; align-items: stretch; flex-wrap: wrap; overflow-x: hidden; background: #EDBFCE;
background: linear-gradient(180deg, rgba(237, 191, 206, 1) 0%, rgba(255, 230, 238, 1) 100%);}
#que-es-gino-parche .about-image{flex: 1;}
.about-content-wrapper{/*width: 720px;*/ padding: 32px 64px; margin: 0 auto;}
#que-es-gino-parche .about-content{flex: 1; display: flex; align-items: center;}
#que-es-gino-parche .about-content p{font-size: 18.75px; line-height: 33px; margin-bottom: 36px;}
#que-es-gino-parche .about-content .specs-item .h3{font-family: "Sora", sans-serif; font-size: 21px;}
#que-es-gino-parche .about-content .specs-item .icon{height: 52.5px; width: auto; margin-right: 28px;}
#que-es-gino-parche .img-que-es-gino-parche{width: 100%; height: 100%; object-fit: cover;}
.specs-wrap{}
.specs-wrap .specs-item{display: flex; align-items: center; justify-content: start; background-color: #FFF1F5; border-radius: 16px; box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.15); margin-bottom: 21px; padding: 16px 24px;}

#como-se-usa{background: #DA94AB;
background: linear-gradient(36deg, rgba(218, 148, 171, 1) 0%, rgba(253, 223, 233, 1) 100%);}
#como-se-usa .container{max-width: 1040px; }
#como-se-usa .video-wrapper{position: relative;}
#como-se-usa .video-wrapper .icon-play{width: 100px; height: auto; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#como-se-usa .frame-video{border-radius: 28px;}
.como-se-usa-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;}
.como-se-usa-item{}
.como-se-usa-item .icon{margin: 0 auto; margin-bottom: 24px; width: 150px;}
.como-se-usa-item .h3{text-align: center; color: #991642; font-family: "Sora", sans-serif; font-weight: 400; font-size: 18.75px;}


.section-videos{background-image: url("../images/bg-videos.svg"); background-size: cover; background-position: center; background-repeat: no-repeat;}
.section-videos .thumb-video{max-width: 234px;}
.section-videos .play-wrapper{margin: 16px 0;}
.section-videos .icon-play{max-width: 100px; height: auto;  position: relative; z-index: 1; opacity: 0.8;}
.section-videos .logo{max-width: 351px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.section-comprar{background: #F0BDCD;
background: linear-gradient(137deg, rgba(240, 189, 205, 1) 0%, rgba(254, 217, 229, 1) 100%);}
.section-videos,.section-comprar{flex: 1; align-items: center; justify-content: center; display: flex; position: relative;}
.section-videos .content,.section-comprar .content{display: flex ; flex-direction: column; align-items: center;}
.section-comprar .logo{max-width: 274px;}
.section-comprar .img-pack{max-width: 336px; width: 100%; position: relative; z-index: 1;}
.section-comprar .heart-wrapper{ position: absolute; top: calc(50% + -56px); left: 50%; transform: translate(-50%, -50%); max-width: 436px; width: 100%;}
.section-comprar .heart{max-width: 436px; width: 100%; }
.section-comprar .btn{max-width: 367px; width: 100%;}

.marquee{width: 100%; overflow: hidden; background: #991642; padding: 26px 0;}
.marquee-track{display: flex; align-items: center; width: max-content; animation: scroll 20s linear infinite;}
.marquee-item{display: flex; align-items: center; margin: 0 2rem;}
.marquee-item svg{width: 54px; height: auto; margin-left: 18px;} 
.marquee-item span {font-family: 'Fredoka One', sans-serif; font-size: 38px; color: #FFFFFF; white-space: nowrap;}
@keyframes scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

.tips-grid{display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; max-width: 807px; margin: 0 auto;}
.tips-grid .icon{margin: 0 auto; margin-bottom: 24px; width: 100px; height: auto; transition: .3s;}
.tips-item:hover .icon{transform: scale(1.2);}
.tips-grid .h3{text-align: center; color: #991642; font-family: "Sora", sans-serif; font-size: 18.75px; font-weight: 400;}

#faq{background-image: url("../images/bg-heart.svg"); background-position: top center; background-repeat: no-repeat; background-size: cover;}

dialog {
border: none;
border-radius: 16px;
padding: 32px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
width: 90%;  max-width: 520px; position: fixed; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
dialog .close{color: #FFFFFF; background-color: #991642; border-radius: 50px; font-weight: 400; padding: 16px 32px; margin-top: 10px; font-size: 14px; letter-spacing: 1.4px; border: none; cursor: pointer; text-transform: uppercase;}
dialog::backdrop {
    position: fixed;
    inset: 0px;
    background-color: rgb(137, 9, 52, 0.80); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.dialog-body{display: flex ; flex-direction: column; align-items: center;}
/*ACCORDIO.N*/
.accordion{border: 1px solid #DCDDDE; border-radius: 28px; overflow: hidden; max-width: 807px; margin: 0 auto;}
.accordion-item{border-bottom: 1px solid #DCDDDE;}
.accordion-item:last-child{border-bottom: none;}
.accordion-header {
      background-color: #FFF1F5;
      color: #0092DD;
      padding: 38px 25px 36px 67px;;
      cursor: pointer;
      user-select: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background-color 0.3s ease;
}
.accordion-header .h3{font-size: 28px; font-family: "Sora", sans-serif; color: #991642;}
    .accordion-header:hover {
      background-color: inherit;
    }
    .accordion-header.active{background-color: #991642; color: #FFFFFF;}
.accordion-header.active .h3{color: #FFFFFF;}

    .accordion-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      padding: 0 25px 0 67px;
      background-color: #991642;
    }
.accordion-body p{color: #FFFFFF; margin-bottom: 0;}
.accordion-body.open{max-height: inherit; padding: 0 25px 31px 67px;}
.accordion-icon{transition: transform 0.3s ease; margin-left: 15px;}
.accordion-icon.rotate{transform: rotate(90deg);}
.accordion-icon.rotate svg path{fill: #FFFFFF !important;}


.main-footer{background-color: #F196B5; color: #FFFFFF; text-align: center; padding-left: 16px; padding-right: 16px;}
.logo-footer{max-width: 1220px; height: auto;}
.fotter-content{max-width: 1220px; margin: 0 auto; margin-top: 36px; padding: 0 16px; display: flex ; justify-content: space-between;}
.footer-logo-cipharma{width: 160px; height: auto;}
.main-footer .nav-redes{}
.main-footer .nav-redes ul{display: flex;}
.main-footer .nav-redes ul li{margin-right: 6px;}
.main-footer .nav-redes ul li:last-child{margin-right: 0;}
.main-footer .nav-redes ul li a{display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: solid 1px #FFFFFF; border-radius: 50%; background-color: #FFFFFF;}
.main-footer .nav-redes ul li a svg{height: 14px; width: auto;}
.fotter-content .footer-info{display: flex; text-align: left; margin-top: 12px;}
.fotter-content .footer-info > div{margin-right: 52px; font-size: 14px !important;}
.fotter-content .footer-info > div:last-child{margin-right: 0;}
.fotter-content .footer-info p{font-size: 14px;}
.fotter-content h6{text-transform: uppercase; font-family: Sora, sans-serif; letter-spacing: 2px; font-weight: 600; margin-bottom: 8px;}
.fotter-content a{color: #FFFFFF; text-decoration: none;}

/*LOADING*/
#preloader{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #DA94AB;
    background: linear-gradient(36deg, rgba(218, 148, 171, 1) 0%, rgba(253, 223, 233, 1) 100%); z-index: 9999;}
#status{display: inline-block; position: relative; width: 80px; height: 80px; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.loader, .loader:before, .loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  animation-fill-mode: both;
  animation: bblFadInOut 1.8s infinite ease-in-out;
}
.loader {
 display: block;
  color: #FFF;
  font-size: 7px;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}

@keyframes bblFadInOut {
  0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
  40% { box-shadow: 0 2.5em 0 0 }
}
    
/* Ocultar preloader con transición */
#preloader.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
}
/*LOADING*/



/* Botón hamburguesa */
.bg-nav{z-index: -1; position: absolute; transform: rotate(180deg); object-fit: cover; width: 100%; height: 100%; max-width: inherit; top: 0; left: 0;}
.menu-toggle {
  position: absolute;
  top: 8px;
  right: 16px;
  width: 46px;
  height: 46px;
	border-radius: 50%;
  background: #991642;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  cursor: pointer;
}

.menu-toggle .bar {
  position: fixed;
  width: 18px;
  height: 2px;
  background-color: #FFFFFF;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.menu-toggle .top {
  transform: translateY(-7px);
}

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

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

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

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

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

/* Menú móvil */
body.menu-open { overflow: hidden; }
.mobile-menu{overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.8s ease; z-index: 998; background: #DA83A1; background: linear-gradient(36deg, rgba(218, 131, 161, 1) 0%, rgba(250, 188, 208, 1) 100%);}

.mobile-menu.active {
  opacity: 1;
  pointer-events: auto;
}

.menu-items{list-style: none; padding: 42px; margin: 0; text-align: center;}

.menu-items li {
  overflow: hidden; /* para “recortar” el a */
  margin: 24px 0;
}

/* Enlaces */
.menu-items a {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: 0.4s;
	font-family: 'Fredoka One', sans-serif;
  font-size: 36px;
  font-weight: 400;
  color: #FFFFFF;
  text-decoration: none;
}
.menu-items a:hover {
  color: #991642;
}

.menu-items a.fade-in {
  opacity: 1;
  transform: translateY(0);
}
.menu-items a.fade-out {
  opacity: 0;
  transform: translateY(20px);
}

.mobile-menu:not(.active) a {
  transition-delay: 0s !important; /* Sin demora para empezar */
  opacity: 0;
  transform: translateY(20px);
}

.logo-menu{position: absolute; bottom: 8px; opacity: 0.4; max-width: 1220px; width: 100%; height: auto;}

.goverlay{background-color: rgb(137, 9, 52, 0.80) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
.gnext, .gprev{opacity: 0; display: none;}

@media (min-width: 2560px){
	/*.main-hero{min-height: inherit;}*/
	#faq{background-position: center;}
}

@media (max-width: 1680px){
	.main-header{padding: 3.333vw 0;}
	.main-header .header-content{max-width: 82.143vw;}
	.main-hero{padding: 9.821vw 0 4.286vw 0;}
	.main-hero .hero-wrapper{max-width: 72.619vw;}
	.main-hero .hero-content .logo{max-width: 24.554vw; margin-bottom: 2.262vw;}
	.display-1{font-size: 4.464vw; line-height: 4.464vw; margin-bottom: 1.429vw;}
	.main-hero .hero-content .h2{font-size: 1.563vw; line-height: 2.321vw; margin-bottom: 3.214vw;}
	.hero-content .btn{height: 4.286vw; padding: 0 2.143vw; font-size: 1.071vw; letter-spacing: 0.095vw;}
	.main-hero .hero-wrapper .hero-image .img-hero{max-width: 30.655vw; border-radius: 1.905vw;}
	.main-hero .img-hero-hand{left: calc(50% + 2.56vw);}
	.main-hero .img-hero-hand img{max-width: 31.31vw;}
}

@media (max-width: 992px){
	#que-es-gino-parche{display: block;}
	.fotter-content .footer-info{flex-direction: column; text-align: center;}
	.fotter-content .footer-info > div{margin-right: 0; margin-bottom: 32px;}
	.fotter-content{justify-content: inherit; flex-direction: column; align-items: center;}
	.footer-logo-cipharma{margin-bottom: 32px;}
	.main-footer .nav-redes ul{display: inline-flex;}
}

@media (max-width: 820px) and (orientation: portrait){
	.main-header .header-content{max-width: 100%;;}
	.main-header.main-header-fixed .header-content{max-width: calc(100% - 32px);}
	
	
	.main-hero{padding: 116px 0 0 0; height: auto; min-height: inherit; background-color: #FABDD1; background: #FABDD1;}
	
	.main-hero .hero-wrapper{max-width: 100%; flex-direction: column; padding: 0 0 0 0;}
	.main-hero .hero-wrapper .hero-content{order: 2; padding: 64px; width: 100%; background-color: #F99BBA;}
	.main-hero .hero-wrapper .hero-image{order: 1; position: relative; justify-content: center; align-items: start; max-width: 520px; margin-right: 100px;}
	.main-hero .hero-wrapper .hero-image .img-hero{max-width: 56%; order: 2; border-radius: 16px;}
	.main-hero .img-hero-hand{position: relative; left: inherit; transform: none; bottom: inherit; z-index: 2;}
	.main-hero .img-hero-hand img{max-width: 146%; margin-top: 104px;}

	.main-hero .hero-content .logo { max-width: 342px; margin-bottom: 32px; }
	.display-1 { font-size: 56px; line-height: 56px; margin-bottom: 16px; }
	.main-hero .hero-content .h2 { font-size: 20px; line-height: 20px; margin-bottom: 34px;}
	.hero-content .btn { height: 48px; padding: 0 41px; font-size: 14px; letter-spacing: 2px; }
	
	#como-se-usa .frame-video { border-radius: 0; width: calc(100% + 32px); max-width: inherit;}
	.como-se-usa-grid{grid-template-columns: repeat(2, 1fr); gap: 16px;}
	
	#comprar{flex-direction: column;}
	
	.tips-grid{grid-template-columns: repeat(2, 1fr); gap: 16px;}
	
	
}

@media (max-width: 576px){
	
	.mb-64{margin-bottom: 42px !important;}
	
	p{font-size: 16px;}
	.subtitle{font-size: 12px;}
	
	.h2{font-size: 28px;}
	.section-title{margin-bottom: 16px;}
	.section-title .icon-heart{width: 32px; margin-bottom: 4px;}
	
	.menu-items a{font-size: 24px;}
	
	.main-header{padding: 24px 0;}
	.main-header .header-logo{height: 16px;}
	.main-header .header-content .header-logos .divider{width: 1px; height: 26px; margin: 0 12px;}
	.main-header .header-logo-cipharma{height: 22px;}
	.menu-toggle{top: -10px;}
	.main-header.main-header-fixed .header-content{padding: 16px 16px;}
	.main-header.main-header-fixed .header-content .menu-toggle{top: 6px; right: 7px;}
	
	.main-hero{padding: 78px 0 0 0;}
	.main-hero .hero-content .logo{max-width: 265px; margin-bottom: 18px;}
	.display-1{font-size: 46px; line-height: 46px; margin-bottom: 16px;}
	.main-hero .hero-wrapper .hero-content{padding: 46px 32px;}
	.main-hero .hero-content .h2{font-size: 18px; line-height: 18px; margin-bottom: 28px;}
	.main-hero .hero-wrapper .hero-image{margin-right: 16px;}
	.main-hero .img-hero-hand img{margin-top: 74px; margin-left: -36px; max-width: 184%;}
	.hero-content .btn{height: 64px; text-wrap: nowrap;}

	
	.about-content-wrapper{padding: 32px;}
	#que-es-gino-parche .about-content p { font-size: 16px; line-height: 25px; margin-bottom: 24px;}
	.specs-wrap .specs-item{border-radius: 8px;  margin-bottom: 16px; padding: 16px 16px; }
	#que-es-gino-parche .about-content .specs-item .icon { height: 36px; margin-right: 12px; }
	#que-es-gino-parche .about-content .specs-item .h3{font-size: 16px;}
	
	#como-se-usa .video-wrapper .icon-play{width: 62px;}
	.como-se-usa-item .icon{margin-bottom: 12px; width: 112px;}
	.como-se-usa-item .h3{font-size: 16px;}
	.como-se-usa-item .h3 br{display: none;}
	
	.section-videos .thumb-video{max-width: 162px;}
	.section-videos .logo{max-width: 262px;}
	.section-videos .icon-play{max-width: 62px;}
	.section-comprar .img-pack{max-width: 247px;}
	.section-comprar .heart-wrapper{max-width: 320px;}
	
	.marquee{padding: 16px 0;}
	.marquee-item{margin: 0 1rem;}
	.marquee-item span{font-size: 26px;}
	.marquee-item svg{width: 28px; margin-left: 12px;}
	
	.tips-grid{max-width: 320px; gap: 32px 16px;}
	.tips-grid .icon{width: 74px; margin-bottom: 12px;}
	.tips-grid .h3{font-size: 16px;}
	
	.accordion-header{padding: 28px 28px 18px 28px;}
	.accordion-header .h3{font-size: 22px;}
	.accordion-body{padding: 0 30px 0 30px;}
	.accordion-body.open{padding: 0 30px 31px 30px;}
}