/* OVNI — estilos compartidos para las páginas "pro" de cada plugin. Mismo sistema de diseño que el landing (tokens, fuentes, atmósfera). El color de familia se setea por página con --hue en . */ :root{ --bg-deep:oklch(7% 0.02 265); --bg:oklch(11% 0.025 265); --surface:oklch(15% 0.03 265); --line:oklch(30% 0.03 265 / .55); --line-bright:oklch(45% 0.04 265 / .6); --cyan:oklch(83% 0.15 200); --magenta:oklch(70% 0.21 330); --amber:oklch(82% 0.13 75); --green:oklch(80% 0.14 160); --text:oklch(95% 0.01 250); --muted:oklch(66% 0.02 255); --faint:oklch(50% 0.02 255); --display:"Clash Grotesk",ui-sans-serif,system-ui,sans-serif; --body:"General Sans",ui-sans-serif,system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --edge:clamp(1.1rem,4vw,5rem); --ease:cubic-bezier(0.16,1,0.3,1); --hue:var(--cyan); } *{box-sizing:border-box;margin:0} html{scroll-behavior:smooth} body{background:var(--bg-deep);color:var(--text);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} .mono{font-family:var(--mono)} a{color:inherit;text-decoration:none} ::selection{background:var(--hue);color:var(--bg-deep)} .grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.035;mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* nav */ nav{position:fixed;top:0;left:0;right:0;z-index:41;display:flex;align-items:center;justify-content:space-between; padding:.85rem var(--edge);background:oklch(7% 0.02 265 / .92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .wordmark{font-family:var(--display);font-weight:700;font-size:1.4rem;letter-spacing:.02em;display:flex;align-items:center;gap:.55rem} .wordmark .mark{width:24px;height:24px;flex:none;filter:drop-shadow(0 0 7px oklch(83% 0.15 200 / .55))} .nav-back{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .2s} .nav-back:hover{color:var(--hue)} .nav-right{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.3rem)} .lang-switch{display:flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em} .lang-switch button{font:inherit;letter-spacing:inherit;background:none;border:0;padding:.25rem .15rem;color:var(--faint);text-transform:uppercase;cursor:pointer;transition:color .2s} .lang-switch button:hover{color:var(--hue)} .lang-switch button[aria-pressed="true"]{color:var(--hue)} .lang-switch .sep{color:var(--line-bright)} /* layout */ .wrap{max-width:1100px;margin:0 auto;padding-inline:var(--edge)} /* hero — 2 columnas: copy + screenshot real del plugin */ .p-hero{position:relative;padding:8.5rem 0 3.4rem;border-bottom:1px solid var(--line);isolation:isolate} .p-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(58% 70% at 80% 45%, color-mix(in oklch,var(--hue) 13%,transparent), transparent 70%)} .p-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,4.5rem);align-items:center} @media(max-width:900px){.p-hero .wrap{grid-template-columns:1fr;gap:2.5rem}} .shot{position:relative;margin:0;border:1px solid var(--line-bright);border-radius:10px;overflow:hidden;background:var(--bg); box-shadow:0 34px 90px -34px oklch(0% 0 0 / .85), 0 0 70px -26px color-mix(in oklch,var(--hue) 45%,transparent)} .shot img{display:block;width:100%;height:auto} .shot-live{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1} .shot-viz{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:auto;touch-action:none;cursor:grab} .shot-viz:active{cursor:grabbing} .shot::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(125deg, oklch(100% 0 0 / .06) 0%, transparent 34%)} .shot figcaption{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); position:absolute;left:.7rem;bottom:.6rem;z-index:2;background:oklch(7% 0.02 265 / .65);backdrop-filter:blur(4px);padding:.22rem .5rem;border-radius:2px} /* teaser "transmisión entrante" para plugins por venir (sin UI todavía) */ .shot.incoming{aspect-ratio:3/2;display:grid;place-items:center;border-style:dashed; background:radial-gradient(60% 70% at 50% 45%, color-mix(in oklch,var(--hue) 16%,transparent), transparent 70%), var(--bg)} .incoming-inner{display:flex;flex-direction:column;gap:.9rem;align-items:center;text-align:center;animation:ovni-breathe 4.2s var(--ease) infinite} .incoming-mod{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hue)} .incoming-tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .badge.coming{color:var(--hue);border-color:color-mix(in oklch,var(--hue) 55%,transparent)} @keyframes ovni-breathe{0%,100%{opacity:.55;transform:scale(.985)}50%{opacity:1;transform:scale(1.02)}} @media(prefers-reduced-motion:reduce){.incoming-inner{animation:none}} .eyebrow{font-family:var(--mono);color:var(--hue);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;display:flex;gap:.6rem;align-items:center;margin-bottom:1.3rem} .eyebrow::before{content:"";width:30px;height:1px;background:var(--hue)} .p-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(3rem,1rem+6vw,6rem);line-height:.86;letter-spacing:-.03em} .tagline{font-size:clamp(1.1rem,1rem+.7vw,1.5rem);color:var(--muted);max-width:36ch;margin:1.4rem 0 1.8rem} .tagline b{color:var(--text);font-weight:600} .badges{display:flex;gap:.55rem;flex-wrap:wrap;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:2rem} .badge{border:1px solid var(--line-bright);border-radius:2px;padding:.32rem .6rem;color:var(--muted)} .badge.free{color:var(--hue);border-color:color-mix(in oklch,var(--hue) 55%,transparent)} .cta-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center} .btn{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;padding:.85rem 1.4rem;border-radius:3px; transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s;cursor:pointer;display:inline-flex;gap:.5rem;align-items:center} .btn-primary{background:var(--hue);color:var(--bg-deep);font-weight:600;border:0} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px -12px var(--hue)} .btn-ghost{border:1px solid var(--line-bright);color:var(--text)} .btn-ghost:hover{border-color:var(--hue);color:var(--hue);transform:translateY(-2px)} .btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none} .btn .soon{font-size:.55rem;opacity:.7;border:1px solid currentColor;border-radius:2px;padding:.05rem .3rem} /* sections */ .blk{padding-block:clamp(3.4rem,8vh,5.5rem);border-bottom:1px solid var(--line)} .blk .sid{font-family:var(--mono);font-size:.7rem;color:var(--hue);letter-spacing:.15em;text-transform:uppercase;display:block;margin-bottom:.7rem} .blk h2{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,1rem+2.2vw,2.5rem);letter-spacing:-.02em;margin-bottom:1.3rem} .lead{font-size:clamp(1.05rem,1rem+.5vw,1.3rem);color:var(--muted);max-width:64ch} .lead b{color:var(--text)} /* controls / tech grid */ .grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:1.6rem} .grid.g2{grid-template-columns:repeat(2,1fr)} @media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.grid,.grid.g2{grid-template-columns:1fr}} .cell{background:var(--bg-deep);padding:1.4rem 1.5rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .3s} .cell:hover{background:var(--surface)} .cell .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--hue);margin-bottom:.55rem} .cell p{color:var(--muted);font-size:.9rem} .cell .k small{color:var(--faint);letter-spacing:.04em} /* specs chips */ .specs{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em} .spec{border:1px solid var(--line);border-radius:2px;padding:.5rem .85rem;color:var(--muted)} .spec b{color:var(--text);font-weight:500} /* download band */ .dl{text-align:center;padding-block:clamp(3.6rem,9vh,6rem)} .dl h2{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,1rem+2.4vw,2.6rem);margin-bottom:1rem} .dl p{color:var(--muted);max-width:50ch;margin:0 auto 1.8rem} .dl .cta-row{justify-content:center} .dl .note{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:1.4rem} /* footer */ footer{border-top:1px solid var(--line);padding:2.5rem var(--edge) 3.5rem} .foot{max-width:1100px;margin:0 auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint); display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem} .foot a{color:var(--muted)} .foot a:hover{color:var(--cyan)} .foot .big{font-family:var(--display);font-size:1rem;letter-spacing:0;color:var(--text);text-transform:none} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} @media(max-width:560px){.cta-row{flex-direction:column;align-items:stretch}.btn{justify-content:center}}