/* ==========================================================================
   04-quanto-custa.css — teaser de preços (célula inteira clicável) + tira hachurada
   Ref: desktop-slice-1 y257–548 (célula 292px, x89–1351) · mobile-slice-1 y70–380
   ========================================================================== */

/* ---------- célula ---------- */
.qc__cell{
  position:relative;
  display:flex;flex-direction:column;
  justify-content:space-between;align-items:center;
  gap:var(--sp-8);
  padding:var(--sp-16) var(--cell-px);
  text-align:center;
  transition:background-color var(--dur-base) var(--ease-default);
}
.qc__cell:focus-visible{outline:2px solid var(--c-ink-900);outline-offset:-3px}

/* ---------- pontilhado decorativo (SPEC §4.9) ----------
   Elipse reajustada por mínimos quadrados contra o perfil de tinta da referência
   — desta vez com as fatias corretas (qa/slice.py; o ajuste anterior, 25%/35% em
   65% 22%, foi feito contra recortes deslocados do `sips --cropOffset` e deixava
   uma cunha branca no quadrante inferior-esquerdo da nuvem).
   Bins de 47,5px (= 5 passos do ladrilho, para não aliasar com o pitch de 9,58px)
   nas faixas y1259–1335 e y1450–1526 + coluna x1100–1200; queda (1−t)^0,7,
   amplitude do ladrilho 1,09. Ajuste: centro (1120, 1290) da página, raios
   320×440px — RMS do resíduo 0,090 contra 0,148 do ajuste antigo.
   Na caixa de 1180×819px com right:-206px/top:-117px (borda esquerda em x=377,
   topo em y=1140): 27%×1180 = 319px · 54%×819 = 442px · 63% → cx=1120 ·
   18% → cy=1287.
   Fase do ladrilho: a grade da ref fica 1,2px à esquerda e 3,3px abaixo da nossa;
   corrigida por --pattern-dots-pos (mexer em right/top moveria também a máscara).
   A 2ª camada mantém o offset de meio passo do token (−4,8px −4,8px). */
.qc__dots{
  right:-206px;top:-117px;opacity:1;
  --pattern-dots-pos:-1.2px 3.3px,-6px -1.5px;
  -webkit-mask-image:radial-gradient(27% 54% at 63% 18%,#000 0%,rgba(0,0,0,.82) 25%,rgba(0,0,0,.61) 50%,rgba(0,0,0,.36) 75%,transparent 100%);
  mask-image:radial-gradient(27% 54% at 63% 18%,#000 0%,rgba(0,0,0,.82) 25%,rgba(0,0,0,.61) 50%,rgba(0,0,0,.36) 75%,transparent 100%);
}

/* ---------- texto ---------- */
.qc__text{
  position:relative;z-index:var(--z-content);
  display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-4);
}
/* line-height 1: a medição da referência (célula 292px; baseline do H2 a 138px e a do
   parágrafo a 183px do topo da célula) só fecha com a caixa de linha igual ao corpo. */
/* --shimmer-ramp: 78px é o valor que tokens.css:196 já anuncia para esta seção
   (fidelidade #30: a referência satura o verde ~78px depois do início do texto). */
.qc__title{font:600 var(--fs-h2)/1 var(--font-display);letter-spacing:var(--ls-h2);color:var(--c-green);--shimmer-ramp:78px}
.qc__title .shimmer{display:block}
/* --lh-hero-sub (28px), não --lh-normal (1.5 × 18 = 27px): a referência usa 28px.
   Fecha a altura interna da célula em 48 + 16 + 28 + 2×100 = 292px no desktop e
   48 + 16 + 2×28 + 32 + 2×64 = 308px no mobile (medidas da ref), e devolve o 1px
   que a altura ímpar roubava do link/seta centrados na linha flex. */
.qc__p{font:500 var(--fs-lead)/var(--lh-hero-sub) var(--font-body);color:var(--c-ink-600)}

/* ---------- link "Ver preços" (SPEC §4.8, variante da seção) ---------- */
.qc__link{
  position:relative;z-index:var(--z-content);
  display:flex;align-items:center;flex-shrink:0;
  gap:var(--sp-3);
  color:var(--c-green);
  font:600 var(--fs-lead)/var(--lh-hero-sub) var(--font-display);
}
/* A seta desliza 8px (12→20 do gap antigo) por transform: mesmo pixel, sem
   refazer o layout da linha flex a cada frame. */
.qc__arrow{width:var(--icon-lg);height:var(--icon-lg);transition:transform var(--dur-base) var(--ease-default)}

/* ---------- hover da célula inteira (a seta "escapa" 8px) ---------- */
@media (hover:hover) and (pointer:fine){
  .qc__cell:hover{background:var(--c-surface-soft)}
  .qc__cell:hover .qc__arrow{transform:translateX(8px)}
}

/* ---------- ≥769: linha, texto à esquerda, link à direita ---------- */
@media (min-width:769px){
  .qc__cell{flex-direction:row;padding:var(--sp-25) var(--cell-px);text-align:left}
  .qc__text{align-items:flex-start}
}

/* 769–1439 a célula é baixa e o link centrado cai no vão entre o H2 e o
   parágrafo; alinhado ao topo ele encosta na 1ª linha do H2. ≥1440 fica como
   está no screenshot de referência. */
@media (min-width:769px) and (max-width:1439px){
  .qc__cell{align-items:flex-start}
  .qc__link{margin-top:var(--sp-2)}
}

@media (prefers-reduced-motion:reduce){
  .qc__arrow{transition:none}
}