/* EcomSmart · Proposta de identidade v3 "Leve" (02/10/2026)
   Base: v2.4 (símbolo E, azul de marca, tom de voz) + estilo claro e tátil (acento pastel, ícones 3D em pedestal,
   cards de seleção tingidos, órbitas e grade de pontos). Fonte: Fustat. */
@import url("https://fonts.googleapis.com/css2?family=Fustat:wght@300..800&display=swap");

:root{
  /* Tinta (texto) — navy-ardósia, mais macio que o #0B1033 */
  --ink:#1B2B48; --ink-2:#4E5C77; --muted:#8792A8; --faint:#B7C0D0;

  /* Céu — acento pastel. Preenche o botão primário (texto em --ink) e o card selecionado */
  --ceu-50:#F3F7FF; --ceu-100:#E8F0FF; --ceu-200:#D3E2FF; --ceu-300:#B5CEFF; --ceu-400:#9DBEFF; --ceu-500:#7FA8FB;

  /* Azul de marca — mantido da v2.4. Só em palavra de ênfase, número, link e símbolo */
  --azul:#0A5BF0; --azul-600:#2F70F5; --azul-700:#0849C4;

  /* Superfícies */
  --bg:#FFFFFF; --painel:#F5F7FB; --nevoa:#F1F4F9; --borda:#E3E8F0; --borda-2:#D3DAE6;

  /* Semânticas (sempre com forma além da cor) */
  --ok:#2FA36B; --ok-bg:#E6F6EE; --atencao:#D98A0B; --atencao-bg:#FDF3E1; --erro:#D64545; --erro-bg:#FCEAEA;
  --whatsapp:#25D366; /* só canal conectado */

  /* Tipografia */
  --font:"Fustat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Raios */
  --r-input:12px; --r-card:16px; --r-card-lg:20px; --r-painel:32px; --r-pill:999px;

  /* Sombras: só no ícone 3D, no chip flutuante e no modal */
  --sombra-chip:0 1px 0 rgba(27,43,72,.04),0 8px 24px -12px rgba(27,43,72,.12);
  --sombra-modal:0 24px 64px -16px rgba(27,43,72,.28);

  /* Foco: anel céu de 4 px */
  --foco:0 0 0 4px rgba(157,190,255,.35);

  --container:1200px;
}

/* Tema escuro do app (sites e social ficam sempre claros) */
:root[data-theme="dark"]{
  --ink:#EEF2FA; --ink-2:#B7C1D9; --muted:#8A97B3; --faint:#55627E;
  --ceu-50:#111C33; --ceu-100:#14223F; --ceu-200:#1C2F57; --ceu-300:#36508A; --ceu-400:#9DBEFF; --ceu-500:#B5CEFF;
  --azul:#8DB0FF; --azul-600:#8DB0FF; --azul-700:#B5CEFF;
  --bg:#0A0F1F; --painel:#101729; --nevoa:#151E33; --borda:#1E2A44; --borda-2:#2A3A5C;
  --ok-bg:#0F2A20; --atencao-bg:#2B2210; --erro-bg:#2E1517;
  --sombra-chip:none;
}

/* Base */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
/* Fustat: os algarismos tabulares (tnum) abrem espaços em volta de vírgula e ponto. Usar sempre os proporcionais. */
.num,.t-kpi{font-variant-numeric:normal}
em,.enfase{font-style:normal;color:var(--azul)}

/* Escala tipográfica (web) */
.t-display{font-size:60px;font-weight:700;letter-spacing:-.035em;line-height:1.04}
.t-h1{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1.08}
.t-h2{font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.t-h3{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.t-corpo{font-size:17px;font-weight:400;color:var(--ink-2);line-height:1.55}
.t-ui{font-size:15px;font-weight:500}
.t-rotulo{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.t-kpi{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--azul)}
@media (max-width:720px){.t-display{font-size:38px}.t-h1{font-size:30px}.t-h2{font-size:23px}.t-kpi{font-size:30px}}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:var(--r-pill);border:0;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--foco)}
.btn-primario{background:var(--ceu-400);color:#1B2B48}
.btn-primario:hover{background:var(--ceu-500)}
.btn-primario:disabled{background:var(--nevoa);color:var(--faint);cursor:not-allowed}
.btn-secundario{background:var(--nevoa);color:var(--ink)}
.btn-secundario:hover{background:var(--borda)}
.btn-contorno{background:var(--bg);color:var(--ink);border:1px solid var(--borda-2)}
.btn-contorno:hover{border-color:var(--ceu-500)}
.btn-bloco{width:100%}
.btn-sm{height:40px;padding:0 18px;font-size:14px}

/* Campos */
.campo label{display:block;font-size:15px;font-weight:500;margin-bottom:8px}
.input{width:100%;height:56px;padding:0 18px;border:1px solid var(--borda-2);border-radius:var(--r-input);background:var(--bg);font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--muted)}
.input:focus{border-color:var(--ceu-500);box-shadow:var(--foco)}

/* Card de seleção (o card "SaaS / E-commerce / Outros") */
.opcao{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px 16px;border:1px solid var(--borda);border-radius:var(--r-card-lg);background:var(--bg);cursor:pointer;font-size:17px;font-weight:600;transition:background .15s,border-color .15s}
.opcao:hover{border-color:var(--ceu-300)}
.opcao[aria-checked="true"],.opcao.ativo{background:var(--ceu-100);border-color:var(--ceu-400)}

/* Card comum: borda, sem sombra */
.card{background:var(--bg);border:1px solid var(--borda);border-radius:var(--r-card);padding:24px}
.card-painel{background:var(--painel);border-radius:var(--r-card-lg);padding:28px}

/* Chip flutuante (pílula branca) */
.chip{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--borda);box-shadow:var(--sombra-chip);font-size:16px;font-weight:500;white-space:nowrap}
.chip .ponto{width:8px;height:8px;border-radius:50%;background:var(--whatsapp)}

/* Pílula de status */
.pilula{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600}
.pilula::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pilula.ok{background:var(--ok-bg);color:var(--ok)} .pilula.atencao{background:var(--atencao-bg);color:var(--atencao)} .pilula.erro{background:var(--erro-bg);color:var(--erro)} .pilula.neutra{background:var(--nevoa);color:var(--ink-2)}

/* Indicador de passos (o "• ▬ •") */
.passos{display:flex;gap:8px;justify-content:center}
.passos i{display:block;width:10px;height:10px;border-radius:999px;background:var(--borda)}
.passos i.ativo{width:40px;background:var(--ceu-400)}

/* Texturas */
.pontos{background-image:radial-gradient(var(--borda-2) 1px,transparent 1.3px);background-size:16px 16px}
.pontos-desvanece{-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)}
.orbitas{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 50% 45%,transparent 159px,var(--borda) 160px,transparent 161px),
  radial-gradient(circle at 50% 45%,transparent 259px,var(--borda) 260px,transparent 261px),
  radial-gradient(circle at 50% 45%,transparent 359px,var(--borda) 360px,transparent 361px),
  radial-gradient(circle at 50% 45%,transparent 459px,var(--borda) 460px,transparent 461px),
  radial-gradient(circle at 50% 45%,transparent 559px,var(--borda) 560px,transparent 561px)}

/* Ícone 3D (gerado por icones.js) */
.ico3d{display:inline-block;line-height:0}
.ico3d svg{width:100%;height:100%;overflow:visible}

.container{max-width:var(--container);margin:0 auto;padding:0 48px}
@media (max-width:1024px){.container{padding:0 32px}}
@media (max-width:720px){.container{padding:0 20px}}

/* ---------- Movimento (v3.1) ----------
   Regras: design-motion-principles (Emil/Jakub/Jhey) + taste-skill soft.
   Saída rápida e suave, nada de ease/linear padrão; app e Hub só com micro-interação (alta frequência),
   marketing com entrada em cascata. Tudo desliga em prefers-reduced-motion. */
:root{
  --ease-out:cubic-bezier(.32,.72,0,1);      /* chegada: rápida e assenta macio */
  --ease-mola:cubic-bezier(.34,1.32,.64,1);  /* seleção: leve sobra, só em escolha rara */
  --dur-1:140ms; --dur-2:240ms; --dur-3:420ms; --dur-4:640ms;
}
.btn{transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.btn:active:not(:disabled){transform:scale(.98)}
/* Seta dentro de pílula própria (botão-dentro-do-botão) */
.btn .seta{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:-16px;border-radius:999px;background:rgba(27,43,72,.08);font-size:15px;line-height:1;transition:transform var(--dur-3) var(--ease-out)}
.btn .seta.volta{margin-right:0;margin-left:-16px}
.btn-secundario .seta,.btn-contorno .seta{background:var(--borda)}
.btn:hover:not(:disabled) .seta{transform:translateX(3px)}
.btn:hover:not(:disabled) .seta.volta{transform:translateX(-3px)}
.btn-sm .seta{width:24px;height:24px;margin-right:-10px;font-size:13px}
.btn-sm .seta.volta{margin-right:0;margin-left:-10px}
.opcao{transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.opcao:hover{transform:translateY(-2px)}
.opcao:active{transform:translateY(0) scale(.98)}
.opcao[aria-checked="true"] .ico3d,.opcao.ativo .ico3d{animation:es3-pulo var(--dur-3) var(--ease-mola)}
@keyframes es3-pulo{0%{transform:translateY(0)}45%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.input{transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.chip.flutua{animation:es3-flutua 7s var(--ease-out) infinite alternate}
@keyframes es3-flutua{to{transform:translateY(-8px)}}
/* Entrada em cascata (motion.js marca [data-rv]) */
html.es3-rv [data-rv]{opacity:0;transform:translateY(12px);filter:blur(4px)}
html.es3-rv [data-rv].rv-in{opacity:1;transform:none;filter:none;transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out),filter var(--dur-4) var(--ease-out);transition-delay:var(--rv-d,0ms)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.es3-rv [data-rv]{opacity:1;transform:none;filter:none}
}