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

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

@font-face {
    font-family: 'codec_warm_boldbold';
    src: url('../fonts/codecwarm-bold-webfont.woff2') format('woff2'),
         url('../fonts/codecwarm-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'codec_warmextra_bold';
    src: url('../fonts/codecwarm-extrabold-webfont.woff2') format('woff2'),
         url('../fonts/codecwarm-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'codec_warmextra_bold_italic';
    src: url('../fonts/codecwarm-extrabolditalic-webfont.woff2') format('woff2'),
         url('../fonts/codecwarm-extrabolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'codec_warmlight';
    src: url('../fonts/codecwarm-light-webfont.woff2') format('woff2'),
         url('../fonts/codecwarm-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'codec_warmlight_italic';
    src: url('../fonts/codecwarm-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/codecwarm-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'codec_warmregular';
	src: url('../fonts/codecwarm-regular-webfont.woff2') format('woff2'),
         url('../fonts/codecwarm-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body{background-color: #FFFFFF; color: #000000; text-align: center; font-family: 'codec_warmregular'; font-size: 16px; font-weight: 400; line-height: normal; 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: 400; font-size: inherit; line-height: normal;}
img{display: block; max-width: 100%; height: auto; border: 0; border: none;}
a{text-decoration: none;}

.h1{font-family: 'codec_warmextra_bold'; font-size: 30px; font-weight: 800; line-height: 34px; letter-spacing: -1.2px;}
.h2{font-family: 'codec_warmextra_bold'; font-size: 25px; font-weight: 800; line-height: 28px; letter-spacing: -1px;}
.h3{font-family: 'codec_warmregular'; font-size: 16px; font-weight: 400; line-height: 18px; letter-spacing: -0.56px;}

p{font-size: 16px; line-height: 18px; letter-spacing: -0.42px;}

.fs-12{font-size: 12px;}
.fs-14{font-size: 14px; line-height: 16px;}
.fs-18{font-size: 18px;}
.lh-12{line-height: 12px;}
.lh-18{line-height: 18px;}
.lh-1{line-height: 1;}
.lh-1-2{line-height: 1.2;}
.lh-1-6{line-height: 1.6;}

.mb--18{margin-bottom: -18px;}


/*BUTTONS*/
.btn{height: 42px; border-radius: 12px; font-size: 16px; font-weight: 400; color: #FFFFFF; text-align: center; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s; border: none; background-color: transparent; padding: 0 34px;}
.btn svg{margin-right: 8px;}
.btn span{margin-bottom: -8px;}
.btn.btn-CF1678{background-color: #CF1678;}
.btn.btn-CF1678:hover{background-color: rgb(207,22,120, 0.8);}
.btn.btn-6C0E8B{background-color: #6C0E8B;}
.btn.btn-6C0E8B:hover{background-color: rgb(108,14,139, 0.8);}
.btn.btn-79A7AA{background-color: #79A7AA;}
.btn.btn-79A7AA:hover{background-color: rgb(121,167,170, 0.9);}
button.btn{cursor: pointer;}
button.btn span{margin-bottom: -4px;}
/*BUTTONS*/

.ul-actions li{margin: 0 4px;}

/*COLORS*/
.color-FFFFFF,.color-link-FFFFFF{color: #FFFFFF !important;}
.color-000000,.color-link-000000{color: #000000 !important;}
.color-848484{color: #848484 !important;}
.color-CF1578{color: #CF1578 !important;}
.color-6C0E8B{color: #6C0E8B !important;}
.color-762097{color: #762097 !important;}
.color-inherit{color: inherit !important;}
/*COLORS*/

.bg-FFFFFF{background-color: #FFFFFF !important;}
.bg-E5E0DD{background-color: #E5E0DD !important;}
.bg-6C0E8B{background-color: #6C0E8B !important;}
.bg-762097{background-color: #762097 !important;}
.bg-C00076{background-color: #C00076 !important;}
.bg-D585AE{background-color: #D585AE !important;}
.bg-DB9CBD{background-color: #DB9CBD !important;}
.bg-CF1578{background-color: #CF1578 !important;}

.bg-D585AE{background-color: #D585AE !important;}
.bg-CE6D9E{background-color: #CE6D9E !important;}
.bg-C95390{background-color: #C95390 !important;}
.bg-CE6D9E{background-color: #CE6D9E !important;}


.fw-300{font-weight: 300; font-family: 'codec_warmlight';}
.fw-400{font-weight: 400; font-family: 'codec_warmregular';}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700; font-family: 'codec_warm_boldbold';}
.fw-800{font-weight: 800; font-family: 'codec_warmextra_bold';}
.fw-900{font-weight: 900;}

.fw-800.font-italic{/*font-style: italic !important;*/font-family: 'codec_warmextra_bold_italic' !important;}
.fw-300.font-italic{/*font-style: italic !important;*/font-family: 'codec_warmlight_italic'  !important;}
.text-underline{text-decoration: underline !important;}

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

/*Display property*/
.d-block{display: block;}
.d-inline-block{display: inline-block;}
.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;}

.flex-shrink-0{flex-shrink: 0;}
/*Display property*/

.position-relative{position: relative;}
.position-absolute{position: absolute;}

.z-index-3{z-index: 3 !important;}

.mh-100{min-height: 100vh;}

.mw-720{max-width: 720px;}
.mw-572{max-width: 575px;}

.m-auto{margin: 0 auto;}
.mb-4{margin-bottom: 4px !important;}
.mb-8{margin-bottom: 8px !important;}
.mb-12{margin-bottom: 12px !important;}
.mb-18{margin-bottom: 18px !important;}
.mb-22{margin-bottom: 22px !important;}
.mb-24{margin-bottom: 24px !important;}
.mb-28{margin-bottom: 28px !important;}
.mb-36{margin-bottom: 36px !important;}
.mb-116{margin-bottom: 116px !important;}

.ml-12{margin-left: 12px;}
.ml-48{margin-left: 48px;}

.mr-12{margin-right: 12px;}
.mr-24{margin-right: 24px;}

.mt--18{margin-top: -18px;}
.mt-28{margin-top: 28px;}

.p-12{padding: 12px;}
.p-12-12{padding: 12px 12px 2px 12px;}

.pt-0{padding-top: 0 !important;}
.pb-48{padding-bottom: 48px !important;}

.border-2{border: solid 2px transparent;}
.border-color-CF1578{border-color: #CF1578;}

.overflow-hidden{overflow: hidden;}

.rounded-12{border-radius: 12px;}

.bullet{width: 8px; height: 8px; border-radius: 50%; background-color: #6B0E8B; margin-right: 8px;}

.section{position: relative; width: 100%; padding: 68px 0;}
.container{max-width: 1024px; padding: 0 16px; margin: 0 auto;}

.section-text{max-width: 720px; margin: 0 auto;}
.section-text p{margin-bottom: 22px;}
.section-text p:last-child{margin-bottom: 0;}

.btn-scroll{display: flex ; flex-direction: column; align-items: center; font-weight: 700; line-height: 18px; font-size: 14px;}

.pack-elline{width: 293px; height: auto; position: relative; z-index: 2;}
.pack-wrapper:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 130%; height: 110%; background-image: url("../images/Lines.svg"); background-position: center center; background-size: cover; background-repeat: no-repeat;}
.sello{position: absolute; right: 50%; transform: translate(245%, -76%);}
.main-logo{width: auto; height: 32px;}
.main-logo-medico{margin: 0 auto;margin-top: 23px;}

.page-intro .main-logo{height: 38.52px; margin-bottom: 62px;}

.main-header{position: fixed; top: 0; left: 0; width: 100%; z-index: 999;}
.header-content .main-logo-container{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.text-logo{height: 10px; margin: 0 auto; margin-top: 12px;}
.bg-header{width: 100%; max-width: 375px; margin: 0 auto;}

.main-hero{display: flex ; flex-direction: column; align-items: center; justify-content: center; padding-top: 110px; z-index: 2; /*min-height: 100vh;*/}
.main-hero-image{max-width: 1024px; margin: 0 auto;}

.main-hero-usuaria{padding-bottom: 0; z-index: 2;}

.img-graphics-1-container{/*margin-bottom: -18%;*/ z-index: 1; position: relative; background: linear-gradient(to top, #FFFFFF 38%, #E5E0DD 38%);}
.img-graphics-1{max-width: inherit; width: 153%; transform: scaleX(-1) translateX(16%);}

.img-graphics-3-container{background: linear-gradient(to top, #FFFFFF 38%, #FFFFFF 38%); margin-top: -15%;}

.img-graphics-1-container.img-graphics-2-container .img-graphics-1{transform: scaleX(1) translateX(-19%);}

.img-hero-usuaria{
	-webkit-mask-image: linear-gradient(to right, black 63%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;

  mask-image: linear-gradient(to right, black 63%, transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
	max-width: inherit;
    width: 170%;
    margin: 0 auto;
    transform: translateX(-20%);
}

.grid-2{display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 575px; margin: 0 auto;}

.icon-xl{width: 62px; height: 62px; border-radius: 50%; background: #C00076; background: linear-gradient(49deg, rgba(192, 0, 118, 1) 0%, rgba(235, 202, 220, 1) 100%); margin: 0 auto; margin-bottom: 12px;}

.grid-4-auto{display: grid; grid-template-columns: auto auto auto auto; gap: 14px; max-width: 575px; margin: 0 auto;}
.icon-xl.icon-sm{width: 48px; height: 48px;}

.faq-item{border-bottom: 1px solid #CF1678; overflow: hidden; margin-bottom: 12px;}
.faq-question{cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;}
.faq-symbol{font-size: 20px; transition: transform 0.3s; color: #CF1678; font-weight: 400;}
.faq-answer{display: none; padding-bottom: 22px;}
.faq-answer p{font-size: 16px; line-height: 18px; color: #4A4A4A; letter-spacing: -0.45px; margin-bottom: 12px;}
.faq-answer p:last-child{margin-bottom: 0;}
.faq-item.active .faq-answer{display: block;}

.circle{width: 148px; height: 148px; border-radius: 50%; position: relative;}
.circle-after:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110%; height: 110%; background-image: url("../images/bg-circle.svg"); background-position: center center; background-size: cover; background-repeat: no-repeat;}

.caracteristicas figure{width: 52px; margin-right: 8px;}

.main-footer{position: relative; width: 100%; background-color: #CF1678; padding-top: 36px;}
.nav-redes{margin-bottom: 18px;}
.nav-redes li{margin: 0 6px;}
.nav-redes li svg{width: auto; height: 16px;}

.ul-points{margin-left: 42px;}
.ul-points li{margin: 12px 0; position: relative;}
.ul-points li span{ display: block}
.ul-points li span:before{content:""; width: 6px; height: 6px; border-radius: 50%; background-color: #C00076; margin: -10px; display: block;}
.ul-points li span:after{content:""; width: 8px; height: 1px; background-color: #C00076;  display: block; position: absolute; top: 3px; left: -18px;}
.ul-points li:before{content:""; width: 1px; height: 19px; background-color: #C00076; position: absolute; left: -18px; top: 4px;}
.ul-points li:last-child:before{display: none;}
.ul-points li:nth-child(2) span:after{width: 21px; left: -27px;}

.icon-sm.after-arrow{margin-bottom: 32px;}
.icon-sm.after-arrow:after{content: ""; width: 22px; height: 6px; display: block; background-image: url("../images/arrow.svg"); background-position: center; background-size: cover; background-repeat: no-repeat; transform: rotate(90deg); margin: 0 auto; margin-top: 4px; position: relative; z-index: 3;}

.after-arrow2:after{content: ""; width: 32px; height: 6px; display: block; background-image: url(../images/arrow.svg); background-position: center; background-size: cover; background-repeat: no-repeat; margin: 0 auto; margin-top: 4px; position: absolute; z-index: 3; top: 40%; transform: translateY(-50%); right: -23px;}

.before-arrow2{position: relative; margin-left: 18px; padding-left: 22px;}
.before-arrow2:before{content: ""; width: 32px; height: 6px; display: block; background-image: url(../images/arrow.svg); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); left: -18px;}

.before-arrow2:after{content: ""; width: 1px; height: calc(100% + 18px); background-color: #6C0E8B; display: block; position: absolute; left: -18px; top: 50%;}
.before-arrow2:last-child:after{top: inherit; bottom: calc(50% + 1px);}

.icon-plus{width: 22px; height: 22px; display: block; background-color: #762097; border-radius: 50%; margin: 0 8px; color: #FFFFFF; font-weight: 800; line-height: 30px;}

footer .fonomujer { width: 180px; }
footer .icon-whatsapp {
    width: 38px;
    margin-left: 24px;
}
footer .logo-noteolvides{width: 68px; margin-top: 15px;}
.logo-urufarma{width: 170px; margin: 36px 0;}

.blister-elline{filter:  drop-shadow(5px 4px 4px rgb(0,0,0, 0.6));}

.page-registro{display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; flex-direction: column;}
.page-registro .main-logo { height: 46px; margin-bottom: 0; margin-top: -4px; margin: 0 auto;}
.form-container{max-width: 480px; width: 100%; display: flex;}
.form-container .form{display: flex; flex-direction: column; gap: 0; position: relative; z-index: 1; width: 100%;}
.form-container .form .form-group{margin-bottom: 18px; display: flex; flex-direction: column;}
.form-container .form label{margin-bottom: 0; text-align: left; color: #464646; margin-left: 12px;}
.form-container .form input{padding: 14px; border: 1px solid #FFFFFF; border-radius: 8px; background-color: #ffffff; font-size: 16px; width: 100%;}
.form-container .form input:focus { outline: 2px solid #6C0E8B; outline-offset: 1px; }
.form-container .form button{cursor: pointer; max-width: 100%; flex-grow: 1; height: 48px;}
.msj-confirm{padding: 28px 28px 16px 28px;}

.form-container .form:after {
    content: "";
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 110%;
    background-image: url(../images/Lines.svg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat; z-index: -1;
}

@media (min-width: 768px){
	.section{padding: 120px 0 86px 0;}
	
	.pb-xl-0{padding-bottom: 0 !important;}
	
	.main-logo{height: 42px;}
	.bg-header{max-width: 640px;}
	
	.circle{width: 168px; height: 168px;}
	.sello{transform: translate(278%, -79%);}
	
	.main-hero-usuaria,.main-hero-medico{padding-top: 152px;}
	.main-hero-image{max-width: 1200px;}
	
	.h1{font-size: 48px; line-height: 52px;}
	.h2{font-size: 32px; line-height: 36px;}
	.h3{font-size: 22px; line-height: 24px;}
	p{font-size: 18px; line-height: 22px;}
	
	.img-hero-usuaria{transform:  translateX(0px); width: 100%; max-width: inherit;}
	
	.img-graphics-1-container{display: none;}
	
	.pack-elline{width: 376px;}
	.blister-elline{width: 320px;}
}

@media (max-width: 767px){
	.main-logo-medico{margin-top: 8px;}
	.text-logo{height: 7px; margin-top: 6px;}
	.form-container .form:after{width: 100%;}
	#presentacion{padding-bottom: 0 !important;}
	
	.mb-767--60{margin-bottom: -60px !important;}
}

@media (max-width: 536px){
	
	.mb-sm-62{margin-bottom: 62px !important;}
	
	footer .fonomujer { width: 134px; }
	footer .icon-whatsapp { width: 32px; margin-left: 22px; }
	.logo-urufarma { width: 128px; margin: 18px 0; }
}



#presentacion{overflow: hidden;}

/*LOADING*/
#preloader{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #FFFFFF; z-index: 9999;}
#status{display: inline-block; position: relative; width: 80px; height: 80px; top: 50%; transform: translateY(-50%);}
.lds-ripple{display: inline-block; position: relative; width: 80px; height: 80px;}
.lds-ripple div{position: absolute; border: 4px solid #CF1578; 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*/
/* Botón hamburguesa cuadrado */
.menu-toggle {
  position: fixed;
  top: 10px;
  right: 8px;
  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: #6C0E8B;
  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: #6C0E8B;}
.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(255,255,255, 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(108,14,139, 0.2); padding-bottom: 0;
}
.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: #6C0E8B;
  transition: color 0.3s;
}

.mobile-menu a:hover {
  color: rgb(108,14,139, 0.8);
}