:root{
  --theme-surface:#fff;
  --theme-surface-alt:#f7f8ff;
  --theme-nav:rgba(255,255,255,.88);
  --theme-field:#fff;
  --theme-shadow:rgba(13,17,23,.09);
}

html{color-scheme:light}
html[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0d1117;
  --ink:#f8fafc;
  --gray:#b5bdca;
  --line:#2b3442;
  --soft:#192235;
  --cobalt-soft:#1d2544;
  --dark:#070b11;
  --theme-surface:#141b26;
  --theme-surface-alt:#101722;
  --theme-nav:rgba(13,17,23,.88);
  --theme-field:#101722;
  --theme-shadow:rgba(0,0,0,.32);
}

body{transition:background-color .25s ease,color .25s ease}
nav{background:var(--theme-nav)!important}
.nav-inner{gap:14px!important}
nav .logo,nav .nav-inner>a[aria-label*="CodeToBrand"]{flex:0 0 auto}
nav .logo img,nav .site-logo{width:178px!important;max-width:none}
.nav-links{min-width:0;margin-left:auto!important;gap:18px!important}
.nav-links a{white-space:nowrap}
nav .nav-inner>.btn{flex:0 0 auto;height:42px;padding:0 18px!important;font-size:14px!important;white-space:nowrap}
.mobile-menu-panel,.menu div{background:var(--theme-surface)!important;box-shadow:0 20px 45px var(--theme-shadow)!important}

.theme-toggle{
  flex:0 0 auto;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:13px;
  display:inline-grid;place-items:center;background:var(--theme-surface);color:var(--ink);cursor:pointer;
  box-shadow:0 8px 22px var(--theme-shadow);transition:transform .18s ease,border-color .18s ease,background .25s ease;
}
.theme-toggle:hover{transform:translateY(-2px);border-color:var(--cobalt)}
.theme-toggle:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .icon-sun{display:none}
html[data-theme="dark"] .theme-toggle .icon-moon{display:none}
html[data-theme="dark"] .theme-toggle .icon-sun{display:block;color:#c7d2fe}

/* Mantiene importe, moneda e IVA como una sola unidad visual. */
.price .mxn{white-space:nowrap}
.cards-5 .card{padding-inline:16px}
.cards-5 .price .amount{font-size:19px}
.cards-5 .price .mxn{font-size:9px;letter-spacing:-.04em}

html[data-theme="dark"] .brand-intro{
  background:radial-gradient(circle at 50% 45%,rgba(79,70,229,.22),transparent 38%),#0d1117!important;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .pay,
html[data-theme="dark"] .pstep,
html[data-theme="dark"] table,
html[data-theme="dark"] .ai-sec .card{background:var(--theme-surface)!important;border-color:var(--line)!important;box-shadow:0 18px 45px var(--theme-shadow)}
html[data-theme="dark"] thead th{background:#192130!important}
html[data-theme="dark"] th,
html[data-theme="dark"] td{border-color:var(--line)!important}
html[data-theme="dark"] tbody td{color:#d6dbe4!important}
html[data-theme="dark"] tbody tr:hover{background:#192130!important}
html[data-theme="dark"] .section-soft,
html[data-theme="dark"] .soft,
html[data-theme="dark"] .ai-sec{background:var(--theme-surface-alt)!important}
html[data-theme="dark"] .row:hover{background:var(--theme-surface)!important}
html[data-theme="dark"] .card li,
html[data-theme="dark"] .pay li{color:#d6dbe4!important}
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-secondary{background:transparent!important;color:var(--ink)!important;border-color:var(--ink)!important}
html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .btn-secondary:hover{background:var(--ink)!important;color:#0d1117!important}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:var(--theme-field)!important;color:var(--ink)!important;border-color:#3b4656!important}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#8f99a8}
html[data-theme="dark"] .option:has(input:checked){background:#20284a!important}
html[data-theme="dark"] .trust span{color:#c7d2fe!important}
html[data-theme="dark"] .cta-box{border:1px solid #283245}
html[data-theme="dark"] .chat-demo,
html[data-theme="dark"] .bubble.bot,
html[data-theme="dark"] .quick-prompts,
html[data-theme="dark"] .quick-prompt,
html[data-theme="dark"] .chat-form,
html[data-theme="dark"] .chat-actions{background:var(--theme-surface)!important}
html[data-theme="dark"] .chat-log{background:#0f1621!important}
html[data-theme="dark"] .quick-prompt{color:#c7d2fe!important;border-color:#465083!important}

@media(max-width:1160px){
  nav .logo img,nav .site-logo{width:168px!important}
  .nav-links{gap:14px!important}
  .nav-links a{font-size:13.5px!important}
  nav .nav-inner>.btn{padding-inline:15px!important;font-size:13px!important}
}
@media(max-width:1050px){
  .nav-links,nav:has(.mobile-menu,.menu) .nav-inner>.btn{display:none!important}
  .mobile-menu,.menu{display:block!important}
  .theme-toggle{margin-left:auto}
}
@media(max-width:900px){
  .theme-toggle{width:40px;height:40px;margin-left:auto}
}
@media(max-width:1080px){
  .cards-5 .card{padding-inline:20px}
  .cards-5 .price .amount{font-size:24px}
  .cards-5 .price .mxn{font-size:12px;letter-spacing:normal}
}
@media(max-width:420px){
  .nav-inner{gap:10px!important}
  .theme-toggle{width:38px;height:38px;border-radius:11px}
}
@media(prefers-reduced-motion:reduce){.theme-toggle,body{transition:none!important}}