/* ============================================================ LANDING Β· CSS propio (fuente editable) TraducciΓ³n del handoff de UX (specs/005-landing/handoff/styles.css) a CSS plano del proyecto. Solo las 4 secciones vivas del MVP: navbar, hero + carta FIFA, CTA final, footer. (Deuda 005-D-a: las otras 4 secciones no se traducen aΓΊn.) AISLAMIENTO (T-B3 Β· πŸ”΄): TODO va scopeado bajo `.landing` para que los nombres que chocan con el sistema del auth (.btn, .btn-primary, .btn-ghost y .card) NO pisen a utilities.css. El auth nunca carga este archivo y, aunque lo hiciera, `.landing .card` no matchea sin ese ancestro. La landing pone class="landing" en el (Bloque C). TOKENS: todo deriva de var(--token) de tokens.css. Sin #hex de marca ni px "de diseΓ±o" sueltos (solo rgba()/clamp()/vw/% como el handoff). Se carga DESPUΓ‰S de app.css (que ya trae tokens + utilities). ============================================================ */ /* Wrapper de la landing. - overflow-x: hidden β†’ contiene los glows decorativos (hero-glow, glow de la carta) que sobresalen a propΓ³sito; evita scroll horizontal (CA-5). Lo traΓ­a el `body` del handoff. - --card-clip: silueta FIFA (helper no-cromΓ‘tico). */ .landing { overflow-x: hidden; --card-clip: polygon(9% 0%, 91% 0%, 100% 5.5%, 100% 83%, 52% 99%, 50% 100%, 48% 99%, 0% 83%, 0% 5.5%); } /* ── TipografΓ­a display ────────────────────────────────────── */ .landing .eyebrow { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-gold); } .landing .hero-title { font-family: var(--font-display); font-weight: var(--weight-black); font-size: clamp(2.75rem, 8.5vw, 5.25rem); line-height: .92; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-text); margin: 0; } .landing .section-title { font-family: var(--font-display); font-weight: var(--weight-black); font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-text); margin: 0; } .landing .lead { color: var(--color-text-2); font-size: clamp(1rem, 2.2vw, 1.25rem); line-height: 1.55; } /* ── Botones (variante del diseΓ±o: radio full + gradiente) ──── */ /* Scopeados bajo .landing: NO tocan el .btn del auth (utilities.css). */ .landing .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: var(--tracking-base); text-transform: uppercase; text-decoration: none; padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), filter var(--dur-base) var(--ease), background var(--dur-base) var(--ease); } .landing .btn-primary { color: var(--color-bg); background: linear-gradient(180deg, var(--color-primary-soft), var(--color-primary) 45%, var(--color-primary-dark)); box-shadow: var(--shadow-cta); } .landing .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 30px rgba(70,192,91,.45); } .landing .btn-primary:active { transform: translateY(0); } .landing .btn-ghost { color: var(--color-text); background: transparent; border-color: var(--color-border-strong); } .landing .btn-ghost:hover { background: var(--color-surface); border-color: var(--color-primary); transform: translateY(-2px); } .landing .btn-lg { font-size: var(--text-lg); padding: var(--space-4) var(--space-8); } /* ── Navbar ────────────────────────────────────────────────── */ .landing .nav { transition: background var(--dur-base) var(--ease), backdrop-filter var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); border-bottom: 1px solid transparent; } .landing .nav.is-scrolled { background: color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--color-border); } .landing .nav-inner { height: 4rem; } /* combinar con .container-page + flex utils */ .landing .nav-link { position: relative; color: var(--color-text-2); text-decoration: none; font-weight: var(--weight-medium); transition: color var(--dur-base) var(--ease); } .landing .nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease); } .landing .nav-link:hover { color: var(--color-text); } .landing .nav-link:hover::after { transform: scaleX(1); } /* MenΓΊ mΓ³vil overlay */ .landing .mobile-menu { background: color-mix(in srgb, var(--color-bg) 96%, transparent); transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease); } .landing .mobile-menu[hidden] { display: none; } /* Tinte seguro (color-mix; Tailwind /alpha no funciona sobre var()) */ .landing .tint-primary { background: color-mix(in srgb, var(--color-primary) 16%, transparent); border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); } /* ── Layout de la landing (especΓ­fico de estas secciones) ───── */ .landing .hero { position: relative; overflow: hidden; padding-block: clamp(6rem, 14vw, 8rem) clamp(3.5rem, 9vw, 6rem); } .landing .grid-hero { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: center; } .landing .hero-text { text-align: center; } .landing .cta-row { display: flex; flex-direction: column; gap: var(--space-4); justify-content: center; } @media (min-width: 640px) { .landing .cta-row { flex-direction: row; } } @media (min-width: 1024px) { .landing .grid-hero { grid-template-columns: 1fr 1fr; gap: var(--space-8); } .landing .hero-text { text-align: left; } .landing .cta-row { justify-content: flex-start; } } .landing .cta-final { position: relative; overflow: hidden; text-align: center; padding-block: clamp(5rem, 14vw, 8rem); background: linear-gradient(180deg, var(--color-primary-dark), var(--color-bg) 82%); } .landing .footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: start; } @media (min-width: 640px) { .landing .footer-grid { grid-template-columns: 1fr 1fr; } } /* ── Hero glow radial (verde + dorado sutil) ───────────────── */ .landing .hero-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .landing .hero-glow::before, .landing .hero-glow::after { content: ""; position: absolute; border-radius: var(--radius-full); filter: blur(90px); } .landing .hero-glow::before { width: 60vw; height: 60vw; max-width: 620px; max-height: 620px; top: -12%; right: -8%; background: radial-gradient(circle, rgba(232,195,90,.20), transparent 70%); } .landing .hero-glow::after { width: 55vw; height: 55vw; max-width: 560px; max-height: 560px; bottom: -18%; left: -12%; background: radial-gradient(circle, rgba(91,217,115,.18), transparent 70%); } /* Pista de "toca la carta" */ .landing .card-hint { margin-top: var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); } /* ── Reveal on-scroll ──────────────────────────────────────── */ /* Gated por .js (lo pone el