/* ================================================================ Componentes de landing + paletas por variante (body[data-pal]). Se aplica sobre main.css. Poner en . ================================================================ */ .theme-switch{display:none} body[data-pal="mono-light"]{--bg:#fff;--surface:#fff;--surface-2:#fafafa;--ink:#0d0d0d;--ink-soft:#5c5c5c;--ink-faint:#9b9b9b;--line:#e6e6e6;--line-2:#dcdcdc;--accent:#0d0d0d;--accent-2:#10a37f;--accent-ink:#fff;--accent-soft:#f2f2f2} body[data-pal="blue"]{--bg:#fff;--surface:#fff;--surface-2:#f5f7fb;--ink:#0f1320;--ink-soft:#565d68;--ink-faint:#9aa1ac;--line:#e8ebf2;--line-2:#dfe3ec;--accent:#304cf8;--accent-2:#20a8ed;--accent-ink:#fff;--accent-soft:#eaeeff} body[data-pal="v18"]{--bg:#F8F5F0;--surface:#FFFFFF;--surface-2:#F0EDE8;--surface-3:#E6E2DC;--ink:#2E3138;--ink-soft:#6A6E78;--ink-faint:#A2A6AF;--line:#E3DFD8;--line-2:#D8D3CB;--accent:#304cf8;--accent-2:#6B8BFF;--accent-ink:#FFFFFF;--accent-soft:#EAEDFF;--shadow:0 4px 24px rgba(107,143,163,.08);--font:'DM Sans',system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--font-display:'DM Serif Display',Georgia,serif} body[data-pal="v18"] .brand__mark{background:linear-gradient(135deg,#304cf8,#6B8BFF)} body[data-pal="v18"] .tech{background:#1a1e2e} body[data-pal="v18"] .tech .veil{background:radial-gradient(90% 120% at 15% 0,rgba(48,76,248,.28),transparent 60%)} body[data-pal="v18"] .tech .eyebrow{color:#6B8BFF} body[data-pal="v18"] .cap-i .dot{background:#6B8BFF;box-shadow:0 0 10px #6B8BFF} body[data-pal="v18"] .cap-i .ib{color:#6B8BFF;background:rgba(107,139,255,.12);border-color:rgba(107,139,255,.28)} body[data-pal="v18"] .cap-i:hover{border-color:rgba(107,139,255,.4)} body[data-pal="v18"] .side__me .av{background:linear-gradient(135deg,#D4A88C,#D4B895)} /* hero prompt */ .v-hp{padding:110px 0 44px;text-align:center} .v-hp h1{font-size:clamp(2.6rem,6vw,4.8rem);letter-spacing:-.03em} .oa-prompt{max-width:600px;margin:32px auto 0;display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:999px;padding:10px 10px 10px 22px;background:var(--surface)} .oa-prompt input{flex:1;border:none;outline:none;font:inherit;font-size:1.05rem;background:none;color:var(--ink)} .oa-prompt .go{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:none;font-size:1.1rem;cursor:pointer} /* hero imagen a sangre */ .v-hi{position:relative;min-height:76vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden} .v-hi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .v-hi .ov{position:absolute;inset:0} .v-hi.render .ov{background:linear-gradient(180deg,rgba(6,10,26,.2),rgba(6,10,26,.55) 55%,rgba(6,10,26,.9))} .v-hi.photo .ov{background:linear-gradient(180deg,rgba(10,10,12,.25),rgba(10,10,12,.6) 55%,rgba(10,10,12,.9))} .v-hi .in{position:relative;padding-bottom:54px} .v-hi h1{color:#fff;font-size:clamp(2.6rem,6vw,5rem);max-width:760px;letter-spacing:-.03em} .v-hi p{color:rgba(255,255,255,.85);max-width:520px;margin:16px 0 24px;font-size:1.12rem} /* feature band */ .oa-feature{position:relative;border-radius:10px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end;color:#fff} .oa-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .oa-feature .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.74))} .oa-feature .cap{position:relative;padding:38px;max-width:540px} .oa-feature .cap h2{color:#fff;font-size:2rem}.oa-feature .cap p{color:rgba(255,255,255,.82);margin:10px 0 16px} /* cards */ .oa-cards{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden} .oa-card{padding:28px;border-right:1px solid var(--line)}.oa-card:last-child{border-right:none} .oa-card h3{font-size:1.2rem;margin-bottom:6px}.oa-card p{color:var(--ink-soft);font-size:.94rem;margin-bottom:12px} .oa-card a{font-weight:600;font-size:.9rem;border-bottom:1px solid var(--ink)} /* tiles */ .dm-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .dm-tile{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column} .dm-tile img{width:100%;height:180px;object-fit:cover}.dm-tile .b{padding:20px} .dm-tile .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700} .dm-tile h3{font-size:1.15rem;margin:6px 0}.dm-tile p{color:var(--ink-soft);font-size:.9rem} /* science dark */ .dm-science{background:#070a16;color:#eef1f8;border-radius:24px;padding:52px 40px} .dm-science .eyebrow{color:#63e6be}.dm-science h2{color:#fff}.dm-science p.lead{color:rgba(255,255,255,.7)} .dm-sci-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px} .dm-sci{position:relative;border-radius:16px;overflow:hidden;min-height:220px;display:flex;align-items:flex-end;color:#fff} .dm-sci img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .dm-sci .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,7,15,.82))} .dm-sci .c{position:relative;padding:20px}.dm-sci .c h3{color:#fff;font-size:1.2rem}.dm-sci .c p{color:rgba(255,255,255,.8);font-size:.88rem;margin-top:4px} /* news grid */ .oa-news{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden} .oa-item{background:var(--bg);padding:24px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between} .oa-item .tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint)} .oa-item h4{font-family:var(--font-display);font-size:1.1rem;margin-top:8px}.oa-item .meta{font-size:.8rem;color:var(--ink-faint)} .band-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;gap:16px;flex-wrap:wrap} .band-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem)} /* ===== Panel de usuario ===== */ .acct{display:grid;grid-template-columns:230px 1fr;gap:36px;padding-block:44px} .acct__nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:90px;align-self:start} .acct__nav a{padding:10px 14px;border-radius:10px;color:var(--ink-soft);font-size:.95rem} .acct__nav a.on{background:var(--surface-2);color:var(--ink);font-weight:600} .acct__nav a:hover{background:var(--surface-2)} .acct__sec{margin-bottom:40px} .acct__sec h2{font-size:1.5rem;margin-bottom:6px} .acct__sec .sub{color:var(--ink-soft);margin-bottom:20px} .acct-card{border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:16px} .acct-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)} .acct-row:last-child{border-bottom:none} .acct-row .k{color:var(--ink-soft);font-size:.9rem}.acct-row .v{font-weight:500} .usage-bar{height:8px;border-radius:6px;background:var(--surface-2);overflow:hidden;margin-top:8px} .usage-bar i{display:block;height:100%;background:var(--accent);border-radius:6px} .plan-badge{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:.82rem;padding:4px 12px;border-radius:999px} @media(max-width:900px){.acct{grid-template-columns:1fr}.acct__nav{position:static;flex-direction:row;overflow-x:auto} .oa-cards,.oa-news,.dm-row,.dm-sci-row{grid-template-columns:1fr}.oa-card{border-right:none;border-bottom:1px solid var(--line)}} /* ===== Paletas pastel ===== */ body[data-pal="pastel"]{--bg:#faf8ff;--surface:#ffffff;--surface-2:#f3f0fb;--ink:#2a2740;--ink-soft:#6a6685;--ink-faint:#a8a5c0;--line:#ece8f7;--line-2:#e3ddf3;--accent:#8b7cf0;--accent-2:#5ccfb6;--accent-ink:#ffffff;--accent-soft:#efeafd} body[data-pal="pastel-twilight"]{--bg:#171328;--surface:#201b38;--surface-2:#1b1733;--ink:#ece9f8;--ink-soft:#aba5cc;--ink-faint:#726d92;--line:#2b2749;--line-2:#352f56;--accent:#a99bff;--accent-2:#84e6cf;--accent-ink:#171328;--accent-soft:#241f3d} /* ===== Motivo "sistema" sutil (órbitas / nodos / onda), sin texto ===== */ .q-glow{position:absolute;inset:-28% 0 auto 0;height:640px;z-index:0;pointer-events:none; background:radial-gradient(42% 52% at 50% 0,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%)} .q-orbits{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:640px;max-width:120vw;z-index:0;pointer-events:none;opacity:.9} .q-orbits svg{width:100%;height:auto} .q-orbits .ring{fill:none;stroke:color-mix(in srgb,var(--accent) 34%,transparent);stroke-width:1} .q-orbits .qbit{fill:var(--accent)} .pulse{transform-box:fill-box;transform-origin:center;animation:qpulse 2.6s ease-in-out infinite} .pulse.b{animation-delay:.8s}.pulse.c{animation-delay:1.5s} @keyframes qpulse{0%,100%{opacity:.45}50%{opacity:1}} /* insignia "conectado" (dos nodos + enlace) */ .q-link{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:5px 12px 5px 8px;font-weight:600} .q-link .n{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)} .q-link .n.dim{opacity:.5;box-shadow:none} .q-link .ln{width:16px;height:1.5px;background:linear-gradient(90deg,var(--accent),transparent);border-radius:2px} /* ================================================================ V14 · Naturaleza + Tecnología (reactivo) ================================================================ */ /* aparición al hacer scroll */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.27s} @media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none}} /* malla tecnológica sutil sobre el hero de naturaleza */ .v-net{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;mix-blend-mode:screen} .v-net line{stroke:rgba(220,240,255,.4);stroke-width:1} .v-net .nd{fill:#dff1ff} .v-hi .in{z-index:2} /* prompt sobre foto (con placeholder que se escribe) */ .oa-prompt.on-photo{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.42);backdrop-filter:blur(9px);margin:26px 0 0} .oa-prompt.on-photo input{color:#fff} .oa-prompt.on-photo input::placeholder{color:rgba(255,255,255,.82)} .hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .hero-chips a{font-size:.82rem;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 13px;transition:background .25s,transform .25s} .hero-chips a:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)} /* tiles reactivos */ .dm-tile{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease} .dm-tile img{transition:transform .5s ease} .lift:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,19,32,.13);border-color:var(--accent)} .lift:hover img{transform:scale(1.05)} /* sección tecnología (fusión oscura naturaleza+tech) */ .tech{position:relative;background:#0b1020;color:#eef2fb;border-radius:24px;overflow:hidden;padding:56px 40px} .tech .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.15} .tech .veil{position:absolute;inset:0;background:radial-gradient(90% 120% at 15% 0,rgba(48,76,248,.32),transparent 60%)} .tech .in{position:relative} .tech .eyebrow{color:#7fe3c0}.tech h2{color:#fff}.tech p.lead{color:rgba(255,255,255,.7);max-width:520px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px} .stat__num{font-family:var(--font-display);font-size:clamp(1.9rem,4vw,2.9rem);font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1} .stat__lab{color:rgba(255,255,255,.64);font-size:.9rem;margin-top:6px} .caps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px} .cap-i{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 16px;font-weight:500;transition:background .25s,transform .25s} .cap-i:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)} .cap-i .dot{width:9px;height:9px;border-radius:50%;background:#7fe3c0;box-shadow:0 0 10px #7fe3c0;flex:none} @media(max-width:900px){.stats{grid-template-columns:1fr 1fr}.caps{grid-template-columns:1fr}} /* ================================================================ V14 · Pulido de calidad (bordes finos + iconos) — scoped .polish ================================================================ */ .ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none} /* prompt del hero: borde y sombra de más calidad + botón con icono */ .polish .oa-prompt.on-photo{border-radius:16px;padding:8px 8px 8px 20px;box-shadow:0 14px 38px rgba(5,10,25,.3);border-color:rgba(255,255,255,.5)} .polish .oa-prompt .go{width:42px;height:42px;font-size:0;display:grid;place-items:center;box-shadow:0 6px 16px rgba(48,76,248,.42)} .polish .oa-prompt .go .ic{width:20px;height:20px;stroke:var(--accent-ink);stroke-width:2} /* chips con icono */ .polish .hero-chips a{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;padding:7px 15px 7px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(7px)} .polish .hero-chips a .ic{width:15px;height:15px;opacity:.92} /* tiles de modelos: bordes/sombra/estructura de calidad */ .polish .dm-row{gap:20px} .polish .dm-tile{border-radius:18px;border:1px solid color-mix(in srgb,var(--ink) 8%,transparent); box-shadow:0 1px 2px rgba(15,19,32,.05),0 10px 30px rgba(15,19,32,.06); background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface-2) 45%,var(--surface)))} .polish .dm-tile img{height:190px;border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent)} .polish .dm-tile .b{padding:22px} .polish .dm-tile .k{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent); padding:4px 11px;border-radius:999px;font-size:.68rem;letter-spacing:.06em} .polish .lift:hover{transform:translateY(-7px);box-shadow:0 24px 50px rgba(15,19,32,.15); border-color:color-mix(in srgb,var(--accent) 45%,transparent)} /* sección tech: tarjetas de métricas y capacidades con acabado */ .polish .stats{gap:14px} .polish .stats>div{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px} .polish .stat__lab{margin-top:8px} .polish .caps{gap:12px} .polish .cap-i{gap:13px;padding:14px;border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1)} .polish .cap-i:hover{border-color:rgba(127,227,192,.4)} .polish .cap-i .ib{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none; color:#9ff0d3;background:rgba(127,227,192,.12);border:1px solid rgba(127,227,192,.28)} .polish .cap-i .ib .ic{width:19px;height:19px} .polish .tech{border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px rgba(5,10,25,.36)} /* tarjetas "tres formas", novedades y banda: hairline + sombra de calidad */ .polish .oa-cards,.polish .oa-news{border-radius:16px;box-shadow:0 1px 2px rgba(15,19,32,.04),0 10px 30px rgba(15,19,32,.05)} .polish .oa-feature{border-radius:18px;box-shadow:0 20px 50px rgba(15,19,32,.16)} /* ================================================================ V15 · Interacciones ampliadas (canvas, demo en vivo, tilt, glow) ================================================================ */ #net{position:absolute;inset:0;z-index:1;pointer-events:none} .v-hi .hero-img{will-change:transform} .sprog{position:fixed;top:0;left:0;right:0;height:3px;z-index:1200;pointer-events:none} .sprog>i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left; background:linear-gradient(90deg,var(--accent),var(--accent-2))} /* demo de chat en vivo */ .demo-win{max-width:760px;margin:0 auto;border-radius:20px;border:1px solid color-mix(in srgb,var(--ink) 9%,transparent); background:var(--surface);box-shadow:0 2px 4px rgba(15,19,32,.05),0 26px 64px rgba(15,19,32,.12);overflow:hidden} .demo-bar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)} .demo-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2)} .demo-bar b{margin-left:8px;font-family:var(--font-display);font-size:.92rem} .demo-live{margin-left:auto;font-size:.72rem;font-weight:600;color:#12b76a;display:inline-flex;align-items:center;gap:6px} .demo-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#12b76a;box-shadow:0 0 8px #12b76a;animation:qpulse 1.6s infinite} .demo-body{padding:24px;min-height:290px;display:flex;flex-direction:column;gap:14px;justify-content:flex-end} .dmsg{max-width:82%;font-size:.98rem;line-height:1.55;white-space:pre-line} .dmsg.u{align-self:flex-end;background:var(--accent);color:var(--accent-ink);padding:11px 16px;border-radius:16px 16px 5px 16px} .dmsg.a{align-self:flex-start;color:var(--ink)} .dmsg.a .who{font-size:.7rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px} .caret{display:inline-block;width:7px;height:1.05em;vertical-align:-2px;background:var(--accent);margin-left:2px;border-radius:1px;animation:blink 1s steps(1) infinite} .dmsg.u .caret{background:var(--accent-ink)} @keyframes blink{50%{opacity:0}} /* tilt 3D + glow que sigue al cursor */ .tilt{transition:transform .18s ease;transform-style:preserve-3d} .tech .cglow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease; background:radial-gradient(260px 260px at var(--mx,50%) var(--my,50%),rgba(127,227,192,.18),transparent 70%)} /* ================================================================ V15+ · Chat interactivo + más reactividad ================================================================ */ /* nav sólida al hacer scroll */ .nav--solid{background:color-mix(in srgb,var(--surface) 86%,transparent);box-shadow:0 1px 0 var(--line),0 10px 30px rgba(15,19,32,.06)} /* botones magnéticos */ .mag{transition:transform .18s ease} /* aurora animada (tech) */ .tech .aurora{position:absolute;inset:-45%;z-index:0;pointer-events:none;opacity:.45;filter:blur(46px); background:conic-gradient(from 0deg,rgba(48,76,248,0),rgba(48,76,248,.38),rgba(127,227,192,.32),rgba(48,76,248,0)); animation:spin 20s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .polish .tech .in{position:relative;z-index:2} .polish .tech .cglow{z-index:1} @media(prefers-reduced-motion:reduce){.tech .aurora{animation:none}} /* ===== Chat interactivo ===== */ .chatx{max-width:780px;margin:0 auto;border-radius:22px;border:1px solid color-mix(in srgb,var(--ink) 9%,transparent); background:var(--surface);box-shadow:0 2px 4px rgba(15,19,32,.05),0 30px 70px rgba(15,19,32,.13);overflow:hidden} .chatx__bar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)} .chatx__bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2)} .chatx__bar b{margin-left:8px;font-family:var(--font-display);font-size:.92rem} .chatx__body{padding:22px;height:370px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth} .cx{display:flex;gap:12px;max-width:90%;animation:cxin .35s ease both} @keyframes cxin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .cx.u{align-self:flex-end;flex-direction:row-reverse} .cx.a{align-self:flex-start} .cx__av{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:.7rem;font-weight:700} .cx.u .cx__av{background:var(--accent);color:var(--accent-ink)} .cx.a .cx__av{background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)} .cx.a .cx__av .ic{width:17px;height:17px} .cx__bub{background:linear-gradient(180deg,#eef1ff,#e7ecff);color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);padding:11px 15px;border-radius:16px 16px 4px 16px;line-height:1.5;font-size:.97rem} .cx__who{font-size:.68rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px} .cx__txt{white-space:pre-line;line-height:1.58;font-size:.98rem;color:var(--ink)} .cx__acts{display:flex;gap:14px;margin-top:9px;opacity:0;transform:translateY(2px);transition:.2s} .cx.a:hover .cx__acts,.cx.a:focus-within .cx__acts{opacity:1;transform:none} .cx__acts button{font-size:.76rem;color:var(--ink-faint);display:inline-flex;gap:5px;align-items:center} .cx__acts button:hover{color:var(--accent)} .cx__acts .ic{width:14px;height:14px} .cx__acts .done{color:var(--accent-2)} .dots{display:inline-flex;gap:5px;padding:6px 0} .dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);animation:dotp 1.2s infinite} .dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s} @keyframes dotp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} .tcar{display:inline-block;width:7px;height:1.05em;vertical-align:-2px;background:var(--accent);margin-left:2px;border-radius:1px;animation:blink 1s steps(1) infinite} .chatx__chips{display:flex;gap:8px;flex-wrap:wrap;padding:2px 22px 0} .chatx__chips button{font-size:.82rem;padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-soft);transition:.2s} .chatx__chips button:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 16px rgba(48,76,248,.12)} .chatx__composer{display:flex;gap:10px;align-items:center;padding:16px;border-top:1px solid var(--line);background:var(--surface-2);margin-top:14px} .chatx__composer input{flex:1;border:1px solid var(--line-2);background:var(--surface);border-radius:12px;padding:12px 15px;font:inherit;color:var(--ink);outline:none;transition:.2s} .chatx__composer input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .chatx__composer .go{width:44px;height:44px;flex:none;border-radius:12px;background:var(--accent);color:var(--accent-ink);border:none;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px rgba(48,76,248,.32)} .chatx__composer .go .ic{width:20px;height:20px;stroke:var(--accent-ink);stroke-width:2} /* ===== Tipografía del chat (Newsreader · serif editorial elegante) ===== */ .chatx{font-feature-settings:"kern","liga","calt"} .cx__bub,.cx__txt{font-family:'Newsreader',Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased} .cx__txt{font-size:1.14rem;line-height:1.64;letter-spacing:.002em;color:var(--ink); font-variant-numeric:tabular-nums;font-weight:400} .cx__bub{font-size:1.1rem;line-height:1.5;letter-spacing:.002em;font-weight:420} .cx__who{font-family:var(--font);font-size:.66rem;font-weight:700;letter-spacing:.11em} /* la interfaz del chat se queda en sans para contraste */ .chatx__composer input{font-family:var(--font);font-size:.98rem;letter-spacing:-.003em} .chatx__chips button{font-family:var(--font);font-weight:500;letter-spacing:-.002em} /* ================================================================ V16 · App de chat mejorada (.chat16) ================================================================ */ .chat16 .chat{position:relative;overflow:hidden} /* fondo hero (imagen de naturaleza) con desvanecido */ .chat16 .chat__bg{position:absolute;top:0;left:0;width:100%;height:360px;object-fit:cover;z-index:0;pointer-events:none;opacity:.15; -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 55%,transparent);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 55%,transparent)} .chat16 #cnet{position:absolute;top:0;left:0;width:100%;height:360px;z-index:1;pointer-events:none} .chat16 .chat__top,.chat16 .thread,.chat16 .composer-wrap{position:relative;z-index:2} .chat16 .chat__top{background:transparent} /* bocadillo del usuario en PASTEL (menos llamativo) */ .chat16 .msg.user .bubble{background:linear-gradient(180deg,#eef1ff,#e7ecff);color:var(--ink); border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);border-radius:19px 19px 6px 19px; box-shadow:0 1px 2px rgba(15,19,32,.04)} /* texto del chat en serif de libro (Source Serif 4) */ .chat16 .msg.ai .body{font-family:'Source Serif 4','Charter',Georgia,serif;font-size:.98rem;line-height:1.6;letter-spacing:0;white-space:pre-line} .chat16 .msg.user .bubble{font-family:'Source Serif 4','Charter',Georgia,serif;font-size:.94rem} .chat16 .tcar{display:inline-block;width:7px;height:1.02em;vertical-align:-2px;background:var(--accent);margin-left:2px;border-radius:1px;animation:blink 1s steps(1) infinite} .chat16 .thinking{display:inline-flex;gap:5px;padding:6px 0} .chat16 .thinking i{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);animation:dotp 1.2s infinite} .chat16 .thinking i:nth-child(2){animation-delay:.15s}.chat16 .thinking i:nth-child(3){animation-delay:.3s} /* estado de bienvenida (chat nuevo / vacío) */ .chat16 .welcome{max-width:720px;margin:0 auto;padding:64px 24px 12px;text-align:center;position:relative;z-index:2} .chat16 .welcome h2{font-family:var(--font-display);font-size:2rem;letter-spacing:-.025em} .chat16 .welcome p{color:var(--ink-soft);margin-top:8px} .chat16 .welcome .sugg{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px} .chat16 .welcome .sugg button{font-size:.9rem;padding:10px 16px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:.2s} .chat16 .welcome .sugg button:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 20px rgba(48,76,248,.1)} /* historial: activo + eliminar */ .chat16 .hitem{display:flex;align-items:center;justify-content:space-between;gap:8px} .chat16 .hitem .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chat16 .hitem .del{opacity:0;font-size:.85rem;color:var(--ink-faint);flex:none;transition:.15s;padding:0 2px} .chat16 .hitem:hover .del{opacity:.65} .chat16 .hitem .del:hover{color:#e5484d;opacity:1} /* ================================================================ V17 · Banda trascendental (naturaleza serena + puntos reactivos) ================================================================ */ canvas.pnet{position:absolute;inset:0;pointer-events:none} .trascend{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden} .trascend .tr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .trascend .ov{position:absolute;inset:0;background:radial-gradient(120% 92% at 50% 46%,rgba(8,10,22,.32),rgba(8,10,22,.8))} .trascend #tnet{z-index:1} .trascend .tr-orbits{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:940px;max-width:150vw;z-index:1;pointer-events:none;opacity:.3} .trascend .tr-orbits svg{width:100%;height:auto} .trascend .tr-orbits .ring{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1} .trascend .tr-orbits .qbit{fill:#dff1ff} .trascend .tr-in{position:relative;z-index:2;max-width:660px;padding:44px 24px} .trascend .eyebrow{color:rgba(255,255,255,.82)} .trascend h2{color:#fff;font-size:clamp(2rem,4.6vw,3.3rem);letter-spacing:-.022em;font-weight:600;line-height:1.06} .trascend p{color:rgba(255,255,255,.82);margin-top:16px;font-size:1.12rem;line-height:1.6}