/**
* Home (index): correcciones responsive del contenido principal.
* Cargar al final del . Ámbito: body.fx-home
* Uso de !important para ganar a style-res-v1.css y reglas del theme.
*/
/* Sin desbordamiento horizontal en toda la home (eje Y sin forzar) */
.fx-home {
overflow-x: hidden !important;
}
.fx-home main {
overflow-x: hidden !important;
max-width: 100% !important;
}
/* Carrusel slide 1 (“Nuevas Colecciones”): texto en blanco; CTA fondo #AD9371(style-homev1) */
.fx-home .carousel-inner .slide-1 .carousel-caption,
.fx-home .carousel-inner .slide-1 .carousel-caption h1,
.fx-home .carousel-inner .slide-1 .carousel-caption h3,
.fx-home .carousel-inner .slide-1 .carousel-caption p,
.fx-home .carousel-inner .slide-1 .carousel-caption a {
color: #ffffff !important;
}
/* Carrusel slide 2: títulos/párrafo #AD9371; botón texto blanco sobre fondo marca */
.fx-home .carousel-inner .slide-2 .carousel-caption,
.fx-home .carousel-inner .slide-2 .carousel-caption h1,
.fx-home .carousel-inner .slide-2 .carousel-caption h3,
.fx-home .carousel-inner .slide-2 .carousel-caption p {
color: #AD9371!important;
}
.fx-home .carousel-inner .slide-2 .carousel-caption a {
color: #ffffff !important;
}
/* Slide 3 (“Exclusivo”): mismo criterio que slide 2 */
.fx-home .carousel-inner .slide-3 .carousel-caption,
.fx-home .carousel-inner .slide-3 .carousel-caption h1,
.fx-home .carousel-inner .slide-3 .carousel-caption h3,
.fx-home .carousel-inner .slide-3 .carousel-caption p {
color: #AD9371!important;
}
.fx-home .carousel-inner .slide-3 .carousel-caption a {
color: #ffffff !important;
}
.fx-home .carousel-inner .slide-2 .carousel-caption .line {
background-color: #AD9371!important;
}
/* Carrusel */
@media (max-width: 991px) {
#myCarousel > div{
height: 33vh!important;
}
#myCarousel > div > div > div > img{
display: none!important;
}
.fx-home #myCarousel .carousel-inner .item img {
width: 100% !important;
max-height: min(70vh, 520px) !important;
object-fit: cover !important;
}
.fx-home #myCarousel .carousel-caption {
left: 5% !important;
right: 5% !important;
width: auto !important;
max-width: 90% !important;
margin: 0 auto !important;
padding-left: 8px !important;
padding-right: 8px !important;
box-sizing: border-box !important;
}
.fx-home .carousel-inner .slide-1 .carousel-caption,
.fx-home .carousel-inner .slide-2 .carousel-caption,
.fx-home .carousel-inner .slide-3 .carousel-caption {
top: 50% !important;
bottom: auto !important;
text-align: center !important;
}
.fx-home .carousel-inner .slide-2 .carousel-caption {
left: 5% !important;
}
.fx-home .carousel-inner .slide-1 .carousel-caption p,
.fx-home .carousel-inner .slide-2 .carousel-caption p,
.fx-home .carousel-inner .slide-3 .carousel-caption p {
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
white-space: normal !important;
overflow-x: hidden !important;
overflow-y: visible !important;
text-overflow: unset !important;
display: block !important;
line-clamp: unset !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
}
.fx-home .carousel-inner .slide-1 .carousel-caption h1,
.fx-home .carousel-inner .slide-3 .carousel-caption h1 {
font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
line-height: 1.1 !important;
}
.fx-home .carousel-inner .slide-1 .carousel-caption h3,
.fx-home .carousel-inner .slide-3 .carousel-caption h3 {
font-size: clamp(0.85rem, 3.5vw, 1.25rem) !important;
}
.fx-home .carousel-inner .slide-1 .carousel-caption img,
.fx-home .carousel-inner .slide-3 .carousel-caption img {
max-width: min(200px, 55vw) !important;
width: auto !important;
height: auto !important;
padding: 12px 0 16px !important;
}
.fx-home .carousel-inner .slide-2 .carousel-caption h1 {
font-size: clamp(2rem, 9vw, 3rem) !important;
line-height: 1.05 !important;
}
.fx-home .carousel-inner .slide-2 .carousel-caption h3 {
font-size: clamp(0.9rem, 4vw, 1.35rem) !important;
}
.fx-home .carousel-inner .slide-2 .carousel-caption .line {
margin: 8px auto 12px !important;
max-width: 120px !important;
}
.fx-home #myCarousel .carousel-indicators {
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
margin-left: 0 !important;
margin-bottom: 14px !important;
width: auto !important;
padding-left: 0 !important;
text-align: center !important;
bottom: 8px !important;
}
}
@media (max-width: 480px) {
.fx-home .carousel-inner .slide-1 .carousel-caption a,
.fx-home .carousel-inner .slide-2 .carousel-caption a,
.fx-home .carousel-inner .slide-3 .carousel-caption a {
padding: 8px 20px !important;
font-size: 15px !important;
}
}
/* ========== Quiénes somos (.who) — prioridad sobre style-res-v1 ========== */
@media (max-width: 991px) {
/* Imagen de la sección como fondo (el ![]()
sigue en el DOM por accesibilidad / SEO, oculto visualmente) */
.fx-home .who {
padding: 28px 0 40px !important;
position: relative !important;
overflow: hidden !important;
isolation: isolate !important;
min-height: min(72vh, 640px) !important;
background-color: #ffffff56 !important;
background-image: url("../img/who.png") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
}
.fx-home .who::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
pointer-events: none !important;
}
.fx-home .who .gallery,
.fx-home .who .gallery.clearfix {
position: relative !important;
z-index: 1 !important;
overflow-x: hidden !important;
overflow-y: visible !important;
margin-top:80px!important;
}
.fx-home .who .gallery figure,
.fx-home .who figure {
position: relative !important;
z-index: 1 !important;
padding: 0 12px !important;
max-width: 100% !important;
margin: 0 auto !important;
}
.fx-home .who figure > img {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
border: 0 !important;
white-space: nowrap !important;
}
/* Título decorativo duplicado (gris) — fuera del flujo */
.fx-home .who h1:not(.h2) {
display: none !important;
position: static !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
visibility: hidden !important;
}
.fx-home .who h1.h2,
.fx-home .who .h2 {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
text-align: center !important;
padding: 16px 12px 0 !important;
font-size: clamp(1.75rem, 8vw, 2.75rem) !important;
line-height: 1.15 !important;
transform: none !important;
}
.fx-home .who p {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: 42rem !important;
margin: 0 auto !important;
padding: 16px 12px 0 !important;
text-align: center !important;
line-height: 1.65 !important;
box-sizing: border-box !important;
font-size: 14px !important;
display: block !important;
overflow-x: hidden !important;
overflow-y: visible !important;
line-clamp: unset !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
white-space: normal !important;
}
.fx-home .who .media {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
float: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
margin: 24px auto 0 !important;
max-width: 100% !important;
width: 100% !important;
text-align: center !important;
transform: none !important;
overflow-x: hidden !important;
overflow-y: visible !important;
}
.fx-home .who .media-left,
.fx-home .who .media-body {
float: none !important;
display: block !important;
overflow-x: hidden !important;
overflow-y: visible !important;
zoom: normal !important;
}
.fx-home .who .media-body {
width: auto !important;
max-width: calc(100% - 88px) !important;
}
.fx-home .who .media-left {
padding-right: 12px !important;
}
.fx-home .who .media #avatar,
.fx-home .who .media .media-object {
width: 72px !important;
max-width: min(88px, 22vw) !important;
height: auto !important;
flex-shrink: 0 !important;
}
.fx-home .who .media h3 {
padding: 8px 12px 0 !important;
margin: 0 !important;
font-size: clamp(1rem, 4vw, 1.35rem) !important;
text-align: left !important;
line-height: 1.2 !important;
}
.fx-home .who .media .media-body {
text-align: left !important;
flex: 0 1 auto !important;
}
.fx-home .who .media span {
padding-left: 12px !important;
display: block !important;
text-align: left !important;
}
}
@media (max-width: 767px) {
.fx-home .who h1.h2,
.fx-home .who .h2 {
font-size: 40px !important;
padding: 12px 10px 0 !important;
}
.fx-home .who p {
padding: 12px 10px 0 !important;
font-size: 13px !important;
}
.fx-home .who .media {
margin-top: 20px !important;
}
}
@media (max-width: 480px) {
.fx-home .who figure,
.fx-home .who .gallery figure {
padding: 0 8px !important;
}
.fx-home .who .media #avatar,
.fx-home .who .media .media-object {
width: 64px !important;
max-width: 72px !important;
}
}
@media (max-width: 375px) {
.fx-home .who h1.h2,
.fx-home .who .h2 {
padding: 10px 8px 0 !important;
}
.fx-home .who p {
padding: 10px 8px 0 !important;
font-size: 12.5px !important;
}
.fx-home .who .media #avatar,
.fx-home .who .media .media-object {
width: 56px !important;
max-width: 64px !important;
}
}
@media (max-width: 320px) {
.fx-home .who h1.h2,
.fx-home .who .h2 {
font-size: clamp(1.25rem, 8vw, 1.65rem) !important;
padding: 8px 6px 0 !important;
}
.fx-home .who p {
padding: 8px 6px 0 !important;
font-size: 12px !important;
}
.fx-home .who .media {
margin-top: 16px !important;
}
.fx-home .who .media #avatar,
.fx-home .who .media .media-object {
width: 48px !important;
max-width: 52px !important;
}
.fx-home .who .media h3 {
font-size: 14px !important;
padding: 4px 8px 0 !important;
}
.fx-home .who .media span {
padding-left: 8px !important;
font-size: 13px !important;
}
}
/* Subtítulos de sección (home.collection.subtitle, home.wedding.subtitle) — más compacto con Poppins */
.fx-home .collection > h2,
.fx-home .wedding > h2 {
font-size: clamp(2.1rem, 5vw, 2.2rem) !important;
line-height: 1.5 !important;
font-weight: 400 !important;
max-width: 42em;
margin-left: auto;
margin-right: auto;
padding-bottom: 2.5rem !important;
}
@media (max-width: 991px) {
.fx-home .collection > h2,
.fx-home .wedding > h2 {
font-size: clamp(2rem, 7vw, 2.4rem) !important;
padding-bottom: 1.75rem !important;
}
}
/* Colección — solo banner-collec (≤991px): sin scroll horizontal */
@media (max-width: 991px) {
.fx-home .collection.container,
.fx-home .collection .gallery,
.fx-home .collection .gallery.clearfix,
.fx-home .collection figure,
.fx-home .collection .row {
overflow-x: hidden !important;
overflow-y: visible !important;
}
.fx-home .collection .banner-collec {
float: none !important;
width: 100% !important;
margin-bottom: 20px !important;
padding: 36px 16px 32px !important;
position: relative !important;
isolation: isolate !important;
overflow-x: hidden !important;
overflow-y: visible !important;
min-height: min(52vh, 480px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
box-sizing: border-box !important;
background-image: none !important;
}
/* Fondo: altura = 100% del banner; ancho del dibujo proporcional (puede sobresalir; no clip en el propio bloque) */
.fx-home .collection .banner-collec::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: min(280vw, 3200px) !important;
max-width: none !important;
z-index: 0 !important;
pointer-events: none !important;
background-image: url("../img/collection.png") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: auto 100% !important;
}
.fx-home .collection .banner-collec::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
}
.fx-home .collection .banner-collec > img {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
border: 0 !important;
white-space: nowrap !important;
}
.fx-home .collection .banner-collec h3,
.fx-home .collection .banner-collec h1,
.fx-home .collection .banner-collec a {
position: relative !important;
z-index: 2 !important;
margin-left: 0 !important;
text-align: center !important;
}
.fx-home .collection .banner-collec h3,
.fx-home .collection .banner-collec h1 {
margin-top: 0 !important;
padding: 0 8px !important;
}
.fx-home .collection .banner-collec h3 {
font-size: clamp(1rem, 3.5vw, 1.35rem) !important;
margin-bottom: 6px !important;
}
.fx-home .collection .banner-collec h1 {
font-size: clamp(1.75rem, 6vw, 2.75rem) !important;
line-height: 1.1 !important;
}
.fx-home .collection .banner-collec a {
display: inline-block !important;
margin-top: 16px !important;
}
.fx-home .collection h1,
.fx-home .collection h2 {
padding-left: 12px !important;
padding-right: 12px !important;
}
.fx-home .collection .row > .col-xs-6:not(.banner-collec):not(.product-collection) {
width: 100% !important;
float: none !important;
}
.fx-home .collection .row > .col-xs-6.banner-collec + .col-xs-6 {
width: 100% !important;
float: none !important;
padding-left: 8px !important;
padding-right: 8px !important;
display: flow-root !important;
}
/* Cuatro productos: 2 columnas, tarjetas más pequeñas */
.fx-home .collection .product-collection {
width: 50% !important;
float: left !important;
padding-left: 6px !important;
padding-right: 6px !important;
box-sizing: border-box !important;
margin-bottom: 10px !important;
}
.fx-home .collection .product-image-collec {
display: flex !important;
align-items: center !important;
justify-content: center !important;
max-height: 150px !important;
padding: 6px 2px !important;
box-sizing: border-box !important;
}
.fx-home .collection .product-image-collec img,
.fx-home .collection .product-image-collec figure,
.fx-home .collection .product-image-collec figure img {
max-height: 132px !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
object-fit: contain !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fx-home .collection .product-image-collec a {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.fx-home .collection .product-title-collec {
padding-bottom: 6px !important;
margin-top: 2px !important;
}
.fx-home .collection .product-title-collec h5 {
margin-top: 6px !important;
}
.fx-home .collection .product-title-collec h5 a {
font-size: clamp(12px, 3.1vw, 15px) !important;
line-height: 1.3 !important;
}
.fx-home .collection .product-icon-collec i {
width: 38px !important;
height: 38px !important;
font-size: 14px !important;
padding-top: 11px !important;
margin-right: 3px !important;
}
}
/* Títulos de producto */
@media (max-width: 991px) {
.fx-home .product-collection .product-title-collec h5,
.fx-home .product-wedding .product-title-wedding h5,
.fx-home .product-holiday .product-title-holiday h5 {
white-space: normal !important;
overflow-x: hidden !important;
overflow-y: visible !important;
text-overflow: unset !important;
height: auto !important;
}
}
/* Bodas (≤991px): imagen wedding.png como fondo de la sección — mismo criterio que collection */
@media (max-width: 991px) {
.fx-home .wedding .gallery,
.fx-home .wedding .gallery.clearfix,
.fx-home .wedding figure {
overflow-x: hidden !important;
overflow-y: visible !important;
}
.fx-home .wedding {
position: relative !important;
isolation: isolate !important;
overflow-x: hidden !important;
overflow-y: visible !important;
padding-top: 24px !important;
padding-bottom: 28px !important;
min-height: min(58vh, 680px) !important;
background-image: none !important;
}
.fx-home .wedding::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: min(280vw, 3200px) !important;
max-width: none !important;
z-index: 0 !important;
pointer-events: none !important;
background-image: url("../img/wedding.png") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: auto 100% !important;
}
.fx-home .wedding::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
}
.fx-home .wedding > h1,
.fx-home .wedding > h2,
.fx-home .wedding > .gallery {
position: relative !important;
z-index: 2 !important;
}
.fx-home .wedding .img-wedding {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
border: 0 !important;
white-space: nowrap !important;
top: 0 !important;
left: 0 !important;
}
.fx-home .wedding .img-wedding img {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
border: 0 !important;
}
.fx-home .wedding .wedding-content {
position: relative !important;
z-index: 2 !important;
padding-top: 16px !important;
}
.fx-home .wedding h1,
.fx-home .wedding h2 {
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Cuatro productos bodas: 2 columnas, tarjetas compactas (misma lógica que collection) */
.fx-home .wedding .wedding-content .row {
display: flow-root !important;
}
.fx-home .wedding .product-wedding {
width: 50% !important;
float: left !important;
padding-left: 6px !important;
padding-right: 6px !important;
box-sizing: border-box !important;
margin-bottom: 10px !important;
}
.fx-home .wedding .product-image-wedding {
display: flex !important;
align-items: center !important;
justify-content: center !important;
max-height: 150px !important;
padding: 6px 2px !important;
box-sizing: border-box !important;
}
.fx-home .wedding .product-image-wedding img,
.fx-home .wedding .product-image-wedding figure,
.fx-home .wedding .product-image-wedding figure img {
max-height: 132px !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
object-fit: contain !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fx-home .wedding .product-image-wedding a {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.fx-home .wedding .product-title-wedding {
padding-bottom: 6px !important;
margin-top: 2px !important;
}
.fx-home .wedding .product-title-wedding h5 {
margin-top: 6px !important;
}
.fx-home .wedding .product-title-wedding h5 a {
font-size: clamp(12px, 3.1vw, 15px) !important;
line-height: 1.3 !important;
}
.fx-home .wedding .product-icon-wedding i {
width: 38px !important;
height: 38px !important;
font-size: 14px !important;
padding-top: 11px !important;
margin-right: 3px !important;
}
}
/* Holiday (≤991px): texto sobre holiday-promo-art.png + cards 2 columnas */
@media (max-width: 991px) {
.fx-home .holiday .gallery,
.fx-home .holiday .gallery.clearfix {
overflow-x: hidden !important;
overflow-y: visible !important;
background: none !important;
border: none !important;
}
.fx-home .holiday figure {
overflow: visible !important;
background: none !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
.fx-home .holiday figure::before,
.fx-home .holiday figure::after {
content: none !important;
display: none !important;
}
.fx-home .holiday .row {
overflow-x: hidden !important;
overflow-y: visible !important;
}
.fx-home .holiday {
position: relative !important;
isolation: isolate !important;
overflow-x: hidden !important;
overflow-y: visible !important;
padding-top: 20px !important;
padding-bottom: 28px !important;
min-height: 0 !important;
background-image: none !important;
}
.fx-home .holiday::before,
.fx-home .holiday::after {
content: none !important;
display: none !important;
}
.fx-home .holiday > .container {
position: relative !important;
z-index: auto !important;
}
.fx-home .holiday .row {
display: flex !important;
flex-direction: column !important;
}
.fx-home .holiday .row > .col-xs-6:first-child {
order: 2 !important;
width: 100% !important;
float: none !important;
padding-left: 8px !important;
padding-right: 8px !important;
display: flow-root !important;
}
.fx-home .holiday .row > .banner-holiday {
order: 1 !important;
width: 100% !important;
max-width: 420px !important;
float: none !important;
position: relative !important;
z-index: -1 !important;
margin: 0 auto 16px !important;
padding: 0 !important;
box-sizing: border-box !important;
background-color: transparent !important;
background-image: url("../img/holiday.png") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: contain !important;
aspect-ratio: 3 / 4 !important;
min-height: clamp(300px, 95vw, 560px) !important;
max-height: min(88vh, 640px) !important;
border-radius: 0 !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
border: none !important;
}
.fx-home .holiday .img-banner-holiday {
display: none !important;
}
.fx-home .holiday .img-banner-holiday > img {
display: none !important;
}
.fx-home .holiday .banner-holiday .title-holiday {
top: 90px;
left: 50%;
transform: translate(-50%);
}
.fx-home .holiday .banner-holiday .title-holiday h1 {
font-family: 'RoseBlossom', sans-serif !important;
font-weight: 400 !important;
font-size: 32px!important;
color: #AD9371!important;
margin: 0 0 10px !important;
line-height: 1.12 !important;
letter-spacing: 0.02em !important;
flex-shrink: 0 !important;
padding: 0 !important;
}
.fx-home .holiday .banner-holiday .title-holiday p {
font-family: Poppins, sans-serif !important;
font-weight: 500 !important;
font-size: clamp(0.98rem, 3.5vw, 1.22rem) !important;
line-height: 1.5 !important;
color: rgba(0, 0, 0, 0.8) !important;
width: 100% !important;
max-width: 19rem !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
flex-shrink: 0 !important;
}
.fx-home .holiday .banner-holiday .title-holiday span {
float: none !important;
font-family: 'RoseBlossom', sans-serif !important;
font-weight: 400 !important;
color: #AD9371!important;
}
/* Una sola línea: Tu Regalo Especial (el HTML tiene
entre Regalo y Especial) */
.fx-home .holiday .banner-holiday .title-holiday br {
display: none !important;
}
.fx-home .holiday .banner-holiday .title-holiday span#sale30 {
font-size: clamp(2.2rem, 9.5vw, 3.35rem) !important;
padding: 0 !important;
margin: 20px 0.08em 0 0 !important;
display: inline !important;
vertical-align: baseline !important;
}
.fx-home .holiday .banner-holiday .title-holiday span#pt {
font-size: clamp(1.4rem, 5.8vw, 2.15rem) !important;
margin: 0 0.12em !important;
display: inline !important;
vertical-align: baseline !important;
}
.fx-home .holiday .banner-holiday .title-holiday span#off {
font-size: clamp(1.4rem, 5.8vw, 2.15rem) !important;
display: inline !important;
margin: 0 !important;
padding: 0 0 clamp(18px, 8vw, 42px) !important;
clear: none !important;
vertical-align: baseline !important;
}
.fx-home .holiday h1,
.fx-home .holiday h2 {
position: relative !important;
z-index: 1 !important;
padding-left: 12px !important;
padding-right: 12px !important;
padding-top: 0 !important;
}
.fx-home .holiday h2 {
padding-bottom: 0 !important;
}
/* Cuatro productos: 2 columnas, tarjetas compactas */
.fx-home .holiday .product-holiday {
width: 50% !important;
float: left !important;
padding-left: 6px !important;
padding-right: 6px !important;
box-sizing: border-box !important;
margin-bottom: 10px !important;
}
.fx-home .holiday .product-image-holiday {
display: flex !important;
align-items: center !important;
justify-content: center !important;
max-height: 150px !important;
padding: 6px 2px !important;
box-sizing: border-box !important;
}
.fx-home .holiday .product-image-holiday img,
.fx-home .holiday .product-image-holiday figure,
.fx-home .holiday .product-image-holiday figure img {
max-height: 132px !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
object-fit: contain !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fx-home .holiday .product-image-holiday a {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.fx-home .holiday .product-title-holiday {
padding-bottom: 6px !important;
margin-top: 2px !important;
}
.fx-home .holiday .product-title-holiday h5 {
margin-top: 6px !important;
}
.fx-home .holiday .product-title-holiday h5 a {
font-size: clamp(12px, 3.1vw, 15px) !important;
line-height: 1.3 !important;
}
.fx-home .holiday .product-icon-holiday i {
width: 38px !important;
height: 38px !important;
font-size: 14px !important;
padding-top: 11px !important;
margin-right: 3px !important;
}
}
/* Count (≤991px): counter.png como fondo de la sección; sin background en .img-count */
@media (max-width: 991px) {
.fx-home .count {
position: relative !important;
isolation: isolate !important;
overflow-x: hidden !important;
overflow-y: visible !important;
min-height: min(52vh, 620px) !important;
padding-top: 20px !important;
padding-bottom: 32px !important;
background-image: none !important;
}
.fx-home .count::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 50% !important;
transform: translateX(-60%) !important;
width: min(280vw, 3200px) !important;
max-width: none !important;
z-index: 0 !important;
pointer-events: none !important;
background-image: url("../img/counter.png") !important;
background-repeat: no-repeat !important;
background-position: left left !important;
background-size: auto 100% !important;
}
.fx-home .count .img-count {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
border: 0 !important;
background: none !important;
background-color: transparent !important;
}
.fx-home .count .img-count img {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
border: 0 !important;
visibility: hidden !important;
opacity: 0 !important;
}
.fx-home .count .title-count {
position: relative !important;
z-index: 2 !important;
top: auto !important;
right: auto !important;
left: auto !important;
padding: 20px 12px 24px !important;
text-align: center !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.fx-home .count .title-count p {
display: block !important;
padding: 0 8px 16px !important;
max-width: 36rem !important;
margin: 0 auto !important;
}
.fx-home .count .title-count #countdown {
padding: 12px 0 24px !important;
text-align: center !important;
}
.fx-home .count .title-count #countdown #tiles {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 6px !important;
}
.fx-home .count .title-count #countdown #tiles span {
margin: 4px !important;
max-width: none !important;
flex: 0 0 auto !important;
min-width: 0 !important;
font-size: clamp(1.1rem, 4vw, 1.75rem) !important;
width: auto !important;
padding: 8px 10px 12px !important;
}
.fx-home .count .title-count #countdown .labels {
position: relative !important;
right: auto !important;
bottom: auto !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 4px 12px !important;
margin-top: 8px !important;
padding: 0 8px !important;
}
.fx-home .count .title-count #countdown .labels li {
width: auto !important;
min-width: 4.5rem !important;
}
.fx-home .count .title-count a {
margin-left: 0 !important;
margin-top: 8px !important;
display: inline-block !important;
}
}
/* Marcas (≤991px): una sola columna, iconos centrados */
@media (max-width: 991px) {
.fx-home .brand .row {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.fx-home .brand .brand-1,
.fx-home .brand .brand-2,
.fx-home .brand .brand-3,
.fx-home .brand .brand-4,
.fx-home .brand .brand-5,
.fx-home .brand .brand-6 {
float: none !important;
width: 100% !important;
max-width: 190px !important;
flex: 0 0 auto !important;
margin: 10px auto !important;
background-size: auto 112px !important;
}
}
.fx-home .brand .brand-1{
background-position: 17px 0!important;
}
.fx-home .brand .brand-3{
background-position: -464px 0;
}
.fx-home .brand .brand-4{
background-position: -711px 0;
}
/* Blog */
@media (max-width: 767px) {
.fx-home .blog .row .product-blog {
width: 100% !important;
float: none !important;
margin-bottom: 28px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.fx-home .blog > p {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* Footer (≤991px): newsletter .form-new legible y centrado */
@media (max-width: 991px) {
.fx-home footer .row > .info-footer,
.fx-home footer .row > .new-letter {
width: 100% !important;
float: none !important;
padding: 12px !important;
}
.fx-home footer .info-footer .col-xs-6 {
width: 100% !important;
float: none !important;
margin-bottom: 16px !important;
}
.fx-home footer .new-letter {
padding-bottom: 32px !important;
}
.fx-home footer .new-letter .form-new {
margin-top: 0 !important;
height: auto !important;
min-height: min(240px, 55vw) !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 20px 16px 28px !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.fx-home footer .new-letter .form-new h1 {
padding: 8px 8px 12px !important;
margin: 0 !important;
text-align: center !important;
font-size: clamp(1.35rem, 4.5vw, 1.75rem) !important;
line-height: 1.2 !important;
}
.fx-home footer .new-letter .form-new p {
padding: 0 8px 16px !important;
margin: 0 auto !important;
max-width: 28rem !important;
text-align: center !important;
line-height: 1.55 !important;
box-sizing: border-box !important;
}
.fx-home footer .new-letter .form-new input {
display: block !important;
width: 100% !important;
max-width: 22rem !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.fx-home footer .new-letter .form-new button {
display: block !important;
width: fit-content !important;
max-width: calc(100% - 24px) !important;
margin: 16px auto 0 !important;
}
}
/* Modal quick view */
@media (max-width: 767px) {
.fx-home #myModal .modal-dialog {
margin: 12px auto !important;
width: calc(100% - 24px) !important;
max-width: 100% !important;
}
.fx-home #myModal .modal-content {
border-radius: 8px !important;
}
.fx-home #myModal .modal-body .detail {
padding-top: 16px !important;
}
}