/*
 * tecnologico/estilo.css — visual tecnológico: vidro, luz e grade.
 * Nenhuma cor solta: tudo vem das variáveis que o motor define a partir de identidade.js.
 * Nada de transition ou animation: quem move é o motor, quadro a quadro.
 */
.tec-palco { position: relative; overflow: hidden; background: var(--fundo); color: var(--texto); font-family: Manrope, system-ui, sans-serif; transform-origin: 0 0; contain: layout paint; }
.tec-palco * { box-sizing: border-box; }

/* Fundo: luzes difusas, grade e vinheta */
.tec-fundo { position: absolute; inset: 0; background: var(--fundo); overflow: hidden; }
.tec-luz { position: absolute; left: 0; top: 0; border-radius: 50%; }
.tec-grade { position: absolute; inset: 0; background-image: linear-gradient(var(--grade) 2px, transparent 2px), linear-gradient(90deg, var(--grade) 2px, transparent 2px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 46%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 80% 62% at 50% 46%, #000 30%, transparent 100%); }
.tec-vinheta { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 75% at 50% 46%, transparent 55%, color-mix(in srgb, var(--corpo) 70%, transparent) 100%); }

/* Texto */
.tec-titulo { position: absolute; font-family: Sora, system-ui, sans-serif; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.tec-palavra { display: inline-block; white-space: pre; }
.tec-destaque { position: relative; font-weight: 800; }
.tec-destaque-base { position: relative; }
.tec-destaque-barra { position: absolute; left: -.1em; right: -.1em; top: .1em; bottom: .02em; background: var(--degrade-ambar); border-radius: .14em; transform-origin: 0 50%; box-shadow: 0 0 .45em color-mix(in srgb, var(--ambar) 45%, transparent); }
.tec-destaque-sobre { position: absolute; left: -.1em; right: -.1em; top: 0; bottom: 0; padding-left: .1em; color: var(--fundo); white-space: pre; }
.tec-rotulo { position: absolute; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: var(--ambar); white-space: nowrap; text-shadow: 0 0 18px color-mix(in srgb, var(--ambar) 45%, transparent); }
.tec-etiqueta { position: absolute; font-family: Sora, system-ui, sans-serif; font-weight: 700; line-height: 1.1; padding: .5em .75em; border: 3px dashed color-mix(in srgb, var(--texto) 55%, transparent); border-radius: .45em; background: color-mix(in srgb, var(--fundo) 72%, transparent); white-space: nowrap; }
.tec-etiqueta-canto { position: absolute; right: 0; top: 0; transform: translate(50%, -50%); }

/* Sonar e radar: núcleo de luz, anéis que se abrem e, no radar, a varredura com círculos-guia */
.tec-sonar { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.tec-etiqueta-canto.tec-sonar { left: auto; }
.tec-sonar-anel { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--efeito) 90%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--efeito) 45%, transparent), inset 0 0 10px color-mix(in srgb, var(--efeito) 25%, transparent); }
.tec-sonar-nucleo { position: absolute; left: 50%; top: 50%; width: 18%; height: 18%; min-width: 8px; min-height: 8px; border-radius: 50%; background: radial-gradient(circle, var(--texto) 0%, var(--ambar-claro) 35%, var(--ambar) 70%); box-shadow: 0 0 12px var(--efeito), 0 0 28px color-mix(in srgb, var(--efeito) 60%, transparent); }
.tec-radar { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: repeating-radial-gradient(circle, transparent 0 calc(25% - 1px), color-mix(in srgb, var(--efeito) 22%, transparent) calc(25% - 1px) 25%), linear-gradient(color-mix(in srgb, var(--efeito) 18%, transparent), color-mix(in srgb, var(--efeito) 18%, transparent)) 50% 0 / 1px 100% no-repeat, linear-gradient(color-mix(in srgb, var(--efeito) 18%, transparent), color-mix(in srgb, var(--efeito) 18%, transparent)) 0 50% / 100% 1px no-repeat; }
.tec-radar i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, color-mix(in srgb, var(--efeito) 55%, transparent) 0deg, transparent 75deg, transparent 360deg); }

/* Cartão de vidro */
.tec-cartao { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 22px; padding: 34px 38px; border-radius: 30px; border: 2px solid var(--vidro-borda); background: linear-gradient(165deg, color-mix(in srgb, var(--sup2) 94%, transparent) 0%, color-mix(in srgb, var(--sup) 94%, transparent) 60%, color-mix(in srgb, var(--fundo) 94%, transparent) 100%); transform-origin: 50% 50%; }
.tec-cartao-cab { display: flex; align-items: center; gap: 18px; }
.tec-cartao-rotulo { font-weight: 800; font-size: 22px; letter-spacing: .24em; text-transform: uppercase; color: var(--ambar); }
.tec-cartao h3 { margin: 0; font-family: Sora, system-ui, sans-serif; font-weight: 700; font-size: 46px; line-height: 1.1; letter-spacing: -.01em; }
.tec-cartao p { margin: 0; font-weight: 600; font-size: 30px; line-height: 1.35; color: var(--suave); }
.tec-cartao-corpo { display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; }
.tec-icone { flex: none; width: 66px; height: 66px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--ambar) 12%, transparent); border: 2px solid color-mix(in srgb, var(--ambar) 38%, transparent); }
.tec-icone svg { width: 34px; height: 34px; fill: none; stroke: var(--ambar); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tec-icone img { width: 46px; height: 46px; object-fit: contain; }

/* Conversa */
.tec-conversa { display: flex; flex-direction: column; gap: 14px; }
.tec-bolha { align-self: flex-start; max-width: 88%; padding: 18px 24px 14px; border-radius: 26px 26px 26px 8px; background: var(--sup3); font-weight: 600; font-size: 32px; line-height: 1.3; color: var(--texto); }
.tec-bolha.nos { align-self: flex-end; border-radius: 26px 26px 8px 26px; background: var(--degrade-ambar); color: var(--fundo); }
.tec-bolha small { display: block; margin-top: 4px; font-size: 20px; font-weight: 700; text-align: right; opacity: .65; }
.tec-digitando { align-self: flex-start; display: flex; gap: 8px; padding: 18px 22px; border-radius: 22px; background: var(--sup3); }
.tec-digitando i { width: 12px; height: 12px; border-radius: 50%; background: var(--efeito); }

.tec-aviso { align-self: center; padding: 10px 22px; border-radius: 999px; background: color-mix(in srgb, var(--ambar) 14%, transparent); border: 1.5px solid color-mix(in srgb, var(--ambar) 45%, transparent); color: var(--ambar-claro); font-weight: 700; font-size: 24px; }
.tec-icone img.tec-avatar { width: 100%; height: 100%; border-radius: 16px; object-fit: cover; }

/* Peças de cena */
.tec-pilha { position: absolute; }
.tec-tarefa { position: absolute; left: 0; top: 0; width: 100%; display: flex; align-items: center; gap: 18px; padding: 18px 24px; border-radius: 20px; border: 2px solid var(--vidro-borda); background: linear-gradient(165deg, var(--sup2), var(--sup)); box-shadow: 0 18px 40px color-mix(in srgb, var(--corpo) 60%, transparent); font-weight: 700; font-size: 32px; color: var(--texto); }
.tec-tarefa svg { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--ambar); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tec-ficha { display: grid; grid-template-columns: auto 1fr; gap: 14px 26px; align-items: baseline; }
.tec-ficha-rotulo { font-weight: 800; font-size: 20px; letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
.tec-ficha-valor { font-family: Sora, system-ui, sans-serif; font-weight: 700; font-size: 38px; color: var(--texto); }
.tec-documento { position: absolute; padding: 40px 44px; border-radius: 24px; border: 2px solid color-mix(in srgb, var(--ambar) 30%, var(--vidro-borda)); background: linear-gradient(165deg, var(--sup2), var(--sup) 60%, var(--fundo)); box-shadow: 0 40px 80px color-mix(in srgb, var(--corpo) 60%, transparent), 0 0 50px color-mix(in srgb, var(--ambar) 12%, transparent); display: flex; flex-direction: column; gap: 22px; }
.tec-documento-titulo { font-family: Sora, system-ui, sans-serif; font-weight: 800; font-size: 40px; margin-bottom: 8px; }
.tec-documento-linha { height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--sup3) 80%, transparent); overflow: hidden; }
.tec-documento-linha i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--ambar-claro), var(--ambar)); transform-origin: 0 50%; box-shadow: 0 0 12px color-mix(in srgb, var(--ambar) 50%, transparent); }
.tec-hora { position: absolute; font-family: Sora, system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--texto); text-shadow: 0 0 40px color-mix(in srgb, var(--ambar) 35%, transparent); }
.tec-foto { position: absolute; left: 0; top: 0; border-radius: 50%; overflow: hidden; }
.tec-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tec-divisor { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(transparent, var(--ambar) 20%, var(--ambar) 80%, transparent); box-shadow: 0 0 22px var(--ambar); transform-origin: 50% 50%; }
.tec-legenda { position: absolute; left: 50%; transform: translateX(-50%); z-index: 20; padding: 12px 28px; border-radius: 16px; background: color-mix(in srgb, var(--corpo) 72%, transparent); color: var(--texto); font-weight: 700; font-size: 36px; line-height: 1.3; text-align: center; text-wrap: balance; white-space: normal; width: max-content; }

/* Passos */
.tec-passos { display: flex; flex-direction: column; gap: 16px; }
.tec-passo { display: flex; align-items: center; gap: 18px; font-weight: 700; font-size: 32px; line-height: 1.2; color: var(--suave); }
.tec-passo i { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--sup3); display: grid; place-items: center; }
.tec-passo i svg { width: 26px; height: 26px; fill: none; stroke: var(--fundo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Agenda */
.tec-agenda { display: grid; gap: 10px; align-items: center; font-weight: 700; font-size: 22px; color: var(--suave); }
.tec-agenda-dia { text-align: center; letter-spacing: .08em; text-transform: uppercase; }
.tec-slot { height: 56px; border-radius: 12px; background: color-mix(in srgb, var(--sup3) 55%, transparent); display: grid; place-items: center; }
.tec-slot.ocupado { background: repeating-linear-gradient(135deg, var(--sup3) 0 8px, color-mix(in srgb, var(--sup3) 55%, transparent) 8px 16px); }
.tec-slot svg { width: 30px; height: 30px; fill: none; stroke: var(--fundo); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* Camada: um pedaço do vídeo com relógio próprio, do tamanho do palco */
.tec-camada { position: absolute; inset: 0; transform-origin: 50% 50%; }

/* Texto sempre por cima do mundo 3D */
.tec-titulo, .tec-rotulo, .tec-etiqueta { z-index: 5; }
.tec-palco > .tec-sonar, .tec-palco > .tec-logo { z-index: 6; }

/* Mundo 3D: chão com grade, fios de luz e peças flutuando */
.tec-cena3d { position: absolute; inset: 0; z-index: 1; }
.tec-mundo { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform-origin: 0 0; }
.tec-chao { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--texto) 7%, transparent) 2px, transparent 2px), linear-gradient(90deg, color-mix(in srgb, var(--texto) 7%, transparent) 2px, transparent 2px); background-size: 80px 80px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 25%, transparent 100%); }
.tec-reflexo { position: absolute; left: 0; top: 0; border-radius: 40px; background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--ambar) 55%, transparent) 0%, transparent 70%); }
.tec-fios { position: absolute; left: 0; top: 0; overflow: visible; transform: translateZ(2px); }
.tec-fio-trilho { fill: none; stroke: color-mix(in srgb, var(--efeito) 22%, transparent); stroke-width: calc(var(--fio, 5px) * 0.8); }
.tec-fio { fill: none; stroke: var(--efeito); stroke-width: var(--fio, 5px); stroke-linecap: round; }
.tec-fio-pulso { fill: none; stroke: color-mix(in srgb, var(--efeito) 45%, var(--texto)); stroke-width: calc(var(--fio, 5px) * 1.6); stroke-linecap: round; }
.tec-fio-ponto { fill: var(--texto); r: var(--fio-ponto, 11px); }

/* Ponto de luz (nó) e o anel que se abre na chegada */
.tec-ponto { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle at 36% 34%, var(--ambar-claro) 0%, var(--ambar) 55%, var(--ambar-escuro) 100%); border: 5px solid var(--sup); }
.tec-onda { position: absolute; left: 0; top: 0; border-radius: 50%; border: 4px solid var(--efeito); box-shadow: 0 0 24px color-mix(in srgb, var(--efeito) 60%, transparent); }

/* Painel de texto: rótulo, título e linha de apoio */
.tec-painel { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 22px; }
.tec-painel-rotulo { font-weight: 800; font-size: 24px; letter-spacing: .28em; text-transform: uppercase; color: var(--ambar); white-space: nowrap; text-shadow: 0 0 18px color-mix(in srgb, var(--ambar) 45%, transparent); }
.tec-painel-titulo { font-family: Sora, system-ui, sans-serif; font-weight: 700; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.tec-painel-texto { margin: 0; font-weight: 600; font-size: 34px; line-height: 1.4; color: var(--suave); }

/* Roleta de cartões */
.tec-roleta { position: absolute; width: 0; height: 0; }
.tec-roleta > .tec-cartao { left: 0; top: 0; }

/* Marca */
.tec-logo { position: absolute; left: 0; top: 0; object-fit: contain; }