/* Pixel Educacao - materiais social media
   tokens oficiais: aihub.pixeleducacao.com.br/assets/tokens.css */
:root{
  --preto:#08080A;
  --preto-2:#0F0F12;
  --linha:rgba(246,245,244,.12);
  --laranja:#FE5000;
  --laranja-2:#F15A22;
  --azul:#101C7E;
  --offwhite:#F2F1ED;
  --texto:#F6F5F4;
  --texto-fraco:rgba(246,245,244,.62);
  --raio:14px;
  --fonte:"Manrope","Segoe UI",Arial,sans-serif;
}

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

html,body{
  background:var(--preto);
  color:var(--texto);
  font-family:var(--fonte);
  -webkit-font-smoothing:antialiased;
}

body.gate{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 20px;
  position:relative;
  overflow-x:hidden;
}

/* textura + glows, mesma linguagem do material */
body.gate::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(254,80,0,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(254,80,0,.05) 1px,transparent 1px);
  background-size:64px 64px;
}
body.gate::after{
  content:"";
  position:fixed;pointer-events:none;
  width:520px;height:520px;top:-220px;right:-180px;border-radius:50%;
  background:radial-gradient(circle,rgba(254,80,0,.28) 0%,rgba(254,80,0,0) 68%);
}

.card{
  position:relative;z-index:2;
  width:100%;max-width:460px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--linha);
  border-radius:22px;
  padding:34px 30px 30px;
  backdrop-filter:blur(6px);
}

.selo{
  display:inline-block;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--laranja);
  border:1px solid rgba(254,80,0,.4);
  border-radius:999px;
  padding:6px 12px;
  margin-bottom:18px;
}

.card h1{
  font-size:clamp(24px,6vw,31px);
  line-height:1.14;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:12px;
}
.card h1 em{font-style:normal;color:var(--laranja)}

.card .sub{
  color:var(--texto-fraco);
  font-size:15px;line-height:1.55;
  margin-bottom:24px;
}

.campo{margin-bottom:16px}
.campo label{
  display:block;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texto-fraco);
  margin-bottom:7px;
}
.campo input{
  width:100%;
  background:rgba(0,0,0,.35);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  color:var(--texto);
  font-family:var(--fonte);
  font-size:16px;
  padding:14px 15px;
  transition:border-color .16s,box-shadow .16s;
}
.campo input::placeholder{color:rgba(246,245,244,.3)}
.campo input:focus{
  outline:none;
  border-color:var(--laranja);
  box-shadow:0 0 0 3px rgba(254,80,0,.16);
}
.campo input[aria-invalid="true"]{border-color:#ff5a5a}
.erro{
  display:none;
  color:#ff8f8f;font-size:12.5px;margin-top:6px;
}
.campo.invalido .erro{display:block}

button.cta{
  width:100%;
  margin-top:8px;
  background:var(--laranja);
  color:#fff;
  border:0;border-radius:var(--raio);
  font-family:var(--fonte);
  font-size:16px;font-weight:800;letter-spacing:.01em;
  padding:16px;
  cursor:pointer;
  transition:transform .12s,filter .16s;
}
button.cta:hover{filter:brightness(1.08)}
button.cta:active{transform:translateY(1px)}
button.cta[disabled]{opacity:.6;cursor:progress}

.legal{
  margin-top:16px;
  font-size:11.5px;line-height:1.5;
  color:rgba(246,245,244,.4);
  text-align:center;
}

.marca{
  margin-top:26px;padding-top:18px;
  border-top:1px solid var(--linha);
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(246,245,244,.45);
}
.marca span.ponto{width:6px;height:6px;border-radius:50%;background:var(--laranja)}

/* ---------- indice ---------- */
body.indice{padding:56px 20px 72px}
.wrap{max-width:900px;margin:0 auto;position:relative;z-index:2}
.indice-head{margin-bottom:38px}
.indice-head h1{font-size:clamp(28px,7vw,44px);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.indice-head p{color:var(--texto-fraco);margin-top:12px;font-size:16px;max-width:52ch;line-height:1.55}
.grade{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
a.item{
  display:block;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--linha);border-radius:18px;padding:24px 22px;
  transition:border-color .16s,transform .16s;
}
a.item:hover{border-color:rgba(254,80,0,.55);transform:translateY(-2px)}
a.item .tag{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--laranja)}
a.item h2{font-size:19px;font-weight:800;margin:10px 0 8px;letter-spacing:-.01em;line-height:1.25}
a.item p{color:var(--texto-fraco);font-size:14px;line-height:1.5}

/* ---------- barra do material ---------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:10px 14px;
  background:rgba(8,8,10,.9);
  border-top:1px solid var(--linha);
  backdrop-filter:blur(10px);
  font-family:var(--fonte);
}
.barra a{
  text-decoration:none;
  font-size:13.5px;font-weight:800;
  padding:11px 18px;border-radius:11px;
  white-space:nowrap;
}
.barra a.baixar{background:var(--laranja);color:#fff}
.barra a.hub{color:var(--texto);border:1px solid var(--linha)}

/* ---------- perguntas de qualificacao (chips) ---------- */
.campo.escolha label{margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  flex:1 1 auto;
  background:rgba(0,0,0,.35);
  border:1px solid var(--linha);
  border-radius:11px;
  color:var(--texto-fraco);
  font-family:var(--fonte);
  font-size:13.5px;font-weight:700;line-height:1.2;
  padding:11px 13px;
  cursor:pointer;
  text-align:center;
  transition:border-color .14s,background .14s,color .14s;
}
.chip:hover{border-color:rgba(254,80,0,.45);color:var(--texto)}
.chip.ativo{
  background:rgba(254,80,0,.14);
  border-color:var(--laranja);
  color:var(--texto);
}
.chip:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
.campo.escolha.invalido .chips .chip{border-color:rgba(255,90,90,.55)}
@media (max-width:420px){
  /* seis opcoes num celular estreito: aperta o chip pra caber mais por linha
     e o cartao nao virar uma rolagem longa antes do botao */
  .chip{font-size:12.5px;padding:10px 10px;border-radius:10px}
  .chips{gap:6px}
}