/* Core theme */
:root{
  --bg-0:#0b0f16; --bg-1:#101725; --card:#121a2aee;
  --stroke:#1a2844; --text:#e9eef7; --muted:#9fb3d1;
  --brand:#8de8ff; --brand2:#6b8bff; --ok:#4BE28C; --accent:#2e73ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;color:var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, #1d2a42 0%, transparent 60%),
             radial-gradient(1200px 800px at 110% 10%, #142034 0%, transparent 55%),
             radial-gradient(800px 600px at 80% 120%, #0f1a2c 0%, transparent 60%),
             linear-gradient(180deg, var(--bg-0), var(--bg-1));
  overflow-x:hidden;
}
canvas.bg{position:fixed;inset:0;z-index:-2;filter:contrast(105%) saturate(105%)}
.veil{position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(1200px 900px at var(--x,50%) var(--y,50%), rgba(109,146,255,.12), rgba(0,0,0,0) 50%),
             radial-gradient(900px 700px at calc(var(--x,50%) - 20%) calc(var(--y,50%) + 10%), rgba(31,204,255,.10), rgba(0,0,0,0) 60%);
  transition:transform .6s ease-out, opacity .6s ease-out; opacity:.85;
}

/* Header */
.topbar{max-width:1200px;margin:80px auto 0;/* antes 14px — agrega aire arriba */display:flex;align-items:center;gap:16px;padding:0 16px;/* un poco más de aire lateral */}
.brand-wrap img{height:56px;display:block}
.lang-wrap{margin-left:auto;display:flex;align-items:center;gap:10px;color:#cfe0ff}
.select{width:100%;background:#0f1a2c;border:1px solid #233354;color:#d7e6ff;border-radius:10px;padding:10px 12px;outline:none}
.select:focus{border-color:#466dff;}

/* Layout Letra Easy Pricing*/
.container{max-width:1200px;margin:0 auto;padding:12px 16px 40px}
.title{font-size:26px;/* Tamano de la letra */font-weight:800;letter-spacing:-.01em;text-align:center;
  background:linear-gradient(270deg,
    #8de8ff,
    #6da9ff,
    #a8c4ff,
    #6da9ff,
    #8de8ff);background-size:600% 600%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation: gradientShift 8s ease-in-out infinite;
  margin:40px 0 8px;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.asof{text-align:center;color:#b9c7e4;font-size:12px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media(max-width:980px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;box-shadow:0 10px 30px #0007; padding:14px}
.left .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.left .row.three{grid-template-columns:1fr 1fr 1fr}
.left .row.align-end .col{display:flex;flex-direction:column;justify-content:end}
.left .row.btns{grid-template-columns:1fr 1fr 1fr}
.left .row.btns .btn{width:100%}
@media(max-width:780px){.left .row{grid-template-columns:1fr}.left .row.three{grid-template-columns:1fr}.left .row.btns{grid-template-columns:1fr}}

.lbl{font-size:12px;color:#b7c6e6;margin-bottom:6px;display:block}
.input{width:100%;background:#0f1a2c;border:1px solid #233354;color:#e9eef7;border-radius:10px;padding:10px 12px;outline:none}
.input.small{width:92px}
.input:focus{border-color:#466dff}
.pill{background:#0f1a2c;border:1px solid #233354;color:#e9eef7;border-radius:10px;padding:10px 12px}

.hint{font-size:11px;color:#8fb0e3;margin-top:6px}
.mini{font-size:11px;color:#7fa0d5;margin-left:6px}
.ck{display:inline-flex;align-items:center;gap:6px;margin-left:10px;color:#cfe0ff;font-size:12px}

.slider{width:100%;appearance:none;height:6px;border-radius:999px;background:#22314d;outline:none;margin-top:10px}
.slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;background:#6da9ff;border-radius:50%;border:2px solid #2c3f6e}
.slider::-moz-range-thumb{width:18px;height:18px;background:#6da9ff;border:none;border-radius:50%}

.btn{background:#0f1a2c;border:1px solid #233354;color:#e7eeff;border-radius:10px;padding:12px 14px;font-weight:700;cursor:pointer;transition:all .15s}
.btn:hover{background:#172640;border-color:#3d5bb5;color:#a8c4ff}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#0d1728;border-color:#22324a;color:#cfe0ff}
.btn.ghost:hover{background:#13223a;color:#a8c4ff}

/* Right summary */
.right{padding:16px}
.sum-head{margin-bottom:10px}
.sum-kicker{font-size:12px;color:#9ab0de;letter-spacing:.12em}
.sum-title{font-size:24px;font-weight:700;margin:2px 0 4px}
.sum-meta{font-size:12px;color:#9db3dc}
.sum-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
@media(max-width:520px){.sum-grid{grid-template-columns:1fr}}
.sum-chip{background:#0f1a2c;border:1px solid #233354;border-radius:12px;padding:10px}
.cap{font-size:12px;color:#9ab0de}
.capv{font-size:18px;margin-top:4px}
.capv.green{color:var(--ok)}
.capv.red {
  color: #ff4d4d;
  font-weight: 700;
}
.capv.green {
  color: var(--ok);
  font-weight: 700;
}

.card-embed{background:#0f1a2c;border:1px solid #233354;border-radius:12px;padding:12px;margin-top:12px}
.pay-num{font-size:36px;font-weight:800;margin-top:6px}
.pay-line{font-size:12px;color:#9db3dc;margin-top:4px}
.warn{margin-top:10px;color:#ffb3b3}
.hidden{display:none}

/* Disclaimer */
.disclaimer{margin-top:14px; font-size:12px; line-height:1.5}
.disclaimer .imp{color:#7cc9ff;font-weight:800;margin-right:6px}
.disclaimer .text{color:#b9c7e4;}

/* Footer */
.foot{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;               /* mantiene todo centrado y en una sola línea */
  gap: 10px;                     /* espacio entre los elementos */
  color: #9db3dc;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.4;
}

.foot a{
  color: #b9d0ff;
  text-decoration: none;
}

.foot a:hover{
  text-decoration: underline;
}
.foot a{color:#b9d0ff}
/* Footer glow effect */
.foot {
  text-shadow: 0 0 4px rgba(120,180,255,0.25),
               0 0 10px rgba(120,180,255,0.15);
  transition: text-shadow .3s ease-in-out;
}

.foot:hover {
  text-shadow: 0 0 6px rgba(140,200,255,0.45),
               0 0 12px rgba(140,200,255,0.35);
}
/* Logo fade-in and slide-down animation */
@keyframes logoAppear {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.brand-wrap img {
  animation: logoAppear 1.2s ease-out forwards;
}

/* Dialog */
.dlg{border:none;padding:0;background:transparent}
.dlg::backdrop{background:rgba(0,0,0,.5)}
.dlg-card{min-width:320px;background:#0f1a2c;border:1px solid #233354;border-radius:14px;padding:16px;color:#e9eef7}
.dlg-card h3{margin:0 0 10px}
.dlg .row.btns.end{justify-content:end}