@font-face { font-family: "Nunito Black"; src: url("marca/nunito-black.ttf") format("truetype"); font-weight: 900; }

:root {
  --azul: #5393FF;
  --cielo: #7FAEFF;
  --nube: #CCDFFF;
  --profundo: #4262CA;
  --tinta: #1C2A5E;
  --texto: #18203a;
  --suave: #8a93ad;
  --gris: #5b6480;
  --fondo: #F4F7FB;
  --borde: rgba(28, 42, 94, 0.08);
  --sombra: 0 1px 2px rgba(28, 42, 94, 0.05), 0 8px 24px rgba(28, 42, 94, 0.06);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
code { font: 0.92em ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(83, 147, 255, 0.1); padding: 1px 5px; border-radius: 5px; }
h1, h2, h3 { margin: 0; letter-spacing: -0.035em; font-weight: 600; }
h2 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.04; }
.soft { color: #9aa3bb; }
.center { text-align: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn-white { background: #fff; color: var(--tinta); box-shadow: 0 6px 20px rgba(28, 42, 94, .18); padding-right: 8px; }
.btn-white .arrow, .btn-blue .arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--azul); color: #fff; font-style: normal; font-size: 14px; }
.btn-blue .arrow { background: #fff; color: var(--azul); }
.btn-glass { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); backdrop-filter: blur(8px); }
.btn-dark { background: var(--tinta); color: #fff; }
.btn-blue { background: linear-gradient(180deg, #6aa2ff, var(--azul)); color: #fff; box-shadow: 0 8px 22px rgba(83, 147, 255, .4), inset 0 1px 0 rgba(255,255,255,.3); padding-right: 8px; }
.btn-ghost { background: #eef2fa; color: var(--gris); }

/* ---------- nav ---------- */
.nav {
  position: fixed; z-index: 50; top: 16px; left: 50%; transform: translateX(-50%);
  width: min(760px, calc(100% - 32px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 8px 30px rgba(28, 42, 94, .1);
}
.nav-logo { display: flex; }
.nav-links { display: flex; gap: 26px; font-size: 14px; color: var(--gris); font-weight: 500; }
.nav-links a:hover { color: var(--tinta); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 150px 24px 0; text-align: center; color: #fff; }
.sky {
  position: absolute; inset: 0 0 160px;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(255,255,255,.25), transparent 70%),
    linear-gradient(180deg, #3f7cf0 0%, var(--azul) 35%, var(--cielo) 70%, #b7d0ff 100%);
}
.cloud { position: absolute; border-radius: 50%; background: #fff; filter: blur(18px); opacity: .9; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: #fff; }
.c1 { width: 260px; height: 90px; left: -40px; top: 150px; }
.c1::before { width: 150px; height: 130px; left: 50px; top: -60px; } .c1::after { width: 120px; height: 100px; left: 140px; top: -35px; }
.c2 { width: 280px; height: 90px; right: -30px; top: 90px; }
.c2::before { width: 160px; height: 140px; left: 60px; top: -70px; } .c2::after { width: 120px; height: 100px; left: 150px; top: -40px; }
.c3 { width: 180px; height: 60px; right: 90px; top: 370px; opacity: .75; }
.c3::before { width: 100px; height: 90px; left: 40px; top: -45px; }
.c4 { width: 140px; height: 50px; left: 22%; top: 60px; opacity: .5; }
.c4::before { width: 80px; height: 70px; left: 30px; top: -35px; }
.cloud { animation: flotar 18s ease-in-out infinite alternate; }
.c2 { animation-duration: 24s; } .c3 { animation-duration: 20s; animation-direction: alternate-reverse; }
@keyframes flotar { to { translate: 30px 0; } }

.hero-in { position: relative; max-width: 720px; margin: 0 auto; }
.badge-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; border-radius: 999px;
  background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); font-size: 13px;
}
.badge-pill b { background: #fff; color: var(--tinta); padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.hero h1 { margin-top: 22px; font-size: clamp(48px, 7.4vw, 84px); line-height: .98; letter-spacing: -0.05em; text-shadow: 0 2px 30px rgba(28,42,94,.12); }
.hero h1 span { color: rgba(255,255,255,.62); }
.lead { max-width: 560px; margin: 22px auto 0; font-size: 17px; color: rgba(255,255,255,.9); }
.cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.micro { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.75); }

/* mock browser */
.mock { position: relative; z-index: 2; max-width: 1080px; margin: 64px auto 0; padding: 10px; border-radius: 22px; background: rgba(255,255,255,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 30px 80px rgba(28,42,94,.25); backdrop-filter: blur(10px); text-align: left; color: var(--texto); }
.win { display: grid; grid-template-columns: 220px 1fr 280px; height: 470px; border-radius: 14px; overflow: hidden; background: #fff; }
.win-side { background: linear-gradient(180deg, #eaf1ff, #dde9ff); padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.dots { display: flex; gap: 6px; margin-bottom: 10px; } .dots i { width: 11px; height: 11px; border-radius: 50%; background: #c6d4f2; }
.side-search { background: #fff; border-radius: 10px; padding: 8px 10px; color: var(--suave); box-shadow: 0 1px 2px rgba(28,42,94,.06); margin-bottom: 8px; }
.side-label { font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; margin: 10px 4px 4px; }
.tab { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; color: #36405e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab.is-on { background: #fff; box-shadow: 0 1px 3px rgba(28,42,94,.08); font-weight: 500; }
.tab .tag { margin-left: auto; font-size: 10px; background: var(--azul); color: #fff; padding: 1px 7px; border-radius: 999px; }
.fold { color: var(--suave); font-size: 10px; }
.fav { flex: none; width: 14px; height: 14px; border-radius: 4px; }
.f-blue { background: var(--azul); } .f-green { background: #34c38f; } .f-orange { background: #ff9f43; }
.f-mochi { background: radial-gradient(circle at 35% 30%, #fff, var(--nube)); box-shadow: inset 0 0 0 1px var(--cielo); }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; font-family: "Nunito Black"; color: var(--tinta); font-size: 16px; }
.win-page { display: flex; flex-direction: column; border-right: 1px solid var(--borde); }
.urlbar { display: flex; align-items: center; gap: 8px; margin: 12px; padding: 8px 12px; border-radius: 10px; background: #f3f6fc; font-size: 12.5px; color: var(--gris); }
.urlbar .star { margin-left: auto; }
.page { padding: 8px 22px; display: flex; flex-direction: column; gap: 10px; }
.pg-title { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 4px; }
.flight { position: relative; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--borde); font-size: 14px; }
.flight span { color: var(--gris); font-size: 13px; } .flight em { font-style: normal; font-weight: 600; }
.flight.hl { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(83,147,255,.18); }
.flight .mark { position: absolute; left: -10px; top: -10px; background: var(--azul); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.win-chat { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #fbfcff; font-size: 13px; }
.chat-head { font-weight: 600; } .chat-head span { color: var(--suave); }
.msg { padding: 10px 12px; border-radius: 14px; line-height: 1.45; }
.msg.me { align-self: flex-end; background: var(--azul); color: #fff; border-bottom-right-radius: 4px; max-width: 92%; }
.msg.ai { background: #fff; box-shadow: 0 1px 3px rgba(28,42,94,.08); border-bottom-left-radius: 4px; }
.steps { display: flex; flex-direction: column; gap: 6px; padding-left: 4px; }
.step { display: flex; align-items: center; gap: 8px; color: var(--gris); font-size: 12.5px; }
.step::before { content: "✓"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #e3f6ec; color: #1f9d63; font-size: 10px; }
.step.run::before { content: ""; background: none; border: 2px solid var(--nube); border-top-color: var(--azul); animation: girar 1s linear infinite; width: 12px; height: 12px; }
.step.run { color: var(--profundo); font-weight: 500; }
@keyframes girar { to { rotate: 360deg; } }
.composer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--borde); color: var(--suave); }
.composer i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--azul); color: #fff; font-style: normal; }
.cloud-bank {
  position: relative; z-index: 3; height: 200px; margin-top: -120px;
  background:
    radial-gradient(40% 70% at 10% 70%, #fff 40%, transparent 70%),
    radial-gradient(35% 80% at 35% 80%, #fff 40%, transparent 70%),
    radial-gradient(40% 70% at 62% 75%, #fff 40%, transparent 70%),
    radial-gradient(35% 80% at 90% 70%, #fff 40%, transparent 70%),
    linear-gradient(180deg, transparent 55%, var(--fondo) 90%);
  filter: blur(14px);
}

/* ---------- works with ---------- */
.works { text-align: center; padding: 10px 0 30px; }
.works p { color: var(--suave); font-size: 14px; margin: 0 0 16px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.track { display: flex; gap: 10px; width: max-content; animation: correr 40s linear infinite; }
@keyframes correr { to { transform: translateX(-50%); } }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--borde), 0 2px 6px rgba(28,42,94,.04); font-size: 14px; font-weight: 500; color: #36405e; }

/* ---------- sections ---------- */
.sec { max-width: 1100px; margin: 0 auto; padding: 110px 24px 0; }
.eyebrow { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--borde); font-size: 12px; font-weight: 600; color: var(--gris); margin-bottom: 18px; }
.sec-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.sec-head > p { color: var(--gris); margin: 0 0 8px; max-width: 420px; justify-self: end; }

.panel { background: #fff; border-radius: 22px; padding: 18px; box-shadow: var(--sombra), 0 0 0 1px var(--borde); }
.panel-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 16px; font-size: 13px; color: var(--suave); }
.panel-top b { color: var(--texto); font-weight: 600; }
.pill-model { padding: 5px 12px; border-radius: 999px; background: #f1f5fd; color: var(--tinta); font-weight: 500; }
.pill-model i { font-style: normal; color: var(--suave); }
.agent-grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 12px; }
.agent-col { border-radius: 16px; background: #f6f9ff; box-shadow: inset 0 0 0 1px var(--borde); padding: 16px; min-height: 280px; display: flex; flex-direction: column; gap: 10px; }
.agent-col.wide { background: #fff7ec; box-shadow: inset 0 0 0 1px rgba(255,159,67,.25); }
.agent-col:last-child { background: #eefaf3; box-shadow: inset 0 0 0 1px rgba(52,195,143,.25); }
.col-h { font-weight: 600; font-size: 14px; }
.col-note { margin-top: auto; font-size: 12.5px; color: var(--suave); }
.read { display: flex; flex-direction: column; gap: 6px; }
.rl { background: #fff; border-radius: 10px; padding: 8px 10px; font-size: 13px; box-shadow: 0 1px 2px rgba(28,42,94,.05); }
.rl span { color: var(--azul); font-weight: 600; margin-right: 4px; }
.rl.on { box-shadow: 0 0 0 2px var(--azul); }
.tl { display: flex; flex-direction: column; gap: 8px; }
.tl-i { position: relative; padding-left: 20px; font-size: 13.5px; color: var(--gris); }
.tl-i::before { content: ""; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #ffb766; }
.tl-i b { color: #b26200; font-weight: 600; margin-right: 4px; }
.tl-i.live::before { animation: latir 1.2s ease-in-out infinite; }
@keyframes latir { 50% { box-shadow: 0 0 0 6px rgba(255,159,67,.25); } }
.answer { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.ans-row { display: flex; justify-content: space-between; background: #fff; padding: 9px 12px; border-radius: 10px; }
.ans-row.muted { color: var(--suave); }
.answer p { margin: 4px 0 0; color: #1f7a52; font-size: 13px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.stat { background: #fff; border-radius: 18px; padding: 22px; box-shadow: var(--sombra), 0 0 0 1px var(--borde); }
.stat .ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #edf3ff; font-size: 15px; }
.stat b { display: block; font-size: 44px; font-weight: 500; letter-spacing: -0.04em; margin: 10px 0 2px; }
.stat p { margin: 0; color: var(--gris); font-size: 14px; max-width: 240px; }

/* features */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { background: #fff; border-radius: 20px; padding: 8px 8px 22px; box-shadow: var(--sombra), 0 0 0 1px var(--borde); }
.card.span2 { grid-column: span 2; }
.card h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 18px 14px 6px; letter-spacing: -0.02em; }
.card p { margin: 0 14px; color: var(--gris); font-size: 14px; }
.h-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #edf3ff; font-size: 14px; }
.art { height: 170px; border-radius: 14px; background: linear-gradient(180deg, #f2f6ff, #e8f0ff); padding: 18px; display: flex; flex-direction: column; justify-content: center; gap: 10px; overflow: hidden; }
.bubble { max-width: 75%; padding: 9px 13px; border-radius: 14px; font-size: 13px; }
.bubble.me { align-self: flex-end; background: var(--azul); color: #fff; }
.bubble.ai { background: #fff; box-shadow: 0 1px 3px rgba(28,42,94,.08); }
.ctx { align-self: flex-end; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 10px; padding: 6px 10px; font-size: 12px; box-shadow: 0 0 0 1px var(--borde); }
.ctx i { font-style: normal; color: var(--suave); }
.proj { background: #fff; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; font-size: 14px; box-shadow: 0 1px 3px rgba(28,42,94,.06); }
.proj span { font: 12px ui-monospace, monospace; color: var(--suave); }
.proj-rule { font-size: 12.5px; color: var(--gris); background: rgba(255,255,255,.7); border-radius: 10px; padding: 8px 10px; border-left: 3px solid var(--azul); }
.art-incog { align-items: center; text-align: center; background: linear-gradient(180deg, #2a3150, #1c2240); color: #fff; }
.incog-ic { font-size: 34px; } .incog-t { font-weight: 600; } .incog-s { font-size: 12.5px; color: #aab3d4; }
.imp { display: flex; justify-content: space-between; background: #fff; padding: 10px 14px; border-radius: 12px; font-size: 14px; box-shadow: 0 1px 3px rgba(28,42,94,.06); }
.imp .ok { font-style: normal; color: #1f9d63; font-size: 13px; }
.art-themes { flex-direction: row; align-items: center; justify-content: center; gap: 12px; }
.sw { width: 46px; height: 72px; border-radius: 12px; background: linear-gradient(180deg, var(--a) 50%, var(--b) 50%); box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(28,42,94,.12); }
.art-keys { flex-direction: row; align-items: center; justify-content: center; gap: 8px; }
kbd { font: 600 16px system-ui; padding: 12px 16px; border-radius: 12px; background: #fff; box-shadow: 0 3px 0 #cfdcf5, 0 0 0 1px var(--borde); color: var(--tinta); }

/* connections ring */
.ring-card { background: #fff; border-radius: 24px; padding: 54px 24px 0; box-shadow: var(--sombra), 0 0 0 1px var(--borde); text-align: center; overflow: hidden; }
.ring-card .sub { max-width: 520px; margin: 14px auto 0; color: var(--gris); }
.ring { position: relative; height: 330px; max-width: 760px; margin: 20px auto 0; }
.ring::before, .ring::after { content: ""; position: absolute; left: 50%; top: 52%; translate: -50% -50%; border-radius: 50%; border: 1px solid #e3ebfb; }
.ring::before { width: 300px; height: 300px; background: radial-gradient(circle, #eef4ff, transparent 70%); }
.ring::after { width: 460px; height: 460px; }
.orb { position: absolute; z-index: 2; left: 50%; top: 52%; translate: -50% -50%; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 30px; background: linear-gradient(180deg, #6aa2ff, var(--profundo)); box-shadow: 0 0 0 10px rgba(83,147,255,.12), 0 20px 40px rgba(66,98,202,.35); }
.node { position: absolute; z-index: 2; padding: 8px 14px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 0 0 1px var(--borde), 0 6px 16px rgba(28,42,94,.07); }
.n1 { left: 12%; top: 14%; } .n2 { right: 12%; top: 14%; } .n3 { left: 4%; top: 46%; } .n4 { right: 4%; top: 46%; } .n5 { left: 16%; top: 78%; } .n6 { right: 13%; top: 78%; }

/* security */
.sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card.big .confirm, .card.big .danger { height: 220px; border-radius: 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; text-align: center; padding: 20px; }
.confirm { background: linear-gradient(180deg, #f2f6ff, #e8f0ff); }
.cf-h { background: #fff; padding: 16px 18px 6px; border-radius: 16px 16px 0 0; font-size: 15px; width: min(360px, 100%); }
.cf-s { background: #fff; width: min(360px, 100%); font-size: 12.5px; color: var(--suave); padding-bottom: 12px; }
.cf-b { background: #fff; width: min(360px, 100%); display: flex; gap: 8px; justify-content: center; padding: 0 0 16px; border-radius: 0 0 16px 16px; box-shadow: 0 10px 24px rgba(28,42,94,.1); }
.danger { background: linear-gradient(180deg, #fff3f1, #ffe6e2); }
.dg-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #ff5a4e; color: #fff; font-size: 20px; }
.dg-t { font-weight: 600; font-size: 17px; } .dg-s { font-size: 13px; color: #8a4a44; max-width: 300px; }
.dg-b { display: flex; align-items: center; gap: 14px; margin-top: 6px; } .link { font-size: 13px; color: #8a4a44; text-decoration: underline; }

/* download */
.dl { border-radius: 26px; padding: 60px 40px; text-align: center; color: #fff; background: radial-gradient(70% 90% at 50% 0%, #7fb0ff, transparent 70%), linear-gradient(180deg, var(--azul), var(--profundo)); box-shadow: 0 30px 70px rgba(66,98,202,.35); }
.eyebrow.light { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.dl h2 span { color: rgba(255,255,255,.65); }
.dl > p { max-width: 520px; margin: 14px auto 0; color: rgba(255,255,255,.88); }
.dl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 780px; margin: 36px auto 0; }
.dl-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; border-radius: 20px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.dl-card.on { background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.dl-card b { font-size: 20px; } .dl-card span { font-size: 13px; color: rgba(255,255,255,.8); margin-bottom: 12px; }
.dl-card .btn-white { padding-right: 22px; }
.dl-card [aria-disabled] { opacity: .8; cursor: default; }

/* faq */
.faq { display: grid; grid-template-columns: 1fr 1.35fr; gap: 50px; align-items: start; }
.faq-l p { color: var(--gris); max-width: 340px; }
.faq-r { display: flex; flex-direction: column; gap: 10px; }
details { background: #fff; border-radius: 16px; box-shadow: var(--sombra), 0 0 0 1px var(--borde); padding: 0 20px; }
summary { list-style: none; cursor: pointer; padding: 18px 0; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f0f3fa; color: var(--gris); }
details[open] summary::after { content: "×"; background: var(--tinta); color: #fff; }
details p { margin: -6px 0 18px; color: var(--gris); font-size: 14.5px; }

/* final */
.final { position: relative; display: flex; align-items: center; justify-content: space-between; overflow: hidden; background: #fff; border-radius: 26px; padding: 60px 56px; box-shadow: var(--sombra), 0 0 0 1px var(--borde); }
.final-t h2 { margin-bottom: 26px; }
.final-m { width: 260px; filter: drop-shadow(0 20px 40px rgba(83,147,255,.35)); animation: flotar 6s ease-in-out infinite alternate; }

.foot { max-width: 1100px; margin: 0 auto; padding: 60px 24px 50px; display: flex; align-items: center; gap: 20px; color: var(--suave); font-size: 13px; }
.foot span:last-child { margin-left: auto; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .win { grid-template-columns: 1fr; height: auto; }
  .win-side, .win-chat { display: none; }
  .sec-head, .faq, .sec-grid { grid-template-columns: 1fr; }
  .sec-head > p { justify-self: start; }
  .agent-grid, .stats, .grid, .dl-cards { grid-template-columns: 1fr; }
  .card.span2 { grid-column: auto; }
  .ring { height: 420px; } .ring::after { display: none; }
  .final { flex-direction: column; text-align: center; gap: 30px; padding: 44px 24px; }
  .final-m { width: 160px; }
}

/* ---------- fixes: icons, sky, audio card ---------- */
.i { flex: none; vertical-align: -2px; }
.chip .i, .node .i { color: var(--azul); }
.h-ic, .stat .ic { color: var(--profundo); }
.lock, .star { display: flex; color: var(--suave); }
.sky { inset: 0; background:
    radial-gradient(60% 40% at 50% 22%, rgba(255,255,255,.25), transparent 70%),
    linear-gradient(180deg, #3f7cf0 0%, var(--azul) 28%, var(--cielo) 55%, #b9d2ff 72%, #e6eefc 86%, var(--fondo) 100%); }
.cloud-bank { height: 240px; margin-top: -170px; background:
    radial-gradient(30% 60% at 8% 65%, #fff 45%, transparent 72%),
    radial-gradient(28% 70% at 30% 72%, #fff 45%, transparent 72%),
    radial-gradient(30% 65% at 52% 78%, #fff 45%, transparent 72%),
    radial-gradient(28% 70% at 74% 70%, #fff 45%, transparent 72%),
    radial-gradient(30% 60% at 94% 66%, #fff 45%, transparent 72%),
    linear-gradient(180deg, transparent 60%, var(--fondo) 92%); filter: blur(16px); }
h1, h2, h3 { font-weight: 600; }
.hero h1 { font-weight: 600; }
.art-audio { gap: 8px; }
.aud { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; box-shadow: 0 1px 3px rgba(28,42,94,.06); }
.aud i { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #edf3ff; color: var(--azul); }
.aud i.off { color: var(--suave); background: #f1f3f7; position: relative; }
.aud i.off::after { content: ""; position: absolute; width: 18px; height: 2px; background: var(--suave); rotate: -45deg; }
.aud.muted { color: var(--suave); }

/* ---------- brand: logo + Nunito for titles ---------- */
.nav-logo { align-items: center; gap: 8px; }
.nav-logo .wm { height: 24px; width: auto; }
.nav-logo .wm.sm { height: 19px; }
h1, h2, .card h3, .stat b, .dl-card b, .pg-title, .side-foot { font-family: "Nunito", "Nunito Black", system-ui, sans-serif; }
h1, h2 { font-weight: 900; letter-spacing: -0.025em; }
.hero h1 { font-weight: 900; letter-spacing: -0.03em; line-height: .95; }
.card h3 { font-weight: 800; letter-spacing: -0.01em; }
.stat b { font-weight: 900; letter-spacing: -0.02em; }
.side-foot { font-weight: 900; }