/* =========================================================
   ART8 · construcao.css
   Página padrão "Em construção" (e a 404). Animação: o 8 se constrói.
   ========================================================= */
body { overflow-x: hidden; }
.cons { min-height: 100svh; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 120px var(--pad) 80px; }
.cons::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 320px; background: radial-gradient(ellipse at 50% 60%, rgba(255, 201, 0, .08), transparent 60%); pointer-events: none; }
.cons-logo { position: absolute; left: var(--pad); top: 34px; z-index: 2; }
.cons-logo img { height: 52px; width: auto; }
.gear { left: -210px; top: -210px; width: 560px; height: 560px; }
.cons-stage { position: relative; width: min(520px, 100%); aspect-ratio: 520 / 330; margin-top: 10px; }
.cons-body { position: relative; max-width: 640px; margin-top: 28px; }
.cons-area { height: 46px; width: auto; margin: 0 auto; }
.cons h1 { margin-top: 18px; font-size: clamp(36px, 5vw, 56px); line-height: 1.05; font-weight: 800; }
.dt { color: var(--gold-2); }
.cons p { margin-top: 20px; font-size: clamp(16px, 1.4vw, 19px); font-weight: 300; color: var(--muted); }
.cons-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 34px; }
.cons-foot { position: absolute; left: 0; right: 0; bottom: 24px; font-size: 12px; color: var(--dim); }
@media (max-width: 560px) { .cons { padding-top: 100px; } .cons-logo img { height: 42px; } .cons-actions .btn { width: 100%; } .cons-area { height: 38px; } }

/* ----- animação ----- */
.gear{position:absolute;animation:gr 240s linear infinite}
@keyframes gr{to{transform:rotate(360deg)}}
.cs{position:relative;margin:0 auto}
.cs .lay{position:absolute;left:50%;top:50%;transform:rotate(90deg)}
.cs .lay img{position:absolute;inset:0;width:100%;height:100%}
.cs .gh{opacity:.13}
.cs .fl{position:absolute;inset:0;animation:bd 20s ease-in-out infinite}
.cs .eg{position:absolute;left:-8%;right:-8%;height:2px;background:#FFE08A;box-shadow:0 0 10px rgba(255,201,0,.7);animation:eg 20s ease-in-out infinite}
@keyframes bd{0%,40%{clip-path:inset(100% 0 0 0);opacity:1}78%,92%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes eg{0%{top:100%;opacity:0}40%{top:100%;opacity:1}78%{top:0%;opacity:1}79%,100%{top:0%;opacity:0}}
.cs .sk{stroke-dasharray:100;animation:sk 20s ease-in-out infinite}
@keyframes sk{0%{stroke-dashoffset:100;opacity:1}40%{stroke-dashoffset:0;opacity:1}92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.cs .sk{stroke-dasharray:100;animation:sk 20s ease-in-out infinite}
@keyframes sk{0%{stroke-dashoffset:100;opacity:1}40%{stroke-dashoffset:0;opacity:1}92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.cs i{position:absolute;width:22px;height:22px;border:0 solid rgba(255,201,0,.6)}
.dt b{display:inline-block;animation:dt 2.8s infinite;opacity:.2}
.dt b:nth-child(2){animation-delay:.5s}.dt b:nth-child(3){animation-delay:1s}
@keyframes dt{40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.gear,.cs .fl,.cs .eg,.cs .sk,.dt b{animation:none!important}.cs .eg{display:none}}

/* ajuste de escala no celular */
.cons-stage .cs { transform-origin: 0 0; margin: 0; }