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

/* ==========================================================================
   Hero: a tela do portal de gestão ocupa a direita e sangra para fora do
   container. Sem a imagem, o texto fica sozinho em uma coluna.
   ========================================================================== */
.hero--home{overflow:hidden;}
.hero--home .hero__in:has(.tela--ok){grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.hero--home .hero__in:has(.tela--ok) h1{font-size:clamp(34px,3.8vw,52px);max-width:none;}
.hero--home .tela{justify-self:start;max-width:none;width:135%;}
.hero--home .tela img{border-radius:var(--r2) 0 0 var(--r2);}

/* ==========================================================================
   Tela grande com legenda de manual: marcadores numerados sobre a imagem
   (posição em % via --x/--y no próprio marcador) e a mesma numeração na
   lista ao lado. Sem marcadores, a lista funciona sozinha.
   ========================================================================== */
.tela--anotada{position:relative;}
.marcador{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--deep);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #fff;}

.legenda{list-style:none;margin:0;padding:0;counter-reset:legenda;display:grid;gap:0;}
.legenda li{counter-increment:legenda;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--rule);font-size:15px;line-height:1.6;color:var(--ink2);}
.legenda li::before{content:counter(legenda);width:22px;height:22px;border-radius:50%;border:1px solid var(--ink);font-size:12px;font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:center;margin-top:1px;}
.legenda strong{color:var(--ink);font-weight:600;}

/* ==========================================================================
   2. A regra é sua
   ========================================================================== */
.regra{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,48px);}
.regra__texto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end;}
.regra__texto .lead{margin-top:0;}
.regra__corpo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,48px);}
/* A coluna da legenda só abre quando a lista existir ao lado da tela. */
.regra__corpo:has(> .tela--ok):has(> .legenda){grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr);align-items:start;}

/* ==========================================================================
   3. Cada valor tem origem: a seção que mais pesa. A cadeia mostra o que
   cada etapa carrega; é um diagrama do conceito, não uma tela.
   ========================================================================== */
.origem h2{max-width:18ch;}
.origem .lead{max-width:720px;}
.cadeia{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink);}
.cadeia li{padding:22px clamp(16px,2.4vw,32px) 0 0;position:relative;}
.cadeia li + li{padding-left:clamp(16px,2.4vw,32px);border-left:1px solid var(--rule2);}
.cadeia h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px;}
.cadeia p{font-size:15px;line-height:1.6;color:var(--ink2);}
.cadeia__campos{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font-family:var(--mono);font-size:13px;color:var(--ink);}
.cadeia__campos li{padding:0;border:0;}
.origem__telas{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,48px);margin-top:clamp(40px,5vw,56px);}
.origem__telas .tela:first-child{max-width:780px;}
.origem__telas:not(:has(.tela--ok)){display:none;}
.origem__nota{margin-top:28px;font-size:15px;line-height:1.6;color:var(--ink2);max-width:720px;}

/* ==========================================================================
   4. Módulos: mapa com a base no meio e os opcionais em volta. A base é
   cheia; o opcional tem contorno tracejado.
   ========================================================================== */
.mapa{margin-top:clamp(40px,5vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px clamp(16px,2.4vw,28px);}
.mapa__base{grid-column:1 / -1;background:var(--deep);color:#fff;border-radius:var(--r2);padding:clamp(22px,2.6vw,30px) clamp(22px,2.6vw,32px);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:10px 32px;align-items:baseline;}
.mapa__base h3{font-size:22px;font-weight:600;letter-spacing:-.015em;}
.mapa__base p{font-size:15px;line-height:1.6;color:var(--on-deep);}
.mapa__rotulo{display:block;font-size:13px;font-weight:500;color:var(--on-deep2);margin-bottom:4px;}
.mapa__mod{border:1px dashed var(--rule2);border-radius:var(--r2);padding:18px 20px;position:relative;}
.mapa__mod h3{font-size:16px;font-weight:600;margin-bottom:4px;}
.mapa__mod p{font-size:14px;line-height:1.55;color:var(--ink2);}
/* Linhas finas ligando cada opcional à base */
.mapa__mod--cima::after,.mapa__mod--baixo::after{content:"";position:absolute;left:50%;width:1px;height:18px;background:var(--rule2);}
.mapa__mod--cima::after{top:100%;}
.mapa__mod--baixo::after{bottom:100%;}
.mapa__legenda{margin-top:20px;font-size:14px;color:var(--ink3);}

/* ==========================================================================
   5. Integração: lista em duas colunas, só tipografia
   ========================================================================== */
.integracao{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start;}
.integracao__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,40px);}
.integracao__lista li{padding:14px 0;border-top:1px solid var(--rule);font-size:16px;font-weight:500;color:var(--ink);}
.integracao__lista span{display:block;font-size:14px;font-weight:400;line-height:1.5;color:var(--ink3);margin-top:2px;}

/* ==========================================================================
   6. Migração: linha do tempo das fases e os quatro pontos da troca
   ========================================================================== */
.fases{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:fase;}
.fase{counter-increment:fase;position:relative;padding:34px clamp(10px,1.6vw,20px) 0 0;}
.fase::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--primary);}
.fase:last-child::before{right:auto;width:20px;}
.fase::after{content:counter(fase);position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--paper);border:2px solid var(--primary);color:var(--primary);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}
.fase h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px;}
.fase p{font-size:14px;line-height:1.55;color:var(--ink2);}

.troca{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,6vw,96px);}
.troca div{padding:22px 0;border-top:1px solid var(--rule2);}
.troca h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px;}
.troca p{font-size:16px;line-height:1.65;color:var(--ink2);}

/* ==========================================================================
   7. Produtos: lista de consulta e, ao lado, o white label
   ========================================================================== */
.produtos{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center;}
.produtos__lista{list-style:none;margin:28px 0 0;padding:0;}
.produtos__lista li{padding:13px 0;border-top:1px solid var(--rule);font-size:16px;line-height:1.55;color:var(--ink2);}
.produtos__lista li:last-child{border-bottom:1px solid var(--rule);}
.produtos__lista strong{color:var(--ink);font-weight:600;}

.white-label{display:flex;justify-content:center;gap:clamp(14px,2vw,24px);}
.white-label .tela{max-width:240px;width:100%;}
.white-label:has(.tela--ok) .cartoes{display:none;}

/* Cartões ilustrativos, marcas fictícias: sem chip, sem número de bandeira,
   só os quatro últimos dígitos. */
.cartoes{position:relative;width:100%;max-width:400px;aspect-ratio:1.1;}
.cartao{position:absolute;width:74%;aspect-ratio:1.586;border-radius:var(--r2);padding:22px 24px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 18px 40px rgba(11,16,32,.18);}
.cartao--a{left:0;top:0;background:#0A6B5E;}
.cartao--b{right:0;bottom:0;background:#2D3270;}
.cartao__marca{font-size:19px;font-weight:600;letter-spacing:-.01em;}
.cartao__final{font-family:var(--mono);font-size:15px;letter-spacing:.08em;opacity:.9;}

/* ==========================================================================
   8. Segurança: fatos curtos, sem ícone
   ========================================================================== */
.fatos{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,6vw,96px);}
.fatos li{padding:18px 0;border-top:1px solid var(--rule);font-size:16px;line-height:1.6;color:var(--ink2);}

/* ==========================================================================
   9. Captura
   ========================================================================== */
.captura-bloco{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;}
.captura-bloco:has(> .tela--ok){grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);}
.captura-bloco .tela{max-width:280px;width:100%;justify-self:center;}
.captura-bloco .btn{margin-top:28px;}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width:1080px){
  .fases{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);overflow-x:auto;padding-bottom:12px;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);}
}
@media (max-width:900px){
  .hero--home .hero__in:has(.tela--ok){grid-template-columns:minmax(0,1fr);}
  .hero--home .tela{width:115%;}
  .regra__texto,.regra__corpo:has(> .tela--ok):has(> .legenda),.integracao,.produtos,.captura-bloco:has(> .tela--ok){grid-template-columns:minmax(0,1fr);}
  .cadeia{grid-template-columns:minmax(0,1fr);border-top:0;}
  .cadeia li,.cadeia li + li{padding:20px 0;border-left:0;border-top:1px solid var(--rule2);}
  .cadeia li:first-child{border-top:2px solid var(--ink);}
  .mapa{grid-template-columns:minmax(0,1fr);}
  .mapa__base{grid-row:1;grid-template-columns:minmax(0,1fr);}
  .mapa__mod--cima::after,.mapa__mod--baixo::after{display:none;}
  .troca,.fatos{grid-template-columns:minmax(0,1fr);}
  .captura-bloco .tela{order:2;}
}
@media (max-width:560px){
  .integracao__lista{grid-template-columns:minmax(0,1fr);}
}