/* =====================================================================
   FICHA DE ARTÍCULO — CSS reorganizado

   BREAKPOINTS (los de Bootstrap 4, los únicos que se usan en el archivo)
     móvil ............. hasta 575.98px
     móvil grande ...... hasta 767.98px
     tablet ............ 768px – 1199.98px  (incluye iPad en horizontal)
     escritorio ........ desde 992px (anchos de columnas)
     escritorio ancho .. desde 1200px (ajustes finos)

   ORDEN DEL ARCHIVO
     1. Variables
     2. Base y tipografía
     3. Componentes antiguos de la ficha (fa-*, popups, carrusel...)
     4. Componentes nuevos (cada uno con sus propias media queries)
     5. Media queries de los componentes antiguos:
        primero las de "max-width" de mayor a menor,
        luego las de "min-width" de menor a mayor.
   ===================================================================== */


/* =====================================================================
   1. VARIABLES
   ===================================================================== */
:root {
  --naranja: #fb6a12;
  --naranja-hover: #d45500;
  --naranja-oscuro: #d15600;
  --naranja-titulo: #db702a;
  --naranja-claro: #fff3e9;
  --azul: #0090d8;
  --azul-claro: #eef7fc;
  --verde: #07800f;
  --verde-ok: #1ca21c;
  --verde-claro: #eafaf0;
  --rojo: #d40000;
  --texto: #1a2530;
  --texto-suave: #3a4550;
  --texto-gris: #667;
  --gris-titulo: #999999;
  --gris-tachado: #969696;
  --fondo-suave: #f5f6f8;
  --borde-suave: #eef1f4;
  --borde: #dddddd;
  --borde-cantidad: #dadada;

  --fuente: 'Baloo Bhaina 2', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radio-s: 5px;
  --radio: 10px;
  --radio-l: 15px;

  --alto-barra-compra: 72px;   /* alto de la barra fija de "Comprar" en móvil */
  --alto-pie-movil: 84px;      /* alto de .contenedorBotonesPieMovil */
}


/* =====================================================================
   2. BASE Y TIPOGRAFÍA
   ===================================================================== */
body {
  background-color: #fafafa;
}

h1, h2, h3,
p, span, a, b,
.search-izq,
.breadscrumb,
.txtArticulo,
.fa-boton-comprar.fa-boton-comprar-pagamastarde,
.fa-disponible,
a.cn_v3_dynamic_element_button {
  font-family: var(--fuente);
}


/* =====================================================================
   3. COMPONENTES ANTIGUOS DE LA FICHA
   ===================================================================== */

/* ----- Estructura general ----- */
.fa-principal {
  border: 1px solid var(--borde);
  margin-top: 10px;
  border-radius: var(--radio-l);
  padding: 5px;
}

.fa-titulo {
  text-align: center;
}

.fa-titulo-titulo {
  width: 100%;
}

.fa-titulo-titulo img {
  max-width: 100%;
}

.referenciaFichaProductoTitulo {
  position: absolute;
  right: 10px;
}

.fa-titulo-marca {
  width: 150px;
  text-align: right;
  padding-top: 5px;
  display: none;
}

.fa-pagamastarde {
  width: 92%;
  min-height: 107px;
  margin: 10px auto;
}

.fa-media {
  width: 100%;
  position: relative;
}

.fa-media-envio-gratis {
  position: absolute;
  right: 0;
  pointer-events: none;
}

.fa-media-envio-gratis img {
  width: 70px;
}

.fa-media-img {
  width: 100%;
  padding: 9px 0 9px 9px;
  margin-bottom: 15px;
}

.imagenFichaProductoGeneral {
  width: 100%;
  max-width: 800px;
  height: auto;
}

.fa-media-carrusel {
  width: 100%;
  text-align: center;
}

.fa-media-carrusel div {
  display: inline-flex;
}

.fa-media-carrusel div:hover {
  border-radius: var(--radio-s);
}

.fa-media-carrusel-foto {
  padding: 4px;
  border-radius: var(--radio-s);
}

.fa-datos {
  width: 100%;
}

.fa-cuerpo {
  margin-top: 20px;
}

/* ----- Precio ----- */
.fa-precio-grande {
  font-size: 48px;
  font-weight: bold;
}

.fa-currency {
  font-size: 24px;
  font-weight: bold;
  padding-top: 14px;
  margin-bottom: 10px;
  margin-left: -7px;
}

.fa-precio-tipo-oferta {
  display: inline-block;
  width: auto;
  background: var(--naranja-claro);
  color: var(--naranja-oscuro);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 8px;
  white-space: normal;
}

.fa-precio-pequeno {
  font-size: 32px;
}

.fa-precio-pequeno-tachado {
  font-size: 16px !important;
  text-decoration: line-through;
  color: var(--gris-tachado);
  font-weight: 400;
}

.fa-precio-grande-mayorista {
  font-size: 1.5em;
  padding-top: 20px;
  width: 230px;
  text-align: right;
  padding-right: 10px;
}

.fa-margen {
  padding-right: 10px;
  width: 230px;
  text-align: right;
  font-size: 1.1em;
}

.fa-precio-pequeno-mayorista {
  font-size: 1.1em;
  font-weight: bold;
  background-color: var(--borde);
  border: 1px solid var(--borde);
  width: 220px;
  text-align: right;
  padding: 5px 10px 5px 5px;
  border-radius: var(--radio-s);
}

span.IVA,
span.popUpIVA {
  font-size: 18px;
  font-weight: bold;
  text-align: center !important;
}

span.IVA {
  color: var(--azul);
}

span.popUpIVA {
  color: var(--naranja);
}

.textoChequeRegalo {
  color: var(--rojo);
  font-weight: bold;
  font-size: 18px;
  white-space: nowrap;
}

/* ----- Botón comprar (la barra fija de móvil está en las media queries) ----- */
.fa-boton-comprar {
  clear: both;
  text-align: center;
  flex-wrap: wrap;
}

/* ----- Datos ----- */
.fa-datos-marca {
  padding-left: 20px;
  margin-bottom: 20px;
}

.fa-datos-marca a {
  text-decoration: none;
}

.fa-datos-nombre {
  display: none;
}

.fa-datos-edad {
  text-align: center;
}

.fa-datos-descripcion-corta {
  display: none;
  margin-top: 10px;
}

.fa-datos-descripcion-corta a {
  text-decoration: none;
  display: none;
}

.fa-datos-descripcion-corta-mas-detalles {
  margin-bottom: 10px;
  display: none;
}

.fa-datos-descripcion-corta-mas-detalles a {
  margin-bottom: 10px;
  text-decoration: none;
  display: none;
  color: #de6c24;
  font-weight: bold;
}

.fa-datos-descripcion-corta-mas-detalles a:hover {
  color: #343d7a;
}

.fa-datos-gastos-envio,
.fa-datos-envio {
  display: none;
}

.fa-datos-compartir {
  border: 1px solid #eeeeee;
  padding: 0 0 10px 5px;
  width: 135px;
  border-radius: var(--radio);
  background-color: #eeeeee;
  margin: 5px 0;
  text-align: center;
}

.fa-datos-compartir-wrap {
  clear: both;
  margin-top: 15px;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.fa-datos-compartir-derecha {
  border: 1px solid #eeeeee;
  padding: 8px 5px 5px;
  width: 160px;
  float: left;
  border-radius: var(--radio);
  background-color: #eeeeee;
  margin-top: 5px;
  margin-left: 5px;
  font-size: 0.9em;
  text-align: center;
}

.fa-datos-compartir-derecha a {
  text-decoration: none;
}

/* ----- Zoom de imágenes ----- */
.zoom {
  display: inline-block;
  position: relative;
}

.zoom .zoomImg {
  cursor: cell;
}

.zoom::after {
  content: "";
  display: block;
  width: 33px;
  height: 33px;
  position: absolute;
  top: 0;
  right: 0;
  background: url(icon.png);
}

.zoom img {
  display: block;
}

.zoom img::selection {
  background-color: transparent;
}

/* ----- Títulos de sección (todos comparten estilo; solo cambia el color o el ancho) ----- */
.fa-complementos-titulo,
.fa-sustitutos-titulo,
.fa-advertencias-titulo,
.fa-advertencias-titulo-largo,
.fa-superiores-titulo,
.fa-superiores-titulo-largo,
.fa-otros-articulos-titulo,
.fa-seccion-titulo,
.fa-seccion-titulo-naranja,
.fa-seccion-titulo-medio {
  background-color: var(--gris-titulo);
  color: #fff;
  font-weight: bold;
  font-size: 1.2em;
  padding: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: var(--radio-s);
}

.fa-complementos-titulo,
.fa-seccion-titulo-naranja {
  background-color: var(--naranja-titulo);
}

.fa-complementos-titulo,
.fa-advertencias-titulo,
.fa-advertencias-titulo-largo,
.fa-superiores-titulo,
.fa-superiores-titulo-largo,
.fa-otros-articulos-titulo {
  width: 100%;
}

.fa-advertencias-titulo {
  margin-right: 20px;
}

.fa-complementos-articulos {
  width: 100%;
  text-align: center;
}

.fa-complementos-articulos-articulo {
  width: 76px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.fa-complementos-articulos-articulo a,
.fa-otros-articulos-articulo a {
  text-decoration: none;
}

.fa-otros-articulos,
.fa-otros-articulos-largo {
  width: 100%;
  margin-bottom: 20px;
}

.fa-advertencias-cuerpo,
.fa-advertencias-cuerpo-largo,
.fa-advertencias-ficha,
.fa-superiores-cuerpo,
.fa-superiores-cuerpo-largo {
  width: 100%;
}

.fa-otros-articulos-articulo {
  float: left;
  width: 100px;
  font-size: 0.8em;
  text-align: center;
  margin-right: 5px;
}

.fa-seccion-cuerpo {
  padding: 5px;
}

.fa-seccion-medio {
  width: 100%;
  max-width: 470px;
}

#anterior,
#siguiente {
  color: var(--naranja-titulo);
  font-weight: bold;
  font-size: 0.9em;
}

#anterior {
  margin-right: 30px;
}

#anterior:hover,
#siguiente:hover {
  color: #666666;
}

/* ----- Ventana modal antigua (#mask / #boxes) ----- */
#mask {
  position: absolute;
  z-index: 9000;
  background-color: #000;
  display: none;
}

#boxes .window {
  position: fixed;
  width: 440px;
  max-width: calc(100vw - 20px);
  height: 200px;
  display: none;
  z-index: 9999;
  padding: 20px;
}

#boxes #dialog a {
  text-decoration: none;
  font-size: 1.4em;
}

#dialog #nombre,
#dialog #email {
  width: 100%;
  max-width: 330px;
}

#error-dialog,
#error-dialog-nombre,
#error-dialog-email,
#error-comment-stars,
#error-comment-name,
#error-comment-comentario,
#error-comment,
#error-comment-politica {
  color: var(--rojo);
}

#error-comment-politica {
  margin-top: 30px;
}

#contenido-dialog-ok {
  color: green;
  font-size: 1.5em;
}

.tallasProducto:empty {
  display: none !important;
}

/* ----- Disponibilidad ----- */
.fa-disponible {
  align-items: center;
  gap: 6px;
  color: var(--verde-ok);
  font-weight: 700;
  font-size: 14px;
  margin-top: 4px;
}

.fa-disponible .glyphicon {
  color: var(--verde-ok);
}

.fa-no-disponible {
  margin-bottom: 10px;
  margin-left: 20px;
  color: var(--rojo);
}

/* ----- Comentarios ----- */
.fa-comentarios-boton {
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  padding: 10px;
  width: 200px;
  max-width: 100%;
  font-size: 1.5em;
  background-color: var(--gris-titulo);
}

.fa-comentarios-boton a {
  text-decoration: none;
  color: #ffffff;
}

.fa-comentarios-boton a:hover {
  color: var(--borde);
}

#star1, #star2, #star3, #star4, #star5,
.commentStar {
  width: 18px;
  height: 16px;
}

.stars {
  margin-bottom: 10px;
}

.fa-comentarios {
  border-radius: var(--radio-s);
  margin-bottom: 10px;
}

.fa-comentariosModeracion {
  border-radius: var(--radio-s);
  padding: 10px;
  margin-top: 10px;
}

.comentariosVerificadosFichaArticulo {
  margin: auto;
  width: 100%;
}

a.morelink {
  text-decoration: none;
  outline: none;
}

.morecontent span {
  display: none;
}

/* ----- Aviso de cookies ----- */
#mensaje-cookies {
  background-color: #666666;
  color: var(--borde);
}

.buttoncookies,
.buttoncookies:visited {
  display: inline-block;
  position: relative;
  padding: 5px 10px 6px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.buttoncookies:hover {
  background-color: #111;
  color: #fff;
}

.buttoncookies:active {
  top: 1px;
}

.orange.buttoncookies,
.orange.buttoncookies:visited {
  background-color: var(--naranja);
  width: 60px;
  text-align: center;
  padding: 8px 14px 9px;
}

.orange.buttoncookies:hover {
  background-color: var(--naranja-hover);
}

.gray.buttoncookies,
.gray.buttoncookies:visited {
  background-color: #cccccc;
  width: 60px;
  text-align: center;
  padding: 2px 14px;
}

.gray.buttoncookies:hover {
  background-color: #aaaaaa;
}

/* ----- Cantidad ----- */
.inputCantidad {
  font-size: 18px;
  text-align: center;
}

.contenedorCantidad {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
}

.labelCantidad {
  font-size: 16px;
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
  color: #555;
}

/* ----- Click & Collect ----- */
.contenedorClickAndCollect {
  color: #0070bf;
  font-weight: bold;
  margin-bottom: 20px;
}

.contenedorClickAndCollect a {
  color: #de6c24;
  text-decoration: none;
}

.contenedorClickAndCollect a:hover {
  color: #343d7a;
}

/* ----- Varios ----- */
.fb-like {
  margin-top: 10px;
}

.listaArticulosFoto,
.listaComplementosArticulo {
  width: 100%;
}

span.portesGratis {
  font-size: inherit;
  color: red;
  font-weight: bold;
}

.col-xs-6.imagenOfertaPopUp {
  position: absolute;
  text-align: initial;
}

.banerOferta {
  z-index: 999;
}

.enlaceYoutube {
  transition: all 300ms ease-out;
}

a.enlaceYoutube:hover {
  font-size: 125%;
  text-decoration: none;
  color: #ff0000 !important;
}

.product-text-left {
  font-size: 16px;
}

.separadorImagenDesktop {
  clear: both;
  margin-bottom: 75%;
}

.suscripciones {
  border: 0;
}

/* ----- Fecha de entrega (vale para todos los idiomas: _es, _pt, _it, _fr, _be, _lu, _de) -----
   El tamaño de letra y el margen los fija el bloque "DATOS DEL PRODUCTO" con !important */
[class*="fechaProducto_"].alert.alert-light {
  text-align: center;
}

/* ----- Botones y TouchSpin de Bootstrap ----- */
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
  margin-left: 0;
  margin-top: -1px;
}

.bootstrap-touchspin-up {
  padding: 11px;
}

.btn-default {
  text-shadow: 0 1px 0 #fff;
  background-repeat: repeat-x;
  border-color: #ccc !important;
}

.btn-default:focus,
.btn-default:hover {
  background-position: 0;
}

.input-group.bootstrap-touchspin {
  flex-wrap: nowrap;
}

/* ----- Popup "añadido a la cesta" (PROY-J-WEB) ----- */
.col-xs-12.imagen,
.col-xs-12.imagenOfertaPopUp,
.col-xs-12.textoSeungaUnidad,
.col-xs-12.textoChequeRegalo {
  text-align: center;
}

.col-xs-12.nombre {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-top: 3px;
}

.col-xs-6.precioAntiguo {
  text-align: center;
  color: currentcolor;
  font-size: 18px;
}

.col-xs-6.precioConDescuento,
.col-xs-12.precioConDescuento {
  text-align: center;
  color: var(--verde-ok);
  font-weight: bold;
  font-size: 24px;
}

.col-xs-12.precio,
.col-xs-12.precioAntiguoSinTachar {
  text-align: center;
  font-size: 24px;
  color: var(--azul);
}

.col-md-6.seguir-comprando > button.btn.btn-info {
  padding: 7px;
  font-size: 16px;
  margin-bottom: 5px;
}

.col-md-6.ir-a-cesta > a.btn.btn-warning {
  padding: 7px;
  font-size: 16px;
  color: white;
  font-weight: bold;
}

/* Margen fijo heredado: revisar con el HTML delante y centrar con flex/text-align */
div#fila15cp {
  font-size: 18px !important;
  font-weight: bold;
  color: coral;
  margin-left: 135px;
}

/* ----- Carrusel de fotos (Bootstrap) ----- */
.fotos .carousel-control-prev-icon,
.fotos .carousel-control-next-icon {
  opacity: 0.7;
}

.fotos .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23956398' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

.fotos .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23956398' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

.fa-media-img .fotos .carousel-control-prev-icon,
.fa-media-img .fotos .carousel-control-next-icon {
  width: 33px;
  height: 33px;
}

.contenedorFotos .fotos .carousel-control-prev-icon,
.contenedorFotos .fotos .carousel-control-next-icon {
  width: 20px;
  height: 20px;
}

.carouselFotos {
  overflow: hidden;
  display: inline-block !important;
}

.carouselFotos .carousel-item.item {
  transition-duration: 0.2s;
  transition-property: right, opacity !important;
}

.carousel-item.active:not(.next):not(.prev) {
  right: 0;
}

.carousel-item:not(.active):not(.left):not(.right) {
  opacity: 0;
  transition: none;
}

.carousel-item.item.next,
.carousel-item.item.right:not(.prev) {
  right: -120%;
}

.carousel-item.item.prev,
.carousel-item.item.left:not(.next) {
  right: 120%;
}

body.zoomPopup > *:not(.zoomPopup-cloned):not(.botonComprarFichaProducto) {
  display: none !important;
}

/* ----- Pestañas de la ficha (Descripción / Comentarios / ...) ----- */
#pills-tab {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 2px solid #f0f2f4;
  padding-bottom: 0;
  margin-bottom: 20px !important;
}

#pills-tab .nav-link {
  position: relative;
  color: var(--texto-gris) !important;
  font-weight: 600 !important;
  font-size: 14px;
  padding: 10px 18px !important;
  border-radius: var(--radio) var(--radio) 0 0;
  background: transparent;
  border: none;
  transition: background 0.15s ease, color 0.15s ease;
}

#pills-tab .nav-link.active {
  color: var(--azul) !important;
  background: var(--azul-claro);
}

#pills-tab .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--azul);
  border-radius: 2px;
}

#pills-tab .nav-link:not(.active):hover {
  background: var(--fondo-suave);
  color: var(--azul) !important;
}

#pills-tabContent {
  padding-top: 4px;
}

/* ----- Corazón de favoritos -----
   El checkbox se oculta visualmente pero sigue siendo accesible con teclado */
.checkboxHeart {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.checkboxHeart + label svg {
  cursor: pointer;
  overflow: visible;
  width: 60px;
}

.checkboxHeart:focus-visible + label svg {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 50%;
}

svg #heart {
  transform-origin: center;
  animation: animateHeartOut 0.3s linear forwards;
}

svg #main-circ {
  transform-origin: 29.5px 29.5px;
}

.checkboxHeart:checked + label svg #heart {
  transform: scale(0.2);
  fill: #e2264d;
  animation: animateHeart 0.3s linear forwards 0.25s;
}

.checkboxHeart:checked + label svg #main-circ {
  transition: all 2s;
  animation: animateCircle 0.3s linear forwards;
  opacity: 1;
}

.checkboxHeart:checked + label svg #heartgroup1,
.checkboxHeart:checked + label svg #heartgroup2,
.checkboxHeart:checked + label svg #heartgroup3,
.checkboxHeart:checked + label svg #heartgroup4,
.checkboxHeart:checked + label svg #heartgroup5,
.checkboxHeart:checked + label svg #heartgroup6,
.checkboxHeart:checked + label svg #heartgroup7 {
  opacity: 1;
  transition: 0.1s opacity 0.3s;
}

.checkboxHeart:checked + label svg [id^="heartgroup"] #heart1,
.checkboxHeart:checked + label svg [id^="heartgroup"] #heart2 {
  transform-origin: 0 0 0;
}

.checkboxHeart:checked + label svg [id^="heartgroup"] #heart1 {
  transition: 0.5s transform 0.3s;
}

.checkboxHeart:checked + label svg [id^="heartgroup"] #heart2 {
  transition: 1.5s transform 0.3s;
}

.checkboxHeart:checked + label svg #heartgroup1 #heart1 { transform: scale(0) translate(0, -30px); }
.checkboxHeart:checked + label svg #heartgroup1 #heart2 { transform: scale(0) translate(10px, -50px); }
.checkboxHeart:checked + label svg #heartgroup2 #heart1 { transform: scale(0) translate(30px, -15px); }
.checkboxHeart:checked + label svg #heartgroup2 #heart2 { transform: scale(0) translate(60px, -15px); }
.checkboxHeart:checked + label svg #heartgroup3 #heart1 { transform: scale(0) translate(30px, 0); }
.checkboxHeart:checked + label svg #heartgroup3 #heart2 { transform: scale(0) translate(60px, 10px); }
.checkboxHeart:checked + label svg #heartgroup4 #heart1 { transform: scale(0) translate(30px, 15px); }
.checkboxHeart:checked + label svg #heartgroup4 #heart2 { transform: scale(0) translate(40px, 50px); }
.checkboxHeart:checked + label svg #heartgroup5 #heart1 { transform: scale(0) translate(-10px, 20px); }
.checkboxHeart:checked + label svg #heartgroup5 #heart2 { transform: scale(0) translate(-60px, 30px); }
.checkboxHeart:checked + label svg #heartgroup6 #heart1 { transform: scale(0) translate(-30px, 0); }
.checkboxHeart:checked + label svg #heartgroup6 #heart2 { transform: scale(0) translate(-60px, -5px); }
.checkboxHeart:checked + label svg #heartgroup7 #heart1 { transform: scale(0) translate(-30px, -15px); }
.checkboxHeart:checked + label svg #heartgroup7 #heart2 { transform: scale(0) translate(-55px, -30px); }

@keyframes animateCircle {
  40%  { transform: scale(10); opacity: 1; fill: #dd4688; }
  55%  { transform: scale(11); opacity: 1; fill: #d46abf; }
  65%  { transform: scale(12); opacity: 1; fill: #cc8ef5; }
  75%  { transform: scale(13); opacity: 1; fill: transparent; stroke: #cc8ef5; stroke-width: 0.5; }
  85%  { transform: scale(17); opacity: 1; fill: transparent; stroke: #cc8ef5; stroke-width: 0.2; }
  95%  { transform: scale(18); opacity: 1; fill: transparent; stroke: #cc8ef5; stroke-width: 0.1; }
  100% { transform: scale(19); opacity: 1; fill: transparent; stroke: #cc8ef5; stroke-width: 0; }
}

@keyframes animateHeart {
  0%   { transform: scale(0.2); }
  40%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes animateHeartOut {
  0%   { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ----- Popups (magnific popup y popup propio) ----- */
.mfp-figure button.mfp-close {
  background-color: rgba(100, 100, 100, 0.5);
  width: 1em;
  margin-right: 8px;
  text-align: center;
  padding-right: 0;
}

#popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
}

.content-popup {
  position: relative;
  width: calc(100% - 20px);
  max-width: 500px;
  min-height: 100px;
  margin: 120px auto 0;
  padding: 10px;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 2px 5px #666666;
  border: 1px solid var(--azul);
}

.content-popup h2 {
  color: #48484b;
  margin-top: 30px;
  padding-bottom: 4px;
  text-align: center;
}

.popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  display: none;
  background-color: #777777;
  cursor: pointer;
  opacity: 0.7;
}

/* Ojo: esta regla afecta al .close de TODOS los modales de Bootstrap de la página */
.close {
  position: absolute;
  right: 15px;
  font-size: 18px;
}

/* ----- Tabla comparativa ----- */
th.sticky-column {
  position: sticky;
  left: -2px;
  z-index: 1;
  background-color: white;
  min-width: 135px;
  padding: 20px !important;
}

td.sticky-column {
  padding: 20px !important;
}

.col-sm-12.col-md-12.col-lg-4.col-xl-4.info-product {
  justify-content: space-between;
  border-bottom: 1px solid #d3d3d3;
  margin-bottom: 10px;
  line-height: 25px;
  font-size: 12px;
  color: #4e4949;
}

/* ----- Reglas especiales ----- */
.cn_content + div > a {
  color: black !important;
}

.modal-body.modal-comprar {
  min-height: 400px !important;
  max-height: 100% !important;
}

.carritoLP {
  position: absolute;
  width: 100%;
  margin-top: 20px;
  text-align: center;
  opacity: 0;
  transition: opacity 1s;
}

/* ----- Compartir en redes (versión antigua; la nueva usa .social-share__btn) ----- */
.social-share a:not(.social-share__btn) {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  text-align: center;
  line-height: 33px;
  transition: background-color 0.3s ease;
}

.btn-facebook       { background-color: #4267b2; }
.btn-facebook:hover { background-color: #365899; }
.btn-twitter        { background-color: #1da1f2; }
.btn-twitter:hover  { background-color: #0d95e8; }
.btn-whatsapp       { background-color: #25d366; }
.btn-whatsapp:hover { background-color: #1ebd5b; }


/* =====================================================================
   4. COMPONENTES NUEVOS
   ===================================================================== */

/* ----- Botón comprar ----- */
.botonComprarFichaProducto {
  height: 48px;
  border-radius: var(--radio);
  padding: 0 20px;
  background-color: var(--naranja);
  border: none;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 3px 10px rgba(251, 106, 18, 0.28);
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.botonComprarFichaProducto:hover {
  background-color: var(--azul);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0, 144, 216, 0.28);
}

/* ----- Sumador − [n] + ----- */
.fichaCantidad {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--borde-cantidad);
  border-radius: 8px;
  overflow: hidden;
  vertical-align: middle;
}

.fichaCantidad__btn {
  width: 36px;
  height: 44px;
  background: #f5f5f5;
  border: none;
  color: #333;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.fichaCantidad__btn:hover {
  background: #e9e9e9;
}

.fichaCantidad .inputCantidad,
.contenedorCantidad .inputCantidad {
  height: 44px !important;
  text-align: center;
  border: none !important;
  border-left: 1px solid var(--borde-cantidad) !important;
  border-right: 1px solid var(--borde-cantidad) !important;
  border-radius: 0 !important;
  float: none !important;
  font-size: 16px !important;
  -moz-appearance: textfield;
  appearance: textfield;
}

.fichaCantidad .inputCantidad {
  width: 46px !important;
}

.contenedorCantidad .inputCantidad {
  width: 50px !important;
}

.fichaCantidad .inputCantidad::-webkit-outer-spin-button,
.fichaCantidad .inputCantidad::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Contador con TouchSpin */
.contenedorCantidad .bootstrap-touchspin {
  display: inline-flex !important;
  align-items: stretch;
  width: auto !important;
  border: 1px solid var(--borde-cantidad);
  border-radius: 8px;
  overflow: hidden;
}

.contenedorCantidad .input-group-btn {
  display: inline-flex !important;
  width: auto !important;
}

.contenedorCantidad .bootstrap-touchspin-up,
.contenedorCantidad .bootstrap-touchspin-down,
button.btn.btn-default.bootstrap-touchspin-up,
button.btn.btn-default.bootstrap-touchspin-down {
  margin: 0 !important;
  padding: 0 !important;
  width: 40px !important;
  height: 44px;
  background: #f5f5f5 !important;
  background-image: none !important;
  color: #333 !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 20px !important;
  box-shadow: none !important;
}

.contenedorCantidad .bootstrap-touchspin-up:hover,
.contenedorCantidad .bootstrap-touchspin-down:hover {
  background: #e9e9e9 !important;
}

/* ----- Precio: ahorro, tachado, oferta, cheque regalo ----- */
.fa-precio-ahorro {
  display: inline-block;
  margin-left: 5px;
  background: var(--verde-claro);
  color: var(--azul) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 3px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

.precioAnteriorB {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.fa-precio-tipo-oferta.chequeRegalo {
  background: var(--verde-claro);
  color: var(--verde);
}

.fa-precio-tipo-oferta span[style*="d40000"] {
  color: var(--naranja-oscuro) !important;
}

.ofertaFichaArticulo {
  display: inline-block;
  background: var(--naranja-claro);
  color: var(--rojo);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
}

/* ----- Datos del producto (SKU, marca, edad, envío, fecha, financiación) ----- */
#info-producto {
  flex-wrap: wrap !important;
  white-space: normal !important;
  font-size: 12px !important;
  gap: 8px !important;
  margin: 10px 0 !important;
}

#info-producto > div {
  background: var(--fondo-suave);
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--texto-gris);
}

/* Estas reglas mandan sobre el tamaño de letra y el margen inferior de estas
   clases en todas las resoluciones (por eso no se repiten en las media queries) */
.marcaProducto,
.edadProducto,
.envioGratisProducto,
.financiacionProducto,
[class^="fechaProducto"],
[class*=" fechaProducto"],
.recogidaTiendaProducto,
.tallasProducto {
  font-size: 14px !important;
  padding: 4px 0;
  color: var(--texto-suave);
  line-height: 1.4;
  margin-bottom: 0 !important;
}

.marcaProducto b,
.edadProducto b,
.envioGratisProducto b,
.financiacionProducto > b,
[class^="fechaProducto"] b,
[class*=" fechaProducto"] b,
.recogidaTiendaProducto b,
.tallasProducto b {
  color: var(--texto);
  font-weight: 600;
  margin-right: 4px;
}

.marcaProducto a span {
  color: var(--azul) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.envioGratisProducto span[style*="green"] {
  color: var(--verde) !important;
  font-weight: 700;
  background: var(--verde-claro);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 13px;
}

[class^="fechaProducto"] span[style*="green"],
[class*=" fechaProducto"] span[style*="green"] {
  color: var(--verde) !important;
  font-weight: 700;
  text-transform: uppercase;
}

[class^="fechaProducto"].alert,
[class*=" fechaProducto"].alert {
  border-bottom: none;
}

.recogidaTiendaProducto img {
  height: 22px;
  width: auto;
  vertical-align: middle;
  margin-left: 4px;
}

/* Financiación (Aplazame) */
a.financiacionProducto {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: auto !important;
  margin-top: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
  border-bottom: none;
  text-decoration: none !important;
  color: var(--texto-suave);
  cursor: pointer;
}

a.financiacionProducto br {
  display: none;
}

a.financiacionProducto svg {
  vertical-align: middle;
}

.financiacionProducto .financiacion {
  color: var(--texto-suave) !important;
  font-size: 14px !important;
}

.financiacionProducto span[style*="fb6a12"] {
  color: var(--naranja) !important;
  font-weight: 700;
  font-size: 14px !important;
}

/* Financiación dentro de #info-producto: en fila si es una, apiladas si son varias */
#info-producto > div.financiacionProducto {
  display: flex !important;
  flex-wrap: wrap !important;
  white-space: normal !important;
  align-items: center;
  gap: 4px 8px;
}

#info-producto > div.financiacionProducto > b {
  white-space: normal !important;
  font-size: 13px;
  color: #555;
}

#info-producto a.financiacionProducto {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 6px 0 !important;
  white-space: normal !important;
  text-decoration: none !important;
  color: var(--texto-suave) !important;
  font-weight: 400 !important;
  border-bottom: 1px dashed var(--borde-suave);
}

#info-producto a.financiacionProducto:last-of-type {
  border-bottom: none;
}

#info-producto a.financiacionProducto svg,
#info-producto a.financiacionProducto img {
  flex-shrink: 0;
  height: 16px;
  width: auto;
}

#info-producto .financiacionProducto .financiacion {
  color: var(--texto-suave) !important;
  font-size: 13px !important;
  white-space: normal !important;
}

#info-producto .financiacionProducto span[style*="fb6a12"] {
  color: var(--naranja) !important;
  font-weight: 700;
  font-size: 13px !important;
}

/* ----- Valoración con estrellas ----- */
.comentariosFichaProductoTitulo {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.comentariosFichaProductoTitulo picture,
.comentariosFichaProductoTitulo img.imagenEstrellasItemArticulo {
  float: none !important;
  display: block;
}

.imagenEstrellasItemArticulo {
  height: 18px;
  width: auto;
}

.valoracionTexto {
  display: flex;
  align-items: center;
  gap: 8px;
  float: none !important;
  margin: 0 !important;
  font-size: 14px;
}

.valoracionNota {
  font-weight: 700;
  color: var(--texto);
}

.valoracionSobre {
  color: #99a;
  font-weight: 400;
}

.valoracionLink {
  color: var(--azul);
  text-decoration: none;
  font-weight: 600;
}

.valoracionLink:hover {
  text-decoration: underline;
}

/* ----- Ventajas + métodos de pago ----- */
.articulo-card-ventajas {
  border: none;
  background: #f8faf9;
  border-radius: 16px;
  padding: 8px 20px;
  margin: 8px auto 1.2rem;
  max-width: 520px;
}

.ventajas-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ventaja-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.ventaja-item + .ventaja-item {
  border-top: 1px solid #eaefec;
}

.ventaja-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.ventaja-icon img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 30px;
  object-fit: contain;
}

.ventaja-label {
  font-size: 14px;
  color: var(--texto-suave);
  font-weight: 500;
  line-height: 1.3;
}

.metodos-pago {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #eaefec;
  margin-top: 8px;
  padding-top: 14px;
}

.metodos-pago img {
  display: block;
  height: 32px;
  width: auto;
  max-width: 95%;
  margin: 0 auto;
  object-fit: contain;
  opacity: 0.9;
}

/* ----- Compartir en redes ----- */
.social-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto 18px;
}

.social-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fondo-suave);
  color: #666;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.social-share__btn svg {
  width: 20px !important;
  height: 20px !important;
  overflow: visible;
  vertical-align: middle;
}

.social-share__btn:hover {
  transform: translateY(-2px);
  color: #fff;
}

.social-share__btn:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
}

.social-share__btn--fb:hover  { background: #1877f2; }
.social-share__btn--x:hover   { background: #000; }
.social-share__btn--wa:hover  { background: #25d366; }
.social-share__btn--pin:hover { background: #e60023; }

/* ----- Regalo en la ficha ----- */
.regaloProducto {
  background: #f7fbf8;
  border: none;
  border-left: 3px solid var(--verde);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin: 12px 0;
}

.regaloProducto__titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--verde);
  margin-bottom: 10px;
}

.regaloProducto__titulo i {
  font-size: 16px;
}

.regaloProducto__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.regaloProducto__item + .regaloProducto__item {
  border-top: 1px solid #e3efe7;
}

.regaloProducto__img {
  flex-shrink: 0;
  width: 60px;
}

.regaloProducto__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.regaloProducto__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.regaloProducto__nombre {
  font-size: 14px;
  font-weight: 600;
  color: var(--azul);
  text-decoration: none;
  line-height: 1.3;
}

.regaloProducto__nombre:hover {
  text-decoration: underline;
}

.regaloProducto__precio {
  display: flex;
  align-items: center;
  gap: 8px;
}

.regaloProducto__tachado {
  font-size: 13px;
  color: #de6b1c;
  text-decoration: line-through;
}

.regaloProducto__gratis {
  font-size: 15px;
  font-weight: 700;
  color: var(--verde);
}

/* ----- Badges de promo (esquina superior de la imagen) ----- */
.promo-badge {
  position: absolute;
  left: 0;
  top: 18px;
  z-index: 10;
  display: flex;
  align-items: center;
  text-decoration: none;
  --promo-color: var(--azul);
  --promo-texto: var(--azul);
}

.promo-badge--azul    { --promo-color: var(--azul);    --promo-texto: var(--azul); }
.promo-badge--rojo    { --promo-color: #e53935;        --promo-texto: #e53935; }
.promo-badge--cole    { --promo-color: #e63946;        --promo-texto: #e63946; }
.promo-badge--verde   { --promo-color: var(--verde);   --promo-texto: var(--verde); }
.promo-badge--naranja { --promo-color: var(--naranja); --promo-texto: var(--naranja-oscuro); }

.promo-badge__barra {
  display: inline-block;
  width: 5px;
  height: 26px;
  border-radius: 4px 0 0 4px;
  background: var(--promo-color);
}

.promo-badge__texto {
  background: #fff;
  color: var(--promo-texto);
  font-size: 13px;
  font-weight: 700;
  padding: 5px 18px 5px 10px;
  border-radius: 0 16px 16px 0;
  letter-spacing: 1px;
  box-shadow: 0 2px 10px -5px rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.promo-badge:hover .promo-badge__texto {
  transform: translateX(2px);
  box-shadow: 0 3px 12px -4px rgba(0, 0, 0, 0.4);
}

/* ----- Título y galería antigua ----- */
.nombreProducto {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--texto);
  margin: 0 0 6px;
}

.nombreProducto b {
  font-weight: 600;
}

.info-product hr {
  border: none;
  border-top: 1px solid var(--borde-suave);
  margin: 16px 0;
}

.fa-media-img img,
.fa-media-carrusel img {
  border-radius: 14px;
}

.contenedorFotos img {
  border-radius: 8px;
  border: 1px solid var(--borde-suave);
  transition: border-color 0.15s ease, transform 0.1s ease;
  cursor: pointer;
}

.contenedorFotos img:hover {
  border-color: var(--naranja);
  transform: translateY(-2px);
}

.info-product .alert-light {
  border: 1px solid #ffe0c2 !important;
  background: #fff8f2 !important;
  border-radius: var(--radio) !important;
  padding: 8px 12px !important;
}

.info-product .alert-light a {
  color: var(--naranja-oscuro) !important;
  font-weight: 600;
}

/* ----- Barra flotante con el precio (encima de .contenedorBotonesPieMovil) ----- */
.overlay-precio {
  position: fixed;
  /* Se suma el safe-area porque la barra de comprar también lo suma en su padding:
     en iPhone vale 0 con la barra de Safari visible y ~34px cuando se oculta al bajar */
  bottom: calc(var(--alto-pie-movil) + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  z-index: 999;
  display: none;
  background: white;
  border-top: 1px solid #e0e6ed;
  animation: slideUp 0.3s ease-out;
}

.overlay-precio.visible {
  display: block;
  font-size: smaller;
}

.overlay-precio .fa-disponible {
  display: none;
}

.overlay-precio .textoChequeRegalo {
  color: var(--azul) !important;
}

.overlay-precio .fa-precio-grande,
.overlay-precio .fa-currency {
  color: black;
}

.contenedorBotonesPieMovil {
  z-index: 280;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Modal "Artículo añadido correctamente" -----
   Estas reglas son un parche para que el fondo oscuro no tape el modal en móvil.
   La solución de fondo es mover el modal al final del <body> con JS:
       $('#modal-comprar-directo').appendTo('body');
   Cuando lo hagas, puedes borrar el pointer-events y el bloque @media de abajo,
   y así volverá a cerrarse al pulsar fuera. */
#modal-comprar-directo {
  z-index: 999999 !important;
}

.modal-backdrop {
  z-index: 999998 !important;
  pointer-events: none !important;
}

body.modal-open .overlay-precio {
  display: none !important;
}

@media (max-width: 767.98px) {
  .modal-backdrop.show {
    opacity: 0 !important;
  }

  .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
}

/* ----- Complementos del artículo (carrusel propio, prefijo artcomp-) ----- */
.artcomp-titulo h2 {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #333;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.artcomp-titulo h2 span {
  color: var(--azul);
}

.artcomp-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.artcomp-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 20px;
  -webkit-overflow-scrolling: touch;
}

.artcomp-track::-webkit-scrollbar {
  height: 6px;
}

.artcomp-track::-webkit-scrollbar-thumb {
  background: #e0e4e8;
  border-radius: var(--radio);
}

.artcomp-flecha {
  flex-shrink: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.artcomp-flecha:hover {
  background: var(--naranja);
  color: #fff;
  border-color: var(--naranja);
}

.artcomp-flecha:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
}

.artcomp-tarjeta {
  flex: 0 0 230px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 16px;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.artcomp-tarjeta:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

.artcomp-imgLink {
  display: block;
}

.artcomp-img {
  width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: contain;
  border-radius: var(--radio);
}

.artcomp-nombre {
  font-size: 14px;
  color: #333;
  font-weight: 600;
  line-height: 1.35;
  margin: 12px 0 8px;
  min-height: 2.6em;
}

.artcomp-precio {
  margin: 4px 0 10px;
}

.artcomp-precio .fa-precio-pequeno-tachado,
.artcomp-precio [style*="line-through"] {
  display: block;
  color: #999 !important;
  font-size: 13px !important;
  text-decoration: line-through;
}

.artcomp-precio .fa-precio-tipo-oferta,
.artcomp-precio .ofertaFichaArticulo {
  color: #e5312f !important;
  font-weight: 700;
  font-size: 15px;
  background: none;
  padding: 0;
}

.artcomp-boton {
  display: block;
  margin-top: auto;
  background: var(--naranja);
  color: #fff !important;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-decoration: none;
  border-radius: var(--radio);
  padding: 12px;
  box-shadow: 0 3px 10px rgba(251, 106, 18, 0.25);
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.artcomp-boton:hover {
  background-color: var(--azul);
  transform: translateY(-1px);
  color: #fff !important;
}

@media (max-width: 991.98px) {
  .artcomp-track {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .artcomp-tarjeta { flex: 0 0 78vw; }
  .artcomp-flecha  { display: none; }
}

@media (min-width: 992px) {
  .artcomp-track {
    justify-content: center;
    overflow-x: visible;
    flex-wrap: wrap;
  }

  .artcomp-flecha {
    display: none;
  }
}

/* ----- Promo "la Nª unidad" (descuentoMasNArticulos) ----- */
.fa-promo-unidad {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--naranja-claro);
  color: var(--naranja-oscuro);
  border: 1px solid #ffd8bf;
  border-radius: 24px;
  padding: 6px 16px 6px 6px;
  margin: 8px 0 14px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.fa-promo-unidad__tag {
  background: var(--naranja);
  color: #fff;
  font-weight: 800;
  border-radius: 18px;
  padding: 3px 12px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(251, 106, 18, 0.3);
}

.fa-promo-unidad__texto b {
  color: var(--naranja-oscuro);
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .fa-precio .fa-promo-unidad {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: none;
    margin: 8px 0;
    padding: 10px 12px;
    background: #fff5ed;
    border: 1px solid #ffdbc2;
    border-radius: var(--radio);
    text-align: center;
    white-space: normal;
  }

  .fa-precio .fa-promo-unidad__tag {
    display: block;
    float: none;
    margin: 0;
    border: 0;
    font-size: 14px !important;
    line-height: 1.2;
  }

  .fa-precio .fa-promo-unidad__texto {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    color: #903900;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
  }

  .fa-precio .fa-promo-unidad__texto strong,
  .fa-precio .fa-promo-unidad__texto b {
    display: inline-block;
    float: none;
    color: #b44400;
    font-size: 16px !important;
    font-weight: 800;
    white-space: nowrap;
  }
}

/* Etiqueta "unidad" dentro de la zona de compra
   (en escritorio y tablet va encima de la fila; en móvil, ver bloque de móvil) */
.unidad {
  position: static;
  order: -1;
  flex: 0 0 100%;
  display: inline-block;
  width: fit-content;
  margin: 0;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #e8590c;
  border: 1px solid #ffd8bf;
  border-radius: 6px;
  text-align: center;
}


/* ----- Galería de la ficha (prefijo gf-) ----- */
.gf {
  --gf-alto: 620px;          /* alto de la foto principal en escritorio */
  --gf-acento: var(--naranja);
  --gf-rosa: #e04f9a;        /* color de las flechas */
  --gf-foco: #0d6efd;
  --gf-mini-ancho: 75px;
  --gf-mini-alto: 88px;
  --gf-hueco: 75px;          /* espacio lateral para las flechas */
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.gf .gf-principal {
  position: relative;
  width: 100%;
  height: var(--gf-alto);
  outline: none;
}

.gf .gf-slide {
  position: absolute;
  top: 0;
  right: var(--gf-hueco);
  bottom: 0;
  left: var(--gf-hueco);
  display: none;
  align-items: center;
  justify-content: center;
}

.gf .gf-slide.gf-activa {
  display: flex;
  animation: gf-fundido 0.3s ease;
}

@keyframes gf-fundido {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* El gesto horizontal sobre las fotos cambia de foto; sobre el vídeo no se toca */
.gf .gf-zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.gf .gf-img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
}

/* Cursor de lupa (si el navegador no admite cursores SVG, usa zoom-in) */
.gf .gf-zoom,
.gf .gf-zoom *,
.gf .gf-img {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='8' fill='%23ffffff' fill-opacity='.35' stroke='%23ffffff' stroke-width='5'/%3E%3Cline x1='19' y1='19' x2='27' y2='27' stroke='%23ffffff' stroke-width='7'/%3E%3Ccircle cx='13' cy='13' r='8' stroke='%23333333' stroke-width='2.5'/%3E%3Cline x1='19' y1='19' x2='27' y2='27' stroke='%23333333' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E") 13 13, zoom-in !important;
}

/* Vídeo: ocupa el ancho en 16:9 y nunca más alto que la galería */
.gf .gf-video {
  position: relative;
  width: 100%;
  max-width: calc(var(--gf-alto) * 16 / 9);
  background: #000;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.gf .gf-video > img,
.gf .gf-video > iframe {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  object-fit: cover;
}

.gf .gf-video-portada {
  cursor: pointer;
}

.gf .gf-video-portada:hover > img {
  filter: brightness(0.85);
}

.gf .gf-video-portada:focus-visible {
  outline: 3px solid var(--gf-foco);
  outline-offset: 3px;
}

/* Icono de play (solo CSS) */
.gf .gf-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  background: rgba(33, 33, 33, 0.8);
  border-radius: 14px;
  pointer-events: none;
}

.gf .gf-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}

.gf .gf-video-portada:hover .gf-play,
.gf .gf-video-portada:focus-visible .gf-play {
  background: #f00;
}

/* Flechas */
.gf .gf-flecha {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gf-hueco);
  height: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

.gf .gf-prev { left: 0; }
.gf .gf-next { right: 0; }

.gf .gf-flecha span {
  display: block;
  width: 22px;
  height: 22px;
  border-top: 6px solid var(--gf-rosa);
  border-right: 6px solid var(--gf-rosa);
  border-radius: 2px;
}

.gf .gf-prev span { transform: rotate(-135deg); margin-left: 10px; }
.gf .gf-next span { transform: rotate(45deg);   margin-right: 10px; }

.gf .gf-flecha:hover span {
  opacity: 0.75;
}

.gf .gf-flecha:focus-visible {
  outline: 3px solid var(--gf-foco);
  outline-offset: 2px;
}

/* Miniaturas */
.gf .gf-miniaturas {
  display: flex;
  justify-content: safe center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  contain: inline-size;            /* su ancho no depende de cuántas haya */
  overscroll-behavior-x: contain;  /* el gesto no arrastra la página */
  -webkit-overflow-scrolling: touch;
  margin-top: 12px;
  padding: 4px 4px 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.gf .gf-mini {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--gf-mini-ancho);
  height: var(--gf-mini-alto);
  margin: 0;
  padding: 0;
  border: 2px solid #eee;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.gf .gf-mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gf .gf-mini:hover {
  border-color: #ccc;
}

.gf .gf-mini.gf-activa {
  border-color: var(--gf-acento);
}

.gf .gf-mini:focus {
  outline: none;
}

.gf .gf-mini:focus-visible {
  outline: 3px solid var(--gf-foco);
  outline-offset: 2px;
}

.gf .gf-mini-video {
  background: #000;
}

.gf .gf-mini-video img {
  object-fit: cover;
}

.gf .gf-mini-video .gf-play {
  width: 28px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255, 0, 0, 0.9);
}

.gf .gf-mini-video .gf-play::after {
  border-width: 5px 0 5px 8px;
}

@media (max-width: 767.98px) {
  .gf {
    --gf-alto: 320px;
    --gf-hueco: 36px;
    --gf-mini-ancho: 56px;
    --gf-mini-alto: 72px;
  }

  .gf .gf-play {
    width: 56px;
    height: 40px;
  }

  .gf .gf-flecha span {
    width: 16px;
    height: 16px;
    border-width: 4px 4px 0 0;
  }

  /* Miniaturas más juntas y sin barra de scroll visible */
  .gf .gf-miniaturas {
    justify-content: flex-start;
    gap: 8px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .gf .gf-miniaturas::-webkit-scrollbar {
    display: none;
  }

  .gf .gf-mini {
    scroll-snap-align: start;
  }

  /* En el zoom de móvil no se muestra el vídeo */
  .gf.gf-zoom-activo .gf-mini-video,
  .gf.gf-zoom-activo .gf-slide:has(.gf-video, .gf-video-portada) {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gf .gf-slide.gf-activa {
    animation: none;
  }

  .gf .gf-mini {
    transition: none;
  }
}

/* Vídeo en móvil: capa a pantalla completa (va directamente en <body>) */
html.gf-sin-scroll,
html.gf-sin-scroll body {
  overflow: hidden !important;
}

.gf-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
           env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  background: rgba(0, 0, 0, 0.92);
  animation: gf-fundido 0.2s ease;
}

.gf-modal-video {
  position: relative;
  width: 100%;
  max-width: calc(100vh * 16 / 9);   /* navegadores antiguos */
  max-width: calc(100dvh * 16 / 9);  /* descuenta la barra del navegador en móvil */
  aspect-ratio: 16 / 9;
  background: #000;
}

.gf-modal-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.gf-modal-cerrar {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.gf-modal-cerrar:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}


/* =====================================================================
   5. MEDIA QUERIES DE LOS COMPONENTES ANTIGUOS
   ===================================================================== */

/* ---------------------------------------------------------------------
   Hasta 1199.98px — móvil + tablet
   --------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .contenedorFotos {
    margin-left: 0;
  }

  .fotos.carousel-control-prev {
    left: -5px;
    width: auto;
  }

  .fotos.carousel-control-next {
    right: -15px;
    width: auto;
  }

  h1.nombreProducto,
  .fa-disponible,
  .ofertaFichaArticulo {
    text-align: center;
  }

  .precioAnteriorB {
    justify-content: center;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------
   Hasta 991.98px — móvil + tablet vertical
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  #pills-tab {
    gap: 1px;
  }

  .fa-boton-comprar {
    margin-bottom: 2%;
    background: #fff;
    padding: 0 14px 10px;
    align-items: center;
    gap: 10px;
  }

  .botonComprarFichaProducto {
    flex: 1;
    min-width: 0;
    height: 48px;
    margin-top: 1px;
    font-size: 15px;
  }

  #info-producto,
  .txtArticulo {
    padding-bottom: 5px;
  }

  .labelCantidad {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------------
   Hasta 767.98px — móvil
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {

  /* Barra fija de comprar */
  .fa-boton-comprar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 14px 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
  }

  /* Hueco al final de la página para que la barra fija no tape el contenido */
  body::after {
    content: "";
    display: block;
    height: var(--alto-barra-compra);
  }

  .unidad {
    order: 1;
    flex: 0 0 100%;
    width: 100%;
    margin: -15px 0;
    padding: 2px 8px;
    font-size: 11px;
    text-align: center;
  }

  #contenedorCantidad {
    flex: 0 0 auto;
  }

  /* Galería antigua */
  .product-images-left.sibling-fade {
    display: inline-flex;
    text-align: center;
  }

  img.product-images-left-mas-vistas {
    width: 180%;
    height: auto;
    max-width: 60px;
  }

  .product-images-marcas-left.sibling-fade {
    text-align: center;
  }

  .fa-media-img.popup-gallery {
    margin-top: 18px;
  }

  .col-sm-12.contenedorFotos {
    max-height: 91px;
  }

  .imgFichaArticulo {
    width: 100%;
    height: auto;
  }

  /* Título y valoración */
  .fa-titulo-marca {
    display: block;
  }

  .fa-titulo-marca img {
    width: 50px;
    height: auto;
  }

  .comentariosFichaProductoTitulo {
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    text-align: center;
    font-size: smaller;
  }

  /* Precio */
  .stock {
    text-align: center;
    margin-bottom: 5px;
  }

  .fa-precio,
  .textoChequeRegalo,
  .fa-precio-tipo-oferta.chequeRegalo {
    text-align: center;
  }

  .ofertaFichaArticulo {
    margin-bottom: 5px;
  }

  img.bannerFichaArticulo {
    width: 100%;
    margin-top: 5px;
    margin-bottom: -18px;
  }

  /* Datos del producto */
  .refProducto {
    font-size: 16px;
  }

  .regaloProducto,
  .envioProducto,
  .entregaDomicilioProducto,
  .eligeModeloProducto {
    font-size: 18px;
  }

  .modeloProducto {
    font-size: 13px;
  }

  a.btn.financiacionProducto {
    text-align: center;
    font-size: 10px !important;
  }

  a.btn.financiacionProducto img {
    display: none;
  }

  .contenedorClickAndCollect.contenedorEscritorio {
    text-align: center;
    font-size: 13px;
  }

  .divYoutube {
    text-align: center;
    font-size: 18px;
  }

  button.btn.btn-warning.botonComprarFichaProducto.btn-primary.btn-lg.modeloButton {
    display: none;
  }

  .banerOferta {
    position: static;
  }

  .fa-otros-articulos-largo {
    margin-bottom: -10px;
  }

  /* Complementos (versión antigua cn_) */
  .cn_articulosComplemento_articulo {
    width: 50%;
    float: left;
    margin-top: 15px !important;
  }

  img.img_cn_articulosComplemento_articulo {
    width: 70%;
  }

  .nombre_cn_articulosComplemento_articulo {
    font-size: 15px !important;
    height: 4.5em !important;
  }

  span.precio-normal-complementos {
    font-size: 11px !important;
  }

  h2.h1.products-section-title.text-uppercase.home_secttion_title {
    font-size: 17px;
  }

  a.boton_cn_articulosComplemento_articulo.cn_v2_dynamic_element_button {
    max-width: 96% !important;
    padding: 12px 9px !important;
    margin-top: 3px !important;
  }

  a.boton_cn_articulosComplemento_articulo.cn_v2_dynamic_element_button > span {
    font-size: 15px;
  }

  /* Varios */
  .navbar-fixed-top {
    position: fixed !important;
  }

  div#fila15cp {
    margin-left: 90px;
  }

  /* Barra flotante de precio */
  .overlay-precio .fa-precio {
    margin-bottom: -8px !important;
  }

  .overlay-precio .fa-precio-grande {
    font-size: 32px !important;
  }

  .overlay-precio .ofertaFichaArticulo {
    margin-bottom: -5px !important;
  }

  .overlay-precio .fa-precio-tipo-oferta.chequeRegalo {
    margin-top: 5px;
    margin-bottom: -8px;
  }
}

/* ---------------------------------------------------------------------
   Hasta 575.98px — móvil pequeño
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {

  /* El título y el texto ocupan todo el ancho anulando el padding de la columna
     (antes era width:118% + margin-left:-30px, que provocaba scroll lateral) */
  h1.nombreProducto,
  .col-xs-12.col-sm-8.col-md-7.col-lg-7.col-xl-12.txtArticulo {
    margin-left: -15px;
    margin-right: -15px;
  }

  .col-xs-12.col-sm-8.col-md-7.col-lg-7.col-xl-12.txtArticulo,
  .separadorEspecial {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .infoPvp {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    text-align: center;
  }

  .precioAnteriorB {
    display: block !important;
  }

  header.cabecera-movil-atida {
    height: 56px;
  }

  /* 16px evita que iOS haga zoom al tocar el buscador */
  input.searchNavigation {
    font-size: 16px;
  }

  .mfp-figure button.mfp-close {
    width: 37px;
    margin-right: 2px;
    margin-top: 50px;
  }

  /* Popup de "añadido a la cesta" */
  img.popImg {
    width: 45%;
  }

  .col-md-6.col-md-offset-1.nombre {
    font-size: 0.7em;
    font-style: oblique;
    font-weight: bold;
  }

  .col-md-6.col-md-offset-1.nombre.fabricante {
    display: none;
  }

  .col-md-12.carritoSmallDialog {
    font-size: 0.8em;
  }

  .col-xs-12.carritoSmallDialog {
    font-size: 18px;
    text-align: center;
  }

  .col-xs-12.importeTotal,
  .col-xs-12.portes,
  .col-xs-12.portesBaleares {
    font-size: 16px;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------
   Pantallas en horizontal (móvil, tablet y portátiles hasta 1199px)
   --------------------------------------------------------------------- */
@media (max-width: 1199.98px) and (orientation: landscape) {
  .breadscrumb {
    font-size: inherit;
  }

  .row.carruselArticulosFichaArticulos {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
}

/* ---------------------------------------------------------------------
   Desde 360px
   --------------------------------------------------------------------- */
@media (min-width: 360px) {
  .btn-lg {
    font-size: 18px !important;
  }
}

/* ---------------------------------------------------------------------
   Desde 576px — móvil grande en adelante
   --------------------------------------------------------------------- */
@media (min-width: 576px) {
  .fa-titulo {
    text-align: inherit;
  }

  .fa-pagamastarde {
    float: left;
    width: 90%;
  }

  .fa-media,
  .fa-datos {
    width: 50%;
  }

  .fa-datos {
    padding: 5px;
  }

  .fa-media-carrusel,
  .fa-datos-edad {
    text-align: inherit;
  }

  .fa-boton-comprar-pagamastarde {
    margin-top: 0;
  }

  .fa-datos-compartir {
    margin-right: 10px;
  }

  .fa-datos-compartir-wrap {
    float: left;
    width: inherit;
    margin-left: 0;
  }

  .labelCantidad {
    display: inline-block;
    margin: 0;
  }

  .listaComplementosArticulo {
    display: inline-block;
    width: 49%;
    margin-left: 0.5%;
    margin-right: 0.5%;
  }

  .fa-currency {
    font-size: 32px;
  }

  /* Popup de "añadido a la cesta" */
  .col-xs-12.carritoSmallDialog {
    font-size: 24px;
  }

  .col-xs-12.importeTotal,
  .col-xs-12.portes,
  .col-xs-12.portesBaleares {
    font-size: 18px;
  }
}

/* ---------------------------------------------------------------------
   576px – 1199.98px — móvil grande + tablet
   --------------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .col-xs-12.col-sm-8.col-md-7.col-lg-7.col-xl-12.txtArticulo {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
  }

  .infoPvp {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    text-align: center;
  }

  .separadorEspecial {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0 30px 15px;
  }
}

/* ---------------------------------------------------------------------
   Desde 768px — tablet y escritorio
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  .fa-boton-comprar {
    float: none;
    text-align: left;
    margin-top: 1em;
  }

  .comentariosFichaProductoTitulo {
    display: block;
  }

  .fa-titulo-marca {
    display: block;
    width: 100%;
    max-width: 435px;
  }

  .fa-titulo-titulo {
    display: block;
    width: 100%;
    max-width: 500px;
  }

  .referenciaFichaProductoTitulo {
    position: relative;
    right: 10px;
    margin-top: 0;
  }

  .fa-datos-compartir-derecha {
    float: right;
    margin-left: 0;
  }

  .fa-media-img .fotos .carousel-control-prev-icon,
  .fa-media-img .fotos .carousel-control-next-icon {
    width: 55px;
    height: 55px;
  }

  .contenedorFotos .fotos .carousel-control-prev-icon,
  .contenedorFotos .fotos .carousel-control-next-icon {
    width: 25px;
    height: 25px;
  }
}

/* ---------------------------------------------------------------------
   768px – 1199.98px — tablet
   --------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .breadscrumb {
    font-size: inherit;
  }

  /* Galería antigua */
  .product-images-left {
    display: inline-grid;
    margin-top: 0 !important;
    width: 85% !important;
  }

  .product-images-left .justify-content-center {
    padding-left: 5px;
    padding-right: 5px;
  }

  img.product-images-left-mas-vistas {
    margin: -5px;
    width: 100% !important;
    height: auto;
  }

  .product-images-left.sibling-fade.fotosSecundariasProducto,
  .product-images-marcas-left.sibling-fade,
  .fa-seccion-precio {
    text-align: center;
  }

  .imagenFichaProductoGeneral {
    width: 100%;
    height: auto;
  }

  .col-sm-12.contenedorFotos {
    max-height: 215px;
  }

  /* Datos del producto */
  .refProducto,
  .regaloProducto,
  .envioProducto,
  .entregaDomicilioProducto,
  .eligeModeloProducto {
    font-size: 18px;
  }

  .contenedorClickAndCollect.contenedorEscritorio {
    width: min-content;
    min-width: 50%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 16px;
  }

  .float-left.comentariosFichaProductoTitulo {
    float: none !important;
    width: min-content;
    min-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .bannerFichaArticulo {
    width: 386px;
    max-width: 100%;
  }

  .row.carruselArticulosFichaArticulos {
    display: block;
    margin-left: 15px;
    margin-right: 15px;
  }

  button.btn.btn-warning.botonComprarFichaProducto.btn-primary.btn-lg.modeloButton {
    width: 134px;
  }

  .row.comentarioDestacado {
    display: block;
    width: 100%;
    font-size: medium;
    margin-bottom: 4% !important;
  }

  /* Margen fijo heredado: revisar con el HTML delante */
  .divYoutube {
    font-size: 18px;
    margin-left: 323px;
  }

  .input-group.bootstrap-touchspin {
    display: flex;
  }
}

/* ---------------------------------------------------------------------
   Desde 992px — escritorio (anchos de columnas)
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
  .fa-pagamastarde {
    float: right;
    width: 94% !important;
    min-height: 249px;
    margin-top: 10px;
  }

  .fa-pagamastarde .pmt-financiacion {
    height: 1em;
    overflow: visible;
  }

  .fa-media-envio-gratis img {
    width: inherit;
  }

  .fa-media {
    width: 100%;
    max-width: 500px;
  }

  .fa-titulo-titulo {
    height: 120px;
  }

  .fa-datos {
    width: 100%;
    max-width: 430px;
    min-height: 420px;
  }

  .fa-boton-comprar-pagamastarde {
    float: none !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  .botonComprarFichaProducto {
    position: static;
  }

  .fa-datos-nombre,
  .fa-datos-edad,
  .fa-datos-gastos-envio,
  .fa-datos-envio {
    display: block;
  }

  .fa-datos-descripcion-corta-mas-detalles,
  .fa-datos-descripcion-corta a,
  .fa-datos-descripcion-corta-mas-detalles a {
    display: block;
  }

  .fa-datos-compartir-wrap {
    margin-top: 30px;
  }

  .comentariosFichaProductoTitulo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 8px 0;
  }

  .fa-complementos-articulos {
    text-align: inherit;
  }

  .fa-complementos-articulos-articulo {
    width: 90px;
  }

  /* Anchos máximos en lugar de fijos: no se desbordan si la columna es más estrecha */
  .fa-otros-articulos          { max-width: 320px; }
  .fa-otros-articulos-largo    { max-width: 500px; }
  .fa-advertencias-titulo      { max-width: 485px; }
  .fa-advertencias-cuerpo      { max-width: 495px; }
  .fa-advertencias-cuerpo-largo { max-width: 960px; }
  .fa-superiores-titulo,
  .fa-superiores-cuerpo        { max-width: 420px; }
  .fa-superiores-titulo-largo,
  .fa-superiores-cuerpo-largo  { max-width: 930px; }

  .separadorImagenDesktop {
    clear: both;
    margin-bottom: 1em;
  }
}

/* ---------------------------------------------------------------------
   Desde 1200px — escritorio ancho
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {

  /* Galería antigua */
  .product-images-left {
    display: inline-grid;
  }

  img.product-images-left-mas-vistas {
    width: 50%;
    height: auto;
  }

  .fa-media-img {
    height: 600px;   /* antes height:360px + min-height:600px, que daba 600px */
  }

  .imagenFichaProductoGeneral {
    width: 100%;
    height: auto;
  }

  .col-sm-12.contenedorFotos {
    min-height: 148px;
  }

  .aCarouselResto {
    border: 1px solid;
    color: rgba(0, 144, 216, 0.2);
    margin-bottom: 5px;
  }

  /* Título y precio */
  h1.nombreProducto {
    margin-top: 10px;
  }

  .fa-precio {
    width: 100%;
  }

  .fa-precio-grande {
    float: left;
    text-align: left;
  }

  .fa-currency {
    float: left;
    padding-left: 5px;
    margin-left: 0;
  }

  .fa-precio-pequeno-tachado,
  .fa-precio-ahorro {
    font-size: 18px !important;
  }

  .ofertaFichaArticulo {
    font-size: 18px;
  }

  /* Datos del producto */
  .refProducto,
  .regaloProducto,
  .envioProducto,
  .entregaDomicilioProducto,
  .eligeModeloProducto,
  .modeloProducto,
  .contenedorClickAndCollect,
  .divYoutube {
    font-size: 16px;
    margin-bottom: 5px;
  }

  .contenedorClickAndCollect,
  .fa-datos-descripcion-corta {
    display: block;
  }

  .fa-datos-descripcion-corta {
    margin-bottom: 10px;
    font-size: 16px;
  }

  [class*="fechaProducto_"].alert.alert-light {
    white-space: normal;
  }

  /* Botón comprar */
  .botonComprarFichaProducto {
    margin-top: 0;
  }

  button.btn.btn-warning.botonComprarFichaProducto.btn-primary.btn-lg.modeloButton {
    width: 18% !important;
  }

  /* Complementos y banners */
  .cn_articulosComplemento_articulo {
    width: 25%;
    float: left;
  }

  img.bannerFichaArticulo {
    width: 80%;
    float: right;
  }

  .row.carruselArticulosFichaArticulos {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }

  .row.comentarioDestacado {
    background: white !important;
    font-size: 16px;
  }

  /* Carrusel vertical */
  .carousel.vertical .carousel-inner {
    height: 100%;
  }

  .carousel.vertical .carousel-inner > .item {
    transition: 0.6s ease-in-out top;
  }

  .carousel.vertical .carousel-inner > .active {
    top: 0;
  }

  .carousel.vertical .carousel-inner > .next,
  .carousel.vertical .carousel-inner > .prev {
    top: 0;
    height: 100%;
    width: 100%;
  }

  .carousel.vertical .carousel-inner > .next {
    left: 0;
    top: 100%;
  }

  .carousel.vertical .carousel-inner > .prev {
    left: 0;
    top: -100%;
  }

  .carousel.vertical .carousel-inner > .next.left,
  .carousel.vertical .carousel-inner > .prev.right {
    top: 0;
  }

  .carousel.vertical .carousel-inner > .active.left {
    left: 0;
    top: -100%;
  }

  .carousel.vertical .carousel-inner > .active.right {
    left: 0;
    top: 100%;
  }

  .carousel.vertical .carousel-indicators {
    top: 50%;
    right: 20px;
    bottom: auto;
    left: auto;
    width: auto;
    margin: 0;
    padding: 0;
    transform: translate(-50%);
  }

  .carousel.vertical .carousel-indicators li {
    display: block;
    margin: 5px 0;
  }
}