/* ==========================================================================
   VamoAli · Padrão visual v2 (shadcn/ui + verde da marca)
   Referência: docs/design/prototipo/ e docs/design/PROCEDIMENTO_DESIGN.md
   Componentes com prefixo .vx-  · carregado por último (depois de app-nova.css)
   ========================================================================== */

:root {
  --vx-bg: #FAFAFA;
  --vx-surface: #FFFFFF;
  --vx-border: #E4E4E7;
  --vx-divider: #F4F4F5;
  --vx-muted-bg: #F4F4F5;
  --vx-text: #09090B;
  --vx-text-2: #71717A;
  --vx-text-3: #A1A1AA;
  --vx-green: #18D34D;
  --vx-green-ink: #16A34A;
  --vx-green-dark: #166534;
  --vx-green-soft: #DCFCE7;
  --vx-green-tint: #F0FDF4;
  --vx-navy: #004C6D;
  --vx-warn-bg: #FEF3C7;
  --vx-warn: #92400E;
  --vx-danger: #B91C1C;
  --vx-radius-sm: 8px;
  --vx-radius: 12px;
  --vx-radius-lg: 16px;
  --vx-shadow: 0 1px 3px rgba(0,0,0,0.06);
  --vx-font-title: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --vx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vx-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Base tipográfica ---------- */
.vx, .vx * { box-sizing: border-box; }
.vx { font-family: var(--vx-font-body); color: var(--vx-text); }
.vx-h1 { font-family: var(--vx-font-title); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin: 0; color: var(--vx-text); }
.vx-h2 { font-family: var(--vx-font-title); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0; color: var(--vx-text); }
.vx-sub { font-size: 14px; color: var(--vx-text-2); margin: 4px 0 0; line-height: 1.5; }
.vx-caption { font-size: 12px; color: var(--vx-text-2); }
.vx-mono { font-family: var(--vx-font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Botões ---------- */
.vx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: var(--vx-radius-sm); border: 1px solid var(--vx-border); background: var(--vx-surface); color: var(--vx-text); font-family: var(--vx-font-body); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease, transform .1s ease; }
.vx-btn:hover { background: #F4F4F5; }
.vx-btn:active { transform: scale(0.98); }
.vx-btn:focus-visible { outline: 2px solid var(--vx-green); outline-offset: 2px; }
.vx-btn--primary { background: var(--vx-green); border-color: var(--vx-green); color: #FFFFFF; }
.vx-btn--primary:hover { background: #15BD44; }
.vx-btn--dark { background: var(--vx-text); border-color: var(--vx-text); color: #FFFFFF; }
.vx-btn--lg { height: 44px; font-size: 15px; }
.vx-btn--sm { height: 36px; padding: 0 12px; font-size: 13px; }
.vx-btn--block { width: 100%; }
.vx-btn--ghost { border-color: transparent; background: transparent; }
.vx-btn svg, .vx-btn i { width: 15px; height: 15px; }
.vx-icon-btn { width: 36px; height: 36px; padding: 0; border-radius: var(--vx-radius-sm); border: 1px solid var(--vx-border); background: var(--vx-surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; color: var(--vx-text); }
.vx-icon-btn svg, .vx-icon-btn i { width: 16px; height: 16px; }

/* ---------- Superfícies ---------- */
.vx-card { background: var(--vx-surface); border: 1px solid var(--vx-border); border-radius: var(--vx-radius); box-shadow: var(--vx-shadow); }
.vx-list { background: var(--vx-surface); border: 1px solid var(--vx-border); border-radius: var(--vx-radius); overflow: hidden; }
.vx-list > * + * { border-top: 1px solid var(--vx-divider); }
.vx-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; }

/* ---------- Abas segmentadas (rolam se houver muitas) ---------- */
.vx-tabs { display: flex; gap: 2px; padding: 4px; border-radius: var(--vx-radius-sm); background: var(--vx-muted-bg); overflow-x: auto; scrollbar-width: none; }
.vx-tabs::-webkit-scrollbar { display: none; }
.vx-tab { flex: 1 0 auto; min-width: 84px; height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--vx-text-2); font-family: var(--vx-font-body); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.vx-tab.is-active, .vx-tab[aria-selected="true"] { background: var(--vx-surface); color: var(--vx-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

/* ---------- Campo ---------- */
.vx-field { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--vx-border); border-radius: var(--vx-radius-sm); background: var(--vx-surface); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.vx-field input { border: 0; outline: none; flex: 1; min-width: 0; background: transparent; font-family: var(--vx-font-body); font-size: 16px; color: var(--vx-text); }
.vx-field svg, .vx-field i { width: 16px; height: 16px; color: var(--vx-text-2); flex-shrink: 0; }

/* ---------- Cabeçalho de seção ---------- */
.vx-section { padding: 28px 0 0; }
.vx-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 16px; }

/* ---------- Carrossel ---------- */
.vx-carousel { display: flex; gap: 12px; padding: 12px 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vx-carousel::-webkit-scrollbar { display: none; }
.vx-carousel > * { scroll-snap-align: start; }

/* ---------- Card de evento ---------- */
.package-card.vx-ev { width: 168px; flex: 0 0 168px; display: flex; flex-direction: column; background: var(--vx-surface); border: 1px solid var(--vx-border) !important; border-radius: var(--vx-radius) !important; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important; cursor: pointer; padding: 0 !important; margin: 0 !important; height: auto !important; min-height: 0 !important; }
.vx-grid .package-card.vx-ev { width: auto; flex: initial; }
.vx-ev__media { position: relative; aspect-ratio: 4 / 5; background: var(--vx-muted-bg); }
.vx-ev__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-ev__date { position: absolute; top: 8px; left: 8px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--vx-surface); border: 1px solid var(--vx-border); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; color: var(--vx-text); }
.vx-ev__scarcity { position: absolute; top: 8px; right: 8px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--vx-warn-bg); color: var(--vx-warn); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.vx-ev__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.vx-ev__title { font-family: var(--vx-font-title); font-size: 14px; font-weight: 600; line-height: 1.3; margin: 0; color: var(--vx-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vx-ev__meta { font-size: 12px; color: var(--vx-text-2); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-ev__pts { color: var(--vx-green-dark); font-weight: 600; }
.vx-ev__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--vx-divider); }
.vx-ev__foot .vx-caption { font-size: 11px; }
.vx-ev__price { font-family: var(--vx-font-mono); font-size: 14px; font-weight: 500; color: var(--vx-text); white-space: nowrap; }
.vx-ev__price .currency { font-size: 12px; }
.vx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px 16px 0; }
@media (min-width: 769px) {
  .vx-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .package-card.vx-ev { width: 200px; flex-basis: 200px; }
}

/* ---------- Home ---------- */
#view-home .vx-home-legacy { display: none !important; }
.vx-home-top { display: flex; align-items: center; justify-content: space-between; height: 44px; padding-top: 8px; }
.vx-home-top img { display: block; }
.vx-home-head { padding: 20px 16px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vx-home-head__text { min-width: 0; }
.vx-home-head .vx-home-bell { flex-shrink: 0; }
.vx-home-tools[hidden] { display: none !important; }
/* Cidade de saída em pílula abaixo do título (alternativa 2, 06/10/2026) */
.vx-city.vx-city--pill { display: inline-flex; width: auto; max-width: 100%; height: 32px; margin-top: 10px; padding: 0 12px; gap: 6px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
.vx-city.vx-city--pill #vx-city-label { overflow: hidden; text-overflow: ellipsis; }
.vx-city.vx-city--pill .vx-city__swap { display: none; }
.vx-city.vx-city--pill svg, .vx-city.vx-city--pill i { width: 13px; height: 13px; }
.vx-city.vx-city--pill .vx-city__chev, .vx-city.vx-city--pill svg.vx-city__chev { width: 14px; height: 14px; color: var(--vx-text-2); }
.vx-home-tools { padding: 16px 16px 0; display: flex; flex-direction: column; gap: 12px; }
.vx-city { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--vx-border); border-radius: var(--vx-radius-sm); background: var(--vx-surface); font-family: var(--vx-font-body); font-size: 14px; color: var(--vx-text-2); cursor: pointer; text-align: left; width: 100%; }
.vx-city strong { color: var(--vx-text); font-weight: 600; }
.vx-city .vx-city__swap { margin-left: auto; color: var(--vx-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.vx-city svg, .vx-city i { width: 16px; height: 16px; color: var(--vx-green-ink); flex-shrink: 0; }
#view-home .stories-scroll-container { padding-left: 16px !important; padding-right: 16px !important; }
#view-home #home-content { padding-bottom: 120px; }

/* Destaque (card shadcn) */
.vx-featured { margin: 20px 16px 0; overflow: hidden; cursor: pointer; }
.vx-featured__head { padding: 16px 16px 12px; }
.vx-featured__img { margin: 0 16px; border-radius: var(--vx-radius-sm); overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--vx-muted-bg); }
.vx-featured__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.vx-featured__body { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 4px; }
.vx-featured__title { font-family: var(--vx-font-title); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--vx-text); }
.vx-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.vx-chip { height: 22px; padding: 0 8px; border: 1px solid var(--vx-border); border-radius: 6px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; color: var(--vx-text); background: var(--vx-surface); }
.vx-featured__foot { margin-top: 14px; padding: 12px 16px; border-top: 1px solid var(--vx-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vx-price-lg { font-family: var(--vx-font-title); font-size: 18px; font-weight: 700; color: var(--vx-text); }

/* Banner (4 layouts — configurados no admin) */
.vx-banner { display: block; margin: 28px 16px 0; text-decoration: none; color: var(--vx-text); cursor: pointer; }
.vx-banner--card { display: flex; gap: 12px; padding: 12px; }
.vx-banner--card .vx-banner__text { flex: 1; min-width: 0; padding: 6px 0 2px 4px; display: flex; flex-direction: column; gap: 12px; }
.vx-banner--card .vx-banner__img { width: 112px; height: 148px; border-radius: var(--vx-radius-sm); object-fit: cover; flex-shrink: 0; }
.vx-banner__title { font-family: var(--vx-font-title); font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; margin: 0; }
.vx-banner__sub { font-size: 13px; color: var(--vx-text-2); margin: 4px 0 0; }
.vx-banner--image { position: relative; height: 200px; border-radius: var(--vx-radius); overflow: hidden; border: 1px solid var(--vx-border); }
.vx-banner--image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vx-banner--image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,9,11,0.88) 0%, rgba(9,9,11,0.55) 55%, rgba(9,9,11,0) 100%); }
.vx-banner--image .vx-banner__text { position: absolute; z-index: 1; left: 18px; top: 18px; bottom: 18px; width: 62%; display: flex; flex-direction: column; color: #FFFFFF; }
.vx-banner--image .vx-banner__title { font-size: 22px; color: #FFFFFF; }
.vx-banner--image .vx-banner__sub { color: rgba(255,255,255,0.82); }
.vx-banner--green { position: relative; display: flex; height: 168px; border-radius: var(--vx-radius); overflow: hidden; background: var(--vx-green); color: #FFFFFF; }
.vx-banner--green .vx-banner__text { flex: 1; min-width: 0; padding: 18px; display: flex; flex-direction: column; position: relative; z-index: 1; }
.vx-banner--green .vx-banner__title { font-size: 21px; color: #FFFFFF; }
.vx-banner--green .vx-banner__sub { color: rgba(255,255,255,0.92); }
.vx-banner--green .vx-banner__img { position: absolute; right: -10px; top: 14px; width: 120px; height: 150px; object-fit: cover; border-radius: 10px; transform: rotate(6deg); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.vx-banner--green .vx-banner__cta { background: #FFFFFF; border-color: #FFFFFF; color: var(--vx-text); }
.vx-banner--dates .vx-banner__img { width: 100%; height: 112px; object-fit: cover; object-position: center 32%; display: block; }
.vx-banner--dates { overflow: hidden; padding: 0; }
.vx-banner--dates .vx-banner__text { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.vx-banner__dates { display: flex; gap: 8px; }
.vx-banner__dates span { flex: 1; padding: 8px 0; border: 1px solid var(--vx-border); border-radius: var(--vx-radius-sm); text-align: center; font-size: 15px; font-weight: 600; }
.vx-banner__dates small { display: block; font-size: 11px; color: var(--vx-text-2); font-weight: 400; }
.vx-banner__cta { align-self: flex-start; margin-top: auto; }

/* Como funciona */
.vx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 16px 0; }
.vx-step { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.vx-step__icon { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--vx-border); display: flex; align-items: center; justify-content: center; }
.vx-step__icon svg, .vx-step__icon i { width: 14px; height: 14px; }
.vx-step strong { font-size: 13px; font-weight: 600; line-height: 1.3; }

/* ---------- Gaveta (sheet) ---------- */
.vx-sheet-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(9,9,11,0.55); display: flex; align-items: flex-end; justify-content: center; animation: vxFade .18s ease; }
.vx-sheet { width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; background: var(--vx-surface); border-radius: 16px 16px 0 0; font-family: var(--vx-font-body); color: var(--vx-text); animation: vxUp .24s cubic-bezier(.32,.72,0,1); padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 769px) { .vx-sheet-backdrop { align-items: center; } .vx-sheet { border-radius: 16px; } }
.vx-sheet__grip { display: flex; justify-content: center; padding-top: 10px; }
.vx-sheet__grip span { width: 40px; height: 4px; border-radius: 999px; background: var(--vx-border); }
.vx-sheet__head { padding: 12px 16px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--vx-border); }
.vx-sheet__head > div { flex: 1; min-width: 0; }
.vx-sheet__body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.vx-sheet__foot { padding: 12px 16px 20px; border-top: 1px solid var(--vx-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@keyframes vxFade { from { opacity: 0; } }
@keyframes vxUp { from { transform: translateY(24px); opacity: 0.6; } }

/* Lista de opções (radio/linha clicável) */
.vx-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; background: var(--vx-surface); border: 0; width: 100%; text-align: left; font-family: var(--vx-font-body); color: var(--vx-text); }
.vx-opt.is-selected { background: var(--vx-green-tint); }
.vx-opt input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--vx-green); flex-shrink: 0; }
.vx-opt__icon { width: 36px; height: 36px; border-radius: 8px; background: var(--vx-muted-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vx-opt__icon svg, .vx-opt__icon i { width: 16px; height: 16px; }
.vx-opt__main { flex: 1; min-width: 0; }
.vx-opt__title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.vx-opt__sub { display: block; font-size: 13px; color: var(--vx-text-2); }
.vx-near { height: 20px; padding: 0 6px; border-radius: 6px; background: var(--vx-green-soft); color: var(--vx-green-dark); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }

/* Stepper */
.vx-stepper { display: flex; align-items: center; gap: 4px; }
.vx-stepper button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--vx-border); background: var(--vx-surface); font-size: 18px; cursor: pointer; color: var(--vx-text); }
.vx-stepper button:disabled { color: var(--vx-text-3); cursor: not-allowed; }
.vx-stepper span { width: 32px; text-align: center; font-family: var(--vx-font-mono); font-size: 15px; }

/* Selecionado (cards de opção com borda verde) */
.vx-selected { border: 2px solid var(--vx-green) !important; box-shadow: 0 0 0 3px rgba(24,211,77,0.15) !important; }

/* Títulos de toda a interface pública seguem Outfit; corpo Inter */
.va-app-ui h1, .va-app-ui h2, .va-app-ui h3, .vx h1, .vx h2, .vx h3 { font-family: var(--vx-font-title); }

/* ---------- Ajustes dentro do contêiner do app (que já tem 16px de margem) ---------- */
#view-home .vx-home-head, #view-home .vx-home-tools, #view-home .vx-section-head { padding-left: 0; padding-right: 0; }
#view-home #home-content .vx > div[style*="padding: 16px 16px 0"] { padding-left: 0 !important; padding-right: 0 !important; }
#view-home .vx-featured, #view-home .vx-banner { margin-left: 0; margin-right: 0; }
#view-home .vx-steps, #view-home .vx-grid { padding-left: 0; padding-right: 0; }
#view-home .vx-carousel { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
#view-home #home-content .vx-card[style*="margin: 12px 16px 0"] { margin-left: 0 !important; margin-right: 0 !important; }
#view-home .stories-scroll-container { padding-left: 0 !important; padding-right: 0 !important; }

/* Tipografia v2 vence as regras antigas (Geist) */
.vx .vx-h1, .vx-h1 { font-family: var(--vx-font-title) !important; font-size: 26px !important; font-weight: 700 !important; letter-spacing: -0.03em !important; line-height: 1.15 !important; }
.vx .vx-h2, .vx-h2 { font-family: var(--vx-font-title) !important; font-size: 18px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.25 !important; }
.vx .vx-ev__title { font-family: var(--vx-font-title) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }
.vx .vx-featured__title, .vx .vx-banner__title { font-family: var(--vx-font-title) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; }
.vx .vx-featured__title { font-size: 18px !important; }
.vx .vx-sub { font-family: var(--vx-font-body) !important; }
.vx-field input, .vx-field input:focus { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; height: 100% !important; min-height: 0 !important; outline: none !important; border-radius: 0 !important; -webkit-appearance: none; appearance: none; }
.vx-field:focus-within { border-color: #A1A1AA; box-shadow: 0 0 0 3px rgba(24,211,77,0.12); }
.vx-field input.va-app-field, .vx-field input.va-app-field:focus, #view-home .vx-field input { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; min-height: 0 !important; height: 100% !important; border-radius: 0 !important; outline: none !important; }

/* Computador: o logo já está no menu do topo; destaque em duas colunas */
@media (min-width: 769px) {
  #view-home .vx-home-top { display: none; }
  #view-home .vx-home-head { padding-top: 32px; }
  #view-home .vx-home-head .vx-home-bell { display: none; }
  .vx-featured { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 24px; }
  .vx-featured__img { grid-column: 1; grid-row: 1 / span 3; margin: 16px 0 16px 16px; aspect-ratio: 16 / 10; }
  .vx-featured__head, .vx-featured__body, .vx-featured__foot { grid-column: 2; }
  .vx-featured__head { padding-left: 0; }
  .vx-featured__body { padding-left: 0; padding-right: 16px; }
  .vx-featured__foot { border-top: 0; padding-left: 0; align-self: end; }
  .vx-carousel { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
}

/* ==========================================================================
   Fase 2 · Página do evento + gaveta Reservar (Evento.dc.html, Reservar*.dc.html)
   ========================================================================== */
.vx-dt { background: var(--vx-bg); }
.details-mobile.vx-dt { margin: 0 -16px; }
.vx-dt-hero { position: relative; height: clamp(300px, 100vw, 420px); overflow: hidden; background: var(--vx-muted-bg); }
.vx-dt-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.vx-dt-back, .vx-dt-share { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); }
.vx-dt-back { left: 16px; }
.vx-dt-share { right: 16px; }
.vx-dt-stack { display: flex; flex-direction: column; gap: 16px; padding: 0 16px; }
.vx-dt-info { margin-top: -24px; position: relative; z-index: 1; padding: 16px; }
.vx .vx-dt-title { font-size: 22px !important; margin-top: 10px !important; }
.vx-dt-meta { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #52525B; }
.vx-dt-meta span { display: flex; align-items: center; gap: 8px; }
.vx-dt-meta svg, .vx-dt-meta i { width: 16px; height: 16px; color: var(--vx-text-2); flex-shrink: 0; }
.vx-dt-occ { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vx-divider); }
.vx-dt-occ__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.vx-dt-occ__row strong { font-weight: 600; }
.vx-dt-occ__bar { margin-top: 8px; height: 6px; border-radius: 999px; background: var(--vx-muted-bg); overflow: hidden; }
.vx-dt-occ__bar div { height: 100%; border-radius: 999px; background: var(--vx-green); }
.vx-dt-countdown { margin-top: 14px; }
.vx-dt-trust { display: flex; padding: 0; overflow: hidden; }
.vx-dt-trust > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; text-align: center; font-size: 11px; font-weight: 600; color: var(--vx-text-2); }
.vx-dt-trust > div + div { border-left: 1px solid var(--vx-divider); }
.vx-dt-trust svg, .vx-dt-trust i { width: 16px; height: 16px; color: var(--vx-green-ink); }
.vx-dt-sec__head { padding: 14px 16px; border-bottom: 1px solid var(--vx-border); font-family: var(--vx-font-title); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.vx-dt-sec__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.vx-dt-desc { white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: #52525B; }
.vx-dt-blocks { font-size: 14px; color: #52525B; }
.vx-dt-blocks h1, .vx-dt-blocks h2, .vx-dt-blocks h3 { font-family: var(--vx-font-title) !important; color: var(--vx-text); letter-spacing: -0.02em; font-weight: 700 !important; }
.vx-dt-blocks img { max-width: 100%; border-radius: var(--vx-radius-sm); }
.vx-dt-incl { gap: 0; padding-top: 6px; padding-bottom: 6px; }
.vx-dt-incl > div { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; }
.vx-dt-cancel { padding: 0 16px 6px; }
.vx-dt-cancel__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; }
.vx-dt-cancel__row + .vx-dt-cancel__row { border-top: 1px solid var(--vx-divider); }
.vx-dt-cancel__row span { color: #52525B; }
.vx-dt-cancel__row strong { font-weight: 600; white-space: nowrap; }
.vx-dt-cancel__note { padding: 10px 16px 14px; border-top: 1px solid var(--vx-border); font-size: 12px; line-height: 1.5; color: var(--vx-text-2); }

/* Barra fixa do evento (mobile) */
#mobile-booking-bar.vx-detail-bar-wrap { background: var(--vx-surface) !important; border-top: 1px solid var(--vx-border) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
.vx-detail-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Gaveta Reservar (dentro do bottom sheet e no painel lateral do computador) */
.vx-bw { display: flex; flex-direction: column; min-height: 100%; height: 100%; }
.vx-bw__head { display: flex; align-items: center; gap: 12px; padding: 4px 16px 14px; border-bottom: 1px solid var(--vx-border); }
.vx-bw__head .vx-h2 { margin-top: 2px !important; }
.vx-bw__body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.vx-bw__foot { position: sticky; bottom: 0; background: var(--vx-surface); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.vx-bw .vx-list > .vx-opt + .vx-opt { border-top: 1px solid var(--vx-divider); }
.vx-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Computador: conteúdo + painel de reserva fixo ao lado */
.vx-dt--desk { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; background: transparent; }
.vx-dt-desk-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 32px; align-items: start; }
.vx-dt-hero--desk { height: auto; aspect-ratio: 16 / 9; border-radius: var(--vx-radius); }
.vx-dt--desk .vx-dt-stack { padding: 0; }
.vx-dt--desk .vx-dt-info { margin-top: 16px; }
.vx-dt-desk-side { position: sticky; top: 96px; }
.vx-dt-desk-side .dynamic-booking-widget { padding: 16px 0 0; overflow: hidden; }
.vx-dt-desk-side .vx-bw__foot { position: static; }
.vx .vx-btn.checkout-cta-btn { border-radius: var(--vx-radius-sm) !important; height: 44px !important; box-shadow: none !important; padding: 0 16px !important; font-size: 15px !important; font-weight: 500 !important; }

/* ==========================================================================
   Fase 3 · Checkout (Passageiros.dc.html, Pagamento.dc.html)
   ========================================================================== */
#view-checkout { background: var(--vx-bg); }
#checkout-back-bar { background: var(--vx-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid var(--vx-border) !important; font-family: var(--vx-font-body); }
#checkout-back-bar button { border: 1px solid var(--vx-border) !important; border-radius: var(--vx-radius-sm) !important; padding: 0 10px !important; height: 36px; font-weight: 500 !important; }
#view-checkout .checkout-container #checkout-summary { border-bottom: 0 !important; }
.vx-co { padding-top: 16px; }
.vx-co-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; gap: 6px; }
.vx-co-steps li { flex: 1; font-size: 12px; color: var(--vx-text-2); }
.vx-co-steps li span { display: block; height: 4px; border-radius: 999px; background: var(--vx-border); margin-bottom: 6px; }
.vx-co-steps li.is-done span { background: var(--vx-green); }
.vx-co-steps li.is-current { color: var(--vx-text); font-weight: 600; }
.vx-co-trip { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 20px; }
.vx-co-trip img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.vx-co-trip__title { font-size: 14px; font-weight: 600; }
.vx-co-link { background: none; border: 0; padding: 0; font-family: var(--vx-font-body); font-size: 13px; font-weight: 500; color: var(--vx-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vx .vx-co-h { font-size: 16px !important; margin: 0 0 12px !important; font-family: var(--vx-font-title); font-weight: 600; }
.vx-co-saved { margin-bottom: 16px; }
.vx-co-label { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.vx-co-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.vx-co-avatar { width: 22px; height: 22px; border-radius: 999px; background: var(--vx-green); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.passenger-card-shell.vx-co-pax { padding: 0 !important; margin-bottom: 12px !important; background: var(--vx-surface) !important; border: 1px solid var(--vx-border) !important; border-radius: var(--vx-radius) !important; box-shadow: var(--vx-shadow) !important; }
.vx-co-pax .passenger-card-inner { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.vx-co-pax__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--vx-border); }
.vx-co-pax__title { font-family: var(--vx-font-title); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.vx-co-pax__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.vx .vx-co-lbl { font-family: var(--vx-font-body) !important; font-size: 14px !important; font-weight: 500 !important; color: var(--vx-text) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 8px 0 0 !important; }
.vx .vx-co-input { height: 40px !important; min-height: 40px !important; padding: 0 12px !important; border: 1px solid var(--vx-border) !important; border-radius: var(--vx-radius-sm) !important; background: var(--vx-surface) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important; font-family: var(--vx-font-body) !important; font-size: 16px !important; margin: 4px 0 0 !important; width: 100%; }
.vx-co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vx-co-cpfhint { font-size: 12px; font-weight: 600; display: block; min-height: 16px; margin-top: 4px; }
.vx-co-hint { background: var(--vx-warn-bg); color: var(--vx-warn); border-radius: var(--vx-radius-sm); padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.vx-co-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: #52525B; cursor: pointer; }
.vx-co-check input { width: 16px; height: 16px; accent-color: var(--vx-green); }
.vx-co-savecomp { margin-top: 10px; border-style: dashed; color: var(--vx-text-2); }
#checkout-bottom-bar.vx-co-bar { background: var(--vx-surface) !important; border-top: 1px solid var(--vx-border) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
.vx-co-bar__inner { max-width: 640px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vx-co-bar__inner .vx-btn { flex: 1; max-width: 260px; }
.vx-co-total { font-family: var(--vx-font-mono); font-size: 18px; font-weight: 500; color: var(--vx-text); }
.vx-co-payhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.vx-co-box { padding: 14px 16px; margin-bottom: 12px; }
.vx-co-box__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vx-co-box__title { font-size: 14px; font-weight: 600; display: flex; align-items: center; }
.vx-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.vx-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.vx-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--vx-border); cursor: pointer; transition: background .2s; }
.vx-switch span::before { content: ""; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform .2s; }
.vx-switch input:checked + span { background: var(--vx-green); }
.vx-switch input:checked + span::before { transform: translateX(20px); }
.vx-co-sum { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.vx-co-sum > div { display: flex; justify-content: space-between; color: var(--vx-text-2); }
.vx-co-sum > .is-disc { color: var(--vx-green-dark); }
.vx-co-sum > .is-total { color: var(--vx-text); font-weight: 600; font-size: 15px; padding-top: 10px; border-top: 1px solid var(--vx-border); }
.vx-co-brick { margin: 0; }
#view-checkout .checkout-container { padding: 0 !important; margin: 0 auto !important; max-width: 640px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
#view-checkout .checkout-container > p { font-family: var(--vx-font-body); font-size: 12px !important; color: var(--vx-text-3) !important; }
.vx .vx-co-total { font-family: var(--vx-font-mono) !important; font-weight: 500 !important; font-size: 18px !important; letter-spacing: 0 !important; }
.vx-co-sum { margin-bottom: 24px; }
/* Confirmação (#view-success): cabeçalho no padrão v2; o cartão de embarque é tratado na fase 4 */
#view-success { background: var(--vx-bg); }
#view-success #ticket-header-title { font-family: var(--vx-font-title) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; color: var(--vx-text) !important; }
#view-success #ticket-header-subtitle { font-family: var(--vx-font-body); color: var(--vx-text-2) !important; }
#view-success .btn-secondary { background: var(--vx-surface) !important; border: 1px solid var(--vx-border) !important; border-radius: var(--vx-radius-sm) !important; color: var(--vx-text) !important; font-family: var(--vx-font-body) !important; font-weight: 500 !important; box-shadow: none !important; }

/* ==========================================================================
   Fase 4 · Passagens (Passagens.dc.html), Passaporte, Perfil
   ========================================================================== */
.vx-page { max-width: 560px; margin: 0 auto; padding: 0 16px 96px; }
.vx-page-head { padding: 16px 0 16px; }
.vx-stack { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
#view-my-trips, #view-passport, #view-profile { background: var(--vx-bg); }
#my-trips-root { padding: 0 !important; }
.vx-icon-btn--lg { width: 44px; height: 44px; }
.vx-empty { padding: 24px 16px; border: 1px dashed #D4D4D8; border-radius: var(--vx-radius); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vx-empty__title { font-size: 14px; font-weight: 600; }
.vx-empty .vx-btn { margin-top: 8px; }
button.vx-row { width: 100%; background: transparent; border: 0; text-align: left; font-family: var(--vx-font-body); cursor: pointer; }
.vx-row__thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.vx-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vx-row__title { font-size: 14px; font-weight: 600; color: var(--vx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-row__chev { width: 16px; height: 16px; color: var(--vx-text-3); flex-shrink: 0; }
.trip-card-shell.vx-tk { padding: 0 !important; background: var(--vx-surface) !important; border: 1px solid var(--vx-border) !important; border-radius: var(--vx-radius) !important; box-shadow: var(--vx-shadow) !important; overflow: hidden; opacity: 1 !important; transform: none !important; }
.vx-tk__media { position: relative; height: 120px; background: var(--vx-muted-bg); cursor: pointer; }
.vx-tk__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
.vx-tk__badge { position: absolute; left: 12px; bottom: 12px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,0.92); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; color: var(--vx-text); }
.vx-tk__body { padding: 14px 16px; cursor: pointer; }
.vx-tk__title { font-family: var(--vx-font-title); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.vx-tk__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.vx-tk__val { font-size: 15px; font-weight: 600; }
.vx-tk__where { margin-top: 10px; font-size: 13px; color: #52525B; }
.vx-tk__cut { position: relative; height: 0; border-top: 2px dashed var(--vx-border); }
.vx-tk__cut span { position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 999px; background: var(--vx-bg); border: 1px solid var(--vx-border); }
.vx-tk__cut span:first-child { left: -11px; }
.vx-tk__cut span:last-child { right: -11px; }
.vx-tk__actions { padding: 14px 16px; display: flex; gap: 8px; }
.vx-tk__actions .vx-btn { height: 44px; }
body { background: var(--vx-bg); }
html { background: var(--vx-bg); } .container > .view .vx-page, .container .vx-page { padding-left: 0; padding-right: 0; }
/* Passaporte */
#view-passport { padding-bottom: 0 !important; }
.vx-passdoc { margin-top: 0; border-radius: 14px; background: var(--vx-navy); color: #fff; padding: 18px; box-shadow: 0 8px 24px rgba(0,76,109,0.25); position: relative; overflow: hidden; }
.vx-passdoc::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 999px; border: 28px solid rgba(255,255,255,0.05); }
.vx-passdoc__id { display: flex; align-items: center; gap: 12px; position: relative; }
.vx-passdoc__avatar { width: 52px; height: 52px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 2px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; object-fit: cover; flex-shrink: 0; }
.vx-passdoc__eyebrow { font-size: 11px; letter-spacing: 0.1em; color: rgba(255,255,255,0.7); }
.vx-passdoc__name { font-family: var(--vx-font-title); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.vx-passdoc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; position: relative; }
.vx-passdoc__lbl { font-size: 11px; color: rgba(255,255,255,0.7); }
.vx-passdoc__num { font-size: 20px; font-weight: 700; }
.vx-passdoc__mono { font-family: var(--vx-font-mono); font-size: 14px; font-weight: 500; margin-top: 4px; }
.vx-stamps.passport-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; margin-top: 14px; padding: 0 !important; }
.vx-stamp { background: var(--vx-surface); border: 1px solid var(--vx-border); border-radius: var(--vx-radius); padding: 14px 12px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; cursor: pointer; font-family: var(--vx-font-body); animation: none !important; opacity: 1 !important; }
.vx-stamp .passport-stamp-img { width: 112px; height: 112px; object-fit: contain; }
.vx-stamp__title { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--vx-text); }
.vx-stamp--next { border-style: dashed; border-color: #D4D4D8; background: transparent; justify-content: center; min-height: 180px; }
.vx-stamp__plus { width: 44px; height: 44px; border-radius: 999px; background: var(--vx-muted-bg); display: flex; align-items: center; justify-content: center; }
.vx-stamp__plus svg { width: 18px; height: 18px; }
.vx-ach { width: 40px; height: 40px; border-radius: 999px; background: var(--vx-green); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vx-ach svg { width: 18px; height: 18px; }
/* Perfil */
#view-me { background: var(--vx-bg); }
.vx-me-id { display: flex; align-items: center; gap: 14px; padding: 16px 0; }
.vx-me-avatar { width: 56px; height: 56px; border-radius: 999px; background: var(--vx-text); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; object-fit: cover; flex-shrink: 0; }
.vx-me-pts { padding: 16px; }
.vx-me-pts__top { display: flex; justify-content: space-between; gap: 12px; }
.vx-me-pts__num { font-family: var(--vx-font-title); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 2px 0; }
.vx-me-pts__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vx-divider); }
.vx-me-pts__stat { font-size: 18px; font-weight: 700; }
.vx-me-pts__actions { display: flex; gap: 8px; margin-top: 14px; }
.vx-me-pts__actions .vx-btn { flex: 1; }
.vx-me-ico { width: 36px; height: 36px; border-radius: var(--vx-radius-sm); background: var(--vx-muted-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--vx-text); }
.vx-me-ico svg { width: 17px; height: 17px; }
.vx-me-ico--green { background: var(--vx-green-bg, #DCFCE7); color: var(--vx-green-dark); }
.vx-me-label { font-size: 13px; font-weight: 600; color: var(--vx-text-2); margin: 24px 0 8px; }
.vx-me-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--vx-green); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.vx-me-foot { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vx button.vx-stamp--next, .vx .vx-stamp--next { background: transparent !important; color: var(--vx-text) !important; box-shadow: none !important; }
.vx-stamp--next .vx-stamp__plus { color: var(--vx-text); }
.vx-page .vx-section-head { padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 8px; }

/* ==========================================================================
   Fase 5 · Login e cadastro (Login*.dc.html, Cadastro.dc.html, Senha.dc.html)
   Estilos inline e trocas via JS continuam; aqui só o visual (por isso !important).
   ========================================================================== */
#view-login { font-family: var(--vx-font-body) !important; }
#view-login .auth-card-wrapper { background: var(--vx-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--vx-border) !important; border-radius: 16px !important; box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important; padding: 24px 16px !important; }
.vx-auth-logo { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 28px; }
#view-login .auth-card-wrapper > div:first-of-type { text-align: left !important; margin-bottom: 20px !important; }
#view-login #auth-title { font-family: var(--vx-font-title) !important; font-size: 26px !important; font-weight: 700 !important; letter-spacing: -0.03em !important; color: var(--vx-text) !important; }
#view-login #auth-subtitle { font-size: 14px !important; color: var(--vx-text-2) !important; line-height: 1.5 !important; }
#view-login .auth-tabs-segmented { background: var(--vx-muted-bg) !important; border: 0 !important; border-radius: 8px !important; padding: 4px !important; gap: 2px !important; margin-bottom: 16px !important; }
#view-login .auth-tab-btn { height: 32px; padding: 0 8px !important; border-radius: 6px !important; font-size: 14px !important; font-family: var(--vx-font-body) !important; }
#view-login .auth-tab-btn svg, #view-login .auth-tab-btn i { display: none !important; }
#view-login label { font-size: 14px !important; font-weight: 500 !important; color: var(--vx-text) !important; }
#view-login input[type="tel"], #view-login input[type="text"], #view-login input[type="email"], #view-login input[type="password"] { height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important; background: var(--vx-surface) !important; border: 1px solid var(--vx-border) !important; border-radius: 8px !important; font-size: 16px !important; font-weight: 400 !important; font-family: var(--vx-font-body) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important; }
#view-login input:focus { border-color: var(--vx-text) !important; box-shadow: 0 0 0 3px rgba(9,9,11,0.08) !important; }
#view-login #auth-magic-code { height: 56px !important; font-family: var(--vx-font-mono) !important; font-size: 24px !important; letter-spacing: 0.4em !important; font-weight: 500 !important; }
#view-login #btn-send-sms, #view-login #btn-verify-sms, #view-login #btn-complete-reg, #view-login #auth-submit-btn { height: 44px; padding: 0 16px !important; border-radius: 8px !important; box-shadow: none !important; font-size: 15px !important; font-weight: 500 !important; font-family: var(--vx-font-body) !important; background: var(--vx-green) !important; }
#view-login #btn-send-sms svg, #view-login #btn-send-sms i { display: none; }
#view-login button[onclick="handleGoogleLogin()"] { height: 44px; padding: 0 16px !important; border: 1px solid var(--vx-border) !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 500 !important; color: var(--vx-text) !important; font-family: var(--vx-font-body) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important; }
#view-login #forgot-password-link, #view-login #auth-switch-text span, #view-login #btn-resend-sms { color: var(--vx-text) !important; font-weight: 600 !important; text-decoration: underline; text-underline-offset: 3px; }
#view-login #auth-switch-text { font-size: 14px !important; color: var(--vx-text-2) !important; }
#view-login #phone-step-code > div:first-child, #view-login #phone-step-name > div:first-child { background: var(--vx-muted-bg) !important; border: 0 !important; border-radius: 8px !important; }
#view-login #phone-step-code > div:first-child span:first-child { color: var(--vx-text-2) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 12px !important; }
#view-login #phone-step-code > div:first-child button { color: var(--vx-text) !important; border-color: var(--vx-border) !important; }
#view-login #phone-step-name p:first-child { color: var(--vx-green-dark) !important; }
#view-login hr { border-top-color: var(--vx-border) !important; }
#view-login hr + span { text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; font-size: 12px !important; color: var(--vx-text-2) !important; }
.vx-auth-terms { margin: 20px 0 0; font-size: 12px; line-height: 1.5; color: var(--vx-text-2); text-align: center; }
.vx-auth-terms a { color: var(--vx-text); text-decoration: underline; text-underline-offset: 2px; }
#view-login .auth-card-wrapper > button[aria-label="Fechar"] { background: transparent !important; border: 0 !important; top: 22px !important; right: 12px !important; }
@media (max-width: 768px) {
  #view-login { padding: 0 !important; background: var(--vx-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; justify-content: flex-start !important; }
  #view-login .auth-card-wrapper { max-width: none !important; min-height: 100dvh; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: calc(env(safe-area-inset-top, 0px) + 24px) 16px 32px !important; margin: 0 !important; }
}
#view-login h2#auth-title { font-family: var(--vx-font-title) !important; }
#view-login.va-app-ui #auth-title, #view-success.va-app-ui #ticket-header-title { font-family: var(--vx-font-title) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; }
#view-login.va-app-ui #auth-title { font-size: 26px !important; }

/* ==========================================================================
   Fase 6 · Clube (ClubeAssinar.dc.html, Clube.dc.html, ClubeCartoes.dc.html)
   ========================================================================== */
#view-loyalty { background: var(--vx-bg); }
.vx-club-top { display: flex; align-items: center; gap: 12px; padding: 12px 0 4px; }
.vx-club-top__title { font-size: 15px; font-weight: 600; }
.vx-club-card { margin-top: 8px; }
.vx-club-card > div { max-width: 420px; margin: 0 auto; }
.vx-club-plan { margin-top: 12px; padding: 16px; }
.vx-club-plan__head { display: flex; justify-content: space-between; align-items: baseline; }
.vx-club-plan__name { font-family: var(--vx-font-title); font-size: 18px; font-weight: 600; }
.vx-club-plan__price { font-family: var(--vx-font-mono); font-size: 18px; font-weight: 500; }
.vx-club-feats { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; font-size: 14px; }
.vx-club-feats > span { display: flex; gap: 10px; align-items: flex-start; }
.vx-club-feats--card { padding: 16px; margin-top: 0; }
.vx-club-check, .vx-club-feats svg { width: 16px; height: 16px; color: var(--vx-green-dark); flex-shrink: 0; margin-top: 2px; }
.vx-club-cmp { overflow: hidden; font-size: 13px; }
.vx-club-cmp > div { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); }
.vx-club-cmp > div + div { border-top: 1px solid var(--vx-divider); }
.vx-club-cmp span { padding: 10px 8px; text-align: center; }
.vx-club-cmp span:first-child { text-align: left; padding-left: 14px; color: var(--vx-text-2); }
.vx-club-cmp > div:first-child span { font-weight: 600; }
.vx-club-cmp span.is-sel { background: #F0FDF4; font-weight: 600; }
.vx-club-foot { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.vx-club-nums { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 0; }
.vx-club-nums > div { padding: 0 14px; }
.vx-club-nums > div + div { border-left: 1px solid var(--vx-divider); }
.vx-club-nums__v { font-size: 18px; font-weight: 700; margin-top: 2px; }
.vx-club-hist { width: 100%; border-collapse: collapse; font-size: 14px; font-family: var(--vx-font-body); }
.vx-club-hist td { padding: 12px 14px !important; border: 0 !important; border-top: 1px solid var(--vx-divider) !important; background: transparent !important; }
.vx-club-hist tr:first-child td { border-top: 0 !important; }
.vx-club-hist td:last-child { font-family: var(--vx-font-mono); white-space: nowrap; }
.vx-club-hist td[colspan] { font-family: var(--vx-font-body) !important; text-align: center; color: var(--vx-text-2) !important; }

/* ==========================================================================
   Fase 7 · Promoter (ParceiroCatalogo/ParceiroPainel.dc.html) e Coordenador
   ========================================================================== */
#view-pdv, #view-partner-dashboard { background: var(--vx-bg); }
.vx-pr-id { padding: 16px; }
.vx-pr-id__row { display: flex; justify-content: space-between; gap: 12px; }
.vx-pr-id__code { font-family: var(--vx-font-mono); font-size: 20px; font-weight: 500; margin-top: 2px; }
.vx-pr-id__link { margin-top: 12px; padding: 10px 12px; border-radius: var(--vx-radius-sm); background: var(--vx-muted-bg); font-family: var(--vx-font-mono); font-size: 13px; color: var(--vx-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-pr-id__actions { display: flex; gap: 8px; margin-top: 12px; }
.vx-pr-id__actions .vx-btn { flex: 1; }
.vx-pr-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 769px) { .vx-pr-grid { grid-template-columns: 1fr 1fr; } .vx-pr.vx-page { max-width: 900px; } }
.vx-pr-ev { overflow: hidden; }
.vx-pr-ev__main { display: flex; gap: 12px; padding: 12px; cursor: pointer; }
.vx-pr-ev__main img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.vx-pr-ev__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vx-pr-ev__title { font-size: 15px; font-weight: 600; }
.vx-pr-ev__price { font-size: 13px; color: #52525B; margin-top: 2px; }
.vx-pr-ev__price strong { color: var(--vx-text); font-weight: 600; }
.vx-pr-ev__actions { display: flex; gap: 8px; padding: 0 12px 12px; }
.vx-pr-ev__actions .vx-btn { flex: 1; text-decoration: none; }
.vx-pr-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vx-pr-kpis > .vx-card { padding: 14px; }
.vx-pr-kpi { font-size: 18px; font-weight: 700; margin-top: 4px; }
.vx-pr-kpi--sm { font-size: 14px; font-weight: 600; line-height: 1.3; }
.vx-pr-chart { margin-top: 16px; padding: 16px; }
.vx-pr-bars { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; }
.vx-pr-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vx-pr-bar__track { width: 100%; height: 80px; border-radius: 6px; background: var(--vx-muted-bg); display: flex; align-items: flex-end; overflow: hidden; }
.vx-pr-bar__track div { width: 100%; background: var(--vx-green); border-radius: 6px 6px 0 0; }
/* Meu painel: desafios, visitas e Pix (ParceiroPainel.dc.html · aprovado 08/10/2026) */
.vx-pr-sec { margin-top: 20px; }
.vx-pr .vx-section-head.vx-pr-sec { padding: 0; margin-bottom: 8px; align-items: baseline; }
.vx-pr-chs { display: flex; flex-direction: column; gap: 10px; }
.vx-pr-ch { padding: 16px; }
.vx-pr-ch__head { display: flex; align-items: center; gap: 10px; }
.vx-pr-ch__title { flex: 1; min-width: 0; }
.vx-pr-ch__title > div:first-child { font-size: 15px; font-weight: 600; }
.vx-pr-ch__prize { text-align: right; flex-shrink: 0; }
.vx-pr-ch__prize strong { font-size: 16px; font-weight: 700; }
.vx-pr-ch__count { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-size: 13px; }
.vx-pr-ch__count strong { font-weight: 700; }
.vx-pr-ch__bar { margin-top: 6px; height: 8px; border-radius: 999px; background: var(--vx-muted-bg); overflow: hidden; }
.vx-pr-ch__bar > div { height: 100%; border-radius: 999px; background: var(--vx-green); transition: width .6s cubic-bezier(.32,.72,0,1); }
.vx-pr-ch__levels { margin-top: 12px; border: 1px solid var(--vx-divider); border-radius: var(--vx-radius-sm); overflow: hidden; }
.vx-pr-ch__level { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; }
.vx-pr-ch__level + .vx-pr-ch__level { border-top: 1px solid var(--vx-divider); }
.vx-pr-ch__level svg, .vx-pr-ch__level i { width: 16px; height: 16px; color: #A1A1AA; flex-shrink: 0; }
.vx-pr-ch__level.is-hit svg, .vx-pr-ch__level.is-hit i { color: #16A34A; }
.vx-pr-ch__lvl-name { flex: 1; }
.vx-pr-ch__level strong { font-weight: 600; }
.vx-pr-ch__ok { color: #166534; }
.vx-pr-pix { margin-top: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.vx-pr-pix__main { flex: 1; min-width: 0; }
.vx-pr-pix__key { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-pr-pix__lock { padding: 10px 12px; border-radius: var(--vx-radius-sm); background: #FEF3C7; color: #92400E; }
@media (prefers-reduced-motion: reduce) { .vx-pr-ch__bar > div { transition: none; } }
/* Coordenador · lista de passageiros (CoordLista.dc.html) */
.vx-co-paxlist { overflow: hidden; }
.vx-co-paxrow { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-family: var(--vx-font-body); }
.vx-co-paxrow + .vx-co-paxrow { border-top: 1px solid var(--vx-divider); }
.vx-co-paxrow__main { flex: 1; min-width: 0; }
.vx-co-paxrow__name { font-size: 15px; font-weight: 600; color: var(--vx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-co-paxrow.is-boarded .vx-co-paxrow__name { color: var(--vx-text-2); }
.vx-co-paxrow__check { position: relative; width: 28px; height: 28px; flex-shrink: 0; cursor: pointer; }
.vx-co-paxrow__check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.vx-co-paxrow__check span { width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid #D4D4D8; background: var(--vx-surface); display: flex; align-items: center; justify-content: center; color: transparent; pointer-events: none; }
.vx-co-paxrow__check span svg { width: 16px; height: 16px; }
.vx-co-paxrow__check input:checked + span { background: var(--vx-green); border-color: var(--vx-green); color: #fff; }
.vx-co-wa { color: #128C7E; }
/* Banner verde: texto não passa por cima da imagem e fica sempre branco */
.vx-banner--green .vx-banner__text { padding-right: 118px; }
.vx .vx-banner--green .vx-banner__title, .vx-banner--green h3.vx-banner__title { color: #FFFFFF !important; }

/* ==========================================================================
   Buscar (Buscar.dc.html · aprovado em 03/10/2026)
   ========================================================================== */
#view-search { background: var(--vx-bg); padding-bottom: 120px; min-height: 100vh; }
.vx-search__field { position: relative; }
#view-search .vx-search__field input#dedicated-search-input { border: 0 !important; box-shadow: none !important; background: transparent !important; height: 42px !important; padding: 0 !important; font-size: 16px !important; font-family: var(--vx-font-body) !important; }
#view-search .vx-search__field:focus-within { border-color: var(--vx-text); box-shadow: 0 0 0 3px rgba(9,9,11,0.08); }
.vx-search__clear { display: none; width: 22px; height: 22px; border-radius: 999px; border: 0; background: var(--vx-muted-bg); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; color: var(--vx-text-2); }
.vx-search__clear svg { width: 12px !important; height: 12px !important; }
#view-search .vx-search__sec { padding: 24px 0 10px !important; margin: 0 !important; }
.vx-search__recent { padding: 0 8px 0 0; }
.vx-search__recent-q { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: none; border: 0; text-align: left; font-family: var(--vx-font-body); font-size: 14px; color: var(--vx-text); cursor: pointer; min-width: 0; }
.vx-search__recent-q svg { width: 16px; height: 16px; color: var(--vx-text-3); flex-shrink: 0; }
.vx-search__recent-q span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-search__x { width: 32px; height: 32px; border: 0; background: none; color: var(--vx-text-3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vx-search__x svg { width: 14px; height: 14px; }
.vx-search__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.vx-search__chips::-webkit-scrollbar { display: none; }
.vx-search__chips .vx-chip { flex-shrink: 0; height: 32px; padding: 0 12px; font-size: 13px; background: var(--vx-surface); cursor: pointer; font-family: var(--vx-font-body); }
.vx-search__when { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vx-search__when .vx-card { text-align: left; padding: 12px 14px; cursor: pointer; font-family: var(--vx-font-body); display: flex; flex-direction: column; gap: 2px; }
.vx-search__when strong { font-size: 14px; font-weight: 600; color: var(--vx-text); }
.vx-search__rank { width: 18px; text-align: center; font-size: 14px; font-weight: 600; color: var(--vx-text-3); flex-shrink: 0; }
.vx-search__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 18px 0 12px; }
.vx-search__datechip { display: inline-flex; align-items: center; gap: 6px; height: 30px; background: var(--vx-text) !important; color: #fff !important; border-color: var(--vx-text) !important; cursor: pointer; font-family: var(--vx-font-body); }
.vx-search__datechip svg { width: 12px; height: 12px; }
@media (min-width: 769px) { .vx-search.vx-page { max-width: 760px; padding-top: 24px; } }
#dedicated-search-input::-webkit-search-cancel-button, #dedicated-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* ==========================================================================
   Destaque do mês (destaque-alternativas.html · opções 2 e 10 aprovadas em 03/10/2026)
   ========================================================================== */
.vx-feat { margin-top: 20px; }
#view-home .vx-feat__head, .vx-feat__head { padding: 0 !important; margin: 0 0 10px !important; }
.vx-feat-side { display: flex; overflow: hidden; cursor: pointer; }
.vx-feat-side__img { width: 136px; aspect-ratio: 3 / 4; object-fit: cover; flex-shrink: 0; display: block; background: var(--vx-muted-bg); }
.vx-feat-side__body { flex: 1; min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.vx .vx-feat-side__title { margin: 0; font-family: var(--vx-font-title) !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.02em; line-height: 1.2; color: var(--vx-text); }
.vx-feat-side__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.vx-feat-side__price { font-family: var(--vx-font-mono); font-size: 18px; font-weight: 500; color: var(--vx-text); }
.vx-feat-green { position: relative; height: 250px; border-radius: var(--vx-radius); background: var(--vx-green); color: #fff; overflow: hidden; cursor: pointer; box-shadow: var(--vx-shadow); }
.vx-feat-green__text { position: absolute; left: 16px; top: 16px; bottom: 16px; right: 150px; display: flex; flex-direction: column; }
.vx-feat-green__sub { font-size: 12px; color: rgba(255,255,255,0.9); }
.vx .vx-feat-green__title { margin: 4px 0 0; font-family: var(--vx-font-title) !important; font-size: 21px !important; font-weight: 700 !important; letter-spacing: -0.02em; line-height: 1.15; color: #fff !important; }
.vx-feat-green__meta { margin-top: 6px; font-size: 13px; color: rgba(255,255,255,0.92); }
.vx .vx-feat-green__cta { margin-top: auto; align-self: flex-start; background: #fff; border-color: #fff; color: var(--vx-text); }
.vx-feat-green__img { position: absolute; right: 14px; top: 22px; width: 124px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; transform: rotate(6deg); box-shadow: 0 10px 24px rgba(0,0,0,0.28); }
@media (min-width: 769px) {
  #view-home .vx-feat-side__img { width: 200px; }
  #view-home .vx-feat-side__body { padding: 20px; }
  #view-home .vx-feat-side__title { font-size: 22px !important; }
  #view-home .vx-feat-green { height: 300px; }
  #view-home .vx-feat-green__text { left: 28px; top: 28px; bottom: 28px; right: 230px; }
  #view-home .vx-feat-green__title { font-size: 28px !important; }
  #view-home .vx-feat-green__img { width: 170px; right: 40px; top: 30px; }
}

/* Cabeçalho da home (03/10/2026): logo à esquerda, sino à direita, saudação */
.vx-home-logo { display: flex; align-items: center; gap: 7px; }
.vx-home-bell { position: relative; width: 40px; height: 40px; }
.vx-home-bell svg { width: 18px; height: 18px; }
.vx-home-bell__dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 999px; background: var(--vx-green); border: 2px solid #fff; }
.vx-home-greet { font-size: 14px; color: var(--vx-text-2); margin-bottom: 2px; }

/* ==========================================================================
   Menu inferior (Passagens.dc.html / ShadcnCards.dc.html): barra branca colada
   na base, linha fina em cima, ativo grafite #1D1D1F, inativo #A1A1AA
   ========================================================================== */
.bottom-nav.va-app-ui, .bottom-nav {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-top: 1px solid var(--vx-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  align-items: flex-start !important;
}
.va-app-ui .nav-item, .bottom-nav .nav-item {
  height: auto !important;
  min-width: 60px;
  gap: 4px !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.va-app-ui .nav-item .nav-label, .bottom-nav .nav-label {
  font-family: var(--vx-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.va-app-ui .nav-item.active .nav-label, .bottom-nav .nav-item.active .nav-label { font-weight: 600 !important; }
.va-app-ui .nav-item :is(i, svg), .bottom-nav .nav-item :is(i, svg) { stroke-width: 2px !important; }
@media (min-width: 769px) { .bottom-nav.va-app-ui, .bottom-nav { display: none !important; } }

/* Rodapé do card de evento · P8.4 (aprovado 03/10/2026) */
.package-card.vx-ev .vx-ev__foot { align-items: flex-end; }
.package-card.vx-ev .vx-ev__foot > div { display: flex; flex-direction: column; min-width: 0; }
.package-card.vx-ev .vx-ev__foot .vx-caption { font-size: 11px; line-height: 1.3; }
.vx .vx-ev__price, .package-card.vx-ev .vx-ev__price { font-family: var(--vx-font-body) !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.01em; line-height: 1.2; color: var(--vx-text); white-space: nowrap; }
.package-card.vx-ev .vx-ev__price .currency, .package-card.vx-ev .vx-ev__price .amount { font: inherit !important; }
.package-card.vx-ev .vx-ev__pts { flex-shrink: 0; height: 24px; padding: 0 8px; margin: 0 0 1px; border-radius: 999px; background: #09090B; color: #FFFFFF; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.package-card.vx-ev .vx-ev__pts svg { width: 12px; height: 12px; color: #FFFFFF; stroke: #FFFFFF; }
/* Mesmo preço do card (P8.4) no Destaque do mês */
.vx-feat-side__price, .vx-feat-green__meta .vx-mono { font-family: var(--vx-font-body) !important; font-weight: 700 !important; letter-spacing: -0.01em; }
.vx-feat-side__price { font-size: 18px !important; }
.vx-feat-side__price .currency, .vx-feat-side__price .amount, .vx-feat-green__meta .vx-mono .currency, .vx-feat-green__meta .vx-mono .amount { font: inherit !important; }

/* Contorno do card (protótipo): vence a regra antiga "#view-home.va-app-ui .package-card"
   do app-nova.css, que zerava fundo, borda e sombra só na home */
#view-home.va-app-ui .package-card.vx-ev, #view-home .package-card.vx-ev, .package-card.vx-ev {
  background: var(--vx-surface) !important;
  border: 1px solid var(--vx-border) !important;
  border-radius: var(--vx-radius) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
#view-home.va-app-ui .package-card.vx-ev:hover { transform: none !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; }

/* Login por SMS · etapas código e nome (LoginCodigo / LoginNome.dc.html) */
.vx-auth-back { display: none; width: 36px; height: 36px; margin-bottom: 20px; }
.vx-auth-back svg { width: 18px; height: 18px; }
#view-login:is([data-vx-step="code"], [data-vx-step="name"]) :is(.vx-auth-logo, .auth-tabs-segmented, .vx-auth-terms, button[onclick="handleGoogleLogin()"]) { display: none !important; }
#view-login:is([data-vx-step="code"], [data-vx-step="name"]) .auth-card-wrapper > div:has(> hr) { display: none !important; }
#view-login[data-vx-step="code"] #phone-step-code > div:first-child,
#view-login[data-vx-step="code"] #phone-step-code > label,
#view-login[data-vx-step="name"] #phone-step-name > div:first-child { display: none !important; }
#view-login #auth-subtitle .vx-auth-link { color: var(--vx-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.vx-otp-wrap { position: relative; margin-bottom: 20px; cursor: text; }
.vx-otp { display: flex; justify-content: space-between; gap: 8px; }
.vx-otp span { flex: 1; max-width: 52px; height: 56px; border: 1px solid var(--vx-border); border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--vx-font-mono); font-size: 22px; font-weight: 500; color: var(--vx-text); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.vx-otp span.is-active { border: 2px solid var(--vx-green); box-shadow: 0 0 0 3px rgba(24,211,77,.15); }
#view-login .vx-otp-wrap #auth-magic-code { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: transparent !important; caret-color: transparent; font-size: 16px !important; letter-spacing: 0 !important; }
#view-login #phone-step-code > div:last-child { justify-content: center !important; margin-top: 4px; }
#view-login #sms-resend-countdown { font-size: 14px !important; color: var(--vx-text-2) !important; }
#view-login #btn-resend-sms { font-size: 14px !important; }
.vx-auth-hint { margin: -12px 0 20px; font-size: 12px; color: var(--vx-text-2); }

/* ==========================================================================
   Avisos rápidos · A8 (avisos-alternativas.html, aprovado 03/10/2026)
   ========================================================================== */
.vx-toast {
  position: fixed; z-index: 100000; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px);
  transform: translateX(-50%); width: calc(100% - 32px); max-width: 420px;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: #FFFFFF; border: 1px solid var(--vx-border); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); font-family: var(--vx-font-body); color: var(--vx-text);
  cursor: pointer; animation: vxToastIn .32s cubic-bezier(.16,1,.3,1);
}
.vx-toast.is-leaving { animation: vxToastOut .25s ease forwards; }
.vx-toast__icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.vx-toast__icon svg { width: 18px; height: 18px; }
.vx-toast__text { display: flex; flex-direction: column; min-width: 0; }
.vx-toast__title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.vx-toast__desc { font-size: 12px; color: var(--vx-text-2); margin-top: 1px; line-height: 1.35; }
@keyframes vxToastIn { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes vxToastOut { to { opacity: 0; transform: translate(-50%, -16px); } }

/* ==========================================================================
   Interesses do cliente (Interesses.dc.html · modelo C1, aprovado 03/10/2026)
   ========================================================================== */
.vx-int { position: fixed; inset: 0; z-index: 99990; background: var(--vx-bg); display: flex; flex-direction: column; font-family: var(--vx-font-body); }
.vx-int__top { display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 0; min-height: 50px; }
.vx-int__skip { background: none; border: 0; font: 500 14px var(--vx-font-body); color: var(--vx-text-2); cursor: pointer; padding: 8px 0; }
.vx-int__body { flex: 1; overflow-y: auto; padding: 18px 16px 24px; max-width: 560px; width: 100%; margin: 0 auto; }
.vx-int__group { margin-top: 22px; }
.vx-int__label { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--vx-text); }
.vx-int__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-int__chip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--vx-border); font: 500 14px var(--vx-font-body); color: var(--vx-text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vx-int__chip svg { width: 16px; height: 16px; color: var(--vx-text-2); }
.vx-int__chip.is-on { border: 2px solid var(--vx-green); box-shadow: 0 0 0 3px rgba(24,211,77,.15); font-weight: 600; padding: 0 11px; }
.vx-int__chip.is-on svg { color: var(--vx-text); }
.vx-int__ck { width: 16px; height: 16px; border-radius: 999px; background: var(--vx-green); display: inline-flex; align-items: center; justify-content: center; }
.vx-int__ck svg { width: 10px !important; height: 10px !important; color: #fff !important; stroke-width: 3; }
.vx-int__alerts { margin-top: 24px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vx-int__foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--vx-border); }
.vx-int__foot > * { max-width: 528px; margin-left: auto; margin-right: auto; }
.vx-pkg-int__hint { font-size: 12px; color: #71717A; margin: 4px 0 0; }

/* Passagens · aba Anteriores (PassagensAnteriores.dc.html) */
.vx-past-sum { width: 100%; margin-top: 16px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--vx-navy); border: 0; border-radius: var(--vx-radius); color: #fff; font-family: var(--vx-font-body); cursor: pointer; }
.vx-past-sum strong { display: block; font-size: 15px; font-weight: 600; }
.vx-past-sum span span, .vx-past-sum > span:nth-child(2) > span { display: block; font-size: 12px; color: rgba(255,255,255,.75); }
.vx-past-sum__ic { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vx-past-sum svg { width: 18px; height: 18px; color: #fff; }
.vx-rate { margin-top: 16px; padding: 16px; }
.vx-rate__stars { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.vx-rate__stars button { background: none; border: 0; padding: 2px; cursor: pointer; }
.vx-rate__stars svg { width: 28px; height: 28px; color: #D4D4D8; }
.vx-rate__stars:hover button svg { color: #F59E0B; fill: #F59E0B; }
.vx-rate__stars button:hover ~ button svg { color: #D4D4D8; fill: none; }
.vx-past-year { padding: 24px 0 8px; font-size: 13px; font-weight: 600; color: var(--vx-text-2); }
.vx-past__thumb { width: 52px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.vx-past__thumb.is-off { filter: grayscale(1); opacity: .7; }
.vx-past__st { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--vx-text-2); }
.vx-past__st.is-ok { color: #166534; }
.vx-past__st svg { width: 13px; height: 13px; color: #16A34A; }
.vx-past-repeat { margin-top: 24px; padding: 16px; border: 1px dashed #D4D4D8; border-radius: var(--vx-radius); display: flex; align-items: center; gap: 12px; }
.vx-past-repeat__ic { width: 40px; height: 40px; border-radius: 10px; background: var(--vx-muted-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vx-past-repeat__ic svg { width: 18px; height: 18px; }
.vx-list > .vx-past.trip-card-shell, .vx-past.trip-card-shell { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; margin: 0 !important; padding: 12px 16px !important; width: 100%; transform: none !important; opacity: 1 !important; }
.vx-list > .vx-past + .vx-past { border-top: 1px solid var(--vx-divider) !important; }
.vx-past-year { padding-top: 16px; }
#my-trips-list .vx-past-sum, #my-trips-list .vx-rate { margin-top: 0; }

/* ==========================================================================
   Animações (animacoes-alternativas.html, aprovadas 06/10/2026): 1C, 5, 8, 9, 11
   ========================================================================== */
/* 1C · troca de tela: a tela nova sobe 14px enquanto esmaece. "backwards" para não deixar
   transform na tela depois (senão quebraria elementos position: fixed dentro dela). */
@keyframes vxViewIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.view.active:not(#view-admin):not(#view-embarque):not(#view-transport) { animation: vxViewIn .26s cubic-bezier(.2,.8,.2,1) backwards; }

/* 5 · esqueleto da home + cards entrando esmaecendo + fotos aparecendo ao carregar */
.vx-skel { padding-top: 16px; }
.vx-skel .va-shimmer { border-radius: 6px; }
.vx-skel__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
@media (min-width: 769px) { .vx-skel__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vx-skel-card { background: var(--vx-surface); border: 1px solid var(--vx-border); border-radius: var(--vx-radius); overflow: hidden; }
.vx-skel-card__img { aspect-ratio: 4 / 5; border-radius: 0 !important; }
.vx-skel-card__body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
@keyframes vxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.vx-reveal > * { animation: vxFadeIn .4s cubic-bezier(.2,.8,.2,1) backwards; }
.vx-ev__media img.vx-img-fade { opacity: 0; transition: opacity .35s ease; }
.vx-ev__media img.vx-img-fade.is-in { opacity: 1; }

/* 8 · aviso desce de fora da tela e sobe sumindo */
.vx-toast { animation: vxToastIn .42s cubic-bezier(.2,.8,.2,1); }
.vx-toast.is-leaving { animation: vxToastOut .3s cubic-bezier(.4,0,1,1) forwards; }
@keyframes vxToastIn { from { opacity: 0; transform: translate(-50%, -140%); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes vxToastOut { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -140%); } }

/* 9 · selo carimbado: cai girando como carimbo e o passaporte dá uma tremidinha */
@keyframes vxStampDrop {
  0% { opacity: 0; transform: scale(2.2) rotate(calc(var(--rot, 0deg) - 18deg)); }
  60% { opacity: 1; transform: scale(.92) rotate(calc(var(--rot, 0deg) + 4deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); }
}
.passport-stamp-img.vx-stamp-new { animation: vxStampDrop .52s cubic-bezier(.2,.9,.3,1.2) backwards; }
@keyframes vxShake { 0%, 100% { transform: none; } 30% { transform: translateY(2px); } 60% { transform: translateY(-1px); } }
.vx-passdoc.vx-shake { animation: vxShake .26s ease; }

/* 11 · pontos contando: "+N pts" flutua e some */
.vx-count-plus { position: absolute; left: 100%; top: -4px; margin-left: 8px; white-space: nowrap; font: 600 12px var(--vx-font-body); color: #fff; background: var(--vx-text); border-radius: 999px; padding: 2px 8px; pointer-events: none; animation: vxPlusFly .9s cubic-bezier(.2,.8,.2,1) .2s both; }
@keyframes vxPlusFly { 0% { opacity: 0; transform: translateY(8px); } 25% { opacity: 1; transform: none; } 75% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-20px); } }

/* Quem pediu "reduzir movimento" no celular vê tudo sem animação */
@media (prefers-reduced-motion: reduce) {
  .view.active, .vx-reveal > *, .vx-toast, .vx-toast.is-leaving, .passport-stamp-img.vx-stamp-new, .vx-passdoc.vx-shake, .vx-count-plus { animation: none !important; }
  .vx-ev__media img.vx-img-fade { opacity: 1; transition: none; }
}

/* Card de evento sempre em 4:5: a foto fica por cima da área e não estica a altura (09/10/2026) */
.package-card.vx-ev .vx-ev__media { aspect-ratio: 4 / 5; height: auto !important; overflow: hidden; }
.package-card.vx-ev .vx-ev__media > img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; }