/* ============================================================
   BYD EXPERIENCE LATAM - MASTER FUNNEL STYLES
   Optimized 100% for Mobile (Mexico & Argentina)
   ============================================================ */

:root {
  /* ==========================================================================
     REGULAGEM MANUAL DO CHECKOUT (DIGISTORE24)
     ========================================================================== */
  /* 1. CORTE DO TOPO: sobe o checkout para cortar o que você quiser do topo.
     - 0px: mostra tudo a partir do topo (sem cortes e sem espaços vazios)
     - 180px, 220px, 320px...: sobe e corta o topo */
  --corte-topo-checkout: 0px;

  /* 2. LIMITE DE ALTURA / CORTE DE BAIXO (elimina o espaço branco embaixo):
     - none: altura ajusta automaticamente ao conteúdo real sem sobrar branco
     - ou digite em pixels se quiser travar manualmente, ex: 480px, 500px, 520px */
  --altura-max-checkout: none;

  --ink: #252728;
  --ink-2: #515253;
  --gray: #7c7d7e;
  --line: #dcdddf;
  --bg: #f7f7f7;
  --stage: #c4c4c4;
  --white: #ffffff;
  --red: #d70c19;
  --red-dark: #b30a15;
  --gold: #f0c64a;
  --gold-dark: #b98a2a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Montserrat', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* ================= HEADER ================= */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.top-in {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 18px;
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.top-in .back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 8px 0;
  transition: color 0.2s;
  visibility: hidden;
}

.top-in .back.show {
  visibility: visible;
}

.top-in .back:hover {
  color: var(--ink);
}

.top-in .logo {
  justify-self: center;
  display: flex;
  align-items: center;
}

.top-in .logo img {
  height: 18px;
  width: auto;
}

.top-in .stepinfo,
.top-in .count {
  justify-self: end;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  text-align: right;
}

.top-in .secure {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #137a3b;
  white-space: nowrap;
}

.top-in .secure svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

@media (max-width: 540px) {
  .top-in .secure span {
    display: none;
  }
}

.prog {
  height: 3px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.prog i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--red);
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ================= STEP CONTAINER ================= */
.app-viewport {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 18px 16px;
  min-height: auto;
}

@media (max-width: 640px) {
  body[data-step="7"] .app-viewport {
    padding-bottom: 84px;
  }
}

.funnel-step {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

body[data-step="1"] .funnel-step[data-step="2"],
body[data-step="2"] .funnel-step[data-step="2"],
body[data-step="3"] .funnel-step[data-step="3"],
body[data-step="4"] .funnel-step[data-step="4"],
body[data-step="5"] .funnel-step[data-step="5"],
body[data-step="6"] .funnel-step[data-step="6"],
body[data-step="7"] .funnel-step[data-step="7"],
body[data-step="8"] .funnel-step[data-step="8"],
body[data-step="9"] .funnel-step[data-step="9"],
.funnel-step.active {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Pre-render Step 5 invisibly with real viewport width during Step 4 so VTurb HLS buffers in HD */
body[data-step="4"] .funnel-step[data-step="5"] {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 760px;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  z-index: -99;
  overflow: hidden;
}

.funnel-step.active {
  display: block;
  opacity: 1;
  transform: none;
  animation: stepFadeIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes stepFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Headings & Eyebrows */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.eyebrow::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--red);
}

h1.q {
  font-weight: 300;
  font-size: clamp(26px, 5.5vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 8px;
}

h1.q strong {
  font-weight: 800;
}

.hint {
  color: var(--gray);
  font-size: 14px;
  margin-top: 8px;
  line-height: 1.4;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background-color 0.2s;
  box-shadow: 0 8px 22px rgba(215, 12, 25, 0.32);
}

.btn-red {
  background: var(--red);
  color: #fff;
}

.btn-red:hover {
  background: var(--red-dark);
}

.btn:active {
  transform: scale(0.98);
}

/* ================= SCREEN 1: VALE DE REGALO ================= */
.vale-container {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(12, 13, 15, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 14px 8px;
}

body:not([data-step="1"]) #valeModal,
.vale-container[hidden],
.vale-container.gone {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.vale-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(155, 9, 18, 0.38), transparent 65%),
              radial-gradient(circle at 50% 85%, rgba(0, 0, 0, 0.55), transparent 70%);
  pointer-events: none;
}

.vwrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  padding: 20px 6px;
  text-align: center;
  color: #fff;
}

.vkick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.vkick i {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--gold);
}

.vtitle {
  font-size: clamp(30px, 7vw, 38px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 10px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.vtitle strong {
  font-weight: 800;
  background: linear-gradient(180deg, #fff3cf 0%, #f0cf72 50%, #b98a2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gscene {
  position: relative;
  margin: 24px auto 0;
  width: 100%;
  max-width: 400px;
  perspective: 1100px;
}

.gcard {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586;
  transform-style: preserve-3d;
  animation: gin 1s 0.15s cubic-bezier(0.2, 0.85, 0.25, 1.05) both,
             gfloat 5s 1.2s ease-in-out infinite;
  cursor: pointer;
}

@keyframes gin {
  from {
    opacity: 0;
    transform: translateY(60px) rotateX(68deg) rotateZ(-6deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: rotateX(8deg) rotateY(-10deg) rotateZ(-2deg);
  }
}

@keyframes gfloat {
  0%, 100% {
    transform: rotateX(8deg) rotateY(-10deg) rotateZ(-2deg) translateY(0);
  }
  50% {
    transform: rotateX(4deg) rotateY(8deg) rotateZ(1deg) translateY(-8px);
  }
}

.gface,
.gback {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.gback {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, #fff3cf 0%, #e9c46a 30%, #b98a2a 55%, #f0d58c 78%, #a8781e 100%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
}

.gback .glogo.big {
  position: static;
  width: 120px;
  height: 26px;
  background: #7a050c;
  -webkit-mask: url('logo-byd-branco.svg') center / contain no-repeat;
  mask: url('logo-byd-branco.svg') center / contain no-repeat;
}

.gback-t {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #7a050c;
}

.gface {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(255, 90, 100, 0.35), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(0, 0, 0, 0.55), transparent 60%),
    linear-gradient(150deg, #9b0912 0%, #c40a16 38%, #7a050c 72%, #2a0205 100%);
  box-shadow:
    0 0 0 1px rgba(233, 196, 106, 0.55) inset,
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 8px 18px rgba(0, 0, 0, 0.35);
}

.gface::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 7px);
}

.gface::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 12px;
  border: 1px solid rgba(233, 196, 106, 0.35);
  pointer-events: none;
}

.glogo {
  position: absolute;
  left: 22px;
  top: 20px;
  width: 86px;
  height: 19px;
  background: linear-gradient(180deg, #fff3cf 0%, #e9c46a 45%, #a8781e 100%);
  -webkit-mask: url('logo-byd-branco.svg') left center / contain no-repeat;
  mask: url('logo-byd-branco.svg') left center / contain no-repeat;
}

.gtype {
  position: absolute;
  right: 22px;
  top: 22px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #e9c46a;
}

.gchip {
  position: absolute;
  left: 22px;
  top: 52px;
  width: 38px;
  height: 29px;
  border-radius: 5px;
  background: linear-gradient(135deg, #fff2c2 0%, #e2b450 40%, #a8781e 70%, #f0d58c 100%);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 0, 0.35);
}

.gchip::before {
  content: '';
  position: absolute;
  inset: 6px 9px;
  border: 1px solid rgba(90, 60, 0, 0.35);
  border-radius: 3px;
}

.gwm {
  position: absolute;
  right: -14%;
  top: 34%;
  width: 86%;
  height: 30%;
  opacity: 0.16;
  transform: rotate(-8deg);
  background: linear-gradient(180deg, #fff3cf, #e9c46a 50%, #a8781e);
  -webkit-mask: url('logo-byd-branco.svg') center / contain no-repeat;
  mask: url('logo-byd-branco.svg') center / contain no-repeat;
}

.gval {
  position: absolute;
  left: 24px;
  bottom: 22px;
  text-align: left;
  line-height: 1;
}

.gval small {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.gval b {
  display: block;
  margin-top: 7px;
  font-size: 43px;
  filter: drop-shadow(0 2px 0 rgba(60, 2, 6, 0.55));
  font-weight: 900;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fff6d8 0%, #f2d074 45%, #c1902c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gval em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #e9c46a;
}

.gshine {
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 40%;
  left: -60%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 236, 190, 0.32), rgba(255, 255, 255, 0));
  animation: gsh 3.6s 1.3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes gsh {
  0% { left: -60%; }
  45%, 100% { left: 130%; }
}

.gfloor {
  display: block;
  margin: 18px auto 0;
  width: 70%;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 70%);
  animation: gfl 5s 1.2s ease-in-out infinite;
}

@keyframes gfl {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(0.85); opacity: 0.35; }
}

.vsub {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.vbtn {
  position: relative;
  display: block;
  width: 100%;
  max-width: 380px;
  height: 60px;
  margin: 22px auto 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2b1d00;
  background: linear-gradient(180deg, #fff3cf 0%, #f0cf72 40%, #d6a63a 75%, #b98a2a 100%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.8),
              0 0 0 1px rgba(255, 236, 190, 0.5);
  transition: transform 0.2s;
}

/* Light sweep across button */
.vbtn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  left: -40%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  animation: gsh 2.8s 1.6s ease-in-out infinite;
}

.vbtn:active {
  transform: scale(0.98);
}

.vfine {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Opening animation when clicking "Elegir mi BYD" */
.vale-container.opening .gcard {
  animation: gopen 0.75s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

@keyframes gopen {
  0% { transform: rotateX(8deg) rotateY(-10deg) rotateZ(-2deg); }
  55% { transform: rotateY(180deg) scale(1.12); }
  100% { transform: rotateY(360deg) scale(1.45); opacity: 0; }
}

.vale-container.opening .vkick,
.vale-container.opening .vtitle,
.vale-container.opening .vsub,
.vale-container.opening .vbtn,
.vale-container.opening .vfine,
.vale-container.opening .gfloor {
  opacity: 0 !important;
  transition: opacity 0.25s;
  animation: none;
}

.vale-container.opening {
  pointer-events: none;
  animation: valeBgFade 0.75s 0.3s ease-out forwards;
}

@keyframes valeBgFade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ================= SCREEN 2: SELEÇÃO DE CARROS ================= */

/* Dark Hero Banner (matching reference print) */
.intro-hero {
  position: relative;
  background: radial-gradient(circle at 10% 20%, rgba(215, 12, 25, 0.32), transparent 50%),
              radial-gradient(circle at 90% 80%, rgba(180, 10, 20, 0.22), transparent 55%),
              linear-gradient(180deg, #121316 0%, #0d0e10 100%);
  margin: -24px -18px 20px -18px;
  padding: 24px 18px 26px 18px;
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(224, 16, 37, 0.95);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(224, 16, 37, 0.4);
}

.intro-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-block;
  animation: introPulse 1.8s infinite;
}

@keyframes introPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.intro-title {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 10px 0;
  color: #ffffff;
}

.intro-title strong {
  font-weight: 800;
  display: block;
}

.intro-sub {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 18px 0;
}

.intro-social {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.intro-avatars {
  display: flex;
  align-items: center;
}

.intro-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #121316;
  background-size: cover;
  background-position: center;
  margin-left: -8px;
  display: inline-block;
}

.intro-av:first-child {
  margin-left: 0;
}

.intro-social-text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

/* Cars Section Header */
.intro-selection-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 12px 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ish-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #121316;
}

.ish-line {
  width: 14px;
  height: 2.5px;
  background: var(--red);
  border-radius: 2px;
}

.ish-right {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #646a73;
}

.ish-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
  animation: introPulse 1.8s infinite;
}

/* Radio checkmark circle in top right of car card */
.car-radio-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #d2d5dc;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
}

.car-card-clean.sel .car-radio-check {
  border-color: var(--red);
  background: var(--red);
}

.car-card-clean.sel .car-radio-check::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}

/* 11th Surprise Card */
.car-card-surprise {
  background: #fdfdfd;
}

.surprise-box {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f5f7;
  margin: 10px;
  border-radius: 4px;
}

.surprise-q {
  font-size: 42px;
  font-weight: 900;
  color: var(--red);
}

.entregas-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #ebecee;
}

.entregas-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #121316;
  margin-bottom: 10px;
}

.entregas-line {
  width: 14px;
  height: 2.5px;
  background: var(--red);
  border-radius: 2px;
}

.entregas-carousel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px 2px;
  scrollbar-width: none;
}
.entregas-carousel::-webkit-scrollbar {
  display: none;
}

.entregas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.entregas-carousel .entrega-card,
.entregas-grid .entrega-card {
  flex: 0 0 105px;
  width: 105px;
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  background: #000;
}

.entrega-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Intro Footer slogan & country */
.intro-foot {
  margin-top: 12px;
  margin-bottom: 6px;
  text-align: center;
}

.intro-slogan {
  font-size: 12.5px;
  color: #646a73;
  margin: 0 0 10px 0;
}

.intro-country-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #dcdddf;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #121316;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.intro-country-pill select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.intro-country-pill svg {
  width: 10px;
  height: 6px;
  color: #646a73;
}

/* Sub-step smooth transition */
.quiz-substep {
  animation: fadeInSubStep 0.22s ease-out;
}

@keyframes fadeInSubStep {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= SCREEN 3: EVALUACIÓN & PREGUNTAS ================= */
.quiz-head-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #646a73;
  margin-bottom: 8px;
}

.quiz-head-line {
  width: 14px;
  height: 2.5px;
  background: var(--red);
  border-radius: 2px;
}

.quiz-main-title {
  font-size: 24px;
  font-weight: 400;
  color: #121316;
  line-height: 1.2;
  margin: 0 0 6px 0;
}

.quiz-main-title strong {
  font-weight: 800;
}

.quiz-main-sub {
  font-size: 13.5px;
  color: #646a73;
  margin: 0 0 18px 0;
}

/* Chosen car small pill */
.quiz-chosen-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e1e3e6;
  border-radius: 12px;
  padding: 8px 14px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.quiz-chosen-pill img {
  width: 60px;
  height: auto;
  object-fit: contain;
}

.qcp-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.qcp-text small {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #646a73;
  text-transform: uppercase;
}

.qcp-text b {
  font-size: 14px;
  font-weight: 800;
  color: #121316;
}

/* Quiz Question Cards (1, 2, 3) */
.quiz-q-card {
  background: #ffffff;
  border: 1px solid #e1e3e6;
  border-radius: 16px;
  padding: 18px 16px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.quiz-q-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  color: #121316;
  text-align: left;
}

.quiz-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #d70c19;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
}

/* Question 1: 2x2 Grid */
.quiz-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.quiz-opt-btn {
  background: #ffffff;
  border: 1.5px solid #e1e3e6;
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
}

.quiz-opt-btn svg {
  width: 22px;
  height: 22px;
  color: #d70c19;
  stroke-width: 2;
}

.quiz-opt-btn span {
  font-size: 13px;
  font-weight: 700;
  color: #121316;
}

.quiz-opt-btn:hover {
  border-color: #b0b4ba;
}

.quiz-opt-btn.selected {
  border-color: #d70c19 !important;
  background: #fffafa !important;
  box-shadow: 0 0 0 1px #d70c19;
}

/* Question 2: List */
.quiz-list-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.quiz-list-btn {
  background: #ffffff;
  border: 1.5px solid #e1e3e6;
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.18s ease;
}

.quiz-list-btn span:first-child {
  font-size: 13.5px;
  font-weight: 700;
  color: #121316;
}

.quiz-check {
  font-size: 16px;
  font-weight: 900;
  color: #d70c19;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.quiz-list-btn:hover {
  border-color: #b0b4ba;
}

.quiz-list-btn.selected {
  border-color: #d70c19 !important;
  background: #fffafa !important;
  box-shadow: 0 0 0 1px #d70c19;
}

.quiz-list-btn.selected .quiz-check {
  opacity: 1;
}

/* Question 3: Form Card overrides */
.quiz-form-card .field label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #646a73;
  text-transform: uppercase;
}

/* ================= CLEAN 2-COLUMN CARDS (MATCHING REFERENCE PRINT) ================= */
.cars-grid-clean {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 350px) {
  .cars-grid-clean {
    gap: 8px;
  }
}

.car-card-clean {
  position: relative;
  background: #ffffff;
  border: 1px solid #dcdddf;
  border-radius: 4px;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}

.car-card-clean:active {
  transform: scale(0.98);
}

.car-card-clean.sel,
.car-card-clean.quiz-chosen {
  border: 1.5px solid #d70c19 !important;
  box-shadow: 0 0 0 1px #d70c19;
}

/* Red "TU ELECCIÓN" label pinned at the top-left corner */
.car-card-clean .badge-choice {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  background: #d70c19;
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 2px;
  line-height: 1;
  display: none;
}

.car-card-clean.sel .badge-choice,
.car-card-clean.quiz-chosen .badge-choice {
  display: block;
}

/* Top Grey Image Banner Box */
.car-card-clean .card-pic {
  position: relative;
  width: 100%;
  aspect-ratio: 1.35;
  background: #d8dadc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
}

.car-card-clean .card-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.car-card-clean:hover .card-pic img {
  transform: scale(1.05);
}

/* Bottom White Info Box */
.car-card-clean .card-info {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.car-card-clean .card-type {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7c7d7e;
  line-height: 1.2;
}

.car-card-clean .card-name {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #111;
  margin-top: 3px;
  line-height: 1.15;
}

.car-card-clean .card-dots {
  display: flex;
  align-items: center;
  gap: 3.5px;
  margin-top: 7px;
}

.car-card-clean .card-dots img {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.car-card-clean .card-fee-label {
  font-size: 10.5px;
  color: #7c7d7e;
  margin-top: 8px;
  line-height: 1;
}

.car-card-clean .card-fee-val {
  font-size: 14.5px;
  font-weight: 800;
  color: #111;
  margin-top: 2px;
  line-height: 1;
}

/* ================= SCREEN 3: CONTATO ================= */
.pick {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 20px 0 24px;
}

.pick img {
  width: 70px;
  height: auto;
  object-fit: contain;
}

.pick span {
  display: flex;
  flex-direction: column;
}

.pick small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}

.pick b {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%;
  height: 52px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(215, 12, 25, 0.12);
}

.field input.error {
  border-color: #d70c19;
  background: #fffafa;
}

.field-error-msg {
  font-size: 12px;
  font-weight: 600;
  color: #d70c19;
  margin-top: 2px;
  display: none;
}

.field-error-msg.show {
  display: block;
}

.phone {
  display: flex;
  gap: 8px;
}

.cc {
  position: relative;
  flex: 0 0 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 52px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.cc select {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.cc .flag {
  font-size: 18px;
}

.cc .code {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.cc .chev {
  width: 10px;
  height: 6px;
  color: var(--gray);
}

.geo {
  font-size: 12px;
  color: var(--gray);
  margin-top: 4px;
}

.geo b {
  color: var(--ink);
}

.wa-aviso {
  font-size: 11.5px;
  color: #7c7d7e;
  line-height: 1.4;
  margin-top: 6px;
}

.safe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  margin-top: 8px;
}

.safe svg {
  width: 16px;
  height: 16px;
  color: #137a3b;
}

/* ================= SCREEN 4: CARREGAMENTO (ANALISANDO PERFIL) ================= */
.loading-box {
  padding: 30px 10px;
  text-align: center;
}

.spin {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3.5px solid var(--line);
  border-top-color: var(--red);
  margin: 0 auto 24px;
  animation: ckgira 0.8s linear infinite;
}

@keyframes ckgira {
  to { transform: rotate(360deg); }
}

.loading-box h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
}

.checks {
  list-style: none;
  max-width: 360px;
  margin: 28px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.checks li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray);
  transition: color 0.3s;
}

.checks li.done {
  color: var(--ink);
}

.checks li i {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  background: #fff;
}

.checks li i svg {
  width: 13px;
  height: 13px;
  opacity: 0;
  transition: opacity 0.2s;
}

.checks li.done i {
  background: #137a3b;
  border-color: #137a3b;
}

.checks li.done i svg {
  opacity: 1;
}

.lbar {
  max-width: 360px;
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  margin: 32px auto 0;
  overflow: hidden;
}

.lbar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red), #ff4a57);
  border-radius: 999px;
  transition: width 0.3s linear;
}

/* ================= SCREEN 5: VSL ================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e7f7ed;
  border: 1px solid #b7ebd0;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #137a3b;
  margin-bottom: 12px;
}

.badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #137a3b;
}

.lead {
  font-size: 16px;
  color: var(--ink-2);
  margin-top: 6px;
}

/* Full Width Mobile VSL Player Container */
.vsl-wrap {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 20px;
  background: #000;
  position: relative;
}

.player-video {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  background: #000;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.player-video iframe,
.player-video video,
.player-video vturb-smartplayer {
  width: 100%;
  display: block;
}

/* ================= VSL SMART AUTOPLAY UNMUTE OVERLAY ================= */
.vsl-unmute-overlay {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  cursor: pointer;
  transition: opacity 0.35s ease, transform 0.35s ease;
  box-sizing: border-box;
}

.vsl-unmute-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
}

.vsl-card-inner {
  width: 100%;
  max-width: 330px;
  background: linear-gradient(155deg, rgba(28, 18, 22, 0.92) 0%, rgba(12, 8, 10, 0.96) 100%);
  border: 2px solid #e01025;
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 25px rgba(224, 16, 37, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  animation: cardFloat 3s ease-in-out infinite alternate;
}

@keyframes cardFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

.vsl-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.vsl-byd {
  font-family: 'BYD-Bold', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: #ffffff;
}

.vsl-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
}

.vsl-exp {
  font-family: 'BYD-Bold', system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3.5px;
  color: rgba(255, 255, 255, 0.8);
}

.vsl-mute-btn-3d {
  position: relative;
  margin: 4px 0 12px;
}

.vsl-mute-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ff4b5c 0%, #d9001b 60%, #5a0009 100%);
  border: 2px solid #ff3b4e;
  box-shadow: 0 6px 20px rgba(217, 0, 27, 0.65), inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  position: relative;
  animation: pulseMuteGlow 1.8s infinite ease-in-out;
}

.vsl-mute-circle::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(255, 60, 80, 0.65);
  animation: vslRipple 1.6s infinite ease-out;
}

@keyframes vslRipple {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

.vsl-mute-circle svg {
  width: 26px;
  height: 26px;
}

@keyframes pulseMuteGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 6px 20px rgba(217, 0, 27, 0.65), inset 0 2px 4px rgba(255, 255, 255, 0.5);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 8px 28px rgba(255, 30, 60, 0.9), inset 0 2px 4px rgba(255, 255, 255, 0.6);
  }
}

.vsl-unmute-title {
  font-family: 'BYD-Bold', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: -0.2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.vsl-unmute-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  color: #111111;
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 800;
  border: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-family: system-ui, -apple-system, sans-serif;
}

.vsl-unmute-pill svg {
  width: 17px;
  height: 17px;
  color: #c4001a;
  fill: #c4001a;
}

.vsl-unmute-pill:active {
  transform: scale(0.96);
}

/* Mobile Responsive Tuning for VSL Smart AutoPlay Card (Fits inside 16:9 mobile video frame) */
@media (max-width: 600px) {
  .vsl-unmute-overlay {
    padding: 8px;
  }

  .vsl-card-inner {
    max-width: 270px;
    padding: 10px 14px;
    border-radius: 14px;
  }

  .vsl-brand {
    gap: 6px;
    margin-bottom: 5px;
  }

  .vsl-byd {
    font-size: 14px;
    letter-spacing: 2px;
  }

  .vsl-sep {
    font-size: 11px;
  }

  .vsl-exp {
    font-size: 8.5px;
    letter-spacing: 2.5px;
  }

  .vsl-mute-btn-3d {
    margin: 2px 0 6px;
  }

  .vsl-mute-circle {
    width: 42px;
    height: 42px;
  }

  .vsl-mute-circle::before {
    inset: -5px;
  }

  .vsl-mute-circle svg {
    width: 20px;
    height: 20px;
  }

  .vsl-unmute-title {
    font-size: 14px;
    margin: 0 0 8px;
    line-height: 1.15;
  }

  .vsl-unmute-pill {
    padding: 7px 16px;
    font-size: 11.5px;
    gap: 6px;
  }

  .vsl-unmute-pill svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 360px) {
  .vsl-card-inner {
    max-width: 245px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .vsl-mute-circle {
    width: 36px;
    height: 36px;
  }

  .vsl-mute-circle svg {
    width: 17px;
    height: 17px;
  }

  .vsl-unmute-title {
    font-size: 13px;
    margin: 0 0 6px;
  }

  .vsl-unmute-pill {
    padding: 6px 14px;
    font-size: 11px;
  }
}

.player-mockup {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  background: radial-gradient(circle at center, rgba(30, 30, 30, 0.6), #000 85%);
}

.play-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px rgba(215, 12, 25, 0.25);
  transition: transform 0.2s;
}

.player-mockup:hover .play-icon {
  transform: scale(1.08);
}

.play-icon svg {
  width: 26px;
  height: 26px;
  fill: #fff;
  margin-left: 3px;
}

.player-sub {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.vsl-hint {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 14px;
  text-align: center;
}

/* 5-Second Delayed CTA Button - Zero blank space when hidden */
.cta-box {
  display: none;
  margin-top: 18px;
}

.cta-box.revealed {
  display: block;
  animation: ctaSlideDown 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, pulseGlow 2.5s 0.5s infinite;
}

@keyframes ctaSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.mine {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-top: 24px;
  text-align: left;
}

.mine .pic {
  flex: 0 0 90px;
  aspect-ratio: 16/10;
  background: var(--stage);
  border-radius: 8px;
  overflow: hidden;
}

.mine .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mine .txt span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}

.mine .txt b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 2px;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.facts div {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
}

.facts b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.facts span {
  display: block;
  font-size: 11px;
  color: var(--gray);
  margin-top: 4px;
  line-height: 1.3;
}

/* ================= SCREEN 6: CATÁLOGO ================= */
.cat-head {
  text-align: left;
  margin-bottom: 20px;
}

.cat-head h1 {
  font-size: 28px;
  font-weight: 300;
  color: var(--ink);
}

.cat-head h1 strong {
  font-weight: 800;
}

.cat-head p {
  font-size: 14px;
  color: var(--gray);
  margin-top: 6px;
}

.fx-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 20px;
  text-align: left;
}

.fx-note .fl {
  font-size: 22px;
  flex: 0 0 24px;
}

.fx-note .h {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.fx-note .tx {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 2px;
  line-height: 1.4;
}

.filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 20px;
  scrollbar-width: none;
}

.filters::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.chip.on {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.chip span {
  font-size: 10px;
  opacity: 0.7;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.card {
  position: relative;
  background: var(--white);
  border: 1px solid #dcdddf;
  border-radius: 4px;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

.card:hover {
  border-color: #111;
}

.card.quiz-chosen {
  border: 1.5px solid #d70c19 !important;
  box-shadow: 0 0 0 1px #d70c19;
}

.card .badge-chosen {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  background: #d70c19;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 2px;
  line-height: 1;
}

.card .ph {
  width: 100%;
  aspect-ratio: 1.35;
  background: #d8dadc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
}

.card .ph img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.card:hover .ph img {
  transform: scale(1.04);
}

.card .body {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.card .tp {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7c7d7e;
  line-height: 1.2;
}

.card h3 {
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #111;
  margin-top: 3px;
  line-height: 1.15;
}

.card .dots {
  display: flex;
  align-items: center;
  gap: 3.5px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.card .dots img {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  display: inline-block;
  flex: 0 0 11px;
}

.card .fee {
  display: block;
  font-size: 10.5px;
  color: #7c7d7e;
  margin-top: 7px;
  line-height: 1.2;
}

.card .fee b {
  font-size: 13px;
  font-weight: 800;
  color: #111;
}

.card .cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #ebecee;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #646a73;
}

.card .cta i {
  font-style: normal;
  font-weight: 900;
  font-size: 12px;
  transition: transform 0.18s ease;
}

.card:hover .cta i {
  transform: translateX(3px);
}

.card.quiz-chosen .cta {
  color: #d70c19;
}

/* ================= SCREEN 7: CONFIGURADOR & AGENDA ================= */
.stage-col {
  position: relative;
  background: var(--stage);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  text-align: left;
}

.stage-head {
  padding: 20px 20px 0;
}

.stage-head .tp {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4f5152;
}

.stage-head h1 {
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 2px;
}

.stage-head .cname {
  font-size: 14px;
  font-weight: 600;
  color: #3e4041;
  margin-top: 2px;
}

.stage-img {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  margin-top: -6px;
}

.stage-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.3);
  transform-origin: 50% 78%;
  transition: opacity 0.25s ease;
}

.stage-foot {
  padding: 0 16px 20px;
  display: flex;
  justify-content: center;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.sw {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 3px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}

.sw:hover {
  transform: scale(1.08);
}

.sw.sel {
  border-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.sw img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.panel {
  text-align: left;
}

.panel h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
}

/* Delivery Section (Agenda) */
.deliv {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
}

.d-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.d-ic {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
}

.d-ic svg {
  width: 20px;
  height: 20px;
}

.d-head b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.d-head span {
  font-size: 12px;
  color: var(--gray);
}

.d-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f7f7f7;
  border-radius: 10px;
  padding: 12px;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
}

.d-info svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--red);
  margin-top: 2px;
}

.months {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  overflow-x: auto;
}

.mo {
  flex: 1 1 0;
  min-width: 90px;
  background: #f7f7f7;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.mo.on {
  border-color: var(--red);
  background: #fff;
  color: var(--red);
}

.mo small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--gray);
  margin-top: 2px;
}

.cal-wd {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray);
  text-align: center;
}

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 6px;
}

.day {
  aspect-ratio: 1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: #f9f9f9;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.day:hover:not(:disabled) {
  border-color: var(--ink);
}

.day.sel {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-weight: 700;
}

.day:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: #eee;
  border-color: transparent;
}

.d-sel {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #137a3b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.slots {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.s-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.s-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.slot {
  flex: 1 1 calc(20% - 8px);
  min-width: 65px;
  height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.slot.sel {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

/* Summary Box */
.summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
}

.sum-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.sum-row span {
  color: var(--gray);
}

.sum-row b {
  color: var(--ink);
}

.incl {
  list-style: none;
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.incl li::before {
  content: '✓ ';
  color: #137a3b;
  font-weight: 800;
}

.total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1.5px solid var(--line);
  margin-top: 8px;
}

.total span {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
}

.total span small {
  display: block;
  font-size: 11px;
}

.total b {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
}

.link-back {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  margin-top: 12px;
}

.fine {
  font-size: 11px;
  color: var(--gray);
  text-align: center;
  margin-top: 8px;
}

/* Floating Bottom Bar on Mobile */
.mbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mbar .info span {
  font-size: 11px;
  color: var(--gray);
  display: block;
}

.mbar .info b {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.mbar .btn {
  max-width: 200px;
  height: 48px;
  font-size: 13px;
}

/* ================= MODAL UPSLL VIP: AVISO ANTICIPADO ================= */
.up {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.up[hidden] {
  display: none !important;
}

.up-bg {
  position: absolute;
  inset: 0;
  background: rgba(12, 13, 14, 0.65);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.up-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 500px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
  text-align: left;
  animation: sheetUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.up-x {
  position: absolute;
  right: 18px;
  top: 18px;
  font-size: 26px;
  line-height: 1;
  color: var(--gray);
  cursor: pointer;
}

.up-eye {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}

.up-card h3 {
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
  margin-top: 4px;
}

.up-card h3 strong {
  font-weight: 800;
}

.vip {
  position: relative;
  display: block;
  background: radial-gradient(120% 80% at 100% 0%, rgba(240, 198, 74, 0.15), transparent 60%),
              linear-gradient(155deg, #202326 0%, #2b2f33 50%, #121314 100%);
  border-radius: 16px;
  padding: 18px;
  color: #fff;
  margin: 18px 0;
  cursor: pointer;
  border: 1px solid rgba(240, 198, 74, 0.35);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}

.vip input {
  position: absolute;
  opacity: 0;
}

.v-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.v-head {
  display: flex;
  flex-direction: column;
}

.v-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.v-head b {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}

.v-sw {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #444;
  position: relative;
  transition: background-color 0.2s;
}

.v-sw i {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.vip input:checked ~ .v-top .v-sw {
  background: var(--gold);
}

.vip input:checked ~ .v-top .v-sw i {
  transform: translateX(20px);
}

.v-body {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  margin-top: 10px;
}

.v-off, .v-on {
  display: block;
  font-size: 11.5px;
  margin-top: 8px;
}

.v-off {
  color: rgba(255, 255, 255, 0.55);
}

.v-on {
  display: none;
  color: var(--gold);
  font-weight: 700;
}

.vip input:checked ~ .v-off {
  display: none;
}

.vip input:checked ~ .v-on {
  display: block;
}

.up-skip {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  margin-top: 14px;
  padding: 8px;
}

/* ================= SCREEN 8: RESUMO DO PEDIDO ================= */
.ped {
  text-align: left;
}

.pre-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #137a3b;
  margin: 16px 0 10px;
}

.pre-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #137a3b;
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.pass {
  position: relative;
  border-radius: 20px;
  padding: 20px;
  color: #fff;
  text-align: left;
  overflow: hidden;
  background: radial-gradient(120% 70% at 100% 0%, rgba(226, 168, 18, 0.22), transparent 55%),
              linear-gradient(155deg, #202326 0%, #2b2f33 48%, #121314 100%);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.32),
              0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.pass::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #d99c0c, #f7d564, #d99c0c);
}

.p-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.p-top img {
  height: 16px;
  width: auto;
}

.p-top span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.p-car {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--stage);
  border-radius: 12px;
  overflow: hidden;
  margin: 14px 0;
}

.p-car img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25);
  transform-origin: 50% 78%;
}

.p-name small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.p-name b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}

.p-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.p-grid small {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.p-grid b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  margin-top: 2px;
}

.p-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-code small {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.p-code b {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #e0e0e0;
  margin-top: 2px;
}

.p-code span {
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

.q-lock {
  flex: 0 0 60px;
  height: 60px;
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, #2a2d31 0 6px, #25282b 6px 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.q-lock svg {
  width: 24px;
  height: 24px;
}

.pre-band {
  margin: 16px -20px -20px;
  padding: 10px 20px;
  background: linear-gradient(90deg, #d99c0c, #f7d564, #d99c0c);
  color: #3a2800;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

.sum {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
}

.lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.line {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
}

.line span {
  color: var(--gray);
}

.line b {
  color: var(--ink);
}

.ped-vip {
  margin: 18px 0;
}

.fee-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--gray);
  margin-top: 8px;
}

.fee-row b {
  color: var(--ink);
}

/* ================= SCREEN 9: CHECKOUT IFRAME ================= */
.ck-screen {
  display: block;
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-right: -18px;
  margin-top: -24px;
  margin-bottom: -40px;
  background: #ffffff;
  box-sizing: border-box;
}

@media (min-width: 680px) {
  .ck-screen {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }
}

.ck-dados {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 10px 18px;
  position: relative;
  z-index: 5;
}

.ck-dados-in {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-2);
}

.ck-dados-in svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: #137a3b;
}

.ck-dados-txt {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ck-dados-txt b {
  color: var(--ink);
}

.ck-corrigir {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  text-decoration: underline;
  cursor: pointer;
}

/* ================= SCREEN 9: CHECKOUT CAKTO ================= */
.ck-screen {
  display: block;
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-right: -18px;
  margin-top: -24px;
  margin-bottom: -40px;
  background: #ffffff;
  box-sizing: border-box;
}

@media (min-width: 680px) {
  .ck-screen {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }
}

.ck-dados {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 10px 18px;
  position: relative;
  z-index: 5;
}

.ck-dados-in {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-2);
}

.ck-dados-in svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: #137a3b;
}

.ck-dados-txt {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ck-dados-txt b {
  color: var(--ink);
}

.ck-corrigir {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  text-decoration: underline;
  cursor: pointer;
}

/* Hide global footer, mobile bottom bar, and modals completely on Step 9 (checkout iframe) */
body[data-step="9"] footer.global-foot,
body[data-step="9"] footer,
body[data-step="9"] .global-foot,
body[data-step="9"] #globalFooter,
body[data-step="9"] .mbar,
body[data-step="9"] #mbar,
body[data-step="9"] .up,
body[data-step="9"] #upModal,
[data-step="9"] footer.global-foot,
[data-step="9"] footer,
[data-step="9"] #globalFooter,
[data-step="9"] .mbar,
[data-step="9"] #mbar,
footer.global-foot[data-hidden-ck="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body[data-step="9"] {
  overflow-x: hidden !important;
  background: #ffffff;
}

body[data-step="9"] .app-viewport {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-step="9"] .funnel-step[data-step="9"] {
  display: block;
  opacity: 1;
  transform: none;
  padding: 0 !important;
  margin: 0 !important;
}

.ck {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: calc(100vh - 65px);
  height: calc(100svh - 65px);
  overflow: hidden;
  background: #ffffff;
}

.ck-scroll {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.ck iframe,
.ck-scroll iframe,
#ckFrame {
  position: absolute;
  top: -450px;
  left: 0;
  display: block;
  width: 1px;
  min-width: 100%;
  height: calc(100% + 580px);
  min-height: 1180px;
  border: 0;
  background: #ffffff;
}

.ck-load {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  background: #ffffff;
  z-index: 3;
  pointer-events: none;
}

.ck-load.hidden {
  display: none !important;
}

.ck-spin {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--red);
  animation: ckgira 0.8s linear infinite;
}

.ck-fora {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  margin-top: 8px;
  pointer-events: auto;
}

/* Footer disclaimer */
footer.global-foot {
  text-align: center;
  padding: 12px 18px 24px;
  font-size: 11.5px;
  color: var(--gray);
  line-height: 1.45;
  margin-top: 4px;
}

footer.global-foot b {
  display: block;
  color: var(--ink-2);
  margin-bottom: 4px;
}