/* Natal 2026 · estilos comuns
   JF Design System (provisório): kit/tokens.css. Letra Jost, três pesos: 500 lê, 700 realça, 800 nomeia.
   Tema papel em todo o site; só os blocos «lugar aceso» (.noite) são em fundo profundo. Palha é o único realce:
   só na ação principal (.btn.cta) e nas luzes. Tomate só na próxima data (.datas .prox) e nos erros.
   Seleção de texto, cursor e foco ficam com as cores do sistema. Revisão de 11 nov: escala tipográfica, data depois do título, espaço entre capítulos. */
@font-face{font-family:"Jost";font-weight:500;font-display:swap;src:url(/assets/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:700;font-display:swap;src:url(/assets/jost-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:800;font-display:swap;src:url(/assets/jost-latin-800-normal.woff2) format("woff2")}
:root{
  --lavanda:#96689F; --uva:#6B4972; --profundo:#3F2550; --tejo:#1F6F86; --palha:#E3B54A; --luz:#F6DC94; --tomate:#C8412B;
  --lilas:#F1EBF3; --papel:#FBF8FC; --tinta:#2A1D33; --suave:#6B5A75; --linha:#DDD3E2; --noite:#1B1222;
  --f:"Jost","Futura","Century Gothic",sans-serif;
  --r:6px; --r-ctl:5px; --r-tag:3px;
  --gut:clamp(16px,4vw,40px);
  --barra:64px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--papel);color:var(--tinta);font:500 17px/1.5 var(--f);min-height:100vh;
  padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom))}
a{color:var(--uva);text-underline-offset:3px}
.prose a:hover,.lnk:hover,.hint a:hover,.rodape a:hover{color:var(--profundo)}
.noite a:not(.btn):hover{color:#fff}
/* escala: h1 38–64, h2 28–40, h3 20–24, corpo 17/1.5 */
h1,h2,h3{font-weight:800;line-height:1.1;margin:0;letter-spacing:-.01em;color:var(--profundo);text-wrap:balance}
h1{font-size:clamp(42px,10vw,64px);line-height:1;letter-spacing:-.02em}
h2{font-size:clamp(28px,4vw,40px);margin:0 0 12px}
h3{font-size:clamp(20px,2.2vw,24px);line-height:1.2}
p{margin:0 0 12px;text-wrap:pretty}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--profundo);color:#fff;padding:12px 16px;border-radius:var(--r);font-weight:700}
.skip:focus{top:8px}
svg.i{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lead{font-size:19px;color:var(--tinta);max-width:60ch}
.hint{color:var(--suave);font-size:15px;margin:0}
.label{font:700 12px/1.2 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
/* datas com números tabulares */
.quando,.resumo .dia,.datas,.data-grande,.hero .linhas b,.onde,.proximo .onde{font-variant-numeric:tabular-nums}

/* ---- cabeçalho e navegação ---- */
.top{background:var(--papel);border-bottom:1px solid var(--linha)}
.top .bar{display:flex;align-items:center;gap:12px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;color:var(--profundo);text-decoration:none;min-width:0;margin-right:auto}
.brand img{width:auto;height:44px;flex:0 0 auto}
.brand span{display:flex;flex-wrap:wrap;column-gap:.45em;align-items:baseline;line-height:1.15}
.brand b{font-size:21px;font-weight:800;letter-spacing:-.01em}
.brand small{font-size:16px;font-weight:700;color:var(--suave)}
.brand .sep{color:var(--suave);font-weight:700}
@media (max-width:480px){.brand span{display:block}.brand .sep{display:none}.brand b{display:block;font-size:20px}.brand small{display:block;font-size:15px}}
.partilhar{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:var(--r);
  background:var(--lilas);color:var(--profundo);font:700 15px/1 var(--f);cursor:pointer}
.partilhar:hover{background:#E7DDEB}
.partilhar svg{width:22px;height:22px}
@media (max-width:560px){.partilhar span{display:none}}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--papel);border-top:1px solid var(--linha);
  padding:0 4px env(safe-area-inset-bottom)}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--barra);padding:6px 2px;
  color:var(--suave);text-decoration:none;font:700 14px/1.1 var(--f)}
.nav a:hover{color:var(--profundo)}
.nav a[aria-current="page"]{color:var(--profundo)}
.nav a[aria-current="page"] svg{background:var(--lilas);box-shadow:0 0 0 6px var(--lilas);border-radius:50%;stroke-width:2.4}
.nav svg{width:24px;height:24px;margin-bottom:3px}
@media (min-width:820px){
  body{padding-bottom:0}
  .nav{position:static;order:2;border:0;padding:0;background:none;gap:4px}
  .nav a{flex:0 0 auto;flex-direction:row;gap:8px;min-height:44px;padding:6px 14px;border-radius:var(--r);font-size:16px}
  .nav a:hover{background:var(--lilas)}
  .nav a[aria-current="page"]{background:var(--lilas)}
  .nav a[aria-current="page"] svg{background:none;box-shadow:none}
  .nav svg{margin:0;width:22px;height:22px}
  .top .bar{gap:20px}
  /* no computador «Partilhar» pesa menos do que a navegação: só o ícone e a palavra, como uma ligação */
  .partilhar{order:3;background:none;color:var(--uva);padding:0 6px;font-size:16px}
  .partilhar:hover{background:none;color:var(--profundo);text-decoration:underline;text-underline-offset:3px}
}

/* ---- estrutura: entre capítulos 56–96 px; dentro de um capítulo 16–32 px; mais espaço acima de um título do que abaixo ---- */
main{display:block;padding-top:24px;padding-bottom:24px}
main .wrap>*+*,#blocos>*+*{margin-top:clamp(36px,5vw,60px)}
main .wrap>section+section,#blocos>section+section,main .wrap>section+#blocos,main .wrap>*+hr.grinalda-fina{margin-top:clamp(56px,8vw,96px)}
main .wrap>hr.grinalda-fina+*{margin-top:clamp(20px,3vw,32px)}
.cols{display:grid;gap:16px}
@media (min-width:760px){.cols.dois{grid-template-columns:1fr 1fr}.cols.tres{grid-template-columns:repeat(3,1fr)}}

/* ---- botões: uva/branco; secundário lilás; Palha só para a ação principal do público ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:var(--r);border:0;
  background:var(--uva);color:#fff;font:700 16px/1.1 var(--f);text-decoration:none;cursor:pointer;transition:background .15s ease-out}
.btn:not(.sec):not(.cta):hover{background:var(--profundo);color:#fff}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn.cta{background:var(--palha);color:var(--noite)}
.btn.cta:hover{background:var(--luz);color:var(--noite)}
.btn.sec{background:var(--lilas);color:var(--profundo);box-shadow:inset 0 0 0 1px var(--linha)}
.btn.sec:hover{background:#E7DDEB;color:var(--profundo)}
.btn.small{min-height:44px;padding:8px 14px;font-size:15px}
.noite .btn.sec,.hero .btn.sec{background:rgba(255,255,255,.24);color:#fff;box-shadow:none}
.noite .btn.sec:hover,.hero .btn.sec:hover{background:rgba(255,255,255,.34);color:#fff}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.lnk{display:inline-flex;align-items:center;min-height:44px;color:var(--uva);font-weight:700}
.tag{display:inline-block;background:var(--lilas);color:var(--profundo);border-radius:var(--r-tag);font:700 12px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px}
.tag.tom{background:var(--tomate);color:#fff}
.tag.uva{background:var(--uva);color:#fff}

/* ---- cartões ---- */
.card{background:#fff;border:1px solid var(--linha);border-radius:var(--r);padding:clamp(18px,3vw,24px)}
.card h3{margin-bottom:6px}
.card p:last-child{margin-bottom:0}

/* ---- bloco noite: o lugar aceso (único fundo escuro) ---- */
.noite{background:var(--profundo);color:#F4ECF7;border-radius:var(--r);overflow:hidden}
.noite h1,.noite h2,.noite h3{color:#fff}
.noite a:not(.btn){color:var(--luz)}
.noite a.lnk{color:#fff;text-decoration:underline;text-underline-offset:4px}
.noite .label{color:#D9CBE0}
.noite p{color:#EADFF0}
svg.lugar{display:block;width:100%;height:auto;overflow:visible}
/* hero: no telemóvel a arte vem em cima (160–180 px); no computador à direita, com 440 px de altura mínima */
.hero{display:grid;gap:14px;padding:16px var(--gut) 24px}
.hero .arte{order:-1;height:170px;width:100%;display:flex;justify-content:center;align-items:center;padding:4px 0 0}
.hero .arte svg.lugar{height:100%;width:auto;max-width:100%;aspect-ratio:3/2}
.hero .txt{display:grid;gap:14px;align-content:center;justify-items:start}
.hero .txt p{font-size:clamp(19px,2vw,22px);margin:0;max-width:44ch}
.hero .txt p.local{font-weight:700;color:#fff}
.hero .txt p.moldura{font-size:17px;color:#D9CBE0;max-width:46ch}
.hero .txt .data-grande{display:grid;gap:6px;margin:2px 0;max-width:none;font:800 clamp(36px,8vw,64px)/1 var(--f);color:var(--luz);letter-spacing:-.02em}
.hero .txt .data-grande small{font:700 18px/1.3 var(--f);color:#EADFF0;letter-spacing:0}
@media (min-width:760px){
  .hero{grid-template-columns:1.1fr 1fr;align-items:center;padding:40px 44px;gap:36px;min-height:440px}
  .hero .arte{order:0;height:auto;max-width:460px;justify-self:center;padding:0}
  .hero .arte svg.lugar{height:auto;width:100%}
}

/* ---- agenda: lista resumida ---- */
.resumo{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--linha);border-radius:var(--r);overflow:hidden}
.resumo li+li{border-top:1px solid var(--linha)}
.resumo a{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center;padding:14px 16px;min-height:64px;text-decoration:none;color:var(--tinta)}
.resumo a:hover{background:var(--lilas)}
.resumo .dia{font:800 15px/1.15 var(--f);color:var(--profundo);text-transform:none}
.resumo .dia small{display:block;font-weight:700;color:var(--suave);font-size:13px}
.resumo b{display:block;font-weight:800;color:var(--profundo);line-height:1.2}
.resumo span.m{display:block;color:var(--suave);font-size:15px;line-height:1.35}
.resumo li.passou .dia,.resumo li.passou b{color:var(--suave)}

/* ---- momento (agenda): lugar aceso + texto; a data vem depois do título e não compete com ele ---- */
.momentos{display:grid;gap:20px;list-style:none;margin:0;padding:0}
.momento{display:grid;background:#fff;border:1px solid var(--linha);border-radius:var(--r);overflow:hidden}
.momento .arte{background:var(--profundo);padding:14px 20px 8px;display:grid;place-items:center}
.momento .arte svg.lugar{max-width:260px;width:100%}
.momento .arte svg.fio{max-width:260px;max-height:110px}
.momento .corpo{padding:clamp(18px,3vw,24px)}
.momento .quando,.proximo .quando{font:700 18px/1.3 var(--f);color:var(--uva);margin:0 0 8px}
.proximo .quando .hoje{color:var(--tomate);font-weight:700;font-size:19px}
.momento h2,.momento h3{font-size:clamp(24px,3vw,30px);margin-bottom:4px}
.momento dl{margin:10px 0 0;display:grid;gap:4px}
.momento dt{font:700 12px/1.2 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--suave);margin-top:6px}
.momento dd{margin:0}
@media (min-width:700px){.momento{grid-template-columns:240px 1fr}.momento .arte{padding:20px}}
.proximo{display:grid;gap:4px}
.proximo h2{margin-bottom:4px}

/* ---- espaços decorados ---- */
.espacos{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.espacos li{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--linha);border-radius:var(--r);padding:10px 14px;min-height:60px}
.espacos .letra{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;border-radius:6px;background:var(--lilas);color:var(--profundo);font:800 17px/1 var(--f);transform:rotate(45deg) scale(.82)}
.espacos .letra b{transform:rotate(-45deg) scale(1.22)}
.espacos span.n{font-weight:700}
.espacos small{display:block;color:var(--suave);font-size:15px;line-height:1.3}

/* ---- concurso ---- */
.passos{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:p}
.lista{margin:0;padding-left:1.2em}
.lista li{margin-bottom:6px}
.premios{display:grid;gap:16px}
@media (min-width:700px){.premios{grid-template-columns:1fr 1fr}}
.premio{background:#fff;border:1px solid var(--linha);border-radius:var(--r);padding:clamp(18px,3vw,24px)}
.premio h3{margin-bottom:6px}
.premio p b{font-size:20px;color:var(--profundo);font-weight:800}
.datas{list-style:none;margin:0;padding:0;position:relative}
.datas::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--linha)}
.datas b{color:var(--profundo)}
.casas{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.casa{background:#fff;border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.casa.meu{border-color:var(--uva);box-shadow:0 0 0 2px var(--uva)}
.casa .foto{aspect-ratio:4/3;background:var(--profundo);display:grid;place-items:center;overflow:hidden}
.casa .foto img{width:100%;height:100%;object-fit:cover;display:block}
.casa .foto .sem{color:#EADFF0;font-weight:700;font-size:15px}
.casa .info{padding:14px 16px 16px;display:grid;gap:10px;flex:1;align-content:space-between}
.casa .nome{display:flex;gap:10px;align-items:center}
.casa .nome b{font-size:20px;color:var(--profundo);font-weight:800;line-height:1.15}
.casa .nome small{display:block;font-size:15px;font-weight:500;color:var(--suave)}
.casa .num{flex:0 0 auto;display:grid;place-items:center;min-width:42px;height:42px;padding:0 6px;border-radius:50%;background:var(--profundo);color:#fff;font:800 18px/1 var(--f)}
.casa .btn{width:100%}
.aviso{background:var(--lilas);color:var(--tinta);padding:12px 16px;border-radius:var(--r);margin:12px 0}
.aviso.erro{background:rgba(200,65,43,.10)}
.vencedor{display:grid;gap:4px}

/* ---- texto corrido (privacidade, acessibilidade) ---- */
.prose{max-width:68ch}
.prose h1{margin-bottom:16px}
.prose h2{font-size:clamp(24px,3vw,30px);margin:40px 0 10px}
.prose ul{padding-left:1.2em;margin:0 0 12px}
.prose li{margin-bottom:6px}

/* ---- rodapé ---- */
footer.rodape{border-top:1px solid var(--linha);margin-top:40px;padding:24px 0 28px;color:var(--suave);font-size:15px}
footer.rodape .wrap{display:grid;gap:14px}
footer.rodape .quem{display:flex;gap:12px;align-items:center}
footer.rodape img{height:38px;width:auto}
footer.rodape nav{display:flex;flex-wrap:wrap;gap:0 14px}
footer.rodape .redes{display:inline-flex;gap:14px;white-space:nowrap}
footer.rodape a{display:inline-flex;align-items:center;min-height:44px;color:var(--uva);font-weight:700}
.toast{position:fixed;left:50%;bottom:calc(var(--barra) + 18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;background:var(--noite);color:#fff;
  padding:12px 18px;border-radius:var(--r);font-weight:700;font-size:15px;max-width:calc(100% - 32px)}
@media (min-width:820px){.toast{bottom:24px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.nav,.partilhar,.toast{display:none}body{padding:0}}

/* 11 nov: inscrição e início */
/* ---- formulário de inscrição (/concurso/#inscrever) ---- */
.form{display:grid;gap:22px;max-width:560px}
.campo label,.campo legend{display:block;font-weight:700;color:var(--profundo);margin-bottom:6px;padding:0}
.campo fieldset{border:0;margin:0;padding:0;min-width:0}
.campo .opc{font-weight:500;color:var(--suave)}
.campo input[type=text],.campo input[type=tel],.campo input[type=email],.campo input[type=url],.campo textarea{display:block;width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--suave);border-radius:var(--r-ctl);
  background:#fff;color:var(--tinta);font:500 17px/1.4 var(--f)}
.campo textarea{min-height:96px;resize:vertical}
.campo .dica{margin:6px 0 0;color:var(--suave);font-size:15px}
.campo.com-erro input[type=text],.campo.com-erro input[type=tel],.campo.com-erro input[type=email],.campo.com-erro input[type=url],.campo.com-erro textarea{border-color:var(--tomate);box-shadow:inset 0 0 0 1px var(--tomate)}
.erro-campo,.erro-geral{margin:8px 0 0;color:#B23A26;color:color-mix(in srgb,var(--tomate) 88%,#000);font-weight:700;font-size:16px;display:flex;gap:8px;align-items:baseline}
.erro-campo::before,.erro-geral::before{content:"!";flex:0 0 auto;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;font:800 12px/1 var(--f)}
.opcoes{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.opcao{position:relative;display:block;margin:0!important}
.opcao input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opcao span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:10px 14px;border-radius:var(--r-ctl);
  background:var(--lilas);color:var(--profundo);box-shadow:inset 0 0 0 1px var(--linha);font:700 16px/1.15 var(--f)}
.opcao input:checked+span{background:var(--uva);color:#fff;box-shadow:none}
/* o input é invisível: o anel de foco vai para o rótulo, com a cor de foco do sistema */
.opcao input:focus-visible+span{outline:3px solid var(--palha);outline-offset:2px;box-shadow:0 0 0 2px var(--profundo)}
.opcao:hover input:not(:checked)+span{background:#E7DDEB}
.campo.com-erro .opcao span{box-shadow:inset 0 0 0 2px var(--tomate)}
.check{display:flex!important;gap:12px;align-items:flex-start;min-height:44px;padding:8px 0;font-weight:700;cursor:pointer}
.check input{flex:0 0 auto;width:28px;height:28px;margin:0;accent-color:var(--uva);cursor:pointer}
.arm{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ok{margin:0;padding:16px 18px;border-radius:var(--r);background:var(--lilas);color:var(--profundo);font:800 20px/1.3 var(--f)}
.ok:focus{outline:none}
.form .acts{margin-top:0}
.form .btn{min-width:min(100%,260px)}

/* ---- início: hero por fase, «Acenda a sua casa», o mapa, linha discreta ---- */
.hero .linhas{list-style:none;margin:0;padding:0;display:grid;gap:12px;width:100%;max-width:44ch}
.hero .linhas li{display:flex;gap:14px;align-items:baseline}
.hero .linhas b{flex:0 0 auto;min-width:3.2ch;font:800 clamp(26px,3vw,34px)/1.1 var(--f);color:var(--luz)}
.hero .linhas span{color:#EADFF0;font-weight:700;line-height:1.3}
.hero .linhas small{display:block;font-weight:500;font-size:15px;color:#D9CBE0}
.hero .acts{margin-top:6px}
/* bloco «Acenda a sua casa»: a anatomia do hero (casa em cima no telemóvel, à direita no computador; data como objeto; dois ganhos; botão) */
.acende{display:grid;gap:14px;padding:16px var(--gut) 24px}
.acende .arte{order:-1;height:170px;width:100%;display:flex;justify-content:center;align-items:center;padding:4px 0 0}
.acende .arte svg.lugar{height:100%;width:auto;max-width:100%;aspect-ratio:3/2}
.acende .txt{display:grid;gap:14px;align-content:center;justify-items:start}
.acende h2{margin:0}
.acende p{margin:0;max-width:44ch;font-size:clamp(19px,2vw,22px)}
.acende .txt .data-grande{display:grid;gap:6px;margin:2px 0;max-width:none;font:800 clamp(36px,8vw,64px)/1 var(--f);color:var(--luz);letter-spacing:-.02em}
.acende .txt .data-grande small{font:700 18px/1.3 var(--f);color:#EADFF0;letter-spacing:0}
.acende .ganhos{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:44ch}
.acende .ganhos li{font-size:clamp(17px,1.8vw,19px);color:#EADFF0}
.acende .acts{margin-top:6px}
.acende .btn{min-height:48px}
@media (min-width:760px){
  .acende{grid-template-columns:minmax(0,1fr) 1fr;align-items:center;gap:32px;padding:40px;min-height:300px}
  .acende .arte{order:0;grid-column:2;grid-row:1;height:auto;max-width:360px;justify-self:end;padding:0}
  .acende .arte svg.lugar{height:auto;width:100%}
  .acende .txt{grid-column:1;grid-row:1}
}
.card.proximo.com-lugar{padding:0;overflow:hidden}
.card.proximo.com-lugar .faixa{display:flex;justify-content:center;align-items:center;height:96px;background:var(--profundo);padding:6px 16px}
.card.proximo.com-lugar .faixa svg.lugar{width:auto;height:100%;max-width:100%}
.card.proximo.com-lugar .txt{padding:clamp(18px,3vw,24px)}
.card.proximo .onde{margin:0;color:var(--suave)}
.card.pequeno{padding:14px 18px}
.card.pequeno h3{margin-bottom:4px}
.card.pequeno .acts{margin-top:10px}
p.frase{margin:0;max-width:56ch;font-size:clamp(17px,1.8vw,19px);color:var(--tinta)}
p.discreta{display:flex;flex-wrap:wrap;gap:0 18px;align-items:center;color:var(--suave);font-size:15px;margin:0}
.momento .espacos{margin:12px 0 0}
.momento p.ver-mapa{margin:8px 0 0}
.momento p.ver-mapa .lnk{display:inline-flex;align-items:center;min-height:44px}
#linha-espacos{margin:8px 0 0}

/* 11 nov: apontamentos de Natal (concurso, início, agenda, privacidade, acessibilidade; nunca no mapa, caderneta, dados, gestão) */
/* a) passos: a bola do sinal das casas (argola uva, bola profundo, anel branco com fio de luzes palha), número em HTML por cima */
.passos li{position:relative;display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start;counter-increment:p;min-height:46px}
.passos li::before{content:counter(p);display:grid;place-items:center;width:46px;height:46px;padding-top:5px;box-sizing:border-box;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='-50' y='-50' width='300' height='300'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='100' cy='12' r='10' fill='none' stroke='%236B4972' stroke-width='6'/%3E%3Ccircle cx='100' cy='110' r='88' fill='%233F2550'/%3E%3Ccircle cx='100' cy='110' r='80' fill='none' stroke='%23fff' stroke-width='2.5' opacity='.92'/%3E%3Ccircle cx='100' cy='110' r='80' fill='none' stroke='%23E3B54A' stroke-width='13' stroke-linecap='round' stroke-dasharray='0 19' opacity='.3' filter='url%28%23b%29'/%3E%3Ccircle cx='100' cy='110' r='80' fill='none' stroke='%23F6DC94' stroke-width='7' stroke-linecap='round' stroke-dasharray='0 19'/%3E%3C/svg%3E") center/100% 100% no-repeat;color:#fff;font:800 20px/1 var(--f)}
/* b) divisória-grinalda: a largura toda do .wrap. O fio (uva, duas ondas) é o fundo do hr; as 10 lâmpadas (palha com brilho) estão no ::before;
   o enfeite do meio no ::after, a alternar por divisória: estrela, sino, presente. `--g` é a escala: 1 até 1279 px (48 px de altura, fio 2 px,
   lâmpadas 5 px); 4/3 a partir de 1280 px (64 px, fio 3 px, lâmpadas 7 px). */
.grinalda-fina{--g:1;position:relative;display:block;border:0;height:calc(48px*var(--g));width:100%;margin-left:0;margin-right:0;padding:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 48' preserveAspectRatio='none'%3E%3Cpath d='M-1 6Q25 34 50 14Q75 34 101 6' 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}
.grinalda-fina::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 5% calc(19.1px*var(--g)),#F6DC94 0 calc(2.6px*var(--g)),#E3B54A calc(2.8px*var(--g)) calc(4px*var(--g)),rgba(227,181,74,.34) calc(4.6px*var(--g)),rgba(227,181,74,0) calc(9.5px*var(--g))),linear-gradient(#6B4972,#6B4972) calc(5% - .75px*var(--g)) calc(11.1px*var(--g))/calc(1.5px*var(--g)) calc(5px*var(--g)) no-repeat,radial-gradient(circle at 15% calc(26.5px*var(--g)),#F6DC94 0 calc(2.6px*var(--g)),#E3B54A calc(2.8px*var(--g)) calc(4px*var(--g)),rgba(227,181,74,.34) calc(4.6px*var(--g)),rgba(227,181,74,0) calc(9.5px*var(--g))),linear-gradient(#6B4972,#6B4972) calc(15% - .75px*var(--g)) calc(18.5px*var(--g))/calc(1.5px*var(--g)) calc(5px*var(--g)) no-repeat,radial-gradient(circle at 25% calc(30.0px*var(--g)),#F6DC94 0 calc(2.6px*var(--g)),#E3B54A calc(2.8px*var(--g)) calc(4px*var(--g)),rgba(227,181,74,.34) calc(4.6px*var(--g)),rgba(227,181,74,0) calc(9.5px*var(--g))),linear-gradient(#6B4972,#6B4972) calc(25% - .75px*var(--g)) calc(22.0px*var(--g))/calc(1.5px*var(--g)) calc(5px*var(--g)) no-repeat,radial-gradient(circle at 35% calc(29.7px*var(--g)),#F6DC94 0 calc(2.6px*var(--g)),#E3B54A calc(2.8px*var(--g)) calc(4px*var(--g)),rgba(227,181,74,.34) calc(4.6px*var(--g)),rgba(227,181,74,0) calc(9.5px*var(--g))),linear-gradient(#6B4972,#6B4972) calc(35% - .75px*var(--g)) calc(21.7px*var(--g))/calc(1.5px*var(--g)) calc(5px*var(--g)) no-repeat,radial-gradient(circle at 45% calc(25.5px*var(--g)),#F6DC94 0 calc(2.6px*var(--g)),#E3B54A calc(2.8px*var(--g)) calc(4px*var(--g)),rgba(227,181,74,.34) calc(4.6px*var(--g)),rgba(227,181,74,0) calc(9.5px*var(--g))),linear-gradient(#6B4972,#6B4972) calc(45% - .75px*var(--g)) calc(17.5px*var(--g))/calc(1.5px*var(--g)) calc(5px*var(--g)) no-repeat,radial-gradient(circle at 55% calc(25.5px*var(--g)),#F6DC94 0 calc(2.6px*var(--g)),#E3B54A calc(2.8px*var(--g)) calc(4px*var(--g)),rgba(227,181,74,.34) calc(4.6px*var(--g)),rgba(227,181,74,0) calc(9.5px*var(--g))),linear-gradient(#6B4972,#6B4972) calc(55% - .75px*var(--g)) calc(17.5px*var(--g))/calc(1.5px*var(--g)) calc(5px*var(--g)) no-repeat,radial-gradient(circle at 65% calc(29.7px*var(--g)),#F6DC94 0 calc(2.6px*var(--g)),#E3B54A calc(2.8px*var(--g)) calc(4px*var(--g)),rgba(227,181,74,.34) calc(4.6px*var(--g)),rgba(227,181,74,0) calc(9.5px*var(--g))),linear-gradient(#6B4972,#6B4972) calc(65% - .75px*var(--g)) calc(21.7px*var(--g))/calc(1.5px*var(--g)) calc(5px*var(--g)) no-repeat,radial-gradient(circle at 75% calc(30.0px*var(--g)),#F6DC94 0 calc(2.6px*var(--g)),#E3B54A calc(2.8px*var(--g)) calc(4px*var(--g)),rgba(227,181,74,.34) calc(4.6px*var(--g)),rgba(227,181,74,0) calc(9.5px*var(--g))),linear-gradient(#6B4972,#6B4972) calc(75% - .75px*var(--g)) calc(22.0px*var(--g))/calc(1.5px*var(--g)) calc(5px*var(--g)) no-repeat,radial-gradient(circle at 85% calc(26.5px*var(--g)),#F6DC94 0 calc(2.6px*var(--g)),#E3B54A calc(2.8px*var(--g)) calc(4px*var(--g)),rgba(227,181,74,.34) calc(4.6px*var(--g)),rgba(227,181,74,0) calc(9.5px*var(--g))),linear-gradient(#6B4972,#6B4972) calc(85% - .75px*var(--g)) calc(18.5px*var(--g))/calc(1.5px*var(--g)) calc(5px*var(--g)) no-repeat,radial-gradient(circle at 95% calc(19.1px*var(--g)),#F6DC94 0 calc(2.6px*var(--g)),#E3B54A calc(2.8px*var(--g)) calc(4px*var(--g)),rgba(227,181,74,.34) calc(4.6px*var(--g)),rgba(227,181,74,0) calc(9.5px*var(--g))),linear-gradient(#6B4972,#6B4972) calc(95% - .75px*var(--g)) calc(11.1px*var(--g))/calc(1.5px*var(--g)) calc(5px*var(--g)) no-repeat}
.grinalda-fina::after{content:"";position:absolute;left:50%;top:calc(13px*var(--g));width:calc(16px*var(--g));height:calc(25px*var(--g));transform:translateX(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 28'%3E%3Cpath d='M9 0V8' stroke='%236B4972' stroke-width='1.5'/%3E%3Cpath d='M9 7.5l2.2 4.6 5 .6-3.7 3.4 1 5-4.5-2.5-4.5 2.5 1-5-3.7-3.4 5-.6z' fill='%23E3B54A' stroke='%23E3B54A' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
hr.grinalda-fina:nth-of-type(3n+2)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 28'%3E%3Cpath d='M9 0V7.5' stroke='%236B4972' stroke-width='1.5'/%3E%3Cpath d='M9 7.5c-3.2 0-5 2.6-5 5.8v5.2L2.4 21v1.2h13.2V21L14 18.5v-5.2c0-3.2-1.8-5.8-5-5.8z' fill='%23E3B54A'/%3E%3Ccircle cx='9' cy='23.6' r='1.9' fill='%23E3B54A'/%3E%3C/svg%3E")}
hr.grinalda-fina:nth-of-type(3n+3)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 28'%3E%3Cpath d='M9 0V9' stroke='%236B4972' stroke-width='1.5'/%3E%3Crect x='2.2' y='10' width='13.6' height='4.6' rx='1' fill='%23C8412B'/%3E%3Crect x='3.4' y='14.6' width='11.2' height='9.6' rx='1' fill='%23C8412B'/%3E%3Cpath d='M9 10v14.2' stroke='%236B4972' stroke-width='1.8'/%3E%3Cpath d='M9 10c-2.2-2.6-5-1.4-3 .4M9 10c2.2-2.6 5-1.4 3 .4' fill='none' stroke='%236B4972' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E")}
@media (min-width:1280px){
  .grinalda-fina{--g:1.3333;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 48' preserveAspectRatio='none'%3E%3Cpath d='M-1 6Q25 34 50 14Q75 34 101 6' fill='none' stroke='%236B4972' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
}
@media print{.grinalda-fina{display:none}}
/* c) critérios: ícone de linha em uva à esquerda do título */
#criterios .card h3{display:flex;align-items:center;gap:10px}
#criterios .card h3 svg.i{color:var(--uva)}
/* d) datas: passadas com lâmpada cheia em palha, futuras em contorno, a próxima em tomate (o único tomate fora dos erros) */
.datas li{position:relative;padding:2px 0 14px 32px}
.datas li::before{content:"";position:absolute;left:-1px;top:8px;width:15px;height:15px;border-radius:50%;background:var(--papel);border:3px solid var(--palha)}
.datas li.passou::before{background:var(--palha)}
.datas li.prox{color:var(--tomate);font-weight:800}
.datas li.prox b{color:var(--tomate);font-weight:800}
.datas li.prox::before{background:var(--tomate);border-color:var(--tomate)}
/* e) listas: círculo uva de 8 px em vez do ponto */
.lista{list-style:none;padding-left:1.4em}
.lista li{position:relative}
.lista li::before{content:"";position:absolute;left:-1.15em;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--uva)}
/* 11 nov: superfícies do browser com as cores do sistema (foco, seleção, cursor) */
:focus-visible{outline:3px solid var(--palha);outline-offset:2px;box-shadow:0 0 0 2px var(--profundo)}
::selection{background:var(--lilas);color:var(--profundo)}
.noite ::selection,.hero ::selection{background:var(--palha);color:var(--profundo)}
body{caret-color:var(--uva)}

.contador:not(.perto){display:none}