/* Liquid Glass en la portada: el mismo cristal de la extensión (fondo translúcido, desenfoque, borde de luz y brillo arriba). */
:root { --lg-bg: rgba(255, 255, 255, .055); --lg-bg-2: rgba(255, 255, 255, .025); --lg-edge: rgba(255, 255, 255, .14); --lg-glow: rgba(167, 139, 250, .22); }
.tile, .model, .plan, .dm-card, .dev, .nv-frame, .feature, .card, details, .faq details, .steps-demo, #ask {
  background: linear-gradient(180deg, var(--lg-bg), var(--lg-bg-2)) !important;
  border: 1px solid var(--lg-edge) !important;
  backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .03), 0 18px 50px -20px rgba(0, 0, 0, .7) !important;
}
.tile, .model, .plan, .dm-card, .dev, .nv-frame, details { border-radius: 22px !important; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
.tile:hover, .model:hover, .plan:hover, .dev:hover, .nv-frame:hover { transform: translateY(-3px); border-color: rgba(167, 139, 250, .45) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 24px 60px -18px var(--lg-glow) !important; }
.plan.featured, .plan.best, .plan.pop { border-color: rgba(167, 139, 250, .55) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(167, 139, 250, .25), 0 26px 70px -20px rgba(124, 58, 237, .45) !important; }
.btn { border-radius: 999px !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn.ghost { background: rgba(255, 255, 255, .06) !important; border: 1px solid var(--lg-edge) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn.glow, .btn.primary { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 32px rgba(124, 58, 237, .45) !important; }
.ico, .dev-ic { background: rgba(167, 139, 250, .14) !important; border: 1px solid rgba(167, 139, 250, .25); border-radius: 14px !important; }
.nv-bar { background: rgba(255, 255, 255, .04) !important; border-bottom: 1px solid var(--lg-edge); }
.chip, .badge, .kicker, .nv-tag { background: rgba(255, 255, 255, .06) !important; border: 1px solid var(--lg-edge) !important; border-radius: 999px !important; backdrop-filter: blur(10px); }
html.cb-lite .tile, html.cb-lite .plan, html.cb-lite .nv-frame { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Barra de arriba: una píldora de cristal flotante (como la barra de la extensión), sin franja ni caja alrededor del menú. */
header#top { background: transparent !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding-top: 12px; }
header#top .wrap { height: 60px; padding: 0 10px 0 18px; gap: 18px; border-radius: 999px; max-width: 1120px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 16px 44px -18px rgba(0, 0, 0, .8); }
header#top nav { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
header#top nav a:hover { background: rgba(255, 255, 255, .07) !important; }
header#top .logo img { border-radius: 9px; }
@media (max-width: 760px) { header#top .wrap { margin: 0 10px; padding: 0 8px 0 12px; } }
header#top, header#top.scrolled { box-shadow: none !important; border-bottom: 0 !important; } header#top::before, header#top::after { display: none !important; }
.nv-frame video, .nv-frame .nv-shot { display: block; width: 100% !important; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 0 0 20px 20px; background: #05050c; }