/* Componentes da revisão de conversão. A paleta ativa está em light-theme.css. */

body.theme-ig .header .logo .logo-subtitle {
  color: #a5adbd !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: .75rem !important;
  line-height: 1.4;
}

/* Estrutura do título; a linha animada é refinada no tema ativo. */
body.theme-ig .hero-title-wrap {
  min-height: 0;
  max-width: 720px;
}

body.theme-ig .hero-title-wrap h2 {
  margin: 0;
  color: #f8fafc;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.045em;
  overflow-wrap: break-word;
}

body.theme-ig .hero-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* Neutralizar apenas as dimensões fixas do antigo par de botões inline. */
body.theme-ig .hero .hero-buttons .cta-button {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 56px !important;
  max-height: none !important;
  padding: 14px 20px !important;
  white-space: normal !important;
  line-height: 1.4 !important;
}

body.theme-ig .hero .hero-buttons .cta-button:not(.cta-button-secondary) {
  color: #ffffff !important;
  background: #7435ce !important;
}

/* Atalhos: superfícies e textos pertencem à mesma paleta escura do site. */
.hero-platform-grid {
  display: grid;
  gap: 10px;
}

.hero-platform-button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 12px 14px;
  color: #f8fafc;
  background: #181c30;
  border: 1px solid #343a53;
  border-radius: 13px;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}

.hero-platform-button:hover {
  color: #ffffff;
  background: #22273e;
  border-color: #a78bfa;
}

.hero-platform-button span { display: grid; gap: 3px; min-width: 0; }
.hero-platform-button b { color: #f8fafc; font-size: 1rem; }
.hero-platform-button small { color: #bbc3d3; font-size: .8125rem; }
.hero-platform-button > i:first-child { width: 25px; height: 25px; font-size: 25px; }
.hero-platform-button > i:last-child { color: #c4b5fd; width: 16px; height: 16px; }
.hero-platform-button.is-instagram > i:first-child { color: #f472b6; }
.hero-platform-button.is-tiktok > i:first-child { color: #67e8f9; }
.hero-platform-button.is-kwai > i:first-child { color: #fb923c; }
.hero-platform-button.is-youtube > i:first-child { color: #fb7185; }

.hero-conversion-note {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  padding: 14px 2px 0;
  border-top: 1px solid rgba(148, 163, 184, .18);
  color: #aeb7c8;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.45;
}

.hero-conversion-note-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(167, 139, 250, .28);
  border-radius: 10px;
  color: #c4b5fd;
  background: rgba(139, 92, 246, .12);
}

.hero-conversion-note-icon i { line-height: 1; }

.hero-platform-button:focus-visible,
.final-cta-actions a:focus-visible {
  outline: 3px solid #c4b5fd;
  outline-offset: 4px;
}

/* Preços acrescentados aos cards existentes, sem recolorir os próprios cards. */
.option-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 13px;
  color: #b9c1d2;
  font-size: .875rem;
  line-height: 1.5;
}

.option-price strong { color: #6ee7b7; font-size: 1.125rem; font-weight: 850; }

.variant-price-amount { color: #6ee7b7; }
.variant-price-context { color: #aeb7c8 !important; font-weight: 700; }

@media (min-width: 901px) {
  .combos-grid { align-items: start; }
  .combo-card-item { min-height: 0 !important; height: auto; }
  .combo-card-content { flex: none; }
  .combo-card-description { flex: none; }
  .combo-card-footer,
  .combo-card-item .combo-card-footer { margin-top: 4px; }
}

.trust-kicker,
.orders-kicker {
  display: table;
  margin: 0 auto 14px;
  padding: 8px 12px;
  color: #ddd6fe;
  background: #221b39;
  border: 1px solid #50416c;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 750;
  text-align: center;
}

.trust-intro {
  max-width: 720px;
  margin: 0 auto 34px;
  color: #b9c1d2;
  font-size: 1rem;
  line-height: 1.65;
  text-align: center;
}

.final-cta { padding: 32px 0 88px; }

.final-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, auto);
  align-items: center;
  gap: 32px;
  padding: clamp(24px, 4vw, 48px);
  color: #f8fafc;
  background: linear-gradient(125deg, #15182a, #281d43);
  border: 1px solid #493761;
  border-radius: 24px;
}

.final-cta-card > div:first-child > span {
  color: #ddd6fe;
  font-size: .875rem;
  font-weight: 750;
}

.final-cta-card h2 {
  margin: 10px 0 14px;
  color: #f8fafc;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.final-cta-card p { margin: 0; color: #c6ccda; font-size: 1rem; line-height: 1.6; }
.final-cta-actions { display: grid; gap: 10px; min-width: 0; }
.final-cta-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 14px 18px;
  color: #ffffff;
  border-radius: 12px;
  font-size: .9375rem;
  font-weight: 750;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
.final-cta-primary { background: #7435ce; border: 1px solid #a78bfa; }
.final-cta-primary:hover { color: #fff; background: #8642df; }
.final-cta-secondary { background: #25223c; border: 1px solid #696080; }
.final-cta-secondary:hover { color: #fff; background: #34304b; }

@media (max-width: 900px) {
  .final-cta-card { grid-template-columns: 1fr; }
  .final-cta-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  body.theme-ig .hero-title-wrap { min-height: 0; }
  body.theme-ig .hero-title-wrap h2 {
    font-size: clamp(2rem, 8.8vw, 3.1rem);
    line-height: 1.1;
    letter-spacing: -.035em;
  }
  body.theme-ig .hero-buttons { flex-direction: column !important; }
  body.theme-ig .hero .hero-buttons .cta-button { width: 100% !important; }
  /* Não ocultar o tutorial nem os atalhos no celular. */
  body.theme-ig .hero .cta-button-secondary { display: inline-flex; }
  body.theme-ig .hero .hero-conversion-card { display: block; padding: 20px; }
  .hero-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-platform-button { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 12px 9px; }
  .hero-platform-button > i:last-child { display: none; }
  .hero-platform-button b { font-size: .875rem; }
  .hero-platform-button small { font-size: .8125rem; }
  .hero-conversion-note { margin-top: 14px; padding-top: 13px; font-size: .76rem; }
  .final-cta { padding: 16px 0 88px; }
  .final-cta-card { gap: 24px; padding: 26px 20px; }
  .final-cta-actions { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .hero-platform-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-platform-button { transition: none; }
}