:root {
    --challenge-blue: #172554;
    --challenge-yellow: #fde047;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; font-family: 'Montserrat', sans-serif; }
.font-display { font-family: 'Montserrat', sans-serif; font-weight: 900; }
.nav-tools summary { list-style: none; }
.nav-tools summary::-webkit-details-marker { display: none; }
.nav-tools-panel { position: absolute; top: calc(100% + .75rem); left: 50%; width: min(320px, calc(100vw - 2rem)); transform: translateX(-50%); }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; border-radius: .75rem; background: white; padding: .8rem 1rem; color: var(--challenge-blue); font-weight: 900; }
.skip-link:focus { top: 1rem; outline: 4px solid var(--challenge-yellow); }
.challenge-hero { background-image: radial-gradient(circle at 78% 25%, rgba(37,99,235,.45), transparent 34%), linear-gradient(135deg, #172554 0%, #1e3a8a 55%, #172554 100%); }
.status-dot { width: .65rem; height: .65rem; border-radius: 50%; background: #1d4ed8; box-shadow: 0 0 0 .3rem rgba(29,78,216,.18); }
.eyebrow { display: inline-flex; border-radius: 999px; background: #fef9c3; padding: .55rem 1rem; color: #854d0e; font-size: .7rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }

.challenge-stage { position: relative; min-height: 26rem; perspective: 1000px; }
.stage-glow { position: absolute; inset: 10% 7% 5%; border-radius: 50%; background: radial-gradient(circle, rgba(253,224,71,.32), transparent 62%); filter: blur(16px); }
.art-preview { position: absolute; top: 19%; display: flex; width: 11rem; aspect-ratio: 1; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 7px solid white; border-radius: 50%; background: #1d4ed8; color: #172554; box-shadow: 0 24px 50px rgba(0,0,0,.28); }
.art-preview::before { content: ''; position: absolute; inset: 11%; border: 2px dashed rgba(23,37,84,.35); border-radius: 50%; }
.art-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-preview span { position: absolute; z-index: 2; left: 50%; bottom: .55rem; transform: translateX(-50%); border-radius: 999px; background: white; padding: .25rem .55rem; color: #172554; font-size: .58rem; font-weight: 900; letter-spacing: .11em; box-shadow: 0 5px 15px rgba(15,23,42,.25); }
.art-preview small { position: absolute; z-index: 2; left: 50%; top: .55rem; width: max-content; transform: translateX(-50%); border-radius: 999px; background: #172554; padding: .3rem .55rem; color: white; font-size: .5rem; font-weight: 900; text-transform: uppercase; }
.art-preview-left { left: 1%; transform: rotate(-9deg) translateY(2.6rem); }
.art-preview-center { left: 50%; z-index: 3; width: 14rem; transform: translateX(-50%); animation: float-card 4.5s ease-in-out infinite; }
.art-preview-right { right: 1%; transform: rotate(9deg) translateY(2.6rem); }
.stage-base { position: absolute; right: 5%; bottom: 5%; left: 5%; border-top: 2px solid rgba(255,255,255,.35); padding-top: 1rem; text-align: center; color: #fde047; font-size: .65rem; font-weight: 900; letter-spacing: .22em; }
.gift-icon { display: grid; width: 4.5rem; height: 4.5rem; flex: none; place-items: center; border-radius: 50%; background: #172554; color: #fde047; font-size: 2.5rem; box-shadow: 0 0 0 .5rem rgba(255,255,255,.5); }

.gallery-section { background: radial-gradient(circle at 50% 0, rgba(253,224,71,.3), transparent 25%), linear-gradient(#fff,#eff6ff); }
.art-gallery-grid { display: grid; gap: 1.25rem; margin: 0; padding: 0; border: 0; grid-template-columns: repeat(3,minmax(0,1fr)); }
.gallery-card { position: relative; display: block; overflow: hidden; border: 3px solid transparent; border-radius: 1.75rem; background: white; cursor: pointer; box-shadow: 0 15px 35px rgba(23,37,84,.11); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.gallery-card:hover { transform: translateY(-6px); box-shadow: 0 24px 45px rgba(23,37,84,.17); }
.gallery-card:focus-within { outline: 4px solid #fde047; outline-offset: 4px; }
.gallery-card.is-selected { border-color: #1e3a8a; box-shadow: 0 0 0 6px #fde047, 0 24px 45px rgba(23,37,84,.18); }
.gallery-card > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gallery-image-wrap { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #dbeafe; }
.gallery-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.gallery-card:hover .gallery-image-wrap img { transform: scale(1.035); }
.art-code { position: absolute; left: 1rem; top: 1rem; border-radius: 999px; background: #172554; padding: .45rem .75rem; color: #fde047; font-size: .68rem; font-weight: 900; letter-spacing: .12em; box-shadow: 0 8px 20px rgba(15,23,42,.24); }
.selection-mark { position: absolute; right: 1rem; top: 1rem; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 3px solid white; border-radius: 50%; background: #fde047; color: #172554; font-size: 1.25rem; font-weight: 900; opacity: 0; transform: scale(.65); transition: .2s ease; }
.gallery-card.is-selected .selection-mark { opacity: 1; transform: scale(1); }
.gallery-card-body { display: flex; flex-direction: column; padding: 1.25rem; }
.gallery-card-body strong { color: #172554; font-size: 1.1rem; font-weight: 900; }
.gallery-card-body > span:not(.vote-card-button) { margin-top: .3rem; color: #64748b; font-size: .75rem; font-weight: 700; }
.vote-card-button { display: flex; min-height: 3rem; align-items: center; justify-content: center; margin-top: 1rem; border-radius: .75rem; background: #172554; color: white; font-size: .85rem; font-weight: 900; transition: background .2s, color .2s; }
.gallery-card:hover .vote-card-button, .gallery-card.is-selected .vote-card-button { background: #fde047; color: #172554; }
.gallery-card.is-selected .vote-card-button::before { content: 'Selecionada • '; }

.gallery-card.is-static { cursor: default; }
.gallery-card.is-winner { border-color: #eab308; box-shadow: 0 0 0 5px #fde047, 0 24px 45px rgba(23,37,84,.18); }
.winner-badge { position: absolute; right: 1rem; top: 1rem; border-radius: 999px; background: #fde047; padding: .45rem .75rem; color: #172554; font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(15,23,42,.24); }
.winner-badge--silver { background: #e2e8f0; }
.winner-badge--bronze { background: #fdba74; }
.winner-votes { display: inline-flex; align-self: center; margin-top: .75rem; border-radius: 999px; background: #eff6ff; padding: .4rem .9rem; color: #1e3a8a; font-size: .8rem; font-weight: 900; }

.vote-selection { position: sticky; z-index: 20; bottom: 1rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; max-width: 48rem; margin: 2rem auto 0; border: 2px solid #fde047; border-radius: 1.25rem; background: #172554; padding: .8rem; color: white; box-shadow: 0 20px 55px rgba(15,23,42,.32); }
.vote-selection[hidden] { display: none; }
.vote-selection img { width: 4rem; height: 4rem; border: 3px solid white; border-radius: 50%; object-fit: cover; }
.vote-selection span { display: block; color: #bfdbfe; font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.vote-selection strong { display: block; margin-top: .15rem; font-size: 1rem; font-weight: 900; }
.vote-selection button, .demo-confirm-button { min-height: 3rem; border: 0; border-radius: .75rem; background: #fde047; padding: .8rem 1.1rem; color: #172554; font-size: .82rem; font-weight: 900; cursor: pointer; transition: transform .2s, background .2s; }
.vote-selection button:hover, .demo-confirm-button:hover { transform: translateY(-2px); background: #fef08a; }
.vote-selection button:focus-visible, .demo-confirm-button:focus-visible { outline: 4px solid white; outline-offset: 3px; }

.vote-dialog { width: min(42rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; border: 0; border-radius: 1.75rem; padding: 1.5rem; color: #0f172a; box-shadow: 0 35px 100px rgba(15,23,42,.55); }
.vote-dialog::backdrop { background: rgba(15,23,42,.76); backdrop-filter: blur(4px); }
.dialog-close { position: absolute; right: 1rem; top: 1rem; z-index: 2; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 0; border-radius: 50%; background: #e2e8f0; color: #172554; font-size: 1.5rem; cursor: pointer; }
.dialog-close:focus-visible { outline: 4px solid #fde047; }
.dialog-art-summary { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0; border-radius: 1rem; background: #eff6ff; padding: .75rem; }
.dialog-art-summary img { width: 5.5rem; height: 5.5rem; flex: none; border-radius: 1rem; object-fit: cover; }
.dialog-art-summary span { display: block; color: #64748b; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.dialog-art-summary strong { display: block; margin-top: .25rem; color: #172554; font-size: 1.2rem; font-weight: 900; }
.demo-confirm-button { width: 100%; margin-top: .75rem; }
.dialog-success { padding: 2rem .5rem .5rem; text-align: center; }
.dialog-success[hidden] { display: none; }
.success-icon { display: grid; width: 5rem; height: 5rem; margin: 0 auto 1.5rem; place-items: center; border-radius: 50%; background: #fde047; color: #172554; font-size: 2.5rem; font-weight: 900; box-shadow: 0 0 0 .75rem #fef9c3; }

.steps-grid { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: steps; grid-template-columns: repeat(4,minmax(0,1fr)); }
.step-card { position: relative; min-height: 17rem; overflow: hidden; border: 1px solid #dbeafe; border-radius: 1.5rem; background: white; padding: 1.5rem; box-shadow: 0 12px 30px rgba(23,37,84,.07); transition: transform .25s ease, box-shadow .25s ease; }
.step-card:hover { transform: translateY(-5px); box-shadow: 0 20px 38px rgba(23,37,84,.13); }
.step-number { position: absolute; right: .85rem; top: .4rem; color: #eff6ff; font-size: 4.8rem; font-weight: 900; line-height: 1; }
.step-icon { position: relative; display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 1rem; background: #172554; color: #fde047; font-size: 1.75rem; box-shadow: 0 0 0 .4rem #eff6ff; }
.step-card h3 { position: relative; margin: 1.4rem 0 .65rem; color: #172554; font-size: 1.05rem; font-weight: 900; }
.step-card p { position: relative; margin: 0; color: #64748b; font-size: .88rem; line-height: 1.65; }
.field label { display: block; margin-bottom: .5rem; color: #172554; font-size: .85rem; font-weight: 900; }
.field label span { color: #64748b; font-weight: 700; }
.field input { min-height: 3.25rem; width: 100%; border: 2px solid #cbd5e1; border-radius: .8rem; padding: .75rem 1rem; color: #0f172a; outline: none; transition: border-color .18s, box-shadow .18s; }
.field input:focus { border-color: #1e3a8a; box-shadow: 0 0 0 4px rgba(253,224,71,.55); }
.field input[aria-invalid="true"] { border-color: #b91c1c; }
.field-error { min-height: 1.25rem; margin: .3rem 0 0; color: #b91c1c; font-size: .72rem; font-weight: 700; }

.confetti span { position: absolute; width: .55rem; height: 1.35rem; border-radius: .15rem; background: #fde047; opacity: .75; animation: confetti-drift 6s ease-in-out infinite; }
.confetti span:nth-child(1) { left: 5%; top: 16%; transform: rotate(18deg); }
.confetti span:nth-child(2) { left: 18%; top: 75%; background: #38bdf8; animation-delay: -2s; }
.confetti span:nth-child(3) { left: 46%; top: 12%; background: #f472b6; animation-delay: -4s; }
.confetti span:nth-child(4) { right: 42%; top: 68%; transform: rotate(60deg); }
.confetti span:nth-child(5) { right: 16%; top: 13%; background: #a78bfa; animation-delay: -1s; }
.confetti span:nth-child(6) { right: 5%; top: 72%; background: #38bdf8; animation-delay: -3s; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes float-card { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-9px); } }
@keyframes confetti-drift { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 8px 16px; rotate: 35deg; } }

@media (max-width: 1023px) {
    .challenge-stage { min-height: 24rem; max-width: 37rem; width: 100%; margin-inline: auto; }
    .steps-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .art-gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .gallery-card:last-child { grid-column: 1 / -1; width: calc(50% - .625rem); justify-self: center; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .site-mobile-header .site-mobile-header__inner { flex-direction: column; align-items: stretch; gap: .5rem; }
    .site-mobile-header .site-mobile-nav { display: flex; width: 100%; max-width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 1.1rem; overflow-x: auto; overflow-y: hidden; padding-bottom: .35rem; scrollbar-width: none; }
    .site-mobile-header .site-mobile-nav::-webkit-scrollbar { display: none; }
    .site-mobile-header .site-mobile-nav > * { flex: 0 0 auto; }
    .site-mobile-header .nav-tools { display: none !important; }
    .site-mobile-header .home-nav-mobile-tools,
    .site-mobile-header .home-nav-content-direct { display: inline-flex !important; }
}
@media (max-width: 639px) {
    .challenge-stage { min-height: 18rem; }
    .art-preview { width: 7rem; border-width: 4px; }
    .art-preview strong { font-size: 2.8rem; }
    .art-preview-center { width: 9.5rem; }
    .art-preview-left { left: -2%; }
    .art-preview-right { right: -2%; }
    .steps-grid { grid-template-columns: 1fr; }
    .step-card { min-height: 0; }
    .art-gallery-grid { grid-template-columns: 1fr; }
    .gallery-card:last-child { grid-column: auto; width: 100%; }
    .vote-selection { grid-template-columns: auto 1fr; }
    .vote-selection button { grid-column: 1 / -1; width: 100%; }
    .vote-dialog { padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}