/* Ilustração do topo de /solucoes/data-lake (origem: site/_plano/solucoes/data-lake). Cena: data-lake.js.
   Cores só dos tokens (tokens.css); o texto do topo vem de solucoes.css. */
.il-data-lake .cena { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.il-data-lake .cena canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.il-data-lake #sinal { z-index: 3; }
.il-data-lake .grao { position: absolute; inset: 0; }
.il-data-lake .no { position: absolute; left: 0; top: 0; }
.il-data-lake .mono { font: 500 12px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.il-data-lake .fonte { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.il-data-lake .fonte .ladrilho { width: 46px; height: 46px; border-radius: 8px; background: var(--superficie-escura); display: flex; align-items: center; justify-content: center; color: var(--aco-claro); transition: color .4s; }
.il-data-lake .fonte .ladrilho svg { width: 22px; height: 22px; }
.il-data-lake .fonte .mono { font-size: 10.5px; color: var(--aco-claro); font-weight: 400; }
.il-data-lake .fonte.ativa .ladrilho { color: var(--texto-claro); }
.il-data-lake .camada { text-align: left; white-space: nowrap; }
.il-data-lake .camada.esq { text-align: right; }
.il-data-lake .camada:not(.esq) span { display: none; }
.il-data-lake .cena.compacta .fonte .mono { display: none; }
.il-data-lake .cena.compacta .fonte .ladrilho { width: 36px; height: 36px; border-radius: 6px; }
.il-data-lake .cena.compacta .fonte .ladrilho svg { width: 18px; height: 18px; }
.il-data-lake .camada b { display: block; font: 500 11.5px/1.2 var(--font-mono); letter-spacing: .08em; color: var(--texto-claro); }
.il-data-lake .camada span { display: block; font: 400 11px/1.3 var(--font-mono); color: var(--aco-claro); margin-top: 3px; }
.il-data-lake .saida { display: flex; align-items: center; gap: 12px; width: 222px; padding: 13px 14px; border-radius: 8px; background: var(--superficie-escura); }
.il-data-lake .saida .ic { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--aco-claro); }
.il-data-lake .saida .ic svg { width: 20px; height: 20px; }
.il-data-lake .saida .cel { width: 12px; height: 12px; border-radius: 2px; background: var(--fio-escuro); position: relative; margin: 0 4px; }
.il-data-lake .saida .cel i { position: absolute; inset: 0; border-radius: 2px; background: var(--vermelho-sinal); opacity: 0; }
.il-data-lake .saida b { display: block; font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--aco-claro); }
.il-data-lake .saida span { display: block; font-size: 13.5px; line-height: 1.3; color: var(--texto-claro); margin-top: 4px; }
.il-data-lake .saida .barras { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: 6px; }
.il-data-lake .saida .barras i { width: 7px; border-radius: 1px; background: var(--aco-claro); opacity: .55; }
.il-data-lake .ilustrativo { font: 400 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--aco-claro); }
/* tablet e celular: texto em cima, lago embaixo; só o alerta entre as saídas (mesmo corte do script, 1024 px) */
@media (max-width: 1023px) {
  .il-data-lake .texto { width: auto; padding-bottom: 340px; }
  .il-data-lake .camada span { display: none; }
  .il-data-lake .saida { width: 148px; padding: 10px 12px; gap: 10px; }
  .il-data-lake .saida span { font-size: 12.5px; }
  .il-data-lake .saida.extra { display: none; }
}
@media (max-width: 760px) {
  .il-data-lake .fonte .ladrilho { width: 34px; height: 34px; border-radius: 6px; }
  .il-data-lake .fonte .ladrilho svg { width: 18px; height: 18px; }
  .il-data-lake .fonte .mono { display: none; }
  .il-data-lake .camada b { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .il-data-lake .fonte .ladrilho { transition: none; } }