/* Dono de Quadra — tema claro
   Camada de override sobre dark.css. Carregar SEMPRE depois dele.
   dark.css continua sendo a única fonte de layout; aqui só muda a paleta.

   Regra do tema: no escuro o verde-limão carrega ênfase de texto; no claro
   ele não tem contraste para isso. Então o roxo assume toda a ênfase de
   texto e o limão fica só como preenchimento com texto escuro em cima. */

:root {
  --bg: #FFFFFF;
  --bg-2: #FAF7FC;
  --surf: #FBF9FD;
  --surf-2: #F5EFF8;

  --roxo: #8C4EA1;
  /* mais escuro que no tema escuro: precisa de contraste sobre branco */
  --roxo-vivo: #7A3F91;
  --roxo-claro: #4E2A63;
  --roxo-escuro: #4E2A63;

  --limao: #D2FF4F;

  --tinta: #241B2B;
  /* sólidos em vez de rgba: compostos sobre branco, os alphas do tema
     escuro caíam para ~3,6:1 e reprovavam AA nos rótulos pequenos */
  --tinta-70: #5C5563;
  --tinta-50: #6E6878;

  --linha: rgba(36, 27, 43, .10);
  --linha-forte: rgba(36, 27, 43, .17);

  --zap: #25D366;
  /* laranja escurecido: #FFB454 não tem contraste sobre branco */
  --alerta: #A8571E;
}

html { background: var(--bg); }
body { background: transparent; }

:focus-visible { outline-color: var(--roxo); }

/* ============ malha ============ */

/* a malha é fixa e fica atrás de tudo; como só o hero tem fundo
   translúcido, ela aparece lá e some sob as faixas opacas abaixo. */
.malha {
  background-image:
    linear-gradient(to right, rgba(140, 78, 161, .13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140, 78, 161, .13) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ============ ritmo das dobras ============ */

/* faixas alternadas: sem isso o branco chapado deixa a página sem respiro
   e as seções colam umas nas outras. */
.secao--tinta { background: #F7F2FA; }

/* o CTA é o momento de conversão: tom um pouco mais fundo que as faixas */
.cta { background: #F1E7F7; }

/* com a troca de fundo separando as dobras, a linha de 1px vira ruído */
.secao--tinta + .secao--linha,
.cta + .secao--linha { border-top: 0; }

/* ============ ênfase: limão -> roxo ============ */

.eyebrow--limao { color: var(--roxo); }
.grifo { color: var(--roxo); }
.agenda__rodape b { color: var(--roxo); }
.numeros__valor--limao { color: var(--roxo); }
.calc__saida-valor { color: var(--roxo); }
.trava__solucao svg { stroke: var(--roxo); }
.feature__icone { stroke: var(--roxo); }
.checklist svg { stroke: var(--roxo); }
.sucesso__icone { stroke: var(--roxo); }

/* ============ botões ============ */

/* o limão como preenchimento com texto escuro funciona nos dois temas */
.btn--limao { background: var(--limao); color: #14180A; }
.btn--limao:hover { background: #C7F82E; }

.btn--contorno { color: var(--roxo); border-color: var(--roxo); }
.btn--contorno:hover { background: rgba(140, 78, 161, .07); border-color: var(--roxo); }

/* ============ header ============ */

.header { background: rgba(255, 255, 255, .86); }
.header__nav { color: var(--tinta-70); }

/* ============ hero ============ */

/* fundo translúcido: deixa a malha aparecer por baixo e cria a lavagem
   de lavanda que separa a primeira dobra do branco do resto */
.hero {
  background:
    linear-gradient(180deg, rgba(140, 78, 161, .14) 0%, rgba(140, 78, 161, .05) 52%, rgba(255, 255, 255, 0) 100%);
}

.hero__brilho {
  background: radial-gradient(circle, rgba(140, 78, 161, .22) 0%, rgba(140, 78, 161, 0) 66%);
  filter: blur(10px);
}

/* segundo bloom, com um toque de verde-limão para amarrar a paleta */
.hero::after {
  content: '';
  position: absolute;
  left: -18%;
  bottom: -46%;
  width: min(620px, 110vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 255, 79, .20) 0%, rgba(210, 255, 79, 0) 64%);
  pointer-events: none;
  z-index: 0;
}

/* o conteúdo precisa ficar acima dos dois blooms */
.hero > .container { position: relative; z-index: 1; }

.agenda {
  position: relative;
  background: linear-gradient(168deg, #FFFFFF, var(--surf-2));
  border-color: var(--linha-forte);
  box-shadow: 0 18px 44px rgba(36, 27, 43, .11);
}

/* halo atrás do mockup, para ele não flutuar solto no claro */
.agenda::before {
  content: '';
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 78, 161, .16) 0%, rgba(140, 78, 161, 0) 70%);
  z-index: -1;
  pointer-events: none;
}

.agenda__slot { background: rgba(36, 27, 43, .035); }

.agenda__tag {
  color: var(--alerta);
  background: rgba(168, 87, 30, .08);
  border-color: rgba(168, 87, 30, .28);
}

.agenda__slot--vazio {
  background: rgba(168, 87, 30, .05);
  border-color: rgba(168, 87, 30, .3);
}

/* ============ pendências ============ */

.pendente {
  color: var(--alerta);
  background: rgba(168, 87, 30, .08);
  border-color: rgba(168, 87, 30, .45);
}

/* ============ gargalo ============ */

.trava { background: var(--bg); }
.trava:hover { background: var(--surf-2); }

/* ============ features ============ */

.feature { background: var(--surf); }
.feature:hover {
  border-color: rgba(140, 78, 161, .38);
  box-shadow: 0 10px 26px rgba(36, 27, 43, .07);
}

/* ============ calculadora ============ */

.calc {
  background: linear-gradient(158deg, var(--surf-2), #FFFFFF 76%);
  border-color: rgba(140, 78, 161, .26);
}

.calc__saida {
  background: #FFFFFF;
  border-color: var(--linha-forte);
  box-shadow: 0 8px 24px rgba(36, 27, 43, .07);
}

input[type="range"] { background: rgba(36, 27, 43, .13); }

input[type="range"]::-webkit-slider-thumb {
  background: var(--roxo);
  box-shadow: 0 0 0 5px rgba(140, 78, 161, .15);
}
input[type="range"]::-moz-range-thumb {
  background: var(--roxo);
  box-shadow: 0 0 0 5px rgba(140, 78, 161, .15);
}

/* ============ prova visual (prints de app) ============ */

.prova-app__moldura {
  background: linear-gradient(168deg, #EFE6F5, #DCCDE7);
  border-color: var(--linha-forte);
  box-shadow: 0 20px 48px rgba(36, 27, 43, .16);
}

.prova-app__tag {
  color: #46600A;
  background: rgba(210, 255, 79, .34);
  border-color: rgba(150, 190, 30, .55);
}

.prova-app__tag--neutra {
  color: var(--roxo);
  background: rgba(140, 78, 161, .09);
  border-color: rgba(140, 78, 161, .32);
}

/* ============ história ============ */

.historia { background: var(--surf-2); }

/* ============ planos ============ */

.plano { background: var(--surf); }

.plano--destaque {
  border-color: var(--roxo);
  background: linear-gradient(168deg, rgba(140, 78, 161, .10), #FFFFFF 70%);
}

.plano__selo { background: var(--roxo); color: #fff; }

/* ============ cta + formulário ============ */

.cta__brilho {
  background: radial-gradient(circle, rgba(140, 78, 161, .12) 0%, rgba(140, 78, 161, 0) 68%);
}

.painel {
  background: var(--surf);
  border-color: var(--linha-forte);
  box-shadow: 0 14px 40px rgba(36, 27, 43, .08);
}

.passos__barra { background: rgba(36, 27, 43, .12); }
.passos__item[data-ativo="true"] .passos__barra { background: var(--roxo); }

.campo-texto {
  background: #FFFFFF;
  border-color: var(--linha-forte);
}
.campo-texto:focus { border-color: var(--roxo); }
.campo-texto::placeholder { color: var(--tinta-50); }

select.campo-texto {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C4EA1' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

select.campo-texto option { background: #fff; color: var(--tinta); }

/* selecionado em roxo com texto branco: no claro, o limão de fundo
   competia com o botão principal e confundia o que estava ativo */
.opcao span { border-color: var(--linha-forte); }

.opcao input:checked + span {
  background: var(--roxo);
  border-color: var(--roxo);
  color: #fff;
}

.opcao input:focus-visible + span { outline-color: var(--roxo); }

/* ============ rodapé e flutuante ============ */

.footer { border-top-color: var(--linha); }
.footer__meta a { color: var(--roxo); }

.zap-flutuante { box-shadow: 0 10px 26px rgba(36, 27, 43, .22); }

/* ============ blocos exclusivos da página de vendas ============ */

/* oferta — elemento 3 */
.oferta {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  background: var(--surf-2);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-xl);
  padding: clamp(24px, 4vw, 48px);
}

@media (min-width: 860px) {
  .oferta { grid-template-columns: 1.15fr .85fr; align-items: start; }
}

.oferta__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 11px;
}

.oferta__lista li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinta-70);
}

.oferta__lista b { color: var(--tinta); font-weight: 600; }

.oferta__lista svg {
  width: 18px; height: 18px;
  flex: none;
  margin-top: 2px;
  stroke: var(--roxo);
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oferta__preco {
  background: #FFFFFF;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-lg);
  padding: clamp(20px, 3vw, 28px);
  text-align: center;
}

.oferta__rotulo {
  font: 700 10.5px/1.4 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-50);
}

.oferta__valor {
  font: 800 clamp(34px, 5.4vw, 46px)/1 var(--display);
  letter-spacing: -.045em;
  color: var(--roxo);
  margin: 10px 0 4px;
}

.oferta__valor span {
  font: 400 13px/1 var(--mono);
  color: var(--tinta-50);
  letter-spacing: 0;
}

.oferta__nota {
  font: 400 12.5px/1.5 var(--mono);
  color: var(--tinta-50);
  margin: 12px 0 0;
}

/* sem-custo — reforço de remoção de custo */
.sem-custo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}

.sem-custo li {
  font: 600 12px/1 var(--mono);
  letter-spacing: .04em;
  color: var(--roxo);
  background: rgba(140, 78, 161, .08);
  border: 1px solid rgba(140, 78, 161, .24);
  border-radius: 99px;
  padding: 9px 13px;
}

/* garantia — elemento 8 */
.garantia {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) { .garantia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .garantia { grid-template-columns: repeat(4, 1fr); } }

.garantia__item {
  background: var(--surf);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: clamp(20px, 2.6vw, 26px);
}

.garantia__icone {
  width: 26px; height: 26px;
  stroke: var(--roxo);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 14px;
}

.garantia__titulo {
  font: 700 16.5px/1.2 var(--display);
  letter-spacing: -.02em;
  margin: 0 0 7px;
}

.garantia__texto {
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta-70);
  margin: 0;
}

/* prova social — elemento 7 */
.logos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.logos__item {
  flex: 1 1 150px;
  min-height: 74px;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--surf);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px;
  font: 600 13.5px/1.3 var(--corpo);
  color: var(--tinta-70);
}

.uso-proprio {
  display: grid;
  gap: clamp(22px, 3.4vw, 38px);
  align-items: center;
  background: var(--surf-2);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-xl);
  padding: clamp(24px, 4vw, 44px);
  margin-top: clamp(22px, 3vw, 34px);
}

@media (min-width: 820px) {
  .uso-proprio { grid-template-columns: 150px 1fr; }
}

.uso-proprio__foto {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--linha-forte);
}

.patrocinio {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
}

.patrocinio__rotulo {
  font: 700 10px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--roxo);
  margin-bottom: 12px;
}

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

.patrocinio__marcas span {
  font: 500 13px/1 var(--corpo);
  color: var(--tinta-70);
  background: #FFFFFF;
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 10px 13px;
}

/* ============ modal ============ */

.modal::backdrop { background: rgba(36, 27, 43, .55); }

.modal__caixa {
  background: #FFFFFF;
  border-color: var(--linha-forte);
  box-shadow: 0 30px 70px rgba(36, 27, 43, .22);
}

.modal__fechar:hover { background: rgba(36, 27, 43, .05); }

/* ============ instagram no rodapé ============ */

.footer__social:hover {
  border-color: var(--roxo);
  background: rgba(140, 78, 161, .08);
}