/* ==========================================================================
   Cardexa Captura: componentes desta página. A base (fontes, tokens, botões,
   cabeçalho, hero, contato, rodapé) está em base.css.
   ========================================================================== */

/* ==========================================================================
   O problema: título à esquerda, lista simples à direita, sem caixas
   ========================================================================== */
.problema{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:start;}
.problema__lista{list-style:none;margin:0;padding:0;}
.problema__lista li{padding:20px 0;border-top:1px solid var(--rule);font-size:17px;line-height:1.6;color:var(--ink2);}
.problema__lista li:last-child{border-bottom:1px solid var(--rule);}
.problema__lista strong{color:var(--ink);font-weight:600;}

/* ==========================================================================
   Como funciona: a seção central. Cinco etapas em sequência, cada uma com a
   tela do app correspondente; a nota da zona cinzenta fica ao lado do título.
   ========================================================================== */
.etapas-topo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,64px);}
.nota{border-left:2px solid var(--primary);padding:2px 0 2px 18px;font-size:15px;line-height:1.6;color:var(--ink2);}
.nota strong{color:var(--ink);font-weight:600;}

.tira{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,64px);max-width:980px;margin:0 auto clamp(48px,6vw,80px);}
.tira:not(:has(.tela--ok)){display:none;}
.tira .tela img{max-width:280px;margin:0 auto;}
.tira figcaption{max-width:280px;margin:14px auto 0;text-align:center;}

.etapas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px);counter-reset:etapa;}
.etapa{display:flex;flex-direction:column;gap:12px;min-width:0;}
.etapa__num{font-size:15px;font-weight:600;color:var(--primary);padding-top:14px;border-top:2px solid var(--primary);font-variant-numeric:tabular-nums;}
.etapa h3{font-size:20px;font-weight:600;letter-spacing:-.01em;}
.etapa p{font-size:15px;line-height:1.6;color:var(--ink2);}

/* ==========================================================================
   Recursos: dois blocos com imagem (loja e retaguarda) e uma faixa de texto
   ========================================================================== */
.bloco{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;margin-top:clamp(40px,5vw,64px);}
.bloco--app:has(> .tela--ok){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);}
.bloco--app .tela{max-width:320px;justify-self:center;width:100%;}
.bloco--portal{grid-template-columns:minmax(0,1fr);gap:28px;}
.bloco__rotulo{font-size:15px;font-weight:600;color:var(--primary);margin-bottom:10px;}
.bloco h3{font-size:clamp(22px,2.2vw,28px);line-height:1.2;font-weight:600;letter-spacing:-.02em;max-width:24ch;}

.anotacoes{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0;}
.anotacoes li{padding:16px 0;border-top:1px solid var(--rule);font-size:16px;line-height:1.6;color:var(--ink2);}
.anotacoes strong{display:block;color:var(--ink);font-weight:600;margin-bottom:2px;}
.bloco--app .anotacoes{max-width:780px;}
.anotacoes--colunas{margin-top:0;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));column-gap:clamp(24px,3vw,48px);}

.faixa{margin-top:clamp(56px,7vw,96px);padding:clamp(28px,3.5vw,40px) 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);}
.faixa h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px;}
.faixa p{font-size:15px;line-height:1.6;color:var(--ink2);}

/* ==========================================================================
   Para quem: duas colunas de mesmo peso, só tipografia
   ========================================================================== */
.publicos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,96px);margin-top:36px;}
.publicos h3{font-size:22px;font-weight:600;letter-spacing:-.015em;margin-bottom:12px;}
.publicos p{font-size:16px;line-height:1.65;color:var(--ink2);}

/* ==========================================================================
   Confiança: o pacote de evidências prova o argumento; os pontos de
   conformidade ficam ao lado, como legenda.
   ========================================================================== */
.artefatos{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:clamp(40px,5vw,56px);}

.registro{background:#fff;border:1px solid var(--rule2);border-radius:var(--r2);overflow:hidden;min-width:0;}
.registro__cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid var(--rule);}
.registro__titulo{font-size:15px;font-weight:600;}
.registro__id{font-family:var(--mono);font-size:13px;color:var(--ink3);}
.registro table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px;line-height:1.5;}
.registro th,.registro td{text-align:left;vertical-align:top;padding:9px 22px;border-bottom:1px solid var(--rule);}
.registro th{font-family:'IBM Plex Sans',Helvetica,system-ui,sans-serif;font-weight:500;font-size:13px;color:var(--ink3);white-space:nowrap;width:1%;}
.registro td{color:var(--ink);word-break:break-word;}
.registro tr:last-child th,.registro tr:last-child td{border-bottom:none;}
.registro .ok{color:var(--primary);font-weight:600;}
.registro__nota{padding:12px 22px;font-size:12.5px;line-height:1.5;color:var(--ink3);border-top:1px solid var(--rule);background:var(--paper);}

.legendas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px clamp(24px,4vw,48px);}
.legendas li{font-size:15px;line-height:1.6;color:var(--ink2);}
.legendas strong{color:var(--ink);font-weight:600;}

/* ==========================================================================
   Integração: diagrama simples do caminho da proposta
   ========================================================================== */
.integra{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center;}
.fluxo{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.fluxo li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--rule);}
.fluxo li:last-child{border-bottom:1px solid var(--rule);}
.fluxo__no{font-weight:600;font-size:15px;color:var(--ink);}
.fluxo__oque{font-size:15px;line-height:1.55;color:var(--ink2);}
.integra .btn{margin-top:28px;}


/* ==========================================================================
   Perguntas frequentes
   ========================================================================== */
.faq{margin-top:36px;}
.faq__item{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px clamp(24px,4vw,56px);padding:22px 0;border-top:1px solid var(--rule);}
.faq__item h3{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.4;}
.faq__item p{font-size:16px;line-height:1.65;color:var(--ink2);}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width:1080px){
  .etapas{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);}
  .etapa{scroll-snap-align:start;}
  .tira{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);}
  .tira .tela{scroll-snap-align:start;}
}
@media (max-width:900px){
  .problema,.etapas-topo,.bloco,.bloco--app:has(> .tela--ok),.artefatos,.integra{grid-template-columns:minmax(0,1fr);}
  .bloco--app .tela{order:2;}
  .faixa,.legendas{grid-template-columns:minmax(0,1fr);}
  .publicos{grid-template-columns:minmax(0,1fr);}
  .faq__item{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:560px){
  .fluxo li{grid-template-columns:minmax(0,1fr);gap:4px;}
  .registro th,.registro td{padding:8px 14px;}
  .registro th{white-space:normal;}
}