/* === Banner full-bleed rudo (sale del contenedor y vive a nivel de ) === */ #psvp-banner-full{ position:relative; width:100vw; /* ancho real de viewport */ left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; overflow:hidden; z-index:2; background:#fff; } /* Contenedor interior con margen fijo de 113px por lado */ #psvp-banner-full .bp-inner{ display:block; width:calc(100vw - 226px); /* 113px por lado */ margin:0 auto; height:var(--bp-height,85vh); position:relative; overflow:hidden; border-radius:8px; box-shadow:0 8px 40px rgba(0,0,0,.08); cursor:pointer; } #psvp-banner-full .bp-img{ width:100%; height:100%; object-fit:cover; transform:scale(1.03); transition:transform .9s ease, filter .9s ease; display:block; } #psvp-banner-full .bp-overlay{ position:absolute; inset:0; pointer-events:none; background:rgba(0,0,0,.12); border-radius:inherit; } #psvp-banner-full[data-anim="1"] .bp-inner{ animation:bp-fade .9s ease both; } @keyframes bp-fade{from{opacity:0}to{opacity:1}} #psvp-banner-full .bp-inner:hover .bp-img{ transform:scale(1.06); filter:brightness(1.05); } /* === BLOQUE DE PRODUCTOS AJUSTADO === */ .bp-products-block { position: relative; width: 90vw; /* un poco menos que el banner */ left: 50%; right: 50%; margin-left: -45vw; margin-right: -45vw; background: #fff; padding: 50px 5vw; box-sizing: border-box; overflow: hidden; border-radius: 12px; } /* Carrusel */ .products-carousel { position: relative; width: 100%; max-width: 1600px; /* centrado visualmente */ margin: 0 auto; } .carousel-wrapper { position: relative; overflow: hidden; width: 100%; } /* Pista */ .carousel-track { display: flex; justify-content: flex-start; gap: 25px; overflow-x: auto; scroll-behavior: smooth; padding: 0 3vw; /* agrega espacio interior lateral */ box-sizing: border-box; } .carousel-track::-webkit-scrollbar { height: 10px; } .carousel-track::-webkit-scrollbar-thumb { background: #ccc; border-radius: 6px; } /* Tarjetas */ .product-card { flex: 0 0 calc(25% - 25px); background: #fff; border-radius: 12px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; box-sizing: border-box; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .product-card img { width: 100%; border-radius: 12px 12px 0 0; display: block; } .product-name { font-weight: 600; color: #222; margin: 8px 10px 6px; min-height: 45px; } .product-price { font-weight: 700; color: #b11f24; margin-bottom: 14px; font-size: 1.1rem; } /* Flechas */ .arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.9); border: none; font-size: 2rem; padding: 6px 12px; cursor: pointer; z-index: 2; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .arrow.prev { left: 1vw; } .arrow.next { right: 1vw; } .arrow:hover { background: #31473A; color: #fff; } /* Responsive */ @media (max-width: 1280px) { .product-card { flex: 0 0 calc(33.33% - 20px); } } @media (max-width: 992px) { .product-card { flex: 0 0 calc(50% - 20px); } } @media (max-width: 768px) { .bp-products-block { width: 100vw; margin-left: -50vw; padding: 40px 4vw; } .product-card { flex: 0 0 calc(100% - 10px); } } /* --- Ocultar barra de desplazamiento horizontal --- */ .carousel-track { -ms-overflow-style: none; /* IE y Edge */ scrollbar-width: none; /* Firefox */ } .carousel-track::-webkit-scrollbar { display: none; /* Chrome, Safari */ } /* === Nombre del producto === */ .product-name { font-family: 'Montserrat', 'Open Sans', sans-serif; font-weight: 700; font-size: 15px; color: #003399; /* Azul institucional */ text-align: center; line-height: 1.3; margin: 10px 0 8px 0; text-transform: none; } /* === Precio rojo con número blanco === */ .product-price { display: inline-block; background-color: #B61F24 !important; /* Rojo institucional */ color: #FFFFFF !important; /* Blanco */ font-family: 'Montserrat', 'Open Sans', sans-serif; font-weight: 700; font-size: 14.5px; border-radius: 6px; padding: 6px 18px; margin: 6px auto 12px; text-align: center; transition: transform 0.25s ease; box-shadow: none; } /* === Hover mantiene colores y agrega efecto zoom === */ .product-card:hover .product-price { background-color: #B61F24 !important; /* mismo rojo */ color: #FFFFFF !important; /* mismo blanco */ transform: scale(1.08); } /* === Banner principal responsive tipo Williams-Sonoma === */ #psvp-banner-full { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; z-index: 2; background: #fff; } /* Contenedor interior */ #psvp-banner-full .bp-inner { display: block; width: calc(100vw - 226px); /* 113px de margen en escritorio */ margin: 0 auto; height: var(--bp-height, 85vh); position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 8px 40px rgba(0, 0, 0, .08); cursor: pointer; } /* Imagen dentro del banner */ #psvp-banner-full .bp-img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: scale(1.03); transition: transform .9s ease, filter .9s ease; display: block; } /* === Modo móvil sin bordes ni franjas === */ @media (max-width: 768px) { #psvp-banner-full { margin: 0; padding: 0; width: 100vw; left: 50%; margin-left: -50vw; background: none; } #psvp-banner-full .bp-inner { width: 100vw; /* ocupa todo el ancho */ height: 100vw; /* cuadrado: alto = ancho */ border-radius: 0; /* sin bordes */ box-shadow: none; /* sin sombra */ margin: 0; } #psvp-banner-full .bp-img { object-fit: cover; object-position: center; width: 100%; height: 100%; transform: none; /* sin zoom inicial */ } #psvp-banner-full .bp-overlay { background: rgba(0, 0, 0, 0.08); } }