/* =======================================================
   bento.css · Grid bento + cajas neomorfas
   Grid 6 columnas × N filas, áreas nombradas para layout estable.
   ======================================================= */

.bento {
  display: grid;
  /* Layout ORDENADO (no mosaico): grid de 12 columnas con filas parejas.
     Fila 1 = hero (texto a la izquierda · celular a la derecha)
     Fila 2 = 4 KPIs en hilera (clientes · disponibilidad · saldo · token)
     Fila 3 = trading | productos (mitades)
     Fila 4 = pasos (ancho completo) */
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(90px, auto);
  gap: var(--bento-gap);
  grid-template-areas:
    "cta   cta   cta   cta   cta   cta   cta   phone phone phone phone phone"
    "cta   cta   cta   cta   cta   cta   cta   phone phone phone phone phone"
    "cta   cta   cta   cta   cta   cta   cta   phone phone phone phone phone"
    "stat1 stat1 stat1 stat2 stat2 stat2 cuenta cuenta cuenta token token token"
    "trade trade trade trade trade trade prod  prod  prod  prod  prod  prod"
    "steps steps steps steps steps steps steps steps steps steps steps steps";
}

.bento-card {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--bento-radius);
  box-shadow: var(--nm-raised);
  padding: clamp(18px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    var(--theme-transition);
  cursor: default;
}
.bento-card:hover { box-shadow: var(--nm-raised-lg); transform: translateY(-2px); }
.bento-card.is-link { cursor: pointer; }
.bento-card.is-link:active { box-shadow: var(--nm-sunk-sm); transform: translateY(0); }

/* ===== Caja 1 — CTA principal (2x3) ===== */
.bx-cta {
  grid-area: cta;
  background: var(--grad-accent);
  color: #fff;
  justify-content: space-between;
  min-height: 360px;
  /* Sin glow externo: el gradiente carmesí ya carga la presencia, y el glow
     bleeds hacia el FAB del theme-toggle creando un halo no deseado. */
  box-shadow: var(--nm-raised);
}
.bx-cta:hover { box-shadow: var(--nm-raised-lg); }
.bx-cta .eyebrow { color: rgba(255,255,255,.75); }
.bx-cta .eyebrow .eyebrow-num { color: #fff; }
.bx-cta .eyebrow .eyebrow-text { color: #fff; }
.bx-cta .eyebrow .eyebrow-line { background: linear-gradient(90deg, #fff, transparent); }
.bx-cta h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  color: #fff;
  margin: var(--space-4) 0;
  line-height: 1.05;
}
.bx-cta p {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-md);
  max-width: 380px;
  margin-bottom: var(--space-6);
}
.bx-cta .btn-cta {
  align-self: flex-start;
  padding: 14px 26px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-accent-ink);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.bx-cta .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.bx-cta .btn-cta:active { transform: translateY(1px); }
.bx-cta .btn-cta svg { transition: transform var(--dur-fast) var(--ease-out); }
.bx-cta .btn-cta:hover svg { transform: translateX(4px); }
/* Detalle decorativo (esquina) */
.bx-cta::after {
  content: "";
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
  pointer-events: none;
}

/* ===== Caja 2 — Mockup celular (1x5) ===== */
/* Sin "caja": el celular FLOTA en su celda (el área del grid es más alta que el
   phone; si fuera una tarjeta hundida quedaría un recuadro vacío enorme). El
   fondo de la página queda alrededor y la sombra del phone se ve completa. */
.bx-phone {
  grid-area: phone;
  padding: 0;
  background: transparent;
  box-shadow: none;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.bx-phone:hover { box-shadow: none; transform: none; }

/* ===== Caja 3 — Stat clientes (1x1) ===== */
/* Padding reducido: estas tarjetas son de 1 columna (angostas); el número grande
   necesita ese ancho extra para no cortarse. */
.bx-stat-1 { grid-area: stat1; justify-content: center; align-items: flex-start; gap: 6px; padding: clamp(16px, 1.6vw, 22px); }
.bx-stat-2 { grid-area: stat2; justify-content: center; align-items: flex-start; gap: 6px; padding: clamp(16px, 1.6vw, 22px); }
.bento-card .stat-num {
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  color: var(--color-accent);
  line-height: 1;
  white-space: nowrap;   /* el "+"/"%" nunca se separa ni se corta */
  max-width: 100%;
}
.bento-card .stat-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  font-weight: var(--fw-semi);
}
.bento-card .stat-help {
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
  margin-top: 2px;
}

/* ===== Caja 4 — Trading mini-chart (2x1) ===== */
.bx-trade {
  grid-area: trade;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
}
.bx-trade .trade-info { flex-shrink: 0; }
.bx-trade .trade-info .ticker { font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: .08em; text-transform: uppercase; }
.bx-trade .trade-info .price {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  letter-spacing: -.02em;
  margin-top: 2px;
}
.bx-trade .trade-info .delta { font-size: var(--fs-xs); color: var(--color-success); font-weight: var(--fw-semi); margin-top: 2px; }
.bx-trade .chart {
  flex: 1;
  height: 70%;
  min-height: 70px;
  position: relative;
}
.bx-trade .chart svg { width: 100%; height: 100%; overflow: visible; }
.bx-trade .chart path.line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bx-trade .chart path.area {
  fill: url(#bxTradeGrad);
  opacity: 0.45;
}

/* ===== Caja 5 — Token TOTP (1x1 alto) ===== */
.bx-token {
  grid-area: token;
  align-items: center;
  text-align: center;
  background: var(--color-surface-sunk);
  box-shadow: var(--nm-sunk-sm);
}
.bx-token .token-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  font-weight: var(--fw-semi);
}
.bx-token .token-ring {
  position: relative;
  width: 100px; height: 100px;
  margin: var(--space-3) auto;
}
.bx-token .token-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bx-token .token-ring .bg {
  fill: none; stroke: var(--color-surface-sunk); stroke-width: 6;
  filter: drop-shadow(0 0 0 transparent);
}
.bx-token .token-ring .bar {
  fill: none; stroke: var(--color-accent); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset 200ms linear;
}
.bx-token .token-code {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: var(--fw-bold);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.08em;
  color: var(--color-text-strong);
}
.bx-token .token-foot { font-size: 11px; color: var(--color-text-dim); }

/* ===== Caja 6 — Cuenta Eje balance (2x1) ===== */
.bx-cuenta {
  grid-area: cuenta;
  background: var(--color-surface);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.bx-cuenta .cuenta-info { flex: 1; min-width: 0; }
.bx-cuenta .label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  font-weight: var(--fw-semi);
}
.bx-cuenta .balance {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  letter-spacing: -0.025em;
  margin-top: 2px;
}
.bx-cuenta .balance .cents { color: var(--color-text-muted); font-size: 0.6em; font-weight: var(--fw-semi); }
.bx-cuenta .meta {
  display: flex; gap: var(--space-3);
  font-size: var(--fs-xs); color: var(--color-text-dim);
  margin-top: 6px;
}
.bx-cuenta .meta span { display: inline-flex; align-items: center; gap: 4px; }

/* ===== Caja 7 — Productos chips (2x2) ===== */
.bx-prod { grid-area: prod; gap: var(--space-3); }
.bx-prod .prod-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-3);
}
.bx-prod .prod-head h3 { font-size: var(--fs-title); }
.bx-prod .prod-head .all {
  font-size: var(--fs-xs); color: var(--color-text-muted);
  font-weight: var(--fw-semi);
}
.bx-prod .prod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  flex: 1;
}
.bx-prod .chip {
  background: var(--color-surface-sunk);
  box-shadow: var(--nm-sunk-sm);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.bx-prod .chip:hover { box-shadow: var(--nm-pressed); }
.bx-prod .chip .ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--grad-accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: var(--glow-accent);
}
.bx-prod .chip .ti { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--color-text-strong); }
.bx-prod .chip .da { font-size: 11px; color: var(--color-text-dim); margin-top: 1px; }

/* ===== Caja 8 — Pasos (3x2) ===== */
.bx-steps { grid-area: steps; }
.bx-steps h3 { font-size: var(--fs-title); margin-bottom: var(--space-4); }
.bx-steps .lead { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.bx-steps .steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  flex: 1;
}
.bx-steps .step {
  background: var(--color-surface-sunk);
  box-shadow: var(--nm-sunk-sm);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex; flex-direction: column;
  gap: 6px;
  position: relative;
}
.bx-steps .step .num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  font-size: var(--fs-sm);
  margin-bottom: 4px;
}
.bx-steps .step .ti { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--color-text-strong); }
.bx-steps .step .da { font-size: 11px; color: var(--color-text-muted); line-height: 1.45; }

/* ===== MOCKUP CELULAR (recreación neomorfa de la app) ===== */
.phone-mock {
  --pw: 250px;
  --ph: 520px;
  width: var(--pw); height: var(--ph);
  border-radius: 38px;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-lg), inset 0 0 0 1px rgba(255,255,255,.04);
  padding: 12px;
  position: relative;
  transition: var(--theme-transition);
}
.phone-mock::before {
  content: "";
  position: absolute; top: 14px; left: 50%;
  width: 80px; height: 18px;
  background: var(--color-surface-sunk);
  border-radius: 0 0 14px 14px;
  transform: translateX(-50%);
  z-index: 3;
}
.phone-mock .ps {
  width: 100%; height: 100%;
  border-radius: 28px;
  background: var(--color-bg);
  box-shadow: var(--nm-sunk-sm);
  padding: 38px 12px 12px;
  display: flex; flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.phone-mock .greet { padding: 0 4px; }
.phone-mock .greet .hi { font-size: 11px; color: var(--color-text-dim); }
.phone-mock .greet .name { font-size: 16px; font-weight: var(--fw-bold); color: var(--color-text-strong); margin-top: 2px; }

.phone-mock .pcard {
  background: var(--grad-accent);
  border-radius: 18px;
  padding: 14px;
  color: #fff;
  box-shadow: var(--nm-raised-sm), 0 6px 18px var(--color-accent-glow);
  position: relative; overflow: hidden;
}
.phone-mock .pcard .lab { font-size: 10px; opacity: .8; text-transform: uppercase; letter-spacing: .08em; }
.phone-mock .pcard .bal { font-size: 22px; font-weight: var(--fw-bold); margin-top: 4px; letter-spacing: -.02em; }
.phone-mock .pcard .met { display: flex; justify-content: space-between; margin-top: 14px; font-size: 10px; opacity: .9; }

.phone-mock .pacts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.phone-mock .pacts .pa {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 2px;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  border-radius: 10px;
  font-size: 9px;
  color: var(--color-text-muted);
}
.phone-mock .pacts .pa .pi {
  width: 24px; height: 24px;
  background: var(--grad-accent);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: 11px;
}

.phone-mock .plist { flex: 1; display: flex; flex-direction: column; gap: 6px; overflow: hidden; padding-top: 4px; }
.phone-mock .plist .pi {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  border-radius: 10px;
  font-size: 10px;
}
.phone-mock .plist .pi .pico {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-surface-sunk);
  box-shadow: var(--nm-sunk-sm);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.phone-mock .plist .pi .info { flex: 1; min-width: 0; }
.phone-mock .plist .pi .ti { font-weight: var(--fw-semi); color: var(--color-text-strong); }
.phone-mock .plist .pi .da { color: var(--color-text-dim); font-size: 9px; margin-top: 1px; }
.phone-mock .plist .pi .am { font-weight: var(--fw-semi); color: var(--color-text-strong); }
.phone-mock .plist .pi .am.neg { color: var(--color-danger); }
.phone-mock .plist .pi .am.pos { color: var(--color-success); }