/* Página inicial pública (inicio.html): hero da Opção A. Mesma identidade das telas: fundo escuro,
   teal e lima da logo, Sora nos títulos e Manrope no texto (fontes servidas pelo próprio site). */
:root{
  color-scheme:dark;
  --fundo:#080B0F; --painel-2:#0C121A; --linha:rgba(255,255,255,.08); --linha-2:rgba(255,255,255,.14);
  --texto:#E8EDF1; --apagado:#8593A1; --teal:#35DCEA; --lima:#B6E13D; --tinta-lima:#10200A;
  --ambar:#F2B84B; --vermelho:#FF6B6B; --verde:#3DDC84;
  --titulo:'Sora', 'Segoe UI', system-ui, sans-serif;
  --corpo:'Manrope', 'Segoe UI', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fundo); color:var(--texto); font:15px/1.55 var(--corpo); min-height:100vh; display:flex; flex-direction:column}
a{color:inherit}

.hero{position:relative; overflow:hidden; isolation:isolate; flex:1}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(600px 380px at 82% 30%, rgba(53,220,234,.13), transparent 70%),
    radial-gradient(520px 320px at 70% 95%, rgba(182,225,61,.10), transparent 70%),
    linear-gradient(var(--linha) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, var(--linha) 1px, transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 70%, transparent 100%)}

.topo{display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1280px; margin:0 auto; padding:18px clamp(16px,4vw,48px)}
.marca{display:flex; align-items:center; gap:10px; font:700 17px var(--titulo); text-decoration:none}
.marca img{width:34px; height:34px; border-radius:50%}
.acoes{display:flex; gap:10px; align-items:center}

.botao{display:inline-flex; align-items:center; gap:8px; font:700 14px var(--corpo); border-radius:10px; padding:11px 18px; text-decoration:none; border:1px solid transparent; white-space:nowrap}
.botao:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.principal{background:var(--lima); color:var(--tinta-lima)}
.principal:hover{filter:brightness(1.08)}
.fantasma{color:var(--texto); border-color:var(--linha-2)}
.fantasma:hover{border-color:var(--teal)}
.pequeno{padding:8px 14px; font-size:13px}
.seta{font-family:var(--mono)}

.corpo{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center; max-width:1280px; margin:0 auto; padding:clamp(28px,5vw,64px) clamp(16px,4vw,48px) clamp(40px,6vw,80px)}
.sobretitulo{display:inline-flex; align-items:center; gap:8px; font:12px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--teal); border:1px solid rgba(53,220,234,.3); background:rgba(53,220,234,.06); padding:6px 12px; border-radius:999px}
.sobretitulo::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--lima); box-shadow:0 0 10px var(--lima)}
h1{font:700 clamp(34px,4.6vw,58px)/1.05 var(--titulo); letter-spacing:-.025em; margin:20px 0 0; text-wrap:balance}
h1 em{font-style:normal; background:linear-gradient(90deg,var(--teal),var(--lima)); -webkit-background-clip:text; background-clip:text; color:transparent}
.chamada{font-size:clamp(15px,1.3vw,17.5px); color:#AEB9C4; max-width:52ch; margin:18px 0 0}
.ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.itens{display:flex; flex-wrap:wrap; gap:8px 18px; margin:28px 0 0; padding:0; list-style:none; font-size:13.5px; color:var(--apagado)}
.itens li{display:flex; align-items:center; gap:7px}
.itens li::before{content:"✓"; color:var(--lima); font-weight:800}

/* Painel ilustrativo: o que o contador vê depois de importar o mês */
.painel{margin:0; background:linear-gradient(180deg,#111A24,#0C131B); border:1px solid var(--linha-2); border-radius:18px; padding:18px; box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(53,220,234,.05) inset; min-width:0}
.p-topo{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.p-titulo{font:600 15px var(--titulo)}
.p-sub{font:11.5px var(--mono); color:var(--apagado)}
.concluida{font:11px var(--mono); color:var(--lima); display:inline-flex; align-items:center; gap:6px}
.concluida::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--lima); animation:pulso 1.6s ease-in-out infinite}
@keyframes pulso{50%{opacity:.25}}
.progresso{height:6px; border-radius:6px; background:#1A2430; margin:14px 0 4px; overflow:hidden}
.progresso span{display:block; height:100%; width:99%; background:linear-gradient(90deg,var(--teal),var(--lima)); border-radius:6px; animation:enche 2.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes enche{from{width:8%}}
.numeros{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:14px 0}
.numero{background:var(--painel-2); border:1px solid var(--linha); border-radius:10px; padding:10px}
.numero .n{font:600 20px var(--titulo); font-variant-numeric:tabular-nums}
.numero .l{font-size:11.5px; color:var(--apagado); line-height:1.3}
.numero.ok .n{color:var(--verde)} .numero.pendente .n{color:var(--vermelho)} .numero.validar .n{color:var(--ambar)}
.achados{display:flex; flex-direction:column; gap:8px; list-style:none; margin:0; padding:0}
.achado{display:grid; grid-template-columns:4px minmax(0,1fr) auto; gap:12px; align-items:center; background:var(--painel-2); border:1px solid var(--linha); border-radius:10px; padding:10px 12px 10px 0; overflow:hidden; animation:sobe .5s ease both}
.achado:nth-child(2){animation-delay:.12s} .achado:nth-child(3){animation-delay:.24s} .achado:nth-child(4){animation-delay:.36s}
@keyframes sobe{from{transform:translateY(8px); opacity:0}}
.faixa{align-self:stretch; border-radius:0 3px 3px 0}
.achado .k{font:11px var(--mono); color:var(--apagado)}
.achado .d{font-size:13.5px; font-weight:600; line-height:1.35}
.achado .f{font:11px var(--mono); color:var(--teal); margin-top:3px; overflow-wrap:anywhere}
.selo{font:600 10.5px var(--mono); padding:4px 8px; border-radius:6px; white-space:nowrap}
.erro .faixa{background:var(--vermelho)}   .erro .selo{color:var(--vermelho); background:rgba(255,107,107,.1)}
.alerta .faixa{background:var(--ambar)}    .alerta .selo{color:var(--ambar); background:rgba(242,184,75,.1)}
.certo .faixa{background:var(--verde)}     .certo .selo{color:var(--verde); background:rgba(61,220,132,.1)}
.p-rodape{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:14px; font-size:12px; color:var(--apagado)}
.p-rodape b{color:var(--texto); font-weight:600}

.rodape{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; max-width:1280px; width:100%; margin:0 auto; padding:20px clamp(16px,4vw,48px) 28px; border-top:1px solid var(--linha); font-size:13px; color:var(--apagado)}
.rodape a{color:var(--apagado)}
.rodape a:hover,.rodape a:focus-visible{color:var(--teal)}

@media (max-width:960px){
  .corpo{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .acoes .fantasma{display:none}
  .numeros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .achado{grid-template-columns:4px minmax(0,1fr)}
  .achado .selo{grid-column:2; justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important}
}