/* ═══════════════════════════════════════════════════════════
   CHECKOUT.CSS — Eletrocar Parts | Design System v4
   Linguagem visual: Fintech / Apple / Stripe / Nubank
   Auditoria de harmonia visual responsiva — 10 agentes
   ═══════════════════════════════════════════════════════════ */

[hidden] { display: none !important; }
.co-main, .co-main section, .co-block {
  display: flex !important; flex-direction: column !important; width: 100% !important;
}

/* ═══════════════ DESIGN TOKENS ═══════════════ */
:root {
  /* Brand */
  --brand-900: #064E3B; --brand-800: #065F46; --brand-700: #047857;
  --brand-600: #059669; --brand-500: #10B981; --brand-400: #34D399;
  --brand-50: #ECFDF5;

  /* Surfaces */
  --surface-page: #F6F8F7;
  --surface-card: #FFFFFF;
  --surface-elevated: rgba(255,255,255,.94);

  /* Text */
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --text-placeholder: #94A3B8;

  /* Borders */
  --border-subtle: rgba(15,23,42,.06);
  --border-active: rgba(5,150,105,.35);
  --border-glow: rgba(5,150,105,.18);

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.06);
  --shadow-elevated: 0 2px 4px rgba(15,23,42,.04), 0 12px 28px rgba(15,23,42,.08);
  --shadow-btn: 0 4px 12px rgba(5,150,105,.2), 0 2px 4px rgba(5,150,105,.1);
  --shadow-btn-hover: 0 8px 24px rgba(5,150,105,.28), 0 4px 8px rgba(5,150,105,.14);
  --shadow-glow: 0 0 0 3px rgba(5,150,105,.12);
  --shadow-glow-active: 0 0 0 1px rgba(5,150,105,.1), 0 6px 20px rgba(5,150,105,.14);

  /* Radii */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px;

  /* ──── SPAVING SCALE (consolidated from 17 values → 6 tokens) ──── */
  --space-xs: 4px;   /* replaces 2,3,4,5 */
  --space-sm: 8px;   /* replaces 6,8 */
  --space-md: 12px;  /* replaces 10,12 */
  --space-lg: 16px;  /* replaces 14,16 */
  --space-xl: 20px;  /* replaces 18,20 */
  --space-2xl: 24px; /* replaces 22,24 */

  /* ──── FLUID TYPOGRAPHY (clamp-based, no hard breakpoint jumps) ──── */
  --text-2xs: clamp(11px, 2.6vw, 13px);
  --text-xs:  clamp(12px, 2.8vw, 14px);
  --text-sm:  clamp(13px, 3.0vw, 15px);
  --text-base:clamp(14px, 3.3vw, 16px);
  --text-md:  clamp(16px, 3.8vw, 18px);
  --text-lg:  clamp(18px, 4.2vw, 22px);
  --text-xl:  clamp(20px, 5.0vw, 26px);
  --text-2xl: clamp(24px, 6.0vw, 32px);
  --text-3xl: clamp(28px, 7.0vw, 40px);
  --leading-base: 1.5;
  --leading-relaxed: 1.65;

  /* ──── ICON SIZE TOKENS ──── */
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 18px;
  --icon-xl: 20px;

  /* ──── RESPONSIVE COMPONENT TOKENS ──── */
  --btn-height:   clamp(48px, 6vw, 56px);
  --input-height: clamp(48px, 6vw, 52px);
  --page-pad:     clamp(14px, 4vw, 20px);
  --card-pad:     clamp(16px, 4vw, 24px);
  --block-gap:    clamp(8px, 2vw, 12px);
  --container-max: 480px;

  /* ──── SAFE AREA (iPhone X+) ──── */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  --transition: .2s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════ LAYOUT ═══════════════ */
body {
  background: var(--surface-page);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}
.co-main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 0 calc(40px + var(--safe-bottom));
  background: transparent;
}

/* ═══════════════ STAGES ═══════════════ */
.co-stage { display: none; }
.co-stage--active { display: block; }
.co-stage__help { text-align: center; font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-sm); }
.co-stage__help a { color: var(--text-muted); }
.co-stage__back {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 500;
  color: var(--text-muted); cursor: pointer; border: 0; background: none; padding: var(--space-sm) 0;
  margin-bottom: var(--space-xs); font-family: Inter, system-ui, sans-serif; transition: color var(--transition);
}
.co-stage__back:hover { color: var(--text-primary); }

/* ═══════════════ BLOCKS ═══════════════ */
.co-block {
  padding: clamp(18px, 5vw, 28px) var(--page-pad);
  margin: 0 0 var(--block-gap);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.co-block__title { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); margin-bottom: 2px; letter-spacing: -0.01em; }
.co-block__sub { font-size: var(--text-xs); color: var(--text-muted); margin: 0 0 var(--space-lg); line-height: var(--leading-base); }
.co-block__rating { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); white-space: nowrap; }

/* ═══════════════ PROGRESS BAR ═══════════════ */
.co-progress {
  background: rgba(255,255,255,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; z-index: 999;
  padding: clamp(12px, 3vw, 16px) var(--page-pad);
  padding-top: calc(clamp(12px, 3vw, 16px) + var(--safe-top));
}
.co-progress__inner { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.co-step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 60px; }
.co-step__num {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; border: 2px solid var(--border-subtle); color: var(--text-muted);
  background: var(--surface-card); transition: all .3s var(--transition);
}
.co-step.is-active .co-step__num {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 8px rgba(5,150,105,.25);
}
.co-step.is-done .co-step__num { background: var(--brand-600); border-color: transparent; color: #fff; }
.co-step__label { font-size: var(--text-2xs); font-weight: 500; color: var(--text-muted); letter-spacing: .03em; transition: color .3s ease; }
.co-step.is-active .co-step__label { color: var(--brand-700); font-weight: 600; }
.co-step.is-done .co-step__label { color: var(--brand-600); }
.co-step__line { width: 40px; height: 2px; background: var(--border-subtle); margin: 0 0 22px; border-radius: 1px; transition: background .4s ease; }
.co-step__line.is-done { background: var(--brand-500); }

/* ═══════════════ BANNER ═══════════════ */
.co-banner { max-width: var(--container-max); margin: 0 auto var(--block-gap); }
.co-banner img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }
.co-test-banner {
  background: rgba(245,158,11,.06); color: #92400E; text-align: center;
  padding: var(--space-sm) var(--space-lg); font-size: var(--text-2xs); font-weight: 500;
  border-bottom: 1px solid rgba(245,158,11,.1);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* ═══════════════ CARDS ═══════════════ */
.co-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--card-pad); margin-bottom: var(--space-md);
  box-shadow: var(--shadow-card); transition: box-shadow .2s ease;
}
.co-card:hover { box-shadow: var(--shadow-elevated); }
.co-card--order { padding: var(--space-2xl); }
.co-card--pix {
  border: 1px solid var(--border-active);
  background: linear-gradient(180deg, rgba(5,150,105,.03), transparent 60%);
  box-shadow: var(--shadow-glow-active);
}
.co-card--card { border: 1px solid var(--border-subtle); }

/* ═══════════════ ORDER SUMMARY ═══════════════ */
.co-order__header strong { display: block; font-size: var(--text-md); font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.co-order__vehicle { display: inline-block; font-size: var(--text-2xs); font-weight: 500; color: var(--text-secondary); background: var(--surface-page); padding: 4px var(--space-md); border-radius: var(--radius-sm); margin-top: var(--space-sm); }
.co-order__items { margin: var(--space-lg) 0; display: flex; flex-direction: column; gap: 6px; }
.co-order__item { font-size: var(--text-xs); color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-sm); }
.co-order__item::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--brand-500); flex-shrink: 0; }
.co-order__price { border-top: 1px solid var(--border-subtle); padding-top: var(--space-lg); margin-top: var(--space-md); }
.co-order__row { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--text-secondary); padding: 3px 0; }
.co-order__row--total { font-weight: 700; font-size: var(--text-xl); color: var(--text-primary); padding-top: var(--space-md); margin-top: 6px; border-top: 1px solid var(--border-subtle); }
.co-order__row--installments { font-size: var(--text-2xs); color: var(--text-muted); padding-top: var(--space-xs); }
.co-order__free { color: var(--brand-600); font-weight: 600; }

/* ═══════════════ VEHICLE ═══════════════ */
.co-card--vehicle p { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-md); }
.co-card--vehicle strong { color: var(--text-primary); font-weight: 600; }
.co-badge-compat {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  background: linear-gradient(135deg, rgba(5,150,105,.06), transparent);
  border: 1px solid var(--border-active); border-radius: var(--radius-md);
  padding: var(--space-md) 18px; font-size: var(--text-sm); font-weight: 600; color: var(--brand-700);
}

/* ═══════════════ BUTTONS ═══════════════ */
.co-btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  height: var(--btn-height); border-radius: var(--radius-lg); border: 0;
  font-family: Inter, system-ui, sans-serif; font-weight: 600;
  font-size: var(--text-sm); cursor: pointer; margin-top: var(--space-lg);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  letter-spacing: -0.01em;
}
.co-btn:active { transform: scale(.985); }
.co-btn--primary {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
  color: #fff;
  box-shadow: var(--shadow-btn), inset 0 1px 0 rgba(255,255,255,.18);
}
.co-btn--primary:hover {
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-800) 100%);
  box-shadow: var(--shadow-btn-hover), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.co-btn--final {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
  color: #fff; height: clamp(50px, 6.5vw, 56px);
  font-size: clamp(15px, 3.8vw, 17px); font-weight: 600;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-btn-hover), inset 0 1px 0 rgba(255,255,255,.2);
  margin-top: var(--space-xl); letter-spacing: -0.01em;
}
.co-btn--final:hover {
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-800) 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(5,150,105,.3), inset 0 1px 0 rgba(255,255,255,.24);
}
.co-btn--final:active { transform: translateY(1px) scale(.985); }
.co-btn--cep {
  background: var(--text-primary); color: #fff;
  height: var(--input-height); min-width: 110px; width: auto;
  margin-top: 0; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .05em;
  border-radius: var(--radius-md);
}
.co-btn--cep:hover { background: #1e293b; }
.co-btn--cep:disabled { opacity: .4; cursor: not-allowed; }
.co-btn--pix-copy {
  background: var(--surface-card); border: 1.5px solid var(--brand-500); color: var(--brand-600);
  font-weight: 600; margin-top: var(--space-lg); border-radius: var(--radius-md);
  height: clamp(46px, 5vw, 50px); font-size: var(--text-xs);
}
.co-btn--pix-copy:hover { background: var(--brand-50); }
.co-btn--pix-copy.is-copied { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.co-btn--whatsapp {
  background: #25D366; color: #fff;
  height: var(--btn-height); font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-lg); box-shadow: 0 4px 14px rgba(37,211,102,.2);
}
.co-btn--whatsapp:hover { background: #1ea952; }
.co-btn--whatsapp-faq {
  background: transparent; border: 1.5px solid #25D366; color: #25D366;
  font-weight: 600; margin-top: var(--space-xl);
  height: clamp(46px, 5vw, 48px); font-size: var(--text-xs);
  border-radius: var(--radius-md);
}
.co-btn--whatsapp-faq:hover { background: #f0fff4; }
.co-btn--outline {
  background: transparent; border: 1.5px solid var(--border-subtle); color: var(--text-secondary);
  font-weight: 600;
  height: clamp(46px, 5vw, 48px); font-size: var(--text-xs);
  border-radius: var(--radius-md);
}
.co-btn--outline:hover { border-color: var(--brand-500); color: var(--brand-600); background: var(--brand-50); }
.co-btn--review-pulse {
  animation: reviewPulse 2s ease-in-out infinite;
  border-color: var(--brand-500); color: var(--brand-600); font-weight: 700;
  background: linear-gradient(135deg, rgba(5,150,105,.04), transparent);
  position: relative; justify-content: center;
}
.co-btn--review-pulse i[data-lucide] { position: absolute; left: 18px; margin-right: 0; }
@keyframes reviewPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5,150,105,.2); transform: scale(1); }
  50% { box-shadow: 0 0 0 8px rgba(5,150,105,.04); transform: scale(1.01); }
}

/* ═══════════════ FORM ═══════════════ */
.co-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.co-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.co-label { font-size: var(--text-2xs); font-weight: 600; color: var(--text-secondary); letter-spacing: .03em; }
.co-input {
  height: var(--input-height); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 0 var(--space-lg); font-family: Inter, system-ui, sans-serif;
  font-size: var(--text-sm); color: var(--text-primary); background: var(--surface-card);
  outline: none; transition: border-color .2s ease, box-shadow .2s ease;
  width: 100%; box-sizing: border-box;
}
.co-input:focus { border-color: var(--brand-500); box-shadow: var(--shadow-glow); }
.co-input::placeholder { color: var(--text-placeholder); }
.co-input:read-only { background: var(--surface-page); color: var(--text-secondary); cursor: default; }
.co-input.is-error { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.08); background: #FFF5F5; }
.co-select {
  height: var(--input-height); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 0 var(--space-lg); font-family: Inter, system-ui, sans-serif;
  font-size: var(--text-sm); color: var(--text-primary); background: var(--surface-card);
  outline: none; width: 100%; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; cursor: pointer;
}
.co-error { font-size: var(--text-2xs); color: #DC2626; min-height: 16px; font-weight: 500; }
.co-helper { font-size: var(--text-2xs); color: var(--text-muted); line-height: var(--leading-base); }
.co-privacy { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin-top: var(--space-lg); line-height: var(--leading-base); }
.co-field-row { display: flex; gap: var(--space-md); }
.co-cep-row { display: flex; gap: var(--space-sm); align-items: stretch; }
.co-cep-row .co-input { flex: 1; height: var(--input-height); min-height: var(--input-height); }
.co-cep-row .co-btn--cep { height: var(--input-height); }

/* ═══════════════ SHIPPING ═══════════════ */
.co-shipping-options { display: flex; flex-direction: column; gap: var(--space-sm); margin: var(--space-lg) 0; }
.co-ship--appear { animation: shipSlideIn .45s cubic-bezier(.22,.61,.36,1); }
.co-ship--appear .co-ship-card { animation: shipCardFade .4s ease backwards; }
.co-ship--appear .co-ship-card:nth-child(1) { animation-delay: 0s; }
.co-ship--appear .co-ship-card:nth-child(2) { animation-delay: .1s; }
.co-ship--appear .co-ship-card:nth-child(3) { animation-delay: .2s; }
@keyframes shipSlideIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shipCardFade { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
.co-ship-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-lg); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  cursor: pointer; transition: all .2s ease; gap: var(--space-md); background: var(--surface-card);
}
.co-ship-card:hover { border-color: rgba(0,0,0,.12); }
.co-ship-card.is-selected {
  border-color: var(--brand-500);
  background: linear-gradient(90deg, rgba(5,150,105,.04), transparent);
  border-left: 3px solid var(--brand-500); padding-left: 14px;
}
.co-ship-card__left { display: flex; flex-direction: column; gap: 3px; }
.co-ship-card__name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.co-ship-card__time { font-size: var(--text-2xs); color: var(--text-muted); }
.co-ship-card__right { text-align: right; }
.co-ship-card__price { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.co-ship-card__tag { font-size: var(--text-2xs); font-weight: 700; color: var(--brand-600); }
.co-ship-card__badge { font-size: var(--text-2xs); font-weight: 700; background: var(--text-primary); color: #fff; padding: 2px 8px; border-radius: var(--radius-sm); }
.co-delivery { background: linear-gradient(135deg, rgba(5,150,105,.05), transparent); border: 1px solid rgba(5,150,105,.15); border-radius: var(--radius-md); padding: var(--space-lg); font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-md); line-height: var(--leading-base); }
.co-delivery strong { color: var(--brand-700); }
.co-loading { font-size: var(--text-2xs); color: var(--text-muted); display: block; margin-top: var(--space-sm); }
.co-address-fields .co-field,
.co-address-fields .co-field-row { transition: opacity .35s ease, transform .35s ease; }

/* ═══════════════ PAYMENT TOGGLE ═══════════════ */
.co-payment-toggle { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.co-pay-card {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
  padding: clamp(14px, 3.5vw, 18px) var(--space-sm);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); cursor: pointer;
  background: var(--surface-card); transition: all .25s ease; font-family: Inter, system-ui, sans-serif;
}
.co-pay-card:hover { border-color: rgba(0,0,0,.1); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.co-pay-card.is-active {
  border-color: var(--brand-500);
  background: linear-gradient(180deg, rgba(5,150,105,.04), transparent 70%);
  box-shadow: var(--shadow-glow-active);
}
.co-pay-card__icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(5,150,105,.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .25s ease; }
.co-pay-card.is-active .co-pay-card__icon { background: rgba(5,150,105,.12); box-shadow: 0 0 0 6px rgba(5,150,105,.04); }
.co-pay-card__icon i { width: var(--icon-xl); height: var(--icon-xl); color: var(--brand-600); }
.co-pay-card__icon img { width: 28px; height: 28px; object-fit: contain; }
.co-pay-card__label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.co-pay-card__price { font-size: var(--text-xs); font-weight: 700; color: var(--brand-600); }
.co-pay-content[hidden] { display: none; }

/* ═══════════════ PIX ═══════════════ */
.co-pix__discount {
  display: inline-block; background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: #fff; font-size: var(--text-2xs); font-weight: 600;
  padding: 5px var(--space-md); border-radius: 20px;
  margin-bottom: var(--space-md); letter-spacing: .03em;
  box-shadow: 0 2px 8px rgba(5,150,105,.2);
}
.co-pix__prices { display: flex; align-items: baseline; gap: var(--space-md); margin-bottom: 6px; }
.co-pix__old { font-size: var(--text-base); color: var(--text-muted); text-decoration: line-through; }
.co-pix__new { font-size: var(--text-3xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.co-pix__save { font-size: var(--text-sm); color: var(--brand-600); font-weight: 600; margin-bottom: var(--space-lg); }
.co-pix__benefits { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.co-pix__benefits li { font-size: var(--text-xs); color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-sm); }
.co-pix__qr { display: flex; justify-content: center; margin: var(--space-lg) 0; }
.co-pix__qr--live { animation: qrFadeIn .4s ease; }
@keyframes qrFadeIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.co-pix__timer { text-align: center; font-size: var(--text-2xs); color: var(--text-muted); margin-top: var(--space-md); font-weight: 500; }
.co-pix__steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }
.co-pix__steps li { font-size: var(--text-xs); color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-sm); }
.co-pix__steps li strong { color: var(--brand-600); font-size: var(--text-sm); }
.co-pix__code-area { margin: var(--space-lg) 0; }
.co-pix__code-box {
  background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--space-lg); margin-top: var(--space-sm); cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
  overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
}
.co-pix__code-box:hover { border-color: var(--brand-500); box-shadow: var(--shadow-glow); }
.co-pix__code-box code { font-family: 'SF Mono','Fira Code',monospace; font-size: var(--text-xs); color: var(--text-secondary); word-break: break-all; white-space: normal; }
.co-pix__qr-secondary { text-align: center; margin: var(--space-lg) 0 var(--space-sm); }
.co-pix__qr-label { font-size: var(--text-2xs); color: var(--text-muted); }

/* ═══════════════ CARD PAYMENT ═══════════════ */
.co-card__prices { margin-bottom: var(--space-lg); }
.co-card__total { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); display: block; letter-spacing: -0.02em; }
.co-card__installments { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-xs); }
.co-card__security { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-md); text-align: center; line-height: var(--leading-base); }

/* ═══════════════ MINI SUMMARY ═══════════════ */
.co-mini-summary { border-top: 1px solid var(--border-subtle); padding-top: var(--space-lg); margin-top: var(--space-lg); }
.co-mini-summary__title { font-size: var(--text-2xs); font-weight: 600; color: var(--text-muted); letter-spacing: .04em; margin-bottom: var(--space-sm); }
.co-mini-summary__row { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--text-secondary); padding: 3px 0; }
.co-mini-summary__row--total { font-weight: 700; color: var(--text-primary); font-size: var(--text-base); padding-top: var(--space-sm); border-top: 1px solid var(--border-subtle); margin-top: 6px; }
.co-final-trust { display: flex; justify-content: center; gap: var(--space-lg); flex-wrap: wrap; font-size: var(--text-2xs); color: var(--text-muted); margin-top: var(--space-lg); text-align: center; }
.co-final-trust span { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.co-final-trust i[data-lucide] { width: var(--icon-sm); height: var(--icon-sm); color: var(--brand-500); }

/* ═══════════════ REVIEWS ═══════════════ */
.co-reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.co-review-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-lg); cursor: pointer; transition: all .2s ease;
}
.co-review-card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-1px); }
.co-review-card:active { transform: scale(.98); }
.co-review-card__stars { color: var(--brand-500); font-size: var(--text-2xs); margin-bottom: 3px; }
.co-review-card__stars span { font-weight: 600; color: var(--text-primary); margin-left: var(--space-xs); font-size: var(--text-2xs); }
.co-review-card__author { font-size: var(--text-2xs); font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.co-review-card__text { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.55; margin-bottom: var(--space-md); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.co-review-card__text strong { color: var(--brand-700); font-weight: 600; }
.co-review-card__thumb { width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-sm); background: var(--surface-page); }
.co-review-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.co-review-card__meta { font-size: var(--text-2xs); color: var(--brand-600); font-weight: 600; }
.co-trustgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.co-trustgrid__item {
  display: flex; align-items: center; gap: var(--space-sm);
  background: var(--surface-page); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-md); font-size: var(--text-xs);
  font-weight: 600; color: var(--text-secondary); transition: border-color .2s ease;
}
.co-trustgrid__item:hover { border-color: var(--brand-500); }

/* ═══════════════ REVIEWS MODAL ═══════════════ */
.co-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: flex-end; justify-content: center;
}
.co-modal-overlay[hidden] { display: none; }
.co-modal-dialog { background: var(--surface-card); width: 100%; max-height: 90vh; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; display: flex; flex-direction: column; overflow: hidden; animation: coSlideUp .35s cubic-bezier(.32,.72,0,1); }
@media (min-width: 640px) { .co-modal-overlay { align-items: center; } .co-modal-dialog { width: 520px; max-height: 85vh; border-radius: var(--radius-2xl); margin: var(--space-2xl); } }
@keyframes coSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.co-modal-dialog__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xl) var(--page-pad); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.co-modal-dialog__head h3 { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); }
.co-modal-dialog__close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-subtle); background: var(--surface-card); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all .15s ease; }
.co-modal-dialog__close:hover { background: var(--surface-page); color: var(--text-primary); }
.co-modal-dialog__body { padding: var(--space-lg) var(--page-pad); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-lg); -webkit-overflow-scrolling: touch; }
.co-modal-dialog__footer { padding: var(--space-md) var(--page-pad) calc(var(--space-2xl) + var(--safe-bottom)); flex-shrink: 0; text-align: center; }
.co-modal__counter { font-size: var(--text-2xs); color: var(--text-muted); margin: 0 0 var(--space-md); }
.co-modal-review { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-lg); }
.co-modal-review:last-child { border-bottom: 0; }
.co-modal-review p { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); margin: 0 0 var(--space-md); }
.co-modal-review p strong { color: var(--brand-700); }
.co-modal-review__imgs { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.co-modal-review__imgs img { width: 80px; height: 80px; border-radius: var(--radius-md); object-fit: cover; border: 1px solid var(--border-subtle); cursor: pointer; transition: transform .15s ease; }
.co-modal-review__imgs img:active { transform: scale(.96); }
.co-review-zoom { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.96); display: flex; align-items: center; justify-content: center; padding: var(--space-2xl); cursor: pointer; }
.co-review-zoom[hidden] { display: none; }
.co-review-zoom__close { position: absolute; top: var(--space-lg); right: var(--space-lg); width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); background: rgba(0,0,0,.4); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.co-review-zoom img { max-width: 100%; max-height: 85vh; border-radius: var(--radius-md); object-fit: contain; }

/* ═══════════════ FAQ ═══════════════ */
.co-faq { display: flex; flex-direction: column; }
.co-faq__item { border-bottom: 1px solid var(--border-subtle); }
.co-faq__q { width: 100%; background: none; border: 0; padding: var(--space-lg) 0; text-align: left; font-family: Inter, system-ui, sans-serif; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.co-faq__q::after { content: "+"; font-size: 18px; color: var(--text-muted); transition: transform .3s ease; font-weight: 400; }
.co-faq__q.is-open::after { transform: rotate(45deg); color: var(--brand-600); }
.co-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.co-faq__a.is-open { grid-template-rows: 1fr; }
.co-faq__a-inner { overflow: hidden; }
.co-faq__a-inner p { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); padding: 0 0 var(--space-lg); }

/* ═══════════════ SUCCESS ═══════════════ */
.co-success { max-width: var(--container-max); margin: 60px auto; padding: 0 var(--page-pad) calc(40px + var(--safe-bottom)); text-align: center; }
.co-success__inner { display: flex; flex-direction: column; align-items: center; }
.co-success__logo { margin-bottom: 28px; }
.co-success__check { margin-bottom: var(--space-xl); }
.co-check-draw { stroke-dasharray: 50; stroke-dashoffset: 50; animation: checkDraw .6s ease .3s forwards; }
@keyframes checkDraw { to { stroke-dashoffset: 0; } }
.co-success__title { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); }
.co-success__order { font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; margin-bottom: var(--space-xl); background: var(--surface-page); padding: 6px var(--space-lg); border-radius: var(--radius-md); }
.co-success__text { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); margin-bottom: 28px; max-width: 340px; }
.co-success__timeline { display: flex; flex-direction: column; gap: 0; width: 100%; text-align: left; margin: var(--space-2xl) 0; }
.co-success__step { display: flex; align-items: flex-start; gap: var(--space-lg); padding: var(--space-md) 0; position: relative; }
.co-success__step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 44px; width: 2px; height: calc(100% - 24px); background: var(--border-subtle); }
.co-success__step.is-done:not(:last-child)::after { background: var(--brand-500); }
.co-success__step > span { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; border: 2px solid var(--border-subtle); color: var(--text-muted); background: var(--surface-card); flex-shrink: 0; }
.co-success__step.is-done > span { background: var(--brand-600); border-color: transparent; color: #fff; }
.co-success__step strong { font-size: var(--text-sm); color: var(--text-primary); display: block; }
.co-success__step small { font-size: var(--text-2xs); color: var(--text-muted); }
.co-success__email { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-lg); }
.co-success .co-btn--outline { margin-top: 28px; text-decoration: none; display: inline-flex; width: auto; padding: 0 var(--space-2xl); }

/* ═══════════════ CAROUSEL ═══════════════ */
.co-carousel { margin: -12px -12px var(--space-lg); }
.co-carousel__main { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-page); }
.co-carousel__main img { width: 100%; height: auto; max-height: 320px; object-fit: contain; display: block; transition: opacity .25s ease; }
.co-carousel__main video { width: 100%; height: auto; max-height: 320px; object-fit: contain; display: none; }
.co-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-subtle); background: rgba(255,255,255,.9); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); transition: all .15s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.co-carousel__arrow:hover { background: #fff; box-shadow: var(--shadow-elevated); }
.co-carousel__arrow--left { left: var(--space-sm); }
.co-carousel__arrow--right { right: var(--space-sm); }
.co-carousel__thumbs { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.co-carousel__thumbs img { width: 56px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; cursor: pointer; border: 2px solid transparent; transition: border-color .2s ease; opacity: .65; }
.co-carousel__thumbs img:hover { opacity: .9; }
.co-carousel__thumbs img.is-active { border-color: var(--brand-500); opacity: 1; }
.co-carousel__vid-thumb::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); color: #fff; font-size: 10px; border-radius: var(--radius-sm); }

/* ═══════════════ TOAST ═══════════════ */
.co-toast { position: fixed; bottom: calc(28px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); background: var(--text-primary); color: #fff; padding: var(--space-md) 28px; border-radius: var(--radius-lg); font-size: var(--text-xs); font-weight: 500; z-index: 2000; box-shadow: 0 8px 32px rgba(0,0,0,.2); transition: transform .3s ease, opacity .3s ease; }
.co-toast[hidden] { opacity: 0; transform: translateX(-50%) translateY(100%); display: block; pointer-events: none; }

/* ═══════════════ ICONS ═══════════════ */
.co-btn i[data-lucide] { width: var(--icon-lg); height: var(--icon-lg); margin-right: 5px; }
.co-btn--final i[data-lucide] { width: var(--icon-xl); height: var(--icon-xl); }
.co-pix__timer i[data-lucide] { width: var(--icon-sm); height: var(--icon-sm); vertical-align: -2px; margin-right: var(--space-xs); }
.co-final-trust i[data-lucide] { width: var(--icon-sm); height: var(--icon-sm); color: var(--brand-500); }
.co-icon--star { color: var(--brand-500); fill: var(--brand-500); }
.co-privacy i[data-lucide] { width: var(--icon-md); height: var(--icon-md); vertical-align: -3px; margin-right: 5px; color: var(--brand-500); }
.co-success__email i[data-lucide] { width: var(--icon-sm); height: var(--icon-sm); vertical-align: -2px; margin-right: var(--space-xs); }
.co-carousel__arrow i[data-lucide] { width: var(--icon-lg); height: var(--icon-lg); color: var(--text-primary); }
.co-modal-dialog__close i[data-lucide] { width: var(--icon-lg); height: var(--icon-lg); }
.co-review-zoom__close i[data-lucide] { width: 22px; height: 22px; color: #fff; }
.co-pix-check { width: var(--icon-md); height: var(--icon-md); color: var(--brand-500); flex-shrink: 0; margin-right: 2px; }
.co-step__num i[data-lucide] { width: var(--icon-md); height: var(--icon-md); }
.co-success__step > span i[data-lucide] { width: var(--icon-sm); height: var(--icon-sm); }
.co-delivery i[data-lucide] { width: var(--icon-md); height: var(--icon-md); vertical-align: -3px; margin-right: var(--space-xs); color: var(--brand-500); }

/* ═══════════════ WHATSAPP FLOAT ═══════════════ */
.whatsapp-float {
  width: 44px !important; height: 44px !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: #fff !important; border: 1px solid var(--border-subtle) !important;
  border-radius: 50% !important; box-shadow: var(--shadow-card) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.whatsapp-float:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-elevated) !important; }
.whatsapp-float svg { width: 22px !important; height: 22px !important; fill: #25D366 !important; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 520px) {
  .co-block { padding: clamp(16px, 4.5vw, 22px) clamp(12px, 3.5vw, 16px); margin: 0 0 var(--space-sm); border-radius: var(--radius-lg); }
  .co-progress { padding: var(--space-md) clamp(12px, 3.5vw, 16px); padding-top: calc(var(--space-md) + var(--safe-top)); }
  .co-field-row { flex-direction: column; gap: var(--space-md); }
  .co-cep-row { flex-direction: column; }
  .co-cep-row .co-btn--cep { width: 100%; min-width: 0; }
  .co-cep-row .co-input { width: 100% !important; height: var(--input-height) !important; min-height: var(--input-height) !important; box-sizing: border-box !important; }
  .co-trustgrid { grid-template-columns: 1fr 1fr; }
  .co-step { min-width: 52px; }
  .co-final-trust { gap: var(--space-md); }
  .co-modal-dialog__body { padding: var(--space-md) clamp(14px, 3.5vw, 18px); }
  .co-modal-dialog__head { padding: var(--space-lg) clamp(14px, 3.5vw, 18px); }
  .co-modal-dialog__footer { padding: var(--space-md) clamp(14px, 3.5vw, 18px) calc(var(--space-2xl) + var(--safe-bottom)); }
}

/* ═══════════════ NARROW: payment toggle + review grid → single column at 480px ═══════════════ */
@media (max-width: 480px) {
  .co-payment-toggle { flex-direction: column; gap: var(--space-sm); }
  .co-reviews-grid { grid-template-columns: 1fr; }
}

/* ═══════════════ GLOBAL: hide footer on all pages ═══════════════ */
.footer { display: none !important; }

/* ═══════════════ TINY: 374px and below ═══════════════ */
@media (max-width: 374px) {
  .co-step { min-width: 44px; }
  .co-step__line { width: 24px; }
  .co-block { padding: clamp(14px, 4vw, 18px) clamp(10px, 3vw, 12px); }
}