/* Labges - canteiro de obras cibernético. HTML, CSS e JS puros. */
:root{
  --noite:#060c22;       /* fundo */
  --painel:#0c1736;      /* painéis */
  --painel-2:#122150;
  --neon:#5fe3ff;        /* ciano dos hologramas */
  --rosa:#ff5fd2;        /* tinta neon */
  --amarelo:#ffd21f;     /* capacete / fita zebrada */
  --laranja:#ff7a1a;     /* alta visibilidade */
  --texto:#e8eeff;
  --texto-suave:#b4c1e8;
  --f-placa:"Bahnschrift","DIN Alternate","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --f-texto:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --largura:70rem;
  --corte:polygon(0 14px,14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font:1.0625rem/1.6 var(--f-texto);color:var(--texto);
  background-color:var(--noite);
  background-image:
    radial-gradient(60rem 30rem at 50% -6rem,rgba(57,194,255,.16),transparent 70%),
    linear-gradient(120deg,#0b1d3f 0%,#081530 45%,#060c22 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto}
a{color:var(--neon)}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px;border-radius:4px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pular{position:absolute;left:1rem;top:-4rem;background:var(--amarelo);color:#0c1a3d;padding:.6rem 1rem;font-weight:700;border-radius:0 0 8px 8px;z-index:10}
.pular:focus{top:0}
.binario{position:fixed;inset:0;z-index:-1;pointer-events:none}
.binario canvas{display:block;width:100%;height:100%}
.miolo{width:min(100% - 2rem,var(--largura));margin-inline:auto}

/* Fita zebrada do topo */
.fita{background:repeating-linear-gradient(-45deg,var(--amarelo) 0 18px,#0a1638 18px 36px);padding:.4rem 1rem;text-align:center}
.fita p{display:inline-block;margin:0;background:var(--amarelo);color:#0c1a3d;font:700 .92rem/1.3 var(--f-placa);padding:.2rem .8rem;border-radius:4px;letter-spacing:.03em}

/* Cabeçalho das páginas internas */
.topo{border-bottom:1px solid rgba(95,227,255,.5);background:rgba(6,12,34,.9);box-shadow:0 0 24px rgba(95,227,255,.18)}
.topo .miolo{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.5rem;padding-block:.7rem}
.marca{font:700 1.5rem/1 var(--f-placa);color:var(--texto);text-decoration:none;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 12px rgba(95,227,255,.8)}
.topo nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.1rem 1.1rem}
.topo nav a{color:var(--texto);text-decoration:none;font-size:.95rem;padding:.35rem 0;display:inline-block;border-bottom:2px solid transparent}
.topo nav a:hover{border-bottom-color:var(--neon)}
.topo nav a[aria-current="page"]{border-bottom-color:var(--amarelo);font-weight:700}

/* ---------- Página inicial: a obra ---------- */
.obra{position:relative;padding:0 0 1rem}
.viga{
  height:30px;border-block:4px solid var(--laranja);
  background:
    repeating-linear-gradient(60deg,transparent 0 15px,var(--laranja) 15px 18px),
    repeating-linear-gradient(-60deg,transparent 0 15px,var(--laranja) 15px 18px);
  filter:drop-shadow(0 0 8px rgba(255,122,26,.6));
}
.pendurada{position:relative;width:max-content;max-width:calc(100% - 2rem);margin:0 auto;padding-top:40px;transform-origin:50% 0;animation:descer 1.6s cubic-bezier(.3,1.4,.5,1) both}
.pendurada::before,.pendurada::after{content:"";position:absolute;top:0;width:2px;height:40px;background:var(--neon);box-shadow:0 0 8px var(--neon)}
.pendurada::before{left:18%}.pendurada::after{right:18%}
.placa-obra{
  margin:0;color:var(--amarelo);background:rgba(6,12,34,.85);border:2px solid var(--amarelo);
  box-shadow:0 0 18px rgba(255,210,31,.55),inset 0 0 14px rgba(255,210,31,.25);
  font:700 clamp(1rem,3.4vw,1.45rem)/1.1 var(--f-placa);letter-spacing:.16em;text-transform:uppercase;
  padding:.6rem 1.3rem;text-align:center;clip-path:var(--corte);
}
@keyframes descer{0%{transform:translateY(-140%) rotate(-5deg)}60%{transform:translateY(0) rotate(3deg)}80%{transform:rotate(-1.5deg)}100%{transform:none}}

.obra h1{
  margin:1.4rem 0 0;text-align:center;font:700 clamp(3.4rem,17vw,10rem)/.95 var(--f-placa);
  letter-spacing:.06em;text-transform:uppercase;color:#eaf8ff;
  text-shadow:0 0 14px rgba(95,227,255,.9),0 0 46px rgba(95,227,255,.55),0 0 90px rgba(95,227,255,.3);
}
@supports (-webkit-text-stroke:2px #fff){
  .obra h1{color:rgba(95,227,255,.12);-webkit-text-stroke:2px var(--neon)}
}
.obra .chamada{max-width:38rem;margin:1rem auto 0;padding-inline:1rem;text-align:center;font-size:clamp(1.05rem,2.6vw,1.3rem);line-height:1.45}

.canteiro{
  display:flex;justify-content:center;align-items:flex-end;gap:clamp(0rem,1.6vw,1.2rem);
  margin:1.6rem auto 0;padding:0 .4rem;max-width:54rem;border-bottom:3px solid var(--neon);
  box-shadow:0 10px 26px -8px rgba(95,227,255,.75);
}
.canteiro .robo{flex:1 1 0;max-width:132px}
.controle{display:flex;justify-content:center;margin-top:1.2rem}
.botao-pausa{font:600 .9rem var(--f-texto);color:var(--texto);background:rgba(12,23,54,.8);border:1px solid var(--neon);padding:.45rem 1rem;cursor:pointer;min-height:44px;clip-path:var(--corte)}
.botao-pausa:hover{color:var(--amarelo);border-color:var(--amarelo)}

/* Robôs */
.robo{display:block;aspect-ratio:166/190;width:100%}
.robo svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 6px rgba(95,227,255,.35))}
.robo .tudo{animation:balanco 2.4s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.robo .olhos{transform-origin:70px 46px;animation:piscar 4.5s infinite;animation-delay:var(--d,0s)}
.robo .farol{animation:pulsar 1.6s ease-in-out infinite alternate}
.robo .braco{transform-origin:104px 76px;animation:apertar 1.1s ease-in-out infinite alternate}
.robo .perna{transform-origin:var(--px,58px) 132px}
.acao-solda .braco{animation:tremer .5s ease-in-out infinite alternate}
.acao-holo .braco,.acao-antena .braco{animation:tremer 2s ease-in-out infinite alternate}
.acao-laser .braco{animation:varrer 1.8s ease-in-out infinite alternate}
.acao-furadeira .braco{animation:vibrar .09s linear infinite alternate}
.acao-rolo .braco{animation:pintar 1.3s ease-in-out infinite alternate}
.acao-britadeira .braco{animation:none}
.robo .acao-britadeira .tudo{animation:vibrar .07s linear infinite alternate}
.robo .faisca{transform-origin:136.5px 43px;animation:faiscar .22s steps(2) infinite}
.robo .poeira{animation:faiscar .3s steps(2) infinite}
.robo .holo{animation:pulsar 1.2s ease-in-out infinite alternate}
.robo .broca{animation:girar .25s linear infinite}
@keyframes balanco{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes piscar{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes pulsar{from{opacity:.45}to{opacity:1}}
@keyframes apertar{from{transform:rotate(5deg)}to{transform:rotate(-22deg)}}
@keyframes tremer{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@keyframes varrer{from{transform:rotate(-16deg)}to{transform:rotate(12deg)}}
@keyframes pintar{from{transform:rotate(-34deg)}to{transform:rotate(18deg)}}
@keyframes vibrar{from{transform:translateY(0)}to{transform:translateY(2.5px)}}
@keyframes faiscar{0%{opacity:1;transform:scale(1)}100%{opacity:.35;transform:scale(.6)}}
@keyframes girar{to{stroke-dashoffset:-5}}
@keyframes passo-a{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@keyframes passo-b{from{transform:rotate(16deg)}to{transform:rotate(-16deg)}}
.anda .perna-e,.sobe .perna-e{animation:passo-a .38s ease-in-out infinite alternate}
.anda .perna-d,.sobe .perna-d{animation:passo-b .38s ease-in-out infinite alternate}

/* A obra em movimento: robôs andando, andaime (sobe de um lado, desce do outro), pintura e britadeira */
.obra-viva{--rw:clamp(52px,9vw,96px);--aw:clamp(92px,24vw,280px);--ah:clamp(96px,13vw,124px);
  position:relative;height:calc(var(--ah) + var(--rw)*1.15 + 34px);margin-top:2.2rem;border-bottom:3px solid var(--neon);box-shadow:0 10px 26px -8px rgba(95,227,255,.75);overflow:hidden}
.obra-viva .robo{position:absolute;bottom:0;width:var(--rw);z-index:1}
.andaime-obra{position:absolute;left:3%;bottom:0;width:calc(var(--aw) + var(--rw));height:var(--ah)}
.esc{position:absolute;bottom:0;width:calc(var(--rw)*.56);height:100%;border-inline:3px solid #aebfd6;
  background:repeating-linear-gradient(#aebfd6 0 3px,transparent 3px 20px)}
.esc-e{left:calc(var(--rw)*.22)}.esc-d{right:calc(var(--rw)*.22)}
.piso{position:absolute;left:0;right:0;top:-7px;height:7px;border-radius:3px;
  background:repeating-linear-gradient(-45deg,var(--amarelo) 0 9px,#0c1a3d 9px 18px);box-shadow:0 0 12px rgba(255,210,31,.6)}
.guarda{position:absolute;left:0;right:0;top:calc(var(--rw)*-.5);height:calc(var(--rw)*.5);border:2px solid rgba(174,191,214,.7);border-bottom:0}
.obra-viva .sobe{left:0;animation:circuito 15s linear infinite}
@keyframes circuito{
  0%{transform:translate(0,0)}
  24%{transform:translate(0,calc(var(--ah)*-1))}
  50%{transform:translate(var(--aw),calc(var(--ah)*-1))}
  74%{transform:translate(var(--aw),0)}
  100%{transform:translate(0,0)}
}
.obra-viva .anda{left:0;z-index:0}
.obra-viva .anda svg{transform:scale(.8);transform-origin:50% 100%;opacity:.75}
.obra-viva .vai{animation:ir 17s linear infinite}
.obra-viva .volta{animation:voltar 23s linear infinite}
.obra-viva .vai-2{animation:ir 29s linear infinite;animation-delay:-11s}
@keyframes ir{from{transform:translateX(-110px)}to{transform:translateX(100vw)}}
@keyframes voltar{from{transform:translateX(100vw)}to{transform:translateX(-110px)}}
.parede{position:absolute;right:3%;bottom:0;width:clamp(56px,12vw,150px);height:calc(100% - 24px);border:2px solid var(--neon);border-bottom:0;
  background:
    linear-gradient(var(--rosa),var(--rosa)) left bottom/100% 0% no-repeat,
    repeating-linear-gradient(rgba(95,227,255,.25) 0 1px,transparent 1px 24px),
    rgba(12,23,54,.9);
  box-shadow:0 0 16px rgba(95,227,255,.4);animation:tinta 9s ease-in-out infinite alternate}
@keyframes tinta{from{background-size:100% 0%,auto,auto}to{background-size:100% 100%,auto,auto}}
.obra-viva .pintor{right:calc(3% + clamp(56px,12vw,150px) - var(--rw)*.22)}
.obra-viva .brita{left:max(calc(5% + var(--aw) + var(--rw)),52%)}
.obra-viva .volta-2{animation:voltar 31s linear infinite;animation-delay:-14s}
.obra-viva .vai-3{animation:ir 21s linear infinite;animation-delay:-6s}
@media (max-width:40rem){.obra-viva .vai-2,.obra-viva .vai-3{display:none}}

/* Robô pendurado na talha, correndo pela viga */
.talha{position:absolute;top:30px;left:0;z-index:0;width:clamp(40px,5.5vw,66px);padding-top:22px;animation:talha 15s ease-in-out infinite alternate}
.talha::before{content:"";position:absolute;left:50%;top:0;width:2px;height:26px;background:var(--neon);box-shadow:0 0 8px var(--neon)}
.talha::after{content:"";position:absolute;left:calc(50% - 9px);top:-4px;width:18px;height:8px;border-radius:3px;background:var(--amarelo)}
.talha .robo{transform-origin:50% 0;animation:pendulo 1.7s ease-in-out infinite alternate}
@keyframes talha{from{transform:translateX(3vw)}to{transform:translateX(calc(97vw - 100%))}}
@keyframes pendulo{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.pendurada{z-index:1}

/* Pista de robôs antes do rodapé (todas as páginas) */
.pista{--rw:clamp(46px,6.5vw,76px);position:relative;height:calc(var(--rw)*1.15 + 16px);margin-top:2.5rem;overflow:hidden;border-bottom:3px solid var(--neon);box-shadow:0 10px 26px -8px rgba(95,227,255,.75)}
.pista .robo{position:absolute;bottom:0;left:0;width:var(--rw)}
.pista .vai{animation:ir 19s linear infinite}
.pista .volta{animation:voltar 25s linear infinite;animation-delay:-5s}
.pista .vai-2{animation:ir 33s linear infinite;animation-delay:-17s}
.pista .volta-2{animation:voltar 37s linear infinite;animation-delay:-21s}
.pista .parado{left:18%}.pista .parado-2{left:74%}
.pista + .controle{margin:1rem 0 1.4rem}
@media (max-width:40rem){.pista .vai-2,.pista .volta-2{display:none}}

/* Os portais: painéis holográficos */
.portais{padding:2.6rem 0 3.5rem}
.portais h2{font:700 clamp(1.5rem,4vw,2.1rem)/1.15 var(--f-placa);margin:0 0 .3rem;letter-spacing:.02em}
.portais > .miolo > p{margin:0 0 1.6rem;max-width:40rem;color:var(--texto-suave)}
.andaime{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:44rem){.andaime{grid-template-columns:repeat(2,1fr)}}
@media (min-width:66rem){.andaime{grid-template-columns:repeat(3,1fr)}}
.andaime li{filter:drop-shadow(0 0 10px rgba(95,227,255,.28));transition:filter .25s ease}
.andaime li:hover,.andaime li:focus-within{filter:drop-shadow(0 0 16px rgba(255,210,31,.6))}
.portal{
  position:relative;display:grid;grid-template-columns:92px 1fr;gap:.2rem 1rem;align-items:center;height:100%;
  color:var(--texto);text-decoration:none;padding:1.1rem 1.2rem 1.2rem;clip-path:var(--corte);
  background:
    linear-gradient(var(--cor,var(--neon)),var(--cor,var(--neon))) top left/100% 5px no-repeat,
    repeating-linear-gradient(rgba(95,227,255,.05) 0 1px,transparent 1px 4px),
    linear-gradient(160deg,var(--painel-2),var(--painel));
  border:1px solid rgba(95,227,255,.6);transition:transform .25s ease,border-color .25s ease;
}
.portal .robo{grid-row:1 / span 2}
.portal h3{margin:0;font:700 1.35rem/1.15 var(--f-placa);align-self:end;letter-spacing:.02em}
.portal p{margin:0;font-size:.98rem;line-height:1.4;color:var(--texto-suave);align-self:start}
.portal:hover,.portal:focus-visible{transform:translateY(-4px);border-color:var(--amarelo)}
.portal:hover h3,.portal:focus-visible h3{color:var(--amarelo)}

/* ---------- Páginas internas ---------- */
.abre{padding:2rem 0 1.4rem}
.abre .miolo{display:grid;grid-template-columns:1fr;gap:1rem;align-items:center}
.abre h1{margin:0;font:700 clamp(2rem,6.5vw,3.4rem)/1.05 var(--f-placa);text-shadow:0 0 22px rgba(95,227,255,.55)}
.abre .resumo{margin:.8rem 0 0;font-size:1.15rem;max-width:40rem}
.anfitriao{width:120px}
@media (min-width:44rem){.abre .miolo{grid-template-columns:160px 1fr;gap:2rem}.anfitriao{width:160px}}
.folha{background:linear-gradient(180deg,var(--painel-2),var(--painel) 22rem);border:1px solid rgba(95,227,255,.55);border-bottom:0;box-shadow:0 0 30px rgba(95,227,255,.16);padding:1.6rem 1.1rem 3rem;margin-top:.5rem}
@media (min-width:44rem){.folha{padding:2.4rem 3rem 3.5rem}}
.folha > *{max-width:44rem}
.folha h2{font:700 1.7rem/1.15 var(--f-placa);margin:2.4rem 0 .6rem;padding-top:.9rem;border-top:1px solid var(--neon);color:#fff}
.folha h2:first-child{margin-top:0;border-top:0;padding-top:0}
.folha h3{font:700 1.2rem/1.25 var(--f-placa);margin:1.6rem 0 .3rem;color:#fff}
.folha p{margin:.6rem 0}
.folha ul,.folha ol{padding-left:1.3rem;margin:.6rem 0}
.folha li{margin:.35rem 0}
.folha li::marker{color:var(--amarelo);font-weight:700}
.folha strong{color:#fff}
.aviso{border-left:6px solid var(--amarelo);background:rgba(255,210,31,.10);padding:.9rem 1.1rem;margin:1.2rem 0}
.aviso strong:first-child{display:block;font-family:var(--f-placa);font-size:1.1rem;color:var(--amarelo)}
.pode-nao-pode{display:grid;gap:1rem;grid-template-columns:1fr;max-width:none}
@media (min-width:44rem){.pode-nao-pode{grid-template-columns:1fr 1fr}}
.pode,.nao-pode{padding:1rem 1.1rem;border:1px solid;background:rgba(6,12,34,.6)}
.pode{border-color:#59e3a1}.nao-pode{border-color:#ff8a80}
.folha .pode h3,.folha .nao-pode h3{margin-top:0}
.pode h3::before{content:"✔ ";color:#59e3a1}.nao-pode h3::before{content:"✖ ";color:#ff8a80}
.troca{border-collapse:collapse;width:100%;margin:1rem 0;font-size:1rem}
.troca caption{text-align:left;font-weight:700;padding-bottom:.4rem;color:#fff}
.troca th,.troca td{border:1px solid rgba(95,227,255,.4);padding:.55rem .7rem;text-align:left;vertical-align:top}
.troca thead th{background:rgba(95,227,255,.16);color:#fff;font-family:var(--f-placa)}
.rolagem{overflow-x:auto;max-width:none}

/* Ferramentas e tipos */
.ferramentas{list-style:none;padding:0;display:grid;gap:1rem;max-width:none}
@media (min-width:44rem){.ferramentas{grid-template-columns:1fr 1fr}}
.ferramenta{background:rgba(6,12,34,.6);border:1px solid rgba(95,227,255,.5);padding:1rem 1.1rem;margin:0}
.folha .ferramenta h3{margin:0 0 .2rem}
.ferramenta p{margin:.3rem 0;font-size:1rem}
.etiqueta{display:inline-block;font:700 .82rem var(--f-placa);padding:.15rem .55rem;border-radius:4px;background:var(--amarelo);color:#0c1a3d}
.etiqueta.cinza{background:#2a3c78;color:var(--texto)}

/* Prompts */
.prompt{background:rgba(6,12,34,.7);border:1px solid rgba(95,227,255,.55);margin:1rem 0;overflow:hidden}
.prompt header{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.55rem .6rem .55rem 1rem;background:rgba(95,227,255,.14);border-bottom:1px solid rgba(95,227,255,.4)}
.folha .prompt h3{margin:0;font-size:1.05rem}
.prompt pre{margin:0;padding:1rem;white-space:pre-wrap;word-break:break-word;font:1rem/1.55 var(--f-texto);color:var(--texto)}
.copiar{font:700 .9rem var(--f-texto);background:var(--amarelo);color:#0c1a3d;border:0;border-radius:4px;padding:.5rem .9rem;cursor:pointer;min-height:40px;min-width:6.5rem}
.copiar:hover{background:#ffe065}
.copiar.feito{background:#8ff0b8}
.proximas{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.folha .proximas a{display:inline-block;border:1px solid var(--neon);padding:.5rem .9rem;text-decoration:none;font-weight:600;color:var(--texto)}
.folha .proximas a:hover{background:var(--amarelo);color:#0c1a3d;border-color:var(--amarelo)}

/* Caixa "Conheça as IAs" */
.caixa-ias{margin:2.2rem 0 0;max-width:none;border:1px solid rgba(95,227,255,.6);border-top:4px solid var(--amarelo);
  background:linear-gradient(160deg,var(--painel-2),var(--painel));box-shadow:0 0 22px rgba(95,227,255,.18)}
.folha .caixa-ias{margin:1.4rem 0}
.caixa-ias summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;padding:.9rem 1.1rem;min-height:48px}
.caixa-ias summary::-webkit-details-marker{display:none}
.caixa-ias summary::after{content:"";margin-left:auto;width:.6rem;height:.6rem;border-right:2px solid var(--neon);border-bottom:2px solid var(--neon);transform:rotate(45deg);transition:transform .2s ease}
.caixa-ias[open] summary::after{transform:rotate(-135deg)}
.caixa-titulo{font:700 1.25rem/1.2 var(--f-placa);color:#fff}
.caixa-titulo::before{content:"\2726";color:var(--amarelo);margin-right:.5rem}
.caixa-corpo{padding:0 1.1rem 1.2rem}
.caixa-corpo p{margin:0 0 .9rem;color:var(--texto-suave);font-size:.98rem}
.chips{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(9.2rem,1fr))}
.folha .chips{padding:0}.folha .chips li{margin:0}
.chips a,.folha .chips a{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.45rem .9rem;color:var(--texto);text-decoration:none;font-weight:600;
  border:1px solid rgba(95,227,255,.6);background:rgba(6,12,34,.65);clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);transition:background .2s ease,color .2s ease}
.chips a::before{content:"\2726";color:var(--amarelo)}
.chips a:hover,.chips a:focus-visible{background:var(--amarelo);color:#0c1a3d;border-color:var(--amarelo)}
.chips a:hover::before,.chips a:focus-visible::before{color:#0c1a3d}

/* Rodapé */
.rodape{background:#040818;border-top:4px solid var(--amarelo);padding:1.6rem 0 2.2rem;font-size:.93rem;color:var(--texto-suave)}
.rodape p{margin:.4rem 0;max-width:48rem}
.rodape strong{color:var(--texto)}
.contador{display:inline-block;margin-top:.8rem !important;padding:.3rem .8rem;border:1px solid var(--neon);font:700 .95rem var(--f-placa);letter-spacing:.06em;color:var(--texto)}

/* Painel de acessibilidade */
.acess{position:fixed;right:12px;bottom:12px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;font-family:var(--f-texto)}
.acess-abre{display:flex;align-items:center;gap:.5rem;min-height:48px;padding:.5rem .9rem;background:var(--amarelo);color:#0c1a3d;border:2px solid #0c1a3d;border-radius:999px;font:700 .95rem var(--f-texto);cursor:pointer;box-shadow:0 0 16px rgba(255,210,31,.55)}
.acess-abre:hover{background:#ffe065}
@media (max-width:40rem){.acess-abre span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.acess-abre{padding:.5rem;width:50px;justify-content:center}}
.acess-painel{order:-1;width:min(20rem,calc(100vw - 24px));max-height:calc(100vh - 90px);overflow:auto;padding:.9rem;display:grid;gap:.5rem;
  background:#0a1430;color:#fff;border:2px solid var(--amarelo);border-radius:10px;box-shadow:0 0 30px rgba(0,0,0,.6)}
.acess-painel[hidden]{display:none}
.acess-titulo{margin:0 0 .2rem;font:700 1.15rem var(--f-placa)}
.acess-nota{margin:0;font-size:.85rem;color:#c9d4f5}
.acess-linha{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:.4rem;font-size:.95rem}
.acess-valor{min-width:3.2rem;text-align:center;font-weight:700}
.acess-painel button{min-height:44px;padding:.5rem .8rem;text-align:left;font:600 .95rem var(--f-texto);color:#fff;background:#16265a;border:1px solid #5fe3ff;border-radius:6px;cursor:pointer}
.acess-linha button{text-align:center;min-width:48px;font-weight:700}
.acess-painel button:hover{background:#21357a}
.acess-painel button[aria-pressed="true"]{background:var(--amarelo);color:#0c1a3d;border-color:var(--amarelo)}
.acess-painel button[aria-pressed="true"]::after{content:" (ligado)"}
.acess-painel .acess-limpar{background:transparent;text-align:center}

/* Preferências de leitura ligadas pelo painel */
.alto-contraste{--noite:#000;--painel:#000;--painel-2:#000;--texto:#fff;--texto-suave:#fff}
.alto-contraste body{background:#000;color:#fff}
.alto-contraste .binario{display:none}
.alto-contraste .folha,.alto-contraste .portal,.alto-contraste .caixa-ias,.alto-contraste .ferramenta,.alto-contraste .prompt,.alto-contraste .prompt header,
.alto-contraste .topo,.alto-contraste .rodape,.alto-contraste .pode,.alto-contraste .nao-pode,.alto-contraste .aviso,.alto-contraste .chips a,.alto-contraste .troca thead th{background:#000;border-color:#fff;box-shadow:none}
.alto-contraste a{color:#ff0;text-decoration:underline}
.alto-contraste .portal{clip-path:none;border:2px solid #fff}
.alto-contraste .obra h1{color:#fff;-webkit-text-stroke:0;text-shadow:none}
.alto-contraste .abre h1,.alto-contraste .marca{text-shadow:none}
.alto-contraste .robo svg{filter:none}
.alto-contraste .chips a:hover,.alto-contraste .chips a:focus-visible{background:#ff0;color:#000}
.espacado body{line-height:1.95;letter-spacing:.03em;word-spacing:.12em}
.espacado p,.espacado li{margin-block:.9em}
.links-destacados a{text-decoration:underline !important;text-decoration-thickness:2px !important;outline:2px dashed var(--amarelo);outline-offset:2px}
.links-destacados .portal{outline-offset:-4px}
[vw]{z-index:60 !important}

/* Botão flutuante do WhatsApp */
.zap{position:fixed;left:12px;bottom:12px;z-index:50;display:flex;align-items:center;gap:.5rem;min-height:48px;padding:.5rem .9rem;
  background:#25d366;color:#06281a;border:2px solid #06281a;border-radius:999px;font:700 .95rem var(--f-texto);text-decoration:none;box-shadow:0 0 16px rgba(37,211,102,.55)}
.zap:hover{background:#4ee886}
.alto-contraste .zap{color:#06281a}
@media (max-width:40rem){.zap span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.zap{padding:.5rem;width:50px;justify-content:center}}
.rodape{padding-bottom:5rem}

/* Botão da música (só toca quando a pessoa aperta) */
.musica{position:fixed;left:12px;bottom:72px;z-index:50;display:flex;align-items:center;gap:.5rem;min-height:48px;padding:.5rem .9rem;
  background:#0a1430;color:#fff;border:2px solid var(--neon);border-radius:999px;font:700 .95rem var(--f-texto);cursor:pointer;box-shadow:0 0 14px rgba(95,227,255,.45)}
.musica:hover{background:#16265a}
.musica[aria-pressed="true"]{background:var(--rosa);color:#2a0620;border-color:#2a0620}
@media (max-width:40rem){.musica span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.musica{padding:.5rem;width:50px;justify-content:center}}

/* Cenas fora da tela: animação parada */
.fora,.fora *{animation-play-state:paused !important}

/* Caixa de resumo e cadeados */
.folha .caixa-resumo{margin:0 0 1.6rem}
.folha .caixa-resumo + h2{border-top:0;padding-top:0;margin-top:0}
.cadeados{display:block;width:min(100%,34rem);height:auto;margin:0 auto .6rem}

/* Guindaste içando uma viga (telas largas) */
.grua{display:none}
@media (min-width:72rem){
  .grua{display:block;position:absolute;left:66%;bottom:0;width:14px;height:calc(100% - 8px);
    background:repeating-linear-gradient(45deg,transparent 0 6px,var(--laranja) 6px 9px),repeating-linear-gradient(-45deg,transparent 0 6px,var(--laranja) 6px 9px);border-inline:3px solid var(--laranja)}
  .grua::before{content:"";position:absolute;top:0;left:-44px;width:176px;height:11px;border-block:3px solid var(--laranja);
    background:repeating-linear-gradient(60deg,transparent 0 7px,var(--laranja) 7px 9px),repeating-linear-gradient(-60deg,transparent 0 7px,var(--laranja) 7px 9px)}
  .grua-cabo{position:absolute;top:11px;left:104px;width:2px;height:22%;background:var(--neon);box-shadow:0 0 6px var(--neon);animation:icar 6s ease-in-out infinite alternate}
  .grua-viga{position:absolute;bottom:-12px;left:-36px;width:74px;height:12px;border-radius:2px;background:repeating-linear-gradient(-45deg,var(--amarelo) 0 9px,#0c1a3d 9px 18px);box-shadow:0 0 10px rgba(255,210,31,.6)}
}
@keyframes icar{from{height:20%}to{height:74%}}

/* Celular: menu em uma linha que desliza, robôs maiores e menos efeitos */
@media (max-width:44rem){
  .topo .miolo{flex-wrap:nowrap;gap:1rem}
  .topo nav{min-width:0;overflow-x:auto;scrollbar-width:thin;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .topo nav ul{flex-wrap:nowrap;white-space:nowrap;padding-right:2rem}
  .topo nav a{padding:.6rem 0}
}
@media (max-width:40rem){
  .canteiro{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;gap:.6rem 0}
  .canteiro .robo{max-width:108px}
  .obra-viva{--rw:clamp(58px,16vw,96px)}
  .robo svg{filter:none}
}
@media (max-width:23rem){.obra-viva .brita{display:none}}

/* Movimento: respeitar a preferência do sistema e o botão de pausa */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .obra-viva .anda,.pista .anda,.talha{display:none}
}
.sem-movimento *,.sem-movimento *::before,.sem-movimento *::after{animation:none !important;transition:none !important}
.sem-movimento .obra-viva .anda,.sem-movimento .pista .anda,.sem-movimento .talha{display:none}