/* ══════════════════════════════════════════════════════════════════════
   Dashboard do hero (v4, simplificada): demonstração do produto, não tela operacional.
   A home anterior está guardada em index-anterior.html.bak (não vai ao ar).
   Dois blocos: indicadores de volume (Pix recebido, USDT convertido, USDC convertido) e a
   conversão animada Pix → USDT/USDC → envio na rede. Componentes do Figma da plataforma
   (Conversão 926:14891: painel #f8f8f8 raio 14, pílula de moeda, botão redondo; passo a passo).
   Medidas pelo tamanho do próprio dashboard (container query):
     ≥ 420px → Pix e conversão lado a lado
     < 420px → celular: indicadores compactos; os dois quadros seguem lado a lado, mais justos
     < 280px → celular pequeno (≈ 320px de tela): quadros empilhados
   ══════════════════════════════════════════════════════════════════════ */

.dash.xd4 {
  container: xd4 / inline-size;
  --x4-canvas: #f3f4f4;
  --x4-canvas-line: #e3e5e5;
  --x4-card: #fff;
  --x4-line: #e9ebeb;
  --x4-ink: #1c1c1c;
  --x4-label: #636363;          /* Figma textpopnodestaque */
  --x4-soft: #6b6f6f;           /* cinzas do Figma escurecidos p/ contraste ≥ 4.5:1 */
  --x4-panel: #f8f8f8;          /* Figma cardinternorecarga */
  --x4-green: #0e8572;          /* verde XGate só em detalhes e indicadores */
  --x4-green-ink: #0d7a57;
  --x4-ease: cubic-bezier(0.16, 1, 0.3, 1);
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  background: var(--x4-canvas);
  border: 1px solid var(--x4-canvas-line);
  box-shadow: 0 32px 64px -40px rgb(16 24 24 / 0.32), 0 4px 12px -6px rgb(16 24 24 / 0.08);
  color: var(--x4-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Indicadores (volumes, nunca saldos) ── */
.xd4 .x4-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.xd4 .dash-card.x4-kpi {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  grid-template-areas:
    "i n"
    "v v";
  align-items: center;
  gap: 9px 8px;
  min-width: 0;
  padding: 13px 15px 14px;
  border-radius: 10px;
  background: var(--x4-card);
  border: 1px solid var(--x4-line);
}

.xd4 .dash-card.x4-kpi:hover {
  transform: none;
  box-shadow: none;
}

.x4-kpi-i {
  grid-area: i;
  width: 16px;
  height: 16px;
}

.x4-kpi-n {
  grid-area: n;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: #484848;
}

.xd4 .x4-kpi-v {
  grid-area: v;
  min-width: 0;
  font-size: 17px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.015em;
  color: var(--x4-ink);
  white-space: nowrap;
}

.x4-kpi-c {
  display: none;
}

/* "+ valor": ocupa o lugar do rótulo por um instante (troca em duas etapas, sem cruzar) */
.x4-delta {
  position: absolute;
  top: 11px;
  left: 38px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e2f5ee;
  color: var(--x4-green-ink);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  line-height: 16px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* ── Conversão: a protagonista ── */
.x4-conv {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px 18px;
  border-radius: 10px;
  background: var(--x4-card);
  border: 1px solid var(--x4-line);
}

.x4-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
}

.x4-title {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.025em;
}

/* status da operação: as variações ficam sobrepostas (sem pulo de largura) */
.x4-status {
  display: grid;
  justify-items: end;
}

.x4-s {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px 0 8px;
  border-radius: 999px;
  background: var(--x4-canvas);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.12s ease-out, transform 0.45s var(--x4-ease);
}

.x4-conv:is([data-st="wait"], [data-st="typing"]) .x4-s--wait,
.x4-conv[data-st="idle"] .x4-s--idle,
.x4-conv[data-st="run"] .x4-s--run,
.x4-conv[data-st="done"] .x4-s--done,
.x4-conv[data-st="send"] .x4-s--send,
.x4-conv[data-st="sent"] .x4-s--sent {
  opacity: 1;
  transform: none;
  transition-duration: 0.24s, 0.45s;
  transition-delay: 0.1s;
}

.x4-dot {
  width: 7px;
  height: 7px;
  margin: 0 2px;
  border-radius: 50%;
  background: var(--x4-soft);
}

.x4-conv:is([data-st="wait"], [data-st="typing"]) .x4-dot {
  animation: x4-pulse 0.9s ease-in-out infinite alternate;
}

.x4-spin {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--x4-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.x4-conv[data-st="run"] .x4-s--run .x4-spin,
.x4-conv[data-st="send"] .x4-s--send .x4-spin {
  animation: x4-rot 0.8s linear infinite;
}

.x4-ok {
  width: 15px;
  height: 15px;
}

.x4-ok circle {
  fill: var(--x4-green);
}

.x4-ok path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pix recebido → convertido em: lado a lado, ligados pelo botão redondo do Figma */
.x4-pair {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.x4-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 16px 15px;
  border-radius: 14px;
}

.x4-side--in {
  background: var(--x4-panel);
}

.x4-side--out {
  position: relative;
  background: var(--x4-card);
  box-shadow: inset 0 0 0 1px var(--x4-line);
}

.x4-side--out::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--x4-green);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}

.x4-conv:is([data-st="done"], [data-st="send"], [data-st="sent"]) .x4-side--out::after {
  opacity: 1;
}

.x4-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
}

.x4-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--x4-label);
  white-space: nowrap;
}

.x4-lbl img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.x4-lbl-r,
.x4-conv:is([data-st="wait"], [data-st="typing"]) .x4-lbl-w {
  display: inline;
}

.x4-lbl-w,
.x4-conv:is([data-st="wait"], [data-st="typing"]) .x4-lbl-r {
  display: none;
}

/* convertido ainda por calcular: número esmaecido até a conversão */
.x4-side--out .x4-big {
  transition: color 0.3s;
}

.x4-conv[data-out-pending] .x4-side--out .x4-big {
  color: #6f7373;
}

.x4-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  flex-shrink: 0;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
}

.x4-pill img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.x4-pill--white {
  background: var(--x4-card);
  box-shadow: 0 1px 2px rgb(16 24 24 / 0.06);
}

.x4-pill--grey {
  background: #f4f5f5;
}

.x4-big {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin-top: 10px;
  font-size: clamp(22px, 4.3cqi, 30px);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.x4-cur {
  margin-right: 5px;
}

.x4-caret {
  width: 1.5px;
  height: 0.9em;
  margin-left: 2px;
  background: var(--x4-ink);
  opacity: 0;
}

.x4-conv[data-st="typing"] .x4-caret {
  animation: x4-blink 0.9s steps(1) infinite;
}

/* linha discreta de contexto: cotação ilustrativa (Pix) e rede de destino (stablecoin) */
.x4-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 8px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--x4-soft);
  white-space: nowrap;
}

.x4-meta > img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
}

.x4-meta-t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.x4-meta-t > b {
  color: var(--x4-ink);
  font-weight: var(--font-weight-medium);
}

.x4-meta-t em {
  font-style: normal;
}

.x4-std {
  font-variant-numeric: normal;
  font-feature-settings: normal;
}

.x4-pct {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #d1d5dc;
}

.x4-pct svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: #707474;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.x4-swap {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  background: var(--x4-card);
  box-shadow: 0 0 0 1px var(--x4-line), 0 2px 6px -2px rgb(16 24 24 / 0.14);
}

.x4-swap svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--x4-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.x4-conv[data-st="run"] .x4-swap svg {
  animation: x4-nudge 0.55s ease-in-out infinite alternate;
}

/* ── Trilha Pix recebido → Conversão → Envio (enche de verde conforme cada etapa termina) ── */
.x4-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--x4-soft);
  white-space: nowrap;
}

.x4-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: color 0.3s;
}

.x4-step-i {
  position: relative;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #c6caca;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.x4-step-i svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s, transform 0.35s var(--x4-ease);
}

.x4-step-i::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--x4-ink);
  opacity: 0;
}

.x4-step:is([data-st="current"], [data-st="busy"]) {
  color: var(--x4-ink);
}

.x4-step:is([data-st="current"], [data-st="busy"]) .x4-step-i {
  box-shadow: inset 0 0 0 1.5px var(--x4-ink);
}

.x4-step[data-st="current"] .x4-step-i::after {
  opacity: 1;
}

.x4-step[data-st="busy"] .x4-step-i::after {
  animation: x4-pulse 0.8s ease-in-out infinite alternate;
}

.x4-step[data-st="done"] {
  color: var(--x4-green-ink);
}

.x4-step[data-st="done"] .x4-step-i {
  background: var(--x4-green);
  box-shadow: none;
}

.x4-step[data-st="done"] .x4-step-i svg {
  opacity: 1;
  transform: none;
}

.x4-step-ln {
  position: relative;
  flex: 1 1 auto;
  min-width: 14px;
  height: 1.5px;
  overflow: hidden;
  border-radius: 2px;
  background: #dfe2e2;
}

.x4-step-ln > i {
  position: absolute;
  inset: 0;
  background: var(--x4-green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--x4-ease);
}

.x4-step[data-st="done"] + .x4-step-ln > i {
  transform: scaleX(1);
}

.x4-meta-m {
  display: none;
}

@keyframes x4-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes x4-rot {
  to { transform: rotate(360deg); }
}

@keyframes x4-nudge {
  from { transform: translateX(-2px); }
  to { transform: translateX(2px); }
}

@keyframes x4-pulse {
  from { opacity: 0.25; }
  to { opacity: 1; }
}

/* ══════════ Dashboard mais estreito (tablet): a cotação quebra em duas linhas ══════════ */
@container xd4 (max-width: 599.98px) {
  .x4-side--in .x4-meta {
    align-items: flex-start;
  }

  .x4-side--in .x4-meta-t {
    white-space: normal;
  }

  .xd4 .dash-card.x4-kpi {
    padding: 12px 13px 13px;
  }

  .x4-kpi-n {
    font-size: 12px;
  }

  .xd4 .x4-kpi-v {
    font-size: 15px;
  }

  .x4-delta {
    top: 10px;
    left: 36px;
  }
}

/* hero no celular: o dashboard fica mais perto dos botões (antes 40px) */
@media (max-width: 47.99rem) {
  .content-section:has(> .dash.xd4) {
    gap: 22px;
  }
}

/* ══════════ Celular: composição própria, compacta ══════════
   Indicadores com valores resumidos; os quadros Pix → stablecoin seguem lado a lado
   (valor, depois a moeda); rede e cotação descem para uma linha só, abaixo deles. */
@container xd4 (max-width: 419.98px) {
  .dash.xd4 {
    gap: 6px;
    padding: 6px;
    border-radius: 14px;
  }

  .xd4 .x4-kpis {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
  }

  .xd4 .dash-card.x4-kpi {
    grid-template-columns: 14px minmax(0, 1fr);
    grid-template-areas:
      "i n"
      "c c";
    gap: 5px 6px;
    padding: 9px 10px 10px;
  }

  .x4-kpi-i {
    width: 14px;
    height: 14px;
  }

  .xd4 .x4-kpi-v,
  .x4-delta {
    display: none;
  }

  .x4-kpi-b {
    display: none;
  }

  .x4-kpi-c {
    display: block;
    grid-area: c;
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    font-size: clamp(12.5px, 4.3cqi, 15px);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.015em;
  }

  .x4-kpi-n {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--x4-label);
  }

  .x4-conv {
    gap: 12px;
    padding: 12px 12px 13px;
  }

  .x4-pair {
    gap: 8px;
  }

  .x4-side {
    padding: 10px 10px 11px;
    border-radius: 12px;
  }

  /* afasta o conteúdo do botão redondo entre os quadros */
  .x4-side--in {
    padding-right: 15px;
  }

  .x4-side--out {
    padding-left: 15px;
  }

  .x4-top {
    display: contents;
  }

  .x4-lbl {
    order: 1;
    font-size: 12px;
  }

  .x4-big {
    order: 2;
    margin: 4px 0 8px;
    font-size: clamp(14px, 5.5cqi, 19px);
  }

  .x4-pill {
    order: 3;
    align-self: flex-start;
    height: 28px;
    padding: 0 10px 0 4px;
    font-size: 13px;
  }

  .x4-side .x4-meta {
    display: none;
  }

  .x4-swap {
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
  }

  .x4-swap svg {
    width: 12px;
    height: 12px;
  }

  .x4-meta-m {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: -4px;
  }

  .x4-meta-m .x4-meta {
    margin: 0;
  }

  .x4-steps {
    gap: 6px;
  }

  .x4-step-ln {
    min-width: 10px;
  }

  .x4-step-w {
    display: none;
  }
}

/* ══════════ Celular estreito (≈ 360px de tela) ══════════ */
@container xd4 (max-width: 319.98px) {
  .xd4 .dash-card.x4-kpi {
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 3px 4px;
    padding: 8px 8px 9px;
  }

  .x4-kpi-i {
    width: 12px;
    height: 12px;
  }

}

/* ══════════ Celular pequeno (≈ 320px de tela): a mesma composição, mais justa ══════════ */
@container xd4 (max-width: 279.98px) {
  .xd4 .dash-card.x4-kpi {
    padding: 8px 8px 9px;
  }

  .x4-side--in {
    padding-right: 15px;
  }

  .x4-side--out {
    padding-left: 15px;
  }

  .x4-big {
    font-size: 13.5px;
  }

  .x4-lbl img {
    display: none;
  }

  .x4-swap {
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
  }

  .x4-pill {
    gap: 4px;
    padding: 0 8px 0 4px;
  }

  .x4-steps {
    gap: 5px;
  }

  .x4-step {
    gap: 4px;
  }
}

/* ── Sem animação para quem pediu "reduzir movimento" ── */
@media (prefers-reduced-motion: reduce) {
  .x4-conv .x4-caret,
  .x4-conv .x4-spin,
  .x4-conv .x4-dot,
  .x4-conv .x4-swap svg,
  .x4-step .x4-step-i::after {
    animation: none !important;
  }

  .x4-s,
  .x4-step,
  .x4-step-i,
  .x4-step-i svg,
  .x4-step-ln > i {
    transition: none;
  }
}

.xd4.x4-paused .x4-caret,
.xd4.x4-paused .x4-spin,
.xd4.x4-paused .x4-dot,
.xd4.x4-paused .x4-swap svg,
.xd4.x4-paused .x4-step-i::after {
  animation-play-state: paused;
}