/* ==========================================================================
   SEM CEBOLA — Landing Page B2B
   CSS mobile-first | breakpoints: 641px (tablet), 1025px (desktop)
   ========================================================================== */

/* ---------- Variáveis ---------- */
:root {
  --roxo: #4A2367;          /* cor principal */
  --lilas: #8B5FB5;         /* cor de apoio */
  --lilas-claro: #EDE5F5;   /* fundo suave derivado do lilás */
  --branco: #FFFFFF;
  --cinza-texto: #4a4453;
  --cinza-borda: #E3DCEB;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-card: 0 4px 20px rgba(74, 35, 103, 0.10);
  --shadow-header: 0 2px 12px rgba(74, 35, 103, 0.12);

  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --header-height: 68px;
}

/* ---------- Reset básico ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 12px);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--cinza-texto);
  background: var(--branco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ---------- Utilitários ---------- */
.container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 20px;
}

.section-title {
  color: var(--roxo);
  font-size: 1.75rem;
  line-height: 1.25;
  text-align: center;
  margin-bottom: 2rem;
}

.section-title--light {
  color: var(--branco);
}

/* Fonte display (geométrica e arredondada) só nos títulos */
.hero__headline,
.section-title,
.big-number__value,
.final-cta__headline,
.card__title,
.how__step-title,
.offer__price {
  font-family: var(--font-display);
}

/* Placeholder genérico de imagem */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lilas-claro);
  border: 2px dashed var(--lilas);
  border-radius: var(--radius-md);
  color: var(--roxo);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  padding: 0.5rem;
}

.img-placeholder--round {
  border-radius: 50%;
}

/* Placeholder de ícone */
.icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--lilas-claro);
  border: 2px dashed var(--lilas);
  color: var(--roxo);
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
}

/* ---------- Selo "cebola ×" (quadrado arredondado) ---------- */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--roxo);
  color: var(--branco);
  flex-shrink: 0;
}

.brand-mark__icon {
  font-size: 1.1rem;
  line-height: 1;
}

.brand-mark__x {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.brand-mark--sm {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.brand-mark--sm .brand-mark__icon { font-size: 0.85rem; }
.brand-mark--sm .brand-mark__x { font-size: 0.8rem; }

.brand-mark--lg {
  width: 64px;
  height: 64px;
  border-radius: 18px;
}

.brand-mark--lg .brand-mark__icon { font-size: 1.6rem; }
.brand-mark--lg .brand-mark__x { font-size: 1.4rem; }

/* ---------- Botões ---------- */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--roxo);
  color: var(--branco);
  box-shadow: 0 4px 14px rgba(74, 35, 103, 0.35);
}

.btn--primary:hover {
  background: var(--lilas);
}

.btn--light {
  background: var(--branco);
  color: var(--roxo);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

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

.btn--outline:hover {
  background: var(--roxo);
  color: var(--branco);
}

.btn--lg {
  padding: 1rem 2.25rem;
  font-size: 1.05rem;
}

.btn--block {
  display: block;
  width: 100%;
}

/* ==========================================================================
   SEÇÃO 1: Header
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--branco);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  transition: box-shadow 0.2s ease;
}

.header.is-scrolled {
  box-shadow: var(--shadow-header);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-height);
}

.header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header__logo-img {
  height: 36px;
  width: auto;
}

.header__descriptor {
  font-size: 0.65rem;
  color: var(--lilas);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: none;
}

/* Nav mobile: painel dropdown escondido */
.header__nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--branco);
  box-shadow: var(--shadow-header);
  padding: 1.25rem 20px 1.5rem;
  display: none;
  flex-direction: column;
  gap: 1.25rem;
}

.header__nav.is-open {
  display: flex;
}

.header__menu {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.header__link {
  font-weight: 600;
  color: var(--roxo);
  font-size: 1rem;
}

.header__link:hover {
  color: var(--lilas);
}

.header__cta {
  align-self: flex-start;
}

/* Hambúrguer */
.header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-sm);
}

.header__hamburger-line {
  display: block;
  width: 100%;
  height: 2.5px;
  background: var(--roxo);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.header__hamburger[aria-expanded="true"] .header__hamburger-line:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.header__hamburger[aria-expanded="true"] .header__hamburger-line:nth-child(2) {
  opacity: 0;
}

.header__hamburger[aria-expanded="true"] .header__hamburger-line:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ==========================================================================
   SEÇÃO 2: Hero
   ========================================================================== */
.hero {
  background:
    radial-gradient(ellipse at 85% 10%, rgba(139, 95, 181, 0.16), transparent 55%),
    linear-gradient(180deg, var(--branco) 0%, var(--lilas-claro) 100%);
  padding: 3rem 0 3.5rem;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.hero__content {
  text-align: center;
}

.badge--hero {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 999px;
  padding: 0.35rem 0.9rem 0.35rem 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--roxo);
  margin-bottom: 1.25rem;
}

.badge__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.hero__headline {
  color: var(--roxo);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.hero__cta-secondary {
  min-width: 12rem;
}

.hero__subheadline {
  font-size: 1.05rem;
  margin-bottom: 1.75rem;
  max-width: 34rem;
  margin-inline: auto;
}

/* ---------- Animações do hero ---------- */
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.badge--hero,
.hero__headline,
.hero__subheadline,
.hero__cta {
  animation: hero-fade-up 0.6s ease-out both;
}

.hero__headline { animation-delay: 0.1s; }
.hero__subheadline { animation-delay: 0.25s; }
.hero__cta { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .badge--hero,
  .hero__headline,
  .hero__subheadline,
  .hero__cta,
  .offer__cta {
    animation: none;
  }
}

/* ---------- Reveal ao rolar ----------
   A classe .reveal é aplicada via JS (assim nada fica escondido sem JS).
   O atraso de cada elemento vem da variável --reveal-delay. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease-out var(--reveal-delay, 0s),
    transform 0.55s ease-out var(--reveal-delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Número do passo "pinga" depois que o card assenta */
@keyframes number-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  60% {
    transform: scale(1.12);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.how__step.reveal .how__number {
  opacity: 0;
}

.how__step.reveal.is-visible .how__number {
  animation: number-pop 0.45s ease-out both;
  animation-delay: calc(var(--reveal-delay, 0s) + 0.3s);
}

/* ==========================================================================
   SEÇÃO 3: Dor do dono
   ========================================================================== */
.pain {
  padding: 3.5rem 0;
}

.pain__inner {
  max-width: 46rem;
}

.pain__text {
  font-size: 1.05rem;
  text-align: left;
}

.pain__text p + p {
  margin-top: 0.5rem;
}

/* O nome da dor fecha a seção — precisa de respiro em cima e destaque.
   É o elemento que batiza o problema, não parágrafo de corpo. */
.pain__name {
  margin-top: 1.5rem;
  font-size: 1.2rem;
  color: var(--roxo);
}

/* ==========================================================================
   SEÇÃO 4: Número em destaque
   ========================================================================== */
.big-number {
  background: linear-gradient(135deg, #3a1a52 0%, var(--roxo) 55%, #5c2e80 100%);
  color: var(--branco);
  padding: 3.5rem 0;
  text-align: center;
}

.big-number__mark {
  border-radius: 18px;
}

.big-number__value {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.big-number__caption {
  font-size: 1rem;
  color: var(--lilas-claro);
}

/* ---------- Calculadora do Custo Invisível ---------- */
.calc__layout {
  display: grid;
  gap: 2.5rem;
  max-width: 62rem;
}

/* Coluna esquerda: pergunta + âncora + fonte */
.calc__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.calc__question {
  margin-bottom: 0;
}

/* Pill da âncora — o ~8 min, o insumo da conta */
.calc__anchor {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--branco);
  color: var(--roxo);
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  text-align: left;
}

.calc__anchor-value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.calc__anchor-label {
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--cinza-texto);
}

/* Coluna direita: o painel da ferramenta */
.calc__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem;
}

.calc__panel-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--branco);
}

.calc__control {
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.calc__label {
  font-size: 0.95rem;
  color: var(--lilas-claro);
}

.calc__output {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--branco);
}

/* Slider: reset e trilho */
.calc__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px; /* alvo de toque; o trilho é desenhado menor dentro */
  background: transparent;
  cursor: pointer;
}

.calc__slider:focus-visible {
  outline: 3px solid var(--branco);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.calc__slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.calc__slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

/* Botão do slider: pill branco com setas roxas, no mesmo peso visual
   dos botões da página (fundo branco + sombra). As setas são um SVG de
   fundo porque o thumb nativo não aceita filhos nem ::before/::after. */
.calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 46px;
  height: 30px;
  margin-top: -12px; /* centraliza o thumb de 30px no trilho de 6px */
  border-radius: 999px;
  background: var(--branco)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Cpath d='M8 2.5 4 6l4 3.5M14 2.5 18 6l-4 3.5' fill='none' stroke='%234A2367' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 22px 12px no-repeat;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.calc__slider::-moz-range-thumb {
  width: 46px;
  height: 30px;
  border: none;
  border-radius: 999px;
  background: var(--branco)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Cpath d='M8 2.5 4 6l4 3.5M14 2.5 18 6l-4 3.5' fill='none' stroke='%234A2367' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 22px 12px no-repeat;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Resultado secundário */
.calc__card {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: 1.1rem 1rem;
  margin-top: 0.5rem;
}

/* CTA que fecha a seção — ponte para o mecanismo, não para o checkout */
.calc__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.calc__cta-text {
  font-size: 0.95rem;
  color: var(--lilas-claro);
}

.calc__card-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
}

.calc__card-label {
  font-size: 0.9rem;
  color: var(--lilas-claro);
  margin-top: 0.25rem;
}

/* .calc__method / .calc__source — linha de fonte e método, removida da
   página em 2026-08-21 por decisão do Wesley. Estilos retirados junto para
   não deixar CSS órfão; o texto está arquivado em
   03-copy/PAGINA-VENDAS.md, seção 3, caso volte. */

/* ==========================================================================
   SEÇÃO 5: Como funciona
   ========================================================================== */
/* Palco em 4 camadas. O degradê irradia do ponto onde o celular fica, e a
   ordem de empilhamento é: palavra (1) → celular (2) → categoria (3) →
   cards (4). Os cards no primeiro plano cobrem a base do aparelho. */
.how {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 3rem;
  background: radial-gradient(
    ellipse 90% 70% at 50% 38%,
    #6b3d94 0%,
    #5c2e80 30%,
    var(--roxo) 62%,
    #34164a 100%
  );
  color: var(--branco);
}

/* .how__word — camada de palavra gigante ao fundo, descartada em 2026-08-21
   (decisão do Wesley). A composição ficou com degradê, celular e cards.
   Estilos retirados junto para não deixar CSS órfão. */

.how__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Camada 3 — a âncora de categoria da marca */
.how__category {
  position: relative;
  z-index: 3;
  max-width: 22rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--branco);
}

/* Camada 2 — o celular */
.how__device {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 240px;
  height: auto;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.4));
}

/* Camada 4 — os passos. Deixaram de ser cards em 2026-08-27.
   O `margin-top` negativo saiu junto: ele existia para o celular passar por
   trás dos cards, e era ele que OBRIGAVA a caixa a ser opaca. Sem
   sobreposição, a caixa não tem mais função. O aparelho aparece inteiro. */
.how__steps {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1rem;
  counter-reset: step;
}

/* Sem fundo, sem borda, sem raio, sem sombra: texto puro sobre o roxo,
   separado do próximo por um fio. */
.how__step {
  color: rgba(255, 255, 255, 0.82);
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.how__step:first-child {
  border-top: 0;
  padding-top: 0;
}

/* O número vira elemento gráfico, não crachá. */
.how__number {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.75rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.32);
  margin-bottom: 0.5rem;
}

.how__step-title {
  color: var(--branco);
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.how__step-text {
  font-size: 0.95rem;
}

/* ---------- Cards genéricos ---------- */
.card {
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  color: var(--roxo);
  margin-bottom: 1rem;
}

.card__icon svg {
  width: 28px;
  height: 28px;
}

.card__title {
  color: var(--roxo);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.card__text {
  font-size: 0.95rem;
}

/* Deixou de ser card em 2026-08-27. Os três momentos são uma cadeia no tempo,
   não três coisas paralelas — viraram etapas penduradas num fio vertical.
   Sem fundo, sem borda, sem raio, sem sombra e sem hover. */
.card--benefit {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* O ícone sai de dentro da caixa e vira o marcador SOBRE o fio: redondo, e
   deslocado meio diâmetro à esquerda do conteúdo para o centro dele cair
   exatamente na linha (2.5rem de padding − 22px de metade do marcador). */
.card--benefit .card__icon {
  position: absolute;
  left: calc(-2.5rem - 22px);
  top: -0.15rem;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  box-shadow: none;
}

.card--benefit .card__icon svg {
  width: 21px;
  height: 21px;
}

/* ==========================================================================
   SEÇÃO 7: Benefícios
   ========================================================================== */
/* Branca desde 2026-08-27 (Wesley). Era roxa e formava, com `numero` e
   `how`, um bloco de três seções roxas seguidas — sem marco nenhum em mais
   de 6.000px de scroll. Agora o ritmo é roxo / branco / roxo. */
.benefits {
  background: var(--branco);
  padding: 4rem 0;
}

.benefits .section-title {
  color: var(--roxo);
}

/* O fio condutor. Corre atrás dos marcadores, alinhado ao centro deles. */
.benefits__grid {
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
  max-width: 46rem;
  margin-inline: auto;
  margin-left: 1.5rem;
  padding-left: 2.5rem;
  border-left: 1px solid var(--cinza-borda);
}

/* Ponte de volta ao produto, depois das 3 etapas da mente.
   Sobre fundo branco desde 2026-08-27, então texto roxo. */
.benefits__bridge {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--roxo);
}

/* ==========================================================================
   SEÇÃO 7B: Para quem é
   ========================================================================== */
.fit {
  padding: 4rem 0;
  background: var(--lilas-claro);
}

.fit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Sem caixa desde 2026-08-27. Sobre o lilás o texto já tem contraste; quem
   separa as duas colunas é um fio, não uma moldura branca. */
.fit__col {
  padding: 1.5rem 0;
}

.fit__col--no {
  border-top: 1px solid var(--cinza-borda);
  padding-top: 2rem;
}

.fit__col-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
}

.fit__col-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.fit__col--yes .fit__col-title {
  color: #2e7d32;
}

.fit__col--no .fit__col-title {
  color: #c62828;
}

.fit__list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.fit__item {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
}

.fit__col--yes .fit__item::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2e7d32;
  font-weight: 800;
}

.fit__col--no .fit__item::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: #c62828;
  font-weight: 800;
}

/* ==========================================================================
   Barra CTA fixa mobile — REMOVIDA em 2026-08-21 (decisão do Wesley).
   Junto com ela caiu o deslocamento do .whatsapp-fab para bottom: 4.5rem
   em telas <640px, que existia só para não colidir com a barra. O botão
   do WhatsApp volta ao bottom: 1.25rem padrão em todas as larguras.
   ========================================================================== */

/* ==========================================================================
   SEÇÃO 8: Prova social
   ========================================================================== */
.social-proof[hidden] {
  display: none !important;
}

.social-proof {
  padding: 4rem 0;
  background: var(--lilas-claro);
}

.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.testimonial {
  background: var(--branco);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.testimonial__quote p {
  font-size: 0.95rem;
  font-style: italic;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}

.testimonial__photo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  font-size: 0.55rem;
}

.testimonial__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.testimonial__name {
  font-weight: 700;
  color: var(--roxo);
  font-size: 0.95rem;
}

.testimonial__pizzeria {
  font-size: 0.85rem;
  color: var(--lilas);
}

/* Fileira de logos de parceiros */
.partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.partners__logo {
  width: 110px;
  height: 56px;
  font-size: 0.65rem;
  background: var(--branco);
}

/* ==========================================================================
   SEÇÃO 9: Oferta / preço
   ========================================================================== */
.offer {
  background: linear-gradient(160deg, var(--roxo) 0%, var(--lilas) 100%);
  padding: 4rem 0;
}

.offer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.offer__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
  max-width: 54rem;
  align-items: start;
}

.offer__card {
  position: relative;
  background: var(--branco);
  border: 2px solid var(--cinza-borda);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem 2.25rem;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.offer__card--featured {
  background:
    linear-gradient(var(--branco), var(--branco)) padding-box,
    linear-gradient(135deg, #e9d8fa 0%, var(--lilas) 50%, #e9d8fa 100%) border-box;
  border: 3px solid transparent;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  transform: scale(1.03);
}

/* Selo de ancoragem no topo do card */
.offer__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--lilas), var(--roxo));
  color: var(--branco);
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

/* CTA da oferta com pulso sutil */
@keyframes cta-pulse {
  0%,
  100% {
    box-shadow: 0 4px 14px rgba(74, 35, 103, 0.35);
  }
  50% {
    box-shadow:
      0 4px 22px rgba(74, 35, 103, 0.5),
      0 0 0 8px rgba(139, 95, 181, 0.12);
  }
}

.offer__cta {
  animation: cta-pulse 2.2s ease-in-out infinite;
}

.offer__mark {
  border-radius: 9px;
}

.offer__plan-name {
  font-weight: 700;
  color: var(--lilas);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

.offer__price {
  color: var(--roxo);
  /* Fluido: "R$ 1.098,90/ano" quebrava em duas linhas nos cards lado a lado
     entre 641px e ~900px. O nowrap garante que nunca parta o preço. */
  font-size: clamp(1.9rem, 5.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* "/mês" e "/ano" — periodicidade colada no preço, em peso menor */
.offer__price-period {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.offer__price-note {
  font-size: 0.85rem;
  color: var(--cinza-texto);
}

.offer__list {
  width: 100%;
  margin: 1.25rem 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.offer__item {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.95rem;
}

.offer__item::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--lilas);
  font-weight: 800;
}

.offer__guarantee {
  font-size: 0.8rem;
  color: var(--cinza-texto);
  margin-top: 0.75rem;
}

.offer__trust {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Botão WhatsApp flutuante
   ========================================================================== */
.whatsapp-fab {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #25D366;
  color: var(--branco);
  padding: 0.7rem 1rem;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  font-size: 0.85rem;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.whatsapp-fab svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.whatsapp-fab__label {
  display: none;
}

@media (min-width: 641px) {
  .whatsapp-fab__label {
    display: inline;
  }
}

/* ==========================================================================
   SEÇÃO 10: FAQ
   ========================================================================== */
.faq {
  padding: 4rem 0;
}

.faq__inner {
  max-width: 46rem;
}

/* Lista contínua, não seis caixas (2026-08-27). Cada pergunta é separada da
   seguinte por um fio, e não por uma borda fechada com raio. */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--cinza-borda);
}

.faq__item {
  border-bottom: 1px solid var(--cinza-borda);
  overflow: hidden;
}

/* Aberta, quem marca é a pergunta — é onde o olho está. Antes era a borda da
   caixa inteira, que deixou de existir. */
.faq__item.is-open .faq__question {
  color: var(--lilas);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-weight: 600;
  color: var(--roxo);
  text-align: left;
  font-size: 0.98rem;
}

.faq__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--lilas-claro);
  color: var(--roxo);
  font-weight: 800;
  transition: transform 0.2s ease;
}

.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
}

.faq__answer {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.95rem;
}

/* ==========================================================================
   SEÇÃO 11: CTA final
   ========================================================================== */
.final-cta {
  background: radial-gradient(circle at 50% 130%, #5c2e80 0%, var(--roxo) 65%);
  padding: 4.5rem 0;
  text-align: center;
}


.final-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 44rem;
}

.final-cta__mark {
  border-radius: 18px;
}

.final-cta__headline {
  color: var(--branco);
  font-size: 1.9rem;
  line-height: 1.2;
}

/* ==========================================================================
   SEÇÃO 12: Footer
   ========================================================================== */
.footer {
  background: #35194b; /* roxo mais escuro para fechamento */
  color: var(--lilas-claro);
  padding: 3rem 0 1.5rem;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.footer__brand {
  display: flex;
  align-items: center;
}

.footer__isotipo {
  border-radius: 50%;
}

.footer__contact {
  font-size: 0.9rem;
}

.footer__social {
  display: flex;
  gap: 0.75rem;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--branco);
  transition: background 0.15s ease;
}

.footer__social-link svg {
  width: 20px;
  height: 20px;
}

.footer__social-link:hover {
  background: var(--lilas);
}

.footer__copyright {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  font-size: 0.8rem;
}

/* ==========================================================================
   BREAKPOINT: Tablet (641px+)
   ========================================================================== */
@media (min-width: 641px) {

  .section-title {
    font-size: 2.1rem;
  }

  .hero__headline {
    font-size: 2.6rem;
  }

  .header__descriptor {
    display: block;
  }

  /* No desktop o fio vira vertical, entre as colunas. */
  .fit__col--no {
    border-top: 0;
    border-left: 1px solid var(--cinza-borda);
    padding-top: 1.5rem;
    padding-left: 2.5rem;
  }

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

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

  .partners {
    gap: 1.5rem;
  }

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

  .offer__card {
    padding: 2.5rem 2.25rem;
  }
}

/* ==========================================================================
   BREAKPOINT: Desktop (1025px+)
   ========================================================================== */
@media (min-width: 1025px) {

  /* Calculadora: argumento à esquerda, ferramenta à direita */
  .calc__layout {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3.5rem;
  }

  .calc__intro {
    align-items: flex-start;
    text-align: left;
  }

  .calc__question {
    text-align: left;
    font-size: 2.3rem;
  }

  .calc__panel {
    padding: 2.25rem 2rem;
  }

  /* Esconde hambúrguer, mostra nav inline */
  .header__hamburger {
    display: none;
  }

  .header__nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  .header__menu {
    flex-direction: row;
    gap: 1.75rem;
  }

  .header__link {
    font-size: 0.95rem;
  }

  .header__cta {
    align-self: auto;
  }

  /* Hero: conteúdo + visual lado a lado */
  .hero {
    padding: 4.5rem 0 5rem;
  }

  .hero__content {
    max-width: 52rem;
    margin-inline: auto;
  }

  .hero__headline {
    font-size: 3.25rem;
  }

  .big-number__value {
    font-size: 5rem;
  }

  /* Palco no desktop: categoria à esquerda, celular centralizado, cards em
     três colunas cobrindo a base do aparelho.
     min-height em vh — mas não 100vh: a seção seguinte precisa espiar. */
  .how {
    min-height: 82vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 0 2.5rem;
  }

  .how__stage {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3rem;
  }

  /* A categoria sai do fluxo central e ancora à esquerda, como na referência,
     sem empurrar o celular para fora do eixo da palavra de fundo. */
  .how__category {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 20rem;
    font-size: 1.75rem;
    text-align: left;
  }

  .how__device {
    max-width: 250px;
  }

  /* Faixa horizontal abaixo do aparelho. Os fios viram verticais, entre as
     colunas, e o primeiro passo não leva fio. */
  .how__steps {
    flex-direction: row;
    gap: 0;
    margin-top: 2.5rem;
  }

  .how__step {
    flex: 1;
    padding: 0 2rem;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
  }

  .how__step:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .how__step:last-child {
    padding-right: 0;
  }

  .final-cta__headline {
    font-size: 2.4rem;
  }

  /* Footer em linha */
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}