/* ==========================================================================
   10-suporte.css — cena "pessoa digitando no notebook" (SVG) + bloco de texto
   Ref: DESIGN_SPEC §0 D6/D13/D16 · §4.4/§4.8/§4.17 · BUILD_PLAN 10-suporte · 02 §4.11 · 05 §6.2 A
   Alvo 1440: célula y6191→6799 (609px) — cena 687×609 (x33–720), bloco de texto x883–1243
   ========================================================================== */

/* ---------- Célula: 1 col → 2 col iguais ≥1440, sem gap (sem hairline no meio) ---------- */
.sup__cell{display:grid;grid-template-columns:1fr}
@media (min-width:1440px){.sup__cell{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   1. Cena — mesa de carvalho, laptop em perspectiva, pessoa, xícara e caderno
   Tudo vive dentro de um único <svg> (viewBox 688×610 = px medidos na referência):
   sem transform 3D, sem filter e sem mix-blend-mode, para que o .reveal do
   wrapper anime só opacity/transform de um nó barato (REVIEW-motion L-08).
   ========================================================================== */
/* background = média medida da cena (182,164,137), a mesma da foto de referência (181,163,141):
   se o SVG demorar a pintar em algum motor, a caixa não pisca claro. */
.sup__scene{position:relative;aspect-ratio:687/609;overflow:hidden;background:#B6A489}
.sup__art{display:block;width:100%;height:100%}
.sup__dash{font-family:var(--font-display)}

/* Abaixo de 1440 a cena empilha em largura cheia; sem teto ela chega a 1373×1217
   em 1439 e a seção passa de 1600px (REVIEW-mobile S1). Limitar a largura preserva
   o enquadramento inteiro (nada é cortado) e derruba #suporte para ~1000px. */
@media (min-width:769px) and (max-width:1439px){
  /* width:100% é obrigatório: margem inline auto desliga o `stretch` do grid item e
     a caixa cairia para a largura intrínseca do <svg> (300px). */
  .sup__scene{width:100%;max-width:clamp(600px,60vw,700px);margin-inline:auto}
}

/* ==========================================================================
   2. Texto (D6: eyebrow 700 sem margem; título com padding-top)
   ========================================================================== */
.sup__body{display:flex;justify-content:center;align-items:center;padding:var(--sp-8)}
/* padding-bottom compensa exatamente os 8px tirados do padding-top do título: o bloco
   continua com 428px e, centrado nos 609px da célula, a pill fica em y+90 como na
   referência — sem ele, encolher o bloco empurraria a pill 4px para baixo. */
.sup__block{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);padding-bottom:var(--sp-2)}
/* 12px (e não 20) porque o vão medido eyebrow→título é 35px na referência e era 43 aqui
   (REVIEW-fidelidade #23): 16 do gap + 12 = 28 de caixa ⇒ 35 ópticos. */
.sup__title{font:600 var(--fs-h3-support)/1.2 var(--font-display);
  letter-spacing:var(--ls-h3-section-sm);color:var(--c-ink-900);padding-top:var(--sp-3)}
.sup__link{margin-top:var(--sp-16)}
/* Cor medida na referência (desktop-slice-6.png, x880–1025 / y670–696): os 288 px mais
   verdes do link "Entre em contato →" são exatamente rgb(88,196,17) = --c-green. O padrão
   .link-u usa --c-link-green (#5B21B6), que passa em AA mas muda a cor do design.
   Mesmo tratamento de 06-docs; desvio registrado em qa/A11Y-DESVIOS-ACEITOS.md. */
.sup__link a{color:var(--c-green)}
.sup__link .link-u__bar{background:var(--c-green)}

@media (min-width:1440px){
  .sup__block{max-width:360px}
}

/* PicPag: texto à esquerda, cena à direita (o original era o inverso) */
@media (min-width:1440px){ .sup__scene{order:2} }