/* 12 · Dados e LGPD — "Privacidade desde o desenho"
   Pin (desktop): a câmera entra no telão do Live Data Center; pontos individuais rastreados
   passam por uma varredura de anonimização, entram no escudo e saem como sinal agregado
   nos seis indicadores. Empilhado (tablet/celular): o escudo agrega os pontos em seis clusters. */
#dados { background: var(--space); }
#dados .dd-pin { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }

/* ---------- Fundo ---------- */
#dados .dd-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#dados .dd-bg__media { opacity: 0.5; }
#dados .dd-bg__media img { object-position: 52% 42%; transform-origin: 52% 40%; }
#dados .dd-bg__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 72% 52%, rgba(2, 8, 22, 0.35) 0%, rgba(2, 8, 22, 0) 70%),
    linear-gradient(90deg, rgba(2, 8, 22, 0.96) 0%, rgba(2, 8, 22, 0.84) 34%, rgba(2, 8, 22, 0.62) 62%, rgba(2, 8, 22, 0.72) 100%),
    linear-gradient(0deg, rgba(2, 8, 22, 0.95) 0%, rgba(2, 8, 22, 0) 36%),
    linear-gradient(180deg, rgba(2, 8, 22, 0.85) 0%, rgba(2, 8, 22, 0) 26%);
}
#dados .dd-bg__grid { opacity: 0.4; }
#dados .dd-bg .concept-tag { right: auto; left: var(--gutter); bottom: 14px; }

/* ---------- Layout ---------- */
#dados .dd-layout {
  z-index: 2; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(28px, 3.6vw, 72px); align-items: center;
  padding-top: calc(var(--hud-h) + 10px); padding-bottom: 34px;
}
#dados .dd-copy { position: relative; z-index: 3; }
#dados .dd-title { font-size: clamp(30px, min(3.3vw, 6vh), 58px); margin-bottom: clamp(20px, 3.6vh, 38px); max-width: 15ch; }
/* SplitText quebra o background-clip do span: o degradê vai para cada palavra */
#dados .dd-title .grad-text .split-word { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.04em; }

/* ---------- Cofre: "Dados que geram decisão" ---------- */
#dados .dd-vault { padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 30px) clamp(8px, 1vw, 14px); border-radius: var(--radius-m); max-width: 560px; }
#dados .dd-vault__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
#dados .dd-vault__icon { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--teal-hi); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(79, 240, 220, 0.55)); }
#dados .dd-vault__title { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 850; font-stretch: 118%; text-transform: uppercase; font-size: clamp(17px, 1.45vw, 23px); line-height: 1.05; letter-spacing: 0; }
#dados .dd-vault__status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 5px 9px 4px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
#dados .dd-vault__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--alert); box-shadow: 0 0 8px var(--alert); transition: background 0.4s, box-shadow 0.4s; }
#dados .dd-vault__status b { font-weight: 500; }
#dados .dd-vault.is-open .dd-vault__status { border-color: var(--line-teal); color: var(--teal-hi); }
#dados .dd-vault.is-open .dd-vault__status i { background: var(--teal); box-shadow: 0 0 8px var(--teal); }

#dados .dd-rules { list-style: none; margin: 0; padding: 0; }
#dados .dd-rule { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--line); }
#dados .dd-rule:last-child { border-bottom: 0; }
#dados .dd-rule::before { content: ''; position: absolute; left: -18px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--grad-brand-v); box-shadow: 0 0 12px var(--teal); opacity: 0; transform: scaleY(0.3); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
#dados .dd-rule.is-active::before { opacity: 1; transform: scaleY(1); }
#dados .dd-rule__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(5, 20, 46, 0.65); transition: border-color 0.5s, box-shadow 0.5s; }
#dados .dd-rule__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.5s; }
#dados .dd-rule.is-active .dd-rule__icon { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(18, 197, 181, 0.12), 0 0 22px rgba(18, 197, 181, 0.35); }
#dados .dd-rule.is-active .dd-rule__icon svg { stroke: var(--teal-hi); }
#dados .dd-rule p { margin: 0; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.45; color: var(--ink); }
#dados .dd-rule__tag { display: block; margin-bottom: 5px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); }
#dados .dd-rule--agg .dd-rule__tag { color: var(--cyan-hi); }
#dados .dd-scr { display: block; }

/* ---------- Palco ---------- */
#dados .dd-stage { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
#dados .dd-field { position: absolute; inset: 0; z-index: 0; }
#dados .dd-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

#dados .dd-shield { position: absolute; left: 0; top: 52%; width: 36%; transform: translateY(-50%); display: grid; justify-items: center; gap: 14px; z-index: 1; }
#dados .dd-shield__svg { width: min(100%, 250px); height: auto; overflow: visible; }
#dados .dd-shield__svg * { vector-effect: non-scaling-stroke; }
#dados .dd-sh-ring { fill: none; stroke: var(--line-teal); stroke-width: 1; transform-box: fill-box; transform-origin: 50% 50%; }
#dados .dd-sh-ring--a { stroke-dasharray: 2 7; animation: dd-spin 38s linear infinite; }
#dados .dd-sh-ring--b { stroke: rgba(111, 211, 255, 0.35); stroke-dasharray: 70 22 6 22; animation: dd-spin 24s linear infinite reverse; }
#dados .dd-sh-ticks { fill: none; stroke: var(--teal); stroke-width: 1.2; opacity: 0.7; }
#dados .dd-sh-body { fill: rgba(5, 20, 46, 0.55); stroke: var(--teal-hi); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(79, 240, 220, 0.6)); }
#dados .dd-sh-inner { fill: none; stroke: rgba(111, 211, 255, 0.45); stroke-width: 1; stroke-dasharray: 3 5; }
#dados .dd-sh-shackle { fill: none; stroke: var(--ice); stroke-width: 2.4; stroke-linecap: round; }
#dados .dd-sh-case { fill: rgba(18, 197, 181, 0.16); stroke: var(--ice); stroke-width: 2; }
#dados .dd-sh-key { fill: none; stroke: var(--teal-hi); stroke-width: 2; stroke-linecap: round; }
#dados .dd-shield__label { max-width: 100%; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); text-align: center; text-wrap: balance; }
@keyframes dd-spin { to { transform: rotate(360deg); } }

/* Fases (HUD) */
#dados .dd-phases { position: absolute; top: clamp(8px, 2vh, 22px); left: 0; right: 0; z-index: 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 6px 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
#dados .dd-phases li { display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: color 0.4s; }
#dados .dd-phases li b { font-weight: 500; color: var(--ink-4); transition: color 0.4s; }
#dados .dd-phases li.is-active { color: var(--ink); }
#dados .dd-phases li.is-active b { color: var(--teal-hi); }
#dados .dd-phases li.is-done b { color: var(--teal); }
#dados .dd-phases__bar { grid-column: 1 / -1; height: 1px; background: var(--line-2); position: relative; }
#dados .dd-phases__bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--grad-brand); box-shadow: 0 0 10px var(--teal); }

/* Monitor dos indicadores */
#dados .dd-monitor { position: relative; z-index: 2; margin-left: 40%; }
#dados .dd-monitor__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
#dados .dd-monitor__title { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: clamp(13px, 1.1vw, 16px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }
#dados .dd-monitor__live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
#dados .dd-monitor__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); animation: dd-blink 1.6s steps(2, jump-none) infinite; }
@keyframes dd-blink { 50% { opacity: 0.25; } }
#dados .dd-list { list-style: none; margin: 0; padding: 0; counter-reset: dd; }
#dados .dd-ind { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; column-gap: 12px; row-gap: 9px; align-items: center; padding: clamp(10px, 1.55vh, 15px) 0; border-bottom: 1px solid var(--line); }
#dados .dd-ind__n { font-family: var(--font-display); font-style: italic; font-weight: 850; font-stretch: 118%; font-size: 17px; color: var(--teal); line-height: 1; }
#dados .dd-ind:nth-child(even) .dd-ind__n { color: var(--cyan-hi); }
#dados .dd-ind__t { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.32; color: var(--ink); }
#dados .dd-ind__lock { width: 16px; height: 16px; fill: none; stroke: var(--ink-4); stroke-width: 1.4; stroke-linecap: round; transition: stroke 0.5s; }
#dados .dd-gauge { position: relative; grid-column: 2 / 4; height: 10px; border-radius: 6px; overflow: hidden; background: rgba(126, 170, 232, 0.06); box-shadow: inset 0 0 0 1px rgba(126, 170, 232, 0.12); }
#dados .dd-gauge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 197, 181, 0.05), rgba(18, 197, 181, 0.22) 50%, rgba(29, 159, 208, 0.08)); transform-origin: 0 50%; transform: scaleX(1); }
#dados .dd-gauge i { position: absolute; top: 3px; height: 4px; width: 18%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--teal-hi), transparent); opacity: 0.85; animation: dd-flow 3.2s linear infinite; }
#dados .dd-gauge i:nth-child(2) { width: 10%; animation-duration: 4.4s; animation-delay: -1.6s; background: linear-gradient(90deg, transparent, var(--cyan-hi), transparent); }
#dados .dd-gauge i:nth-child(3) { width: 26%; animation-duration: 5.6s; animation-delay: -3.1s; opacity: 0.5; }
#dados .dd-ind:nth-child(even) .dd-gauge::before { background: linear-gradient(90deg, rgba(29, 159, 208, 0.05), rgba(29, 159, 208, 0.24) 50%, rgba(18, 197, 181, 0.08)); }
@keyframes dd-flow { from { transform: translateX(-120%); } to { transform: translateX(560%); } }
#dados .dd-ind.is-on .dd-ind__lock { stroke: var(--teal-hi); }

/* Estado armado (JS): linhas esperam o sinal agregado */
#dados.dd-armed .dd-ind { transition: opacity 0.6s var(--ease-out); }
#dados.dd-armed .dd-ind__t, #dados.dd-armed .dd-ind__n { transition: transform 0.7s var(--ease-out), opacity 0.6s var(--ease-out); }
#dados.dd-armed .dd-gauge::before { transition: transform 0.9s var(--ease-out); }
#dados.dd-armed .dd-ind:not(.is-on) { opacity: 0; }
#dados.dd-armed .dd-ind:not(.is-on) .dd-ind__t { transform: translateX(-14px); }
#dados.dd-armed .dd-ind:not(.is-on) .dd-gauge::before { transform: scaleX(0); }
#dados.dd-armed .dd-ind:not(.is-on) .dd-gauge i { animation-play-state: paused; opacity: 0; }
/* No modo lado a lado o próprio canvas desenha o fluxo agregado nas faixas */
#dados.dd-side .dd-gauge i { display: none; }
#dados.dd-armed .dd-monitor__head { transition: opacity 0.6s; }
#dados.dd-armed:not(.dd-emit) .dd-monitor__head { opacity: 0; }
/* Lado a lado: quando o escudo fecha, os seis indicadores aparecem como faixas à espera do sinal
   (o quadro "protegido" do passador nunca fica com a coluna direita vazia) */
#dados.dd-side.dd-safe .dd-monitor__head { opacity: 1; }
#dados.dd-side.dd-safe .dd-ind:not(.is-on) { opacity: 0.34; }
#dados.dd-side.dd-safe .dd-ind:not(.is-on) .dd-ind__t { transform: none; }
#dados.dd-side.dd-safe .dd-ind:not(.is-on) .dd-gauge::before { transform: scaleX(0.04); }

/* ---------- Empilhado: tablet, celular e telas baixas ---------- */
@media (max-width: 999px), (max-height: 559px) {
  #dados .dd-pin { min-height: 0; }
  #dados .dd-layout { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: clamp(84px, 12vh, 120px); padding-bottom: clamp(64px, 10vh, 110px); }
  #dados .dd-title { max-width: 18ch; }
  #dados .dd-vault { max-width: 640px; }
  #dados .dd-stage { display: flex; flex-direction: column; }
  #dados .dd-phases { order: -1; position: relative; top: auto; margin-bottom: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; font-size: 10px; letter-spacing: 0.1em; }
  #dados .dd-phases li { white-space: normal; line-height: 1.3; align-items: flex-start; }
  #dados .dd-field { position: relative; inset: auto; height: clamp(320px, 88vw, 460px); margin-inline: calc(var(--gutter) * -1); }
  #dados .dd-shield { left: 50%; top: 50%; width: clamp(120px, 34vw, 170px); transform: translate(-50%, -50%); gap: 8px; }
  #dados .dd-shield__label { display: none; }
  #dados .dd-monitor { margin-left: 0; margin-top: 18px; }
  #dados .dd-bg__media { opacity: 0.3; }
  #dados .dd-bg__shade { background: linear-gradient(180deg, rgba(2, 8, 22, 0.7) 0%, rgba(2, 8, 22, 0.9) 30%, rgba(2, 8, 22, 0.96) 100%); }
  #dados .dd-bg .concept-tag { top: calc(var(--hud-h) + 8px); bottom: auto; left: auto; right: var(--gutter); }
}
@media (max-width: 820px) {
  #dados .dd-rule { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
  #dados .dd-rule__icon { width: 36px; height: 36px; }
  #dados .dd-rule::before { left: -12px; }
  #dados .dd-vault__head { flex-wrap: wrap; }
  #dados .dd-ind { grid-template-columns: 30px minmax(0, 1fr) 16px; }
  #dados .dd-ind__t { font-size: 15px; }
  #dados .dd-monitor__head { flex-wrap: wrap; row-gap: 8px; }
}
@media (max-width: 420px) {
  #dados .dd-vault__status { margin-left: 0; }
}

/* ---------- Movimento reduzido e sem JS ---------- */
.reduced #dados .dd-sh-ring { animation: none; }
.reduced #dados .dd-gauge i, .reduced #dados .dd-monitor__live i { animation: none; }
.reduced #dados .dd-gauge i:nth-child(1) { transform: translateX(80%); }
.reduced #dados .dd-gauge i:nth-child(2) { transform: translateX(420%); }
.reduced #dados .dd-gauge i:nth-child(3) { transform: translateX(160%); }
.no-js #dados .dd-canvas { display: none; }