/* =============================================================================
   estilo.css | Versão: 1.0.1 | Converte Aqui
   Identidade: concreto frio + azul elétrico + amarelo sinal.
   Display: Bricolage Grotesque · Corpo: Inter · Dados: JetBrains Mono
   Assinatura: A FENDA — a zona de soltar arquivo é um rasgo escuro no cartão,
   e os resultados sobem de dentro dele.
   ============================================================================= */

@font-face{font-family:'Bricolage';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url('/fonts/bricolage-latin-var.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:optional;src:url('/fonts/inter-latin-var.woff2') format('woff2');}
@font-face{font-family:'JetBrains';font-style:normal;font-weight:400 700;font-display:optional;src:url('/fonts/jetbrains-latin-var.woff2') format('woff2');}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --concreto-900:#0E1116;
  --concreto-800:#161B22;
  --concreto-700:#1F262F;
  --concreto-600:#2C3542;
  --concreto-300:#8C97A6;
  --concreto-100:#E7EBF0;
  --gelo:#F5F7FA;
  --azul:#2B6BFF;
  --azul-claro:#5C8FFF;
  --azul-fundo:#EAF0FF;
  --sinal:#FFD400;
  --erro:#FF5C5C;
  --ok:#3DD68C;
  --raio:14px;
  --raio-p:8px;
  --sombra:0 1px 2px rgba(14,17,22,.06),0 8px 28px rgba(14,17,22,.10);
  --borda:1px solid #DDE3EC;
  --max:1080px;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--gelo);
  color:var(--concreto-900);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--azul);text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:3px solid var(--sinal);outline-offset:2px;border-radius:4px;}

.env{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px;}

h1,h2,h3,.display{font-family:'Bricolage','Inter',sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.02em;}
.mono{font-family:'JetBrains',ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;}

/* ── Topo ─────────────────────────────────────────────────────────────────── */
.topo{background:var(--concreto-900);color:var(--concreto-100);position:sticky;top:0;z-index:40;}
.topo .env{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;}
.marca{font-family:'Bricolage',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.03em;color:#fff;text-decoration:none;display:flex;align-items:center;gap:9px;}
.marca:hover{text-decoration:none;}
.marca .barra{width:5px;height:20px;background:var(--sinal);display:inline-block;transform:skewX(-12deg);}
.topo nav{display:flex;gap:20px;font-size:14px;font-weight:500;}
.topo nav a{color:var(--concreto-300);}
.topo nav a:hover{color:#fff;text-decoration:none;}
@media(max-width:640px){.topo nav{display:none;}}

/* ── Herói ────────────────────────────────────────────────────────────────── */
.heroi{background:var(--concreto-900);color:#fff;padding:44px 0 96px;position:relative;overflow:hidden;}
.heroi::after{
  content:"";position:absolute;inset:auto 0 0 0;height:120px;
  background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.03) 22px 23px);
  pointer-events:none;
}
.olho{font-family:'JetBrains',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sinal);margin-bottom:14px;}
.heroi h1{font-size:clamp(32px,6.2vw,58px);max-width:16ch;color:#fff;}
.heroi h1 em{font-style:normal;color:var(--azul-claro);}
.heroi p.sub{margin-top:16px;max-width:56ch;color:var(--concreto-300);font-size:clamp(15px,2vw,18px);}
.selos{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.selo{font-family:'JetBrains',monospace;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--concreto-100);border:1px solid var(--concreto-600);border-radius:99px;padding:5px 11px;}
.selo b{color:var(--sinal);font-weight:600;}

/* ── Cartão do app (com a fenda) ──────────────────────────────────────────── */
.app{margin-top:-64px;position:relative;z-index:10;padding-bottom:56px;}
.cartao{background:#fff;border-radius:var(--raio);box-shadow:var(--sombra);border:var(--borda);overflow:hidden;}

.fenda{
  position:relative;background:var(--concreto-900);
  padding:38px 22px;text-align:center;cursor:pointer;
  transition:background .18s ease;
}
.fenda::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(78%,420px);height:6px;border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);
}
.fenda:hover,.fenda.ativa{background:#0A0D12;}
.fenda.ativa{box-shadow:inset 0 0 0 2px var(--azul);}
.fenda .rasgo{
  width:min(86%,460px);margin:0 auto 18px;height:44px;border-radius:3px;
  background:#05070A;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.07);
  position:relative;overflow:hidden;
}
.fenda .rasgo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(43,107,255,.55),transparent);
  transform:translateX(-100%);
}
.fenda:hover .rasgo::after,.fenda.ativa .rasgo::after{animation:varre 1.5s linear infinite;}
@keyframes varre{to{transform:translateX(100%);}}
.fenda h2{color:#fff;font-size:20px;}
.fenda p{color:var(--concreto-300);font-size:14px;margin-top:6px;}
.fenda .btn-fenda{
  display:inline-block;margin-top:16px;background:var(--azul);color:#fff;
  font-weight:600;font-size:15px;padding:11px 22px;border-radius:var(--raio-p);
  border:0;cursor:pointer;font-family:inherit;
}
.fenda .btn-fenda:hover{background:#1B57E6;}
input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}

/* ── Controles ────────────────────────────────────────────────────────────── */
.controles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;padding:22px;border-bottom:var(--borda);background:#FBFCFE;}
.campo label{display:block;font-family:'JetBrains',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--concreto-300);margin-bottom:7px;}
.campo select,.campo input[type=number]{
  width:100%;padding:9px 11px;border:var(--borda);border-radius:var(--raio-p);
  font-family:inherit;font-size:15px;background:#fff;color:var(--concreto-900);
}
.faixa{display:flex;align-items:center;gap:10px;}
.faixa input[type=range]{flex:1;accent-color:var(--azul);}
.faixa output{font-family:'JetBrains',monospace;font-size:13px;min-width:42px;text-align:right;color:var(--concreto-600);}

/* ── Lista de arquivos ────────────────────────────────────────────────────── */
.lista{padding:8px 22px 22px;}
.lista:empty{display:none;}
.item{
  display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;
  padding:13px 0;border-bottom:1px solid #EEF1F6;
  animation:sobe .32s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes sobe{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.item .mini{width:52px;height:52px;border-radius:var(--raio-p);object-fit:cover;background:var(--concreto-100);}
.item .nome{font-size:14.5px;font-weight:500;word-break:break-all;line-height:1.35;}
.item .dados{font-family:'JetBrains',monospace;font-size:12px;color:var(--concreto-300);margin-top:3px;}
.item .dados .ganho{color:#1B9E63;font-weight:600;}
.item .dados .perda{color:var(--concreto-600);}
.barra-prog{height:3px;background:#EEF1F6;border-radius:99px;overflow:hidden;margin-top:7px;}
.barra-prog i{display:block;height:100%;background:var(--azul);width:0;transition:width .25s ease;}
.item .erro{color:var(--erro);font-size:12.5px;margin-top:3px;}
.btn-baixar{
  background:var(--concreto-900);color:#fff;border:0;border-radius:var(--raio-p);
  padding:8px 14px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
}
.btn-baixar:hover{background:var(--azul);}
.btn-baixar[disabled]{opacity:.35;cursor:default;}

.rodape-app{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px 22px;background:#FBFCFE;border-top:var(--borda);}
.rodape-app .resumo{font-family:'JetBrains',monospace;font-size:12.5px;color:var(--concreto-300);}
.acoes{display:flex;gap:10px;}
.btn{
  border:0;border-radius:var(--raio-p);padding:10px 18px;font-family:inherit;
  font-size:14.5px;font-weight:600;cursor:pointer;
}
.btn-primario{background:var(--azul);color:#fff;}
.btn-primario:hover{background:#1B57E6;}
.btn-secundario{background:#fff;color:var(--concreto-900);border:var(--borda);}
.btn-secundario:hover{border-color:var(--concreto-600);}
.btn[disabled]{opacity:.4;cursor:default;}

.aviso-privacidade{
  display:flex;gap:10px;align-items:flex-start;margin-top:16px;
  font-size:13.5px;color:var(--concreto-600);
  background:var(--azul-fundo);border-radius:var(--raio-p);padding:12px 14px;
}
.aviso-privacidade b{color:var(--concreto-900);}

/* ── Seções de conteúdo ───────────────────────────────────────────────────── */
section.bloco{padding:52px 0;}
section.bloco.alt{background:#fff;border-top:var(--borda);border-bottom:var(--borda);}
section.bloco h2{font-size:clamp(24px,3.6vw,34px);margin-bottom:10px;}
section.bloco h3{font-size:19px;margin-bottom:6px;}
section.bloco p{color:var(--concreto-600);max-width:70ch;}
section.bloco h2+p{margin-bottom:26px;}

.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:24px;}
.card{background:#fff;border:var(--borda);border-radius:var(--raio);padding:20px;}
section.bloco.alt .card{background:var(--gelo);}
.card .num{font-family:'JetBrains',monospace;font-size:12px;color:var(--azul);letter-spacing:.1em;margin-bottom:9px;}
.card p{font-size:14.5px;}

.atalhos{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.atalho{
  display:inline-flex;align-items:center;gap:7px;background:#fff;border:var(--borda);
  border-radius:99px;padding:8px 15px;font-size:14px;font-weight:500;color:var(--concreto-900);
}
.atalho:hover{border-color:var(--azul);color:var(--azul);text-decoration:none;}
.atalho .seta{font-family:'JetBrains',monospace;color:var(--concreto-300);font-size:12px;}

details.faq{border-bottom:var(--borda);padding:16px 0;}
details.faq summary{
  cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+";font-family:'JetBrains',monospace;color:var(--azul);font-size:20px;line-height:1;flex:none;}
details.faq[open] summary::after{content:"−";}
details.faq p{margin-top:10px;font-size:15px;}

/* ── Publicidade ──────────────────────────────────────────────────────────── */
.publi{margin:34px auto;max-width:var(--max);padding:0 20px;min-height:1px;}
.publi:empty{display:none;}

/* ── Rodapé ───────────────────────────────────────────────────────────────── */
footer.pe{background:var(--concreto-900);color:var(--concreto-300);padding:44px 0 30px;font-size:14px;}
footer.pe .colunas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;}
footer.pe h4{color:#fff;font-family:'Bricolage',sans-serif;font-size:15px;margin-bottom:11px;}
footer.pe a{color:var(--concreto-300);display:block;padding:3px 0;}
footer.pe a:hover{color:#fff;text-decoration:none;}
footer.pe .fim{margin-top:32px;padding-top:18px;border-top:1px solid var(--concreto-700);font-size:12.5px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}