/* =====================================================================
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;
}
}