/* Cara nova da home (14/10/2026). Só vale nas páginas geradas por scripts/gerar-nova.mjs (/n19 e
   /n27), que põem a classe "nova" no <html> e carregam este arquivo. A home nunca carrega este CSS.
   Refeita no mesmo dia para seguir a simulação aprovada pelo Vitor: palco ameixa escuro, cartões
   marfim compactos, ouro como única cor de ação (contraste 10:1 com o texto escuro), Fraunces nos
   títulos e Inter no resto. O formulário vira quiz (nova.js). Desenho: HOME-DESAFIANTE-T4-2026-10-14.md. */

html.nova {
  --palco: #120818;
  --palco-2: #1e0f26;
  --marfim: #fbf6ee;
  --tinta: #24181c;
  --suave: #6f6266;
  --ouro: #e8b04b;
  --ouro-escuro: #b57a1c;
  --ouro-claro: #fff4dc;
  --marrom: #8a5410;
  --claro: #efe4ea;
  --claro-2: #b9a8b4;
  --borda: #e6dad3;
  --linha-escura: rgba(255, 255, 255, 0.12);
  background: var(--palco);
}

html.nova body {
  background: var(--palco);
}

html.nova .nova-escondido {
  display: none !important;
}

/* Topo ------------------------------------------------------------------- */
html.nova .hero__media,
html.nova .hero__shade {
  display: none;
}

html.nova .hero {
  background: radial-gradient(120% 55% at 50% 0%, #2c1238 0%, var(--palco) 62%);
}

html.nova .topbar__price {
  border: 0;
  border-radius: 999px;
  background: var(--ouro);
  backdrop-filter: none;
}

html.nova .topbar__price span {
  color: #1a0b12;
  font-size: 13px;
  font-weight: 800;
}

html.nova .hero__content {
  min-height: 0;
  padding-top: 18px;
}

html.nova .hero__copy {
  color: var(--claro);
}

html.nova h1.nova-titulo {
  max-width: 640px;
  margin: 0 0 14px;
  color: #fff;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

html.nova h1.nova-titulo em {
  color: var(--ouro);
  font-style: italic;
}

html.nova .nova-acordo {
  max-width: 560px;
  margin: 0 0 8px;
  color: var(--claro);
  font-size: 18px;
  line-height: 1.5;
}

html.nova .nova-acordo strong {
  color: #fff;
}

html.nova .nova-selos {
  margin: 0 0 16px;
  color: var(--claro-2);
  font-size: 13.5px;
  font-weight: 700;
}

html.nova .nova-depo {
  max-width: 520px;
  margin: 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--ouro);
  color: #fff;
  font-family: Fraunces, Georgia, serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.4;
}

html.nova .nova-depo--celular {
  display: none;
}

html.nova .nova-depo cite {
  display: block;
  margin-top: 5px;
  color: var(--claro-2);
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  font-style: normal;
}

/* Etapas História · Prévia · Música --------------------------------------- */
html.nova .steps {
  justify-content: flex-start;
  gap: 6px;
}

html.nova .step {
  width: auto;
  height: auto;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--claro-2);
  font-size: 12.5px;
  font-weight: 800;
}

html.nova .step.is-active {
  background: var(--ouro);
  color: #1a0b12;
}

/* Cartões claros: formulário (quiz) e tela final -------------------------- */
html.nova .panel {
  border: 0;
  border-radius: 20px;
  background: var(--marfim);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: none;
  color: var(--tinta);
}

html.nova .panel .kicker {
  color: #9a5b12;
}

html.nova .panel__header h2 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
}

html.nova input,
html.nova select,
html.nova textarea {
  border: 1.5px solid var(--borda);
  border-radius: 11px;
  background: #fff;
}

html.nova input:focus,
html.nova select:focus,
html.nova textarea:focus {
  border-color: var(--ouro-escuro);
  box-shadow: 0 0 0 3px rgba(232, 176, 75, 0.28);
}

html.nova input[type="checkbox"],
html.nova input[type="radio"] {
  accent-color: var(--ouro-escuro);
}

html.nova .primary,
html.nova .primary--buy {
  min-height: 54px;
  border-radius: 14px;
  background: var(--ouro);
  box-shadow: 0 12px 26px rgba(232, 176, 75, 0.32);
  color: #1a0b12;
  font-weight: 800;
}

html.nova .primary--buy {
  min-height: 58px;
  font-size: 16px;
}

html.nova a.primary {
  text-decoration: none;
}

/* Quiz -------------------------------------------------------------------- */
html.nova #songForm.nova-quiz-ligado > .panel__header {
  display: none;
}

html.nova .nova-quiz-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  margin-bottom: 8px;
}

html.nova .nova-quiz-voltar {
  padding: 0;
  border: 0;
  background: none;
  color: var(--suave);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
}

html.nova .nova-quiz-voltar.is-hidden {
  display: inline-block;
  visibility: hidden;
}

html.nova .nova-quiz-contagem {
  margin-left: auto;
  color: var(--suave);
  font-size: 12.5px;
  font-weight: 700;
}

html.nova .nova-quiz-barra {
  height: 6px;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #efe5df;
}

html.nova .nova-quiz-barra i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ouro);
  transition: width 0.25s ease;
}

html.nova .nova-quiz-passo {
  display: none;
}

html.nova .nova-quiz-passo.is-on {
  display: block;
  animation: novaEntra 0.22s ease;
}

@keyframes novaEntra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

html.nova .nova-quiz-titulo {
  margin: 0 0 6px;
  color: var(--tinta);
  font-family: Fraunces, Georgia, serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
}

html.nova .nova-quiz-dica {
  margin: 0 0 14px;
  color: var(--suave);
  font-size: 14px;
  line-height: 1.4;
}

html.nova .nova-quiz-titulo + .nova-quiz-opcoes,
html.nova .nova-quiz-titulo + .field {
  margin-top: 12px;
}

html.nova .nova-quiz-passo .field > span:first-child {
  display: none;
}

html.nova .nova-quiz-passo .field {
  margin-bottom: 4px;
}

html.nova .nova-quiz-opcoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

html.nova .nova-quiz-opcao {
  min-height: 46px;
  padding: 8px 6px;
  border: 1.5px solid var(--borda);
  border-radius: 12px;
  background: #fff;
  color: var(--tinta);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 700;
}

html.nova .nova-quiz-opcao.is-on {
  border-color: var(--ouro-escuro);
  background: var(--ouro);
  color: #1a0b12;
}

html.nova .nova-quiz-passo:not(.nova-quiz-passo--outro) > .nova-quiz-continuar--outro {
  display: none;
}

html.nova #otherRecipientWrap {
  margin-top: 12px;
}

html.nova .nova-quiz-continuar {
  margin-top: 14px;
}

html.nova .nova-quiz-passo textarea {
  min-height: 132px;
}

html.nova .nova-quiz-contador {
  margin: 6px 0 12px;
  color: var(--suave);
  font-size: 12.5px;
  font-weight: 700;
}

html.nova .nova-quiz-contador.is-ok {
  color: #2f7d4f;
}

html.nova .nova-quiz-passo .legal-consent {
  margin-bottom: 14px;
  color: var(--suave);
  font-size: 12.5px;
}

html.nova .style-chip {
  border-color: var(--borda);
  border-radius: 12px;
}

html.nova .style-chip:has(input:checked),
html.nova .segmented label:has(input:checked) {
  border-color: var(--ouro-escuro);
  background: var(--ouro);
  color: #1a0b12;
  box-shadow: 0 10px 22px rgba(232, 176, 75, 0.25);
}

html.nova .segmented label {
  min-height: 52px;
  border-radius: 12px;
  font-size: 15px;
}

/* Telas sobre o palco escuro: espera, prévia e checkout ------------------- */
html.nova #generatingPanel,
html.nova #previewPanel,
html.nova #paymentPanel {
  background: transparent;
  box-shadow: none;
  color: var(--claro);
}

html.nova #generatingPanel .panel__header h2,
html.nova #paymentPanel .panel__header h2 {
  color: #fff;
}

html.nova #generatingPanel .kicker,
html.nova #previewPanel .kicker,
html.nova #paymentPanel .kicker {
  color: var(--ouro);
}

/* Espera */
html.nova .countdown-card {
  display: none;
}

html.nova #generatingPanel .status {
  color: var(--claro);
}

html.nova #generatingPanel .progress {
  background: var(--linha-escura);
}

html.nova #generatingPanel .progress__bar {
  background: linear-gradient(90deg, var(--ouro-escuro), var(--ouro));
}

html.nova #generatingPanel .falling-notes span {
  color: var(--ouro);
}

html.nova .nova-espera {
  margin: 4px 0 14px;
  color: var(--claro-2);
  font-size: 14px;
  line-height: 1.45;
}

html.nova .generation-steps span {
  color: var(--claro-2);
}

html.nova .notify-capture,
html.nova .draft-lyrics {
  border-radius: 16px;
  background: var(--marfim);
  color: var(--tinta);
}

/* A borda tracejada rosa e o pulso de destaque vêm da home; aqui ficam no dourado da cara nova. */
html.nova .notify-capture {
  border: 1px solid rgba(232, 176, 75, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  html.nova .notify-capture:not(.is-success) {
    animation-name: notify-capture-enter, nova-captura-pulso;
  }
}

@keyframes nova-captura-pulso {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(232, 176, 75, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 176, 75, 0);
  }
}

html.nova .nova-nao {
  margin-top: 6px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--suave);
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
}

/* Prévia */
html.nova #previewPanel .panel__header > .kicker:not(.nova-kicker-previa),
html.nova #previewTitle,
html.nova #previewPanel .disc,
html.nova #previewPanel .lyrics__head {
  display: none;
}

html.nova .nova-titulo-previa {
  margin: 0 0 16px;
  color: #fff;
  font-family: Fraunces, Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.15;
}

html.nova #previewPanel .player {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--linha-escura);
  border-radius: 20px;
  background: var(--palco-2);
}

html.nova #previewPanel .player__main {
  flex: 1;
  min-width: 0;
}

html.nova #trackName {
  color: #fff;
}

html.nova #playCount,
html.nova #timeLabel {
  color: var(--claro-2);
}

html.nova #previewPanel .timeline {
  background: rgba(255, 255, 255, 0.14);
}

html.nova #timelineFill {
  background: var(--ouro);
}

html.nova #playPreview {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ouro);
  box-shadow: 0 10px 26px rgba(232, 176, 75, 0.38);
  color: #1a0b12;
  font-size: 26px;
}

/* Prévia pronta: o play pulsa (anel dourado que se abre e o botão crescendo de leve) até a pessoa
   tocar. O nova.js liga e desliga a classe. Quem pediu ao celular menos movimento não vê o pulso. */
@media (prefers-reduced-motion: no-preference) {
  html.nova #playPreview.nova-play-pulsa {
    animation: nova-play-pulso 1.4s ease-out infinite;
  }
}

@keyframes nova-play-pulso {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(232, 176, 75, 0.65), 0 10px 26px rgba(232, 176, 75, 0.38);
  }
  40% {
    transform: scale(1.08);
  }
  70% {
    box-shadow: 0 0 0 18px rgba(232, 176, 75, 0), 0 10px 26px rgba(232, 176, 75, 0.38);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(232, 176, 75, 0), 0 10px 26px rgba(232, 176, 75, 0.38);
  }
}

html.nova .nova-depo--previa {
  max-width: none;
  margin: 16px 0;
  font-size: 15.5px;
}

html.nova #previewPanel .lyrics {
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: var(--marfim);
  color: var(--tinta);
}

html.nova #previewPanel .lyrics pre {
  max-height: none;
  overflow: visible;
  padding: 14px 16px 4px;
  color: var(--tinta);
  font-family: Fraunces, Georgia, serif;
  font-size: 15px;
}

html.nova #previewPanel .lyrics.nova-letra-fechada pre {
  max-height: 7.2em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}

html.nova .nova-ver-letra {
  padding: 4px 16px 14px;
  border: 0;
  background: none;
  color: var(--marrom);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 800;
}

html.nova .remake-button.nova-ajuste {
  display: block;
  width: auto;
  min-height: 0;
  margin: 12px 0 0;
  padding: 4px 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--claro-2);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
}

html.nova .nova-passos {
  margin: 12px 0 6px;
  color: var(--claro);
  font-size: 13.5px;
  line-height: 1.45;
}

html.nova .nova-passos p {
  margin: 0 0 4px;
  color: #fff;
  font-weight: 800;
}

html.nova .nova-passos ol {
  margin: 0;
  padding-left: 20px;
}

html.nova .nova-passos li {
  margin: 2px 0;
}

html.nova .nova-sem-quebra {
  white-space: nowrap;
}

/* bottom 0: na home a barra fica 18px abaixo da borda da tela e corta a garantia. */
html.nova .preview .preview-actions {
  bottom: 0;
  border-top: 1px solid var(--linha-escura);
  background: rgba(18, 8, 24, 0.96);
}

html.nova .nova-garantia-fixa {
  margin: 8px 0 0;
  color: var(--claro-2);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

/* Checkout */
/* A validação do script.js usa focus(): o scroll-padding faz o campo com erro parar acima da
   barra fixa de pagar, e não escondido atrás dela. */
html.nova {
  scroll-padding-bottom: 150px;
}

html.nova .nova-resumo,
html.nova .nova-campos {
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--marfim);
  color: var(--tinta);
}

html.nova .nova-resumo {
  margin: 0 0 10px;
}

html.nova .nova-resumo .price-lines {
  margin: 0;
  padding: 2px 0 8px;
  border: 0;
  background: none;
}

html.nova #summaryInstantLine {
  display: none !important;
}

html.nova .nova-resumo .order-bump {
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-top: 1px dashed var(--borda);
  border-bottom: 1px dashed var(--borda);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html.nova .nova-resumo .order-bump__top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

html.nova .nova-resumo .order-bump__title {
  font-size: 14.5px;
  font-weight: 600;
}

html.nova .nova-resumo .order-bump__price {
  padding: 0;
  background: none;
  color: var(--tinta);
  font-size: 14.5px;
  font-weight: 800;
}

html.nova .nova-resumo .order-bump__text,
html.nova .nova-resumo .order-bump__badge,
html.nova #paymentOrder {
  display: none;
}

html.nova .nova-resumo .payment__box {
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 10px 0 2px;
  border: 0;
  background: none;
}

html.nova .nova-resumo .payment__box span {
  color: var(--tinta);
  font-size: 17px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}

html.nova .nova-resumo .payment__box strong {
  font-size: 22px;
}

html.nova .nova-resumo .payment__box > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
}

html.nova .nova-resumo .payment__box > div > span {
  display: inline;
  margin: 0;
}

html.nova .nova-nota {
  margin: 0 0 10px;
  color: var(--claro-2);
  font-size: 13.5px;
  line-height: 1.4;
}

html.nova .nova-campos .field {
  gap: 5px;
  margin-bottom: 9px;
}

html.nova .nova-campos input,
html.nova .nova-campos select {
  padding: 10px 12px;
}

html.nova .nova-campos .field span {
  color: var(--tinta);
}

html.nova .nova-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

html.nova .nova-dica {
  margin: -4px 0 10px;
  color: var(--suave);
  font-size: 12px;
  line-height: 1.35;
}

html.nova .nova-campos .pay-tabs {
  margin: 4px 0 10px;
}

html.nova .pay-tab.is-active {
  border-color: var(--ouro-escuro);
  background: var(--ouro-claro);
  color: var(--tinta);
}

html.nova .nova-campos .privacy-note,
html.nova .nova-campos .legal-consent {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--suave);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
}

html.nova .nova-campos .legal-consent {
  margin: 0 0 12px;
}

html.nova #paymentPanel .guarantee-box,
html.nova #pixPreviewText {
  display: none;
}

html.nova #createPixButton {
  gap: 6px;
  margin-top: 14px;
  font-size: 15px;
  white-space: nowrap;
}

html.nova .nova-garantia-checkout {
  margin: 8px 0 4px;
  color: var(--claro-2);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

html.nova #backToPreview {
  min-height: 0;
  margin-top: 6px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--claro-2);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
}

html.nova #pixBox {
  padding: 14px;
  border-radius: 16px;
  background: var(--marfim);
  color: var(--tinta);
}

html.nova #paymentPanel > .status,
html.nova #cardStatus {
  color: var(--claro);
}

/* Aviso escrito na página no lugar das janelinhas do navegador ----------- */
html.nova .nova-erro {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 1000;
  width: min(92vw, 440px);
  transform: translateX(-50%);
  padding: 13px 16px;
  border: 1.5px solid #f0b7b0;
  border-radius: 14px;
  background: #fff1f0;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  color: #8a1f2b;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
}

/* Rodapé ----------------------------------------------------------------- */
html.nova .site-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: #0c0510;
  color: var(--claro-2);
}

html.nova .site-footer__brand {
  color: #fff;
}

html.nova .site-footer p {
  color: var(--claro-2);
}

html.nova .site-footer__links a {
  color: var(--ouro);
}

@media (min-width: 941px) {
  html.nova .hero__content {
    align-items: start;
  }

  html.nova .hero__copy {
    padding-top: 64px;
  }
}

/* Espera: sem as animações do meio, a captura de e-mail sobe para a primeira tela. */
html.nova #generatingPanel .generation-stage,
html.nova #generatingPanel .generation-steps {
  display: none;
}

/* Checkout: o botão de pagar fica preso no rodapé da tela, como o da prévia (nova.js monta a barra). */
html.nova .nova-barra-pagar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 12px -18px -18px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--linha-escura);
  background: rgba(18, 8, 24, 0.96);
  backdrop-filter: blur(14px);
}

@media (min-width: 621px) {
  html.nova .nova-barra-pagar {
    margin: 12px -24px -24px;
    padding: 12px 24px 16px;
  }
}

html.nova .nova-barra-pagar #createPixButton {
  margin-top: 0;
}

html.nova .nova-barra-pagar:has(#createPixButton.is-hidden) {
  display: none;
}

/* Celular: cada tela cabe na primeira dobra, com o botão à vista (pedido do Vitor, 14/10). */
@media (max-width: 620px) {
  html.nova .topbar {
    padding-top: 10px;
    padding-bottom: 6px;
  }

  html.nova .hero__content {
    gap: 12px;
    padding-top: 2px;
    padding-bottom: 28px;
  }

  html.nova h1.nova-titulo {
    margin-bottom: 8px;
    font-size: 27px;
  }

  html.nova .nova-acordo {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.4;
  }

  html.nova .nova-selos {
    margin-bottom: 0;
    font-size: 12.5px;
  }

  html.nova .hero__copy .nova-depo,
  html.nova .composer > .steps {
    display: none;
  }

  html.nova .nova-depo--celular {
    display: block;
    margin: 4px 4px 0;
    font-size: 16px;
  }

  html.nova #songForm.is-hidden + .nova-depo--celular {
    display: none;
  }

  html.nova #songForm {
    padding: 14px 16px 16px;
  }

  html.nova .nova-quiz-barra {
    margin-bottom: 12px;
  }

  html.nova .nova-quiz-titulo {
    font-size: 22px;
  }

  html.nova .nova-quiz-titulo + .nova-quiz-opcoes,
  html.nova .nova-quiz-titulo + .field {
    margin-top: 10px;
  }

  html.nova .nova-quiz-dica {
    margin-bottom: 10px;
    font-size: 13.5px;
  }

  html.nova .nova-quiz-opcao {
    min-height: 42px;
    font-size: 14px;
  }

  html.nova .style-chip {
    min-height: 56px;
  }

  html.nova .nova-quiz-passo textarea {
    min-height: 104px;
  }

  html.nova .nova-quiz-continuar {
    margin-top: 10px;
  }

  /* Os painéis são transparentes sobre o palco: o recuo lateral de 18px só tirava largura. Com 8px,
     o celular "(11) 99999-9999" cabe inteiro no campo ao lado do CPF (faltavam 10px). As barras
     fixas acompanham o recuo. */
  html.nova #generatingPanel,
  html.nova #previewPanel,
  html.nova #paymentPanel {
    padding-left: 8px;
    padding-right: 8px;
  }

  html.nova .preview .preview-actions,
  html.nova .nova-barra-pagar {
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Celular e CPF lado a lado sem cortar o número nem no pior caso ("(00) 00000-0000" e
     "000.000.000-00", os dígitos mais largos) num Android de 360px. A fonte fica em 16px: abaixo
     disso o iPhone dá zoom ao tocar no campo. */
  html.nova .nova-linha {
    grid-template-columns: 1.07fr 1fr;
  }

  html.nova .nova-linha input {
    padding-left: 8px;
    padding-right: 8px;
    letter-spacing: -0.3px;
  }

  html.nova #previewPanel {
    gap: 10px;
    padding-top: 12px;
  }

  html.nova .nova-titulo-previa {
    margin-bottom: 0;
    font-size: 23px;
  }

  html.nova #previewPanel .panel__header .kicker {
    margin-bottom: 4px;
  }

  html.nova #previewPanel .player {
    padding: 10px 12px;
  }

  html.nova #previewPanel .player__top {
    margin-bottom: 6px;
  }

  html.nova #previewPanel .player__actions {
    margin-top: 6px;
  }

  html.nova #playPreview {
    width: 60px;
    height: 60px;
    font-size: 22px;
  }

  html.nova .nova-depo--previa {
    margin: 0;
    font-size: 14px;
  }

  html.nova #previewPanel .lyrics.nova-letra-fechada pre {
    max-height: 5em;
    padding-top: 10px;
  }

  html.nova .nova-ver-letra {
    padding-bottom: 10px;
  }

  html.nova .remake-button.nova-ajuste {
    margin-top: 0;
  }

  html.nova .nova-passos {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
  }

  html.nova .nova-passos li {
    margin: 0;
  }

  html.nova .preview .preview-actions {
    gap: 4px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  html.nova .nova-garantia-fixa {
    margin-top: 0;
  }

  html.nova #paymentPanel .panel__header h2 {
    margin-bottom: 10px;
    font-size: 23px;
  }

  html.nova .nova-resumo {
    padding: 10px 12px;
  }

  html.nova .nova-resumo .payment__box {
    padding-top: 6px;
  }

  html.nova .nova-resumo .payment__box strong {
    font-size: 20px;
  }

  html.nova .nova-nota {
    display: none;
  }

  html.nova #checkoutFields {
    gap: 8px;
    margin-bottom: 8px;
  }

  html.nova .nova-campos .legal-consent {
    margin-bottom: 8px;
    line-height: 1.3;
  }

  html.nova .nova-campos .field {
    gap: 3px;
    margin-bottom: 0;
  }

  html.nova .nova-dica {
    margin: 0;
  }

  html.nova .nova-campos .pay-tabs {
    margin: 0 0 6px;
  }

  html.nova .nova-campos .pay-tab {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  html.nova .nova-campos {
    padding: 10px;
  }
}