/* =====================================================================
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;
padding: 3px 10px 1px;
border-radius: 6px;
background: var(--verde-claro);
color: var(--verde) !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.3;
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) -----
Forma de etiqueta de precio con el agujero del cordel.
El agujero va dentro de la fila (no en posición absoluta), así se centra solo con el texto.
La antigua barra lateral (.promo-badge__barra) se oculta: el pico de la etiqueta hace su papel. */
.promo-badge {
--promo-color: var(--azul);
position: absolute;
left: 0;
top: 18px;
z-index: 10;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 4px 16px 4px 18px; /* el izquierdo deja sitio al pico */
border-radius: 0 8px 8px 0;
background: var(--promo-color);
text-decoration: none;
clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
transition: filter 0.15s ease;
}
/* Agujero del cordel */
.promo-badge::before {
content: "";
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: #fff;
}
.promo-badge--azul { --promo-color: var(--azul); }
.promo-badge--rojo { --promo-color: #d32f2f; }
.promo-badge--cole { --promo-color: #d62839; }
.promo-badge--verde { --promo-color: var(--verde); }
.promo-badge--naranja { --promo-color: var(--naranja-oscuro); }
.promo-badge--bf { --promo-color: #000000; }
.promo-badge--cm { --promo-color: #4f8233; }
/* Oculta la barra antigua, también la del cheque regalo que va con style en línea */
.promo-badge > span:not(.promo-badge__texto) {
display: none;
}
.promo-badge__texto {
position: relative;
top: 1px; /* compensa la línea base alta de Baloo */
color: #fff;
font-size: 16px;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
}
a.promo-badge:hover,
a.promo-badge:focus {
filter: brightness(0.9);
text-decoration: none;
}
a.promo-badge:focus-visible {
outline: 3px solid var(--naranja);
outline-offset: 2px;
}
@media (max-width: 575.98px) {
.promo-badge {
gap: 6px;
min-height: 30px;
padding: 3px 12px 3px 15px;
clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}
.promo-badge::before {
width: 6px;
height: 6px;
}
.promo-badge__texto {
font-size: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.promo-badge {
transition: none;
}
}
/* ----- 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) -----
La etiqueta "¡Oferta!" tiene la misma forma que .promo-badge de la foto, en pequeño.
El agujero va dentro de la fila, así se centra solo con el texto. */
.fa-promo-unidad {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 12px;
margin: 8px 0 14px;
padding: 8px 16px 8px 8px;
border-radius: var(--radio);
background: var(--naranja-claro);
color: var(--texto-suave);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
}
.fa-promo-unidad .fa-promo-unidad__tag {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 3px 12px 3px 15px; /* el izquierdo deja sitio al pico */
border: 0;
border-radius: 0 6px 6px 0;
box-shadow: none;
background: var(--naranja-oscuro);
color: #fff;
font-size: 15px;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
/* Agujero del cordel, centrado con el texto */
.fa-promo-unidad .fa-promo-unidad__tag::before {
content: "";
position: relative;
top: -1px; /* lo sube a la altura de las letras (Baloo) */
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--naranja-claro);
}
.fa-promo-unidad__texto b {
color: var(--naranja-oscuro);
font-size: 20px;
font-weight: 800;
white-space: nowrap;
}
@media (max-width: 767.98px) {
.fa-precio .fa-promo-unidad {
display: flex;
justify-content: center;
width: 100%;
margin: 8px 0;
padding: 10px 12px;
text-align: center;
}
.fa-precio .fa-promo-unidad .fa-promo-unidad__tag {
padding: 3px 10px 3px 13px;
font-size: 14px !important;
}
.fa-precio .fa-promo-unidad__texto {
font-size: 14px;
}
.fa-precio .fa-promo-unidad__texto b {
font-size: 18px;
}
}
/* 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;
}
}
/* ----- Devoluciones XXL en la ficha (mismo ticket que la home y la página) ----- */
.fa-xxl {
--xxl-color: var(--azul);
--xxl-tinte: var(--azul-claro);
--xxl-corte: rgba(0, 144, 216, 0.45);
--xxl-fondo: #fff; /* fondo de la columna: las muescas lo usan para "recortar" */
position: relative;
display: flex;
align-items: center;
gap: 14px;
margin: 10px 0 14px;
padding: 12px 20px 12px 16px;
border-radius: var(--radio);
background: var(--xxl-tinte);
}
/* Muescas laterales del troquel */
.fa-xxl::before,
.fa-xxl::after {
content: "";
position: absolute;
top: 50%;
width: 18px;
height: 18px;
margin-top: -9px;
border-radius: 50%;
background: var(--xxl-fondo);
}
.fa-xxl::before { left: -9px; }
.fa-xxl::after { right: -9px; }
.fa-xxl__icono {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding-top: 2px; /* Baloo tiene la línea base alta */
border-radius: 50%;
background: var(--xxl-color);
color: #fff;
font-weight: 800;
font-size: 15px;
line-height: 1;
letter-spacing: -0.02em;
}
.fa-xxl__cuerpo {
flex: 1;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
min-width: 0;
padding-left: 14px;
border-left: 2px dashed var(--xxl-corte);
text-align: left;
}
.fa-xxl__titulo {
color: #0a4f7a;
font-size: 16px;
font-weight: 800;
line-height: 1.25;
text-decoration: none;
}
.fa-xxl__titulo:hover,
.fa-xxl__titulo:focus {
color: #0a4f7a;
text-decoration: underline;
text-underline-offset: 3px;
}
.fa-xxl__extra {
display: flex;
align-items: center;
gap: 6px;
color: var(--texto-suave);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
}
a.fa-xxl__extra:hover {
color: var(--azul);
text-decoration: underline;
}
.fa-xxl__extra img {
height: 22px;
width: auto;
}