/* e-link: landing page do cartão fidelidade digital. Identidade própria, separada do site principal. */
:root{
  --el-marinho:#0B2D5B;
  --el-azul:#2563EB;
  --el-turquesa:#06D6C7;
  --el-claro:#F5F8FF;
  --el-texto:#1E2A3B;
  --el-suave:#5A6B82;
  --el-borda:#DCE5F3;
  /* Inter quando estiver instalada no computador; senão, a fonte do sistema */
  --el-fonte:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--el-fonte);color:var(--el-texto);background:#fff;line-height:1.6}
img{max-width:100%}
a{color:var(--el-azul)}
:focus-visible{outline:3px solid var(--el-azul);outline-offset:3px;border-radius:6px}
h1,h2,h3{color:var(--el-marinho);line-height:1.12;letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0 0 10px}
h3{font-size:1.1rem;margin:0 0 6px}

.el-largura{width:100%;max-width:1160px;margin:0 auto;padding:0 5vw}

/* Botões */
.el-botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--el-azul);color:#fff;font-weight:700;text-decoration:none;border-radius:10px;padding:10px 18px;border:2px solid var(--el-azul);line-height:1.2;white-space:nowrap}
.el-botao:hover{background:var(--el-marinho);border-color:var(--el-marinho)}
.el-botao-contorno{background:#fff;color:var(--el-azul)}
.el-botao-contorno:hover{background:var(--el-claro);color:var(--el-marinho);border-color:var(--el-marinho)}
.el-botao-grande{padding:14px 24px;font-size:1.05rem}
.el-botao-cheio{width:100%}
.el-botao-claro{background:#fff;color:var(--el-marinho);border-color:#fff}
.el-botao-claro:hover{background:var(--el-turquesa);border-color:var(--el-turquesa);color:var(--el-marinho)}

/* Topo */
.el-topo{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--el-borda)}
.el-topo-linha{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:12px;padding-bottom:12px}
.el-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.el-marca{font-size:1.9rem;font-weight:800;color:var(--el-marinho);letter-spacing:-.03em;display:inline-flex;align-items:center}
.el-marca-pequena{font-size:1.4rem}
/* O traço turquesa do logo */
.el-traco{display:inline-block;width:.42em;height:.16em;background:var(--el-turquesa);margin:0 .05em;border-radius:1px;transform:translateY(.05em)}
.el-menu{display:flex;gap:28px}
.el-menu a{color:var(--el-texto);text-decoration:none;font-weight:500;font-size:.95rem}
.el-menu a:hover{color:var(--el-azul)}
.el-topo-acoes{display:flex;gap:10px}

/* Abertura */
.el-hero{background:radial-gradient(circle at 85% 20%,#dfeaff 0,transparent 45%),radial-gradient(circle at 70% 90%,#d7fbf8 0,transparent 35%),#fff;padding:64px 0 48px;overflow:hidden}
.el-hero-grade{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.el-sobretitulo{text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;font-weight:600;color:var(--el-suave);margin:0 0 14px}
.el-hero h1{font-size:clamp(2.4rem,5.4vw,4rem);margin:0 0 20px}
.el-destaque{background:linear-gradient(90deg,var(--el-azul),#1aa6c9);-webkit-background-clip:text;background-clip:text;color:transparent}
.el-hero-sub{font-size:1.12rem;color:var(--el-suave);max-width:52ch;margin:0 0 28px}
.el-hero-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.el-checks{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.9rem;color:var(--el-suave)}
.el-checks li{display:flex;align-items:center;gap:8px}
.el-checks li::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#d7fbf8;color:#047a72;font-size:.75rem;font-weight:800;flex:none}
.el-checks-coluna{flex-direction:column;margin:20px 0}

/* Celular ilustrado */
.el-hero-visual{position:relative;display:flex;justify-content:center}
.el-celular{width:280px;border-radius:40px;background:var(--el-marinho);padding:12px;box-shadow:0 30px 60px rgba(11,45,91,.25)}
.el-celular-tela{background:var(--el-claro);border-radius:30px;padding:22px 16px;min-height:480px}
.el-cel-marca{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:800;color:var(--el-marinho);margin:0 0 16px}
.el-cel-cartao{background:#fff;border:2px solid var(--el-marinho);border-radius:18px;padding:16px;text-align:center}
.el-cel-loja{margin:0;font-size:.75rem;color:var(--el-suave);font-weight:600}
.el-cel-programa{margin:0 0 12px;font-weight:800;color:var(--el-marinho)}
.el-cel-carimbos{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:12px}
.el-cel-carimbos span{aspect-ratio:1;border-radius:50%;border:2px dashed #b8c4d6;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#8a99ad;font-weight:700}
.el-cel-carimbos .feito{border:0;background:linear-gradient(135deg,var(--el-azul),var(--el-turquesa));color:#fff;font-size:.9rem}
.el-cel-status{margin:0;font-size:.78rem}
.el-cel-aviso{margin-top:14px;background:#e3f8ef;color:#0b5d4a;border-radius:14px;padding:12px;text-align:center;font-size:.8rem;display:flex;flex-direction:column}
.el-cel-aviso strong{font-size:.95rem}
.el-notificacao{position:absolute;left:0;bottom:40px;background:#fff;border:1px solid var(--el-borda);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:12px;font-size:.85rem;box-shadow:0 12px 30px rgba(11,45,91,.15)}
.el-notificacao-icone{width:32px;height:32px;border-radius:50%;background:var(--el-azul);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}

/* Destaques */
.el-destaques{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:-8px;margin-bottom:24px;background:#fff;border:1px solid var(--el-borda);border-radius:18px;padding:22px 8px}
.el-destaques>div{display:flex;align-items:center;gap:14px;padding:4px 20px}
.el-destaques>div+div{border-left:1px solid var(--el-borda)}
.el-destaques p{margin:0;font-size:.88rem;color:var(--el-suave);line-height:1.35}
.el-destaques strong{display:block;font-size:1.25rem;color:var(--el-marinho)}

/* Ícones */
.el-icone{width:48px;height:48px;border-radius:14px;background:#e8f0ff;color:var(--el-azul);display:inline-flex;align-items:center;justify-content:center;flex:none}
.el-icone svg{width:26px;height:26px}
.el-icone-grande{width:64px;height:64px;border-radius:18px}
.el-icone-grande svg{width:34px;height:34px}

/* Seções */
.el-secao{padding:80px 0}
.el-fundo-claro{background:var(--el-claro)}
.el-secao-sub{color:var(--el-suave);margin:0 0 40px;max-width:60ch}

.el-recursos{display:grid;grid-template-columns:.8fr 2fr;gap:48px;align-items:start}
.el-recursos-titulo p{color:var(--el-suave)}
.el-recursos-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.el-recursos-grade article{border:1px solid var(--el-borda);border-radius:16px;padding:22px}
.el-recursos-grade article .el-icone{margin-bottom:14px}
.el-recursos-grade p,.el-passos p,.el-negocios p{margin:0;color:var(--el-suave);font-size:.93rem}

.el-passos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:none}
.el-passos li{position:relative}
.el-passo-numero{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--el-azul);color:#fff;font-weight:800;font-size:1.1rem;margin-bottom:16px}
.el-passos li:not(:last-child)::after{content:"";position:absolute;top:22px;left:60px;right:-16px;border-top:2px dashed #b9c9e6}

/* Painel ilustrado */
.el-plataforma{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.el-plataforma-texto p{color:var(--el-suave)}
.el-notebook-tela{display:grid;grid-template-columns:140px 1fr;background:#fff;border:10px solid #1b2433;border-bottom:0;border-radius:16px 16px 0 0;min-height:300px;overflow:hidden}
.el-notebook-base{height:16px;background:linear-gradient(#cfd6e2,#a9b3c3);border-radius:0 0 18px 18px;margin:0 -24px}
.el-painel-lateral{background:var(--el-claro);padding:14px 10px;display:flex;flex-direction:column;gap:6px;font-size:.78rem;color:var(--el-suave)}
.el-painel-lateral .el-cel-marca{justify-content:flex-start;margin-bottom:10px;font-size:.9rem}
.el-painel-lateral span{padding:6px 10px;border-radius:8px}
.el-painel-lateral .ativo{background:#dfe9ff;color:var(--el-azul);font-weight:700}
.el-painel-conteudo{padding:16px 18px;font-size:.8rem}
.el-painel-titulo{font-weight:800;color:var(--el-marinho);margin:0 0 10px}
.el-painel-ficha{background:var(--el-marinho);color:#fff;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.el-painel-ficha strong{font-size:1rem}
.el-painel-ficha span{color:#c8d6ee}
.el-painel-tabela>div{display:grid;grid-template-columns:1.4fr 1fr 1fr;padding:8px 0;border-top:1px solid var(--el-borda);color:var(--el-texto)}
.el-painel-tabela>div span:last-child{color:var(--el-suave)}

/* Para quem */
.el-negocios{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.el-negocios article{background:#fff;border:1px solid var(--el-borda);border-radius:16px;padding:24px}
.el-negocios .el-icone{margin-bottom:14px}

/* Planos */
.el-planos{display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:center}
.el-plano{border:2px solid var(--el-azul);border-radius:20px;padding:32px;background:linear-gradient(180deg,#f3f7ff,#fff)}
.el-plano-nome{margin:0;font-weight:800;color:var(--el-azul);text-transform:uppercase;letter-spacing:.12em;font-size:.85rem}
.el-plano-preco{margin:4px 0 0;font-size:2.2rem;font-weight:800;color:var(--el-marinho)}

/* Dúvidas */
.el-duvidas{max-width:820px}
.el-duvidas h2{margin-bottom:24px}
.el-duvidas details{background:#fff;border:1px solid var(--el-borda);border-radius:14px;padding:0 20px;margin-bottom:10px}
.el-duvidas summary{cursor:pointer;font-weight:700;color:var(--el-marinho);padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.el-duvidas summary::-webkit-details-marker{display:none}
.el-duvidas summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--el-azul)}
.el-duvidas details[open] summary::after{content:"−"}
.el-duvidas details p{margin:0 0 18px;color:var(--el-suave)}

/* Chamada final */
.el-chamada{display:flex;align-items:center;gap:28px;background:linear-gradient(110deg,var(--el-marinho),#123f86 60%,#1554c4);color:#dbe6f7;border-radius:24px;padding:36px 40px;margin-top:80px;margin-bottom:56px}
.el-chamada h2{color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 4px}
.el-chamada p{margin:0}
.el-chamada>div{flex:1}
/* Sobre o fundo escuro, o símbolo vai num "ícone de app" branco para o elo marinho não sumir */
.el-chamada img{background:#fff;border-radius:18px;padding:10px;width:76px;height:auto;flex:none;box-shadow:0 8px 24px rgba(6,214,199,.3)}

/* Rodapé */
.el-rodape{border-top:1px solid var(--el-borda);padding:20px 0}
.el-rodape-linha{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.9rem;color:var(--el-suave)}
.el-rodape p{margin:0}
.el-rodape nav{display:flex;gap:20px}
.el-rodape a{color:var(--el-suave);text-decoration:none}
.el-rodape a:hover{color:var(--el-azul)}

/* Celular e tablet */
@media(max-width:960px){
  .el-menu{display:none}
  .el-hero-grade,.el-plataforma,.el-recursos,.el-planos{grid-template-columns:1fr}
  .el-recursos-grade{grid-template-columns:repeat(2,1fr)}
  .el-negocios{grid-template-columns:repeat(2,1fr)}
  .el-destaques{grid-template-columns:repeat(2,1fr);row-gap:18px}
  .el-destaques>div:nth-child(3){border-left:0}
  .el-hero-visual{margin-top:12px}
}
@media(max-width:640px){
  .el-topo-acoes .el-botao-contorno{display:none}
  .el-marca{font-size:1.5rem}
  .el-hero{padding-top:40px}
  .el-recursos-grade,.el-negocios,.el-passos{grid-template-columns:1fr}
  .el-passos li::after{display:none}
  .el-destaques{grid-template-columns:1fr}
  .el-destaques>div+div{border-left:0;border-top:1px solid var(--el-borda);padding-top:14px}
  .el-notebook-tela{grid-template-columns:1fr}
  .el-painel-lateral{display:none}
  .el-notificacao{left:auto;right:0;bottom:-12px}
  .el-chamada{flex-direction:column;text-align:center;padding:32px 24px}
  .el-secao{padding:56px 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}