:root {
  --bg: #050609; --bg-2: #0b0d14; --card: rgba(255,255,255,.035); --card-2: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --text: #f5f6fb; --muted: #9ba1b5; --dim: #6b7185;
  --v: #8b5cf6; --b: #3b82f6; --c: #22d3ee; --p: #f472b6;
  --grad: linear-gradient(100deg, #a78bfa 0%, #60a5fa 40%, #22d3ee 70%, #f0abfc 100%);
  --r: 20px; --ease: cubic-bezier(.2,.8,.2,1);
  --shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px var(--line);
  color-scheme: dark;
}
@media (prefers-color-scheme: no-light) {
  :root:not([data-theme="dark"]) {
    --bg: #fbfbfe; --bg-2: #f2f3f9; --card: rgba(15,18,40,.03); --card-2: rgba(15,18,40,.055);
    --line: rgba(15,18,40,.09); --line-2: rgba(15,18,40,.16); --text: #0c0e1a; --muted: #555b72; --dim: #80869b;
    --shadow: 0 30px 70px -25px rgba(40,50,120,.28), 0 0 0 1px var(--line); color-scheme: light;
  }
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font: 400 16px/1.6 Inter, "Source Sans 3", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: Sora, Inter, sans-serif; letter-spacing: -.035em; line-height: 1.05; font-weight: 600; }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.grad { color: var(--v); }
@supports (background-clip: text) or (-webkit-background-clip: text) { .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } }
@keyframes shimmer { to { background-position: 200% center; } }

/* Fondo: aurora suave */
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .32; }
.aurora i:nth-child(1) { width: 640px; height: 640px; background: #7c3aed; top: -260px; left: 50%; margin-left: -520px; }
.aurora i:nth-child(2) { width: 560px; height: 560px; background: #0ea5e9; top: -200px; left: 50%; margin-left: 0; animation-delay: -8s; }
.aurora i:nth-child(3) { width: 420px; height: 420px; background: #db2777; top: 380px; left: 50%; margin-left: -200px; opacity: .14; animation-delay: -14s; }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.12); } }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px); background-size: 3px 3px; mask: linear-gradient(#000, transparent 70%); }

/* Navegación */
header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid transparent; transition: border-color .3s; }
header.scrolled { border-bottom-color: var(--line); }
header .wrap { display: flex; align-items: center; gap: 28px; height: 66px; }
.logo { display: flex; align-items: center; gap: 10px; font: 600 17px Sora, sans-serif; letter-spacing: -.02em; }
.logo img { width: 30px; height: 30px; border-radius: 9px; }
header nav { display: flex; gap: 4px; margin-right: auto; }
header nav a { padding: 8px 14px; border-radius: 999px; color: var(--muted); font-size: 14.5px; font-weight: 500; transition: color .2s, background .2s; }
header nav a:hover { color: var(--text); background: var(--card-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .3s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--text); color: var(--bg); }
.btn.primary:hover { box-shadow: 0 0 0 6px color-mix(in srgb, var(--text) 12%, transparent); }
.btn.ghost { border-color: var(--line-2); background: var(--card); }
.btn.ghost:hover { background: var(--card-2); }
.btn.glow { background: linear-gradient(100deg, #7c3aed, #3b82f6 55%, #06b6d4); color: #fff; box-shadow: 0 10px 40px -10px #6366f1; }
.btn.lg { height: 52px; padding: 0 28px; font-size: 16px; }
.menu-btn { display: none; }

/* Hero */
.hero { text-align: center; padding: 70px 0 40px; position: relative; }
.hero-cloud { position: relative; width: 190px; height: 160px; margin: 0 auto 6px; cursor: pointer; }
.hero-cloud .mascot { width: 190px; height: 157px; }
.bubble { position: absolute; left: 50%; bottom: calc(100% - 8px); translate: -50% 0; width: max-content; max-width: 300px; padding: 9px 15px; border-radius: 16px 16px 16px 4px; background: var(--card-2); border: 1px solid var(--line-2); backdrop-filter: blur(12px); font-size: 14px; color: var(--text); opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .35s, transform .45s var(--ease); pointer-events: none; }
.bubble.on { opacity: 1; transform: none; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: 13.5px; color: var(--muted); margin-bottom: 26px; }
.pill b { padding: 3px 10px; border-radius: 999px; background: linear-gradient(100deg, #7c3aed, #0ea5e9); color: #fff; font-size: 12px; font-weight: 600; }
.hero h1 { font-size: clamp(44px, 7.4vw, 92px); max-width: 1100px; margin: 0 auto; }
.hero .lead { max-width: 640px; margin: 24px auto 0; font-size: clamp(17px, 2vw, 20px); color: var(--muted); }

/* Compositor tipo chat */
.composer { position: relative; max-width: 760px; margin: 44px auto 0; text-align: left; }
.composer::before { content: ""; position: absolute; inset: -1px; border-radius: 30px; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; }
.composer::after { content: ""; position: absolute; inset: 10% 5% -20%; z-index: -1; background: var(--grad); filter: blur(60px); opacity: .22; }
.composer form { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 14px 22px; border-radius: 30px; background: color-mix(in srgb, var(--bg-2) 88%, transparent); backdrop-filter: blur(20px); }
.composer textarea { width: 100%; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 18px/1.5 Inter, sans-serif; min-height: 56px; }
.composer textarea::placeholder { color: var(--muted); }
.composer .row { display: flex; align-items: center; gap: 8px; }
.composer .chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font: 500 13.5px Inter, sans-serif; cursor: pointer; transition: all .2s; }
.composer .chip:hover, .composer .chip[aria-pressed="true"] { color: var(--text); background: var(--card-2); border-color: color-mix(in srgb, var(--v) 60%, var(--line-2)); }
.composer .send { margin-left: auto; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--text); color: var(--bg); display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--ease), opacity .2s; }
.composer .send:hover { transform: scale(1.06); }
.composer .send svg { width: 20px; height: 20px; }
.hero .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.device-note { margin-top: 12px; color: var(--dim); font-size: 13.5px; min-height: 1em; }
.trust { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 26px; color: var(--dim); font-size: 13.5px; }
.trust span::before { content: "✓ "; color: var(--c); }

/* Vitrina del producto */
.showcase { position: relative; margin: 70px auto 0; max-width: 1120px; perspective: 1600px; }
.frame { border-radius: 22px; overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow); transform: rotateX(14deg) scale(.96); transform-origin: top center; transition: transform 1s var(--ease); }
.frame.in { transform: none; }
.frame .bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.frame .bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.frame .bar span { margin: 0 auto; padding: 4px 60px; border-radius: 8px; background: var(--card-2); color: var(--dim); font-size: 12px; }
.showcase::after { content: ""; position: absolute; inset: auto 10% -40px; height: 120px; background: var(--grad); filter: blur(80px); opacity: .25; z-index: -1; }

/* Secciones */
section.block { padding: 130px 0 0; }
.kicker { display: inline-block; font: 600 13px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
h2 { font-size: clamp(36px, 5.2vw, 64px); max-width: 860px; }
.center { text-align: center; } .center h2, .center .sub { margin-inline: auto; }
.sub { max-width: 640px; margin-top: 18px; font-size: 18px; color: var(--muted); }

/* Modelos */
.models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.model { position: relative; padding: 30px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform .4s var(--ease), border-color .3s; }
.model:hover { transform: translateY(-4px); border-color: var(--line-2); }
.model .dot { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; margin-bottom: 22px; }
.model h3 { font-size: 26px; } .model p { color: var(--muted); margin-top: 10px; }
.model .meter { display: flex; gap: 5px; margin-top: 22px; } .model .meter i { flex: 1; height: 5px; border-radius: 9px; background: var(--line-2); } .model .meter i.on { background: var(--grad); }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(220px, auto); gap: 16px; margin-top: 56px; }
.tile { position: relative; grid-column: span 2; padding: 30px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; isolation: isolate; transition: border-color .3s; }
.tile:hover { border-color: var(--line-2); }
.tile.w3 { grid-column: span 3; } .tile.w4 { grid-column: span 4; } .tile.tall { grid-row: span 2; }
.tile h3 { font-size: 24px; margin-top: auto; } .tile p { color: var(--muted); margin-top: 8px; max-width: 420px; }
.tile .ico { font-size: 30px; margin-bottom: 14px; }
.tile::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; right: -100px; top: -120px; background: var(--tint, #7c3aed); filter: blur(90px); opacity: .22; z-index: -1; transition: opacity .4s; }
.tile:hover::before { opacity: .38; }
.steps-demo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.steps-demo div { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); font-size: 14px; color: var(--muted); opacity: 0; transform: translateX(-10px); transition: all .5s var(--ease); }
.steps-demo div.on { opacity: 1; transform: none; }
.steps-demo div b { color: var(--text); font-weight: 600; }
.langs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.langs span { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.big-num { font: 600 72px/1 Sora, sans-serif; letter-spacing: -.05em; }

/* Explorador de funciones */
.explore-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 44px; }
.explore-bar input { flex: 1 1 280px; height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: 15px Inter, sans-serif; outline: 0; }
.explore-bar input:focus { border-color: var(--v); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 500 13.5px Inter, sans-serif; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 24px; }
.feat { border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: border-color .2s; }
.feat[open], .feat:hover { border-color: var(--line-2); }
.feat summary { list-style: none; cursor: pointer; padding: 22px; } .feat summary::-webkit-details-marker { display: none; }
.feat .cat { font-size: 12px; color: var(--c); font-weight: 600; letter-spacing: .04em; }
.feat h3 { font-size: 18px; letter-spacing: -.02em; margin: 6px 0; line-height: 1.25; }
.feat .what { color: var(--muted); font-size: 14.5px; } .feat .more { display: inline-block; margin-top: 10px; font-size: 13.5px; color: var(--text); opacity: .7; }
.feat ol { padding: 0 22px 0 42px; color: var(--muted); font-size: 14.5px; } .feat .tip { margin: 10px 22px 22px; padding: 10px 14px; border-radius: 12px; background: var(--card-2); font-size: 13.5px; color: var(--muted); }
.feat ol + .tip, .feat > ol:last-child { margin-bottom: 22px; }
.empty { margin-top: 20px; color: var(--muted); }

/* Pasos */
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 70px; align-items: center; }
.steps { list-style: none; padding: 0; margin-top: 36px; counter-reset: s; display: grid; gap: 4px; }
.steps li { counter-increment: s; display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 600 14px Sora, sans-serif; color: var(--dim); padding-top: 2px; }
.steps b { display: block; font-size: 17px; } .steps span { color: var(--muted); font-size: 15px; }
kbd { padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--card-2); font: 600 13px Inter, sans-serif; }
.shot { border-radius: 18px; box-shadow: var(--shadow); }

/* Planes */
.billing { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); margin-top: 26px; }
.billing[hidden] { display: none; }
.billing button { height: 34px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font: 500 14px Inter; cursor: pointer; }
.billing button[aria-pressed="true"] { background: var(--card-2); color: var(--text); }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 50px; text-align: left; }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.plan.pop { background: linear-gradient(180deg, color-mix(in srgb, var(--v) 16%, transparent), var(--card) 60%); border-color: color-mix(in srgb, var(--v) 55%, transparent); box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--v) 70%, transparent); }
.plan .badge { position: absolute; top: 22px; right: 22px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--card-2); color: var(--muted); }
.plan.pop .badge { background: linear-gradient(100deg, #7c3aed, #0ea5e9); color: #fff; }
.plan h3 { font-size: 20px; letter-spacing: -.02em; }
.plan .price { font: 600 46px/1 Sora, sans-serif; letter-spacing: -.04em; margin: 18px 0 8px; }
.plan .price small { font: 400 15px Inter, sans-serif; color: var(--muted); letter-spacing: 0; }
.plan > p { color: var(--muted); font-size: 14.5px; min-height: 46px; }
.plan ul { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 11px; font-size: 14.5px; }
.plan li { display: flex; gap: 10px; } .plan li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2322d3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5'/%3E%3C/svg%3E") center/14px no-repeat; }
.plan .btn { margin-top: auto; width: 100%; }
.fine { margin-top: 26px; color: var(--dim); font-size: 13px; max-width: 900px; margin-inline: auto; text-align: center; }

/* Privacidad */
.privacy { margin-top: 0; padding: 70px; border-radius: 32px; background: var(--card); border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; overflow: hidden; position: relative; }
.privacy ul { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 28px; }
.privacy li { display: flex; gap: 12px; color: var(--muted); } .privacy li b { color: var(--text); font-weight: 600; }
.shield { font-size: 22px; }

/* FAQ */
.faq-list { max-width: 820px; margin: 50px auto 0; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; padding: 24px 40px 24px 0; font: 500 18px Inter, sans-serif; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font-size: 26px; font-weight: 300; color: var(--muted); transition: rotate .3s var(--ease); }
.faq-list details[open] summary::after { rotate: 45deg; }
.faq-list details p { padding: 0 40px 24px 0; color: var(--muted); }

/* CTA final */
.final { margin-top: 140px; padding: 90px 30px; border-radius: 36px; text-align: center; position: relative; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--v) 30%, transparent), transparent 70%), var(--card); border: 1px solid var(--line); }
.final .mascot { width: 140px; height: 116px; margin: 0 auto 10px; display: block; }
.final h2 { margin-inline: auto; } .final p { color: var(--muted); font-size: 18px; margin: 18px auto 32px; max-width: 520px; }

footer { margin-top: 120px; border-top: 1px solid var(--line); padding: 60px 0 40px; color: var(--muted); font-size: 14.5px; }
.fgrid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; }
.fgrid h4 { color: var(--text); font: 600 14px Inter, sans-serif; margin-bottom: 14px; }
.fgrid a { display: block; padding: 4px 0; transition: color .2s; } .fgrid a:hover { color: var(--text); }
.fbase { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13.5px; }

/* Aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* Demostración viva de la app (mismos colores que claudbar.com/app) */
.demo { --dm-side: #181818; --dm-bg: #212121; --dm-in: #303030; --dm-tx: #ececec; --dm-mu: #afafaf; --dm-ln: rgba(255,255,255,.10); --dm-hv: rgba(255,255,255,.06);
  display: grid; grid-template-columns: 240px 1fr; height: 560px; text-align: left; font: 14px/1.5 ui-sans-serif, -apple-system, system-ui, "Segoe UI", sans-serif; background: var(--dm-bg); color: var(--dm-tx); }
.demo a { color: inherit; }
.demo button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
.d-side { padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; background: var(--dm-side); }
.d-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 2px 8px 12px; }
.d-logo { width: 30px; height: 25px; display: inline-block; } .d-logo .mascot { width: 100%; height: 100%; }
.d-new, .d-conv { display: block; min-height: 36px; padding: 8px 10px; border-radius: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s; }
.d-new:hover, .d-conv:hover { background: var(--dm-hv); }
.d-conv[aria-current="true"] { background: #2a2a2a; }
.d-lbl { font-size: 12.5px; color: var(--dm-mu); padding: 14px 10px 4px; }
.d-me { margin-top: auto; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; font-weight: 500; }
.d-me:hover { background: var(--dm-hv); }
.d-me i { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: #5b5b5b; }
.d-me small { color: var(--dm-mu); font-weight: 400; font-size: 12px; }
.d-main { display: flex; flex-direction: column; min-width: 0; }
.d-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; }
.d-top b { font-weight: 500; font-size: 15px; }
.d-model { padding: 5px 10px; border-radius: 10px; font-weight: 500; }
.d-model:hover { background: var(--dm-hv); }
.d-model::after { content: " ⌄"; color: var(--dm-mu); }
.d-pick { display: none; gap: 6px; padding: 0 14px 6px; overflow-x: auto; }
.d-pick button { flex: none; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--dm-ln); color: var(--dm-mu); }
.d-pick button[aria-current="true"] { background: var(--dm-hv); color: var(--dm-tx); }
.d-log { flex: 1; overflow: hidden; padding: 6px 48px; display: flex; flex-direction: column; gap: 18px; justify-content: flex-end; mask: linear-gradient(transparent, #000 16%); }
.d-u { align-self: flex-end; max-width: 72%; padding: 10px 16px; border-radius: 18px; background: var(--dm-in); animation: d-in .35s ease both; }
.d-b { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; animation: d-in .35s ease both; max-width: 94%; }
.d-b .d-av { width: 30px; height: 25px; } .d-b .d-av .mascot { width: 100%; height: 100%; }
.d-b p { margin: 2px 0 0; line-height: 1.7; }
.d-steps { display: grid; gap: 6px; margin-top: 4px; }
.d-steps div { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--dm-ln); color: var(--dm-mu); font-size: 13px; animation: d-in .3s ease both; }
.d-steps div .cb-ic { color: var(--dm-tx); }
.d-file { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--dm-in); margin-bottom: 6px; }
.d-file small { display: block; color: var(--dm-mu); }
.d-img { margin-top: 10px; width: 240px; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; position: relative; background: linear-gradient(160deg, #1e1b4b, #312e81 40%, #0e7490); animation: d-in .4s ease both; }
.d-img::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 25%, #fde68a 0 9%, transparent 10%), radial-gradient(ellipse at 40% 70%, #fff 0 18%, transparent 19%), radial-gradient(ellipse at 55% 62%, #fff 0 16%, transparent 17%), radial-gradient(ellipse at 30% 66%, #e0e7ff 0 13%, transparent 14%); }
.d-cursor::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--dm-tx); animation: d-pulse 1s infinite; }
.d-box { margin: 10px 48px 22px; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 7px 8px 7px 14px; border-radius: 28px; border: 1px solid var(--dm-ln); background: var(--dm-in); cursor: text; }
.d-plus { color: var(--muted); font-size: 20px; }
.d-input { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-input:empty::before { content: "Pregunta lo que quieras"; color: #8f8f8f; }
.d-caret { width: 2px; height: 18px; background: var(--dm-tx); animation: d-blink 1s steps(2) infinite; margin-left: -8px; }
.d-send { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; font-weight: 700; }
.d-plus { color: var(--dm-tx); }
@keyframes d-in { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
@keyframes d-scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes d-pulse { 50% { transform: scale(.5); opacity: .4; } }
@keyframes d-blink { 50% { opacity: 0; } }
@media (max-width: 760px) { .demo { grid-template-columns: 1fr; height: 520px; } .d-side { display: none; } .d-pick { display: flex; } .d-log { padding: 6px 14px; } .d-box { margin: 10px 10px 14px; } .d-u { max-width: 85%; } .d-img { width: 100%; max-width: 260px; } }

/* Iconos en insignias con degradado */
.tile .ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; margin-bottom: 18px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--tint, #7c3aed) 90%, #fff 0%), color-mix(in srgb, var(--tint, #7c3aed) 55%, #0ea5e9)); box-shadow: 0 14px 34px -14px var(--tint, #7c3aed); }
.tile .ico .cb-ic, .model .dot .cb-ic { width: 24px; height: 24px; }
.model .dot { color: var(--text); }
.composer .chip .cb-ic { width: 17px; height: 17px; }
.steps-demo div .cb-ic, .privacy .shield .cb-ic { color: var(--c); width: 20px; height: 20px; }
.shield { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }

/* Maquetas (sustituyen capturas; se adaptan al teléfono) */
.mk-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; flex: none; }
.mk-win { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow); }
.mk-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.mk-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.mk-bar span { margin-left: 10px; padding: 3px 14px; border-radius: 8px; background: var(--card-2); font-size: 12px; color: var(--muted); }
.mk-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 16 / 10; padding: 28px 20px; background: radial-gradient(80% 60% at 50% 0%, var(--card-2), transparent 70%); }
.mk-weather { position: absolute; top: 16px; right: 16px; padding: 6px 12px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.mk-time { font: 300 clamp(48px, 7vw, 72px)/1 Inter, sans-serif; letter-spacing: -.045em; }
.mk-date { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.mk-search { display: flex; align-items: center; gap: 10px; width: min(460px, 100%); height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--dim); font-size: 14px; white-space: nowrap; overflow: hidden; }
.mk-search span { overflow: hidden; text-overflow: ellipsis; }
.mk-apps { display: grid; grid-template-columns: repeat(4, 64px); gap: 14px; margin-top: 10px; }
.mk-apps div { display: grid; justify-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.mk-apps b { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: 13px; }
.mk-hint { position: absolute; left: 16px; bottom: 14px; font-size: 12px; color: var(--dim); }
.mk-panel { width: 100%; max-width: 460px; justify-self: center; padding: 8px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow); }
.mk-ptitle { padding: 12px 14px 8px; font-weight: 600; font-size: 17px; }
.mk-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 14px; border-top: 1px solid var(--line); }
.mk-row b { display: block; font-size: 15px; font-weight: 500; }
.mk-row small { color: var(--muted); font-size: 13px; }
.mk-sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); }
.mk-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .3s; }
.mk-sw.on { background: var(--text); border-color: var(--text); }
.mk-sw.on::after { background: var(--bg); transform: translateX(18px); }
.mk-dl { margin: 12px 14px 10px; display: inline-flex; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; }
@media (max-width: 760px) {
  .mk-tab { aspect-ratio: auto; min-height: 460px; padding: 56px 16px 48px; }
  .mk-apps { grid-template-columns: repeat(4, 1fr); width: 100%; gap: 8px; }
  .mk-search { height: 44px; font-size: 13px; }
}
/* Más sobrio: sin insignias de colores ni adornos de juguete */
.tile .ico { background: var(--card-2); border: 1px solid var(--line); color: var(--text); box-shadow: none; }
.tile::before { opacity: .1; } .tile:hover::before { opacity: .16; }
.pill b { background: var(--text); color: var(--bg); }
.btn.glow { background: var(--text); color: var(--bg); box-shadow: none; }
.btn.glow::before { display: none; }
.model .dot { background: var(--card-2) !important; border: 1px solid var(--line); }
.model .meter i.on { background: var(--text); }
.composer::before { opacity: .35; } .composer::after { opacity: .1; }
.cb-sky .cb-cloud { opacity: .05 !important; }

/* Ayuda como chat (faq-bot.js) */
.fb { max-width: 760px; margin: 44px auto 0; border: 1px solid var(--line); border-radius: 22px; background: var(--bg-2); overflow: hidden; box-shadow: var(--shadow); text-align: left; }
.fb-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.fb-m { width: 46px; height: 38px; flex: none; } .fb-m .mascot { width: 100%; height: 100%; }
.fb-head b { display: block; font-size: 15px; } .fb-head small { color: var(--muted); font-size: 13px; }
.fb-log { display: flex; flex-direction: column; gap: 10px; max-height: 340px; min-height: 160px; overflow-y: auto; padding: 18px; }
.fb-msg { max-width: 85%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.55; animation: cbMsgIn .24s ease both; }
.fb-msg.bot { align-self: flex-start; background: var(--card-2); border-bottom-left-radius: 6px; }
.fb-msg.me { align-self: flex-end; background: var(--text); color: var(--bg); border-bottom-right-radius: 6px; }
.fb-msg.typing { color: var(--muted); }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; }
.fb-chips button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font: 13px Inter, sans-serif; cursor: pointer; }
.fb-chips button:hover { background: var(--card-2); color: var(--text); }
.fb-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.fb-form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: 15px Inter, sans-serif; outline: 0; }
.fb-form input:focus { border-color: color-mix(in srgb, var(--text) 35%, transparent); }
.fb-send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--text); color: var(--bg); font-weight: 700; cursor: pointer; }
@media (max-width: 760px) { .fb-log { max-height: 300px; } .fb-msg { max-width: 92%; } }

@media (max-width: 1000px) {
  .plans { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); } .tile, .tile.w3, .tile.w4 { grid-column: span 2; } .tile.tall { grid-row: auto; }
  .split, .privacy { grid-template-columns: 1fr; gap: 40px; } .privacy { padding: 40px 28px; }
  .models { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  header nav, header .hide-sm { display: none; }
  .wrap { width: calc(100% - 32px); }
  .hero { padding-top: 40px; }
  .plans { grid-template-columns: 1fr; }
  section.block { padding-top: 90px; }
  .composer .chip span { display: none; }
  .final { padding: 60px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; } .frame { transform: none; }
}
  .devs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; text-align: left; }
  .dev { display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
  .dev:hover { border-color: color-mix(in srgb, var(--accent, #a78bfa) 45%, var(--line)); transform: translateY(-2px); }
  .dev-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--line); color: inherit; margin-bottom: 6px; }
  .dev b { font: 600 16px Inter, sans-serif; } .dev small { color: var(--muted); font-size: 14px; line-height: 1.45; }
  @media (max-width: 900px) { .devs { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .devs { grid-template-columns: 1fr 1fr; gap: 10px; } .dev { padding: 14px; } .dev small { font-size: 12.5px; } }
  .wx { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .wx-list { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; color: var(--muted); }
  .wx-list li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 10px; vertical-align: middle; opacity: .7; }
  .wx-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); flex-wrap: wrap; }
  .wx-tabs button { border: 0; background: none; color: var(--muted); font: 600 14px Inter, sans-serif; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s; }
  .wx-tabs button[aria-selected="true"] { background: var(--fg, #fff); color: var(--bg, #000); }
  .wx-stage { position: relative; height: 520px; display: grid; place-items: center; perspective: 1100px; }
  .wx-glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(124,108,255,.38), transparent 65%); filter: blur(30px); animation: wx-pulse 6s ease-in-out infinite; }
  @keyframes wx-pulse { 50% { transform: scale(1.12); opacity: .7; } }
  .wx-watch { position: relative; transform-style: preserve-3d; transition: transform .25s ease-out; animation: wx-float 6s ease-in-out infinite; }
  @keyframes wx-float { 50% { translate: 0 -10px; } }
  .wx-watch.swap { animation: wx-swap .8s cubic-bezier(.65,0,.35,1); }
  .wx-case { position: relative; z-index: 2; }
  .wx-screen { position: relative; overflow: hidden; background: #000; }
  .wx-screen iframe { border: 0; display: block; background: #000; }
  .wx-glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 22%, transparent 38%), radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.10), transparent 60%); mix-blend-mode: screen; }
  .wx-strap { position: absolute; left: 50%; translate: -50% 0; z-index: 1; }
  .wx-strap .lug { position: absolute; left: 6%; right: 6%; height: 10px; background: linear-gradient(#0d0d0f, #2a2a2e); border-radius: 3px; }
  .wx-strap.top .lug { bottom: -4px; } .wx-strap.bot .lug { top: -4px; }
  .wx-strap .holes { position: absolute; left: 50%; translate: -50% 0; top: 42%; width: 6px; height: 60px; background: radial-gradient(circle, #050506 2.2px, transparent 2.6px) 0 0 / 6px 15px repeat-y; opacity: .9; }
  .wx-crown, .wx-btn { position: absolute; z-index: 1; }
  .wx-btn.b2 { display: none; }
  /* Apple Watch Series 10 (negro azabache, correa vino) */
  .wx-watch.apple .wx-case { width: 236px; height: 280px; border-radius: 66px; padding: 7px; background: linear-gradient(155deg, #4a4b50 0%, #1c1c1f 22%, #050506 50%, #1a1a1d 78%, #45464b 100%); box-shadow: 0 60px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08), inset 0 2px 2px rgba(255,255,255,.3), inset 0 -3px 5px rgba(0,0,0,.8); }
  .wx-watch.apple .wx-screen { width: 222px; height: 266px; border-radius: 60px; box-shadow: inset 0 0 0 9px #000; }
  .wx-watch.apple iframe { width: 202px; height: 246px; margin: 10px; border-radius: 52px; }
  .wx-watch.apple .wx-strap { width: 176px; height: 175px; background: linear-gradient(90deg, #2a0f18 0%, #4a1c2a 16%, #3d1622 50%, #4a1c2a 84%, #2a0f18 100%); box-shadow: inset 0 0 18px rgba(0,0,0,.45); }
  .wx-watch.apple .wx-strap.top { bottom: 88%; border-radius: 46px 46px 6px 6px; } .wx-watch.apple .wx-strap.bot { top: 88%; border-radius: 6px 6px 46px 46px; }
  .wx-watch.apple .wx-strap .lug { background: linear-gradient(#050506, #1d1d20); }
  .wx-watch.apple .wx-strap .holes { display: none; }
  .wx-watch.apple .wx-crown { right: -12px; top: 30%; width: 14px; height: 42px; border-radius: 4px 8px 8px 4px; background: repeating-linear-gradient(0deg, #1f1f22 0 2px, #5a5a60 2px 3px), linear-gradient(90deg, #0a0a0b, #4a4a50); box-shadow: inset -2px 0 3px rgba(0,0,0,.7); }
  .wx-watch.apple .wx-btn { right: -5px; top: 52%; width: 6px; height: 56px; border-radius: 3px; background: linear-gradient(90deg, #050506, #333338); }
  /* Galaxy Watch Ultra (titanio, caja cuadrada redondeada, bisel con números) */
  .wx-watch.galaxy .wx-case { width: 292px; height: 292px; border-radius: 34%; padding: 22px; background: radial-gradient(130% 130% at 25% 15%, #5d6470 0%, #2b3039 40%, #191c22 70%, #3a404b 100%); box-shadow: 0 60px 100px -40px rgba(0,0,0,.9), inset 0 2px 3px rgba(255,255,255,.22), inset 0 -4px 8px rgba(0,0,0,.7); }
  .wx-watch.galaxy .wx-case::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: repeating-conic-gradient(from -1deg, rgba(255,255,255,.35) 0 1.2deg, transparent 1.2deg 30deg), radial-gradient(circle, #15181d 64%, #262a32 66%, #1b1e24 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.06); }
  .wx-watch.galaxy .wx-case::after { content: ""; position: absolute; top: 14px; left: 50%; translate: -50% 0; border: 6px solid transparent; border-top: 8px solid #f97316; }
  .wx-watch.galaxy .wx-screen { position: relative; z-index: 1; width: 248px; height: 248px; border-radius: 50%; box-shadow: inset 0 0 0 4px #050608; }
  .wx-watch.galaxy iframe { width: 240px; height: 240px; margin: 4px; border-radius: 50%; }
  .wx-watch.galaxy .wx-strap { width: 190px; height: 165px; background: linear-gradient(90deg, #2b3038 0%, #4a515d 18%, #3f4652 50%, #4a515d 82%, #2b3038 100%); }
  .wx-watch.galaxy .wx-strap.top { bottom: 86%; border-radius: 28px 28px 8px 8px; } .wx-watch.galaxy .wx-strap.bot { top: 86%; border-radius: 8px 8px 28px 28px; }
  .wx-watch.galaxy .wx-strap .lug { background: linear-gradient(#1a1d23, #3a404b); }
  .wx-watch.galaxy .wx-strap::before { content: ""; position: absolute; left: 22%; right: 22%; top: 34%; height: 14px; border-radius: 8px; background: rgba(0,0,0,.35); box-shadow: 0 34px 0 rgba(0,0,0,.35); }
  .wx-watch.galaxy .wx-strap .holes { display: none; }
  .wx-watch.galaxy .wx-crown { right: -9px; top: 28%; width: 12px; height: 34px; border-radius: 4px; background: linear-gradient(90deg, #1b1e24, #5b626e); }
  .wx-watch.galaxy .wx-btn { display: block; right: -9px; top: 44%; width: 12px; height: 34px; border-radius: 4px; background: linear-gradient(90deg, #c2410c, #fb923c); }
  .wx-watch.galaxy .wx-btn.b2 { display: block; right: -9px; top: 60%; width: 12px; height: 34px; border-radius: 4px; background: linear-gradient(90deg, #1b1e24, #5b626e); }
  /* Pixel Watch 3 (aluminio plateado pulido, cristal abombado) */
  .wx-watch.pixel .wx-case { width: 262px; height: 262px; border-radius: 50%; padding: 10px; background: radial-gradient(circle at 32% 24%, #ffffff 0%, #d9dade 26%, #a6a7ad 55%, #e3e4e8 80%, #8d8e95 100%); box-shadow: 0 50px 90px -35px rgba(0,0,0,.8), inset 0 -4px 8px rgba(0,0,0,.25); }
  .wx-watch.pixel .wx-screen { width: 242px; height: 242px; border-radius: 50%; box-shadow: inset 0 0 0 11px #000, inset 0 0 22px 11px rgba(0,0,0,.9); }
  .wx-watch.pixel iframe { width: 220px; height: 220px; margin: 11px; border-radius: 50%; }
  .wx-watch.pixel .wx-glare { background: radial-gradient(70% 45% at 38% 18%, rgba(255,255,255,.28), transparent 60%), linear-gradient(140deg, rgba(255,255,255,.12), transparent 40%); }
  .wx-watch.pixel .wx-strap { width: 138px; height: 175px; background: linear-gradient(90deg, #cfd0d4, #f1f1f3 30%, #e4e5e8 50%, #f1f1f3 70%, #cfd0d4); }
  .wx-watch.pixel .wx-strap.top { bottom: 86%; border-radius: 34px 34px 10px 10px; } .wx-watch.pixel .wx-strap.bot { top: 86%; border-radius: 10px 10px 34px 34px; }
  .wx-watch.pixel .wx-strap .lug { background: linear-gradient(#b9babf, #e9e9ec); } .wx-watch.pixel .wx-strap .holes { background-image: radial-gradient(circle, #9fa0a6 2.2px, transparent 2.6px); }
  .wx-watch.pixel .wx-crown { right: -10px; top: 44%; width: 12px; height: 30px; border-radius: 5px; background: repeating-linear-gradient(0deg, #b4b5ba 0 2px, #e8e8eb 2px 3.4px); }
  /* fotos */
  .wx-photo { display: none; position: relative; z-index: 1; width: auto; height: min(470px, 100vw); filter: brightness(.86) contrast(1.06) saturate(.95) drop-shadow(0 40px 60px rgba(0,0,0,.55)); user-select: none; -webkit-user-drag: none; }
  .wx-watch.apple .wx-photo.a, .wx-watch.galaxy .wx-photo.g, .wx-watch.pixel .wx-photo.p { display: block; }
  .wx-watch > .wx-strap, .wx-watch > .wx-crown, .wx-watch > .wx-btn { display: none !important; }
  .wx-watch .wx-case::before, .wx-watch .wx-case::after { display: none !important; }
  .wx-watch.apple .wx-case { position: absolute; z-index: 2; left: 6.2%; top: 19.7%; width: 82.6%; height: 61.3%; padding: 0; background: none; box-shadow: none; border-radius: 22% / 18.5%; }
  .wx-watch.galaxy .wx-case { position: absolute; z-index: 2; left: 9.4%; top: 26.9%; width: 76.3%; height: 48.9%; padding: 0; background: none; box-shadow: none; border-radius: 50%; }
  .wx-watch.pixel .wx-case { position: absolute; z-index: 2; left: 6.2%; top: 18.6%; width: 83.4%; height: 58%; padding: 0; background: none; box-shadow: none; border-radius: 50%; }
  .wx-watch .wx-screen { width: 100% !important; height: 100% !important; border-radius: inherit !important; box-shadow: none !important; background: #000; }
  .wx-watch .wx-screen iframe { margin: 0 !important; border-radius: 0 !important; transform-origin: 0 0; }
  .wx-watch .wx-glare { border-radius: inherit; }
  .wx-watch .wx-case { transition: opacity .2s; }
  .wx-watch:not(.ready) .wx-case { opacity: 0; }
  .wx-watch { transition: transform .9s cubic-bezier(.22,1,.36,1); animation: wx-float 9s ease-in-out infinite; will-change: transform; }
  @keyframes wx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
  .wx-watch.swap { animation: wx-swap .9s cubic-bezier(.65,0,.35,1); }
  @keyframes wx-swap { 0% { opacity: 1; filter: blur(0); scale: 1; } 42% { opacity: 0; filter: blur(8px); scale: .94; } 58% { opacity: 0; filter: blur(8px); scale: 1.04; } 100% { opacity: 1; filter: blur(0); scale: 1; } }
  .wx-glow { animation-duration: 10s; }
  .wx-legal { margin-top: 18px; font-size: 11.5px; line-height: 1.5; color: var(--muted); opacity: .75; max-width: 520px; }
  /* fin fotos */
  .wx-cap { position: absolute; bottom: -18px; z-index: 3; color: var(--muted); font-size: 13px; letter-spacing: .02em; }
  @media (max-width: 900px) { .wx { grid-template-columns: 1fr; text-align: center; } .wx-txt .sub { text-align: center !important; margin: 0 auto !important; } .wx-list { justify-items: center; } .wx-stage { height: 480px; } }
  @media (prefers-reduced-motion: reduce) { .wx-watch, .wx-glow { animation: none !important; } }
  .plan .renew { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted, #8a8ca3); text-align: center; }

/* cb-premium.css */
/* Capa premium compartida de Claudbar (portada, app, cuenta y ajustes). Va después de los estilos de cada página. */
:root { --cb-grad: linear-gradient(100deg, #a78bfa 0%, #60a5fa 40%, #22d3ee 70%, #f0abfc 100%); --cb-ease: cubic-bezier(.2,.8,.2,1); }

/* Iconos de línea (reemplazan a los emojis) */
.cb-ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Cielo vivo */
.cb-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cb-sky .cb-cloud { position: absolute; left: 0; fill: #c7d2fe; animation: cb-drift linear infinite; will-change: transform; }
.cb-sky i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0; animation: cb-twinkle ease-in-out infinite; }
@keyframes cb-drift { from { transform: translateX(-40vw); } to { transform: translateX(130vw); } }
@keyframes cb-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: .55; } }
@media (prefers-color-scheme: no-light) { :root:not([data-theme="dark"]) .cb-sky .cb-cloud { fill: #a5b4fc; } :root:not([data-theme="dark"]) .cb-sky i { display: none; } }
:root[data-theme="light"] .cb-sky .cb-cloud { fill: #a5b4fc; } :root[data-theme="light"] .cb-sky i { display: none; }

/* Brillo que sigue al cursor */
.tile, .plan, .model, .feat, .tcard, .cb-glow { position: relative; }
.tile::after, .plan::after, .model::after, .feat::after, .tcard::after, .cb-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(167, 139, 250, .13), transparent 45%); }
.tile:hover::after, .plan:hover::after, .model:hover::after, .feat:hover::after, .tcard:hover::after, .cb-glow:hover::after { opacity: 1; }

/* Botones con brillo que cruza */
.btn.glow, .btn.primary { position: relative; overflow: hidden; }
.btn.glow::before, .cb-premium #auth .btn.primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); animation: cb-sheen 4.5s ease-in-out infinite; }
@keyframes cb-sheen { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* ===== Cuenta: pantalla de entrada dividida ===== */
body.cb-auth { font-family: Inter, var(--body); }
body.cb-auth .card { position: relative; background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); box-shadow: 0 50px 120px -40px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06); }
body.cb-auth .card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--cb-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .45; pointer-events: none; }
body.cb-auth h1 { font: 600 30px/1.15 Sora, sans-serif; letter-spacing: -.03em; }
body.cb-auth .btn.primary { background: linear-gradient(100deg, #7c3aed, #3b82f6 55%, #06b6d4); color: #fff; box-shadow: 0 14px 40px -14px #6366f1; }
body.cb-auth .tabs button[aria-selected="true"] { background: var(--bg); }
.cb-show { display: none; }
@media (min-width: 1000px) {
  body.cb-auth { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 40px; padding: 40px 6vw; }
  body.cb-auth .card { justify-self: start; }
  .cb-show { display: flex; flex-direction: column; justify-content: center; max-width: 560px; justify-self: end; animation: cb-rise .9s var(--cb-ease) both; }
}
.cb-show .cb-m { width: 230px; height: 190px; margin: 0 0 10px -18px; filter: drop-shadow(0 30px 60px rgba(124, 58, 237, .45)); cursor: pointer; }
.cb-show .cb-m .mascot { width: 100%; height: 100%; }
.cb-show .cb-say { min-height: 1.6em; margin: 0 0 18px; font: 500 17px Inter, sans-serif; color: var(--muted); transition: opacity .3s; }
.cb-show h2 { font: 600 clamp(40px, 4.4vw, 60px)/1.04 Sora, sans-serif; letter-spacing: -.04em; margin: 0; }
.cb-show h2 span { background: var(--cb-grad); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; }
.cb-show ul { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 12px; }
.cb-show li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 60%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); backdrop-filter: blur(12px); color: var(--muted); font-size: 15px; animation: cb-rise .8s var(--cb-ease) both; }
.cb-show li:nth-child(2) { animation-delay: .12s; } .cb-show li:nth-child(3) { animation-delay: .24s; } .cb-show li:nth-child(4) { animation-delay: .36s; }
.cb-show li b { color: var(--fg); font-weight: 600; display: block; }
.cb-show li .cb-ib { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, #7c3aed, #3b82f6 60%, #06b6d4); box-shadow: 0 10px 24px -10px #6366f1; }
.cb-show li .cb-ib .cb-ic { width: 20px; height: 20px; }
@keyframes cb-rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes cb-shimmer { to { background-position: 200% center; } }

/* ===== Ajustes ===== */
body.cb-settings { font-family: Inter, var(--body); }
body.cb-settings aside { background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
body.cb-settings nav a { border-radius: 12px; position: relative; font-weight: 500; }
body.cb-settings nav a.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface2)); color: var(--fg); }
body.cb-settings nav a.on::before { content: ""; position: absolute; left: -6px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--cb-grad); }
body.cb-settings nav a span, body.cb-settings nav a .cb-ic { color: var(--accent); }
body.cb-settings h2 { font: 600 30px Sora, sans-serif; letter-spacing: -.03em; }
body.cb-settings .card { background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-color: color-mix(in srgb, var(--fg) 9%, transparent); border-radius: 22px; box-shadow: 0 30px 70px -40px rgba(0,0,0,.7); }
body.cb-settings .row + .row { border-top-color: color-mix(in srgb, var(--fg) 7%, transparent); }
body.cb-settings .back { border-radius: 14px; }
body.cb-settings .btn.pri { background: linear-gradient(100deg, #7c3aed, #3b82f6 55%, #06b6d4); border: 0; color: #fff; }
.cb-settings-hero { display: flex; align-items: center; gap: 18px; margin: 0 0 34px; padding: 24px 26px; border-radius: 24px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, #7c3aed 28%, transparent), transparent 60%), color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent); }
.cb-settings-hero .cb-m { width: 96px; height: 80px; flex: none; }
.cb-settings-hero .cb-m .mascot { width: 100%; height: 100%; }
.cb-settings-hero b { display: block; font: 600 24px Sora, sans-serif; letter-spacing: -.03em; }
.cb-settings-hero small { color: var(--muted); font-size: 15px; }

/* ===== App ===== */
.cb-premium .side-item .cb-ic, .cb-premium .pmenu .cb-ic { width: 18px; height: 18px; color: var(--muted); }
.cb-premium .side-item:hover .cb-ic, .cb-premium .pmenu button:hover .cb-ic { color: var(--fg); }
.cb-premium .tcard .ic .cb-ic { width: 19px; height: 19px; color: var(--accent); }
.cb-premium .pmenu button span { display: grid; place-items: center; }

@media (prefers-reduced-motion: reduce) { .cb-sky { display: none; } .btn.glow::before, .cb-premium #auth .btn.primary::before { animation: none; } }

@media (min-width: 1000px) { body.cb-auth.cb-auth-acc { grid-template-columns: 1fr; } body.cb-auth.cb-auth-acc .card { justify-self: center; } }
.cb-logo { display: inline-block; width: 40px; height: 33px; flex: none; margin: -4px 0; }
.cb-logo .mascot { width: 100%; height: 100%; }
@media (max-width: 999px) {
  body.cb-auth .card { background: color-mix(in srgb, var(--surface) 94%, transparent); }
  .cb-sky .cb-cloud:nth-child(n+5) { display: none; }
}
body.cb-settings .card { background: color-mix(in srgb, var(--surface) 88%, transparent); }

/* Inicio de sesión vertical y compacto (computadora y teléfono): nube y título arriba, formulario debajo */
@media (min-width: 1000px) {
  body.cb-auth { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; padding: 40px 16px; }
  body.cb-auth .card { justify-self: auto; }
  .cb-show { display: flex; align-items: center; text-align: center; max-width: 440px; justify-self: auto; }
}
.cb-show { display: flex; flex-direction: column; align-items: center; text-align: center; width: min(440px, 100%); }
.cb-show .cb-m { width: 96px; height: 80px; margin: 0 0 4px; }
.cb-show .cb-say { font-size: 14px; margin: 0 0 6px; min-height: 1.4em; }
.cb-show h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.15; }
.cb-show h2 br { display: none; }
.cb-show ul { display: none; }
body.cb-auth .card { width: min(440px, 100%); padding: 30px 26px 26px; gap: 18px; }
@media (max-width: 520px) { .cb-show .cb-m { width: 80px; height: 66px; } body.cb-auth .card { padding: 24px 18px; border-radius: 20px; } }

/* cb-polish.css */
/* Pulido común (hecho por el equipo NVIDIA: junior + diseñador, revisado): barras finas oscuras, sin toque azul, micro-animaciones. */
===== junior (openai/gpt-oss-20b) =====
:root { --scroll-thumb-dark: rgba(255,255,255,.18); --scroll-thumb-light: rgba(0,0,0,.18); }
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb-dark) transparent; -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb-dark); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-corner { background: transparent; }
:focus:not(:focus-visible) { outline: none; }
:root{--transition-transform:.15s;--transition-bg:.2s;}
button,[role=button],a.btn{transition:scale var(--transition-transform),background-color var(--transition-bg);}
button:active,[role=button]:active,a.btn:active{scale:.96;}
.cb-pop-in{animation:cbPopIn 160ms cubic-bezier(.2,.8,.2,1) forwards;opacity:0;transform:translateY(6px) scale(.98);}
@keyframes cbPopIn{to{opacity:1;transform:translateY(0) scale(1);}}
.cb-msg-in{animation:cbMsgIn 240ms forwards;opacity:0;transform:translateY(8px);}
@keyframes cbMsgIn{to{opacity:1;transform:translateY(0);}}
.cb-shimmer{position:relative;overflow:hidden;}
.cb-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);animation:cb-shimmer-x 1.4s infinite linear;}
@keyframes cb-shimmer-x{to{transform:translateX(100%);}}
.cb-live-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:cb-live 1.2s ease-in-out infinite;}
@keyframes cb-live{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.4);opacity:.6;}}
@media (prefers-reduced-motion:reduce){
*, *::before, *::after{animation-duration:0s!important;transition-duration:0s!important;}
}

/* Sin líneas blancas: el navegador pinta barras claras si la página no se declara oscura. Barras ocultas en menús laterales; finas y oscuras en el contenido. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
aside, .rail, .opt-nav, .library, .drawer, #convs, .side, nav { scrollbar-width: none; }
aside::-webkit-scrollbar, .rail::-webkit-scrollbar, .opt-nav::-webkit-scrollbar, .library::-webkit-scrollbar, .drawer::-webkit-scrollbar, #convs::-webkit-scrollbar, .side::-webkit-scrollbar, nav::-webkit-scrollbar { display: none; }
* { scrollbar-color: rgba(255,255,255,.14) transparent; }
:root[data-theme="light"] * { scrollbar-color: rgba(0,0,0,.18) transparent; }
.opt-nav, .rail, aside { border-right-color: transparent !important; border-left-color: transparent !important; }
@media (prefers-color-scheme: no-light) { :root:not([data-theme="dark"]) { color-scheme: light; } :root:not([data-theme="dark"]) * { scrollbar-color: rgba(0,0,0,.18) transparent; } }

/* cb-index-v2.css */
/* Claudbar · portada v2 (nivel openai.com / gemini.google.com): fondo liso, tipografía grande, mucho aire.
   Se carga al final y sobrescribe el estilo anterior. */
:root {
  --v2-bg: #ffffff; --v2-surface: #f7f7f8; --v2-card: #ffffff; --v2-line: rgba(0, 0, 0, .09);
  --v2-text: #0d0d0d; --v2-muted: #5d5d66; --v2-btn: #0d0d0d; --v2-btn-text: #ffffff;
  --v2-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { --v2-bg: #0b0b0c; --v2-surface: #141416; --v2-card: #141416; --v2-line: rgba(255, 255, 255, .09);
    --v2-text: #f4f4f5; --v2-muted: #a1a1aa; --v2-btn: #f4f4f5; --v2-btn-text: #0b0b0c; }
}
html[data-theme="dark"] { --v2-bg: #0b0b0c; --v2-surface: #141416; --v2-card: #141416; --v2-line: rgba(255, 255, 255, .09);
  --v2-text: #f4f4f5; --v2-muted: #a1a1aa; --v2-btn: #f4f4f5; --v2-btn-text: #0b0b0c; }

html, body { background: var(--v2-bg) !important; color: var(--v2-text) !important; font-family: var(--v2-font) !important; }
.aurora, .grain { display: none !important; }

/* Cabecera fija translúcida */
header#top { background: color-mix(in srgb, var(--v2-bg) 78%, transparent) !important; backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--v2-line) !important; box-shadow: none !important; }
header#top a { color: var(--v2-text); }
header#top nav a, header#top .links a { color: var(--v2-muted) !important; font-size: 14px; font-weight: 500; }
header#top nav a:hover, header#top .links a:hover { color: var(--v2-text) !important; }

/* Botones */
.btn { border-radius: 999px !important; font-weight: 600 !important; box-shadow: none !important; transition: opacity .15s, background .15s !important; }
.btn.primary { background: var(--v2-btn) !important; color: var(--v2-btn-text) !important; border: 0 !important; }
.btn.primary:hover { opacity: .86; }
.btn.ghost { background: transparent !important; color: var(--v2-text) !important; border: 1px solid var(--v2-line) !important; }
.btn.ghost:hover { background: var(--v2-surface) !important; }

/* Hero */
.wrap.hero { padding-top: 140px !important; padding-bottom: 80px !important; }
.wrap.hero h1 { font-size: clamp(42px, 7vw, 72px) !important; font-weight: 600 !important; letter-spacing: -.035em !important; line-height: 1.04 !important; color: var(--v2-text) !important; }
.grad { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--v2-muted) !important; }
.wrap.hero .lead, .lead { font-size: 20px !important; line-height: 1.55 !important; color: var(--v2-muted) !important; max-width: 640px; margin-left: auto; margin-right: auto; }
.hero-cloud, #mascot { transform: scale(.72); transform-origin: center bottom; }
.bubble { background: var(--v2-card) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-line) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .06) !important; }
.chip { background: var(--v2-surface) !important; color: var(--v2-muted) !important; border: 1px solid var(--v2-line) !important; border-radius: 999px !important; }
.trust, .fine, .device-note { color: var(--v2-muted) !important; }

/* Secciones */
section.block { padding-top: 120px !important; padding-bottom: 40px !important; background: transparent !important; }
section.block h2 { font-size: clamp(32px, 4.4vw, 48px) !important; font-weight: 600 !important; letter-spacing: -.03em !important; line-height: 1.1 !important; color: var(--v2-text) !important; }
section.block .sub, .eyebrow { color: var(--v2-muted) !important; }

/* Tarjetas: funciones, modelos, planes, privacidad */
.tile, article.model, article.plan, .privacy, .faq-list details, .showcase .frame, .frame {
  background: var(--v2-card) !important; border: 1px solid var(--v2-line) !important; border-radius: 20px !important; box-shadow: none !important; color: var(--v2-text) !important; }
.tile:hover, article.model:hover { border-color: color-mix(in srgb, var(--v2-text) 22%, transparent) !important; }
.tile h3, article.model h3, article.plan h3 { font-weight: 600 !important; letter-spacing: -.01em; }
.tile p, article.model p, article.plan li, .privacy p { color: var(--v2-muted) !important; }
article.plan .price { font-size: 44px !important; font-weight: 600 !important; letter-spacing: -.03em; color: var(--v2-text) !important; }
.billing { background: var(--v2-surface) !important; border: 1px solid var(--v2-line) !important; border-radius: 999px !important; }

/* Maqueta del producto */
.showcase .frame { overflow: hidden; border-radius: 16px !important; }
.showcase .bar { background: var(--v2-surface) !important; border-bottom: 1px solid var(--v2-line) !important; }

/* Pie */
footer { background: transparent !important; border-top: 1px solid var(--v2-line) !important; color: var(--v2-muted) !important; }
footer a { color: var(--v2-muted) !important; }
footer a:hover { color: var(--v2-text) !important; }

/* demos.css */
.dm-grid{display:grid;gap:20px;grid-template-columns:1fr;margin-top:28px}
@media(min-width:820px){.dm-grid{grid-template-columns:1fr 1fr}}
.dm-card{border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.03);padding:14px}
.dm-card h3{margin:12px 4px 4px;font-size:1.05rem}.dm-card p{margin:0 4px;opacity:.7;font-size:.92rem}
.dm-s{position:relative;height:260px;border-radius:14px;overflow:hidden;background:#141418;color:#eee;font:14px/1.4 system-ui,sans-serif}
.dm-s *{box-sizing:border-box}
.dm-comp{position:absolute;left:16px;right:16px;bottom:16px;border:1px solid #ffffff22;border-radius:16px;padding:12px;background:#1d1d22}
.dm-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:2px solid #d97757;animation:dmType 7s steps(16) infinite}
@keyframes dmType{0%{width:0}35%,100%{width:16ch}}
.dm-pill{display:inline-block;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;border:1px solid #ffffff22;margin-right:6px}
.dm-chip{background:#d97757;color:#111;border-color:transparent;opacity:0;animation:dmChip 7s infinite}
@keyframes dmChip{0%,40%{opacity:0;transform:scale(.6)}48%,92%{opacity:1;transform:none}100%{opacity:0}}
.dm-cloud{position:absolute;left:50%;top:44px;width:90px;height:52px;margin-left:-45px;background:#fff;border-radius:40px;animation:dmFloat 3s ease-in-out infinite}
.dm-cloud:before,.dm-cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}
.dm-cloud:before{width:46px;height:46px;left:12px;top:-22px}.dm-cloud:after{width:36px;height:36px;right:12px;top:-14px}
@keyframes dmFloat{50%{transform:translateY(-6px)}}
.dm-web{position:absolute;inset:16px;border-radius:10px;background:#f4f4f6;color:#222;padding:12px}
.dm-btn{display:inline-block;margin:8px 8px 0 0;padding:8px 12px;border-radius:8px;background:#ddd;font-size:12px;animation:dmHit 8s infinite}
.dm-b2{animation-delay:2.6s}.dm-b3{animation-delay:5.2s}
@keyframes dmHit{0%,18%{background:#ddd;color:#222}22%,96%{background:#4caf50;color:#fff}}
.dm-cur{position:absolute;width:14px;height:14px;border-left:3px solid #111;border-top:3px solid #111;transform:rotate(-10deg);animation:dmCur 8s infinite}
@keyframes dmCur{0%{left:20%;top:80%}20%{left:48px;top:76px}50%{left:120px;top:76px}80%{left:196px;top:76px}100%{left:20%;top:80%}}
.dm-steps{position:absolute;right:20px;bottom:20px;font-size:12px;color:#333}
.dm-file{position:absolute;top:70px;width:70px;height:88px;border-radius:8px;display:grid;place-items:center;font-weight:700;color:#fff}
.dm-in{left:14%;background:#2b6cd8;animation:dmIn 7s infinite}.dm-out{right:14%;background:#b91c1c;animation:dmOut 7s infinite}
@keyframes dmIn{0%{opacity:0;transform:translateX(-30px)}15%,45%{opacity:1;transform:none}60%,100%{opacity:0;transform:translateX(60px)}}
@keyframes dmOut{0%,55%{opacity:0;transform:translateX(-60px)}70%,95%{opacity:1;transform:none}100%{opacity:0}}
.dm-bar{position:absolute;left:14%;right:14%;bottom:40px;height:8px;border-radius:9px;background:#ffffff18;overflow:hidden}
.dm-bar i{display:block;height:100%;background:#d97757;animation:dmBar 7s infinite}
@keyframes dmBar{0%,15%{width:0}60%,100%{width:100%}}
.dm-doc{position:absolute;inset:18px;background:#fbfbfb;color:#222;border-radius:10px;padding:18px;font-size:15px}
.dm-old{background:linear-gradient(#d9775744,#d9775744) no-repeat 0 100%/0 40%;animation:dmMark 7s infinite}
@keyframes dmMark{0%,10%{background-size:0 40%;opacity:1}30%,45%{background-size:100% 40%;opacity:1}55%,100%{opacity:0}}
.dm-new{position:absolute;left:18px;top:42px;color:#2b7a3d;font-weight:600;opacity:0;animation:dmNew 7s infinite}
@keyframes dmNew{0%,55%{opacity:0}65%,95%{opacity:1}100%{opacity:0}}
.dm-sl{position:absolute;left:19%;top:19%;width:62%;height:62%;border-radius:10px;padding:16px;opacity:0;animation:dmSl 9s infinite}
.dm-sl b{display:block;font-size:18px;margin-bottom:10px}.dm-sl i{display:block;height:8px;border-radius:5px;background:currentColor;opacity:.35;margin:7px 0;width:80%}
.dm-sl1{background:#d97757;color:#fff}.dm-sl2{background:#2b2f6b;color:#fff;animation-delay:3s}.dm-sl3{background:#f2e8d8;color:#333;animation-delay:6s}
@keyframes dmSl{0%{opacity:0;transform:translateX(40px)}5%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateX(-40px)}}
.dm-s svg path{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:600;animation:dmDraw 7s infinite}
.dm-p2{animation-delay:.8s!important}.dm-p3{animation-delay:1.6s!important}
@keyframes dmDraw{0%{stroke-dashoffset:600}50%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@media(prefers-reduced-motion:reduce){.dm-s *{animation:none!important}}
/* Novedades: vídeos reales de cada función */
.nv-hero{max-width:1080px;margin:40px auto 0}
.nv-frame{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#111;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.nv-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#1b1b1e;font-size:12px;color:#999}
.nv-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.nv-bar i:nth-child(2){background:#febc2e}.nv-bar i:nth-child(3){background:#28c840}
.nv-bar span{margin-left:10px;padding:3px 12px;border-radius:7px;background:#ffffff0d}
.nv-frame video{display:block;width:100%;aspect-ratio:1280/760;object-fit:cover;background:#111}
.nv-row{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;margin:72px 0}
@media(min-width:900px){.nv-row{grid-template-columns:5fr 7fr}.nv-row.rev .nv-txt{order:2}}
.nv-tag{display:inline-block;font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.08);margin-bottom:12px}
.nv-txt h3{font-size:clamp(24px,3vw,34px);line-height:1.15;margin:0 0 12px}
.nv-txt p{opacity:.8;margin:0 0 14px}
.nv-txt ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.nv-txt li::before{content:"✓ ";color:#3ecf8e;font-weight:700}
.nv-shots h3{font-size:24px;margin:20px 0}
.nv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.nv-grid figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#111}
.nv-grid img{display:block;width:100%;height:auto;transition:transform .4s}
.nv-grid figure:hover img{transform:scale(1.04)}
.nv-grid figcaption{padding:10px 14px;font-size:14px;font-weight:600}
@media(max-width:600px){.nv-row{margin:48px 0}.nv-bar span{display:none}}
/* Nube más grande en la portada */
.hero-cloud,#mascot{transform:none!important}
.hero-cloud{width:260px!important;height:215px!important}
.hero-cloud .mascot{width:260px!important;height:215px!important}
@media(max-width:600px){.hero-cloud,.hero-cloud .mascot{width:200px!important;height:166px!important}}
/* La nube haciendo cada tarea */
.tm{position:relative;height:118px;margin:0 0 14px;display:flex;align-items:flex-end;gap:6px}
.tm-m{width:130px;height:108px}.tm-m .mascot,.tm-m svg{width:100%!important;height:100%!important}
.tm-p{position:relative;width:64px;height:72px}
.tm-p>span{display:block}.tm-easel{position:absolute;inset:0;border:3px solid #b07a4a;border-radius:4px;background:#fff;overflow:hidden}
.tm-easel b{position:absolute;inset:0;background:linear-gradient(135deg,#f472b6,#a78bfa 40%,#38bdf8 70%,#fde047);clip-path:inset(0 100% 0 0);animation:tmPaint 4s ease-in-out infinite}
@keyframes tmPaint{0%,10%{clip-path:inset(0 100% 0 0)}70%,90%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}}
.tm-doc{position:absolute;inset:6px 8px;background:#fff;border-radius:4px;padding:8px 6px;display:grid;gap:6px;align-content:start}
.tm-doc b{display:block;height:5px;border-radius:3px;background:#94a3b8;width:0;animation:tmLine 4s infinite}
.tm-doc b:nth-child(2){animation-delay:.6s}.tm-doc b:nth-child(3){animation-delay:1.2s}
@keyframes tmLine{0%,10%{width:0}50%,90%{width:100%}100%{width:100%;opacity:0}}
.tm-wave{position:absolute;inset:0;display:flex;align-items:center;gap:5px;justify-content:center}
.tm-wave b{width:6px;height:14px;border-radius:4px;background:#10b981;animation:tmWave 1s ease-in-out infinite}
.tm-wave b:nth-child(2){animation-delay:.15s}.tm-wave b:nth-child(3){animation-delay:.3s}.tm-wave b:nth-child(4){animation-delay:.45s}
@keyframes tmWave{50%{height:44px}}
.tm-tv{position:absolute;inset:10px 0;border-radius:8px;background:#ef4444;color:#fff;display:grid;place-items:center;font-size:22px;animation:tmPulse 1.6s infinite}
.tm-link{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:34px;animation:tmPulse 2s infinite}
@keyframes tmPulse{50%{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.tm *{animation:none!important}}
.tm-p{width:64px!important;height:72px!important;flex:0 0 64px;padding:0!important;background:none!important;border:0!important}.tm-p>span{width:auto!important;max-width:64px}.tm-tv{left:0!important;right:0!important}
.tm-p>.tm-wave{display:flex!important}.tm-p>.tm-doc{display:grid!important}.tm-p>.tm-tv,.tm-p>.tm-link{display:grid!important}
/* Agente: la nube haciendo clic en una web */
.tm-p>.tm-web{display:grid!important;position:absolute;inset:6px 0;background:#f4f4f6;border-radius:6px;padding:8px 6px;gap:5px;align-content:start}
.tm-web b{height:8px;border-radius:3px;background:#cbd5e1;animation:tmHit 3s infinite}.tm-web b:nth-child(2){animation-delay:1s}.tm-web b:nth-child(3){animation-delay:2s}
@keyframes tmHit{0%,30%{background:#cbd5e1}35%,100%{background:#22c55e}}
.tm-web em{position:absolute;width:9px;height:9px;border-left:2px solid #111;border-top:2px solid #111;animation:tmCur 3s infinite}
@keyframes tmCur{0%{left:40px;top:14px}33%{left:30px;top:27px}66%{left:30px;top:40px}100%{left:40px;top:14px}}
#capacidades .tile>.ico{display:none!important}
.plan.reveal{opacity:1!important;transform:none!important}
/* Nueva pestaña igual que la extensión */
.mk-tab.nt{background:#060608 radial-gradient(1px 1px at 30px 40px,#fff3,transparent) 0 0/100px 100px!important;gap:12px;padding:70px 18px 56px!important;aspect-ratio:auto;min-height:440px}
.nt-w{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid #ffffff1c;border-radius:10px;background:#0f0f14;text-align:left}
.nt-w b{display:block;font-size:14px}.nt-w small{font-size:10px;color:#bbb}.nt-wi{font-size:18px}
.nt-t{position:absolute;top:12px;right:16px;text-align:right}.nt-t b{display:block;font:300 26px/1 Inter,sans-serif}.nt-t small{font-size:10px;color:#aaa}
.nt-m{width:150px;height:124px}.nt-m .mascot,.nt-m svg{width:100%!important;height:100%!important}
.nt-g{margin:0;max-width:420px;text-align:center;font-size:13px;color:#aaa}.nt-g b{color:#fff}
.nt-s{display:flex;align-items:center;gap:10px;width:min(440px,100%);height:44px;padding:0 6px 0 14px;border-radius:999px;border:1px solid #ffffff1f;background:#0e0e13;font-size:12.5px;color:#aaa}
.nt-sp{color:#60a5fa}.nt-ph{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}
.nt-ia{width:32px;height:32px;border-radius:50%;background:#eee;color:#111;display:grid;place-items:center;font-size:10.5px;font-weight:700}
.nt-go{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);display:grid;place-items:center}
.nt-gear{position:absolute;left:14px;bottom:12px;width:30px;height:30px;border-radius:50%;border:1px solid #ffffff1f;display:grid;place-items:center;font-size:14px;color:#ccc}
.dm-mm{position:absolute;left:50%;top:14px;width:150px;height:124px;margin-left:-75px}
.dm-mm svg{width:100%;height:100%}
.tm-p>.tm-yt{display:grid!important;position:absolute;inset:0;place-items:center;animation:tmPulse 1.6s infinite}
/* Tarjetas de funciones más estéticas */
#funciones .feat{position:relative;border-radius:18px!important;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015))!important;border:1px solid rgba(255,255,255,.09)!important;transition:transform .25s,border-color .25s,box-shadow .25s;overflow:hidden}
#funciones .feat::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 160px at 0% 0%,rgba(124,58,237,.18),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
#funciones .feat:hover{transform:translateY(-4px);border-color:rgba(167,139,250,.45)!important;box-shadow:0 18px 40px -18px rgba(124,58,237,.55)}
#funciones .feat:hover::before{opacity:1}
#funciones .feat .cat{display:inline-block;padding:3px 10px;border-radius:999px;background:rgba(34,211,238,.12);font-size:11.5px!important}
#funciones .feat h3{font-size:19px!important;margin:12px 0 8px!important}
#funciones .feat .more{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:13px!important;margin-top:6px;transition:background .2s}
#funciones .feat:hover .more{background:rgba(255,255,255,.08)}
/* Accesibilidad y velocidad (PageSpeed) */
.btn.primary,.btn.glow,a.pill b,#cta-main{color:#fff!important}
.dm-btn{animation-name:dmHit2!important}
@keyframes dmHit2{0%,18%{background:#ddd;color:#222}22%,96%{background:#15803d;color:#fff}}
footer .fbase span,footer .fbase{color:#9aa0b4!important}
footer h3.fh{font-size:14px;margin:0 0 12px;font-weight:600}
.wrap.hero h1,.wrap.hero .lead,.wrap.hero .pill{animation:none!important;opacity:1!important;transform:none!important}

/* cb-apple.css */
/* Capa final estilo Apple: tipografía del sistema, color sólido, sin adornos */
:root { --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --apple-accent: #7c3aed;
  --body: var(--apple-font); --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; --font-main: var(--apple-font); --v2-font: var(--apple-font);
  --grad: var(--apple-accent); --cb-grad: var(--apple-accent); }
body { font-family: var(--apple-font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -.02em; }
/* Botones y distintivos: un solo color sólido */
.btn.glow, .btn.primary, .btn.pri, .pill b, .plan.pop .badge, body.cb-auth .btn.primary, body.cb-settings .btn.pri { background: var(--apple-accent) !important; box-shadow: none !important; }
.tile .ico, .cb-show li .cb-ib { background: var(--apple-accent) !important; }
/* Texto con degradado → texto sólido */
.grad, .gradient-text { background: none !important; -webkit-text-fill-color: var(--apple-accent) !important; color: var(--apple-accent) !important; }
/* Capas decorativas fuera */
.grain, .bg-live-aurora::before, .bg-live-aurora::after, .cb-shimmer::after, .btn.glow::before, .cb-premium #auth .btn.primary::before { display: none !important; }
.composer::before, body.cb-auth .card::before { background: none !important; }
.feat::after, .tcard::after, .cb-glow::after { display: none !important; }
.plan.pop, .final, .cb-settings-hero { background: color-mix(in srgb, var(--apple-accent) 8%, transparent) !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Color por plan */
html[data-plan=free] { --apple-accent: #8e9bb0; }
html[data-plan=student] { --apple-accent: #30d158; }
html[data-plan=premium] { --apple-accent: #0a84ff; }
html[data-plan=ultimate] { --apple-accent: #bf5af2; }
.plans .plan:nth-child(1) { --plan-c: #8e9bb0; } .plans .plan:nth-child(2) { --plan-c: #30d158; }
.plans .plan:nth-child(3) { --plan-c: #0a84ff; } .plans .plan:nth-child(4) { --plan-c: #bf5af2; }
.plans .plan { border-top: 4px solid var(--plan-c) !important; }
.plans .plan .btn.primary { background: var(--plan-c) !important; border-color: var(--plan-c) !important; }
html[data-plan=premium] .student-only, html[data-plan=ultimate] .student-only { display: none !important; }
/* Registro horizontal en pantallas anchas */
@media (min-width: 820px) {
  #f-register { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; align-items: end; }
  #f-register > :first-child, #f-register > .hint, #f-register > .check, #f-register > button[type=submit] { grid-column: 1 / -1; }
  #f-register > .two { display: contents; }
}
body, input, textarea, button { font-size: max(1em, 16px); }
@media (min-width: 820px) { body.cb-auth .card:has(#f-register:not([hidden])) { max-width: 880px !important; width: 100%; } }

/* cb-nuevo.css */
/* Animaciones de «Nuevo en Claudbar»: una por función, junto a la nube (zona .tm-p de 64×72). */
.tm-p>.tm-live,.tm-p>.tm-kara,.tm-p>.tm-tr,.tm-p>.tm-voz,.tm-p>.tm-eq,.tm-p>.tm-noad,.tm-p>.tm-tabs,.tm-p>.tm-glass{position:absolute!important;inset:0!important;width:64px!important;max-width:64px!important;height:72px!important;box-sizing:border-box}
.tm-p>.tm-live,.tm-p>.tm-tabs,.tm-p>.tm-glass{display:block!important}.tm-p>.tm-kara,.tm-p>.tm-tr,.tm-p>.tm-voz,.tm-p>.tm-noad{display:grid!important}.tm-p>.tm-eq{display:flex!important}

/* 1 · Bar Live: una pantalla que la nube está mirando (línea que la recorre) y ondas de que te escucha */
.tm-live{border:2px solid #a78bfa;border-radius:10px;background:#0f1020;overflow:hidden;box-shadow:0 0 0 0 rgba(167,139,250,.6);animation:tmLiveRing 2s ease-out infinite}
.tm-live::before{content:'';position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#c4b5fd,transparent);animation:tmScan 2.2s ease-in-out infinite}
.tm-live b{position:absolute;left:8px;right:8px;height:5px;border-radius:3px;background:#2e3150}.tm-live b:nth-child(1){top:14px}.tm-live b:nth-child(2){top:26px;right:20px}.tm-live b:nth-child(3){top:38px;right:14px}
.tm-live i{position:absolute;right:6px;bottom:6px;width:10px;height:10px;border-radius:50%;background:#ef4444;animation:tmBlink 1s steps(2) infinite}
@keyframes tmScan{0%{top:2px}50%{top:calc(100% - 4px)}100%{top:2px}}
@keyframes tmLiveRing{0%{box-shadow:0 0 0 0 rgba(167,139,250,.55)}100%{box-shadow:0 0 0 12px rgba(167,139,250,0)}}
@keyframes tmBlink{50%{opacity:.25}}

/* 2 · Letras en karaoke: la línea del medio se ilumina letra a letra */
.tm-kara{display:grid!important;align-content:center;gap:7px;padding:0 4px}
.tm-kara b{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.18)}
.tm-kara b:nth-child(1),.tm-kara b:nth-child(3){width:80%;opacity:.6}
.tm-kara b:nth-child(2){height:10px;background:linear-gradient(90deg,#fff 0 var(--k,0%),rgba(255,255,255,.25) var(--k,0%));box-shadow:0 0 10px rgba(255,255,255,.35);animation:tmKara 2.6s linear infinite}
@property --k{syntax:'<percentage>';inherits:false;initial-value:0%}
@keyframes tmKara{0%{--k:0%}85%,100%{--k:100%}}

/* 3 · Traduce canciones: «Hola» y «Hello» se turnan */
.tm-tr{border-radius:10px;background:#f4f4f6;display:grid!important;place-items:center;font:800 15px/1 system-ui,sans-serif;color:#1e1b4b}
.tm-tr span{grid-area:1/1;animation:tmSwapA 3.2s ease-in-out infinite}.tm-tr span+span{animation-name:tmSwapB;color:#7c3aed}
.tm-tr::after{content:'';position:absolute;bottom:8px;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:2px;background:#c4b5fd;animation:tmPulseW 3.2s ease-in-out infinite}
@keyframes tmSwapA{0%,40%{opacity:1;transform:translateY(0)}50%,90%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}
@keyframes tmSwapB{0%,40%{opacity:0;transform:translateY(8px)}50%,90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(8px)}}
@keyframes tmPulseW{0%,40%,100%{width:22px;margin-left:-11px}50%,90%{width:34px;margin-left:-17px}}

/* 4 · Voz Isabela: ondas de voz que salen en círculos */
.tm-voz{display:grid!important;place-items:center}
.tm-voz i{grid-area:1/1;width:16px;height:16px;border-radius:50%;background:#10b981;box-shadow:0 0 12px #10b981}
.tm-voz b{grid-area:1/1;width:16px;height:16px;border-radius:50%;border:2px solid #34d399;animation:tmRing 2.1s ease-out infinite;opacity:0}
.tm-voz b:nth-child(2){animation-delay:.7s}.tm-voz b:nth-child(3){animation-delay:1.4s}
@keyframes tmRing{0%{width:16px;height:16px;opacity:.9}100%{width:62px;height:62px;opacity:0}}

/* 5 · Música por voz: ecualizador bailando */
.tm-eq{display:flex!important;align-items:flex-end;justify-content:center;gap:4px;padding-bottom:12px}
.tm-eq b{width:7px;border-radius:3px 3px 1px 1px;background:linear-gradient(#f59e0b,#f97316);animation:tmEq .9s ease-in-out infinite alternate}
.tm-eq b:nth-child(1){height:18px}.tm-eq b:nth-child(2){height:34px;animation-delay:.2s}.tm-eq b:nth-child(3){height:24px;animation-delay:.4s}.tm-eq b:nth-child(4){height:40px;animation-delay:.1s}.tm-eq b:nth-child(5){height:16px;animation-delay:.3s}
@keyframes tmEq{to{height:8px}}

/* 6 · Sin anuncios: un anuncio aparece, se tacha y desaparece */
.tm-noad{display:grid!important;place-items:center}
.tm-noad span{width:52px;height:36px;border-radius:8px;background:#fde68a;color:#78350f;display:grid;place-items:center;font:900 14px/1 system-ui,sans-serif;letter-spacing:.06em;animation:tmAd 3s ease-in-out infinite}
.tm-noad i{position:absolute;width:62px;height:4px;border-radius:2px;background:#ef4444;transform:rotate(-30deg) scaleX(0);animation:tmCross 3s ease-in-out infinite}
@keyframes tmAd{0%,15%{transform:scale(.6);opacity:0}25%,60%{transform:scale(1);opacity:1}80%,100%{transform:scale(.2);opacity:0}}
@keyframes tmCross{0%,35%{transform:rotate(-30deg) scaleX(0);opacity:1}50%,65%{transform:rotate(-30deg) scaleX(1);opacity:1}80%,100%{transform:rotate(-30deg) scaleX(1);opacity:0}}

/* 7 · Agente que te entiende: elige pestaña (la tuya se queda, otra se va a segundo plano) */
.tm-tabs{border-radius:8px;background:#f4f4f6;overflow:hidden}
.tm-tabs::before{content:'';position:absolute;left:0;right:0;top:0;height:16px;background:#e2e2ea}
.tm-tabs b{position:absolute;top:3px;width:20px;height:13px;border-radius:4px 4px 0 0;background:#cbd5e1}
.tm-tabs b:nth-child(1){left:4px;background:#fff}.tm-tabs b:nth-child(2){left:24px;background:#a78bfa;animation:tmTab 3s ease-in-out infinite}
.tm-tabs i{position:absolute;left:8px;right:8px;top:26px;height:5px;border-radius:3px;background:#cbd5e1;box-shadow:0 11px 0 #cbd5e1,0 22px 0 #22c55e}
@keyframes tmTab{0%,25%{left:24px;opacity:1}55%,80%{left:44px;opacity:.35}100%{left:24px;opacity:1}}

/* 8 · Diseño Liquid Glass: un cristal con brillo y una estrella fugaz que pasa por detrás */
.tm-glass{overflow:hidden;border-radius:14px;background:radial-gradient(1px 1px at 10px 12px,#fff 50%,transparent),radial-gradient(1px 1px at 44px 30px,#fff 50%,transparent),radial-gradient(1px 1px at 22px 54px,#fff 50%,transparent),#0b0c18}
.tm-glass i{position:absolute;top:10px;left:70px;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px rgba(255,255,255,.8);animation:tmStar 2.8s linear infinite}
.tm-glass i::before{content:'';position:absolute;top:0;left:2px;width:26px;height:1px;background:linear-gradient(90deg,#fff,transparent)}
.tm-glass b{position:absolute;inset:14px 8px;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.08) 55%,rgba(255,255,255,.18));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
@keyframes tmStar{0%{transform:translate(0,0) rotate(-25deg);opacity:0}10%{opacity:1}60%{transform:translate(-90px,40px) rotate(-25deg);opacity:0}100%{transform:translate(-90px,40px);opacity:0}}

@media (prefers-reduced-motion:reduce){.tm-live,.tm-live::before,.tm-kara b,.tm-tr span,.tm-voz b,.tm-eq b,.tm-noad span,.tm-noad i,.tm-tabs b,.tm-glass i{animation:none!important}}

/* cb-sky.css */
/* Claudbar · Cielo de estrellas con estrellas fugaces + Liquid Glass, en TODAS las páginas de claudbar.com
   (portada, app, ajustes, cuenta, privacidad, herramientas). Se carga el último. Las estrellas fugaces las crea cb-sky.js. */
:root {
  --cb-sky: radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.75) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,.5) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(1.5px 1.5px at 200px 20px, rgba(255,255,255,.85) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(1px 1px at 60px 140px, rgba(255,255,255,.5) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(1px 1px at 170px 120px, rgba(200,210,255,.6) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(ellipse at 50% 120%, rgba(60,70,140,.28), transparent 60%);
  --cb-glass: linear-gradient(135deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.04) 55%, rgba(255,255,255,.08) 100%);
  --cb-edge: rgba(255,255,255,.16);
  --cb-shine: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(255,255,255,.05);
}

/* El cielo, detrás de todo */
html { background: var(--cb-sky), #07080d !important; background-attachment: fixed !important; }
html body { background: transparent !important; }

/* Lo que tapaba el cielo: transparente (la barra lateral, con un velo de cristal sin desenfoque para que se vean las estrellas) */
html body main, html body .cb-settings main { background: transparent !important; }
html body > aside, html body .app > aside, html body aside.sidebar, html body .cb-settings aside, html body aside {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border-right: 1px solid rgba(255,255,255,.1) !important;
}

/* Tarjetas en cristal líquido */
html body .tile, html body .nv-frame, html body .summary, html body .tbl, html body section.cur, html body .cb-settings section,
html body main#auth.card, html body .card, html body .plan, html body .faq-item {
  background: var(--cb-glass), rgba(14,14,22,.35) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--cb-edge) !important;
  box-shadow: var(--cb-shine), 0 10px 30px rgba(0,0,0,.28) !important;
html body .composer { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 30px !important; }
}

/* Estrellas fugaces (cb-sky.js crea .cb-meteors) */
.cb-meteors { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cb-meteors i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 3px 1px rgba(255,255,255,.95), 0 0 9px 2px rgba(170,195,255,.55);
  transform: rotate(var(--a, 150deg)) translateX(0);
  animation: cb-meteor var(--d, 12s) linear var(--w, 0s) infinite; will-change: transform, opacity;
}
.cb-meteors i::before {
  content: ''; position: absolute; top: 50%; right: 1px; width: var(--l, 140px); height: 1px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(150,175,255,.18) 45%, rgba(220,230,255,.6) 85%, rgba(255,255,255,.95)); border-radius: 1px;
}
@keyframes cb-meteor {
  0% { opacity: 0; transform: rotate(var(--a, 150deg)) translateX(0); }
  1% { opacity: 1; }
  6% { opacity: .85; }
  9% { opacity: 0; transform: rotate(var(--a, 150deg)) translateX(var(--dist, 480px)); }
  100% { opacity: 0; transform: rotate(var(--a, 150deg)) translateX(var(--dist, 480px)); }
}
/* Estrellas que titilan suavemente */
.cb-twinkle { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--cb-sky); background-position: 120px 90px; opacity: .5; animation: cb-twinkle 5s ease-in-out infinite alternate; will-change: opacity; }
@keyframes cb-twinkle { to { opacity: .1; } }

/* Equipos modestos: menos animación (las estrellas quietas, 2 estrellas fugaces) */
html.cb-lite .cb-twinkle { animation: none; }
html.cb-lite .cb-meteors i:nth-child(n+3) { display: none; }
@media (prefers-reduced-motion: reduce) { .cb-meteors, .cb-twinkle { display: none !important; } }
@media (prefers-reduced-transparency: reduce) { html body .tile, html body .card, html body section.cur { -webkit-backdrop-filter: none; backdrop-filter: none; } }