@charset "utf-8";
#productos
{
	font-family: "Instrument Sans", sans-serif;
}
#productos h1
{
	font-size:36px;
	font-weight: 700;
	color:#000000;
	line-height:auto;
}
/* =========================================================
   rotador de palabritas
========================================================= */
.textobase_rotadordepalabritas
{
	color: #727272;
	font-family: "Instrument Sans";
	font-size: 24px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}
.wrap
{
  /*padding: 40px 0;
  margin: 150px 0;*/
}
#sentence
{
  overflow: hidden;
  /*padding: 20px;*/
}
#sentence > li, #sentence > ul { display: inline; }
#textSlider
{
  overflow: visible !important;
  text-align: left;
  display: inline;
  position: relative;
  height: 16px;
}
.adj
{
  white-space: nowrap;
  list-style: none;
  position: absolute;
  line-height: .3em; 
  color: #E31837;
  font-family: "Instrument Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);  
  opacity: 0;
  -webkit-transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.slide-in
{
  -webkit-transform: translateY(4px);
  -ms-transform: translateY(4px);
  transform: translateY(4px);
  opacity: 1;
  -webkit-transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.slide-out
{
  -webkit-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  transform: translateY(-50px);
  opacity: 0;
  -webkit-transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
@media (max-width: 991.98px)
{
    #sentence
	{
        display: flex;
        flex-direction: column; /* fuerza que sus hijos se apilen en vertical */
        align-items: flex-start; /* opcional: para alinear a la izquierda */
    }
    #sentence > li
	{
        display: block; /* aseguramos que el li ocupe toda la línea */
        margin-bottom: 0.3rem; /* separa el texto de la lista de abajo */
    }
    #textSlider
	{
        display: block; /* en lugar de inline */
        position: relative; /* importante para mantener el slide animado */
        height: 18px; /* deja que se adapte al nuevo flujo */
		margin-top:6px;
    }
	.adj
	{
	  -webkit-transform: translateY(22px);
	  -ms-transform: translateY(22px);
	  transform: translateY(22px); 
	}
	.slide-in
	{
	  -webkit-transform: translateY(0px);
	  -ms-transform: translateY(0px);
	  transform: translateY(0px);
	}
	.slide-out
	{
	  -webkit-transform: translateY(-22px);
	  -ms-transform: translateY(-22px);
	  transform: translateY(-22px);
	}
}
/* =========================================================
   bloke que estas buscando
========================================================= */
.queestasbuscando
{
	display: flex;
    justify-content: flex-end;
}
.contenidoqueestasbuscando{
  text-align: left;
}
.contenidoqueestasbuscando p
{
	color: #000;
	font-family: "Instrument Sans";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height:12px;
}
.contenidoqueestasbuscando a
{
	color: #098AE6;	
	font-family: "Instrument Sans";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 12px;
	text-decoration-line: underline;
	text-decoration-style: solid;
	margin-top:-10px;
}
.contenidoqueestasbuscando a:hover
{
	color: #E31837;
}
@media (max-width: 991.98px)
{
    .queestasbuscando
	{
		display: flex;
		justify-content: flex-start;
	}
}
/* =========================================================
   BREADSCRUMB
========================================================= */
.breadcrumb-item+.breadcrumb-item
{
    padding-left: 0.35rem!important;
}
.breadcrumb-item+.breadcrumb-item::before
{
    padding-right: 0.30rem!important;
}
ol.breadcrumb
{
	font-family: "Instrument Sans";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin-bottom:0px!important;
}
ol.breadcrumb a
{
	text-decoration:none;
	color:#000000;
	transition: all 0.75s ease;
}
ol.breadcrumb a:hover
{
	text-decoration:none;
	color:#E31837;
}
.breadcrumb
{
	margin-bottom:0px!important;
}
/* =========================================================
   CARROUSEL LINEAS TERAPEUTICAS
========================================================= */
.roundbgimg
{
	border-radius:50%;
}
.icon-carousel
{
  gap: 24px;
  min-width: 64px;
}
.icon-track {
  display: flex;
  gap: 24px;
  overflow: hidden;   
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 9px 0;
}
@media (min-width: 1400px)
{
    .icon-carousel
	{
	  gap: 36px;
	}
	.icon-track
	{
	  gap: 36px;
	}
}
.icon-item {
  width: 64px;              /* ancho fijo del ícono */
  flex: 0 0 auto;           /* el gap se mide entre estos 64px */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative; 
  padding-bottom: 23px;      /* reserva espacio para el label */
  user-select: none;
  text-decoration: none;
  opacity: 0.95;
  transition: opacity 1s ease, filter 1s ease;
  cursor:pointer;
}
.icon-item:hover,
.icon-item.active {
  opacity: 1;
  filter: brightness(0.90);
}
.icon-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  transition: filter 1s ease;
}

/* Label absoluto: puede exceder 64px sin afectar el gap */
.icon-label {
  position: absolute;        /* en vez de relative */
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-block;
  white-space: nowrap;       /* no wrap */
  padding-bottom: 3px;       /* espacio para la línea */
  color: #727272;
  text-align: center;
  font-family: "Instrument Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  z-index: 1;
}
/* >>> Subrayado SOLO del label <<< */
.icon-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;                 
  width: 100%;               /* EXACTO ancho del texto */
  height: 1px;
  background-color: #727272;
  opacity: 0;                /* aparece desde alfa 0 */
  transition: opacity 1s ease;
}
/* Mostrar línea cuando hay hover/selección en el item */
.icon-item:hover .icon-label::after,
.icon-item.active .icon-label::after,
.icon-item:focus-visible .icon-label::after {
  opacity: 1;
}
/* Flechas */
.ic-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  display: none; /* se muestran con JS si hay overflow */
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  box-shadow: none;
  z-index: 2;
}

.ic-left  { left:  6px; }
.ic-right { right: 6px; }

.ic { display: block; }

/* Scrollbar oculto opcional */
.icon-track.hide-scrollbar { overflow-x: auto; }
.icon-track.hide-scrollbar::-webkit-scrollbar { display: none; }
.icon-track.hide-scrollbar { scrollbar-width: none; }

@media (max-width: 575.98px)
{
  .icon-carousel {
    position: relative;
    width: 100vw; /* ocupa todo el viewport */
    max-width: 100vw;
    margin-left: calc(50% - 50vw); /* saca al carrusel del container */
    margin-right: calc(50% - 50vw);
    padding-left: 0px; /* 1er ítem a 24px del borde */
    padding-right: 0px; /* respiro al final */
  }
  /* Fades de 10px sobre los bordes del viewport */
  .icon-carousel::before,
  .icon-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    pointer-events: none;
    z-index: 1; /* debajo de las flechas (z:2) */
  }
  .icon-carousel::before {
    left: 0;
    background: linear-gradient(to right, #f5f2f2 0%, rgba(245,242,242,0) 100%);
  }
  .icon-carousel::after {
    right: 0;
    background: linear-gradient(to left, #f5f2f2 0%, rgba(245,242,242,0) 100%);
  }
   .icon-track > *:first-child { margin-left: 24px; }
  .icon-track > *:last-child  { margin-right: 24px; }
  .ic-left  { left:  -4px; }
  .ic-right { right: -4px; }
}
/* =========================================================
   COLUMNAS SECCION Y MENU SIDEBAR
========================================================= */
@media (min-width: 992px)
{
  .col-izquierda
  {
	flex: 0 0 240px; /* ancho fijo */
	max-width: 240px;
	
	padding: 0px 24px 12px 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	border-right: 1px solid #ABABAB;
  }
  .col-derecha
  {
	flex: 1; /* ocupa el resto del ancho */
	padding-left:42px;
  }
}
@media (max-width: 991.98px)
{
  .col-derecha
  {
	width: 100%;
	padding-left:0px;
	padding-top:14px;
  }
  .col-izquierda
  {
	width: 100%;
	text-align:right;
  }
}
.masfiltros
{
	color: #000;
	font-family: "Instrument Sans";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	padding-right:6px;
	border:none;
	outline:none;
	background-color:transparent;
	padding: 6px;
	align-items: center;
	gap: 12px;
	margin-right:0px;
	right:0px;
	float:right;
}
#sidebarmenu .btn-toggle
{
  display:flex; 
  align-items:center;
  justify-content:space-between;
  width:100%;
  text-align:left;
  padding-left:12px;
  padding-top:10px;
  padding-bottom:12px;
  padding-right:0px;
  color: #000;
  font-family: "Instrument Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
#sidebarmenu .btn-toggle::before
{
  content:none !important;
}
#sidebarmenu .btn-toggle::after
{
  content:"";
  width:16px;
  height:16px;
  margin-left:.5rem;
  flex:0 0 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.516 11.5494C13.7693 11.8167 14.1908 11.828 14.4581 11.5748C14.7254 11.3216 14.7367 10.9001 14.4835 10.6328L8.72568 4.55465C8.33126 4.13838 7.66828 4.13838 7.27386 4.55465L1.51605 10.6328L1.47113 10.6842C1.26471 10.9517 1.29088 11.3374 1.54144 11.5748C1.79204 11.8122 2.17868 11.8176 2.43467 11.597L2.4835 11.5494L7.99977 5.72783L13.516 11.5494Z' fill='%23727272'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .25s ease;
  transform: rotate(180deg);     /* cerrado = flecha hacia abajo */
}
/* Modo oscuro: la misma flecha en claro */
[data-bs-theme="dark"] #sidebarmenu .btn-toggle::after
{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.516 11.5494C13.7693 11.8167 14.1908 11.828 14.4581 11.5748C14.7254 11.3216 14.7367 10.9001 14.4835 10.6328L8.72568 4.55465C8.33126 4.13838 7.66828 4.13838 7.27386 4.55465L1.51605 10.6328L1.47113 10.6842C1.26471 10.9517 1.29088 11.3374 1.54144 11.5748C1.79204 11.8122 2.17868 11.8176 2.43467 11.597L2.4835 11.5494L7.99977 5.72783L13.516 11.5494Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
#sidebarmenu .btn-toggle[aria-expanded="true"]::after
{
  transform: rotate(0deg);
}
#sidebarmenu .btn-toggle-nav li
{
	margin-bottom:8px;
}
#sidebarmenu .btn-toggle-nav
{
	margin-bottom:23px;
}
#sidebarmenu .btn-toggle-nav a
{
  display:flex;
  width:100%;
  padding:0 0 0 12px;
  margin-left:0;
  color: #727272!important;
  font-family: "Instrument Sans";
  font-size: 14px!important;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: all 0.5s ease;
  text-decoration:none;
}
#sidebarmenu .btn-toggle-nav a:hover, #sidebarmenu .btn-toggle-nav a.active
{
	color: #727272;
	font-family: "Instrument Sans";
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-decoration:underline;	
}
#filtersOffcanvas
{
  width: 255px;
  border:none;
}
@media (min-width: 992px)
{
    #filtersOffcanvas
	{
		display:none;
	}
}
#filtersOffcanvas .btn-close.productoscerrar
{
	width: 24px;
    height: 24px;
    display: inline-block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.9998 13.4008L7.0998 18.3008C6.91647 18.4841 6.68314 18.5758 6.3998 18.5758C6.11647 18.5758 5.88314 18.4841 5.6998 18.3008C5.51647 18.1174 5.4248 17.8841 5.4248 17.6008C5.4248 17.3174 5.51647 17.0841 5.6998 16.9008L10.5998 12.0008L5.6998 7.10078C5.51647 6.91745 5.4248 6.68411 5.4248 6.40078C5.4248 6.11745 5.51647 5.88411 5.6998 5.70078C5.88314 5.51745 6.11647 5.42578 6.3998 5.42578C6.68314 5.42578 6.91647 5.51745 7.0998 5.70078L11.9998 10.6008L16.8998 5.70078C17.0831 5.51745 17.3165 5.42578 17.5998 5.42578C17.8831 5.42578 18.1165 5.51745 18.2998 5.70078C18.4831 5.88411 18.5748 6.11745 18.5748 6.40078C18.5748 6.68411 18.4831 6.91745 18.2998 7.10078L13.3998 12.0008L18.2998 16.9008C18.4831 17.0841 18.5748 17.3174 18.5748 17.6008C18.5748 17.8841 18.4831 18.1174 18.2998 18.3008C18.1165 18.4841 17.8831 18.5758 17.5998 18.5758C17.3165 18.5758 17.0831 18.4841 16.8998 18.3008L11.9998 13.4008Z' fill='%23000000'/%3E%3C/svg%3E") no-repeat center;
    background-size:auto;
	opacity:1!important;
	transition: all 0.5s ease;
}
#filtersOffcanvas .btn-close.productoscerrar:hover
{
	opacity:0.7!important;
}
#productos .offcanvas-backdrop
{ 
  background-color: #000 !important;
}
#productos .offcanvas-backdrop.show
{
  opacity: 0.4 !important;
}
@media (max-width: 991.8px)
{
    #sidebarmenu .btn-toggle
	{
	  padding-left:5px;
	  padding-right:5px;
	}
	#sidebarmenu .btn-toggle-nav a
	{
	  padding:0 0 0 5px;
	}
}
/* =========================================================
   PASTILLAS CANCELABLES
========================================================= */
.pastillas
{
	display:none;
}
.pastillascontenedor
{
	padding-bottom:8px;
	padding-top:0px;
	display:flex;
	flex-wrap: wrap;
  	gap: 8px;
}
@media (min-width: 992px)
{
	.pastillascontenedor
	{
		padding-top:0px;
		padding-bottom:32px;
	}
}
.pastillacancelable
{
	display:flex;
	padding: 6px 12px 6px 16px;
	align-items: center;
	gap: 6px;
	border-radius: 24px;
	border: 1px solid rgba(227, 24, 55, 0.50);
	background: -moz-linear-gradient(rgba(227, 24, 55, 0.05) 0%, rgba(227, 24, 55, 0.05) 100%);
	background: -webkit-linear-gradient(rgba(227, 24, 55, 0.05) 0%, rgba(227, 24, 55, 0.05) 100%);
	background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(227, 24, 55, 0.05)), to(rgba(227, 24, 55, 0.05)));
	background: -o-linear-gradient(rgba(227, 24, 55, 0.05) 0%, rgba(227, 24, 55, 0.05) 100%);
	background: linear-gradient(rgba(227, 24, 55, 0.05) 0%, rgba(227, 24, 55, 0.05) 100%), #FFF;
	color: #000;
	font-family: "Instrument Sans";
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	transition: all 0.5s ease;
	opacity:1;
}
.pastillacancelable:hover
{
	opacity:0.6;
}
.pastillacancelable::after
{
  content: "";
  display: inline-block;
  width: 10px;
  height: 9px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-left: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='9' viewBox='0 0 10 9' fill='none'%3E%3Cpath d='M4.99954 5.43385L1.73288 8.70052C1.61066 8.82274 1.4551 8.88385 1.26621 8.88385C1.07732 8.88385 0.921766 8.82274 0.799544 8.70052C0.677322 8.5783 0.616211 8.42274 0.616211 8.23385C0.616211 8.04497 0.677322 7.88941 0.799544 7.76719L4.06621 4.50052L0.799544 1.23385C0.677322 1.11163 0.616211 0.956076 0.616211 0.767187C0.616211 0.578299 0.677322 0.422743 0.799544 0.300521C0.921766 0.178298 1.07732 0.117188 1.26621 0.117188C1.4551 0.117188 1.61066 0.178298 1.73288 0.300521L4.99954 3.56719L8.26621 0.300521C8.38843 0.178298 8.54399 0.117188 8.73288 0.117188C8.92177 0.117188 9.07732 0.178298 9.19954 0.300521C9.32177 0.422743 9.38288 0.578299 9.38288 0.767187C9.38288 0.956076 9.32177 1.11163 9.19954 1.23385L5.93288 4.50052L9.19954 7.76719C9.32177 7.88941 9.38288 8.04497 9.38288 8.23385C9.38288 8.42274 9.32177 8.5783 9.19954 8.70052C9.07732 8.82274 8.92177 8.88385 8.73288 8.88385C8.54399 8.88385 8.38843 8.82274 8.26621 8.70052L4.99954 5.43385Z' fill='black'/%3E%3C/svg%3E");
}
/* =========================================================
   PRODUCTOS
========================================================= */
#productoscargados
{
	min-height:300px;
}
@media (max-width: 768px)
{
  #productoscargados
  {
	  min-height:150px;
  }
}
#productoscargados.cargador
{
	background-image:url(../img/loader.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:auto;
}
.product-track a
{
	text-decoration:none;
	transition: opacity 0.5s ease;
    opacity:1;
}
.product-track a:hover
{
	/*opacity:0.75;*/
}
.product-track > a
{
  margin:0 !important;
  padding:0;
  box-sizing:border-box;
}
.product-item
{
  display:flex; 
  flex-direction:column; 
  width:100%; 
  max-width:100%;
}
.product-marca
{
	color: #000000;
	text-align: center;
	font-family: "Instrument Sans";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 14px;
	margin-top:16px;
	text-transform: capitalize;
}
.product-name
{ 
	color: #000000;
	text-align: center;
	font-family: "Instrument Sans";
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 18px;
	text-transform: uppercase;
	margin-bottom:6px;
}
.product-droga
{ 
	color: #727272;
	text-align: center;
	font-family: "Instrument Sans";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px;
	padding-bottom:3px;
	text-transform: capitalize;
}
.product-desc
{ 
	margin: 0; 
	color: #000000; 
	font-family: "Instrument Sans";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;	
	text-align: center;
}
.product-marca,
.product-name,
.product-droga,
.product-desc{
  max-width:100%;
  white-space:normal;
  word-break:break-word;/* corta palabras largas */
  overflow-wrap:anywhere;
}
@media (max-width: 768px)
{
  .product-desc
  { 
	font-size: 13px;
  }
}
.product-item .btn-ir
{
	display:none;
} 
@media (min-width: 992px)
{
	/* Oculta el botón por defecto */
	.product-item .btn-ir
	{  
	  opacity: 0;
	  visibility: hidden;
	  margin: 42px auto;
	  border: none;
	  color: #535353;
	  transition: all 0.5s ease; 
	  display:block; 
	  width:100%;
	  padding: 12px 28px;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  align-self: stretch;  
	  border-radius: 10px;
	  background-color: #F5F2F2;
	  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25), -2px -2px 4px 0 #FFF;
	  text-align: center;	
	  font-family: Montserrat;
	  font-size: 14px;
	  font-style: normal;
	  font-weight: 600;
	  line-height: normal;
	  text-transform: uppercase;
	  margin-bottom:0px;
	}	
	/* Muestra el botón cuando se hace hover en el <a> o el <article> */
	.product-track a:hover .btn-ir,
	.product-item:hover .btn-ir {
	  opacity: 1;
	  visibility: visible;
	  transform: translateY(0);
	}
	/* Pequeño movimiento de aparición */
	.product-item .btn-ir
	{
	  /*transform: translateY(8px);*/
	}
	.product-item .btn-ir:hover
	{
	  box-shadow: 8px 8px 20px 0 rgba(0, 0, 0, 0.25)!important;
	}
}