/* ========================================================================== OptiMind IA — theme.css · base premium reutilizable Importar y sobreescribir SOLO las variables de marca en :root. Filosofía: luz coherente, tipografía con carácter, cero look-IA. Ver CLAUDE.md. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } :root { /* ---- Base (sobreescribir por marca) ---- */ --bg: #070a12; /* azul-tinta profundo, NO negro puro */ --bg-1: #0c1120; --bg-2: #131a2c; --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.065); /* ---- Acento de marca ---- */ --accent: #24d3ee; --accent-soft: #8fe6f6; --accent-2: #2e7bff; --accent-2-deep: #1657d6; /* ---- Texto ---- */ --text: #eef3fb; --text-2: #a6b2c9; --text-3: #63708a; --border: rgba(150, 178, 224, 0.12); --ink: #04121a; /* texto sobre botón claro */ /* ---- Gradientes ---- */ --grad-brand: linear-gradient(100deg, var(--accent), var(--accent-2)); --grad-text: linear-gradient(100deg, var(--accent-soft), var(--accent) 40%, var(--accent-2)); /* ---- Tipografía ---- */ --ff-display: 'Clash Display', 'Space Grotesk', system-ui, sans-serif; --ff-body: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif; /* ---- Movimiento ---- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); /* ---- Radios / sombras ---- */ --radius: 16px; --radius-lg: 24px; --shadow-accent: 0 18px 42px -12px rgba(36, 211, 238, 0.55); } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--ff-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; } img { max-width: 100%; display: block; } h1, h2, h3, h4, p { margin: 0; } a { color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* -------------------------------------------------------------------------- u-grain — grano fino global. Mata el banding, da textura premium. Uso: colocá un div overlay vacío como primer hijo del body: NUNCA lo pongas como clase del (el opacity afectaría a todo el contenido). -------------------------------------------------------------------------- */ .u-grain { position: fixed; inset: 0; z-index: 998; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* -------------------------------------------------------------------------- Tipografía utilitaria -------------------------------------------------------------------------- */ .u-display { font-family: var(--ff-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; } .u-accent-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .u-eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); } .u-eyebrow::before { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); } /* -------------------------------------------------------------------------- Botón -------------------------------------------------------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1.1rem 2.4rem; border-radius: var(--radius); background: var(--grad-brand); color: var(--ink); font-family: var(--ff-body); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; text-decoration: none; border: none; cursor: pointer; overflow: hidden; isolation: isolate; box-shadow: 0 10px 30px -12px rgba(36, 211, 238, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease); } .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%); transform: translateX(-130%); transition: transform 0.8s var(--ease); } .btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-accent); } .btn:hover::after { transform: translateX(130%); } .btn:active { transform: translateY(-1px); } .btn svg { width: 20px; height: 20px; } /* -------------------------------------------------------------------------- Card con borde fino + resplandor que sigue al cursor (set --mx/--my por JS) -------------------------------------------------------------------------- */ .card { position: relative; background: linear-gradient(165deg, var(--surface-2), rgba(255, 255, 255, 0.01)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.35rem 2rem; overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); } .card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, -10%), rgba(36, 211, 238, 0.12), transparent 62%); opacity: 0; transition: opacity 0.35s var(--ease); pointer-events: none; } .card:hover { transform: translateY(-6px); border-color: rgba(36, 211, 238, 0.4); box-shadow: 0 24px 50px -26px rgba(36, 211, 238, 0.5); } .card:hover::after { opacity: 1; } /* -------------------------------------------------------------------------- Iluminación coherente — HERO Estructura: .hero > .hero-glow + .hero-beam + .hero-inner Encendé con la clase .ignited en .hero (via JS/acción). -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 7rem 1.5rem 5rem; overflow: hidden; isolation: isolate; background: radial-gradient(135% 95% at 50% -25%, rgba(36, 211, 238, 0.16), transparent 50%), radial-gradient(120% 70% at 50% 125%, rgba(46, 123, 255, 0.12), transparent 62%), linear-gradient(180deg, #0a1120 0%, #070a12 55%, #05070e 100%); } .hero::before { /* viñeta que enfoca el centro */ content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(125% 120% at 50% 42%, transparent 52%, rgba(0, 0, 0, 0.55) 100%); pointer-events: none; } .hero-glow { /* halo central (parallax de mouse opcional) */ position: absolute; z-index: -1; top: 8%; left: 50%; width: min(720px, 96vw); height: 520px; transform: translate(-50%, 0); background: radial-gradient(circle at 50% 30%, rgba(36, 211, 238, 0.22), rgba(46, 123, 255, 0.08) 42%, transparent 68%); filter: blur(20px); opacity: 0; transition: opacity 1.4s var(--ease); pointer-events: none; will-change: transform; } .hero-beam { /* haz que cae desde el punto de origen */ position: absolute; z-index: -1; top: 11%; left: 50%; width: min(620px, 92vw); height: 82vh; transform: translateX(-50%); background: linear-gradient(180deg, rgba(36, 211, 238, 0.3) 0%, rgba(36, 211, 238, 0.07) 34%, transparent 72%); clip-path: polygon(43% 0, 57% 0, 84% 100%, 16% 100%); filter: blur(26px); opacity: 0; transition: opacity 1.5s var(--ease); pointer-events: none; } .hero.ignited .hero-glow, .hero.ignited .hero-beam { opacity: 1; } .hero-inner { position: relative; z-index: 2; width: 100%; max-width: 860px; display: flex; flex-direction: column; align-items: center; text-align: center; } /* -------------------------------------------------------------------------- Reveal en scroll (blur-in). Poné .reveal y agregá .is-visible por JS. -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(30px); filter: blur(8px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease), filter 0.85s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; filter: blur(0); } /* Reveal cinematográfico para titulares */ @keyframes u-title-reveal { from { opacity: 0; transform: translateY(38px); clip-path: inset(0 0 108% 0); filter: blur(14px); } to { opacity: 1; transform: none; clip-path: inset(0 0 -25% 0); filter: blur(0); } } @keyframes u-soft-rise { from { opacity: 0; transform: translateY(26px); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } } .u-anim-title { animation: u-title-reveal 1.15s var(--ease) both; } .u-anim-rise { animation: u-soft-rise 1s var(--ease) both; } /* -------------------------------------------------------------------------- Movimiento reducido -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } [class*="u-anim"] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } }