@font-face {
font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Regular'), url('fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
font-family: 'Myriad Pro Condensed';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Condensed'), url('fonts/MYRIADPRO-COND.woff') format('woff');
}

@font-face {
font-family: 'Myriad Pro Condensed Italic';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Condensed Italic'), url('fonts/MYRIADPRO-CONDIT.woff') format('woff');
}

@font-face {
font-family: 'Myriad Pro Light';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Light'), url('fonts/MyriadPro-Light.woff') format('woff');
}

@font-face {
font-family: 'Myriad Pro Semibold';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Semibold'), url('fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}

@font-face {
font-family: 'Myriad Pro Semibold Italic';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Semibold Italic'), url('fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}

@font-face {
font-family: 'Myriad Pro Bold Condensed';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Bold Condensed'), url('fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}

@font-face {
font-family: 'Myriad Pro Bold';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Bold'), url('fonts/MYRIADPRO-BOLD.woff') format('woff');
}

@font-face {
font-family: 'Myriad Pro Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Bold Italic'), url('fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}

@font-face {
font-family: 'Myriad Pro Bold Condensed Italic';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Bold Condensed Italic'), url('fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

@font-face {
    font-family: 'Barlow-Black';
    src: url(fonts/Barlow-Black.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-BlackItalic';
    src: url(fonts/Barlow-BlackItalic.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-Bold';
    src: url(fonts/Barlow-Bold.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-BoldItalic';
    src: url(fonts/Barlow-BoldItalic.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-ExtraBold';
    src: url(fonts/Barlow-ExtraBold.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-ExtraBoldItalic';
    src: url(fonts/Barlow-ExtraBoldItalic.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-ExtraLight';
    src: url(fonts/Barlow-ExtraLight.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-ExtraLightItalic';
    src: url(fonts/Barlow-ExtraLightItalic.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-Italic';
    src: url(fonts/Barlow-Italic.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-Light';
    src: url(fonts/Barlow-Light.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-LightItalic';
    src: url(fonts/Barlow-LightItalic.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-Medium';
    src: url(fonts/Barlow-Medium.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-MediumItalic';
    src: url(fonts/Barlow-MediumItalic.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-Regular';
    src: url(fonts/Barlow-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-SemiBold';
    src: url(fonts/Barlow-SemiBold.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-SemiBoldItalic';
    src: url(fonts/Barlow-SemiBoldItalic.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-Thin';
    src: url(fonts/Barlow-Thin.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-ThinItalic';
    src: url(fonts/Barlow-ThinItalic.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-SemiBold';
    src: url(fonts/Poppins-SemiBold.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-Regular';
    src: url(fonts/Poppins-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-Bold';
    src: url(fonts/Poppins-Bold.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-Black';
    src: url(fonts/Poppins-Black.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-BlackItalic';
    src: url(fonts/Poppins-BlackItalic.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.overlay-image {
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

.top-bar{
    color: white;
    font-family: 'Barlow-Regular';
    font-size: 23px;

}
.dolor-text{
    color:white;
    font-family: 'Myriad Pro SemiBold';
    font-size: 30px;
}

.titulo{
    color:white;
    font-family: 'Poppins-Black';
    font-size: 15px;
}

.titulo-sm{
    color:white;
    font-family: 'Poppins-Black';
    font-size: 18px;
}

.titulo-copyrigth{
    color:white;
    font-family: 'Poppins-SemiBold';
    font-size: 40px;
}

/*************************************************************************************
/*Nueva Sección
/*************************************************************************************/
@media (max-width: 912px) { /* adjust the breakpoint as needed */
 .titulo-copyrigth {
	font-size: 30px;
	font-family: 'Poppins-SemiBold';
	text-align: center
  }
}

@media (max-width: 820px) { /* adjust the breakpoint as needed */
 .titulo-copyrigth {
	font-size: 30px;
	font-family: 'Poppins-SemiBold';
	text-align: center
  }
}

@media (max-width: 480px) { /* adjust the breakpoint as needed */
 .titulo-copyrigth {
	font-size: 30px;
	font-family: 'Poppins-SemiBold';
	text-align: center
  }
}
/*************************************************************************************/

.contacto{
    color:mediumblue;
    font-family: 'Poppins-Regular';
    font-size: 15px;
    margin-top: -5%;
}


.contacto-sm{
    color:mediumblue;
    font-family: 'Poppins-Regular';
    font-size: 17px;
    margin-top: -5%;
}

.texto2{
    color:darkblue;
    font-family: 'Poppins-Regular';
    font-size: 40px;
    margin-top: -5%;
}

.custom-dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 195px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    text-align: center;
    right: 0;
    top:0;
  }

  #benefit:hover{
    color: white;
  }

.beneficio1:hover,
.beneficio2:hover {
    background-color: #90CCFC;
    /* Added: */
    -webkit-user-select: none; /* Chrome, Safari, Edge */
    -moz-user-select: none; /* Firefox */
    -khtml-user-select: none; /* Konqueror */
    user-select: none; /* Standard syntax */
}

.selected { /* Styles for the selected benefit item */
    background-color: #90CCFC; /* Default background color for selected item */
}


.cel-dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(153,204,236,0.9);
    min-width: 170px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    text-align: center;
    left: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-radius: 10%;
}

  .custom-dropdown:hover .custom-dropdown-content {
    display: block;
  }
  .custom-dropdown:hover {
    background-color: rgba(47,146,208,255); 
  }

  .custom-dropdown{
    position: relative;
    text-align: center;
    width: 100%;
    font-family: 'Barlow-Regular';
  }

  .cel-dropdown:hover .cel-dropdown-content {
    display: block;
  }

  .cel-dropdown{
    position: relative;
    text-align: center;
    width: 100%;
    font-family: 'Myriad Pro SemiBold';
  }

  .fixed-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
 }
 

  .custom-dropdown-pains {
    text-align: center;
    display: none;
    position: absolute;
    background-color: rgba(153,204,236,0.9);
    width: 80%;
    font-size: 20px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
    margin-top: 25px;
    margin-left: 20px;
    border-radius: 10%;
  }

  .dropdown-pain:hover .custom-dropdown-pains {
    display: block;
  }
  
  .dropdown-pain{
    position: relative;
  }
 
.separador {
    border-left: 2px solid rgb(0, 162, 255); 
    padding-left: 10px; 
}

button{
    background-color: transparent;
    border-color: transparent;
}

.celular{
    background-color: rgb(250, 193, 5);
    /* background-color: rgb(39, 39, 161); */
    text-align: center;
}

.celular:hover {
    /* background-color: yellow;*/
    /* background-color: rgb(39, 39, 161); */
    background-color: rgba(47,146,208,255)
}

.show {
    display: block;
}

.presentacion{
    font-size: 23px;
}

.capsulas{
    font-size: 22px;
    font-family: 'Myriad Pro SemiBold';
}

.HORAS{
    font-size: 30px;
}

.textension{
    font-size: 25px;
}

/**************************************************************************/
/* Nueva Sección
/**************************************************************************/
@media (max-width: 912px) { /* adjust the breakpoint as needed */
 .textension {
    font-size: 19px;
  }
}

@media (max-width: 820px) { /* adjust the breakpoint as needed */
 .textension {
    font-size: 19px;
  }
}

@media (max-width: 480px) { /* adjust the breakpoint as needed */
 .textension {
    font-size: 19px;
  }
}
/**************************************************************************/

.topic{
    font-size: 35px; 
}

.small-image {
    width: 60%; /* Ajusta el ancho al 50% del contenedor padre */
    height: auto; /* Ajusta la altura automáticamente para mantener la relación de aspecto */
}

.image-container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    text-align: center;
    height: 80%; /* Asegúrate de que el contenedor tenga una altura suficiente */
    width: 80%;
}


/* Explicacion2 styles */
.explicacion2-text {
    position: absolute;
    padding-left: 3%;
    margin-top: 10%;
    padding-right: 4%;
}

.explicacion2-text-sm {
    position: absolute;
    padding-top: 10%;
    margin-left: 2%;
}

/* Dolores styles */
.dolores-text {
    position: absolute;
    padding-left: 40%;
    margin-top: -1%;
}

.dolores-text-sm {
    color: white;
    position: absolute;
    font-size: 14px;
    font-family: Poppins-SemiBold;
}

/* Explicacion3 styles */
.explicacion3-text {
    position: absolute;
    padding-left: 3%;
    margin-top: 10%;
    padding-right: 4%;
}

.explicacion3-text-sm {
    position: absolute;
    padding-top: 10%;
    margin-left: 2%;
}

/* Text styles */
.capsulagel {
    color: darkblue;
    font-family: 'Poppins-SemiBold';
}

.descripciongel {
    color: darkblue;
    font-family: 'Poppins-Regular';
}

/**************************************************************************/
/* Nueva Sección
/**************************************************************************/

@media (max-width: 912px) { /* adjust the breakpoint as needed */
 .descripciongel {
	margin-top: 14%;
    font-size: 24px;
  }
}

/* adjust styles for smaller screens */
@media (max-width: 820px) { /* adjust the breakpoint as needed */
 .descripciongel {
	margin-top: 14%;
    font-size: 24px;
  }
}

@media (max-width: 480px) { /* adjust the breakpoint as needed */
 .descripciongel {
	margin-top: 14%;
    font-size: 24px;
  }
}
/**************************************************************************/

.textdolores {
    margin-top: -10%;
    margin-left: 5%;
    font-family: 'Poppins-SemiBold';
    text-align: center;
    font-size: 20px;
    width: 70%;
    padding: 10px;
}


.textdolores-sm {
    margin-top: -10%;
    margin-left: 10%;
    font-family: 'Poppins-SemiBold';
    text-align: center;
    font-size: 15px;
}


/**************************************************************************/
/* Nueva Sección
/**************************************************************************/

@media (max-width: 912px) { /* adjust the breakpoint as needed */
 .textdolores {
    color: white;
    font-size: 14px;
    font-family: Poppins-SemiBold;
	width: 100%;
	text-align: center;
	margin-top: 0.2%
  }
}
/* adjust styles for smaller screens */
@media (max-width: 820px) { /* adjust the breakpoint as needed */
 .textdolores {
    color: white;
    font-size: 14px;
    font-family: Poppins-SemiBold;
	width: 100%;
	text-align: center;
	margin-top: 0.2%
  }
}

@media (max-width: 480px) { /* adjust the breakpoint as needed */
 .textdolores {
    color: white;
    font-size: 14px;
    font-family: Poppins-SemiBold;
	width: 100%;
	text-align: center;
	margin-top: 0.2%
  }
}
/**************************************************************************/

/*  latest updates */

.top-nav {
    background-color: #fac105;
    height: 125px;
    border-bottom: 2px solid rgba(47,146,208,255);
}

.banner {
    margin-top: 125px;
}

.logo {
    background: transparent url("../img/logo-portada.png") center left no-repeat;
    background-size: contain;
}

.logo-title {
    width: 325px;
    height: 125px;
    overflow: hidden;
}

.logo-title-span {
    display: block;
    padding-top: 500px;
}

.mobile-dropdown-wrapper {
    position: absolute;
    top: 100%;
    padding: 0!important;
    left: 0;
    right: 0;
}

.punto-de-venta-wrapper {
    border-bottom: 1px solid #fff;
}

.punto-de-venta-wrapper:last-of-type {
    border-bottom: none
}


@media (min-width: 992px) {
    .custom-dropdown-content {
        display: none;
        position: absolute;
        background-color: #ffffff;
        min-width: 195px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        text-align: center;
        left:0;
        top:34px;
      }

  }

@media (min-width: 992px) and (max-width: 1180.98px) {
    .formula-text {
        margin-left: 57%;
        margin-top: 5%;
    }
    .topica-text {
        margin-top: 66%;
        padding-left: 5%;
    }
}

@media (min-width: 1181px) and (max-width: 1199.98px) {
    .formula-text {
        margin-left: 57%;
        margin-top: 5%;
    }
    .topica-text {
        margin-top: 66%;
        padding-left: 5%;
    }
}

@media (min-width: 1200px){
    .formula-text {
        margin-left: 68%;
        margin-top: 5%;
    }
    .topica-text {
        margin-top: 66%;
        padding-left: 5%;
    }

    .top-nav {
        height: 125px;
    }

    .banner {
        margin-top: 125px;
    }
}


/**************************************************************************/
/* Nueva Sección
/**************************************************************************/

@media (max-width: 912px) { /* adjust the breakpoint as needed */
 .formula-text {
	margin-left: 57%;
	margin-top: 3%;
	font-size: 12px;
  }
}
/* adjust styles for smaller screens */
@media (max-width: 820px) { /* adjust the breakpoint as needed */
 .formula-text {
	margin-left: 57%;
	margin-top: 3%;
	font-size: 12px;
  }
}

@media (max-width: 480px) { /* adjust the breakpoint as needed */
 .formula-text {
	margin-left: 57%;
	margin-top: 3%;
	font-size: 12px;
  }
}

@media (max-width: 912px) { /* adjust the breakpoint as needed */
 .topica-text3 {
	margin-left: 1%;
	margin-top: 67%;
	font-size: 12px;
  }
}

@media (max-width: 820px) { /* adjust the breakpoint as needed */
 .topica-text3 {
	margin-left: 1%;
	margin-top: 67%;
	font-size: 12px;
  }
}

@media (max-width: 480px) { /* adjust the breakpoint as needed */
 .topica-text3 {
	margin-left: 1%;
	margin-top: 67%;
	font-size: 12px;
  }
}
/**************************************************************************/

/*************************************************************************************
/*Nueva Sección
/*************************************************************************************/
@media (max-width: 912px) { /* adjust the breakpoint as needed */
 .adjustTablet {
	margin-top: 15%;
  }
}

@media (max-width: 820px) { /* adjust the breakpoint as needed */
 .adjustTablet {
	margin-top: 15%;
  }
}

@media (max-width: 480px) { /* adjust the breakpoint as needed */
 .adjustTablet {
	margin-bottom: 15%;
  }
}
/*************************************************************************************/