/* ============================================================================
SportAnalysis — landing pública
----------------------------------------------------------------------------
Solo lo carga la landing (head.php con $useLandingCss = true). Depende de
tokens.css + base.css + components.css: acá NO se define un solo color, una
sola fuente ni un solo radio — todo sale de los tokens del sistema, así el
dark mode funciona sin escribir un segundo bloque de colores.
La nav pública (.publicnav*) y todo lo de auth viven en components.css,
porque login/registro/perfil no cargan este archivo.
Convenciones que se respetan acá:
· Hairlines de 1px --border en vez de sombras. El único glow es el anillo
0 0 0 4px var(--signal-wash) de foco/hover.
· Barlow Condensed solo títulos y marca. IBM Plex Mono solo datos y
metadatos (eyebrows, cifras, etiquetas de widget). El resto, Plex Sans.
· Ningún texto en --accent sobre --signal-wash (ese par da ~3.8:1, falla AA).
Los eyebrows van en --accent-strong sobre superficie plana (~4.8:1 claro,
~10:1 oscuro); el texto sobre wash va en --text-muted.
· Una sola curva (--ease-out) en dos duraciones. Movimiento: dos elementos
animados en toda la página, ambos apagados con prefers-reduced-motion.
· Breakpoints: 1024px (colapso de grillas de 2+ columnas) y 720px (mobile,
valor canónico del sistema). Desktop-first con max-width, como el resto.
============================================================================ */
/* Constantes de layout locales de la landing. No son tokens de diseño (no hay
color acá y no cambian con el tema), y este archivo solo lo carga la landing,
así que no ensucian tokens.css. */
:root {
--lp-max: 1120px;
--lp-gutter: var(--space-5);
--lp-section-y: clamp(56px, 8vw, 96px);
}
/* Nav por anclas: scroll suave, apagado con reduced-motion (ver el bloque final). */
html {
scroll-behavior: smooth;
}
/* No se pone overflow-x:hidden en : rompería el position:sticky de la nav
pública. Lo único que puede sobresalir es la grilla del hero, y esa la recorta
el propio .lp-hero con su overflow:hidden. */
/* ============================================================
1. ESTRUCTURA COMÚN
------------------------------------------------------------
Markup de una sección tipo:
Cómo funciona
De la planilla al tablero en cuatro pasos
…
…contenido…
.lp-section-alt agrega fondo hundido para alternar el ritmo vertical.
============================================================ */
.lp-wrap {
max-width: var(--lp-max);
margin: 0 auto;
padding-left: var(--lp-gutter);
padding-right: var(--lp-gutter);
}
.lp-section {
padding: var(--lp-section-y) 0;
border-top: 1px solid var(--border);
/* La nav pública es sticky: sin esto el ancla queda tapada por la barra. */
scroll-margin-top: 76px;
}
.lp-section-alt {
background: var(--surface-sunken);
}
.lp-section-head {
max-width: 64ch;
margin-bottom: var(--space-6);
}
/* Eyebrow mono con el tick de firma. Sin chip: el acento sobre wash no llega a AA
a este tamaño, y el tick ya trae la identidad del instrumento. */
.lp-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent-strong);
margin-bottom: var(--space-3);
}
.lp-eyebrow::before {
content: '';
width: 3px;
height: 13px;
border-radius: 2px;
background: var(--accent);
flex-shrink: 0;
}
.lp-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(28px, 3.6vw, 42px);
line-height: 1.04;
letter-spacing: -0.01em;
text-wrap: balance;
}
.lp-lede {
margin-top: var(--space-3);
color: var(--text-muted);
font-size: 16px;
line-height: 1.55;
max-width: 58ch;
}
/* Modificador de .btn para las CTA grandes de la landing.
Markup: Crear cuentaVer cómo funciona */
.lp-btn {
min-height: 46px;
padding: 12px 20px;
font-size: 14.5px;
transition: background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.lp-btn:not(.btn-secondary):hover {
background: var(--accent-strong);
}
.lp-btn.btn-secondary:hover {
border-color: var(--accent);
color: var(--accent-strong);
background: var(--signal-wash);
}
.lp-btn:focus-visible {
box-shadow: 0 0 0 4px var(--signal-wash);
}
/* ============================================================
2. HERO
------------------------------------------------------------
Markup: