/* ============================================================
   SOLURIA - estilos (mobile-first)
   Paleta: azul-petroleo escuro / ciano luminoso / coral / ambar
   ============================================================ */

:root{
  --petroleo-900:#071E26;
  --petroleo-800:#092933;
  --petroleo-700:#0B3440;
  --ciano:#7FE3F0;
  --ciano-fraco:rgba(127,227,240,.22);
  --coral:#FF6B5B;
  --coral-escuro:#E8513F;
  --ambar:#FFC15E;
  --verde:#22C55E;
  --verde-escuro:#16A34A;
  --texto:#E7F6F9;
  --texto-suave:#A9C9D2;
  --borda:rgba(127,227,240,.20);
  --fonte:"Outfit","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --raio:14px;
  --larg:620px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--fonte);
  font-size:17px;
  line-height:1.55;
  color:var(--texto);
  background-color:var(--petroleo-900);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- fundo "holograma": grade fina + brilhos ---------- */
.holo{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(90% 55% at 50% -10%, rgba(127,227,240,.20), transparent 70%),
    radial-gradient(70% 45% at 110% 20%, rgba(255,107,91,.12), transparent 70%),
    radial-gradient(80% 60% at -10% 85%, rgba(127,227,240,.10), transparent 70%),
    linear-gradient(180deg,#0B3440 0%,#071E26 55%,#071E26 100%);
}
.holo::after{
  content:"";
  position:absolute;
  inset:-20% -20% 0 -20%;
  background-image:
    linear-gradient(to right, rgba(127,227,240,.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(127,227,240,.22) 1px, transparent 1px);
  background-size:46px 46px;
  transform:perspective(520px) rotateX(58deg);
  transform-origin:top center;
  opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 62%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 62%);
}

/* ---------- estrutura ---------- */
.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--larg);
  margin:0 auto;
  padding:0 20px;
}

header.topo{
  padding:26px 0 8px;
  text-align:center;
}

.wordmark{
  display:inline-block;
  font-size:26px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ciano);
  text-decoration:none;
  text-shadow:0 0 18px rgba(127,227,240,.45);
}

.selo{
  display:inline-block;
  margin:0 0 18px;
  padding:5px 14px;
  border:1px solid var(--borda);
  border-radius:999px;
  background:rgba(127,227,240,.07);
  color:var(--ciano);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.hero{padding-top:22px;padding-bottom:10px;text-align:center}

h1{
  margin:0 0 16px;
  font-size:31px;
  line-height:1.16;
  font-weight:700;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h1 .destaque{color:var(--ciano)}

.sub{
  margin:0 auto 26px;
  max-width:34em;
  font-size:17px;
  color:var(--texto-suave);
}

/* ---------- temas ---------- */
.temas{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:0 0 34px;
  padding:0;
}
.temas li{
  padding:7px 13px;
  border:1px solid var(--borda);
  border-radius:999px;
  background:rgba(11,52,64,.55);
  font-size:14.5px;
  color:var(--texto);
}
.temas li:last-child{
  border-color:rgba(255,193,94,.45);
  color:var(--ambar);
  background:rgba(255,193,94,.07);
}

/* ---------- cartao do formulario ---------- */
.cartao{
  background:rgba(9,41,51,.78);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  padding:22px 18px 24px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}

h2{
  margin:0 0 8px;
  font-size:23px;
  line-height:1.2;
  font-weight:700;
}

.cartao .apoio{
  margin:0 0 20px;
  font-size:15.5px;
  color:var(--texto-suave);
}

.campo{margin-bottom:16px}

label{
  display:block;
  margin-bottom:6px;
  font-size:15px;
  font-weight:600;
}
label .opc{font-weight:400;color:var(--texto-suave)}

input[type=text],input[type=tel],input[type=email]{
  width:100%;
  padding:13px 14px;
  font-family:inherit;
  font-size:16px;
  color:var(--texto);
  background:rgba(7,30,38,.9);
  border:1px solid var(--borda);
  border-radius:10px;
  -webkit-appearance:none;
  appearance:none;
}
input::placeholder{color:#7FA3AE}
input:focus-visible,button:focus-visible,a:focus-visible,input[type=checkbox]:focus-visible{
  outline:2px solid var(--ciano);
  outline-offset:2px;
}
input[aria-invalid=true]{border-color:var(--coral)}

fieldset{margin:0 0 16px;padding:0;border:0}
legend{padding:0;margin-bottom:8px;font-size:15px;font-weight:600}

.opcoes{display:flex;flex-wrap:wrap;gap:8px}
.opcoes label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:9px 13px;
  border:1px solid var(--borda);
  border-radius:999px;
  background:rgba(7,30,38,.6);
  font-size:14.5px;
  font-weight:400;
  cursor:pointer;
}
.opcoes input:checked + span{color:var(--ciano);font-weight:600}

input[type=checkbox]{
  width:20px;
  height:20px;
  margin:0;
  flex:none;
  accent-color:#7FE3F0;
}

.consent{
  display:flex;
  gap:11px;
  align-items:flex-start;
  margin:18px 0 6px;
  font-size:14.5px;
  line-height:1.45;
  font-weight:400;
  cursor:pointer;
}
.consent input{margin-top:2px}

a{color:var(--ciano)}
a:hover{color:#B6F0F8}

.erro{
  display:none;
  margin-top:6px;
  font-size:13.5px;
  color:var(--coral);
  font-weight:600;
}
.erro.visivel{display:block}

.aviso-envio{
  display:none;
  margin:14px 0 0;
  padding:12px 14px;
  border:1px solid rgba(255,107,91,.55);
  border-radius:10px;
  background:rgba(255,107,91,.10);
  font-size:14.5px;
  color:#FFD9D3;
}
.aviso-envio.visivel{display:block}

.botao{
  display:block;
  width:100%;
  margin-top:18px;
  padding:16px 18px;
  font-family:inherit;
  font-size:17.5px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--petroleo-900);
  background:var(--verde);
  border:0;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(34,197,94,.30);
  text-align:center;
  text-decoration:none;
}
.botao:hover{background:var(--verde-escuro)}
.botao[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

.dica-botao{
  margin:10px 0 0;
  text-align:center;
  font-size:13.5px;
  color:var(--texto-suave);
}
.dica-botao[hidden]{display:none}

.desconto{color:var(--ambar)}

.regras-condicao{
  margin:14px 0 0;
  text-align:center;
  font-size:12.5px;
  line-height:1.5;
  color:var(--texto-suave);
}

.micro{
  margin:12px 0 0;
  text-align:center;
  font-size:13.5px;
  color:var(--texto-suave);
}

/* campo armadilha (invisivel para gente, visivel para robo) */
.armadilha{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ---------- pagina de obrigado ---------- */
.obrigado{padding-top:34px;padding-bottom:10px;text-align:center}
.marca-ok{
  width:62px;height:62px;
  margin:0 auto 20px;
  display:-ms-grid;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--borda);
  background:rgba(127,227,240,.10);
  box-shadow:0 0 34px rgba(127,227,240,.28);
}
.indicacao{text-align:center}
.indicacao p{margin:0 0 4px;font-size:16.5px}

/* ---------- texto corrido (privacidade) ---------- */
.texto{padding-top:12px;padding-bottom:8px}
.texto h1{font-size:27px;text-align:left;margin-bottom:6px}
.texto .atualizado{margin:0 0 24px;font-size:14px;color:var(--texto-suave)}
.texto h2{font-size:19px;margin:26px 0 7px;color:var(--ciano)}
.texto p,.texto li{font-size:16px;color:#D6EBF0}
.texto ul{padding-left:20px}
.texto li{margin-bottom:5px}

/* ---------- rodape ---------- */
footer.rodape{
  position:relative;
  z-index:1;
  margin-top:40px;
  padding:24px 20px 34px;
  border-top:1px solid rgba(127,227,240,.13);
  text-align:center;
  font-size:13.5px;
  line-height:1.65;
  color:var(--texto-suave);
}
footer.rodape p{margin:0}
.voltar{display:inline-block;margin-top:14px;font-size:14.5px}

/* ---------- telas maiores ---------- */
@media (min-width:700px){
  body{font-size:18px}
  header.topo{padding:34px 0 10px}
  .wordmark{font-size:30px}
  .hero{padding-top:30px;padding-bottom:14px}
  h1{font-size:46px}
  .sub{font-size:19px;margin-bottom:30px}
  .cartao{padding:30px 30px 32px}
  h2{font-size:26px}
  .texto h1{font-size:34px}
  .holo::after{background-size:62px 62px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}