/* ==========================================================================
   12-fim.css — célula lime de fechamento (insets 103px ≥1440, full-bleed <769)
   Refs: BUILD_PLAN §12-fim · SPEC §3.3 (--bleed-sm/.inset--lg), §4.9 (.dots--iso)
   ========================================================================== */

/* A célula não pinta fundo branco: o gap de 1px da .row vira hairline e os
   cantos de 8px recortam o painel lime (SPEC §3.1). */
.fim__cell{background:transparent}

.fim__panel{display:flex;flex-direction:column;min-width:0;background:var(--c-lime)}
@media (min-width:1440px){.fim__panel{flex-direction:row}}

/* ---------- texto ---------- */
.fim__text{flex:1;min-width:0;padding:var(--sp-16) var(--sp-6)}
@media (min-width:769px){.fim__text{padding:var(--sp-16) var(--sp-8)}}
@media (min-width:1440px){.fim__text{padding:var(--sp-25) var(--sp-16)}}
@media (min-width:1698px){.fim__text{padding:var(--sp-25) var(--sp-24)}}

.fim__text-inner{min-width:0}
@media (min-width:1440px){.fim__text-inner{max-width:408px}}
@media (min-width:1698px){.fim__text-inner{max-width:468px}}

.fim__title{font:600 var(--fs-h3-end)/var(--lh-h1) var(--font-display);
  letter-spacing:var(--ls-h3-end);color:var(--c-ink-900)}
.fim__p{margin-top:var(--sp-8);font:500 var(--fs-lead)/1.5 var(--font-body);color:var(--c-ink-800);text-wrap:pretty}
.fim__btn{margin-top:var(--sp-16)}

/* ---------- ilustração ---------- */
.fim__art{position:relative;flex:1;min-width:0;overflow:hidden;
  display:flex;justify-content:center;align-items:flex-end;padding:var(--sp-6) var(--sp-8)}
@media (min-width:769px){.fim__art{padding:var(--sp-16)}}

/* Pontilhado do card lime (§4.9). Valores medidos na referência: malha ORTOGONAL
   (sem skew) de 9,6px, ponto renderizado de 2–3px e quase branco — sobre o lime
   ele só chega a #FFB08A (multiply ≈ .97). O campo não é uma faixa: é uma cunha
   que abre para cima no quadrante direito (borda esquerda de x≈580→740 do topo à
   base do card; borda direita de x≈1180→960), obtida pela interseção de duas
   rampas de máscara. `background-position:100% 0` ancora o ladrilho na borda
   direita do card e mata a emenda que aparecia em x≈1290. */
.fim__dots{inset:0;width:auto;height:auto;opacity:1;
  background-image:radial-gradient(circle at 50% 50%,rgba(76,82,103,.095) .85px,transparent 1.35px);
  background-size:9.6px 9.6px;background-position:100% 0;
  mix-blend-mode:multiply;transform:none;
  -webkit-mask-image:linear-gradient(75deg,transparent 4%,#000 34%),linear-gradient(292deg,transparent 12%,#000 40%);
          mask-image:linear-gradient(75deg,transparent 4%,#000 34%),linear-gradient(292deg,transparent 12%,#000 40%);
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* max-height:100% — a ilustração é um quadrado dimensionado só pela LARGURA, então em
   769–1439 (painel empilhado, célula baixa e larga) ela ficava mais alta que a caixa e o
   `overflow:hidden` do .fim__art comia o topo: 207px em 768, 172px em 1024 e em 1280,
   12px já em 390. Com o teto de altura o <svg> (viewBox 699×699, preserveAspectRatio
   padrão) se encaixa inteiro e continua centrado. Em ≥1440 a caixa tem exatamente 404px
   de altura útil e a largura declarada também é 404 — o teto não age e a referência
   calibrada não muda. */
.fim__illu{position:relative;z-index:10;width:calc(100vw - 64px);height:auto;max-height:100%;aspect-ratio:1}
@media (min-width:769px){.fim__illu{width:calc(100vw - 304px);max-width:699px}}
@media (min-width:1440px){.fim__illu{width:404px}}