/* =====================================================================
   ButtercreamPro — variante /b/
   Carregado DEPOIS do style.css, só por cima.

   O que muda: tipografia (serifa editorial nos títulos), fundo quente
   no lugar do branco, azul mais profundo, e um dourado de apoio.

   O que NÃO muda, de propósito: o verde dos botões de compra, o
   vermelho das faixas de urgência e todos os argumentos de venda.
   Mexer nisso tiraria o teste do eixo — o objetivo é medir apresentação,
   não trocar a oferta.
   ================================================================== */

:root {
  --b-fundo:      #fffaf6;   /* creme quente no lugar do branco puro */
  --b-fundo-alt:  #fdf3ec;   /* faixa alternada */
  --b-tinta:      #15205c;   /* azul mais profundo que o #1a277f */
  --b-tinta-sub:  #3d4a7a;
  --b-texto:      #4a4a52;
  --b-ouro:       #b8903f;   /* dourado de apoio, puxado da arte do produto */
  --b-linha:      #ece0d6;
}

/* ------------------------------------------------------------ base */
body {
  background-color: var(--b-fundo);
  color: var(--b-texto);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -0.003em;
}

/* --------------------------------------------------- títulos */
.heading,
h1, h2, h3 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing: -0.015em;
}

/* O hero tem fundo azul escuro: aqui o texto FICA BRANCO.
   Pintar de azul-tinta, como no resto da pagina, some com o titulo. */
.hero__title {
  font-weight: 700;
  line-height: 1.08;
}

.hero__sub {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

/* esses dois ficam sobre fundo claro, entao recebem a cor nova */
.achieve__text,
.indice__sub {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--b-tinta-sub);
  letter-spacing: 0;
}

.achieve__title,
.indice__titulo,
.logica__titulo,
.ad__titulo {
  color: var(--b-tinta);
  line-height: 1.15;
}
/* .sec--porque tambem e azul escuro: aqui a cor original fica */
.porque__titulo { line-height: 1.15; }
/* fundo escuro: so a entrelinha */
.final__title { line-height: 1.15; }

/* o "olho" acima dos blocos vira etiqueta dourada em caixa alta */
.offer__kicker,
.author__kicker {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: .78em;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.author__kicker { color: var(--b-ouro); }
/* sobre o azul escuro da oferta, o dourado precisa ser mais claro */
.offer__kicker { color: #e8c87a; }

/* ------------------------------------------------ blocos de produto */
.product__title {
  color: var(--b-tinta);
  line-height: 1.2;
}
.product__text {
  font-family: "Inter", sans-serif;
  line-height: 1.62;
  color: var(--b-texto);
  letter-spacing: 0;
}

/* faixas alternadas: dá ritmo à página, que hoje é branca de ponta a ponta */
.sec--product:nth-of-type(even) { background-color: var(--b-fundo-alt); }

/* ------------------------------------------------------- a oferta */
/* .sec--offer e .sec--final tem fundo azul escuro (#16335b).
   Nestes blocos eu troco SO a fonte — a cor continua a original (branca).
   Pintar de azul-tinta aqui apaga o preco e a chamada da oferta. */
.offer__discount {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.offer__copy {
  font-family: "Inter", sans-serif;
  letter-spacing: 0;
}
.final__price {
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: -0.02em;
}

/* --------------------------------------------- cartões e molduras */
.bene, .caixa-recebe, .ad__item img, .carousel__image {
  border-radius: 16px;
}
.ad__item img {
  box-shadow: 0 10px 28px rgb(21 32 92 / .10);
}

/* a autora: foto com moldura quente */
.author__foto img {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgb(21 32 92 / .12);
}
.author__foto figcaption {
  font-family: "Inter", sans-serif;
  color: var(--b-ouro);
  font-weight: 600;
  letter-spacing: .02em;
}

/* ------------------------------------------------ caixa da garantia */
.garantia__caixa, .caixa-garantia {
  border-radius: 18px;
}

/* ------------------------------------------------------- respiro */
.sec { padding-block: 6px; }
.logica__txt, .porque__txt {
  font-family: "Inter", sans-serif;
  line-height: 1.68;
  letter-spacing: 0;
}

/* ---------------------------------------------------------- mobile */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .hero__title { line-height: 1.12; }
  .offer__kicker, .author__kicker { letter-spacing: .12em; }
}

/* quem pediu menos movimento continua sem movimento */
@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none !important; }
}


/* ============================================ aviso de prova social
   Canto inferior esquerdo. Miniatura do produto, selo de confirmacao e
   cidade. Nao cobre o botao de compra e some sozinho. */
.aviso {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: min(362px, calc(100vw - 40px));
  padding: 13px 40px 13px 13px;
  border: 1px solid rgb(21 32 92 / .09);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 6px rgb(21 32 92 / .06), 0 14px 38px rgb(21 32 92 / .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.97);
  transition: opacity .4s cubic-bezier(.2,.8,.2,1),
              transform .4s cubic-bezier(.2,.8,.2,1), visibility .4s;
}
.aviso.is-visivel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.aviso__capa {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--b-fundo-alt);
}
.aviso__corpo { min-width: 0; }

.aviso__top {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--b-verde, #02a219);
}
.aviso__pulso {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #02a219;
  box-shadow: 0 0 0 0 rgb(2 162 25 / .55);
  animation: avisoPulso 2s infinite;
}
@keyframes avisoPulso {
  70%  { box-shadow: 0 0 0 7px rgb(2 162 25 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(2 162 25 / 0); }
}

.aviso__nome {
  display: block;
  margin-top: 3px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--b-tinta);
}
.aviso__onde {
  display: block;
  margin-top: 1px;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  line-height: 1.3;
  color: #8a8a94;
}

.aviso__fechar {
  position: absolute;
  top: 7px; right: 9px;
  padding: 2px 5px;
  border: 0;
  background: none;
  color: #c4c4cd;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.aviso__fechar:hover { color: var(--b-texto); }

@media (max-width: 600px) {
  .aviso { left: 12px; bottom: 12px; gap: 11px; padding: 11px 34px 11px 11px; border-radius: 14px; }
  .aviso__capa { width: 40px; height: 40px; border-radius: 9px; }
  .aviso__nome { font-size: 13px; }
  .aviso__onde { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .aviso { transition: opacity .2s ease, visibility .2s; transform: none; }
  .aviso.is-visivel { transform: none; }
  .aviso__pulso { animation: none; }
}

/* ===================================== aviso de que o preco volta a subir
   Era uma linha pequena e discreta. Como ela sustenta a urgencia da
   oferta, ganhou corpo: a primeira linha chama, a segunda explica.
   Fica sobre o azul escuro da secao, entao o amarelo e o branco ficam. */
.offer__sobe {
  margin: 12px auto 0;
  max-width: 440px;
  padding: 11px 16px;
  border: 1px solid rgb(255 209 102 / .45);
  border-radius: 12px;
  background: rgb(255 209 102 / .10);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}
.offer__sobe-forte {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #ffd166;
}
.offer__sobe-fraco {
  display: block;
  margin-top: 3px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgb(255 255 255 / .82);
}
@media (max-width: 600px) {
  .offer__sobe { max-width: 100%; padding: 10px 13px; }
  .offer__sobe-forte { font-size: 15px; }
  .offer__sobe-fraco { font-size: 13px; }
}

/* ============================= "por que e tao barato" — secao da objecao
   Fundo azul escuro (#16335b): a cor do texto fica a original.
   Aqui so aumento o titulo e acrescento o olho dourado. */
.porque__olho {
  margin: 0 0 10px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #e8c87a;
  text-align: center;
}
.sec--porque .porque__titulo {
  font-size: clamp(27px, 5.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-align: center;
}
@media (max-width: 600px) {
  .porque__olho { font-size: 11px; letter-spacing: .14em; }
}

/* assinatura ao pe da secao: fecha o depoimento em primeira pessoa */
.porque__assina {
  margin: 18px 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 17px;
  font-style: italic;
  color: #e8c87a;
  text-align: center;
}

/* foto unica da autora: substituiu as duas (Karen + fachada) */
.author__foto--unica { max-width: 100%; }
.author__foto--unica img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

/* ===================== "o que as receitas comuns nao te ensinam"
   A secao passou de um paragrafo unico para cinco. Mantive a fonte, o
   tamanho e a cor que ja estavam; so dei respiro entre os paragrafos e
   tirei o peso do corpo, senao cinco blocos em semibold viram parede.
   As duas linhas de remate continuam pesadas, que e onde o olho deve bater. */
.achieve__text p { margin: 0 0 18px; font-weight: 400; }
.achieve__text p:last-child { margin-bottom: 0; }
.achieve__forte { font-weight: 700; color: var(--b-tinta); }

@media (max-width: 767px) {
  .achieve__text p { margin-bottom: 14px; }
}