/* ==========================================================================
   Ficha de producto — layout 3 columnas estilo Puntobyze (#ficha)
   ==========================================================================
   Sustituye el comportamiento estrecho de .article-container-ficha por el
   formato fluido del proyecto Puntobyze: contenedor a ancho completo,
   padding generoso en desktop y totalmente responsive en tablets/móviles.
   ========================================================================== */

#ficha {
  display: block;
  width: 100%;
  margin: 40px 0 0;
  padding: 60px;
  background: #fff;
  box-sizing: border-box;
}

/* Contenedor general de la ficha: ancho fluido amplio para monitores grandes */
.row-ficha-container {
  width: 94%;
  max-width: 1780px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

/* El grid interno de Bootstrap se mantiene fluido dentro del contenedor */
#ficha .row {
  margin-left: -15px;
  margin-right: -15px;
}

#ficha h1,
#ficha .wrap-ficha-info h1 {
  margin-top: 0;
  font-size: 26px;
  line-height: 1.3;
  color: #111;
}

#ficha .wrap-ficha-img img {
  max-width: 100%;
  height: auto;
}

/* Evita que la galería/carrusel desborde la ficha en pantallas de escritorio */
#ficha .wrap-ficha-img,
#article-photo-carousel {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#ficha .wrap-ficha-info,
#ficha .wrap-ficha-buy {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Columna de información */
#ficha .wrap-ficha-info {
  padding-right: 16px;
}

/* Columna de compra separada visualmente como en Puntobyze */
#ficha .wrap-ficha-buy {
  border-left: 1px solid #d2d2d2;
  padding: 16px;
}

#ficha .wrap-ficha-utils {
  margin: 12px 0 0;
  min-height: 32px;
}

#ficha .wrap-ficha-utils img {
  max-height: 40px;
}

#ficha .wrap-ficha-utils h4 {
  margin: 8px 0 0;
}

#ficha .wrap-ficha-buy .btn-tramitar-pedido .btn-comprar {
  display: block;
  width: 100%;
  margin-top: 10px;
  clear: both;
}

#ficha .wrap-ficha-buy .options-box {
  margin-top: 10px;
}

#ficha .wrap-ficha-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

#ficha .wrap-ficha-social .sociales {
  float: none;
  margin: 0;
  color: inherit;
}

/* Ficha técnica en tarjetas: centrada cuando el contenedor es muy ancho */
#ficha .pb-ficha-cards,
.ficha-detalle .pb-ficha-cards {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

/* Tablets: padding intermedio */
@media (min-width: 768px) and (max-width: 1024px) {
  .row-ficha-container {
    padding: 0 16px;
  }

  #ficha {
    padding: 30px;
  }

  #ficha .wrap-ficha-info {
    padding-right: 15px;
  }
}

/* Tablets pequeñas y móviles: las columnas se apilan */
@media (max-width: 991px) {
  #ficha .wrap-ficha-buy {
    border-left: 0;
    padding: 24px 15px 16px;
  }

  #ficha .wrap-ficha-info {
    padding-right: 15px;
  }
}

/* Móviles: padding reducido, nunca desbordamiento horizontal */
@media (max-width: 767px) {
  .row-ficha-container {
    padding: 0 10px;
  }

  #ficha {
    margin-top: 15px;
    padding: 15px;
  }

  #ficha h1,
  #ficha .wrap-ficha-info h1 {
    font-size: 22px;
  }

  #ficha .wrap-ficha-info,
  #ficha .wrap-ficha-buy {
    padding-top: 20px;
    padding-left: 0;
    padding-right: 0;
  }

  #ficha .wrap-ficha-buy {
    border-left: 0;
  }
}

/* Formas de pago dentro de la columna de compra */
#ficha .wrap-ficha-pagos {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #555;
}

#ficha .wrap-ficha-pagos .pago-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

#ficha .wrap-ficha-pagos .pago-item .glyphicon {
  color: #00aff0;
}

/* Contenedor de relacionados + datos técnicos + reseñas: mismo ancho que la ficha superior */
.ficha-detalle {
  display: block;
  width: 100%;
  margin: 30px 0 40px;
  padding: 60px;
  background: #fff;
  box-sizing: border-box;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ficha-detalle {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .ficha-detalle {
    padding: 15px;
  }
}