/* ==========================================================================
   11 — CTA final ("Peça o seu cheesecake hoje")
   Figma "Sabores" 7057:955 (1440 × 923.8) · bg #b0282e · flex col, gap 32,
   items-center · py 80 · px 112
   ├ Container 7057:992 (1216 × 571.8): flex col, gap 16, items-center
   │   ├ Selo 7057:1367 141.812 × 141.802 (text-paths "Desde 2004" /
   │   │   "• Yes, we have cheesecake •" + ícone fi_3400159 48px) → export SVG
   │   │   do node (fundo transparente: retângulos dos frames-pai removidos)
   │   ├ Título 7057:993 — Anton 168 / 1.1, uppercase, center, cream (2 linhas)
   │   ├ Texto 7057:1009 — Archivo 20 / 1.4, center, cream
   │   └ Foreground image 7057:994 — 198 × 184, absoluta: left 50%,
   │       top calc(50% + 56.95px), translate(-50%, -50%), espelhada na
   │       horizontal (-scale-y-100 + rotate-180 = scaleX(-1)), object-bottom.
   │       O offset 56.95 = (selo + gap − gap − texto) / 2 mantém a fatia
   │       centrada no título mesmo quando ele escala.
   └ Container 7057:1005: flex col, gap 24, items-center
       ├ Button 7079:408 — Primary/Dark → .btn.btn--primary-dark (150 × 65)
       ├ "Ou" 7057:1006 — Anton 18 / 1.4, uppercase, cream
       └ Button 7079:412 — Tertiary/Dark → .btn-link.btn-link--dark (138 × 22)
   Abaixo de 1440 o título e a fatia escalam em vw (mesma proporção do frame)
   para "CHEESECAKE HOJE" continuar numa linha só.
   ========================================================================== */

.cta-final {
  padding-block: var(--section-py);            /* py-[80px] */
  background: var(--color-red-700);            /* bg-[#b0282e] */
  color: var(--color-cream-50);
}

.cta-final :focus-visible { outline-color: var(--color-cream-50); }

.cta-final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;                         /* items-center */
  gap: 32px;                                   /* gap-[32px] */
}

/* ---------- Container 7057:992 ---------- */
.cta-final__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;                         /* items-center */
  gap: 16px;                                   /* gap-[16px] */
  width: 100%;
}

/* Selo 7057:1367 — 141.812 × 141.802, overflow-clip */
.cta-final__selo {
  position: relative;
  flex: none;
  width: 141.812px;
  height: 141.802px;
  overflow: hidden;
}
.cta-final__selo img { max-width: none; }      /* SVG no tamanho nativo (142 × 142) */

/* Título 7057:993 — Anton 168/1.1 (2 × 184.8 = 369.6; Figma arredonda a caixa p/ 370) */
.cta-final__title {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(168px, 11.6667vw);            /* text-[168px] @1440 */
  line-height: 1.1;                            /* leading-[1.1] */
  text-align: center;
  text-transform: uppercase;
  white-space: pre-wrap;                       /* whitespace-pre-wrap: o espaço final de
                                                  "Peça o seu " conta na centralização
                                                  (1ª linha fica ~½ espaço à esquerda) */
  overflow-wrap: break-word;
}

/* Texto 7057:1009 — Archivo 20/1.4 */
.cta-final__text {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;                             /* text-[20px] */
  line-height: var(--lh-body);                 /* 1.4 */
  text-align: center;
}

/* Foreground image 7057:994 — 198 × 184, sobreposta ao título */
.cta-final__fatia {
  position: absolute;
  left: 50%;
  top: calc(50% + 56.95px);
  width: min(198px, 13.75vw);                  /* w-[198px] @1440 */
  height: auto;
  aspect-ratio: 198 / 184;                     /* h-[184px] */
  max-width: none;
  object-fit: contain;
  object-position: 50% 100%;                   /* object-bottom */
  transform: translate(-50%, -50%) scaleX(-1);
  pointer-events: none;
}

/* ---------- Container 7057:1005 ---------- */
.cta-final__actions {
  display: flex;
  flex-direction: column;
  align-items: center;                         /* items-center */
  gap: 24px;                                   /* gap-[24px] */
}

/* "Ou" 7057:1006 — Anton 18/1.4 uppercase */
.cta-final__ou {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-button);                 /* text-[18px] */
  line-height: var(--lh-button);               /* 1.4 */
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   Responsivo (o Figma só tem 1440; >= 1200 nada muda)
   1024–1199: composição do desktop — título e fatia escalam em vw (regras
              base acima), a fatia continua sobreposta ao título como no Figma.
   <= 1023:   composição empilhada, SEM sobreposição (padrão "Fale agora com
              um consultor" da referência): selo → título → fatia → texto →
              botão → "ou" → link, tudo centralizado. A fatia sai do absoluto
              e entra no fluxo logo abaixo do título (order), o título escala
              pela largura útil (cqi) para "CHEESECAKE HOJE" caber numa linha.
   ========================================================================== */

/* ---------- ≤1199 (iPad deitado e menores = toque) ---------- */
@media (max-width: 1199.98px) {
  /* Link "Falar no WhatsApp" com área de toque de 44px sem mexer na
     composição: as margens negativas devolvem exatamente a sobra sobre a
     linha do texto (fs × 1.2 → 21.6 no tablet, 19.2 no mobile), então o
     respiro visual até o "OU" e até o fim da seção continua o mesmo. */
  .cta-final__actions .btn-link {
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-block: calc((var(--fs-button) * 1.2 - 44px) / 2);
    padding-inline: 12px;
  }
}

/* ---------- tablet (768–1023) ---------- */
@media (max-width: 1023.98px) {
  .cta-final__head {
    container-type: inline-size;               /* largura útil p/ o título (cqi) */
    gap: 20px;
  }

  .cta-final__selo {
    width: 120px;
    height: 120px;
  }
  .cta-final__selo img {
    width: 100%;
    height: 100%;
  }

  /* "CHEESECAKE HOJE" = 6.61em em Anton → /6.85 deixa ~3% de folga */
  .cta-final__title {
    font-size: min(var(--fs-t-giant), calc((100vw - 2 * var(--section-px)) / 6.85));
    font-size: min(var(--fs-t-giant), calc(100cqi / 6.85));
    line-height: 1.2;                          /* 1.1 do Figma encosta a cedilha do "Ç"
                                                  no "S" da linha de baixo */
    white-space: normal;                       /* sem o espaço final do Figma: linhas
                                                  centralizadas de verdade */
    text-wrap: balance;
    hyphens: manual;
  }

  /* Fatia no fluxo, logo abaixo do título (sem cobrir nenhuma letra) */
  .cta-final__fatia {
    position: static;
    order: 1;
    width: 184px;
    transform: scaleX(-1);                     /* mantém o espelhamento do Figma */
  }

  .cta-final__text {
    order: 2;
    max-width: 36em;
    font-size: var(--fs-t-lead);
    line-height: 1.5;
    text-wrap: balance;
  }
}

/* ---------- mobile (< 768) ---------- */
@media (max-width: 767.98px) {
  .cta-final__inner { gap: var(--gap-m-lg); }  /* 32 */

  .cta-final__head { gap: var(--gap-m-md); }   /* 16 */

  .cta-final__selo {
    width: 96px;
    height: 96px;
  }

  .cta-final__title {
    font-size: min(var(--fs-m-giant), calc((100vw - 2 * var(--section-px)) / 6.85));
    font-size: min(var(--fs-m-giant), calc(100cqi / 6.85));
  }

  .cta-final__fatia { width: clamp(120px, 36vw, 148px); }

  .cta-final__text {
    max-width: 22em;                           /* 2 linhas equilibradas */
    font-size: var(--fs-m-lead);
    line-height: var(--lh-m-body);
  }

  .cta-final__actions { gap: var(--gap-m-md); }

  .cta-final__actions .btn { min-width: 200px; }
}

/* ==========================================================================
   Motion (ver MOTION.md · coreografia em assets/js/sections/11-cta-final.js)
   ========================================================================== */
/* A fatia cai de cima da seção conforme a rolagem: a seção recorta o que
   está acima da borda (overflow: clip não cria rolagem nem muda o layout). */
.cta-final { overflow: clip; }

@media (prefers-reduced-motion: no-preference) {
  /* Selo: o anel de texto gira sem parar (horário); o ícone do centro fica parado */
  .cta-final__selo { --reveal-rotate: -28deg; }
  .cta-final__selo img {
    animation: cdc-spin 22s linear infinite;
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 56%, #000 57%);
            mask: radial-gradient(circle closest-side, transparent 0 56%, #000 57%);
  }
  .cta-final__selo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../../images/11-cta-final-selo-icone.svg") center / 100% 100% no-repeat;
    pointer-events: none;
  }
}