/* ────────────────────────────────────────────────────────────────────────── Mis Dineros — landing Paleta: Pantone Blue Snorkel #0077B6 (idéntica a la app Android) Fonts: Fraunces (display), IBM Plex Sans (body), JetBrains Mono (detalle) ────────────────────────────────────────────────────────────────────────── */ :root { /* ── Tokens de marca (constantes, no cambian con el tema) ───────────── */ --snorkel: #0077B6; --cyan: #00A8DC; --night: #0F1C2E; /* fondo del icono adaptativo */ --night-deep: #050A14; /* Categorías (idénticas a CategoryStreaming, CategoryMusica, …) */ --c-streaming: #E53935; --c-musica: #8E24AA; --c-product: #1E88E5; --c-nube: #00ACC1; --c-gaming: #43A047; /* ── Tokens semánticos (modo claro por defecto) ─────────────────────── */ /* Alineados con md_theme_light_* de app/.../theme/Color.kt */ --snorkel-deep: #006492; /* primary */ --snorkel-soft: #C9E6FF; /* primaryContainer */ --snorkel-ink: #001E2F; /* onPrimaryContainer */ --paper: #F6FAFE; /* background */ --ink: #181C1F; /* onBackground */ --ink-soft: #40484F; /* onSurfaceVariant */ --ink-mute: #71787F; /* outline */ --line: #DCE4EB; /* surfaceVariant */ --line-soft: #EDF1F5; /* inverseOnSurface */ --surface-card: #FFFFFF; --hero-grad-1: rgba(0,168,220,0.12); --hero-grad-2: rgba(0,119,182,0.10); --kpi-grad-1: #0077B6; --kpi-grad-2: #006492; --shadow-soft: 0 1px 2px rgba(0,30,47,.06), 0 8px 24px -12px rgba(0,30,47,.18); --shadow-deep: 0 30px 60px -30px rgba(0,30,47,.45), 0 12px 24px -16px rgba(0,30,47,.25); /* SVG icon tints (cambian con el tema) */ --grain-color: rgba(0,30,47,0.04); /* Tipografía & layout */ --serif: "Fraunces", "Iowan Old Style", "Georgia", serif; --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --radius: 16px; --radius-lg: 28px; --max: 1180px; } /* ── Modo oscuro por preferencia del SO (default) ─────────────────────── */ /* Alineados con md_theme_dark_* de app/.../theme/Color.kt */ @media (prefers-color-scheme: dark) { :root { --snorkel-deep: #8ACEFF; /* dark primary */ --snorkel-soft: #004B6E; /* dark primaryContainer */ --snorkel-ink: #C9E6FF; /* dark onPrimaryContainer */ --paper: #101416; /* dark background */ --ink: #E1E2E5; /* dark onBackground */ --ink-soft: #C0C7CE; /* dark onSurfaceVariant */ --ink-mute: #8A9199; /* dark outline */ --line: #2C3134; /* dark line */ --line-soft: #1A1F22; --surface-card: #181C1F; --hero-grad-1: rgba(0,168,220,0.20); --hero-grad-2: rgba(138,206,255,0.12); --kpi-grad-1: #004B6E; --kpi-grad-2: #00344E; --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-deep: 0 30px 60px -30px rgba(0,0,0,.85), 0 12px 24px -16px rgba(0,0,0,.6); --grain-color: rgba(255,255,255,0.04); } } /* ── Override manual desde el toggle ──────────────────────────────────── */ /* Al fijar .theme-light o .theme-dark en , ignoramos el SO */ html.theme-light { color-scheme: light; --snorkel-deep: #006492; --snorkel-soft: #C9E6FF; --snorkel-ink: #001E2F; --paper: #F6FAFE; --ink: #181C1F; --ink-soft: #40484F; --ink-mute: #71787F; --line: #DCE4EB; --line-soft: #EDF1F5; --surface-card: #FFFFFF; --hero-grad-1: rgba(0,168,220,0.12); --hero-grad-2: rgba(0,119,182,0.10); --kpi-grad-1: #0077B6; --kpi-grad-2: #006492; --shadow-soft: 0 1px 2px rgba(0,30,47,.06), 0 8px 24px -12px rgba(0,30,47,.18); --shadow-deep: 0 30px 60px -30px rgba(0,30,47,.45), 0 12px 24px -16px rgba(0,30,47,.25); --grain-color: rgba(0,30,47,0.04); } html.theme-dark { color-scheme: dark; --snorkel-deep: #8ACEFF; --snorkel-soft: #004B6E; --snorkel-ink: #C9E6FF; --paper: #101416; --ink: #E1E2E5; --ink-soft: #C0C7CE; --ink-mute: #8A9199; --line: #2C3134; --line-soft: #1A1F22; --surface-card: #181C1F; --hero-grad-1: rgba(0,168,220,0.20); --hero-grad-2: rgba(138,206,255,0.12); --kpi-grad-1: #004B6E; --kpi-grad-2: #00344E; --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-deep: 0 30px 60px -30px rgba(0,0,0,.85), 0 12px 24px -16px rgba(0,0,0,.6); --grain-color: rgba(255,255,255,0.04); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ─── Tipografía editorial ─────────────────────────────────────────────── */ h1, h2, h3 { font-family: var(--serif); font-weight: 450; font-variation-settings: "opsz" 144, "SOFT" 30; letter-spacing: -0.02em; margin: 0; color: var(--ink); } h1 { font-size: clamp(2.5rem, 5vw + 1rem, 5rem); line-height: 1.02; } h2 { font-size: clamp(2rem, 3vw + 1rem, 3.5rem); line-height: 1.05; } h3 { font-size: 1.35rem; line-height: 1.2; font-weight: 500; } em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; } .eyebrow { display: inline-block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--snorkel-deep); padding: 6px 12px; border: 1px solid var(--snorkel-soft); border-radius: 999px; background: color-mix(in srgb, var(--snorkel-soft) 35%, transparent); } .eyebrow--dark { color: var(--ink-soft); border-color: var(--line); background: var(--surface-card); } /* eyebrow--light siempre vive sobre el manifesto oscuro (que no cambia con el tema), así que el color es fijo y no depende de --snorkel-soft, que sí se vuelve oscuro en dark mode y se fundiría con el fondo. */ .eyebrow--light { color: #C9E6FF; border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); } /* ─── NAV ──────────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px, 4vw, 56px); background: color-mix(in srgb, var(--paper) 80%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line-soft); } .brand { display: inline-flex; align-items: center; gap: 12px; } .brand__mark { display: inline-flex; } .brand__name { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; } .nav__links { display: flex; gap: 28px; } .nav__links a { font-size: 0.95rem; color: var(--ink-soft); position: relative; } .nav__links a:hover { color: var(--snorkel-deep); } .nav__links a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--snorkel); } /* ─── Theme toggle ─────────────────────────────────────────────────────── */ .theme-toggle { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 8px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-card); color: var(--ink-soft); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; } .theme-toggle:hover { color: var(--snorkel-deep); border-color: var(--snorkel); } .theme-toggle svg { width: 18px; height: 18px; } /* Mostramos el icono opuesto al tema actual: en light se ve la luna, en dark se ve el sol — indica a dónde irías al pulsar. */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html.theme-dark .theme-toggle .icon-sun { display: block; } html.theme-dark .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { html:not(.theme-light) .theme-toggle .icon-sun { display: block; } html:not(.theme-light) .theme-toggle .icon-moon { display: none; } } /* ─── HERO ─────────────────────────────────────────────────────────────── */ .hero { position: relative; padding: clamp(56px, 9vw, 120px) clamp(20px, 4vw, 56px) clamp(64px, 8vw, 120px); background: radial-gradient(ellipse 90% 70% at 80% 0%, var(--hero-grad-1), transparent 60%), radial-gradient(ellipse 70% 60% at 10% 30%, var(--hero-grad-2), transparent 60%), var(--paper); overflow: hidden; } .hero__grain { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 10%, var(--grain-color) 1px, transparent 1px), radial-gradient(circle at 70% 80%, var(--grain-color) 1px, transparent 1px); background-size: 22px 22px, 28px 28px; pointer-events: none; opacity: 0.5; } .hero__inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .hero__copy { max-width: 640px; } .hero__title { margin-top: 22px; margin-bottom: 24px; } .hero__title-accent { display: block; color: var(--snorkel-deep); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; } .hero__lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 52ch; margin: 0 0 32px; } .hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 28px; } .btn-play { display: inline-flex; align-items: center; transition: transform .15s ease, filter .15s ease; } .btn-play img { height: 52px; width: auto; display: block; } .btn-play:hover { transform: translateY(-1px); filter: brightness(1.05); } .btn-play:focus-visible { outline: 2px solid var(--snorkel); outline-offset: 4px; border-radius: 8px; } .hero__chips { list-style: none; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-mute); letter-spacing: 0.05em; } .hero__chips .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 4px rgba(0,168,220,0.18); } /* ─── Buttons ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; font-weight: 500; font-size: 0.98rem; padding: 14px 22px; border-radius: 999px; border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn--primary { background: var(--ink); color: var(--paper); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 20px -8px rgba(15,28,46,0.5); } .btn--primary:hover { background: var(--snorkel-deep); transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { background: var(--surface-card); border-color: var(--snorkel); color: var(--snorkel-deep); } /* btn--light siempre vive sobre el manifesto oscuro: colores fijos */ .btn--light { background: #F6FAFE; color: #181C1F; margin-top: 28px; } .btn--light:hover { background: #C9E6FF; color: #001E2F; } /* ─── Phones / mockups ─────────────────────────────────────────────────── */ .phones { position: relative; width: 100%; height: 620px; perspective: 1200px; } .phone { position: absolute; width: 290px; height: 600px; background: linear-gradient(160deg, #1a2a3f 0%, #050a14 100%); border-radius: 42px; padding: 10px; box-shadow: var(--shadow-deep), inset 0 0 0 1px rgba(255,255,255,0.06); } .phone--front { right: 0; top: 10px; transform: rotate(4deg); z-index: 2; } .phone--back { left: -10px; top: 60px; transform: rotate(-6deg); z-index: 1; filter: saturate(0.92) brightness(0.98); } .phone--back::after { content: ""; position: absolute; inset: 10px; border-radius: 32px; background: linear-gradient(95deg, transparent 50%, rgba(15,28,46,0.04) 80%, rgba(15,28,46,0.10) 100%); pointer-events: none; z-index: 4; } .phone__notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 96px; height: 24px; background: #050a14; border-radius: 0 0 14px 14px; z-index: 3; } .phone__screen { width: 100%; height: 100%; background: #F6FAFE; color: #181C1F; border-radius: 32px; overflow: hidden; position: relative; /* Variables locales para que las pantallas no hereden los tokens del dark mode. Los mockups representan una captura real de la app, que en estas vistas usa el tema claro de Material — así el visitante reconoce el UI tal cual. */ --ink: #181C1F; --ink-soft: #40484F; --ink-mute: #71787F; --line: #DCE4EB; --paper: #F6FAFE; --snorkel-deep: #006492; --snorkel-soft: #C9E6FF; } /* Pantallas — replican el aspecto de Material 3 con la paleta de la app */ .screen { height: 100%; padding: 50px 18px 18px; display: flex; flex-direction: column; gap: 14px; } .screen__bar { display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); font-weight: 500; font-size: 1.05rem; color: var(--ink); padding: 0 4px 4px; } .screen__bar-icon { font-size: 1.4rem; color: var(--ink-mute); line-height: 0; } .screen__h { font-family: var(--sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); margin: 6px 0 -2px 4px; font-weight: 600; } /* Dashboard KPI */ .kpi { background: linear-gradient(135deg, var(--snorkel) 0%, var(--snorkel-deep) 100%); color: #fff; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; } .kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%); } .kpi__label { font-size: 0.78rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.08em; } .kpi__value { font-family: var(--serif); font-size: 2rem; font-weight: 500; line-height: 1; margin-top: 4px; } .kpi__sub { font-family: var(--mono); font-size: 0.72rem; opacity: 0.75; margin-top: 4px; } /* Filas de suscripción */ .row { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 8px 4px; } .row__icon { width: 32px; height: 32px; border-radius: 10px; color: #fff; font-weight: 600; font-size: 0.9rem; display: grid; place-items: center; } .row__main { display: flex; flex-direction: column; line-height: 1.2; } .row__title { font-size: 0.92rem; font-weight: 500; color: var(--ink); } .row__sub { font-size: 0.72rem; color: var(--ink-mute); margin-top: 2px; } .row__amt { font-family: var(--mono); font-size: 0.85rem; font-weight: 500; color: var(--ink); } /* Stats screen */ .screen--stats { gap: 8px; padding-left: 14px; padding-right: 14px; } .donut { align-self: center; padding: 4px 0; } .legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .legend li { display: flex; align-items: baseline; gap: 8px; font-size: 0.78rem; color: var(--ink); padding: 3px 0; } .legend i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; align-self: center; } .legend span { flex-shrink: 0; } .legend b { margin-left: auto; font-family: var(--mono); font-weight: 500; font-size: 0.7rem; color: var(--ink-soft); flex-shrink: 0; } /* ─── FEATURES ─────────────────────────────────────────────────────────── */ .features { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 56px); } .section__head { max-width: 720px; margin-bottom: 56px; } .section__title { margin: 18px 0 16px; } .section__lead { color: var(--ink-soft); font-size: 1.1rem; max-width: 56ch; } .features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .card { grid-column: span 2; background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .card:hover { border-color: var(--snorkel); transform: translateY(-2px); box-shadow: var(--shadow-soft); } .card--lg { grid-column: span 4; } .card--accent { background: linear-gradient(155deg, var(--snorkel-soft), var(--surface-card) 70%); border-color: transparent; } .card__num { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--snorkel-deep); margin-bottom: 6px; } .card h3 { margin-bottom: 4px; } .card p { color: var(--ink-soft); margin: 0; font-size: 0.98rem; } /* ─── MANIFESTO (Privacy block) ────────────────────────────────────────── */ /* Esta sección tiene fondo oscuro siempre, así que sus colores de texto son fijos (no dependen del tema de la página). */ .manifesto { background: linear-gradient(160deg, var(--night) 0%, var(--night-deep) 100%); color: #F6FAFE; position: relative; overflow: hidden; } .manifesto::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 90% 10%, rgba(0,168,220,0.18), transparent 60%), radial-gradient(600px 400px at 10% 90%, rgba(0,119,182,0.18), transparent 60%); pointer-events: none; } .manifesto__inner { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(72px, 10vw, 140px) clamp(20px, 4vw, 56px); } .manifesto__title { color: #fff; margin: 18px 0 56px; max-width: 18ch; } .manifesto__title { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; } .manifesto__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 36px; } .manifesto__grid h3 { color: #fff; font-family: var(--sans); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; } .manifesto__grid p { color: rgba(246,250,254,0.7); font-size: 0.95rem; margin: 8px 0 0; } /* ─── FOOTER ───────────────────────────────────────────────────────────── */ .foot { background: var(--paper); border-top: 1px solid var(--line); } .foot__inner { max-width: var(--max); margin: 0 auto; padding: 56px clamp(20px, 4vw, 56px) 32px; display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; } .foot__copy { color: var(--ink-mute); font-size: 0.92rem; max-width: 38ch; margin: 12px 0 0; } .foot__links { display: flex; gap: 28px; } .foot__links a { color: var(--ink-soft); font-size: 0.95rem; } .foot__links a:hover { color: var(--snorkel-deep); } .foot__line { max-width: var(--max); margin: 0 auto; padding: 18px clamp(20px, 4vw, 56px) 32px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 12px; font-size: 0.82rem; color: var(--ink-mute); } .mono { font-family: var(--mono); } /* ─── Privacy/Terms page ───────────────────────────────────────────────── */ .legal { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 40px) 80px; } .legal h1 { font-size: clamp(2.2rem, 4vw + 1rem, 3.5rem); margin-bottom: 8px; } .legal__meta { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 40px; display: block; } .legal h2 { font-size: 1.6rem; margin: 56px 0 16px; letter-spacing: -0.01em; } .legal h3 { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; margin: 28px 0 8px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--snorkel-deep); } .legal p, .legal li { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; } .legal ul { padding-left: 20px; } .legal li { margin: 6px 0; } .legal strong { color: var(--ink); font-weight: 600; } .legal a { color: var(--snorkel-deep); text-decoration: underline; text-underline-offset: 3px; } .legal a:hover { color: var(--snorkel); } .legal__intro { background: linear-gradient(155deg, var(--snorkel-soft), var(--surface-card) 70%); border: 1px solid var(--snorkel-soft); border-radius: var(--radius-lg); padding: 28px 32px; margin-bottom: 16px; } .legal__intro p { margin: 0; color: var(--snorkel-ink); } .legal__intro strong { color: var(--snorkel-ink); } .legal__back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); margin-bottom: 32px; } .legal__back:hover { color: var(--snorkel-deep); } /* ─── RESPONSIVE ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { .nav__links { display: none; } .hero__inner { grid-template-columns: 1fr; } .phones { height: 560px; max-width: 360px; margin: 24px auto 0; } .phone--front { right: 0; } .phone--back { left: 0; } .features__grid { grid-template-columns: repeat(2, 1fr); } .card, .card--lg { grid-column: span 2; } .manifesto__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } } @media (max-width: 520px) { .features__grid { grid-template-columns: 1fr; } .card, .card--lg { grid-column: span 1; } .manifesto__grid { grid-template-columns: 1fr; } .foot__inner { flex-direction: column; } .foot__line { flex-direction: column; align-items: flex-start; } .phone { width: 260px; height: 540px; } .phone--back { transform: rotate(-6deg) scale(0.92); } /* Compactar el contenido interno del mockup para que entre en el viewport reducido (KPI, "próximas renovaciones", etc.). */ .screen { padding: 44px 14px 14px; gap: 10px; } .kpi { padding: 14px 16px; } .kpi__value { font-size: 1.6rem; } .kpi__sub { font-size: 0.66rem; } .row { padding: 6px 4px; } .row__title { font-size: 0.86rem; } .row__sub { font-size: 0.66rem; } .row__amt { font-size: 0.78rem; } .screen__h { font-size: 0.7rem; margin: 4px 0 -4px; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { .btn, .card { transition: none; } }