/* Apps do Marketing GRF: uma coluna de cartões, como um linktree, com a identidade da GRF
   (azul #2e479a e tons claros, Poppins, formas arredondadas). Mesmas cores do NPS GRF; tema claro e escuro pelo aparelho. */
:root{
  --bg-1:#F8FAFF; --bg-2:#E3EAFA; --surface:#FFFFFF; --ink:#151B34; --ink-2:#4A5069; --muted:#6B728C; --line:#DFE3EE;
  --brand:#2e479a; --brand-soft:#E3E9FA; --foco:#2e479a;
  --logo-claro:block; --logo-escuro:none;
  --font:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:22px;
  --sombra:0 1px 2px rgba(21,27,52,.05), 0 6px 20px -8px rgba(21,27,52,.14);
  --sombra-on:0 2px 4px rgba(21,27,52,.06), 0 14px 30px -10px rgba(46,71,154,.32);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg-1:#0C1126; --bg-2:#141A33; --surface:#151C35; --ink:#EDF0FA; --ink-2:#B7BED6; --muted:#8C93AE; --line:#273052;
    --brand:#9AAAF5; --brand-soft:#1F2A55; --foco:#9AAAF5;
    --logo-claro:none; --logo-escuro:block;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -10px rgba(0,0,0,.55);
    --sombra-on:0 2px 4px rgba(0,0,0,.35), 0 16px 32px -10px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--font);color:var(--ink);
  background:var(--bg-1) linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 100%) fixed;
  -webkit-font-smoothing:antialiased}

.pagina{max-width:520px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:26px;min-height:100vh;min-height:100dvh}

.topo{text-align:center;display:flex;flex-direction:column;align-items:center}
.logo{width:120px;height:auto;margin-bottom:18px}
.logo.claro{display:var(--logo-claro)}
.logo.escuro{display:var(--logo-escuro)}
.eyebrow{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
h1{margin:0;font-size:clamp(28px,7.5vw,36px);line-height:1.15;font-weight:700;letter-spacing:-.01em}
.sub{margin:10px 0 0;max-width:36ch;font-size:15px;line-height:1.55;color:var(--ink-2)}

.apps{display:flex;flex-direction:column;gap:14px}
.app{display:flex;align-items:center;gap:16px;padding:16px 18px 16px 16px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sombra);
  color:inherit;text-decoration:none;min-height:88px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.app:hover{transform:translateY(-2px);box-shadow:var(--sombra-on);border-color:var(--brand-soft)}
.app:active{transform:translateY(0) scale(.99)}
.app:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.icone{flex:none;width:56px;height:56px;border-radius:16px}
.texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nome{font-size:17px;font-weight:600;line-height:1.3}
.desc{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.login{margin-top:4px;display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.login svg{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.seta{flex:none;width:22px;height:22px;fill:none;stroke:var(--brand);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.rodape{margin-top:auto;text-align:center;font-size:12px;line-height:1.6;color:var(--muted)}
.rodape p{margin:0}

@media (max-width: 420px){
  .app{gap:13px;padding:14px 14px 14px 14px;min-height:0}
  .icone{width:50px;height:50px;border-radius:14px}
  .nome{font-size:16px}
  .desc{font-size:13px}
}

@media (prefers-reduced-motion: reduce){ .app{transition:none} .app:hover{transform:none} }