/* css/armado.css */
:root{
  --bg:#0b0f14;
  --panel:#111827;
  --line:#27324b;
  --text:#e8eeff;
  --muted:#a6b2cf;
  --brand:#79a7ff;
  --ok:#7ee787;
}

*{box-sizing:border-box}
#armado-page{margin-top:1rem}

/* Barra superior tipo píldora */
.hero-bar{
  max-width:1100px;
  margin:0 auto 1rem;
  padding:.65rem .9rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  background:linear-gradient(180deg,#0e1624,#0b1220);
  border:1px solid var(--line);
  border-radius:999px;
}
.hero-bar .dot{
  width:22px;
  height:22px;
  border-radius:999px;
  border:2px solid var(--brand);
  box-shadow:0 0 0 4px rgba(121,167,255,.12);
}
.hero-bar .hero-text{
  font-weight:600;
  letter-spacing:.2px;
}

/* Doble columna similar a tu home */
#armado-page .hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center;
  max-width:1100px;
  margin:0 auto;
}
@media (max-width:1000px){
  #armado-page .hero{grid-template-columns:1fr}
}

.hero-text-col .bullets{
  margin:0;
  padding-left:1rem;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.hero-text-col li{
  color:var(--muted);
  line-height:1.6;
}

/* Imagen rectangular o cuadrada */
.image-blob{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;           /* usa 1 / 1 para cuadrado */
  background:#0d1220;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.image-blob img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:inherit;
}

/* Botones inferiores grandes */
.choice-cta{
  max-width:1100px;
  margin:1rem auto .6rem;
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}
.pill-btn{
  min-width:280px;
  text-align:center;
  padding:1rem 1.2rem;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#121b2c,#0d1220);
  color:var(--text);
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.pill-btn:hover{
  transform:translateY(-1px);
  border-color:var(--brand);
  box-shadow:0 12px 26px rgba(121,167,255,.18);
}
.pill-btn.ghost{opacity:.95}

/* Nota de anticipo */
.deposit-note{
  max-width:900px;
  margin:1rem auto 2.5rem;
  text-align:center;
  background:#0f1626;
  border:1px dashed var(--line);
  border-radius:14px;
  padding:14px;
}
.deposit-note strong{color:var(--ok)}
.deposit-note small{
  display:block;
  color:var(--muted);
  margin-top:.4rem;
}