/* Tecela AI · seção de dados: "corte da base".
   Vista explodida de uma plataforma de dados, em placas isométricas. Profundidade em vez de fluxo:
   o hero mostra o dado viajando; aqui aparece o que sustenta o dado. Monta uma vez ao entrar na tela. */
.data-feature {border-top:1px solid var(--border);background:radial-gradient(ellipse 60% 40% at 30% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%),var(--bg-2)}
.data-anatomy {
  --pl-top:#12233B; --pl-edge:#3B6190; --pl-l:#0B1728; --pl-r:#0E1D33; --pl-ink:#629BFF; --pl-ink-2:#ED9C55; --pl-soft:#27456B; --pl-glow:#629BFF55;
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;align-items:start;margin:8px 0 34px
}
:root[data-theme="light"] .data-anatomy,.fold-light .data-anatomy {--pl-top:#FFFFFF;--pl-edge:#B6C7DD;--pl-l:#D9E3F0;--pl-r:#E7EDF6;--pl-ink:#2459DB;--pl-ink-2:#A24E10;--pl-soft:#D3DFF2;--pl-glow:#2459DB33}
.anatomy-figure {margin:0;padding:22px 26px 12px;border:1px solid var(--border);border-radius:14px;background:radial-gradient(ellipse 80% 50% at 20% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%),var(--bg)}
.anatomy-caption {display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-bottom:10px;font:9px/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.anatomy-legend {display:inline-flex;align-items:center;gap:7px;text-transform:none;letter-spacing:.02em;font-size:10px}
.anatomy-legend i,.stack-tag::before {display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pl-ink)}
.anatomy-legend i[data-kind="model"],.stack-tag[data-kind="model"]::before {background:var(--pl-ink-2)}
.anatomy-legend i+* ,.anatomy-legend i:not(:first-child) {margin-left:10px}

.anatomy-stack {--pw:184px;position:relative;list-style:none;margin:0;padding:0}
/* Guias tracejadas de montagem: ligam os cantos das placas e fazem as seis lerem como um só objeto explodido. */
.anatomy-stack::before {content:"";position:absolute;left:0;width:var(--pw);top:calc(var(--pw) * .244);bottom:calc(var(--pw) * .32);pointer-events:none;opacity:.55;
  background:linear-gradient(var(--pl-edge) 55%,transparent 0) calc(var(--pw) * .0625) 0/1px 7px repeat-y,
             linear-gradient(var(--pl-edge) 55%,transparent 0) calc(var(--pw) * .5) calc(var(--pw) * .22)/1px 7px repeat-y,
             linear-gradient(var(--pl-edge) 55%,transparent 0) calc(var(--pw) * .9375 - 1px) 0/1px 7px repeat-y}
.stack-layer {position:relative;display:grid;grid-template-columns:var(--pw) 40px minmax(0,1fr);align-items:start;min-height:122px;margin:0}
.stack-layer+.stack-layer {margin-top:0}
.stack-plate {position:relative;z-index:1;display:block;width:var(--pw);height:calc(var(--pw) * .6);overflow:visible;transition:transform .5s cubic-bezier(.16,.9,.24,1),opacity .5s ease,filter .4s}
.p-top {fill:var(--pl-top);stroke:var(--pl-edge);stroke-width:1;transition:fill .35s,stroke .35s}
.p-side {stroke:var(--pl-edge);stroke-width:.8}.p-l {fill:var(--pl-l)}.p-r {fill:var(--pl-r)}
.p-tex * {vector-effect:non-scaling-stroke}
.t-line {fill:none;stroke:var(--pl-ink);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.t-soft,.t-cell {fill:var(--pl-soft)}.t-cell {stroke:var(--pl-ink);stroke-width:.8;fill-opacity:.35}
.t-hot {fill:var(--pl-ink)}
.t-node {fill:var(--pl-top);stroke:var(--pl-ink-2);stroke-width:1.3}.t-hub {fill:var(--pl-ink-2)}
.t-dot {fill:var(--pl-soft)}.t-dot.t-hot {fill:var(--pl-ink-2)}
.t-zone {fill:var(--pl-soft);fill-opacity:.45;stroke:var(--pl-ink);stroke-width:.8;stroke-dasharray:3 2}.t-zone-hot {fill:var(--pl-ink);fill-opacity:.18;stroke-dasharray:none}
.t-flow {fill:none;stroke:var(--pl-ink);stroke-width:1.1;stroke-dasharray:4 4;opacity:.8}
.stack-lead {position:relative;top:calc(var(--pw) * .244);height:1px;margin:0 6px 0 -10px;background:linear-gradient(90deg,var(--pl-edge),color-mix(in srgb,var(--pl-edge) 30%,transparent));transform-origin:left;transition:transform .5s ease,opacity .4s}
.stack-lead::after {content:"";position:absolute;right:-3px;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--pl-edge)}
.stack-text {padding-top:calc(var(--pw) * .244 - 10px);padding-bottom:10px;transition:opacity .5s ease,transform .5s cubic-bezier(.16,.9,.24,1)}
.stack-kicker {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 5px;font-size:12px;font-weight:650;color:var(--fg)}
.stack-kicker>span {font:10px var(--font-mono);color:var(--muted)}
.stack-tag {display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border:1px solid var(--border);border-radius:99px;font:500 9px/1.5 var(--font-mono);font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2)}
.stack-text strong {display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.stack-text p:not(.stack-kicker) {margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--fg-2);max-width:48ch}

/* Destaque: passar o mouse numa camada (ou num cartão ao lado) levanta as placas correspondentes. */
.stack-layer:hover .stack-plate,
.data-anatomy:has(article[data-zones~="00"]:hover) [data-layer="00"] .stack-plate,
.data-anatomy:has(article[data-zones~="01"]:hover) [data-layer="01"] .stack-plate,
.data-anatomy:has(article[data-zones~="02"]:hover) [data-layer="02"] .stack-plate,
.data-anatomy:has(article[data-zones~="03"]:hover) [data-layer="03"] .stack-plate,
.data-anatomy:has(article[data-zones~="04"]:hover) [data-layer="04"] .stack-plate,
.data-anatomy:has(article[data-zones~="05"]:hover) [data-layer="05"] .stack-plate {transform:translate(8px,-6px);filter:drop-shadow(0 10px 18px var(--pl-glow))}
.stack-layer:hover .p-top,
.data-anatomy:has(article[data-zones~="00"]:hover) [data-layer="00"] .p-top,
.data-anatomy:has(article[data-zones~="01"]:hover) [data-layer="01"] .p-top,
.data-anatomy:has(article[data-zones~="02"]:hover) [data-layer="02"] .p-top,
.data-anatomy:has(article[data-zones~="03"]:hover) [data-layer="03"] .p-top,
.data-anatomy:has(article[data-zones~="04"]:hover) [data-layer="04"] .p-top,
.data-anatomy:has(article[data-zones~="05"]:hover) [data-layer="05"] .p-top {stroke:var(--pl-ink)}

/* Cartões ao lado da pilha */
.data-anatomy .data-detail-grid {position:sticky;top:112px;display:grid;grid-template-columns:1fr;gap:16px;margin:0}
.data-anatomy .data-detail-grid article {padding:22px 24px;border:1px solid var(--border);border-radius:12px;background:var(--bg);transition:border-color .3s,transform .3s}
.data-anatomy .data-detail-grid article:hover {border-color:color-mix(in srgb,var(--accent) 55%,var(--border));transform:translateX(-4px)}
.zone-tag {display:block;margin-bottom:12px;font:9px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.data-anatomy .data-detail-grid h3 {font-size:20px;margin-bottom:8px}
.data-anatomy .data-detail-grid p {margin:0}

/* Montagem ao entrar na tela: a base chega primeiro, o topo por último. Sem script, já nasce montada. */
.data-anatomy.is-pre .stack-plate {opacity:0;transform:translateY(-34px)}
.data-anatomy.is-pre .stack-lead {transform:scaleX(0);opacity:0}
.data-anatomy.is-pre .stack-text {opacity:0;transform:translateX(10px)}
.data-anatomy .stack-plate,.data-anatomy .stack-lead,.data-anatomy .stack-text {transition-delay:calc((5 - var(--i)) * 110ms)}
.data-anatomy .stack-lead {transition-delay:calc((5 - var(--i)) * 110ms + 260ms)}
.data-anatomy .stack-text {transition-delay:calc((5 - var(--i)) * 110ms + 320ms)}
.data-anatomy.is-in .stack-plate,.data-anatomy.is-in .stack-lead,.data-anatomy.is-in .stack-text {transition-delay:0s}

/* Se o script não carregar, a pilha aparece montada depois de um instante. */
.data-anatomy.is-pre:not(.ds-live) .stack-plate,.data-anatomy.is-pre:not(.ds-live) .stack-lead,.data-anatomy.is-pre:not(.ds-live) .stack-text {animation:stack-failsafe .01s 2.4s forwards}
@keyframes stack-failsafe {to {opacity:1;transform:none}}

/* Vida discreta enquanto a seção está visível: dados entrando na base, agentes ativos. */
.t-flow {animation:stack-flow 1.6s linear infinite;animation-play-state:paused}
.t-hub {animation:stack-hub 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center;animation-play-state:paused}
.data-anatomy.is-live .t-flow,.data-anatomy.is-live .t-hub {animation-play-state:running}
@keyframes stack-flow {to {stroke-dashoffset:-16}}
@keyframes stack-hub {0%,100% {transform:scale(1)} 50% {transform:scale(1.35)}}

@media(max-width:1100px) {
  .data-anatomy {grid-template-columns:1fr;gap:28px}
  .data-anatomy .data-detail-grid {position:static;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px) {
  .anatomy-figure {padding:18px 14px 8px}
  .anatomy-stack {--pw:96px}
  .stack-layer {grid-template-columns:var(--pw) minmax(0,1fr);min-height:0;padding-bottom:16px}
  .stack-lead {display:none}
  .stack-text {padding-top:2px;padding-left:14px}
  .stack-text strong {font-size:15px}
  .stack-text p:not(.stack-kicker) {display:none}
  .data-anatomy .data-detail-grid {grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce) {
  .data-anatomy *,.data-anatomy *::before,.data-anatomy *::after {transition:none!important;animation:none!important}
}