/* Natal 2026 · Concurso: só o que é desta página. Carrega-se depois de app.css.
   Quatro capítulos (a casa acesa · inscrever · como se escolhe · votar), um h2 por capítulo e h3 nos sub-blocos.
   Palha só na ação principal e nas luzes; Tomate só na próxima data e nos erros. */

/* ---- capítulos ---- */
.capitulo h3{font-size:20px;margin:24px 0 8px}
.capitulo h2+h3,.capitulo h2+.ins-grid{margin-top:0}
.capitulo>p{max-width:62ch}
#conteudo .lista li::before{background:var(--uva)}

/* ---- 2. inscrever: formulário à esquerda, «O que conta» ao lado (sticky a partir de 900 px; no telemóvel vem antes, compacto) ---- */
.ins-grid{display:grid;gap:28px;align-items:start}
.ins-col{min-width:0}
#inscrever .form{gap:18px}
.ins-lado{background:var(--lilas);border-radius:var(--r);padding:14px 18px 16px;font-size:15px;line-height:1.4}
.ins-lado h3{font-size:17px;margin:0 0 4px}
.ins-lado h3+ul+h3{margin-top:12px}
.ins-lado .lista{margin:0;padding-left:1.1em}
.ins-lado .lista li{margin-bottom:2px}
.ins-lado .lista li::before{top:.55em;left:-1.05em;width:7px;height:7px}
/* abaixo de 900 px o painel vem antes do formulário, compacto */
.ins-lado{order:-1;padding:12px 16px;font-size:15px;line-height:1.35}
.ins-lado h3{font-size:16px;margin:0 0 2px}
.ins-lado h3+ul+h3{margin-top:8px}
.ins-lado .lista li{margin-bottom:0}
@media (min-width:900px){
  .ins-grid{grid-template-columns:minmax(0,560px) 1fr;gap:48px}
  .ins-lado{order:0;position:sticky;top:24px;font-size:16px;padding:16px 20px 18px;line-height:1.4}
  .ins-lado h3+ul+h3{margin-top:12px}
  .ins-lado .lista li{margin-bottom:2px}
  .ins-lado h3{font-size:18px}
}
.campo .dica.porque{margin-top:0;padding-left:40px}

/* ---- fim da inscrição: bloco de noite com a casa a acender-se (o único movimento desta página) ---- */
.feito{display:grid;gap:14px;padding:22px var(--gut) 24px;max-width:560px}
.feito .arte{width:100%;max-width:260px;justify-self:center;padding:4px 8px 0}
.feito h3{font-size:clamp(24px,5.5vw,30px);margin:0}
.feito h3:focus{outline:none}
.feito .recap{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-weight:700;color:#fff;font-size:18px}
.feito p{margin:0;font-size:16px}
.feito .acts{margin-top:4px}
@media (prefers-reduced-motion:no-preference){
  .acende:not(.acesa) .lamps,.acende:not(.acesa) .halo{opacity:0}
  .acende .lamps,.acende .halo{transition:opacity .6s ease-out}
}

/* ---- 3. prémios em duas linhas ---- */
.premio-l{margin:0 0 6px}
.premio-l b{color:var(--profundo);font-weight:800}
.premio-l+.hint{margin-top:4px}

/* ---- 3. as datas como grinalda: fio em uva, lâmpadas acesas (palha com halo) nas passadas, apagadas (contorno) nas futuras, a próxima em tomate ---- */
.cronologia{list-style:none;margin:4px 0 0;padding:0;position:relative;display:grid;gap:10px}
.cronologia::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;border-radius:1px;background:var(--uva)}
.cronologia li{position:relative;padding-left:36px;min-height:26px;line-height:1.35}
/* cada lâmpada é uma caixa de 28 px pintada com um gradiente radial (como as da grinalda-fina): apagada = contorno uva; acesa = luz com halo palha; a próxima = tomate */
.cronologia li::before{content:"";position:absolute;left:-4px;top:-1px;width:28px;height:28px;background:radial-gradient(circle,var(--papel) 0 6px,var(--uva) 6.4px 8px,rgba(107,73,114,0) 8.6px)}
.cronologia b{color:var(--profundo);font-weight:800}
.cronologia .o::before{content:" · "}
.cronologia li.passou{color:var(--suave)}
.cronologia li.passou b{color:var(--suave)}
.cronologia li.passou::before{background:radial-gradient(circle,#F6DC94 0 4.5px,#E3B54A 4.8px 7px,rgba(227,181,74,.34) 7.8px,rgba(227,181,74,0) 14px)}
.cronologia li.prox,.cronologia li.prox b{color:var(--tomate);font-weight:800}
.cronologia li.prox::before{background:radial-gradient(circle,var(--tomate) 0 8px,rgba(200,65,43,0) 8.6px)}
@media (min-width:860px){
  .cronologia{grid-template-columns:repeat(6,1fr);gap:0 12px;padding-top:40px;margin-top:8px}
  .cronologia::before{left:0;right:0;top:0;bottom:auto;width:auto;height:28px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M8.33 4Q16.67 17 25 4Q33.33 17 41.67 4Q50 17 58.33 4Q66.67 17 75 4Q83.33 17 91.67 4' fill='none' stroke='%236B4972' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
  .cronologia li{padding-left:0;text-align:center;font-size:16px}
  .cronologia li::before{left:calc(50% - 14px);top:-48px}
  .cronologia b{display:block}
  .cronologia .o::before{content:none}
}

/* ---- 3. as regras, fechadas por defeito ---- */
.regras{margin-top:28px;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.regras summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:4px 0;cursor:pointer;list-style:none;font-weight:700;color:var(--uva)}
.regras summary::-webkit-details-marker{display:none}
.regras summary::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-left:3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.regras[open] summary::before{transform:rotate(45deg);margin-top:-4px}
.regras summary:hover{color:var(--profundo)}
.regras .lista{margin:4px 0 16px}

/* ---- 4. votar ---- */
#votar h3{margin-top:32px}
#votar .acts{margin-top:10px}