/* Página de assinatura da Matrix Domada (29/09/2026).
   Tokens, botões e títulos vêm da capa (styles.css + secoes.css). */

/* o topo alinha com o texto desta página */
.nav{padding-left:clamp(20px,5.6vw,94px);padding-right:clamp(20px,5.6vw,94px)}

/* ---------- abertura: texto e formulário à esquerda, capa do dia à direita ---------- */

.assinar{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr minmax(300px,.92fr);
  gap:clamp(40px,6vw,110px);
  align-items:center;
  max-width:1560px;
  margin:0 auto;
  padding:clamp(120px,16vh,170px) clamp(20px,5.6vw,94px) clamp(60px,9vh,100px);
}

.assinar-titulo{
  margin-top:clamp(12px,1.6vh,20px);
  font-family:var(--titulo);
  font-stretch:112%;
  font-weight:800;
  font-size:clamp(44px,5.6vw,96px);
  line-height:.94;
  letter-spacing:-.04em;
  color:var(--branco);
  text-wrap:balance;
}

.form{margin-top:clamp(26px,4vh,38px);max-width:30em}

.campo-rotulo{
  display:block;
  margin:18px 0 8px;
  font-size:15px;
  font-weight:600;
  color:var(--branco);
}
.campo-rotulo span{font-weight:400;color:var(--suave)}

.campo{
  width:100%;
  min-height:52px;
  padding:0 16px;
  border-radius:9px;
  border:1.5px solid rgba(224,160,99,.32);
  background:rgba(12,12,14,.6);
  color:var(--branco);
  font:inherit;
  font-size:17px;
  transition:border-color .25s;
}
.campo::placeholder{color:#8a8276}
.campo:focus{outline:none;border-color:var(--cobre-claro)}
.campo[aria-invalid="true"]{border-color:#e0795f}

/* o pote de mel fica fora da tela, não com display:none (robô esperto pula esse) */
.pote{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consentimento{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:20px;
  font-size:15px;
  line-height:1.5;
  color:var(--texto);
  cursor:pointer;
}
.consentimento input{
  flex:none;
  width:20px;
  height:20px;
  margin-top:2px;
  accent-color:var(--cobre-botao);
  cursor:pointer;
}

.form .btn{margin-top:24px;border:0;cursor:pointer;font-family:inherit;font-weight:600;width:100%}
.form .btn:disabled{opacity:.6;cursor:default;transform:none}

.aviso{margin-top:14px;font-size:16px;line-height:1.5;min-height:1.5em}
.aviso.ok{color:#9fd8a8}
.aviso.erro{color:#f0a08a}

.miudo{margin-top:18px;font-size:14px;line-height:1.5;color:var(--suave);max-width:30em}

/* ---------- capa do dia ---------- */

.capa-hoje{
  position:relative;
  display:block;
  aspect-ratio:1;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(224,160,99,.25);
  background:#17171a;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
  transform:rotate(1.2deg);
  transition:transform .6s var(--ease),border-color .3s;
}
.capa-hoje:hover,.capa-hoje:focus-visible{transform:rotate(0) translateY(-4px);border-color:rgba(224,160,99,.6);outline:none}
.capa-hoje img{display:block;width:100%;height:100%;object-fit:cover}
.capa-hoje::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(12,12,14,0) 62%,rgba(12,12,14,.85) 100%);
}
.capa-selo{
  position:absolute;
  z-index:1;
  left:22px;
  bottom:20px;
  font-weight:600;
  font-size:17px;
  color:var(--branco);
}
.capa-hoje.sem-arte{display:none}

/* ---------- as últimas edições ---------- */

.edicoes{padding-top:clamp(40px,7vh,80px)}

.grade{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.4vw,22px);
}
.grade a{display:block}
.grade img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(224,160,99,.16);
  background:#17171a;
  transition:transform .5s var(--ease),border-color .3s;
}
.grade a:hover img,.grade a:focus-visible img{transform:translateY(-4px);border-color:rgba(224,160,99,.55)}
.grade a:focus-visible{outline:none}
.grade a:focus-visible .ed-titulo{text-decoration:underline}
.ed-num{
  display:block;
  margin-top:12px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cobre-claro);
}
.ed-titulo{
  display:block;
  margin-top:6px;
  font-weight:600;
  font-size:clamp(15px,1.1vw,18px);
  line-height:1.35;
  color:var(--branco);
}

.edicoes .botoes.centro{margin-top:clamp(34px,5vh,50px)}
.edicoes .rodape{text-align:center}

/* ---------- celular ---------- */

@media (max-width:860px){
  .assinar{grid-template-columns:1fr;padding:96px 20px 50px;gap:36px}
  .assinar-titulo{font-size:clamp(40px,12vw,60px)}
  .capa-hoje{order:-1;transform:none;max-width:420px}
  .grade{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  .capa-hoje,.capa-hoje:hover{transform:none;transition:none}
}