/* nunovelho.com: todo o CSS do site. Especificacao em .myDocs\caderno-construcao.md (desenho
   aprovado a 17/10/2026). Sem estilos inline: a CSP do Web.config tem style-src 'self'. */

@font-face{
  font-family:"Bricolage Grotesque";
  src:url("/assets/fonts/BricolageGrotesque.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+2018-201F,U+2026;
}

:root{
  --giz:#F4F3F1;
  --tinta:#1A1619;
  --rodamina:#D9246F;
  --branco:#FFFFFF;
  --cinza:#5E555B;
  --borda:#8A7F87;
  --radius-campo:12px;
  --radius-cartao:24px;
  --font:"Bricolage Grotesque", system-ui, sans-serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--giz);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html:has(dialog[open]){overflow:hidden}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--giz);color:var(--tinta);font-family:var(--font);font-weight:400}
h1,h2,p{margin:0}
[hidden]{display:none !important}

/* ---------- palco: conteudo centrado na vertical e na horizontal */
.stage{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:56px;padding:32px 24px;text-align:center}
.stage--msg{gap:28px}

/* ---------- monograma NV */
.mono{line-height:0}
.nv{display:block;flex:none}
.nv .mk{fill:none;stroke:var(--tinta);stroke-width:30;stroke-linecap:round;opacity:.92;filter:url(#nvMarker)}
.nv .pn{fill:none;stroke:var(--rodamina);stroke-width:8;stroke-linecap:round}
.nv--home{width:340px;height:340px}
.nv--msg{width:180px;height:180px}

/* ---------- animacao (so na pagina inicial; corre uma vez)
   Corre sempre, mesmo com "reduzir movimento" no sistema: decisao do Nuno a 17/10/2026. Dura
   menos de 3 s e nao pisca, por isso fica dentro do WCAG 2.2.2 (movimento automatico ate 5 s). */
.nv--draw path{stroke-dasharray:1 2;stroke-dashoffset:1;animation:nvDraw .5s cubic-bezier(.6,.1,.3,1) forwards}
/* Primeiro o N (caneta), depois o V (marcador): pedido do Nuno a 17/10/2026. O N continua por cima
   do V no desenho final, porque a ordem dos traços no SVG nao muda. */
.nv--draw .s3{animation-delay:.2s;animation-duration:.38s}
.nv--draw .s4{animation-delay:.55s;animation-duration:.42s}
.nv--draw .s5{animation-delay:.95s;animation-duration:.38s}
.nv--draw .s1{animation-delay:1.4s}
.nv--draw .s2{animation-delay:1.85s}
/* Depois do V, a caneta escreve 1 0 0 1 1 1 0 0 por baixo do monograma (pedido do Nuno a 17/10/2026)
   e a sequencia fica no ecra. Tem a largura dos tracos do NV (128 de 240 unidades do viewBox). */
.seq{display:block;width:calc(340px*128/240);margin:-18px auto 0;overflow:visible}
.seq path{fill:none;stroke:var(--rodamina);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1;animation:nvDraw .16s ease-out forwards}
.seq .q0{animation-delay:2.4s}
.seq .q1{animation-delay:2.53s}
.seq .q2{animation-delay:2.66s}
.seq .q3{animation-delay:2.79s}
.seq .q4{animation-delay:2.92s}
.seq .q5{animation-delay:3.05s}
.seq .q6{animation-delay:3.18s}
.seq .q7{animation-delay:3.31s}
/* Charada sem palavras (pedido do Nuno a 17/10/2026): com o rato 8 s por cima da sequencia, ou
   8 s depois de um toque no telemovel (classe is-hint, do site.js), a caneta desenha uma chaveta debaixo
   dos quatro primeiros algarismos, uma seta e um ? a frente. Se o rato sai antes, a contagem recomeca;
   ao sair, a pista desaparece. Os 8 s estao nos animation-delay de cada traco. */
.seq .hint path{stroke-width:1.6;opacity:.85;animation-name:none;animation-duration:.3s;animation-timing-function:ease-out;animation-delay:0s;animation-fill-mode:forwards}
@media (hover:hover){.seq:hover .hint path{animation-name:nvDraw}}
.seq.is-hint .hint path{animation-name:nvDraw}
.seq .hint .h1{animation-delay:8s}
.seq .hint .h2{animation-delay:8.18s}
.seq .hint .h3{animation-delay:8.46s;animation-duration:.14s}
.seq .hint .h4{animation-delay:8.62s}
.seq .hint .h5{animation-delay:8.92s;animation-duration:.06s}
.cta--late{opacity:0;animation:nvIn .5s ease-out 2.4s forwards}
@keyframes nvDraw{to{stroke-dashoffset:0}}
@keyframes nvIn{to{opacity:1}}

/* ---------- botoes: capsula Tinta, Rodamina ao passar o rato e no foco */
.cta,.btn,.send{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--tinta);color:var(--branco);font-family:var(--font);font-weight:600;line-height:1;text-decoration:none;cursor:pointer;transition:background-color .15s ease}
.cta{min-height:56px;padding:0 36px;font-size:20px;letter-spacing:.01em}
.btn{min-height:52px;padding:0 32px;font-size:18px}
.send{width:100%;height:54px;padding:0 24px;font-size:18px}
.cta:hover,.cta:focus-visible,.btn:hover,.btn:focus-visible,.send:hover,.send:focus-visible{background:var(--rodamina)}
.cta:focus-visible,.btn:focus-visible,.send:focus-visible,.close:focus-visible,.logo:focus-visible{outline:3px solid var(--rodamina);outline-offset:3px}
.send:disabled{cursor:progress}

/* ---------- /thanks/ e /sorry/ */
.msg-title{font-size:56px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.msg-text{font-size:22px;line-height:1.45}

/* ---------- formulario: <dialog> a ecra inteiro */
.contact{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:40px 24px;border:0;background:var(--giz);color:var(--tinta);overflow:auto;overscroll-behavior:contain}
.contact[open]{display:flex;flex-direction:column}
.contact::backdrop{background:var(--giz)}
/* Sem JS: o #contact:target mostra o formulario como bloco estatico. */
html:not(.js) .contact:target{display:flex;flex-direction:column;position:fixed;inset:0;z-index:10}

.logo{position:absolute;top:40px;left:48px;display:block;line-height:0;border-radius:12px}
.logo img{display:block;width:72px;height:72px}

.card{width:100%;max-width:560px;margin:auto;display:flex;flex-direction:column;gap:22px;padding:40px 44px 36px;background:var(--branco);border-radius:var(--radius-cartao);box-shadow:0 20px 50px rgba(26,22,25,.12)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.card-head h2{font-size:32px;font-weight:600;letter-spacing:-.01em;line-height:1.1}
.close{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--giz);color:var(--tinta);cursor:pointer}
.close:hover{box-shadow:inset 0 0 0 1.5px var(--borda)}
.close svg{display:block;width:20px;height:20px}

.form{display:flex;flex-direction:column;gap:18px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;min-width:0}
.field label{margin-bottom:8px;font-size:15px;font-weight:600;line-height:1.3}
.field input,.field textarea{width:100%;margin:0;font:inherit;font-size:16px;color:var(--tinta);background:var(--branco);border:1.5px solid var(--borda);border-radius:var(--radius-campo)}
.field input{height:48px;padding:0 14px}
.field textarea{display:block;min-height:168px;padding:12px 14px;line-height:1.5;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--tinta);outline:3px solid var(--rodamina);outline-offset:1px}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--rodamina)}
.error{display:none;margin-top:6px;font-size:14px;line-height:1.4;color:var(--tinta)}
.field:has(:user-invalid) .error{display:block}
.meta{display:flex;align-items:flex-start;gap:12px}
.counter{margin:6px 0 0 auto;font-size:13px;line-height:1.4;color:var(--cinza);white-space:nowrap}
.human{display:flex;flex-direction:column;gap:8px}
.cf-turnstile{min-height:65px}
.note{font-size:14px;line-height:1.4;color:var(--cinza)}

/* Entre o telemovel e o computador o logotipo ainda esta visivel: o cartao desce para nao lhe tocar. */
@media (min-width:641px) and (max-width:1023px){
  .contact{padding-top:136px}
}

/* ---------- telemovel */
@media (max-width:640px){
  .stage{gap:40px}
  .stage--msg{gap:24px}
  .nv--home{width:232px;height:232px}
  .seq{width:calc(232px*128/240);margin-top:-12px}
  .nv--msg{width:132px;height:132px}
  .cta{font-size:19px}
  .msg-title{font-size:40px}
  .msg-text{font-size:18px}
  .msg-text span{display:block}

  .contact{padding:0}
  .logo{display:none}
  .card{flex:1 0 auto;max-width:none;margin:0;padding:20px 20px 28px;border-radius:0;box-shadow:none}
  .card-head h2{font-size:28px}
  .form{flex:1}
  .row{grid-template-columns:1fr}
  .field textarea{min-height:176px}
  .send{margin-top:auto}
}