/* ============================================================ MEGA OFERTAS ONLINE — Estilos Identidad: negro + rojo fuego (como el logo de Instagram) ============================================================ */ :root { --rojo: #e11d2e; --rojo-oscuro: #a3101d; --rojo-claro: #ff4d5a; --naranja: #ff7a18; --negro: #0d0d0f; --gris-900: #16161a; --gris-800: #1f1f25; --gris-700: #2a2a32; --gris-400: #9a9aa5; --gris-200: #d6d6de; --blanco: #ffffff; --verde-wa: #25d366; --radio: 14px; --sombra: 0 10px 30px rgba(0, 0, 0, 0.45); --fuente-titulos: "Montserrat", sans-serif; --fuente-texto: "Inter", sans-serif; /* Colores que NO cambian con el tema (texto sobre rojo/verde) */ --blanco-fijo: #ffffff; --fondo-header: rgba(13, 13, 15, 0.92); --texto-ahorro: #7ce8a8; color-scheme: dark; } /* ---------- Tema claro ---------- Se activa con . Las variables de :root son el tema oscuro (por defecto); aquí solo se redefinen. */ html[data-tema="claro"] { --negro: #f6f6f8; /* fondo general */ --gris-900: #ffffff; /* superficies y tarjetas */ --gris-800: #eeeef2; /* superficies secundarias */ --gris-700: #d9d9e0; /* bordes y controles */ --gris-400: #5f5f6a; /* texto secundario */ --gris-200: #2b2b33; /* texto normal */ --blanco: #17171c; /* títulos y texto fuerte */ --fondo-header: rgba(255, 255, 255, 0.92); --sombra: 0 10px 30px rgba(25, 25, 50, 0.12); --texto-ahorro: #157a3d; color-scheme: light; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { font-family: var(--fuente-texto); background: var(--negro); color: var(--gris-200); line-height: 1.6; } h1, h2, h3, h4 { font-family: var(--fuente-titulos); color: var(--blanco); } img { max-width: 100%; display: block; } .oculto { display: none !important; } /* ---------- Barra superior ---------- */ .topbar { background: linear-gradient(90deg, var(--rojo-oscuro), var(--rojo), var(--naranja)); color: var(--blanco-fijo); text-align: center; font-size: 0.8rem; font-weight: 600; padding: 6px 12px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .topbar-sep { opacity: 0.6; } /* ---------- Encabezado ---------- */ .header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 5vw; background: var(--fondo-header); backdrop-filter: blur(10px); border-bottom: 1px solid var(--gris-800); } .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; } .brand-flame { font-size: 1.6rem; } .brand-text { font-family: var(--fuente-titulos); font-weight: 900; font-size: 1.35rem; letter-spacing: 0.5px; color: var(--blanco); } .brand-text em { font-style: normal; color: var(--rojo-claro); } .nav { display: flex; gap: 22px; } .nav a { color: var(--gris-200); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: color 0.2s; } .nav a:hover { color: var(--rojo-claro); } .nav a.activo { color: var(--rojo-claro); } .header-actions { display: flex; align-items: center; gap: 14px; } /* Interruptor modo mayorista */ .switch-mayorista { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .switch-mayorista input { display: none; } .switch-track { width: 42px; height: 22px; border-radius: 999px; background: var(--gris-700); position: relative; transition: background 0.25s; flex-shrink: 0; } .switch-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--blanco-fijo); transition: transform 0.25s; } .switch-mayorista input:checked + .switch-track { background: var(--rojo); } .switch-mayorista input:checked + .switch-track .switch-thumb { transform: translateX(20px); } .switch-label { font-size: 0.85rem; font-weight: 600; white-space: nowrap; } /* El interruptor dentro del menú móvil solo existe en pantallas pequeñas */ .nav-mayorista { display: none; } .btn-cart, .btn-tema { position: relative; background: var(--gris-800); border: 1px solid var(--gris-700); color: var(--blanco); font-size: 1.15rem; padding: 8px 14px; border-radius: 12px; cursor: pointer; transition: border-color 0.2s, transform 0.15s; } .btn-cart:hover, .btn-tema:hover { border-color: var(--rojo); transform: translateY(-1px); } .cart-count { position: absolute; top: -7px; right: -7px; background: var(--rojo); color: var(--blanco-fijo); font-size: 0.72rem; font-weight: 700; min-width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } .btn-menu { display: none; background: none; border: none; color: var(--blanco); font-size: 1.5rem; cursor: pointer; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 72px 5vw 56px; background: radial-gradient(ellipse 60% 50% at 80% 10%, rgba(225, 29, 46, 0.28), transparent), radial-gradient(ellipse 50% 60% at 10% 90%, rgba(255, 122, 24, 0.14), transparent), var(--negro); overflow: hidden; } .hero-inner { max-width: 820px; } .hero-kicker { font-weight: 700; color: var(--naranja); letter-spacing: 1px; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 14px; } .hero h1 { font-size: clamp(2rem, 5.2vw, 3.6rem); font-weight: 900; line-height: 1.12; margin-bottom: 18px; } .hero h1 span { background: linear-gradient(90deg, var(--rojo-claro), var(--naranja)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { font-size: 1.08rem; color: var(--gris-400); max-width: 620px; margin-bottom: 28px; } .hero-sub strong { color: var(--gris-200); } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; } .btn { display: inline-block; padding: 13px 28px; border-radius: 12px; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; border: none; font-family: var(--fuente-titulos); transition: transform 0.15s, box-shadow 0.2s, background 0.2s; } .btn-primary { background: linear-gradient(90deg, var(--rojo), var(--rojo-claro)); color: var(--blanco-fijo); box-shadow: 0 6px 20px rgba(225, 29, 46, 0.35); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(225, 29, 46, 0.5); } .btn-outline { background: transparent; color: var(--blanco); border: 2px solid var(--gris-700); } .btn-outline:hover { border-color: var(--rojo-claro); color: var(--rojo-claro); } .btn-block { width: 100%; text-align: center; } .hero-badges { list-style: none; display: flex; gap: 10px 22px; flex-wrap: wrap; font-size: 0.9rem; font-weight: 600; color: var(--gris-400); } /* ---------- Catálogo ---------- */ .catalogo { padding: 56px 5vw; max-width: 1400px; margin: 0 auto; } .section-head { margin-bottom: 26px; } .section-head h2, .mayoristas h2, .nosotros h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; } .modo-aviso { margin-top: 10px; background: rgba(225, 29, 46, 0.12); border: 1px solid rgba(225, 29, 46, 0.4); color: var(--gris-200); padding: 10px 16px; border-radius: 10px; font-size: 0.92rem; } .filtros { display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px; } .buscador { width: 100%; max-width: 440px; padding: 12px 18px; border-radius: 12px; border: 1px solid var(--gris-700); background: var(--gris-900); color: var(--blanco); font-size: 1rem; font-family: var(--fuente-texto); } .buscador:focus { outline: 2px solid var(--rojo); border-color: transparent; } .chips { display: flex; gap: 10px; flex-wrap: wrap; } .chip { background: var(--gris-900); border: 1px solid var(--gris-700); color: var(--gris-200); padding: 8px 16px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: var(--fuente-texto); } .chip:hover { border-color: var(--rojo-claro); } .chip.activo { background: linear-gradient(90deg, var(--rojo), var(--rojo-claro)); border-color: transparent; color: var(--blanco-fijo); } .grid-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; } .card-producto { background: var(--gris-900); border: 1px solid var(--gris-800); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; } .card-producto:hover { transform: translateY(-4px); border-color: rgba(225, 29, 46, 0.55); box-shadow: var(--sombra); } .card-img { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 4.5rem; background: radial-gradient(circle at 30% 30%, rgba(225, 29, 46, 0.22), transparent 60%), radial-gradient(circle at 75% 75%, rgba(255, 122, 24, 0.12), transparent 55%), var(--gris-800); position: relative; } .card-img img { width: 100%; height: 100%; object-fit: cover; } .etiqueta-destacado { position: absolute; top: 12px; left: 12px; background: linear-gradient(90deg, var(--rojo), var(--naranja)); color: var(--blanco-fijo); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.6px; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; } .etiqueta-agotado { position: absolute; inset: 0; background: rgba(13, 13, 15, 0.72); display: flex; align-items: center; justify-content: center; color: var(--blanco-fijo); font-weight: 800; font-size: 1.1rem; letter-spacing: 1px; text-transform: uppercase; } .card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .card-cat { font-size: 0.75rem; font-weight: 700; color: var(--naranja); text-transform: uppercase; letter-spacing: 0.8px; } .card-nombre { font-size: 1.02rem; font-weight: 700; line-height: 1.3; } .card-desc { font-size: 0.85rem; color: var(--gris-400); flex: 1; } .card-precios { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } .precio-principal { font-size: 1.3rem; font-weight: 800; color: var(--blanco); font-family: var(--fuente-titulos); } .precio-secundario { font-size: 0.8rem; color: var(--gris-400); } .precio-secundario strong { color: var(--rojo-claro); } .precio-tachado { text-decoration: line-through; opacity: 0.65; } .card-acciones { display: flex; gap: 8px; margin-top: 10px; } .selector-cantidad { display: flex; align-items: center; border: 1px solid var(--gris-700); border-radius: 10px; overflow: hidden; flex-shrink: 0; } .selector-cantidad button { background: var(--gris-800); border: none; color: var(--blanco); width: 30px; height: 38px; font-size: 1rem; cursor: pointer; } .selector-cantidad button:hover { background: var(--gris-700); } .selector-cantidad input { width: 40px; text-align: center; background: var(--gris-900); border: none; color: var(--blanco); font-weight: 700; height: 38px; font-size: 0.95rem; -moz-appearance: textfield; } .selector-cantidad input::-webkit-outer-spin-button, .selector-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; } .btn-agregar { flex: 1; background: linear-gradient(90deg, var(--rojo), var(--rojo-claro)); border: none; color: var(--blanco-fijo); font-weight: 700; border-radius: 10px; cursor: pointer; font-size: 0.9rem; font-family: var(--fuente-titulos); transition: filter 0.2s, transform 0.15s; } .btn-agregar:hover { filter: brightness(1.12); transform: translateY(-1px); } .btn-agregar:disabled { background: var(--gris-700); color: var(--gris-400); cursor: not-allowed; transform: none; } .sin-resultados { text-align: center; color: var(--gris-400); padding: 40px 0; } /* ---------- Mayoristas ---------- */ .mayoristas { background: radial-gradient(ellipse 55% 65% at 15% 20%, rgba(225, 29, 46, 0.16), transparent), var(--gris-900); border-top: 1px solid var(--gris-800); border-bottom: 1px solid var(--gris-800); padding: 64px 5vw; } .mayoristas-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; } .mayoristas-info h2 { margin-bottom: 16px; line-height: 1.25; } .mayoristas-info p { color: var(--gris-400); margin-bottom: 20px; } .mayoristas-beneficios { list-style: none; display: flex; flex-direction: column; gap: 10px; font-weight: 600; } .form-cotizacion { background: var(--negro); border: 1px solid var(--gris-700); border-radius: var(--radio); padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sombra); } .form-cotizacion h3 { font-size: 1.25rem; } .form-cotizacion label { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--gris-200); } .form-cotizacion input, .form-cotizacion textarea { background: var(--gris-900); border: 1px solid var(--gris-700); border-radius: 10px; padding: 11px 14px; color: var(--blanco); font-size: 0.95rem; font-family: var(--fuente-texto); resize: vertical; } .form-cotizacion input:focus, .form-cotizacion textarea:focus { outline: 2px solid var(--rojo); border-color: transparent; } .form-nota { font-size: 0.78rem; color: var(--gris-400); } /* ---------- Nosotros ---------- */ .nosotros { padding: 64px 5vw; max-width: 1400px; margin: 0 auto; } .nosotros h2 { text-align: center; margin-bottom: 36px; } .cards-beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; } .card-beneficio { background: var(--gris-900); border: 1px solid var(--gris-800); border-radius: var(--radio); padding: 26px 22px; text-align: center; transition: transform 0.2s, border-color 0.2s; } .card-beneficio:hover { transform: translateY(-4px); border-color: rgba(225, 29, 46, 0.5); } .card-beneficio span { font-size: 2.2rem; } .card-beneficio h3 { margin: 10px 0 8px; font-size: 1.05rem; } .card-beneficio p { font-size: 0.87rem; color: var(--gris-400); } /* ---------- Footer ---------- */ .footer { background: var(--gris-900); border-top: 1px solid var(--gris-800); padding: 52px 5vw 26px; } .footer-cols { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 36px; } .footer-brand { font-size: 1.3rem; margin-bottom: 8px; } .footer-eslogan { color: var(--gris-400); font-size: 0.9rem; margin-bottom: 16px; } .footer h4 { margin-bottom: 14px; font-size: 1rem; } .footer-list { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; color: var(--gris-400); } .footer-list a { color: var(--gris-200); text-decoration: none; } .footer-list a:hover { color: var(--rojo-claro); } .footer-social { display: flex; gap: 12px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gris-800); border: 1px solid var(--gris-700); color: var(--blanco); text-decoration: none; font-size: 1.1rem; transition: border-color 0.2s, transform 0.15s; } .footer-social a:hover { border-color: var(--rojo); transform: translateY(-2px); } .footer-copy { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--gris-800); color: var(--gris-400); font-size: 0.82rem; } /* ---------- WhatsApp flotante ---------- */ .whatsapp-fab { position: fixed; bottom: 22px; right: 22px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: var(--verde-wa); color: var(--blanco-fijo); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45); transition: transform 0.2s; } .whatsapp-fab:hover { transform: scale(1.08); } /* ---------- Carrito (drawer) ---------- */ .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 70; backdrop-filter: blur(2px); } .drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(420px, 100vw); background: var(--gris-900); border-left: 1px solid var(--gris-700); z-index: 80; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s ease; } .drawer.abierto { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--gris-800); } .drawer-head h3 { font-size: 1.15rem; } .drawer-close { background: none; border: none; color: var(--gris-400); font-size: 1.3rem; cursor: pointer; } .drawer-close:hover { color: var(--blanco); } .drawer-modo { padding: 10px 22px; font-size: 0.82rem; color: var(--naranja); font-weight: 600; border-bottom: 1px solid var(--gris-800); } .drawer-items { flex: 1; overflow-y: auto; padding: 14px 22px; display: flex; flex-direction: column; gap: 14px; } .drawer-vacio { color: var(--gris-400); text-align: center; margin-top: 40px; font-size: 0.95rem; } .item-carrito { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; background: var(--gris-800); border-radius: 12px; padding: 10px 12px; } .item-emoji { width: 52px; height: 52px; border-radius: 10px; background: var(--gris-700); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; overflow: hidden; } .item-emoji img { width: 100%; height: 100%; object-fit: cover; } .item-info h4 { font-size: 0.88rem; line-height: 1.25; margin-bottom: 3px; } .item-precio { font-size: 0.8rem; color: var(--gris-400); } .item-precio strong { color: var(--rojo-claro); } .item-derecha { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .item-cantidad { display: flex; align-items: center; gap: 8px; } .item-cantidad button { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--gris-700); background: var(--gris-900); color: var(--blanco); cursor: pointer; font-size: 0.85rem; line-height: 1; } .item-cantidad button:hover { border-color: var(--rojo); } .item-cantidad span { font-weight: 700; min-width: 20px; text-align: center; font-size: 0.9rem; } .item-quitar { background: none; border: none; color: var(--gris-400); font-size: 0.75rem; cursor: pointer; text-decoration: underline; } .item-quitar:hover { color: var(--rojo-claro); } .drawer-foot { border-top: 1px solid var(--gris-800); padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 12px; } .drawer-ahorro { background: rgba(37, 211, 102, 0.12); border: 1px solid rgba(37, 211, 102, 0.35); color: var(--texto-ahorro); font-size: 0.82rem; padding: 8px 12px; border-radius: 10px; } .drawer-total { display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem; } .drawer-total strong { font-size: 1.4rem; font-family: var(--fuente-titulos); } .drawer-campo { display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; font-weight: 600; } .drawer-campo input { background: var(--gris-800); border: 1px solid var(--gris-700); border-radius: 10px; padding: 10px 12px; color: var(--blanco); font-size: 0.92rem; font-family: var(--fuente-texto); } .drawer-campo input:focus { outline: 2px solid var(--rojo); border-color: transparent; } .btn-vaciar { background: none; border: none; color: var(--gris-400); font-size: 0.82rem; cursor: pointer; text-decoration: underline; } .btn-vaciar:hover { color: var(--rojo-claro); } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: 96px; right: 22px; z-index: 90; background: var(--gris-800); border: 1px solid var(--rojo); color: var(--blanco); padding: 12px 18px; border-radius: 12px; font-size: 0.9rem; font-weight: 600; box-shadow: var(--sombra); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s, transform 0.25s; max-width: 300px; } .toast.visible { opacity: 1; transform: translateY(0); } /* ---------- Páginas internas ---------- */ .seccion { padding: 56px 5vw; max-width: 1400px; margin: 0 auto; } .page-head { padding: 44px 5vw 34px; background: radial-gradient(ellipse 60% 90% at 75% 0%, rgba(225, 29, 46, 0.18), transparent), var(--gris-900); border-bottom: 1px solid var(--gris-800); } .page-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 900; } .page-head > p { color: var(--gris-400); max-width: 680px; margin-top: 8px; } .page-head .modo-aviso { max-width: 680px; } .section-head.con-enlace { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; } .enlace-ver-todo { color: var(--rojo-claro); text-decoration: none; font-weight: 700; font-size: 0.92rem; } .enlace-ver-todo:hover { text-decoration: underline; } /* Barra de filtros del catálogo */ .toolbar-filtros { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; background: var(--gris-900); border: 1px solid var(--gris-800); border-radius: var(--radio); padding: 14px 16px; } .filtro-campo { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; font-weight: 600; color: var(--gris-400); } .filtro-campo select, .filtro-campo input { background: var(--gris-800); border: 1px solid var(--gris-700); border-radius: 10px; padding: 9px 12px; color: var(--blanco); font-size: 0.9rem; font-family: var(--fuente-texto); min-width: 130px; } .filtro-campo select:focus, .filtro-campo input:focus { outline: 2px solid var(--rojo); border-color: transparent; } .check-filtro { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; cursor: pointer; padding-bottom: 10px; } .check-filtro input { accent-color: var(--rojo); width: 16px; height: 16px; } .toolbar-filtros .chip { margin-bottom: 4px; } .contador { margin-left: auto; color: var(--gris-400); font-size: 0.85rem; font-weight: 600; padding-bottom: 10px; } /* Categorías del inicio */ .grid-categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; } .card-categoria { background: var(--gris-900); border: 1px solid var(--gris-800); border-radius: var(--radio); padding: 22px 16px; text-align: center; text-decoration: none; color: var(--gris-200); display: flex; flex-direction: column; gap: 4px; transition: transform 0.2s, border-color 0.2s; } .card-categoria:hover { transform: translateY(-4px); border-color: rgba(225, 29, 46, 0.5); } .cat-emoji { font-size: 2rem; } .card-categoria strong { color: var(--blanco); font-family: var(--fuente-titulos); } .card-categoria small { color: var(--gris-400); } /* Banner mayoristas del inicio */ .banner-mayoristas { margin: 0 5vw 64px; max-width: 1400px; border-radius: var(--radio); padding: 40px 5%; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: linear-gradient(100deg, rgba(225, 29, 46, 0.25), rgba(255, 122, 24, 0.12)), var(--gris-900); border: 1px solid rgba(225, 29, 46, 0.4); } @media (min-width: 1560px) { .banner-mayoristas { margin: 0 auto 64px; } } .banner-mayoristas h2 { font-size: 1.5rem; margin-bottom: 6px; } .banner-mayoristas p { color: var(--gris-400); } /* Página mayoristas: pasos y preguntas frecuentes */ .pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 22px 0; } .paso { background: var(--negro); border: 1px solid var(--gris-800); border-radius: var(--radio); padding: 20px; } .paso .numero { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 800; background: linear-gradient(90deg, var(--rojo), var(--naranja)); color: var(--blanco-fijo); margin-bottom: 10px; font-family: var(--fuente-titulos); } .paso h3 { font-size: 0.98rem; margin-bottom: 6px; } .paso p { font-size: 0.85rem; color: var(--gris-400); margin: 0; } .faq { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; } .faq details { background: var(--negro); border: 1px solid var(--gris-800); border-radius: 12px; padding: 14px 18px; } .faq summary { cursor: pointer; font-weight: 700; color: var(--blanco); font-size: 0.95rem; } .faq p { margin: 8px 0 0; color: var(--gris-400); font-size: 0.9rem; } /* Página contacto */ .grid-contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .card-contacto { background: var(--gris-900); border: 1px solid var(--gris-800); border-radius: var(--radio); padding: 24px; } .card-contacto .icono { font-size: 1.8rem; } .card-contacto h3 { margin: 8px 0 6px; font-size: 1.02rem; } .card-contacto p { color: var(--gris-400); font-size: 0.9rem; margin-bottom: 4px; } .card-contacto a { color: var(--gris-200); text-decoration: none; } .card-contacto a:hover { color: var(--rojo-claro); } .btn-wa { display: inline-block; margin-top: 10px; background: var(--verde-wa); color: #fff !important; font-weight: 700; padding: 10px 18px; border-radius: 10px; text-decoration: none; font-family: var(--fuente-titulos); font-size: 0.9rem; } .btn-wa:hover { filter: brightness(1.1); } .telefono-entero { white-space: nowrap; } .mapa-embed { margin-top: 26px; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--gris-800); } .mapa-embed iframe { width: 100%; height: 340px; border: 0; display: block; } /* Carrito: select de método de pago */ .drawer-campo select { background: var(--gris-800); border: 1px solid var(--gris-700); border-radius: 10px; padding: 10px 12px; color: var(--blanco); font-size: 0.92rem; font-family: var(--fuente-texto); } .drawer-campo select:focus { outline: 2px solid var(--rojo); border-color: transparent; } /* ---------- Etiquetas y precios especiales ---------- */ .etiqueta-oferta { background: linear-gradient(90deg, #15803d, #22c55e); } .etiqueta-nueva { background: linear-gradient(90deg, #1d4ed8, #3b82f6); } .etiqueta-gris { background: var(--gris-700); color: var(--gris-200); } .precio-antes { color: var(--gris-400); font-size: 0.85rem; font-weight: 600; margin-left: 6px; } .card-nombre a { color: inherit; text-decoration: none; } .card-nombre a:hover { color: var(--rojo-claro); } a.card-img { text-decoration: none; color: inherit; } /* ---------- Página de detalle de producto ---------- */ .migas { margin-bottom: 20px; } .migas a { color: var(--gris-400); text-decoration: none; font-weight: 600; font-size: 0.9rem; } .migas a:hover { color: var(--rojo-claro); } .producto-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; margin-bottom: 56px; } .galeria-principal { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radio); border: 1px solid var(--gris-800); overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 30%, rgba(225, 29, 46, 0.22), transparent 60%), radial-gradient(circle at 75% 75%, rgba(255, 122, 24, 0.12), transparent 55%), var(--gris-800); } .galeria-principal img { width: 100%; height: 100%; object-fit: cover; } .emoji-grande { font-size: 8rem; } .miniaturas { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .miniatura { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 2px solid var(--gris-700); background: var(--gris-800); cursor: pointer; padding: 0; } .miniatura.activa { border-color: var(--rojo); } .miniatura img { width: 100%; height: 100%; object-fit: cover; } .producto-info h1 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin: 6px 0 12px; line-height: 1.25; } .producto-desc { color: var(--gris-400); margin-bottom: 14px; } .detalle-lista { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; font-size: 0.92rem; } .precio-caja { background: var(--gris-900); border: 1px solid var(--gris-800); border-radius: var(--radio); padding: 16px 18px; margin-bottom: 18px; } .precio-detalle { font-size: 2rem; font-weight: 900; font-family: var(--fuente-titulos); color: var(--blanco); } .precio-nota { color: var(--gris-400); font-size: 0.85rem; margin-top: 4px; } .producto-acciones { display: flex; gap: 12px; margin-bottom: 14px; } .btn-detalle { flex: 1; border: none; } .producto-secundarias { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; } .producto-secundarias .btn-wa { margin-top: 0; } .btn-compartir { background: var(--gris-800); border: 1px solid var(--gris-700); color: var(--gris-200); border-radius: 10px; padding: 10px 18px; cursor: pointer; font-weight: 700; font-family: var(--fuente-titulos); font-size: 0.9rem; } .btn-compartir:hover { border-color: var(--rojo); } .producto-garantias { list-style: none; display: flex; flex-direction: column; gap: 8px; color: var(--gris-400); font-size: 0.9rem; border-top: 1px solid var(--gris-800); padding-top: 16px; } .producto-no-encontrado { text-align: center; padding: 60px 0; display: flex; flex-direction: column; gap: 14px; align-items: center; } /* ---------- Impresión (botón "Catálogo PDF") ---------- */ @media print { .topbar, .header, .filtros, .footer, .whatsapp-fab, .drawer, .overlay, .toast, .sin-resultados, .card-acciones, .modo-aviso { display: none !important; } body { background: #fff; color: #000; } .page-head { background: none; border: none; padding: 0 0 12px; } .page-head h1, .card-nombre, .card-nombre a, .precio-principal { color: #000; } .page-head > p, .card-desc, .precio-secundario, .card-cat { color: #444; } .seccion { padding: 0; max-width: none; } .grid-productos { grid-template-columns: repeat(3, 1fr); gap: 12px; } .card-producto { border: 1px solid #ddd; background: #fff; box-shadow: none; break-inside: avoid; } .card-img { background: #f4f4f5; } .etiqueta-destacado { display: none; } } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .mayoristas-inner { grid-template-columns: 1fr; } .producto-grid { grid-template-columns: 1fr; gap: 26px; } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--gris-900); border-bottom: 1px solid var(--gris-800); flex-direction: column; padding: 16px 5vw; gap: 14px; } .nav.abierto { display: flex; } .btn-menu { display: block; } /* En celular el interruptor vive dentro del menú ☰, con su texto completo */ .header-actions .switch-mayorista { display: none; } .nav-mayorista { display: flex; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--gris-800); } .nav-mayorista .switch-label { white-space: normal; } } @media (max-width: 760px) { .topbar-3 { display: none; } } @media (max-width: 560px) { .topbar { font-size: 0.78rem; gap: 6px; } .topbar-2 { display: none; } /* Encabezado compacto: todo debe caber en 360-400px de ancho */ .header { padding: 10px 3vw; gap: 8px; } .brand { gap: 5px; } .brand-flame { font-size: 1.25rem; } .brand-text { font-size: 1.05rem; } .header-actions { gap: 8px; } .btn-cart, .btn-tema { padding: 6px 9px; font-size: 1rem; border-radius: 10px; } .btn-menu { font-size: 1.3rem; } } /* Celulares pequeños (320-400px) */ @media (max-width: 400px) { .header { padding: 10px 2vw; gap: 6px; } .header-actions { gap: 6px; } .switch-track { width: 36px; height: 20px; } .switch-thumb { width: 14px; height: 14px; } .switch-mayorista input:checked + .switch-track .switch-thumb { transform: translateX(16px); } .brand-text { font-size: 0.98rem; } .brand-flame { font-size: 1.15rem; } .btn-cart, .btn-tema { padding: 5px 8px; font-size: 0.92rem; } .btn-menu { font-size: 1.2rem; } .hero-cta .btn { flex: 1 1 100%; text-align: center; } } @media (max-width: 360px) { .brand-flame { display: none; } .hero { padding: 48px 5vw 40px; } .grid-productos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .card-img { font-size: 3.2rem; } .card-body { padding: 12px; } .card-acciones { flex-direction: column; } .selector-cantidad { justify-content: center; } .btn-agregar { padding: 10px; } .form-cotizacion { padding: 20px; } .contador { margin-left: 0; } .filtro-campo { flex: 1 1 45%; } .filtro-campo select, .filtro-campo input { min-width: 0; width: 100%; } }