/* ===================================================================== TiendaGamer · Interfaz de vidrio (glassmorphism) --------------------------------------------------------------------- Tema CLARO por defecto: fondos blancos y lavanda muy suaves, morado eléctrico como color de marca y cian como acento. El tema oscuro es opcional y se activa con data-theme="dark" en . Los colores de marca (--brand y --brand-2) los inyecta cada página desde Configuración, así que cada tienda pone el suyo sin tocar el CSS. ===================================================================== */ /* ---------- Variables: tema CLARO (el de origen) ---------- */ :root { /* Marca (las sobrescribe la página con el color guardado en la BD) */ --brand: #7C3AED; --brand-2: #06B6D4; --brand-deep: #5B21B6; --brand-rgb: 124, 58, 237; --brand-2-rgb: 6, 182, 212; /* Fondos: blanco con lavanda muy tenue */ --bg-1: #FBFAFF; --bg-2: #FFFFFF; --bg-3: #F1EEFF; /* Texto */ --ink: #1E1B34; --ink-soft: #6B6890; --ink-faint: #9C99B8; /* Vidrio */ --glass-bg: rgba(255, 255, 255, .72); --glass-bg-2: rgba(255, 255, 255, .92); --glass-brd: rgba(124, 58, 237, .14); --glass-shadow: 0 10px 32px rgba(76, 29, 149, .09); --blur: 16px; /* Estados */ --verde: #059669; --verde-bg: rgba(5, 150, 105, .10); --rojo: #DC2626; --rojo-bg: rgba(220, 38, 38, .10); --ambar: #D97706; --ambar-bg: rgba(217, 119, 6, .12); --azul: #2563EB; --azul-bg: rgba(37, 99, 235, .10); --morado: var(--brand); --morado-bg: rgba(124, 58, 237, .10); --gris: #64748B; --gris-bg: rgba(100, 116, 139, .10); --radio: 18px; --radio-sm: 12px; --glow: 0 0 0 1px rgba(var(--brand-rgb), .30), 0 18px 44px rgba(var(--brand-rgb), .22); } /* ---------- Variables: tema OSCURO (opcional) ---------- */ :root[data-theme="dark"] { --bg-1: #0C0A1A; --bg-2: #12102A; --bg-3: #080716; --ink: #ECEAFB; --ink-soft: #A5A0C8; --ink-faint: #6F6B94; --glass-bg: rgba(255, 255, 255, .055); --glass-bg-2: rgba(255, 255, 255, .10); --glass-brd: rgba(255, 255, 255, .11); --glass-shadow: 0 16px 42px rgba(0, 0, 0, .55); --glow: 0 0 0 1px rgba(var(--brand-rgb), .55), 0 22px 52px rgba(var(--brand-rgb), .40); --verde-bg: rgba(5, 150, 105, .18); --rojo-bg: rgba(220, 38, 38, .18); --ambar-bg: rgba(217, 119, 6, .20); --azul-bg: rgba(37, 99, 235, .20); --morado-bg: rgba(124, 58, 237, .22); --gris-bg: rgba(148, 163, 184, .16); } /* ===================================================================== BASE ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* Cuando un elemento lleva el atributo hidden debe desaparecer, punto. El navegador le pone display:none, pero cualquier regla nuestra de display (flex, grid, block) le gana y el elemento se queda visible. Por eso el aviso de cookies no se iba al pulsar "Entendido". */ [hidden] { display: none !important; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; color: var(--ink); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; background: linear-gradient(150deg, var(--bg-1), var(--bg-2) 45%, var(--bg-3)); background-attachment: fixed; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Manchas de color muy tenues que flotan detrás de todo. Los degradados radiales ya salen difuminados, así que NO se les aplica filter: blur(). Un desenfoque sobre un elemento de pantalla completa es carísimo para la tarjeta gráfica y hace que la página vaya a tirones. */ body::before { content: ""; position: fixed; inset: -10vmax; z-index: -2; pointer-events: none; background: radial-gradient(38vmax 38vmax at 14% 18%, rgba(var(--brand-rgb), .16), transparent 62%), radial-gradient(34vmax 34vmax at 86% 12%, rgba(var(--brand-2-rgb), .13), transparent 62%), radial-gradient(40vmax 40vmax at 74% 86%, rgba(99, 102, 241, .13), transparent 64%); animation: flotar 30s ease-in-out infinite alternate; will-change: transform; } @keyframes flotar { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2%, -2.5%, 0) scale(1.07); } 100% { transform: translate3d(-2%, 2%, 0) scale(1.03); } } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-deep); } :root[data-theme="dark"] a:hover { color: var(--brand-2); } img { max-width: 100%; height: auto; } ::selection { background: rgba(var(--brand-rgb), .22); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; } /* Contenedor central */ .tg-contenedor { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 18px; } /* ===================================================================== TARJETA DE VIDRIO (la pieza base de toda la interfaz) ===================================================================== */ /* Nota de rendimiento: backdrop-filter se reserva para las superficies que se superponen a otro contenido (encabezado, panel del carrito, modales). Las tarjetas del catálogo pueden ser decenas en pantalla; ahí el efecto de vidrio se consigue con transparencia y borde luminoso, que cuesta una fracción y se ve igual sobre el fondo degradado. */ .glass-card { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: var(--radio); box-shadow: var(--glass-shadow); overflow: hidden; transition: transform .32s cubic-bezier(.2, .8, .3, 1), box-shadow .32s ease, border-color .32s ease; } /* Vidrio "de verdad" sólo donde hay algo detrás que valga la pena difuminar. */ .glass-blur { backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); } /* Borde de luz que recorre la tarjeta al pasar el cursor. */ .glass-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, transparent 20%, rgba(var(--brand-rgb), .55) 42%, rgba(var(--brand-2-rgb), .60) 52%, transparent 74%); background-size: 260% 100%; background-position: 130% 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .glass-card:hover::after { opacity: 1; animation: recorrerBorde 1.5s ease forwards; } @keyframes recorrerBorde { from { background-position: 130% 0; } to { background-position: -40% 0; } } .glass-card:hover { transform: translateY(-6px); box-shadow: var(--glow); border-color: rgba(var(--brand-rgb), .30); } /* Entrada escalonada al aparecer en pantalla (la activa glass.js). */ .fx-on .glass-card, .fx-on .fx-entra { opacity: 0; transform: translateY(26px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .3, 1), box-shadow .32s ease, border-color .32s ease; } .fx-on .glass-card.vista, .fx-on .fx-entra.vista { opacity: 1; transform: none; } /* Inclinación 3D con el cursor (sólo escritorio, la aplica glass.js). */ .glass-tilt { transform-style: preserve-3d; will-change: transform; } /* ===================================================================== ENCABEZADO ===================================================================== */ .tg-header { position: sticky; top: 0; z-index: 1030; background: var(--glass-bg-2); border-bottom: 1px solid var(--glass-brd); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); } .tg-header-in { display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 10px 18px; max-width: 1240px; margin: 0 auto; } .tg-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.18rem; letter-spacing: -.5px; color: var(--ink); white-space: nowrap; } .tg-logo:hover { color: var(--ink); } .tg-logo img { height: 38px; width: auto; } .tg-logo .marca { background: linear-gradient(100deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tg-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .tg-nav a { padding: 9px 14px; border-radius: 11px; font-size: .92rem; font-weight: 600; color: var(--ink-soft); transition: background .2s, color .2s; } .tg-nav a:hover, .tg-nav a.activo { background: rgba(var(--brand-rgb), .10); color: var(--brand); } .tg-menu-btn { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--ink); cursor: pointer; padding: 6px; } /* Botón del carrito con su contador */ .tg-carrito-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; font-weight: 600; font-size: .92rem; cursor: pointer; box-shadow: 0 6px 18px rgba(var(--brand-rgb), .34); transition: transform .18s, box-shadow .18s; } .tg-carrito-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--brand-rgb), .46); color: #fff; } .tg-carrito-btn .cuenta { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--brand-2); color: #04222b; font-size: .76rem; font-weight: 800; } .cuenta.pop { animation: rebote .45s cubic-bezier(.3, 1.6, .5, 1); } @keyframes rebote { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } } /* ===================================================================== BOTONES ===================================================================== */ .btn-tg, .btn-tg-2, .btn-tg-fantasma { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border: 0; border-radius: var(--radio-sm); font-family: inherit; font-weight: 600; font-size: .93rem; line-height: 1.2; cursor: pointer; text-align: center; position: relative; overflow: hidden; transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s, background .2s; } .btn-tg { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; box-shadow: 0 6px 18px rgba(var(--brand-rgb), .32); } .btn-tg:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--brand-rgb), .44); } .btn-tg-2 { background: linear-gradient(135deg, var(--brand-2), #0891B2); color: #04222b; box-shadow: 0 6px 18px rgba(var(--brand-2-rgb), .32); } .btn-tg-2:hover { color: #04222b; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--brand-2-rgb), .44); } .btn-tg-fantasma { background: transparent; color: var(--brand); border: 1px solid var(--glass-brd); } .btn-tg-fantasma:hover { background: rgba(var(--brand-rgb), .09); color: var(--brand); transform: translateY(-2px); } /* Destello que cruza el botón al pasar el cursor. */ .btn-tg::before, .btn-tg-2::before { content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-18deg); transition: left .55s ease; } .btn-tg:hover::before, .btn-tg-2:hover::before { left: 130%; } .btn-tg:active, .btn-tg-2:active, .btn-tg-fantasma:active { transform: translateY(0) scale(.98); } .btn-tg[disabled], .btn-tg-2[disabled] { opacity: .5; cursor: not-allowed; transform: none; } .btn-sm { padding: 7px 13px; font-size: .84rem; } .btn-block { width: 100%; } /* Botón de WhatsApp */ .btn-wa { background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; box-shadow: 0 6px 18px rgba(37, 211, 102, .32); } .btn-wa:hover { color: #fff; box-shadow: 0 12px 26px rgba(37, 211, 102, .44); } /* ===================================================================== TARJETA DE PRODUCTO ===================================================================== */ .rejilla { display: grid; gap: 20px; /* Dos por renglón desde el celular: con una sola, recorrer una categoría de 167 gabinetes se vuelve interminable. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 576px) { .rejilla { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (min-width: 992px) { .rejilla { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .rejilla { grid-template-columns: repeat(4, 1fr); } } .card-prod { display: flex; flex-direction: column; height: 100%; } /* Marco CUADRADO: las fotos de catálogo de los mayoristas casi siempre lo son. En un marco 4:3 una foto cuadrada sólo llenaba el 59% y se veía pequeña, con franjas blancas a los lados. */ .card-prod .img-wrap { position: relative; aspect-ratio: 1 / 1; background: #fff; display: block; overflow: hidden; } /* La imagen va posicionada para que NO influya en el alto del marco: así todas las tarjetas quedan parejas, venga la foto como venga. */ .card-prod .img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .6s cubic-bezier(.2, .8, .3, 1); } :root[data-theme="dark"] .card-prod .img-wrap { background: #f4f2fa; } .card-prod:hover .img-wrap img { transform: scale(1.07); } .card-prod .img-wrap .sin-img { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.2rem; color: rgba(var(--brand-rgb), .28); background: linear-gradient(160deg, rgba(var(--brand-rgb), .06), rgba(var(--brand-2-rgb), .05)); } .card-prod .cuerpo { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; gap: 7px; } .card-prod .marca { font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); } .card-prod .titulo { font-size: .92rem; font-weight: 600; line-height: 1.4; color: var(--ink); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card-prod .precio { margin-top: auto; padding-top: 8px; font-size: 1.42rem; font-weight: 800; letter-spacing: -.6px; color: var(--ink); } .card-prod .precio small { font-size: .62rem; font-weight: 700; color: var(--ink-faint); } /* Etiquetas de la esquina */ .etiqueta { position: absolute; top: 11px; left: 11px; z-index: 2; padding: 4px 10px; border-radius: 20px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(6px); } .etiqueta.oferta { background: linear-gradient(135deg, #DB2777, #DC2626); color: #fff; } .etiqueta.agotado { background: rgba(100, 116, 139, .90); color: #fff; } .etiqueta.nuevo { background: linear-gradient(135deg, var(--brand-2), #0891B2); color: #04222b; } .chip-stock { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; color: var(--verde); } .chip-stock.bajo { color: var(--ambar); } .chip-stock.cero { color: var(--ink-faint); } /* ===================================================================== TARJETA DE PC ARMADA ===================================================================== */ .pc-card { display: flex; flex-direction: column; height: 100%; } .pc-card.es-destacada { border-color: rgba(var(--brand-rgb), .34); } .pc-ribbon { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 5px 12px; border-radius: 20px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(var(--brand-rgb), .40); } .pc-img { aspect-ratio: 4 / 3; display: grid; place-items: center; background: linear-gradient(160deg, rgba(var(--brand-rgb), .07), rgba(var(--brand-2-rgb), .05)); overflow: hidden; } .pc-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.2,.8,.3,1); } .pc-card:hover .pc-img img { transform: scale(1.07); } .pc-img i { font-size: 3.6rem; color: rgba(var(--brand-rgb), .28); } .pc-body { display: flex; flex-direction: column; flex: 1; padding: 16px; gap: 10px; } .pc-serie { font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-2); } :root[data-theme="light"] .pc-serie, :root:not([data-theme="dark"]) .pc-serie { color: #0E7490; } .pc-nombre { font-size: 1.02rem; font-weight: 700; line-height: 1.35; margin: 0; } .pc-nombre a { color: var(--ink); } .pc-nombre a:hover { color: var(--brand); } .pc-specs { display: flex; flex-direction: column; gap: 5px; } .pc-spec { display: grid; grid-template-columns: 20px 96px 1fr; align-items: baseline; gap: 7px; font-size: .82rem; } .pc-spec i { color: var(--brand); font-size: .95rem; } .pc-spec .k { color: var(--ink-faint); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; } .pc-spec b { color: var(--ink); font-weight: 600; } .pc-precio-row { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-top: 1px solid var(--glass-brd); } .pc-mxn { font-size: .64rem; font-weight: 800; letter-spacing: .1em; color: var(--ink-faint); } .pc-precio { font-size: 1.6rem; font-weight: 800; letter-spacing: -.8px; color: var(--ink); line-height: 1; } .pc-antes { font-size: .82rem; color: var(--ink-faint); text-decoration: line-through; } .btn-comprar { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: var(--radio-sm); background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; font-weight: 700; font-size: .87rem; box-shadow: 0 6px 16px rgba(37, 211, 102, .30); transition: transform .18s, box-shadow .18s; white-space: nowrap; } .btn-comprar:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,211,102,.42); } .pc-acciones { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pc-vermas { font-size: .84rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .btn-share-ico { background: transparent; border: 1px solid var(--glass-brd); width: 34px; height: 34px; border-radius: 10px; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s, transform .2s; } .btn-share-ico:hover { background: rgba(var(--brand-rgb), .10); color: var(--brand); transform: translateY(-2px); } /* ===================================================================== HERO ===================================================================== */ /* ---------- Hero centrado, con video o imagen de fondo ---------- */ .tg-hero { position: relative; padding: 60px 0 52px; overflow: hidden; text-align: center; } /* Con video o imagen el hero crece y el texto va en claro sobre el fondo. */ .tg-hero.con-video, .tg-hero:has(.hero-imagen) { min-height: var(--hero-alto, 70vh); display: grid; place-items: center; padding: 72px 0; } .hero-imagen, .hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hero-imagen { background-size: cover; background-position: center; } /* El iframe se agranda para tapar todo el marco sin deformarse: se centra y se le da el tamaño que cubra los 16:9. */ .hero-video iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; /* 16:9 respecto al ancho */ min-width: 177.78vh; min-height: 100vh; /* 16:9 respecto al alto */ transform: translate(-50%, -50%); border: 0; pointer-events: none; } /* Capa que oscurece el fondo para que el texto se lea siempre. */ .hero-velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .tg-hero.con-video .hero-velo, .tg-hero:has(.hero-imagen) .hero-velo { background: linear-gradient(180deg, rgba(8,6,20,.55), rgba(8,6,20,calc(var(--hero-veo, .55) + .12))), radial-gradient(60% 60% at 50% 50%, transparent, rgba(8,6,20,.45)); } .hero-contenido { position: relative; z-index: 2; } .tg-tagline { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; } .tg-hero h1 { font-size: clamp(2rem, 5.6vw, 3.6rem); font-weight: 900; letter-spacing: -1.6px; line-height: 1.06; margin: 0 0 14px; } .tg-hero h1 .destacado { background: linear-gradient(100deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tg-hero p.sub { font-size: 1.06rem; color: var(--ink-soft); max-width: 58ch; margin: 0 auto 24px; line-height: 1.65; } .tg-hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* Sobre el fondo oscuro, el texto va en blanco pase lo que pase. */ .tg-hero.con-video .hero-contenido, .tg-hero:has(.hero-imagen) .hero-contenido { color: #fff; } .tg-hero.con-video h1, .tg-hero:has(.hero-imagen) h1 { color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,.55); } .tg-hero.con-video p.sub, .tg-hero:has(.hero-imagen) p.sub { color: rgba(255,255,255,.90); text-shadow: 0 1px 14px rgba(0,0,0,.5); } .tg-hero.con-video .tg-tagline, .tg-hero:has(.hero-imagen) .tg-tagline { color: var(--brand-2); } .tg-hero.con-video .tg-chip, .tg-hero:has(.hero-imagen) .tg-chip { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.24); color: #fff; backdrop-filter: blur(8px); } .tg-hero.con-video .btn-tg-fantasma, .tg-hero:has(.hero-imagen) .btn-tg-fantasma { color: #fff; border-color: rgba(255,255,255,.45); } .tg-hero.con-video .btn-tg-fantasma:hover, .tg-hero:has(.hero-imagen) .btn-tg-fantasma:hover { background: rgba(255,255,255,.15); } .tg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; justify-content: center; } .tg-chip { padding: 6px 14px; border-radius: 20px; background: var(--glass-bg); border: 1px solid var(--glass-brd); font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); backdrop-filter: blur(8px); } /* ---------- Carrusel de banners ---------- */ .tg-banners { padding: 26px 0 6px; } .banner-marco { position: relative; border-radius: var(--radio); overflow: hidden; box-shadow: var(--glass-shadow); background: rgba(var(--brand-rgb), .05); } /* Marco de proporción fija (la medida recomendada, 1920×600). Así la sección no cambia de alto al rotar aunque los banners tengan medidas distintas, y la imagen nunca se recorta. */ .banner-pista { position: relative; aspect-ratio: 1920 / 600; } .banner-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease; } .banner-slide.activo { opacity: 1; visibility: visible; } .banner-slide img { width: 100%; height: 100%; object-fit: contain; display: block; } a.banner-slide { cursor: pointer; } .banner-flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.85); color: #1E1B34; display: grid; place-items: center; font-size: 1.2rem; box-shadow: 0 4px 16px rgba(0,0,0,.20); opacity: 0; transition: opacity .25s, background .2s, transform .2s; } .banner-marco:hover .banner-flecha { opacity: 1; } .banner-flecha:hover { background: #fff; } .banner-flecha.izq { left: 12px; } .banner-flecha.der { right: 12px; } /* En pantallas táctiles las flechas siempre se ven: no hay "pasar el cursor". */ @media (hover: none) { .banner-flecha { opacity: .9; width: 36px; height: 36px; } } .banner-puntos { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; display: flex; justify-content: center; gap: 7px; } .banner-punto { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.55); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: width .25s, background .25s; } .banner-punto.activo { width: 26px; border-radius: 5px; background: #fff; } /* PC del mes: banda a todo el ancho */ .pc-mes { position: relative; margin: 8px 0 40px; padding: 34px; border-radius: 26px; background: linear-gradient(125deg, rgba(var(--brand-rgb), .12), rgba(var(--brand-2-rgb), .10)); border: 1px solid var(--glass-brd); backdrop-filter: blur(18px); overflow: hidden; } .pc-mes::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(28vmax 28vmax at 88% 20%, rgba(var(--brand-2-rgb), .20), transparent 62%); } .pc-mes-in { position: relative; display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; } @media (min-width: 900px) { .pc-mes-in { grid-template-columns: .9fr 1.1fr; } } .pc-mes-sello { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 20px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; } .pc-mes h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 900; letter-spacing: -1px; margin: 0 0 14px; } .pc-mes .foto { border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.5); } .pc-mes .foto img { width: 100%; display: block; } /* ===================================================================== FILTROS Y BUSCADOR ===================================================================== */ .tg-filtros { /* El encabezado ahora lleva dos renglones, así que la barra se pega justo debajo de él y no queda medio tapada. */ position: sticky; top: 108px; z-index: 1020; padding: 14px 0; background: linear-gradient(to bottom, var(--bg-1) 70%, transparent); } .tg-filtros-caja { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; background: var(--glass-bg-2); border: 1px solid var(--glass-brd); border-radius: var(--radio); backdrop-filter: blur(16px); box-shadow: var(--glass-shadow); } .tg-buscador { position: relative; flex: 1 1 240px; } .tg-buscador i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; } .campo, .tg-buscador input, select.campo, textarea.campo { width: 100%; padding: 10px 14px; border: 1px solid var(--glass-brd); border-radius: var(--radio-sm); background: var(--glass-bg-2); color: var(--ink); font-family: inherit; font-size: .92rem; transition: border-color .2s, box-shadow .2s; } .tg-buscador input { padding-left: 38px; } .campo:focus, .tg-buscador input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .16); } .campo::placeholder { color: var(--ink-faint); } label.etq { display: block; font-size: .8rem; font-weight: 700; margin: 0 0 6px; color: var(--ink-soft); } /* Los desplegables deben ser OPACOS: sobre vidrio no se leen. */ select.campo { background-color: #fff; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B6890'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } :root[data-theme="dark"] select.campo { background-color: #1A1733; color: var(--ink); } select.campo option { background: #fff; color: #1E1B34; } :root[data-theme="dark"] select.campo option { background: #1A1733; color: #ECEAFB; } /* Píldoras de categoría */ .tg-pildoras { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: thin; } .tg-pildora { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 22px; border: 1px solid var(--glass-brd); background: var(--glass-bg); color: var(--ink-soft); font-size: .86rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .22s; } .tg-pildora:hover { border-color: rgba(var(--brand-rgb), .38); color: var(--brand); transform: translateY(-2px); } .tg-pildora.activa { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(var(--brand-rgb), .32); } /* ===================================================================== CARRITO (panel lateral) ===================================================================== */ .tg-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100%); z-index: 1060; display: flex; flex-direction: column; background: var(--glass-bg-2); border-left: 1px solid var(--glass-brd); backdrop-filter: blur(24px) saturate(180%); box-shadow: -14px 0 44px rgba(76, 29, 149, .16); transform: translateX(102%); transition: transform .38s cubic-bezier(.2, .8, .3, 1); } .tg-panel.abierto { transform: none; } .tg-panel-cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--glass-brd); } .tg-panel-cab h2 { margin: 0; font-size: 1.1rem; font-weight: 800; } .tg-panel-cuerpo { flex: 1; overflow-y: auto; padding: 16px 20px; } .tg-panel-pie { padding: 16px 20px; border-top: 1px solid var(--glass-brd); background: var(--glass-bg-2); } .tg-velo { position: fixed; inset: 0; z-index: 1050; background: rgba(30, 27, 52, .42); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s; } .tg-velo.visible { opacity: 1; pointer-events: auto; } .cerrar-x { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 4px 8px; border-radius: 8px; } .cerrar-x:hover { background: rgba(var(--brand-rgb), .10); color: var(--brand); } .item-carrito { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--glass-brd); } .item-carrito img { width: 56px; height: 56px; object-fit: contain; border-radius: 9px; background: rgba(var(--brand-rgb), .05); } .item-carrito .nom { font-size: .84rem; font-weight: 600; line-height: 1.35; } .item-carrito .pre { font-size: .8rem; color: var(--ink-soft); } .cant { display: inline-flex; align-items: center; gap: 4px; } .cant button { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--glass-brd); background: var(--glass-bg); color: var(--ink); cursor: pointer; font-weight: 700; line-height: 1; } .cant button:hover { background: rgba(var(--brand-rgb), .12); color: var(--brand); } .cant input { width: 42px; text-align: center; padding: 4px; border: 1px solid var(--glass-brd); border-radius: 7px; background: var(--glass-bg-2); color: var(--ink); font-size: .84rem; } /* ===================================================================== MODALES ===================================================================== */ .tg-modal { position: fixed; inset: 0; z-index: 1070; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(30, 27, 52, .46); backdrop-filter: blur(5px); } .tg-modal.abierto { display: flex; animation: aparecer .24s ease; } @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } } .tg-modal-caja { width: min(720px, 100%); max-height: 90vh; overflow-y: auto; background: var(--glass-bg-2); border: 1px solid var(--glass-brd); border-radius: 22px; backdrop-filter: blur(22px) saturate(180%); box-shadow: 0 24px 64px rgba(76, 29, 149, .26); animation: subir .3s cubic-bezier(.2, .8, .3, 1); } @keyframes subir { from { transform: translateY(26px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } .tg-modal-cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--glass-brd); } .tg-modal-cab h2 { margin: 0; font-size: 1.14rem; font-weight: 800; } .tg-modal-cuerpo { padding: 20px 22px; } .tg-modal-pie { padding: 16px 22px; border-top: 1px solid var(--glass-brd); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } /* ===================================================================== INSIGNIAS, AVISOS Y TABLAS ===================================================================== */ .insignia { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px; font-size: .76rem; font-weight: 700; } .insignia.verde { background: var(--verde-bg); color: var(--verde); } .insignia.rojo { background: var(--rojo-bg); color: var(--rojo); } .insignia.ambar { background: var(--ambar-bg); color: var(--ambar); } .insignia.azul { background: var(--azul-bg); color: var(--azul); } .insignia.morado { background: var(--morado-bg); color: var(--brand); } .insignia.gris { background: var(--gris-bg); color: var(--gris); } .aviso { padding: 14px 17px; border-radius: var(--radio-sm); font-size: .9rem; margin: 14px 0; border: 1px solid transparent; line-height: 1.6; } .aviso.verde { background: var(--verde-bg); border-color: rgba(5,150,105,.28); color: var(--verde); } .aviso.rojo { background: var(--rojo-bg); border-color: rgba(220,38,38,.28); color: var(--rojo); } .aviso.ambar { background: var(--ambar-bg); border-color: rgba(217,119,6,.28); color: var(--ambar); } .aviso.azul { background: var(--azul-bg); border-color: rgba(37,99,235,.28); color: var(--azul); } .tabla-tg { width: 100%; border-collapse: collapse; font-size: .89rem; } .tabla-tg th { text-align: left; padding: 11px 12px; font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--glass-brd); white-space: nowrap; } .tabla-tg td { padding: 12px; border-bottom: 1px solid var(--glass-brd); vertical-align: middle; } .tabla-tg tbody tr { transition: background .18s; } .tabla-tg tbody tr:hover { background: rgba(var(--brand-rgb), .05); } .tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ===================================================================== RESEÑAS ===================================================================== */ .rv-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-block; } .rv-avatar-gen { display: inline-flex; align-items: center; justify-content: center; color: #fff; } .rv-estrella { color: #F59E0B; font-size: .92rem; } .rv-item { display: flex; gap: 13px; padding: 16px; } .rv-item .txt { font-size: .9rem; line-height: 1.65; color: var(--ink-soft); margin: 7px 0 0; } .rv-nombre { font-weight: 700; font-size: .92rem; } /* ===================================================================== PIE DE PÁGINA ===================================================================== */ .tg-footer { margin-top: 64px; padding: 44px 0 26px; border-top: 1px solid var(--glass-brd); background: var(--glass-bg); backdrop-filter: blur(14px); } .tg-footer-cols { display: grid; gap: 30px; grid-template-columns: 1fr; } @media (min-width: 768px) { .tg-footer-cols { grid-template-columns: 1.4fr 1fr 1fr; } } .tg-footer h3 { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 12px; } .tg-footer a { display: block; padding: 4px 0; font-size: .89rem; color: var(--ink-soft); } .tg-footer a:hover { color: var(--brand); } .tg-footer .legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--glass-brd); font-size: .8rem; color: var(--ink-faint); text-align: center; } /* Interruptor de tema */ #temaToggle { position: fixed; right: 16px; bottom: 16px; z-index: 1200; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--glass-brd); background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; font-size: 1.2rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(var(--brand-rgb), .40); transition: transform .22s; } #temaToggle:hover { transform: translateY(-3px) rotate(-14deg); } /* Banner de cookies */ #cookieBanner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1210; max-width: 620px; margin: 0 auto; padding: 16px 18px; background: var(--glass-bg-2); border: 1px solid var(--glass-brd); border-radius: var(--radio); backdrop-filter: blur(18px); box-shadow: 0 14px 40px rgba(76, 29, 149, .20); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: .87rem; } /* ===================================================================== UTILIDADES ===================================================================== */ .seccion { padding: 40px 0; } .seccion-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .seccion-cab h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; letter-spacing: -.9px; margin: 0; } .seccion-cab p { color: var(--ink-soft); margin: 6px 0 0; font-size: .95rem; } .txt-suave { color: var(--ink-soft); } .txt-tenue { color: var(--ink-faint); } .txt-centro { text-align: center; } /* Estados en las tablas de comprobación del panel */ .si { color: var(--verde); } .no { color: var(--rojo); } .warn { color: var(--ambar); } .oculto { display: none !important; } .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .vacio { text-align: center; padding: 56px 20px; color: var(--ink-soft); } .vacio i { font-size: 3rem; color: rgba(var(--brand-rgb), .26); display: block; margin-bottom: 12px; } .cargando { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(var(--brand-rgb),.25); border-top-color: var(--brand); border-radius: 50%; animation: girar .7s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } /* ===================================================================== RESPONSIVO ===================================================================== */ @media (max-width: 860px) { .tg-menu-btn { display: inline-flex; } .tg-nav { position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 14px 18px 20px; background: var(--glass-bg-2); border-bottom: 1px solid var(--glass-brd); backdrop-filter: blur(20px); box-shadow: 0 14px 34px rgba(76, 29, 149, .14); display: none; } .tg-nav.abierto { display: flex; } .tg-nav a { padding: 12px 14px; } .tg-filtros { top: 0; } .pc-mes { padding: 22px; } .pc-spec { grid-template-columns: 20px 84px 1fr; } } /* ===================================================================== ACCESIBILIDAD: respetar "reducir movimiento" ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } body::before { animation: none; } .glass-card:hover { transform: none; } .fx-on .glass-card, .fx-on .fx-entra { opacity: 1; transform: none; } .card-prod:hover .img-wrap img { transform: none; } /* Sin video de fondo: se queda la imagen o el degradado. */ .hero-video { display: none; } } /* ===================================================================== HERO Y BANNERS EN PANTALLAS CHICAS ===================================================================== */ @media (max-width: 860px) { /* El video no se carga en celular (lo decide hero.js), así que el hero no necesita ocupar tanto alto. */ .tg-hero.con-video, .tg-hero:has(.hero-imagen) { min-height: 0; padding: 48px 0; } .tg-banners { padding: 18px 0 4px; } .banner-puntos { bottom: 8px; } .banner-punto { width: 7px; height: 7px; } .banner-punto.activo { width: 20px; } } /* ===================================================================== IMPRESIÓN ===================================================================== */ @media print { body::before, .tg-header, .tg-footer, #temaToggle, #cookieBanner, .tg-filtros, .tg-panel, .tg-velo { display: none !important; } body { background: #fff !important; color: #000; } .glass-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } } /* ===================================================================== LISTADO DE CATEGORÍA: FILTROS INTELIGENTES · VER MÁS · VOLVER ARRIBA ===================================================================== */ /* ---- Filtros por características ----------------------------------- */ .tg-facetas { margin: 4px 0 18px; border: 1px solid var(--glass-brd); border-radius: 16px; background: var(--glass-bg); overflow: hidden; } .tg-facetas-btn { display: none; /* en computadora van siempre desplegados */ width: 100%; align-items: center; gap: 10px; padding: 12px 15px; border: 0; background: none; color: var(--ink); font-family: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; } .tg-facetas-btn > span { display: flex; align-items: center; gap: 8px; } .tg-facetas-btn i.bi-sliders { color: var(--brand); } .tg-facetas-btn .n { min-width: 21px; height: 21px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--brand); color: #fff; font-size: .74rem; font-weight: 800; } .tg-facetas-btn .flecha { margin-left: auto; transition: transform .25s; } .tg-facetas.abierto .tg-facetas-btn .flecha { transform: rotate(180deg); } .tg-facetas-cuerpo { display: flex; flex-wrap: wrap; gap: 18px 26px; padding: 14px 16px; } .tg-faceta { min-width: 0; } .tg-faceta-titulo { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 7px; } .tg-faceta-ops { display: flex; flex-wrap: wrap; gap: 7px; } .tg-faceta-op { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--glass-brd); border-radius: 999px; background: var(--glass-bg-2); font-size: .85rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; transition: background .18s, color .18s, border-color .18s; } .tg-faceta-op b { font-size: .72rem; font-weight: 700; color: var(--ink-faint); } .tg-faceta-op:hover { border-color: rgba(var(--brand-rgb), .40); color: var(--brand); } .tg-faceta-op.activa { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); border-color: transparent; color: #fff; } .tg-faceta-op.activa b { color: rgba(255, 255, 255, .75); } .tg-facetas-limpiar { align-self: flex-end; } /* ---- Ver más productos --------------------------------------------- */ .tg-mas { display: flex; justify-content: center; margin-top: 28px; } .tg-mas-btn { min-width: 230px; justify-content: center; } .tg-mas-btn.cargando { opacity: .7; pointer-events: none; } .tg-mas-btn.cargando i { animation: girar .8s linear infinite; } /* ---- Volver arriba -------------------------------------------------- */ .tg-arriba { position: fixed; right: 16px; bottom: 84px; /* por encima del interruptor de tema */ z-index: 1035; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--glass-brd); border-radius: 50%; background: var(--glass-bg-2); backdrop-filter: blur(14px); color: var(--brand); font-size: 1.15rem; cursor: pointer; box-shadow: 0 8px 22px rgba(76, 29, 149, .18); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; } .tg-arriba.visible { opacity: 1; transform: none; pointer-events: auto; } .tg-arriba:hover { color: #fff; background: var(--brand); border-color: transparent; } @media (max-width: 860px) { /* En celular los filtros se guardan tras su botón: desplegados taparían media pantalla de productos. */ .tg-facetas-btn { display: flex; } .tg-facetas-cuerpo { display: none; } .tg-facetas.abierto .tg-facetas-cuerpo { display: flex; border-top: 1px solid var(--glass-brd); } .tg-facetas-cuerpo { gap: 14px 18px; padding: 13px 14px; } .tg-faceta { flex: 1 1 100%; } .tg-faceta-op { padding: 7px 13px; font-size: .87rem; } .tg-facetas-limpiar { flex: 1 1 100%; text-align: center; } .tg-mas-btn { width: 100%; } .tg-arriba { right: 14px; bottom: 78px; } } /* ===================================================================== ENCABEZADO CON BUSCADOR · MENÚ DE CATEGORÍAS · PORTADA ===================================================================== */ /* El encabezado ahora lleva dos renglones: arriba logo + buscador + carrito; abajo los enlaces. En celular el buscador baja a su propio renglón y los enlaces se esconden tras el botón de menú. */ /* Se conserva el 'sticky' original (el encabezado se queda arriba al bajar); sticky ya sirve de referencia para el menú desplegable de celular. */ .tg-header-in { flex-wrap: wrap; row-gap: 4px; } .tg-header-acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; } .tg-nav { flex: 1 0 100%; margin-left: 0; justify-content: flex-start; } /* ---- Buscador ------------------------------------------------------ */ .tg-busca { position: relative; flex: 1 1 300px; display: flex; align-items: center; min-width: 0; } .tg-busca .lupa { position: absolute; left: 14px; color: var(--ink-faint); pointer-events: none; font-size: 1rem; } .tg-busca-campo { width: 100%; padding: 11px 46px 11px 40px; border: 1px solid var(--glass-brd); border-radius: 14px; background: var(--glass-bg); color: var(--ink); font-size: .94rem; font-family: inherit; transition: border-color .2s, box-shadow .2s; } .tg-busca-campo::placeholder { color: var(--ink-faint); } .tg-busca-campo:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18); } .tg-busca-campo::-webkit-search-cancel-button { cursor: pointer; } .tg-busca-ir { position: absolute; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; cursor: pointer; transition: transform .15s; } .tg-busca-ir:hover { transform: scale(1.06); } /* ---- Sugerencias del buscador -------------------------------------- */ .tg-busca-sug { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1040; max-height: 70vh; overflow-y: auto; padding: 6px; border: 1px solid var(--glass-brd); border-radius: 16px; background: var(--glass-bg-2); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); box-shadow: 0 18px 44px rgba(76, 29, 149, .20); } .tg-busca-sug[hidden] { display: none; } .sug-grupo { padding: 8px 12px 4px; font-size: .74rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-faint); } .sug-fila { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 12px; color: var(--ink); transition: background .15s; } .sug-fila:hover, .sug-fila.marcada { background: rgba(var(--brand-rgb), .10); color: var(--ink); } .sug-fila img { width: 44px; height: 44px; object-fit: contain; border-radius: 9px; background: #fff; flex: 0 0 auto; } .sug-fila .sug-sinimg, .sug-chica i { width: 30px; text-align: center; color: var(--brand); font-size: 1.05rem; flex: 0 0 auto; } .sug-chica { padding: 7px 10px; font-weight: 600; font-size: .9rem; } .sug-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .sug-nom { font-size: .89rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sug-nom b { color: var(--brand); } .sug-cat { font-size: .76rem; color: var(--ink-faint); } .sug-precio { font-size: .92rem; white-space: nowrap; color: var(--brand); } .sug-vacio { padding: 18px 14px; text-align: center; font-size: .88rem; color: var(--ink-soft); line-height: 1.6; } .sug-todos { display: block; margin-top: 4px; padding: 11px; border-top: 1px solid var(--glass-brd); text-align: center; font-size: .88rem; font-weight: 700; color: var(--brand); } /* ---- Menú de categorías -------------------------------------------- */ .tg-menucat { border: 1px solid var(--glass-brd); border-radius: 18px; background: var(--glass-bg); overflow: hidden; } .tg-menucat-btn { display: none; /* sólo aparece en celular */ width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 0; background: none; color: var(--ink); font-family: inherit; font-size: .98rem; font-weight: 700; cursor: pointer; } .tg-menucat-btn-txt { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-menucat-btn-txt i { color: var(--brand); flex: 0 0 auto; } .tg-menucat-btn .flecha { flex: 0 0 auto; } .tg-menucat-btn .flecha { transition: transform .25s; } .tg-menucat.abierto .tg-menucat-btn .flecha { transform: rotate(180deg); } .tg-menucat-lista { padding: 8px; } .tg-menucat-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; font-size: .9rem; font-weight: 600; color: var(--ink-soft); transition: background .18s, color .18s; } .tg-menucat-item i { width: 20px; text-align: center; color: var(--brand); font-size: 1rem; } .tg-menucat-item span { flex: 1 1 auto; min-width: 0; } .tg-menucat-item .n { font-size: .74rem; font-weight: 700; color: var(--ink-faint); background: rgba(var(--brand-rgb), .10); padding: 2px 8px; border-radius: 9px; } .tg-menucat-item:hover, .tg-menucat-item.activa { background: rgba(var(--brand-rgb), .12); color: var(--brand); } .tg-menucat-item.activa .n { background: var(--brand); color: #fff; } .tg-menucat-item.extra { color: var(--ink-faint); } .tg-menucat-extras { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--glass-brd); } /* ---- Portada: menú a la izquierda, banner a la derecha -------------- */ .tg-portada-top { padding: 22px 0 4px; } .tg-portada-rejilla { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 20px; align-items: start; } .tg-portada-rejilla.sin-banner { grid-template-columns: 262px; } /* El menú se queda fijo al bajar, justo debajo del encabezado (que mide dos renglones). Si hay muchas categorías se desliza por dentro en vez de estirar la página: con 20 o con 60 categorías se ve igual de ordenado. La columna se estira a todo el alto del renglón (align-self) porque si sólo midiera lo que mide el menú, éste no tendría por dónde recorrerse y el "sticky" no haría nada. */ .tg-portada-menu { align-self: stretch; } .tg-portada-menu .tg-menucat { position: sticky; top: 119px; } .tg-portada-menu .tg-menucat-lista, .tg-conmenu .tg-menucat-lista { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; /* al llegar al final no arrastra la página */ scrollbar-width: thin; scrollbar-color: rgba(var(--brand-rgb), .35) transparent; } .tg-menucat-lista::-webkit-scrollbar { width: 8px; } .tg-menucat-lista::-webkit-scrollbar-track { background: transparent; } .tg-menucat-lista::-webkit-scrollbar-thumb { background: rgba(var(--brand-rgb), .30); border-radius: 4px; } .tg-menucat-lista::-webkit-scrollbar-thumb:hover { background: rgba(var(--brand-rgb), .50); } .tg-portada-rejilla .tg-banners { padding: 0; } /* El catálogo filtrado usa la misma retícula. */ .tg-conmenu { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 20px; align-items: start; } .tg-conmenu .tg-menucat { position: sticky; top: 119px; } /* Franja suave para separar "recién llegados" del resto. */ .tg-nuevos { background: rgba(var(--brand-rgb), .04); } /* Sello de la esquina para "Más vendido". */ .etiqueta.top { background: linear-gradient(135deg, #F59E0B, #D97706); color: #241300; } /* ---- Barra de filtros del listado ---------------------------------- Ya no lleva buscador ni cinta de categorías (el buscador vive en el encabezado y las categorías en el menú de al lado): quedan sólo marca y orden, que se dejan compactos para que no se estiren de lado a lado. */ .tg-filtros-caja select.campo { flex: 0 1 210px; max-width: 240px; } @media (max-width: 860px) { /* En celular el encabezado mide dos renglones (logo y buscador). */ .tg-filtros { top: 104px; padding: 10px 0; } /* Las dos listas caben juntas en un renglón y sin la caja de vidrio alrededor: antes se comían dos renglones enteros de pantalla. */ .tg-filtros-caja { flex-wrap: nowrap; gap: 8px; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; } .tg-filtros-caja select.campo { flex: 1 1 0; min-width: 0; max-width: none; padding: 9px 30px 9px 11px; font-size: .85rem; } } /* ---- Bloques dentro de la columna derecha de la portada ------------- */ .tg-portada-cuerpo { display: flex; flex-direction: column; gap: 26px; min-width: 0; } .tg-bloque { min-width: 0; } .tg-bloque .seccion-cab { margin-bottom: 14px; } .tg-bloque .seccion-cab h2 { font-size: 1.3rem; } /* Cuatro fichas por renglón caben justas en la columna: se dejan tres para que la foto y el nombre se lean sin apretarse. */ .tg-bloque .rejilla { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } /* ---- Franja de marcas (ancho completo, al pie de la portada) -------- */ .tg-marcas { padding: 40px 0; margin-top: 18px; border-top: 1px solid var(--glass-brd); border-bottom: 1px solid var(--glass-brd); background: rgba(var(--brand-rgb), .04); } .tg-marcas-titulo { margin: 0 0 22px; text-align: center; font-size: 1.15rem; font-weight: 800; letter-spacing: -.3px; color: var(--ink); } .tg-marcas-pista { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; } .tg-marca { display: grid; place-items: center; width: 148px; height: 74px; padding: 12px 16px; border: 1px solid var(--glass-brd); border-radius: 14px; background: var(--glass-bg); transition: transform .2s, border-color .2s, box-shadow .2s; } .tg-marca:hover { transform: translateY(-3px); border-color: rgba(var(--brand-rgb), .34); box-shadow: 0 10px 24px rgba(var(--brand-rgb), .16); } .tg-marca img { max-width: 100%; max-height: 46px; object-fit: contain; /* En tema claro los logotipos se ven tal cual; en oscuro se aclaran los que vienen en negro sobre fondo transparente. */ } :root[data-theme="dark"] .tg-marca img { filter: brightness(0) invert(1) opacity(.85); } :root[data-theme="dark"] .tg-marca:hover img { filter: none; } .tg-marca.solo-texto span { font-size: 1rem; font-weight: 800; letter-spacing: .4px; text-align: center; line-height: 1.25; color: var(--ink-soft); } .tg-marca.solo-texto:hover span { color: var(--brand); } @media (max-width: 1024px) { .tg-portada-rejilla, .tg-conmenu { grid-template-columns: 224px minmax(0, 1fr); gap: 16px; } } @media (max-width: 860px) { /* Celular: logo arriba, buscador en su renglón, y las categorías en acordeón antes del banner. */ .tg-busca { flex: 1 0 100%; order: 3; } .tg-busca-campo { padding: 10px 44px 10px 38px; font-size: .92rem; } .tg-carrito-btn .txt { display: none; } .tg-carrito-btn { padding: 9px 12px; } .tg-portada-rejilla, .tg-conmenu { grid-template-columns: minmax(0, 1fr); gap: 14px; } .tg-portada-menu .tg-menucat, .tg-conmenu .tg-menucat { position: static; } .tg-portada-cuerpo { gap: 20px; } .tg-marcas { padding: 28px 0; } .tg-marca { width: 108px; height: 60px; padding: 9px 11px; } .tg-marca img { max-height: 34px; } .tg-marca.solo-texto span { font-size: .84rem; } .tg-menucat-btn { display: flex; } .tg-menucat-lista { display: none; } .tg-portada-menu .tg-menucat-lista, .tg-conmenu .tg-menucat-lista { max-height: none; overflow: visible; } .tg-menucat.abierto .tg-menucat-lista { display: block; border-top: 1px solid var(--glass-brd); } }