/* ============================================================ landing.css ------------------------------------------------------------ Estilos del landing de venta (frontend/index.html). Mismos tokens de color/tipografia que css/style.css (el flipbook) para que se sientan como el mismo producto; se duplica el bloque :root en vez de compartir un archivo de tokens porque son solo dos paginas — no vale la pena la indireccion. A diferencia del flipbook (pensado solo para escritorio), esta pagina SI necesita responsive real: es la puerta de entrada del sitio y buena parte del trafico esperado (LATAM) es mobile. ============================================================ */ :root{ --bg:#131217; --surface:#1c1b21; --surface-2:#232229; --surface-3:#2a2932; --text:#ece8e0; --text-dim:#a6a196; --text-faint:#726d63; --gold:#c9a24c; --gold-soft:#8d723c; --wine:#a8503f; --sage:#7a9186; --line:rgba(255,255,255,0.09); --line-strong:rgba(255,255,255,0.16); --bg-glow:#1a1920; } /* Modo claro: mismos valores que style.css (el flipbook) y que PALETAS.claro en backend/routes/pdf.js -- ver js/tema.js para el mecanismo de activacion (atributo data-theme="claro" en ). */ :root[data-theme="claro"]{ --bg:#fbf9f4; --surface:#ffffff; --surface-2:#ede8dc; --surface-3:#e3ddc9; --text:#241f18; --text-dim:#4a4436; --text-faint:#8a8272; --gold:#8d723c; --gold-soft:#6b5730; --wine:#8f4030; --sage:#4f6a60; --line:rgba(36,31,24,0.14); --line-strong:rgba(36,31,24,0.22); --bg-glow:#ffffff; } *{ box-sizing:border-box; } html{ overflow-x:hidden; scrollbar-gutter:stable; } body{ margin:0; background:radial-gradient(ellipse at 50% 0%, var(--bg-glow) 0%, var(--bg) 65%); color:var(--text); font-family:'IBM Plex Sans', sans-serif; } .lp-wrap{ max-width:1080px; margin:0 auto; padding:0 24px; } a{ color:inherit; } /* ---- Header ---- */ .lp-header{ display:flex; align-items:center; justify-content:space-between; padding:26px 0; gap:16px; flex-wrap:wrap; } .lp-brand{ font-family:'Fraunces', serif; font-weight:700; font-size:17px; letter-spacing:0.2px; color:var(--text); text-decoration:none; } .lp-header-cta{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.3px; color:#1a1610; background:var(--gold); text-decoration:none; padding:10px 18px; border-radius:6px; white-space:nowrap; transition:background 0.15s; } .lp-header-cta:hover{ background:#dcb662; } .lp-header-actions{ display:flex; align-items:center; gap:10px; } .lp-header-cta.secundario{ color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:11px; cursor:pointer; } .lp-header-cta.secundario:hover{ border-color:var(--gold-soft); color:var(--gold); background:var(--surface-2); } /* ---- Hero ---- */ .lp-hero{ padding:56px 0 64px; text-align:center; } .lp-hero-emblems{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px; margin:0 auto 22px; } .lp-hero-emblem{ width:64px; height:64px; border-radius:50%; border:1px solid var(--gold-soft); background-size:cover; background-position:center; } .lp-hero-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:18px; } .lp-hero h1{ font-family:'Fraunces', serif; font-weight:700; font-size:clamp(36px, 7vw, 60px); line-height:1.05; letter-spacing:-0.5px; margin:0 0 18px; color:var(--text); } .lp-hero h1 em{ font-style:italic; color:var(--gold); } .lp-hero-sub{ font-size:clamp(15px, 2.2vw, 18px); line-height:1.6; color:var(--text-dim); max-width:560px; margin:0 auto 34px; } .lp-hero-actions{ display:flex; flex-direction:column; align-items:center; gap:14px; } .lp-cta-primary{ font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.5px; color:#1a1610; background:var(--gold); text-decoration:none; padding:16px 34px; border-radius:8px; transition:background 0.15s, transform 0.15s; } .lp-cta-primary:hover{ background:#dcb662; transform:translateY(-1px); } .lp-hero-note{ font-size:11.5px; color:var(--text-faint); max-width:380px; line-height:1.5; } /* ---- Secciones genericas ---- */ .lp-section{ padding:64px 0; } .lp-section-head{ text-align:center; max-width:520px; margin:0 auto 40px; } .lp-section-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--sage); margin-bottom:10px; } .lp-section-head h2{ font-family:'Fraunces', serif; font-weight:700; font-size:clamp(24px, 4vw, 32px); margin:0 0 10px; color:var(--text); } .lp-section-head p{ font-size:14px; line-height:1.6; color:var(--text-dim); margin:0; } .lp-price-nota{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-faint); margin-top:10px; } /* ---- Capturas ---- */ .lp-gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:20px; } .lp-gallery-item{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); } .lp-gallery-item img{ display:block; width:100%; height:auto; } .lp-gallery-caption{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.5px; color:var(--text-faint); padding:10px 14px; border-top:1px solid var(--line); } /* ---- Como funciona ---- */ .lp-steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:20px; } .lp-step{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px 20px; } .lp-step-num{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gold); border:1px solid var(--gold-soft); border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .lp-step h3{ font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:14px; margin:0 0 6px; color:var(--text); } .lp-step p{ font-size:12.5px; line-height:1.6; color:var(--text-dim); margin:0 0 14px; } .lp-step p:last-of-type{ margin-bottom:0; } /* ---- Tarjetas de precio (reusan .lp-step) ---- */ .lp-price-card{ text-align:center; } .lp-price-card h3{ font-size:15px; margin-bottom:10px; } .lp-price{ font-family:'Fraunces', serif; font-weight:700; font-size:28px; color:var(--gold); margin:0 0 12px; } .lp-price-card .lp-cta-primary{ display:inline-block; margin-top:10px; padding:10px 20px; font-size:11px; } /* ---- Catalogo: tarjetas de libro (una por mitologia) ---- */ .lp-books{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:22px; align-items:stretch; } .lp-books-cargando{ grid-column:1 / -1; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-faint); padding:20px 0; } .lp-book-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:26px 24px; text-align:left; } .lp-book-card--disponible{ border-color:var(--line-strong); } /* Emblema propio de cada libro (ver construirTarjetaLibro en landing.js y ".lp-hero-emblem" mas arriba, mismo tratamiento circular). */ .lp-book-emblem{ width:52px; height:52px; border-radius:50%; border:1px solid var(--gold-soft); background-size:cover; background-position:center; margin-bottom:14px; } .lp-book-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--sage); margin-bottom:10px; } .lp-book-card--proximo .lp-book-eyebrow{ color:var(--text-faint); } /* Insignia de oferta (ver construirTarjetaLibro en landing.js) -- solo aparece cuando el libro tiene un descuento general activo. */ .lp-book-oferta{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; } .lp-book-oferta-badge{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:0.3px; color:#fff; background:var(--wine); padding:3px 9px; border-radius:9px; } .lp-book-oferta-precio{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-dim); } .lp-book-oferta-precio s{ color:var(--text-faint); margin-right:4px; } /* Precio sin descuento (ver construirBloquePrecio en landing.js) -- mismo look que ".lp-book-oferta-precio" para que no salte la tipografia entre tarjetas con y sin oferta activa. */ .lp-book-precio{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-dim); margin-bottom:10px; } .lp-book-title{ font-family:'Fraunces', serif; font-weight:700; font-size:20px; margin:0 0 4px; color:var(--text); } .lp-book-card--proximo .lp-book-title{ color:var(--text-dim); } .lp-book-subtitle{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gold-soft); margin:0 0 12px; } .lp-book-desc{ font-size:13px; line-height:1.6; color:var(--text-dim); margin:0 0 18px; flex-grow:1; } .lp-book-stats{ display:flex; gap:18px; margin-bottom:20px; font-size:12px; color:var(--text-faint); } .lp-book-stats strong{ font-family:'Fraunces', serif; color:var(--gold); font-size:16px; margin-right:4px; } .lp-book-card .lp-cta-primary{ align-self:flex-start; padding:10px 20px; font-size:11px; } .lp-book-card--proximo{ opacity:0.6; } /* ---- CTA final ---- */ .lp-cta-final{ text-align:center; padding:60px 0 80px; } .lp-cta-final h2{ font-family:'Fraunces', serif; font-weight:700; font-size:clamp(22px, 4vw, 30px); margin:0 0 22px; color:var(--text); } /* ---- Footer ---- */ .lp-footer{ border-top:1px solid var(--line); padding:26px 0 40px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.5px; color:var(--text-faint); } @media (max-width:560px){ .lp-header{ padding:20px 0; } .lp-hero{ padding:40px 0 48px; } .lp-section{ padding:48px 0; } .lp-stats{ gap:20px 32px; } }