/* ==================================================================== Variables de marca ==================================================================== */ :root{ --color-primario: #c62b3c; --color-secundario:#ffffff; --gray-50:#f8f9fa; --gray-100:#f7f7fb; --gray-150:#f5f5fb; --gray-200:#ececf4; --gray-300:#e9ecef; --gray-400:#dee2e6; --text-muted:#6c757d; } /* ==================================================================== Base / Tipografía / Utilidades ==================================================================== */ html,body{height:auto;overflow-y:auto;} body{ background-color:var(--gray-50); color:#232323; font-family:'Poppins',sans-serif; } h1,h2,h3,h6,a,input,.btn,.navbar,.footer-app{font-family:'Poppins',sans-serif;} img,a{ user-drag:none;user-select:none; -webkit-user-drag:none;-webkit-user-select:none; -moz-user-select:none;-ms-user-select:none; } /* Colores utilitarios */ .text-primario{color:#c62b3c!important;} .text-secundario{color:#ffffff!important;} .bg-primario{background:#c62b3c!important;color:#ffffff!important;} .bg-secundario{background:#163340!important;color:#fff!important;} /* Enlaces */ a{color:#c62b3c;} a:hover{color:#a01f2d;text-decoration:none;} /* Links del footer (fondo navy) → claros para que contrasten */ .seo-footer a{color:rgba(255,255,255,.85);} .seo-footer a:hover{color:#ffffff;} /* ==================================================================== Botones (unificado, sin duplicados) ==================================================================== */ .btn-warning{ background-color:#c62b3c; border-color:#c62b3c; color:#ffffff; } .btn-warning:hover, .btn-warning:focus{ filter:brightness(.95); color:#ffffff; } /* Primario forzado cuando tiene .text-white */ .btn-primary.text-white{ background-color:#c62b3c!important; border-color:#c62b3c!important; color:#ffffff!important; } .btn-primary.text-white:hover, .btn-primary.text-white:focus, .btn-primary.text-white:active{ background-color:#a01f2d!important; border-color:#a01f2d!important; color:#ffffff!important; } /* Input-group botón buscar */ .input-group .btn{background-color:#c62b3c;border:none;} /* Pills de navegación Bootstrap */ .nav-pills .nav-link.active{ background-color:#c62b3c!important; color:#ffffff!important; font-weight:600; } /* ==================================================================== Navbar ==================================================================== */ .navbar-light .navbar-nav .nav-link{color:#163340;} .navbar-light .navbar-nav .nav-link:hover{color:#c62b3c;} /* ==================================================================== Footer ==================================================================== */ .footer-links a{color:#6c757d;text-decoration:none;} .footer-links a:hover{text-decoration:underline;} .footer-app{ position:fixed;bottom:0;left:0;width:100%; background:#fff;border-top:1px solid var(--gray-400); display:flex;justify-content:space-around;align-items:center; padding:10px 0;z-index:1030; } .footer-app a{text-align:center;font-size:.85rem;color:#444;text-decoration:none;} .footer-app a i{display:block;font-size:1.25rem;margin-bottom:2px;} .footer-app a:hover,.footer-app a.active{color:#c62b3c;} /* ───────────────────────────────────────────────────────────────────── Padding-bottom global: compensa el .footer-app fijo (56px + border 2px) y el #shipBar cuando está visible (~30px más). Solo se aplica desde desktop (≥992px). En mobile las páginas que usan sticky bar propio (chequeo, carro, producto) ya manejan su propio padding y no queremos sumarlo. ─────────────────────────────────────────────────────────────────── */ @media (min-width: 992px) { body { padding-bottom: 72px; /* 56 footer + 2 border + 14 aire */ } /* Si hay shipBar visible (no display:none inline) aumentar */ body:has(#shipBar:not([style*="display:none"])) { padding-bottom: 102px; /* 72 + 30 shipBar */ } /* Fallback navegadores sin :has() — un poco más de aire por si acaso */ @supports not (selector(:has(*))) { body { padding-bottom: 102px; } } } /* Franja informativa superior */ .info-strip{background:#f5f5f5;padding:10px 0;font-size:.875rem;} .info-strip i{color:#c62b3c;} /* ==================================================================== Navegación de categorías (cinta) ==================================================================== */ .nav-categorias{ overflow-x:auto;white-space:nowrap; display:flex;align-items:center;gap:0;padding:.5rem 0; -webkit-overflow-scrolling:touch; } .nav-categorias::-webkit-scrollbar{display:none;} .nav-categorias-wrapper{position:relative;} /* Fades laterales: indican que hay más contenido para deslizar. Antes eran 20px (muy sutil, casi invisible). Ahora 48px de ancho con gradient más fuerte para que el usuario perciba claramente "hay más para ver acá". El chevron a la derecha refuerza el affordance. */ .nav-categorias-wrapper::before, .nav-categorias-wrapper::after{ content:'';position:absolute;top:0;width:48px;height:100%; z-index:2;pointer-events:none;transition:opacity .25s; } .nav-categorias-wrapper::before{left:0;background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0));} .nav-categorias-wrapper::after{right:0;background:linear-gradient(to left,#fff 30%,rgba(255,255,255,0));} /* Chevron animado a la derecha — affordance de "hay más, deslizá". Se agrega un pseudo-elemento con flecha unicode "›" al wrapper. Pulsa sutilmente cada 1.8s para llamar la atención sin ser molesto. */ .nav-categorias-wrapper{--swipe-hint-show:1;} .nav-categorias-wrapper > .nav-swipe-arrow{ position:absolute;right:8px;top:50%;transform:translateY(-50%); width:22px;height:22px;border-radius:50%; background:rgba(198, 43, 60,.85);color:#fff; display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700;line-height:1; z-index:3;pointer-events:none; animation:nav-swipe-pulse 1.8s ease-in-out infinite; opacity:var(--swipe-hint-show); } /* Cuando el usuario llegó al final del scroll, el JS pone data-scrolled-end="1" y ocultamos el chevron. */ .nav-categorias-wrapper[data-scrolled-end="1"] > .nav-swipe-arrow{opacity:0;} .nav-categorias-wrapper[data-scrolled-end="1"]::after{opacity:0;} @keyframes nav-swipe-pulse{ 0%,100%{transform:translate(0,-50%);} 50%{transform:translate(4px,-50%);} } .cat-link{ display:flex;flex-direction:column;align-items:center;justify-content:flex-start; text-decoration:none;color:#444;font-size:12px; /* Ancho compacto del item. Antes era 100px con gap:1rem entre items (sumaba ~116px por item, dejaba mucho espacio vacío con textos cortos como "Hogar" o "Útiles"). Ahora 78px sin gap entre items → más items visibles en viewport, menos scroll horizontal, apariencia más densa y profesional. Padding interno de 6px da respiración entre el contenido de items adyacentes. flex-shrink:0 evita compresión cuando hay muchos items. overflow-wrap:break-word como último recurso para palabras excesivamente largas (>15 chars) sin guión. */ flex:0 0 auto;flex-shrink:0; width:78px;min-width:78px;max-width:78px; padding:0 6px;box-sizing:border-box; text-align:center;line-height:1.15; vertical-align:top; } .cat-link img{width:34px;height:34px;object-fit:contain;margin-bottom:4px;flex-shrink:0;} .cat-link span{ display:-webkit-box;width:100%; /* Hasta 2 líneas, elipsis si excede */ -webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;text-overflow:ellipsis; line-height:1.2;font-size:11.5px; /* white-space:normal permite wrap solo en espacios naturales. overflow-wrap:anywhere se aplica únicamente cuando una palabra sola excede el ancho — fallback al final, no la opción default. */ white-space:normal; word-break:normal; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; } .cat-link:hover,.cat-link.active{color:#c62b3c;font-weight:700;} /* Pista “desliza” */ .swipe-hint{ position:absolute;top:5px;left:50%;transform:translateX(-50%); font-size:.75rem;background:#c62b3c;color:#fff; padding:2px 8px;border-radius:20px;animation:fadeOut 4s ease-in-out forwards;z-index:5; } @keyframes fadeOut{0%{opacity:1}100%{opacity:0;display:none;}} /* ==================================================================== Cards de producto / Controles (NORMALIZADO GLOBAL) ==================================================================== */ .qty-input{background:#fff;border:1px solid #ddd;} .qty-minus,.qty-plus{width:32px;height:32px;font-size:1rem;line-height:1;} /* Contenedor y body flexible (empuja CTA al final) */ .card-product,.product-card,.producto{ display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff; } .card-product .card-body,.product-card .card-body,.producto .card-body{flex:1 1 auto;} /* Imagen: preparar overlay */ .card-product .thumb, .product-card .thumb, .producto .thumb, .card-product .image, .product-card .image, .producto .image, .card .card-img, .card .card-img-top, .img,.img-wrap,.figure{position:relative;} /* Overlay “VER DETALLES” — compacto y contenido */ .card-product .btn-ver, .card-product .ver-detalles, .card-product .btn-ver-detalles, .product-card .btn-ver, .product-card .ver-detalles, .product-card .btn-ver-detalles, .producto .btn-ver, .producto .ver-detalles, .producto .btn-ver-detalles, a[title*="DETALLES"], a[title*="Detalles"]{ position:absolute;left:50%;transform:translateX(-50%); bottom:8px;padding:.35rem .6rem; font-weight:700;line-height:1; font-size:clamp(.68rem,1.6vw,.80rem); border-radius:12px; max-width:78%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden; } /* Títulos (2 líneas máximo, corte limpio) */ .card-product h3,.card-product h4,.card-product .card-title, .product-card h3,.product-card h4,.product-card .card-title, .producto .titulo,.product-title,.titulo-producto{ margin:.25rem 0 .35rem 0;font-weight:700;font-size:1rem;line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; min-height:2.5em;word-break:break-word; } /* Meta (SKU, piezas...) con ellipsis */ .card-product .sku,.card-product .ref, .product-card .sku,.product-card .ref, .producto .sku,.producto .ref,.sku,.ref,.meta{ font-size:.82rem;line-height:1.1;color:var(--text-muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* ===================== Módulo de precio (coherente) ===================== */ .price-box{ background:#fff7e0;border:1px solid #c62b3c; border-radius:.75rem;padding:.6rem .7rem; } .offer-badge{background:#c62b3c;color:#ffffff;} .old-price{color:var(--text-muted);text-decoration:line-through;display:block;margin:.125rem 0 .25rem;} .price-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:nowrap;} .price-amount{font-weight:700;font-size:1.08rem;color:#c62b3c;line-height:1;} .price-unit{color:var(--text-muted);text-align:right;white-space:nowrap;margin-left:auto;} /* Píldora por mayor (reutilizable) */ .pill-xmayor{ background:#ffffff;color:#fff;border-radius:999px; padding:2px 8px;font-size:.72rem;font-weight:700;text-transform:uppercase; letter-spacing:.2px;line-height:1;display:inline-block;white-space:nowrap; } @media (max-width:576px){ .card-product .price-row{flex-wrap:wrap;row-gap:.15rem;} .card-product .price-amount{font-size:1.02rem;} .pill-xmayor{font-size:.68rem;padding:2px 7px;} .card-product .price-unit{ flex:1 0 100%;margin-top:.12rem;text-align:left;white-space:normal; font-size:.85rem;padding-left:1.35rem; } } /* ==================================================================== Secciones / Componentes varios ==================================================================== */ .bg-header-beneficio{background:#c62b3c;} .icono-box{ width:48px;height:48px;background-color:#fff3d4;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:1.3rem; } .text-shadow{text-shadow:1px 1px 4px rgba(0,0,0,.7);} .obj-cover{object-fit:cover;} /* Controles del carrusel Bootstrap 5 */ .carousel-control-prev-icon, .carousel-control-next-icon{ background-size:100% 100%;background-repeat:no-repeat;background-position:center; width:40px;height:40px;background-color:rgba(0,0,0,.5);border-radius:50%; } .carousel-control-prev-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.5 0L4.09 1.41 6.67 4l-2.58 2.59L5.5 8l4-4-4-4z'/%3E%3C/svg%3E"); } .carousel-control-next-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.5 0L1.09 1.41 3.67 4l-2.58 2.59L2.5 8l4-4-4-4z'/%3E%3C/svg%3E"); } /* Botón hamburguesa */ .btn-hamburguesa{ background:#fff;border:none;border-radius:12px;padding:10px 12px; box-shadow:0 2px 6px rgba(0,0,0,.15); display:flex;align-items:center;justify-content:center;transition:all .3s ease-in-out; } .btn-hamburguesa i{font-size:1.4rem;color:#ffffff;transition:color .2s ease-in-out;} .btn-hamburguesa:hover{background:#c62b3c;color:#fff;} .btn-hamburguesa:hover i{color:#fff;} /* En mobile alineamos el hamburguesa con sus vecinos (buscador y carrito): misma altura 40px, mismo border-radius 10px, mismo borde fino, sin sombra, ícono violeta más chico. Antes era más alto (44px), tenía sombra y border-radius 12px → quedaba visualmente desalineado con la barra del buscador y el ícono del carrito al lado. !important + selector más específico (.btn.btn-hamburguesa en lugar de solo .btn-hamburguesa) para ganarle a las reglas de Bootstrap .btn que también aplican padding/border en este botón. */ @media(max-width:991px){ .btn.btn-hamburguesa{ width:40px!important;height:40px!important; min-width:40px!important;min-height:40px!important; padding:0!important; background:transparent!important; border:1px solid #eef0f6!important; border-radius:10px!important; box-shadow:none!important; /* Flex centrado IDÉNTICO al .nav-cart-mobile (que tiene d-flex align-items-center justify-content-center). Así ambos botones centran su ícono interno exactamente igual, eliminando cualquier diferencia de baseline/line-height heredada. */ display:flex!important; align-items:center!important; justify-content:center!important; line-height:1!important; /* Reset de form button: