/* =============================================
   RECARGAFÁCIL - Estilos Globais
   Plataforma Digital de Consulta de Recarga
   ============================================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* =============================================
   VARIÁVEIS CSS
   ============================================= */
:root {
  --primary: #0029ff;
  --primary-dark: #001fcc;
  --primary-light: #3355ff;
  --secondary: #ffc800;
  --secondary-light: #ffd500;
  --accent: #ffc800;

  --bg: #ffffff;
  --bg-card: #FFFFFF;
  --bg-section: #f9fafb;

  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-light: #9ca3af;

  --border: #e5e7eb;
  --border-focus: #ffc800;

  --success: #00c853;
  --warning: #ffc800;
  --error: #ec1b2e;
  
  /* Cores específicas Referência */
  --ref-blue-topbar: #0020d9;
  --ref-blue-card: #1540e5;
  --ref-yellow: #ffc800;
  --ref-yellow-dark: #e6b300;
  --ref-green: #00c853;
  --ref-gray-bg: #f9fafb;
  --ref-gray-text: #6b7280;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 480px;
  --container-wide: 900px;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--primary-dark);
}

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

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: var(--font);
  border: none;
  background: none;
}

input, select, textarea {
  font-family: var(--font);
}

/* =============================================
   TIPOGRAFIA
   ============================================= */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 4vw, 2rem); }
h3 { font-size: clamp(1.1rem, 3vw, 1.4rem); }
h4 { font-size: 1.1rem; }

p {
  color: var(--text-secondary);
  line-height: 1.7;
}

/* =============================================
   LAYOUT
   ============================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 64px 0;
}

.section-sm {
  padding: 40px 0;
}

/* =============================================
   HEADER / NAVBAR
   ============================================= */
.top-bar {
  background-color: var(--ref-blue-topbar);
  height: 32px;
  display: none;
}

@media (min-width: 768px) {
  .top-bar { display: block; }
}

.top-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
}

.top-bar-nav {
  display: flex;
  gap: 0;
  margin-left: 22%;
}

.top-bar-link {
  color: white;
  font-size: 13px;
  font-weight: 500;
  padding: 0 12px;
  opacity: 0.9;
}

.top-bar-link.active {
  font-weight: 700;
  position: relative;
  opacity: 1;
}

.top-bar-link.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: white;
}

.header {
  background: var(--primary);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: var(--transition);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 768px) {
  .header-inner { height: 70px; }
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: transparent;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-icon svg {
  width: 24px;
  height: 24px;
  fill: white;
}

.logo-text {
  font-size: 1.4rem;
  font-weight: 900;
  color: white;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.logo-text span {
  color: var(--secondary);
}

.nav {
  display: none;
  align-items: center;
  gap: 8px;
}

@media (min-width: 768px) {
  .nav { display: flex; }
}

.nav a {
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.nav a:hover {
  background: rgba(255,255,255,0.1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: var(--transition-fast);
  background: transparent;
  border: none;
  cursor: pointer;
}

.header-btn:hover {
  background: rgba(255,255,255,0.1);
}

.header-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 8px;
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
}

.header-menu-btn:hover {
  background: rgba(255,255,255,0.1);
}

.header-menu-btn span {
  font-size: 11px;
  font-weight: 500;
}

.nav-cta:hover {
  background: white !important;
  color: var(--primary) !important;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: var(--transition-fast);
}

/* =============================================
   HERO
   ============================================= */
.hero {
  background: var(--primary);
  padding: 40px 0 60px;
  position: relative;
  overflow: hidden;
}

.hero-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glow-1 {
  position: absolute;
  top: -160px;
  left: -160px;
  width: 500px;
  height: 500px;
  background: var(--primary-light);
  opacity: 0.2;
  filter: blur(80px);
  border-radius: 50%;
}

.glow-2 {
  position: absolute;
  bottom: -160px;
  right: -160px;
  width: 500px;
  height: 500px;
  background: var(--primary-light);
  opacity: 0.2;
  filter: blur(80px);
  border-radius: 50%;
}

.hero-grid {
  display: grid;
  gap: 40px;
  align-items: start;
  text-align: left;
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.05fr 1fr 1.05fr;
    gap: 32px;
  }
}

.hero-promo-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: white;
  line-height: 1.05;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.hero-promo-title span {
  color: var(--secondary);
}

.bonus-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.25);
  border: 2px solid var(--ref-green);
}

.bonus-card-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--ref-green);
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.bonus-card-left {
  display: flex;
  flex-direction: column;
}

.bonus-card-price-label {
  font-size: 10px;
  font-weight: 700;
  color: #1f2937;
  opacity: 0.8;
}

.bonus-card-price {
  font-size: 1.6rem;
  font-weight: 900;
  color: #0B0F19;
  line-height: 1;
}

.bonus-card-right {
  text-align: right;
}

.bonus-card-gb {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
}

.bonus-card-desc {
  font-size: 10px;
  font-weight: 800;
  color: #1f2937;
}

.promo-side-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-xl);
  padding: 24px;
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
}

.promo-side-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: white;
  margin-bottom: 8px;
}

.promo-side-chip {
  display: inline-block;
  background: white;
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.promo-side-copy {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15,118,110,0.08);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  color: white;
  line-height: 1.05;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 380px;
  margin: 0 auto 32px;
  line-height: 1.65;
}

.hero-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.badge svg {
  width: 14px;
  height: 14px;
  color: var(--success);
  flex-shrink: 0;
}

/* =============================================
   CARD PRINCIPAL (FORMULÁRIO)
   ============================================= */
.main-card {
  background: transparent;
  margin: 0 auto;
  max-width: 100%;
  position: relative;
}

.form-label-white {
  display: block;
  color: white;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.security-badge-white {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

.security-badge-white p {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.security-badge-white span {
  font-weight: 800;
}

.security-badge-white .lock-icon {
  color: var(--secondary);
}

.disclaimer-white {
  margin-top: 20px;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  text-align: center;
  line-height: 1.5;
}

.card-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  padding: 20px 24px;
  color: white;
}

.card-header-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.card-header-sub {
  font-size: 0.78rem;
  opacity: 0.85;
}

.card-body {
  padding: 28px 24px;
}

/* =============================================
   PROGRESS STEPS
   ============================================= */
.steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  padding: 0 8px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
  z-index: 0;
  transition: var(--transition);
}

.step-item.completed:not(:last-child)::after {
  background: var(--primary);
}

.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-section);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
  transition: var(--transition);
}

.step-item.active .step-circle {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 0 0 4px rgba(15,118,110,0.15);
}

.step-item.completed .step-circle {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.step-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
  white-space: nowrap;
}

.step-item.active .step-label {
  color: var(--primary);
  font-weight: 600;
}

.step-item.completed .step-label {
  color: var(--success);
}

/* =============================================
   FORMULÁRIO
   ============================================= */
.form-step {
  display: none;
  animation: fadeInUp 0.3s ease;
}

.form-step.active {
  display: block;
}

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

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.form-label span {
  color: var(--text-muted);
  font-weight: 400;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  background: white;
  transition: var(--transition-fast);
  outline: none;
  -webkit-appearance: none;
}

.form-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.form-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.12);
}

.form-input.error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.10);
}

.form-error {
  font-size: 0.78rem;
  color: var(--error);
  margin-top: 6px;
  display: none;
}

.form-error.visible {
  display: block;
}

.form-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* =============================================
   OPERADORAS
   ============================================= */
.operators-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.operator-card {
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: white;
  position: relative;
}

.operator-card:hover {
  border-color: var(--secondary-light);
  background: rgba(20,184,166,0.03);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.operator-card.selected {
  border-color: var(--primary);
  background: rgba(15,118,110,0.04);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.10);
}

.operator-card.selected::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 8px;
  width: 18px;
  height: 18px;
  background: var(--success);
  color: white;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 18px;
}

.operator-logo {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: -0.04em;
}

.operator-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.vivo-color { color: #660099; }
.claro-color { color: #E02020; }
.tim-color { color: #003087; }
.oi-color { color: #FFB800; }
.correios-color { color: #FFD100; }
.algar-color { color: #00A1E4; }

/* =============================================
   CARDS DE OPÇÕES
   ============================================= */
.options-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

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

.valor-card {
  background: white;
  border-radius: 16px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.valor-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.valor-card.selected {
  border-color: var(--ref-green);
  background: white;
  box-shadow: 0 8px 24px rgba(0,200,83,0.2);
}

.valor-card-price {
  font-size: 1.2rem;
  font-weight: 900;
  color: #0B0F19;
  line-height: 1;
}

.valor-card-bonus {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--primary);
  margin-top: 4px;
  text-transform: uppercase;
}

.valor-card.destaque {
  background: #fff9e6;
  border: 1px solid var(--secondary);
}

.option-card {
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  cursor: pointer;
  transition: var(--transition);
  background: white;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.option-card:hover {
  border-color: var(--secondary-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.option-card.selected {
  border-color: var(--primary);
  background: rgba(15,118,110,0.03);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.10);
}

.option-card.popular {
  border-color: var(--secondary);
}

.option-badge-popular {
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--secondary);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.option-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-card.selected .option-check {
  background: var(--primary);
  border-color: var(--primary);
}

.option-card.selected .option-check::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translateY(-1px);
}

.option-info {
  flex: 1;
  min-width: 0;
}

.option-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.option-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.option-tag {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-section);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.option-benefit {
  font-size: 0.75rem;
  color: var(--secondary);
  font-weight: 700;
}

.option-card.selected .option-benefit {
  color: var(--primary);
}

.option-price {
  text-align: right;
  flex-shrink: 0;
}

.option-price-value {
  font-size: 1.4rem;
  font-weight: 900;
  color: white;
  letter-spacing: -0.04em;
  line-height: 1;
}

.option-card.selected .option-price-value {
  color: var(--text-primary);
}

.option-price-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* =============================================
   BOTÕES
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 600;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  width: 100%;
  letter-spacing: -0.01em;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  box-shadow: 0 4px 16px rgba(15,118,110,0.25);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(15,118,110,0.35);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--bg-section);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
}

.btn-secondary:hover {
  background: var(--border);
  color: var(--text-primary);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}

.btn-outline:hover {
  background: rgba(15,118,110,0.06);
}

.btn-sm {
  padding: 10px 18px;
  font-size: 0.85rem;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* =============================================
   RESUMO / COMPROVANTE
   ============================================= */
.summary-screen {
  display: none;
  animation: fadeInUp 0.35s ease;
}

.summary-screen.active {
  display: block;
}

.summary-header {
  text-align: center;
  padding: 24px 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.summary-icon {
  width: 52px;
  height: 52px;
  background: var(--secondary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.summary-icon svg {
  width: 26px;
  height: 26px;
  fill: var(--primary);
}

.summary-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  margin-bottom: 4px;
}

.summary-subtitle {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
}

.summary-body {
  padding: 20px 24px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--bg-section);
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

.summary-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  text-align: right;
}

.summary-value.highlight {
  color: var(--secondary);
  font-size: 1.1rem;
  font-weight: 800;
}

.summary-payment-method {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-section);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 16px 0;
}

.pix-icon {
  width: 28px;
  height: 28px;
  background: #32BCAD;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pix-icon svg {
  width: 16px;
  height: 16px;
  fill: white;
}

.summary-payment-info {
  flex: 1;
}

.summary-payment-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.summary-payment-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.summary-notice {
  background: rgba(15,118,110,0.06);
  border: 1px solid rgba(15,118,110,0.15);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 16px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.summary-notice svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 1px;
}

.summary-notice p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.summary-footer {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =============================================
   SEÇÕES INSTITUCIONAIS
   ============================================= */
.how-it-works {
  background: white;
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}

.section-header h2 {
  margin-bottom: 12px;
}

.section-header p {
  max-width: 480px;
  margin: 0 auto;
  font-size: 0.95rem;
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 520px;
  margin: 0 auto;
}

.step-row {
  display: flex;
  gap: 20px;
  position: relative;
}

.step-row:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 48px;
  width: 2px;
  height: calc(100% - 24px);
  background: linear-gradient(to bottom, var(--primary), var(--secondary-light));
  opacity: 0.3;
}

.step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(15,118,110,0.25);
}

.step-content {
  padding-bottom: 32px;
  flex: 1;
}

.step-content h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 6px;
  margin-top: 8px;
}

.step-content p {
  font-size: 0.85rem;
  line-height: 1.6;
}

/* =============================================
   SEGURANÇA
   ============================================= */
.security-section {
  background: linear-gradient(160deg, #F0FDFA 0%, #ECFDF5 100%);
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
}

.security-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(15,118,110,0.08);
}

.security-icon {
  width: 40px;
  height: 40px;
  background: rgba(15,118,110,0.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.security-icon svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.security-card h4 {
  font-size: 0.88rem;
  margin-bottom: 6px;
}

.security-card p {
  font-size: 0.78rem;
  line-height: 1.55;
}

/* =============================================
   SOBRE
   ============================================= */
.about-section {
  background: white;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 640px;
  margin: 0 auto;
}

.about-stat {
  text-align: center;
  padding: 24px;
  background: var(--bg-section);
  border-radius: var(--radius-lg);
}

.about-stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
}

.about-stat-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

/* =============================================
   FAQ
   ============================================= */
.faq-section {
  background: var(--bg-section);
}

.faq-list {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: var(--transition);
}

.faq-item.open {
  box-shadow: var(--shadow-sm);
}

.faq-question {
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  gap: 12px;
}

.faq-toggle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-section);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.faq-item.open .faq-toggle {
  background: var(--primary);
  transform: rotate(45deg);
}

.faq-toggle svg {
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
  transition: var(--transition);
}

.faq-item.open .faq-toggle svg {
  color: white;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer-inner {
  padding: 0 18px 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.65;
  border-top: 1px solid var(--bg-section);
  padding-top: 14px;
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: #00154d;
  color: rgba(255,255,255,0.7);
  padding: 64px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 20px;
  margin-bottom: 32px;
}

.footer-brand .logo-text {
  color: white;
}

.footer-brand .logo-text span {
  color: var(--secondary-light);
}

.footer-brand p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  margin-top: 12px;
  line-height: 1.6;
}

.footer-col h5 {
  font-size: 0.82rem;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col ul li a {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  transition: var(--transition-fast);
}

.footer-col ul li a:hover {
  color: var(--secondary-light);
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.footer-contact-item svg {
  width: 14px;
  height: 14px;
  color: var(--secondary-light);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-contact-item span {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 24px 24px 0;
  max-width: 1280px;
  margin: 0 auto;
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
}

.footer-disclaimer {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.3) !important;
  max-width: 500px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.footer-links a {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
}

.footer-links a:hover {
  color: var(--secondary-light);
}

/* =============================================
   PÁGINA INTERNA - HERO SIMPLES
   ============================================= */
.page-hero {
  background: var(--primary);
  padding: 60px 0 50px;
  text-align: center;
  color: white;
}

.page-hero h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 12px;
  color: white;
  font-weight: 900;
}

.page-hero p {
  font-size: 1rem;
  max-width: 500px;
  margin: 0 auto;
  color: rgba(255,255,255,0.8);
}

/* =============================================
   CONTEÚDO INSTITUCIONAL
   ============================================= */
.page-content {
  padding: 48px 0;
}

.prose {
  max-width: 640px;
  margin: 0 auto;
}

.prose h2 {
  font-size: 1.2rem;
  margin-top: 36px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.prose h3 {
  font-size: 1rem;
  margin-top: 24px;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.prose p {
  font-size: 0.9rem;
  line-height: 1.75;
  margin-bottom: 14px;
  color: var(--text-secondary);
}

.prose ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 14px;
}

.prose ul li {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 6px;
}

.prose strong {
  color: var(--text-primary);
  font-weight: 600;
}

.prose .highlight-box {
  background: rgba(15,118,110,0.06);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 16px;
  margin: 20px 0;
}

.prose .highlight-box p {
  margin: 0;
  font-size: 0.85rem;
}

/* =============================================
   CONTATO
   ============================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 560px;
  margin: 0 auto;
}

.contact-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  text-align: center;
}

.contact-card-icon {
  width: 48px;
  height: 48px;
  background: rgba(15,118,110,0.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.contact-card-icon svg {
  width: 22px;
  height: 22px;
  color: var(--primary);
}

.contact-card h4 {
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.contact-card p {
  font-size: 0.82rem;
  margin-bottom: 14px;
}

.contact-form {
  background: white;
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  box-shadow: var(--shadow-md);
  max-width: 480px;
  margin: 32px auto 0;
}

.contact-form h3 {
  font-size: 1rem;
  margin-bottom: 20px;
}

textarea.form-input {
  resize: vertical;
  min-height: 100px;
}

/* =============================================
   PÁGINA DE PAGAMENTO
   ============================================= */
.payment-page {
  min-height: 100vh;
  background: var(--bg);
  padding: 32px 20px;
}

.payment-card {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 420px;
  margin: 0 auto;
  overflow: hidden;
}

.payment-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  padding: 24px;
  text-align: center;
  color: white;
}

.payment-header h2 {
  color: white;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.payment-header p {
  color: rgba(255,255,255,0.8);
  font-size: 0.8rem;
}

.payment-body {
  padding: 24px;
}

.qr-wrapper {
  text-align: center;
  margin: 20px 0;
}

.qr-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 500;
}

.qr-box {
  width: 180px;
  height: 180px;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  padding: 12px;
}

.qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qr-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 10px;
}

.payment-steps {
  margin: 20px 0;
}

.payment-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.payment-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-section);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.payment-step p {
  font-size: 0.82rem;
  line-height: 1.5;
}

.payment-security {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16,185,129,0.06);
  border: 1px solid rgba(16,185,129,0.15);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-top: 16px;
}

.payment-security svg {
  width: 16px;
  height: 16px;
  color: var(--success);
  flex-shrink: 0;
}

.payment-security p {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* =============================================
   UTILITÁRIOS
   ============================================= */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

.divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.tag-success {
  background: rgba(16,185,129,0.1);
  color: var(--success);
}

.tag-primary {
  background: rgba(15,118,110,0.1);
  color: var(--primary);
}

/* =============================================
   MOBILE MENU
   ============================================= */
.mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  z-index: 99;
  box-shadow: var(--shadow-md);
  flex-direction: column;
  gap: 4px;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  display: block;
}

.mobile-menu a:hover {
  background: var(--bg-section);
  color: var(--primary);
}

/* =============================================
   RESPONSIVO
   ============================================= */
@media (min-width: 640px) {
  .security-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .nav {
    display: flex;
  }

  .hamburger {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }

  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

@media (max-width: 767px) {
  .nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .security-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 40px 0 36px;
  }

  .card-body {
    padding: 20px 16px;
  }

  .summary-header,
  .summary-body,
  .summary-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* =============================================
   ANIMAÇÕES
   ============================================= */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.loading {
  animation: pulse 1.5s ease infinite;
}

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

.slide-down {
  animation: slideDown 0.25s ease;
}

/* Scroll suave para âncoras */
html {
  scroll-padding-top: 80px;
}


/* ===== AJUSTE DE FLUXO SOLICITADO ===== */
.flow-page{background:#f5f7fb;}
.blue-screen{min-height:calc(100vh - 60px);background:linear-gradient(180deg,#0029ff 0%,#001bb8 100%);display:flex;align-items:center;justify-content:center;padding:56px 20px;text-align:center;}
.start-card{width:100%;max-width:520px;color:#fff;}
.start-badge{display:inline-flex;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 14px;font-weight:700;font-size:.78rem;margin-bottom:18px;}
.start-card h1{color:#fff;font-size:clamp(2rem,7vw,3.6rem);font-weight:900;line-height:1.05;margin-bottom:16px;}
.start-card p{color:rgba(255,255,255,.82);font-size:1rem;max-width:390px;margin:0 auto 26px;}
.btn-start{width:100%;max-width:360px;height:58px;border-radius:16px;background:#ffc800;color:#0029ff;font-size:1.05rem;font-weight:900;box-shadow:0 14px 30px rgba(0,0,0,.22);}
.flow-screen{display:none;min-height:calc(100vh - 60px);background:#f5f7fb;padding:32px 16px;}
.flow-screen.active{display:block;}
.flow-container{width:100%;max-width:520px;margin:0 auto;}
.flow-card{background:#fff;border:1px solid #e7eaf0;border-radius:24px;padding:22px;box-shadow:0 18px 45px rgba(15,23,42,.08);}
.flow-title{font-size:1.45rem;text-align:center;margin-bottom:6px;color:#111827;}
.flow-subtitle{text-align:center;font-size:.9rem;color:#6b7280;margin-bottom:20px;}
.bonus-stack{display:flex;flex-direction:column;gap:14px;margin-bottom:20px;}
.bonus-card-flow{background:#fff;border:2px solid #dfe5ef;border-radius:20px;padding:18px;display:flex;align-items:center;justify-content:space-between;position:relative;box-shadow:0 8px 22px rgba(15,23,42,.06);}
.bonus-card-flow.featured{border-color:#00c853;}
.bonus-pill{position:absolute;top:-11px;right:16px;background:#00c853;color:#fff;border-radius:999px;padding:4px 10px;font-size:.68rem;font-weight:900;}
.bonus-label{display:block;font-size:.7rem;font-weight:900;color:#6b7280;letter-spacing:.04em;}
.bonus-card-flow strong{display:block;font-size:1.65rem;font-weight:950;color:#111827;line-height:1;}
.bonus-side{text-align:right;}
.bonus-side strong{color:#0029ff;font-size:1.85rem;}
.bonus-side span{display:block;font-size:.66rem;font-weight:900;color:#374151;}
.bonus-note{font-size:.78rem;line-height:1.45;text-align:center;color:#6b7280;margin-top:0;}
.stacked-field{margin-top:16px;}
.flow-card .form-input{height:56px;border-radius:16px;font-size:1.05rem;font-weight:800;text-align:center;}
.flow-btn{height:54px;border-radius:16px;font-weight:900;margin-top:12px;}
.flow-btn.ghost{background:#f3f4f6;color:#374151;box-shadow:none;}
.flow-card .operators-grid{grid-template-columns:repeat(2,1fr);}
.payment-selected{margin:18px 0 6px;background:#f8fafc;border:2px solid #00c853;border-radius:18px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;}
.payment-selected span{font-size:.8rem;color:#6b7280;font-weight:700;}
.payment-selected strong{color:#0029ff;font-weight:900;}
.summary-screen{display:none;}
.summary-screen.active{display:block;}
.summary-box{border:1px solid #edf0f5;border-radius:20px;overflow:hidden;margin:18px 0;}
.summary-box div{display:flex;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid #edf0f5;}
.summary-box div:last-child{border-bottom:0;}
.summary-box span{color:#6b7280;font-size:.88rem;}
.summary-box strong{color:#111827;text-align:right;}
.summary-box .total{background:#f8fafc;}
.summary-box .total strong{font-size:1.35rem;color:#0029ff;}
body.flow-active .how-it-works,body.flow-active .info-section,body.flow-active .features-section,body.flow-active .faq-section{display:none!important;}
@media (min-width:768px){.blue-screen{min-height:calc(100vh - 70px)}.flow-screen{min-height:calc(100vh - 70px);padding:48px 20px}.flow-card{padding:28px}.header{position:sticky;top:0}.start-card h1{font-size:3.45rem}}
@media (max-width:480px){.flow-card{padding:18px;border-radius:20px}.bonus-card-flow{padding:16px 14px}.bonus-card-flow strong{font-size:1.45rem}.bonus-side strong{font-size:1.6rem}.start-card h1{font-size:2.15rem}}

/* ===== AJUSTE: OPERADORA + NÚMERO NO MESMO FLUXO E TELA FINAL ===== */
body.flow-active main.flow-page ~ section{display:none!important;}
body.flow-active .flow-screen{background:linear-gradient(180deg,#0029ff 0%,#042cff 100%);padding:22px 16px 28px;}
body.flow-active .flow-card{background:transparent;border:0;box-shadow:none;border-radius:0;padding:0;color:#fff;}
body.flow-active .form-label,
body.flow-active .flow-title{color:#fff;}
body.flow-active .flow-subtitle{color:rgba(255,255,255,.78);}
.operators-inline{margin-bottom:6px;}
.flow-card .operators-inline{grid-template-columns:repeat(2,1fr);gap:10px;}
.flow-card .operators-inline .operator-card{border-radius:16px;border:2px solid rgba(255,255,255,.24);box-shadow:0 6px 18px rgba(0,0,0,.08);padding:13px 10px;}
.flow-card .operators-inline .operator-card.selected{border-color:#00c853;box-shadow:0 0 0 3px rgba(0,200,83,.18);}
.security-after-button{text-align:center;margin:18px auto 0;max-width:360px;color:#fff;}
.security-after-button p{color:#fff;font-size:.95rem;font-weight:700;line-height:1.35;margin-bottom:5px;}
.security-after-button span{display:block;color:rgba(255,255,255,.85);font-size:.85rem;line-height:1.35;margin-bottom:10px;}
.security-after-button small{display:block;color:rgba(255,255,255,.66);font-size:.72rem;line-height:1.45;}
.step3-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:8px 0 18px;}
.step3-topline .flow-title{text-align:left;font-size:1.32rem;line-height:1.15;margin:0;color:#fff;}
.step3-user-data{text-align:right;color:rgba(255,255,255,.88);font-size:.8rem;font-weight:800;line-height:1.35;}
.step3-user-data span{display:block;color:#ffd600;}
.step3-user-data strong{display:block;color:#fff;}
.featured-bonus-final{margin-bottom:22px;}
.final-featured-card{border-color:#00c853!important;border-radius:20px!important;padding:20px!important;box-shadow:none!important;}
.final-featured-card .bonus-pill{right:16px;top:-12px;background:#00c853;}
.final-featured-card .bonus-side strong{font-size:2.05rem;color:#0029ff;}
.payment-label{color:rgba(255,255,255,.8);font-weight:800;font-size:.86rem;margin:4px 0 10px;}
.pix-card-final{background:#fff!important;border:3px solid #00c853!important;border-radius:16px!important;padding:12px 14px!important;margin:0 0 22px!important;min-height:68px;position:relative;}
.pix-left{display:flex;align-items:center;gap:12px;}
.pix-left strong{color:#0029ff;font-size:1.25rem;font-weight:900;}
.pix-icon{width:42px;height:42px;border-radius:12px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;color:#32bcad;font-size:1.35rem;}
.pix-check{position:absolute;right:-6px;bottom:-7px;width:22px;height:22px;border-radius:999px;background:#0029ff;color:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:900;}
.final-values-grid{gap:10px;margin:0 0 22px!important;}
.final-values-grid .valor-card{min-height:67px;border-radius:14px;background:linear-gradient(135deg,#ffffff 0%,#dfe6ff 100%);border:2px solid transparent;box-shadow:none;padding:10px 6px;}
.final-values-grid .valor-card.selected{border-color:#ffc800;background:linear-gradient(135deg,#ffffff 0%,#dfe6ff 100%);box-shadow:none;}
.final-values-grid .valor-card-price{font-size:1.22rem;color:#090b13;font-weight:950;}
.final-values-grid .valor-card-bonus{font-size:.69rem;color:#0029ff;font-weight:950;}
.final-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:12px;margin-top:6px;}
.final-actions .flow-btn{margin-top:0;border-radius:999px;height:50px;}
.final-actions .btn-primary{background:linear-gradient(135deg,#ffc800,#d7b914);color:#0029ff;box-shadow:none;}
.final-actions .ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);}
body.flow-active .summary-screen.active{background:#fff;border-radius:22px;padding:22px;box-shadow:0 18px 45px rgba(0,0,0,.18);color:#111827;}
body.flow-active .summary-screen.active .flow-title{color:#111827;text-align:center;}
body.flow-active .summary-screen.active .flow-subtitle{color:#6b7280;}
@media(max-width:480px){
  body.flow-active .flow-screen{padding-left:20px;padding-right:20px;}
  .step3-topline .flow-title{font-size:1.25rem;}
  .final-values-grid{gap:10px;}
  .final-values-grid .valor-card{min-height:67px;}
  .final-actions{gap:12px;}
}

/* ===== V3: número e operadora no mesmo visual dos bônus, sem textos grandes ===== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.flow-promo-block{margin:0 0 22px;}
.flow-promo-block .bonus-cards-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.flow-promo-block .bonus-card-flow{min-height:82px;border-color:#00c853;border-radius:17px;box-shadow:none;padding:15px 20px;}
.flow-promo-block .bonus-card-flow strong{font-size:1.7rem;}
.flow-promo-block .bonus-side strong{font-size:2rem;color:#0029ff;}
.flow-promo-block .bonus-pill{top:-10px;right:20px;background:#00c853;color:#fff;font-size:.66rem;}
.bonus-disclaimer{color:rgba(255,255,255,.72);font-size:.78rem;line-height:1.45;margin:12px 0 0;text-align:left;}
body.flow-active .flow-card .form-input{height:56px;border:0;border-radius:12px;background:#eaf1ff;color:#07101f;font-size:1.15rem;font-weight:900;text-align:left;padding:0 20px;}
body.flow-active .flow-card .form-input::placeholder{color:#111827;opacity:.45;}
body.flow-active .flow-btn{height:56px;border-radius:12px;font-size:1rem;background:linear-gradient(135deg,#ffc800,#f0bf00);color:#0029ff;box-shadow:none;}
body.flow-active #step1 .stacked-field{margin-top:26px;}
body.flow-active #step2 .stacked-field{margin-top:14px;}
.selected-phone-line{min-height:22px;text-align:center;color:rgba(255,255,255,.9);font-weight:900;margin:4px 0 12px;font-size:.95rem;}
body.flow-active #step2 .operators-inline .operator-card{background:#fff;border-color:transparent;}
body.flow-active #step2 .operators-inline .operator-card.selected{border-color:#00c853;background:#fff;}
body.flow-active #step2 .operator-name{color:#6b7280;}
body.flow-active #step2 .two-buttons{margin-top:18px;}
body.flow-active #step2 .security-after-button{margin-top:18px;}
@media(max-width:480px){
  .flow-promo-block .bonus-card-flow{min-height:82px;padding:14px 20px;}
  .flow-promo-block .bonus-card-flow strong{font-size:1.55rem;}
  .flow-promo-block .bonus-side strong{font-size:1.9rem;}
  .bonus-disclaimer{font-size:.76rem;}
}


/* ===== V4: fluxo em 3 etapas — telefone, operadora e valores ===== */
body.flow-active .flow-screen.active{display:block;}
.step-main-title{margin:0 0 18px;text-align:left!important;font-size:1.55rem!important;line-height:1.15;color:#fff!important;}
.flow-field-label{display:block;color:#fff;font-weight:900;font-size:.95rem;margin:0 0 10px;}
body.flow-active #step1 .flow-promo-block,
body.flow-active #step2 .flow-promo-block{margin-bottom:22px;}
body.flow-active #step1 .stacked-field{margin-top:8px;}
body.flow-active #step2 .operators-inline{margin-top:4px;}
body.flow-active #step3 .step3-topline{align-items:flex-start;margin-top:4px;margin-bottom:18px;}
body.flow-active #step3 .step3-user-data{padding-top:2px;}
body.flow-active #step3 .step3-user-data span{color:#fff;font-size:.95rem;font-weight:950;}
body.flow-active #step3 .step3-user-data strong{font-size:.86rem;color:rgba(255,255,255,.9);font-weight:900;}
@media(max-width:480px){.step-main-title{font-size:1.35rem!important;margin-bottom:16px;}body.flow-active #step3 .step3-topline{gap:8px}.step3-topline .flow-title{font-size:1.18rem!important;max-width:210px}}


/* ===== V5: branco predominante + azul escuro premium ===== */
:root{
  --primary:#0A1B4D;
  --primary-dark:#061238;
  --primary-light:#163B8C;
  --secondary:#FACC15;
  --secondary-light:#FDE047;
  --accent:#2563FF;
  --bg:#F5F7FB;
  --bg-card:#FFFFFF;
  --bg-section:#F8FAFC;
  --text-primary:#0F172A;
  --text-secondary:#475569;
  --text-muted:#64748B;
  --border:#E2E8F0;
  --border-focus:#2563FF;
  --ref-blue-topbar:#061238;
  --ref-blue-card:#0A1B4D;
  --ref-yellow:#FACC15;
  --ref-green:#00C853;
}

body{background:#F5F7FB;color:#0F172A;}
.top-bar,.header{background:#0A1B4D!important;}
.logo-text span{color:#FACC15!important;}
a{color:#0A1B4D;}

/* tela inicial mantida em azul escuro */
.flow-page{background:#F5F7FB;}
.blue-screen{
  background:radial-gradient(circle at top left,rgba(37,99,255,.30),transparent 34%),linear-gradient(180deg,#0A1B4D 0%,#061238 100%)!important;
  min-height:calc(100vh - 60px);
}
.start-badge{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.22);}
.start-card h1{color:#FFFFFF!important;}
.start-card p{color:rgba(255,255,255,.84)!important;}
.btn-start{background:#FACC15!important;color:#0A1B4D!important;box-shadow:0 18px 35px rgba(0,0,0,.26)!important;}

/* fluxo após clicar: branco predominante */
body.flow-active .flow-screen,
.flow-screen{
  background:linear-gradient(180deg,#FFFFFF 0%,#F5F7FB 100%)!important;
  padding:26px 16px 34px;
}
body.flow-active .flow-card,
.flow-card{
  background:#FFFFFF!important;
  border:1px solid #E2E8F0!important;
  box-shadow:0 18px 45px rgba(15,23,42,.08)!important;
  border-radius:24px!important;
  padding:22px!important;
  color:#0F172A!important;
}
body.flow-active .flow-title,
.flow-title,
.step-main-title{
  color:#0A1B4D!important;
}
.step-main-title{text-align:left!important;}
body.flow-active .flow-subtitle,.flow-subtitle{color:#64748B!important;}
.flow-field-label{color:#0F172A!important;}

/* cards de bônus */
.bonus-card-flow,
.flow-promo-block .bonus-card-flow,
.final-featured-card{
  background:#FFFFFF!important;
  border:2px solid #DCE7F7!important;
  box-shadow:0 10px 28px rgba(10,27,77,.08)!important;
}
.bonus-card-flow.featured,
.flow-promo-block .bonus-card-flow.featured,
.final-featured-card{border-color:#00C853!important;}
.bonus-card-flow strong,.bonus-label{color:#0F172A!important;}
.bonus-side strong,.final-featured-card .bonus-side strong{color:#0A1B4D!important;}
.bonus-side span{color:#334155!important;}
.bonus-pill{background:#00C853!important;color:#FFFFFF!important;}
.bonus-disclaimer,
.bonus-note{color:#64748B!important;text-align:left;}

/* campos e botões */
body.flow-active .flow-card .form-input,
.flow-card .form-input{
  background:#F1F5F9!important;
  border:1.5px solid #D8E2F0!important;
  color:#0F172A!important;
  box-shadow:none!important;
}
body.flow-active .flow-card .form-input:focus,
.flow-card .form-input:focus{
  border-color:#2563FF!important;
  box-shadow:0 0 0 4px rgba(37,99,255,.12)!important;
}
body.flow-active .flow-btn,
.flow-btn,
.btn-primary{
  background:linear-gradient(135deg,#0A1B4D,#163B8C)!important;
  color:#FFFFFF!important;
  box-shadow:0 12px 24px rgba(10,27,77,.18)!important;
}
body.flow-active .flow-btn.ghost,
.flow-btn.ghost,
.btn-secondary{
  background:#F1F5F9!important;
  color:#0A1B4D!important;
  border:1px solid #D8E2F0!important;
  box-shadow:none!important;
}

/* segurança abaixo dos botões */
.security-after-button{color:#0F172A!important;}
.security-after-button p{color:#0A1B4D!important;}
.security-after-button span{color:#475569!important;}
.security-after-button small{color:#64748B!important;}
.selected-phone-line{color:#0A1B4D!important;}

/* operadoras */
body.flow-active #step2 .operators-inline .operator-card,
.flow-card .operators-inline .operator-card{
  background:#FFFFFF!important;
  border:2px solid #E2E8F0!important;
  box-shadow:0 8px 22px rgba(15,23,42,.06)!important;
}
body.flow-active #step2 .operators-inline .operator-card.selected,
.flow-card .operators-inline .operator-card.selected{
  border-color:#2563FF!important;
  background:#F8FAFF!important;
  box-shadow:0 0 0 4px rgba(37,99,255,.12)!important;
}
.operator-name{color:#64748B!important;}

/* etapa valores */
.step3-topline .flow-title{color:#0A1B4D!important;}
.step3-user-data{color:#475569!important;}
body.flow-active #step3 .step3-user-data span,
.step3-user-data span{color:#0A1B4D!important;font-weight:950;}
body.flow-active #step3 .step3-user-data strong,
.step3-user-data strong{color:#475569!important;}
.payment-label{color:#334155!important;}
.pix-card-final,
.payment-selected{
  background:#FFFFFF!important;
  border:3px solid #00C853!important;
  box-shadow:0 10px 26px rgba(15,23,42,.06)!important;
}
.pix-left strong,.payment-selected strong{color:#0A1B4D!important;}
.pix-check{background:#0A1B4D!important;}
.final-values-grid .valor-card{
  background:#FFFFFF!important;
  border:2px solid #E2E8F0!important;
  box-shadow:0 8px 18px rgba(15,23,42,.05)!important;
}
.final-values-grid .valor-card.selected{
  border-color:#2563FF!important;
  background:#F8FAFF!important;
  box-shadow:0 0 0 4px rgba(37,99,255,.10)!important;
}
.final-values-grid .valor-card-price{color:#0F172A!important;}
.final-values-grid .valor-card-bonus{color:#0A1B4D!important;}
.final-actions .btn-primary{background:linear-gradient(135deg,#0A1B4D,#163B8C)!important;color:#fff!important;}
.final-actions .ghost{background:#F1F5F9!important;color:#0A1B4D!important;border:1px solid #D8E2F0!important;}

/* resumo */
body.flow-active .summary-screen.active,
.summary-screen.active{
  background:#FFFFFF!important;
  border:1px solid #E2E8F0!important;
  border-radius:24px!important;
  padding:22px!important;
  box-shadow:0 18px 45px rgba(15,23,42,.10)!important;
  color:#0F172A!important;
}
.summary-box{border-color:#E2E8F0!important;}
.summary-box div{border-color:#E2E8F0!important;}
.summary-box span{color:#64748B!important;}
.summary-box strong{color:#0F172A!important;}
.summary-box .total{background:#F8FAFC!important;}
.summary-box .total strong{color:#0A1B4D!important;}

/* manter seções institucionais escondidas durante o fluxo, como pedido */
body.flow-active main.flow-page ~ section{display:none!important;}

@media (max-width:480px){
  body.flow-active .flow-screen,.flow-screen{padding-left:16px!important;padding-right:16px!important;}
  body.flow-active .flow-card,.flow-card{padding:18px!important;border-radius:22px!important;}
}

/* ===== V6: ajustes solicitados — sem espaços, promo acima da operadora, resumo na etapa valores ===== */
html, body { min-height: 100%; }
body { display: flex; flex-direction: column; background:#F5F7FB!important; }
body > main.flow-page { flex: 0 0 auto; }
body > footer.footer { margin-top: 0!important; }

/* Remove o espaço grande entre card e footer nas etapas */
body.flow-active .flow-screen,
.flow-screen{
  min-height: auto!important;
  padding-top: 18px!important;
  padding-bottom: 18px!important;
}
.flow-container{max-width:430px!important;}
body.flow-active .flow-card,
.flow-card{margin-bottom:0!important;}

/* O card de bônus é propaganda; título da operadora vem depois dele */
.operator-title-after-promo{
  margin-top: 8px!important;
  margin-bottom: 14px!important;
  text-align:left!important;
}
#operatorStepPhone,.selected-phone-line{display:none!important;}
body.flow-active #step2 .stacked-field{margin-top:0!important;}

/* Compacta o card da etapa telefone para não sobrar área vazia */
#step1 .flow-promo-block{margin-bottom:18px!important;}
#step1 .security-after-button{margin-top:14px!important;}
.security-after-button small{max-width:330px;margin:8px auto 0;}

/* Etapa valores: topo vira um resumo visual */
.value-title{
  text-align:left!important;
  margin:0 0 12px!important;
  font-size:1.25rem!important;
  color:#0A1B4D!important;
}
.value-summary-card{
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:22px;
  padding:16px;
  margin-bottom:16px;
  box-shadow:0 14px 34px rgba(15,23,42,.08);
}
.value-summary-card .step3-user-data{
  text-align:left!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 2px 12px!important;
  border-bottom:1px solid #E2E8F0;
  margin-bottom:14px;
}
.value-summary-card .step3-user-data span{
  color:#0A1B4D!important;
  font-size:1rem!important;
  font-weight:950!important;
}
.value-summary-card .step3-user-data strong{
  color:#475569!important;
  font-size:.88rem!important;
  font-weight:900!important;
}
.value-summary-card .featured-bonus-final{margin-bottom:16px!important;}
.value-summary-card .final-featured-card{
  box-shadow:none!important;
  margin:0!important;
}
.value-summary-card .payment-label{margin:0 0 8px!important;color:#334155!important;}
.value-summary-card .pix-card-final{margin:0!important;box-shadow:none!important;}

/* Grid e botões mais integrados */
.final-values-grid{margin-top:4px!important;}
.final-actions{margin-top:16px!important;}
.final-actions .btn-primary{background:linear-gradient(135deg,#0A1B4D,#163B8C)!important;color:#fff!important;}
.final-actions .ghost{background:#FFFFFF!important;}

/* Footer integrado ao conteúdo, sem faixa separada por espaço */
.footer{margin-top:0!important;background:#061238!important;}
.footer-bottom{background:#061238!important;}

@media(max-width:480px){
  body.flow-active .flow-screen,.flow-screen{padding:14px 10px 0!important;}
  body.flow-active .flow-card,.flow-card{border-radius:20px!important;padding:14px!important;}
  .flow-container{max-width:100%!important;}
  .value-summary-card{padding:14px;border-radius:20px;}
  .value-summary-card .step3-user-data{align-items:flex-start;flex-direction:column;gap:2px;}
  .final-values-grid .valor-card{min-height:64px!important;}
}

/* ===== V7 FINAL — layout integrado, sem balão único, textos centralizados ===== */
:root{
  --dark-blue:#061B55;
  --dark-blue-2:#0A1B4D;
  --soft-bg:#F5F7FB;
  --line:#DDE7F5;
}

/* Corpo em coluna única: header, fluxo e footer grudados, sem buraco */
html,body{min-height:100%;}
body{background:var(--soft-bg)!important;display:flex;flex-direction:column;}
.header{background:var(--dark-blue)!important;box-shadow:none!important;}
.header-inner,
.flow-container,
.footer-grid,
.footer-bottom-inner{
  width:100%;
  max-width:430px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.header-inner{padding-left:14px!important;padding-right:14px!important;}
.footer-grid,.footer-bottom-inner{padding-left:16px!important;padding-right:16px!important;}

/* Mantém a tela inicial, mas quando entra no fluxo tudo fica integrado */
body.flow-active .flow-screen,
.flow-screen{
  background:var(--soft-bg)!important;
  padding:14px 0 0!important;
  min-height:auto!important;
}
.flow-container{padding:0 14px!important;}

/* Remove o balão/card único do conteúdo */
body.flow-active .flow-card,
.flow-card{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  margin:0!important;
  color:#0F172A!important;
}

/* Títulos e textos centralizados */
.flow-title,
.step-main-title,
.operator-title-after-promo,
.value-title,
.flow-subtitle{
  text-align:center!important;
  color:var(--dark-blue-2)!important;
}
.step-main-title{font-size:1.18rem!important;margin:0 0 14px!important;}
.operator-title-after-promo{margin:18px 0 14px!important;font-size:1.2rem!important;}
.value-title{font-size:1.18rem!important;margin:0 0 14px!important;}
.flow-field-label{display:block;text-align:center!important;color:#0F172A!important;font-size:1rem!important;margin-bottom:10px!important;}
.bonus-disclaimer{text-align:center!important;color:#52647D!important;font-size:.78rem!important;line-height:1.45!important;margin:10px auto 18px!important;}

/* Propaganda de bônus integrada, sem card externo */
.flow-promo-block{margin:0 0 18px!important;}
.bonus-cards-list{gap:8px!important;}
.bonus-card-flow,
.flow-promo-block .bonus-card-flow,
.final-featured-card{
  background:#FFFFFF!important;
  border:2px solid var(--line)!important;
  border-radius:16px!important;
  padding:15px 16px!important;
  box-shadow:none!important;
}
.bonus-card-flow.featured,
.flow-promo-block .bonus-card-flow.featured,
.final-featured-card{border-color:#00C853!important;}
.bonus-card-flow strong,.bonus-label{color:#07101F!important;}
.bonus-side{text-align:right!important;}
.bonus-side strong,.final-featured-card .bonus-side strong{color:#003BFF!important;}
.bonus-side span{color:#07101F!important;font-weight:900!important;}
.bonus-pill{background:#00C853!important;color:white!important;}

/* Campo telefone e botões integrados */
.stacked-field{margin-bottom:18px!important;}
body.flow-active .flow-card .form-input,
.flow-card .form-input{
  height:56px!important;
  border-radius:12px!important;
  background:#EAF1FF!important;
  border:1px solid #D7E2F3!important;
  color:#07101F!important;
  font-size:1.15rem!important;
  font-weight:900!important;
  text-align:center!important;
  box-shadow:none!important;
}
.flow-btn,.btn-primary{
  border-radius:12px!important;
  height:56px!important;
  background:linear-gradient(135deg,var(--dark-blue-2),#143586)!important;
  color:#fff!important;
  box-shadow:none!important;
  font-weight:900!important;
}
.flow-btn.ghost,.btn-secondary{
  background:#FFFFFF!important;
  color:var(--dark-blue-2)!important;
  border:1px solid #D8E2F0!important;
  box-shadow:none!important;
}
.security-after-button{text-align:center!important;margin:14px auto 0!important;padding-bottom:6px!important;}
.security-after-button p{color:var(--dark-blue-2)!important;text-align:center!important;margin:0 0 4px!important;}
.security-after-button span{display:block;color:#475569!important;text-align:center!important;}
.security-after-button small{display:block;color:#64748B!important;text-align:center!important;max-width:360px;margin:8px auto 0!important;line-height:1.45!important;}

/* Operadoras: sem telefone e sem bloco gigante */
#operatorStepPhone,.selected-phone-line{display:none!important;}
.operators-inline{grid-template-columns:repeat(2,1fr)!important;gap:10px!important;}
.flow-card .operators-inline .operator-card,
body.flow-active #step2 .operators-inline .operator-card{
  background:#FFFFFF!important;
  border:2px solid #E2E8F0!important;
  border-radius:16px!important;
  box-shadow:none!important;
  padding:14px 10px!important;
}
.flow-card .operators-inline .operator-card.selected,
body.flow-active #step2 .operators-inline .operator-card.selected{
  border-color:#2563FF!important;
  background:#F8FAFF!important;
  box-shadow:0 0 0 3px rgba(37,99,255,.10)!important;
}
.operator-logo{text-align:center!important;}
.operator-name{text-align:center!important;color:#64748B!important;}
.two-buttons,.final-actions{display:grid!important;grid-template-columns:1fr 1.45fr!important;gap:10px!important;margin:14px 0 0!important;}

/* Etapa valores: resumo abaixo do card de bônus, tudo centralizado, sem balão */
.value-summary-card{
  display:flex!important;
  flex-direction:column!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0 0 14px!important;
}
.featured-bonus-final{order:1!important;margin:0 0 12px!important;}
.step3-user-data{
  order:2!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  text-align:center!important;
  border:0!important;
  padding:0!important;
  margin:0 0 12px!important;
}
.step3-user-data span{font-size:1.08rem!important;font-weight:950!important;color:var(--dark-blue-2)!important;text-align:center!important;}
.step3-user-data strong{font-size:.96rem!important;font-weight:850!important;color:#475569!important;text-align:center!important;}
.payment-label{order:3!important;text-align:center!important;color:#334155!important;font-size:.78rem!important;font-weight:800!important;margin:0 0 8px!important;}
.pix-card-final,.payment-selected{
  order:4!important;
  background:#FFFFFF!important;
  border:2px solid #00C853!important;
  border-radius:16px!important;
  padding:12px 14px!important;
  box-shadow:none!important;
  margin:0!important;
}
.pix-left strong,.payment-selected strong{color:var(--dark-blue-2)!important;}
.pix-check{background:var(--dark-blue-2)!important;color:#fff!important;}
.final-values-grid{gap:10px!important;margin:12px 0 0!important;}
.final-values-grid .valor-card{
  background:#FFFFFF!important;
  border:2px solid #E2E8F0!important;
  border-radius:16px!important;
  min-height:68px!important;
  box-shadow:none!important;
}
.final-values-grid .valor-card.selected{
  border-color:#2563FF!important;
  background:#F8FAFF!important;
  box-shadow:0 0 0 3px rgba(37,99,255,.10)!important;
}
.final-values-grid .valor-card-price{color:#07101F!important;text-align:center!important;}
.final-values-grid .valor-card-bonus{color:#003BFF!important;text-align:center!important;}

/* Resumo final também integrado */
.summary-screen.active{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
}
.summary-box{
  background:#FFFFFF!important;
  border:1px solid #E2E8F0!important;
  border-radius:18px!important;
  overflow:hidden!important;
  box-shadow:none!important;
}

/* Footer conectado ao fluxo e com a mesma largura interna */
.footer{margin-top:0!important;background:var(--dark-blue)!important;padding-top:28px!important;}
.footer-grid{display:grid!important;grid-template-columns:1fr!important;gap:22px!important;}
.footer-bottom{background:var(--dark-blue)!important;margin-top:18px!important;}
.footer-bottom-inner{display:flex!important;flex-direction:column!important;gap:10px!important;text-align:center!important;}
.footer-brand,.footer-col{text-align:center!important;}
.footer-brand .logo{justify-content:center!important;}
.footer-contact-item{justify-content:center!important;text-align:center!important;}
.footer-links{justify-content:center!important;}

/* Durante o fluxo, esconde blocos institucionais, mas mantém footer */
body.flow-active main.flow-page ~ section{display:none!important;}
body.flow-active main.flow-page ~ footer.footer{display:none!important;}

@media (min-width:768px){
  .header-inner,.flow-container,.footer-grid,.footer-bottom-inner{max-width:480px!important;}
  .flow-container{padding-left:20px!important;padding-right:20px!important;}
}
@media (max-width:380px){
  .bonus-card-flow{padding:13px 12px!important;}
  .bonus-card-flow strong{font-size:1.35rem!important;}
  .bonus-side strong{font-size:1.5rem!important;}
  .flow-container{padding-left:10px!important;padding-right:10px!important;}
}


/* === AJUSTE V8: página inicial completa; ao clicar, mostrar somente o fluxo === */
body:not(.flow-active) .flow-screen{display:none!important;}
body.flow-active .start-screen{display:none!important;}
body.flow-active main.flow-page ~ section,
body.flow-active main.flow-page ~ footer.footer{display:none!important;}
body.flow-active .flow-screen.active{display:block!important;min-height:calc(100vh - 60px);}
@media (min-width:768px){body.flow-active .flow-screen.active{min-height:calc(100vh - 70px);}}

/* === AJUSTE V12: fluxo logo abaixo do menu + resumo abaixo dos cards + footer pequeno === */
body.flow-active{
  min-height:100vh!important;
  display:flex!important;
  flex-direction:column!important;
  background:#F5F7FB!important;
}
body.flow-active .top-bar{display:none!important;}
body.flow-active .header{position:relative!important;top:auto!important;}
body.flow-active main.flow-page{
  flex:1 0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  background:#F5F7FB!important;
}
body.flow-active .flow-screen.active{
  display:block!important;
  min-height:0!important;
  flex:0 0 auto!important;
  padding:10px 0 10px!important;
  margin:0!important;
}
body.flow-active .flow-container{
  max-width:480px!important;
  margin:0 auto!important;
  padding:0 12px!important;
}
body.flow-active .flow-card{
  margin:0!important;
  padding:14px!important;
}
body.flow-active .flow-title{
  margin:0 0 12px!important;
  text-align:center!important;
}
/* Sem telefone/operadora acima dos cards de valores */
body.flow-active #step3 > .step3-user-data{display:none!important;}
body.flow-active #step3 .final-values-grid{margin-top:0!important;margin-bottom:12px!important;}
/* Resumo abaixo dos cards, integrado e centralizado */
body.flow-active #step3 .inline-flow-summary{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:8px 0 12px!important;
  text-align:center!important;
}
body.flow-active #step3 .inline-flow-summary .step3-user-data{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:2px!important;
  margin:10px 0 12px!important;
  color:#0A1B4D!important;
}
body.flow-active #step3 .inline-flow-summary .step3-user-data span,
body.flow-active #step3 .inline-flow-summary .step3-user-data strong{
  color:#0A1B4D!important;
  font-weight:900!important;
  text-align:center!important;
}
body.flow-active #step3 .inline-flow-summary .featured-bonus-final{margin-bottom:10px!important;}
body.flow-active #step3 .inline-flow-summary .payment-label{
  color:#0A1B4D!important;
  text-align:center!important;
  margin:8px 0 8px!important;
}
body.flow-active #step3 .inline-flow-summary .pix-card-final{
  margin:0!important;
}
/* Footer pequeno sempre no fundo durante o fluxo */
body.flow-active main.flow-page ~ section{display:none!important;}
body.flow-active main.flow-page ~ footer.footer{
  display:block!important;
  margin-top:auto!important;
  padding:0!important;
  background:#0A1B4D!important;
}
body.flow-active .footer-grid{display:none!important;}
body.flow-active .footer-bottom{
  margin:0!important;
  padding:12px 14px!important;
  background:#0A1B4D!important;
}
body.flow-active .footer-bottom-inner{
  max-width:480px!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  text-align:center!important;
}
body.flow-active .footer-bottom p,
body.flow-active .footer-bottom a{
  font-size:11px!important;
  line-height:1.35!important;
  color:rgba(255,255,255,.78)!important;
}
body.flow-active .footer-bottom .footer-disclaimer{font-size:10px!important;}
body.flow-active .footer-links{justify-content:center!important;gap:14px!important;}
@media(max-width:480px){
  body.flow-active .header-inner{height:60px!important;padding:0 16px!important;}
  body.flow-active .flow-container{padding:0 10px!important;}
  body.flow-active .flow-card{border-radius:18px!important;}
}


/* ===== AJUSTES V13: fluxo de etapas abaixo do menu e cards limpos ===== */
.flow-screen.active{
  padding-top: 0 !important;
}
.step-progress-wrap{
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid rgba(10,27,77,.08);
  padding: 10px 14px 8px;
}
.step-progress{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 54px;
  color: #94a3b8;
  font-weight: 800;
  text-align: center;
}
.progress-item span{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid #dbe3ef;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}
.progress-item small{
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
}
.progress-line{
  flex: 1;
  max-width: 54px;
  height: 3px;
  border-radius: 999px;
  background: #dbe3ef;
  margin: 0 2px 14px;
}
.progress-item.active span,
.progress-item.completed span{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.progress-item.active small,
.progress-item.completed small{
  color: var(--primary);
}
.progress-line.completed{
  background: var(--primary);
}
.value-summary-card .step3-user-data,
.step3-user-data{
  display: none !important;
}
.final-values-grid{
  margin-top: 10px;
}
.value-summary-card{
  margin-top: 16px;
}
.flow-container{
  padding-top: 14px !important;
}
@media (max-width: 420px){
  .progress-item{min-width:44px}
  .progress-item small{font-size:9px}
  .progress-line{max-width:38px}
}

/* ===== V14 AJUSTE FINAL — conteúdo central, barra integrada, resumo sem balão ===== */
:root{
  --site-blue:#0A1B4D;
  --site-blue-2:#102A6B;
  --site-bg:#F5F7FB;
  --site-line:#DCE6F5;
}

html, body{
  min-height:100%;
}
body{
  background:var(--site-bg)!important;
  display:flex!important;
  flex-direction:column!important;
}

/* Menu, conteúdo, barra de fluxo e footer com a mesma largura */
.header-inner,
.flow-container,
.step-progress-wrap,
.footer-bottom-inner{
  width:100%!important;
  max-width:430px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:16px!important;
  padding-right:16px!important;
}

.header{
  background:var(--site-blue)!important;
  box-shadow:none!important;
}
.header-inner{
  height:58px!important;
}
.logo-text{
  color:#fff!important;
}
.logo-text span{
  color:#FACC15!important;
}

/* Fluxo logo abaixo do menu, sem buraco superior/inferior */
.flow-screen{
  background:var(--site-bg)!important;
  padding:10px 0 0!important;
  min-height:0!important;
  flex:1 0 auto!important;
}
.flow-container{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:center!important;
  padding-top:0!important;
  padding-bottom:8px!important;
}
.flow-card{
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-align:center!important;
}
.form-step.active{
  width:100%!important;
  display:block!important;
  text-align:center!important;
}

/* Barra numerada faz parte do conteúdo central */
.step-progress-wrap{
  order:0!important;
  background:transparent!important;
  margin-top:8px!important;
  margin-bottom:12px!important;
}
.step-progress{
  width:100%!important;
  background:#FFFFFF!important;
  border:1px solid var(--site-line)!important;
  border-radius:18px!important;
  padding:10px 10px!important;
  box-shadow:none!important;
}
.progress-item span{
  background:#EAF0FB!important;
  color:var(--site-blue)!important;
  border:1px solid #D9E5F7!important;
}
.progress-item.active span,
.progress-item.done span{
  background:var(--site-blue)!important;
  color:#FFFFFF!important;
  border-color:var(--site-blue)!important;
}
.progress-item small{
  color:#64748B!important;
  font-weight:700!important;
}
.progress-line,
.progress-line.done{
  background:#D9E5F7!important;
}
.progress-line.done{
  background:var(--site-blue)!important;
}

/* Conteúdo sempre centralizado */
.flow-title,
.flow-subtitle,
.step-main-title,
.operator-title-after-promo,
.value-title,
.flow-field-label,
.bonus-disclaimer,
.security-after-button,
.payment-label{
  text-align:center!important;
}
.flow-title,
.step-main-title,
.operator-title-after-promo,
.value-title{
  color:var(--site-blue)!important;
}
.flow-subtitle,
.bonus-disclaimer,
.security-after-button span,
.security-after-button small{
  color:#64748B!important;
}

/* Operadoras na cor do site, sem cor própria por marca */
.operator-logo,
.vivo-color,
.claro-color,
.tim-color,
.oi-color,
.correios-color,
.algar-color{
  color:var(--site-blue)!important;
}
.operator-card{
  text-align:center!important;
  background:#FFFFFF!important;
  border-color:#DCE6F5!important;
}
.operator-card.selected{
  border-color:var(--site-blue)!important;
  box-shadow:0 0 0 3px rgba(10,27,77,.10)!important;
}
.operator-name{
  color:#64748B!important;
}

/* Etapa de valores: cards primeiro, resumo depois, tudo no fundo sem balão */
.final-values-grid{
  width:100%!important;
  margin:0 auto 14px!important;
}
.value-summary-card,
.inline-flow-summary{
  width:100%!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:14px 0 0!important;
  text-align:center!important;
}
.featured-bonus-final,
.final-featured-card,
.bonus-card,
.value-summary-card .final-featured-card{
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.payment-label{
  color:#334155!important;
  font-weight:800!important;
  margin-top:14px!important;
}
.pix-card-final,
.payment-selected{
  width:100%!important;
  background:#FFFFFF!important;
  border:1px solid #DCE6F5!important;
  box-shadow:none!important;
}

/* Resumo final integrado ao fundo, sem balão/card sobreposto */
.summary-screen.active,
body.flow-active .summary-screen.active{
  width:100%!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0 auto!important;
  text-align:center!important;
  color:#0F172A!important;
}
.summary-box{
  width:100%!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
  margin:14px 0!important;
}
.summary-box div{
  background:transparent!important;
  border-bottom:1px solid #DCE6F5!important;
  padding:12px 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
.summary-box div:last-child{
  border-bottom:0!important;
}
.summary-box .total{
  background:transparent!important;
}
.summary-box span{
  color:#64748B!important;
}
.summary-box strong,
.summary-box .total strong{
  color:var(--site-blue)!important;
}

/* Footer pequeno, no fundo, alinhado com menu/conteúdo */
.footer{
  margin-top:auto!important;
  background:var(--site-blue)!important;
  padding:0!important;
}
.footer-grid{
  display:none!important;
}
.footer-bottom{
  background:var(--site-blue)!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  padding:14px 0!important;
}
.footer-bottom-inner{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  text-align:center!important;
}
.footer-bottom p,
.footer-disclaimer{
  margin:0!important;
  color:rgba(255,255,255,.78)!important;
  font-size:11px!important;
  line-height:1.45!important;
  max-width:100%!important;
}
.footer-links{
  display:flex!important;
  justify-content:center!important;
  gap:14px!important;
  margin-top:2px!important;
}
.footer-links a{
  color:#FFFFFF!important;
  font-size:12px!important;
  font-weight:800!important;
}

@media(max-width:480px){
  .header-inner,
  .flow-container,
  .step-progress-wrap,
  .footer-bottom-inner{
    max-width:100%!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .flow-screen{padding-top:8px!important;}
  .step-progress{border-radius:16px!important;padding:9px 8px!important;}
  .progress-item small{font-size:9px!important;}
  .final-actions{gap:10px!important;}
}

/* =====================================================
   V15 — AJUSTE RESPONSIVO FINO
   Fonte, separações, linhas, distribuição e alinhamento
   ===================================================== */
:root{
  --layout-max: 460px;
  --layout-pad: 16px;
  --line-soft: #DDE7F6;
  --surface-soft: #F6F8FC;
}

body{
  min-height:100vh!important;
  display:flex!important;
  flex-direction:column!important;
  overflow-x:hidden!important;
  background:#F6F8FC!important;
}

.header,
.footer{
  flex-shrink:0!important;
}

.flow-page{
  flex:1 0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  width:100%!important;
  background:#F6F8FC!important;
}

.header-inner,
.flow-container,
.step-progress-wrap,
.footer-bottom-inner{
  width:100%!important;
  max-width:var(--layout-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:var(--layout-pad)!important;
  padding-right:var(--layout-pad)!important;
}

.header-inner{
  min-height:56px!important;
  height:56px!important;
}

.logo-text{
  font-size:1.05rem!important;
  letter-spacing:-.03em!important;
}

.logo-icon{
  width:32px!important;
  height:32px!important;
}

.header-actions{
  gap:4px!important;
}

.header-btn,
.header-menu-btn{
  width:34px!important;
  height:34px!important;
  padding:4px!important;
}

.header-menu-btn span{
  display:none!important;
}

.flow-screen{
  width:100%!important;
  flex:1 0 auto!important;
  display:none!important;
  padding:10px 0 8px!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
}

body.flow-active .flow-screen,
.flow-screen.active{
  display:flex!important;
  flex-direction:column!important;
}

.start-screen{
  width:100%!important;
  min-height:calc(100vh - 56px - 90px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px var(--layout-pad)!important;
}

.start-card{
  width:100%!important;
  max-width:var(--layout-max)!important;
  margin:0 auto!important;
  text-align:center!important;
}

.start-card h1{
  font-size:clamp(1.65rem, 7vw, 2.35rem)!important;
  line-height:1.08!important;
  margin-bottom:10px!important;
}

.start-card p{
  font-size:.93rem!important;
  line-height:1.55!important;
  max-width:330px!important;
  margin:0 auto 18px!important;
}

.btn-start{
  min-height:52px!important;
  font-size:1rem!important;
  border-radius:14px!important;
}

.step-progress-wrap{
  margin:0 auto 10px!important;
}

.step-progress{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  background:#FFFFFF!important;
  border:1px solid var(--line-soft)!important;
  border-radius:18px!important;
  padding:10px 8px!important;
  box-shadow:0 8px 22px rgba(10,27,77,.06)!important;
}

.progress-item{
  min-width:42px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
}

.progress-item span{
  width:28px!important;
  height:28px!important;
  font-size:.76rem!important;
  line-height:28px!important;
}

.progress-item small{
  font-size:.62rem!important;
  line-height:1!important;
  letter-spacing:-.01em!important;
}

.progress-line{
  flex:1 1 auto!important;
  min-width:10px!important;
  height:2px!important;
  border-radius:999px!important;
}

.flow-container{
  flex:1 0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:0!important;
}

.flow-card,
#mainCard,
.summary-screen{
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.form-step.active{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:14px!important;
}

.flow-title,
.step-main-title,
.operator-title-after-promo,
.value-title{
  width:100%!important;
  margin:0!important;
  font-size:clamp(1.18rem, 5vw, 1.55rem)!important;
  line-height:1.22!important;
  letter-spacing:-.03em!important;
  text-align:center!important;
}

.flow-subtitle{
  width:100%!important;
  max-width:330px!important;
  margin:4px auto 10px!important;
  font-size:.86rem!important;
  line-height:1.45!important;
  text-align:center!important;
}

.flow-promo-block{
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

.bonus-cards-list{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  margin:0!important;
}

.bonus-card-flow,
.bonus-card,
.final-featured-card{
  min-height:76px!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:14px 16px!important;
  border-radius:18px!important;
  background:#FFFFFF!important;
  border:1px solid var(--line-soft)!important;
  box-shadow:0 8px 22px rgba(10,27,77,.06)!important;
}

.bonus-card-flow.featured{
  border-color:#00C853!important;
}

.bonus-label,
.bonus-card-price-label{
  font-size:.62rem!important;
  line-height:1!important;
  letter-spacing:.05em!important;
}

.bonus-card-flow strong,
.bonus-card-price{
  font-size:1.45rem!important;
  line-height:1.05!important;
}

.bonus-side,
.bonus-card-right{
  text-align:right!important;
}

.bonus-side strong,
.bonus-card-gb{
  font-size:1.55rem!important;
  line-height:1!important;
}

.bonus-side span,
.bonus-card-desc{
  font-size:.58rem!important;
  line-height:1.1!important;
}

.bonus-pill,
.bonus-card-badge{
  font-size:.58rem!important;
  top:-8px!important;
  right:12px!important;
  padding:3px 8px!important;
}

.bonus-disclaimer{
  width:100%!important;
  max-width:360px!important;
  margin:8px auto 0!important;
  font-size:.71rem!important;
  line-height:1.45!important;
  text-align:center!important;
}

.stacked-field,
.form-group{
  width:100%!important;
  margin:0!important;
}

.flow-field-label,
.form-label,
.form-label-white{
  width:100%!important;
  display:block!important;
  margin:0 0 8px!important;
  font-size:.86rem!important;
  line-height:1.25!important;
  text-align:center!important;
  font-weight:800!important;
}

.form-input{
  height:52px!important;
  padding:0 16px!important;
  border-radius:14px!important;
  font-size:1.02rem!important;
  font-weight:800!important;
  text-align:center!important;
  background:#FFFFFF!important;
  border:1px solid var(--line-soft)!important;
  box-shadow:0 8px 20px rgba(10,27,77,.05)!important;
}

.form-error{
  text-align:center!important;
  font-size:.76rem!important;
  margin-top:7px!important;
}

.flow-btn,
.btn{
  min-height:50px!important;
  border-radius:14px!important;
  font-size:.94rem!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
}

.security-after-button{
  width:100%!important;
  margin:0!important;
  padding-top:4px!important;
  text-align:center!important;
}

.security-after-button p{
  margin:0 0 2px!important;
  font-size:.8rem!important;
  line-height:1.35!important;
}

.security-after-button span{
  display:block!important;
  font-size:.76rem!important;
  line-height:1.35!important;
  margin-bottom:4px!important;
}

.security-after-button small{
  display:block!important;
  max-width:360px!important;
  margin:0 auto!important;
  font-size:.68rem!important;
  line-height:1.45!important;
}

.operators-grid,
.operators-inline{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  gap:10px!important;
  margin:0!important;
}

.operator-card{
  min-height:78px!important;
  padding:14px 8px!important;
  border-radius:16px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
}

.operator-logo{
  font-size:1.05rem!important;
  line-height:1.1!important;
  font-weight:900!important;
}

.operator-name{
  font-size:.69rem!important;
  line-height:1.1!important;
}

.two-buttons,
.final-actions{
  width:100%!important;
  display:grid!important;
  grid-template-columns:.8fr 1.2fr!important;
  gap:10px!important;
  margin:0!important;
}

.final-values-grid,
.options-grid-3x3{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  gap:9px!important;
  margin:0!important;
}

.valor-card{
  min-height:66px!important;
  border-radius:15px!important;
  padding:10px 6px!important;
  border:1px solid var(--line-soft)!important;
  box-shadow:0 6px 16px rgba(10,27,77,.05)!important;
}

.valor-card-price{
  font-size:1.02rem!important;
  line-height:1!important;
}

.valor-card-bonus{
  font-size:.61rem!important;
  margin-top:5px!important;
}

.inline-flow-summary,
.value-summary-card{
  width:100%!important;
  margin:2px 0 0!important;
  padding-top:12px!important;
  border-top:1px solid var(--line-soft)!important;
}

.payment-label{
  margin:12px 0 8px!important;
  font-size:.78rem!important;
  line-height:1.2!important;
}

.payment-selected,
.pix-card-final{
  min-height:54px!important;
  padding:10px 14px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}

.pix-left{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}

.pix-icon{
  width:34px!important;
  height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:12px!important;
  background:#F1F5F9!important;
}

.pix-left strong{
  font-size:1rem!important;
}

.pix-check{
  width:22px!important;
  height:22px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
}

.summary-screen.active{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:10px!important;
}

.summary-box{
  width:100%!important;
  margin:0!important;
  padding-top:4px!important;
}

.summary-box div{
  min-height:46px!important;
  font-size:.86rem!important;
}

.summary-box strong{
  text-align:right!important;
  max-width:55%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.footer{
  width:100%!important;
  margin-top:auto!important;
}

.footer-bottom{
  padding:12px 0!important;
}

.footer-bottom-inner{
  gap:6px!important;
}

.footer-bottom p,
.footer-disclaimer{
  font-size:.66rem!important;
  line-height:1.35!important;
}

.footer-links{
  gap:12px!important;
  flex-wrap:wrap!important;
}

.footer-links a{
  font-size:.72rem!important;
  line-height:1.2!important;
}

@media (max-width: 374px){
  :root{ --layout-pad: 12px; }
  .step-progress{gap:4px!important;padding:9px 6px!important;}
  .progress-item{min-width:34px!important;}
  .progress-item span{width:25px!important;height:25px!important;font-size:.69rem!important;line-height:25px!important;}
  .progress-item small{font-size:.55rem!important;}
  .bonus-card-flow,.bonus-card,.final-featured-card{padding:12px 12px!important;min-height:72px!important;}
  .bonus-card-flow strong,.bonus-card-price{font-size:1.28rem!important;}
  .bonus-side strong,.bonus-card-gb{font-size:1.35rem!important;}
  .operators-grid,.operators-inline{gap:8px!important;}
  .operator-card{min-height:72px!important;padding:12px 6px!important;}
  .final-values-grid,.options-grid-3x3{gap:7px!important;}
  .valor-card{min-height:60px!important;}
  .valor-card-price{font-size:.92rem!important;}
  .two-buttons,.final-actions{gap:8px!important;}
}

@media (min-width: 540px){
  :root{ --layout-max: 500px; --layout-pad: 18px; }
  .flow-screen{padding-top:14px!important;}
  .form-step.active{gap:16px!important;}
  .operators-grid,.operators-inline{grid-template-columns:repeat(3, minmax(0, 1fr))!important;}
  .operator-card{min-height:86px!important;}
  .final-values-grid,.options-grid-3x3{gap:10px!important;}
  .valor-card{min-height:72px!important;}
}

@media (min-width: 768px){
  :root{ --layout-max: 540px; --layout-pad: 20px; }
  .header-inner{height:64px!important;min-height:64px!important;}
  .logo-text{font-size:1.25rem!important;}
  .logo-icon{width:36px!important;height:36px!important;}
  .flow-screen{padding:18px 0 10px!important;}
  .step-progress-wrap{margin-bottom:14px!important;}
  .step-progress{padding:12px 12px!important;border-radius:20px!important;}
  .progress-item span{width:32px!important;height:32px!important;line-height:32px!important;font-size:.84rem!important;}
  .progress-item small{font-size:.68rem!important;}
  .form-step.active{gap:18px!important;}
  .flow-title,.step-main-title,.operator-title-after-promo,.value-title{font-size:1.6rem!important;}
  .bonus-cards-list{gap:12px!important;}
  .bonus-card-flow,.bonus-card,.final-featured-card{min-height:84px!important;padding:16px 18px!important;}
  .form-input{height:56px!important;}
  .flow-btn,.btn{min-height:54px!important;}
  .operators-grid,.operators-inline{grid-template-columns:repeat(3, minmax(0, 1fr))!important;gap:12px!important;}
  .final-values-grid,.options-grid-3x3{gap:12px!important;}
  .valor-card{min-height:76px!important;}
  .footer-bottom{padding:14px 0!important;}
}

/* ===================== AJUSTE V16 — PAGAMENTO + ALINHAMENTO DESKTOP ===================== */
@media (min-width:768px){
  .top-bar-inner,
  .header-inner,
  .footer-grid,
  .footer-bottom-inner,
  .flow-container,
  .step-progress-wrap,
  .payment-flow-container{
    max-width:520px!important;
    width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .top-bar-inner{justify-content:center!important;padding-left:0!important;padding-right:0!important;}
  .top-bar-nav{margin-left:0!important;justify-content:center!important;width:100%!important;gap:8px!important;}
  .top-bar-link{padding:0 8px!important;font-size:12px!important;}
  .header-inner{padding-left:14px!important;padding-right:14px!important;}
  .footer-bottom-inner{align-items:center!important;text-align:center!important;padding-left:14px!important;padding-right:14px!important;}
  .footer-links{justify-content:center!important;}
}

.payment-layout-page{
  min-height:100vh!important;
  display:flex!important;
  flex-direction:column!important;
  background:#F5F7FB!important;
}
.payment-layout-page .top-bar{flex:0 0 auto;}
.payment-layout-page .header{flex:0 0 auto;}
.payment-main-shell{
  flex:1 0 auto;
  width:100%;
  background:#F5F7FB;
  padding:14px 0 0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.payment-flow-container{
  width:100%;
  max-width:520px;
  margin:0 auto;
  padding:0 14px 16px;
}
.payment-progress-wrap{padding:4px 0 12px!important;margin:0 auto!important;}
.payment-receipt-screen{
  width:100%;
  background:transparent;
  text-align:center;
  color:#0f172a;
  animation:fadeInUp .25s ease;
}
.payment-receipt-screen.hidden{display:none!important;}
.payment-title-block{
  text-align:center;
  padding:8px 6px 14px;
  border-bottom:1px solid #E2E8F0;
  margin-bottom:12px;
}
.payment-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#1e3a8a;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:8px;
}
.payment-title-block h1{
  color:#0A1B4D;
  font-size:clamp(1.22rem,4.8vw,1.6rem);
  font-weight:900;
  margin:0 0 6px;
  line-height:1.15;
}
.payment-title-block p{
  color:#64748B;
  font-size:.86rem;
  line-height:1.45;
  max-width:380px;
  margin:0 auto;
}
.payment-status-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0 12px;
}
.payment-status-row span,
.payment-status-row strong{
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:999px;
  padding:7px 12px;
  font-size:.72rem;
  color:#0A1B4D;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
}
.payment-detail-list{
  width:100%;
  border-top:1px solid #E2E8F0;
  border-bottom:1px solid #E2E8F0;
  margin:10px 0 12px;
}
.payment-detail-list div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 2px;
  border-bottom:1px solid #E2E8F0;
}
.payment-detail-list div:last-child{border-bottom:0;}
.payment-detail-list span{
  color:#64748B;
  font-size:.74rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  text-align:left;
}
.payment-detail-list strong{
  color:#0A1B4D;
  font-size:.84rem;
  font-weight:900;
  text-align:right;
  max-width:58%;
  word-break:break-word;
}
.payment-amount-box{
  background:#FFFFFF;
  border:1px solid #DDE6F3;
  border-radius:22px;
  padding:15px 16px;
  margin:14px auto;
  box-shadow:0 10px 28px rgba(15,23,42,.06);
}
.payment-amount-box.compact{margin-top:8px;margin-bottom:12px;}
.payment-amount-box span{
  display:block;
  color:#64748B;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:6px;
}
.payment-amount-box strong{
  display:block;
  color:#0A1B4D;
  font-size:1.85rem;
  font-weight:950;
  line-height:1;
}
.payment-main-btn{max-width:100%!important;margin:10px auto 0!important;}
.payment-note{
  color:#64748B;
  font-size:.76rem;
  margin:8px auto 0;
  text-align:center;
  max-width:340px;
}
.payment-qr-area{
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:24px;
  padding:16px 14px 18px;
  margin:12px 0;
  box-shadow:0 10px 28px rgba(15,23,42,.06);
}
.payment-qr-wrapper{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-width:180px;
  min-height:180px;
  background:#FFFFFF;
  border:1px solid #EEF2F7;
  border-radius:22px;
  padding:10px;
  margin:0 auto 12px;
}
#qrcode{display:flex;justify-content:center;align-items:center;min-width:150px;min-height:150px;color:#1e3a8a;font-size:.82rem;font-weight:800;}
#qrcode img,#qrcode canvas{border-radius:14px;max-width:100%;height:auto;}
.pix-code-label{
  font-size:.7rem;
  color:#334155;
  text-transform:uppercase;
  font-weight:900;
  margin:8px 0;
}
.pix-code-box{
  background:#F8FAFC;
  border:1px dashed #94A3B8;
  border-radius:14px;
  padding:10px 12px;
  font-family:monospace;
  font-size:.72rem;
  line-height:1.45;
  color:#0F172A;
  word-break:break-all;
  text-align:left;
  max-height:130px;
  overflow:auto;
}
.payment-timer{
  margin:12px auto 8px;
  border:1px solid #E2E8F0;
  background:#FFFFFF;
  border-radius:999px;
  padding:10px 12px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:#475569;
  font-size:.78rem;
}
.payment-timer strong{
  color:#1e3a8a;
  font-family:monospace;
  font-size:1.18rem;
  background:#F1F5F9;
  border-radius:999px;
  padding:3px 10px;
}
.payment-timer.timer-expired strong{color:#B91C1C;background:#FEE2E2;}
.payment-processing-note{
  background:#EEF6FF;
  color:#334155;
  border-radius:999px;
  padding:8px 12px;
  font-size:.75rem;
  margin:8px auto;
  text-align:center;
}
.payment-status-message{
  border-left:3px solid #2563EB;
  background:#EFF6FF;
  border-radius:14px;
  padding:10px 12px;
  font-size:.78rem;
  color:#1E3A8A;
  margin:12px 0 0;
  text-align:center;
}
.payment-status-message.status-success{background:#EAF8EF;border-left-color:#16A34A;color:#166534;}
.payment-status-message.status-error{background:#FEE2E2;border-left-color:#B91C1C;color:#991B1B;}
.qr-fallback,.qr-loading,.qr-expired{color:#1e3a8a;font-size:.82rem;font-weight:800;text-align:center;line-height:1.4;}
.payment-small-footer{margin-top:auto!important;padding-top:0!important;background:#061238!important;}
.payment-small-footer .footer-bottom{margin-top:0!important;background:#061238!important;}
.payment-small-footer .footer-bottom-inner{
  max-width:520px!important;
  margin:0 auto!important;
  padding:14px!important;
  text-align:center!important;
  align-items:center!important;
}
.payment-small-footer .footer-disclaimer{max-width:480px;margin:0 auto!important;text-align:center!important;}
.payment-small-footer .footer-links{justify-content:center!important;}
@media(max-width:520px){
  .payment-main-shell{padding-top:10px;}
  .payment-flow-container{padding-left:14px;padding-right:14px;}
  .payment-detail-list div{padding:10px 0;}
  .payment-detail-list span{font-size:.68rem;}
  .payment-detail-list strong{font-size:.78rem;}
  .payment-amount-box strong{font-size:1.6rem;}
  .payment-qr-wrapper{min-width:164px;min-height:164px;}
}


/* === AJUSTE V18: marca CelMais + centralização desktop === */
.top-bar-inner{
  justify-content:center!important;
  max-width:520px!important;
  padding-left:16px!important;
  padding-right:16px!important;
}
.top-bar-nav{
  margin-left:0!important;
  width:100%!important;
  justify-content:center!important;
  align-items:center!important;
  gap:6px!important;
  text-align:center!important;
}
.top-bar-link{
  text-align:center!important;
  white-space:nowrap!important;
}
.footer,
.payment-small-footer{
  text-align:center!important;
}
.footer-grid,
.footer-bottom-inner{
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  align-items:center!important;
  justify-items:center!important;
}
.footer-brand,
.footer-col,
.footer-bottom p,
.footer-disclaimer{
  text-align:center!important;
}
.footer-brand .logo,
.footer-contact-item,
.footer-links{
  justify-content:center!important;
}
.footer-bottom-inner{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  max-width:520px!important;
}
.footer-disclaimer{
  max-width:520px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
@media (min-width:768px){
  .top-bar{display:block!important;}
  .top-bar-inner,
  .header-inner,
  .flow-container,
  .footer-grid,
  .footer-bottom-inner,
  .payment-flow-container{
    max-width:520px!important;
  }
  .footer-links{justify-content:center!important;}
}

/* === AJUSTE V19: responsividade universal + cores responsivas === */
:root{
  --brand-blue:#061238;
  --brand-blue-2:#0A1B4D;
  --brand-blue-3:#123A7A;
  --brand-accent:#FACC15;
  --brand-surface:#FFFFFF;
  --brand-bg:#F6F8FC;
  --brand-line:#E2E8F0;
  --brand-text:#0F172A;
  --brand-muted:#64748B;
  --brand-success:#00A35C;
  --app-max:clamp(320px, 94vw, 520px);
  --app-pad:clamp(12px, 4vw, 24px);
  --gap-xs:clamp(6px, 1.6vw, 10px);
  --gap-sm:clamp(10px, 2.4vw, 14px);
  --gap-md:clamp(14px, 3vw, 22px);
  --radius-fluid:clamp(14px, 4vw, 24px);
}
html{font-size:clamp(14px, 1.2vw + 10px, 16px);}
body{background:var(--brand-bg)!important;color:var(--brand-text)!important;overflow-x:hidden;}
body.flow-active{min-height:100dvh!important;display:flex!important;flex-direction:column!important;background:var(--brand-bg)!important;}
body.flow-active .header{flex:0 0 auto!important;}
body.flow-active .flow-screen,
.payment-main-shell{flex:1 0 auto!important;}
body.flow-active .footer,
.payment-small-footer{flex:0 0 auto!important;}
.top-bar,.header{background:var(--brand-blue)!important;}
.top-bar-inner,.header-inner,.flow-container,.footer-grid,.footer-bottom-inner,.payment-flow-container{
  width:100%!important;
  max-width:var(--app-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:var(--app-pad)!important;
  padding-right:var(--app-pad)!important;
}
.top-bar{height:auto!important;min-height:30px!important;}
.top-bar-inner{min-height:30px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.top-bar-nav{display:flex!important;justify-content:center!important;align-items:center!important;gap:clamp(4px,1vw,8px)!important;flex-wrap:nowrap!important;overflow:hidden!important;}
.top-bar-link{font-size:clamp(10px,2.3vw,12px)!important;padding:5px clamp(3px,1vw,8px)!important;line-height:1.2!important;white-space:nowrap!important;color:#fff!important;}
.header-inner{height:clamp(52px, 12vw, 64px)!important;}
.logo-text{font-size:clamp(1.05rem,4.4vw,1.35rem)!important;}
.logo-icon{width:clamp(32px,8vw,40px)!important;height:clamp(32px,8vw,40px)!important;}
.header-btn{width:clamp(34px,8vw,40px)!important;height:clamp(34px,8vw,40px)!important;}
.header-menu-btn span{font-size:clamp(9px,2vw,11px)!important;}
.flow-screen{padding:clamp(10px, 3.5vw, 22px) 0!important;min-height:auto!important;background:var(--brand-bg)!important;}
.flow-container{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:var(--gap-sm)!important;}
.flow-progress,.steps-bar,.step-flow-bar{
  width:100%!important;
  max-width:100%!important;
  margin:0 auto var(--gap-sm)!important;
}
.flow-progress-item,.step-flow-item,.step-item{min-width:0!important;}
.step-label,.flow-progress-label{font-size:clamp(9px,2.4vw,11px)!important;white-space:normal!important;line-height:1.2!important;}
.step-circle,.flow-progress-number{width:clamp(26px,7vw,34px)!important;height:clamp(26px,7vw,34px)!important;font-size:clamp(11px,3vw,14px)!important;}
.flow-card,.start-card,.summary-screen,.payment-card{
  width:100%!important;
  max-width:100%!important;
  border-radius:var(--radius-fluid)!important;
}
.flow-card{padding:clamp(16px, 4.5vw, 26px)!important;background:transparent!important;box-shadow:none!important;border:0!important;}
.step-main-title,.flow-title,.section-header h2,.payment-title{
  font-size:clamp(1.2rem,5vw,1.65rem)!important;
  line-height:1.15!important;
  text-align:center!important;
  color:var(--brand-text)!important;
}
.step-subtitle,.flow-subtitle,.payment-subtitle,.form-hint,.small-copy{
  font-size:clamp(.78rem,3vw,.92rem)!important;
  line-height:1.45!important;
  text-align:center!important;
  color:var(--brand-muted)!important;
}
.form-label,.form-label-white{font-size:clamp(.82rem,3vw,.95rem)!important;color:var(--brand-text)!important;text-align:center!important;}
.form-input,input[type="tel"]{
  min-height:clamp(50px,12vw,58px)!important;
  font-size:clamp(1rem,4vw,1.15rem)!important;
  border-radius:clamp(12px,3.4vw,16px)!important;
  border:1.5px solid var(--brand-line)!important;
  background:#fff!important;
  color:var(--brand-text)!important;
  text-align:center!important;
}
.btn,.btn-primary,.btn-secondary,.btn-outline{
  min-height:clamp(48px,12vw,58px)!important;
  font-size:clamp(.9rem,3.4vw,1rem)!important;
  border-radius:999px!important;
}
.btn-primary,.payment-btn,.btn{
  background:var(--brand-blue-2)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(6,18,56,.16)!important;
}
.btn-primary[style*="--secondary"], .start-cta, #btnStep1, #btnStep2, #btnStep3, #btnConfirmSummary{
  background:var(--brand-accent)!important;
  color:var(--brand-blue)!important;
}
.operators-grid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:var(--gap-sm)!important;
  margin:0 auto var(--gap-md)!important;
}
.operator-card{
  min-height:clamp(82px,22vw,104px)!important;
  border-radius:clamp(14px,3.8vw,18px)!important;
  padding:clamp(12px,3.5vw,18px) clamp(8px,2.5vw,12px)!important;
  border-color:var(--brand-line)!important;
  background:#fff!important;
}
.operator-card.selected{border-color:var(--brand-blue-3)!important;box-shadow:0 0 0 3px rgba(18,58,122,.12)!important;}
.operator-logo,.vivo-color,.claro-color,.tim-color,.oi-color,.correios-color,.algar-color{
  color:var(--brand-blue-2)!important;
  font-size:clamp(1.05rem,4.4vw,1.35rem)!important;
  line-height:1.1!important;
}
.operator-name{font-size:clamp(.68rem,2.6vw,.78rem)!important;color:var(--brand-muted)!important;}
.options-grid-3x3{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:var(--gap-xs)!important;
}
.valor-card{
  min-height:clamp(72px,20vw,92px)!important;
  border-radius:clamp(14px,3.5vw,18px)!important;
  padding:clamp(10px,3vw,14px) clamp(6px,2vw,10px)!important;
  background:#fff!important;
  border:1px solid var(--brand-line)!important;
}
.valor-card.selected{border-color:var(--brand-success)!important;box-shadow:0 8px 18px rgba(0,163,92,.15)!important;}
.valor-card-price{font-size:clamp(1rem,4.2vw,1.25rem)!important;color:var(--brand-text)!important;}
.valor-card-bonus{font-size:clamp(.62rem,2.4vw,.75rem)!important;color:var(--brand-blue-3)!important;}
.bonus-card,.bonus-card-flow,.payment-amount-box,.payment-qr-box,.pix-code-box,.payment-timer,.payment-processing-note{
  border-color:var(--brand-line)!important;
}
.bonus-card,.bonus-card-flow{width:100%!important;max-width:100%!important;border-radius:var(--radius-fluid)!important;}
.bonus-card-price,.bonus-card-flow strong{font-size:clamp(1.25rem,5vw,1.7rem)!important;color:var(--brand-text)!important;}
.bonus-card-gb,.bonus-side strong{font-size:clamp(1.4rem,6vw,1.9rem)!important;color:var(--brand-blue-3)!important;}
.inline-summary,.summary-inline,.payment-summary-inline{
  width:100%!important;
  margin:var(--gap-sm) auto!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  text-align:center!important;
}
.inline-summary *,.summary-inline *{text-align:center!important;}
.footer{background:var(--brand-blue)!important;padding:clamp(20px,5vw,30px) 0 0!important;margin-top:0!important;}
.footer-grid{display:grid!important;grid-template-columns:1fr!important;gap:clamp(16px,4vw,22px)!important;justify-items:center!important;text-align:center!important;}
.footer-brand,.footer-col,.footer-bottom p,.footer-disclaimer{text-align:center!important;}
.footer-brand p,.footer-disclaimer,.footer-col ul li a,.footer-contact-item span{font-size:clamp(.72rem,2.8vw,.82rem)!important;line-height:1.5!important;}
.footer-col h5{font-size:clamp(.82rem,3vw,.95rem)!important;}
.footer-bottom{background:var(--brand-blue)!important;margin-top:clamp(14px,4vw,22px)!important;}
.footer-bottom-inner{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding-top:clamp(12px,3vw,16px)!important;padding-bottom:clamp(14px,4vw,20px)!important;}
.footer-links{display:flex!important;justify-content:center!important;align-items:center!important;gap:clamp(10px,3vw,16px)!important;flex-wrap:wrap!important;}
.footer-links a{font-size:clamp(.72rem,2.8vw,.82rem)!important;color:rgba(255,255,255,.86)!important;}
.payment-page-body{min-height:100dvh!important;display:flex!important;flex-direction:column!important;background:var(--brand-bg)!important;}
.payment-main-shell{padding:clamp(10px,3vw,20px) 0!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;}
.payment-flow-container{display:flex!important;flex-direction:column!important;align-items:center!important;gap:var(--gap-sm)!important;}
.payment-card{padding:clamp(16px,4.5vw,26px)!important;background:#fff!important;border:1px solid var(--brand-line)!important;box-shadow:0 12px 28px rgba(15,23,42,.06)!important;}
.payment-title{color:var(--brand-text)!important;}
.payment-amount-box strong{font-size:clamp(1.65rem,7vw,2.1rem)!important;color:var(--brand-blue-3)!important;}
.payment-qr-wrapper,#qrcode{min-width:clamp(145px,46vw,180px)!important;min-height:clamp(145px,46vw,180px)!important;}
.pix-code-box{font-size:clamp(.68rem,2.6vw,.78rem)!important;max-height:clamp(110px,28vh,150px)!important;}
.payment-small-footer{margin-top:auto!important;background:var(--brand-blue)!important;}
@media (max-width:360px){
  .top-bar-link{font-size:9px!important;padding-left:2px!important;padding-right:2px!important;}
  .operators-grid{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .options-grid-3x3{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .header-actions{gap:2px!important;}
}
@media (min-width:700px){
  :root{--app-max:560px;}
  .operators-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .options-grid-3x3{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .footer-grid{max-width:560px!important;}
}
@media (min-width:1024px){
  :root{--app-max:600px;}
  body.flow-active .flow-screen,.payment-main-shell{align-items:flex-start!important;}
  .top-bar-inner,.header-inner,.flow-container,.footer-grid,.footer-bottom-inner,.payment-flow-container{max-width:600px!important;}
  .top-bar-nav{justify-content:center!important;}
  .footer-grid,.footer-bottom-inner{text-align:center!important;}
}
@media (prefers-color-scheme:dark){
  :root{--brand-bg:#F6F8FC;--brand-surface:#FFFFFF;--brand-text:#0F172A;--brand-muted:#64748B;--brand-line:#E2E8F0;}
  body{background:var(--brand-bg)!important;color:var(--brand-text)!important;}
}

/* =========================================================
   V21 — Refinamento responsivo, UX e visual premium mantendo paleta anterior
   ========================================================= */
:root{
  --primary:#163B8C;
  --primary-dark:#0F2B66;
  --primary-light:#2563EB;
  --page-bg:#F5F7FB;
  --card-soft:#FFFFFF;
  --line-soft:#E6ECF5;
  --soft-blue:#EEF4FF;
}

html{scroll-padding-top:72px;}
body{background:var(--page-bg);}

/* largura única para menu, conteúdo e footer */
.header-inner,
.top-bar-inner,
.footer .container,
.footer .container-wide,
.flow-container,
.step-progress-wrap{
  max-width:560px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

@media(min-width:900px){
  .header-inner,
  .top-bar-inner,
  .footer .container,
  .footer .container-wide,
  .flow-container,
  .step-progress-wrap{max-width:620px;}
  .top-bar-nav{margin-left:0;justify-content:center;width:100%;}
  .header-inner{justify-content:space-between;}
}

/* topo inicial mais compacto e mais limpo */
.blue-screen{
  min-height:calc(100vh - 60px);
  padding:clamp(22px,5vw,44px) 18px clamp(28px,6vw,54px);
  background:linear-gradient(180deg,var(--primary) 0%,var(--primary-light) 100%);
}
.start-card{max-width:520px;}
.start-badge{font-size:clamp(.7rem,2vw,.78rem);padding:7px 13px;margin-bottom:14px;}
.start-card h1{font-size:clamp(2rem,7.5vw,3.35rem);line-height:1.04;margin-bottom:12px;}
.start-card p{font-size:clamp(.88rem,2.8vw,1rem);line-height:1.55;margin-bottom:20px;}
.btn-start{height:clamp(52px,8vw,58px);border-radius:18px;box-shadow:0 14px 30px rgba(15,43,102,.28);}

/* fluxo sem sensação de balão único */
body.flow-active .flow-screen{
  min-height:calc(100vh - 60px);
  background:linear-gradient(180deg,var(--primary) 0%,var(--primary-light) 100%);
  padding:clamp(12px,3vw,22px) 16px clamp(18px,4vw,28px);
}
.flow-container{display:flex;flex-direction:column;align-items:center;}
body.flow-active .flow-card{
  width:100%;
  max-width:560px;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
}

/* barra de etapas faz parte do conteúdo central */
.step-progress-wrap{
  padding:8px 4px 16px;
}
.step-progress{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  gap:0;
}
.progress-item{min-width:46px;text-align:center;color:rgba(255,255,255,.72);}
.progress-item span{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:12px;
  font-weight:900;
}
.progress-item small{display:block;margin-top:5px;font-size:10px;font-weight:800;letter-spacing:-.01em;}
.progress-item.active span,
.progress-item.completed span{background:#fff;color:var(--primary);border-color:#fff;}
.progress-line{
  flex:1;
  max-width:72px;
  height:1px;
  background:rgba(255,255,255,.24);
  margin:0 2px 18px;
}
.progress-line.completed{background:rgba(255,255,255,.78);}

/* tipografia mais consistente */
.flow-title,
.step-main-title,
.value-title{
  font-size:clamp(1.35rem,5vw,1.9rem)!important;
  line-height:1.15!important;
  font-weight:900!important;
  letter-spacing:-.035em;
  text-align:center!important;
  margin-bottom:14px!important;
}
.flow-subtitle{font-size:clamp(.82rem,2.7vw,.95rem);line-height:1.55;}
.flow-field-label,
.form-label{
  display:block;
  text-align:center;
  color:#fff;
  font-size:clamp(.86rem,2.8vw,.95rem);
  font-weight:800;
  margin-bottom:10px;
}

/* cards de bônus mais premium e separados */
.flow-promo-block{width:100%;margin:0 auto 18px;}
.bonus-cards-list,.bonus-stack{display:flex;flex-direction:column;gap:12px;}
.bonus-card-flow{
  border-radius:20px;
  padding:clamp(14px,4vw,18px);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 10px 30px rgba(15,23,42,.12);
}
.bonus-card-flow.featured{border-color:#00C853;}
.bonus-label{font-size:clamp(.62rem,2vw,.7rem);}
.bonus-card-flow strong{font-size:clamp(1.35rem,6vw,1.75rem);}
.bonus-side strong{color:var(--primary);font-size:clamp(1.55rem,7vw,2rem);}
.bonus-side span{font-size:clamp(.58rem,2vw,.68rem);}
.bonus-disclaimer,.bonus-note{
  color:rgba(255,255,255,.74)!important;
  text-align:center;
  font-size:clamp(.68rem,2.2vw,.78rem);
  line-height:1.45;
  margin:10px auto 0;
  max-width:420px;
}

/* campos e botões */
.flow-card .form-input{
  height:clamp(52px,9vw,58px);
  border-radius:18px;
  border:0;
  box-shadow:0 10px 28px rgba(15,23,42,.14);
  font-size:clamp(1rem,4vw,1.12rem);
}
.flow-btn,
.btn-primary{
  min-height:clamp(50px,8vw,56px);
  border-radius:18px!important;
  font-weight:900!important;
  letter-spacing:.01em;
}
body.flow-active .btn-primary,
.final-actions .btn-primary{
  background:linear-gradient(135deg,#FFC800,#FACC15)!important;
  color:var(--primary)!important;
  box-shadow:0 12px 26px rgba(15,23,42,.16)!important;
}
.flow-btn.ghost,
.final-actions .ghost{
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.30)!important;
}
.security-after-button{margin-top:16px;}
.security-after-button p{font-size:clamp(.82rem,2.8vw,.95rem);}
.security-after-button span{font-size:clamp(.76rem,2.5vw,.86rem);}
.security-after-button small{font-size:clamp(.65rem,2vw,.74rem);max-width:420px;margin:0 auto;}

/* operadoras com cor da identidade do site */
.flow-card .operators-inline{gap:10px;}
.flow-card .operators-inline .operator-card{
  background:#fff;
  border:1px solid rgba(255,255,255,.82)!important;
  border-radius:18px;
  padding:clamp(12px,3vw,16px) 10px;
  box-shadow:0 10px 26px rgba(15,23,42,.11);
}
.flow-card .operators-inline .operator-card.selected{
  border-color:#00C853!important;
  box-shadow:0 0 0 3px rgba(0,200,83,.18),0 12px 28px rgba(15,23,42,.12)!important;
}
.flow-card .operators-inline .operator-logo,
.flow-card .operators-inline .vivo-color,
.flow-card .operators-inline .claro-color,
.flow-card .operators-inline .tim-color,
.flow-card .operators-inline .oi-color,
.flow-card .operators-inline .correios-color,
.flow-card .operators-inline .algar-color{
  color:var(--primary)!important;
  font-size:clamp(1.05rem,4vw,1.35rem);
}
.flow-card .operators-inline .operator-name{color:#64748B;font-weight:700;}

/* valores com melhor distribuição */
.options-grid-3x3.final-values-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,2.5vw,12px);
}
.final-values-grid .valor-card{
  min-height:clamp(62px,13vw,76px);
  border-radius:16px;
  background:linear-gradient(180deg,#FFFFFF 0%,#EEF4FF 100%);
  border:1px solid rgba(255,255,255,.88);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.final-values-grid .valor-card:hover{transform:translateY(-2px);}
.final-values-grid .valor-card.selected{
  transform:translateY(-2px);
  border-color:#FACC15!important;
  box-shadow:0 10px 25px rgba(250,204,21,.20)!important;
}
.final-values-grid .valor-card-price{font-size:clamp(1rem,4.2vw,1.25rem);color:#0F172A;}
.final-values-grid .valor-card-bonus{font-size:clamp(.6rem,2.2vw,.72rem);color:var(--primary);}

/* resumo integrado ao fundo, sem balão sobrepondo */
.value-summary-card,
.inline-flow-summary{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:18px 0 0!important;
}
.featured-bonus-final{margin:0 0 14px!important;}
.payment-label{text-align:center;color:rgba(255,255,255,.82);font-size:.82rem;}
.pix-card-final{
  max-width:100%;
  box-shadow:0 10px 26px rgba(15,23,42,.12)!important;
}
.final-actions{width:100%;grid-template-columns:.86fr 1.4fr;gap:10px;margin-top:16px;}

/* tela de resumo final mais clean */
body.flow-active .summary-screen.active{
  width:100%;
  max-width:560px;
  background:transparent!important;
  border-radius:0!important;
  padding:0!important;
  box-shadow:none!important;
  color:#fff!important;
}
body.flow-active .summary-screen.active .flow-title{color:#fff!important;}
body.flow-active .summary-screen.active .flow-subtitle{color:rgba(255,255,255,.78)!important;}
body.flow-active .summary-box{
  background:rgba(255,255,255,.98);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 12px 32px rgba(15,23,42,.14);
}

/* footer discreto e centralizado */
.footer{
  padding:16px 0!important;
  background:#fff;
  border-top:1px solid var(--line-soft);
  text-align:center;
}
.footer-grid{display:none!important;}
.footer-bottom{border-top:0!important;padding-top:0!important;}
.footer-bottom-inner{
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  text-align:center!important;
}
.footer-bottom p,.footer-disclaimer{font-size:clamp(.68rem,2vw,.78rem);line-height:1.55;color:#64748B;max-width:560px;margin-left:auto;margin-right:auto;}
.footer-links{justify-content:center!important;gap:14px;flex-wrap:wrap;}
.footer-links a{font-size:.76rem;color:var(--primary);font-weight:800;}

@media(max-width:380px){
  body.flow-active .flow-screen{padding-left:12px!important;padding-right:12px!important;}
  .options-grid-3x3.final-values-grid{gap:7px;}
  .progress-item small{font-size:9px;}
  .progress-item{min-width:40px;}
  .progress-line{margin-bottom:18px;}
  .final-actions{grid-template-columns:1fr;}
}

@media(min-width:768px){
  body.flow-active .flow-screen{min-height:calc(100vh - 70px);padding-top:18px;}
  .step-progress-wrap{padding-top:12px;}
  .footer{padding:18px 0!important;}
}


/* =============================================
   AJUSTES V22 — cores das fontes e operadoras clean
   ============================================= */
.hero-bonus-info,
.promo-info.hero-bonus-info{
  color:rgba(255,255,255,.72)!important;
  font-size:12px!important;
  line-height:1.5!important;
  font-weight:500!important;
  text-align:center!important;
}

/* Resumo fica em fundo branco: texto escuro, suave e premium */
.summary-screen.active,
body.flow-active .summary-screen.active{
  background:#FFFFFF!important;
  color:#0F172A!important;
}

body.flow-active .summary-screen.active .flow-title,
.summary-screen.active .flow-title,
.summary-screen .flow-title{
  color:#0F172A!important;
  font-weight:700!important;
  font-size:clamp(1.35rem,4vw,1.65rem)!important;
  letter-spacing:-.03em!important;
  text-align:center!important;
  margin-bottom:6px!important;
}

.summary-screen.active .flow-subtitle,
.summary-screen .flow-subtitle,
body.flow-active .summary-screen.active .flow-subtitle{
  color:#64748B!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.5!important;
  text-align:center!important;
}

/* Cards de operadora com apenas o nome */
.operator-card{
  min-height:76px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

.operator-logo{
  margin-bottom:0!important;
  color:var(--primary, #163B8C)!important;
  font-weight:900!important;
  font-size:clamp(1.05rem,3.5vw,1.28rem)!important;
  letter-spacing:-.03em!important;
}

.operator-card .operator-name{
  display:none!important;
}

.vivo-color,.claro-color,.tim-color,.oi-color,.correios-color,.algar-color{
  color:var(--primary, #163B8C)!important;
}

@media(max-width:480px){
  .operator-card{min-height:68px!important;padding:14px 10px!important;}
  .hero-bonus-info,.promo-info.hero-bonus-info{font-size:11px!important;}
}

/* =========================================================
   V23 — Responsividade + hierarquia de cores refinada
   ========================================================= */
:root{
  --brand-blue:#163B8C;
  --brand-blue-dark:#0F2B66;
  --brand-blue-soft:#2563EB;
  --brand-yellow:#FFC800;
  --brand-green:#00C853;
  --ink:#0F172A;
  --ink-soft:#334155;
  --muted:#64748B;
  --surface:#FFFFFF;
  --surface-soft:#F8FAFC;
  --line:#E2E8F0;
}

html,body{overflow-x:hidden;}
body{color:var(--ink);background:#F5F7FB;}

/* largura única para menu, conteúdo e footer */
.top-bar-inner,
.header-inner,
.container,
.container-wide,
.flow-container,
.footer .container-wide,
.footer-bottom-inner{
  width:100%;
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
}

@media (min-width:768px){
  .top-bar-nav{margin-left:0;width:100%;justify-content:center;gap:6px;}
  .header-inner{justify-content:center;gap:clamp(32px,7vw,96px);}
  .footer-grid,.footer-bottom-inner{text-align:center;justify-content:center;align-items:center;}
  .footer-links{justify-content:center;}
}

/* hero/fluxo com azul anterior, mas hierarquia mais premium */
body.flow-active .flow-screen,
.blue-screen{
  background:linear-gradient(180deg,var(--brand-blue) 0%, var(--brand-blue-soft) 100%)!important;
}

.flow-screen{
  display:none;
  min-height:calc(100svh - 60px);
  padding:clamp(16px,4vw,36px) clamp(14px,4vw,24px) clamp(22px,5vw,42px)!important;
}
.flow-screen.active{display:grid!important;place-items:start center;}
.flow-container{max-width:560px!important;}
.flow-card{width:100%;}

.flow-title,
.step-title{
  font-size:clamp(1.35rem,4.7vw,2rem)!important;
  line-height:1.14!important;
  letter-spacing:-.03em!important;
  font-weight:850!important;
}
.flow-subtitle,
.step-subtitle{
  font-size:clamp(.86rem,2.8vw,.98rem)!important;
  line-height:1.5!important;
  color:rgba(255,255,255,.78)!important;
}

/* propaganda/bônus */
.hero-bonus-info,
.bonus-note,
.flow-promo-block p,
.flow-promo-block .bonus-note{
  color:rgba(255,255,255,.72)!important;
  font-size:clamp(.72rem,2.6vw,.82rem)!important;
  line-height:1.5!important;
  max-width:460px;
  margin-left:auto;
  margin-right:auto;
}

.bonus-card,
.bonus-card-flow,
.final-featured-card{
  border-radius:clamp(16px,4vw,22px)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.10)!important;
}
.bonus-card-flow strong{font-size:clamp(1.35rem,5vw,1.75rem)!important;}
.bonus-side strong{font-size:clamp(1.55rem,6vw,2.05rem)!important;color:var(--brand-blue)!important;}
.bonus-side span,.bonus-card-desc{color:#334155!important;}

/* barra de etapas integrada ao conteúdo central */
.flow-progress,
.progress-steps,
.steps-bar{
  width:100%;
  max-width:560px;
  margin:0 auto clamp(14px,3.5vw,22px)!important;
  padding:0!important;
}
.step-circle{
  width:clamp(26px,7vw,32px)!important;
  height:clamp(26px,7vw,32px)!important;
  font-size:clamp(11px,2.5vw,13px)!important;
}
.step-label{font-size:clamp(10px,2.4vw,12px)!important;}

/* inputs e botões */
.form-input,
.flow-card .form-input{
  height:clamp(50px,13vw,58px)!important;
  border-radius:16px!important;
  font-size:clamp(1rem,4vw,1.12rem)!important;
  color:var(--ink)!important;
}
.btn,.flow-btn{
  min-height:clamp(50px,13vw,56px)!important;
  border-radius:16px!important;
  font-size:clamp(.92rem,3.5vw,1rem)!important;
  font-weight:800!important;
}
.btn-primary,.flow-btn.btn-primary{
  background:linear-gradient(135deg,var(--brand-yellow),#FFD84D)!important;
  color:var(--brand-blue)!important;
}

/* operadoras: somente nome, cor do site e melhor distribuição */
.operators-grid,
.operators-inline{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(10px,3vw,14px)!important;
}
.operator-card{
  min-height:clamp(58px,16vw,76px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(12px,3.5vw,18px)!important;
  background:var(--surface)!important;
  border:1.5px solid rgba(226,232,240,.95)!important;
  border-radius:18px!important;
}
.operator-logo,
.operator-name,
.vivo-color,.claro-color,.tim-color,.oi-color,.correios-color,.algar-color{
  color:var(--brand-blue)!important;
}
.operator-logo{
  font-size:clamp(1.04rem,4.2vw,1.28rem)!important;
  font-weight:850!important;
  margin:0!important;
  letter-spacing:-.02em!important;
}
.operator-name{display:none!important;}
.operator-card.selected{
  border-color:var(--brand-green)!important;
  box-shadow:0 8px 22px rgba(0,200,83,.16)!important;
}

/* valores */
.options-grid-3x3,
.final-values-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(8px,2.6vw,12px)!important;
}
.valor-card{
  min-height:clamp(62px,17vw,78px)!important;
  border-radius:16px!important;
  background:#fff!important;
  border:1.5px solid #E6ECF5!important;
  box-shadow:0 6px 16px rgba(15,23,42,.06)!important;
}
.valor-card.selected{
  border-color:var(--brand-blue-soft)!important;
  box-shadow:0 10px 24px rgba(37,99,235,.18)!important;
}
.valor-card-price{color:var(--ink)!important;font-size:clamp(1.02rem,4.2vw,1.28rem)!important;}
.valor-card-bonus{color:var(--brand-blue)!important;font-size:clamp(.62rem,2.6vw,.72rem)!important;}

/* resumo com fundo branco: sem aparência de alerta e sem balão sobreposto */
.summary-screen,
body.flow-active .summary-screen.active{
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  color:var(--ink)!important;
}
.summary-header{
  background:transparent!important;
  border:0!important;
  padding:0 0 14px!important;
}
.summary-title,
body.flow-active .summary-screen.active .flow-title{
  color:var(--ink)!important;
  font-weight:750!important;
  font-size:clamp(1.25rem,4.6vw,1.75rem)!important;
  letter-spacing:-.025em!important;
}
.summary-subtitle,
body.flow-active .summary-screen.active .flow-subtitle{
  color:var(--muted)!important;
  font-size:clamp(.86rem,2.8vw,.96rem)!important;
  font-weight:500!important;
}
.summary-box{
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  margin:14px 0 18px!important;
}
.summary-box div{padding:clamp(11px,3vw,15px) clamp(12px,4vw,16px)!important;}
.summary-box span{color:var(--muted)!important;font-size:clamp(.78rem,2.7vw,.9rem)!important;}
.summary-box strong{color:var(--ink)!important;font-size:clamp(.86rem,3vw,1rem)!important;}
.summary-box .total{background:var(--surface-soft)!important;}
.summary-box .total strong{color:var(--brand-blue)!important;font-size:clamp(1.15rem,4.4vw,1.45rem)!important;}

/* resumo abaixo dos valores/pix quando usado */
.inline-summary,
.final-inline-summary{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:rgba(255,255,255,.86)!important;
  text-align:center!important;
  margin:clamp(14px,4vw,20px) auto 0!important;
}

/* footer compacto, alinhado e no fundo */
.footer{
  padding:clamp(16px,4vw,26px) 0!important;
  background:#fff!important;
  border-top:1px solid var(--line)!important;
}
.footer-bottom{padding:0!important;border-top:0!important;}
.footer-bottom-inner{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  text-align:center!important;
  align-items:center!important;
  justify-content:center!important;
}
.footer-bottom p,.footer-disclaimer{
  max-width:780px;
  margin:0 auto!important;
  color:var(--muted)!important;
  font-size:clamp(.72rem,2.4vw,.82rem)!important;
  line-height:1.5!important;
}
.footer-links{display:flex!important;flex-wrap:wrap!important;gap:10px 16px!important;justify-content:center!important;}
.footer-links a{font-size:clamp(.76rem,2.4vw,.86rem)!important;color:var(--brand-blue)!important;font-weight:700!important;}

/* pagamento */
.receipt-card,.payment-card{
  width:min(100%,520px)!important;
  border-radius:clamp(20px,5vw,28px)!important;
}
.qr-header h1,.payment-header h2{font-size:clamp(1.25rem,5vw,1.8rem)!important;color:var(--ink)!important;}
.amount-highlight .value{color:var(--brand-blue)!important;font-size:clamp(1.6rem,7vw,2rem)!important;}
.timer-clock{color:var(--brand-blue)!important;}

@media (max-width:380px){
  .flow-screen{padding-left:12px!important;padding-right:12px!important;}
  .options-grid-3x3,.final-values-grid{gap:7px!important;}
  .valor-card{min-height:58px!important;border-radius:14px!important;}
  .operators-grid,.operators-inline{gap:8px!important;}
  .operator-card{min-height:54px!important;border-radius:15px!important;}
  .final-actions{grid-template-columns:1fr!important;}
}

@media (min-width:900px){
  .flow-screen{align-items:center!important;}
  .flow-container{max-width:600px!important;}
  .flow-card{max-width:600px;margin:auto;}
  .options-grid-3x3,.final-values-grid{gap:14px!important;}
}

/* =====================================================
   V24 — Hero inicial azul; etapas do telefone em diante
   com fundo branco, hierarquia limpa e detalhes azuis
   ===================================================== */
:root{
  --v24-blue:#163B8C;
  --v24-blue-dark:#0F2B66;
  --v24-blue-soft:#2563EB;
  --v24-bg:#FFFFFF;
  --v24-soft:#F8FAFC;
  --v24-line:#E2E8F0;
  --v24-text:#0F172A;
  --v24-muted:#64748B;
  --v24-success:#00A35C;
  --v24-yellow:#FACC15;
}

body{background:var(--v24-bg)!important;color:var(--v24-text)!important;}
.top-bar,.header{background:var(--v24-blue-dark)!important;}
.logo-text span{color:var(--v24-yellow)!important;}

/* Tela inicial permanece azul */
body:not(.flow-active) .blue-screen,
.blue-screen{
  background:linear-gradient(180deg,#163B8C 0%,#2563EB 100%)!important;
  color:#fff!important;
}
body:not(.flow-active) .start-card h1,
body:not(.flow-active) .start-card p,
body:not(.flow-active) .start-badge{color:#fff!important;}
.btn-start{
  background:var(--v24-yellow)!important;
  color:var(--v24-blue-dark)!important;
  box-shadow:0 14px 34px rgba(15,43,102,.28)!important;
}

/* Ao clicar: só o fluxo, todo em branco */
body.flow-active .start-screen{display:none!important;}
body.flow-active .flow-screen,
body.flow-active .flow-screen.active,
.flow-screen.active{
  display:flex!important;
  flex-direction:column!important;
  background:var(--v24-bg)!important;
  color:var(--v24-text)!important;
  min-height:0!important;
  padding-top:10px!important;
  padding-bottom:12px!important;
}
body.flow-active main.flow-page{background:var(--v24-bg)!important;}
body.flow-active .flow-container,
.flow-container{
  background:transparent!important;
  color:var(--v24-text)!important;
}
body.flow-active .flow-card,
.flow-card,
#mainCard{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:var(--v24-text)!important;
}

/* Barra de etapas em branco, integrada ao conteúdo */
.step-progress-wrap{
  background:var(--v24-bg)!important;
  border:0!important;
  padding-top:8px!important;
  padding-bottom:10px!important;
}
.step-progress{
  background:var(--v24-bg)!important;
  border:1px solid var(--v24-line)!important;
  box-shadow:0 8px 20px rgba(15,23,42,.04)!important;
}
.progress-item span{
  background:var(--v24-soft)!important;
  color:var(--v24-blue)!important;
  border-color:var(--v24-line)!important;
}
.progress-item.active span,
.progress-item.completed span,
.progress-item.done span{
  background:var(--v24-blue)!important;
  border-color:var(--v24-blue)!important;
  color:#fff!important;
}
.progress-item small{color:var(--v24-muted)!important;}
.progress-item.active small,
.progress-item.completed small,
.progress-item.done small{color:var(--v24-blue)!important;}
.progress-line{background:var(--v24-line)!important;}
.progress-line.completed,.progress-line.done{background:var(--v24-blue)!important;}

/* Textos das etapas: fundo branco pede azul escuro e cinza */
body.flow-active .flow-title,
body.flow-active .step-main-title,
body.flow-active .operator-title-after-promo,
body.flow-active .value-title,
body.flow-active .flow-field-label,
.flow-title,.step-main-title,.operator-title-after-promo,.value-title,.flow-field-label{
  color:var(--v24-blue-dark)!important;
  text-align:center!important;
}
body.flow-active .flow-subtitle,
.flow-subtitle{
  color:var(--v24-muted)!important;
}

/* Bônus/promos agora no branco: texto legível e menos agressivo */
.flow-promo-block .bonus-disclaimer,
.bonus-disclaimer,
.hero-bonus-info,
.bonus-note{
  color:var(--v24-muted)!important;
  text-align:center!important;
}
.bonus-card-flow,
.flow-promo-block .bonus-card-flow,
.final-featured-card,
.bonus-card{
  background:#fff!important;
  border:1.5px solid var(--v24-line)!important;
  box-shadow:0 8px 22px rgba(15,23,42,.05)!important;
}
.bonus-card-flow.featured,
.flow-promo-block .bonus-card-flow.featured,
.final-featured-card{
  border-color:var(--v24-success)!important;
}
.bonus-label,
.bonus-card-flow strong,
.bonus-card-price,
.bonus-card-price-label{color:var(--v24-text)!important;}
.bonus-side strong,.bonus-card-gb{color:var(--v24-blue)!important;}
.bonus-side span,.bonus-card-desc{color:#334155!important;}
.bonus-pill,.bonus-card-badge{background:var(--v24-success)!important;color:#fff!important;}

/* Campos, operadoras e valores no branco */
body.flow-active .form-input,
body.flow-active .flow-card .form-input,
.form-input{
  background:#fff!important;
  border:1.5px solid var(--v24-line)!important;
  color:var(--v24-text)!important;
  box-shadow:0 8px 20px rgba(15,23,42,.04)!important;
}
body.flow-active .form-input:focus,
.form-input:focus{
  border-color:var(--v24-blue-soft)!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12)!important;
}
.operator-card,
body.flow-active #step2 .operators-inline .operator-card{
  background:#fff!important;
  border:1.5px solid var(--v24-line)!important;
  box-shadow:0 6px 16px rgba(15,23,42,.04)!important;
}
.operator-card.selected,
body.flow-active #step2 .operators-inline .operator-card.selected{
  border-color:var(--v24-blue-soft)!important;
  background:#F8FAFF!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.10)!important;
}
.operator-logo,
.operator-name,
.vivo-color,.claro-color,.tim-color,.oi-color,.correios-color,.algar-color{
  color:var(--v24-blue)!important;
}

.valor-card,
.final-values-grid .valor-card{
  background:#fff!important;
  border:1.5px solid var(--v24-line)!important;
  box-shadow:0 6px 16px rgba(15,23,42,.04)!important;
}
.valor-card.selected,
.final-values-grid .valor-card.selected{
  border-color:var(--v24-blue-soft)!important;
  background:#F8FAFF!important;
  box-shadow:0 10px 24px rgba(37,99,235,.14)!important;
}
.valor-card-price{color:var(--v24-text)!important;}
.valor-card-bonus{color:var(--v24-blue)!important;}

/* Botões: azul nas etapas brancas */
body.flow-active .btn-primary,
body.flow-active .flow-btn,
.flow-btn.btn-primary,
.btn-primary{
  background:linear-gradient(135deg,var(--v24-blue-dark),var(--v24-blue))!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(22,59,140,.16)!important;
}
body.flow-active .flow-btn.ghost,
body.flow-active .btn-secondary,
.flow-btn.ghost,.btn-secondary{
  background:#fff!important;
  color:var(--v24-blue)!important;
  border:1.5px solid var(--v24-line)!important;
  box-shadow:none!important;
}
.security-after-button p{color:var(--v24-blue-dark)!important;}
.security-after-button span,.security-after-button small{color:var(--v24-muted)!important;}

/* Resumo/Pix no branco sem balão sobreposto */
.inline-flow-summary,
.value-summary-card,
.summary-screen.active,
body.flow-active .summary-screen.active{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:var(--v24-text)!important;
}
.payment-label{color:#334155!important;}
.payment-selected,.pix-card-final{
  background:#fff!important;
  border:1.5px solid var(--v24-success)!important;
  box-shadow:0 6px 16px rgba(15,23,42,.04)!important;
}
.pix-left strong,.payment-selected strong{color:var(--v24-blue)!important;}
.pix-check{background:var(--v24-blue)!important;color:#fff!important;}
.summary-box{
  background:#fff!important;
  border:1px solid var(--v24-line)!important;
  border-radius:18px!important;
}
.summary-box span{color:var(--v24-muted)!important;}
.summary-box strong,.summary-box .total strong{color:var(--v24-blue-dark)!important;}
.summary-box .total{background:var(--v24-soft)!important;}

/* Footer pequeno no branco durante o fluxo */
body.flow-active main.flow-page ~ section{display:none!important;}
body.flow-active main.flow-page ~ footer.footer{
  display:block!important;
  margin-top:auto!important;
  background:#fff!important;
  border-top:1px solid var(--v24-line)!important;
  padding:0!important;
}
body.flow-active .footer-grid{display:none!important;}
body.flow-active .footer-bottom{
  background:#fff!important;
  border-top:0!important;
  padding:12px 0!important;
}
body.flow-active .footer-bottom p,
body.flow-active .footer-disclaimer{
  color:var(--v24-muted)!important;
}
body.flow-active .footer-links a{
  color:var(--v24-blue)!important;
}

/* Pagamento segue o mesmo padrão branco + azul */
.payment-layout-page,
.payment-main-shell{background:#fff!important;color:var(--v24-text)!important;}
.payment-title-block h1,.qr-header h1{color:var(--v24-blue-dark)!important;}
.payment-title-block p,.qr-header .sub,.payment-note{color:var(--v24-muted)!important;}
.payment-amount-box,.payment-qr-area,.payment-timer,.pix-code-box{
  background:#fff!important;
  border-color:var(--v24-line)!important;
}
.payment-amount-box strong,.amount-highlight .value,.payment-timer strong{color:var(--v24-blue)!important;}
.payment-main-btn,.copyPixBtn,#copyPixBtn{
  background:linear-gradient(135deg,var(--v24-blue-dark),var(--v24-blue))!important;
  color:#fff!important;
}

@media(max-width:380px){
  body.flow-active .flow-screen{padding-top:8px!important;}
  .step-progress{padding:8px 6px!important;}
}


/* === AJUSTE V25: rodapé premium, compacto e alinhado ao conteúdo === */
.footer.footer-premium{
  width:100%!important;
  margin-top:0!important;
  padding:18px 16px!important;
  background:#FFFFFF!important;
  border-top:1px solid #E2E8F0!important;
  box-shadow:none!important;
}
.footer-premium-inner{
  width:100%!important;
  max-width:520px!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:8px!important;
}
.footer.footer-premium .footer-copy{
  margin:0!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.45!important;
  color:#334155!important;
}
.footer.footer-premium .footer-disclaimer{
  max-width:480px!important;
  margin:0 auto!important;
  font-size:11px!important;
  font-weight:400!important;
  line-height:1.55!important;
  color:#64748B!important;
}
.footer.footer-premium .footer-links{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:14px!important;
  margin-top:2px!important;
}
.footer.footer-premium .footer-links a{
  font-size:12px!important;
  font-weight:700!important;
  color:#163B8C!important;
  text-decoration:none!important;
}
.footer.footer-premium .footer-links a:hover{
  color:#2563EB!important;
}
body.flow-active main.flow-page ~ footer.footer-premium{
  display:block!important;
  margin-top:auto!important;
}
@media(min-width:768px){
  .footer.footer-premium{padding:20px 24px!important;}
  .footer-premium-inner{max-width:560px!important;}
}
@media(max-width:420px){
  .footer.footer-premium{padding:14px 14px!important;}
  .footer.footer-premium .footer-disclaimer{font-size:10.5px!important;}
  .footer.footer-premium .footer-links{gap:12px!important;}
}


/* === AJUSTE V26: valores R$20 a R$100 + rodapé com respiro === */
.footer,
.payment-small-footer{
  padding-top:24px!important;
  padding-bottom:24px!important;
}

.footer-bottom{
  padding:18px 0!important;
}

.footer-bottom-inner{
  max-width:520px!important;
  margin:0 auto!important;
  padding-left:20px!important;
  padding-right:20px!important;
  text-align:center!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
}

.footer-bottom p,
.footer-disclaimer,
.footer-copy{
  max-width:480px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  line-height:1.8!important;
  font-size:12px!important;
  letter-spacing:.01em!important;
}

.footer-links{
  margin-top:14px!important;
  gap:20px!important;
  row-gap:10px!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:wrap!important;
}

.footer-links a{
  line-height:1.4!important;
  padding:2px 0!important;
}

@media (max-width:480px){
  .footer,
  .payment-small-footer{padding-top:20px!important;padding-bottom:20px!important;}
  .footer-bottom{padding:16px 0!important;}
  .footer-bottom-inner{padding-left:16px!important;padding-right:16px!important;gap:12px!important;}
  .footer-bottom p,
  .footer-disclaimer,
  .footer-copy{font-size:11px!important;line-height:1.75!important;}
  .footer-links{gap:16px!important;margin-top:12px!important;}
}

/* =========================================================
   V31 — REVEAL PROGRESSIVO + LOADING NOS BOTÕES
   ========================================================= */
.reveal-block{
  opacity:0;
  transform:translateY(14px) scale(.985);
  filter:blur(2px);
  transition:
    opacity .34s ease,
    transform .34s cubic-bezier(.2,.8,.2,1),
    filter .34s ease;
  will-change:opacity,transform,filter;
}
.reveal-block.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
.form-step.active .reveal-block:nth-of-type(1){transition-delay:.04s}
.form-step.active .reveal-block:nth-of-type(2){transition-delay:.12s}
.form-step.active .reveal-block:nth-of-type(3){transition-delay:.20s}

.btn.is-loading,
.btn-start.is-loading{
  pointer-events:none!important;
  opacity:.88;
  position:relative;
  color:transparent!important;
}
.btn.is-loading::after,
.btn-start.is-loading::after{
  content:'';
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  border-top-color:#fff;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-9px;
  margin-top:-9px;
  animation:btnSpin .75s linear infinite;
}
.btn-start.is-loading::after{
  border-color:rgba(15,23,42,.28);
  border-top-color:#0F172A;
}
@keyframes btnSpin{to{transform:rotate(360deg)}}

.flow-card,
.summary-screen{
  transition:opacity .28s ease, transform .28s ease;
}
.flow-card.step-changing{
  opacity:.55;
  transform:translateY(4px);
}

/* Mantém o conteúdo sempre dentro da tela */
html,body{max-width:100%;overflow-x:hidden!important;}
*,*::before,*::after{min-width:0;box-sizing:border-box;}
.flow-container,.flow-card,.flow-screen,.start-card,.container,.container-wide{
  max-width:100%;
}

@media (min-width: 768px){
  .start-card{max-width:560px;margin-inline:auto;}
  .btn-start{max-width:520px;margin-inline:auto;}
}
@media (max-width: 480px){
  .reveal-block{transform:translateY(10px) scale(.99);}
  .btn.is-loading::after,.btn-start.is-loading::after{width:16px;height:16px;margin-left:-8px;margin-top:-8px;}
}

/* =========================================================
   V31 — AJUSTES DE LARGURA, BADGE E RODAPÉ
   ========================================================= */
.start-screen .btn-start,
.hero-cta .btn,
.btn-start{
  width:100%!important;
  max-width:520px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.bonus-card-flow,
.flow-promo-block .bonus-card-flow,
.final-featured-card{
  overflow:visible!important;
  position:relative!important;
}
.bonus-pill,
.bonus-card-badge{
  top:-12px!important;
  right:14px!important;
  white-space:nowrap!important;
  z-index:3!important;
  line-height:1!important;
  padding:6px 12px!important;
  border-radius:999px!important;
}
body.flow-active main.flow-page ~ footer.footer{
  display:block!important;
}
.footer,
.payment-small-footer{
  width:100%!important;
  background:#061238!important;
  border-top:1px solid rgba(226,232,240,.65)!important;
  padding:0!important;
  margin:0!important;
}
.footer-bottom,
.payment-small-footer .footer-bottom{
  width:100%!important;
  background:#061238!important;
  padding:24px 16px!important;
  margin:0!important;
}
.footer-bottom-inner,
.footer-premium-inner,
.payment-small-footer .footer-bottom-inner{
  width:100%!important;
  max-width:520px!important;
  margin:0 auto!important;
  text-align:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  color:rgba(255,255,255,.72)!important;
}
.footer-bottom p,
.footer-copy,
.footer-disclaimer,
.payment-small-footer p{
  max-width:480px!important;
  margin:0 auto!important;
  color:rgba(255,255,255,.72)!important;
  font-size:12px!important;
  line-height:1.75!important;
  text-align:center!important;
}
.footer-links,
.payment-small-footer .footer-links{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:18px!important;
  margin-top:8px!important;
}
.footer-links a,
.payment-small-footer .footer-links a{
  color:#8AB4FF!important;
  font-size:12px!important;
  font-weight:700!important;
  text-decoration:none!important;
}
.payment-layout-page{
  min-height:100vh!important;
  display:flex!important;
  flex-direction:column!important;
  background:#F8FAFC!important;
}
.payment-main-shell{
  flex:1 0 auto!important;
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  padding:20px 16px 28px!important;
}
.payment-flow-container{
  width:100%!important;
  max-width:520px!important;
  margin:0 auto!important;
}
.payment-small-footer{
  flex-shrink:0!important;
}
@media (min-width:1024px){
  .start-screen .start-card{max-width:620px!important;}
  .blue-screen{padding-left:24px!important;padding-right:24px!important;}
}
@media (max-width:480px){
  .footer-bottom,.payment-small-footer .footer-bottom{padding:20px 14px!important;}
  .footer-bottom p,.footer-copy,.footer-disclaimer,.payment-small-footer p{font-size:11px!important;line-height:1.7!important;}
  .bonus-pill,.bonus-card-badge{font-size:10px!important;right:10px!important;padding:5px 10px!important;}
}

/* =============================================
   V32 — Selo verde no card de valor selecionado
   ============================================= */
.valor-card{
  position:relative!important;
  overflow:visible!important;
}
.valor-card.selected{
  border-color:#00C853!important;
  box-shadow:0 10px 24px rgba(0,200,83,.16)!important;
  transform:translateY(-2px)!important;
}
.valor-card.selected::after{
  content:'✓'!important;
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  width:20px!important;
  height:20px!important;
  background:#00C853!important;
  color:#fff!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1!important;
  box-shadow:0 4px 10px rgba(0,200,83,.25)!important;
  z-index:3!important;
}
@media(max-width:380px){
  .valor-card.selected::after{
    top:6px!important;
    right:6px!important;
    width:18px!important;
    height:18px!important;
    font-size:11px!important;
  }
}

/* === V34: MENU PREMIUM / FINTECH === */
:root{
  --menu-bg: rgba(15, 42, 97, .94);
  --menu-bg-solid: #0F2B66;
  --menu-border: rgba(255,255,255,.08);
  --menu-text: rgba(255,255,255,.88);
  --menu-text-strong: #FFFFFF;
  --brand-yellow: #FACC15;
}

.top-bar{
  height:34px!important;
  background:var(--menu-bg-solid)!important;
  border-bottom:1px solid var(--menu-border)!important;
}

.top-bar-inner{
  max-width:1180px!important;
  width:100%!important;
  padding:0 22px!important;
  justify-content:center!important;
}

.top-bar-nav{
  margin-left:0!important;
  width:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:28px!important;
}

.top-bar-link{
  padding:0!important;
  color:var(--menu-text)!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:34px!important;
  opacity:.86!important;
  white-space:nowrap!important;
  transition:opacity .2s ease, transform .2s ease, color .2s ease!important;
}

.top-bar-link:hover,
.top-bar-link.active{
  color:var(--menu-text-strong)!important;
  opacity:1!important;
  transform:translateY(-1px)!important;
}

.top-bar-link.active::after{
  display:none!important;
}

.header{
  height:72px!important;
  min-height:72px!important;
  background:var(--menu-bg)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  border-bottom:1px solid var(--menu-border)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.10)!important;
  position:sticky!important;
  top:0!important;
  z-index:120!important;
}

.header-inner{
  height:72px!important;
  min-height:72px!important;
  max-width:1180px!important;
  width:100%!important;
  padding:0 22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
}

.logo{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
}

.logo::after{
  content:'';
  position:absolute;
  left:20px;
  top:50%;
  width:130px;
  height:42px;
  transform:translateY(-50%);
  background:radial-gradient(circle, rgba(250,204,21,.16), transparent 68%);
  filter:blur(18px);
  pointer-events:none;
  z-index:-1;
}

.logo-icon{
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}

.logo-icon svg{
  width:20px!important;
  height:20px!important;
  fill:#fff!important;
}

.logo-text{
  font-size:clamp(1.22rem, 2.2vw, 1.65rem)!important;
  font-weight:900!important;
  letter-spacing:-.7px!important;
  color:#fff!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.logo-text span{
  color:var(--brand-yellow)!important;
}

.header-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px!important;
  flex-shrink:0!important;
}

.header-btn,
.header-menu-btn{
  width:40px!important;
  height:40px!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  background:transparent!important;
  transition:transform .2s ease, background .2s ease, opacity .2s ease!important;
}

.header-btn:hover,
.header-menu-btn:hover{
  background:rgba(255,255,255,.08)!important;
  transform:translateY(-1px)!important;
  opacity:.96!important;
}

.header-btn svg,
.header-menu-btn svg{
  width:22px!important;
  height:22px!important;
}

.header-menu-btn{
  flex-direction:column!important;
  gap:1px!important;
}

.header-menu-btn span{
  font-size:10px!important;
  font-weight:700!important;
  line-height:1!important;
  color:#fff!important;
  opacity:.94!important;
}

.mobile-menu{
  background:rgba(15,42,97,.98)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}

.mobile-menu a{
  color:#fff!important;
  font-weight:700!important;
}

@media(max-width:767px){
  .top-bar{display:none!important;}
  .header{
    height:64px!important;
    min-height:64px!important;
  }
  .header-inner{
    height:64px!important;
    min-height:64px!important;
    padding:0 14px!important;
    max-width:100%!important;
  }
  .logo{gap:9px!important;}
  .logo-icon{
    width:30px!important;
    height:30px!important;
  }
  .logo-icon svg{
    width:18px!important;
    height:18px!important;
  }
  .logo-text{
    font-size:1.18rem!important;
    letter-spacing:-.5px!important;
  }
  .header-actions{gap:6px!important;}
  .header-btn,
  .header-menu-btn{
    width:36px!important;
    height:36px!important;
    border-radius:12px!important;
  }
  .header-btn svg,
  .header-menu-btn svg{
    width:20px!important;
    height:20px!important;
  }
}

@media(max-width:360px){
  .logo-text{font-size:1.03rem!important;}
  .logo-icon{width:28px!important;height:28px!important;}
  .header-actions{gap:3px!important;}
  .header-btn,
  .header-menu-btn{width:34px!important;height:34px!important;}
}

/* =========================================================
   V35 — Hero premium com bônus, confiança e menos vazio
   ========================================================= */
body:not(.flow-active) .start-screen.blue-screen{
  min-height:calc(100svh - 104px)!important;
  padding:clamp(34px,7vh,72px) 18px clamp(42px,8vh,82px)!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.13), transparent 36%),
    radial-gradient(circle at 20% 78%, rgba(250,204,21,.10), transparent 30%),
    linear-gradient(180deg,#163B8C 0%,#2563EB 100%)!important;
}
body:not(.flow-active) .start-screen.blue-screen::before{
  content:'';
  position:absolute;
  inset:-20%;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.06) 45%, transparent 70%);
  transform:rotate(8deg);
  pointer-events:none;
}
body:not(.flow-active) .start-card{
  position:relative!important;
  z-index:1!important;
  max-width:620px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}
body:not(.flow-active) .start-badge{
  margin-bottom:16px!important;
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.10)!important;
}
body:not(.flow-active) .start-card h1{
  max-width:620px!important;
  font-size:clamp(2.15rem,4.6vw,4.05rem)!important;
  line-height:1.02!important;
  letter-spacing:-.055em!important;
  margin:0 auto 14px!important;
}
body:not(.flow-active) .start-card p{
  max-width:450px!important;
  margin:0 auto 20px!important;
  font-size:clamp(.94rem,1.35vw,1.08rem)!important;
  line-height:1.55!important;
  color:rgba(255,255,255,.88)!important;
}
.start-bonus-mini{
  width:100%;
  max-width:520px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:4px auto 20px;
}
.start-bonus-card{
  position:relative;
  overflow:visible;
  min-height:92px;
  border-radius:20px;
  background:#FFFFFF;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 18px 38px rgba(15,23,42,.16);
  padding:16px 16px 14px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "label bonus"
    "price bonus"
    "desc desc";
  align-items:center;
  column-gap:10px;
  text-align:left;
}
.start-bonus-card.featured{
  border:2px solid #00C853;
}
.start-bonus-card em{
  position:absolute;
  top:-11px;
  right:14px;
  background:#00C853;
  color:#fff;
  border-radius:999px;
  padding:5px 10px;
  font-size:10px;
  line-height:1;
  font-style:normal;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(0,200,83,.18);
}
.start-bonus-card span{
  grid-area:label;
  font-size:10px;
  font-weight:900;
  color:#0F172A;
  letter-spacing:.02em;
}
.start-bonus-card strong{
  grid-area:price;
  font-size:clamp(1.45rem,3vw,1.8rem);
  line-height:1;
  font-weight:950;
  color:#020617;
  letter-spacing:-.04em;
}
.start-bonus-card b{
  grid-area:bonus;
  font-size:clamp(1.75rem,3.4vw,2.25rem);
  line-height:1;
  color:#163B8C;
  font-weight:950;
  letter-spacing:-.05em;
}
.start-bonus-card small{
  grid-area:desc;
  margin-top:5px;
  font-size:10px;
  font-weight:900;
  color:#0F172A;
  text-align:right;
}
body:not(.flow-active) .btn-start{
  width:100%!important;
  max-width:420px!important;
  height:58px!important;
  margin:0 auto!important;
  border-radius:18px!important;
  box-shadow:0 18px 36px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.32)!important;
  transition:transform .2s ease, box-shadow .2s ease!important;
}
body:not(.flow-active) .btn-start:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 42px rgba(15,23,42,.26), inset 0 1px 0 rgba(255,255,255,.32)!important;
}
.start-trust-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:16px auto 0;
  max-width:520px;
}
.start-trust-row span{
  color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:7px 11px;
  font-size:12px;
  font-weight:750;
  backdrop-filter:blur(10px);
}
@media (min-width:1024px){
  body:not(.flow-active) .start-screen.blue-screen{
    min-height:calc(100vh - 104px)!important;
  }
}
@media (max-width:640px){
  body:not(.flow-active) .start-screen.blue-screen{
    min-height:calc(100svh - 56px)!important;
    padding:34px 14px 42px!important;
  }
  .start-bonus-mini{
    grid-template-columns:1fr;
    max-width:360px;
    gap:10px;
    margin-bottom:18px;
  }
  .start-bonus-card{
    min-height:82px;
    padding:14px 14px 12px;
    border-radius:18px;
  }
  .start-bonus-card small{text-align:right;font-size:9px;}
  .start-trust-row{gap:6px;margin-top:14px;}
  .start-trust-row span{font-size:11px;padding:6px 9px;}
}
@media (max-width:380px){
  body:not(.flow-active) .start-card h1{font-size:2rem!important;}
  .start-bonus-card b{font-size:1.6rem;}
  .start-bonus-card strong{font-size:1.35rem;}
}

/* =========================================================
   V37 — Hero com imagem lateral + cards mais limpos
   ========================================================= */
:root{
  --success:#22C55E;
}
body:not(.flow-active) .start-screen.blue-screen{
  padding:clamp(34px,6vh,64px) 18px clamp(42px,7vh,72px)!important;
}
.start-hero-layout{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(300px, .98fr);
  align-items:center;
  gap:clamp(28px,5vw,62px);
}
body:not(.flow-active) .start-card{
  max-width:560px!important;
  margin:0!important;
  align-items:flex-start!important;
  text-align:left!important;
}
body:not(.flow-active) .start-card h1,
body:not(.flow-active) .start-card p{
  text-align:left!important;
  margin-left:0!important;
  margin-right:0!important;
}
body:not(.flow-active) .start-badge{
  margin-left:0!important;
}
.start-visual{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
}
.start-visual::before{
  content:'';
  position:absolute;
  width:78%;
  height:78%;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,.20), rgba(37,99,235,.10) 50%, transparent 72%);
  filter:blur(16px);
  z-index:-1;
}
.start-visual img{
  width:min(100%, 480px);
  max-height:520px;
  object-fit:contain;
  border-radius:28px;
  mix-blend-mode:normal;
  filter:drop-shadow(0 30px 52px rgba(15,23,42,.18));
}
.start-bonus-mini{
  max-width:470px!important;
  gap:10px!important;
  margin:2px 0 18px!important;
}
.start-bonus-card{
  min-height:78px!important;
  border-radius:18px!important;
  padding:13px 14px 12px!important;
  box-shadow:0 10px 24px rgba(15,23,42,.12)!important;
}
.start-bonus-card.featured{
  border-color:#22C55E!important;
}
.start-bonus-card em{
  background:#22C55E!important;
  top:-10px!important;
  right:12px!important;
  padding:5px 10px!important;
  font-size:9px!important;
  box-shadow:0 8px 18px rgba(34,197,94,.18)!important;
}
.start-bonus-card span{
  font-size:9px!important;
}
.start-bonus-card strong{
  font-size:clamp(1.22rem,2vw,1.55rem)!important;
}
.start-bonus-card b{
  font-size:clamp(1.45rem,2.5vw,1.9rem)!important;
}
.start-bonus-card small{
  font-size:8.5px!important;
}
body:not(.flow-active) .btn-start{
  margin-left:0!important;
  margin-right:0!important;
  max-width:390px!important;
}
.start-trust-row{
  justify-content:flex-start!important;
  margin-left:0!important;
  margin-right:0!important;
}
@media(max-width:980px){
  .start-hero-layout{
    grid-template-columns:1fr;
    max-width:620px;
    text-align:center;
    gap:24px;
  }
  body:not(.flow-active) .start-card{
    align-items:center!important;
    text-align:center!important;
    margin:0 auto!important;
  }
  body:not(.flow-active) .start-card h1,
  body:not(.flow-active) .start-card p{
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body:not(.flow-active) .start-badge{
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .start-bonus-mini{
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body:not(.flow-active) .btn-start{
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .start-trust-row{
    justify-content:center!important;
  }
  .start-visual img{
    width:min(86vw, 360px);
    max-height:360px;
  }
}
@media(max-width:640px){
  .start-visual{
    margin-top:2px;
  }
  .start-visual img{
    width:min(82vw, 310px);
    border-radius:22px;
  }
  .start-bonus-mini{
    max-width:360px!important;
  }
  .start-bonus-card{
    min-height:76px!important;
  }
}
@media(max-width:420px){
  .start-visual img{
    width:min(78vw, 275px);
  }
}


/* === V38: LOGO OFICIAL EM IMAGEM === */
.logo-image-link{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  min-width:0!important;
  text-decoration:none!important;
}
.logo-image-link::after{
  content:'';
  position:absolute;
  inset:auto;
  width:150px;
  height:48px;
  background:radial-gradient(circle, rgba(250,204,21,.14), transparent 70%);
  filter:blur(18px);
  opacity:.75;
  pointer-events:none;
  z-index:0;
}
.brand-logo-img{
  position:relative;
  z-index:1;
  display:block!important;
  height:54px!important;
  width:auto!important;
  max-width:245px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.10));
}
.logo-image-link .logo-icon,
.logo-image-link .logo-text{
  display:none!important;
}
.footer-brand .brand-logo-img{
  height:46px!important;
  max-width:220px!important;
  margin:0 auto;
}
@media(max-width:768px){
  .brand-logo-img{
    height:44px!important;
    max-width:190px!important;
  }
  .logo-image-link::after{
    width:120px;
    height:38px;
  }
}
@media(max-width:390px){
  .brand-logo-img{
    height:38px!important;
    max-width:162px!important;
  }
}


/* ===============================
   V39 — Header sem menu superior
   =============================== */
.top-bar{
  display:none!important;
  height:0!important;
  min-height:0!important;
  overflow:hidden!important;
}

.header{
  height:auto!important;
  min-height:72px!important;
  background:rgba(10,27,77,.96)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 10px 30px rgba(15,23,42,.08)!important;
  position:relative!important;
  top:auto!important;
}

.header-inner{
  height:72px!important;
  min-height:72px!important;
  max-width:1180px!important;
  width:100%!important;
  margin:0 auto!important;
  padding:0 24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}

.logo-image-link,
.logo{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-width:0!important;
}

.brand-logo-img{
  height:56px!important;
  max-height:56px!important;
  width:auto!important;
  max-width:220px!important;
  object-fit:contain!important;
  display:block!important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.12));
}

.header-actions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-shrink:0!important;
}

.header-btn,
.header-menu-btn{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border-radius:14px!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transition:transform .2s ease, background .2s ease, opacity .2s ease!important;
}

.header-btn:hover,
.header-menu-btn:hover{
  background:rgba(255,255,255,.09)!important;
  transform:translateY(-1px)!important;
}

.header-menu-btn span{
  display:none!important;
}

/* o hero começa mais rápido após remover o topo */
.start-screen,
.blue-screen{
  padding-top:clamp(42px,6vw,72px)!important;
}

@media (max-width:768px){
  .header{
    min-height:64px!important;
  }

  .header-inner{
    height:64px!important;
    min-height:64px!important;
    padding:0 14px!important;
  }

  .brand-logo-img{
    height:46px!important;
    max-height:46px!important;
    max-width:170px!important;
  }

  .header-actions{
    gap:4px!important;
  }

  .header-btn,
  .header-menu-btn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    border-radius:12px!important;
  }

  .start-screen,
  .blue-screen{
    padding-top:32px!important;
  }
}

@media (max-width:380px){
  .brand-logo-img{
    height:40px!important;
    max-width:145px!important;
  }

  .header-btn,
  .header-menu-btn{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }
}

/* =====================================================
   V41 - Cards menores na tela inicial
   ===================================================== */
.hero .bonus-cards-list,
.hero .hero-benefits{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:14px!important;
  width:100%!important;
  max-width:430px!important;
  margin:18px auto 20px!important;
}

.hero .bonus-card,
.hero .bonus-card-flow,
.hero .hero-benefit-card{
  width:100%!important;
  max-width:190px!important;
  min-height:74px!important;
  padding:12px 14px!important;
  border-radius:18px!important;
  overflow:visible!important;
  box-shadow:0 8px 20px rgba(15,23,42,.10)!important;
}

.hero .bonus-card-price,
.hero .bonus-card-flow strong,
.hero .card-price{
  font-size:22px!important;
  line-height:1.05!important;
}

.hero .bonus-card-gb,
.hero .bonus-side strong,
.hero .card-benefit{
  font-size:18px!important;
  line-height:1.05!important;
}

.hero .bonus-card-desc,
.hero .bonus-label,
.hero .card-label,
.hero .bonus-card-price-label{
  font-size:10px!important;
  line-height:1.25!important;
}

.hero .bonus-card-badge,
.hero .bonus-pill,
.hero .card-badge{
  font-size:9px!important;
  padding:4px 8px!important;
  top:-8px!important;
  right:10px!important;
  white-space:nowrap!important;
}

@media (max-width: 520px){
  .hero .bonus-cards-list,
  .hero .hero-benefits{
    max-width:100%!important;
    gap:10px!important;
    margin:14px auto 18px!important;
  }

  .hero .bonus-card,
  .hero .bonus-card-flow,
  .hero .hero-benefit-card{
    max-width:calc(50% - 5px)!important;
    min-height:68px!important;
    padding:10px 11px!important;
    border-radius:16px!important;
  }

  .hero .bonus-card-price,
  .hero .bonus-card-flow strong,
  .hero .card-price{
    font-size:19px!important;
  }

  .hero .bonus-card-gb,
  .hero .bonus-side strong,
  .hero .card-benefit{
    font-size:16px!important;
  }
}

@media (max-width: 360px){
  .hero .bonus-card,
  .hero .bonus-card-flow,
  .hero .hero-benefit-card{
    max-width:100%!important;
  }
}

/* =====================================================
   V42 - Cards do hero ainda menores no mobile
   ===================================================== */
@media (max-width: 768px){
  .hero .bonus-cards-list,
  .hero .hero-benefits{
    gap:10px!important;
    max-width:360px!important;
    margin:12px auto 16px!important;
  }

  .hero .bonus-card,
  .hero .bonus-card-flow,
  .hero .hero-benefit-card{
    max-width:160px!important;
    min-height:62px!important;
    padding:9px 10px!important;
    border-radius:15px!important;
  }

  .hero .bonus-card-price,
  .hero .bonus-card-flow strong,
  .hero .card-price{
    font-size:18px!important;
    line-height:1.05!important;
  }

  .hero .bonus-card-gb,
  .hero .bonus-side strong,
  .hero .card-benefit{
    font-size:14px!important;
    line-height:1.15!important;
  }

  .hero .bonus-card-desc,
  .hero .bonus-label,
  .hero .card-label,
  .hero .bonus-card-price-label{
    font-size:9px!important;
    line-height:1.2!important;
  }

  .hero .bonus-card-badge,
  .hero .bonus-pill,
  .hero .card-badge{
    font-size:8px!important;
    padding:3px 7px!important;
    top:-7px!important;
    right:8px!important;
  }
}

@media (max-width: 420px){
  .hero .bonus-cards-list,
  .hero .hero-benefits{
    max-width:330px!important;
    gap:8px!important;
  }

  .hero .bonus-card,
  .hero .bonus-card-flow,
  .hero .hero-benefit-card{
    max-width:calc(50% - 4px)!important;
    min-height:58px!important;
    padding:8px 9px!important;
    border-radius:14px!important;
  }

  .hero .bonus-card-price,
  .hero .bonus-card-flow strong,
  .hero .card-price{
    font-size:17px!important;
  }

  .hero .bonus-card-gb,
  .hero .bonus-side strong,
  .hero .card-benefit{
    font-size:13px!important;
  }
}

@media (max-width: 340px){
  .hero .bonus-card,
  .hero .bonus-card-flow,
  .hero .hero-benefit-card{
    max-width:150px!important;
  }
}


/* ===== V45: padronização CelMais / menu / páginas institucionais ===== */
:root{--brand-primary:#163B8C;--brand-primary-light:#2563EB;--brand-text:#0F172A;--brand-muted:#64748B;--brand-border:#E2E8F0;}
*{box-sizing:border-box;min-width:0;}
html,body{max-width:100%;overflow-x:hidden;}
.site-header-compact,.header{background:linear-gradient(180deg,var(--brand-primary) 0%,var(--brand-primary-light) 100%);border-bottom:1px solid rgba(255,255,255,.08);}
.header-inner{width:100%;max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.logo-image-link{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;}
.brand-logo-img{height:54px;width:auto;max-width:190px;object-fit:contain;display:block;}
.desktop-nav{display:flex;align-items:center;gap:8px;margin-left:auto;}
.desktop-nav a{color:#fff;font-size:14px;font-weight:700;text-decoration:none;padding:10px 14px;border-radius:999px;opacity:.92;transition:.2s ease;}
.desktop-nav a:hover{background:rgba(255,255,255,.10);opacity:1;}
.desktop-nav .nav-cta{background:#fff;color:var(--brand-primary)!important;}
.header-actions{display:flex;align-items:center;gap:8px;}
.header-menu-btn{display:none;align-items:center;justify-content:center;gap:6px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:8px 10px;font-weight:700;}
.header-menu-btn span{font-size:11px;line-height:1;}
.mobile-menu{display:none;background:#fff;border-bottom:1px solid var(--brand-border);box-shadow:0 18px 40px rgba(15,23,42,.10);padding:10px 16px;}
.mobile-menu.active{display:grid;gap:4px;}
.mobile-menu a{display:block;padding:12px 10px;color:var(--brand-text);font-weight:700;text-decoration:none;border-radius:12px;}
.mobile-menu a:hover{background:#F8FAFC;color:var(--brand-primary);}
.page-hero{background:linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%);padding:46px 0 24px;text-align:center;border-bottom:1px solid var(--brand-border);}
.page-hero .container,.page-content .container,.footer-inner{width:100%;max-width:900px;margin:0 auto;padding-left:18px;padding-right:18px;}
.page-hero h1{font-size:clamp(28px,4vw,44px);line-height:1.1;color:var(--brand-text);letter-spacing:-.8px;margin:10px 0 10px;}
.page-hero p{max-width:680px;margin:0 auto;color:var(--brand-muted);font-size:clamp(14px,2vw,17px);line-height:1.7;}
.section-eyebrow{display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-primary);background:#EFF6FF;border:1px solid #DBEAFE;border-radius:999px;padding:6px 12px;}
.page-content{padding:38px 0 54px;background:#fff;}
.prose{background:#fff;border:1px solid var(--brand-border);border-radius:24px;padding:clamp(20px,4vw,34px);box-shadow:0 14px 36px rgba(15,23,42,.06);}
.prose h2,.prose h3{color:var(--brand-text);letter-spacing:-.3px;}
.prose p,.prose li{color:#475569;line-height:1.75;}
.footer{background:#fff;border-top:1px solid var(--brand-border);padding:24px 18px;text-align:center;}
.footer-copy{max-width:620px;margin:0 auto;color:var(--brand-muted);font-size:12px;line-height:1.85;}
.footer-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:14px;}
.footer-links a{color:var(--brand-primary);font-size:12px;font-weight:800;text-decoration:none;}
@media(max-width:860px){.desktop-nav{display:none}.header-menu-btn{display:flex}.brand-logo-img{height:46px;max-width:166px}.header-inner{min-height:68px;padding:0 16px}.page-hero{padding:34px 0 20px}.page-content{padding:26px 0 42px}.prose{border-radius:20px;padding:20px 16px}.footer{padding:22px 14px}.footer-copy{font-size:11.5px;line-height:1.8}.footer-links{gap:14px}}
@media(max-width:420px){.brand-logo-img{height:42px;max-width:150px}.header-menu-btn{padding:8px}.header-menu-btn span{display:none}.page-hero .container,.page-content .container,.footer-inner{padding-left:14px;padding-right:14px}.page-hero h1{font-size:26px}.prose{padding:18px 14px}.footer-links{gap:12px}.footer-links a{font-size:11.5px}}


/* ==== v46: selo PIX discreto ==== */
.pix-badge-inline{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
}
.pix-badge-inline img{
  width:16px!important;
  height:16px!important;
  object-fit:contain!important;
  display:inline-block!important;
}
.pix-icon img{
  width:22px!important;
  height:22px!important;
  object-fit:contain!important;
  display:block!important;
}
.payment-pix-icon{
  width:18px!important;
  height:18px!important;
  object-fit:contain!important;
  vertical-align:-4px!important;
  margin-right:6px!important;
  display:inline-block!important;
}
.payment-kicker{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
}
@media(max-width:520px){
  .pix-badge-inline img{width:14px!important;height:14px!important;}
  .pix-icon img{width:20px!important;height:20px!important;}
  .payment-pix-icon{width:16px!important;height:16px!important;}
}


/* =========================================================
   V47 — Layout hero premium inspirado no mockup enviado
   ========================================================= */
:root{
  --hero-navy:#020B36;
  --hero-blue:#073B9D;
  --hero-blue-2:#0B63E8;
  --hero-yellow:#FFCC14;
  --hero-soft:#EAF2FF;
}

html, body{
  max-width:100%;
  overflow-x:hidden;
}

.header.site-header-compact{
  background:rgba(2,11,54,.96)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  backdrop-filter:blur(16px);
  position:sticky;
  top:0;
  z-index:1000;
}

.header-inner{
  max-width:1280px!important;
  min-height:82px!important;
}

.logo-image-link{
  width:auto!important;
  min-width:0!important;
}

.brand-logo-img{
  height:70px!important;
  width:auto!important;
  max-width:240px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.20));
}

.desktop-nav{
  gap:26px!important;
  align-items:center!important;
}

.desktop-nav a{
  color:rgba(255,255,255,.92)!important;
  font-size:14px!important;
  font-weight:700!important;
  padding:8px 2px!important;
  border-radius:0!important;
}

.desktop-nav a.active,
.desktop-nav a:hover{
  color:var(--hero-yellow)!important;
  background:transparent!important;
}

.header-consult-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:46px;
  padding:0 24px;
  border-radius:14px;
  background:linear-gradient(135deg,#0B63E8,#0645B9);
  color:#fff;
  font-size:14px;
  font-weight:800;
  box-shadow:0 12px 28px rgba(11,99,232,.25);
  transition:.2s ease;
}

.header-consult-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(11,99,232,.34);
}

.header-actions{
  display:none!important;
}

.new-hero-screen{
  position:relative;
  min-height:calc(100vh - 82px);
  padding:72px 20px 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(29,91,255,.35), transparent 26%),
    radial-gradient(circle at 82% 38%, rgba(0,163,255,.26), transparent 30%),
    linear-gradient(135deg,#020B36 0%,#062A7E 46%,#0B63E8 100%);
  overflow:hidden;
  color:#fff;
}

.new-hero-screen::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, transparent 0 50%, rgba(255,255,255,.05) 50.2% 62%, transparent 62.2%),
    radial-gradient(circle at 65% 70%, rgba(255,255,255,.08), transparent 35%);
  pointer-events:none;
}

.new-hero-bg{
  position:absolute;
  right:-140px;
  top:80px;
  width:720px;
  height:720px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(39,133,255,.36),rgba(39,133,255,.04));
  filter:blur(0);
  opacity:.9;
  pointer-events:none;
}

.new-hero-container{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1260px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,520px);
  align-items:center;
  gap:70px;
}

.new-hero-copy{
  max-width:620px;
}

.new-hero-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 16px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.09);
  color:#fff;
  font-size:13px;
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.new-hero-copy h1{
  margin:24px 0 22px;
  color:#fff;
  font-size:clamp(42px,5vw,70px);
  line-height:1.04;
  letter-spacing:-2.2px;
  font-weight:900;
}

.new-hero-copy h1 span{
  color:var(--hero-yellow);
  display:inline;
}

.new-hero-subtitle{
  color:rgba(255,255,255,.86);
  font-size:clamp(17px,1.4vw,21px);
  line-height:1.55;
  max-width:560px;
  margin:0 0 30px;
}

.new-hero-cta{
  width:100%;
  max-width:360px;
  height:60px;
  border-radius:16px;
  background:linear-gradient(180deg,#FFD424,#FBBF10);
  color:#041542;
  font-size:18px;
  font-weight:900;
  box-shadow:0 16px 36px rgba(255,204,20,.24);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  transition:.22s ease;
}

.new-hero-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 42px rgba(255,204,20,.32);
}

.cta-icon{
  font-size:24px;
  line-height:1;
}

.new-trust-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
  max-width:610px;
}

.new-trust-pill{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 18px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.075);
  color:rgba(255,255,255,.92);
  font-size:14px;
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.new-trust-pill img{
  width:26px;
  height:26px;
  object-fit:contain;
}

.pix-pill{
  padding:12px 22px;
}

.new-hero-phone-wrap{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:620px;
}

.phone-device{
  position:relative;
  width:min(390px,100%);
  aspect-ratio:9 / 18.7;
  border-radius:46px;
  padding:42px 28px 30px;
  background:linear-gradient(180deg,#071747,#020B2A);
  border:10px solid #111827;
  box-shadow:
    0 44px 90px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.12),
    -30px 30px 80px rgba(11,99,232,.20);
  transform:rotate(8deg);
  overflow:hidden;
}

.phone-device::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(49,135,255,.32),transparent 45%);
  pointer-events:none;
}

.phone-notch{
  position:absolute;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  width:118px;
  height:26px;
  background:#0B1025;
  border-radius:0 0 18px 18px;
  z-index:2;
}

.phone-status{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  color:#fff;
  font-size:12px;
  font-weight:800;
  margin-bottom:38px;
}

.phone-logo-box{
  position:relative;
  z-index:2;
  text-align:center;
  margin-bottom:18px;
}

.phone-logo-box img{
  height:76px;
  width:auto;
  max-width:230px;
  object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.22));
}

.phone-device h3{
  position:relative;
  z-index:2;
  color:#fff;
  text-align:center;
  font-size:18px;
  font-style:italic;
  margin:0 0 14px;
}

.phone-input-fake{
  position:relative;
  z-index:2;
  height:54px;
  border-radius:10px;
  background:#fff;
  color:#64748B;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  font-size:14px;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}

.phone-input-fake em{
  font-style:italic;
}

.phone-button-fake{
  position:relative;
  z-index:2;
  height:54px;
  border-radius:10px;
  margin:14px 0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#FFD424,#FBBF10);
  color:#041542;
  font-size:17px;
  font-weight:900;
  font-style:italic;
}

.phone-device small{
  position:relative;
  z-index:2;
  display:block;
  text-align:center;
  color:rgba(255,255,255,.76);
  font-size:11px;
  margin-bottom:24px;
}

.phone-safe-card{
  position:relative;
  z-index:2;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.07);
  padding:16px;
  color:#fff;
}

.phone-safe-card strong{
  display:block;
  font-size:14px;
  margin-bottom:6px;
}

.phone-safe-card span{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.45;
}

.hero-how-card{
  position:relative;
  z-index:2;
  width:calc(100% - 40px);
  max-width:1280px;
  margin:34px auto 0;
  padding:26px 34px 34px;
  border-radius:24px 24px 0 0;
  background:linear-gradient(135deg,rgba(11,63,160,.78),rgba(5,35,111,.90));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 -12px 50px rgba(0,0,0,.16);
  backdrop-filter:blur(14px);
}

.hero-how-card h2{
  color:#fff;
  text-align:center;
  font-size:26px;
  margin:0 0 26px;
}

.hero-how-steps{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:start;
  gap:18px;
}

.hero-how-step{
  text-align:center;
  color:#fff;
  min-width:0;
}

.step-dot{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  margin-bottom:12px;
  background:#0B63E8;
  color:#fff;
  font-weight:900;
  box-shadow:0 8px 20px rgba(11,99,232,.28);
}

.hero-how-step b{
  display:block;
  color:#fff;
  font-size:15px;
  margin-bottom:8px;
}

.hero-how-step p{
  color:rgba(255,255,255,.80);
  font-size:13px;
  line-height:1.45;
  max-width:210px;
  margin:0 auto;
}

.hero-how-arrow{
  color:rgba(255,255,255,.35);
  font-size:56px;
  line-height:1;
  margin-top:28px;
}

.operators-strip{
  position:relative;
  z-index:2;
  margin:0 -20px;
  padding:22px 20px 28px;
  background:#fff;
  color:#0F172A;
  text-align:center;
}

.operators-strip h2{
  font-size:26px;
  color:#0F2B66;
  margin:0 0 16px;
}

.operators-strip-list{
  width:100%;
  max-width:760px;
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:36px;
  flex-wrap:wrap;
  font-weight:900;
}

.operators-strip-list span{
  font-size:30px;
  line-height:1;
}

.op-vivo{color:#6D18B8}
.op-claro{color:#E11D27}
.op-tim{color:#0F4C9A}
.op-oi{color:#22C55E}
.op-more{font-size:16px!important;color:#64748B;font-weight:700!important;}

/* Mantém o fluxo iniciado limpo após o clique */
body.flow-active .header.site-header-compact{
  position:sticky;
}

body.flow-active .flow-screen.active{
  background:#fff!important;
  padding-top:22px!important;
}

@media(max-width:1100px){
  .desktop-nav a{display:none!important;}
  .desktop-nav .header-consult-btn{display:none!important;}
  .header-actions{display:flex!important;}
  .new-hero-container{
    grid-template-columns:1fr;
    gap:36px;
    text-align:center;
  }
  .new-hero-copy{margin:0 auto;}
  .new-hero-subtitle{margin-left:auto;margin-right:auto;}
  .new-trust-grid{justify-content:center;margin-left:auto;margin-right:auto;}
  .new-hero-phone-wrap{min-height:auto;}
  .phone-device{transform:none;max-width:340px;}
  .hero-how-steps{grid-template-columns:1fr 1fr;}
  .hero-how-arrow{display:none;}
}

@media(max-width:768px){
  .header-inner{min-height:70px!important;padding:0 16px!important;}
  .brand-logo-img{height:54px!important;max-width:190px!important;}
  .new-hero-screen{
    min-height:auto;
    padding:36px 14px 0;
  }
  .new-hero-copy h1{
    font-size:clamp(34px,9vw,48px);
    letter-spacing:-1.1px;
    margin:18px 0 16px;
  }
  .new-hero-subtitle{
    font-size:15px;
    line-height:1.55;
    margin-bottom:22px;
  }
  .new-hero-cta{
    max-width:100%;
    height:56px;
    font-size:16px;
  }
  .new-trust-grid{
    gap:8px;
    margin-top:18px;
  }
  .new-trust-pill{
    min-height:40px;
    padding:9px 12px;
    font-size:12px;
  }
  .pix-pill img{width:22px;height:22px;}
  .phone-device{
    width:min(292px,92vw);
    border-width:8px;
    border-radius:36px;
    padding:34px 20px 24px;
  }
  .phone-logo-box img{height:58px;max-width:180px;}
  .phone-device h3{font-size:16px;}
  .phone-input-fake,.phone-button-fake{height:48px;font-size:13px;}
  .hero-how-card{
    width:100%;
    padding:22px 16px 24px;
    border-radius:22px 22px 0 0;
    margin-top:26px;
  }
  .hero-how-card h2{font-size:22px;margin-bottom:18px;}
  .hero-how-steps{grid-template-columns:1fr;gap:18px;}
  .hero-how-step p{max-width:260px;}
  .operators-strip{padding:20px 14px 24px;}
  .operators-strip h2{font-size:22px;}
  .operators-strip-list{gap:20px;}
  .operators-strip-list span{font-size:25px;}
}

@media(max-width:390px){
  .brand-logo-img{height:48px!important;max-width:166px!important;}
  .new-hero-copy h1{font-size:32px;}
  .new-trust-pill{width:100%;}
  .phone-device{width:min(270px,94vw);}
}

/* ==========================================================
   V48 — Responsividade final + nova logo + distribuição desktop/mobile
   ========================================================== */
:root{
  --brand-blue-dark:#061B55;
  --brand-blue:#0B3B9E;
  --brand-blue-2:#1664E8;
  --brand-blue-soft:#EAF2FF;
  --brand-yellow:#FACC15;
  --brand-ink:#0F172A;
  --brand-muted:#64748B;
  --brand-border:#E2E8F0;
  --brand-card:#FFFFFF;
  --success:#22C55E;
}

html,body{width:100%;max-width:100%;overflow-x:hidden;}
*,*::before,*::after{box-sizing:border-box;min-width:0;}
img,svg,canvas,video{max-width:100%;height:auto;}
p,h1,h2,h3,h4,h5,h6,span,a,button,div{overflow-wrap:anywhere;}

body{
  background:#F8FAFC!important;
  color:var(--brand-ink)!important;
}

/* Header enxuto, alinhado e com logo nova */
.header,
.site-header-compact{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  width:100%!important;
  background:linear-gradient(180deg,#07194B 0%,#0B2F78 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 12px 28px rgba(2,6,23,.12)!important;
  backdrop-filter:blur(14px)!important;
}

.header-inner{
  width:100%!important;
  max-width:1180px!important;
  height:76px!important;
  margin:0 auto!important;
  padding:0 clamp(16px,4vw,28px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:22px!important;
}

.logo-image-link{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 auto!important;
  width:auto!important;
  max-width:260px!important;
}

.brand-logo-img{
  display:block!important;
  height:54px!important;
  width:auto!important;
  max-width:230px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.20))!important;
}

.desktop-nav{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:clamp(14px,2.2vw,28px)!important;
  flex:1 1 auto!important;
}

.desktop-nav a{
  color:rgba(255,255,255,.88)!important;
  font-size:14px!important;
  font-weight:700!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}

.desktop-nav a.active,
.desktop-nav a:hover{color:var(--brand-yellow)!important;}

.header-consult-btn{
  height:48px!important;
  padding:0 22px!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#145BE8,#0B48B5)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:800!important;
  box-shadow:0 12px 30px rgba(20,91,232,.28)!important;
  white-space:nowrap!important;
}

.header-actions{display:none!important;align-items:center!important;gap:8px!important;}
.header-menu-btn{color:#fff!important;border-radius:14px!important;}

.mobile-menu{
  position:fixed!important;
  top:76px!important;
  left:12px!important;
  right:12px!important;
  z-index:999!important;
  max-width:420px!important;
  margin:0 auto!important;
  background:#fff!important;
  border:1px solid var(--brand-border)!important;
  border-radius:18px!important;
  box-shadow:0 24px 60px rgba(15,23,42,.18)!important;
  padding:12px!important;
}
.mobile-menu a{
  color:var(--brand-ink)!important;
  padding:12px 14px!important;
  border-radius:12px!important;
  font-weight:700!important;
}
.mobile-menu a:hover{background:var(--brand-blue-soft)!important;color:var(--brand-blue)!important;}

/* Hero principal em grid real */
.flow-page{background:#F8FAFC!important;}
.start-screen.new-hero-screen{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-height:auto!important;
  padding:clamp(54px,7vw,88px) 0 0!important;
  background:
    radial-gradient(circle at 78% 28%,rgba(59,130,246,.52),transparent 30%),
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.09),transparent 24%),
    linear-gradient(135deg,#061B55 0%,#0B3B9E 46%,#1664E8 100%)!important;
}

.new-hero-bg{
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.04) 1px,transparent 1px)!important;
  background-size:44px 44px!important;
  opacity:.18!important;
  z-index:-1!important;
}

.new-hero-container{
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:0 clamp(18px,4vw,28px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(340px,.92fr)!important;
  align-items:center!important;
  gap:clamp(34px,6vw,74px)!important;
}

.new-hero-copy{
  text-align:left!important;
  max-width:620px!important;
  margin:0!important;
}

.new-hero-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  max-width:100%!important;
  padding:8px 14px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.20)!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:800!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
}

.new-hero-copy h1{
  margin:22px 0 18px!important;
  color:#fff!important;
  font-size:clamp(42px,5.2vw,70px)!important;
  line-height:1.03!important;
  letter-spacing:-2.1px!important;
  font-weight:900!important;
  max-width:760px!important;
}

.new-hero-copy h1 span{
  color:var(--brand-yellow)!important;
  display:inline!important;
}

.new-hero-subtitle{
  color:rgba(255,255,255,.88)!important;
  font-size:clamp(16px,1.35vw,20px)!important;
  line-height:1.55!important;
  max-width:560px!important;
  margin:0 0 28px!important;
}

.new-hero-cta{
  width:100%!important;
  max-width:360px!important;
  height:58px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#FACC15 0%,#FBBF24 100%)!important;
  color:#061B55!important;
  font-size:17px!important;
  font-weight:900!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  box-shadow:0 18px 34px rgba(250,204,21,.22)!important;
  transition:transform .22s ease, box-shadow .22s ease!important;
}
.new-hero-cta:hover{transform:translateY(-2px)!important;box-shadow:0 22px 42px rgba(250,204,21,.28)!important;}
.new-hero-cta .cta-icon{font-size:20px!important;line-height:1!important;}

.new-trust-grid{
  width:100%!important;
  max-width:620px!important;
  margin:26px 0 0!important;
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  gap:12px!important;
}

.new-trust-pill{
  min-height:46px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  padding:10px 16px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.075)!important;
  color:rgba(255,255,255,.92)!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.15!important;
  backdrop-filter:blur(10px)!important;
}
.new-trust-pill img{width:24px!important;height:24px!important;object-fit:contain!important;}
.pix-pill{background:rgba(255,255,255,.10)!important;}

/* Mockup do celular proporcional em desktop e mobile */
.new-hero-phone-wrap{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:460px!important;
}
.phone-device{
  width:min(100%,360px)!important;
  min-height:620px!important;
  border-radius:44px!important;
  padding:34px 24px!important;
  transform:rotate(10deg)!important;
  background:
    linear-gradient(180deg,#061B55 0%,#08256D 100%)!important;
  border:8px solid rgba(15,23,42,.88)!important;
  box-shadow:0 34px 80px rgba(2,6,23,.40), inset 0 0 0 1px rgba(255,255,255,.12)!important;
}
.phone-logo-box img{max-height:80px!important;width:auto!important;margin:0 auto!important;object-fit:contain!important;}
.phone-device h3{color:#fff!important;font-size:20px!important;text-align:center!important;margin:20px 0 14px!important;}
.phone-input-fake,.phone-safe-card{max-width:100%!important;}
.phone-button-fake{background:linear-gradient(180deg,#FACC15,#FBBF24)!important;color:#061B55!important;font-weight:900!important;}

/* Como funciona no desktop: card sobreposto, no mobile: bloco normal */
.hero-how-card{
  width:calc(100% - 36px)!important;
  max-width:1180px!important;
  margin:clamp(36px,5vw,64px) auto 0!important;
  padding:28px!important;
  border-radius:28px 28px 0 0!important;
  background:linear-gradient(135deg,rgba(6,27,85,.92),rgba(11,59,158,.92))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 -8px 42px rgba(2,6,23,.20)!important;
  color:#fff!important;
}
.hero-how-card h2{color:#fff!important;text-align:center!important;font-size:clamp(24px,3vw,34px)!important;margin:0 0 24px!important;}
.hero-how-steps{
  display:grid!important;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr!important;
  align-items:start!important;
  gap:18px!important;
}
.hero-how-step{text-align:center!important;color:#fff!important;}
.hero-how-step b{display:block!important;color:#fff!important;font-size:15px!important;margin:10px 0 8px!important;}
.hero-how-step p{color:rgba(255,255,255,.78)!important;font-size:13px!important;line-height:1.45!important;margin:0!important;}
.step-dot{background:linear-gradient(135deg,#1664E8,#0B3B9E)!important;color:#fff!important;}
.hero-how-arrow{color:rgba(255,255,255,.38)!important;font-size:46px!important;line-height:1!important;padding-top:38px!important;}

.operators-strip{
  width:100%!important;
  padding:30px 18px!important;
  background:#fff!important;
  text-align:center!important;
}
.operators-strip h2{color:#0B2F78!important;font-size:clamp(22px,3vw,32px)!important;margin:0 0 18px!important;}
.operators-strip-list{
  max-width:760px!important;
  margin:0 auto!important;
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:clamp(18px,4vw,46px)!important;
}
.operators-strip-list span{font-size:clamp(22px,3.2vw,36px)!important;font-weight:900!important;line-height:1!important;white-space:nowrap!important;}
.op-more{font-size:clamp(14px,2vw,18px)!important;color:#64748B!important;font-weight:800!important;}

/* Fluxo após clique: sempre centralizado e sem vazamento */
.flow-screen{
  background:#fff!important;
  padding:clamp(18px,4vw,42px) 16px!important;
}
.flow-container,
.step-progress-wrap{
  width:100%!important;
  max-width:620px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}
.flow-card{
  width:100%!important;
  max-width:620px!important;
  margin:0 auto!important;
  border-radius:26px!important;
  padding:clamp(18px,4vw,30px)!important;
  overflow:visible!important;
}
.bonus-cards-list{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:12px!important;}
.bonus-card-flow{overflow:visible!important;max-width:260px!important;flex:1 1 210px!important;}
.bonus-pill{background:var(--success)!important;white-space:nowrap!important;}
.options-grid-3x3{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
.valor-card{min-width:0!important;overflow:visible!important;}

.footer,.site-footer{
  width:100%!important;
  margin:0!important;
  background:#061B55!important;
  color:rgba(255,255,255,.78)!important;
}
.footer-grid,.footer-bottom-inner,.footer-inner{
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding-left:clamp(16px,4vw,28px)!important;
  padding-right:clamp(16px,4vw,28px)!important;
}
.footer p,.footer-copy{max-width:760px!important;margin-left:auto!important;margin-right:auto!important;line-height:1.75!important;}

/* Institucionais: mesma largura e leitura */
.page-content,.institutional-page,.content-page,main:not(.flow-page){max-width:1180px;margin-left:auto;margin-right:auto;}

@media (max-width:1100px){
  .desktop-nav{gap:14px!important;}
  .desktop-nav a{font-size:13px!important;}
  .header-consult-btn{padding:0 16px!important;}
  .new-hero-container{grid-template-columns:minmax(0,1fr) minmax(300px,.82fr)!important;gap:34px!important;}
  .phone-device{width:min(100%,320px)!important;min-height:560px!important;}
}

@media (max-width:900px){
  .header-inner{height:68px!important;}
  .brand-logo-img{height:48px!important;max-width:210px!important;}
  .desktop-nav{display:none!important;}
  .header-actions{display:flex!important;}
  .mobile-menu{top:68px!important;}

  .start-screen.new-hero-screen{padding:42px 0 0!important;}
  .new-hero-container{
    grid-template-columns:1fr!important;
    text-align:center!important;
    gap:28px!important;
  }
  .new-hero-copy{
    max-width:680px!important;
    margin:0 auto!important;
    text-align:center!important;
  }
  .new-hero-copy h1{
    font-size:clamp(36px,8vw,54px)!important;
    letter-spacing:-1.4px!important;
    max-width:680px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .new-hero-subtitle{margin-left:auto!important;margin-right:auto!important;}
  .new-hero-cta{max-width:420px!important;}
  .new-trust-grid{justify-content:center!important;margin-left:auto!important;margin-right:auto!important;}
  .new-hero-phone-wrap{min-height:auto!important;}
  .phone-device{
    transform:none!important;
    width:min(100%,340px)!important;
    min-height:auto!important;
    padding:28px 20px!important;
    border-radius:36px!important;
  }

  .hero-how-card{border-radius:26px!important;margin-top:34px!important;padding:24px 18px!important;}
  .hero-how-steps{grid-template-columns:1fr 1fr!important;gap:18px!important;}
  .hero-how-arrow{display:none!important;}
}

@media (max-width:640px){
  .header-inner{height:62px!important;padding:0 14px!important;}
  .brand-logo-img{height:42px!important;max-width:176px!important;}
  .header-menu-btn{width:40px!important;height:40px!important;padding:0!important;}
  .header-menu-btn span{display:none!important;}
  .mobile-menu{top:62px!important;}

  .start-screen.new-hero-screen{padding:30px 0 0!important;}
  .new-hero-container{padding:0 16px!important;gap:24px!important;}
  .new-hero-badge{font-size:11px!important;padding:7px 12px!important;}
  .new-hero-copy h1{font-size:clamp(31px,10vw,42px)!important;line-height:1.06!important;letter-spacing:-1.1px!important;margin:16px 0 12px!important;}
  .new-hero-subtitle{font-size:15px!important;line-height:1.5!important;margin-bottom:20px!important;}
  .new-hero-cta{height:54px!important;border-radius:16px!important;font-size:16px!important;max-width:100%!important;}
  .new-trust-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:18px!important;}
  .new-trust-pill{width:100%!important;min-height:42px!important;padding:9px 10px!important;font-size:12px!important;}
  .pix-pill{grid-column:1 / -1!important;}
  .new-trust-pill img{width:20px!important;height:20px!important;}

  .phone-device{width:min(100%,300px)!important;padding:24px 16px!important;border-width:6px!important;}
  .phone-logo-box img{max-height:62px!important;}
  .phone-device h3{font-size:17px!important;}
  .phone-input-fake{font-size:12px!important;}
  .phone-button-fake{height:46px!important;}

  .hero-how-card{width:calc(100% - 24px)!important;margin-top:26px!important;padding:20px 14px!important;}
  .hero-how-card h2{font-size:22px!important;margin-bottom:18px!important;}
  .hero-how-steps{grid-template-columns:1fr!important;gap:14px!important;}
  .hero-how-step{display:grid!important;grid-template-columns:42px 1fr!important;text-align:left!important;align-items:start!important;column-gap:12px!important;}
  .hero-how-step .step-dot{grid-row:1 / 3!important;margin-top:2px!important;}
  .hero-how-step b{margin:0 0 4px!important;font-size:14px!important;}
  .hero-how-step p{font-size:12px!important;}

  .operators-strip{padding:24px 14px!important;}
  .operators-strip-list{gap:16px 22px!important;}
  .operators-strip-list span{font-size:23px!important;}
  .op-more{width:100%!important;font-size:14px!important;}

  .flow-screen{padding:14px 12px 24px!important;}
  .step-progress-wrap,.flow-container{max-width:100%!important;}
  .flow-card{border-radius:22px!important;padding:16px!important;}
  .step-progress{overflow-x:auto!important;scrollbar-width:none!important;padding-bottom:4px!important;}
  .step-progress::-webkit-scrollbar{display:none!important;}
  .progress-item small{font-size:10px!important;}
  .bonus-card-flow{flex-basis:100%!important;max-width:100%!important;}
  .options-grid-3x3{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .valor-card{padding:12px 8px!important;}
  .summary-row{gap:10px!important;}
}

@media (max-width:380px){
  .brand-logo-img{height:36px!important;max-width:152px!important;}
  .new-hero-copy h1{font-size:30px!important;}
  .new-trust-grid{grid-template-columns:1fr!important;}
  .phone-device{width:min(100%,270px)!important;}
  .options-grid-3x3{gap:8px!important;}
}

@media (min-width:1200px){
  .start-screen.new-hero-screen{padding-top:76px!important;}
  .new-hero-container{min-height:610px!important;}
}


/* =========================================================
   V49 — RESET RESPONSIVO FINAL DO HERO / DESKTOP / MOBILE
   Mantém fluxo existente, mas força distribuição igual ao mockup.
   ========================================================= */
html,body{width:100%;max-width:100%;overflow-x:hidden!important;}
body{background:#fff!important;}
*,*::before,*::after{box-sizing:border-box;min-width:0;}
img,svg,video,canvas{max-width:100%;height:auto;}

:root{
  --pf-navy:#061845;
  --pf-blue:#0B3B9E;
  --pf-blue-2:#1767F2;
  --pf-yellow:#FACC15;
  --pf-white:#FFFFFF;
  --pf-muted:rgba(255,255,255,.82);
}

/* Header igual ao mockup */
.header.site-header-compact,
.header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  width:100%!important;
  background:linear-gradient(180deg,#061845 0%,#08225F 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  backdrop-filter:blur(12px)!important;
  box-shadow:none!important;
}
.header-inner{
  width:100%!important;
  max-width:1180px!important;
  height:86px!important;
  min-height:86px!important;
  margin:0 auto!important;
  padding:0 24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
}
.logo-image-link{display:flex!important;align-items:center!important;flex:0 0 auto!important;}
.brand-logo-img{
  display:block!important;
  height:62px!important;
  width:auto!important;
  max-width:236px!important;
  object-fit:contain!important;
}
.desktop-nav{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:34px!important;
  flex:1!important;
}
.desktop-nav a{
  color:rgba(255,255,255,.92)!important;
  font-size:15px!important;
  font-weight:800!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.desktop-nav a.active{color:var(--pf-yellow)!important;}
.header-consult-btn{
  height:52px!important;
  min-width:170px!important;
  padding:0 24px!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#FACC15,#FBBF24)!important;
  color:#061845!important;
  font-size:15px!important;
  font-weight:900!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
}
.header-actions{display:none!important;}
.mobile-menu{top:74px!important;}

/* HERO com largura e distribuição travadas */
.flow-page{background:#fff!important;}
.start-screen.new-hero-screen{
  position:relative!important;
  width:100%!important;
  overflow:hidden!important;
  padding:0!important;
  min-height:auto!important;
  background:
    radial-gradient(circle at 86% 22%,rgba(42,123,255,.42),transparent 26%),
    radial-gradient(circle at 62% 70%,rgba(255,255,255,.08),transparent 32%),
    linear-gradient(135deg,#061845 0%,#08358F 46%,#1266ED 100%)!important;
}
.start-screen.new-hero-screen::before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(120deg,transparent 0 48%,rgba(255,255,255,.075) 48% 62%,transparent 62% 100%),
    radial-gradient(circle at left center,rgba(255,255,255,.08),transparent 22%)!important;
  opacity:1!important;
}
.new-hero-bg{display:none!important;}
.new-hero-container{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  max-width:1180px!important;
  min-height:620px!important;
  margin:0 auto!important;
  padding:64px 24px 50px!important;
  display:grid!important;
  grid-template-columns:minmax(0, 520px) minmax(320px, 1fr)!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:64px!important;
}
.new-hero-copy{
  width:100%!important;
  max-width:520px!important;
  margin:0!important;
  text-align:left!important;
  justify-self:start!important;
}
.new-hero-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:8px 14px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.new-hero-copy h1{
  margin:24px 0 18px!important;
  color:#fff!important;
  font-size:clamp(44px,4.5vw,64px)!important;
  line-height:1.08!important;
  letter-spacing:-1.8px!important;
  font-weight:900!important;
  max-width:560px!important;
}
.new-hero-copy h1 span{display:inline!important;color:var(--pf-yellow)!important;}
.new-hero-subtitle{
  margin:0 0 28px!important;
  max-width:520px!important;
  color:rgba(255,255,255,.88)!important;
  font-size:18px!important;
  line-height:1.55!important;
  text-align:left!important;
}
.new-hero-cta{
  width:100%!important;
  max-width:330px!important;
  height:58px!important;
  border:0!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#FACC15,#FBBF24)!important;
  color:#061845!important;
  font-size:17px!important;
  font-weight:900!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  box-shadow:0 18px 35px rgba(250,204,21,.20)!important;
}
.new-trust-grid{
  width:100%!important;
  max-width:600px!important;
  margin:28px 0 0!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
.new-trust-pill{
  min-height:58px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:10px 12px!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(4,19,60,.34)!important;
  color:rgba(255,255,255,.92)!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.18!important;
  text-align:center!important;
  backdrop-filter:blur(10px)!important;
}
.new-trust-pill img{width:24px!important;height:24px!important;object-fit:contain!important;}

.new-hero-phone-wrap{
  width:100%!important;
  min-height:560px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  justify-self:end!important;
  overflow:visible!important;
}
.phone-device{
  width:350px!important;
  max-width:100%!important;
  min-height:610px!important;
  padding:34px 24px!important;
  transform:rotate(10deg)!important;
  transform-origin:center center!important;
  border-radius:44px!important;
  border:8px solid rgba(2,6,23,.88)!important;
  background:linear-gradient(180deg,#061845 0%,#082461 100%)!important;
  box-shadow:0 38px 90px rgba(2,6,23,.46), inset 0 0 0 1px rgba(255,255,255,.10)!important;
}
.phone-logo-box img{max-height:76px!important;width:auto!important;margin:0 auto!important;display:block!important;object-fit:contain!important;}
.phone-device h3{font-size:20px!important;color:#fff!important;text-align:center!important;margin:22px 0 14px!important;}
.phone-input-fake{background:#fff!important;color:#64748B!important;border-radius:12px!important;}
.phone-button-fake{background:linear-gradient(180deg,#FACC15,#FBBF24)!important;color:#061845!important;border-radius:12px!important;font-weight:900!important;}
.phone-safe-card{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:14px!important;}

/* Como funciona embaixo, sem invadir/ficar torto */
.hero-how-card{
  position:relative!important;
  z-index:3!important;
  width:calc(100% - 48px)!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:28px!important;
  transform:translateY(0)!important;
  border-radius:24px 24px 0 0!important;
  background:linear-gradient(135deg,rgba(6,24,69,.94),rgba(10,53,143,.92))!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:#fff!important;
  box-shadow:0 -10px 48px rgba(2,6,23,.20)!important;
}
.hero-how-card h2{margin:0 0 22px!important;text-align:center!important;color:#fff!important;font-size:28px!important;}
.hero-how-steps{
  display:grid!important;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr!important;
  align-items:start!important;
  gap:18px!important;
}
.hero-how-step{text-align:center!important;color:#fff!important;}
.hero-how-step b{display:block!important;margin:10px 0 6px!important;color:#fff!important;font-size:15px!important;}
.hero-how-step p{margin:0!important;color:rgba(255,255,255,.76)!important;font-size:13px!important;line-height:1.45!important;}
.step-dot{background:linear-gradient(135deg,#1767F2,#0B3B9E)!important;color:#fff!important;}
.hero-how-arrow{font-size:44px!important;color:rgba(255,255,255,.34)!important;line-height:1!important;padding-top:38px!important;}

.operators-strip{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  margin:0!important;
  padding:28px 16px 32px!important;
  background:#fff!important;
  text-align:center!important;
}
.operators-strip h2{margin:0 0 18px!important;color:#082461!important;font-size:26px!important;font-weight:900!important;}
.operators-strip-list{
  width:100%!important;
  max-width:760px!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:22px 42px!important;
}
.operators-strip-list span{font-size:30px!important;font-weight:900!important;line-height:1!important;white-space:nowrap!important;}
.op-more{font-size:17px!important;color:#64748B!important;font-weight:800!important;}

/* Conteúdo institucional abaixo */
.section,.how-it-works,.security-section{padding-top:56px!important;padding-bottom:56px!important;}

/* Mobile */
@media(max-width:980px){
  .header-inner{height:74px!important;min-height:74px!important;padding:0 18px!important;}
  .desktop-nav{display:none!important;}
  .header-actions{display:flex!important;}
  .header-menu-btn{display:flex!important;color:#fff!important;}
  .header-menu-btn span{display:none!important;}
  .brand-logo-img{height:52px!important;max-width:210px!important;}
  .new-hero-container{
    min-height:auto!important;
    grid-template-columns:1fr!important;
    gap:30px!important;
    padding:42px 18px 34px!important;
    text-align:left!important;
  }
  .new-hero-copy{max-width:620px!important;margin:0 auto!important;text-align:left!important;justify-self:center!important;}
  .new-hero-copy h1{font-size:clamp(36px,8.4vw,54px)!important;letter-spacing:-1.2px!important;}
  .new-hero-subtitle{font-size:16px!important;}
  .new-hero-cta{max-width:100%!important;}
  .new-trust-grid{grid-template-columns:1fr 1fr!important;max-width:100%!important;}
  .new-hero-phone-wrap{min-height:auto!important;justify-self:center!important;}
  .phone-device{transform:none!important;width:min(100%,330px)!important;min-height:auto!important;padding:28px 20px!important;border-radius:36px!important;}
  .hero-how-card{width:calc(100% - 28px)!important;padding:22px 16px!important;border-radius:22px!important;}
  .hero-how-steps{grid-template-columns:1fr 1fr!important;}
  .hero-how-arrow{display:none!important;}
}
@media(max-width:560px){
  .header-inner{height:64px!important;min-height:64px!important;padding:0 14px!important;}
  .brand-logo-img{height:44px!important;max-width:180px!important;}
  .start-screen.new-hero-screen{background:linear-gradient(150deg,#061845 0%,#0B3B9E 56%,#1767F2 100%)!important;}
  .new-hero-container{padding:28px 16px 26px!important;gap:24px!important;}
  .new-hero-badge{font-size:11px!important;padding:7px 11px!important;}
  .new-hero-copy h1{font-size:clamp(31px,10vw,42px)!important;line-height:1.08!important;margin:16px 0 12px!important;}
  .new-hero-subtitle{font-size:15px!important;line-height:1.48!important;margin-bottom:18px!important;}
  .new-hero-cta{height:54px!important;border-radius:14px!important;font-size:16px!important;}
  .new-trust-grid{grid-template-columns:1fr!important;gap:9px!important;margin-top:18px!important;}
  .new-trust-pill{min-height:44px!important;border-radius:12px!important;justify-content:flex-start!important;text-align:left!important;font-size:13px!important;padding:9px 12px!important;}
  .phone-device{width:min(100%,300px)!important;border-width:6px!important;padding:22px 16px!important;}
  .phone-logo-box img{max-height:58px!important;}
  .phone-device h3{font-size:17px!important;margin:16px 0 12px!important;}
  .hero-how-card{width:calc(100% - 24px)!important;margin-top:0!important;padding:20px 14px!important;}
  .hero-how-card h2{font-size:22px!important;margin-bottom:18px!important;}
  .hero-how-steps{grid-template-columns:1fr!important;gap:14px!important;}
  .hero-how-step{display:grid!important;grid-template-columns:42px 1fr!important;text-align:left!important;column-gap:12px!important;align-items:start!important;}
  .hero-how-step .step-dot{grid-row:1 / 3!important;}
  .hero-how-step b{margin:0 0 4px!important;font-size:14px!important;}
  .hero-how-step p{font-size:12px!important;}
  .operators-strip{padding:24px 14px 28px!important;}
  .operators-strip h2{font-size:22px!important;}
  .operators-strip-list{gap:16px 22px!important;}
  .operators-strip-list span{font-size:24px!important;}
  .op-more{width:100%!important;font-size:14px!important;}
}
@media(max-width:370px){
  .brand-logo-img{height:38px!important;max-width:158px!important;}
  .new-hero-copy h1{font-size:29px!important;}
  .phone-device{width:min(100%,272px)!important;}
}

/* =========================================================
   V50 — CORREÇÃO DEFINITIVA DA DISTRIBUIÇÃO DESKTOP/MOBILE
   Corrige hero embolado em telas grandes, cards desalinhados e
   garante que Como funciona/Operadoras fiquem abaixo do hero.
   ========================================================= */
html, body{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
body{margin:0!important;background:#fff!important;}
*,*::before,*::after{box-sizing:border-box!important;min-width:0!important;}
img,svg,video,canvas{max-width:100%!important;height:auto;}

/* Header: largura fixa central igual ao conteúdo */
body .header.site-header-compact,
body .header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  width:100%!important;
  background:#061845!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
body .header .header-inner{
  width:min(1180px, calc(100% - 48px))!important;
  max-width:1180px!important;
  height:78px!important;
  min-height:78px!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:28px!important;
}
body .brand-logo-img{
  height:58px!important;
  max-width:230px!important;
  width:auto!important;
  object-fit:contain!important;
  display:block!important;
}
body .desktop-nav{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:30px!important;
  flex:1 1 auto!important;
}
body .desktop-nav a{
  color:rgba(255,255,255,.92)!important;
  font-size:14px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
body .desktop-nav a.active{color:#FACC15!important;}
body .header-consult-btn{
  height:48px!important;
  min-width:160px!important;
  padding:0 22px!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#FACC15,#FBBF24)!important;
  color:#061845!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
body .header-actions{display:none!important;}

/* Hero: nunca ocupa largura total com conteúdo colado na esquerda */
body:not(.flow-active) main.flow-page{
  width:100%!important;
  background:#fff!important;
  overflow:hidden!important;
}
body:not(.flow-active) section#startScreen.start-screen.new-hero-screen{
  position:relative!important;
  display:block!important;
  width:100%!important;
  overflow:hidden!important;
  padding:0!important;
  min-height:auto!important;
  background:
    radial-gradient(circle at 82% 26%,rgba(38,111,255,.38),transparent 28%),
    linear-gradient(135deg,#061845 0%,#0B3B9E 48%,#1767F2 100%)!important;
}
body:not(.flow-active) section#startScreen.start-screen.new-hero-screen::before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(120deg,transparent 0 50%,rgba(255,255,255,.075) 50% 64%,transparent 64% 100%),
    radial-gradient(circle at left center,rgba(255,255,255,.08),transparent 22%)!important;
  opacity:1!important;
}
body:not(.flow-active) section#startScreen .new-hero-bg{display:none!important;}

body:not(.flow-active) section#startScreen > .new-hero-container{
  position:relative!important;
  z-index:2!important;
  width:min(1180px, calc(100% - 48px))!important;
  max-width:1180px!important;
  min-height:620px!important;
  margin:0 auto!important;
  padding:58px 0 42px!important;
  display:grid!important;
  grid-template-columns:minmax(0, 560px) minmax(330px, 500px)!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:clamp(40px,6vw,76px)!important;
}
body:not(.flow-active) section#startScreen .new-hero-copy{
  width:100%!important;
  max-width:560px!important;
  margin:0!important;
  justify-self:start!important;
  text-align:left!important;
}
body:not(.flow-active) section#startScreen .new-hero-badge{
  display:inline-flex!important;
  max-width:100%!important;
  padding:8px 14px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;
  white-space:nowrap!important;
}
body:not(.flow-active) section#startScreen .new-hero-copy h1{
  max-width:560px!important;
  margin:22px 0 18px!important;
  color:#fff!important;
  font-size:clamp(44px,4.35vw,62px)!important;
  line-height:1.08!important;
  letter-spacing:-1.75px!important;
  font-weight:900!important;
  overflow:visible!important;
}
body:not(.flow-active) section#startScreen .new-hero-copy h1 span{
  display:inline!important;
  color:#FACC15!important;
}
body:not(.flow-active) section#startScreen .new-hero-subtitle{
  max-width:520px!important;
  margin:0 0 26px!important;
  color:rgba(255,255,255,.88)!important;
  font-size:18px!important;
  line-height:1.55!important;
  text-align:left!important;
}
body:not(.flow-active) section#startScreen .new-hero-cta{
  width:100%!important;
  max-width:330px!important;
  height:56px!important;
  border:0!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#FACC15,#FBBF24)!important;
  color:#061845!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  font-size:16px!important;
  font-weight:900!important;
}
body:not(.flow-active) section#startScreen .new-trust-grid{
  width:100%!important;
  max-width:600px!important;
  margin:26px 0 0!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
body:not(.flow-active) section#startScreen .new-trust-pill{
  min-height:54px!important;
  padding:9px 10px!important;
  border-radius:16px!important;
  background:rgba(4,19,60,.34)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:rgba(255,255,255,.92)!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.18!important;
  text-align:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
}
body:not(.flow-active) section#startScreen .new-trust-pill img{
  width:22px!important;
  height:22px!important;
  object-fit:contain!important;
}

/* Mockup do celular: limita tamanho e não invade outros blocos */
body:not(.flow-active) section#startScreen .new-hero-phone-wrap{
  width:100%!important;
  max-width:500px!important;
  min-height:560px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  justify-self:end!important;
  overflow:visible!important;
}
body:not(.flow-active) section#startScreen .phone-device{
  width:340px!important;
  max-width:100%!important;
  min-height:590px!important;
  padding:32px 22px!important;
  transform:rotate(9deg)!important;
  transform-origin:center center!important;
  border-radius:42px!important;
  border:8px solid rgba(2,6,23,.90)!important;
  background:linear-gradient(180deg,#061845 0%,#082461 100%)!important;
  box-shadow:0 34px 80px rgba(2,6,23,.42)!important;
}
body:not(.flow-active) section#startScreen .phone-logo-box img{
  max-height:70px!important;
  width:auto!important;
  display:block!important;
  margin:0 auto!important;
}

/* Como funciona e operadoras: SEM sobreposição, sempre abaixo do hero */
body:not(.flow-active) section#startScreen > .hero-how-card{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  z-index:3!important;
  width:min(1180px, calc(100% - 48px))!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:28px!important;
  transform:none!important;
  border-radius:24px 24px 0 0!important;
  background:linear-gradient(135deg,rgba(6,24,69,.94),rgba(10,53,143,.92))!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:#fff!important;
  box-shadow:0 -10px 48px rgba(2,6,23,.20)!important;
}
body:not(.flow-active) section#startScreen > .hero-how-card h2{
  margin:0 0 22px!important;
  text-align:center!important;
  color:#fff!important;
  font-size:28px!important;
  font-weight:900!important;
}
body:not(.flow-active) section#startScreen .hero-how-steps{
  display:grid!important;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr!important;
  align-items:start!important;
  gap:18px!important;
}
body:not(.flow-active) section#startScreen .hero-how-step{text-align:center!important;}
body:not(.flow-active) section#startScreen .hero-how-step b{
  display:block!important;
  margin:10px 0 6px!important;
  color:#fff!important;
  font-size:15px!important;
}
body:not(.flow-active) section#startScreen .hero-how-step p{
  margin:0!important;
  color:rgba(255,255,255,.76)!important;
  font-size:13px!important;
  line-height:1.45!important;
}
body:not(.flow-active) section#startScreen .hero-how-arrow{
  display:block!important;
  font-size:42px!important;
  color:rgba(255,255,255,.34)!important;
  padding-top:36px!important;
}
body:not(.flow-active) section#startScreen > .operators-strip{
  position:relative!important;
  inset:auto!important;
  z-index:2!important;
  width:100%!important;
  margin:0!important;
  padding:28px 16px 32px!important;
  background:#fff!important;
  text-align:center!important;
  transform:none!important;
}
body:not(.flow-active) section#startScreen .operators-strip h2{
  margin:0 0 18px!important;
  color:#082461!important;
  font-size:26px!important;
  font-weight:900!important;
}
body:not(.flow-active) section#startScreen .operators-strip-list{
  width:100%!important;
  max-width:760px!important;
  margin:0 auto!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:22px 42px!important;
}
body:not(.flow-active) section#startScreen .operators-strip-list span{
  font-size:30px!important;
  font-weight:900!important;
  line-height:1!important;
  white-space:nowrap!important;
}
body:not(.flow-active) section#startScreen .op-more{
  font-size:17px!important;
  color:#64748B!important;
  font-weight:800!important;
}

/* Desktop muito grande: mantém tudo centralizado e sem esticar */
@media(min-width:1400px){
  body .header .header-inner,
  body:not(.flow-active) section#startScreen > .new-hero-container,
  body:not(.flow-active) section#startScreen > .hero-how-card{
    width:1180px!important;
  }
}

/* Tablet */
@media(max-width:980px){
  body .header .header-inner{
    width:calc(100% - 32px)!important;
    height:68px!important;
    min-height:68px!important;
  }
  body .brand-logo-img{height:48px!important;max-width:200px!important;}
  body .desktop-nav{display:none!important;}
  body .header-actions{display:flex!important;}
  body .header-menu-btn{display:flex!important;color:#fff!important;}
  body .header-menu-btn span{display:none!important;}

  body:not(.flow-active) section#startScreen > .new-hero-container{
    width:calc(100% - 32px)!important;
    grid-template-columns:1fr!important;
    min-height:auto!important;
    padding:42px 0 34px!important;
    gap:30px!important;
  }
  body:not(.flow-active) section#startScreen .new-hero-copy{
    max-width:680px!important;
    margin:0 auto!important;
    text-align:center!important;
    justify-self:center!important;
  }
  body:not(.flow-active) section#startScreen .new-hero-copy h1{
    max-width:680px!important;
    font-size:clamp(36px,8vw,54px)!important;
    text-align:center!important;
  }
  body:not(.flow-active) section#startScreen .new-hero-subtitle{
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body:not(.flow-active) section#startScreen .new-hero-cta{
    max-width:420px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    display:flex!important;
  }
  body:not(.flow-active) section#startScreen .new-trust-grid{
    grid-template-columns:1fr 1fr!important;
    max-width:520px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body:not(.flow-active) section#startScreen .new-hero-phone-wrap{
    max-width:100%!important;
    min-height:auto!important;
    justify-self:center!important;
  }
  body:not(.flow-active) section#startScreen .phone-device{
    width:min(100%,330px)!important;
    min-height:auto!important;
    transform:none!important;
    border-radius:36px!important;
  }
  body:not(.flow-active) section#startScreen > .hero-how-card{
    width:calc(100% - 32px)!important;
    padding:22px 16px!important;
    border-radius:22px!important;
  }
  body:not(.flow-active) section#startScreen .hero-how-steps{
    grid-template-columns:1fr 1fr!important;
  }
  body:not(.flow-active) section#startScreen .hero-how-arrow{display:none!important;}
}

/* Mobile */
@media(max-width:560px){
  body .header .header-inner{
    width:calc(100% - 24px)!important;
    height:62px!important;
    min-height:62px!important;
  }
  body .brand-logo-img{height:40px!important;max-width:168px!important;}

  body:not(.flow-active) section#startScreen > .new-hero-container{
    width:calc(100% - 28px)!important;
    padding:28px 0 26px!important;
    gap:22px!important;
  }
  body:not(.flow-active) section#startScreen .new-hero-badge{
    font-size:11px!important;
    padding:7px 11px!important;
  }
  body:not(.flow-active) section#startScreen .new-hero-copy h1{
    font-size:clamp(31px,10vw,42px)!important;
    line-height:1.08!important;
    letter-spacing:-1.1px!important;
    margin:16px 0 12px!important;
  }
  body:not(.flow-active) section#startScreen .new-hero-subtitle{
    font-size:15px!important;
    line-height:1.48!important;
    margin-bottom:18px!important;
  }
  body:not(.flow-active) section#startScreen .new-hero-cta{
    max-width:100%!important;
    height:54px!important;
    border-radius:14px!important;
    font-size:16px!important;
  }
  body:not(.flow-active) section#startScreen .new-trust-grid{
    grid-template-columns:1fr!important;
    max-width:100%!important;
    gap:9px!important;
    margin-top:18px!important;
  }
  body:not(.flow-active) section#startScreen .new-trust-pill{
    min-height:44px!important;
    justify-content:flex-start!important;
    text-align:left!important;
    border-radius:12px!important;
    font-size:13px!important;
  }
  body:not(.flow-active) section#startScreen .phone-device{
    width:min(100%,292px)!important;
    border-width:6px!important;
    padding:22px 16px!important;
  }
  body:not(.flow-active) section#startScreen .phone-logo-box img{max-height:56px!important;}
  body:not(.flow-active) section#startScreen .phone-device h3{font-size:17px!important;margin:16px 0 12px!important;}

  body:not(.flow-active) section#startScreen > .hero-how-card{
    width:calc(100% - 24px)!important;
    padding:20px 14px!important;
    margin:0 auto!important;
  }
  body:not(.flow-active) section#startScreen > .hero-how-card h2{
    font-size:22px!important;
    margin-bottom:18px!important;
  }
  body:not(.flow-active) section#startScreen .hero-how-steps{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  body:not(.flow-active) section#startScreen .hero-how-step{
    display:grid!important;
    grid-template-columns:42px 1fr!important;
    text-align:left!important;
    align-items:start!important;
    column-gap:12px!important;
  }
  body:not(.flow-active) section#startScreen .hero-how-step .step-dot{grid-row:1 / 3!important;}
  body:not(.flow-active) section#startScreen .hero-how-step b{margin:0 0 4px!important;font-size:14px!important;}
  body:not(.flow-active) section#startScreen .hero-how-step p{font-size:12px!important;}
  body:not(.flow-active) section#startScreen > .operators-strip{padding:24px 14px 28px!important;}
  body:not(.flow-active) section#startScreen .operators-strip h2{font-size:22px!important;}
  body:not(.flow-active) section#startScreen .operators-strip-list{gap:16px 22px!important;}
  body:not(.flow-active) section#startScreen .operators-strip-list span{font-size:24px!important;}
  body:not(.flow-active) section#startScreen .op-more{width:100%!important;font-size:14px!important;}
}

/* ===== v51 — Logos oficiais/operadoras responsivas ===== */
.operators-logo-row{
  width:100%;
  max-width:760px;
  margin:14px auto 0;
  display:flex!important;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px 28px;
}
.operators-logo-row img{
  height:34px;
  width:auto;
  max-width:132px;
  object-fit:contain;
  display:block;
  opacity:.96;
  filter:drop-shadow(0 5px 12px rgba(15,23,42,.06));
  transition:transform .2s ease, opacity .2s ease;
}
.operators-logo-row img:hover{opacity:1;transform:translateY(-1px)}
.operator-card{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:72px;
  overflow:visible!important;
}
.operator-brand-logo{
  width:auto;
  height:38px;
  max-width:124px;
  object-fit:contain;
  display:block;
  pointer-events:none;
}
.operator-card.selected .operator-brand-logo{transform:scale(1.02)}
@media (max-width:768px){
  .operators-logo-row{gap:12px 16px;max-width:360px;margin-top:10px}
  .operators-logo-row img{height:26px;max-width:92px}
  .operator-card{min-height:64px;padding:12px 8px!important}
  .operator-brand-logo{height:30px;max-width:98px}
}
@media (max-width:380px){
  .operators-logo-row{gap:10px 12px}
  .operators-logo-row img{height:23px;max-width:82px}
  .operator-card{min-height:58px;padding:10px 6px!important}
  .operator-brand-logo{height:27px;max-width:86px}
}

/* ===== v52 — correções finais: cards desktop, footer pagamento e overflow ===== */
html, body{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
*, *::before, *::after{box-sizing:border-box;min-width:0;}
img,svg,video,canvas{max-width:100%;height:auto;}

/* Container único para evitar conteúdo estourando em desktop grande */
.container,.container-wide,.header-inner,.new-hero-inner,.hero-how-card,.payment-flow-container{
  max-width:min(1180px, calc(100vw - 32px))!important;
}

/* Cards de promoção: lado a lado no desktop/tablet e sem altura exagerada */
.bonus-cards-list{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
  justify-content:center!important;
  margin:18px auto 12px!important;
}
.bonus-card-flow,
.flow-promo-block .bonus-card-flow,
.final-featured-card{
  width:100%!important;
  min-height:96px!important;
  max-height:none!important;
  padding:16px 18px!important;
  border-radius:18px!important;
  overflow:visible!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.bonus-card-flow strong,
.flow-promo-block .bonus-card-flow strong{
  font-size:clamp(1.35rem, 2.2vw, 1.7rem)!important;
  line-height:1!important;
}
.bonus-side strong,
.flow-promo-block .bonus-side strong,
.final-featured-card .bonus-side strong{
  font-size:clamp(1.55rem, 2.6vw, 2rem)!important;
  line-height:1!important;
}
.bonus-pill{
  top:-10px!important;
  right:14px!important;
  font-size:9px!important;
  padding:4px 9px!important;
  line-height:1!important;
  white-space:nowrap!important;
  background:#22C55E!important;
}
.bonus-disclaimer,.bonus-note{
  max-width:560px!important;
  margin:8px auto 0!important;
  text-align:center!important;
  line-height:1.55!important;
}

/* Cards de promoção no fluxo/etapa inicial: largura correta no desktop */
.flow-promo-block{width:100%!important;}
.flow-promo-block .bonus-cards-list{
  max-width:560px!important;
}
.flow-container .bonus-cards-list,
.flow-card .bonus-cards-list{
  max-width:560px!important;
}

/* Seção de valores: grade controlada para não ficar gigante no desktop */
.final-values-grid{
  width:100%!important;
  max-width:560px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  gap:12px!important;
}
.final-values-grid .valor-card{
  min-height:76px!important;
  padding:14px 10px!important;
}

/* Footer do pagamento: largura total correta, sem bloco quebrado no lado direito */
.payment-layout-page{
  min-height:100vh!important;
  display:flex!important;
  flex-direction:column!important;
  background:#F5F7FB!important;
}
.payment-main-shell{
  flex:1 0 auto!important;
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  padding:28px 16px 36px!important;
}
.payment-small-footer,
.payment-small-footer.footer{
  flex:0 0 auto!important;
  width:100vw!important;
  max-width:none!important;
  margin:0!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  padding:0!important;
  background:#061238!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}
.payment-small-footer .footer-bottom{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:28px 16px!important;
  background:#061238!important;
}
.payment-small-footer .footer-bottom-inner{
  width:100%!important;
  max-width:620px!important;
  margin:0 auto!important;
  padding:0!important;
  text-align:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:10px!important;
}
.payment-small-footer p,
.payment-small-footer .footer-disclaimer{
  width:100%!important;
  max-width:560px!important;
  margin:0 auto!important;
  color:rgba(255,255,255,.82)!important;
  font-size:12px!important;
  line-height:1.75!important;
  text-align:center!important;
}
.payment-small-footer .footer-links{
  margin-top:6px!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:18px!important;
}
.payment-small-footer .footer-links a{
  color:#93C5FD!important;
  font-size:12px!important;
  font-weight:700!important;
}
.payment-receipt-screen,
.payment-flow-container{
  width:100%!important;
  max-width:560px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.pix-code-box{
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

/* Desktop largo: manter tudo central e sem sobreposição */
@media (min-width: 1024px){
  body:not(.flow-active) section#startScreen .new-hero-inner{
    grid-template-columns:minmax(420px, 0.9fr) minmax(420px, 1.1fr)!important;
    gap:54px!important;
    align-items:center!important;
  }
  body:not(.flow-active) section#startScreen .new-hero-copy{
    max-width:520px!important;
  }
  body:not(.flow-active) section#startScreen .phone-visual-wrap{
    justify-content:center!important;
    max-width:520px!important;
  }
  body:not(.flow-active) section#startScreen > .hero-how-card,
  body:not(.flow-active) section#startScreen > .operators-strip{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:min(1120px, calc(100% - 48px))!important;
    max-width:1120px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Mobile: cards empilhados, sem vazamento e com tamanhos compactos */
@media (max-width: 768px){
  .bonus-cards-list,
  .flow-promo-block .bonus-cards-list,
  .flow-container .bonus-cards-list,
  .flow-card .bonus-cards-list{
    grid-template-columns:1fr!important;
    max-width:340px!important;
    gap:12px!important;
  }
  .bonus-card-flow,
  .flow-promo-block .bonus-card-flow,
  .final-featured-card{
    min-height:82px!important;
    padding:14px 16px!important;
    border-radius:16px!important;
  }
  .bonus-card-flow strong,
  .flow-promo-block .bonus-card-flow strong{
    font-size:1.35rem!important;
  }
  .bonus-side strong,
  .flow-promo-block .bonus-side strong,
  .final-featured-card .bonus-side strong{
    font-size:1.55rem!important;
  }
  .bonus-side span{font-size:10px!important;}
  .bonus-label{font-size:10px!important;}
  .final-values-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    max-width:360px!important;
    gap:10px!important;
  }
  .payment-main-shell{padding:18px 12px 26px!important;}
  .payment-small-footer .footer-bottom{padding:24px 16px!important;}
}

@media (max-width: 380px){
  .final-values-grid{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .final-values-grid .valor-card{min-height:64px!important;padding:10px 6px!important;}
  .payment-small-footer p,.payment-small-footer .footer-disclaimer{font-size:11px!important;}
}

/* === AJUSTE V53: ocupação desktop, loader e footer empresarial === */
:root{
  --site-max: 1240px;
  --footer-dark:#061238;
}

@media (min-width: 1024px){
  .site-header-compact .header-inner,
  .payment-header-site .header-inner{
    max-width: var(--site-max)!important;
    margin:0 auto!important;
    padding-left:32px!important;
    padding-right:32px!important;
  }

  body:not(.flow-active) .new-hero-screen{
    min-height:auto!important;
    padding:54px 0 0!important;
    overflow:hidden!important;
  }

  body:not(.flow-active) .new-hero-container{
    width:min(var(--site-max), calc(100% - 64px))!important;
    max-width:var(--site-max)!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:minmax(430px, .95fr) minmax(420px, 1.05fr)!important;
    align-items:center!important;
    gap:56px!important;
    padding:26px 0 28px!important;
  }

  body:not(.flow-active) .new-hero-copy{
    max-width:560px!important;
    text-align:left!important;
    align-items:flex-start!important;
    justify-content:center!important;
  }

  body:not(.flow-active) .new-hero-copy h1{
    font-size:clamp(46px, 4.1vw, 72px)!important;
    line-height:.98!important;
    letter-spacing:-2px!important;
    max-width:560px!important;
  }

  body:not(.flow-active) .new-hero-subtitle{
    max-width:500px!important;
    font-size:18px!important;
    line-height:1.55!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  body:not(.flow-active) .new-hero-cta{
    max-width:360px!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  body:not(.flow-active) .new-trust-grid{
    justify-content:flex-start!important;
    max-width:650px!important;
    grid-template-columns:repeat(4, minmax(128px, 1fr))!important;
    gap:12px!important;
  }

  body:not(.flow-active) .new-hero-phone-wrap{
    justify-content:center!important;
    align-items:center!important;
    max-width:none!important;
    min-height:520px!important;
  }

  body:not(.flow-active) .phone-device{
    transform:rotate(9deg) scale(1.02)!important;
    transform-origin:center!important;
    margin:0 auto!important;
  }

  body:not(.flow-active) .hero-how-card,
  body:not(.flow-active) .operators-strip{
    position:relative!important;
    width:min(var(--site-max), calc(100% - 64px))!important;
    max-width:var(--site-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
  }

  body:not(.flow-active) .hero-how-card{
    margin-top:14px!important;
    margin-bottom:0!important;
  }

  body:not(.flow-active) .operators-strip{
    margin-top:0!important;
    border-radius:0 0 28px 28px!important;
  }

  .section .container-wide,
  .container-wide{
    max-width:var(--site-max)!important;
  }
}

@media (min-width: 1440px){
  :root{ --site-max: 1320px; }
  body:not(.flow-active) .new-hero-container{
    grid-template-columns:minmax(520px, .9fr) minmax(520px, 1.1fr)!important;
    gap:72px!important;
  }
}

/* Mobile/tablet: impede vazamento e melhora empilhamento */
@media (max-width: 1023px){
  body:not(.flow-active) .new-hero-screen{padding:24px 0 0!important;}
  body:not(.flow-active) .new-hero-container{
    width:100%!important;
    max-width:560px!important;
    padding:24px 16px 26px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:24px!important;
  }
  body:not(.flow-active) .new-hero-copy{
    text-align:left!important;
    align-items:stretch!important;
    width:100%!important;
  }
  body:not(.flow-active) .new-hero-copy h1{
    font-size:clamp(32px, 10vw, 48px)!important;
    line-height:1.05!important;
  }
  body:not(.flow-active) .new-hero-subtitle{font-size:15px!important;}
  body:not(.flow-active) .new-hero-phone-wrap{display:none!important;}
  body:not(.flow-active) .new-trust-grid{
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:8px!important;
  }
  body:not(.flow-active) .new-trust-pill{
    width:100%!important;
    justify-content:flex-start!important;
  }
  body:not(.flow-active) .hero-how-card,
  body:not(.flow-active) .operators-strip{
    width:calc(100% - 24px)!important;
    max-width:560px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Footer empresarial padronizado */
.footer,
.payment-small-footer{
  width:100%!important;
  background:var(--footer-dark)!important;
  color:#DDE7FF!important;
  overflow:hidden!important;
}
.footer-premium-inner,
.footer-bottom-inner{
  width:100%!important;
  max-width:760px!important;
  margin:0 auto!important;
  text-align:center!important;
  padding-left:20px!important;
  padding-right:20px!important;
}
.footer-company-info{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:5px!important;
  margin:12px auto 14px!important;
  padding:12px 14px!important;
  max-width:520px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.035)!important;
  color:rgba(255,255,255,.82)!important;
  font-size:12px!important;
  line-height:1.5!important;
}
.footer-company-info strong{
  color:#fff!important;
  font-size:13px!important;
  font-weight:800!important;
}
.footer-company-info a{
  color:#93C5FD!important;
  font-weight:700!important;
  overflow-wrap:anywhere!important;
}
.footer-disclaimer,
.footer-copy,
.footer-bottom p{
  max-width:620px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  line-height:1.7!important;
}
.footer-links{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:16px!important;
  margin-top:12px!important;
}
.footer-links a{color:#93C5FD!important;font-weight:700!important;}
.payment-small-footer{
  margin-top:0!important;
  padding:0!important;
}
.payment-small-footer .footer-bottom{
  width:100%!important;
  background:var(--footer-dark)!important;
  padding:26px 0!important;
}

@media (max-width: 520px){
  .footer-premium-inner,
  .footer-bottom-inner{padding-left:14px!important;padding-right:14px!important;}
  .footer-company-info{font-size:11px!important;padding:10px 12px!important;}
  .footer-disclaimer,.footer-copy,.footer-bottom p{font-size:11px!important;}
  .footer-links{gap:12px!important;}
}

/* Loading premium para cliques */
.global-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(6,18,56,.42);
  backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.global-loader.active{opacity:1;pointer-events:auto;}
.global-loader-card{
  width:min(280px, 92vw);
  background:#fff;
  border-radius:22px;
  padding:22px 20px;
  text-align:center;
  box-shadow:0 24px 70px rgba(15,23,42,.22);
  border:1px solid #E2E8F0;
  color:#0F172A;
}
.global-loader-spinner{
  width:34px;
  height:34px;
  border-radius:50%;
  border:3px solid #DBEAFE;
  border-top-color:#163B8C;
  display:block;
  margin:0 auto 12px;
  animation:globalSpin .75s linear infinite;
}
.global-loader-card strong{display:block;font-size:15px;font-weight:800;margin-bottom:4px;}
.global-loader-card small{display:block;color:#64748B;font-size:12px;font-weight:600;}
@keyframes globalSpin{to{transform:rotate(360deg)}}

/* === AJUSTE V54: ocupar melhor desktop + footer legível e alinhado === */
:root{--site-max:1480px;--footer-dark:#061238;}
html,body{width:100%;max-width:100%;overflow-x:hidden!important;}
*{box-sizing:border-box;min-width:0;}

@media (min-width: 1024px){
  body:not(.flow-active) .site-header-compact .header-inner,
  body:not(.flow-active) .new-hero-container,
  body:not(.flow-active) .hero-how-card,
  body:not(.flow-active) .operators-strip{
    width:min(var(--site-max), calc(100vw - 96px))!important;
    max-width:var(--site-max)!important;
  }
  body:not(.flow-active) .new-hero-screen{
    padding-top:36px!important;
  }
  body:not(.flow-active) .new-hero-container{
    grid-template-columns:minmax(520px, .95fr) minmax(480px, 1.05fr)!important;
    gap:clamp(64px, 7vw, 120px)!important;
    min-height:620px!important;
    padding:40px 0 38px!important;
  }
  body:not(.flow-active) .new-hero-copy{
    max-width:680px!important;
  }
  body:not(.flow-active) .new-hero-copy h1{
    max-width:680px!important;
    font-size:clamp(58px, 4.9vw, 86px)!important;
    line-height:1.02!important;
    letter-spacing:-2.6px!important;
  }
  body:not(.flow-active) .new-hero-subtitle{
    max-width:610px!important;
    font-size:20px!important;
    line-height:1.55!important;
  }
  body:not(.flow-active) .new-hero-cta{
    width:360px!important;
    max-width:360px!important;
    height:60px!important;
    font-size:17px!important;
  }
  body:not(.flow-active) .new-trust-grid{
    max-width:680px!important;
    grid-template-columns:repeat(4, minmax(135px, 1fr))!important;
  }
  body:not(.flow-active) .new-trust-pill{
    min-height:58px!important;
    font-size:13px!important;
  }
  body:not(.flow-active) .new-hero-phone-wrap{
    min-height:620px!important;
    justify-content:center!important;
  }
  body:not(.flow-active) .phone-device{
    width:380px!important;
    min-height:650px!important;
    transform:rotate(8deg) scale(1.04)!important;
  }
  body:not(.flow-active) .hero-how-card{
    margin-top:10px!important;
    padding:34px 42px!important;
  }
  body:not(.flow-active) .operators-strip{
    padding:34px 24px 40px!important;
  }
  body:not(.flow-active) .operators-logo-row img{
    max-height:38px!important;
  }
}

@media (min-width: 1600px){
  :root{--site-max:1560px;}
  body:not(.flow-active) .new-hero-container{
    min-height:690px!important;
  }
  body:not(.flow-active) .new-hero-copy h1{
    font-size:clamp(70px, 4.5vw, 92px)!important;
  }
  body:not(.flow-active) .phone-device{
    width:410px!important;
    min-height:700px!important;
  }
}

/* Footer principal e institucional: fundo total, texto claro e sem recorte */
.footer,
.site-footer,
.payment-small-footer,
.payment-small-footer.footer{
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  background:var(--footer-dark)!important;
  color:rgba(255,255,255,.86)!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  overflow:hidden!important;
}
.footer *,
.site-footer *,
.payment-small-footer *{
  color:inherit;
}
.footer-premium-inner,
.footer-grid,
.footer-bottom-inner,
.footer-inner,
.payment-small-footer .footer-bottom-inner{
  width:min(100%, 920px)!important;
  max-width:920px!important;
  margin:0 auto!important;
  padding-left:22px!important;
  padding-right:22px!important;
  text-align:center!important;
}
.footer,
.site-footer{padding:0!important;}
.footer-bottom,
.payment-small-footer .footer-bottom{
  background:var(--footer-dark)!important;
  padding:34px 0!important;
}
.footer p,
.footer-copy,
.footer-disclaimer,
.footer-bottom p,
.payment-small-footer p,
.payment-small-footer .footer-disclaimer{
  color:rgba(255,255,255,.82)!important;
  max-width:720px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  font-size:13px!important;
  line-height:1.8!important;
  text-align:center!important;
}
.footer-company-info{
  color:rgba(255,255,255,.86)!important;
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.10)!important;
}
.footer-company-info strong{color:#fff!important;}
.footer-company-info a,
.footer-links a,
.payment-small-footer .footer-links a{
  color:#93C5FD!important;
  font-weight:800!important;
}
.footer-links,
.payment-small-footer .footer-links{
  justify-content:center!important;
  gap:20px!important;
  margin-top:14px!important;
}

@media (max-width:1023px){
  body:not(.flow-active) .new-hero-container{
    max-width:620px!important;
  }
  body:not(.flow-active) .new-hero-phone-wrap{display:none!important;}
}
@media (max-width:520px){
  .footer-bottom,.payment-small-footer .footer-bottom{padding:26px 0!important;}
  .footer p,.footer-copy,.footer-disclaimer,.footer-bottom p,.payment-small-footer p{font-size:11.5px!important;line-height:1.75!important;}
  .footer-premium-inner,.footer-grid,.footer-bottom-inner,.footer-inner,.payment-small-footer .footer-bottom-inner{padding-left:16px!important;padding-right:16px!important;}
}


/* === V55 — layout final igual ao modelo: desktop amplo, mobile limpo, footer profissional === */
:root{
  --brand-navy:#061238;
  --brand-navy-2:#08256b;
  --brand-blue:#0f5bea;
  --brand-blue-soft:#123d94;
  --brand-yellow:#ffc90a;
  --brand-white:#ffffff;
  --brand-text:#071943;
  --brand-muted:#5b6c8a;
  --layout-max:1360px;
}

html,body{max-width:100%;overflow-x:hidden!important;background:#fff!important;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;}
img,svg,video{max-width:100%;height:auto;}

/* Header */
.site-header-compact.header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  width:100%!important;
  background:rgba(6,18,56,.98)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:none!important;
  backdrop-filter:blur(14px)!important;
}
.site-header-compact .header-inner{
  width:min(var(--layout-max), calc(100vw - 48px))!important;
  max-width:var(--layout-max)!important;
  height:84px!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:28px!important;
}
.logo-image-link{display:flex!important;align-items:center!important;flex:0 0 auto!important;}
.brand-logo-img{
  width:auto!important;
  height:66px!important;
  max-width:210px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.14));
}
.desktop-nav{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:clamp(20px,2.2vw,42px)!important;
  flex:1!important;
}
.desktop-nav a{
  color:#fff!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:800!important;
  opacity:.95!important;
  padding:8px 0!important;
}
.desktop-nav a.active,
.desktop-nav a:hover{color:var(--brand-yellow)!important;opacity:1!important;}
.header-consult-btn{
  height:52px!important;
  padding:0 30px!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#ffd21d,#ffc108)!important;
  color:#061238!important;
  font-size:15px!important;
  font-weight:900!important;
  box-shadow:0 12px 30px rgba(255,201,10,.16)!important;
  white-space:nowrap!important;
}
.header-actions{display:none!important;}

/* Hero */
.flow-page{background:#fff!important;}
.new-hero-screen{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 78% 38%, rgba(25,119,255,.55), transparent 35%),
    linear-gradient(115deg, #061238 0%, #08256b 42%, #0b4fd6 100%)!important;
  padding:0 0 34px!important;
  text-align:center!important;
}
.new-hero-screen::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(110deg, rgba(255,255,255,0) 0 44%, rgba(255,255,255,.10) 44% 54%, rgba(255,255,255,0) 54%),
    radial-gradient(circle at 88% 10%, rgba(30,104,255,.28), transparent 35%);
  pointer-events:none;
}
.new-hero-bg{display:none!important;}
.new-hero-container{
  position:relative!important;
  z-index:1!important;
  width:min(var(--layout-max), calc(100vw - 48px))!important;
  max-width:var(--layout-max)!important;
  margin:0 auto!important;
  padding:clamp(48px,6vw,74px) 0 40px!important;
  min-height:620px!important;
  display:grid!important;
  grid-template-columns:minmax(460px, 0.95fr) minmax(420px, .85fr)!important;
  gap:clamp(38px,5vw,80px)!important;
  align-items:center!important;
  text-align:left!important;
}
.new-hero-copy{
  max-width:620px!important;
  width:100%!important;
  margin:0!important;
}
.new-hero-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:36px!important;
  padding:0 16px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.20)!important;
  background:rgba(255,255,255,.09)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:800!important;
  margin-bottom:24px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.new-hero-copy h1{
  color:#fff!important;
  margin:0 0 24px!important;
  max-width:660px!important;
  font-size:clamp(48px,4.2vw,72px)!important;
  line-height:1.08!important;
  letter-spacing:-2.4px!important;
  font-weight:900!important;
}
.new-hero-copy h1 span{color:var(--brand-yellow)!important;display:inline!important;}
.new-hero-subtitle{
  color:rgba(255,255,255,.92)!important;
  max-width:560px!important;
  margin:0 0 30px!important;
  font-size:20px!important;
  line-height:1.55!important;
  font-weight:500!important;
}
.new-hero-cta{
  width:300px!important;
  max-width:100%!important;
  height:58px!important;
  border-radius:13px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  background:linear-gradient(180deg,#ffd21d,#ffc108)!important;
  color:#061238!important;
  font-size:18px!important;
  font-weight:900!important;
  box-shadow:0 14px 30px rgba(255,201,10,.18)!important;
}
.new-hero-cta:hover,
.header-consult-btn:hover{transform:translateY(-1px)!important;filter:brightness(1.03)!important;}
.cta-icon{font-size:19px!important;color:#061238!important;}
.new-trust-grid{
  margin-top:28px!important;
  max-width:650px!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
.new-trust-pill{
  min-height:62px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  background:rgba(255,255,255,.045)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.18!important;
  text-align:center!important;
  padding:10px 12px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.new-trust-pill span{font-size:24px!important;line-height:1!important;color:#fff!important;}
.pix-pill img{width:28px!important;height:28px!important;object-fit:contain!important;flex:0 0 auto!important;}
.new-hero-phone-wrap{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:600px!important;
}
.phone-device{
  width:min(390px,34vw)!important;
  min-height:640px!important;
  border:11px solid rgba(2,6,23,.92)!important;
  border-radius:42px!important;
  background:linear-gradient(180deg,#09245f,#061238)!important;
  transform:rotate(8deg)!important;
  padding:40px 34px!important;
  box-shadow:0 40px 90px rgba(0,0,0,.36)!important;
}
.phone-logo-box img{height:auto!important;max-height:88px!important;object-fit:contain!important;margin:0 auto!important;}
.phone-device h3{color:#fff!important;font-size:20px!important;margin:18px 0 14px!important;text-align:center!important;}
.phone-input-fake,.phone-safe-card{background:rgba(255,255,255,.94)!important;color:#64748B!important;}
.phone-button-fake{background:linear-gradient(180deg,#ffd21d,#ffc108)!important;color:#061238!important;font-weight:900!important;}

/* Cards abaixo do hero */
.hero-how-card,
.operators-strip{
  position:relative!important;
  z-index:3!important;
  display:inline-flex!important;
  vertical-align:top!important;
  background:#fff!important;
  color:var(--brand-text)!important;
  border:1px solid #dbe4f0!important;
  box-shadow:0 20px 55px rgba(15,23,42,.10)!important;
  border-radius:18px!important;
  margin-top:-10px!important;
  margin-bottom:36px!important;
  min-height:186px!important;
  text-align:center!important;
}
.hero-how-card{
  width:min(760px,54vw)!important;
  padding:28px 32px!important;
  flex-direction:column!important;
  justify-content:center!important;
  margin-right:16px!important;
}
.operators-strip{
  width:min(500px,35vw)!important;
  padding:28px 30px!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  margin-left:16px!important;
}
.hero-how-card h2,.operators-strip h2{
  color:#061e5f!important;
  font-size:24px!important;
  line-height:1.15!important;
  margin:0 0 22px!important;
  font-weight:900!important;
}
.hero-how-steps{
  display:grid!important;
  grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr!important;
  gap:10px!important;
  align-items:start!important;
}
.hero-how-step{display:grid!important;gap:9px!important;justify-items:center!important;text-align:center!important;}
.step-dot{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:34px!important;height:34px!important;
  border-radius:50%!important;
  background:#1664e8!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:900!important;
}
.hero-how-step b{color:#061e5f!important;font-size:14px!important;line-height:1.25!important;}
.hero-how-step p{color:#294061!important;font-size:13px!important;line-height:1.45!important;margin:0!important;}
.hero-how-arrow{color:#a6b3c4!important;font-size:52px!important;line-height:1!important;padding-top:28px!important;font-weight:300!important;}
.operators-logo-row{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:22px!important;
}
.operators-logo-row img{height:32px!important;max-width:100px!important;width:auto!important;object-fit:contain!important;}

/* Seções institucionais em largura equilibrada */
body:not(.flow-active) .section .container-wide{
  width:min(980px, calc(100vw - 40px))!important;
  max-width:980px!important;
}
body:not(.flow-active) .how-it-works{padding-top:56px!important;}

/* Footer igual ao modelo */
.site-footer-pro{
  width:100%!important;
  background:linear-gradient(115deg,#061238 0%,#071b4c 55%,#08245f 100%)!important;
  color:#fff!important;
  padding:42px 0 18px!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}
.site-footer-pro-inner{
  width:min(var(--layout-max), calc(100vw - 48px))!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:1.35fr .8fr .8fr 1.15fr!important;
  gap:34px!important;
  align-items:start!important;
}
.footer-pro-brand,.footer-pro-col{text-align:left!important;}
.footer-pro-logo{display:inline-flex!important;margin-bottom:18px!important;}
.footer-pro-logo img{height:78px!important;width:auto!important;object-fit:contain!important;}
.footer-pro-brand p{
  color:rgba(255,255,255,.82)!important;
  max-width:320px!important;
  font-size:15px!important;
  line-height:1.7!important;
  margin:0!important;
}
.footer-pro-col h4{
  color:#fff!important;
  font-size:18px!important;
  font-weight:900!important;
  margin:0 0 16px!important;
}
.footer-pro-col a,.footer-pro-contact span{
  display:block!important;
  color:rgba(255,255,255,.82)!important;
  font-size:15px!important;
  line-height:1.5!important;
  margin:0 0 12px!important;
  text-decoration:none!important;
  overflow-wrap:anywhere!important;
}
.footer-pro-col a:hover{color:#ffd21d!important;}
.site-footer-pro-bottom{
  width:min(var(--layout-max), calc(100vw - 48px))!important;
  margin:28px auto 0!important;
  padding-top:18px!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
  color:rgba(255,255,255,.86)!important;
  text-align:center!important;
  font-size:14px!important;
}

/* Esconde footers antigos se sobraram */
.footer:not(.site-footer-pro),.footer-premium,.payment-small-footer.footer{display:none!important;}

@media (min-width:1500px){
  :root{--layout-max:1500px;}
  .new-hero-container{min-height:660px!important;}
  .phone-device{width:410px!important;min-height:670px!important;}
}

@media (max-width:1180px){
  .desktop-nav{gap:18px!important;}
  .desktop-nav a{font-size:14px!important;}
  .header-consult-btn{padding:0 20px!important;}
  .new-hero-container{grid-template-columns:1fr .85fr!important;gap:32px!important;}
  .new-hero-copy h1{font-size:clamp(42px,4.8vw,58px)!important;}
  .new-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:470px!important;}
  .hero-how-card{width:min(700px,92vw)!important;margin-right:0!important;margin-left:0!important;display:flex!important;}
  .operators-strip{width:min(700px,92vw)!important;margin-left:0!important;margin-right:0!important;margin-top:16px!important;display:flex!important;}
}

@media (max-width:900px){
  .site-header-compact .header-inner{width:calc(100vw - 28px)!important;height:74px!important;}
  .brand-logo-img{height:56px!important;max-width:170px!important;}
  .desktop-nav{display:none!important;}
  .header-actions{display:flex!important;}
  .header-menu-btn{display:flex!important;color:#fff!important;align-items:center!important;gap:6px!important;}
  .header-menu-btn span{font-size:11px!important;font-weight:800!important;color:#fff!important;}
  .mobile-menu.active{display:flex!important;}
  .new-hero-screen{padding-bottom:0!important;}
  .new-hero-container{
    width:calc(100vw - 28px)!important;
    grid-template-columns:1fr!important;
    min-height:auto!important;
    padding:30px 0 28px!important;
    text-align:left!important;
    gap:24px!important;
  }
  .new-hero-copy{max-width:none!important;}
  .new-hero-badge{font-size:12px!important;min-height:30px!important;margin-bottom:18px!important;}
  .new-hero-copy h1{font-size:clamp(34px,9vw,48px)!important;line-height:1.12!important;letter-spacing:-1.4px!important;margin-bottom:18px!important;}
  .new-hero-subtitle{font-size:16px!important;line-height:1.55!important;margin-bottom:22px!important;}
  .new-hero-cta{width:100%!important;max-width:none!important;height:56px!important;font-size:16px!important;}
  .new-trust-grid{grid-template-columns:1fr!important;gap:10px!important;max-width:none!important;margin-top:18px!important;}
  .new-trust-pill{justify-content:flex-start!important;text-align:left!important;min-height:48px!important;font-size:14px!important;padding:10px 14px!important;}
  .new-hero-phone-wrap{display:none!important;}
  .hero-how-card,.operators-strip{
    width:calc(100vw - 28px)!important;
    display:flex!important;
    margin:14px auto 0!important;
    border-radius:16px!important;
    min-height:auto!important;
    padding:22px 16px!important;
  }
  .hero-how-card h2,.operators-strip h2{font-size:22px!important;margin-bottom:18px!important;}
  .hero-how-steps{grid-template-columns:1fr!important;gap:20px!important;}
  .hero-how-arrow{display:none!important;}
  .hero-how-step{border-bottom:1px solid #E2E8F0!important;padding-bottom:18px!important;}
  .hero-how-step:last-child{border-bottom:none!important;padding-bottom:0!important;}
  .operators-logo-row{gap:16px 22px!important;}
  .operators-logo-row img{height:28px!important;max-width:86px!important;}
  .site-footer-pro{padding:32px 0 18px!important;}
  .site-footer-pro-inner{width:calc(100vw - 32px)!important;grid-template-columns:1fr!important;gap:24px!important;text-align:left!important;}
  .footer-pro-logo img{height:64px!important;}
  .footer-pro-brand p{max-width:none!important;font-size:14px!important;}
  .footer-pro-col h4{font-size:16px!important;margin-bottom:12px!important;}
  .footer-pro-col a,.footer-pro-contact span{font-size:14px!important;margin-bottom:10px!important;}
  .site-footer-pro-bottom{width:calc(100vw - 32px)!important;font-size:12px!important;line-height:1.5!important;}
}

@media (max-width:420px){
  .brand-logo-img{height:48px!important;max-width:150px!important;}
  .new-hero-copy h1{font-size:32px!important;}
  .new-hero-subtitle{font-size:14px!important;}
  .operators-logo-row img{height:24px!important;max-width:76px!important;}
}

/* ===== v56 — Correção definitiva da área Como funciona + Operadoras ===== */
body:not(.flow-active) section#startScreen.start-screen.new-hero-screen{
  display:grid!important;
  grid-template-columns:minmax(0, 2fr) minmax(320px, 1.15fr)!important;
  justify-content:center!important;
  align-items:start!important;
  column-gap:28px!important;
  row-gap:0!important;
  width:100%!important;
  max-width:none!important;
  padding:0 max(24px, calc((100vw - 1360px) / 2)) 34px!important;
  background:#FFFFFF!important;
  overflow:hidden!important;
}
body:not(.flow-active) section#startScreen.start-screen.new-hero-screen::before{
  display:none!important;
}
body:not(.flow-active) section#startScreen > .new-hero-container{
  grid-column:1 / -1!important;
  width:calc(100% + (2 * max(24px, calc((100vw - 1360px) / 2))))!important;
  max-width:none!important;
  margin-left:calc(-1 * max(24px, calc((100vw - 1360px) / 2)))!important;
  margin-right:calc(-1 * max(24px, calc((100vw - 1360px) / 2)))!important;
  min-height:560px!important;
  padding:64px max(24px, calc((100vw - 1360px) / 2)) 70px!important;
  display:grid!important;
  grid-template-columns:minmax(420px, 560px) minmax(360px, 500px)!important;
  justify-content:center!important;
  align-items:center!important;
  gap:clamp(54px,7vw,104px)!important;
  background:
    radial-gradient(circle at 72% 42%, rgba(37,99,235,.54), transparent 30%),
    linear-gradient(120deg, transparent 0 52%, rgba(255,255,255,.075) 52% 65%, transparent 65% 100%),
    linear-gradient(135deg,#061845 0%,#0B3B9E 52%,#1767F2 100%)!important;
}
body:not(.flow-active) section#startScreen .new-hero-copy{
  max-width:560px!important;
  text-align:left!important;
  justify-self:start!important;
}
body:not(.flow-active) section#startScreen .new-hero-copy h1{
  font-size:clamp(46px,4.45vw,66px)!important;
  line-height:1.05!important;
  max-width:590px!important;
}
body:not(.flow-active) section#startScreen .new-hero-phone-wrap{
  justify-self:center!important;
  align-self:center!important;
  max-width:500px!important;
  min-height:510px!important;
}
body:not(.flow-active) section#startScreen .phone-device{
  width:330px!important;
  min-height:570px!important;
}

/* Cards abaixo do hero: lado a lado, fundo branco, sem sobreposição */
body:not(.flow-active) section#startScreen > .hero-how-card,
body:not(.flow-active) section#startScreen > .operators-strip{
  position:relative!important;
  z-index:4!important;
  width:100%!important;
  max-width:none!important;
  margin:28px 0 0!important;
  border-radius:18px!important;
  background:#FFFFFF!important;
  border:1px solid #DDE7F3!important;
  box-shadow:0 18px 44px rgba(15,23,42,.08)!important;
  transform:none!important;
  inset:auto!important;
}
body:not(.flow-active) section#startScreen > .hero-how-card{
  grid-column:1 / 2!important;
  padding:22px 28px 24px!important;
  color:#061845!important;
}
body:not(.flow-active) section#startScreen > .operators-strip{
  grid-column:2 / 3!important;
  padding:28px 24px!important;
  text-align:center!important;
}
body:not(.flow-active) section#startScreen > .hero-how-card h2,
body:not(.flow-active) section#startScreen > .operators-strip h2{
  color:#061845!important;
  font-size:24px!important;
  line-height:1.15!important;
  font-weight:900!important;
  margin:0 0 22px!important;
  text-align:center!important;
}
body:not(.flow-active) section#startScreen .hero-how-steps{
  display:grid!important;
  grid-template-columns:repeat(7, minmax(0, auto))!important;
  align-items:start!important;
  justify-content:center!important;
  gap:16px!important;
}
body:not(.flow-active) section#startScreen .hero-how-step{
  min-width:0!important;
  max-width:150px!important;
  color:#061845!important;
  text-align:center!important;
}
body:not(.flow-active) section#startScreen .step-dot{
  width:30px!important;
  height:30px!important;
  margin:0 auto 10px!important;
  background:#1767F2!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(23,103,242,.22)!important;
}
body:not(.flow-active) section#startScreen .hero-how-step b{
  color:#061845!important;
  display:block!important;
  font-size:13px!important;
  line-height:1.25!important;
  margin:0 0 6px!important;
}
body:not(.flow-active) section#startScreen .hero-how-step p{
  color:#334155!important;
  font-size:12px!important;
  line-height:1.45!important;
  margin:0!important;
}
body:not(.flow-active) section#startScreen .hero-how-arrow{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#B6C3D5!important;
  font-size:38px!important;
  line-height:1!important;
  padding-top:54px!important;
}
body:not(.flow-active) section#startScreen .operators-logo-row{
  display:flex!important;
  flex-wrap:nowrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:28px!important;
  max-width:100%!important;
  overflow:hidden!important;
}
body:not(.flow-active) section#startScreen .operators-logo-row img{
  height:32px!important;
  max-width:112px!important;
  object-fit:contain!important;
  flex:0 1 auto!important;
}
body:not(.flow-active) section#startScreen .operators-logo-row img[alt="Correios"]{
  max-width:126px!important;
}

/* Footer no padrão do mockup: escuro e sem texto preto */
.footer{
  background:linear-gradient(135deg,#061845 0%,#071B4C 100%)!important;
  color:#FFFFFF!important;
  border-top:0!important;
  padding:34px 0 0!important;
}
.footer-grid{
  display:grid!important;
  grid-template-columns:1.2fr .9fr .9fr 1.4fr!important;
  gap:32px!important;
  max-width:1360px!important;
  margin:0 auto!important;
  padding:0 24px!important;
  text-align:left!important;
}
.footer *{color:rgba(255,255,255,.88)!important;}
.footer h5,
.footer-brand strong,
.footer-links a:hover{color:#FFFFFF!important;}
.footer-brand p,
.footer-disclaimer,
.footer-bottom p{color:rgba(255,255,255,.78)!important;}
.footer-bottom{
  margin-top:28px!important;
  border-top:1px solid rgba(255,255,255,.14)!important;
  background:transparent!important;
}
.footer-bottom-inner{
  max-width:1360px!important;
  margin:0 auto!important;
  padding:16px 24px!important;
  justify-content:center!important;
  text-align:center!important;
}

@media(max-width:1180px){
  body:not(.flow-active) section#startScreen.start-screen.new-hero-screen{
    grid-template-columns:1fr!important;
    padding-left:24px!important;
    padding-right:24px!important;
  }
  body:not(.flow-active) section#startScreen > .new-hero-container{
    width:calc(100% + 48px)!important;
    margin-left:-24px!important;
    margin-right:-24px!important;
    padding-left:24px!important;
    padding-right:24px!important;
    grid-template-columns:minmax(0,1fr) minmax(300px,.75fr)!important;
    gap:36px!important;
  }
  body:not(.flow-active) section#startScreen > .hero-how-card,
  body:not(.flow-active) section#startScreen > .operators-strip{
    grid-column:1 / -1!important;
    max-width:980px!important;
    justify-self:center!important;
  }
}

@media(max-width:900px){
  body:not(.flow-active) section#startScreen.start-screen.new-hero-screen{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  body:not(.flow-active) section#startScreen > .new-hero-container{
    width:calc(100% + 32px)!important;
    margin-left:-16px!important;
    margin-right:-16px!important;
    padding:38px 16px 46px!important;
    grid-template-columns:1fr!important;
    min-height:auto!important;
  }
  body:not(.flow-active) section#startScreen .new-hero-copy{
    text-align:center!important;
    margin:0 auto!important;
    justify-self:center!important;
  }
  body:not(.flow-active) section#startScreen .new-hero-subtitle{
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body:not(.flow-active) section#startScreen .new-hero-cta{
    margin-left:auto!important;
    margin-right:auto!important;
    display:flex!important;
  }
  body:not(.flow-active) section#startScreen .new-trust-grid{
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body:not(.flow-active) section#startScreen .phone-device{
    transform:none!important;
    width:min(100%,320px)!important;
    min-height:auto!important;
  }
  body:not(.flow-active) section#startScreen .hero-how-steps{
    grid-template-columns:1fr 1fr!important;
    gap:18px!important;
  }
  body:not(.flow-active) section#startScreen .hero-how-arrow{display:none!important;}
  body:not(.flow-active) section#startScreen .hero-how-step{max-width:none!important;}
  .footer-grid{grid-template-columns:1fr 1fr!important;text-align:center!important;}
  .footer-contact-item,.footer-brand .logo{justify-content:center!important;}
}

@media(max-width:560px){
  body:not(.flow-active) section#startScreen > .new-hero-container{
    padding:28px 14px 34px!important;
  }
  body:not(.flow-active) section#startScreen .new-hero-copy h1{
    font-size:clamp(30px,10vw,42px)!important;
  }
  body:not(.flow-active) section#startScreen > .hero-how-card,
  body:not(.flow-active) section#startScreen > .operators-strip{
    margin-top:16px!important;
    border-radius:16px!important;
  }
  body:not(.flow-active) section#startScreen > .hero-how-card{padding:20px 14px!important;}
  body:not(.flow-active) section#startScreen > .operators-strip{padding:22px 14px!important;}
  body:not(.flow-active) section#startScreen .hero-how-steps{grid-template-columns:1fr!important;}
  body:not(.flow-active) section#startScreen .hero-how-step{
    display:grid!important;
    grid-template-columns:38px 1fr!important;
    gap:4px 12px!important;
    text-align:left!important;
  }
  body:not(.flow-active) section#startScreen .step-dot{grid-row:1 / 3!important;margin:0!important;}
  body:not(.flow-active) section#startScreen .operators-logo-row{
    flex-wrap:wrap!important;
    gap:18px 22px!important;
  }
  body:not(.flow-active) section#startScreen .operators-logo-row img{height:27px!important;max-width:96px!important;}
  .footer-grid{grid-template-columns:1fr!important;gap:22px!important;padding:0 18px!important;text-align:center!important;}
  .footer-bottom-inner{padding-left:18px!important;padding-right:18px!important;}
}

/* =========================================================
   V63 - Ajuste mobile final: fonte, distribuição e limpeza
   ========================================================= */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}
*, *::before, *::after{min-width:0;}
img, svg, video, canvas{max-width:100%;height:auto;}

@media(max-width:768px){
  /* Hero mais limpo no mobile */
  body:not(.flow-active) section#startScreen.start-screen.new-hero-screen{
    padding:0!important;
    min-height:auto!important;
    background:linear-gradient(180deg,#08245C 0%,#1767F2 100%)!important;
  }

  body:not(.flow-active) section#startScreen > .new-hero-container{
    width:100%!important;
    margin:0!important;
    padding:22px 16px 28px!important;
    display:block!important;
    min-height:auto!important;
    border-radius:0!important;
  }

  body:not(.flow-active) section#startScreen .new-hero-copy{
    max-width:420px!important;
    width:100%!important;
    margin:0 auto!important;
    text-align:center!important;
  }

  body:not(.flow-active) section#startScreen .new-hero-badge{
    margin:0 auto 14px!important;
    min-height:28px!important;
    padding:6px 10px!important;
    font-size:11px!important;
    line-height:1.2!important;
    width:max-content!important;
    max-width:100%!important;
  }

  body:not(.flow-active) section#startScreen .new-hero-copy h1{
    font-size:clamp(28px,8.5vw,38px)!important;
    line-height:1.08!important;
    letter-spacing:-1.1px!important;
    margin:0 0 12px!important;
    text-align:center!important;
  }

  body:not(.flow-active) section#startScreen .new-hero-subtitle{
    max-width:360px!important;
    margin:0 auto 18px!important;
    font-size:14px!important;
    line-height:1.48!important;
    color:rgba(255,255,255,.84)!important;
    text-align:center!important;
  }

  body:not(.flow-active) section#startScreen .new-hero-cta{
    width:100%!important;
    max-width:340px!important;
    height:50px!important;
    margin:0 auto!important;
    border-radius:16px!important;
    font-size:14px!important;
    font-weight:800!important;
    padding:0 16px!important;
  }

  body:not(.flow-active) section#startScreen .new-hero-cta .cta-icon{
    width:28px!important;
    height:28px!important;
    font-size:14px!important;
  }

  /* Remove telefone/mockup e etapa Como funciona no mobile */
  body:not(.flow-active) section#startScreen .new-hero-phone-wrap,
  body:not(.flow-active) section#startScreen .phone-device,
  body:not(.flow-active) section#startScreen .hero-how-card{
    display:none!important;
  }

  /* Selos alinhados, compactos e sem vazar */
  body:not(.flow-active) section#startScreen .new-trust-grid{
    width:100%!important;
    max-width:360px!important;
    margin:16px auto 0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  body:not(.flow-active) section#startScreen .new-trust-pill{
    min-height:38px!important;
    height:auto!important;
    padding:8px 9px!important;
    border-radius:13px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    font-size:11px!important;
    line-height:1.18!important;
    font-weight:700!important;
    text-align:center!important;
    white-space:normal!important;
  }

  body:not(.flow-active) section#startScreen .new-trust-pill span{
    font-size:14px!important;
    line-height:1!important;
    flex:0 0 auto!important;
  }

  body:not(.flow-active) section#startScreen .new-trust-pill img{
    width:16px!important;
    height:16px!important;
    flex:0 0 auto!important;
    object-fit:contain!important;
  }

  /* Operadoras mobile mais compacto */
  body:not(.flow-active) section#startScreen > .operators-strip{
    width:calc(100% - 28px)!important;
    margin:14px auto 0!important;
    padding:18px 12px!important;
    border-radius:18px!important;
  }

  body:not(.flow-active) section#startScreen > .operators-strip h2{
    font-size:18px!important;
    line-height:1.2!important;
    margin:0 0 14px!important;
  }

  body:not(.flow-active) section#startScreen .operators-logo-row{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px 12px!important;
    align-items:center!important;
    justify-items:center!important;
    overflow:visible!important;
  }

  body:not(.flow-active) section#startScreen .operators-logo-row img{
    height:23px!important;
    max-width:82px!important;
    width:auto!important;
    object-fit:contain!important;
  }

  body:not(.flow-active) section#startScreen .operators-logo-row img[alt="Correios"]{
    max-width:94px!important;
  }

  /* Fluxo mobile: fontes e espaçamento */
  .flow-screen{
    padding:14px 14px 20px!important;
  }

  .step-progress-wrap{
    padding:10px 4px 12px!important;
    margin:0 auto 10px!important;
  }

  .progress-item span{
    width:28px!important;
    height:28px!important;
    font-size:12px!important;
  }

  .progress-item small{
    font-size:10px!important;
    margin-top:5px!important;
  }

  .flow-container,
  .flow-card{
    width:100%!important;
    max-width:430px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .flow-card{
    border-radius:22px!important;
    padding:20px 16px!important;
  }

  .flow-title,
  .step-main-title{
    font-size:clamp(20px,6vw,26px)!important;
    line-height:1.18!important;
    margin-bottom:14px!important;
    text-align:center!important;
  }

  .flow-field-label,
  .form-label,
  .form-label-white{
    font-size:13px!important;
    line-height:1.35!important;
  }

  .form-input{
    height:50px!important;
    font-size:15px!important;
    border-radius:14px!important;
    padding:0 14px!important;
  }

  .flow-btn,
  .btn{
    min-height:50px!important;
    border-radius:16px!important;
    font-size:14px!important;
  }

  .bonus-cards-list,
  .options-grid-3x3{
    gap:10px!important;
  }

  .valor-card{
    min-height:74px!important;
    padding:10px 8px!important;
  }

  .valor-card-price{
    font-size:17px!important;
  }

  .valor-card-bonus{
    font-size:11px!important;
  }

  .summary-box,
  .summary-body{
    font-size:13px!important;
  }

  .footer{
    padding-top:26px!important;
  }

  .footer-grid{
    grid-template-columns:1fr!important;
    gap:20px!important;
    padding:0 18px!important;
    text-align:center!important;
  }

  .footer-brand .logo,
  .footer-contact-item,
  .footer-links{
    justify-content:center!important;
  }

  .footer p,
  .footer a,
  .footer span,
  .footer li{
    font-size:12px!important;
    line-height:1.7!important;
  }
}

@media(max-width:380px){
  body:not(.flow-active) section#startScreen .new-trust-grid{
    grid-template-columns:1fr!important;
    max-width:300px!important;
  }
  body:not(.flow-active) section#startScreen .operators-logo-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* =========================================================
   V64 — Mobile alinhado + operadoras integradas ao fundo branco
   ========================================================= */

/* Operadoras sem “auto relevo”: parte da área branca do site */
body:not(.flow-active) section#startScreen > .operators-strip{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:26px 18px 30px !important;
  background:#FFFFFF !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  position:relative !important;
  z-index:3 !important;
}

body:not(.flow-active) section#startScreen > .operators-strip h2{
  color:#08245C !important;
  font-size:clamp(20px,2.2vw,26px) !important;
  line-height:1.2 !important;
  margin:0 auto 18px !important;
  text-align:center !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
}

body:not(.flow-active) section#startScreen .operators-strip-list,
body:not(.flow-active) section#startScreen .operators-logo-row{
  width:100% !important;
  max-width:780px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:24px 34px !important;
  overflow:visible !important;
}

body:not(.flow-active) section#startScreen .operators-logo-row img{
  height:30px !important;
  max-width:112px !important;
  width:auto !important;
  object-fit:contain !important;
  display:block !important;
}

/* Mantém o bloco como funciona em card no desktop, mas sem sobrepor */
body:not(.flow-active) section#startScreen .hero-how-card{
  width:calc(100% - 36px) !important;
  max-width:1180px !important;
  margin:0 auto 0 !important;
  transform:translateY(0) !important;
  position:relative !important;
  z-index:4 !important;
}

/* Mobile: conteúdo alinhado, telefone removido, como funciona removido */
@media(max-width:768px){
  body:not(.flow-active) section#startScreen,
  body:not(.flow-active) section#startScreen.new-hero-screen{
    padding:0 !important;
    min-height:auto !important;
    background:linear-gradient(135deg,#08245C 0%,#123A8E 52%,#1D63E8 100%) !important;
  }

  body:not(.flow-active) section#startScreen .new-hero-container{
    width:100% !important;
    max-width:430px !important;
    margin:0 auto !important;
    padding:24px 16px 22px !important;
    display:block !important;
  }

  body:not(.flow-active) section#startScreen .new-hero-copy{
    width:100% !important;
    max-width:390px !important;
    margin:0 auto !important;
    text-align:center !important;
    align-items:center !important;
  }

  body:not(.flow-active) section#startScreen .new-hero-badge{
    margin:0 auto 14px !important;
    font-size:10px !important;
    padding:6px 10px !important;
    border-radius:999px !important;
    max-width:max-content !important;
  }

  body:not(.flow-active) section#startScreen h1{
    max-width:360px !important;
    margin:0 auto 12px !important;
    text-align:center !important;
    font-size:clamp(30px,9vw,42px) !important;
    line-height:1.02 !important;
    letter-spacing:-.055em !important;
  }

  body:not(.flow-active) section#startScreen .new-hero-subtitle{
    max-width:330px !important;
    margin:0 auto 18px !important;
    text-align:center !important;
    font-size:14px !important;
    line-height:1.48 !important;
    color:rgba(255,255,255,.88) !important;
  }

  body:not(.flow-active) section#startScreen .new-hero-cta{
    width:100% !important;
    max-width:340px !important;
    min-height:52px !important;
    margin:0 auto !important;
    border-radius:16px !important;
    font-size:14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
  }

  /* Remove mockup do telefone e a seção como funciona no mobile */
  body:not(.flow-active) section#startScreen .new-hero-phone-wrap,
  body:not(.flow-active) section#startScreen .phone-device,
  body:not(.flow-active) section#startScreen .hero-how-card{
    display:none !important;
  }

  /* Selos alinhados e menores */
  body:not(.flow-active) section#startScreen .new-trust-grid{
    width:100% !important;
    max-width:340px !important;
    margin:16px auto 0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  body:not(.flow-active) section#startScreen .new-trust-pill{
    min-height:38px !important;
    padding:8px 8px !important;
    border-radius:13px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    font-size:11px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    text-align:center !important;
    white-space:normal !important;
    color:#FFFFFF !important;
    background:rgba(255,255,255,.09) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:none !important;
  }

  body:not(.flow-active) section#startScreen .new-trust-pill span{
    font-size:14px !important;
    line-height:1 !important;
  }

  body:not(.flow-active) section#startScreen .new-trust-pill img{
    width:15px !important;
    height:15px !important;
    object-fit:contain !important;
    flex:0 0 auto !important;
  }

  /* Operadoras: área branca, sem card/elevado, alinhada ao site */
  body:not(.flow-active) section#startScreen > .operators-strip{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:22px 16px 24px !important;
    background:#FFFFFF !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  body:not(.flow-active) section#startScreen > .operators-strip h2{
    font-size:19px !important;
    margin:0 auto 16px !important;
    color:#08245C !important;
  }

  body:not(.flow-active) section#startScreen .operators-logo-row{
    max-width:350px !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px 12px !important;
    justify-items:center !important;
    align-items:center !important;
  }

  body:not(.flow-active) section#startScreen .operators-logo-row img{
    height:23px !important;
    max-width:82px !important;
    width:auto !important;
    object-fit:contain !important;
  }

  body:not(.flow-active) section#startScreen .operators-logo-row img[alt="Correios"]{
    max-width:94px !important;
  }
}

@media(max-width:380px){
  body:not(.flow-active) section#startScreen h1{
    font-size:29px !important;
  }

  body:not(.flow-active) section#startScreen .new-trust-grid{
    grid-template-columns:1fr !important;
    max-width:300px !important;
  }

  body:not(.flow-active) section#startScreen .operators-logo-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    max-width:270px !important;
  }
}

/* =====================================================
   V65 — Ajuste final mobile: selos 2x2, sem vazamento
   ===================================================== */
@media(max-width:768px){
  body:not(.flow-active) section#startScreen .new-trust-grid{
    width:100% !important;
    max-width:340px !important;
    margin:16px auto 0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    align-items:stretch !important;
  }

  body:not(.flow-active) section#startScreen .new-trust-pill,
  body:not(.flow-active) section#startScreen .new-trust-pill.pix-pill{
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    grid-column:auto !important;
    padding:8px 8px !important;
    border-radius:13px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    text-align:center !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    font-size:10.5px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
  }

  body:not(.flow-active) section#startScreen .new-trust-pill span{
    flex:0 0 auto !important;
    font-size:13px !important;
  }

  body:not(.flow-active) section#startScreen .new-trust-pill img{
    flex:0 0 auto !important;
    width:14px !important;
    height:14px !important;
    object-fit:contain !important;
  }
}

@media(max-width:380px){
  body:not(.flow-active) section#startScreen .new-trust-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    max-width:310px !important;
  }

  body:not(.flow-active) section#startScreen .new-trust-pill,
  body:not(.flow-active) section#startScreen .new-trust-pill.pix-pill{
    font-size:10px !important;
    padding:8px 6px !important;
  }
}

/* =====================================================
   V66 — Ajuste de cor do texto dentro do mockup
   ===================================================== */
.phone-safe-card span,
body:not(.flow-active) section#startScreen .phone-safe-card span{
  color:#1D4ED8 !important;
  font-weight:700 !important;
}

.phone-safe-card strong,
body:not(.flow-active) section#startScreen .phone-safe-card strong{
  color:#0F172A !important;
}

@media(max-width:768px){
  /* mantém o mobile limpo: telefone/mockup e Como funciona fora do mobile */
  .new-hero-phone-wrap,
  .hero-how-card{
    display:none !important;
  }
}

/* =====================================================
   V67 — Remover bloco "Como funciona" da página inicial no desktop
   ===================================================== */
@media (min-width: 769px){
  body:not(.flow-active) section#startScreen .hero-how-card,
  section#startScreen .hero-how-card{
    display:none !important;
  }
}

/* =====================================================
   V68 — Operadoras compatíveis centralizadas e alinhadas
   ===================================================== */
body:not(.flow-active) section#startScreen > .operators-strip,
.operators-strip{
  width:min(100%, 1180px) !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:34px 24px 38px !important;
  background:#ffffff !important;
  border-radius:0 !important;
  box-shadow:none !important;
  border:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  overflow:visible !important;
}

body:not(.flow-active) section#startScreen > .operators-strip h2,
.operators-strip h2{
  width:100% !important;
  margin:0 0 22px !important;
  text-align:center !important;
  color:#082461 !important;
  font-size:clamp(22px, 2vw, 28px) !important;
  font-weight:900 !important;
  line-height:1.15 !important;
}

body:not(.flow-active) section#startScreen .operators-logo-row,
.operators-logo-row{
  width:100% !important;
  max-width:760px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:22px 36px !important;
  text-align:center !important;
}

body:not(.flow-active) section#startScreen .operators-logo-row img,
.operators-logo-row img{
  display:block !important;
  height:32px !important;
  width:auto !important;
  max-width:112px !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
  margin:0 !important;
  opacity:.96 !important;
}

body:not(.flow-active) section#startScreen .operators-logo-row img[alt="Correios"],
.operators-logo-row img[alt="Correios"]{
  max-width:126px !important;
}

@media(max-width:768px){
  body:not(.flow-active) section#startScreen > .operators-strip,
  .operators-strip{
    width:100% !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:26px 18px 30px !important;
  }

  body:not(.flow-active) section#startScreen > .operators-strip h2,
  .operators-strip h2{
    font-size:21px !important;
    margin-bottom:18px !important;
  }

  body:not(.flow-active) section#startScreen .operators-logo-row,
  .operators-logo-row{
    max-width:360px !important;
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    justify-items:center !important;
    align-items:center !important;
    gap:18px 16px !important;
  }

  body:not(.flow-active) section#startScreen .operators-logo-row img,
  .operators-logo-row img{
    height:26px !important;
    max-width:86px !important;
  }
}

@media(max-width:420px){
  body:not(.flow-active) section#startScreen .operators-logo-row,
  .operators-logo-row{
    max-width:330px !important;
    gap:16px 12px !important;
  }

  body:not(.flow-active) section#startScreen .operators-logo-row img,
  .operators-logo-row img{
    height:24px !important;
    max-width:78px !important;
  }
}

/* =====================================================
   V69 — Operadoras desktop centralizadas em card proporcional
   ===================================================== */
@media (min-width: 769px){
  body:not(.flow-active) section#startScreen.start-screen.new-hero-screen{
    padding-bottom:64px !important;
    overflow:hidden !important;
  }

  body:not(.flow-active) section#startScreen > .operators-strip{
    width:min(720px, calc(100% - 64px)) !important;
    max-width:720px !important;
    margin:-18px auto 34px !important;
    padding:40px 48px 42px !important;
    background:#FFFFFF !important;
    border:1px solid #E5E7EB !important;
    border-radius:28px !important;
    box-shadow:0 16px 42px rgba(15,23,42,.08) !important;
    position:relative !important;
    z-index:8 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  body:not(.flow-active) section#startScreen > .operators-strip h2{
    margin:0 0 26px !important;
    color:#08245C !important;
    font-size:26px !important;
    font-weight:900 !important;
    line-height:1.15 !important;
    letter-spacing:-.03em !important;
    text-align:center !important;
    width:100% !important;
  }

  body:not(.flow-active) section#startScreen .operators-logo-row{
    width:100% !important;
    max-width:620px !important;
    margin:0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:24px 34px !important;
  }

  body:not(.flow-active) section#startScreen .operators-logo-row img{
    height:32px !important;
    width:auto !important;
    max-width:108px !important;
    object-fit:contain !important;
    display:block !important;
    margin:0 !important;
    flex:0 0 auto !important;
    filter:none !important;
    opacity:.98 !important;
  }

  body:not(.flow-active) section#startScreen .operators-logo-row img[alt="Correios"]{
    max-width:124px !important;
  }

  body:not(.flow-active) section#startScreen .hero-how-card{
    display:none !important;
  }
}

@media (min-width: 1200px){
  body:not(.flow-active) section#startScreen > .operators-strip{
    margin-top:-24px !important;
    margin-bottom:40px !important;
  }
}

@media (max-width: 768px){
  body:not(.flow-active) section#startScreen > .operators-strip{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:24px 18px 28px !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#FFFFFF !important;
  }
}


/* =========================================================
   V70 — Operadoras acima do processo, alinhadas lado a lado
   ========================================================= */
.hero-how-card{
  display:none !important;
}

.operators-section-home{
  width:100%;
  background:#FFFFFF;
  padding:34px 20px 28px;
  margin:0;
  position:relative;
  z-index:3;
}

.operators-card-home{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  text-align:center;
}

.operators-card-home h2{
  margin:0 0 24px !important;
  color:#082461 !important;
  font-size:clamp(24px,2.2vw,34px) !important;
  line-height:1.12 !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
}

.operators-card-home .operators-logo-row,
.operators-section-home .operators-logo-row{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:clamp(24px,3.2vw,48px) !important;
  width:100% !important;
  max-width:980px !important;
  margin:0 auto !important;
  padding:0 !important;
  overflow:visible !important;
}

.operators-card-home .operators-logo-row img,
.operators-section-home .operators-logo-row img{
  height:34px !important;
  width:auto !important;
  max-width:120px !important;
  object-fit:contain !important;
  display:block !important;
  opacity:.96 !important;
  flex:0 0 auto !important;
  filter:none !important;
}

.operators-card-home .operators-logo-row img[alt="Correios"],
.operators-section-home .operators-logo-row img[alt="Correios"]{
  max-width:128px !important;
}

.how-it-works{
  padding-top:58px !important;
}

body.flow-active .operators-section-home{
  display:none !important;
}

@media(max-width:900px){
  .operators-section-home{
    padding:26px 18px 26px !important;
  }
  .operators-card-home h2{
    font-size:22px !important;
    margin-bottom:20px !important;
  }
  .operators-card-home .operators-logo-row,
  .operators-section-home .operators-logo-row{
    flex-wrap:wrap !important;
    gap:18px 26px !important;
    max-width:420px !important;
  }
  .operators-card-home .operators-logo-row img,
  .operators-section-home .operators-logo-row img{
    height:28px !important;
    max-width:94px !important;
  }
}

@media(max-width:480px){
  .operators-section-home{
    padding:24px 14px 24px !important;
  }
  .operators-card-home .operators-logo-row,
  .operators-section-home .operators-logo-row{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:18px 18px !important;
    justify-items:center !important;
    align-items:center !important;
    max-width:360px !important;
  }
  .operators-card-home .operators-logo-row img,
  .operators-section-home .operators-logo-row img{
    height:25px !important;
    max-width:86px !important;
  }
  .operators-card-home .operators-logo-row img[alt="Correios"],
  .operators-section-home .operators-logo-row img[alt="Correios"]{
    max-width:96px !important;
  }
}

/* Ajuste institucional CNPJ/endereço */
.footer-company, .footer-business{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  text-align:center;
  color:#0F172A;
  line-height:1.55;
}
.footer-company span, .footer-business span, .footer-company a, .footer-business a{
  color:#0F172A;
  word-break:break-word;
}
@media(max-width:768px){
  .footer-company, .footer-business{font-size:12px; padding-inline:12px;}
}

/* =====================================================
   V72 — Ajuste fino mobile + grade de valores com R$35
   ===================================================== */
:root{
  --mobile-blue:#0b2c74;
  --mobile-muted:#dbeafe;
}

/* Card de valores com 9 opções fica em 3x3 limpo */
.final-values-grid,
.options-grid-3x3{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

/* Mobile mais premium e compacto */
@media(max-width:768px){
  body:not(.flow-active) section#startScreen.start-screen.new-hero-screen{
    padding-top:0 !important;
    padding-bottom:34px !important;
    min-height:auto !important;
  }

  body:not(.flow-active) section#startScreen .new-hero-inner{
    padding:20px 22px 26px !important;
    text-align:center !important;
    align-items:center !important;
  }

  body:not(.flow-active) section#startScreen .hero-badge,
  body:not(.flow-active) section#startScreen .start-badge{
    margin:0 auto 18px !important;
    font-size:11px !important;
    padding:7px 12px !important;
  }

  body:not(.flow-active) section#startScreen .start-card,
  body:not(.flow-active) section#startScreen .new-hero-copy{
    width:100% !important;
    max-width:360px !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  body:not(.flow-active) section#startScreen .start-card h1,
  body:not(.flow-active) section#startScreen .new-hero-title{
    font-size:clamp(26px,7.2vw,32px) !important;
    line-height:1.08 !important;
    letter-spacing:-.7px !important;
    margin:0 auto 14px !important;
    max-width:350px !important;
    text-align:center !important;
  }

  body:not(.flow-active) section#startScreen .start-card p,
  body:not(.flow-active) section#startScreen .new-hero-subtitle{
    font-size:14px !important;
    line-height:1.55 !important;
    max-width:340px !important;
    margin:0 auto 18px !important;
    color:rgba(255,255,255,.92) !important;
  }

  body:not(.flow-active) section#startScreen .btn-start,
  body:not(.flow-active) section#startScreen .new-hero-cta,
  body:not(.flow-active) section#startScreen .hero-cta .btn{
    width:100% !important;
    max-width:326px !important;
    min-height:50px !important;
    height:50px !important;
    margin:0 auto !important;
    border-radius:16px !important;
    font-size:14px !important;
    font-weight:800 !important;
  }

  /* badges 2x2 compactos */
  body:not(.flow-active) section#startScreen .new-trust-grid{
    width:100% !important;
    max-width:326px !important;
    margin:14px auto 0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  body:not(.flow-active) section#startScreen .new-trust-pill,
  body:not(.flow-active) section#startScreen .new-trust-pill.pix-pill{
    width:100% !important;
    min-height:38px !important;
    padding:8px 9px !important;
    border-radius:12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    font-size:11px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    text-align:center !important;
    white-space:normal !important;
  }

  body:not(.flow-active) section#startScreen .new-trust-pill img{
    width:16px !important;
    height:16px !important;
    flex:0 0 auto !important;
  }

  body:not(.flow-active) section#startScreen .new-trust-pill span{
    font-size:15px !important;
    line-height:1 !important;
    flex:0 0 auto !important;
  }

  /* Sem mockup de telefone no mobile */
  body:not(.flow-active) section#startScreen .new-hero-phone-wrap,
  body:not(.flow-active) section#startScreen .phone-device,
  body:not(.flow-active) section#startScreen .mockup-phone,
  body:not(.flow-active) section#startScreen .hero-phone{
    display:none !important;
  }

  /* Operadoras na área branca, compactas */
  .operators-section-home{
    padding:30px 18px 34px !important;
    background:#fff !important;
  }

  .operators-card-home h2{
    font-size:21px !important;
    line-height:1.15 !important;
    margin-bottom:20px !important;
    color:#082461 !important;
  }

  .operators-section-home .operators-logo-row,
  .operators-card-home .operators-logo-row{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:18px 18px !important;
    max-width:340px !important;
    margin:0 auto !important;
    align-items:center !important;
    justify-items:center !important;
  }

  .operators-section-home .operators-logo-row img,
  .operators-card-home .operators-logo-row img{
    height:24px !important;
    max-width:82px !important;
  }

  .operators-section-home .operators-logo-row img[alt="Correios"],
  .operators-card-home .operators-logo-row img[alt="Correios"]{
    max-width:92px !important;
  }

  .how-it-works{
    padding-top:42px !important;
    padding-bottom:44px !important;
  }

  .how-it-works .section-header h2{
    font-size:22px !important;
    line-height:1.2 !important;
  }

  .how-it-works .section-header p{
    font-size:14px !important;
    line-height:1.7 !important;
    max-width:340px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media(max-width:390px){
  body:not(.flow-active) section#startScreen .new-hero-inner{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  body:not(.flow-active) section#startScreen .start-card h1,
  body:not(.flow-active) section#startScreen .new-hero-title{
    font-size:26px !important;
  }
  body:not(.flow-active) section#startScreen .new-trust-grid{
    max-width:310px !important;
  }
}