/* Dominus · lista de espera · identidade O Gajo dos Anúncios
   Cores e letra do guia de marca: preto #0B0B0C, branco-gelo #F4F4F2,
   amarelo #FFD60A. Inter Tight, uma família só (900 / 500 / 400). */

@font-face{
  font-family:'Inter Tight';
  src:url('fontes/InterTight-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --preto:#0B0B0C;
  --gelo:#F4F4F2;
  --amarelo:#FFD60A;
  --cinza:#9A9A97;
  --erro:#E5484D;
  --ok:#2BB673;
  --margem:clamp(20px,6vw,88px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter Tight',system-ui,-apple-system,sans-serif;
  background:var(--preto);color:var(--gelo);
  line-height:1.4;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.y{color:var(--amarelo)}
mark{
  background:var(--amarelo);color:var(--preto);
  padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ---------- palco ---------- */
.hero{
  position:relative;overflow:hidden;min-height:100vh;
  display:grid;grid-template-columns:1fr;
}
.hud{position:absolute;inset:clamp(14px,3vw,40px);pointer-events:none;z-index:3}
.hud i{position:absolute;width:44px;height:44px;border:3px solid var(--amarelo);opacity:.9}
.hud i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.hud i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.hud i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.hud i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.pts{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.circuito{position:absolute;right:0;bottom:0;width:160px;opacity:.3;z-index:1;pointer-events:none}
@media (min-width:960px){.circuito{width:260px;opacity:.45}}

.foto{position:relative;z-index:0}
.foto img{display:block;width:100%;height:auto}
/* funde a foto no preto sem degradê por cima do texto: o texto fica abaixo */
.foto::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22%;
  background:linear-gradient(to bottom,rgba(11,11,12,0),var(--preto));
}

.conteudo{
  position:relative;z-index:2;
  padding:8px var(--margem) 56px;
  max-width:640px;
}
.tag{
  display:inline-block;background:var(--amarelo);color:var(--preto);
  font-weight:700;font-size:14px;letter-spacing:.02em;
  padding:7px 14px;border-radius:999px;margin-bottom:18px;
}
h1{
  font-weight:900;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(40px,10.5vw,76px);
}
.sub{
  font-weight:500;font-size:clamp(20px,5vw,28px);line-height:1.2;
  margin-top:14px;letter-spacing:-.01em;
}
.dash{display:block;width:56px;height:5px;background:var(--amarelo);margin:22px 0 18px}
.body{font-weight:400;font-size:17px;color:#D8D8D5;max-width:34em}

/* ---------- formulário ---------- */
form{margin-top:28px;display:grid;gap:12px}
label{display:block;font-size:13px;font-weight:600;color:var(--cinza);margin-bottom:6px}
input{
  width:100%;font:inherit;font-size:17px;color:var(--preto);
  background:var(--gelo);border:2px solid transparent;border-radius:12px;
  padding:15px 16px;outline:none;
}
input:focus{border-color:var(--amarelo);box-shadow:0 0 0 4px rgba(255,214,10,.25)}
input[aria-invalid="true"]{border-color:var(--erro)}
.msg-campo{color:#FF8A8E;font-size:13px;margin-top:5px;min-height:0}
.msg-campo:empty{display:none}

button{
  margin-top:6px;font:inherit;font-weight:800;font-size:19px;letter-spacing:-.01em;
  background:var(--amarelo);color:var(--preto);border:0;border-radius:12px;
  padding:18px 20px;cursor:pointer;
  box-shadow:0 0 28px rgba(255,214,10,.35);
  transition:transform .12s ease,box-shadow .12s ease;
}
button:hover{transform:translateY(-1px);box-shadow:0 0 40px rgba(255,214,10,.5)}
button:disabled{opacity:.6;cursor:wait;transform:none}
.nota{font-size:13px;color:var(--cinza);margin-top:4px}
.erro-envio{color:#FF8A8E;font-size:14px}
.erro-envio:empty{display:none}

/* ---------- confirmação ---------- */
.feito{display:none;margin-top:28px;background:var(--preto);position:relative;border:2px solid var(--amarelo);border-radius:16px;padding:22px}
.feito h2{font-weight:900;font-size:30px;letter-spacing:-.03em;line-height:1.05}
.feito p{margin-top:10px;color:#D8D8D5}
.enviado form{display:none}
.enviado .feito{display:block}
.aviso-teste{
  display:none;margin-top:12px;background:var(--amarelo);color:var(--preto);
  font-size:13px;font-weight:600;padding:8px 12px;border-radius:8px;
}
.modo-teste .aviso-teste{display:block}

/* ---------- rodapé ---------- */
footer{
  position:relative;z-index:2;border-top:1px solid #222;
  padding:28px var(--margem) 40px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:16px;
}
footer .sig{height:56px;width:auto}
footer small{color:var(--cinza);font-size:13px}

/* ---------- ecrã largo: texto à esquerda, foto à direita ---------- */
@media (min-width:960px){
  .pts{display:block}
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .foto{order:2;align-self:stretch;display:flex;align-items:center}
  .foto img{
    width:100%;height:auto;
    -webkit-mask-image:radial-gradient(ellipse 72% 75% at 55% 45%,#000 55%,transparent 100%);
            mask-image:radial-gradient(ellipse 72% 75% at 55% 45%,#000 55%,transparent 100%);
  }
  .foto::after{display:none}
  .conteudo{order:1;padding:72px 24px 72px var(--margem);max-width:none}
  h1{font-size:clamp(56px,5.6vw,84px)}
}
