/* Páginas públicas (apresentação, entrar, privacidade) */
body.site { padding-bottom: 0; }
.site .barra-in { gap: var(--e3); }
.site-nav { display: none; gap: var(--e2); }
.site-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--e4); border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--tinta-2); }
.site-nav a:hover { background: var(--leve); color: var(--cobalto); }
.site-acoes { display: flex; align-items: center; gap: var(--e2); }
.botao.pequeno { width: auto; min-height: 44px; padding: 0 var(--e4); font-size: var(--t-peq); }
.site-acoes .conta-btn { display: none; }
.botao.claro { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.botao.claro:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.botao.mostarda, .botao.claro { text-align: center; }

/* Herói da apresentação */
.heroi-site { border-radius: 0 0 40px 40px; padding: var(--e7) 0 var(--e8); }
.heroi-site h1 { font-size: clamp(2.5rem, 1.4rem + 5vw, 5rem); }
.heroi-site .sub { max-width: 40ch; }
.heroi-botoes { display: grid; gap: var(--e3); max-width: 420px; }
.heroi-botoes .botao { max-width: none; }
.nota { margin-top: var(--e4); color: #C9D8F5; font-size: var(--t-peq); font-weight: 600; max-width: 44ch; }

/* Telemóvel de demonstração */
.telemovel { color: var(--tinta); justify-self: center; width: min(320px, 100%); background: #0B1C47; border-radius: 40px; padding: 10px; box-shadow: 0 30px 70px rgba(5, 14, 40, .55); transform: rotate(3deg); }
.tel-ecra { background: var(--cal); border-radius: 32px; padding: var(--e5) var(--e4) var(--e5); display: grid; gap: var(--e3); }
.tel-cesto { display: flex; gap: var(--e3); padding: var(--e3) 0 var(--e1); }
.tel-cartao { background: var(--branco); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.tel-cartao .capa { height: 130px; }
.tel-cartao .capa .azl { width: 66px; height: 66px; padding: 8px; }
.tel-cartao .corpo { padding: var(--e4); display: grid; gap: var(--e2); }
.tel-cartao h3 { font-size: 1.125rem; }

/* Números */
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e4); margin-top: calc(var(--e7) * -1); position: relative; }
.numeros div { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra-2); padding: var(--e5) var(--e4); text-align: center; display: grid; gap: var(--e1); }
.numeros strong { font-family: var(--titulo); font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1; color: var(--cobalto); }
.numeros span { color: var(--tinta-2); font-weight: 700; font-size: var(--t-peq); }

/* Blocos */
.bloco { padding: var(--e8) var(--e4) 0; }
.bloco.cont { padding-left: var(--e4); padding-right: var(--e4); }
.bloco h2 { margin: var(--e2) 0 var(--e6); font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); line-height: 1.04; max-width: 20ch; }
.bloco h2 em { color: var(--coral); }
.bloco-claro { background: var(--leve); margin-top: var(--e8); padding-bottom: var(--e8); border-radius: 40px; }
.bloco-claro .cont { padding: 0 var(--e4); }

.passos { display: grid; gap: var(--e4); }
.passo-card { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: var(--e5); display: grid; gap: var(--e3); align-content: start; }
.passo-card .azl-linha { display: flex; gap: var(--e3); padding: var(--e2) 0; }
.passo-card .azl { width: 76px; height: 76px; padding: 9px; box-shadow: 0 6px 16px rgba(23, 57, 138, .18), inset 0 0 0 1.5px var(--azul-gelo); }
.passo-card p { color: var(--tinta-2); font-weight: 500; }

.funcs { display: grid; gap: var(--e4); }
.funcs article { background: var(--branco); border-radius: var(--raio); padding: var(--e5); display: grid; gap: var(--e2); box-shadow: var(--sombra); }
.funcs .glifo { width: 52px; height: 52px; }
.funcs p, .quem p, .opcao p { color: var(--tinta-2); font-weight: 500; }

.quem { display: grid; gap: var(--e4); }
.quem article { border-left: 5px solid var(--mostarda); padding: var(--e2) 0 var(--e2) var(--e4); display: grid; gap: var(--e2); }

.duas-colunas { display: grid; gap: var(--e4); }
.opcao { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: var(--e6) var(--e5); display: grid; gap: var(--e4); align-content: start; }
.opcao.destaque { background: var(--gradiente); color: #fff; }
.opcao.destaque p { color: #D6E2F8; }
.opcao .botao { margin-top: var(--e2); }

.final { margin-top: var(--e8); background: var(--gradiente); color: #fff; border-radius: 40px 40px 0 0; padding: var(--e8) 0; text-align: center; }
.final .cont { display: grid; gap: var(--e4); justify-items: center; }
.final h2 { font-size: clamp(2.25rem, 1.4rem + 4vw, 4rem); line-height: 1.02; }
.final h2 em { color: var(--mostarda); }
.final p { color: #D6E2F8; font-weight: 600; }
.final .botao { max-width: 320px; }

.rodape { background: #0F2A6C; color: #C9D8F5; padding: var(--e5) 0; font-weight: 600; }
.rodape-in { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); justify-content: space-between; align-items: center; }
.rodape strong { color: #fff; }
.rodape nav { display: flex; gap: var(--e4); }
.rodape a { color: #fff; text-underline-offset: 3px; display: inline-flex; min-height: 44px; align-items: center; }

/* Entrar / Criar conta */
.entrar { min-height: 100vh; display: grid; }
.entrar-lado { background: var(--gradiente); color: #fff; padding: var(--e6) var(--e4) var(--e7); display: grid; gap: var(--e4); align-content: center; border-radius: 0 0 36px 36px; }
.entrar-lado .marca-nome { color: #fff; }
.entrar-lado .marca-nome em { color: var(--mostarda); }
.entrar-lado h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
.entrar-lado h1 em { color: var(--mostarda); }
.entrar-lado p { color: #D6E2F8; font-weight: 600; max-width: 36ch; }
.entrar-lado .azl-linha { display: none; }
.entrar-caixa { padding: var(--e6) var(--e4) var(--e7); display: grid; align-content: center; justify-items: center; }
.entrar-cartao { width: min(440px, 100%); display: grid; gap: var(--e4); }
.separador { display: flex; align-items: center; gap: var(--e3); color: var(--tinta-2); font-weight: 700; font-size: var(--t-peq); }
.separador::before, .separador::after { content: ""; height: 1px; background: var(--linha); flex: 1; }
.separador-vazio { display: none; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--leve); border-radius: 999px; padding: 4px; }
.tabs button { min-height: 48px; border: 0; border-radius: 999px; background: transparent; font-weight: 800; color: var(--tinta-2); }
.tabs button[aria-selected="true"] { background: var(--branco); color: var(--cobalto); box-shadow: var(--sombra); }
.form { display: grid; gap: var(--e4); }
.ajuda { color: var(--tinta-2); font-size: var(--t-peq); font-weight: 600; }
.sem-conta { text-align: center; }

/* Texto legal */
.texto-legal { max-width: 720px; margin: 0 auto; padding: var(--e7) var(--e4) var(--e8); display: grid; gap: var(--e4); }
.texto-legal h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); }
.texto-legal h2 { font-size: 1.5rem; margin-top: var(--e4); }
.texto-legal ul { padding-left: 1.2em; display: grid; gap: var(--e2); }
.texto-legal .aviso-pendente { background: #FDF4D9; border-radius: var(--raio-m); padding: var(--e4); font-weight: 600; }

@media (min-width: 720px) {
  .heroi-botoes { grid-template-columns: 1fr 1fr; max-width: 560px; }
  .numeros { grid-template-columns: repeat(4, 1fr); }
  .passos, .funcs, .quem { grid-template-columns: repeat(3, 1fr); }
  .funcs { grid-template-columns: repeat(2, 1fr); }
  .duas-colunas { grid-template-columns: 1fr 1fr; }
  .site-acoes .conta-btn { display: inline-flex; }
}

@media (min-width: 960px) {
  .site-nav { display: flex; }
  .heroi-site { padding: var(--e8) 0 calc(var(--e8) + var(--e7)); border-radius: 0 0 56px 56px; }
  .heroi-site .heroi-in { grid-template-columns: 1.15fr 1fr; }
  .funcs { grid-template-columns: repeat(3, 1fr); }
  .bloco-claro { border-radius: 56px; margin-left: var(--e5); margin-right: var(--e5); }
  .final { border-radius: 56px 56px 0 0; }

  .entrar { grid-template-columns: 1fr 1fr; }
  .entrar-lado { border-radius: 0 48px 48px 0; padding: var(--e8) var(--e7); }
  .entrar-lado .azl-linha { display: flex; gap: var(--e4); margin-top: var(--e5); }
  .entrar-lado .azl { width: 110px; height: 110px; padding: 14px; }
  .entrar-caixa { padding: var(--e7); }
}