/* ===================================================== HOME.CSS — SOLO PARA index.php TODO selector aquí empieza con ".page-home" (clase que ponemos en el del index). Así, aunque en otra página uses una clase con el mismo nombre, JAMÁS choca con este archivo ni con el style.css global. Este archivo se incluye SOLO en index.php, después de style.css. ===================================================== */ /* ---------- eBay Live (carrusel exclusivo del home) ---------- */ .page-home .live-scroll-wrap{position:relative;} .page-home .live-row{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;scrollbar-width:thin;} .page-home .live-row::-webkit-scrollbar{height:8px;} .page-home .live-row::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px;} .page-home .live-row::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px;} .page-home .live-card{width:calc((100% - 64px) / 5);flex:0 0 calc((100% - 64px) / 5);cursor:pointer;} .page-home .live-thumb{position:relative;height:370px;border-radius:8px;background-size:cover;background-position:center;overflow:hidden;} .page-home .live-badge{position:absolute;top:10px;left:10px;background-color:#00b34a;color:#fff;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:bold;} .page-home .live-badge.auction-badge{background-color:var(--pink);display:flex;align-items:center;gap:5px;} .page-home .live-badge.auction-badge i{font-size:11px;} .page-home .live-overlay{position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);} .page-home .live-channel{position:absolute;bottom:10px;left:10px;color:#fff;font-size:14px;font-weight:bold;display:flex;align-items:center;gap:5px;text-shadow:0 1px 3px rgba(0,0,0,0.8);} .page-home .live-channel img{width:20px;height:20px;border-radius:50%;object-fit:cover;} .page-home .live-play{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,0.6);color:#fff;border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;} .page-home .live-info{padding-top:8px;} .page-home .live-title{font-size:14px;font-weight:600;line-height:1.3;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .page-home .live-subtitle{font-size:12px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .page-home .live-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.9);box-shadow:0 2px 6px rgba(0,0,0,0.2);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#333;font-size:16px;transition:background .3s;} .page-home .live-arrow:hover{background:#fff;} .page-home .live-arrow-left{left:5px;} .page-home .live-arrow-right{right:5px;} /* ---------- Promos (Flash Sale / Premium Offers, exclusivo del home) ---------- */ .page-home .promo-card{border-radius:12px;padding:18px;height:100%;margin-top:33px;} .page-home .flash-sales{background:linear-gradient(135deg,#fff1f1,#ffe6e8);} .page-home .premium-offers{background:#ece2d3;} .page-home .promo-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;} .page-home .promo-title{font-size:22px;font-weight:800;margin:0;} .page-home .promo-timer-row{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;} .page-home .promo-subtitle{font-size:14px;font-weight:600;color:#333;white-space:nowrap;} .page-home .timer-box{background:var(--pink);color:#fff;padding:4px 7px;border-radius:5px;font-size:13px;font-weight:700;} .page-home .timer-sep{font-weight:700;color:#333;} .page-home .chevron-link{margin-left:auto;font-size:14px;color:#333;} .page-home .promo-item{background:#fff;border-radius:10px;padding:8px;text-align:center;flex:1;min-width:0;box-shadow:0 1px 4px rgba(0,0,0,0.06);position:relative;} .page-home .promo-item img{width:100%;height:100px;object-fit:cover;border-radius:6px;display:block;} .page-home .discount-badge{display:inline-block;color:var(--pink);font-weight:700;margin-top:8px;font-size:14px;background:rgba(254,44,85,0.08);padding:4px 12px;border-radius:20px;} /* ---------- Cronómetro individual de Flash Sales (por producto) ---------- */ .page-home .flash-item-timer{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:8px;flex-wrap:wrap;} .page-home .flash-item-timer i{color:var(--pink);font-size:10px;margin-right:1px;} .page-home .flash-item-timer .fit-box{background:#161823;color:#fff;font-size:9.5px;font-weight:800;padding:3px 4px;border-radius:4px;min-width:17px;display:inline-block;text-align:center;font-variant-numeric:tabular-nums;} .page-home .flash-item-timer .fit-sep{color:#161823;font-weight:800;font-size:9px;} .page-home .flash-item-timer.fit-urgente i{color:#e0244a;animation:fitPulso 1s infinite;} .page-home .flash-item-timer.fit-urgente .fit-box{background:#e0244a;} .page-home .flash-item-timer .fit-ended{font-size:11px;font-weight:700;color:#999;} .page-home .flash-item-timer .fit-ended i{color:#999;margin-right:3px;} @keyframes fitPulso{0%,100%{opacity:1;}50%{opacity:.35;}} .page-home .brand-name{display:inline-block;font-weight:700;font-size:13px;margin-top:8px;color:#5c4a2e;background:#e3d7c2;padding:4px 12px;border-radius:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;} /* ---------- Categorías circulares (exclusivo del home) ---------- */ .page-home .categorias-section{ } .page-home .categories-row{display:flex;gap:28px;overflow-x:auto;padding:0 34px 8px;scrollbar-width:none;scroll-behavior:smooth;} .page-home .categories-row::-webkit-scrollbar{display:none;} .page-home .category-item{text-align:center;min-width:96px;flex-shrink:0;cursor:pointer;} .page-home .category-img{width:76px;height:76px;border-radius:50%;background:#f1f1f2;margin:0 auto 8px;display:block;object-fit:cover;} .page-home .category-label{font-weight:800;font-size:14px;line-height:1.25;display:inline-block;padding:9px 22px;border-radius:24px;margin-top:10px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,0.15);} .page-home .category-arrow-left, .page-home .category-arrow-right{top:38px;right:auto;} .page-home .category-arrow-left{left:-6px;} .page-home .category-arrow-right{right:-6px;left:auto;} /* ---------- Back-to-School Deals (exclusivo del home) ---------- */ .page-home .deal-scroll-wrap{position:relative;margin-bottom:20px;} .page-home .deal-row{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;} .page-home .deal-row::-webkit-scrollbar{height:8px;} .page-home .deal-row::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px;} .page-home .deal-row::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px;} .page-home .deal-card{width:180px;flex:0 0 180px;background-color:#f5f5f5;border-radius:8px;padding:12px;text-align:center;cursor:pointer;transition:transform .2s;} .page-home .deal-card:hover{transform:translateY(-2px);} .page-home .deal-img{width:100%;height:150px;object-fit:contain;margin-bottom:10px;} .page-home .deal-title{font-size:14px;font-weight:600;color:#161823;line-height:1.3;text-align:center;white-space:normal;} .page-home .deal-title.link{color:#0053a6;} .page-home .deal-title.link:hover{text-decoration:underline;} /* ---------- Video feed "Ahorro para ti" (exclusivo del home) ---------- */ /* Ahora usa la misma tarjeta .product-card (definida en style.css global) que "Recommended for you", solo se controla aquí el ancho del slide. */ .page-home .video-feed{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;scroll-behavior:smooth;} .page-home .video-feed::-webkit-scrollbar{height:8px;} .page-home .video-feed::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px;} .page-home .video-feed::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px;} .page-home .video-card-slide{flex:0 0 calc((100% - 4*16px) / 5);width:calc((100% - 4*16px) / 5);} .page-home .video-scroll-wrap{position:relative;} .page-home .video-arrow-left, .page-home .video-arrow-right{position:absolute;top:50%;transform:translateY(-50%);z-index:10;} .page-home .video-arrow-left{left:5px;} .page-home .video-arrow-right{right:5px;} /* ===================================================== RESPONSIVE — solo ajustes de estas secciones del home ===================================================== */ @media (min-width: 768px) and (max-width: 991px){ .page-home .promo-title{font-size:18px;} .page-home .video-card-slide{flex:0 0 calc((100% - 2*16px) / 3);width:calc((100% - 2*16px) / 3);} } @media (max-width: 767px){ .page-home .section-head{margin-top:-10px !important;} .page-home .recommended-section{margin-top:26px;} .page-home .live-card{width:calc((100% - 24px) / 2.5);flex:0 0 calc((100% - 24px) / 2.5);} .page-home .live-row{gap:12px;padding-bottom:0;} .page-home .live-thumb{height:210px;} .page-home .live-badge{font-size:10px;padding:3px 6px;} .page-home .live-title{font-size:13px;} .page-home .live-subtitle{font-size:11px;} .page-home .live-play{width:24px;height:24px;font-size:12px;} .page-home .live-channel{font-size:12px;} .page-home .live-channel img{width:16px;height:16px;} .page-home .live-arrow{display:none !important;} .page-home .live-row::-webkit-scrollbar{display:none;} .page-home .deal-card{width:130px;flex:0 0 130px;padding:8px;} .page-home .deal-img{height:100px;margin-bottom:6px;} .page-home .deal-title{font-size:12px;} .page-home .deal-row{gap:12px;padding-bottom:0;} .page-home .deal-row::-webkit-scrollbar{display:none;} .page-home .promo-item img{width:100% !important;height:70px !important;} .page-home .promo-title{font-size:18px !important;} .page-home .timer-box{font-size:12px !important;padding:2px 4px !important;} .page-home .promo-card{padding:12px;border-radius:10px;} .page-home .flash-sales .promo-title{color:var(--pink) !important;} .page-home .promo-subtitle{font-size:12px;font-weight:500;color:#767676;} .page-home .timer-box{background:none;color:#161823;padding:0;font-weight:800;} .page-home .timer-sep{color:#161823;} .page-home .chevron-link{display:none;} .page-home .promo-head{margin-bottom:10px;gap:4px;} .page-home .promo-timer-row{width:100%;margin-top:2px;} .page-home .promo-item{padding:0;background:transparent;box-shadow:none;} .page-home .flash-item-timer{gap:1px;margin-top:5px;} .page-home .flash-item-timer i{display:none;} .page-home .flash-item-timer .fit-box{font-size:8.5px;padding:2px 3px;min-width:14px;border-radius:3px;} .page-home .flash-item-timer .fit-sep{font-size:8px;} .page-home .flash-item-timer .fit-ended{font-size:9px;} .page-home .discount-badge{font-size:13px;font-weight:700;margin-top:6px;} .page-home .brand-name{font-size:11.5px;font-weight:700;background:#e3d7c2;color:#5c4a2e;display:inline-block;padding:4px 9px;border-radius:20px;margin-top:6px;} .page-home #premiumOffersLabel{font-size:13px !important;letter-spacing:.5px;color:#7a6a52 !important;font-weight:700;text-transform:uppercase;} .page-home .categorias-section{display:none;} .page-home .video-feed{gap:10px;} .page-home .video-card-slide{flex:0 0 calc((100% - 10px) / 2.15);width:calc((100% - 10px) / 2.15);} .page-home .video-feed::-webkit-scrollbar{display:none;} .page-home .video-arrow-left, .page-home .video-arrow-right{display:none !important;} } @media (max-width: 380px){ .page-home .video-feed{gap:8px;} .page-home .video-card-slide{flex:0 0 calc((100% - 8px) / 2.15);width:calc((100% - 8px) / 2.15);} }