/* ==========================================================================
   Método Amor Quentinho — landing page
   ========================================================================== */

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "La Belle Aurore";
  src: url("../fonts/labelleaurore.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* cores */
  --verde-900: #2E3E3C;
  --verde-700: #435653;
  --cacau-900: #21100D;
  --cacau-800: #452B24;
  --cacau-600: #5F4137;
  --creme-50: #FFF9F4;
  --creme-200: #F5E6D8;
  --rosa-500: #E06882;   /* marca: botões e formas */
  --rosa-300: #F4A9B8;   /* texto de destaque sobre fundo escuro */
  --rosa-700: #AD3A56;   /* texto de destaque sobre creme (AA também no creme-200) */
  --salvia-300: #A9C8AD;
  --salvia-100: #DDE9DC;

  /* fontes — toda a tipografia passa por estas variáveis.
     A Instrument Serif é display: um peso só e traço fino. Regra da página: só em 28px ou mais;
     abaixo disso, DM Sans. */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "La Belle Aurore", "Segoe Script", cursive;
  --esc-d: 1.14;        /* escala da display (a Instrument Serif é estreita e pede corpo maior) */
  --lh-d: 1.06;         /* entrelinha das headlines */
  --ls-d: -.012em;      /* tracking das headlines */

  /* espaçamentos */
  --gutter: clamp(20px, 5vw, 64px);
  --col: clamp(16px, 2.2vw, 32px);   /* calha da grade de 12 colunas */
  --wrap: 1180px;
  --secao: clamp(72px, 10vw, 136px);

  /* raios e sombras */
  --r-papel: 3px;
  --r-card: 18px;
  --r-pill: 999px;
  --sombra-papel: 0 16px 30px -16px rgba(20, 10, 8, .55), 0 2px 4px rgba(20, 10, 8, .12);
  --sombra-foto: 0 30px 60px -30px rgba(10, 16, 15, .7);

  /* grão de papel: tile de 64px */
  --grao: url("data:image/png;base64,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");

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-synthesis: none;            /* nunca negrito/itálico falsos: a display só tem Regular e Italic */
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(1.0625rem * var(--esc-t, 1));   /* 17px no mobile, 18px a partir de 900px */
  line-height: 1.6;
  color: var(--cacau-600);
  background: var(--creme-50);
  font-optical-sizing: auto;       /* DM Sans tem eixo opsz: mais legível nos corpos pequenos */
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: italic; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--peso-d, 400);
  line-height: var(--lh-d, 1.06);
  letter-spacing: var(--ls-d, -.015em);
  text-wrap: balance;
}
h2 { font-size: calc(clamp(2rem, 1.2rem + 3.4vw, 3.5rem) * var(--esc-d, 1)); }
h2 em { color: var(--destaque, var(--rosa-700)); }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* grade de 12 colunas, igual em todas as seções; no mobile cada filho ocupa a linha toda */
.grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col);
}
.grade > * { grid-column: 1 / -1; }
@media (min-width: 900px) { body { font-size: calc(1.125rem * var(--esc-t, 1)); } }

:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--cacau-900);
}

.pular {
  position: absolute;
  left: 12px; top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--creme-50);
  color: var(--cacau-900);
  border-radius: 8px;
}
.pular:focus { top: 12px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-family: var(--font-body);
  line-height: 1.4;
  color: var(--destaque, var(--rosa-700));
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: currentColor;
}

/* ---------- botão ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--cacau-900);
  background: var(--rosa-500);
  border-radius: var(--r-pill);
  box-shadow: 0 5px 0 var(--rosa-700), 0 18px 28px -14px rgba(0, 0, 0, .5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
}
.btn svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.btn:hover {
  background: #E87790;
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--rosa-700), 0 24px 30px -14px rgba(0, 0, 0, .55);
}
.btn:hover svg { transform: translateX(4px); }
@media (min-width: 768px) { .btn { width: auto; min-height: 60px; padding: 16px 40px; } }
@media (max-width: 767px) { .btn { padding-inline: 12px; gap: 8px; letter-spacing: -.015em; } }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--rosa-700); }

/* ---------- bilhete (Dor, Resultados e citação do hero) ---------- */
.bilhete {
  position: relative;
  padding: 28px 24px 24px;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--cacau-800);
  background: var(--creme-200) var(--grao);
  border-radius: var(--r-papel);
  box-shadow: var(--sombra-papel);
}
.bilhete::before {            /* fita adesiva */
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  width: 72px; height: 22px;
  margin-left: -36px;
  background: var(--salvia-300);
  opacity: .9;
  rotate: -2deg;
}

.assinatura {
  font-family: var(--font-script);
  font-size: 1.7em;
  line-height: 1;
  color: var(--rosa-700);
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero {
  position: relative;
  z-index: 2;
  padding-block: 20px 48px;
  color: var(--creme-50);
  background: var(--verde-900) var(--grao);
}
.hero__grid { row-gap: 20px; }
.hero__logo { width: 96px; margin-bottom: 16px; }
.hero h1 { font-size: calc(clamp(1.9rem, 1.05rem + 3.4vw, 3.5rem) * var(--esc-d, 1)); }
.hero h1 em, .dor h2 em, .dor__peso em, .virada h2 em { color: var(--rosa-300); }

/* mobile: botão logo abaixo da foto, texto depois */
.hero__corpo { display: flex; flex-direction: column; }
.hero__corpo p { order: 2; margin-top: 28px; max-width: 34em; color: #E9E3DB; }

.hero__foto {
  --salto: 58px;                 /* quanto a Dani sai por cima do arco */
  position: relative;
  width: min(100%, 250px);
  height: 250px;
  margin: calc(var(--salto) + 4px) auto 70px;
}
.hero__foto::before {          /* forma de cor atrás da foto */
  content: "";
  position: absolute;
  inset: 7% -8% -5% 10%;
  background: var(--rosa-500);
  border-radius: 46% 54% 12% 14% / 30% 34% 8% 8%;
  rotate: 4deg;
}
.hero__arco {                    /* arco com fundo de estúdio (terracota), atrás da Dani */
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 14px 14px / 62% 62% 14px 14px;
  background: radial-gradient(120% 85% at 50% 30%, #8E4529 0%, #612B19 52%, #381810 100%);
  box-shadow: var(--sombra-foto);
}
.hero__recorte {                 /* janela da foto: aberta por cima (a touca e o batedor saem do arco), fechada na base */
  position: absolute;
  inset: calc(-1 * var(--salto)) 0 0 0;
  overflow: hidden;
  border-radius: 0 0 14px 14px;
}
.hero__img { width: 92%; height: auto; margin-inline: auto; }   /* no celular um pouco menor, para a tigela caber acima do bilhete */

.selo {
  position: absolute;
  top: -50px; left: -34px;       /* à esquerda da touca, longe do batedor */
  width: 84px; height: 84px;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .3));
}
.selo circle { fill: var(--creme-50); }
.selo text {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  fill: var(--cacau-800);
}
.selo__coracao { fill: var(--rosa-500); }
.selo__giro { transform-origin: 60px 60px; animation: giro 36s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

.bilhete--hero {                 /* na base do arco, abaixo da tigela */
  position: absolute;
  left: -42px; right: -42px; bottom: -70px;
  padding: 18px 16px 10px;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  background-color: var(--creme-50);
  rotate: -1.5deg;
}
.bilhete--hero cite {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: .875rem;
  font-style: normal;
  line-height: 1.3;
  color: var(--cacau-600);
}

@media (min-width: 900px) {
  .hero { padding-block: 40px 44px; }
  .hero__grid { row-gap: 28px; }
  .hero__cabeca { grid-column: 1 / 8; grid-row: 1; }
  .hero__corpo  { grid-column: 1 / 7; grid-row: 2; display: block; }
  .hero__corpo p { margin: 0 0 32px; }
  .hero__logo { width: 150px; margin-bottom: 40px; }
  .hero__foto {
      grid-column: 8 / 13;
      grid-row: 1 / 3;
      align-self: end;
      width: 100%;
      max-width: 440px;
      height: auto;
      aspect-ratio: 4 / 5;
      margin: 0 0 -120px auto;      /* a foto invade a faixa de números */
    }
    .hero__arco, .hero__recorte { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
    .hero__img { width: 100%; }
  .hero__recorte { inset: -28% 0 0 0; }   
  .selo { width: 132px; height: 132px; top: -17%; left: -15%; }
  .bilhete--hero {
      left: -24%; right: auto; bottom: 5%;
      width: 80%;
      padding: 26px 24px 18px;
      font-size: 1.125rem;
      rotate: -2deg;
    }
  .bilhete--hero cite { margin-top: 8px; }
}

/* ==========================================================================
   1b. NÚMEROS
   ========================================================================== */
.numeros {
  position: relative;
  overflow-x: clip;
  padding-bottom: clamp(56px, 8vw, 96px);
  background: var(--creme-50) var(--grao);
}
.cobertura {                    /* divisor 1 de 3: cobertura escorrendo */
  width: max(100%, 900px);
  max-width: none;
  height: 76px;
  margin-bottom: 28px;
  fill: var(--verde-900);
}
.numeros__titulo {
  max-width: 15em;
  font-size: calc(clamp(1.6rem, 1.15rem + 1.8vw, 2.5rem) * var(--esc-d, 1));
  color: var(--cacau-800);
}
.numeros__lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 0;
  margin-block: clamp(36px, 5vw, 64px);
}
.num {                          /* 3 linhas iguais em todos os blocos: sobretítulo (reservado) / número / rótulo */
  display: grid;
  grid-template-rows: 1.5rem auto 1fr;
  justify-items: center;
  padding-inline: 8px;
  text-align: center;
  border-left: 2px dotted var(--rosa-500);
}
.num > em {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--cacau-600);
  font-style: normal;
  grid-row: 1;
  line-height: 1.5rem;
}
.num strong {
  font-family: var(--font-display);
  font-weight: var(--peso-d, 400);
  font-size: calc(clamp(2.5rem, 1.2rem + 5.4vw, 5.25rem) * var(--esc-d, 1));
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--rosa-700);
  white-space: nowrap;
  grid-row: 2;                   /* mesma linha em todos os blocos = mesma linha de base */
}
.num strong small { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-left: 3px; }
.num > span {
  grid-row: 3;
  min-height: 2.7em;
  margin-top: 10px;
  text-wrap: balance;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--cacau-600);
}
.numeros__rodape {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-weight: var(--peso-dt, 400);
  font-style: italic;
  font-size: calc(clamp(1.55rem, 1.2rem + 1.4vw, 1.9rem) * var(--esc-d, 1));
  line-height: 1.3;
  color: var(--cacau-800);
}
.numeros__rodape::before {
  content: "";
  flex: none;
  width: clamp(32px, 6vw, 88px); height: 2px;
  background: var(--rosa-500);
}
@media (min-width: 900px) {
  .numeros__lista { grid-template-columns: 1fr .62fr 1fr 1.3fr; }   /* largura toda do container */
  .num { padding-inline: 12px; }
  .num > span { font-size: .875rem; }
}

/* ==========================================================================
   1c. FOTO EM PARALLAX (foto pura, de ponta a ponta)
   ========================================================================== */
.parallax {
  position: relative;
  height: clamp(280px, 42vw, 560px);
  overflow: hidden;
  background: var(--cacau-800);       /* cor de espera enquanto a foto carrega */
}
.parallax img {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 118%;                       /* 18% de folga: é o curso total do parallax */
  object-fit: cover;
  object-position: 50% 0;             /* ponto de interesse no centro-alto (rosto e pilhas de bolos): ancora no topo para não cortar a cabeça */
  will-change: transform;
}

/* ==========================================================================
   3. DOR
   ========================================================================== */
.dor {
  color: var(--creme-50);
  background: var(--cacau-800) var(--grao);
}
.dor__grid { row-gap: 48px; padding-top: var(--secao); }
.dor .eyebrow { color: var(--rosa-300); margin-bottom: 20px; }
.dor h2 { font-size: calc(clamp(2rem, 1.2rem + 3.4vw, 3.5rem) * var(--esc-d, 1)); }
.dor__sub { margin-top: 24px; max-width: 24em; color: #EADFD6; }

.dor__bilhetes { display: grid; gap: 26px; padding-top: 12px; }
.dor__bilhetes .bilhete { transition: opacity .6s ease, translate .6s var(--ease), rotate .35s var(--ease), box-shadow .35s; }
.dor__bilhetes .bilhete:nth-child(1) { rotate: -1.5deg; }
.dor__bilhetes .bilhete:nth-child(2) { rotate: 1.2deg; }
.dor__bilhetes .bilhete:nth-child(3) { rotate: 1deg; }
.dor__bilhetes .bilhete:nth-child(4) { rotate: -1.8deg; }
.dor__bilhetes .bilhete:nth-child(5) { rotate: -1deg; }
.dor__bilhetes .bilhete:nth-child(6) { rotate: 2deg; }
.dor__bilhetes .bilhete:nth-child(3n + 2)::before { background: var(--rosa-300); left: 30%; rotate: 2deg; }
.dor__bilhetes .bilhete:nth-child(3n)::before { left: 68%; }
.dor__bilhetes .bilhete:hover { rotate: 0deg; box-shadow: 0 26px 36px -18px rgba(20, 10, 8, .7); }

/* fechamento: ponte para a faixa verde */
.dor__fecho {
  max-width: 31em;
  padding-block: clamp(80px, 11vw, 150px) clamp(52px, 6vw, 84px);
  font-family: var(--font-display);
  font-weight: var(--peso-dt, 400);
  font-size: calc(clamp(1.55rem, 1.2rem + 1.1vw, 1.8rem) * var(--esc-d, 1));
  line-height: 1.28;
}
.dor__fecho::before {
  content: "";
  display: block;
  width: 64px; height: 3px;
  margin-bottom: 28px;
  background: var(--rosa-500);
}
.dor__fecho em { display: block; margin-top: .35em; }

/* faixa verde: declaração tipográfica */
.dor__peso {
  padding-block: clamp(56px, 9vw, 128px) clamp(64px, 9vw, 128px);
  background: var(--verde-700) var(--grao);
}
.dor__peso .wrap::before {      /* aspa decorativa: acima do texto, na mesma margem esquerda */
  content: "";
  display: block;
  width: 58px; height: 44px;
  margin: 0 0 var(--aspa-gap, 8px) var(--aspa-x, 0px);
  background: var(--rosa-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47 36'%3E%3Cpath d='M0 26C0 12 7 3 19 0l1.5 4C14 7 11 11 10.5 16.5 16 16 20 20 20 26s-4.5 10-10 10S0 32 0 26zm27 0c0-14 7-23 19-26l1.5 4C41 7 38 11 37.500 16.5 43 16 47 20 47 26s-4.5 10-10 10-10-4-10-10z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47 36'%3E%3Cpath d='M0 26C0 12 7 3 19 0l1.5 4C14 7 11 11 10.5 16.5 16 16 20 20 20 26s-4.5 10-10 10S0 32 0 26zm27 0c0-14 7-23 19-26l1.5 4C41 7 38 11 37.500 16.5 43 16 47 20 47 26s-4.5 10-10 10-10-4-10-10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dor__peso p {
  max-width: 17em;
  font-family: var(--font-display);
  font-weight: var(--peso-dt, 400);
  font-size: calc(clamp(1.6rem, .95rem + 2.7vw, 2.75rem) * var(--esc-d, 1));
  line-height: 1.2;
  letter-spacing: -.015em;
}
.dor__fala {
  display: block;
  margin-top: .4em;
  font-size: 1.28em;
  line-height: 1.08;
}

@media (min-width: 640px) {
  .dor__bilhetes { grid-template-columns: 1fr 1fr; gap: 30px 28px; padding-bottom: 48px; }
  .dor__bilhetes .bilhete:nth-child(even) { margin-block: 48px -48px; }
}
@media (min-width: 1024px) {
  .dor__grid { align-items: start; }
  .dor__cabeca { grid-column: 1 / 6; position: sticky; top: 88px; }
  .dor__bilhetes { grid-column: 6 / 13; padding-left: var(--col); }
  .dor__peso .wrap::before { width: 79px; height: 60px; --aspa-gap: 2px; --aspa-x: 1px; }   /* alinhamento óptico com o "C" de "Cada" */
}

/* ==========================================================================
   3b. FAIXA DE BOLOS (pausa visual, de ponta a ponta)
   ========================================================================== */
.bolos {
  --bolo-h: 150px;
  --bolo-gap: 12px;
  --bolo-volta: 35s;            /* mesma velocidade do desktop (≈38px/s): o conjunto é mais curto no celular */
  overflow: hidden;
  padding-block: 28px;
  background: var(--creme-50) var(--grao);
}
.bolos__trilho {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: bolos var(--bolo-volta) linear infinite;
}
.bolos__grupo { display: flex; gap: var(--bolo-gap); padding-right: var(--bolo-gap); }
.bolos img {
  width: calc(var(--bolo-h) * .8);    /* 4:5 */
  height: var(--bolo-h);
  object-fit: cover;
  border-radius: var(--r-card);
}
@keyframes bolos { to { transform: translateX(calc(-100% / 3)); } }   /* anda exatamente um conjunto: emenda sem pulo */
.bolos.is-fora .bolos__trilho { animation-play-state: paused; }       /* fora da tela (via IntersectionObserver) */
@media (hover: hover) { .bolos:hover .bolos__trilho { animation-play-state: paused; } }
@media (min-width: 768px) { .bolos { --bolo-h: 220px; --bolo-gap: 14px; --bolo-volta: 50s; } }

/* ==========================================================================
   4. VIRADA
   ========================================================================== */
.virada {
  position: relative;
  isolation: isolate;
  overflow: hidden;                 /* a sombra da Dani não vaza para as seções vizinhas */
  color: var(--creme-50);
  background: var(--verde-700);     /* base do multiply */
}
.virada__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 35%;        /* ponto de interesse: a Dani com os bolos, no centro da foto */
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: multiply;        /* foto em P&B multiplicada sobre o verde da seção: tudo fica em tons de verde */
}
.virada::after {                /* reforço escuro para o texto; no desktop some do lado da Dani */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(46, 62, 60, .78) 0%, rgba(46, 62, 60, .5) 100%);
}
.virada__grid { row-gap: 40px; padding-top: 72px; }
.virada h2 {
  font-size: calc(clamp(1.75rem, 1.05rem + 3vw, 3.4rem) * var(--esc-d, 1));
  line-height: 1.12;
  margin-bottom: 36px;
}
.virada__dani {                 /* recorte com fade próprio na base: solta sobre o fundo, encostada na borda inferior */
  width: min(71%, 264px);
  height: auto;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .virada::after { background: linear-gradient(90deg, rgba(46, 62, 60, .82) 0%, rgba(46, 62, 60, .55) 50%, rgba(46, 62, 60, 0) 100%); }
  .virada__grid { align-items: center; padding-top: 0; }
  .virada__texto { grid-column: 1 / 8; padding-block: clamp(96px, 11vw, 160px); }
  .virada__grid { position: relative; }
  .virada__dani {                /* quase a altura toda da seção: touca a 50px do topo, base na borda inferior */
    grid-column: 8 / 13;         /* para um filho absoluto da grade, a área de referência são estas 5 colunas */
    position: absolute;
    right: 0; bottom: 0;
    height: calc(100% - 50px);
    width: auto;
    max-width: 100%;             /* nunca passa das 5 colunas da direita: não encosta no texto */
    object-fit: contain;         /* se a largura limitar, encolhe sem distorcer, apoiada na base */
    object-position: right bottom;
    margin: 0;
  }
}

/* ==========================================================================
   Comuns às seções 5–13
   ========================================================================== */
.secao { padding-block: var(--secao); }
.escuro { color: var(--creme-50); --destaque: var(--rosa-300); }
.escuro, .dor, .virada, .credenciais, .solucao__fecho, .rodape { font-weight: 450; }                       /* DM Sans Regular afina sobre fundo escuro */
.bilhete, .quali__sim, .etiqueta__papel { font-weight: 400; }      /* papéis claros dentro de seção escura */
:is(.escuro, .dor, .virada) :is(h1, h2):not(.eyebrow) { color: #fff; }

.ico { flex: none; width: 24px; height: 24px; margin-top: 3px; --ico-bg: var(--salvia-300); --ico-fg: var(--verde-900); }
.cobertura--creme { fill: var(--creme-200); }

/* ==========================================================================
   2. VÍDEO (com CONFIG.mostrarVideo = false o JS remove a seção)
   ========================================================================== */
.video {                        /* mesmo creme da faixa de números: os dois leem como um bloco só, e a foto do parallax faz o corte */
  padding-bottom: var(--secao);
  background: var(--creme-50) var(--grao);
}
.video .wrap { display: grid; justify-items: center; }
.video__cabeca { max-width: 900px; margin-bottom: clamp(28px, 4vw, 44px); text-align: center; }
.video .eyebrow { justify-content: center; }
.video h2 { font-size: calc(clamp(1.9rem, 1.3rem + 2.4vw, 3rem) * var(--esc-d, 1)); color: var(--cacau-800); }
.video__quadro {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--cacau-900);
  box-shadow: 0 28px 50px -28px rgba(69, 43, 36, .55), 0 2px 6px rgba(69, 43, 36, .12);
}
.video__quadro iframe { display: block; width: 100%; height: 100%; border: 0; }
.video__play { position: relative; display: block; width: 100%; height: 100%; }
.video__play:focus-visible { outline-offset: -6px; }      /* o quadro corta o que sai dele */
.video__play img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease); }
.video__play:hover img { scale: 1.03; }
.video__play span {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(68px, 9vw, 92px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--rosa-500);
  animation: pulso 2.4s ease-out infinite;
}
.video__play span::after {      /* triângulo: 30% do círculo, deslocado para o centro óptico */
  content: "";
  position: absolute;
  left: 39%; top: 30%;
  width: 30%; height: 40%;
  background: var(--cacau-900);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.video .btn { margin-top: clamp(28px, 4vw, 40px); }
@keyframes pulso {
  from { box-shadow: 0 0 0 0 rgba(224, 104, 130, .6); }
  to   { box-shadow: 0 0 0 26px rgba(224, 104, 130, 0); }
}

/* ==========================================================================
   5. SOLUÇÃO + PILARES (índice de revista)
   ========================================================================== */
.solucao { background: var(--creme-50) var(--grao); }
.solucao h2 { color: var(--cacau-800); }
.solucao__abre { row-gap: 28px; margin-bottom: clamp(64px, 8vw, 112px); }
.solucao__sub {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-weight: var(--peso-dt, 400);
  font-size: calc(clamp(1.55rem, 1.1rem + 1.2vw, 1.9rem) * var(--esc-d, 1));
  line-height: 1.25;
  color: var(--cacau-800);
}
.solucao__sub em { color: var(--rosa-700); }

.pilar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding-block: 28px;
  border-top: 1px solid rgba(95, 65, 55, .28);
}
.pilar__n {
  min-width: 1.3em;
  font-family: var(--font-display);
  font-weight: var(--peso-dt, 400);
  font-size: calc(clamp(3.5rem, 2.4rem + 4.4vw, 6.25rem) * var(--esc-d, 1));
  line-height: .9;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rosa-500);
}
.pilar__rot { font-family: var(--font-body);
  font-weight: 600;font-style: normal;color: var(--rosa-700); }
.pilar h3 {
  margin-block: 4px 8px;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .06em;
  color: var(--cacau-800);
}

.solucao__fecho {
  margin-top: clamp(48px, 6vw, 88px);
  padding: clamp(36px, 5vw, 68px);
  color: var(--creme-50);
  background: var(--verde-900) var(--grao);
  /* cantos chanfrados, como etiqueta */
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
}
.solucao__frase {
  max-width: 22em;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: var(--peso-dt, 400);
  font-size: calc(clamp(1.55rem, 1.1rem + 1.8vw, 2.4rem) * var(--esc-d, 1));
  line-height: 1.15;
  letter-spacing: -.01em;
}
.solucao__fecho p:last-child { max-width: 34em; color: #E9E3DB; }
.solucao__cta { margin-top: 40px; text-align: center; }

@media (min-width: 900px) {
  .solucao__titulo { grid-column: 1 / 8; }
  .solucao__texto { grid-column: 8 / 13; padding-top: 44px; }
  .pilar { grid-column: span 6; padding-right: 24px; }
  .pilar:nth-child(even) { margin-top: 56px; }      /* degrau entre as colunas */
}

/* ==========================================================================
   6. RESULTADOS (bilhetes; carrossel com scroll-snap no mobile)
   ========================================================================== */
.resultados { background: var(--verde-900) var(--grao); }
.resultados__trilho {
  margin: 28px calc(-1 * var(--gutter)) 0;
  padding: 28px var(--gutter) 36px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.resultados__lista { display: flex; gap: 20px; }
.depo {
  flex: 0 0 84%;
  display: flex;
  flex-direction: column;
  padding: 34px 24px 24px;
  scroll-snap-align: start;
}
.depo:nth-child(1) { rotate: -1.5deg; }
.depo:nth-child(2) { rotate: 1deg; }
.depo:nth-child(3) { rotate: -1deg; }
.depo:nth-child(2)::before { background: var(--rosa-300); left: 32%; rotate: 2deg; }
.depo blockquote { margin: 0; }
.depo__aspas { width: 38px; margin-bottom: 14px; fill: var(--rosa-500); }
.depo__autor {
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--cacau-600);
}
.depo__autor strong { display: block; font-size: 1.0625rem; color: var(--cacau-800); }

@media (min-width: 900px) {
  .resultados__trilho { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .resultados__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col); align-items: start; }
  .depo { padding: 40px 30px 30px; }
  .depo:nth-child(2) { margin-top: 56px; }
  .depo:nth-child(3) { margin-top: 20px; }
}

/* ==========================================================================
   7. QUEM SOU EU (linha do tempo + credenciais)
   ========================================================================== */
.quem { background: var(--creme-200) var(--grao); }
.quem h2 { color: var(--cacau-800); }
.quem__grid { row-gap: 64px; }
.quem__titulo { display: flex; align-items: center; gap: 20px; margin-bottom: 44px; }
.quem__foto {
  flex: none;
  width: 108px; height: 108px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 8px 8px 0 var(--rosa-500);
}

.linha {
  position: relative;
  margin: 0 0 12px 8px;
  padding-left: 32px;
  border-left: 2px dotted var(--rosa-500);
}
.linha li { position: relative; padding-bottom: 36px; }
.linha li::before {             /* marcador */
  content: "";
  position: absolute;
  left: -41px; top: .5em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--rosa-500);
  box-shadow: 0 0 0 6px var(--creme-200);
}
.linha h3 {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--peso-d, 400);
  font-size: calc(clamp(1.6rem, 1.3rem + 1vw, 2rem) * var(--esc-d, 1));
  line-height: 1.1;
  color: var(--rosa-700);
}
.linha__loja {
  width: min(100%, 440px);
  aspect-ratio: 16 / 9;
  margin-top: 20px;
  object-fit: cover;
  border-radius: var(--r-card);
}

.credenciais {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  color: var(--creme-50);
  background: var(--cacau-800) var(--grao);
  border-radius: var(--r-card);
  box-shadow: 0 30px 50px -28px rgba(42, 23, 19, .8);
}
.credenciais h3 {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: var(--peso-d, 400);
  font-size: calc(clamp(1.55rem, 1.3rem + .8vw, 1.8rem) * var(--esc-d, 1));
  line-height: 1.15;
}
.credenciais li, .quali li { display: flex; gap: 12px; padding-block: 11px; line-height: 1.45; }
.credenciais li + li { border-top: 1px solid rgba(255, 249, 244, .16); }

.quem__citacao { margin: 40px 0 0; }      /* mesma coluna e mesma margem esquerda do card de credenciais */
.quem__citacao p {
  text-wrap: balance;
  font-family: var(--font-display);
  font-weight: var(--peso-dt, 400);
  font-style: italic;
  font-size: calc(clamp(2rem, 1.5rem + 2vw, 3rem) * var(--esc-d, 1));
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--rosa-700);
}
.quem__citacao cite { display: block; margin-top: 10px; font-size: 2.4rem; font-style: normal; color: var(--verde-900); }

@media (min-width: 900px) {
  .quem__historia { grid-column: 1 / 7; }
  .quem__lado { grid-column: 8 / 13; }
  .quem__foto { width: 132px; height: 132px; }
}

/* ==========================================================================
   8. INVESTIMENTO (etiqueta de confeitaria)
   ========================================================================== */
.invest {
  overflow-x: clip;
  padding-bottom: var(--secao);
  text-align: center;
  background: var(--cacau-800) var(--grao);
}
.invest .cobertura, .rodape .cobertura { fill: var(--creme-200); }   /* divisores 2 e 3 de 3 */
.invest .cobertura { margin-bottom: clamp(72px, 9vw, 112px); }

.etiqueta {
  position: relative;
  width: min(100%, 560px);
  margin-inline: auto;
  filter: drop-shadow(0 30px 36px rgba(0, 0, 0, .45));
}
.etiqueta { --pin: 1; rotate: -1.2deg; transform-origin: 50% 37px; }   /* pendurada no alfinete */
.etiqueta::before {             /* ponto onde a agulha entra no papel */
  content: "";
  position: absolute;
  left: 50%; top: 37px;
  z-index: 1;
  width: 9px; height: 4px;
  margin: -2px 0 0 -5px;
  border-radius: 50%;
  background: rgba(42, 23, 19, .5);
  rotate: -18deg;
}
.alfinete {                     /* cabeça na frente, acima do topo; a haste termina no ponto de entrada */
  position: absolute;
  left: calc(50% - 10.7px * var(--pin));
  top: calc(37px - 63.7px * var(--pin));
  z-index: 2;
  width: calc(43.2px * var(--pin));
  height: auto;
  max-width: none;
  filter: drop-shadow(3px 4px 2px rgba(42, 23, 19, .32));   /* sombra curta sobre o papel */
  pointer-events: none;
}
@media (max-width: 767px) { .etiqueta { --pin: .9; } }
.etiqueta__papel {
  position: relative;
  padding: 84px clamp(22px, 6vw, 52px) 60px;
  color: var(--cacau-600);
  background: var(--creme-50) var(--grao);
  clip-path: polygon(17% 0, 83% 0, 100% 64px, 100% 100%, 0 100%, 0 64px);
  /* borda de baixo picotada */
  -webkit-mask: radial-gradient(9px at 50% 100%, #0000 97%, #000) 50% 100% / 26px 100% repeat-x;
          mask: radial-gradient(9px at 50% 100%, #0000 97%, #000) 50% 100% / 26px 100% repeat-x;
}
.etiqueta .eyebrow { justify-content: center; margin-bottom: 22px; --destaque: var(--rosa-700); }
.etiqueta .eyebrow::before { display: none; }
.etiqueta__de { font-size: 1.3rem; color: var(--cacau-800); }
.etiqueta__de s { text-decoration-thickness: 2px; text-decoration-color: var(--rosa-700); }
.etiqueta__preco {
  font-family: var(--font-display);
  font-weight: var(--peso-dt, 400);
  font-size: calc(clamp(5.25rem, 3rem + 11vw, 9rem) * var(--esc-d, 1));
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--rosa-700);
}
.etiqueta__parcelas { margin-bottom: 30px; font-weight: 600; color: var(--cacau-800); }
.etiqueta .btn { width: 100%; }

.garantia {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  padding-top: 28px;
  text-align: left;
  border-top: 2px dotted rgba(95, 65, 55, .4);
}
.garantia strong { color: var(--cacau-800); }
.carimbo { flex: none; width: 96px; height: 96px; rotate: -8deg; stroke: var(--rosa-700); }
.carimbo text { stroke: none; fill: var(--rosa-700); }
.carimbo__a { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.carimbo__b { font-family: var(--font-display);
  font-weight: var(--peso-dt, 400); font-size: calc(30px * var(--esc-d, 1)); }

/* ==========================================================================
   9. QUALIFICAÇÃO (marrom mais claro + fio pontilhado: separa do Investimento)
   ========================================================================== */
.quali {
  background: var(--cacau-600) var(--grao);
  border-top: 2px dotted rgba(244, 169, 184, .55);
}
.quali__cabeca { margin-bottom: 44px; }
.quali__grid { row-gap: 24px; align-items: start; }
.quali__sim, .quali__nao { padding: clamp(28px, 4vw, 48px); border-radius: var(--r-card); }
.quali__sim { color: var(--cacau-800); background: var(--creme-50) var(--grao); }
.quali__nao {
  color: var(--creme-50);
  background: var(--cacau-800) var(--grao);
  border: 1px solid rgba(244, 169, 184, .4);
  --ico-bg: var(--rosa-300);
  --ico-fg: var(--cacau-900);
}
.quali__nao .ico { --ico-bg: var(--rosa-300); --ico-fg: var(--cacau-900); }
.quali h3 {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--peso-d, 400);
  font-size: calc(clamp(1.6rem, 1.3rem + 1vw, 2rem) * var(--esc-d, 1));
}
@media (min-width: 900px) {
  .quali__sim { grid-column: 1 / 8; }
  .quali__nao { grid-column: 8 / 13; margin-top: 64px; }
}

/* ==========================================================================
   10. AULAS + BÔNUS e 12. FAQ (sumário de livro; <details> nativo)
   ========================================================================== */
:root { interpolate-size: allow-keywords; }

.aulas { background: var(--creme-50) var(--grao); }
.aulas h2, .faq h2 { color: var(--cacau-800); }
.aulas__cabeca { margin-bottom: 44px; }

.sumario { border-top: 2px solid var(--cacau-800); --num: var(--rosa-700); }
.mod { border-bottom: 1px solid rgba(95, 65, 55, .3); }
.mod summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;               /* área de toque ≥ 48px */
  padding: 14px 4px;
  cursor: pointer;
  list-style: none;
}
.mod summary::-webkit-details-marker { display: none; }
.mod__n {
  flex: none;
  min-width: 1.35em;
  font-family: var(--font-display);
  font-weight: var(--peso-dt, 400);
  font-size: calc(clamp(2rem, 1.5rem + 2vw, 3rem) * var(--esc-d, 1));
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--num);
}
.mod__rot { display: block; font-family: var(--font-body);
  font-weight: 600;font-style: normal;font-size: 1rem;color: var(--cacau-600); }
.mod__tit {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .05em;
  color: var(--cacau-800);
  transition: color .2s;
}
.mod__tit--normal { letter-spacing: 0; font-size: 1.125rem; }
.faq__q { font-family: var(--font-body);
  font-weight: 600;font-size: 1.125rem;line-height: 1.35;color: var(--cacau-800); transition: color .2s; }
.mod summary:hover .mod__tit, .mod summary:hover .faq__q { color: var(--num); }

.mais {
  position: relative;
  flex: none;
  width: 36px; height: 36px;
  margin-left: auto;
  border: 2px solid var(--cacau-800);
  border-radius: 50%;
  transition: rotate .3s var(--ease), background-color .3s;
}
.mais::before, .mais::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 2px;
  margin: -1px 0 0 -7px;
  background: var(--cacau-800);
}
.mais::after { rotate: 90deg; }
.mod[open] .mais { rotate: 45deg; background-color: var(--rosa-500); }

/* transição de altura (onde o navegador suporta; nos demais abre direto) */
.mod::details-content {
  height: 0;
  overflow: clip;
  transition: height .35s var(--ease), content-visibility .35s allow-discrete;
}
.mod[open]::details-content { height: auto; }

.mod__corpo { padding: 2px 4px 30px; color: var(--cacau-600); }
.mod__corpo > p { max-width: 40em; }
.mod__tema {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: var(--peso-dt, 400);
  font-style: italic;
  font-size: calc(1.55rem * var(--esc-d, 1));
  line-height: 1.25;
  color: var(--cacau-800);
}
.mod__lbl { margin-block: 16px 8px; font-weight: 700; color: var(--cacau-800); }
.mod__txt { margin-top: 14px; }
.mod__txt strong { color: var(--cacau-800); }
.mod__corpo ul { display: grid; gap: 8px 36px; }
.mod__corpo li { position: relative; padding-left: 22px; line-height: 1.45; }
.mod__corpo li::before {
  content: "";
  position: absolute;
  left: 2px; top: .6em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rosa-500);
}
.mod__final {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: var(--peso-dt, 400);
  font-style: italic;
  font-size: calc(1.55rem * var(--esc-d, 1));
  color: var(--num);
}

.aulas__bonus {
  margin-block: clamp(56px, 7vw, 88px) 20px;
  font-family: var(--font-display);
  font-weight: var(--peso-d, 400);
  font-size: calc(clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem) * var(--esc-d, 1));
  color: var(--cacau-800);
}
.sumario--bonus { display: grid; gap: 14px; border-top: 0; --num: var(--verde-900); }
.sumario--bonus .mod {
  padding-inline: clamp(14px, 3vw, 28px);
  border: 0;
  border-radius: var(--r-card);
  background: var(--salvia-300) var(--grao);
}
.sumario--bonus .mod__rot, .sumario--bonus .mod__corpo { color: var(--cacau-800); }
.sumario--bonus .mod__corpo li::before { background: var(--verde-900); }
.sumario--bonus .mod__corpo ul { grid-template-columns: 1fr; }   /* 3–4 itens: 1 coluna equilibra melhor */

.faq { background: var(--creme-200) var(--grao); }
.faq__grid { row-gap: 36px; }
.faq .mod summary { min-height: 68px; }
.faq .mod__corpo { padding-right: 52px; }

@media (min-width: 700px) {
  .mod__corpo ul { grid-template-columns: 1fr 1fr; }
  .faq .mod__corpo ul { grid-template-columns: 1fr; }
}
@media (min-width: 900px) {
  .aulas .mod__corpo { padding-left: calc(clamp(2rem, 1.5rem + 2vw, 3rem) * 1.35 + 20px); }
}
@media (min-width: 1024px) {
  .faq__grid { align-items: start; }
  .faq__cabeca { grid-column: 1 / 6; position: sticky; top: 88px; }
  .faq__lista { grid-column: 6 / 13; }
}

/* ==========================================================================
   11. FECHAMENTO (única seção centralizada, de propósito)
   ========================================================================== */
.fecha { text-align: center; background: var(--cacau-800) var(--grao); }
.fecha .eyebrow { justify-content: center; }
.fecha .eyebrow::before { display: none; }
.fecha h2 {
  margin-bottom: 30px;
  font-size: calc(clamp(2.6rem, 1.3rem + 6.4vw, 6.25rem) * var(--esc-d, 1));
  line-height: 1.04;
  letter-spacing: -.025em;
}
.fecha__texto { max-width: 36em; margin: 0 auto 36px; color: #EADFD6; }
.fecha__garantia { margin-top: 20px; font-weight: 600; color: var(--salvia-300); }
.fecha__final {
  max-width: 25em;
  margin: clamp(56px, 7vw, 96px) auto 0;
  font-family: var(--font-display);
  font-weight: var(--peso-dt, 400);
  font-style: italic;
  font-size: calc(clamp(1.55rem, 1.1rem + 1vw, 1.8rem) * var(--esc-d, 1));
  line-height: 1.3;
}
.fecha__final::before {
  content: "";
  display: block;
  width: 64px; height: 3px;
  margin: 0 auto 30px;
  background: var(--rosa-500);
}

/* ==========================================================================
   13. RODAPÉ
   ========================================================================== */
.rodape {
  overflow-x: clip;
  padding-bottom: 48px;
  text-align: center;
  color: #E9E3DB;
  background: var(--verde-900) var(--grao);
}
.rodape .cobertura { margin-bottom: 48px; }
.rodape img { width: 150px; margin: 0 auto 28px; }
.rodape p { font-size: 1rem; }
.rodape a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .25s;
}
.rodape a:hover { color: var(--rosa-300); }
@media (max-width: 767px) { .rodape { padding-bottom: 120px; } }   /* espaço para o CTA fixo */

/* ==========================================================================
   CTA fixo (mobile)
   ========================================================================== */
.cta-fixo {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  background: var(--verde-900);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .28);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.cta-fixo.is-on { transform: none; }
.cta-fixo .btn { width: 100%; min-height: 52px; box-shadow: 0 4px 0 var(--rosa-700); }
@media (min-width: 768px) { .cta-fixo { display: none; } }

/* ==========================================================================
   Entrada das seções — só existe se o JS rodou (classe .js no <html>)
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .6s ease, translate .6s var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.js [data-reveal].is-in { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; translate: none; }
  .bolos { overflow-x: auto; }
  .bolos__grupo[aria-hidden] { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}