/* ===========================================
   _producto.css
   Estilos exclusivos para PRODUCTO-GASEX
   Estructura y secciones asociadas al producto individual.
=========================================== */

/* > PRODUCTO-GASEX
  ° ESTRUCTURA HEADER
    * BUSCADOR
    * CARRITO
    * MENÚ PRINCIPAL Y BOTONES
    * SECCION: SECCION-PRODUCTO
    * SECCION: SECCION-PRODUCTO-2
    * SECCION: TENEMOS-TODO
    * SECCION: BANNER-1
    * SECCION: OPINIONES
    * SECCION: COMPARADOR
    * SECCION: CARRUSEL-DE-BLOG
    * SECCION: CARRUSEL-BANNER
    * SECCION: PRODUCTOS-RELACIONADOS
  ° SECCION: FOOTER */

  

/* ================================
SECCION: SECCION-PRODUCTO
================================== */
.productos {
  padding: 0rem 8rem;
  box-sizing: border-box;
}

.breadcrumb {
  font-size: 0.9rem;
  color: #69727D;
  padding: 1rem 0rem 0;
  /* margin-bottom: -3rem; */
}

.breadcrumb a {
  color: #1C244B;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb span {
  color: #7F7D7D;
}

.producto-section {
  padding: 2rem 0rem;
  max-width: 100%;
  box-sizing: border-box;
}

.producto-contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem; /* Puedes ajustar a 2rem o 4rem si lo deseas */
  align-items: flex-start;
}

.producto-imagen {
  flex: 1 1 30%;
}

.product-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border: none;
}

.miniaturas {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
  width: 100%;
  max-width: 37.5rem;
  margin-top: 0.5rem;
}

.miniaturas img {
  width: 33%;
  cursor: pointer;
  /* border: 1px solid #ccc; */
  object-fit: cover;
}

.miniatura-galeria {
  width: 100px;         /* Puedes ajustar este valor */
  height: auto;
  cursor: pointer;
  /* border: 1px solid #ccc; */
  padding: 3px;
  box-sizing: border-box;
  transition: transform 0.2s ease;
}

.miniatura-galeria:hover {
  transform: scale(1.05);
}

.miniatura-galeria.activo {
  border: 2px solid #046BD2;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}

.producto-detalle {
  flex: 1 1 45%;
}

.product-info {
  flex: 1 1 45%;
}
.product-info p {
  padding-left: 0em !important;
  padding-right: 0em !important;	
}
.producto-detalle h1 {
  font-size: 2.375rem;
	line-height: normal;
  margin-top: 0px;
  margin-bottom: -0.8rem;
  color: #1C244B;
}

.precio-contenedor {
  display: flex;
  align-items: baseline;
  margin-top: -1rem;
  gap: 1rem;
}

.precio-anterior {
  font-size: 1.313rem;
  text-decoration: line-through;
  color: #7F7D7D;
}

.precio-actual {
  font-size: 1.5rem;
  font-weight: bold;
  color: #000000;
}

.precio-actual span {
  font-size: 1.5rem;
  color: #555;
}

.sku-info {
  font-size: 0.9rem;
  color: #69727D;
  margin-bottom: 1rem;
	padding-left: 0;
}








.linea-superior, .linea-inferior {
  border-top: 1px solid #EAEAEA;
  margin: .75rem 0;
}

/* Eliminar flechas del input tipo number en todos los navegadores */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}

.cantidad-carrito {
  display: flex;
  align-items: center;
  /* flex-wrap: wrap; */
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cantidad-carrito input[type="number"] {
  width: 4rem;
  text-align: center;
  /* padding: 0.4rem; */
  border: 1px solid #ffffff;
  border-radius: 6px;
  font-size: 1rem;
}

.selector-cantidad {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: clip;
  height: 2.5rem;
}

/* Botones integrados */
.selector-cantidad .btn-menos,
.selector-cantidad .btn-mas {
  width: 2rem;
  height: 100%;
  background-color: #ffffff;
  border: none;
  font-weight: bold;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Input de cantidad */
.selector-cantidad .cantidad {
  width: 3rem;
  height: 100%;
  text-align: center;
  border: none;
  font-size: 1rem;
  outline: none;
}

/* Eliminar spinner en todos los navegadores */
.selector-cantidad input::-webkit-outer-spin-button,
.selector-cantidad input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Botón Agregar */
.btn-agregar {
  background-color: #0D2840;
  color: white;
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 9999px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}

.webpay-logo {
  max-height: 4rem;
  height: auto;
  vertical-align: middle;
}

.webpay-wrapper {
  flex-basis: 100%;
}

.soporte-cliente {
  background-color: #F5F5F5;
  padding: 0 0.5rem;
  margin: -1rem 2rem;
  border-radius: 0.5rem;
}

.soporte-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 1rem;
	font-size:larger;
	float: left;
}
.soporte-item p {
  padding-left: 0em !important;
  padding-right: 0em !important;	
}

.icono-soporte {
  width: 1.5rem;
  height: auto;
}

.valoracion-producto {
  margin-top: 0px;
  color: #f5c518; /* color base (no afecta a las clases nuevas) */
  font-size: 15px;
  display: flex;
  align-items: center;
  padding: 1rem 0rem;
}

.valoracion-valor {
  padding-right: 0.5rem;
  color: #69727D;
}

.valoracion-texto {
  padding-left: 0.5rem;
  color: #69727D;
}

.estrella {
  margin-right: 2px;
}

/* Precio Mayorista */
.precio-mayorista {
  background-color: #1C244B;
  color: white;
  padding: 8px 12px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  margin-top: -0.5rem;
  display: inline-block;
}

/* Stock Disponible */
.stock-disponible {
  margin-top: 1.3rem;
  margin-bottom: -10px;
  color: #69727D;
  font-weight: 600;
  text-transform: uppercase;
}

/* --- RESPONSIVE PRODUCTO --- */
@media screen and (max-width: 600px) {
  .producto-contenedor {
    flex-direction: column;
    gap: 2rem;
  }

  .producto-imagen,
  .producto-detalle {
    flex: 1 1 100%;
    text-align: center;
  }

  .producto-imagen img {
    width: 100%;
    height: auto;
  }

  .miniaturas {
    justify-content: center;
    flex-wrap: wrap;
  }

  .cantidad-carrito {
    justify-content: center;
  }

  .btn-agregar {
    width: 100%;
  }

  .sku-info,
  .stock-disponible {
    text-align: center;
  }

  .webpay-wrapper {
    display: flex;
    justify-content: center;
  }

  .soporte-cliente {
    text-align: left;
  }
}

/* ==========================================================
   INTEGRACIÓN ESTRELLAS LLENAS / MEDIAS / VACÍAS (Gasex)
   - Mantiene tus clases existentes
   - No rompe el layout
   - Usa color dorado y gris como en tu diseño
   ========================================================== */

.valoracion-producto .estrella {
  display: inline-block;
  line-height: 1;
  font-size: 1em;           /* hereda tamaño desde .valoracion-producto */
}

/* Estrella llena (dorado) */
.valoracion-producto .estrella.llena {
  color: #F5B300;
}

/* Estrella vacía (gris claro) */
.valoracion-producto .estrella.vacia {
  color: #D9D9D9;
}

/* Estrella media: base gris + overlay dorado al 50% */
.valoracion-producto .estrella.media {
  position: relative;
  color: #D9D9D9;          /* base gris */
}
.valoracion-producto .estrella.media::before {
  content: '★';
  position: absolute;
  left: 0; top: 0;
  width: 50%;
  overflow: hidden;
  color: #F5B300;          /* dorado */
  pointer-events: none;
}


/* ================================
SECCION: SECCION-PRODUCTO-2
================================== */
.seccion-descripcion {
  /* padding: 2rem 8rem;
  box-sizing: border-box; */
}

.descripcion-grid {
  display: flex;
  align-items:stretch;     /* asegura alturas iguales */
  flex-wrap: wrap;
  column-gap: 6rem;
  row-gap: 2rem;
}

.texto-descripcion{
  flex:1 1 50%;            /* ya lo tienes */
  display:flex;            /* 👈 clave */
  flex-direction:column;   /* 👈 clave */
  min-width:0;             /* evita overflow por palabras largas */
  text-align: justify;
}

.texto-descripcion p {
  margin-block-start: .5rem;
  margin-block-end: .5rem;
	  padding-left: 0em !important;
  padding-right: 0em !important;	
}

.imagen-descripcion {
  flex: 1 1 30%;
}

.imagen-descripcion img {
  min-width: 20rem;
  width: 100%;
  min-height: 30rem;
  height: 100%;
  object-fit: cover; 
  border-radius: 0.5rem;
}

.redes-sociales{
  display:flex;
  flex-direction:column;
  margin-top:auto;         /* 👈 hace que baje al final */
  /*padding-top:2rem;*/        /* espacio respecto al texto */
}

.redes-sociales h3 {
 /* margin-top: 2rem;*/
  text-align: center;
}

.iconos-redes {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.icono-social {
  width: 32px;
  height: 32px;
  border: 2px solid #e4e4e4;
  background-color: #2271B8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.icono-social img {
  width: auto;
  height: 1rem;
  filter: brightness(0) invert(1); /* convierte icono en blanco si es negro */
}

.icono-social:hover {
  transform: scale(1.1);
}

.seccion-inferior{
  width:100%;              /* asegura ancho completo */
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  /*margin-top:3rem;*/
}

.incluye {
flex: 1 1 40%; 

}

.incluye ul {
  padding-left: 1.2rem;
}

.caracteristicas {
  flex: 1 1 40%; 
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    height: auto;
}

.caracteristicas table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.caracteristicas th {
  background-color: #1C244B;
  color: #fff;
  text-align: left;
  padding: 0.4rem 0.6rem;
}

.caracteristicas td {
  border: 1px solid #e4e4e4;
  padding: 0.4rem 0.6rem;
}

.incluye, .caracteristicas{
  flex:1 1 48%;            /* reparte aprox. 50/50 */
}

.card-imagen {
  position: relative;
  width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
}

.card-imagen img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.75rem;
}

.texto-sobre-imagen {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  text-align: left;
  color: #ffffff;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.separador-titulo {
  position: relative;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.separador-titulo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

.tabla-caracteristicas {
  /* width: 17.06rem;
  height: 20.12rem; */
  font-size: 0.8rem;
  border-collapse: separate;         /* ← necesario para que funcione */
  border-spacing: 0 2px;             /* ← 2px de espacio vertical */
}

.tabla-caracteristicas{
  width:100% !important;   /* sobreescribe el 17.06rem previo */
  height:auto !important;  /* no fijar altura */
}

.tabla-caracteristicas th {
  background-color: #0D2840;
  color: white;
  padding: 0.6rem 1rem;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid #000000;
}

.tabla-caracteristicas td {
  background-color: #ffffff;
  padding: 0.6rem 1rem;
  font-weight: 700;
  text-align: right;
  border: 1px solid #000000;
}

.tabla-caracteristicas tr:last-child td {
  border-bottom: 1px solid #000000;
}

.preguntas-frecuentes {
margin-top: 6rem;
margin-left: -15px;
}

.toggle-faq {
  background-color: #ffffff;
  color: #7F7D7D;
  border: none;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  font-weight: bold;
  border-radius: 4px;
  width: 100%;
  text-align: left;
  position: relative;
}

.toggle-faq :hover{
  color: #000000;  
}

.toggle-faq .icono {
  float: left;
  transition: transform 0.3s ease;
}

.contenido-faq {
  /* display: none; */
  /* background-color: #f3f3f3; */
  padding: 1em 0;
  margin-top: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  color: #324A6D;
  /* border: 1px solid #ccc; */
}

.contenido-faq p {
  padding-left: 0em !important;
  padding-right: 0em !important;	
}


/* Oculto por defecto cuando tiene hidden */
.preguntas-frecuentes .contenido-faq[hidden]{
  display: none !important;
}

/* Visible cuando está abierto */
.preguntas-frecuentes .contenido-faq.is-open{
  display: block !important;
}



/* --- RESPONSIVE PRODUCTO-2 --- */
@media screen and (max-width: 768px) {
  .seccion-descripcion {
    padding: 2rem 1rem;
  }

  .descripcion-grid {
    flex-direction: column;
    gap: 2rem;
  }

  .texto-descripcion,
  .imagen-descripcion {
    flex: 1 1 100%;
  }

  @media (max-width:768px){
  .texto-descripcion{ display:block; }
  .redes-sociales{ margin-top:2rem; }
}

  .seccion-inferior {
    flex-direction: column;
    gap: 2rem;
  }

  .incluye,
  .caracteristicas {
    flex: 1 1 100%;
  }

  .tabla-caracteristicas {
    width: 100%;
    font-size: 0.9rem;
  }
}

.incluye h3,
.caracteristicas h3 {
    border-bottom: 1px solid #ccc;
    display: block;
    width: 100%;
}

/* Mantener la columna de Características fija mientras se expande la izquierda */
.seccion-inferior { 
  align-items: flex-start;           /* asegura tope alineado */
}

.caracteristicas {
  position: sticky;                   /* hace la columna “fija” dentro del contenedor */
  top: 120px;                         /* ajusta según tu header/breadcrumb */
  align-self: flex-start;             /* evita que se estire */
  height: max-content;                /* calcula su propia altura */
}

/* En móviles/desktops estrechos, desactiva el sticky */
@media (max-width: 1024px) {
  .caracteristicas {
    position: static;
    top: auto;
  }
}



/* ================================
SECCION: TENEMOS-TODO
================================== */

/* ================================
SECCION: BANNER-1
================================== */

/* ================================
SECCION: OPINIONES
================================== */

/* ================================
SECCION: COMPARADOR
================================== */

/* ================================
SECCION: CARRUSEL-DE-BLOG
================================== */

/* ================================
SECCION: CARRUSEL-BANNER
================================== */

/* ================================
SECCION: PRODUCTOS-RELACIONADOS
================================== */


/* ================================
BLOQUE EXTRA
================================== */

/* Contenedor de bloques dentro del single product */
.gasex-product-content {
  margin-top: 1.5rem;
}
.gasex-product-content img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Si usas alignwide/alignfull dentro de tus bloques */
.gasex-product-content .alignwide {
  max-width: min(1200px, 92vw);
  margin-left: auto;
  margin-right: auto;
}
.gasex-product-content .alignfull {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}





/* ================================
ESTILO PARA COMBOS
================================== */
/* Cinta COMBO */
.combo-ribbon{
  position:absolute;
  top:12px; left:12px;
  padding:6px 10px;
  font-weight:700;
  background:#FBDA00;
  color:#222;
  border-radius:4px;
  z-index:5;
}

/* Caja de incluye (arriba) */
.combo-incluye-summary{
  margin:1rem 0 1.25rem;
  padding:0.75rem 1rem;
  background:#f6f7f9;
  border:1px solid #e5e7eb;
  border-radius:8px;
}
.combo-incluye-summary .combo-incluye-list{
  margin:0.5rem 0 0;
  padding-left:1.25rem;
}
.combo-ahorro{ margin:.25rem 0 0; font-size:.95rem; }
.combo-ahorro-pct{ margin-left:.25rem; }





























/* ===== GASEx: Badges/Labels en ficha ===== */
.producto-imagen { position: relative; }   /* asegura posicionamiento relativo del contenedor de imagen */

.gx-badges{
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: .5rem;
  z-index: 20;
}

.gx-badge{
  display: inline-block;
  padding: .35rem .55rem;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  color: #fff;
  border-radius: .375rem;
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
  user-select: none;
}

.gx-badge--sale{     /* Rojo: % descuento */
  background: #E53935;
}

.gx-badge--featured{ /* Verde: HOT */
  background: #10B981;
}

/* (Opcional) versión esquina derecha:
.producto-imagen .gx-badges.right{ left:auto; right:12px; }
*/