/* =========================================================================
   ARK — Página FEATURES (V4)
   Reusa o design system da V4 (tokens, componentes, telas .scr).
   ========================================================================= */
@import url("styles-v4.css");

/* ---------- Header da página ---------- */
.feat-header { position: relative; overflow: hidden; padding: 150px 0 clamp(30px, 5vw, 60px); }
.feat-header-amb {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 20% 4%, rgba(79, 143, 247, .2), transparent 60%),
    radial-gradient(50% 45% at 92% 20%, rgba(143, 212, 255, .1), transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 62%);
}
.feat-header .wrap { position: relative; z-index: 2; }
.feat-header h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); letter-spacing: -.045em; max-width: 16ch; color: var(--text); }
.feat-header .lead { margin-top: 22px; font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: var(--text-dim); max-width: 640px; }

/* índice de features (pills que rolam até a seção) */
.feat-index { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.feat-index a { scroll-margin-top: 90px; }

/* ---------- Seção de feature (alternada) ---------- */
.feat { position: relative; overflow: hidden; padding: clamp(50px, 7vw, 96px) 0; scroll-margin-top: 80px; }
.feat + .feat { border-top: 1px solid var(--line-soft); }
.feat-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(30px, 4.5vw, 68px); align-items: center; position: relative; z-index: 1; }
.feat.rev .feat-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.feat.rev .feat-copy { order: 2; }
.feat-copy { text-align: left; }
.feat-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 18px; }
.feat-label .n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); color: var(--text-dim); font-size: .72rem; letter-spacing: 0; }
.feat-label .beta { letter-spacing: .04em; color: var(--orange-soft); background: rgba(245, 166, 35, .12); border: 1px solid rgba(245, 166, 35, .3); border-radius: 100px; padding: 2px 9px; font-size: .62rem; }
.feat-copy h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); color: var(--text); line-height: 1.08; }
.feat-copy .desc { margin-top: 16px; font-size: 1.04rem; color: var(--text-dim); max-width: 52ch; }
.feat-points { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.feat-points li { position: relative; padding-left: 28px; font-size: .96rem; color: var(--text-dim); }
.feat-points li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 15px; height: 15px; border-radius: 50%;
  background: rgba(79, 143, 247, .16);
  box-shadow: inset 0 0 0 1.5px var(--blue);
}
.feat-points li b { color: var(--text); font-weight: 700; }

/* visual da feature — a tela pode sangrar levemente.
   VISÍVEL por padrão (à prova de cache/JS-falho); só esconde/anima quando o
   JS atual adiciona body.feat-anim. Entra pelo lado em que a tela está. */
.feat-visual { position: relative; z-index: 1; min-width: 0; transition: opacity .85s var(--ease-out), transform 1s var(--ease-out); will-change: opacity, transform; }
.feat:not(.rev) .feat-visual { --fx: 90px; }                        /* tela à direita → entra da direita */
.feat.rev .feat-visual { --fx: -90px; }                             /* tela à esquerda → entra da esquerda */
body.feat-anim .feat-visual { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 0px)); }
body.feat-anim .feat-visual.in { opacity: 1; transform: translate(0, 0); }
.feat .appwin, .feat .scr { width: 100%; }
/* a .scr herda opacity:0 + translateX(64px) do stepper da Home (styles-v4);
   aqui não há stepper, então a tela deve ser sempre visível e sem transform
   (o slide de entrada é feito pelo wrapper .feat-visual). */
.feat .scr, .feat .appwin { opacity: 1; transform: none; }
.feat.bleed-l .feat-visual .scr { margin-left: auto; }
.feat-glow { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.feat-glow::before { content: ""; position: absolute; width: 70%; height: 70%; top: 12%; left: 15%; background: radial-gradient(closest-side, rgba(79, 143, 247, .16), transparent 74%); }

/* silhueta line-draw de fundo em seções pares */
.feat .ark-sil { z-index: 0; }

/* ---------- Menu lateral COMPACTO (só ícones) nas telas desta página ----------
   font-size:0 esconde o rótulo de texto; o svg tem tamanho fixo, não é afetado. */
.feat .scr-body { grid-template-columns: 52px 1fr; }

/* A tela tem os MESMOS 850px do showcase da Home: mesma proporção, mesmas quebras
   de texto e a mesma altura de antes. */
@media (min-width: 961px) {
  .feat-visual .scr { width: 850px; }
}

/* A partir de 1200px a grade sangra até a borda da janela e a coluna do visual passa
   a ter 850px fixos. A tela aparece INTEIRA e encostada no canto do monitor, avançando
   sobre a margem do texto (que fica mais estreito). Mesma técnica do showcase da Home. */
@media (min-width: 1200px) {
  .feat > .wrap { max-width: none; padding: 0; }
  .feat:not(.rev) .feat-grid {
    grid-template-columns: minmax(0, 1fr) 850px;
    padding-left: max(40px, calc((100% - var(--maxw)) / 2 + 40px));
  }
  .feat.rev .feat-grid {
    grid-template-columns: 850px minmax(0, 1fr);
    padding-right: max(40px, calc((100% - var(--maxw)) / 2 + 40px));
  }
}

/* Laptops menores: não há espaço para 850px sem cobrir o texto, então a tela é
   reduzida para caber INTEIRA na coluna, preservando a proporção. */
@media (min-width: 1100px) and (max-width: 1199px) { .feat-visual .scr { zoom: .62; } }
@media (min-width: 1000px) and (max-width: 1099px) { .feat-visual .scr { zoom: .55; } }
@media (min-width: 961px)  and (max-width: 999px)  { .feat-visual .scr { zoom: .53; } }
.feat .scr .app-side { padding: 12px 6px; }
.feat .scr .side-logo { justify-content: center; gap: 0; font-size: 0; padding: 2px 0 12px; }
.feat .scr .side-nav .si { justify-content: center; gap: 0; font-size: 0; padding: 9px 0; }
.feat .scr .side-nav .si svg { width: 15px; height: 15px; flex: none; }

/* ---------- Apuração Assistida (tabela, fiel ao print do app) ---------- */
.apur-table { margin-top: 9px; }
.apur-row { display: grid; grid-template-columns: .95fr 1fr .8fr .8fr 1.15fr .7fr; gap: 8px; align-items: center; padding: 9px 10px; font-size: .62rem; color: var(--scr-ink); border-radius: 6px; }
.apur-row.head { font-size: .58rem; font-weight: 700; color: var(--scr-ink); padding-bottom: 7px; border-bottom: 1px solid #e6ebf1; border-radius: 0; }
.apur-row.head span:nth-child(n+3) { text-align: right; }
.apur-row.head span:last-child { text-align: right; }
.apur-row:not(.head):nth-child(odd) { background: #f7f9fb; }
.apur-row.hl { background: var(--scr-amber-bg); }
.apur-row .per { color: var(--scr-ink); }
.apur-row .val { text-align: right; font-variant-numeric: tabular-nums; }
.apur-row .res { text-align: right; color: #d0342c; font-weight: 600; font-variant-numeric: tabular-nums; }
.apur-row .res b { font-weight: 600; color: var(--scr-amber); margin-left: 5px; }
.apur-row .det { text-align: right; color: var(--scr-active); font-weight: 500; }
.apur-st { justify-self: start; font-size: .55rem; font-weight: 600; border-radius: 100px; padding: 3px 9px; white-space: nowrap; }
.apur-st.ajuste { background: #fbedcd; color: #9a6b00; }
.apur-st.done { background: #d9f2e3; color: #126b3c; }


/* ---------- CTA + índice ativo ---------- */
.feat-cta { text-align: center; }
/* a headline do CTA quebra em 2 linhas fixas por <br>; o max-width de 18ch herdado
   de .cta-final (781px) cortaria a 2ª linha, que mede ~840px */
.feat-cta h2 { max-width: none; }
@media (max-width: 700px) { .feat-cta h2 br { display: none; } }  /* no celular, quebra natural */
/* CTA sem parágrafo de apoio: a headline precisa do respiro que o .intro dava */
.feat-cta h2 + div { margin-top: clamp(26px, 3.2vw, 40px); }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .feat-header { padding-top: 120px; }
  /* `.feat.rev .feat-grid` tem especificidade 0,3,0 e vencia um `.feat-grid` sozinho:
     as seções alternadas seguiam em 2 colunas no celular, deixando a tela com 133px
     de largura. Por isso as duas precisam ser listadas aqui. */
  .feat-grid, .feat.rev .feat-grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }
  .feat.rev .feat-copy { order: 0; }
  .feat.bleed-r .feat-visual .scr, .feat.bleed-l .feat-visual .scr { width: 100%; margin: 0; }
  /* o rail de ícones está escondido aqui (styles-v4), mas `.feat .scr-body` mantinha a
     coluna de 52px reservada, roubando largura do conteúdo */
  .feat .scr-body { grid-template-columns: 1fr; }
  .apur-row { grid-template-columns: 1fr .9fr .8fr .8fr 1fr; font-size: .64rem; }
  .apur-row > :last-child { display: none; }   /* esconde "Situação" em telas estreitas */
}

/* Celular: 5 colunas em 331px dariam 66px cada, e "R$ 1.234,56" a 12px mede ~72px.
   A tabela fica em Período · Status · Resultado, que é a história da tela. */
@media (max-width: 640px) {
  /* Sobram ~243px de largura útil. A pílula "Período de ajuste" tem `nowrap` e min-content
     de 122px, e como `.8fr` é `minmax(auto, .8fr)` esse mínimo vencia a proporção: as
     colunas saíam 63/122/58px e o Resultado, com 58px, rachava "− R$ 100,02 Devedor"
     em 3 linhas. Com Status fora sobram ~170px para o Resultado, que cabe em 1 linha. */
  .apur-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); font-size: .75rem; }
  .apur-row > :nth-child(2), .apur-row > :nth-child(3),
  .apur-row > :nth-child(4) { display: none; }
  /* "julho/2026" pede 104px e "− R$ 100,02 Devedor" pede 136px: 240px numa área útil
     de 235px (e 228px a 360px). Não cabe em 1 linha de forma robusta, então o selo
     "Devedor" desce de propósito, alinhado sob o valor — 2 linhas desenhadas, em vez
     de uma quebra acidental no meio do valor. */
  .apur-row .res b { display: block; margin-left: 0; }
  .apur-row.head { font-size: .75rem; }
  .apur-st { font-size: .75rem; padding: 3px 7px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .feat-index a { scroll-margin-top: 0; }
  .feat-visual { opacity: 1 !important; transform: none !important; transition: none; }
}