/* ========== CixVentas — Solo página principal (index.html) ========== */ /* Cargar después de styles.css. Requiere */ html.home-page-root { scroll-behavior: smooth; } html.home-page-root:not([data-seasonal-event="halloween"]) { background: #1a0826; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #00d4ff #1a0826; } html.home-page-root:not([data-seasonal-event="halloween"])::-webkit-scrollbar { width: 10px; background: #1a0826; } html.home-page-root:not([data-seasonal-event="halloween"])::-webkit-scrollbar-track { background: #1a0826; box-shadow: inset 0 0 0 999px #1a0826; } html.home-page-root:not([data-seasonal-event="halloween"])::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #5fe7ff 0%, #00d4ff 55%, #008fb3 100%); border-radius: 999px; border: 2px solid #1a0826; } html.home-page-root:not([data-seasonal-event="halloween"])::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #8ef0ff 0%, #27ddff 55%, #13a8d1 100%); } html.home-page-root:not([data-seasonal-event="halloween"])::-webkit-scrollbar-corner { background: #1a0826; } body.home-page { overflow-x: hidden; --home-coral: #ff5c5c; --home-violet: #8b5cf6; --home-mint: #34d399; --home-gold: #fbbf24; --home-surface: rgba(18, 18, 24, 0.72); --home-glass: rgba(255, 255, 255, 0.06); --home-border: rgba(255, 255, 255, 0.12); --home-text-dim: rgba(255, 255, 255, 0.72); font-family: "DM Sans", "Segoe UI", system-ui, sans-serif; background-image: radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.25) 0%, transparent 70%), radial-gradient(circle at 80% 20%, rgba(0, 212, 255, 0.2) 0%, transparent 60%), radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.15) 0%, transparent 80%), radial-gradient(circle at 10% 80%, rgba(52, 211, 153, 0.1) 0%, transparent 60%), linear-gradient(135deg, #0a0a1a 0%, #111122 50%, #080810 100%); background-repeat: no-repeat; background-size: cover; background-attachment: scroll; } body.home-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(180deg, rgba(10, 10, 20, 0.2) 0%, rgba(10, 10, 20, 0.5) 50%, rgba(5, 5, 10, 0.8) 100%); } /* —— Hero Carousel —— */ .home-hero-carousel { position: relative; overflow: hidden; border-radius: 30px; background: transparent; height: 400px; max-width: 1800px; margin: 0 auto; --hero-frame-radius: clamp(20px, 2.4vw, 28px); --hero-nav-size: clamp(40px, 4vw, 48px); --hero-nav-inset: clamp(10px, 1.5vw, 18px); } .home-hero-track { height: 100%; } .home-hero-nav { position: absolute; top: var(--hero-nav-top, 50%); transform: translateY(-50%); z-index: 3; width: var(--hero-nav-size); height: var(--hero-nav-size); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(8, 10, 18, 0.58); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; cursor: pointer; backdrop-filter: blur(10px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28); transition: top 0.32s cubic-bezier(0.22, 1, 0.36, 1), left 0.32s cubic-bezier(0.22, 1, 0.36, 1), right 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .home-hero-nav:hover { transform: translateY(-50%) scale(1.05); background: rgba(18, 24, 38, 0.82); border-color: rgba(255, 255, 255, 0.28); } .home-hero-nav:focus-visible { outline: 2px solid rgba(95, 231, 255, 0.9); outline-offset: 2px; } .home-hero-nav-prev { left: var(--hero-nav-left, var(--hero-nav-inset)); } .home-hero-nav-next { right: var(--hero-nav-right, var(--hero-nav-inset)); } .home-hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease-in-out; pointer-events: none; } .home-hero-slide.active { opacity: 1; pointer-events: auto; z-index: 1; } .hero-img-slide { display: flex !important; align-items: center; justify-content: center; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; height: 100%; box-sizing: border-box; } .home-hero-inner.hero-img-slide::after { display: none !important; } .hero-img-slide img { width: auto; height: auto; max-width: min(100%, calc(100% - 20px)); max-height: min(100%, calc(100% - 20px)); object-fit: contain; object-position: center; display: block; border-radius: var(--hero-frame-radius); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); } .hero-img-slide img.hero-img-slide__img--compact { max-width: min(96%, calc(100% - 28px)); max-height: min(96%, calc(100% - 28px)); } .hero-img-slide img.hero-img-slide__img--large { max-width: 100%; max-height: 100%; } /* Marca CIXVENTAS sobre la barra de navegación */ .home-brand-title { margin: 0 0 12px; font-family: "Outfit", "DM Sans", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.82rem; color: rgba(255, 255, 255, 0.76); } .home-brand-main { font-weight: 800; margin-right: 10px; background: linear-gradient(120deg, #fbbf24, #a78bfa, #34d399); -webkit-background-clip: text; background-clip: text; color: transparent; } .home-brand-sub { font-weight: 500; color: rgba(255, 255, 255, 0.6); } /* Contenido sobre el velado; el header va encima del fondo sin barra fija al viewport */ body.home-page > *:not(.modal):not(header):not(.mai-float-root) { position: relative; z-index: 1; } body.home-page .home-value-strip, body.home-page .home-conversion-band, body.home-page .home-catalog-block, body.home-page .clients-carousel-wrapper, body.home-page #catalogo-completo, body.home-page .layout-container { content-visibility: visible; contain: none; } /* Cabecera: va con el scroll (no sticky); no se oculta al bajar */ body.home-page header { position: relative; top: auto; z-index: 900; isolation: isolate; overflow: visible; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } body.home-page .mai-float-root { z-index: 2000; position: fixed !important; /* Reforzamos la posición fija para que ignore scrolls */ } /* —— Hero —— */ .home-hero { padding: 28px 20px 36px; margin: 0 auto; max-width: 1200px; } @media (min-width: 1025px) { .home-hero-carousel { height: 350px; } .home-hero-inner { padding: 22px 28px; } .home-hero-slide:first-child .home-hero-inner { grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; padding: 16px 56px 18px 68px; } .home-hero-inner { box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(5px); } .home-hero-visual img { animation: none; } } .home-hero-inner { display: grid; grid-template-columns: 1fr minmax(200px, 320px); gap: 28px; align-items: center; padding: 28px 32px; height: 100%; /* El slide de texto también ocupa los 400px */ border-radius: 24px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(18, 18, 26, 0.85) 45%, rgba(255, 92, 92, 0.1) 100%); border: 1px solid var(--home-border); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); overflow: hidden; position: relative; } .home-hero-inner::after { content: ""; position: absolute; width: 200px; height: 200px; right: -40px; top: -60px; background: radial-gradient(circle, rgba(251, 191, 36, 0.25), transparent 70%); pointer-events: none; } .home-hero-kicker { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--home-mint); font-weight: 700; margin: 0 0 10px; } .home-hero-title { font-family: "Outfit", "DM Sans", sans-serif; font-size: clamp(1.65rem, 4vw, 2.35rem); font-weight: 700; line-height: 1.1; margin: 0 0 10px; color: #fff; } .home-hero-title span { background: linear-gradient(90deg, var(--home-gold), var(--home-coral)); -webkit-background-clip: text; background-clip: text; color: transparent; } .home-hero-sub { margin: 0 0 16px; color: var(--home-text-dim); font-size: 1rem; max-width: 36ch; line-height: 1.55; } .home-hero-mobile-info { display: none; } .home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .home-hero-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 0.92rem; text-decoration: none; color: #0a0a0c; background: linear-gradient(135deg, var(--home-gold), #f97316); border: none; box-shadow: 0 8px 28px rgba(251, 191, 36, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; } .home-hero-cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 36px rgba(251, 191, 36, 0.5); } .home-hero-cta-secondary { color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: none; } .home-hero-cta-secondary:hover { box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28); } .home-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .home-hero-badge { font-size: 0.75rem; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--home-border); color: rgba(255, 255, 255, 0.85); font-weight: 600; } .home-hero-trust-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; max-width: 560px; } .home-hero-slide:first-child .home-hero-badges { margin-top: 8px; } .home-hero-slide:first-child .home-hero-trust-mini { margin-top: 8px; gap: 8px; } .home-hero-slide:first-child .home-hero-kicker { margin-bottom: 8px; font-size: 0.72rem; } .home-hero-slide:first-child .home-hero-title { font-size: clamp(1.35rem, 3.3vw, 1.95rem); line-height: 1.04; margin-bottom: 8px; } .home-hero-slide:first-child .home-hero-sub { font-size: 0.9rem; line-height: 1.45; margin-bottom: 12px; max-width: 28ch; } .home-hero-slide:first-child .home-hero-actions { gap: 10px; } .home-hero-slide:first-child .home-hero-cta { padding: 10px 18px; font-size: 0.84rem; } .home-hero-slide:first-child .home-hero-badge { font-size: 0.68rem; padding: 5px 10px; } .home-hero-slide:first-child .home-hero-trust-item { padding: 10px 12px; border-radius: 14px; } .home-hero-slide:first-child .home-hero-trust-item strong { font-size: 0.95rem; } .home-hero-slide:first-child .home-hero-trust-item span { margin-top: 3px; font-size: 0.74rem; } @media (min-width: 1025px) { .home-hero-slide:first-child .home-hero-trust-mini { display: none; } } .home-hero-trust-item { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.08); } .home-hero-trust-item strong { display: block; font-family: "Outfit", sans-serif; font-size: 1.05rem; color: #fff; } .home-hero-trust-item span { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--home-text-dim); line-height: 1.35; } .home-hero-visual { position: relative; display: flex; justify-content: center; align-items: center; } .home-hero-visual img { max-width: 100%; height: auto; filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.45)); animation: homeHeroFloat 5s ease-in-out infinite; } @keyframes homeHeroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .home-hero-orbit { display: none; } @media (max-width: 900px) { .home-hero-inner { grid-template-columns: 1fr; text-align: center; padding: 24px 20px; } .home-hero-sub { margin-left: auto; margin-right: auto; } .home-hero-badges { justify-content: center; } .home-hero-actions { justify-content: center; } .home-hero-trust-mini { max-width: 100%; } .home-hero-visual { order: -1; } .home-hero-orbit { display: none; } .home-hero-nav { width: var(--hero-nav-size); height: var(--hero-nav-size); font-size: 1.05rem; } .home-hero-nav-prev { left: var(--hero-nav-inset); } .home-hero-nav-next { right: var(--hero-nav-inset); } } @media (max-width: 640px) { .home-hero-carousel { --hero-frame-radius: 16px; --hero-image-inset: 8px; --hero-nav-size: 30px; --hero-nav-inset: 6px; } .home-hero-trust-mini { grid-template-columns: 1fr; } .home-hero-nav { width: var(--hero-nav-size); height: var(--hero-nav-size); font-size: 0.9rem; } .home-hero-nav-prev { left: var(--hero-nav-inset); } .home-hero-nav-next { right: var(--hero-nav-inset); } } /* —— Header / nav —— */ body.home-page header .container { padding-top: 12px; padding-bottom: 4px; } body.home-page .main-nav.site-nav-unified { margin-top: 0; background: transparent; border: none; box-shadow: none; backdrop-filter: none; padding-left: 0; padding-right: 0; } /* Sin máscara lateral que oscurezca el borde del scroll */ body.home-page .site-nav-scroll { mask-image: none; -webkit-mask-image: none; } body.home-page .site-nav-list .nav-link { color: rgba(255, 255, 255, 0.72); border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.05) !important; box-shadow: none !important; } body.home-page .site-nav-list .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.09) !important; border-color: rgba(139, 92, 246, 0.35) !important; transform: none; } body.home-page .site-nav-list .nav-link.active { background: rgba(124, 92, 255, 0.16) !important; color: #fff; border-color: rgba(124, 92, 255, 0.28) !important; box-shadow: none !important; } body.home-page .site-nav-list .nav-link-promos:hover, body.home-page .site-nav-list .nav-link-promos.active { animation: none !important; transform: none !important; border-color: rgba(251, 191, 36, 0.45) !important; box-shadow: none !important; background: rgba(251, 191, 36, 0.12) !important; } body.home-page .site-nav-list .nav-link-promos:hover { color: #fde68a !important; background: rgba(251, 191, 36, 0.15) !important; border-color: rgba(251, 191, 36, 0.55) !important; } body.home-page .nav-glider:not(.is-promos) { background: linear-gradient(135deg, rgba(124, 92, 255, 0.92), rgba(99, 102, 241, 0.88)); box-shadow: none; filter: none; } body.home-page .nav-glider.is-promos { background: linear-gradient(135deg, #fbbf24, #f97316); box-shadow: none; filter: none; } body.home-page .site-nav-more-btn { border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); box-shadow: none; } body.home-page .site-nav-more-btn:hover, body.home-page .site-nav-more-btn[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.1); box-shadow: none; } /* —— Panel "Más" animado y estilizado —— */ .site-nav-more { position: relative; /* Contenedor de referencia para el panel */ } body.home-page .site-nav-more-panel { display: block !important; /* Mantenemos en el DOM para la transición */ --nav-more-offset-x: 0px; visibility: hidden; opacity: 0; transform: translateX(var(--nav-more-offset-x)) translateY(12px) scale(0.96); transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s; padding: 18px; background: rgba(12, 12, 18, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--home-border); border-radius: 22px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 20px rgba(139, 92, 246, 0.1); min-width: 240px; pointer-events: none; position: absolute; top: 100%; right: 0; margin-top: 12px; z-index: 1000; } body.home-page .site-nav-more-panel.is-visible { visibility: visible; opacity: 1; transform: translateX(var(--nav-more-offset-x)) translateY(0) scale(1); pointer-events: auto; } body.home-page .site-nav-more-section { margin-bottom: 18px; /* Separación entre bloques */ display: flex; flex-direction: column; gap: 6px; background: rgba(255, 255, 255, 0.03); padding: 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.05); transition: border-color 0.3s ease; } body.home-page .site-nav-more-section:hover { border-color: rgba(139, 92, 246, 0.3); } body.home-page .site-nav-more-section:last-child { margin-bottom: 0; } body.home-page .site-nav-more-title { color: var(--home-violet); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 10px; display: block; opacity: 0.8; } body.home-page .site-nav-more-panel .sub-nav-btn { width: 100%; text-align: left; padding: 8px 12px; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; transition: all 0.2s ease; } body.home-page .site-nav-more-panel .sub-nav-btn:hover { background: rgba(255, 255, 255, 0.05); color: #fff; transform: translateX(4px); } body.home-page .site-nav-more-panel .sub-nav-btn:disabled, body.home-page .site-nav-more-panel .sub-nav-btn[aria-disabled="true"] { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.38); cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; user-select: none; } body.home-page .site-nav-end { border-left: none; padding-left: 8px; } body.home-page .home-header-cart-btn { min-width: 64px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(180deg, rgba(18, 25, 40, 0.92), rgba(23, 32, 50, 0.82)); color: #eef6ff; font-weight: 800; cursor: pointer; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22); transition: transform 0.2s ease, border-color 0.2s ease, filter 0.2s ease; } body.home-page .home-header-cart-btn:hover { transform: translateY(-1px); border-color: rgba(95, 231, 255, 0.38); filter: brightness(1.04); } body.home-page .home-header-cart-icon { font-size: 1rem; line-height: 1; } body.home-page .home-header-cart-count { min-width: 18px; text-align: center; font-size: 0.86rem; line-height: 1; } /* Buscador: estilos en .home-search-wrap (más abajo) */ body.home-page .btn-multi-select { border-radius: 999px; padding: 10px 20px; font-weight: 700; background: linear-gradient(135deg, rgba(52, 211, 153, 0.25), rgba(16, 185, 129, 0.15)); border: 1px solid rgba(52, 211, 153, 0.45); color: #d1fae5; transition: transform 0.2s ease, box-shadow 0.2s ease; } body.home-page .btn-multi-select:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(52, 211, 153, 0.25); } /* LATAM warning strip */ body.home-page .home-latam-banner { display: none; justify-content: center; align-items: center; gap: 10px; margin: 0 auto 16px; padding: 8px 18px; max-width: 640px; border-radius: 999px; background: linear-gradient(90deg, rgba(251, 191, 36, 0.12), rgba(255, 92, 92, 0.1)); border: 1px solid rgba(251, 191, 36, 0.35); color: #fde68a; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } /* —— Stats (reordenadas arriba del grid) —— */ body.home-page .stats-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px auto 28px; max-width: 1000px; padding: 0; background: transparent; border: none; } body.home-page .stat-box { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px 16px 20px; border-radius: 18px; background: var(--home-surface); border: 1px solid var(--home-border); backdrop-filter: blur(6px); transition: transform 0.22s ease, border-color 0.22s ease; } body.home-page .stat-box:hover { transform: translateY(-4px); border-color: rgba(139, 92, 246, 0.45); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); } body.home-page .stat-label { margin: 0 0 10px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.55); font-weight: 700; line-height: 1.3; max-width: 18ch; } body.home-page .stat-number { font-family: "Outfit", sans-serif; font-size: clamp(1.85rem, 4vw, 2.5rem); margin: 0; line-height: 1.1; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.75)); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (max-width: 600px) { body.home-page .stats-container { grid-template-columns: 1fr; } } /* —— Carruseles por catálogo —— */ .home-catalog-intro { display: grid; grid-template-columns: 1.1fr auto; align-items: end; gap: 18px; margin: 0 0 28px; padding: 24px; border-radius: 24px; border: 1px solid var(--home-border); background: radial-gradient(circle at top right, rgba(52, 211, 153, 0.08), transparent 34%), linear-gradient(160deg, rgba(21, 21, 34, 0.95), rgba(11, 11, 18, 0.98)); } .home-catalog-intro-copy h2 { margin: 0 0 8px; font-family: "Outfit", sans-serif; font-size: clamp(1.3rem, 2.8vw, 1.9rem); line-height: 1.1; color: #fff; } .home-catalog-intro-copy p:last-child { margin: 0; max-width: 58ch; color: var(--home-text-dim); line-height: 1.55; } .home-catalog-intro-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .home-catalog-intro-pill, .home-catalog-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 6px 12px; border-radius: 999px; font-size: 0.73rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .home-catalog-intro-pill { color: #d1fae5; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.24); } .home-catalog-spotlights { display: flex; flex-direction: column; gap: 36px; margin-bottom: 36px; } .home-catalog-block { padding: 18px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.08); background: radial-gradient(circle at top right, rgba(139, 92, 246, 0.08), transparent 28%), linear-gradient(165deg, rgba(17, 17, 28, 0.88), rgba(9, 9, 14, 0.92)); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18); } .home-catalog-head { margin-bottom: 14px; padding: 0 4px; } .home-catalog-head h2 { font-family: "Outfit", sans-serif; font-size: clamp(1.15rem, 2.5vw, 1.45rem); font-weight: 700; color: #fff; margin: 0 0 4px; letter-spacing: -0.02em; } .home-catalog-head p { margin: 0; font-size: 0.88rem; color: var(--home-text-dim); } .home-catalog-chip { margin-bottom: 10px; color: #c4b5fd; background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.22); } .home-carousel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; } .home-carousel-viewport { overflow: hidden; border-radius: 20px; border: 1px solid var(--home-border); background: rgba(0, 0, 0, 0.2); } .home-carousel-track { display: flex; gap: 14px; padding: 12px 14px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .home-carousel-track::-webkit-scrollbar { height: 6px; } .home-carousel-track::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.35); border-radius: 10px; } .home-carousel-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--home-border); background: var(--home-surface); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .home-carousel-btn:hover { background: rgba(139, 92, 246, 0.25); transform: scale(1.05); } @media (max-width: 520px) { .home-catalog-intro { grid-template-columns: 1fr; padding: 18px; } .home-catalog-intro-pills { justify-content: flex-start; } .home-carousel-btn { width: 36px; height: 36px; font-size: 1.2rem; } } .home-catalog-main-head { text-align: center; margin: 8px 0 28px; padding: 20px 16px; border-radius: 18px; border: 1px solid var(--home-border); background: rgba(255, 255, 255, 0.04); } .home-catalog-main-title { font-family: "Outfit", sans-serif; font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 0 0 6px; color: #fff; } .home-catalog-main-sub { margin: 0; font-size: 0.92rem; color: var(--home-text-dim); } /* —— Product grid & cards —— */ body.home-page:not(.product-page) .layout-container { display: block; gap: 24px; } body.home-page:not(.product-page) #product-grid.product-grid { gap: 20px; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); } body.home-page:not(.product-page) .product-details-panel { display: none !important; } body.home-page #product-grid .product-card { border-radius: 20px; border: 1px solid var(--home-border); background: linear-gradient(160deg, rgba(32, 32, 42, 0.98), rgba(12, 12, 16, 0.99)); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } body.home-page #product-grid .product-card:hover { transform: translateY(-8px); border-color: rgba(139, 92, 246, 0.45); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); } body.home-page #product-grid .product-card.selected { border-color: var(--home-mint); box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.35); } body.home-page .product-card-media { position: relative; overflow: hidden; background: radial-gradient(circle at 30% 20%, rgba(139, 92, 246, 0.12), transparent 55%); } body.home-page #product-grid .product-card-media img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.35s ease; } body.home-page #product-grid .product-card:hover .product-card-media img { transform: scale(1.04); } body.home-page .product-card-title { font-size: 0.95rem; line-height: 1.3; font-weight: 600; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.home-page .product-card-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; max-height: 68px; overflow: hidden; } body.home-page .product-card-summary-pill { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; min-height: 28px; max-height: 42px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(139, 92, 246, 0.10)); color: #e9e7ff; font-size: 0.72rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } body.home-page .panel-desc-summary { display: grid; gap: 10px; margin-top: 6px; } body.home-page .panel-desc-chip { position: relative; overflow: hidden; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(139, 92, 246, 0.22); background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(56, 189, 248, 0.10)), rgba(18, 18, 28, 0.92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.20); animation: panelDescChipIn 0.45s ease both; } body.home-page .panel-desc-chip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%); transform: translateX(-110%); animation: panelDescGlow 3.6s ease-in-out infinite; } body.home-page .panel-desc-chip-text { position: relative; z-index: 1; display: block; color: #f3efff; font-size: 0.9rem; line-height: 1.35; font-weight: 600; } @keyframes panelDescChipIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes panelDescGlow { 0%, 65% { transform: translateX(-110%); } 100% { transform: translateX(110%); } } body.home-page .product-card-price-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; } body.home-page .product-card-price-row--sale { flex-direction: column; gap: 2px; } body.home-page #product-grid .product-info { padding: 14px 14px 16px; flex: 1; display: flex; flex-direction: column; } body.home-page .category-tag { background: rgba(139, 92, 246, 0.15); color: #c4b5fd; border-color: rgba(139, 92, 246, 0.45); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; } body.home-page .price { color: var(--home-mint); font-size: 1.15rem; } /* Carrusel: tarjetas compactas */ body.home-page .product-card--spotlight { flex: 0 0 min(46vw, 210px); scroll-snap-align: start; max-width: 220px; min-height: 348px; } body.home-page .product-card--spotlight .product-card-media img { height: 148px; } body.home-page .product-card--spotlight .product-info { padding: 12px; } body.home-page .product-card--spotlight .product-card-title { font-size: 0.82rem; -webkit-line-clamp: 2; } body.home-page .product-card--spotlight .product-card-summary { gap: 5px; margin-bottom: 8px; max-height: 58px; } body.home-page .product-card--spotlight .product-card-summary-pill { min-height: 24px; max-height: 36px; padding: 5px 9px; font-size: 0.66rem; } body.home-page #product-grid .card-favorite-btn { bottom: auto; top: 10px; right: 10px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(248, 113, 113, 0.24); border-radius: 50%; background: rgba(8, 12, 22, 0.68); color: rgba(254, 205, 211, 0.86); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26); backdrop-filter: blur(10px); } body.home-page #product-grid .card-favorite-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; } body.home-page #product-grid .card-favorite-btn.active { color: #fff; background: linear-gradient(135deg, #fb7185, #e11d48); border-color: rgba(251, 113, 133, 0.72); } body.home-page #product-grid .card-favorite-btn.active svg { fill: currentColor; } body.home-page .product-card--spotlight .card-favorite-btn { display: none; } @media (min-width: 901px) { body.home-page .product-card--spotlight { transition: none; } body.home-page .product-card--spotlight:hover { transform: none; border-color: var(--home-border); box-shadow: none; } body.home-page .product-card--spotlight .product-card-media img { transition: none; } body.home-page .product-card--spotlight:hover .product-card-media img { transform: none; } } @media (max-width: 900px) { body.home-page:not(.product-page) #product-grid.product-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } } @media (max-width: 520px) { body.home-page:not(.product-page) #product-grid.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } body.home-page #product-grid .product-card-media img { height: 150px; } body.home-page .home-catalog-spotlights { gap: 28px; margin-bottom: 28px; } } /* —— Panel derecho —— */ body.home-page .product-details-panel { width: min(100%, 380px); border-radius: 20px; background: linear-gradient(180deg, rgba(24, 24, 32, 0.95), rgba(12, 12, 16, 0.98)); border: 1px solid var(--home-border); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); } body.home-page .panel-title { font-family: "Outfit", sans-serif; } body.home-page .home-seller-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: center; gap: 10px; width: 100%; margin: 8px 0 10px; padding: 10px; border-radius: 16px; border: 1px solid rgba(125, 211, 252, 0.18); background: linear-gradient(135deg, rgba(34, 211, 238, 0.13), rgba(34, 197, 94, 0.09)), rgba(255, 255, 255, 0.045); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 26px rgba(0, 0, 0, 0.22); } body.home-page .home-seller-logo { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; } body.home-page .home-seller-logo img { width: 32px; height: 32px; object-fit: contain; display: block; } body.home-page .home-seller-copy { min-width: 0; display: grid; gap: 1px; } body.home-page .home-seller-kicker { color: rgba(191, 219, 254, 0.78); font-size: 0.6rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.11em; } body.home-page .home-seller-copy strong { color: #ffffff; font-size: 0.9rem; font-weight: 950; line-height: 1.15; overflow-wrap: anywhere; } body.home-page .home-seller-copy small { color: rgba(226, 232, 240, 0.74); font-size: 0.66rem; font-weight: 650; line-height: 1.25; } body.home-page .home-seller-check { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #22c55e, #14b8a6); color: #03140d; font-size: 0.88rem; font-weight: 950; box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24); } body.home-page .btn-panel-buy { border-radius: 12px; font-weight: 800; background: linear-gradient(135deg, var(--home-violet), #6366f1); border: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } body.home-page .btn-panel-buy:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(139, 92, 246, 0.45); } body.home-page .btn-panel-info { border-radius: 12px; border: 1px solid var(--home-border); background: rgba(255, 255, 255, 0.05); } /* —— Paginación —— */ body.home-page .pagination button, body.home-page .pagination a { border-radius: 10px; border: 1px solid var(--home-border); background: var(--home-surface); transition: all 0.2s ease; } body.home-page .pagination button:hover, body.home-page .pagination a:hover { border-color: var(--home-violet); color: #fff; } /* —— Promos packs —— */ body.home-page .promos-section-container { padding: 18px 0 8px; } body.home-page .home-promos-head { max-width: 760px; margin: 0 auto 34px; text-align: center; } body.home-page .promos-section-container .home-promos-title, body.home-page .promos-section-container .section-title-large { font-family: "Outfit", sans-serif; text-align: center; margin-bottom: 10px; background: linear-gradient(90deg, var(--home-gold), #fb923c); -webkit-background-clip: text; background-clip: text; color: transparent !important; } body.home-page .home-promos-subtitle { margin: 0; font-size: 0.98rem; line-height: 1.55; color: rgba(255, 255, 255, 0.68); } body.home-page .promos-grid-3d { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; align-items: stretch; } body.home-page .promo-card-3d.promo-card-pack { position: relative; display: flex; flex-direction: column; min-height: 100%; overflow: hidden; cursor: pointer; border-radius: 26px; border: 1px solid rgba(255, 255, 255, 0.1); background: radial-gradient(circle at top right, rgba(251, 191, 36, 0.16), transparent 30%), radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.12), transparent 32%), linear-gradient(165deg, rgba(20, 20, 32, 0.98), rgba(9, 11, 20, 0.98)); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } body.home-page .promo-card-3d.promo-card-pack:hover { transform: translateY(-8px); border-color: rgba(251, 191, 36, 0.32); box-shadow: 0 28px 54px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(251, 191, 36, 0.08); } @media (min-width: 901px) { body.home-page .home-catalog-block, body.home-page .promos-section-container, body.home-page .bottom-section-container, body.home-page .innovations-section, body.home-page .clients-section, body.home-page .codes-section { content-visibility: visible; contain: none; } body.home-page .home-catalog-block { box-shadow: none; background: linear-gradient(165deg, rgba(17, 17, 28, 0.94), rgba(9, 9, 14, 0.96)); } body.home-page .home-carousel-viewport { border-radius: 18px; box-shadow: none; background: transparent; contain: none; } body.home-page .home-carousel-track { contain: none; } body.home-page .product-card--spotlight { contain: none; background: #171926; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: none !important; } body.home-page .product-card--spotlight .product-card-media { background: #11131d; } body.home-page .product-card--spotlight .product-card-media img { filter: none !important; backface-visibility: hidden; } body.home-page .product-card--spotlight .product-info { background: transparent; } body.home-page .product-card--spotlight .product-card-summary, body.home-page .product-card--spotlight .product-card-summary-pill, body.home-page .product-card--spotlight .category-tag { box-shadow: none !important; } body.home-page .home-catalog-block, body.home-page .home-catalog-head, body.home-page .home-carousel, body.home-page .product-card--spotlight { transform: none !important; } body.home-page #product-grid .product-card { box-shadow: none; transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } body.home-page #product-grid .product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); } body.home-page #product-grid .product-card-media img { transition: none; } body.home-page #product-grid .product-card:hover .product-card-media img { transform: none; } body.home-page .promo-card-3d.promo-card-pack { box-shadow: none; transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } body.home-page .promo-card-3d.promo-card-pack:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(251, 191, 36, 0.06); } body.home-page .feature-card, body.home-page .innovations-section { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } body.home-page .home-hero-inner, body.home-page .product-details-panel, body.home-page .main-offer-card, body.home-page .clients-section, body.home-page .codes-section, body.home-page .feature-card, body.home-page .innovations-section, body.home-page .home-price-filter { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } body.home-page .main-offer-card:hover, body.home-page .feature-card:hover, body.home-page .home-value-card:hover, body.home-page .promo-card-3d.promo-card-pack:hover, body.home-page #product-grid .product-card:hover { box-shadow: none !important; } body.home-page .offer-images img, body.home-page .product-card-media img, body.home-page .promo-card-img, body.home-page .home-hero-visual img { filter: none !important; } body.home-page .home-catalog-block, body.home-page .promos-section-container, body.home-page .clients-section, body.home-page .codes-section, body.home-page .innovations-section { contain: none; } } body.home-page .promo-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 0; } body.home-page .promo-pack-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fde68a; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.22); } body.home-page .promo-pack-price { font-family: "Outfit", sans-serif; font-size: 1.2rem; font-weight: 700; color: #fff; } body.home-page .promo-card-image-wrap { position: relative; margin: 14px 18px 0; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); min-height: 210px; } body.home-page .promo-card-img { width: 100%; height: 210px; object-fit: cover; display: block; transition: transform 0.35s ease; } body.home-page .promo-card-3d.promo-card-pack:hover .promo-card-img { transform: scale(1.04); } body.home-page .promo-card-badge { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; min-height: 30px; padding: 6px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #e0f2fe; background: rgba(8, 15, 30, 0.78); border: 1px solid rgba(103, 232, 249, 0.2); backdrop-filter: blur(10px); } body.home-page .promo-card-body { display: flex; flex: 1; flex-direction: column; padding: 18px 18px 20px; } body.home-page .promo-card-title { margin: 0 0 8px; font-family: "Outfit", sans-serif; font-size: 1.18rem; line-height: 1.15; color: #fff; } body.home-page .promo-card-desc { margin: 0 0 10px; color: #dbe8ff; font-size: 0.95rem; line-height: 1.45; } body.home-page .promo-card-copy { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 0.88rem; line-height: 1.55; } body.home-page .promo-card-footer { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } body.home-page .promo-card-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; font-weight: 800; color: #09111d; background: linear-gradient(135deg, #fcd34d, #fb923c); box-shadow: 0 12px 22px rgba(251, 146, 60, 0.22); } body.home-page .promo-card-note { font-size: 0.8rem; color: rgba(255, 255, 255, 0.48); } @media (max-width: 640px) { body.home-page .promos-grid-3d { grid-template-columns: 1fr; } body.home-page .promo-card-topline { padding: 14px 14px 0; } body.home-page .promo-card-image-wrap { margin: 12px 14px 0; min-height: 190px; } body.home-page .promo-card-img { height: 190px; } body.home-page .promo-card-body { padding: 16px 14px 18px; } body.home-page .promo-card-footer { align-items: flex-start; flex-direction: column; } } /* —— Ofertas estrella —— */ body.home-page .main-offer-card { border-radius: 22px; border: 1px solid var(--home-border); background: linear-gradient(145deg, rgba(139, 92, 246, 0.12), rgba(18, 18, 24, 0.92)); overflow: hidden; transition: transform 0.3s ease; } body.home-page .main-offer-card:hover { transform: scale(1.01); box-shadow: 0 20px 50px rgba(139, 92, 246, 0.2); } body.home-page .offer-badge { background: linear-gradient(90deg, var(--home-coral), #f97316); } body.home-page .btn-claim-offer { border-radius: 999px; font-weight: 800; } /* —— Zona ofertas banner —— */ body.home-page .offers-zone-banner { border-radius: 16px; border: 1px dashed var(--home-border); background: rgba(255, 255, 255, 0.03); } /* —— Experiencia / features —— */ body.home-page .bottom-section-container { margin-top: 48px; } body.home-page .bottom-section-container .section-title-large { font-family: "Outfit", sans-serif; font-size: clamp(1.5rem, 3vw, 2rem); text-align: center; margin-bottom: 32px; color: #fff; } body.home-page .home-experience-title { background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.75)); -webkit-background-clip: text; background-clip: text; color: transparent; } body.home-page .features-grid { gap: 20px; } body.home-page .feature-card { border-radius: 20px; border: 1px solid var(--home-border); background: var(--home-surface); backdrop-filter: blur(6px); padding: 24px 20px; transition: transform 0.22s ease, border-color 0.22s ease; } body.home-page .feature-card:hover { transform: translateY(-6px); border-color: rgba(52, 211, 153, 0.4); } body.home-page .feature-card h3 { color: #fff; font-family: "Outfit", sans-serif; } body.home-page .feature-icon img { width: 48px; height: 48px; object-fit: contain; } /* —— Split quejas / innovación —— */ body.home-page .innovations-section { border-radius: 22px; border: 1px solid var(--home-border); background: var(--home-surface); backdrop-filter: blur(10px); padding: 20px; display: flex; flex-direction: column; gap: 16px; } body.home-page .innovation-wrapper { border-radius: 16px; overflow: visible; border: none; margin: 0; background: transparent; } /* recibalo.png / entrega.png: imagen completa, más grande, sin recorte ni hover raro */ body.home-page .innovation-wrapper--no-hover-anim { transition: none; padding: 12px 8px 8px; } body.home-page .innovation-wrapper--no-hover-anim .innovation-img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; object-position: center center; transform: scale(1.12); transform-origin: center center; filter: none !important; transition: none !important; } body.home-page .innovation-wrapper--no-hover-anim:hover .innovation-img { transform: scale(1.12) !important; filter: none !important; } body.home-page .innovation-wrapper--no-hover-anim .hover-info-overlay { display: none !important; } body.home-page .innovation-caption { margin: 0; padding: 10px 12px 4px; font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.65); text-align: center; background: transparent; } body.home-page .innovation-wrapper--no-hover-anim:hover { border-color: transparent; box-shadow: none; } /* Quejas — bloque rediseñado */ body.home-page .complaint-section--home { text-align: left; padding: 0; border: none; background: transparent; overflow: visible; } .bottom-split-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.3fr); gap: 18px; align-items: stretch; } .home-trust-card { border-radius: 22px; border: 1px solid var(--home-border); background: var(--home-surface); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 10px; } .home-trust-title { margin: 0; font-family: "Outfit", "DM Sans", sans-serif; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .home-trust-lead { margin: 2px 0 6px; font-size: 0.92rem; color: var(--home-text-dim); } .home-trust-list { margin: 0; padding-left: 18px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.78); display: flex; flex-direction: column; gap: 4px; } .home-trust-footer { margin: 8px 0 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.65); } @media (max-width: 900px) { .bottom-split-layout { grid-template-columns: 1fr; } } body.home-page .complaint-section__head { padding: 22px 22px 18px; border-radius: 22px 22px 0 0; background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(255, 92, 92, 0.12)); border: 1px solid var(--home-border); border-bottom: none; position: relative; } body.home-page .complaint-section__head::after { content: ""; position: absolute; inset: 0; border-radius: 22px 22px 0 0; background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(251, 191, 36, 0.12), transparent 55%); pointer-events: none; } body.home-page .complaint-section__badge { display: inline-block; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--home-mint); margin-bottom: 10px; } body.home-page .complaint-section__title { font-family: "Outfit", "DM Sans", sans-serif; font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 700; margin: 0 0 10px; line-height: 1.2; color: #fff; position: relative; z-index: 1; } body.home-page .complaint-section__lead { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--home-text-dim); max-width: 42ch; position: relative; z-index: 1; } body.home-page .complaint-section__steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; position: relative; z-index: 1; } body.home-page .complaint-section__steps li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.1); } body.home-page .complaint-section__steps span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 0.65rem; font-weight: 800; background: linear-gradient(135deg, var(--home-violet), #6366f1); color: #fff; } body.home-page .complaint-form--home { padding: 22px; border-radius: 0 0 22px 22px; background: rgba(14, 14, 20, 0.92); border: 1px solid var(--home-border); border-top: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); } body.home-page .complaint-form--home .form-group { max-height: none; } body.home-page .complaint-form--home .form-group label { color: rgba(255, 255, 255, 0.82); font-weight: 600; font-size: 0.82rem; } body.home-page .complaint-form--home input, body.home-page .complaint-textarea { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(8, 8, 12, 0.85); transition: border-color 0.2s ease, box-shadow 0.2s ease; } body.home-page .complaint-form--home input:focus, body.home-page .complaint-textarea:focus { border-color: rgba(139, 92, 246, 0.65); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); } body.home-page .complaint-textarea { width: 100%; padding: 12px 14px; color: #fff; resize: vertical; min-height: 100px; font-family: inherit; } body.home-page .complaint-input-readonly { cursor: pointer; } body.home-page .complaint-attachment-picker { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(34, 211, 238, 0.5); background: rgba(34, 211, 238, 0.08); color: rgba(255, 255, 255, 0.9); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } body.home-page .complaint-attachment-picker:hover { border-color: rgba(34, 211, 238, 0.8); background: rgba(34, 211, 238, 0.13); transform: translateY(-1px); } body.home-page .complaint-attachment-picker span { font-weight: 800; font-size: 0.88rem; } body.home-page .complaint-attachment-picker small { color: rgba(255, 255, 255, 0.54); font-size: 0.72rem; } body.home-page .complaint-attachment-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } body.home-page .complaint-attachment-preview { margin-top: 10px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(8, 8, 12, 0.85); } body.home-page .complaint-attachment-preview img { display: block; width: 100%; max-height: 180px; object-fit: cover; } body.home-page .complaint-product-select { border-radius: 12px; border: 1px dashed rgba(139, 92, 246, 0.45); background: rgba(139, 92, 246, 0.08); } body.home-page .complaint-disclaimer { font-size: 0.78rem; color: rgba(255, 255, 255, 0.45); margin-top: 8px; } body.home-page .complaint-submit { margin-top: 8px; border-radius: 999px; font-weight: 700; padding: 14px 20px; background: linear-gradient(135deg, var(--home-violet), #6366f1); border: none; box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } body.home-page .complaint-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(139, 92, 246, 0.45); } body.home-page .btn-send-email { border-radius: 999px; font-weight: 700; background: linear-gradient(135deg, var(--home-violet), #6366f1); border: none; } /* —— Clientes carousel —— */ body.home-page .clients-section { margin-top: 40px; } body.home-page .clients-title { font-family: "Outfit", sans-serif; } /* —— Códigos referidos —— */ body.home-page .codes-section { border-radius: 20px; border: 1px solid var(--home-border); background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(18, 18, 24, 0.85)); padding: 32px 24px; margin-top: 40px; } body.home-page .code-input { border-radius: 999px; border: 1px solid var(--home-border); background: rgba(0, 0, 0, 0.35); } body.home-page .btn-redeem { border-radius: 999px; font-weight: 700; background: linear-gradient(135deg, var(--home-mint), #059669); border: none; } /* —— Footer —— */ body.home-page .main-footer { margin-top: 48px; border-top: 1px solid var(--home-border); background: linear-gradient(180deg, rgba(12, 12, 18, 0.5), rgba(6, 6, 10, 0.95)); padding-top: 40px; } body.home-page .footer-column h3 { font-family: "Outfit", sans-serif; color: #fff; } body.home-page .footer-column a:hover { color: var(--home-gold); } /* —— Mai floating (esquina inferior derecha) —— */ body.home-page .mai-hint-bubble { border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.15); } body.home-page .btn-mai-animada img { border-color: rgba(139, 92, 246, 0.85); } /* —— Auth floating —— */ body.home-page .btn-login-google { border-radius: 999px; border: 1px solid var(--home-border); background: var(--home-surface); backdrop-filter: blur(8px); } /* Subnavs */ body.home-page .sub-nav { background: rgba(16, 16, 22, 0.96); border: 1px solid var(--home-border); } /* —— Inicio —— */ body.home-page .nav-link-inicio { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } body.home-page .nav-link-inicio:hover { background: rgba(52, 211, 153, 0.2) !important; border-color: rgba(52, 211, 153, 0.45) !important; color: #ecfdf5 !important; } /* —— Franja valor —— */ .home-value-strip { padding: 20px 16px 8px; max-width: 1200px; margin: 0 auto; } .home-value-strip-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .home-value-card { padding: 20px 18px; border-radius: 18px; border: 1px solid var(--home-border); background: rgba(255, 255, 255, 0.04); transition: transform 0.22s ease, border-color 0.22s ease; } .home-value-card:hover { transform: translateY(-4px); border-color: rgba(139, 92, 246, 0.4); } .home-value-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(139, 92, 246, 0.15); margin-bottom: 12px; } .home-value-icon img { width: 36px; height: 36px; object-fit: contain; } .home-value-title { font-family: "Outfit", sans-serif; font-size: 1rem; margin: 0 0 6px; color: #fff; } .home-value-text { margin: 0; font-size: 0.86rem; color: var(--home-text-dim); line-height: 1.45; } #modalDetalles .carousel { position: relative; overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, rgba(22, 22, 29, 0.96), rgba(10, 10, 14, 0.98)); border: 1px solid rgba(255, 255, 255, 0.06); } #modalDetalles .carousel-images { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 220px; isolation: isolate; } #modalDetalles .carousel-images::before { content: ""; position: absolute; inset: -12%; background-image: var(--modal-carousel-bg); background-size: cover; background-position: center; filter: blur(30px) saturate(0.92); transform: scale(1.14); opacity: 0.58; z-index: 0; } #modalDetalles .carousel-images::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.04), rgba(8, 8, 12, 0.44)); z-index: 1; } #modalDetalles .carousel-images img { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; object-fit: contain; max-width: 100%; max-height: 280px; opacity: 0; transform: scale(0.98); transition: opacity 0.28s ease, transform 0.28s ease; z-index: 2; } #modalDetalles .carousel-images img.active { opacity: 1; transform: scale(1); } .modal-image-zoom { background: rgba(0, 0, 0, 0.94); backdrop-filter: none; align-items: center; justify-content: center; } .modal-image-zoom-content { width: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; display: flex; align-items: center; justify-content: center; } .modal-image-zoom .close { display: none !important; } #modalImagenProductoImg { display: block; width: auto; max-width: 96vw; max-height: 96vh; object-fit: contain; border-radius: 0; box-shadow: none; user-select: none; -webkit-user-drag: none; touch-action: pinch-zoom; } @media (max-width: 768px) { .home-value-strip-inner { grid-template-columns: 1fr; } } body.home-page .product-comments-shell { margin-top: 20px; padding: 18px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.08); background: radial-gradient(circle at top right, rgba(34, 211, 238, 0.12), transparent 34%), linear-gradient(180deg, rgba(13, 16, 26, 0.96), rgba(7, 9, 15, 0.98)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 40px rgba(0, 0, 0, 0.28); } body.home-page .product-comments-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; } body.home-page .product-comments-kicker { margin: 0 0 4px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: #7dd3fc; font-weight: 800; } body.home-page .product-comments-head h3 { margin: 0; font-family: "Outfit", sans-serif; font-size: 1.08rem; color: #fff; } body.home-page .product-comments-count { padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: #dbeafe; font-size: 0.78rem; white-space: nowrap; } body.home-page .product-comments-compose { padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); } body.home-page .product-comments-user { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } body.home-page .product-comments-user img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(125, 211, 252, 0.42); box-shadow: 0 8px 20px rgba(34, 211, 238, 0.18); } body.home-page .product-comments-user strong { display: block; color: #fff; font-size: 0.95rem; } body.home-page .product-comments-user p { margin: 4px 0 0; color: rgba(226, 232, 240, 0.74); font-size: 0.82rem; line-height: 1.45; } body.home-page .product-comments-form { display: grid; gap: 10px; } body.home-page .product-comments-textarea { width: 100%; resize: vertical; min-height: 108px; padding: 14px 15px; border-radius: 18px; border: 1px solid rgba(125, 211, 252, 0.16); background: rgba(4, 8, 15, 0.8); color: #f8fafc; font: inherit; transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } body.home-page .product-comments-textarea:focus { outline: none; border-color: rgba(125, 211, 252, 0.48); box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12); transform: translateY(-1px); } body.home-page .product-comments-textarea:disabled { opacity: 0.72; cursor: not-allowed; } body.home-page .product-comments-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; } body.home-page .product-comments-meta { color: rgba(191, 219, 254, 0.74); font-size: 0.78rem; } body.home-page .product-comments-submit { border: none; border-radius: 999px; padding: 11px 18px; background: linear-gradient(135deg, #22d3ee, #14b8a6); color: #06131a; font-weight: 800; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; box-shadow: 0 12px 26px rgba(20, 184, 166, 0.24); } body.home-page .product-comments-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(20, 184, 166, 0.28); } body.home-page .product-comments-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } body.home-page .product-comments-feedback { display: none; margin-top: 12px; padding: 11px 13px; border-radius: 14px; font-size: 0.82rem; line-height: 1.45; } body.home-page .product-comments-feedback.is-success { display: block; background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(16, 185, 129, 0.26); color: #d1fae5; } body.home-page .product-comments-feedback.is-warning { display: block; background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.24); color: #fde68a; } body.home-page .product-comments-feedback.is-error { display: block; background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.22); color: #fecaca; } body.home-page .product-comments-list { display: grid; gap: 12px; margin-top: 14px; } body.home-page .product-comments-empty, body.home-page .product-comment-card { border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.035); } body.home-page .product-comments-empty { padding: 18px; text-align: center; } body.home-page .product-comments-empty strong { display: block; margin-bottom: 6px; color: #f8fafc; } body.home-page .product-comments-empty p { margin: 0; color: rgba(226, 232, 240, 0.72); line-height: 1.5; } body.home-page .product-comments-empty.is-loading { background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(59, 130, 246, 0.05)); } body.home-page .product-comments-empty.is-error { background: linear-gradient(135deg, rgba(239, 68, 68, 0.09), rgba(127, 29, 29, 0.04)); } body.home-page .product-comments-empty.is-disabled { background: linear-gradient(135deg, rgba(148, 163, 184, 0.08), rgba(51, 65, 85, 0.05)); } body.home-page .product-comment-card { padding: 14px; animation: commentCardIn 0.26s ease; } body.home-page .product-comment-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } body.home-page .product-comment-author { display: flex; align-items: center; gap: 11px; } body.home-page .product-comment-author img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(125, 211, 252, 0.22); } body.home-page .product-comment-author strong { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; color: #fff; font-size: 0.9rem; } body.home-page .product-comment-author-text, body.product-page .product-comment-author-text { display: grid; gap: 3px; } body.home-page .product-comment-author-name, body.product-page .product-comment-author-name { display: inline; } body.home-page .product-comment-author span { display: block; margin-top: 3px; color: rgba(191, 219, 254, 0.7); font-size: 0.74rem; } body.home-page .product-comment-text { margin: 0; color: #dbe4f3; font-size: 0.88rem; line-height: 1.62; } .comment-moderation-notice { margin: 10px 0 16px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255, 106, 106, 0.28); background: linear-gradient(180deg, rgba(64, 18, 22, 0.92), rgba(34, 10, 14, 0.96)); color: #ffd7d7; font-size: 0.84rem; line-height: 1.55; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); } .comment-moderation-notice strong { color: #fff2f2; } body.home-page .product-comments-upload-row, body.product-page .product-comments-upload-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } body.home-page .product-comments-upload, body.product-page .product-comments-upload { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.05); color: #d9edff; cursor: pointer; font-size: 0.74rem; font-weight: 700; } body.home-page .product-comment-rank, body.product-page .product-comment-rank { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em; margin-left: 8px; vertical-align: middle; } .product-comment-rank.rank-nuevo, .product-comment-rank.rank-novato { background: rgba(148, 163, 184, 0.16); color: #dbe7f4; } .product-comment-rank.rank-activo { background: rgba(34, 197, 94, 0.16); color: #9ef7b8; } .product-comment-rank.rank-recurrente, .product-comment-rank.rank-comprador { background: linear-gradient(135deg, rgba(255, 119, 119, 0.2), rgba(255, 84, 112, 0.22)); color: #ffb3b3; box-shadow: 0 0 14px rgba(255, 107, 107, 0.16); animation: compradorRankGlow 2.4s ease-in-out infinite; } .product-comment-rank.rank-vip { background: linear-gradient(135deg, rgba(255, 226, 107, 0.28), rgba(255, 197, 61, 0.32)); color: #fff5ad; box-shadow: 0 0 18px rgba(255, 221, 87, 0.28); animation: vipRankGlow 2.6s ease-in-out infinite; } .product-comment-rank.rank-premium { background: linear-gradient(135deg, rgba(56, 189, 248, 0.24), rgba(139, 92, 246, 0.24)); color: #dbeafe; box-shadow: 0 0 18px rgba(96, 165, 250, 0.28); } .product-comment-rank.rank-clase-alta { background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(250, 204, 21, 0.34), rgba(236, 72, 153, 0.22)); color: #fff7c2; box-shadow: 0 0 24px rgba(250, 204, 21, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.14); animation: vipRankGlow 1.9s ease-in-out infinite; } @keyframes compradorRankGlow { 0%, 100% { transform: translateY(0); filter: brightness(1); box-shadow: 0 0 12px rgba(255, 107, 107, 0.12); } 50% { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 0 18px rgba(255, 107, 107, 0.24); } } @keyframes vipRankGlow { 0%, 100% { transform: translateY(0); filter: brightness(1); box-shadow: 0 0 14px rgba(255, 221, 87, 0.18); } 50% { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 0 22px rgba(255, 221, 87, 0.34); } } body.home-page .product-comment-card-top, body.product-page .product-comment-card-top { position: relative; } body.home-page .product-comment-menu-wrap, body.product-page .product-comment-menu-wrap { position: absolute; top: 0; right: 0; } body.home-page .product-comment-menu-btn, body.product-page .product-comment-menu-btn { width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); color: #eef6ff; cursor: pointer; font-size: 0.96rem; } body.home-page .product-comment-menu-panel, body.product-page .product-comment-menu-panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; padding: 8px; border-radius: 14px; background: rgba(10, 14, 24, 0.98); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.32); z-index: 20; } body.home-page .product-comment-menu-panel[hidden], body.product-page .product-comment-menu-panel[hidden] { display: none; } body.home-page .product-comment-menu-action, body.product-page .product-comment-menu-action { width: 100%; text-align: left; padding: 9px 10px; border: none; border-radius: 10px; background: transparent; color: #eef6ff; cursor: pointer; font-size: 0.74rem; font-weight: 700; } body.home-page .product-comment-menu-action:hover, body.product-page .product-comment-menu-action:hover { background: rgba(255, 255, 255, 0.06); } body.home-page .product-comment-menu-action.is-danger, body.product-page .product-comment-menu-action.is-danger { color: #ff9e9e; } body.home-page .product-comment-media, body.product-page .product-comment-media { display: block; width: min(100%, 240px); margin-top: 10px; padding: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background: transparent; cursor: zoom-in; } body.home-page .product-comment-media img, body.product-page .product-comment-media img { width: 100%; display: block; object-fit: cover; max-height: 240px; } @keyframes commentCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .home-conversion-band { padding: 14px 16px 8px; max-width: 1200px; margin: 0 auto; } .home-conversion-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 18px; } .home-proof-panel, .home-steps-panel { padding: 24px; border-radius: 24px; border: 1px solid var(--home-border); background: radial-gradient(circle at top right, rgba(34, 211, 238, 0.08), transparent 32%), linear-gradient(160deg, rgba(24, 24, 38, 0.98), rgba(12, 12, 18, 0.98)); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24); } .home-section-kicker { margin: 0 0 10px; font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--home-mint); font-weight: 700; } .home-proof-panel h2, .home-steps-panel h2 { margin: 0 0 14px; font-family: "Outfit", sans-serif; font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.12; color: #fff; } .home-proof-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .home-proof-list li { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); color: #d6def0; line-height: 1.5; } .home-steps-list { display: grid; gap: 14px; } .home-step-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); } .home-step-number { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #07111b; background: linear-gradient(135deg, #67e8f9, #22d3ee); box-shadow: 0 8px 18px rgba(34, 211, 238, 0.24); } .home-step-item h3 { margin: 0 0 4px; color: #fff; font-size: 1rem; } .home-step-item p { margin: 0; color: #c9d3e6; line-height: 1.45; font-size: 0.92rem; } @media (max-width: 860px) { .home-conversion-grid { grid-template-columns: 1fr; } } /* —— Buscador (nuevo estilo) —— */ .home-search-toolbar, body.home-page .home-search-toolbar { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 0 auto 48px; max-width: 760px; width: 100%; } .home-search-wrap, body.home-page .home-search-wrap { position: relative; display: flex; align-items: center; width: 100%; border-radius: 999px; padding: 4px 4px 4px 28px; background: rgba(10, 10, 15, 0.65); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.05); } .home-search-wrap:hover, body.home-page .home-search-wrap:hover { border-color: rgba(139, 92, 246, 0.4); background: rgba(15, 15, 22, 0.8); transform: translateY(-2px); } .home-search-wrap:focus-within, body.home-page .home-search-wrap:focus-within { border-color: var(--home-violet); background: rgba(8, 8, 12, 0.95); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15), 0 20px 40px -10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(139, 92, 246, 0.2); } .home-search-wrap::before { display: none !important; } .home-search-icon, body.home-page .home-search-icon { position: relative; z-index: 2; display: flex; color: var(--home-violet); margin-right: 16px; opacity: 0.7; transition: transform 0.3s ease, opacity 0.3s ease; } .home-search-wrap:focus-within .home-search-icon { transform: scale(1.15) rotate(-5deg); opacity: 1; } .home-search-input, body.home-page .home-search-input { position: relative; z-index: 2; flex: 1; border: none !important; background: transparent !important; color: #fff !important; font-size: 1.1rem !important; padding: 14px 20px 14px 0 !important; outline: none !important; box-shadow: none !important; font-family: inherit; width: 100%; } .home-search-input::placeholder { color: rgba(255, 255, 255, 0.35); } .home-multi-bar { margin: 0; display: flex; justify-content: center; } .home-price-filter { width: 100%; max-width: 620px; padding: 16px 18px 14px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.1); background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.14), transparent 36%), linear-gradient(155deg, rgba(11, 18, 32, 0.9), rgba(22, 22, 36, 0.92)); box-shadow: 0 18px 32px rgba(0, 0, 0, 0.22); } .home-price-filter-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .home-price-filter-label { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.68); font-weight: 700; } .home-price-filter-value { font-family: "Outfit", sans-serif; font-size: 1rem; color: #67e8f9; } .home-price-range { width: 100%; accent-color: #22d3ee; cursor: pointer; } .home-price-filter-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); } .home-search-helper { width: 100%; margin: -4px auto 0; max-width: 62ch; text-align: center; font-size: 0.9rem; line-height: 1.45; color: rgba(255, 255, 255, 0.62); } .home-catalog-shortcuts { max-width: 980px; margin: 0 auto 20px; padding: 0 12px; text-align: center; } .home-catalog-shortcuts-label { margin: 0 0 12px; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.58); font-weight: 700; } .home-catalog-shortcuts-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .home-catalog-shortcut { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.9rem; color: #eef2ff; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } .home-catalog-shortcut:hover { transform: translateY(-2px); color: #fff; background: rgba(139, 92, 246, 0.16); border-color: rgba(139, 92, 246, 0.42); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18); } body.home-page #catalogo-completo { scroll-margin-top: 120px; } body.home-page #search-anchor { scroll-margin-top: 116px; } body.home-page #quejas { scroll-margin-top: 100px; } body.home-page .complaint-product-select .select-icon { top: 50%; } .home-catalog-main-sub code { font-size: 0.78rem; padding: 2px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: #c4b5fd; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== Marca principal más grande ===== */ .home-brand-block { display: flex; flex-direction: column; gap: 4px; } .home-brand-main { display: block; font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: 1; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .home-brand-subtitle { font-size: 0.95rem; color: rgba(255,255,255,0.72); letter-spacing: 0.04em; } /* ===== Animación al entrar ===== */ body.home-page { overflow-x: hidden; opacity: 0; transform: translateY(18px) scale(0.992); transition: opacity .7s ease, transform .7s ease; } body.home-page.page-ready { opacity: 1; transform: none; /* Cambiamos a 'none' para que no cree un nuevo contexto de posición fija */ } /* ===== Códigos promocionales ===== */ .promo-code-card { position: relative; overflow: hidden; } .promo-code-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at top right, rgba(0,212,255,0.14), transparent 40%); } .promo-code-box { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .promo-code-input { flex: 1 1 240px; min-width: 0; padding: 14px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.28); color: #fff; outline: none; } .promo-code-input:focus { border-color: #00d4ff; box-shadow: 0 0 0 3px rgba(0,212,255,0.12); } .promo-code-btn, .promo-info-btn { border: none; cursor: pointer; border-radius: 999px; padding: 13px 18px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; } .promo-code-btn { background: linear-gradient(135deg, #00d4ff, #7c3aed); color: #fff; box-shadow: 0 10px 24px rgba(0,212,255,0.18); } .promo-info-btn { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.09); } .promo-code-btn:hover, .promo-info-btn:hover, .btn-activate-multi:hover { transform: translateY(-2px); } .promo-code-btn.is-loading { opacity: 0.88; cursor: wait; position: relative; } .promo-code-btn.is-loading::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.28); border-top-color: rgba(255,255,255,0.92); animation: promoClaimSpin .85s linear infinite; } @keyframes promoClaimSpin { to { transform: rotate(360deg); } } .promo-code-actions { margin-top: 12px; } .promo-info-box { margin-top: 14px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } /* ===== Botón Habilitar Carrito ===== */ .skincare-cart-prompt { margin-top: 18px; padding: 18px; border-radius: 20px; background: radial-gradient(circle at top left, rgba(34, 211, 238, 0.14), transparent 40%), linear-gradient(145deg, rgba(11, 18, 32, 0.92), rgba(24, 24, 41, 0.92)); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 34px rgba(0,0,0,0.22); display: grid; gap: 14px; } .skincare-cart-prompt p { margin: 0; font-weight: 700; color: #f8fafc; line-height: 1.4; } .skincare-cart-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .btn-activate-multi { border: 1px solid transparent; cursor: pointer; border-radius: 16px; min-height: 52px; padding: 13px 18px; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.01em; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, filter .18s ease; } .btn-skincare-cart-primary { color: #04111d; background: linear-gradient(135deg, #67e8f9, #22d3ee 48%, #38bdf8); box-shadow: 0 14px 26px rgba(34, 211, 238, 0.28); } .btn-skincare-cart-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(34, 211, 238, 0.35); filter: saturate(1.05); } .btn-skincare-cart-secondary { color: #e2e8f0; background: rgba(15, 23, 42, 0.72); border-color: rgba(103, 232, 249, 0.24); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .btn-skincare-cart-secondary:hover { transform: translateY(-2px); background: rgba(30, 41, 59, 0.92); border-color: rgba(103, 232, 249, 0.48); box-shadow: 0 14px 28px rgba(2, 132, 199, 0.18); } @media (max-width: 640px) { .skincare-cart-actions { grid-template-columns: 1fr; } .home-search-helper { font-size: 0.84rem; padding: 0 10px; } .home-catalog-shortcuts { margin-bottom: 16px; } .home-price-filter { padding: 14px 14px 12px; } .home-price-filter-head { flex-direction: column; align-items: flex-start; } .home-catalog-shortcut { width: 100%; } } .promo-social-modal { max-width: 420px; text-align: center; border-radius: 24px; background: radial-gradient(circle at top, rgba(56, 189, 248, 0.14), transparent 38%), linear-gradient(160deg, rgba(16, 23, 42, 0.98), rgba(33, 37, 60, 0.98)); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 24px 46px rgba(0, 0, 0, 0.34); } .promo-social-modal h3 { margin-bottom: 10px; color: #f8fafc; } .promo-social-modal p { margin-bottom: 18px; color: #cbd5e1; } .promo-social-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } body.home-page .home-panel-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; padding: 24px 20px; text-align: center; color: #b7c1d8; } body.home-page .home-panel-empty-state h3 { margin: 16px 0 8px; font-family: "Outfit", sans-serif; font-size: 1.18rem; color: #fff; } body.home-page .home-panel-empty-state p { margin: 0; max-width: 30ch; line-height: 1.55; } body.home-page .home-panel-empty-tips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; } body.home-page .home-panel-empty-tips span { padding: 7px 11px; border-radius: 999px; font-size: 0.76rem; color: #dbeafe; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); } body.home-page .home-panel-empty-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; } body.home-page .home-panel-empty-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; color: #fff; background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.26); transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease; } body.home-page .home-panel-empty-links a:hover { transform: translateY(-2px); background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.4); } .promo-social-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px; border-radius: 18px; text-decoration: none; color: #fff; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .promo-social-link:hover { transform: translateY(-3px); border-color: rgba(56, 189, 248, 0.4); background: rgba(37, 99, 235, 0.12); box-shadow: 0 16px 30px rgba(14, 165, 233, 0.16); } .promo-social-link img { width: 52px; height: 52px; object-fit: contain; } .promo-social-link span { font-weight: 800; letter-spacing: 0.01em; } @media (max-width: 520px) { .promo-social-links { grid-template-columns: 1fr; } } @media (max-width: 768px) { body.home-page .mai-float-root { left: max(14px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); align-items: flex-end; } body.home-page .mai-chat-widget { width: min(300px, 100%); max-width: 100%; max-height: min(420px, calc(100vh - 120px)); } body.home-page .mai-hint-bubble { max-width: min(180px, calc(100% - 8px)); } body.home-page header .container { padding-top: 4px; padding-bottom: 2px; } .home-brand-title { margin-top: -2px; margin-bottom: 14px; } .home-brand-main { font-size: clamp(1.9rem, 9vw, 3rem); letter-spacing: 0.06em; line-height: 0.94; } .home-brand-subtitle { font-size: 0.78rem; line-height: 1.2; } body.home-page .main-nav.site-nav-unified { padding-top: 2px; padding-left: 0; padding-right: 0; padding-bottom: 0; background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; } body.home-page .site-nav-unified .site-nav-inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; padding: 0; background: transparent; border: none; box-shadow: none; } body.home-page .site-nav-scroll { flex: 1 1 100%; overflow: visible; mask-image: none; -webkit-mask-image: none; order: 2; } body.home-page .site-nav-scroll-inner { display: block; min-width: 0; width: 100%; padding: 0; } body.home-page .site-nav-end { width: 100%; display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center; padding-left: 0; border-left: none; gap: 6px; order: 1; } body.home-page .site-nav-list { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } body.home-page .site-nav-list > li { flex: 0 0 auto; } body.home-page .site-nav-list .nav-link { padding: 6px 9px; font-size: 0.72rem; border-radius: 14px; } body.home-page .nav-glider { display: none; } body.home-page #saldoUsuario { order: unset; grid-column: 1 / -1; width: auto; display: block; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); margin-right: 0 !important; font-size: 0.82rem !important; } body.home-page .site-nav-more { order: unset; grid-column: 1; grid-row: 1; } body.home-page .home-header-cart-btn { grid-column: 2; grid-row: 1; min-width: 54px; min-height: 34px; padding: 6px 9px; gap: 6px; font-size: 0.74rem; box-shadow: none; } body.home-page .home-header-cart-icon { font-size: 0.88rem; } body.home-page .home-header-cart-count { min-width: 14px; font-size: 0.75rem; } body.home-page .site-nav-more-btn { padding: 6px 9px; font-size: 0.72rem; gap: 4px; } body.home-page .site-nav-more-dots { width: 11px; } body.home-page .nav-auth-wrapper { order: unset; grid-column: 3; grid-row: 1; width: auto; display: flex; justify-content: center; transform: none; transform-origin: center; } body.home-page .nav-auth-wrapper > * { max-width: 100%; } body.home-page .user-profile { padding: 2px 6px; gap: 6px; } body.home-page .site-nav-end .btn-login-google { padding: 5px 8px; font-size: 0.72rem; gap: 5px; min-height: 34px; white-space: nowrap; } body.home-page .site-nav-end .user-avatar { width: 26px; height: 26px; } body.home-page .site-nav-more-panel { left: auto; right: -26px; width: min(220px, calc(100vw - 28px)); min-width: 0; padding: 12px; border-radius: 16px; max-width: calc(100vw - 20px); } body.home-page .site-nav-more-section { margin-bottom: 10px; padding: 10px; border-radius: 12px; gap: 4px; } body.product-page .product-comments-shell { padding: 8px; border-radius: 11px; } body.product-page .product-comments-head { gap: 6px; margin-bottom: 8px; } body.product-page .product-comments-kicker { font-size: 0.56rem; letter-spacing: 0.12em; } body.product-page .product-comments-head h3 { font-size: 0.74rem; line-height: 1.2; } body.product-page .product-comments-count { padding: 4px 7px; font-size: 0.56rem; } body.product-page .product-comments-compose { gap: 8px; } body.product-page .product-comments-user { gap: 6px; } body.product-page .product-comments-user img { width: 28px; height: 28px; } body.product-page .product-comments-user strong { font-size: 0.64rem; } body.product-page .product-comments-user p { font-size: 0.58rem; line-height: 1.28; } body.product-page .product-comments-textarea { min-height: 72px; padding: 8px 9px; font-size: 0.6rem; border-radius: 9px; } body.product-page .product-comments-actions { gap: 6px; } body.product-page .product-comments-meta { font-size: 0.56rem; } body.product-page .product-comments-submit { min-height: 32px; padding: 7px 10px; font-size: 0.6rem; border-radius: 999px; } body.product-page .product-comments-feedback { font-size: 0.58rem; padding: 7px 8px; } body.product-page .product-comments-list { gap: 6px; } body.product-page .product-comments-empty, body.product-page .product-comment-card { padding: 8px; border-radius: 10px; } body.product-page .product-comments-empty strong { font-size: 0.66rem; } body.product-page .product-comments-empty p, body.product-page .product-comment-text { font-size: 0.6rem; line-height: 1.34; } body.product-page .product-comment-card-top { gap: 6px; } body.product-page .product-comment-author { gap: 6px; } body.product-page .product-comment-author img { width: 26px; height: 26px; } body.product-page .product-comment-author strong { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 0.62rem; } body.product-page .product-comment-author span { font-size: 0.54rem; } body.home-page .site-nav-more-title { font-size: 0.62rem; letter-spacing: 0.1em; margin-bottom: 6px; } body.home-page .site-nav-more-panel .sub-nav-btn { padding: 6px 9px; font-size: 0.78rem; border-radius: 8px; } body.home-page .stock-label, body.home-page .panel-badge, body.home-page .discount-badge { font-size: 0.58rem !important; padding: 4px 7px !important; border-radius: 8px; letter-spacing: 0.02em; } .home-hero { padding: 4px 14px 20px; } .home-value-strip { padding-left: 12px; padding-right: 12px; margin-top: -4px; } .home-value-strip-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .home-value-card { padding: 12px 10px; border-radius: 14px; } .home-value-icon { width: 34px; height: 34px; margin-bottom: 7px; } .home-value-icon img { width: 21px; height: 21px; } .home-value-title { font-size: 0.82rem; margin-bottom: 4px; } .home-value-text { font-size: 0.72rem; line-height: 1.35; } .home-hero-carousel { height: 154px; border-radius: 24px; --hero-frame-radius: 18px; --hero-nav-size: 34px; --hero-nav-inset: 8px; } .home-hero-slide:first-child .home-hero-inner { min-height: 154px; padding: 12px 46px 12px 16px; gap: 0; grid-template-columns: minmax(0, 1fr); align-items: start; } .home-hero-inner { padding: 16px 14px; text-align: left; align-content: start; } .home-hero-visual { display: none; } .home-hero-visual img { max-width: 30px; } .hero-img-slide { padding: 0 !important; } .hero-img-slide img { width: auto !important; height: auto !important; max-width: calc(100% - 16px) !important; max-height: calc(100% - 10px) !important; object-fit: contain !important; margin: auto !important; border-radius: 18px !important; } .hero-img-slide img.hero-img-slide__img--compact { max-width: calc(96% - 12px) !important; max-height: calc(96% - 8px) !important; } .hero-img-slide img.hero-img-slide__img--large { max-width: 100% !important; max-height: 100% !important; } .home-hero-sub { max-width: none; font-size: 0.72rem; line-height: 1.3; margin-top: 4px; } .home-hero-kicker { font-size: 0.5rem; letter-spacing: 0.08em; margin-bottom: 5px; } .home-hero-title { font-size: clamp(0.96rem, 4.6vw, 1.22rem); line-height: 1.08; margin-bottom: 2px; max-width: calc(100% - 34px); } .home-hero-slide:first-child .home-hero-sub { display: none; } .home-hero-actions, .home-hero-badges, .home-hero-trust-mini { display: none; } .home-hero-actions { flex-direction: column; align-items: stretch; } .home-hero-cta { width: 100%; justify-content: center; } .home-hero-badges { justify-content: flex-start; } .home-hero-trust-mini { grid-template-columns: 1fr; } .home-conversion-band, .home-value-strip { padding-left: 14px; padding-right: 14px; } .home-proof-panel, .home-steps-panel, .home-catalog-intro, .home-catalog-block { border-radius: 20px; padding: 18px; } .home-catalog-block { padding: 12px 10px; border-radius: 16px; } .home-catalog-head { margin-bottom: 10px; padding: 0 2px; } .home-catalog-chip { margin-bottom: 6px; min-height: 24px; padding: 4px 8px; font-size: 0.6rem; letter-spacing: 0.1em; } .home-catalog-head h2 { font-size: 0.98rem; margin-bottom: 3px; line-height: 1.12; } .home-catalog-head p { font-size: 0.72rem; line-height: 1.3; } .home-conversion-band { padding-left: 12px; padding-right: 12px; } .home-conversion-grid { gap: 10px; } .home-proof-panel, .home-steps-panel { padding: 14px 12px; border-radius: 16px; } .home-section-kicker { margin-bottom: 6px; font-size: 0.64rem; letter-spacing: 0.12em; } .home-proof-panel h2, .home-steps-panel h2 { margin-bottom: 10px; font-size: 1.02rem; line-height: 1.14; } .home-proof-list { gap: 8px; } .home-proof-list li { padding: 10px 11px; border-radius: 12px; font-size: 0.76rem; line-height: 1.35; } .home-steps-list { gap: 8px; } .home-step-item { gap: 10px; padding: 10px 11px; border-radius: 14px; } .home-step-number { width: 28px; height: 28px; font-size: 0.78rem; } .home-step-item h3 { font-size: 0.84rem; margin-bottom: 3px; } .home-step-item p { font-size: 0.74rem; line-height: 1.32; } body.home-page .stats-container { grid-template-columns: 1fr; gap: 12px; margin-bottom: 22px; } body.home-page .stat-box { padding: 14px 12px 13px; border-radius: 14px; } body.home-page .stat-label { margin-bottom: 6px; font-size: 0.62rem; letter-spacing: 0.1em; max-width: none; } body.home-page .stat-number { font-size: clamp(1.4rem, 6vw, 1.9rem); } .home-catalog-intro { gap: 10px; margin-bottom: 18px; padding: 14px 12px; border-radius: 16px; } .home-catalog-intro-copy h2 { font-size: 1rem; margin-bottom: 6px; } .home-catalog-intro-copy p:last-child { font-size: 0.76rem; line-height: 1.35; } .home-catalog-intro-pills { gap: 6px; } .home-catalog-intro-pill { min-height: 26px; padding: 5px 9px; font-size: 0.62rem; } .home-carousel { grid-template-columns: 1fr; } .home-carousel-btn { display: none; } .home-carousel-viewport { border-radius: 18px; } .home-carousel-track { padding: 10px 10px 16px; gap: 12px; } body.home-page .product-card--spotlight { flex-basis: 31vw; max-width: 120px; border-radius: 14px; } body.home-page .product-card--spotlight .product-card-media img { height: 82px; } body.home-page .product-card--spotlight .product-info { padding: 7px 6px 8px; } body.home-page .product-card--spotlight .category-tag { padding: 3px 7px; font-size: 0.58rem; margin-bottom: 7px; } body.home-page .product-card--spotlight .product-card-title { font-size: 0.6rem; line-height: 1.2; margin-bottom: 4px; } body.home-page .product-card--spotlight .price { font-size: 0.76rem; } body.home-page .product-card--spotlight .old-price { font-size: 0.58rem; } .home-search-toolbar, body.home-page .home-search-toolbar { gap: 14px; margin-bottom: 24px; } .home-search-wrap, body.home-page .home-search-wrap { padding-left: 18px; } .home-search-input, body.home-page .home-search-input { font-size: 1rem !important; padding-top: 13px !important; padding-bottom: 13px !important; } .home-multi-bar, .multi-select-bar { width: 100%; } body.home-page .btn-multi-select, .home-price-filter { width: 100%; max-width: none; } .home-price-filter { padding: 10px 10px 9px; border-radius: 14px; } .home-price-filter-head { gap: 8px; margin-bottom: 6px; } .home-price-filter-label { font-size: 0.64rem; letter-spacing: 0.1em; } .home-price-filter-value { font-size: 0.8rem; } .home-price-filter-scale { margin-top: 6px; font-size: 0.62rem; } .home-catalog-shortcuts { padding: 0; } .home-catalog-shortcuts-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .home-catalog-shortcut { width: auto; min-height: 38px; padding: 8px 10px; font-size: 0.78rem; } body.home-page .layout-container { flex-direction: column !important; gap: 18px; } body.home-page:not(.product-page) #product-grid.product-grid { order: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } body.home-page #product-grid .product-card { border-radius: 14px; } body.home-page #product-grid .product-card-media img { height: 100px; } body.home-page #product-grid .product-info { padding: 8px 7px 9px; } body.home-page #product-grid .category-tag { padding: 3px 6px; font-size: 0.52rem; margin-bottom: 6px; } body.home-page #product-grid .product-card-title { font-size: 0.66rem; line-height: 1.18; margin-bottom: 5px; } body.home-page #product-grid .price { font-size: 0.84rem; } body.home-page #product-grid .old-price { font-size: 0.6rem; } body.home-page .product-details-panel { order: 2; width: 100%; position: static; margin-bottom: 0; border-radius: 18px; } body.home-page .panel-image-container { height: 210px; } body.home-page .panel-title { font-size: 1.2rem; } body.home-page .home-panel-empty-state { min-height: 220px; padding: 16px 12px; } body.home-page .home-panel-empty-state .empty-state-img { width: 58px; height: auto; } body.home-page .home-panel-empty-state h3 { margin: 10px 0 6px; font-size: 0.92rem; } body.home-page .home-panel-empty-state p { font-size: 0.72rem; line-height: 1.32; max-width: 28ch; } body.home-page .home-panel-empty-tips { gap: 6px; margin-top: 12px; } body.home-page .home-panel-empty-tips span { padding: 5px 8px; font-size: 0.62rem; } body.home-page .home-panel-empty-links { gap: 8px; margin-top: 12px; } body.home-page .home-panel-empty-links a { min-height: 34px; padding: 7px 11px; font-size: 0.68rem; } body.home-page .quantity-selector, body.home-page #panel-buttons-container { width: 100%; } body.home-page .btn-panel-buy, body.home-page .btn-panel-info { width: 100%; min-height: 48px; } body.home-page .promos-section-container { padding-top: 6px; } body.home-page .promos-grid-3d { grid-template-columns: 1fr; } .offers-row { padding: 0 14px; gap: 14px; } .offers-row .main-offer-container, .main-offer-container { min-width: 0; margin: 0; padding: 0; } body.home-page .main-offer-card { padding: 20px 16px; border-radius: 18px; } .offer-images { flex-wrap: wrap; gap: 10px; margin-top: 44px; } .offer-images img { width: 88px; height: 88px; } .plus-sign { font-size: 2rem; } .offer-details h3 { font-size: 1.35rem; } .offer-details p { font-size: 0.92rem; } .offer-new-price { font-size: 1.8rem; } body.home-page .clients-section, body.home-page .codes-section { margin-top: 28px; padding-left: 14px; padding-right: 14px; } body.home-page .codes-section { padding-top: 18px; padding-bottom: 18px; border-radius: 14px; } body.home-page .codes-section .section-title-large { font-size: 1.05rem !important; margin-bottom: 16px !important; } .code-input-container, .promo-code-box { gap: 8px; } body.home-page .code-input, body.home-page .promo-code-input { padding: 10px 12px; font-size: 0.82rem; } body.home-page .promo-code-actions { margin-top: 8px; } body.home-page .promo-info-box, body.home-page #codeResult, body.home-page #promoCodeResult { font-size: 0.72rem; } body.home-page .innovations-section { margin-top: 26px; padding-left: 12px; padding-right: 12px; } body.home-page .innovation-grid { gap: 8px; } body.home-page .innovation-wrapper { border-radius: 12px; } body.home-page .innovation-wrapper--no-hover-anim { padding: 6px 4px 4px; } body.home-page .innovation-wrapper--no-hover-anim .innovation-img { transform: scale(1.02); } body.home-page .innovation-caption { padding: 8px 8px 2px; font-size: 0.68rem; } .clients-title { font-size: 2rem; margin-bottom: 24px; } .client-photo-wrapper { height: 190px; border-radius: 12px; } .client-star-img { height: 30px; margin: 0 8px; } body.home-page .clients-carousel-wrapper { padding: 10px 0; } body.home-page .clients-carousel-track { gap: 12px; } body.home-page .main-footer { padding-top: 28px; } .footer-container { gap: 26px; } body.home-page .footer-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 0 14px; } body.home-page .footer-column h3 { font-size: 0.86rem; margin-bottom: 12px; } body.home-page .footer-logo-icon { width: 20px; margin-right: 5px; } body.home-page .footer-icon-medium { width: 28px; } body.home-page .footer-column ul li { margin-bottom: 7px; } body.home-page .footer-column ul li a { font-size: 0.74rem; line-height: 1.3; } body.home-page .footer-bottom { margin-top: 24px; padding-top: 14px; font-size: 0.72rem; } } @media (max-width: 480px) { body.home-page .mai-float-root { left: max(10px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); } body.home-page .site-nav-unified .site-nav-inner { gap: 6px; } body.home-page .site-nav-list { gap: 5px; } body.home-page .site-nav-list .nav-link { padding: 5px 7px; font-size: 0.66rem; } body.home-page .site-nav-end { width: 100%; gap: 5px; } body.home-page .home-header-cart-btn { min-width: 50px; min-height: 32px; padding: 5px 8px; gap: 5px; font-size: 0.7rem; } body.home-page .site-nav-more-btn { padding: 5px 7px; font-size: 0.66rem; } body.home-page #saldoUsuario { grid-column: 1 / -1; width: auto; font-size: 0.78rem !important; padding: 7px 9px; } body.home-page .site-nav-more { width: auto; } body.home-page .nav-auth-wrapper { width: auto; justify-content: center; transform: none; } body.home-page .home-header-cart-count { font-size: 0.7rem; } body.home-page .site-nav-end .btn-login-google { min-height: 32px; padding: 5px 8px; font-size: 0.66rem; white-space: nowrap; } body.home-page .site-nav-more-panel { right: -18px; left: auto; width: min(188px, calc(100vw - 28px)); padding: 10px; border-radius: 14px; max-width: calc(100vw - 20px); } body.home-page .site-nav-more-section { padding: 8px; } body.home-page .site-nav-more-panel .sub-nav-btn { padding: 6px 8px; font-size: 0.74rem; } body.home-page .stock-label, body.home-page .panel-badge, body.home-page .discount-badge { font-size: 0.5rem !important; padding: 3px 6px !important; } body.home-page .mai-chat-widget { width: 100%; max-width: 100%; max-height: min(390px, calc(100vh - 104px)); } .home-hero-carousel { height: 138px; --hero-frame-radius: 16px; --hero-nav-size: 28px; --hero-nav-inset: 6px; } .home-hero-slide:first-child .home-hero-inner { min-height: 138px; padding: 10px 38px 10px 14px; grid-template-columns: minmax(0, 1fr); gap: 0; } .hero-img-slide { padding: 0 !important; } .hero-img-slide img { width: auto !important; height: auto !important; max-width: calc(100% - 12px) !important; max-height: calc(100% - 8px) !important; object-fit: contain !important; border-radius: 16px !important; } .home-hero-kicker { font-size: 0.44rem; letter-spacing: 0.06em; margin-bottom: 4px; } .home-hero-title { font-size: clamp(0.84rem, 4.9vw, 1.02rem); line-height: 1.06; max-width: calc(100% - 28px); } .home-hero-slide:first-child .home-hero-sub { display: none; } .home-hero-sub { font-size: 0.64rem; line-height: 1.22; } .home-hero-visual img { max-width: 24px; } .home-value-strip { padding-left: 10px; padding-right: 10px; } .home-value-strip-inner { gap: 6px; } .home-value-card { padding: 10px 8px; } .home-value-icon { width: 28px; height: 28px; margin-bottom: 5px; } .home-value-icon img { width: 17px; height: 17px; } .home-value-title { font-size: 0.74rem; } .home-value-text { font-size: 0.64rem; line-height: 1.28; } .home-hero-title { font-size: clamp(1.45rem, 7vw, 1.9rem); } .home-hero-slide:first-child .home-hero-inner { min-height: 160px; padding: 10px 14px; } body.home-page .product-card-summary, body.home-page .product-card-summary-pill { display: none !important; } .home-hero-kicker, .home-section-kicker, .home-catalog-shortcuts-label, .home-price-filter-label { letter-spacing: 0.12em; } .home-catalog-shortcuts-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .home-catalog-shortcut { min-height: 36px; padding: 7px 8px; font-size: 0.72rem; border-radius: 14px; } .home-price-filter { padding: 8px 8px 7px; border-radius: 12px; } .home-price-filter-label { font-size: 0.58rem; } .home-price-filter-value { font-size: 0.72rem; } .home-price-filter-scale { font-size: 0.56rem; } .home-catalog-block { padding: 10px 8px; border-radius: 14px; } .home-catalog-chip { min-height: 22px; padding: 3px 7px; font-size: 0.56rem; } .home-catalog-head h2 { font-size: 0.86rem; } .home-catalog-head p { font-size: 0.64rem; line-height: 1.22; } .home-conversion-band { padding-left: 10px; padding-right: 10px; } .home-proof-panel, .home-steps-panel { padding: 12px 10px; } .home-proof-panel h2, .home-steps-panel h2 { font-size: 0.94rem; } .home-proof-list li, .home-step-item { padding: 9px 9px; } .home-proof-list li, .home-step-item p { font-size: 0.68rem; } .home-step-item h3 { font-size: 0.78rem; } body.home-page:not(.product-page) #product-grid.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } body.home-page .product-card--spotlight { flex-basis: 29vw; max-width: 102px; border-radius: 12px; } body.home-page .product-card--spotlight .product-card-media img { height: 70px; } body.home-page .product-card--spotlight .product-info { padding: 6px 5px 7px; } body.home-page .product-card--spotlight .category-tag { padding: 2px 6px; font-size: 0.52rem; margin-bottom: 6px; } body.home-page .product-card--spotlight .product-card-title { font-size: 0.56rem; margin-bottom: 5px; } body.home-page .product-card--spotlight .product-card-summary { gap: 3px; margin-bottom: 5px; } body.home-page .product-card--spotlight .product-card-summary-pill { min-height: 20px; padding: 3px 6px; border-radius: 10px; line-height: 1.05; } body.home-page .product-card--spotlight .price { font-size: 0.68rem; } body.home-page #product-grid .product-card { border-radius: 14px; } body.home-page #product-grid .product-card-media img { height: 94px; } body.home-page #product-grid .product-info { padding: 8px 6px 9px; } body.home-page #product-grid .category-tag { padding: 2px 5px; font-size: 0.48rem; margin-bottom: 5px; } body.home-page #product-grid .product-card-title { font-size: 0.64rem; margin-bottom: 5px; } body.home-page #product-grid .price { font-size: 0.8rem; } .home-search-helper { max-width: 34ch; } body.home-page .home-panel-empty-state { min-height: 190px; padding: 12px 10px; } body.home-page .home-panel-empty-state .empty-state-img { width: 46px; } body.home-page .home-panel-empty-state h3 { font-size: 0.82rem; } body.home-page .home-panel-empty-state p { font-size: 0.64rem; } body.home-page .home-panel-empty-tips span { padding: 4px 6px; font-size: 0.56rem; } body.home-page .home-panel-empty-links a { min-height: 30px; padding: 6px 9px; font-size: 0.62rem; } body.home-page .stat-box { padding: 12px 10px; } body.home-page .stat-label { font-size: 0.58rem; } body.home-page .stat-number { font-size: 1.28rem; } body.home-page .codes-section { padding-top: 14px; padding-bottom: 14px; border-radius: 12px; } body.home-page .codes-section .section-title-large { font-size: 0.9rem !important; margin-bottom: 12px !important; } body.home-page .code-input, body.home-page .promo-code-input { padding: 8px 10px; font-size: 0.74rem; } body.home-page #codeResult, body.home-page #promoCodeResult, body.home-page .promo-info-box { font-size: 0.64rem; } body.home-page .innovations-section { margin-top: 20px; padding-left: 10px; padding-right: 10px; } body.home-page .innovation-grid { gap: 6px; } body.home-page .innovation-wrapper { border-radius: 10px; } body.home-page .innovation-caption { font-size: 0.6rem; padding: 6px 6px 2px; } .home-catalog-intro { padding: 12px 10px; gap: 8px; } .home-catalog-intro-copy h2 { font-size: 0.9rem; } .home-catalog-intro-copy p:last-child { font-size: 0.68rem; line-height: 1.3; } .home-catalog-intro-pill { min-height: 24px; padding: 4px 7px; font-size: 0.58rem; } .clients-title { font-size: 1.5rem; margin-bottom: 16px; } .client-photo-wrapper { height: 150px; border-radius: 10px; } .client-star-img { height: 22px; margin: 0 6px; } body.home-page .main-footer { padding-top: 22px; } body.home-page .footer-container { grid-template-columns: 1fr; gap: 14px; padding: 0 10px; } body.home-page .footer-column h3 { font-size: 0.78rem; margin-bottom: 10px; } body.home-page .footer-logo-icon { width: 17px; margin-right: 4px; } body.home-page .footer-icon-medium { width: 24px; } body.home-page .footer-column ul li { margin-bottom: 5px; } body.home-page .footer-column ul li a { font-size: 0.68rem; line-height: 1.22; } body.home-page .footer-bottom { margin-top: 18px; padding-top: 10px; font-size: 0.66rem; } body.home-page .home-panel-empty-links { flex-direction: column; width: 100%; } body.home-page .home-panel-empty-links a { width: 100%; } } @media (max-width: 768px) { .modal { padding: 10px; box-sizing: border-box; } .modal-content, #modalCompra .modal-content, #modalPagoVideojuego .modal-content, #modalYapeQR .modal-content, #modalPaypal .modal-content, #modalDetalles .modal-content, #modalFAQ .modal-content, #modalProductSelector .modal-content, #modalInfo .modal-content, #modalRedesSociales .modal-content { width: min(82vw, 332px) !important; max-height: 78vh; margin: 7vh auto !important; padding: 12px 10px !important; border-radius: 14px; transform: none !important; animation: none !important; left: auto !important; right: auto !important; } .modal-content.closing, #modalCompra .modal-content.closing, #modalPagoVideojuego .modal-content.closing, #modalYapeQR .modal-content.closing, #modalPaypal .modal-content.closing, #modalDetalles .modal-content.closing, #modalFAQ .modal-content.closing, #modalProductSelector .modal-content.closing, #modalInfo .modal-content.closing, #modalRedesSociales .modal-content.closing { transform: none !important; animation: none !important; } .modal-content h2, .modal-content h3 { font-size: 0.96rem; } .close { top: 8px; right: 10px; font-size: 21px; } .order-summary { padding: 10px; margin: 12px 0; border-radius: 8px; } .form-group { margin-bottom: 10px; } label { font-size: 0.74rem; } input, select, textarea { padding: 8px; font-size: 0.84rem; } .btn-send, .btn-panel-buy, .btn-panel-info, .btn-claim-offer, .promo-code-btn, .promo-info-btn, .btn-redeem { min-height: 40px; font-size: 0.82rem; padding-top: 8px; padding-bottom: 8px; } .carousel-images { min-height: 160px; } .carousel-images img { max-height: 210px; } .carousel-btn { padding: 6px 9px; font-size: 14px; } } @media (max-width: 480px) { .modal { padding: 8px; } .modal-content, #modalCompra .modal-content, #modalPagoVideojuego .modal-content, #modalYapeQR .modal-content, #modalPaypal .modal-content, #modalDetalles .modal-content, #modalFAQ .modal-content, #modalProductSelector .modal-content, #modalInfo .modal-content, #modalRedesSociales .modal-content { width: min(78vw, 272px) !important; max-height: 74vh; margin: 6vh auto !important; padding: 10px 9px !important; border-radius: 12px; transform: none !important; animation: none !important; left: auto !important; right: auto !important; } .modal-content h2, .modal-content h3 { font-size: 0.86rem; } .order-summary { padding: 8px; } label { font-size: 0.68rem; } input, select, textarea { padding: 7px; font-size: 0.78rem; } .btn-send, .btn-panel-buy, .btn-panel-info, .btn-claim-offer, .promo-code-btn, .promo-info-btn, .btn-redeem { min-height: 38px; font-size: 0.76rem; } .carousel-images { min-height: 130px; } .carousel-images img { max-height: 170px; } } @media (max-width: 768px) { #modalDetalles .modal-content { width: min(76vw, 260px) !important; max-height: 68vh !important; padding: 8px 8px 10px !important; border-radius: 12px !important; } #modalDetalles #detailName { font-size: 0.82rem !important; line-height: 1.18; margin-bottom: 6px; } #modalDetalles #detailPrice { font-size: 0.86rem !important; margin-bottom: 6px; } #modalDetalles #detailDesc { font-size: 0.64rem !important; line-height: 1.24; margin-bottom: 10px !important; } #modalDetalles .quantity-selector { margin: 0 auto 10px auto !important; transform: scale(0.88); transform-origin: center top; } #modalDetalles .btn-panel-buy { min-height: 34px !important; font-size: 0.72rem !important; margin-bottom: 10px !important; } #modalDetalles .carousel { margin-bottom: 10px; border-radius: 10px; } #modalDetalles .carousel-images { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 120px !important; background: linear-gradient(180deg, rgba(22, 22, 29, 0.94), rgba(10, 10, 14, 0.98)); isolation: isolate; } #modalDetalles .carousel-images::before { content: ""; position: absolute; inset: -12%; background-image: var(--modal-carousel-bg); background-size: cover; background-position: center; filter: blur(24px) saturate(0.95); transform: scale(1.12); opacity: 0.55; z-index: 0; } #modalDetalles .carousel-images::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 12, 0.18), rgba(8, 8, 12, 0.38)); z-index: 1; } #modalDetalles .carousel-images img { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; object-fit: contain; max-height: 140px !important; opacity: 0; transform: scale(0.98); transition: opacity 0.28s ease, transform 0.28s ease; z-index: 2; } #modalDetalles .carousel-images img.active { opacity: 1; transform: scale(1); } #modalDetalles .carousel-btn { width: 24px; height: 24px; padding: 0; font-size: 12px; } #modalDetalles .modal-content > div[style*="background: #202026"] { padding: 8px !important; border-radius: 8px !important; font-size: 0.62rem !important; } .modal-image-zoom-content { width: auto !important; padding: 0 !important; border-radius: 0 !important; } #modalImagenProductoImg { max-width: 96vw; max-height: 94vh; border-radius: 0; } body.home-page .promos-section-container { padding-top: 4px; } body.home-page .home-promos-head { margin-bottom: 16px; } body.home-page .home-promos-title, body.home-page .promos-section-container .section-title-large { font-size: 0.98rem !important; margin-bottom: 6px; } body.home-page .home-promos-subtitle { font-size: 0.72rem; line-height: 1.28; } body.home-page .promos-grid-3d { gap: 8px; } body.home-page .promo-card-3d.promo-card-pack { border-radius: 14px; } body.home-page .promo-card-topline { padding: 8px 8px 0; } body.home-page .promo-pack-chip { min-height: 20px; padding: 3px 6px; font-size: 0.5rem; } body.home-page .promo-pack-price { font-size: 0.76rem; } body.home-page .promo-card-image-wrap { margin: 8px 8px 0; min-height: 96px; border-radius: 12px; } body.home-page .promo-card-img { height: 96px; } body.home-page .promo-card-badge { left: 8px; bottom: 8px; min-height: 20px; padding: 3px 6px; font-size: 0.5rem; } body.home-page .promo-card-body { padding: 8px 8px 9px; } body.home-page .promo-card-title { font-size: 0.74rem; margin-bottom: 4px; } body.home-page .promo-card-desc { font-size: 0.62rem; line-height: 1.24; margin-bottom: 5px; } body.home-page .promo-card-copy { font-size: 0.56rem; line-height: 1.22; } body.home-page .promo-card-footer { padding-top: 8px; gap: 6px; } body.home-page .promo-card-cta { min-height: 28px; padding: 6px 8px; font-size: 0.62rem; } body.home-page .promo-card-note { font-size: 0.5rem; } .offers-row { gap: 10px; padding: 0 10px; } body.home-page .main-offer-card { padding: 10px 8px; border-radius: 12px; } body.home-page .offer-badge { left: 10px; font-size: 0.48rem; padding: 3px 6px; } .offer-images { margin-top: 24px; margin-bottom: 8px; gap: 6px; } .offer-images img { width: 48px; height: 48px; border-radius: 8px; } .plus-sign { font-size: 0.9rem; } .offer-details h3 { font-size: 0.78rem; margin-bottom: 4px; } .offer-details p { font-size: 0.58rem; margin-bottom: 8px; line-height: 1.24; } .offer-pricing { padding: 6px; gap: 3px; margin-bottom: 8px; } .offer-old-price { font-size: 0.52rem; } .offer-new-price { font-size: 0.8rem; } body.home-page .promo-code-card, body.home-page .codes-section { padding: 10px 8px !important; border-radius: 12px !important; } body.home-page .home-trust-title { font-size: 0.78rem !important; margin-bottom: 8px; } body.home-page .home-trust-lead { font-size: 0.62rem !important; line-height: 1.22; } body.home-page .promo-code-box, body.home-page .code-input-container { gap: 6px; } body.home-page .promo-code-input, body.home-page .code-input { padding: 7px 8px; font-size: 0.64rem; } body.home-page .promo-code-btn, body.home-page .promo-info-btn, body.home-page .btn-redeem { min-height: 30px; font-size: 0.64rem; padding: 6px 8px; } body.home-page .promo-info-box, body.home-page #promoCodeResult, body.home-page #codeResult { font-size: 0.58rem; line-height: 1.26; } body.home-page .promo-info-box { padding: 8px; border-radius: 10px; } body.home-page .section-title-large, body.home-page .clients-title, body.home-page .complaint-section__title, body.home-page .home-trust-title, body.home-page .offers-zone-banner, body.home-page .innovations-title { font-size: 1rem !important; line-height: 1.15; } body.home-page .home-trust-card, body.home-page .promo-code-card, body.home-page .complaint-section__head, body.home-page .complaint-form--home, body.home-page .innovations-section, body.home-page .offers-zone-banner, body.home-page .home-catalog-main-head { padding: 14px 12px !important; border-radius: 16px !important; } body.home-page .complaint-section__head { padding-bottom: 12px !important; } body.home-page .complaint-section__lead, body.home-page .home-trust-lead, body.home-page .innovations-subtitle, body.home-page .home-catalog-main-sub, body.home-page .code-result-msg, body.home-page .complaint-disclaimer { font-size: 0.74rem !important; line-height: 1.35; } body.home-page .complaint-section__steps { gap: 6px; margin-top: 10px; } body.home-page .complaint-section__steps li { padding: 5px 8px; font-size: 0.62rem; } body.home-page .complaint-section__steps span { width: 18px; height: 18px; font-size: 0.58rem; } body.home-page .home-trust-list, body.home-page .promo-info-box ul, body.home-page .footer-column ul { gap: 4px; font-size: 0.72rem; } body.home-page .btn-send-email, body.home-page .complaint-submit, body.home-page .btn-whatsapp-code, body.home-page .btn-gmail-code { min-height: 40px; padding: 9px 12px; font-size: 0.82rem; border-radius: 12px; } body.home-page .offer-badge { font-size: 0.66rem; padding: 6px 12px; left: 12px; } body.home-page .offer-pricing { padding: 10px; margin-bottom: 14px; } body.home-page .offer-old-price { font-size: 0.82rem; } body.home-page .offer-new-price { font-size: 1.4rem; } body.home-page .btn-claim-offer { padding: 10px 18px; font-size: 0.84rem; } body.home-page .code-input-container, body.home-page .promo-code-box { flex-direction: column; } body.home-page .promo-code-btn, body.home-page .promo-info-btn, body.home-page .btn-redeem { width: 100%; } body.home-page .pagination { gap: 6px; margin-top: 22px; } body.home-page .page-btn { padding: 7px 9px; font-size: 0.72rem; border-radius: 8px; } } @media (max-width: 480px) { #modalDetalles .modal-content { width: min(72vw, 232px) !important; max-height: 64vh !important; padding: 7px 7px 8px !important; border-radius: 10px !important; } #modalDetalles #detailName { font-size: 0.72rem !important; } #modalDetalles #detailPrice { font-size: 0.74rem !important; } #modalDetalles #detailDesc { font-size: 0.58rem !important; margin-bottom: 8px !important; } #modalDetalles .carousel-images { min-height: 96px !important; } #modalDetalles .carousel-images img { max-height: 112px !important; } #modalDetalles .quantity-selector { transform: scale(0.8); } #modalDetalles .btn-panel-buy { min-height: 30px !important; font-size: 0.64rem !important; } body.home-page .home-promos-head { margin-bottom: 12px; } body.home-page .home-promos-title, body.home-page .promos-section-container .section-title-large { font-size: 0.74rem !important; } body.home-page .home-promos-subtitle { font-size: 0.58rem; } body.home-page .promos-grid-3d { gap: 8px; } body.home-page .promo-card-topline { padding: 8px 8px 0; } body.home-page .promo-pack-chip { min-height: 20px; padding: 3px 6px; font-size: 0.5rem; } body.home-page .promo-pack-price { font-size: 0.74rem; } body.home-page .promo-card-image-wrap { margin: 8px 8px 0; min-height: 96px; } body.home-page .promo-card-img { height: 96px; } body.home-page .promo-card-badge { min-height: 20px; padding: 3px 6px; font-size: 0.5rem; } body.home-page .promo-card-body { padding: 8px 8px 10px; } body.home-page .promo-card-title { font-size: 0.76rem; } body.home-page .promo-card-desc { font-size: 0.62rem; margin-bottom: 5px; } body.home-page .promo-card-copy { font-size: 0.58rem; } body.home-page .promo-card-cta { min-height: 28px; padding: 6px 8px; font-size: 0.62rem; } body.home-page .promo-card-note { font-size: 0.52rem; } body.home-page .main-offer-card { padding: 8px 6px; border-radius: 10px; } body.home-page .offer-badge { left: 8px; font-size: 0.48rem; padding: 3px 6px; } .offer-images { margin-top: 24px; gap: 6px; } .offer-images img { width: 42px; height: 42px; } .plus-sign { font-size: 1rem; } .offer-details h3 { font-size: 0.7rem; } .offer-details p { font-size: 0.54rem; margin-bottom: 8px; } .offer-pricing { padding: 6px; margin-bottom: 10px; } .offer-old-price { font-size: 0.48rem; } .offer-new-price { font-size: 0.72rem; } body.home-page .promo-code-card, body.home-page .codes-section { padding: 8px 7px !important; border-radius: 10px !important; } body.home-page .promo-code-input, body.home-page .code-input { padding: 6px 7px; font-size: 0.6rem; } body.home-page .promo-code-btn, body.home-page .promo-info-btn, body.home-page .btn-redeem { min-height: 28px; font-size: 0.58rem; padding: 5px 7px; } body.home-page .promo-info-box, body.home-page #promoCodeResult, body.home-page #codeResult { font-size: 0.54rem; } body.home-page .home-trust-title { font-size: 0.68rem !important; margin-bottom: 6px; } body.home-page .home-trust-lead { font-size: 0.56rem !important; } body.home-page .section-title-large, body.home-page .clients-title, body.home-page .complaint-section__title, body.home-page .home-trust-title, body.home-page .innovations-title { font-size: 0.88rem !important; } body.home-page .home-trust-card, body.home-page .promo-code-card, body.home-page .complaint-section__head, body.home-page .complaint-form--home, body.home-page .innovations-section, body.home-page .offers-zone-banner, body.home-page .home-catalog-main-head { padding: 12px 10px !important; border-radius: 14px !important; } body.home-page .complaint-section__lead, body.home-page .home-trust-lead, body.home-page .innovations-subtitle, body.home-page .home-catalog-main-sub, body.home-page .code-result-msg, body.home-page .complaint-disclaimer, body.home-page .home-trust-list, body.home-page .promo-info-box ul { font-size: 0.66rem !important; line-height: 1.28; } body.home-page .complaint-section__steps li { font-size: 0.56rem; padding: 4px 7px; } body.home-page .btn-send-email, body.home-page .complaint-submit, body.home-page .btn-whatsapp-code, body.home-page .btn-gmail-code, body.home-page .btn-claim-offer, body.home-page .promo-code-btn, body.home-page .promo-info-btn, body.home-page .btn-redeem { min-height: 36px; padding: 8px 10px; font-size: 0.74rem; } body.home-page .offer-badge { font-size: 0.58rem; padding: 5px 10px; } body.home-page .offer-old-price { font-size: 0.72rem; } body.home-page .offer-new-price { font-size: 1.18rem; } body.home-page .page-btn { padding: 6px 8px; font-size: 0.66rem; } } @media (max-width: 768px) { body.home-page .promos-grid-3d { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; align-items: start !important; } body.home-page .promo-card-3d.promo-card-pack { border-radius: 14px !important; min-height: 0 !important; height: auto !important; align-self: start !important; } body.home-page .promo-card-topline { padding: 9px 9px 0 !important; gap: 6px !important; } body.home-page .promo-card-image-wrap { margin: 8px 9px 0 !important; min-height: 96px !important; border-radius: 12px !important; } body.home-page .promo-card-img { height: 96px !important; } body.home-page .promo-card-body { padding: 9px 9px 10px !important; gap: 4px !important; flex: 0 0 auto !important; } body.home-page .promo-card-footer { margin-top: 6px !important; gap: 5px !important; } body.home-page .product-details-panel { width: 100% !important; max-width: 320px !important; margin-inline: auto !important; border-radius: 14px !important; } body.home-page .product-details-panel > div[style*="padding: 20px"] { padding: 12px 10px !important; } body.home-page .panel-image-container { height: 150px !important; border-radius: 12px !important; margin-bottom: 8px !important; } body.home-page .panel-title { font-size: 0.88rem !important; line-height: 1.14 !important; margin-bottom: 5px !important; } body.home-page .panel-price { font-size: 0.9rem !important; margin-bottom: 6px !important; } body.home-page .home-seller-card { grid-template-columns: 36px minmax(0, 1fr) 23px; gap: 8px; margin: 6px 0 8px; padding: 8px; border-radius: 13px; } body.home-page .home-seller-logo { width: 36px; height: 36px; border-radius: 11px; } body.home-page .home-seller-logo img { width: 27px; height: 27px; } body.home-page .home-seller-kicker { font-size: 0.5rem; letter-spacing: 0.09em; } body.home-page .home-seller-copy strong { font-size: 0.72rem; } body.home-page .home-seller-copy small { font-size: 0.54rem; } body.home-page .home-seller-check { width: 23px; height: 23px; font-size: 0.72rem; } body.home-page .panel-desc, body.home-page #panelDesc { font-size: 0.64rem !important; line-height: 1.22 !important; } body.home-page .product-card-summary { gap: 4px; margin-bottom: 7px; } body.home-page .product-card-summary-pill { min-height: 20px; padding: 4px 8px; border-radius: 999px; font-size: 0.58rem; line-height: 1.1; } body.home-page .panel-desc-summary { gap: 9px; margin-top: 8px; margin-bottom: 12px; } body.home-page .panel-desc-chip { padding: 9px 11px; border-radius: 12px; } body.home-page .panel-desc-chip-text { font-size: 0.68rem; line-height: 1.24; } body.home-page .quantity-selector { transform: scale(0.86) !important; transform-origin: top center !important; margin: 6px auto 10px !important; padding-top: 8px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } body.home-page #panel-buttons-container { gap: 8px !important; margin-top: 6px !important; padding-top: 2px !important; } body.home-page .btn-panel-buy, body.home-page .btn-panel-info { min-height: 34px !important; padding: 8px 10px !important; font-size: 0.64rem !important; border-radius: 10px !important; } body.home-page .skincare-cart-prompt { margin-top: 10px !important; padding: 10px 8px !important; border-radius: 12px !important; } body.home-page .skincare-cart-prompt p { font-size: 0.62rem !important; line-height: 1.2 !important; } body.home-page .skincare-cart-actions { gap: 6px !important; } body.home-page .btn-skincare-cart-primary, body.home-page .btn-skincare-cart-secondary { min-height: 32px !important; padding: 7px 10px !important; font-size: 0.62rem !important; border-radius: 10px !important; } body.home-page #cart-items-list .cart-item { padding: 7px 0 !important; gap: 5px !important; } body.home-page #cart-items-list .cart-item-name { font-size: 0.64rem !important; line-height: 1.15 !important; } body.home-page #cart-items-list .cart-item-price { font-size: 0.68rem !important; } body.home-page #cart-items-list .remove-skincare-item-btn { font-size: 0.9rem !important; margin-left: 6px !important; } body.home-page #cart-items-list .cart-qty-input, body.home-page #cart-items-list .skincare-cart-qty-input, body.home-page #cart-items-list .cart-item-option { width: 48px !important; min-height: 26px !important; padding: 4px 6px !important; font-size: 0.58rem !important; border-radius: 7px !important; } body.home-page #cart-items-list .cart-item-option { width: 100% !important; } body.home-page #cart-total { margin-top: 8px !important; font-size: 0.82rem !important; } body.home-page .complaint-section--home { border-radius: 16px !important; } body.home-page .complaint-section__head { padding: 12px 10px !important; border-radius: 16px 16px 0 0 !important; } body.home-page .complaint-section__badge { min-height: 22px !important; padding: 4px 8px !important; font-size: 0.58rem !important; margin-bottom: 8px !important; } body.home-page .complaint-section__title { font-size: 0.86rem !important; line-height: 1.14 !important; margin-bottom: 6px !important; } body.home-page .complaint-section__lead { font-size: 0.64rem !important; line-height: 1.24 !important; max-width: none !important; } body.home-page .complaint-section__steps { gap: 5px !important; margin-top: 10px !important; } body.home-page .complaint-section__steps li { gap: 4px !important; padding: 4px 7px !important; font-size: 0.54rem !important; } body.home-page .complaint-section__steps span { width: 16px !important; height: 16px !important; font-size: 0.5rem !important; } body.home-page .complaint-form--home { padding: 12px 10px !important; border-radius: 0 0 16px 16px !important; } body.home-page .complaint-form--home .form-group { margin-bottom: 8px !important; } body.home-page .complaint-form--home .form-group label { font-size: 0.62rem !important; margin-bottom: 4px !important; } body.home-page .complaint-form--home input, body.home-page .complaint-textarea, body.home-page .complaint-input-readonly { min-height: 34px !important; padding: 8px 10px !important; font-size: 0.62rem !important; border-radius: 9px !important; } body.home-page .complaint-product-select { border-radius: 9px !important; } body.home-page .complaint-product-select .select-icon img { width: 14px !important; height: 14px !important; } body.home-page .complaint-textarea { min-height: 76px !important; padding-top: 8px !important; padding-bottom: 8px !important; } body.home-page .complaint-disclaimer { font-size: 0.58rem !important; line-height: 1.2 !important; margin-top: 6px !important; } body.home-page .complaint-submit, body.home-page .btn-send-email { min-height: 34px !important; padding: 8px 10px !important; font-size: 0.64rem !important; border-radius: 12px !important; margin-top: 6px !important; } body.home-page .promo-code-card { max-width: 332px; margin-inline: auto; padding: 12px 11px !important; gap: 8px; } body.home-page .promo-code-box, body.home-page .code-input-container, body.home-page .promo-code-actions { gap: 7px !important; } body.home-page .promo-code-box { align-items: center !important; } body.home-page .promo-code-actions { margin-top: 0 !important; } body.home-page .promo-code-input, body.home-page .code-input { min-height: 38px !important; padding: 8px 10px !important; border-radius: 16px !important; } body.home-page .promo-code-box .promo-code-input { flex: 0 0 min(100%, 220px) !important; width: min(100%, 220px) !important; margin-inline: auto !important; border-radius: 10px !important; } body.home-page .promo-code-btn, body.home-page .promo-info-btn, body.home-page .btn-redeem { min-height: 34px !important; padding: 8px 11px !important; border-radius: 14px !important; width: auto !important; flex: 0 0 auto !important; } body.home-page .offers-row { gap: 8px !important; } body.home-page .main-offer-container { min-width: 0 !important; } body.home-page .main-offer-card { padding: 8px 6px !important; } body.home-page #videojuegosOffersWrapper > div[style*="width: 100%"] { margin-top: 8px !important; } body.home-page #videojuegosOffersWrapper > div[style*="width: 100%"] .btn-claim-offer { width: min(88vw, 280px) !important; padding: 9px 14px !important; font-size: 0.88rem !important; line-height: 1.05 !important; border-radius: 16px !important; } body.home-page #videojuegosOffersWrapper > div[style*="width: 100%"] p { margin-top: 6px !important; font-size: 0.66rem !important; line-height: 1.2 !important; } #modalDetalles .modal-content { width: min(78vw, 260px) !important; max-height: 68vh !important; padding: 8px !important; } } @media (max-width: 480px) { body.home-page .promos-grid-3d { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; align-items: start !important; } body.home-page .promo-card-3d.promo-card-pack { border-radius: 10px !important; min-height: 0 !important; height: auto !important; align-self: start !important; } body.home-page .promo-card-topline { padding: 6px 6px 0 !important; gap: 4px !important; } body.home-page .promo-pack-chip { min-height: 16px !important; padding: 2px 5px !important; font-size: 0.42rem !important; } body.home-page .promo-pack-price { font-size: 0.58rem !important; line-height: 1.05 !important; } body.home-page .promo-card-image-wrap { margin: 6px 6px 0 !important; min-height: 72px !important; border-radius: 8px !important; } body.home-page .promo-card-img { height: 72px !important; } body.home-page .promo-card-badge { min-height: 16px !important; padding: 2px 5px !important; font-size: 0.4rem !important; border-radius: 999px !important; } body.home-page .promo-card-body { padding: 6px 6px 7px !important; gap: 3px !important; flex: 0 0 auto !important; } body.home-page .promo-card-title { font-size: 0.58rem !important; line-height: 1.1 !important; margin-bottom: 3px !important; } body.home-page .promo-card-desc { font-size: 0.48rem !important; line-height: 1.14 !important; margin-bottom: 3px !important; } body.home-page .promo-card-copy { font-size: 0.44rem !important; line-height: 1.12 !important; } body.home-page .promo-card-footer { margin-top: 4px !important; gap: 4px !important; } body.home-page .promo-card-cta { min-height: 22px !important; padding: 4px 6px !important; font-size: 0.48rem !important; border-radius: 8px !important; } body.home-page .promo-card-note { font-size: 0.4rem !important; } body.home-page .promo-card-3d.promo-card-pack .promo-card-body > * { flex: 0 0 auto !important; } body.home-page .product-details-panel { max-width: 270px !important; border-radius: 12px !important; } body.home-page .product-details-panel > div[style*="padding: 20px"] { padding: 9px 8px !important; } body.home-page .panel-image-container { height: 118px !important; border-radius: 10px !important; margin-bottom: 6px !important; } body.home-page .panel-title { font-size: 0.7rem !important; line-height: 1.12 !important; margin-bottom: 4px !important; } body.home-page .panel-price { font-size: 0.72rem !important; margin-bottom: 4px !important; } body.home-page .panel-desc, body.home-page #panelDesc { font-size: 0.54rem !important; line-height: 1.16 !important; } body.home-page .panel-desc-summary { gap: 8px !important; margin-top: 7px !important; margin-bottom: 10px !important; } body.home-page .panel-desc-chip { padding: 8px 10px !important; border-radius: 11px !important; } body.home-page .panel-desc-chip-text { font-size: 0.56rem !important; line-height: 1.18 !important; } body.home-page .quantity-selector { transform: scale(0.72) !important; margin: 4px auto 8px !important; padding-top: 7px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } body.home-page #panel-buttons-container { gap: 7px !important; margin-top: 4px !important; } body.home-page .btn-panel-buy, body.home-page .btn-panel-info { min-height: 28px !important; padding: 6px 8px !important; font-size: 0.54rem !important; border-radius: 8px !important; } body.home-page .skincare-cart-prompt { margin-top: 8px !important; padding: 8px 6px !important; border-radius: 10px !important; } body.home-page .skincare-cart-prompt p { font-size: 0.52rem !important; line-height: 1.16 !important; } body.home-page .skincare-cart-actions { gap: 5px !important; } body.home-page .btn-skincare-cart-primary, body.home-page .btn-skincare-cart-secondary { min-height: 28px !important; padding: 5px 8px !important; font-size: 0.54rem !important; border-radius: 8px !important; } body.home-page #cart-items-list .cart-item { padding: 5px 0 !important; gap: 4px !important; } body.home-page #cart-items-list .cart-item > div { gap: 4px !important; } body.home-page #cart-items-list .cart-item-name { font-size: 0.54rem !important; line-height: 1.12 !important; } body.home-page #cart-items-list .cart-item-price { font-size: 0.58rem !important; } body.home-page #cart-items-list .remove-skincare-item-btn { font-size: 0.76rem !important; margin-left: 4px !important; } body.home-page #cart-items-list .cart-qty-input, body.home-page #cart-items-list .skincare-cart-qty-input { width: 38px !important; min-height: 22px !important; padding: 3px 4px !important; font-size: 0.5rem !important; border-radius: 6px !important; } body.home-page #cart-items-list .cart-item-option { min-height: 24px !important; padding: 4px 6px !important; font-size: 0.5rem !important; border-radius: 6px !important; } body.home-page #cart-total { margin-top: 6px !important; font-size: 0.68rem !important; } body.home-page .complaint-section--home { border-radius: 12px !important; } body.home-page .complaint-section__head { padding: 9px 8px !important; border-radius: 12px 12px 0 0 !important; } body.home-page .complaint-section__badge { min-height: 18px !important; padding: 3px 6px !important; font-size: 0.48rem !important; margin-bottom: 6px !important; } body.home-page .complaint-section__title { font-size: 0.7rem !important; line-height: 1.12 !important; margin-bottom: 5px !important; } body.home-page .complaint-section__lead { font-size: 0.54rem !important; line-height: 1.18 !important; } body.home-page .complaint-section__steps { gap: 4px !important; margin-top: 8px !important; } body.home-page .complaint-section__steps li { gap: 3px !important; padding: 3px 6px !important; font-size: 0.46rem !important; } body.home-page .complaint-section__steps span { width: 14px !important; height: 14px !important; font-size: 0.42rem !important; } body.home-page .complaint-form--home { padding: 9px 8px !important; border-radius: 0 0 12px 12px !important; } body.home-page .complaint-form--home .form-group { margin-bottom: 6px !important; } body.home-page .complaint-form--home .form-group label { font-size: 0.54rem !important; margin-bottom: 3px !important; } body.home-page .complaint-form--home input, body.home-page .complaint-textarea, body.home-page .complaint-input-readonly { min-height: 30px !important; padding: 6px 8px !important; font-size: 0.54rem !important; border-radius: 7px !important; } body.home-page .complaint-product-select { border-radius: 7px !important; } body.home-page .complaint-product-select .select-icon img { width: 12px !important; height: 12px !important; } body.home-page .complaint-textarea { min-height: 62px !important; } body.home-page .complaint-disclaimer { font-size: 0.48rem !important; line-height: 1.14 !important; margin-top: 5px !important; } body.home-page .complaint-submit, body.home-page .btn-send-email { min-height: 30px !important; padding: 6px 8px !important; font-size: 0.56rem !important; border-radius: 10px !important; margin-top: 5px !important; } body.home-page .promo-code-card { max-width: 278px !important; padding: 10px 9px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-areas: "title title" "lead lead" "input input" "claim info" "details details" "result result" !important; align-items: start !important; } body.home-page .promo-code-card .home-trust-title { grid-area: title; } body.home-page .promo-code-card .home-trust-lead { grid-area: lead; } body.home-page .promo-code-box, body.home-page .code-input-container, body.home-page .promo-code-actions { gap: 5px !important; } body.home-page .promo-code-box { grid-area: input; display: block !important; } body.home-page .promo-code-actions { grid-area: info; display: block !important; width: 100% !important; margin-top: 0 !important; grid-column: 1 / -1 !important; justify-self: center !important; text-align: center !important; } body.home-page .promo-code-input, body.home-page .code-input { min-height: 30px !important; padding: 6px 8px !important; font-size: 0.52rem !important; border-radius: 8px !important; height: 30px !important; } body.home-page .promo-code-btn, body.home-page .promo-info-btn, body.home-page .btn-redeem { min-height: 28px !important; padding: 5px 9px !important; font-size: 0.54rem !important; border-radius: 12px !important; width: auto !important; flex: 0 0 auto !important; } body.home-page .promo-code-btn { grid-area: claim; width: 100% !important; margin-top: 5px !important; } body.home-page .promo-info-btn { width: fit-content !important; justify-self: center !important; align-self: center !important; margin-top: 5px !important; margin-left: 0 !important; } body.home-page .offers-row { gap: 8px !important; } body.home-page .main-offer-container { width: calc(33.333% - 5.5px) !important; flex: 0 0 calc(33.333% - 5.5px) !important; } body.home-page .main-offer-card { padding: 8px 6px !important; border-radius: 10px !important; } body.home-page .offer-badge { top: 4px !important; left: 4px !important; font-size: 0.42rem !important; padding: 3px 5px !important; border-radius: 8px !important; } body.home-page .offer-images { margin-top: 20px !important; gap: 5px !important; } body.home-page .offer-images img { width: 32px !important; height: 32px !important; border-radius: 6px !important; } body.home-page .plus-sign { font-size: 0.8rem !important; } body.home-page .offer-details h3 { font-size: 0.62rem !important; line-height: 1.16 !important; margin-bottom: 5px !important; } body.home-page .offer-details p { font-size: 0.48rem !important; line-height: 1.2 !important; margin-bottom: 7px !important; } body.home-page .offer-pricing { padding: 6px 5px !important; margin-bottom: 7px !important; border-radius: 8px !important; } body.home-page .offer-old-price { font-size: 0.44rem !important; } body.home-page .offer-new-price { font-size: 0.66rem !important; line-height: 1.08 !important; } body.home-page .btn-claim-offer { min-height: 28px !important; padding: 5px 8px !important; font-size: 0.56rem !important; border-radius: 10px !important; } body.home-page #videojuegosOffersWrapper > div[style*="width: 100%"] { margin-top: 4px !important; } body.home-page #videojuegosOffersWrapper > div[style*="width: 100%"] .btn-claim-offer { width: min(82vw, 220px) !important; padding: 7px 10px !important; font-size: 0.66rem !important; border-radius: 14px !important; box-shadow: 0 0 10px rgba(255, 215, 0, 0.28) !important; } body.home-page #videojuegosOffersWrapper > div[style*="width: 100%"] p { font-size: 0.5rem !important; margin-top: 4px !important; } #modalDetalles .modal-content { width: min(66vw, 210px) !important; max-height: 60vh !important; padding: 6px !important; border-radius: 9px !important; } #modalDetalles .carousel { margin-bottom: 6px !important; } #modalDetalles .carousel-images { min-height: 78px !important; } #modalDetalles .carousel-images img { max-height: 88px !important; border-radius: 8px !important; } #modalDetalles #detailName { font-size: 0.62rem !important; line-height: 1.12 !important; margin-bottom: 4px !important; } #modalDetalles #detailPrice { font-size: 0.64rem !important; margin-bottom: 4px !important; } #modalDetalles #detailDesc { font-size: 0.5rem !important; line-height: 1.15 !important; margin-bottom: 6px !important; } #modalDetalles .quantity-selector { transform: scale(0.68) !important; margin: -2px auto 6px !important; } #modalDetalles .btn-panel-buy { min-height: 26px !important; font-size: 0.54rem !important; margin-bottom: 6px !important; border-radius: 10px !important; } #modalDetalles .modal-content > div[style*="background: #202026"] { padding: 7px !important; font-size: 0.48rem !important; border-radius: 8px !important; } body.home-page .promo-code-box .promo-code-input { flex: 0 0 100% !important; width: 100% !important; min-height: 28px !important; height: 28px !important; padding: 5px 8px !important; border-radius: 7px !important; line-height: 1.1 !important; margin-inline: auto !important; } body.home-page .promo-info-box { grid-area: details; } body.home-page #promoCodeResult { grid-area: result; } } body.home-page header, body.home-page .home-hero, body.home-page .home-main, body.home-page .main-footer { opacity: 0; transform: translateY(26px); transition: opacity .75s ease, transform .75s ease; } body.home-page.page-ready header { opacity: 1; transform: translateY(0); } body.home-page.page-ready .home-hero { opacity: 1; transform: translateY(0); transition-delay: .08s; } body.home-page.page-ready .home-main { opacity: 1; transform: translateY(0); transition-delay: .16s; } body.home-page.page-ready .main-footer { opacity: 1; transform: translateY(0); transition-delay: .24s; } @media (max-width: 640px) { .home-hero-carousel { height: 176px !important; } .home-hero-slide:first-child .home-hero-inner { min-height: 176px !important; padding: 12px 42px 12px 14px !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; } .home-hero-slide:first-child .home-hero-title { font-size: clamp(0.88rem, 4.5vw, 1rem) !important; line-height: 1.08 !important; max-width: calc(100% - 18px) !important; margin-bottom: 0 !important; } .home-hero-slide:first-child .home-hero-kicker { font-size: 0.44rem !important; letter-spacing: 0.05em !important; margin-bottom: 5px !important; max-width: calc(100% - 12px) !important; } .home-hero-slide:first-child .home-hero-mobile-info { display: flex !important; flex-wrap: wrap; gap: 6px; margin-top: 10px; max-width: calc(100% - 10px); } .home-hero-slide:first-child .home-hero-mobile-pill { display: inline-flex; align-items: center; min-height: 20px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.86); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .home-hero-slide:first-child .home-hero-sub, .home-hero-slide:first-child .home-hero-actions, .home-hero-slide:first-child .home-hero-badges, .home-hero-slide:first-child .home-hero-trust-mini, .home-hero-slide:first-child .home-hero-visual { display: none !important; } } @media (max-width: 430px) { .home-hero-carousel { height: 184px !important; } .home-hero-slide:first-child .home-hero-inner { min-height: 184px !important; padding: 12px 40px 12px 14px !important; } .home-hero-slide:first-child .home-hero-title { font-size: clamp(0.8rem, 4.2vw, 0.94rem) !important; } .home-hero-slide:first-child .home-hero-mobile-info { gap: 5px; margin-top: 8px; } .home-hero-slide:first-child .home-hero-mobile-pill { min-height: 18px; padding: 4px 7px; font-size: 0.48rem; } } /* Pagination clarity tweak */ body.home-page .pagination { position: relative; z-index: 2; gap: 10px; margin-top: 34px; padding-top: 12px; justify-content: center; align-items: center; } body.home-page .page-btn, body.home-page .pagination button, body.home-page .pagination a { min-width: 42px; min-height: 42px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255, 140, 26, 0.26); background: rgba(34, 16, 40, 0.82); color: rgba(255, 245, 255, 0.9); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); } body.home-page .page-btn:hover, body.home-page .pagination button:hover, body.home-page .pagination a:hover { transform: translateY(-1px); border-color: rgba(255, 170, 64, 0.8); background: rgba(58, 24, 52, 0.96); } body.home-page .page-btn.active, body.home-page .pagination button.active, body.home-page .pagination a.active, body.home-page .page-btn[aria-current="page"] { background: linear-gradient(180deg, #ffb347 0%, #ff8c1a 100%); border-color: rgba(255, 214, 140, 0.95); color: #2a0d00 !important; font-weight: 900; box-shadow: 0 0 0 2px rgba(255, 214, 140, 0.22), 0 12px 26px rgba(255, 106, 0, 0.34); } body.home-page .page-btn.active:hover, body.home-page .pagination button.active:hover, body.home-page .pagination a.active:hover { background: linear-gradient(180deg, #ffc46a 0%, #ff9b34 100%); } @media (max-width: 768px) { body.home-page .pagination { gap: 8px; margin-top: 28px; padding-top: 10px; } body.home-page .page-btn, body.home-page .pagination button, body.home-page .pagination a { min-width: 38px; min-height: 38px; padding: 8px 10px; } } @media (max-width: 480px) { body.home-page .pagination { gap: 7px; margin-top: 24px; padding-top: 8px; } body.home-page .page-btn, body.home-page .pagination button, body.home-page .pagination a { min-width: 34px; min-height: 34px; padding: 7px 9px; border-radius: 10px; font-size: 0.74rem !important; } } /* Pagination single-row refinement */ body.home-page .pagination { display: flex !important; flex-wrap: nowrap !important; width: max-content; max-width: calc(100vw - 28px); margin: 34px auto 18px !important; padding: 12px 0 0 !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.home-page .pagination::-webkit-scrollbar { display: none; } @media (max-width: 768px) { body.home-page .pagination { gap: 8px; width: max-content; max-width: calc(100vw - 18px); margin: 28px auto 16px !important; padding-top: 10px !important; flex-wrap: nowrap !important; justify-content: center !important; } } @media (max-width: 480px) { body.home-page .pagination { gap: 5px; width: max-content; max-width: calc(100vw - 24px); margin: 20px auto 12px !important; padding: 6px 2px 0 !important; flex-wrap: nowrap !important; justify-content: center !important; overflow-x: auto; } body.home-page .page-btn, body.home-page .pagination button, body.home-page .pagination a { flex: 0 0 auto; min-width: 30px; min-height: 30px; padding: 5px 7px; border-radius: 9px; font-size: 0.66rem !important; } body.home-page .stock-label, body.home-page .panel-badge, body.home-page .discount-badge { font-size: 0.42rem !important; padding: 2px 5px !important; border-radius: 7px; letter-spacing: 0.01em; } body.home-page #product-grid .card-favorite-btn { top: 7px; right: 7px; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; } body.home-page #product-grid .card-favorite-btn svg { width: 14px; height: 14px; } } /* ===== Videojuegos Toolbar Refresh ===== */ body.home-page .home-multi-bar { width: 100%; display: flex; justify-content: center; } body.home-page .home-multi-bar .btn-multi-select { position: relative; overflow: hidden; min-height: 58px; padding: 14px 28px; border-radius: 999px; border: 1px solid rgba(83, 245, 190, 0.28); background: radial-gradient(circle at top left, rgba(117, 255, 211, 0.18), transparent 42%), linear-gradient(145deg, rgba(20, 54, 49, 0.94), rgba(16, 31, 48, 0.96)); color: #eafff7; font-family: "Outfit", sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 36px rgba(0,0,0,0.28), 0 0 0 1px rgba(30, 255, 204, 0.05); } body.home-page .home-multi-bar .btn-multi-select::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.16) 48%, transparent 100%); transform: translateX(-120%); transition: transform .55s ease; pointer-events: none; } body.home-page .home-multi-bar .btn-multi-select:hover::before { transform: translateX(120%); } body.home-page .home-multi-bar .btn-multi-select:hover { transform: translateY(-3px) scale(1.01); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 22px 42px rgba(0,0,0,0.34), 0 0 28px rgba(74, 222, 128, 0.18); } body.home-page .home-multi-bar .btn-multi-select:active { transform: translateY(-1px) scale(0.995); } body.home-page .home-price-filter { position: relative; width: min(100%, 760px); max-width: 760px; padding: 22px 24px 18px; border-radius: 28px; border: 1px solid rgba(122, 240, 255, 0.14); background: radial-gradient(circle at top right, rgba(0, 217, 255, 0.14), transparent 32%), radial-gradient(circle at bottom left, rgba(255, 128, 64, 0.08), transparent 30%), linear-gradient(160deg, rgba(12, 18, 33, 0.96), rgba(16, 20, 39, 0.96) 58%, rgba(19, 15, 33, 0.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 26px 60px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.02); } body.home-page .home-price-filter::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255,255,255,0.03); pointer-events: none; } body.home-page .home-price-filter-head { align-items: baseline; gap: 20px; margin-bottom: 16px; } body.home-page .home-price-filter-label { color: rgba(255,255,255,0.72); font-size: 0.8rem; letter-spacing: 0.22em; font-weight: 900; } body.home-page .home-price-filter-value { display: inline-flex; align-items: center; justify-content: center; min-width: 154px; padding: 8px 14px; border-radius: 999px; background: rgba(14, 27, 47, 0.74); border: 1px solid rgba(89, 238, 255, 0.16); color: #77f3ff; font-size: 1.16rem; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } body.home-page .home-price-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(34, 211, 238, 0.95), rgba(34, 211, 238, 0.9)) left center / var(--range-progress, 100%) 100% no-repeat, rgba(255,255,255,0.12); outline: none; box-shadow: inset 0 1px 3px rgba(0,0,0,0.35); } body.home-page .home-price-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: transparent; } body.home-page .home-price-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; border: 2px solid rgba(15, 20, 35, 0.9); background: radial-gradient(circle at 30% 30%, #c8ffff, #39dcff 58%, #00b8f5 100%); box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.12), 0 10px 20px rgba(0,0,0,0.26); cursor: pointer; } body.home-page .home-price-range::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.12); } body.home-page .home-price-range::-moz-range-progress { height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(34, 211, 238, 0.98), rgba(72, 235, 255, 0.9)); } body.home-page .home-price-range::-moz-range-thumb { width: 24px; height: 24px; border: 2px solid rgba(15, 20, 35, 0.9); border-radius: 50%; background: radial-gradient(circle at 30% 30%, #c8ffff, #39dcff 58%, #00b8f5 100%); box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.12), 0 10px 20px rgba(0,0,0,0.26); cursor: pointer; } body.home-page .home-price-filter-scale { margin-top: 14px; color: rgba(255,255,255,0.5); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.01em; } @media (max-width: 768px) { body.home-page .home-multi-bar .btn-multi-select { width: 100%; min-height: 50px; padding: 12px 18px; font-size: 0.9rem; } body.home-page .home-price-filter { width: 100%; padding: 16px 16px 14px; border-radius: 20px; } body.home-page .home-price-filter-head { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 12px; } body.home-page .home-price-filter-value { min-width: 124px; padding: 7px 11px; font-size: 0.98rem; } body.home-page .home-price-filter-label { font-size: 0.68rem; letter-spacing: 0.18em; } body.home-page .home-price-filter-scale { margin-top: 10px; font-size: 0.72rem; } } @media (max-width: 480px) { body.home-page .home-search-wrap { padding: 1px 2px 1px 14px; min-height: 52px; border-radius: 18px; } body.home-page .home-search-icon { margin-right: 8px; transform: scale(0.82); } body.home-page .home-search-input { font-size: 0.9rem !important; padding: 10px 10px 10px 0 !important; } body.home-page .home-multi-bar .btn-multi-select { min-height: 40px; padding: 8px 12px; font-size: 0.78rem; border-radius: 15px; letter-spacing: 0; } body.home-page .home-price-filter { padding: 7px 8px 6px; border-radius: 10px; } body.home-page .home-price-filter-head { gap: 6px; margin-bottom: 5px; } body.home-page .home-price-filter-label { font-size: 0.56rem; letter-spacing: 0.1em; } body.home-page .home-price-filter-value { min-width: 82px; padding: 5px 8px; font-size: 0.72rem; } body.home-page .home-price-range { height: 5px; } body.home-page .home-price-range::-webkit-slider-runnable-track { height: 5px; } body.home-page .home-price-range::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; } body.home-page .home-price-range::-moz-range-track, body.home-page .home-price-range::-moz-range-progress { height: 5px; } body.home-page .home-price-range::-moz-range-thumb { width: 16px; height: 16px; } body.home-page .home-price-filter-scale { margin-top: 4px; font-size: 0.52rem; } body.home-page .home-latam-banner { gap: 7px; margin: 0 auto 10px; padding: 6px 10px; border-radius: 14px; font-size: 0.6rem; letter-spacing: 0.01em; } body.home-page .home-latam-banner img { width: 14px; height: 14px; } } @media (max-width: 768px) { body.home-page .container, body.home-page .site-nav-inner, body.home-page .hero-content, body.home-page .promos-section-container, body.home-page .home-section-shell, body.home-page .trust-section-shell { width: min(100% - 18px, 1180px); } body.home-page .site-nav-end { gap: 5px; } body.home-page .site-nav-list .nav-link { min-height: 30px; } body.home-page .main-nav.site-nav-unified { margin-top: 4px; } body.home-page .hero-copy, body.home-page .home-promos-head, body.home-page .home-trust-copy { gap: 8px; } body.home-page .section-title-large, body.home-page .home-promos-title { line-height: 1.05; } body.home-page .product-comment-card { padding: 9px; border-radius: 11px; } body.home-page .product-comment-head { gap: 8px; } body.home-page .product-comment-avatar { width: 32px; height: 32px; } body.home-page .product-comment-author { gap: 5px; } body.home-page .product-comment-name { font-size: 0.72rem; line-height: 1.15; } body.home-page .comment-rank-badge { font-size: 0.5rem; padding: 3px 6px; } body.home-page .product-comment-time, body.home-page .product-comment-body, body.home-page .product-comment-status { font-size: 0.62rem; line-height: 1.32; } body.home-page .product-comment-media img { max-height: 180px; border-radius: 10px; } } @media (max-width: 480px) { body.home-page header .container { padding-top: 2px; padding-bottom: 0; } .home-brand-title { margin-bottom: 18px; } .home-brand-main { font-size: clamp(1.6rem, 8vw, 2.35rem); letter-spacing: 0.04em; } .home-brand-subtitle { font-size: 0.68rem; } body.home-page .site-nav-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; } body.home-page .site-nav-list .nav-link { padding: 5px 8px; font-size: 0.66rem; border-radius: 12px; min-height: 28px; } body.home-page #saldoUsuario { padding: 6px 8px; font-size: 0.68rem !important; border-radius: 9px; } body.home-page .home-header-cart-btn { min-width: 42px; min-height: 28px; padding: 4px 7px; gap: 4px; font-size: 0.64rem; border-radius: 16px; } body.home-page .home-header-cart-icon { font-size: 0.78rem; } body.home-page .home-header-cart-count { min-width: 12px; font-size: 0.64rem; } body.home-page .site-nav-more-btn, body.home-page .site-nav-end .btn-login-google { min-height: 28px; padding: 4px 6px; font-size: 0.62rem; border-radius: 16px; } body.home-page .site-nav-end .user-avatar { width: 24px; height: 24px; } body.home-page .product-comments-shell { padding: 10px; border-radius: 12px; } body.home-page .product-comments-head h3 { font-size: 0.82rem; } body.home-page .product-comments-kicker, body.home-page .product-comments-count, body.home-page .product-comments-meta, body.home-page .product-comments-feedback { font-size: 0.56rem; } body.home-page .product-comments-user img { width: 30px; height: 30px; } body.home-page .product-comments-user strong { font-size: 0.66rem; } body.home-page .product-comments-user p, body.home-page .product-comments-textarea, body.home-page .product-comments-submit { font-size: 0.6rem; } body.home-page .product-comments-textarea { min-height: 70px; padding: 8px; } body.home-page .product-comments-submit { min-height: 31px; padding: 7px 10px; } body.home-page .product-comment-card { padding: 8px; border-radius: 10px; } body.home-page .product-comment-avatar { width: 28px; height: 28px; } body.home-page .product-comment-name { font-size: 0.66rem; } body.home-page .comment-rank-badge { font-size: 0.46rem; padding: 2px 5px; } body.home-page .product-comment-time, body.home-page .product-comment-body, body.home-page .product-comment-status { font-size: 0.58rem; line-height: 1.28; } body.home-page .product-comment-media img { max-height: 150px; } } /* ===== Videojuegos Toolbar Orange Override ===== */ body.home-page .home-multi-bar .btn-multi-select { border: 1px solid rgba(255, 161, 72, 0.42); background: radial-gradient(circle at top left, rgba(255, 168, 76, 0.24), transparent 42%), linear-gradient(145deg, rgba(70, 29, 10, 0.96), rgba(47, 16, 8, 0.97)); color: #fff0d8; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 36px rgba(0,0,0,0.28), 0 0 0 1px rgba(255, 149, 0, 0.08), 0 0 24px rgba(255, 123, 0, 0.18); } body.home-page .home-multi-bar .btn-multi-select:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 22px 42px rgba(0,0,0,0.34), 0 0 30px rgba(255, 136, 0, 0.28); } body.home-page.event-theme-halloween .home-price-filter { border: 1px solid rgba(255, 153, 51, 0.22); background: radial-gradient(circle at top right, rgba(255, 145, 0, 0.2), transparent 30%), radial-gradient(circle at bottom left, rgba(255, 102, 0, 0.14), transparent 34%), linear-gradient(160deg, rgba(30, 14, 10, 0.97), rgba(40, 16, 11, 0.96) 58%, rgba(27, 10, 8, 0.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 26px 60px rgba(0,0,0,0.34), 0 0 0 1px rgba(255, 145, 0, 0.05), 0 0 28px rgba(255, 98, 0, 0.12); } body.home-page.event-theme-halloween .home-price-filter-label { color: rgba(255, 226, 190, 0.82); } body.home-page.event-theme-halloween .home-price-filter-value { background: linear-gradient(145deg, rgba(81, 31, 13, 0.94), rgba(46, 18, 9, 0.94)); border: 1px solid rgba(255, 166, 77, 0.26); color: #ffb14a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.2); } body.home-page.event-theme-halloween .home-price-range { background: linear-gradient(90deg, rgba(255, 149, 0, 0.98), rgba(255, 102, 0, 0.92)) left center / var(--range-progress, 100%) 100% no-repeat, rgba(255,255,255,0.12); } body.home-page.event-theme-halloween .home-price-range::-webkit-slider-thumb { border: 2px solid rgba(42, 16, 8, 0.95); background: radial-gradient(circle at 30% 30%, #ffe3b5, #ffab3d 58%, #ff6a00 100%); box-shadow: 0 0 0 6px rgba(255, 123, 0, 0.14), 0 10px 20px rgba(0,0,0,0.28); } body.home-page.event-theme-halloween .home-price-range::-moz-range-progress { background: linear-gradient(90deg, rgba(255, 149, 0, 0.98), rgba(255, 102, 0, 0.92)); } body.home-page.event-theme-halloween .home-price-range::-moz-range-thumb { border: 2px solid rgba(42, 16, 8, 0.95); background: radial-gradient(circle at 30% 30%, #ffe3b5, #ffab3d 58%, #ff6a00 100%); box-shadow: 0 0 0 6px rgba(255, 123, 0, 0.14), 0 10px 20px rgba(0,0,0,0.28); } body.home-page.event-theme-halloween .home-price-filter-scale { color: rgba(255, 224, 196, 0.58); } html.home-safe-mode { scroll-behavior: auto !important; overflow-y: auto !important; overflow-x: hidden !important; } html.home-safe-mode body.home-page::before { display: none !important; } html.home-safe-mode body.home-page header, html.home-safe-mode body.home-page .home-hero, html.home-safe-mode body.home-page .home-main, html.home-safe-mode body.home-page .main-footer { opacity: 1 !important; transform: none !important; transition: none !important; } html.home-safe-mode body.home-page .home-hero-inner, html.home-safe-mode body.home-page .home-value-card, html.home-safe-mode body.home-page .home-proof-panel, html.home-safe-mode body.home-page .home-steps-panel, html.home-safe-mode body.home-page .main-offer-card, html.home-safe-mode body.home-page .feature-card, html.home-safe-mode body.home-page .complaint-section, html.home-safe-mode body.home-page .clients-section, html.home-safe-mode body.home-page .codes-section, html.home-safe-mode body.home-page .promo-code-card, html.home-safe-mode body.home-page .home-catalog-block, html.home-safe-mode body.home-page .promos-section-container, html.home-safe-mode body.home-page .bottom-section-container, html.home-safe-mode body.home-page .layout-container, html.home-safe-mode body.home-page .home-price-filter, html.home-safe-mode body.home-page .home-carousel-track, html.home-safe-mode body.home-page #catalogo-completo { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; contain: none !important; content-visibility: visible !important; will-change: auto !important; } html.home-safe-mode body.home-page .home-hero-visual img, html.home-safe-mode body.home-page .product-card-media img, html.home-safe-mode body.home-page .promo-card-img, html.home-safe-mode body.home-page .offer-images img { animation: none !important; filter: none !important; transform: none !important; } html.home-safe-mode body.home-page .mai-float-root { display: flex !important; position: fixed !important; z-index: 2000 !important; } @media (max-width: 640px) { body.home-page .home-catalog-block { padding: 14px 10px 12px; border-radius: 18px; } body.home-page .home-carousel-viewport { border-radius: 16px; } body.home-page .home-carousel-track { gap: 10px; padding: 10px 8px 14px; } body.home-page .product-card--spotlight { flex: 0 0 clamp(126px, 36vw, 154px) !important; max-width: 154px !important; min-height: 0 !important; border-radius: 16px !important; } body.home-page .product-card--spotlight .product-card-media img { height: clamp(88px, 25vw, 112px) !important; } body.home-page .product-card--spotlight .product-info { min-height: 116px; padding: 10px 8px 12px !important; align-items: center; justify-content: flex-start; text-align: center; } body.home-page .product-card--spotlight .category-tag { max-width: 100%; padding: 4px 8px !important; margin: 0 0 8px !important; font-size: 0.58rem !important; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.home-page .product-card--spotlight .product-card-title { width: 100%; min-height: 2.45em; margin: 0 0 8px !important; color: #f8fbff; font-size: 0.72rem !important; line-height: 1.22 !important; -webkit-line-clamp: 2 !important; overflow-wrap: normal; } body.home-page .product-card--spotlight .product-card-summary, body.home-page .product-card--spotlight .product-card-summary-pill { display: none !important; } body.home-page .product-card--spotlight .product-card-price-row { margin-top: auto; } body.home-page .product-card--spotlight .price { font-size: 0.92rem !important; line-height: 1.15; } body.home-page #product-grid .product-card { min-height: 0; } body.home-page #product-grid .product-card-summary { display: none !important; } } body.home-page .product-card-media { isolation: isolate; } body.home-page .product-card-media .product-card-img { width: 100%; object-fit: cover; display: block; } body.home-page .product-card-media .product-card-img--primary { position: relative; z-index: 1; opacity: 1; transform: scale(1); filter: saturate(1) brightness(1); transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1), transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), filter 0.62s cubic-bezier(0.22, 1, 0.36, 1) !important; will-change: opacity, transform, filter; } body.home-page .product-card-media .product-card-img--hover { position: absolute; inset: 0; z-index: 2; height: 100%; opacity: 0; transform: scale(1.025); filter: saturate(0.92) brightness(0.94); transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1), transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), filter 0.62s cubic-bezier(0.22, 1, 0.36, 1) !important; pointer-events: none; will-change: opacity, transform, filter; } body.home-page .product-card.hover-image-ready.is-hovering .product-card-img--primary, body.home-page .product-card.hover-image-ready:hover .product-card-img--primary { opacity: 0 !important; transform: scale(1.012) !important; filter: saturate(0.96) brightness(0.98) !important; } body.home-page .product-card.hover-image-ready.is-hovering .product-card-img--hover[src], body.home-page .product-card.hover-image-ready:hover .product-card-img--hover[src] { opacity: 1 !important; transform: scale(1.045) !important; filter: saturate(1.02) brightness(1) !important; } @media (max-width: 900px), (hover: none), (pointer: coarse) { body.home-page #product-grid .product-card, body.home-page .product-card--spotlight, body.home-page .promo-card-3d.promo-card-pack, body.home-page .main-offer-card, body.home-page .feature-card, body.home-page .home-value-card, body.home-page .stat-box, body.home-page .home-catalog-shortcut, body.home-page .btn-multi-select, body.home-page .btn-panel-buy, body.home-page .btn-skincare-cart-primary, body.home-page .btn-skincare-cart-secondary { transform: none !important; transition: none !important; animation: none !important; will-change: auto !important; } body.home-page #product-grid .product-card:hover, body.home-page #product-grid .product-card:active, body.home-page #product-grid .product-card.selected, body.home-page .product-card:hover, body.home-page .product-card:active, body.home-page .product-card.selected, body.home-page .product-card--spotlight:hover, body.home-page .product-card--spotlight:active, body.home-page .product-card--spotlight.selected, body.home-page .promo-card-3d.promo-card-pack:hover, body.home-page .promo-card-3d.promo-card-pack:active, body.home-page .main-offer-card:hover, body.home-page .main-offer-card:active, body.home-page .feature-card:hover, body.home-page .feature-card:active, body.home-page .home-value-card:hover, body.home-page .home-value-card:active, body.home-page .stat-box:hover, body.home-page .stat-box:active, body.home-page .home-catalog-shortcut:hover, body.home-page .home-catalog-shortcut:active, body.home-page .btn-multi-select:hover, body.home-page .btn-multi-select:active, body.home-page .btn-panel-buy:hover, body.home-page .btn-panel-buy:active, body.home-page .btn-skincare-cart-primary:hover, body.home-page .btn-skincare-cart-primary:active, body.home-page .btn-skincare-cart-secondary:hover, body.home-page .btn-skincare-cart-secondary:active { transform: none !important; box-shadow: none !important; animation: none !important; } body.home-page .product-card, body.home-page #product-grid .product-card, body.home-page .product-card--spotlight, body.home-page .product-card.selected, body.home-page #product-grid .product-card.selected, body.home-page .product-card--spotlight.selected, body.home-page .product-card:hover, body.home-page #product-grid .product-card:hover, body.home-page .product-card--spotlight:hover, body.home-page .product-card:active, body.home-page #product-grid .product-card:active, body.home-page .product-card--spotlight:active { border-color: var(--home-border) !important; box-shadow: none !important; } body.home-page #product-grid .product-card-media img, body.home-page .product-card--spotlight .product-card-media img, body.home-page .promo-card-img, body.home-page .offer-images img { transform: none !important; filter: none !important; animation: none !important; will-change: auto !important; } body.home-page #product-grid .product-card:hover .product-card-media img, body.home-page #product-grid .product-card:active .product-card-media img, body.home-page .product-card--spotlight:hover .product-card-media img, body.home-page .product-card--spotlight:active .product-card-media img, body.home-page .promo-card-3d.promo-card-pack:hover .promo-card-img, body.home-page .promo-card-3d.promo-card-pack:active .promo-card-img, body.home-page .main-offer-card:hover .offer-images img, body.home-page .main-offer-card:active .offer-images img { transform: none !important; filter: none !important; } body.home-page .product-card-media .product-card-img--primary, body.home-page .product-card-media .product-card-img--hover { transform: none !important; filter: none !important; transition: opacity 0.28s ease !important; will-change: opacity !important; } body.home-page .product-card.hover-image-ready.is-hovering .product-card-img--primary, body.home-page .product-card.hover-image-ready:hover .product-card-img--primary { opacity: 0 !important; transform: none !important; filter: none !important; } body.home-page .product-card.hover-image-ready.is-hovering .product-card-img--hover[src], body.home-page .product-card.hover-image-ready:hover .product-card-img--hover[src] { opacity: 1 !important; transform: none !important; filter: none !important; } } body.home-page .product-card-views { position: absolute; left: 10px; bottom: 10px; z-index: 8; display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 5px 9px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(6, 10, 18, 0.72); color: #f8fbff; font-size: 0.72rem; font-weight: 800; line-height: 1; backdrop-filter: blur(10px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24); } body.home-page .product-card-views svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Mobile catalog performance: keep product cards static; only image opacity may fade. */ body.home-page .home-catalog-spotlights .product-card, body.home-page .home-carousel .product-card, body.home-page .home-carousel-track .product-card, body.home-page .product-card--spotlight { transform: none !important; translate: none !important; scale: none !important; rotate: none !important; animation: none !important; transition: none !important; box-shadow: none !important; will-change: auto !important; } body.home-page .home-catalog-spotlights .product-card:hover, body.home-page .home-catalog-spotlights .product-card:active, body.home-page .home-catalog-spotlights .product-card:focus, body.home-page .home-catalog-spotlights .product-card:focus-visible, body.home-page .home-catalog-spotlights .product-card.selected, body.home-page .home-catalog-spotlights .product-card.is-selected, body.home-page .home-catalog-spotlights .product-card.is-active, body.home-page .home-catalog-spotlights .product-card.is-hovering, body.home-page .home-carousel .product-card:hover, body.home-page .home-carousel .product-card:active, body.home-page .home-carousel .product-card:focus, body.home-page .home-carousel .product-card:focus-visible, body.home-page .home-carousel .product-card.selected, body.home-page .home-carousel .product-card.is-selected, body.home-page .home-carousel .product-card.is-active, body.home-page .home-carousel .product-card.is-hovering, body.home-page .product-card--spotlight:hover, body.home-page .product-card--spotlight:active, body.home-page .product-card--spotlight:focus, body.home-page .product-card--spotlight:focus-visible, body.home-page .product-card--spotlight.selected, body.home-page .product-card--spotlight.is-selected, body.home-page .product-card--spotlight.is-active, body.home-page .product-card--spotlight.is-hovering { transform: none !important; translate: none !important; scale: none !important; rotate: none !important; animation: none !important; transition: none !important; box-shadow: none !important; outline: none !important; border-color: rgba(255, 255, 255, 0.12) !important; will-change: auto !important; } body.home-page .home-catalog-spotlights .product-card::before, body.home-page .home-catalog-spotlights .product-card::after, body.home-page .home-carousel .product-card::before, body.home-page .home-carousel .product-card::after, body.home-page .product-card--spotlight::before, body.home-page .product-card--spotlight::after { animation: none !important; transition: none !important; opacity: 0 !important; box-shadow: none !important; } body.home-page .home-catalog-spotlights .product-card-media img, body.home-page .home-carousel .product-card-media img, body.home-page .product-card--spotlight .product-card-media img { transform: none !important; filter: none !important; animation: none !important; } body.home-page .home-catalog-spotlights .product-card-media .product-card-img--primary, body.home-page .home-catalog-spotlights .product-card-media .product-card-img--hover, body.home-page .home-carousel .product-card-media .product-card-img--primary, body.home-page .home-carousel .product-card-media .product-card-img--hover, body.home-page .product-card--spotlight .product-card-media .product-card-img--primary, body.home-page .product-card--spotlight .product-card-media .product-card-img--hover { transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1) !important; will-change: opacity !important; }