/* IMPORTANDO COLORES VAR */
@import "colores-var-globales.css";

/* Esto es local */
:root{
--color-promo-01:#7D178B;
--color-relindo-mujer: #BD6481;
--color-relindo-item-generico-00: white;
--color-relindo-item-generico-01: #3B3C40;
--color-relindo-item-generico-02: #E5E5E5;
}

img.modulo-generico-header--logo-promoRelindo {
width: 40%;
  display: block;
  margin: 0 auto;
  padding-top: 10px;
  color: red;
}

header.modulo-generico-header--promo-item div.modulo-generico-header-promo-fotoItem-Txtinfo{
background-color: var(--color-relindo-mujer);
border-radius: 10px;

/* NUEVO BACK PATTERN */
  background-color: whitesmoke;
}

header.modulo-generico-header--promo-item button{
  font-family: Arial, sans-serif;
  color: var(--color-relindo-item-generico-01);
  display: flex;
  align-content: center;
  align-items: center;
  margin-bottom: 10px;
}

/* Estilizar elemento <button> de 'reenviar a alguien' */
.modulo-generico-btn-share {
background: none;      /* sin fondo */
border: none;          /* sin borde */
padding: 0;            /* sin padding por defecto */
margin: 0;
cursor: pointer;       /* cursor adecuado */
display: flex;         /* mejor control del layout */
align-items: center;
gap: 6px;
font: inherit;         /* usa la tipografía del contenedor */
color: inherit;        /* hereda colores */
}

  /* Esconderlo -Solo será tomado en cuenta por el script- */
  header.modulo-generico-header--promo-item 
  p.reenviar-descripcionDeItem{
  display: none;
  }

  header.modulo-generico-header--promo-item 
  section.modulo-generico-section--descripcion-precio-item 
  h2.modulo-generico-detalles-talla-item 
  b.modulo-generico-descripcion-item-aleatoria{
  font-size: 1.7rem;
  line-height: 2.1rem;
  }

  /* Detalles y precios  ++ Contenedor */
  header.modulo-generico-header--promo-item 
  section.modulo-generico-section--descripcion-precio-item{
      display: flex;
      flex-direction: row;
      gap: 14px;
      /* align-content: center; */
      align-items: center;
      /* background-color: red; */
      height: 140px;
      padding: 13px;
      justify-content: center;
      padding-top: calc(31px + (390px - 100vw) * 0.05);
      padding-bottom: calc(31px + (390px - 100vw) * 0.05);
  }

header.modulo-generico-header--promo-item 
p.modulo-generico-header-boton-promo {
  background-color: var(--color-relindo-promo-mujer);
  color: white;
  font-family: Arial, sans-serif;
  padding: 2rem 1rem 2rem 1rem;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 0px;
}

header.modulo-generico-header--promo-item 
section.modulo-generico-section--descripcion-precio-item 
h2.modulo-generico-detalles-talla-item {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  color: var(--color-relindo-item-generico-01);
  font-weight: normal;
  line-height: 1.45rem;
}


/* Detalles y precios */
  header.modulo-generico-header--promo-item section.modulo-generico-section--descripcion-precio-item p{
  font-family: Arial, sans-serif;
  font-size: 5.5rem;
  color: var(--color-relindo-item-generico-01);
  font-weight: normal;
  }

  header.modulo-generico-header--promo-item section.modulo-generico-section--descripcion-precio-item h2.detalles-talla-item{
  font-family: Arial, sans-serif;
  font-size: 1rem;
  color: white;
  font-weight: normal;
  line-height: 1.45rem;
  }

  header.modulo-generico-header--promo-item section.modulo-generico-section--descripcion-precio-item p.detalles-precio-item{
      letter-spacing: -0.2rem;
  }

  header.modulo-generico-header--promo-item section.modulo-generico-section--descripcion-precio-item p.detalles-precio-item small{
  font-size: 3rem;
  letter-spacing: 0.2rem;
  }

/* TEXTO ACERCA DEL PRODUCTO */
  header.modulo-generico-header--promo-item 
  details.modulo-generico-details-texto-acerca-de-promo{
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
  padding: 30px 0px 20px 20px;
  font-family: Arial, sans-serif;
  color: var(--color-relindo-item-generico-01);
  margin-top: -20px;
  background-color: var(--color-relindo-item-generico-02);
  margin: 0 auto;
  border-radius: 8px;
  }

  details.modulo-generico-details-texto-acerca-de-promo 
  ul li.modulo-generico-header--tengo-preguntas 
  a.modulo-generico-tengo-una-pregunta{
color: var(--color-relindo-item-generico-01);
}

  header.modulo-generico-header--promo-item 
  details.modulo-generico-details-texto-acerca-de-promo ul li{
  padding-bottom: 10px;
  }

  header.header--promo-item 
  details.modulo-generico-details-texto-acerca-de-promo 
  ul li.modulo-generico-header--tengo-preguntas a {
  color: white;
  }

  summary.modulo-generico-summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
 
    /* background-color: red; */
    padding-block-start: 1rem;
    padding-block-end: 1rem;
  }

  details.modulo-generico-details-texto-acerca-de-promo[open] {
  padding: 0.5em;
  font-size: 1rem;
  }

  details.modulo-generico-details-texto-acerca-de-promo[open] 
  summary.modulo-generico-summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: 0.5em;
  }

  header.modulo-generico-header--promo-item 
  a.modulo-generico-ahref-boton-link-promo{
      text-decoration: none;
  }

.modulo-generico-contenedor--pagar-comentario{
  color: #564d4d;
  display: flex;
  font-family: monospace;
  font-size: 0.8rem;
  /* display: flex; */
  /* position: relative; */
  flex-wrap: wrap;
  justify-content: center;
  margin: 0px;
}

/*  CARROUSEL */
header.modulo-generico-header--promo-item 
div.modulo-generico-contenedorCarrou00 {
    display: flex;
    overflow: auto;
    flex: none;
    scroll-snap-type: x mandatory;
    gap: 6px;
}

header.modulo-generico-header--promo-item 
div.modulo-generico-contenedorCarrou00 > div.modulo-generico-ele1 {
    text-align: center;
    flex: none;
    width: 95%;
    height: auto;
    scroll-snap-align: center;
    scroll-margin-left: 3rem;
    scroll-snap-stop: always;
    /* margin: 10px; */
    margin-top: 15px;


}

header.modulo-generico-header--promo-item 
div.modulo-generico-contenedorCarrou00 
div.modulo-generico-ele1
img.modulo-generico-imgCarru00 {
    position: relative;
    width: 100%;
    border-radius: 10px;
}

/* ALTERAR BARRA SCROLL */
/* Grosor vertical y horizontal */
header.modulo-generico-header--promo-item 
div.modulo-generico-contenedorCarrou00::-webkit-scrollbar {
    height: 20px;    /* grosor horizontal */
}

/* Color de la barra (thumb) */
header.modulo-generico-header--promo-item 
div.modulo-generico-contenedorCarrou00::-webkit-scrollbar-thumb {
    background-color: var(--color-relindo-mujer);
    border-radius: 8px;            /* esquinas redondeadas */
}

/* Color de fondo del track */
header.modulo-generico-header--promo-item 
div.modulo-generico-contenedorCarrou00::-webkit-scrollbar-track {
    background-color: white;        
}

/* BARRA SCROLL */
/* Grosor vertical y horizontal */
header.modulo-generico-header--promo-item 
div.modulo-generico-contenedorCarrou00::-webkit-scrollbar {
    height: 20px;    /* grosor horizontal */
}

/* Color de la barra (thumb) */
header.modulo-generico-header--promo-item div.modulo-generico-contenedorCarrou00::-webkit-scrollbar-thumb {
    background-color: var(--color-relindo-mujer);
    border-radius: 8px;            /* esquinas redondeadas */
}

/* Color de fondo del track */
header.modulo-generico-header--promo-item div.modulo-generico-contenedorCarrou00::-webkit-scrollbar-track {
    background-color: white;        
}

/* Firefox */
.modulo-generico-contenedorCarrou00 {
    scrollbar-width: auto; /* thin | auto | none */
    scrollbar-color: var(--color-relindo-item-generico-01) white;/* thumb track */
}