/* ============================================================================
   VNL POS — Secciones de la bitácora de crecimiento dentro de landing.html:
   caja de prueba, calculadora de comisiones, simulador de ahorro (3D) y
   simulador de hardware (3D). Usa SOLO los tokens de landing.html (:root).
   ============================================================================ */

.bt-card{background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-sm);}
.bt-card h3{font-size:16px; margin-bottom:14px;}
.bt-note{font-size:12.5px; color:var(--muted-2); line-height:1.5; margin-top:14px;}
.bt-tag{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:999px; background:var(--gold-soft); color:var(--gold-strong);}
.bt-tag.gris{background:var(--line); color:var(--muted);}
.bt-tag.ok{background:var(--ok-soft); color:var(--ok);}
.bt-money{font-variant-numeric:tabular-nums;}
.bt-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; padding:22px 26px; border-radius:var(--radius-lg); background:var(--ink); color:#fff;}
.bt-cta p{font-size:14.5px; color:rgba(255,255,255,.72); max-width:520px; line-height:1.5;}
.bt-cta strong{display:block; color:#fff; font-size:17px; margin-bottom:3px;}

/* Enlaces del menú: solo en pantallas anchas, para no apretar el menú original. */
@media (max-width:1240px){ .nav-links .bt-nav{display:none;} }
/* Chino, hindi, etc.: que los enlaces del menú no se partan en dos líneas. */
.nav-links a{white-space:nowrap;}

/* Selector de idioma en la barra superior (fondo tinta de la nav). */
.bt-lang{position:relative;}
.bt-lang summary{list-style:none; display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:11px; border:1.5px solid rgba(194,160,78,.55); background:rgba(194,160,78,.12); color:#fff; font-size:13px; font-weight:800; letter-spacing:.04em; cursor:pointer; user-select:none; transition:background .15s, border-color .15s;}
.bt-lang summary::-webkit-details-marker{display:none;}
.bt-lang summary:hover,.bt-lang[open] summary{background:rgba(194,160,78,.22); border-color:var(--gold);}
.bt-lang summary:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.bt-lang summary svg{width:17px; height:17px; color:var(--gold);}
.bt-lang .bt-lang-flecha{width:14px; height:14px; transition:transform .18s;}
.bt-lang[open] .bt-lang-flecha{transform:rotate(180deg);}
.bt-lang ul{position:absolute; right:0; top:calc(100% + 8px); min-width:190px; padding:6px; border-radius:14px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lg); z-index:600;}
.bt-lang li a{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; font-size:14px; font-weight:700; color:var(--text);}
.bt-lang li a small{font-size:11px; font-weight:800; color:var(--muted-2); letter-spacing:.06em;}
.bt-lang li a:hover{background:var(--gold-soft); color:var(--gold-strong);}
.bt-lang li a[aria-current="true"]{background:var(--surface-2); color:var(--gold-strong);}
.bt-lang li a[aria-current="true"]::after{content:"✓"; margin-left:auto; font-weight:800;}
@media (max-width:420px){ .bt-lang summary{padding:8px 9px; gap:5px;} .bt-lang .bt-lang-flecha{display:none;} }

/* Campos */
.bt-field{display:block; font-size:13px; font-weight:700; color:var(--muted);}
.bt-field input,.bt-field select{display:block; width:100%; margin-top:6px; padding:11px 13px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--surface-2); font-family:inherit; font-size:14.5px; color:var(--text); transition:border-color .15s;}
.bt-field input:focus,.bt-field select:focus{outline:none; border-color:var(--gold);}
.bt-check{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); margin-top:12px;}
.bt-check input{width:17px; height:17px; accent-color:var(--gold-strong);}
.bt-grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.bt-range{display:block; margin-top:16px;}
.bt-range span{display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:var(--muted);}
.bt-range b{color:var(--gold-strong); font-variant-numeric:tabular-nums;}
.bt-range input{width:100%; margin-top:8px; accent-color:var(--gold-strong);}

/* ---------- Caja de prueba ---------- */
.bt-caja{display:grid; grid-template-columns:1.35fr 1fr; gap:18px; align-items:start;}
.bt-prods{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.bt-prod{text-align:left; padding:14px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--surface-2); font-family:inherit; cursor:pointer; transition:border-color .15s, transform .12s, box-shadow .15s;}
.bt-prod:hover{border-color:var(--gold); box-shadow:0 6px 18px rgba(194,160,78,.16);}
.bt-prod:active{transform:scale(.97);}
.bt-prod[disabled]{opacity:.45; cursor:not-allowed;}
.bt-prod b{display:block; font-size:14px; color:var(--text);}
.bt-prod i{display:block; font-style:normal; font-weight:800; color:var(--gold-strong); margin-top:4px;}
.bt-prod small{display:block; font-size:11.5px; color:var(--muted-2); margin-top:6px;}
.bt-prod small.bajo{color:var(--warn); font-weight:700;}
.bt-alerta{margin-top:14px; padding:10px 14px; border-radius:var(--radius-sm); background:var(--warn-soft); color:var(--warn); font-size:13px; font-weight:700;}
.bt-ticket ul{min-height:96px; margin:4px 0 14px;}
.bt-ticket li{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:14px; padding:6px 0; border-bottom:1px dashed var(--line);}
.bt-ticket li .q{display:inline-flex; align-items:center; gap:6px;}
.bt-ticket li button{width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; font-weight:800; color:var(--muted); line-height:1;}
.bt-ticket li button:hover{border-color:var(--gold); color:var(--gold-strong);}
.bt-vacio{font-size:13.5px; color:var(--muted-2); padding:10px 0;}
.bt-total{display:flex; justify-content:space-between; align-items:baseline; border-top:1.5px solid var(--line); padding-top:12px;}
.bt-total span{color:var(--muted); font-weight:700;}
.bt-total b{font-size:30px; font-weight:800; color:var(--text);}
.bt-metodos{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px;}
.bt-metodos button{padding:10px 6px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--surface-2); font-family:inherit; font-size:13px; font-weight:700; color:var(--muted); cursor:pointer;}
.bt-metodos button[aria-checked="true"]{border-color:var(--gold); background:var(--gold-soft); color:var(--gold-strong);}
.bt-pagado{margin-top:14px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--ok-soft); color:var(--ok); font-size:14px; font-weight:700;}
.bt-pagado span{display:block; font-weight:600; color:var(--text); margin-top:2px;}
.bt-corte{grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.bt-corte div{padding:14px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line);}
.bt-corte div:last-child{background:var(--gold-soft); border-color:var(--gold-soft);}
.bt-corte dt{font-size:12px; color:var(--muted); font-weight:700;}
.bt-corte dd{font-size:19px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums;}

/* ---------- Calculadora ---------- */
.bt-calc{display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:18px; align-items:start;}
.bt-res{display:grid; gap:12px;}
.bt-res div{padding:16px 18px; border-radius:var(--radius); background:var(--surface-2); border:1px solid var(--line);}
.bt-res div.acento{background:var(--gold-soft); border-color:var(--gold-soft);}
.bt-res dt{font-size:12.5px; color:var(--muted); font-weight:700;}
.bt-res dd{font-size:26px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums;}
.bt-res small{display:block; font-size:12px; color:var(--muted-2); margin-top:2px;}
.bt-barras{margin-top:18px; display:grid; gap:10px;}
.bt-barra span{display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:5px;}
.bt-barra .pista{display:flex; height:14px; border-radius:999px; overflow:hidden; background:var(--line);}
.bt-barra .pista i{display:block; height:100%; transition:width .4s cubic-bezier(.2,.7,.2,1);}
.bt-leyenda{display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:12px; font-size:12px; color:var(--muted);}
.bt-leyenda i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px;}

/* ---------- Simuladores 3D ---------- */
.bt-sim{display:grid; grid-template-columns:1fr 1.25fr; gap:18px; align-items:start;}
.bt-escena{position:relative; height:420px; border-radius:var(--radius-lg); overflow:hidden; background:radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, var(--surface-2) 55%, var(--line) 100%); border:1.5px solid var(--line);}
.bt-sim-hw{grid-template-columns:1.3fr 1fr;}
.bt-escena-hw{height:460px;}
.bt-escena canvas{display:block; width:100% !important; height:100% !important; touch-action:none;}
.bt-escena .bt-cargando{position:absolute; inset:0; display:grid; place-items:center; font-size:13px; color:var(--muted-2);}
.bt-escena .bt-pista{position:absolute; left:0; right:0; bottom:10px; text-align:center; font-size:12px; color:var(--muted); pointer-events:none;}
.bt-escena .bt-leyenda{position:absolute; left:16px; top:12px; margin:0; pointer-events:none;}
.bt-punto{position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; border:2px solid var(--gold); background:rgba(255,255,255,.9); color:var(--gold-strong); font-weight:800; font-size:16px; line-height:1; cursor:pointer; visibility:hidden; box-shadow:0 4px 14px rgba(160,126,44,.35); transition:background .15s, color .15s;}
.bt-punto[aria-pressed="true"]{background:var(--gold); color:var(--ink);}
.bt-punto::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(194,160,78,.45); animation:bt-ping 1.8s ease-out infinite;}
@keyframes bt-ping{from{transform:scale(.8); opacity:1;} to{transform:scale(1.5); opacity:0;}}
.bt-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px;}
.bt-kpis div{padding:14px 16px; border-radius:var(--radius); background:var(--surface); border:1.5px solid var(--line);}
.bt-kpis div:first-child{background:var(--gold-soft); border-color:var(--gold-soft);}
.bt-kpis dt{font-size:12px; color:var(--muted); font-weight:700;}
.bt-kpis dd{font-size:22px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums;}
.bt-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.bt-chips button{padding:8px 14px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); font-family:inherit; font-size:13px; font-weight:700; color:var(--muted); cursor:pointer;}
.bt-chips button[aria-selected="true"]{border-color:var(--gold); background:var(--gold-soft); color:var(--gold-strong);}
.bt-kit li{display:flex; gap:8px; align-items:center; font-size:13.5px; color:var(--muted); padding:3px 0;}
.bt-kit li::before{content:"✓"; color:var(--gold-strong); font-weight:800;}

/* ---------- Herramientas gratis ---------- */
.bt-tools{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.bt-tools a{display:block;}
.bt-tools .b-card{height:100%;}

@media (max-width:980px){
  .bt-caja,.bt-sim,.bt-sim-hw{grid-template-columns:1fr;}
  .bt-calc{grid-template-columns:1fr 1fr;}
  .bt-calc .bt-res{grid-column:1/-1;}
  .bt-tools{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .bt-prods{grid-template-columns:repeat(2,1fr);}
  .bt-calc{grid-template-columns:1fr;}
  .bt-corte{grid-template-columns:repeat(2,1fr);}
  .bt-kpis{grid-template-columns:1fr;}
  .bt-tools{grid-template-columns:1fr;}
  .bt-escena,.bt-escena-hw{height:340px;}
  .bt-cta{padding:20px;}
  .bt-card{padding:20px;}
}
@media (prefers-reduced-motion: reduce){ .bt-punto::after{animation:none;} }