/* WebForge · Dr. Eduardo · seção at — Ombro e cotovelo (#ombro, papel)
   O atlas de consulta: a gravura do logo dele em marinho sobre papel, rótulos de atlas por região,
   uma lente que acende a região escolhida e a ficha ao lado. Cotovelo em segunda prancha. */

.at-sec{--at-tinta:var(--tinta-papel);--at-fio:rgba(20,44,72,.38)}

/* ---------- cabeçalho ---------- */
.at-cabeca{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px clamp(32px,5vw,88px);align-items:end}
.at-lead{margin:0;max-width:30em}

/* ---------- atlas: prancha + ficha ---------- */
.at-atlas{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.at-prancha{margin:0;position:relative}
.at-palco{position:relative;aspect-ratio:1120/860}
/* folha de atlas: milimetrado finíssimo em máscara radial + marcas de corte nos cantos */
.at-palco::before{content:"";position:absolute;inset:-2% -1%;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(20,44,72,.07) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(20,44,72,.07) 0 1px, transparent 1px 24px);
  -webkit-mask:radial-gradient(closest-side at 50% 48%, #000 30%, transparent);mask:radial-gradient(closest-side at 50% 48%, #000 30%, transparent)}
.at-prancha::before{content:"";position:absolute;inset:-14px -14px 22px -14px;pointer-events:none;
  background:
    linear-gradient(var(--tinta-papel),var(--tinta-papel)) 0 0/16px 1px no-repeat, linear-gradient(var(--tinta-papel),var(--tinta-papel)) 0 0/1px 16px no-repeat,
    linear-gradient(var(--tinta-papel),var(--tinta-papel)) 100% 0/16px 1px no-repeat, linear-gradient(var(--tinta-papel),var(--tinta-papel)) 100% 0/1px 16px no-repeat,
    linear-gradient(var(--tinta-papel),var(--tinta-papel)) 0 100%/16px 1px no-repeat, linear-gradient(var(--tinta-papel),var(--tinta-papel)) 0 100%/1px 16px no-repeat,
    linear-gradient(var(--tinta-papel),var(--tinta-papel)) 100% 100%/16px 1px no-repeat, linear-gradient(var(--tinta-papel),var(--tinta-papel)) 100% 100%/1px 16px no-repeat;opacity:.45}
.at-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.at-aro{fill:none;stroke:var(--azul-bordado);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.55;transform:rotate(-90deg);transform-origin:555px 545px}
.at-aro2{fill:none;stroke:var(--at-fio);stroke-width:1;stroke-dasharray:2 7;vector-effect:non-scaling-stroke;opacity:.6}
.at-osso-base{color:var(--tinta-papel);opacity:.22;transition:opacity .7s var(--curva)}
.at-osso-aceso{color:var(--tinta-papel)}
.at-sec[data-at-ativo="0"] .at-osso-base{opacity:1}
.at-anel{fill:none;stroke:var(--salvia-escura);stroke-width:1.2;stroke-dasharray:3 6;vector-effect:non-scaling-stroke}
.at-fios polyline{fill:none;stroke:var(--at-fio);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .4s}
.at-pontos circle{fill:var(--azul-bordado);transition:fill .4s, r .4s}
.at-fios .at-on{stroke:var(--tinta-papel)}
.at-pontos .at-on{fill:var(--tinta-papel)}
.at-nums{display:none}
.at-alvos circle{fill:transparent;pointer-events:none}
@media (hover:hover) and (pointer:fine){.at-alvos circle{pointer-events:all;cursor:crosshair}}
/* detalhe ampliado */
.at-det{opacity:0;transition:opacity .5s var(--curva)}
.at-sec:not([data-at-ativo="0"]) .at-det{opacity:1}
.at-det-fundo{fill:var(--papel)}
.at-det-osso{color:var(--tinta-papel)}
.at-det-aro{fill:none;stroke:var(--tinta-papel);stroke-width:1.2;vector-effect:non-scaling-stroke}
.at-fonte-anel{fill:none;stroke:var(--tinta-papel);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.7}
.at-tan{stroke:var(--tinta-papel);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.45}
.at-det-t{font-family:var(--f-mono);font-size:21px;letter-spacing:.05em;fill:var(--tinta-papel-suave);text-anchor:end}
.at-det-mira{stroke:var(--salvia);stroke-width:1.2;vector-effect:non-scaling-stroke}
.at-anel-n{font-family:var(--f-mono);font-size:22px;font-weight:500;letter-spacing:.06em;fill:var(--salvia-escura);text-anchor:end;paint-order:stroke;stroke:var(--papel);stroke-width:6px;stroke-linejoin:round;opacity:0;transition:opacity .4s}
.at-sec:not([data-at-ativo="0"]) .at-anel-n{opacity:1}
.at-fonte-anel{display:none}
.at-sec[data-at-ativo="5"] .at-fonte-anel{display:inline}
/* entrada: o aro se desenha, os fios saem do osso um a um, os rótulos chegam em cascata */
.js .at-aro{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.45,0,.2,1) .1s}
.js .at-fios polyline{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--curva) calc(.6s + var(--i) * .14s), stroke .4s}
.js .at-pontos circle{opacity:0;transition:opacity .5s ease calc(.45s + var(--i) * .14s), fill .4s}
.js .at-rot{opacity:0;transition:opacity .7s ease calc(1.1s + var(--i) * .14s), color .3s, background .3s}
.js .at-visto .at-aro,.js .at-visto .at-fios polyline{stroke-dashoffset:0}
.js .at-visto .at-pontos circle,.js .at-visto .at-rot{opacity:1}
.at-nums circle{fill:var(--papel);stroke:var(--tinta-papel);stroke-width:1.5;vector-effect:non-scaling-stroke}
.at-nums text{font-family:var(--f-mono);font-size:34px;font-weight:500;fill:var(--tinta-papel);text-anchor:middle}
.at-nums .at-on circle{fill:var(--tinta-papel)}
.at-nums .at-on text{fill:var(--papel)}

/* rótulos: botões sobre a prancha, presos ao fim do fio */
.at-rot{position:absolute;left:var(--x);top:var(--y);transform:translate(0,-50%);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;margin:0;border:0;border-radius:999px;background:transparent;
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;color:var(--tinta-papel-suave);cursor:pointer;white-space:nowrap;transition:color .3s, background .3s}
.at-rot[data-lado="e"]{transform:translate(-100%,-50%)}
.at-rot-n{color:var(--salvia-escura);font-weight:500}
.at-rot:hover{color:var(--tinta-papel)}
.at-rot[aria-selected="true"]{background:var(--tinta-papel);color:var(--papel)}
.at-rot[aria-selected="true"] .at-rot-n{color:var(--salvia)}

.at-legenda{margin:14px 0 0;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.05em;color:var(--tinta-papel-fina)}

/* ficha */
.at-fichas{position:relative;padding-top:8px;min-height:var(--at-alt,0px)}
.at-ficha{outline-offset:6px}
.js .at-ficha[hidden]{display:none}
.at-ficha.at-entra{animation:at-entra .7s var(--curva) both}
@keyframes at-entra{from{opacity:0;transform:translateY(12px)}}
.at-ficha-n{margin:0 0 12px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.08em;color:var(--salvia-escura);text-transform:uppercase}
.at-ficha-t{margin:0;font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(2rem,1.4rem + 1.6vw,2.9rem);line-height:.98}
.at-ficha-p{margin:16px 0 0;font-size:1.05rem;line-height:1.62;color:var(--tinta-papel-suave);text-wrap:pretty}
.at-ficha-dica{margin:22px 0 0;font-family:var(--f-mono);font-size:.78rem;color:var(--tinta-papel-fina)}
.at-so-toque{display:none}
@media (hover:none){.at-so-mouse{display:none}.at-so-toque{display:inline}}
.at-cond{margin:18px 0 0}
.at-cond div{padding:12px 0;border-top:1px solid var(--papel-fio)}
.at-cond dt{font-weight:700;font-variation-settings:"wdth" 88;font-size:1.06rem}
.at-cond dd{margin:4px 0 0;font-size:.98rem;line-height:1.58;color:var(--tinta-papel-suave);text-wrap:pretty}
.at-como{margin-top:8px;padding:14px 0 0 16px;border-left:2px solid var(--azul-bordado)}
.at-como-t{margin:0 0 4px;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--salvia-escura)}
.at-como p:last-child{margin:0;font-size:.98rem;line-height:1.58;color:var(--tinta-papel)}
.at-tags{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.at-tags li{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;padding:6px 12px;border:1px solid var(--papel-fio);border-radius:999px;color:var(--tinta-papel-suave)}

/* ---------- cotovelo ---------- */
.at-cotovelo{margin-top:clamp(64px,8vw,120px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--papel-fio);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,88px);align-items:start}
.at-cot-fig{margin:0}
.at-cot-svg{width:100%;height:auto;display:block;overflow:visible}
.at-cot-eixo{stroke:var(--at-fio);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.at-cot-osso{fill:var(--papel);stroke:var(--tinta-papel);stroke-width:1.5;vector-effect:non-scaling-stroke}
.at-cot-pivo circle{fill:var(--papel);stroke:var(--tinta-papel);stroke-width:1.3;vector-effect:non-scaling-stroke}
.at-cot-pivo path{stroke:var(--azul-bordado);stroke-width:1.2;vector-effect:non-scaling-stroke}
.at-cot-veio{fill:none;stroke:var(--tinta-papel);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.32;stroke-dasharray:14 6 3 6}
.at-cot-gonio path{fill:none;stroke:var(--at-fio);stroke-width:1;vector-effect:non-scaling-stroke}
.at-cot-gonio .at-g-curso{stroke-dasharray:2 6}
.at-cot-gonio text{font-family:var(--f-mono);font-size:11px;fill:var(--tinta-papel-fina);letter-spacing:.04em}
.at-cot-gonio .at-g-nome{fill:var(--salvia-escura);font-size:11.5px}
.at-cot-arco{fill:none;stroke:var(--salvia-escura);stroke-width:1.4;vector-effect:non-scaling-stroke}
.at-cot-grau{margin-left:8px;color:var(--tinta-papel);font-variant-numeric:tabular-nums}
.at-cot-t{margin:0;font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(2rem,1.4rem + 1.6vw,2.9rem);line-height:1}
.at-cot-lista{list-style:none;margin:18px 0 0;padding:0}
.at-cot-lista li{padding:16px 0;border-top:1px solid var(--papel-fio)}
.at-cot-lista li{position:relative;transition:background .4s}
.at-cot-lista li::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--tinta-papel);transition:width .7s var(--curva-articula)}
.at-cot-lista li.at-cot-on::before{width:100%}
.at-cot-gesto{margin-left:14px;color:var(--salvia-escura)}
.at-cot-gesto:not(:empty)::before{content:"· "}
.at-cot-lista h4 span{font-family:var(--f-mono);font-weight:500;font-size:.74rem;letter-spacing:.06em;color:var(--salvia-escura);margin-right:12px;font-variation-settings:normal}
.at-cot-lista h4{margin:0;font-weight:700;font-variation-settings:"wdth" 88;font-size:1.12rem}
.at-cot-lista p{margin:6px 0 0;font-size:.98rem;line-height:1.6;color:var(--tinta-papel-suave);max-width:40em;text-wrap:pretty}

/* ---------- pé da seção ---------- */
.at-pe{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px clamp(28px,5vw,88px);align-items:end}
.at-procs-t{margin:0 0 12px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--salvia-escura)}
.at-procs ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,44px)}
.at-procs li{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--papel-fio);font-size:.98rem;color:var(--tinta-papel)}
.at-procs li span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--salvia-escura);min-width:2.2em}
.at-fonte{margin:16px 0 0;font-family:var(--f-mono);font-size:.72rem;color:var(--tinta-papel-fina)}
.at-chamada{padding:28px 0 0}
.at-chamada-n{margin:14px 0 0!important;font-family:var(--f-mono);font-size:.78rem!important;color:var(--tinta-papel-fina)!important;letter-spacing:.04em}
.at-chamada p{margin:0 0 16px;font-size:1.06rem;line-height:1.5;color:var(--tinta-papel)}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  .at-atlas{grid-template-columns:minmax(0,1fr)}
  .at-fichas{max-width:640px}
  .at-prancha{max-width:820px;width:100%;justify-self:center}
}
/* ---------- celular: rótulos descem para uma fileira de abas sob a gravura ---------- */
@media (max-width:760px){
  .at-cabeca{grid-template-columns:minmax(0,1fr)}
  .at-nums{display:inline}
  .at-fios,.at-pontos{display:none}
  .at-palco{aspect-ratio:auto;margin:0}
  .at-svg{aspect-ratio:680/740!important;max-width:460px;margin:0 auto;display:block}
  .at-rotulos{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin:14px calc(var(--margem) * -1) 0!important;padding:0 var(--margem);scroll-padding:0 var(--margem);
    -webkit-mask:linear-gradient(90deg, transparent, #000 var(--margem), #000 calc(100% - 40px), transparent);mask:linear-gradient(90deg, transparent, #000 var(--margem), #000 calc(100% - 40px), transparent)}
  .at-rotulos::-webkit-scrollbar{display:none}
  .at-rot{flex:none}
  .at-procs ol{grid-template-columns:1fr}
  .at-cot-gonio text{font-size:16px}
  .at-cot-gonio .at-g-nome{font-size:16px}
  .at-det,.at-prancha::before,.at-anel-n{display:none}
  .at-svg{position:relative;height:auto;aspect-ratio:1120/860}
  .at-rotulos{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
  .at-rot{position:static;transform:none!important;border:1px solid var(--papel-fio);padding:0 14px}
  .at-cotovelo{grid-template-columns:minmax(0,1fr)}
  .at-cot-fig{max-width:420px}
  .at-pe{grid-template-columns:minmax(0,1fr)}
}