@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; /* alinea el bloque interno a la derecha */
}
/* bloque interno: caja “estrecha” y texto alineado a la izquierda */
.contenidoqueestasbuscando{
  display: inline-block; /* se ajusta al ancho de su contenido */
  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;
	}
}
/* BANNERS PORTADA PRODUCTOS */
.bannerShadow
{
	border-radius:12px;
    transition: all 0.75s ease;
}
.bannerShadow:hover
{
  box-shadow: 8px 8px 20px 0 rgba(0, 0, 0, 0.25)!important;
}
@media (max-width: 991.98px)
{
    .bannerShadow
	{
		border-radius:8px;
		transition: all 0.75s ease;
	}
}
/* ****************************** */
/* CARROUSEL PRODUCTOS DE PORTADA */
/* ****************************** */
/* Wrapper que sangra a los bordes del viewport pero respeta el container por JS */
.product-carousel-bleed
{
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0; /* importante: sin padding aquí */
}
/* Viewport del carrusel */
.product-carousel
{
  position: relative;
  overflow: hidden;           /* oculta el excedente horizontal */
  width: 100%;
  touch-action: pan-y;        /* scroll vertical nativo; eje X lo maneja tu JS */
}
/* Pista: recibe los gutters dinámicos vía CSS vars */
.product-track{
  display:flex;
  flex-wrap:nowrap;
  gap:24px !important;              /* único responsable del espacio */
  justify-content:flex-start !important;
  align-items:flex-start;
  padding-left:var(--leading,0px);
}
.product-track > *{
  flex: 0 0 auto;        /* no se estiran */
  margin-left: 24px;     /* separación fija */
}
.product-track > *:first-child{
  margin-left: 0;        /* el primero no suma extra (ya hay --leading) */
}
.product-track a
{
	text-decoration:none;
	transition: opacity 0.5s ease;
    opacity:1;
}
.product-track a:hover
{
	opacity:0.75;
}
.product-track > a{
  display:block;
  flex:0 0 230px;                   /* mobile */
  width:230px;
  margin:0 !important;              /* evita “gap duplicado” */
  padding:0;                        /* por si algún reset sumaba */
  box-sizing:border-box;
}
@media (min-width: 992px){
  .product-track > a{
    flex-basis:264px;               /* desktop */
    width:264px;
  }
}
/* Ítem del carrusel (ancho lo define la foto) */
.product-item
{
  display:flex; 
  flex-direction:column; 
  width:100%; 
  max-width:100%;
}
/* Foto: 230px mobile / 264px desktop */
.product-photo /* mobile */
{
   width:100% !important;   /* que la imagen llene el ancho del <a> */
   height:auto;
   display:block;
}
.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: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;	
	text-align: center;
}
.categoriah3
{
	color: #000000;
	font-family: "Instrument Sans";
	font-size: 24px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}
.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: 991.98px)
{
  .product-desc
  { 
	font-size: 13px;
  }
}
.pc-arrow
{
  position: absolute;
  top: 34%; 
  transform: translateY(-34%);
  z-index: 5;  
  display: none;/* oculta por defecto (mobile) */
  align-items: center; 
  justify-content: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); 
  border: none;
  padding: 12px 12px;
  border-radius: 6px;
  transition: all 0.75s ease;
  background: rgba(0, 0, 0, 0.05)!important;
  backdrop-filter: blur(2px); 
  opacity: 1; 
}
.pc-arrow:disabled
{ 
	opacity: 0; 
	cursor: default;
}
.pc-arrow.prev { left: 2%; }
.pc-arrow.next { right: 2%; }
.pc-arrow.undo { right: 2%; }

.js-product-carousel .pc-fade-left, .js-product-carousel .pc-fade-right
{
	pointer-events: all!important;
}
@media (min-width: 992px)
{
  .js-product-carousel .pc-arrow
  { 
 	display: flex;
  }
 .pc-arrow:hover
  {
	  background: rgba(0, 0, 0, 0.10)!important;
	  box-shadow: 0 .10rem .10rem rgba(0, 0, 0, .075);
	  border:none;
  }
}
@media (min-width: 1800px)
{
  .js-product-carousel .pc-fade
  {
    position:absolute; top:0; bottom:0;
    z-index:4; pointer-events:none;
    display:block;
  }
  .js-product-carousel .pc-fade-left{
    left:0;
   /* width: calc((100vw - 1320px)/2 - 100px); /*sino cambiar a + 24px)
    /*background: linear-gradient(90deg, #f5f2f2 0%, rgba(245,245,242,0) 100%);*/
	/*background-image:url(../img/productos_deg-izq.png);
	background-repeat:repeat-y;
	background-position:right top;
	background-size:contain;*/
	
	width: 100px; /*sino cambiar a + 24px)
    /*background: linear-gradient(90deg, #f5f2f2 0%, rgba(245,245,242,0) 100%);*/
	background-image:url(../img/productos_deg-izq.png);
	background-repeat:repeat-y;
	background-position:right top;
	background-size:contain;
  }
  .js-product-carousel .pc-fade-right{
    right:0;
    /*width: calc((100vw - 1320px)/2 - 100px); /*sino cambiar a + 24px)
    /*background: linear-gradient(270deg, #f5f2f2 0%, rgba(245,245,242,0) 100%);*/
	/*background-image:url(../img/productos_deg-der.png);
	background-repeat:repeat-y;
	background-position:right top;
	background-size:contain;*/
	
	width: 100px; /*sino cambiar a + 24px)
    /*background: linear-gradient(270deg, #f5f2f2 0%, rgba(245,245,242,0) 100%);*/
	background-image:url(../img/productos_deg-der.png);
	background-repeat:repeat-y;
	background-position:right top;
	background-size:contain;
  }
}
@media (min-width: 1750px) AND (max-width: 1799.98px)
{
  .js-product-carousel .pc-fade
  {
    position:absolute; top:0; bottom:0;
    z-index:4; pointer-events:none;
    display:block;
  }
  .js-product-carousel .pc-fade-left{
    left:0;
    /*width: calc((100vw - 1470px)/2 - 100px); /*sino cambiar a + 24px)
    /*background: linear-gradient(90deg, #f5f2f2 0%, rgba(245,245,242,0) 100%);*/
	/*background-image:url(../img/productos_deg-izq.png);
	background-repeat:repeat-y;
	background-position:right top;
	background-size:contain;*/
  }
  .js-product-carousel .pc-fade-right{
  	right:0;
    /*  width: calc((100vw - 1470px)/2 - 100px); /*sino cambiar a + 24px)
    /*background: linear-gradient(270deg, #f5f2f2 0%, rgba(245,245,242,0) 100%);*/
	/*background-image:url(../img/productos_deg-der.png);
	background-repeat:repeat-y;
	background-position:right top;
	background-size:contain;*/
  }
}
@media (min-width: 2470px)
{
  .js-product-carousel .pc-fade
  {
    position:absolute; top:0; bottom:0;
    z-index:4; pointer-events:none;
    display:block;
  }
  .js-product-carousel .pc-fade-left{
    left:0;
    /*width: calc((100vw - 1320px)/2 - 100px);
    background: linear-gradient(90deg, #f5f2f2 0%, rgba(245,245,242,0) 100%);*/
  }
  .js-product-carousel .pc-fade-right{
    right:0;
    /*width: calc((100vw - 1320px)/2 - 100px);
    background: linear-gradient(270deg, #f5f2f2 0%, rgba(245,245,242,0) 100%);*/
  }
}