/* Alfil — design system compartido (landing v3, login, páginas de sección y de producto). Cabecera + mega menú + footer los inyecta alfil.js en #alfil-top / #alfil-foot. */ :root{ --bg:#050505; --surface:#0e0e10; --surface-2:#151518; --line:#1f1f22; --line-2:#2a2a2e; --text:#f5f5f3; --text-2:#a8a8a4; --text-3:#8a8a85; --accent:#6ee7ff; --warm:#ffb86b; --violet:#8b7bff; --ok:#3ddc97; --accent-soft:color-mix(in srgb,var(--accent) 12%,transparent); --ease:cubic-bezier(.23,1,.32,1); --spring:cubic-bezier(.22,1,.36,1); --on:#050505; --r:16px; --maxw:1120px; color-scheme:dark; } /* el sitio es oscuro siempre; el claro queda disponible con */ :root[data-theme="light"]{color-scheme:light} :root[data-theme="light"]{--bg:#f7f5f0; --surface:#fff; --surface-2:#f1eee7; --line:#e4e0d6; --line-2:#d3cebf; --text:#0a0a0a; --text-2:#4a4a46; --text-3:#6b6b64; --accent:#1454ff; --warm:#b0461a; --violet:#6b4dff; --ok:#12805a; --on:#fff} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-padding-top:5rem} body{margin:0; background:var(--bg); color:var(--text); font:16px/1.55 "Geist",system-ui,sans-serif; overflow-x:hidden} a{color:inherit; text-decoration:none} button{font:inherit; color:inherit} img{max-width:100%} .mono{font-family:"Geist Mono",ui-monospace,monospace; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem} .em{font-family:"Instrument Serif",Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.01em} p{margin:0; color:var(--text-2); text-wrap:pretty} h1,h2,h3{margin:0; font-weight:500; text-wrap:balance} .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)} /* ---------- fondo en movimiento (mismo en landing, login e interiores) ---------- */ .glow{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden} .glow i{position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; will-change:transform; animation:28s ease-in-out infinite} .glow i:nth-child(1){width:60vw; height:60vw; left:-10vw; top:30vh; background:var(--violet); animation-name:orbit-a} .glow i:nth-child(2){width:55vw; height:55vw; right:-12vw; top:40vh; background:var(--warm); opacity:.4; animation-name:orbit-b; animation-duration:34s} .glow i:nth-child(3){width:45vw; height:45vw; left:28vw; top:62vh; background:var(--accent); opacity:.45; animation-name:orbit-c; animation-duration:40s} .glow::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom,var(--bg) 0%,transparent 45%,transparent 80%,var(--bg) 100%)} .glow.soft{opacity:.45} @keyframes orbit-a{0%,100%{transform:none} 33%{transform:translate3d(14vw,-10vh,0) scale(1.15)} 66%{transform:translate3d(4vw,8vh,0) scale(.92)}} @keyframes orbit-b{0%,100%{transform:none} 33%{transform:translate3d(-12vw,6vh,0) scale(.9)} 66%{transform:translate3d(-4vw,-12vh,0) scale(1.18)}} @keyframes orbit-c{0%,100%{transform:none} 50%{transform:translate3d(-16vw,-14vh,0) scale(1.2)}} /* ---------- logos por tema ---------- */ [hidden]{display:none!important} .on-light{display:none!important} [data-theme="light"] .on-dark{display:none!important} [data-theme="light"] .on-light{display:block!important} /* ---------- barra superior + mega menú ---------- */ .top{position:fixed; inset:0 0 auto; z-index:50; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); background:color-mix(in srgb,var(--bg) 70%,transparent); transition:opacity .3s var(--ease),transform .35s var(--ease)} .top-in{max-width:var(--maxw); margin:0 auto; padding:.8rem 1.25rem; display:flex; align-items:center; gap:.5rem} .brand{margin:-13px 1.2rem -13px 0; padding:13px 0; display:block} /* 44px de zona táctil */ .brand img{display:block; height:18px; width:auto} .nav{display:flex; gap:.15rem; margin-right:auto} .nav>a,.mega-btn{padding:.45rem .75rem; border-radius:999px; font-size:.9rem; color:var(--text-2); background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; transition:color .15s var(--ease),background .15s var(--ease)} .nav>a:hover,.mega-btn:hover,.mega-btn[aria-expanded="true"],.nav>a[aria-current]{color:var(--text); background:var(--surface-2)} .mega-btn svg{transition:transform .2s var(--ease)} .mega-btn[aria-expanded="true"] svg{transform:rotate(180deg)} .cta{flex:none; white-space:nowrap; padding:.55rem 1rem; border-radius:999px; background:var(--text); color:var(--bg); font-size:.9rem; font-weight:500; transition:transform .15s var(--ease),opacity .15s} .cta:hover{opacity:.88} .cta:active{transform:scale(.97)} .login{padding:.55rem .9rem; border-radius:999px; font-size:.9rem; color:var(--text-2); transition:color .15s var(--ease),background .15s var(--ease)} .login:hover{color:var(--text); background:var(--surface-2)} .mega{position:absolute; left:0; right:0; top:100%; padding:.4rem 1.25rem 0; pointer-events:none} /* padding, no margin: sin hueco muerto entre barra y menú */ .mega-in{max-width:var(--maxw); margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:0 30px 80px -20px rgba(0,0,0,.45); display:grid; grid-template-columns:1fr 1fr 1.6fr; gap:1.5rem; padding:1.5rem; opacity:0; transform:translateY(-6px) scale(.985); transform-origin:top center; transition:opacity .18s var(--ease),transform .22s var(--ease)} .mega.open{pointer-events:auto} .mega.open .mega-in{opacity:1; transform:none} .mega h2{margin:0 0 .7rem; color:var(--text-3); font-weight:400} .mega ul{list-style:none; margin:0; padding:0; display:grid; gap:.15rem} .mega li>a,.mega li>.off{display:block; padding:.55rem .65rem; border-radius:10px; transition:background .15s var(--ease)} .mega li>a:hover,.mega li>a:focus-visible{background:var(--surface-2)} .mega li b{display:flex; align-items:center; gap:.4rem; font-weight:500; font-size:.94rem} .mega li span{display:block; font-size:.82rem; color:var(--text-3); line-height:1.35} .mega .off{cursor:not-allowed; opacity:.5} .mega .engines{grid-template-columns:1fr 1fr} .st{width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none; display:inline-block} .st.beta{background:var(--warm)} .st.proto{background:var(--accent)} .mega-foot{grid-column:1/-1; border-top:1px solid var(--line); padding-top:1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; color:var(--text-3)} .mega-foot a{color:var(--text-2); display:inline-block; padding:.9rem 0; margin:-.9rem 0} .mega-foot a:hover{color:var(--text)} .mega-foot .only-mobile{display:none} /* ---------- footer: siempre negro ---------- */ footer{position:relative; z-index:1; background:#000; color:#8a8a85; font-size:.88rem} .foot-in{max-width:var(--maxw); margin:0 auto; padding:4rem 1.25rem 2rem; display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:2rem} footer .foot-logo{display:block; height:18px; width:auto; margin-bottom:1rem} footer p{color:#8a8a85; max-width:22rem} footer h2{font-size:.72rem; margin:0 0 .9rem; color:#f5f5f3; font-weight:400} footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem} footer a{transition:color .15s var(--ease)} footer a:hover{color:#f5f5f3} .foot-base{max-width:var(--maxw); margin:0 auto; padding:1.2rem 1.25rem 2rem; border-top:1px solid #1f1f22; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem} /* ---------- bloques de contenido (interiores y landing) ---------- */ main{position:relative; z-index:1} .page{padding-top:5rem} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.25rem} .sec{padding:clamp(4rem,9vw,7rem) 0} .kicker{color:var(--text-3); display:inline-flex; align-items:center; gap:.5rem} .kicker::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent)} .sec h1{font-size:clamp(2.2rem,5.4vw,4.2rem); line-height:1.02; letter-spacing:-.045em; margin:1rem 0 1.1rem; max-width:18ch} .sec h2{font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1.06; letter-spacing:-.035em; font-weight:400; margin:.9rem 0 1rem; max-width:24ch} .sec h3{font-size:1.08rem; letter-spacing:-.015em} .lede{font-size:clamp(1rem,1.4vw,1.14rem); max-width:44rem} .btn,.btn-ghost{display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.25rem; border-radius:999px; font-weight:500; font-size:.95rem; cursor:pointer; border:1px solid transparent; transition:transform .15s var(--ease),opacity .15s,background .15s var(--ease),border-color .15s var(--ease)} .btn{background:var(--text); color:var(--bg)} .btn:hover{opacity:.88} .btn-ghost{background:color-mix(in srgb,var(--surface) 60%,transparent); border-color:var(--line-2); color:var(--text)} .btn-ghost:hover{border-color:var(--text-3)} .btn:active,.btn-ghost:active{transform:scale(.97)} .btn:disabled{opacity:.5; cursor:default} .arrow{display:inline-block; transition:transform .2s var(--ease)} .btn:hover .arrow,.btn-ghost:hover .arrow{transform:translateX(3px)} .card{background:color-mix(in srgb,var(--surface) 85%,transparent); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem} .grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .k{color:var(--text-3)} .crumb{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; color:var(--text-3); font-size:.9rem} .crumb a{color:var(--text-2); transition:color .15s var(--ease)} .crumb a:hover{color:var(--text)} /* hueco para pantallazo:
…
*/ .shot{margin:2rem 0 0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)} .shot img{display:block; width:100%} .shot figcaption{padding:.7rem 1rem; color:var(--text-3); font-size:.85rem; border-top:1px solid var(--line)} /* ---------- movimiento de entrada ---------- */ @keyframes rise{from{opacity:0; transform:translateY(10px)}} .in{animation:rise .8s var(--ease) both; animation-delay:calc(var(--i,0) * 90ms)} .js .reveal{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease),transform .8s var(--ease); transition-delay:calc(var(--i,0) * 80ms)} .js .reveal.seen{opacity:1; transform:none} @media (max-width:860px){ .nav>a,.login{display:none} .mega-foot .only-mobile{display:inline-block} .mega-in{grid-template-columns:1fr; max-height:calc(100svh - 5rem); overflow:auto} .foot-in{grid-template-columns:1fr 1fr} .foot-in>div:first-child{grid-column:1/-1} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important; transition:none!important} .js .reveal{opacity:1; transform:none} }