/* ==========================================================================
   KIT DESTRAVA SESSÃO INFANTIL
   Direção de arte: "Fichário Clínico"
   Manrope 800 + Inter · assimetria estrutural · cor como código
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Cor: base --- */
  --cream: #faf8f3;
  --white-warm: #fffdfc;
  --surface: #ffffff;
  --ink: #283330;
  --ink-2: #5d6a66;
  --ink-3: #8a9591;

  /* --- Cor: marca --- */
  --green: #315c55;
  --green-dark: #244842;
  --green-soft: #a9cec3;

  /* --- Cor: código de categoria --- */
  --blue: #6f9fb5;    /* 01 não fala        */
  --yellow: #f2c85b;  /* 02 "não sei"       */
  --coral: #e9957f;   /* 03 recusa          */
  --lilac: #b8a9d1;   /* 04 não quer estar  */
  /* 05 não avança → --green-soft */

  /* --- Linhas --- */
  --line: rgba(40, 51, 48, 0.10);
  --line-soft: rgba(40, 51, 48, 0.06);

  /* --- Tipografia --- */
  --font-title: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;

  --fs-display: clamp(1.9375rem, 1.36rem + 2.5vw, 2.8125rem);
  --fs-h2: clamp(1.75rem, 1.34rem + 1.85vw, 2.625rem);
  --fs-h3: clamp(1.1875rem, 1.11rem + 0.36vw, 1.375rem);
  --fs-h4: 1.0625rem;
  --fs-lead: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.6875rem;

  /* --- Espaço --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  --space-11: 120px;
  --space-12: 144px;

  /* --- Raio: graduado por função --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* --- Sombra: tint verde --- */
  --sh-1: 0 1px 2px rgba(36, 72, 66, 0.05), 0 2px 6px rgba(36, 72, 66, 0.04);
  --sh-2: 0 2px 6px rgba(36, 72, 66, 0.05), 0 10px 26px rgba(36, 72, 66, 0.07);
  --sh-3: 0 4px 12px rgba(36, 72, 66, 0.06), 0 24px 56px rgba(36, 72, 66, 0.10);

  /* --- Layout --- */
  --container: 1200px;
  --narrow: 680px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(80px, 9vw, 144px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

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

h1, h2, h3, h4 {
  font-family: var(--font-title);
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 600;
}

p { text-wrap: pretty; }

::selection { background: var(--green-soft); color: var(--green-dark); }

/* --------------------------------------------------------------------------
   3. ACESSIBILIDADE
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2.5px solid var(--green);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 999;
  padding: var(--space-3) var(--space-5);
  background: var(--green);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}

.skip-link:focus { top: var(--space-4); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   5. BOTÕES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: var(--space-4) var(--space-7);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.btn--primary {
  background: linear-gradient(150deg, #3a6a62 0%, var(--green) 46%, var(--green-dark) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(36, 72, 66, 0.16),
    0 8px 20px rgba(49, 92, 85, 0.22);
}

.btn--primary:hover {
  background: linear-gradient(150deg, #427a70 0%, #35655d 46%, #27504a 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 5px rgba(36, 72, 66, 0.18),
    0 14px 32px rgba(49, 92, 85, 0.28);
}

.btn--primary:active { transform: translateY(0); }

/* Seta de CTA: desliza no hover, chamando para a ação */
.btn__arrow {
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__arrow { transform: translateX(4px); }

/* CTAs de seção mais largos no desktop: presença de botão principal,
   sem afetar os botões internos dos planos */
@media (min-width: 768px) {
  .hero__actions .btn,
  .preview__action .btn,
  .pain__action .btn,
  .benefits__action .btn,
  .kit__action .btn,
  .proof__action .btn,
  .final__cta {
    min-width: min(100%, 420px);
    min-height: 60px;
    padding-inline: var(--space-8);
    font-size: 1.0625rem;
  }
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(var(--space-6), 5vw, var(--space-9))
                 clamp(var(--space-10), 10vw, var(--space-12));
  background:
    /* aurora verde — topo esquerdo */
    radial-gradient(60% 48% at 12% 4%, rgba(169, 206, 195, 0.30) 0%, transparent 62%),
    /* aurora azul — direita */
    radial-gradient(52% 44% at 92% 22%, rgba(111, 159, 181, 0.20) 0%, transparent 64%),
    /* respiro lilás — inferior esquerdo */
    radial-gradient(46% 40% at 4% 88%, rgba(184, 169, 209, 0.16) 0%, transparent 66%),
    /* calor amarelo — muito baixo, quase imperceptível */
    radial-gradient(40% 34% at 74% 92%, rgba(242, 200, 91, 0.13) 0%, transparent 68%),
    /* base: creme com leve subida de temperatura */
    linear-gradient(176deg, var(--white-warm) 0%, var(--cream) 46%, #f6f2ea 100%);
  overflow: hidden;
}

/* Camada 1 — grade técnica com máscara radial (sensação de organização) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(40, 51, 48, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 51, 48, 0.032) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 62% at 50% 34%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 34%, #000 12%, transparent 76%);
  pointer-events: none;
}

/* Camada 2 — grão de papel, dá materialidade ao creme */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.028'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

/* ---------- Coluna de texto ---------- */
.hero__copy {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

/* Eyebrow: pill glass */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 13px;
  border-radius: var(--r-xs);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--green);
  /* vidro: base translúcida + brilho superior interno */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.52) 100%);
  border: 1px solid rgba(169, 206, 195, 0.58);
  backdrop-filter: blur(14px) saturate(1.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(169, 206, 195, 0.22),
    0 1px 2px rgba(36, 72, 66, 0.05),
    0 6px 18px rgba(36, 72, 66, 0.07);
}

.eyebrow__dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--green-soft), var(--green));
  box-shadow: 0 0 0 3px rgba(169, 206, 195, 0.26);
}

/* Headline */
.hero__title {
  max-width: 18ch;
  margin-top: var(--space-5);
  margin-inline: auto;
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.016em;
  text-wrap: balance;
}

/* Destaque com gradiente verde refinado */
.hero__title em {
  font-style: normal;
  background: linear-gradient(
    104deg,
    #244842 0%,
    #315c55 34%,
    #47837a 68%,
    #5d9c90 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--green); /* fallback */
}

/* Subtítulo */
.hero__lead {
  max-width: 600px;
  margin-top: var(--space-5);
  margin-inline: auto;
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--ink-2);
}

/* Destaques da subheadline: cor profunda + traço em gradiente por baixo.
   Usa box-decoration-break para o traço acompanhar quebras de linha. */
.hero__lead b {
  position: relative;
  font-weight: 600;
  color: var(--green-dark);
  background-image: linear-gradient(
    90deg,
    rgba(169, 206, 195, 0.55) 0%,
    rgba(169, 206, 195, 0.85) 22%,
    rgba(111, 159, 181, 0.55) 62%,
    rgba(169, 206, 195, 0.30) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 0.34em;
  background-position: 0 88%;
  padding-inline: 0.1em;
  margin-inline: -0.1em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 260ms var(--ease);
}

/* Bloco de ação */
.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
}

.hero__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--ink-3);
}

.hero__note svg { flex-shrink: 0; color: var(--green); }

/* ---------- Mockup do produto (imagem real) ---------- */
.hero__visual {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--space-4), 3vw, var(--space-5));
}

/* Instância da coluna direita: só aparece no desktop */
.hero__visual--side { display: none; }

.hero__img {
  width: 100%;
  max-width: clamp(340px, 56vw, 580px);
  height: auto;
  /* Sombra que assenta o mockup recortado no fundo */
  filter: drop-shadow(0 18px 36px rgba(36, 72, 66, 0.20));
}

/* --------------------------------------------------------------------------
   8. ONDA DE TRANSIÇÃO (base do hero)
   Ancorada na base do hero e preenchida com a cor do bloco seguinte
   (#FFFDFC): a seção de baixo "sobe" para dentro do hero — nunca há
   faixa de cor solta nem linha de emenda.
   -------------------------------------------------------------------------- */
.hero__wave {
  position: absolute;
  left: -0.5%;
  right: -0.5%;
  bottom: -1px; /* cobre qualquer hairline de arredondamento */
  height: clamp(44px, 6.5vw, 92px);
  pointer-events: none;
}

.hero__wave svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Sombra suave ao longo da crista: dá profundidade de papel sobreposto */
  filter: drop-shadow(0 -10px 18px rgba(36, 72, 66, 0.05));
}

/* --------------------------------------------------------------------------
   9. CABEÇALHO DE SEÇÃO
   -------------------------------------------------------------------------- */
.section-head {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

/* Respiro padrão entre eyebrow e headline em qualquer seção */
.section-head .eyebrow {
  margin-bottom: clamp(var(--space-5), 3vw, var(--space-6));
}

.section-head__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Destaque de headline de seção: mesmo gradiente verde do hero */
.section-head__title em {
  font-style: normal;
  font-weight: 600;
  background: linear-gradient(104deg, #244842 0%, #315c55 34%, #47837a 68%, #5d9c90 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--green); /* fallback */
}

.section-head__lead {
  max-width: 58ch;
  margin-top: var(--space-4);
  margin-inline: auto;
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   10. BLOCO 02 — AMOSTRA DOS RECURSOS
   -------------------------------------------------------------------------- */
.preview {
  position: relative;
  padding-block: var(--section-y) calc(var(--section-y) + clamp(36px, 5vw, 64px));
  background:
    radial-gradient(58% 44% at 88% 34%, rgba(111, 159, 181, 0.09) 0%, transparent 66%),
    radial-gradient(50% 40% at 4% 78%, rgba(169, 206, 195, 0.13) 0%, transparent 68%),
    var(--white-warm);
  overflow: hidden;
}

/* Onda na base do preview: preenchida com o creme do bloco seguinte */
.preview__wave {
  position: absolute;
  left: -0.5%;
  right: -0.5%;
  bottom: -1px;
  height: clamp(40px, 6vw, 84px);
  pointer-events: none;
}

.preview__wave svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 -10px 18px rgba(36, 72, 66, 0.045));
}

/* ---------- Marquee contínuo ---------- */
.marquee {
  margin-top: clamp(var(--space-7), 5vw, var(--space-8));
}

.marquee__viewport {
  overflow: hidden;
  padding-block: var(--space-2) var(--space-5);
  /* Esmaece nas bordas: o loop nunca "começa" nem "termina" visivelmente */
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.marquee__track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  will-change: transform;
}

.marquee__track.is-running {
  animation: marquee var(--marquee-duration, 40s) linear infinite;
}

/* Pausa no hover para a visitante examinar um recurso */
.marquee:hover .marquee__track.is-running,
.marquee__track.is-running:focus-within {
  animation-play-state: paused;
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Slides paisagem (páginas reais ~1491×1055) */
.marquee__slide {
  flex: 0 0 auto;
  width: clamp(320px, 34vw, 460px);
}

/* ---------- Página do recurso (imagem real) ---------- */
.rcard__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1491 / 1055;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  box-shadow:
    0 2px 6px rgba(36, 72, 66, 0.05),
    0 14px 34px rgba(36, 72, 66, 0.10);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.marquee__slide:hover .rcard__img {
  transform: translateY(-4px);
  box-shadow:
    0 3px 8px rgba(36, 72, 66, 0.06),
    0 22px 46px rgba(36, 72, 66, 0.14);
}

/* Ação do bloco */
.preview__action {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--space-6), 4.5vw, var(--space-7));
}

/* --------------------------------------------------------------------------
   11. BLOCO 03 — CENAS DE SESSÃO TRAVADA
   Glass real: cards translúcidos com blur sobre washes de cor da paleta.
   O card 05 é o clímax — verde profundo, editorial, fecho da narrativa.
   -------------------------------------------------------------------------- */
.pain {
  position: relative;
  padding-block: var(--section-y) calc(var(--section-y) + clamp(36px, 5vw, 64px));
  background:
    /* washes de apoio: coral (dor) + lilás, atrás dos cards para o glass ter
       o que desfocar */
    radial-gradient(52% 38% at 8% 26%, rgba(233, 149, 127, 0.15) 0%, transparent 64%),
    radial-gradient(46% 36% at 94% 46%, rgba(184, 169, 209, 0.14) 0%, transparent 66%),
    radial-gradient(44% 32% at 22% 88%, rgba(169, 206, 195, 0.16) 0%, transparent 64%),
    var(--cream);
  overflow: hidden;
}

.pain__grid {
  display: grid;
  gap: var(--space-5);
  max-width: 1020px;
  margin-inline: auto;
  margin-top: clamp(var(--space-7), 5vw, var(--space-8));
}

/* ---------- Card glass ---------- */
.pain-card {
  /* Cada card recebe um tom da paleta via nth-child (triplet RGB) */
  --tone: 49, 92, 85;
  --icon-ink: var(--green);

  position: relative;
  padding: clamp(28px, 3.6vw, 40px);
  background:
    /* mancha verde difusa no canto superior direito (assinatura dos cards) */
    radial-gradient(44% 40% at 100% 0%, rgba(49, 92, 85, 0.10) 0%, transparent 62%),
    linear-gradient(160deg, #ffffff 0%, #fbfaf6 50%, #f1f2e9 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(36, 72, 66, 0.04),
    0 16px 40px rgba(36, 72, 66, 0.08);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.pain-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(36, 72, 66, 0.05),
    0 22px 48px rgba(36, 72, 66, 0.11);
}

.pain__grid .pain-card:nth-child(1) { --tone: 111, 159, 181; --icon-ink: #3d6b83; }
.pain__grid .pain-card:nth-child(2) { --tone: 233, 149, 127; --icon-ink: #a8583f; }
.pain__grid .pain-card:nth-child(3) { --tone: 242, 200, 91;  --icon-ink: #9a7514; }
.pain__grid .pain-card:nth-child(4) { --tone: 184, 169, 209; --icon-ink: #716097; }
.pain__grid .pain-card:nth-child(5) { --tone: 169, 206, 195; --icon-ink: var(--green); }

/* Chip de ícone: vidro tingido no tom do card */
.pain-card__icon {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  color: var(--icon-ink);
  background: linear-gradient(
    150deg,
    rgba(var(--tone), 0.26) 0%,
    rgba(var(--tone), 0.10) 100%
  );
  border: 1px solid rgba(var(--tone), 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 2px 6px rgba(var(--tone), 0.14);
}

.pain-card__title {
  max-width: 26ch;
  margin-top: var(--space-5);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--green-dark);
}

.pain-card__text {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 56ch;
}

.pain-card__text + .pain-card__text { margin-top: var(--space-3); }

/* ---------- Card 05: mesmo padrão, largura total, fecho destacado ---------- */
.pain-card--final .pain-card__title { max-width: 34ch; }
.pain-card--final .pain-card__text { max-width: 62ch; }

.pain-card--final em {
  font-style: normal;
  font-weight: 600;
  color: var(--green-dark);
  background-image: linear-gradient(
    90deg,
    rgba(242, 200, 91, 0.42) 0%,
    rgba(242, 200, 91, 0.68) 50%,
    rgba(242, 200, 91, 0.28) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 0.34em;
  background-position: 0 90%;
  padding-inline: 0.08em;
  margin-inline: -0.08em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.pain__action {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--space-7), 5vw, var(--space-8));
}

/* Desktop: 2×2 + card final em largura total */
@media (min-width: 768px) {
  .pain__grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .pain-card--final { grid-column: 1 / -1; }
}

/* Onda na base do bloco 03 */
.pain__wave {
  position: absolute;
  left: -0.5%;
  right: -0.5%;
  bottom: -1px;
  height: clamp(40px, 6vw, 84px);
  pointer-events: none;
}

.pain__wave svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 -10px 18px rgba(36, 72, 66, 0.045));
}

/* --------------------------------------------------------------------------
   12. BLOCO 04 — O QUE MUDA
   A virada: paleta de solução (verdes e azul), cards claros e ordenados.
   Contraste narrativo com o bloco da dor.
   -------------------------------------------------------------------------- */
.benefits {
  position: relative;
  padding-block: var(--section-y) calc(var(--section-y) + clamp(36px, 5vw, 64px));
  background:
    radial-gradient(52% 40% at 90% 10%, rgba(169, 206, 195, 0.17) 0%, transparent 62%),
    radial-gradient(46% 36% at 6% 72%, rgba(111, 159, 181, 0.11) 0%, transparent 64%),
    var(--white-warm);
  overflow: hidden;
}


.benefits__grid {
  display: grid;
  gap: var(--space-5);
  max-width: 1100px;
  margin-inline: auto;
  margin-top: clamp(var(--space-7), 5vw, var(--space-8));
}

/* ---------- Card de benefício ---------- */
.benefit-card {
  /* Tons de solução em rotação: verde, azul, verde suave */
  --tone: 49, 92, 85;
  --icon-ink: var(--green);

  position: relative;
  padding: clamp(28px, 3.2vw, 36px);
  background:
    radial-gradient(44% 40% at 100% 0%, rgba(49, 92, 85, 0.10) 0%, transparent 62%),
    linear-gradient(160deg, #ffffff 0%, #fbfaf6 50%, #f1f2e9 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(36, 72, 66, 0.04),
    0 16px 40px rgba(36, 72, 66, 0.08);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.benefit-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--tone), 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(36, 72, 66, 0.05),
    0 22px 48px rgba(36, 72, 66, 0.11);
}

.benefits__grid .benefit-card:nth-child(3n + 1) { --tone: 49, 92, 85;    --icon-ink: var(--green); }
.benefits__grid .benefit-card:nth-child(3n + 2) { --tone: 111, 159, 181; --icon-ink: #3d6b83; }
.benefits__grid .benefit-card:nth-child(3n)     { --tone: 169, 206, 195; --icon-ink: #3e6e63; }

.benefit-card__icon {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  color: var(--icon-ink);
  background: linear-gradient(
    150deg,
    rgba(var(--tone), 0.20) 0%,
    rgba(var(--tone), 0.08) 100%
  );
  border: 1px solid rgba(var(--tone), 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 2px 6px rgba(var(--tone), 0.10);
}

.benefit-card__title {
  max-width: 24ch;
  margin-top: var(--space-5);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--green-dark);
}

.benefit-card__text {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  line-height: 1.72;
  color: var(--ink-2);
}

.benefits__action {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--space-7), 5vw, var(--space-8));
}

/* Tablet: 2 colunas · Desktop: 3 colunas */
@media (min-width: 768px) {
  .benefits__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .benefits__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Onda na base do bloco 04 */
.benefits__wave {
  position: absolute;
  left: -0.5%;
  right: -0.5%;
  bottom: -1px;
  height: clamp(40px, 6vw, 84px);
  pointer-events: none;
}

.benefits__wave svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 -10px 18px rgba(36, 72, 66, 0.045));
}

/* --------------------------------------------------------------------------
   13. BLOCO 05 — O KIT (conteúdo completo)
   Painel editorial dividido: categorias com código de cor à esquerda,
   extras num painel verde profundo à direita.
   -------------------------------------------------------------------------- */
.kit {
  position: relative;
  padding-block: var(--section-y) calc(var(--section-y) + clamp(36px, 5vw, 64px));
  background:
    radial-gradient(50% 38% at 6% 18%, rgba(169, 206, 195, 0.15) 0%, transparent 64%),
    radial-gradient(46% 34% at 96% 78%, rgba(184, 169, 209, 0.11) 0%, transparent 66%),
    var(--cream);
  overflow: hidden;
}


/* Intro serifada em itálico: quebra editorial de ritmo tipográfico */
.kit__intro {
  max-width: 44ch;
  margin-inline: auto;
  margin-top: clamp(var(--space-5), 3.5vw, var(--space-6));
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1875rem, 1.06rem + 0.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--ink);
}

.kit__intro strong {
  font-weight: 600;
  color: var(--green);
}

/* ---------- Grade de cards de categoria ---------- */
.kit__grid {
  display: grid;
  gap: var(--space-5);
  max-width: 1100px;
  margin-inline: auto;
  margin-top: clamp(var(--space-6), 4.5vw, var(--space-7));
}

.kit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.2vw, 36px);
  background:
    radial-gradient(44% 40% at 100% 0%, rgba(49, 92, 85, 0.10) 0%, transparent 62%),
    linear-gradient(160deg, #ffffff 0%, #fbfaf6 50%, #f1f2e9 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(36, 72, 66, 0.04),
    0 16px 40px rgba(36, 72, 66, 0.08);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

/* Filete superior no tom da categoria: a "aba" do fichário */
.kit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    rgba(var(--tone), 0.85) 0%,
    rgba(var(--tone), 0.30) 100%
  );
}

.kit-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--tone), 0.24);
  box-shadow: var(--sh-2);
}

.kit-card__icon {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  color: var(--icon-ink);
  background: linear-gradient(
    150deg,
    rgba(var(--tone), 0.20) 0%,
    rgba(var(--tone), 0.08) 100%
  );
  border: 1px solid rgba(var(--tone), 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 2px 6px rgba(var(--tone), 0.10);
}

.kit-card__title {
  margin-top: var(--space-5);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--green-dark);
}

.kit-card__text {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.68;
  color: var(--ink-2);
}

/* Mini-mockup: sempre ancorado à base do card, alinha a fileira */
.kit-card__mock {
  width: 100%;
  max-width: 250px;
  margin-top: auto;
  padding-top: var(--space-5);
  margin-inline: auto;
}

/* Variante imagem real: no TOPO do card, grande, com leve sangria
   sobre o padding (como material saindo da moldura) */
.kit-card__mock--img {
  order: -1;
  width: calc(100% + var(--space-5));
  max-width: none;
  height: auto;
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-5);
  padding-top: 0;
  filter: drop-shadow(0 16px 30px rgba(36, 72, 66, 0.16));
  transition: transform var(--dur) var(--ease);
}

.kit-card:hover .kit-card__mock--img {
  transform: translateY(-3px) scale(1.02);
}

/* Tablet: 2 colunas, 5º card em largura total */
@media (min-width: 768px) {
  .kit__grid { grid-template-columns: 1fr 1fr; }
  .kit-card:nth-child(5) { grid-column: 1 / -1; }
  .kit-card:nth-child(5) .kit-card__text { max-width: 56ch; }
}

/* Desktop: 3 + 2 centralizados (quincunce editorial) */
@media (min-width: 1024px) {
  .kit__grid { grid-template-columns: repeat(6, 1fr); }
  .kit-card { grid-column: span 2; }
  .kit-card:nth-child(4) { grid-column: 2 / 4; }
  .kit-card:nth-child(5) { grid-column: 4 / 6; }
  .kit-card:nth-child(5) .kit-card__text { max-width: none; }
}

/* ---------- Divisória dos bônus ---------- */
.kit__divide {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 3vw, var(--space-5));
  max-width: 820px;
  margin-inline: auto;
  margin-top: clamp(var(--space-8), 9vw, var(--space-10));
}

.kit__divide-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(49, 92, 85, 0.14) 45%,
    rgba(93, 156, 144, 0.65) 100%
  );
}

.kit__divide-line--end {
  background: linear-gradient(
    270deg,
    transparent 0%,
    rgba(49, 92, 85, 0.14) 45%,
    rgba(93, 156, 144, 0.65) 100%
  );
}

.kit__divide-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--r-xs);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  background: linear-gradient(
    150deg,
    rgba(169, 206, 195, 0.26) 0%,
    rgba(169, 206, 195, 0.08) 100%
  );
  border: 1px solid rgba(169, 206, 195, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 2px 8px rgba(49, 92, 85, 0.10);
}

/* ---------- Cabeçalho dos bônus ---------- */
.kit__bonus-head {
  margin-top: clamp(var(--space-6), 4.5vw, var(--space-7));
}

.section-head__title--sub {
  font-size: clamp(1.5rem, 1.22rem + 1.35vw, 2.125rem);
}

/* ---------- Cards de bônus ---------- */
.bonus__grid {
  display: grid;
  gap: var(--space-5);
  max-width: 1000px;
  margin-inline: auto;
  margin-top: clamp(var(--space-6), 4.5vw, var(--space-7));
}

.bonus-card {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* a sangria do mockup respeita os cantos arredondados */
  padding: clamp(26px, 3vw, 34px);
  background:
    radial-gradient(44% 40% at 100% 0%, rgba(49, 92, 85, 0.10) 0%, transparent 62%),
    linear-gradient(160deg, #ffffff 0%, #fbfaf6 50%, #f1f2e9 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(36, 72, 66, 0.04),
    0 16px 40px rgba(36, 72, 66, 0.08);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.bonus-card:hover {
  transform: translateY(-3px);
  border-color: rgba(49, 92, 85, 0.26);
  box-shadow: var(--sh-2);
}

/* Mockup no topo do card, com sangria sobre o padding */
.bonus-card__mock {
  width: calc(100% + var(--space-5));
  height: auto;
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-5);
  filter: drop-shadow(0 16px 30px rgba(36, 72, 66, 0.16));
  transition: transform var(--dur) var(--ease);
}

.bonus-card:hover .bonus-card__mock {
  transform: translateY(-3px) scale(1.02);
}

.bonus-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.bonus-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--r-xs);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: rgba(169, 206, 195, 0.22);
  border: 1px solid rgba(169, 206, 195, 0.55);
}

.bonus-card__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(
    150deg,
    rgba(169, 206, 195, 0.24) 0%,
    rgba(169, 206, 195, 0.07) 100%
  );
  border: 1px solid rgba(169, 206, 195, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.bonus-card__title {
  margin-top: var(--space-5);
  font-family: var(--font-serif);
  font-size: clamp(1.1875rem, 1.12rem + 0.35vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--green-dark);
}

.bonus-card__text {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.68;
  color: var(--ink-2);
}

/* Rodapé ancorado: preços alinham entre cards da mesma linha */
.bonus-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-5);
}

/* Preço riscado: cinza discreto, mesmo tratamento dos planos */
.bonus-card__price {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1.3px;
  text-decoration-color: rgba(138, 149, 145, 0.85);
}

.bonus-card__free {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: var(--r-xs);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(150deg, #3a6a62 0%, var(--green-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 6px rgba(49, 92, 85, 0.22);
}

.kit__action {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--space-7), 5vw, var(--space-8));
}

/* Bônus: 2 colunas a partir do tablet */
@media (min-width: 768px) {
  .bonus__grid { grid-template-columns: 1fr 1fr; }
}

/* Onda na base do bloco 05 */
.kit__wave {
  position: absolute;
  left: -0.5%;
  right: -0.5%;
  bottom: -1px;
  height: clamp(40px, 6vw, 84px);
  pointer-events: none;
}

.kit__wave svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 -10px 18px rgba(36, 72, 66, 0.045));
}

/* --------------------------------------------------------------------------
   14. BLOCO 06 — RELATOS (prova social)
   Parede masonry de molduras; os esqueletos em CSS são temporários e
   serão substituídos pelos prints reais (ver comentários no HTML).
   -------------------------------------------------------------------------- */
.proof {
  position: relative;
  padding-block: var(--section-y);
  background:
    radial-gradient(50% 40% at 92% 8%, rgba(169, 206, 195, 0.14) 0%, transparent 64%),
    radial-gradient(44% 36% at 4% 86%, rgba(111, 159, 181, 0.10) 0%, transparent 66%),
    var(--white-warm);
  overflow: hidden;
}

/* ---------- Barra de confiança ---------- */
/* Badge glass: translúcido com blur, aresta clara e véu verde sutil */
.proof__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  margin-top: clamp(var(--space-6), 4vw, var(--space-7));
  padding: 13px clamp(var(--space-5), 3.4vw, var(--space-6));
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(169, 206, 195, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(169, 206, 195, 0.18),
    0 2px 6px rgba(36, 72, 66, 0.05),
    0 14px 34px rgba(36, 72, 66, 0.09);
}

.proof__stars {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--green);
}

.proof__bar-sep {
  width: 1px;
  height: 26px;
  background: var(--line);
}

.proof__avatars { display: flex; }

.proof__avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(36, 72, 66, 0.14);
}

.proof__avatars img + img { margin-left: -9px; }

.proof__bar-text {
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--ink-2);
}

.proof__bar-text strong {
  font-weight: 700;
  color: var(--ink);
}

/* Masonry por colunas CSS: alturas variadas sem JavaScript */
.proof__wall {
  max-width: 1080px;
  margin-inline: auto;
  margin-top: clamp(var(--space-7), 5vw, var(--space-8));
  columns: 1;
  column-gap: var(--space-5);
}

/* Moldura com passe-partout: o print respira dentro do cartão */
.proof-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: var(--space-5);
  padding: clamp(10px, 1.5vw, 14px);
  background: linear-gradient(170deg, #ffffff 0%, #fdfcf8 100%);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(36, 72, 66, 0.04),
    0 14px 34px rgba(36, 72, 66, 0.08);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.proof-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 8px rgba(36, 72, 66, 0.05),
    0 20px 44px rgba(36, 72, 66, 0.11);
}

.proof-card__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
  border: 1px solid rgba(40, 51, 48, 0.05);
}

/* Masonry: 2 colunas no tablet, 3 no desktop */
@media (min-width: 640px) {
  .proof__wall { columns: 2; }
}

@media (min-width: 1024px) {
  .proof__wall { columns: 3; }
}

.proof__action {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--space-6), 4.5vw, var(--space-7));
}

/* Onda na base do bloco 06 */
.proof {
  padding-bottom: calc(var(--section-y) + clamp(36px, 5vw, 64px));
}

.proof__wave {
  position: absolute;
  left: -0.5%;
  right: -0.5%;
  bottom: -1px;
  height: clamp(40px, 6vw, 84px);
  pointer-events: none;
}

.proof__wave svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 -10px 18px rgba(36, 72, 66, 0.045));
}

/* --------------------------------------------------------------------------
   15. BLOCO 07 — OFERTA
   Dois planos: Básico claro, Completo em verde profundo (destaque).
   Contador discreto e refinado, sem vermelho de urgência.
   -------------------------------------------------------------------------- */
.offer {
  position: relative;
  padding-block: var(--section-y);
  background:
    radial-gradient(54% 42% at 10% 12%, rgba(169, 206, 195, 0.18) 0%, transparent 62%),
    radial-gradient(48% 38% at 94% 72%, rgba(111, 159, 181, 0.11) 0%, transparent 64%),
    var(--cream);
  overflow: hidden;
}

/* ---------- Contador ---------- */
.offer__timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: fit-content;
  margin-inline: auto;
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-7));
  padding: 10px 18px;
  color: var(--green);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.6) 100%);
  border: 1px solid rgba(169, 206, 195, 0.55);
  border-radius: var(--r-xs);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 10px rgba(36, 72, 66, 0.07);
}

.offer__timer-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.offer__timer-digits {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.offer__timer-digits b {
  display: grid;
  place-items: center;
  min-width: 34px;
  padding: 5px 7px;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(155deg, #35655d 0%, var(--green-dark) 100%);
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 5px rgba(36, 72, 66, 0.2);
}

.offer__timer-digits i {
  font-style: normal;
  font-weight: 700;
  color: var(--green);
}

/* ---------- Grade de planos ---------- */
.offer__grid {
  display: grid;
  /* minmax(0,1fr): impede que conteúdo nowrap dilate a coluna e
     empurre os cards para fora do container no mobile */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  max-width: 940px;
  margin-inline: auto;
  margin-top: clamp(var(--space-7), 5vw, var(--space-8));
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 3.8vw, 48px);
  /* Borda em gradiente: fundos em padding-box + camada final em border-box */
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(169, 206, 195, 0.16) 0%, transparent 48%) padding-box,
    radial-gradient(90% 70% at 0% 100%, rgba(111, 159, 181, 0.09) 0%, transparent 52%) padding-box,
    linear-gradient(170deg, #ffffff 0%, #fcfaf5 100%) padding-box,
    linear-gradient(
      165deg,
      rgba(169, 206, 195, 0.75) 0%,
      rgba(213, 205, 186, 0.35) 45%,
      rgba(111, 159, 181, 0.5) 100%
    ) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 8px rgba(36, 72, 66, 0.05),
    0 20px 48px rgba(36, 72, 66, 0.09);
}

.plan__name {
  font-family: var(--font-serif);
  font-size: clamp(1.4375rem, 1.3rem + 0.7vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--green-dark);
  text-align: center;
}

.plan__desc {
  margin-top: var(--space-2);
  margin-inline: auto;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 34ch;
  text-align: center;
}

/* ---------- Preço: centrado, delimitado por filetes ---------- */
.plan__pricing {
  margin-top: var(--space-5);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}

/* Preço anterior: cinza, discreto, riscado */
.plan__old {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1.3px;
  text-decoration-color: rgba(138, 149, 145, 0.85);
}

/* "por apenas": manuscrito entre dois filetes */
.plan__tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--ink-2);
}

.plan__tagline::before,
.plan__tagline::after {
  content: "";
  width: 26px;
  height: 1px;
  background: rgba(40, 51, 48, 0.22);
}

/* Preço: R$ e centavos ancorados no topo, número cheio no centro,
   gradiente aplicado ao conjunto via background-clip */
.plan__price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-4);
  font-family: var(--font-title);
  font-size: clamp(4.75rem, 3.5rem + 5.6vw, 6.75rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.02em;
  background: linear-gradient(168deg, #1f3e39 0%, #2e574f 42%, #4d887d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--green-dark); /* fallback */
}

.plan__price span {
  font-size: 0.3em;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 0.16em;
}

.plan__price i {
  font-style: normal;
  font-size: 0.3em;
  font-weight: 700;
  margin-top: 0.16em;
}

.plan__once {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--ink-3);
}

/* ---------- Lista ---------- */
.plan__label {
  margin-top: var(--space-5);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}

.plan__list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--ink);
}

.plan__list svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
}

.plan__list b { font-weight: 700; }

/* Itens não incluídos (ancoragem com o Completo): apagados e riscados */
.plan__list .is-off {
  color: var(--ink-3);
  opacity: 0.85;
}

.plan__list .is-off s {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(138, 149, 145, 0.7);
}

/* ---------- CTAs dos planos ---------- */
.plan__cta {
  width: 100%;
  margin-top: var(--space-6);
}

.btn--outline {
  background: transparent;
  color: var(--green);
  border: 1.5px solid rgba(49, 92, 85, 0.45);
  box-shadow: none;
}

.btn--outline:hover {
  background: rgba(169, 206, 195, 0.14);
  border-color: var(--green);
  transform: translateY(-1px);
}

.btn--light {
  background: linear-gradient(180deg, #ffffff 0%, #f4f1e9 100%);
  color: var(--green-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.btn--light:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 8px rgba(0, 0, 0, 0.16),
    0 14px 30px rgba(0, 0, 0, 0.22);
}

.plan__note {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  text-align: center;
  color: var(--ink-3);
}

.plan__note--light { color: rgba(255, 255, 255, 0.62); }

/* ---------- Plano Completo (destaque) ---------- */
.plan--featured {
  border: 1px solid transparent;
  background:
    radial-gradient(64% 50% at 88% 0%, rgba(169, 206, 195, 0.22) 0%, transparent 58%) padding-box,
    radial-gradient(46% 42% at 4% 100%, rgba(111, 159, 181, 0.18) 0%, transparent 60%) padding-box,
    radial-gradient(80% 40% at 50% 118%, rgba(36, 72, 66, 0.55) 0%, transparent 70%) padding-box,
    linear-gradient(160deg, #386b63 0%, var(--green) 40%, #1f403a 100%) padding-box,
    /* aresta luminosa: verde-suave no topo dissolvendo para azul na base */
    linear-gradient(
      165deg,
      rgba(169, 206, 195, 0.8) 0%,
      rgba(255, 255, 255, 0.14) 42%,
      rgba(111, 159, 181, 0.55) 100%
    ) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 14px rgba(36, 72, 66, 0.18),
    0 32px 68px rgba(36, 72, 66, 0.30);
}

/* Brilho diagonal sutil percorrendo o painel escuro */
.plan--featured::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255, 255, 255, 0.055) 46%,
    transparent 62%
  );
  pointer-events: none;
}

.plan--featured .plan__name { color: #fff; }
.plan--featured .plan__desc { color: rgba(255, 255, 255, 0.78); }

.plan--featured .plan__pricing {
  border-color: rgba(255, 255, 255, 0.13);
}

/* Pill "+ de 200 páginas": vidro com aresta luminosa em gradiente */
.plan__pages {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-bottom: var(--space-4);
  padding: 8px 17px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: clamp(0.6875rem, 3.1vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  /* vidro em padding-box + fio de luz em border-box */
  border: 1px solid transparent;
  background:
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.07) 100%
    ) padding-box,
    linear-gradient(
      150deg,
      rgba(233, 244, 240, 0.75) 0%,
      rgba(255, 255, 255, 0.16) 45%,
      rgba(169, 206, 195, 0.55) 100%
    ) border-box;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 3px 12px rgba(0, 0, 0, 0.16);
}

.plan__pages svg {
  flex-shrink: 0;
  color: var(--green-soft);
}

/* Telas mínimas: compacta o pill para a linha única continuar dentro */
@media (max-width: 359px) {
  .plan__pages {
    font-size: 0.625rem;
    padding: 6px 12px;
    gap: 6px;
  }
}

/* Mockup do plano: entre o topo da área de preço e o valor riscado.
   Ocupa toda a largura interna do card, com leve sangria lateral */
.plan__mock {
  display: block;
  width: calc(100% + var(--space-5));
  max-width: none;
  height: auto;
  margin: var(--space-2) calc(var(--space-3) * -1) var(--space-5);
  /* card claro: sombra verde suave no contorno */
  filter: drop-shadow(0 18px 32px rgba(36, 72, 66, 0.18));
  transition: transform var(--dur) var(--ease);
}

/* painel escuro: sombra funda + halo verde-suave */
.plan--featured .plan__mock {
  filter:
    drop-shadow(0 20px 34px rgba(0, 0, 0, 0.38))
    drop-shadow(0 2px 10px rgba(169, 206, 195, 0.14));
}

.plan:hover .plan__mock {
  transform: translateY(-3px) scale(1.015);
}

/* Selo de economia */
.plan__save {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-3);
  padding: 6px 14px;
  border-radius: var(--r-xs);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #dff0ea;
  background: rgba(169, 206, 195, 0.15);
  border: 1px solid rgba(169, 206, 195, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.plan--featured .plan__old {
  color: rgba(255, 255, 255, 0.55);
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.plan--featured .plan__tagline {
  color: rgba(255, 255, 255, 0.8);
}

.plan--featured .plan__tagline::before,
.plan--featured .plan__tagline::after {
  background: rgba(255, 255, 255, 0.28);
}

/* No painel escuro o gradiente inverte: branco luminoso → verde-suave */
.plan--featured .plan__price {
  background: linear-gradient(168deg, #ffffff 0%, #f0f8f4 44%, #b6d7cb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff; /* fallback */
}
.plan--featured .plan__once { color: rgba(255, 255, 255, 0.62); }
.plan--featured .plan__label { color: var(--green-soft); }
.plan--featured .plan__list li { color: rgba(255, 255, 255, 0.92); }

/* Selo: glass sobre a borda superior do card */
.plan__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.68) 100%
  );
  border: 1px solid rgba(169, 206, 195, 0.65);
  border-radius: 9px;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(169, 206, 195, 0.28),
    0 1px 3px rgba(36, 72, 66, 0.10),
    0 6px 18px rgba(36, 72, 66, 0.20);
  white-space: nowrap;
}

/* Desktop: lado a lado */
@media (min-width: 880px) {
  .offer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); }

  /* Pill maior só onde há largura para a linha única */
  .plan__pages {
    font-size: 0.9375rem;
    padding: 10px 20px;
    gap: 9px;
  }
}

/* Onda na base da oferta */
.offer {
  padding-bottom: calc(var(--section-y) + clamp(36px, 5vw, 64px));
}

.offer__wave {
  position: absolute;
  left: -0.5%;
  right: -0.5%;
  bottom: -1px;
  height: clamp(40px, 6vw, 84px);
  pointer-events: none;
}

.offer__wave svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 -10px 18px rgba(36, 72, 66, 0.045));
}

/* --------------------------------------------------------------------------
   16. BLOCO 08 — GARANTIA
   Selo circular com anel de texto girando contínuo (pausa sob
   prefers-reduced-motion via regra global).
   -------------------------------------------------------------------------- */
.guarantee {
  position: relative;
  padding-block: var(--section-y);
  background:
    radial-gradient(50% 42% at 8% 20%, rgba(169, 206, 195, 0.16) 0%, transparent 62%),
    radial-gradient(44% 36% at 94% 82%, rgba(111, 159, 181, 0.10) 0%, transparent 64%),
    var(--white-warm);
  overflow: hidden;
}

.guarantee__grid {
  display: grid;
  justify-items: center;
  gap: clamp(var(--space-6), 5vw, var(--space-8));
  max-width: 880px;
  margin-inline: auto;
}

/* ---------- Selo ---------- */
.guarantee__seal {
  position: relative;
  width: clamp(190px, 24vw, 230px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

/* Círculo tracejado entre o anel e o núcleo */
.guarantee__seal::before {
  content: "";
  position: absolute;
  inset: 21%;
  border: 1.5px dashed rgba(49, 92, 85, 0.30);
  border-radius: 50%;
}

/* Anel de texto: gira contínuo */
.guarantee__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: seal-spin 26s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

@keyframes seal-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.guarantee__ring-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--green);
}

/* Núcleo: escudo sobre gradiente verde */
.guarantee__core {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(70% 55% at 30% 22%, rgba(255, 255, 255, 0.20) 0%, transparent 55%),
    linear-gradient(155deg, #3a6a62 0%, var(--green) 46%, var(--green-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 10px rgba(36, 72, 66, 0.16),
    0 16px 34px rgba(36, 72, 66, 0.22);
}

.guarantee__core svg { width: 46%; height: auto; }

/* ---------- Copy ---------- */
.guarantee__copy {
  text-align: center;
  max-width: 560px;
}

.guarantee__copy .eyebrow { margin-bottom: var(--space-5); }

.guarantee__text {
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--ink-2);
}

/* Desktop: selo à esquerda, texto à esquerda-alinhado à direita */
@media (min-width: 880px) {
  .guarantee__grid {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(var(--space-8), 7vw, 96px);
  }

  .guarantee__copy { text-align: left; }
  .guarantee__text { max-width: 50ch; }
}

/* Onda na base da garantia */
.guarantee {
  padding-bottom: calc(var(--section-y) + clamp(36px, 5vw, 64px));
}

.guarantee__wave {
  position: absolute;
  left: -0.5%;
  right: -0.5%;
  bottom: -1px;
  height: clamp(40px, 6vw, 84px);
  pointer-events: none;
}

.guarantee__wave svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 -10px 18px rgba(36, 72, 66, 0.045));
}

/* --------------------------------------------------------------------------
   17. BLOCO 09 — PERGUNTAS FREQUENTES
   Acordeão animado por grid-template-rows (suave e sem medir alturas).
   -------------------------------------------------------------------------- */
.faq {
  position: relative;
  /* z-index acima da seção seguinte: a onda transborda 2px por cima do
     verde escuro e mata a fresta de sub-pixel (a "linha" na emenda) */
  z-index: 2;
  padding-block: var(--section-y);
  background:
    radial-gradient(48% 38% at 92% 12%, rgba(169, 206, 195, 0.13) 0%, transparent 64%),
    radial-gradient(42% 34% at 6% 88%, rgba(184, 169, 209, 0.09) 0%, transparent 66%),
    var(--cream);
}

.faq__list {
  display: grid;
  gap: var(--space-3);
  max-width: 760px;
  margin-inline: auto;
  margin-top: clamp(var(--space-6), 4.5vw, var(--space-7));
}

.faq-item {
  background: linear-gradient(170deg, #ffffff 0%, #fdfcf8 100%);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.faq-item:hover { border-color: rgba(49, 92, 85, 0.18); }

.faq-item.is-open {
  border-color: rgba(169, 206, 195, 0.7);
  box-shadow: var(--sh-2);
}

.faq-item__h { margin: 0; }

/* ---------- Pergunta ---------- */
.faq-item__q {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 44px;
  padding: clamp(var(--space-4), 2.4vw, 22px) clamp(var(--space-4), 3vw, var(--space-6));
  text-align: left;
  cursor: pointer;
}

.faq-item__num {
  flex-shrink: 0;
  font-style: normal;
  font-family: var(--font-title);
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(49, 92, 85, 0.45);
  transition: color var(--dur) var(--ease);
}

.faq-item.is-open .faq-item__num { color: var(--green); }

.faq-item__label {
  flex: 1;
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}

.faq-item.is-open .faq-item__label { color: var(--green-dark); }

.faq-item__chev {
  flex-shrink: 0;
  color: var(--ink-3);
  transition: transform 300ms var(--ease), color var(--dur) var(--ease);
}

.faq-item.is-open .faq-item__chev {
  transform: rotate(180deg);
  color: var(--green);
}

/* ---------- Resposta: animação por grid ---------- */
.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 340ms var(--ease);
}

.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }

.faq-item__inner {
  min-height: 0;
  overflow: hidden;
}

.faq-item__inner p {
  padding: 0 clamp(var(--space-4), 3vw, var(--space-6))
           clamp(var(--space-4), 2.4vw, 22px)
           calc(clamp(var(--space-4), 3vw, var(--space-6)) + 15px + var(--space-4));
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 280ms var(--ease) 60ms, transform 280ms var(--ease) 60ms;
}

.faq-item.is-open .faq-item__inner p {
  opacity: 1;
  transform: none;
}

/* Onda na base do FAQ */
.faq {
  padding-bottom: calc(var(--section-y) + clamp(36px, 5vw, 64px));
}

.faq__wave {
  position: absolute;
  left: -0.5%;
  right: -0.5%;
  bottom: -2px; /* sobreposição extra: emenda claro→escuro não perdoa hairline */
  height: clamp(40px, 6vw, 84px);
  pointer-events: none;
}

.faq__wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   18. BLOCO 10 — CTA FINAL
   Verde profundo com luz zenital: um brilho central descendo do topo,
   dois feixes diagonais discretos e elementos em vidro.
   -------------------------------------------------------------------------- */
.final {
  position: relative;
  isolation: isolate;
  padding-block: clamp(88px, 11vw, 152px);
  /* Topo 100% plano em #35655D: a onda emenda sem costura */
  background:
    radial-gradient(50% 40% at 10% 92%, rgba(111, 159, 181, 0.14) 0%, transparent 64%),
    linear-gradient(175deg, #35655d 0%, var(--green) 36%, #1d3b36 100%);
  overflow: hidden;
}

/* Luz: entra pela direita e clareia o bloco em degradê radial suave.
   Cobre a seção inteira (nenhuma borda interna) e uma máscara dissolve
   a luz nos primeiros ~120px — o topo permanece chapado, a onda emenda
   sem costura e não existe linha de início. */
.final::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    /* núcleo da luz: alto à direita */
    radial-gradient(
      90% 115% at 96% 20%,
      rgba(240, 248, 244, 0.20) 0%,
      rgba(240, 248, 244, 0.09) 40%,
      transparent 68%
    ),
    /* varredura ampla completando o degradê até a esquerda */
    linear-gradient(
      255deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 45%,
      transparent 72%
    );
  mask-image: linear-gradient(180deg, transparent 0, #000 120px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px);
  pointer-events: none;
}

.final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

/* Eyebrow em vidro escuro */
.eyebrow--dark {
  color: #fff;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.06) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 10px rgba(0, 0, 0, 0.14);
}

.eyebrow--dark .eyebrow__dot {
  background: linear-gradient(145deg, #dff0ea, var(--green-soft));
  box-shadow: 0 0 0 3px rgba(169, 206, 195, 0.24);
}

.final__title {
  max-width: 20ch;
  margin-top: var(--space-6);
  font-size: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}

/* Destaque: gradiente luminoso branco → verde-suave */
.final__title em {
  font-style: normal;
  background: linear-gradient(105deg, #ffffff 0%, #eef7f3 45%, #b6d7cb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #dff0ea; /* fallback */
}

.final__lead {
  max-width: 54ch;
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

.final__cta {
  min-height: 60px;
  margin-top: clamp(var(--space-6), 4.5vw, var(--space-7));
  padding-inline: clamp(var(--space-7), 5vw, 64px);
  font-size: 1.0625rem;
  /* halo de vidro ao redor do botão claro */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 6px rgba(255, 255, 255, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.16),
    0 14px 34px rgba(0, 0, 0, 0.24);
}

.final__cta:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 8px rgba(255, 255, 255, 0.11),
    0 3px 8px rgba(0, 0, 0, 0.18),
    0 18px 40px rgba(0, 0, 0, 0.28);
}

.final__note {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}

/* --------------------------------------------------------------------------
   19. RODAPÉ
   Claro: respiro depois do verde do CTA final. Corte reto e limpo.
   -------------------------------------------------------------------------- */
.footer {
  padding-block: clamp(var(--space-7), 6vw, var(--space-9))
                 calc(clamp(var(--space-6), 4vw, var(--space-7)) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, var(--white-warm) 0%, var(--cream) 100%);
  color: var(--ink-2);
}

.footer__top {
  display: grid;
  gap: var(--space-6);
}

.footer__logo {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--green-dark);
}

.footer__desc {
  max-width: 44ch;
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-2);
}

.footer__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-caption);
  font-weight: 500;
}

.footer__nav span { color: rgba(40, 51, 48, 0.25); }

.footer__nav a {
  color: var(--ink-2);
  transition: color var(--dur) var(--ease);
}

.footer__nav a:hover { color: var(--green); }

/* Filete que se dissolve nas pontas */
.footer__rule {
  height: 1px;
  margin-block: clamp(var(--space-6), 4.5vw, var(--space-7));
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(40, 51, 48, 0.12) 18%,
    rgba(40, 51, 48, 0.12) 82%,
    transparent 100%
  );
}

.footer__copy {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--ink-2);
}

.footer__legal {
  display: grid;
  gap: var(--space-3);
  max-width: 880px;
  margin-top: var(--space-4);
}

.footer__legal p {
  font-size: 0.78125rem;
  line-height: 1.7;
  color: var(--ink-3);
}

/* Desktop: marca à esquerda, suporte e links à direita */
@media (min-width: 768px) {
  .footer__top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }

  .footer__side { justify-self: end; text-align: right; }
  .footer__nav { justify-content: flex-end; }
}

/* Mobile: badge do Completo precisa de respiro ao empilhar */
@media (max-width: 879px) {
  .plan--featured { margin-top: var(--space-2); }
}

/* --------------------------------------------------------------------------
   20. ANIMAÇÃO
   -------------------------------------------------------------------------- */
/* Entrada: sobe 20px enquanto surge. A classe é aplicada e removida
   pelo JS (auto-limpeza), então nunca conflita com transições de hover. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
}

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

/* --------------------------------------------------------------------------
   21. RESPONSIVO
   -------------------------------------------------------------------------- */

/* ≥ 1024px — hero em duas colunas: texto à esquerda, mockup à direita */
@media (min-width: 1024px) {
  .hero {
    padding-block: var(--space-9) var(--space-12);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    gap: clamp(var(--space-7), 4vw, var(--space-9));
    align-items: center;
  }

  .hero__copy {
    max-width: none;
    margin-inline: 0;
    text-align: left;
  }

  .hero__title {
    max-width: 16ch;
    margin-inline: 0;
  }

  .hero__lead {
    max-width: 540px;
    margin-inline: 0;
  }

  .hero__actions { justify-content: flex-start; }
  .hero__note { justify-content: flex-start; }

  /* Troca de instância: some a do fluxo, entra a da coluna */
  .hero__visual--inline { display: none; }

  .hero__visual--side {
    display: flex;
    margin-top: 0;
  }

  .hero__visual--side .hero__img {
    max-width: 640px;
    filter: drop-shadow(0 26px 48px rgba(36, 72, 66, 0.22));
  }
}

@media (min-width: 1600px) {
  :root { --container: 1240px; }
}

/* ≤ 767px — mobile */
@media (max-width: 767px) {
  .hero {
    padding-block: var(--space-6) var(--space-10);
  }

  .hero__title {
    max-width: 100%;
    /* balance encolhe as linhas e espreme a coluna no mobile;
       pretty preenche a largura e só evita palavra órfã na última linha */
    text-wrap: pretty;
    font-size: clamp(1.875rem, 8vw, 2.1875rem);
    line-height: 1.18;
    letter-spacing: -0.014em;
  }

  .hero__lead {
    text-wrap: pretty;
    font-size: 1rem;
  }

  .hero__actions {
    margin-top: var(--space-6);
  }

  .hero__actions .btn--primary { width: 100%; }

  /* Microcopy em uma só linha: fonte escala com o viewport (nunca quebra),
     ícone sai para devolver largura ao texto */
  .hero__note {
    justify-content: center;
    white-space: nowrap;
    font-size: clamp(0.625rem, 3.05vw, 0.8125rem);
    letter-spacing: 0.002em;
  }

  .hero__note svg { display: none; }

  /* Mockup: largura quase total, colado no fluxo (sem vãos) */
  .hero__visual--inline {
    margin-block: var(--space-2) 0;
  }

  .hero__img {
    max-width: min(100vw - (var(--gutter) * 2), 520px);
    filter: drop-shadow(0 14px 26px rgba(36, 72, 66, 0.18));
  }

  .hero__actions { margin-top: var(--space-4); }

  /* Bloco 02: páginas paisagem quase na largura da tela */
  .marquee__slide { width: min(84vw, 400px); }
  .marquee__track { gap: var(--space-4); }
  .preview__action .btn { width: 100%; }

  /* Bloco 03 */
  .pain__action .btn { width: 100%; }
  .pain-card__text { max-width: none; }

  /* Bloco 04 */
  .benefits__action .btn { width: 100%; }
  .benefit-card__title { max-width: none; }

  /* Bloco 05 */
  .kit__intro { text-wrap: pretty; }
  .kit__action .btn { width: 100%; }
  .kit__divide { gap: var(--space-3); }

  /* Bloco 10 — CTA final */
  .final__cta { width: 100%; }
  .final__note { text-wrap: pretty; }

  /* Bloco 06 — barra de confiança compacta */
  .proof__bar-sep { display: none; }
  .proof__bar { text-align: center; }
  .proof__action .btn { width: 100%; }
}


/* --------------------------------------------------------------------------
   22. PREFERÊNCIAS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .marquee__track { animation: none !important; transform: none !important; }
  body { background: #fff; }
}