/* L&M Licores — paleta negro cálido + dorado, tipografía Playfair Display (titulares) + Inter (cuerpo/UI). Identidad única y oscura a propósito (marca de licorería premium) -- sin modo claro. */ :root { --lym-bg: #100b06; /* Antes gris-negro (#151210/#1b1714, apenas 2-3% más claro que el fondo) -- ahora un marrón-dorado oscuro de verdad, para que cada tarjeta/panel se lea como "negro mezclado con dorado", no como negro con un borde fino dorado encima. A pedido explícito del usuario (2026-09-12): la versión anterior se veía "muy oscura", quería que los dos colores se mezclen en vez de que el dorado sea solo acento de texto/borde. */ --lym-bg-elev: #24170a; --lym-bg-elev2: #33220e; --lym-border: rgba(240, 181, 72, .32); --lym-border-soft: rgba(240, 181, 72, .16); --lym-gold-1: #f3c463; --lym-gold-2: #d98d2b; --lym-gold: #e3a94a; --lym-text: #f6f0e4; --lym-text-dim: #cdb99e; --lym-text-mute: #a08c6f; --lym-shadow: 0 20px 50px rgba(0, 0, 0, .45); --lym-radius: 18px; --lym-radius-sm: 12px; } * { box-sizing: border-box; } /* Sin overflow-x:hidden acá a propósito -- cualquier valor de overflow distinto de "visible" en fuerza overflow-y:auto (regla implícita de la spec) y convierte a en su propio contenedor de scroll, lo que rompe position:sticky de sus descendientes (header/filtros) en iOS Safari -- confirmado real: el bug reportado de la barra superior "perdiéndose" con el scroll era justamente esto. El ancho horizontal ya está controlado en cada sección (`.lym-container`, grids con `gap`, nada que se salga del viewport), así que no hace falta este candado acá. */ .lym-body { margin: 0; background: var(--lym-bg); color: var(--lym-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; } .lym a { color: inherit; text-decoration: none; } .lym ul { list-style: none; margin: 0; padding: 0; } .lym img { max-width: 100%; display: block; } .lym svg { width: 100%; height: 100%; } .lym-container { max-width: 1160px; margin: 0 auto; padding: 0 20px; } .lym-gold { color: var(--lym-gold); } .lym-eyebrow { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lym-gold); margin: 0 0 10px; } .lym-h1, .lym-h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: var(--lym-text); line-height: 1.15; margin: 0 0 14px; text-wrap: balance; } .lym-h1 { font-size: clamp(32px, 5vw, 48px); } .lym-h2 { font-size: clamp(26px, 4vw, 38px); } .lym-p { color: var(--lym-text-dim); line-height: 1.7; margin: 0 0 8px; font-size: 15.5px; } .lym-p--wide { max-width: 640px; } /* ── Botones ────────────────────────────────────────────────────────────── */ .lym-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; background: transparent; color: inherit; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; } .lym-btn svg { width: 18px; height: 18px; flex: none; } .lym-btn:hover { transform: translateY(-1px); } .lym-btn--primary { background: linear-gradient(135deg, var(--lym-gold-1), var(--lym-gold-2)); color: #241705; box-shadow: 0 10px 30px rgba(217, 141, 43, .25); } .lym-btn--outline { background: rgba(255, 255, 255, .02); color: var(--lym-text); border-color: var(--lym-border); } .lym-btn--outline:hover { border-color: var(--lym-gold); } .lym-btn--lg { padding: 17px 40px; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; } .lym-btn--pedir { width: 100%; padding: 11px 16px; font-size: 13.5px; } .lym-btn--pedir svg { width: 16px; height: 16px; } .lym-link { display: inline-flex; align-items: center; gap: 6px; color: var(--lym-gold); font-weight: 600; font-size: 14px; white-space: nowrap; } .lym-link svg { width: 15px; height: 15px; } /* ── Header ─────────────────────────────────────────────────────────────── */ .lym-header { position: sticky; top: 0; z-index: 40; background: rgba(11, 9, 8, .85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--lym-border-soft); } .lym-header__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; } .lym-brand { display: flex; align-items: center; gap: 12px; } .lym-brand__mark { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--lym-gold-1), var(--lym-gold-2)); color: #241705; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; letter-spacing: -.02em; flex: none; } .lym-brand__text { display: flex; flex-direction: column; line-height: 1.2; } .lym-brand__text strong { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; } .lym-brand__text small { font-size: 10px; color: var(--lym-text-mute); letter-spacing: .08em; } .lym-nav { display: none; gap: 28px; } .lym-nav a { font-size: 14px; font-weight: 500; color: var(--lym-text-dim); } .lym-nav a:hover, .lym-nav a.is-active { color: var(--lym-gold); } .lym-header__actions { display: flex; align-items: center; gap: 8px; } .lym-icon-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lym-text-dim); background: transparent; cursor: pointer; } .lym-icon-btn svg { width: 20px; height: 20px; } .lym-icon-btn:hover { color: var(--lym-gold); } .lym-nav-check { display: none; } .lym-burger { display: flex; } .lym-header-cart { display: none; } @media (min-width: 900px) { .lym-header-cart { display: flex; } } /* Menú mobile: checkbox+CSS, sin JS */ @media (max-width: 899px) { .lym-nav { position: fixed; inset: 68px 0 0 0; height: calc(100vh - 68px); z-index: 39; background: var(--lym-bg); flex-direction: column; align-items: center; justify-content: center; gap: 28px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .lym-nav a { font-size: 20px; } .lym-nav-check:checked ~ .lym-nav { opacity: 1; transform: translateY(0); pointer-events: auto; display: flex; } } @media (min-width: 900px) { .lym-nav { display: flex; } .lym-burger { display: none; } } /* ── Hero ───────────────────────────────────────────────────────────────── */ .lym-hero { position: relative; padding: 64px 0 44px; overflow: hidden; } .lym-hero__glow { position: absolute; inset: -20% -10% auto -10%; height: 520px; background: radial-gradient(60% 60% at 30% 20%, rgba(243, 196, 99, .16), transparent 70%), radial-gradient(50% 50% at 80% 10%, rgba(217, 141, 43, .12), transparent 70%); pointer-events: none; } .lym-hero__inner { position: relative; max-width: 720px; } .lym-hero__title { font-size: clamp(34px, 6vw, 54px); } .lym-hero__lead { color: var(--lym-text-dim); font-size: 17px; max-width: 480px; margin-bottom: 28px; } .lym-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; } .lym-features { display: flex; flex-wrap: wrap; gap: 20px 28px; font-size: 13.5px; color: var(--lym-text-dim); font-weight: 500; } .lym-features li { display: flex; align-items: center; gap: 8px; } .lym-features svg { width: 17px; height: 17px; color: var(--lym-gold); } .lym-features--row { justify-content: center; } /* ── Secciones genéricas ────────────────────────────────────────────────── */ .lym-section { padding: 56px 0; } .lym-section--alt { background: linear-gradient(180deg, transparent, rgba(217,141,43,.09), transparent); } .lym-section--top0 { padding-top: 0; } .lym-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } /* ── Categorías (home) ──────────────────────────────────────────────────── */ .lym-catrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; } @media (min-width: 640px) { .lym-catrow { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 980px) { .lym-catrow { grid-template-columns: repeat(6, 1fr); } } .lym-catcard { position: relative; border-radius: var(--lym-radius); background: linear-gradient(160deg, var(--lym-bg-elev2), var(--lym-bg-elev)); border: 1px solid var(--lym-border-soft); overflow: hidden; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; transition: border-color .2s ease, transform .2s ease; } .lym-catcard:hover { border-color: var(--lym-gold); transform: translateY(-3px); } /* Bloque dorado real (no solo el ícono en outline) -- mitad de la tarjeta queda con un degradé dorado sólido, mitad con el fondo oscuro de siempre, a pedido explícito del usuario ("que se mezclen los dos colores"). */ .lym-catcard__art { flex: 1; padding: 18px 30% 0; color: #241705; opacity: 1; background: linear-gradient(165deg, var(--lym-gold-1), var(--lym-gold-2) 75%); } .lym-catcard__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-weight: 600; font-size: 14.5px; border-top: 1px solid var(--lym-border-soft); background: var(--lym-bg-elev2); } .lym-catcard__foot svg { width: 16px; height: 16px; color: var(--lym-gold); } /* ── Grid de productos ──────────────────────────────────────────────────── */ .lym-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 640px) { .lym-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 980px) { .lym-grid { grid-template-columns: repeat(4, 1fr); } } .lym-card { border-radius: var(--lym-radius); background: var(--lym-bg-elev); border: 1px solid var(--lym-border-soft); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease; } .lym-card:hover { border-color: var(--lym-gold); transform: translateY(-3px); } /* Mismo criterio que .lym-catcard__art -- bloque dorado sólido de verdad arriba de cada tarjeta, no un glow apenas insinuado. */ .lym-card__art { aspect-ratio: 4 / 5; display: flex; align-items: flex-end; justify-content: center; padding: 20px 32% 0; color: #241705; background: linear-gradient(165deg, var(--lym-gold-1), var(--lym-gold-2) 80%); } .lym-card__body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 4px; } .lym-card__cat { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--lym-gold); margin: 0; } .lym-card__nombre { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 16px; color: var(--lym-text); margin: 0 0 2px; line-height: 1.3; min-height: 2.6em; } .lym-card__precio { font-size: 15.5px; font-weight: 700; color: var(--lym-text); margin: 0 0 10px; font-variant-numeric: tabular-nums; } /* ── CTA de domicilios ──────────────────────────────────────────────────── */ /* Sección dorada de verdad (no un glow tenue sobre fondo negro) -- el bloque "negro puro" de la home se corta acá con una franja sólida dorado→negro, a pedido explícito del usuario para que el dorado tenga presencia real en la página, no solo como acento de texto/borde. */ .lym-cta { position: relative; padding: 64px 0; text-align: center; overflow: hidden; background: linear-gradient(180deg, var(--lym-bg) 0%, #3a2810 45%, #3a2810 55%, var(--lym-bg) 100%); } .lym-cta__glow { position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 50%, rgba(243,196,99,.22), transparent 70%); pointer-events: none; } .lym-cta__inner { position: relative; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .lym-cta .lym-p { text-align: center; margin-bottom: 24px; color: var(--lym-text); } .lym-cta .lym-features { margin-bottom: 30px; } .lym-cta .lym-features li { color: var(--lym-text); } /* ── Nosotros ───────────────────────────────────────────────────────────── */ .lym-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .lym-tags li { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--lym-border-soft); font-size: 13.5px; color: var(--lym-text-dim); } /* ── Catálogo: búsqueda + filtros ───────────────────────────────────────── */ .lym-catalogo-head { padding: 40px 0 0; } .lym-search { display: flex; align-items: center; gap: 10px; background: var(--lym-bg-elev); border: 1px solid var(--lym-border-soft); border-radius: 999px; padding: 13px 18px; margin: 24px 0 14px; max-width: 480px; } .lym-search svg { width: 18px; height: 18px; color: var(--lym-text-mute); flex: none; } .lym-search input { background: transparent; border: none; outline: none; color: var(--lym-text); font-size: 14.5px; width: 100%; font-family: 'Inter', sans-serif; } .lym-search input::placeholder { color: var(--lym-text-mute); } .lym-pills { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; scrollbar-width: none; } .lym-pills::-webkit-scrollbar { display: none; } .lym-pill { flex: none; padding: 9px 18px; border-radius: 999px; background: transparent; color: var(--lym-text-dim); border: 1px solid var(--lym-border-soft); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; white-space: nowrap; } .lym-pill.is-active { background: linear-gradient(135deg, var(--lym-gold-1), var(--lym-gold-2)); color: #241705; border-color: transparent; } /* Sub-filtros de Marca/Tamaño -- selects nativos (mejor en mobile que reinventar un dropdown propio), se repueblan por JS según la categoría activa para no ofrecer marcas que no existen en ese filtro. */ .lym-subfiltros { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .lym-subfiltros select { flex: 1 1 140px; min-width: 0; appearance: none; -webkit-appearance: none; background: var(--lym-bg-elev) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3a94a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; background-size: 16px; border: 1px solid var(--lym-border-soft); color: var(--lym-text); font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; padding: 10px 34px 10px 14px; border-radius: 999px; cursor: pointer; } .lym-subfiltros select:focus { outline: none; border-color: var(--lym-gold); } .lym-contador { font-size: 13px; color: var(--lym-text-mute); margin: 0; padding-bottom: 12px; } .lym-empty { text-align: center; color: var(--lym-text-dim); padding: 60px 20px; } /* La barra de filtros entera queda pegada debajo del header al hacer scroll -- así nunca hay que volver arriba para cambiar de categoría/ marca/tamaño mientras se recorren las 262 tarjetas. Fondo sólido (no el translúcido del header) porque acá SÍ hace falta tapar por completo las tarjetas que pasan por debajo. */ .lym-catalogo-filtros { position: sticky; top: 68px; z-index: 30; background: var(--lym-bg); padding-top: 14px; border-bottom: 1px solid var(--lym-border-soft); } /* ── Footer ─────────────────────────────────────────────────────────────── */ .lym-footer { padding: 56px 0 0; border-top: 1px solid var(--lym-border-soft); margin-top: 40px; } .lym-footer__grid { display: grid; gap: 32px; grid-template-columns: 1.4fr 1fr 1fr; padding-bottom: 40px; } .lym-footer__grid > div > a, .lym-footer__grid > div > p { display: flex; align-items: center; gap: 8px; color: var(--lym-text-dim); font-size: 14px; margin: 0 0 10px; } .lym-footer__grid > div > a svg { width: 15px; height: 15px; color: var(--lym-gold); flex: none; } .lym-footer__brand p a { color: var(--lym-text-dim); } .lym-footer__muted { color: var(--lym-text-mute) !important; font-size: 12.5px !important; } .lym-footer__legal { border-top: 1px solid var(--lym-border-soft); padding: 20px 0 100px; font-size: 12px; color: var(--lym-text-mute); line-height: 1.6; } .lym-footer__legal p { margin: 0 0 6px; } @media (max-width: 720px) { .lym-footer__grid { grid-template-columns: 1fr 1fr; } .lym-footer__brand { grid-column: 1 / -1; } } /* ── Botón flotante de WhatsApp ─────────────────────────────────────────── */ .lym-wa-float { position: fixed; right: 18px; bottom: 84px; z-index: 45; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--lym-bg-elev2); border: 1px solid var(--lym-gold); color: var(--lym-gold); box-shadow: var(--lym-shadow); } .lym-wa-float svg { width: 20px; height: 20px; } @media (min-width: 900px) { .lym-wa-float { bottom: 28px; } } /* ── Barra inferior (mobile) ────────────────────────────────────────────── */ .lym-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: flex; background: rgba(15, 12, 10, .92); backdrop-filter: blur(10px); border-top: 1px solid var(--lym-border-soft); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); } .lym-bottomnav a, .lym-bottomnav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--lym-text-mute); font-size: 10.5px; font-weight: 600; padding: 4px 0; background: none; border: none; font-family: 'Inter', sans-serif; cursor: pointer; } .lym-bottomnav a svg, .lym-bottomnav button svg { width: 21px; height: 21px; } .lym-bottomnav a.is-active, .lym-bottomnav a:hover { color: var(--lym-gold); } .lym-bottomnav__wa { color: var(--lym-gold) !important; } .lym-cart-icon-wrap { position: relative; display: inline-flex; } .lym-cart-badge { position: absolute; top: -6px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: linear-gradient(135deg, var(--lym-gold-1), var(--lym-gold-2)); color: #241705; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } body.lym-body { padding-bottom: 76px; } @media (min-width: 900px) { .lym-bottomnav { display: none; } body.lym-body { padding-bottom: 0; } } /* ── Carrito de pedido ──────────────────────────────────────────────────── */ html.lym-no-scroll, html.lym-no-scroll body { overflow: hidden; } .lym-carrito-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(4, 3, 2, .7); display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .lym-carrito-overlay.is-open { opacity: 1; pointer-events: auto; } .lym-carrito-panel { width: 100%; max-width: 480px; max-height: 85vh; background: var(--lym-bg-elev); border: 1px solid var(--lym-border-soft); border-bottom: none; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; transform: translateY(24px); transition: transform .2s ease; padding-bottom: env(safe-area-inset-bottom); } .lym-carrito-overlay.is-open .lym-carrito-panel { transform: translateY(0); } @media (min-width: 640px) { .lym-carrito-overlay { align-items: center; } .lym-carrito-panel { border-radius: 20px; border-bottom: 1px solid var(--lym-border-soft); max-height: 80vh; } } .lym-carrito-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--lym-border-soft); flex: none; } .lym-carrito-panel__head h3 { font-family: 'Playfair Display', serif; font-size: 20px; margin: 0; color: var(--lym-text); } .lym-carrito-vacio { color: var(--lym-text-dim); font-size: 14px; line-height: 1.6; padding: 24px 20px; margin: 0; } .lym-carrito-lista { overflow-y: auto; padding: 8px 20px; flex: 1 1 auto; } .lym-carrito-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--lym-border-soft); } .lym-carrito-item:last-child { border-bottom: none; } .lym-carrito-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .lym-carrito-item__info strong { font-size: 14px; color: var(--lym-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lym-carrito-item__info span { font-size: 12.5px; color: var(--lym-text-mute); } .lym-carrito-item__qty { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; flex: none; } .lym-qty-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--lym-border-soft); background: transparent; color: var(--lym-text); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lym-qty-btn:hover { border-color: var(--lym-gold); color: var(--lym-gold); } .lym-carrito-item__quitar { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--lym-text-mute); cursor: pointer; } .lym-carrito-item__quitar svg { width: 16px; height: 16px; } .lym-carrito-item__quitar:hover { color: var(--lym-danger, #e0554f); } .lym-carrito-panel__foot { padding: 16px 20px; border-top: 1px solid var(--lym-border-soft); flex: none; } .lym-carrito-total { font-size: 17px; font-weight: 700; color: var(--lym-text); margin: 0 0 12px; font-variant-numeric: tabular-nums; } .lym-btn--carrito-enviar { width: 100%; padding: 13px 24px; font-size: 14.5px; } #lym-carrito-enviar.is-disabled { opacity: .4; pointer-events: none; } /* ── Toast (confirmación breve de "agregado al pedido") ───────────────── */ .lym-toast { position: fixed; left: 50%; bottom: 90px; z-index: 61; transform: translate(-50%, 12px); background: var(--lym-bg-elev2); border: 1px solid var(--lym-border); color: var(--lym-text); font-size: 13.5px; font-weight: 600; padding: 12px 20px; border-radius: 999px; box-shadow: var(--lym-shadow); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; max-width: 88vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lym-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } @media (min-width: 900px) { .lym-toast { bottom: 28px; } }