/* Festas de Vér — página pública. Um só mundo, diurno: sem tema escuro. */
@font-face { font-family: 'Yeseva One'; src: url('/fontes/yeseva-one-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fontes/bricolage-grotesque-latin.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }

:root {
  --logo: 'Yeseva One', Didot, Georgia, serif;
  --branco: #FFFFFF; --noite: #1B2340; --suave: #59617F; --nevoa: #F2F4FA;
  --rosa: #EC4E8A; --amarelo: #F7C325;
  /* Cores dos dias e letras sobre elas; /tema.css redefine tudo a partir das Definições. */
  --dia-1: #F7C325; --dia-2: #EC4E8A; --dia-3: #12A594; --dia-4: #F2872F; --dia-5: #9EC5FF;
  --sobre-dia-1: #1B2340; --sobre-dia-2: #1B2340; --sobre-dia-3: #1B2340; --sobre-dia-4: #1B2340; --sobre-dia-5: #1B2340;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-wrap: break-word; margin: 0; background: var(--branco); color: var(--noite); font-family: 'Bricolage Grotesque', 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.5; padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px); }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #2F7BFF; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cor-1 { --cor: var(--dia-1); --sobre-cor: var(--sobre-dia-1); } .cor-2 { --cor: var(--dia-2); --sobre-cor: var(--sobre-dia-2); } .cor-3 { --cor: var(--dia-3); --sobre-cor: var(--sobre-dia-3); }
.cor-4 { --cor: var(--dia-4); --sobre-cor: var(--sobre-dia-4); } .cor-5 { --cor: var(--dia-5); --sobre-cor: var(--sobre-dia-5); }

.interior { max-width: 1120px; margin-inline: auto; position: relative; }

/* Abertura */
.abertura { position: relative; padding: 210px 20px 56px; overflow: hidden; background: var(--noite); color: var(--branco); }
.abertura-simples { padding-top: 96px; }
.fitas { position: absolute; inset: 0 0 auto 0; width: 100%; height: 250px; display: block; touch-action: pan-y; }

/* Animações do topo (alternativas às bandeirinhas): poucas, lentas, só CSS; cores da paleta ativa.
   Cada elemento = deslocação (span) + balanço (i). Variantes: folhas, neve, pétalas (cair) e balões (subir). */
.queda { position: absolute; inset: 0 0 auto 0; height: 250px; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tom) 16%, transparent), transparent 85%); }
.queda span { position: absolute; top: -40px; left: var(--x); animation: cair var(--t) linear var(--d) infinite; }
.queda i { display: block; width: var(--s); aspect-ratio: 1; background: var(--c); opacity: .8;
  -webkit-mask: var(--forma) center / contain no-repeat; mask: var(--forma) center / contain no-repeat;
  animation: balancar calc(var(--t) / 3) ease-in-out var(--d) infinite alternate; }
.queda span:nth-child(1) { --x: 6%; --t: 19s; --d: -3s; --vento: 40px; --y: 40px; --s: 18px; --c: var(--dia-4); }
.queda span:nth-child(2) { --x: 19%; --t: 22s; --d: -11s; --vento: -30px; --y: 120px; --s: 22px; --c: var(--rosa); }
.queda span:nth-child(3) { --x: 34%; --t: 16s; --d: -6s; --vento: 50px; --y: 70px; --s: 14px; --c: var(--dia-1); }
.queda span:nth-child(4) { --x: 52%; --t: 20s; --d: -15s; --vento: -20px; --y: 150px; --s: 20px; --c: var(--dia-5); }
.queda span:nth-child(5) { --x: 67%; --t: 17s; --d: -1s; --vento: 35px; --y: 30px; --s: 16px; --c: var(--dia-3); }
.queda span:nth-child(6) { --x: 81%; --t: 21s; --d: -9s; --vento: -45px; --y: 110px; --s: 24px; --c: var(--dia-2); }
.queda span:nth-child(7) { --x: 92%; --t: 15s; --d: -13s; --vento: 25px; --y: 60px; --s: 15px; --c: var(--rosa); }
.folhas { --tom: var(--dia-1); }
.folhas span:nth-child(odd) i { --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2c7 7 14 13 14 21a14 14 0 0 1-28 0C6 15 13 9 20 2zm-1 36V16h2v22z'/%3E%3C/svg%3E"); }
.folhas span:nth-child(even) i { --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3l4 8 8-3-2 9 7 4-8 4 2 8-8-3-3 9-3-9-8 3 2-8-8-4 7-4-2-9 8 3z'/%3E%3C/svg%3E"); }
/* Neve: flocos e pontos em tons frios e suaves, mais pequenos e mais lentos. */
.neve { --tom: var(--dia-5); }
.neve span:nth-child(n) { --c: color-mix(in srgb, var(--dia-5) 55%, var(--branco)); }
.neve span:nth-child(odd) i { --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M19 2h2v8l5-5 1.5 1.5-6.5 6.5v5l4.3-2.5 2.4-8.9 2 .5-1.9 6.8 6.9-4 1 1.8-6.9 4 6.8 1.8-.5 2-8.9-2.4L22 20l4.3 2.5 8.9-2.4.5 2-6.8 1.8 6.9 4-1 1.8-6.9-4 1.9 6.8-2 .5-2.4-8.9L21 21.7v5l6.5 6.5L26 34.7l-5-5V38h-2v-8.3l-5 5-1.5-1.5 6.5-6.5v-5l-4.3 2.5-2.4 8.9-2-.5 1.9-6.8-6.9 4-1-1.8 6.9-4-6.8-1.8.5-2 8.9 2.4L18 20l-4.3-2.5-8.9 2.4-.5-2 6.8-1.8-6.9-4 1-1.8 6.9 4-1.9-6.8 2-.5 2.4 8.9L19 18.3v-5L12.5 6.8 14 5.3l5 5z'/%3E%3C/svg%3E"); }
.neve span:nth-child(even) i { --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 12a8 8 0 1 1 0 16a8 8 0 1 1 0-16z'/%3E%3C/svg%3E"); width: calc(var(--s) * .6); }
.neve span:nth-child(3n) { --c: color-mix(in srgb, var(--noite) 35%, var(--branco)); }
.neve span { animation-duration: calc(var(--t) * 1.25); }
/* Pétalas de amendoeira: rosa e rosa-claro, com uma ou outra flor inteira. */
.petalas { --tom: var(--rosa); }
.petalas span:nth-child(n) { --c: color-mix(in srgb, var(--rosa) 55%, var(--branco)); }
.petalas span:nth-child(3n) { --c: var(--rosa); }
.petalas i { --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3c9 7 12 19 0 34C8 22 11 10 20 3z'/%3E%3C/svg%3E"); }
.petalas span:nth-child(4) i, .petalas span:nth-child(7) i { --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 4a5 5 0 0 1 5 8 5 5 0 0 1 6 7 5 5 0 0 1-3 9 5 5 0 0 1-8 3 5 5 0 0 1-8-3 5 5 0 0 1-3-9 5 5 0 0 1 6-7 5 5 0 0 1 5-8zm0 12a4 4 0 1 0 0 8a4 4 0 1 0 0-8z'/%3E%3C/svg%3E"); }
/* Balões (Santos Populares): sobem do fundo da faixa, com fio. */
.baloes { --tom: var(--dia-4); }
.baloes span { top: auto; bottom: -48px; animation-name: subir; }
.baloes i { --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2c7 0 12 6 12 13s-6 13-11 14l1 2h-4l1-2C14 28 8 22 8 15S13 2 20 2zm-.6 31h1.2v6h-1.2z'/%3E%3C/svg%3E"); width: calc(var(--s) * 1.4); animation-duration: calc(var(--t) / 2); }
/* Colheitas (Feira das Colheitas de Arouca): cordão em arco com milho, uvas, abóboras, videira e castanhas
   pendurados, a balançar devagar; por trás caem algumas folhas. Só CSS; cores da paleta ativa. */
.cordao-colheitas { position: absolute; inset: 0 0 auto 0; height: 250px; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dia-1) 22%, transparent), transparent 90%); }
.cordao-colheitas svg { position: absolute; inset: 0 0 auto 0; width: 100%; height: 160px; overflow: visible; }
.cordao-colheitas path { fill: none; stroke: color-mix(in srgb, var(--branco) 45%, var(--dia-4)); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.cordao-colheitas span { position: absolute; width: var(--s); height: calc(var(--s) * 1.2); margin-left: calc(var(--s) / -2);
  background: var(--c); -webkit-mask: var(--forma) top center / contain no-repeat; mask: var(--forma) top center / contain no-repeat;
  transform-origin: 50% 0; animation: pendular var(--t) ease-in-out var(--d) infinite alternate;
  filter: drop-shadow(0 4px 3px color-mix(in srgb, var(--branco) 18%, transparent)); }
.cordao-colheitas span:nth-of-type(1) { left: 4.55%; top: 26px; --s: 54px; --t: 3.60s; --d: 0.0s; --c: var(--dia-1); --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill-rule='evenodd' d='M19 0h2v7h-2z M20 7c-7 3-12 11-13 25 3-7 7-12 12-14z M20 7c7 3 12 11 13 25-3-7-7-12-12-14z M20 12c6 0 8.5 9 8.5 18S25 46 20 46s-8.5-7-8.5-16S14 12 20 12z M15.5 18h2.2v2.4h-2.2z M20.5 18h2.2v2.4h-2.2z M15.5 23h2.2v2.4h-2.2z M20.5 23h2.2v2.4h-2.2z M15.5 28h2.2v2.4h-2.2z M20.5 28h2.2v2.4h-2.2z M15.5 33h2.2v2.4h-2.2z M20.5 33h2.2v2.4h-2.2z M15.5 38h2.2v2.4h-2.2z M20.5 38h2.2v2.4h-2.2z'/%3E%3C/svg%3E"); }
.cordao-colheitas span:nth-of-type(2) { left: 13.64%; top: 48px; --s: 48px; --t: 4.50s; --d: -3.0s; --c: color-mix(in srgb, var(--rosa) 65%, var(--branco)); --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill-rule='evenodd' d='M19 0h2v11h-2z M21 5c6-4 13-3 17 2-6 3-12 3-17-2z M7.6 16a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M14.6 16a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M21.6 16a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M28.6 16a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M11.1 22.5a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M18.1 22.5a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M25.1 22.5a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M7.6 29a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M14.6 29a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M21.6 29a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M11.1 35.5a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M18.1 35.5a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M14.6 42a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z'/%3E%3C/svg%3E"); }
.cordao-colheitas span:nth-of-type(3) { left: 22.73%; top: 65px; --s: 61px; --t: 5.40s; --d: -2.5s; --c: var(--dia-4); --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill-rule='evenodd' d='M18.5 0h3l-.5 12h-2z M22 6c4-3 9-3 12 0-4 2-8 2-12 0z M20 12c-11 0-17 8-17 17s8 17 17 17 17-8 17-17-6-17-17-17z M12.5 17c-3 6-3 18 0 24l1.3-.5c-2.6-6-2.6-17 0-23z M27.5 17c3 6 3 18 0 24l-1.3-.5c2.6-6 2.6-17 0-23z M19.3 15h1.4v28h-1.4z'/%3E%3C/svg%3E"); }
.cordao-colheitas span:nth-of-type(4) { left: 31.82%; top: 76px; --s: 51px; --t: 4.05s; --d: -2.0s; --c: var(--dia-3); --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill-rule='evenodd' d='M19 0h2v6h-2z M20 6l5 7 8-3-2 9 8 4-8 5 3 8-9-3-5 9-5-9-9 3 3-8-8-5 8-4-2-9 8 3z M19.4 12h1.2v26h-1.2z M20 22l7-6 .8.9-7 6z M20 22l-7-6-.8.9 7 6z'/%3E%3C/svg%3E"); }
.cordao-colheitas span:nth-of-type(5) { left: 40.91%; top: 84px; --s: 48px; --t: 4.95s; --d: -1.5s; --c: var(--dia-1); --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill-rule='evenodd' d='M19 0h2v7h-2z M20 7c-7 3-12 11-13 25 3-7 7-12 12-14z M20 7c7 3 12 11 13 25-3-7-7-12-12-14z M20 12c6 0 8.5 9 8.5 18S25 46 20 46s-8.5-7-8.5-16S14 12 20 12z M15.5 18h2.2v2.4h-2.2z M20.5 18h2.2v2.4h-2.2z M15.5 23h2.2v2.4h-2.2z M20.5 23h2.2v2.4h-2.2z M15.5 28h2.2v2.4h-2.2z M20.5 28h2.2v2.4h-2.2z M15.5 33h2.2v2.4h-2.2z M20.5 33h2.2v2.4h-2.2z M15.5 38h2.2v2.4h-2.2z M20.5 38h2.2v2.4h-2.2z'/%3E%3C/svg%3E"); }
.cordao-colheitas span:nth-of-type(6) { left: 50.00%; top: 86px; --s: 45px; --t: 3.60s; --d: -1.0s; --c: color-mix(in srgb, var(--dia-4) 45%, var(--branco)); --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill-rule='evenodd' d='M19 0h2v8h-2z M20 8c9 0 15 9 15 18 0 8-7 14-15 14S5 34 5 26c0-9 6-18 15-18z M8 29c7 4 17 4 24 0l.4 2.2c-7.5 4-17.5 4-24.8 0z'/%3E%3C/svg%3E"); }
.cordao-colheitas span:nth-of-type(7) { left: 59.09%; top: 84px; --s: 54px; --t: 4.50s; --d: -0.5s; --c: color-mix(in srgb, var(--rosa) 65%, var(--branco)); --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill-rule='evenodd' d='M19 0h2v11h-2z M21 5c6-4 13-3 17 2-6 3-12 3-17-2z M7.6 16a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M14.6 16a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M21.6 16a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M28.6 16a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M11.1 22.5a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M18.1 22.5a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M25.1 22.5a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M7.6 29a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M14.6 29a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M21.6 29a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M11.1 35.5a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M18.1 35.5a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z M14.6 42a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0z'/%3E%3C/svg%3E"); }
.cordao-colheitas span:nth-of-type(8) { left: 68.18%; top: 76px; --s: 58px; --t: 5.40s; --d: 0.0s; --c: var(--dia-4); --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill-rule='evenodd' d='M18.5 0h3l-.5 12h-2z M22 6c4-3 9-3 12 0-4 2-8 2-12 0z M20 12c-11 0-17 8-17 17s8 17 17 17 17-8 17-17-6-17-17-17z M12.5 17c-3 6-3 18 0 24l1.3-.5c-2.6-6-2.6-17 0-23z M27.5 17c3 6 3 18 0 24l-1.3-.5c2.6-6 2.6-17 0-23z M19.3 15h1.4v28h-1.4z'/%3E%3C/svg%3E"); }
.cordao-colheitas span:nth-of-type(9) { left: 77.27%; top: 65px; --s: 48px; --t: 4.05s; --d: -3.0s; --c: var(--dia-3); --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill-rule='evenodd' d='M19 0h2v6h-2z M20 6l5 7 8-3-2 9 8 4-8 5 3 8-9-3-5 9-5-9-9 3 3-8-8-5 8-4-2-9 8 3z M19.4 12h1.2v26h-1.2z M20 22l7-6 .8.9-7 6z M20 22l-7-6-.8.9 7 6z'/%3E%3C/svg%3E"); }
.cordao-colheitas span:nth-of-type(10) { left: 86.36%; top: 48px; --s: 54px; --t: 4.95s; --d: -2.5s; --c: var(--dia-1); --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill-rule='evenodd' d='M19 0h2v7h-2z M20 7c-7 3-12 11-13 25 3-7 7-12 12-14z M20 7c7 3 12 11 13 25-3-7-7-12-12-14z M20 12c6 0 8.5 9 8.5 18S25 46 20 46s-8.5-7-8.5-16S14 12 20 12z M15.5 18h2.2v2.4h-2.2z M20.5 18h2.2v2.4h-2.2z M15.5 23h2.2v2.4h-2.2z M20.5 23h2.2v2.4h-2.2z M15.5 28h2.2v2.4h-2.2z M20.5 28h2.2v2.4h-2.2z M15.5 33h2.2v2.4h-2.2z M20.5 33h2.2v2.4h-2.2z M15.5 38h2.2v2.4h-2.2z M20.5 38h2.2v2.4h-2.2z'/%3E%3C/svg%3E"); }
.cordao-colheitas span:nth-of-type(11) { left: 95.45%; top: 26px; --s: 45px; --t: 3.60s; --d: -2.0s; --c: color-mix(in srgb, var(--dia-4) 45%, var(--branco)); --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill-rule='evenodd' d='M19 0h2v8h-2z M20 8c9 0 15 9 15 18 0 8-7 14-15 14S5 34 5 26c0-9 6-18 15-18z M8 29c7 4 17 4 24 0l.4 2.2c-7.5 4-17.5 4-24.8 0z'/%3E%3C/svg%3E"); }
.cordao-colheitas b { position: absolute; top: -30px; left: var(--x); width: 18px; aspect-ratio: 1; background: var(--dia-3); opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill-rule='evenodd' d='M19 0h2v6h-2z M20 6l5 7 8-3-2 9 8 4-8 5 3 8-9-3-5 9-5-9-9 3 3-8-8-5 8-4-2-9 8 3z M19.4 12h1.2v26h-1.2z M20 22l7-6 .8.9-7 6z M20 22l-7-6-.8.9 7 6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill-rule='evenodd' d='M19 0h2v6h-2z M20 6l5 7 8-3-2 9 8 4-8 5 3 8-9-3-5 9-5-9-9 3 3-8-8-5 8-4-2-9 8 3z M19.4 12h1.2v26h-1.2z M20 22l7-6 .8.9-7 6z M20 22l-7-6-.8.9 7 6z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: cair var(--t) linear var(--d) infinite; }
.cordao-colheitas b:nth-of-type(1) { --x: 12%; --t: 21s; --d: -4s; --vento: 40px; }
.cordao-colheitas b:nth-of-type(2) { --x: 38%; --t: 24s; --d: -13s; --vento: -30px; background: var(--dia-4); }
.cordao-colheitas b:nth-of-type(3) { --x: 63%; --t: 19s; --d: -8s; --vento: 35px; background: var(--dia-1); }
.cordao-colheitas b:nth-of-type(4) { --x: 86%; --t: 23s; --d: -17s; --vento: -40px; }
@keyframes pendular { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .cordao-colheitas span, .cordao-colheitas b { animation: none; } .cordao-colheitas b { display: none; } }
@keyframes cair { 0% { transform: translate(0, 0); opacity: 0; } 10%, 80% { opacity: 1; } 100% { transform: translate(var(--vento), 300px); opacity: 0; } }
@keyframes subir { 0% { transform: translate(0, 0); opacity: 0; } 10%, 75% { opacity: 1; } 100% { transform: translate(var(--vento), -300px); opacity: 0; } }
@keyframes balancar { from { transform: translateX(-10px) rotate(-28deg); } to { transform: translateX(10px) rotate(32deg); } }
.baloes i { animation-name: balancar-leve; }
@keyframes balancar-leve { from { transform: translateX(-6px) rotate(-6deg); } to { transform: translateX(6px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .queda span { animation: none; top: var(--y); bottom: auto; } .queda i { animation: none; transform: rotate(12deg); } .baloes i { transform: none; } }
.heroi { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 32px 48px; align-items: center; } /* a coluna do logótipo tem a largura dele: nada se sobrepõe */
.heroi > * { min-width: 0; }
/* Logótipo nos dois formatos oficiais. --f é o tamanho de "FESTAS"; "VÉR" tem o dobro.
   Largo: FESTAS em cima; VÉR por baixo, deslocado para a direita, com o acento a entrar na linha de cima;
   "de" pequeno encostado à esquerda do V. */
.logo { --f: clamp(48px, 7.6vw, 110px); font-family: var(--logo); font-weight: 400; margin: 0; line-height: .8; color: var(--noite); text-decoration: none;
  display: grid; grid-template-columns: calc(var(--f) * 1.74) max-content; justify-content: start; }
.logo .l1 { grid-column: 1 / -1; grid-row: 1; font-size: var(--f); }
.logo .l2 { grid-column: 1; grid-row: 2; justify-self: end; align-self: end; font-size: calc(var(--f) * .56); color: var(--rosa); padding-right: .14em; margin-bottom: calc(var(--f) * .52); }
.logo .l3 { grid-column: 2; grid-row: 2; font-size: calc(var(--f) * 2); margin-top: calc(var(--f) * -.1); }
/* Compacto: FESTAS pequeno alinhado com o V, "de" pequeno no canto superior direito, VÉR grande por baixo. */
.logo-pequeno { --f: 30px; grid-template-columns: max-content 1fr; width: max-content; }
.logo-pequeno .l1 { grid-column: 1; font-size: calc(var(--f) * .76); align-self: end; }
.logo-pequeno .l2 { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; font-size: calc(var(--f) * .52); padding: 0; margin: 0 0 0 calc(var(--f) * 1.35); translate: 0 calc(var(--f) * .04); }
.logo-pequeno .l3 { grid-column: 1 / -1; grid-row: 2; font-size: calc(var(--f) * 2.9); margin-top: calc(var(--f) * .02); }
.lado { display: grid; gap: 20px; }
/* Imagem do santo padroeiro, por cima da data (modo festa). */
/* Com santo, o bloco das datas ganha uma coluna à direita para a imagem, em tamanho generoso. */
/* Com santo: a imagem flutua à direita das datas e o texto contorna a figura (shape-outside, definido em
   /js/santo.js a partir da própria imagem; sem JS contorna um retângulo). A imagem não é cortada nem
   esticada, para a forma coincidir com o desenho; a frase fica por baixo. */
.heroi:has(.com-santo) .logo { --f: clamp(44px, 6.6vw, 100px); }
.lado.com-santo { display: block; }
/* Invisível até /js/santo.js acabar de ajustar a figura (.pronto), para a data não saltar à vista; sem JS aparece ao fim de 1,5 s. */
.lado.com-santo:not(.pronto) { opacity: 0; animation: aparecer 0s 1.5s forwards; }
.lado.com-santo.pronto { animation: aparecer .25s ease-out; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lado.com-santo.pronto { animation: none; } }
.lado.com-santo::after { content: ""; display: block; clear: both; }
.lado.com-santo > * + * { margin-top: 20px; }
.lado.com-santo > .santo + * { margin-top: 0; }
/* Imagem e frase formam um só bloco a flutuar à direita; a frase fica centrada e com a largura da imagem. */
.lado.com-santo .santo { float: right; margin: 0 0 8px 14px; display: grid; justify-items: center; gap: 6px; shape-image-threshold: .3; shape-margin: 14px; }
.lado.com-santo .moldura { display: block; }
.lado.com-santo .acoes { flex-direction: column; align-items: flex-start; } /* sempre empilhados: altura estável para o santo acertar no fundo */
.santo img { display: block; width: auto; height: 220px; max-width: min(340px, 44vw); object-fit: contain; object-position: center bottom; }
/* O topo do santo alinha com o topo dos algarismos da data, não com a caixa da linha (que tem folga por cima). */
.lado.com-santo .datas { text-box: trim-both cap alphabetic; }
.lado.com-santo .datas + * { margin-top: 26px; } /* repõe o espaço que o corte tirou por baixo da data */
@supports not (text-box: trim-both cap alphabetic) { .lado.com-santo .santo { margin-top: .16em; font-size: clamp(38px, 5.6vw, 72px); } .lado.com-santo .santo figcaption { font-size: 13px; } }
.santo figcaption { width: 0; min-width: max(100%, 20ch); text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; color: var(--rosa); text-wrap: balance; }
.datas { font-weight: 800; font-size: clamp(38px, 5.6vw, 72px); line-height: .98; letter-spacing: -.02em; margin: 0; font-variation-settings: "opsz" 96; text-wrap: balance; }
.local { margin: 0; font-size: 20px; color: var(--suave); max-width: 34ch; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.botao { display: inline-block; font-weight: 700; padding: 13px 22px; border-radius: 14px; text-decoration: none; background: var(--noite); color: var(--branco); }
.botao.sec { background: var(--nevoa); color: var(--noite); }

/* Topo escuro: tudo claro sobre --noite (também no telemóvel: as regras de ≤560px não pintam nada). */
.abertura .logo, .abertura .logo .l2 { color: var(--branco); }
.abertura .datas, .abertura .rotulo-proximo, .abertura .santo figcaption { color: var(--amarelo); }
.abertura .local { color: color-mix(in srgb, var(--branco) 80%, transparent); }
.abertura .botao { background: var(--amarelo); color: var(--noite); border-radius: 999px; }
.abertura .botao.sec { background: transparent; color: var(--branco); box-shadow: inset 0 0 0 2px var(--branco); }
.abertura :focus-visible { outline-color: var(--branco); }
/* Halo atrás do santo; só o alfa da imagem conta para o contorno (santo.js), por isso o fundo não interfere. */
.abertura .moldura { position: relative; isolation: isolate; }
/* Brilho suave centrado a 58 % da altura: forte no centro e a desvanecer para fora. A parte forte cabe na largura da
   imagem, que santo.js (HALO_CY) já desvia do texto; só o brilho ténue de fora pode ficar perto das letras. */
.abertura .moldura::before { content: ""; position: absolute; left: -50%; top: 58%; width: 200%; aspect-ratio: 1; translate: 0 -50%; z-index: -1;
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--amarelo) 70%, transparent), color-mix(in srgb, var(--amarelo) 28%, transparent) 45%, color-mix(in srgb, var(--amarelo) 8%, transparent) 75%, transparent); }

.foguete { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
/* Abertura com foguete (/js/abertura.js): com JS ativo e sem movimento reduzido o topo começa escondido e o JS
   vai juntando .entra; no fim põe html.aberta. Se o JS falhar, tudo aparece ao fim de 6 s. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.aberta) .abertura :is(.logo > span, .moldura, .datas, .local, .acoes, .rotulo-proximo, figcaption):not(.entra) {
    opacity: 0; animation: aparecer 0s 6s forwards; }
  .abertura .logo > .entra { animation: entra-logo 1.1s cubic-bezier(.2,.7,.2,1) var(--atraso, 0s) both; }
  .abertura :is(.datas, .local, .acoes, .rotulo-proximo, figcaption).entra { animation: entra-texto .5s ease-out var(--atraso, 0s) both; }
  .abertura figcaption.entra { animation-duration: 1s; }
  .moldura.entra img { animation: entra-santo 1.8s cubic-bezier(.2,.7,.2,1) both; }
  .moldura.entra::before { animation: entra-halo 1.8s cubic-bezier(.2,.7,.2,1) both; }
}
/* Revela de baixo para cima; as margens negativas deixam passar o acento do É. */
@keyframes entra-logo { from { opacity: 0; transform: translateY(.3em); clip-path: inset(100% -20% -30% -20%); } to { opacity: 1; transform: none; clip-path: inset(-60% -20% -30% -20%); } }
@keyframes entra-texto { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes entra-santo { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes entra-halo { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }

/* Secções */
.seccao { padding: 56px 20px; }
.titulo { font-weight: 800; font-size: clamp(38px, 5.4vw, 64px); letter-spacing: -.03em; line-height: 1; margin: 0 0 10px; font-variation-settings: "opsz" 96; text-wrap: balance; }
.intro { margin: 0 0 28px; color: var(--suave); max-width: 58ch; }

/* Programa — sem JS: dias empilhados; com JS: separadores */
.programa { display: grid; gap: 18px; position: relative; }
.dia { background: var(--nevoa); border-radius: 26px; padding: 12px 28px; position: relative; }
.dia-titulo { font-weight: 800; font-size: 24px; margin: 10px 0 0; display: flex; gap: 10px; align-items: baseline; }
.dia-titulo small { font-weight: 400; font-size: 15px; color: var(--suave); }
.com-separadores { gap: 0; }
.com-separadores .dia-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.separadores { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; position: relative; }
.separadores button {
  font: inherit; font-weight: 800; font-size: 22px; letter-spacing: -.02em; border: 0; cursor: pointer;
  border-radius: 16px; padding: 12px 20px 14px; background: var(--nevoa); color: var(--noite);
  display: grid; gap: 2px; text-align: left; line-height: 1.05; font-variation-settings: "opsz" 40;
}
.separadores button small { font-weight: 700; font-size: 15px; color: var(--suave); letter-spacing: 0; }
.separadores button[aria-selected="true"] { background: var(--cor); color: var(--sobre-cor); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--noite) 50%, transparent); }
.separadores button[aria-selected="true"] small { color: var(--sobre-cor); }
.atos { list-style: none; margin: 0; padding: 0; }
.atos li { display: grid; grid-template-columns: minmax(108px, max-content) 1fr; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 2px dashed color-mix(in srgb, var(--noite) 12%, transparent); font-size: 20px; color: var(--suave); }
.atos li:last-child { border-bottom: 0; }
.estado-ato { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: 3px; background: var(--noite); color: var(--branco); }
.estado-ato.a-seguir { background: transparent; color: var(--noite); box-shadow: inset 0 0 0 2px var(--noite); }
.atos li.a-decorrer .h::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--rosa); margin-right: 8px; vertical-align: 4px; animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .atos li.a-decorrer .h::before { animation: none; } }
.atos .h { font-weight: 800; font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--noite); }
.artista { font-weight: 800; color: var(--noite); }
button.artista {
  font: inherit; font-weight: 800; background: none; border: 0; padding: 10px 0; margin: -10px 0; cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, var(--noite) 60%, transparent);
}
button.artista:hover, button.artista[aria-expanded="true"] { text-decoration-style: solid; text-decoration-color: var(--rosa); }

.cartao-artista {
  position: absolute; z-index: 5; width: 208px; background: var(--branco); color: var(--noite); border-radius: 18px; padding: 10px 10px 14px;
  box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--noite) 35%, transparent), 0 0 0 1px color-mix(in srgb, var(--noite) 6%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.cartao-artista.visivel { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .16s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .cartao-artista, .cartao-artista.visivel { transition: none; transform: none; } }
.cartao-artista .foto { aspect-ratio: 4 / 5; max-width: 100%; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, var(--c1, var(--rosa)), var(--c2, color-mix(in srgb, var(--rosa), var(--noite) 55%))); color: color-mix(in srgb, var(--branco) 92%, transparent); font-family: var(--logo); font-size: 64px; line-height: 1; }
.cartao-artista .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartao-artista b { display: block; font-size: 17px; line-height: 1.2; margin: 10px 4px 0; text-wrap: balance; }

/* Eventos */
.cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cartao { background: var(--nevoa); border-radius: 22px; padding: 20px 20px 22px; display: grid; gap: 6px; align-content: start; position: relative; transition: transform .16s ease, box-shadow .16s ease; }
.cartao a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cartao:has(a:hover) { transform: translateY(-3px); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--noite) 55%, transparent); }
.cartao:has(a:focus-visible) { outline: 3px solid #2F7BFF; outline-offset: 3px; }
.cartao a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .cartao { transition: none; } .cartao:has(a:hover) { transform: none; } }
.cartao .quando { font-weight: 700; font-size: 15px; margin: 0; display: flex; align-items: center; gap: 8px; }
.cartao .quando::before { content: ""; width: 14px; height: 16px; background: var(--cor); clip-path: polygon(0 0, 100% 0, 50% 100%); flex: none; }
/* Fora do modo festa: o próximo evento ocupa duas colunas, com capa; os que passaram ficam discretos. */
.cartao.destaque { grid-column: span 2; padding: 0 0 22px; overflow: hidden; }
.cartao.destaque > :not(.capa) { margin-inline: 22px; }
.cartao.destaque .capa { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; margin-bottom: 10px; }
.cartao.destaque h3 { font-size: 32px; }
.cartao.destaque:not(:has(.capa)) { padding-top: 22px; }
#eventos .titulo, #programa .titulo { margin-bottom: 28px; } /* sem parágrafo de introdução: o espaço que ele dava */
.subtitulo { font-size: 22px; letter-spacing: -.02em; margin: 40px 0 14px; }
.cartoes.passados .cartao { background: transparent; border: 1.5px solid color-mix(in srgb, var(--noite) 12%, transparent); opacity: .85; }
.cartoes.passados .cartao h3 { font-size: 20px; }
.rotulo-proximo { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rosa); }
.cartao h3 { font-weight: 800; font-size: 24px; line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.cartao p { margin: 0; color: var(--suave); font-size: 16px; }
.cartao a { color: var(--noite); font-weight: 700; margin-top: 6px; display: inline-block; padding-block: 11px; justify-self: start; text-underline-offset: 4px; }

/* Galeria */
.comissao { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 24px 20px; }
.comissao li { display: grid; gap: 2px; align-content: start; }
.comissao .foto { aspect-ratio: 4 / 5; width: 100%; height: auto; border-radius: 18px; object-fit: cover; display: block; margin-bottom: 10px; background: var(--nevoa); }
.comissao .sem-foto { display: grid; place-items: center; background: var(--cor); color: var(--sobre-cor); font-family: var(--logo); font-size: 56px; line-height: 1; }
.comissao b { font-size: 19px; line-height: 1.2; }
.comissao span { color: var(--suave); font-size: 15px; }
.mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 170px; gap: 14px; }
.mosaico figure { margin: 0; border-radius: 22px; position: relative; overflow: hidden; background: var(--nevoa); }
.mosaico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaico .grande { grid-column: span 2; grid-row: span 2; }
.mosaico .alta { grid-row: span 2; }
.mosaico figcaption { position: absolute; left: 12px; bottom: 12px; background: var(--branco); color: var(--noite); border-radius: 10px; padding: 6px 10px; font-size: 14px; font-weight: 600; max-width: calc(100% - 24px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Rodapé */
.rodape { background: var(--noite); color: var(--branco); padding: 56px 20px; }
.rodape .titulo { font-size: clamp(32px, 4vw, 46px); }
.apoios { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 18px 0 48px; }
.apoio { aspect-ratio: 3 / 2; border-radius: 14px; background: color-mix(in srgb, var(--branco) 7%, transparent); display: grid; place-items: center; padding: 14px; color: color-mix(in srgb, var(--branco) 85%, var(--noite)); text-decoration: none; font-weight: 600; text-align: center; }
.apoio img { max-height: 100%; object-fit: contain; }
.contactos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.atalhos { list-style: none; margin: 0; padding: 0; }
.atalhos a { color: var(--branco); display: inline-block; padding-block: 11px; font-size: 18px; }
.contactos h3 { font-size: 15px; color: var(--amarelo); margin: 0 0 4px; }
.contactos p { margin: 0; font-size: 18px; }
.contactos a { color: var(--branco); display: inline-block; padding-block: 11px; overflow-wrap: anywhere; }

/* Erros */
.erro { padding: 64px 20px; display: grid; gap: 18px; justify-items: start; }

@media (max-width: 900px) {
  .heroi { grid-template-columns: minmax(0, 1fr); }
  .cartoes, .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apoios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contactos { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cartoes { grid-template-columns: 1fr; }
  .comissao { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .comissao .sem-foto { font-size: 44px; }
  .cartao.destaque { grid-column: auto; }
  .cartao.destaque h3 { font-size: 26px; }
  .dia { padding: 6px 18px; }
  .atos li { grid-template-columns: minmax(62px, max-content) 1fr; font-size: 17px; }
  .atos .h { font-size: 20px; }
  .abertura { padding-top: 190px; }
  /* Topo no telemóvel: logótipo no formato compacto. */
  .heroi .logo { --f: 42px; grid-template-columns: max-content 1fr; justify-self: start; width: max-content; }
  .heroi .logo .l1 { grid-column: 1; font-size: calc(var(--f) * .76); align-self: end; }
  .heroi .logo .l2 { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; font-size: calc(var(--f) * .52); padding: 0; margin: 0 0 0 calc(var(--f) * 1.35); translate: 0 calc(var(--f) * .04); }
  .heroi .logo .l3 { grid-column: 1 / -1; grid-row: 2; font-size: calc(var(--f) * 2.9); margin-top: calc(var(--f) * .02); }
  .heroi { min-height: 0; }
  .fitas, .queda, .cordao-colheitas { height: 190px; }
  .cordao-colheitas span:nth-of-type(even) { display: none; }
  .cordao-colheitas span { --s: 42px; }
  .santo img { height: 240px; }
  .lado.com-santo .santo { margin-left: 10px; }
  .santo figcaption { font-size: 12px; }
  .queda span:nth-child(n+5) { display: none; }
  .abertura { padding-bottom: 40px; }
  .cartao-artista { width: 168px; position: fixed; left: 50%; top: 50%; translate: -50% -50%; z-index: 20; }
  .mosaico { grid-auto-flow: dense; }
  .mosaico .alta { grid-row: auto; }
  .pagina-evento .titulo { font-size: clamp(28px, 8vw, 64px); }
  .separadores { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -20px 8px; padding: 0 20px 14px; scroll-padding-inline: 20px; }
  .separadores::-webkit-scrollbar { display: none; }
  .separadores button { font-size: 19px; padding: 10px 16px 12px; flex: none; scroll-snap-align: start; }
  .separadores button small { font-size: 14px; }
}

/* Página de um evento */
.pagina-evento .logo { margin-bottom: 28px; }
.capa-evento { width: 100%; height: auto; max-height: 360px; object-fit: cover; border-radius: 22px; margin-bottom: 24px; display: block; }
.documentos-evento { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 8px; }
.documentos-evento li { background: var(--nevoa); border-radius: 12px; padding: 0 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.documentos-evento a { font-weight: 700; color: var(--noite); padding-block: 10px; min-width: 0; overflow-wrap: anywhere; }
.documentos-evento span { white-space: nowrap; }
.mensagem { background: var(--nevoa); border-radius: 14px; padding: 16px 20px; margin: 0 0 20px; font-weight: 600; }
.mensagem p { margin: 0; }
.mensagem .depois { margin-top: 12px; font-weight: 400; }
.mensagem .depois a { color: var(--noite); }
.resumo-inscricao { margin: 12px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; font-weight: 400; }
.resumo-inscricao dt { font-weight: 700; }
.resumo-inscricao dd { margin: 0; overflow-wrap: anywhere; }
.voltar { display: inline-block; padding-block: 11px; margin: -12px 0 12px; font-weight: 700; color: var(--noite); text-underline-offset: 4px; }
.formulario-inscricao .botao:disabled { opacity: .6; cursor: default; }
.formulario-inscricao { display: grid; gap: 14px; max-width: 480px; margin-top: 8px; }
.formulario-inscricao .campo { display: grid; gap: 4px; }
.formulario-inscricao label { font-weight: 700; font-size: 14px; }
.formulario-inscricao input, .formulario-inscricao textarea { font: inherit; padding: 11px 13px; border: 1.5px solid color-mix(in srgb, var(--noite) 16%, transparent); border-radius: 12px; width: 100%; background: var(--branco); }
.formulario-inscricao [aria-invalid] { border-color: #B42318; }
.formulario-inscricao .erro-campo { margin: 0; font-size: 14px; color: #B42318; font-weight: 600; }
.formulario-inscricao .botao { border: 0; font: inherit; font-weight: 700; cursor: pointer; justify-self: start; }
.formulario-inscricao .ajuda-campo { margin: 0; font-size: 14px; color: var(--suave); }
.formulario-inscricao .grupo { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.formulario-inscricao legend { font-weight: 700; font-size: 14px; padding: 0; margin-bottom: 4px; }
.formulario-inscricao .opcao { display: flex; gap: 12px; align-items: center; min-height: 44px; font-weight: 400; font-size: 17px; cursor: pointer; }
.formulario-inscricao .opcao input { width: 22px; height: 22px; padding: 0; margin: 0; flex: none; accent-color: var(--noite); }
.titulo-inscricao { font-size: 26px; margin: 32px 0 12px; letter-spacing: -.02em; }
.descricao-evento { max-width: 62ch; margin-bottom: 28px; }
.descricao-evento h3 { font-size: 22px; margin: 28px 0 8px; letter-spacing: -.01em; }
.descricao-evento a { color: var(--noite); }
.descricao-evento li { margin-bottom: 4px; }