/* Landing pública (server-rendered). CSS autocontenido: no comparte bundle con la SPA. Sigue las reglas de diseño del proyecto — sobrio, un color de acento, claro/oscuro, mobile-first. Todos los valores viven como tokens aquí arriba. Debe parecerse a la app: misma familia (IBM Plex Sans) y mismo acento ultramar. Tema: el MODO NOCHE es el valor por defecto (`:root`). El claro se activa solo si el usuario lo elige (`:root[data-theme="light"]`, marcado por el script de antes de pintar). El verde/rojo se reservan a cifras financieras. */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin.b2c9031d9fd6.woff2") format("woff2"); } /* Modo noche (por defecto). */ :root { --bg: #0f1214; --bg-subtle: #14181b; --surface: #171b1f; --surface-2: #1d2228; --border: #262c33; --border-strong: #333b44; --text: #e7eaed; --text-muted: #98a2ad; --accent: #7c88ff; /* ultramar (variante modo oscuro) */ --accent-soft: #333a63; --accent-contrast: #0f1214; --pos: #7fd0b4; /* verde: solo cifras financieras */ --neg: #f0857b; /* rojo: solo cifras financieras */ --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.32); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --radius: 12px; --radius-lg: 18px; --gap: 16px; --maxw: 1120px; --font: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Modo día. */ :root[data-theme="light"] { --bg: #ffffff; --bg-subtle: #f6f7f9; --surface: #ffffff; --surface-2: #f0f2f6; --border: #e4e7ec; --border-strong: #d3d8df; --text: #1a1d21; --text-muted: #5b6472; --accent: #2b34d6; --accent-soft: #cfd3f6; --accent-contrast: #ffffff; --pos: #1f7a5a; --neg: #b42318; --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 16px 40px rgba(16, 24, 40, 0.1); --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.55; } a { color: var(--accent); } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .container--narrow { max-width: 680px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; } /* ── Header / footer ─────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: saturate(1.4) blur(8px); } .site-header__inner { display: flex; align-items: center; height: 62px; } .site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } .site-header__nav { display: flex; gap: 10px; align-items: center; } .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; color: var(--text); text-decoration: none; letter-spacing: -0.01em; } .brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: var(--accent-contrast); font-size: 15px; font-weight: 700; } /* Interruptor de tema (sol / luna). En noche se ve el sol; en día, la luna. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-muted); cursor: pointer; } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Modo noche por defecto: se ve el sol. Solo en modo día se cambia a la luna. Se define así (no por [data-theme="dark"]) para que, incluso sin JS y sin atributo, se muestre el sol —coherente con el modo noche por defecto—. */ .theme-toggle__moon { display: none; } :root[data-theme="light"] .theme-toggle__sun { display: none; } :root[data-theme="light"] .theme-toggle__moon { display: block; } .site-footer { border-top: 1px solid var(--border); margin-top: 72px; padding: 28px 0; color: var(--text-muted); font-size: 14px; } .site-footer__inner { display: flex; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; } .site-footer a { color: var(--text-muted); } /* ── Hero ────────────────────────────────────────────────────────────────── */ .hero { padding: 56px 0 40px; } .hero__grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; } .eyebrow { display: inline-block; margin: 0 0 18px; padding: 5px 13px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .hero__title { font-size: 36px; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 18px; max-width: 15ch; } .hero__subtitle { font-size: 18px; color: var(--text-muted); margin: 0 0 28px; max-width: 54ch; } .hero__brokers { margin: 20px 0 0; font-size: 14px; color: var(--text-muted); } /* ── Vista previa de la app ──────────────────────────────────────────────── */ .preview { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; } .preview__chrome { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .preview__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); } .preview__path { margin-left: 8px; font-size: 13px; color: var(--text-muted); } .preview__body { padding: 22px; } .preview__hero { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; } .preview__label { font-size: 13px; color: var(--text-muted); } .preview__figure { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .preview__sub { font-size: 13px; color: var(--text-muted); } .preview__ribbon { display: flex; align-items: flex-end; gap: 6px; height: 84px; margin-bottom: 20px; } .preview__ribbon span { flex: 1; border-radius: 4px 4px 0 0; background: var(--accent-soft); } .preview__ribbon span.is-current { background: var(--accent); } .preview__rows { display: flex; flex-direction: column; } .preview__row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--border); font-size: 14px; font-variant-numeric: tabular-nums; } .preview__tk { color: var(--text); } /* Verde/rojo reservados a cifras financieras (aquí, resultado de cada posición). */ .pos { color: var(--pos); font-weight: 600; } .neg { color: var(--neg); font-weight: 600; } /* ── Secciones ───────────────────────────────────────────────────────────── */ .section-title { font-size: 26px; letter-spacing: -0.015em; margin: 0 0 8px; } .features { padding: 56px 0; background: var(--bg-subtle); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .features .section-title { margin-bottom: 28px; } .features__grid { display: grid; gap: 16px; grid-template-columns: 1fr; } .feature { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color 0.15s ease, transform 0.15s ease; } .feature:hover { border-color: var(--border-strong); transform: translateY(-2px); } .feature__icon { display: block; width: 30px; height: 30px; margin-bottom: 14px; color: var(--accent); } .feature__title { font-size: 17px; margin: 0 0 6px; } .feature p { margin: 0; color: var(--text-muted); font-size: 15px; } .shots { padding: 64px 0; } .shots .section-title { margin-bottom: 28px; } .shots__grid { display: grid; gap: 22px; grid-template-columns: 1fr; } .shot { margin: 0; } .shot__frame { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } .shot__frame img, .shot__frame svg { width: 100%; height: auto; display: block; } .shot figcaption { margin-top: 12px; font-size: 14px; color: var(--text-muted); } /* ── CTA final ───────────────────────────────────────────────────────────── */ .cta-tail { padding: 8px 0 64px; } .cta-tail__card { padding: 44px 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle); text-align: center; } .cta-tail__lead { color: var(--text-muted); margin: 0 0 26px; font-size: 17px; } /* ── Botones / accesos ───────────────────────────────────────────────────── */ .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; } .hero__actions--center { justify-content: center; } /* Acceso vs. sesión iniciada, resuelto por el script de . `display: contents` deja que los botones de acceso sigan siendo hijos directos del contenedor flex (mismo gap); "Ir a mis posiciones" solo aparece con sesión. */ .auth-out { display: contents; } /* .btn.auth-in (not bare .auth-in): the link also carries .btn, whose `display: inline-flex` is defined later with equal specificity and would otherwise win, leaving "Ir a mis posiciones" always visible. */ .btn.auth-in { display: none; } html.is-authed .auth-out { display: none; } html.is-authed .btn.auth-in { display: inline-flex; } .btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; font-weight: 600; padding: 12px 18px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; line-height: 1.2; white-space: nowrap; } .btn--primary { background: var(--accent); color: var(--accent-contrast); } .btn--primary:hover { filter: brightness(1.06); } .btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn--ghost:hover { background: var(--surface-2); } .btn--sm { padding: 8px 14px; font-size: 14px; } .btn--lg { padding: 14px 22px; font-size: 17px; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Legal (política de privacidad) ──────────────────────────────────────── */ .legal { padding: 56px 0; } .legal h1 { font-size: 28px; margin: 0 0 8px; } .legal__updated { color: var(--text-muted); margin: 0 0 32px; } .legal h2 { font-size: 18px; margin: 28px 0 6px; } .legal p { color: var(--text-muted); margin: 0 0 12px; } /* ── Móvil estrecho (iPhone 11 Pro Max y menores) ──────────────────────────── En 414px la marca y los botones de acceso quedaban casi pegados: se encogen un poco los botones (lo que pidió Pedro) y se aprietan las separaciones para que la cabecera respire. */ @media (max-width: 480px) { .site-header__actions { gap: 8px; } .site-header__nav { gap: 8px; } .site-header__nav .btn--sm { padding: 7px 11px; font-size: 13px; } .brand { font-size: 16px; gap: 7px; } .brand__mark { width: 24px; height: 24px; font-size: 14px; } } /* ── Tablet / escritorio ─────────────────────────────────────────────────── */ @media (min-width: 720px) { .hero { padding: 80px 0 56px; } .hero__title { font-size: 52px; } .features__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .shots__grid { grid-template-columns: repeat(3, 1fr); } .cta-tail__card { padding: 56px 32px; } } @media (min-width: 940px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; } } @media (prefers-reduced-motion: reduce) { .feature { transition: none; } }