/* ───────────────────────────────────────────────────────────── Valkirias — landing Los colores son los literales de AppPalette (lib/theme/app_theme.dart). Si un token cambia allí, hay que cambiarlo aquí: nada los sincroniza. Tema: claro por defecto, oscuro si lo pide el sistema, y `data-theme` en el manda sobre las dos cosas — es el equivalente del ThemeController de la app (system / light / dark). El bloque oscuro está escrito dos veces a propósito: una para la media query y otra para el atributo. Un `light-dark()` lo evitaría, pero dejaría fuera a los navegadores que no lo tengan. ───────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* AppPalette.light */ --background: #F5F1EA; /* Cream */ --surface: #FBF8F2; /* Paper */ --ink: #161412; --ink-muted: #8A7E66; /* Clay */ --border: #E5DFD2; --tile: #EFEAE0; --sand: #EBE4D5; --inverse-surface: #161412; --on-inverse-surface: #F5F1EA; --on-inverse-accent: #EFA5A2; --accent: #C9302C; /* Rust */ --accent-soft: #F7E4E1; --accent-ink: #9E2925; --success: #5C7558; /* Sage */ --warning: #B68A2E; /* Gold */ --display: "Playfair Display", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --wrap: 1120px; --r-card: 22px; --r-row: 18px; --r-btn: 14px; /* El botón enseña el tema al que lleva, no el que está puesto. */ --icon-sun: none; --icon-moon: block; } /* El sistema, mientras nadie haya elegido en esta página. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; /* AppPalette.dark */ --background: #141110; --surface: #1D1917; --ink: #F2EDE7; --ink-muted: #9C918A; --border: #2E2926; --tile: #272220; --sand: #2B2621; --inverse-surface: #262120; --on-inverse-surface: #F2EDE7; --on-inverse-accent: #E99A98; --accent: #D8484D; --accent-soft: #3A1F1F; --accent-ink: #E99A98; --success: #7FA476; --warning: #D9B845; --icon-sun: block; --icon-moon: none; } } /* La elección del botón, por encima del sistema. */ :root[data-theme="dark"] { color-scheme: dark; /* AppPalette.dark */ --background: #141110; --surface: #1D1917; --ink: #F2EDE7; --ink-muted: #9C918A; --border: #2E2926; --tile: #272220; --sand: #2B2621; --inverse-surface: #262120; --on-inverse-surface: #F2EDE7; --on-inverse-accent: #E99A98; --accent: #D8484D; --accent-soft: #3A1F1F; --accent-ink: #E99A98; --success: #7FA476; --warning: #D9B845; --icon-sun: block; --icon-moon: none; } /* ── Base ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--background); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 16px; } h1 { font-size: clamp(38px, 5.6vw, 62px); } h2 { font-size: clamp(30px, 4vw, 44px); } h3 { font-size: 21px; margin-bottom: 10px; } p { margin: 0 0 14px; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .wrap.narrow { max-width: 760px; } .center { text-align: center; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 20; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: var(--r-btn); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* Eyebrow rojo → titular serif → cuerpo gris: el patrón de la app. */ .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; } .eyebrow.accent-on-dark { color: var(--on-inverse-accent); } .lead, .section-lead { color: var(--ink-muted); font-size: 18px; max-width: 58ch; } .on-dark { color: var(--on-inverse-surface); } .on-dark-muted { color: rgba(245, 241, 234, 0.68); } /* ── Marca ────────────────────────────────────────────────── */ .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .glyph { width: 23px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: miter; stroke-linecap: square; } .wordmark { font-size: 16px; font-weight: 600; letter-spacing: 0.15em; } /* ── Botones ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: var(--r-btn); font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-sm { padding: 10px 18px; font-size: 14px; } .btn-solid { background: var(--inverse-surface); color: var(--on-inverse-surface); } .btn-solid:hover { background: var(--ink); opacity: .9; } .btn-accent { background: var(--accent); color: #FFF7F5; } .btn-accent:hover { background: var(--accent-ink); } .btn-ghost { border-color: var(--border); background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--tile); } .btn-outline-light { border-color: rgba(245, 241, 234, 0.35); color: var(--on-inverse-surface); } .btn-outline-light:hover { background: rgba(245, 241, 234, 0.08); } .arrow { transition: transform .15s ease; } .btn:hover .arrow { transform: translateX(3px); } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .center-row { justify-content: center; } /* ── Nav ──────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--background) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); } .nav-row { display: flex; align-items: center; gap: 24px; height: 68px; } .nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 14px; font-weight: 500; } .nav-links a { color: var(--ink-muted); text-decoration: none; } .nav-links a:hover { color: var(--ink); } /* Selector de tema: el equivalente de la fila "Apariencia" de la app. */ .theme-toggle { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 12px; border: 1px solid var(--border); background: var(--tile); color: var(--ink); cursor: pointer; transition: background .15s ease, border-color .15s ease; } .theme-toggle:hover { background: var(--sand); border-color: var(--ink-muted); } .theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .icon-sun { display: var(--icon-sun); } .theme-toggle .icon-moon { display: var(--icon-moon); } /* ── Hero ─────────────────────────────────────────────────── */ .hero { padding: 88px 0 72px; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero-facts { list-style: none; margin: 36px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border); display: grid; gap: 10px; color: var(--ink-muted); font-size: 15px; } .hero-facts strong { color: var(--ink); font-weight: 600; } /* Maqueta del móvil */ .hero-art { display: flex; justify-content: center; } .phone { width: 320px; padding: 12px; border-radius: 42px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 32px 70px -30px rgba(22, 20, 18, 0.45); } .phone-screen { border-radius: 32px; background: var(--background); border: 1px solid var(--border); padding: 20px 16px; display: grid; gap: 12px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .mini-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; } .mini-title { font-family: var(--display); font-size: 20px; margin: 0; } .bell { position: relative; width: 34px; height: 34px; border-radius: 12px; background: var(--tile); display: inline-block; } .bell::before { content: ""; position: absolute; inset: 10px; border: 1.6px solid var(--ink-muted); border-radius: 50% 50% 4px 4px; } .bell-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--tile); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; } .card-dark { background: var(--inverse-surface); color: var(--on-inverse-surface); border-color: transparent; } .card-h { font-family: var(--display); font-size: 22px; margin: 0 0 4px; } .card-h.sm { font-size: 19px; margin: 0; } .card-sub { font-size: 12px; color: var(--ink-muted); margin: 0; } .card-sub.center { text-align: center; margin-top: 8px; } .card-dark .card-sub { color: rgba(245, 241, 234, 0.6); } .pill-cta { display: inline-block; margin-top: 14px; padding: 9px 16px; border-radius: 12px; background: var(--accent); color: #FFF7F5; font-size: 12px; font-weight: 600; } .card-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ring { width: 72px; height: 72px; margin: 10px auto 0; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) 0 75%, var(--tile) 75% 100%); position: relative; font-size: 13px; font-weight: 600; } .ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); } .ring span { position: relative; } .rings { position: relative; width: 72px; height: 72px; margin: 10px auto 0; } .rings span { position: absolute; border-radius: 50%; border: 6px solid var(--tile); } .ring-a { inset: 0; border-top-color: var(--accent); border-right-color: var(--accent); } .ring-b { inset: 11px; border-top-color: var(--warning); } .ring-c { inset: 22px; border-top-color: var(--success); border-left-color: var(--success); } .delta { font-size: 12px; font-weight: 600; color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); padding: 3px 9px; border-radius: 999px; } .spark { width: 100%; height: 44px; margin-top: 10px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } /* ── Tira de valores ──────────────────────────────────────── */ .strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--sand); padding: 30px 0; } .strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .strip-k { font-family: var(--display); font-size: 26px; margin: 0 0 2px; } .strip-v { font-size: 13px; color: var(--ink-muted); margin: 0; } /* ── Secciones ────────────────────────────────────────────── */ .section { padding: 92px 0; } .section.soft { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } .feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 26px 24px; } .section.soft .feature { background: var(--background); } .tile { width: 44px; height: 44px; border-radius: var(--r-row); background: var(--accent-soft); display: grid; place-items: center; margin-bottom: 16px; } .tile svg { width: 22px; height: 22px; fill: none; stroke: var(--accent-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .feature p { color: var(--ink-muted); font-size: 15px; } .ticks { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: grid; gap: 8px; font-size: 14px; color: var(--ink-muted); } .ticks li { padding-left: 22px; position: relative; } .ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 6px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); } .ticks.on-dark-muted { border-top-color: rgba(245, 241, 234, 0.16); } /* ── Banda de coaching ────────────────────────────────────── */ .band { background: var(--inverse-surface); color: var(--on-inverse-surface); } .band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .steps { display: grid; gap: 12px; } .step { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-row); background: rgba(245, 241, 234, 0.05); border: 1px solid rgba(245, 241, 234, 0.1); } .step-n { font-family: var(--display); font-size: 18px; color: var(--on-inverse-accent); min-width: 28px; } .step-h { font-weight: 600; margin: 0 0 3px; } .step-p { margin: 0; font-size: 14px; color: rgba(245, 241, 234, 0.62); } /* ── Roles ────────────────────────────────────────────────── */ .roles .role { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 28px 24px; } .roles .role p:last-child { color: var(--ink-muted); font-size: 15px; margin: 0; } .role-featured { background: var(--inverse-surface); border-color: transparent; } /* ── Detalles ─────────────────────────────────────────────── */ .detail { padding: 22px 20px; border-radius: var(--r-row); background: var(--background); border: 1px solid var(--border); } .detail-h { font-weight: 600; margin: 0 0 6px; } .detail p:last-child { margin: 0; font-size: 14px; color: var(--ink-muted); } /* ── FAQ ──────────────────────────────────────────────────── */ details { border-bottom: 1px solid var(--border); padding: 18px 0; } details:first-of-type { border-top: 1px solid var(--border); margin-top: 32px; } summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; font-weight: 400; } details[open] summary::after { content: "–"; } details p { margin: 12px 0 0; color: var(--ink-muted); max-width: 62ch; } /* ── Cierre ───────────────────────────────────────────────── */ .closing { background: var(--inverse-surface); color: var(--on-inverse-surface); } .chevron { width: 56px; height: 44px; margin: 0 auto 24px; fill: none; stroke: var(--on-inverse-surface); stroke-width: 3; stroke-linejoin: miter; } .closing .section-lead { margin: 0 auto; } .fineprint { margin-top: 22px; font-size: 14px; color: rgba(245, 241, 234, 0.55); } .fineprint a { color: var(--on-inverse-accent); } /* ── Footer ───────────────────────────────────────────────── */ .footer { padding: 34px 0; border-top: 1px solid var(--border); background: var(--background); } .footer-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .footer-links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; } .footer-links a { color: var(--ink-muted); text-decoration: none; } .footer-links a:hover { color: var(--ink); } .copy { margin: 0; font-size: 14px; color: var(--ink-muted); } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 880px) { .hero { padding: 56px 0 48px; } .hero-grid, .band-grid { grid-template-columns: 1fr; gap: 44px; } .hero-art { order: -1; } .grid-3 { grid-template-columns: 1fr; } .strip-grid { grid-template-columns: repeat(2, 1fr); } .nav-links { display: none; } .theme-toggle { margin-left: auto; } /* sin los enlaces, el hueco es suyo */ .section { padding: 66px 0; } } @media (max-width: 520px) { .grid-4, .strip-grid { grid-template-columns: 1fr; } .phone { width: 100%; max-width: 320px; } .footer-row { flex-direction: column; align-items: flex-start; } .footer-links { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }