/* ============================================================================
   DNA da Advocacia Empreendedora — componentes
   O que as peças (LP, deck, cartaz, LED, crachá em HTML) importam.
   Todo valor vem de tokens.css. Cada componente cita a seção do site de onde saiu.
   ========================================================================== */

/* --- texto ---------------------------------------------------------------- */

.dna-titulo {
  margin: 0;
  font-family: var(--dna-f-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--dna-lh-display);
  letter-spacing: var(--dna-ls-display);
  color: var(--dna-offwhite);
  text-wrap: balance;
}
.dna-titulo--mega  { font-size: var(--dna-t-mega); line-height: .86; }
.dna-titulo--hero  { font-size: var(--dna-t-hero); color: var(--dna-branco); }
.dna-titulo--secao { font-size: var(--dna-t-secao); }
.dna-titulo--sub   { font-size: var(--dna-t-sub); }

/* destaque vermelho: o gradiente que escurece para a direita (site: "3 ALAVANCAS", "PERGUNTAS FREQUENTES") */
.dna-destaque {
  background: var(--dna-grad-texto);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.dna-destaque--chapado { background: none; color: var(--dna-vermelho); }

.dna-lead  { margin: 0; font: 400 var(--dna-t-lead)/1.45 var(--dna-f-texto); color: var(--dna-cinza-2); max-width: var(--dna-medida); text-wrap: pretty; }
.dna-lead b, .dna-lead strong { color: var(--dna-offwhite); font-weight: 400; } /* site: o trecho que importa sobe para off-white, sem negrito */
.dna-corpo { margin: 0; font: 400 var(--dna-t-corpo)/var(--dna-lh-texto) var(--dna-f-texto); color: var(--dna-offwhite); max-width: var(--dna-medida); }
.dna-apoio { margin: 0; font: 400 var(--dna-t-apoio)/var(--dna-lh-apoio) var(--dna-f-texto); color: var(--dna-cinza-2); max-width: var(--dna-medida); }

/* rótulo mono em caixa alta: data, local, "ALAVANCA 2", "SUPORTE" */
.dna-rotulo {
  font: 400 var(--dna-t-rotulo)/1.5 var(--dna-f-mono);
  letter-spacing: var(--dna-ls-rotulo); text-transform: uppercase;
  color: var(--dna-cinza-2);
}
.dna-rotulo--vermelho { color: var(--dna-vermelho); }
.dna-micro { font: 400 var(--dna-t-micro)/1.5 var(--dna-f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dna-cinza-3); }

/* --- botão (site: "GARANTIR MINHA VAGA NO LOTE 0") ------------------------- */

.dna-btn {
  --seta: 22px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--dna-e-4);
  padding: var(--dna-e-4) var(--dna-e-6) var(--dna-e-4) 28px;
  border: 0; border-radius: var(--dna-raio-0);
  background: var(--dna-grad-vermelho);
  color: var(--dna-branco);
  font: 600 var(--dna-t-botao)/1.25 var(--dna-f-texto);
  letter-spacing: var(--dna-ls-botao); text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--dna-d-3) var(--dna-ease), box-shadow var(--dna-d-3) var(--dna-ease);
}
/* brilho que atravessa (site: ghostShine) */
.dna-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%);
}
.dna-btn__seta {
  width: var(--seta); height: var(--seta); flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.22);
  transition: transform var(--dna-d-3) var(--dna-ease), background var(--dna-d-2) var(--dna-ease);
}
.dna-btn__seta svg { width: 12px; height: 12px; }
.dna-btn:hover { transform: translateY(-2px); box-shadow: var(--dna-brilho-3); }
.dna-btn:hover::after { animation: dna-brilho .9s var(--dna-ease) 1; }
.dna-btn:hover .dna-btn__seta { transform: translateX(3px) rotate(-45deg); background: rgba(255,255,255,.34); }
.dna-btn:active { transform: translateY(0); }
.dna-btn:focus-visible { outline: 2px solid var(--dna-offwhite); outline-offset: 3px; }

.dna-btn--pulsa::after { animation: dna-brilho var(--dna-d-brilho) var(--dna-ease) infinite; }
.dna-btn--topo { padding: 10px 20px; border-radius: var(--dna-raio-1); font-size: var(--dna-t-rotulo); font-weight: 700; letter-spacing: .08em; background: var(--dna-logo-vermelho); } /* #C70003, não #FF0004: branco pequeno em #FF0004 dá só 4,0:1 */
.dna-btn--contorno { background: transparent; box-shadow: inset 0 0 0 1px var(--dna-filete); }
.dna-btn--contorno:hover { box-shadow: inset 0 0 0 1px var(--dna-vermelho), var(--dna-brilho-1); }
.dna-btn--grande { padding: 20px 36px 20px 32px; font-size: 17px; }

/* --- selo pílula com ponto vivo (site: "LOTE 0 — GARANTA O MELHOR PREÇO") ---- */

.dna-selo {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; border-radius: var(--dna-raio-pilula);
  border: 1px solid var(--dna-filete-vermelho);
  background: rgba(14,14,15,.6);
  font: 400 var(--dna-t-micro)/1 var(--dna-f-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--dna-offwhite);
}
.dna-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--dna-vermelho); box-shadow: 0 0 0 3px rgba(232,53,53,.18); animation: dna-piscar var(--dna-d-piscar) ease-in-out infinite; }
.dna-ponto--verde { background: var(--dna-verde-vivo); box-shadow: 0 0 0 3px rgba(138,255,120,.2); }

/* --- etiqueta (site: "ALAVANCA 2", "CATEGORIA CÚPULA") ---------------------- */

.dna-etiqueta {
  display: inline-block; padding: 5px 10px; border-radius: var(--dna-raio-1);
  border: 1px solid var(--dna-filete-vermelho); background: var(--dna-veu-vermelho);
  font: 400 var(--dna-t-micro)/1 var(--dna-f-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--dna-vermelho);
}
/* sigla (site: SP RJ MG… no mapa) */
.dna-sigla {
  display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px;
  border: 1px solid var(--dna-filete); border-radius: var(--dna-raio-1);
  font: 400 var(--dna-t-micro)/1 var(--dna-f-mono); letter-spacing: .08em; color: var(--dna-cinza-1);
  transition: border-color var(--dna-d-2) var(--dna-ease), color var(--dna-d-2) var(--dna-ease);
}
.dna-sigla:hover { border-color: var(--dna-vermelho); color: var(--dna-offwhite); }

/* --- faixa corrida (site: dna-ticker-scroll 28s) --------------------------- */

.dna-faixa {
  overflow: hidden; white-space: nowrap;
  border-block: 1px solid var(--dna-filete-suave);
  background: var(--dna-preto-1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.dna-faixa__trilho { display: inline-flex; gap: var(--dna-e-6); padding-block: 13px; animation: dna-faixa var(--dna-d-ticker) linear infinite; }
.dna-faixa__item { display: inline-flex; align-items: center; gap: var(--dna-e-6); font: 400 var(--dna-t-rotulo)/1 var(--dna-f-mono); letter-spacing: var(--dna-ls-rotulo); text-transform: uppercase; color: var(--dna-cinza-2); }
.dna-faixa__item::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--dna-vermelho); }
.dna-faixa:hover .dna-faixa__trilho { animation-play-state: paused; }
.dna-faixa--rapida .dna-faixa__trilho { animation-duration: var(--dna-d-ticker-rapido); }

/* --- cartão (site: cartões de ingresso, mapa) ----------------------------- */

.dna-cartao {
  position: relative;
  padding: var(--dna-e-6);
  border: 1px solid var(--dna-filete-suave); border-radius: var(--dna-raio-3);
  background: var(--dna-grad-cartao);
  transition: transform var(--dna-d-3) var(--dna-ease), border-color var(--dna-d-2) var(--dna-ease), box-shadow var(--dna-d-3) var(--dna-ease);
}
.dna-cartao:hover { transform: translateY(-4px); border-color: var(--dna-filete-vermelho); box-shadow: var(--dna-brilho-cartao); }
.dna-cartao--destaque { border-color: var(--dna-filete-vermelho); box-shadow: var(--dna-brilho-cartao); }
/* selo no topo do cartão (site: "MAIS ESCOLHIDO") */
.dna-cartao__selo { position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); padding: 5px 12px; border-radius: var(--dna-raio-pilula); background: var(--dna-vermelho-4); border: 1px solid var(--dna-filete-vermelho); font: 400 var(--dna-t-micro)/1 var(--dna-f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dna-vermelho); white-space: nowrap; }
/* fita diagonal (site: "EXCLUSIVA PARA MEMBROS" no Cúpula) */
.dna-cartao { overflow: clip; overflow-clip-margin: 14px; }
.dna-cartao:has(> .dna-fita) { overflow: hidden; } /* a fita fica dentro do card */
.dna-fita { position: absolute; top: 42px; right: -68px; width: 260px; transform: rotate(45deg); padding: 6px 0; text-align: center; background: var(--dna-grad-vermelho); font: 400 9px/1 var(--dna-f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dna-branco); }

/* --- data (site: QUINTA 12 NOV · 2026) ------------------------------------ */

.dna-data { display: grid; justify-items: center; gap: 6px; padding: var(--dna-e-5) var(--dna-e-6); border: 1px solid var(--dna-filete-suave); border-radius: var(--dna-raio-1); background: var(--dna-preto-2); transition: border-color var(--dna-d-2) var(--dna-ease), transform var(--dna-d-3) var(--dna-ease); }
.dna-data:hover { border-color: var(--dna-filete-vermelho); transform: translateY(-3px); }
.dna-data__dia { font: 600 var(--dna-t-numero)/1 var(--dna-f-texto); background: var(--dna-grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- linha do tempo (site: as 3 alavancas) -------------------------------- */

.dna-tempo { position: relative; display: grid; gap: var(--dna-e-8); padding-left: 72px; }
.dna-tempo::before { content: ""; position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--dna-vermelho) 12%, var(--dna-vermelho-3) 88%, transparent); }
.dna-tempo__passo { position: relative; }
.dna-tempo__n { position: absolute; left: -72px; top: 0; width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--dna-filete-vermelho); background: var(--dna-preto); font: 400 var(--dna-t-micro)/1 var(--dna-f-mono); color: var(--dna-cinza-1); transition: background var(--dna-d-2) var(--dna-ease), color var(--dna-d-2) var(--dna-ease), box-shadow var(--dna-d-3) var(--dna-ease); }
.dna-tempo__passo:hover .dna-tempo__n { background: var(--dna-vermelho); color: var(--dna-branco); box-shadow: var(--dna-brilho-1); }

/* --- citação (site: bloco com filete vermelho à esquerda) ----------------- */

.dna-citacao { margin: 0; padding: var(--dna-e-5) var(--dna-e-5) var(--dna-e-5) var(--dna-e-5); border-left: 2px solid var(--dna-vermelho); background: var(--dna-grad-faixa); font: 400 var(--dna-t-corpo)/1.6 var(--dna-f-texto); color: var(--dna-offwhite); max-width: var(--dna-medida); }

/* --- perguntas (site: FAQ, + que vira × vermelho) ------------------------- */

.dna-faq { border-top: 1px solid var(--dna-filete-suave); }
.dna-faq details { border-bottom: 1px solid var(--dna-filete-suave); }
.dna-faq summary { display: grid; grid-template-columns: 56px 1fr 26px; align-items: center; gap: var(--dna-e-3); padding: 22px 0; cursor: pointer; list-style: none; font: 600 var(--dna-t-corpo)/1.4 var(--dna-f-texto); color: var(--dna-offwhite); transition: color var(--dna-d-2) var(--dna-ease); }
.dna-faq summary::-webkit-details-marker { display: none; }
.dna-faq summary::before { content: attr(data-n); font: 400 var(--dna-t-micro)/1 var(--dna-f-mono); color: var(--dna-cinza-3); }
.dna-faq summary::after { content: "+"; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--dna-filete); font: 400 16px/1 var(--dna-f-texto); transition: transform var(--dna-d-3) var(--dna-ease), background var(--dna-d-2) var(--dna-ease), border-color var(--dna-d-2) var(--dna-ease); }
.dna-faq summary:hover { color: var(--dna-vermelho-vivo); }
.dna-faq details[open] summary { color: var(--dna-vermelho); }
.dna-faq details[open] summary::after { transform: rotate(45deg); background: var(--dna-vermelho-2); border-color: var(--dna-vermelho-2); color: var(--dna-branco); }
.dna-faq__resposta { padding: 0 0 26px 68px; max-width: calc(var(--dna-medida) + 68px); font: 400 var(--dna-t-apoio)/var(--dna-lh-apoio) var(--dna-f-texto); color: var(--dna-cinza-2); }

/* --- tabela (site: tabela comparativa) ------------------------------------ */

.dna-tabela { width: 100%; border-collapse: collapse; font: 400 var(--dna-t-peq)/1.4 var(--dna-f-texto); color: var(--dna-offwhite); }
.dna-tabela th { padding: 12px 16px; text-align: left; font: 400 var(--dna-t-micro)/1 var(--dna-f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dna-cinza-3); border-bottom: 1px solid var(--dna-filete); }
.dna-tabela td { padding: 14px 16px; border-bottom: 1px solid var(--dna-filete-suave); }
.dna-tabela td:not(:first-child), .dna-tabela th:not(:first-child) { text-align: center; font-family: var(--dna-f-mono); font-size: 12px; }
.dna-tabela tr { transition: background var(--dna-d-2) var(--dna-ease); }
.dna-tabela tbody tr:hover { background: rgba(255,255,255,.03); }
.dna-sim { color: var(--dna-vermelho); }
.dna-nao-tem { color: var(--dna-cinza-4); }

/* --- campo (site: formulário do Lote 0) ----------------------------------- */

.dna-campo { width: 100%; padding: 13px 14px; border: 1px solid var(--dna-filete); border-radius: var(--dna-raio-2); background: rgba(255,255,255,.04); color: var(--dna-offwhite); font: 400 var(--dna-t-peq)/1.4 var(--dna-f-texto); transition: border-color var(--dna-d-2) var(--dna-ease), box-shadow var(--dna-d-2) var(--dna-ease), background var(--dna-d-2) var(--dna-ease); }
.dna-campo::placeholder { color: var(--dna-cinza-3); }
.dna-campo:focus { outline: 0; border-color: var(--dna-vermelho); background: rgba(232,53,53,.05); box-shadow: 0 0 0 3px rgba(232,53,53,.15); }

/* --- fundo ---------------------------------------------------------------- */

.dna-grade { background-image: var(--dna-grade-55); }
.dna-ruido { position: relative; }
.dna-ruido::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("../img/ruido.png"); background-size: 256px; opacity: .55; mix-blend-mode: screen; }
.dna-brasa { background-image: var(--dna-grad-brasa); }

/* marca d'água "DNA" gigante (post: faixa vermelha atrás do palestrante) */
.dna-marca-dagua { font: 400 clamp(180px, 30vw, 520px)/.78 var(--dna-f-display); letter-spacing: -.02em; color: var(--dna-vermelho-2); opacity: .55; user-select: none; pointer-events: none; }

/* radar (site: mapa, br-st-pulse 3s + br-sp-beacon 2.4s) */
.dna-radar { position: relative; width: 14px; height: 14px; }
.dna-radar::before, .dna-radar::after, .dna-radar i { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.dna-radar i { background: var(--dna-vermelho); box-shadow: var(--dna-brilho-1); }
.dna-radar::before { border: 1px solid var(--dna-vermelho); animation: dna-pulso var(--dna-d-pulso) ease-out infinite; }
.dna-radar::after { border: 1px solid var(--dna-vermelho); animation: dna-pulso var(--dna-d-pulso) ease-out infinite calc(var(--dna-d-pulso) / 2); }

/* --- foto ----------------------------------------------------------------- */

/* P&B que ganha cor no hover (post: palestrantes P&B; site: filter 1s) */
.dna-foto { position: relative; overflow: hidden; border-radius: var(--dna-raio-3); background: var(--dna-preto-2); }
.dna-foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transform: scale(1.001); transition: filter var(--dna-d-5) var(--dna-ease), transform var(--dna-d-5) var(--dna-ease); }
.dna-foto:hover img { filter: grayscale(0) contrast(1); transform: scale(1.03); }
/* luz de recorte vermelha (hero e slide 1 do post) */
.dna-foto--recorte::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 60% at 50% 35%, rgba(232,53,53,.42), transparent 70%); mix-blend-mode: screen; }

/* --- cartão de palestrante (post oficial: PALESTRANTE CONFIRMADO) ---------- */

.dna-palestrante { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--dna-preto); container-type: inline-size; }
.dna-palestrante__faixa { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: var(--dna-vermelho-cheio); overflow: hidden; }
.dna-palestrante__faixa span { position: absolute; left: -2%; bottom: -14%; font: 400 82cqi/.78 var(--dna-f-display); letter-spacing: -.02em; color: var(--dna-vermelho-3); opacity: .7; white-space: nowrap; }
.dna-palestrante__foto { position: absolute; left: 50%; bottom: 0; height: 80%; transform: translateX(-50%); filter: grayscale(1) contrast(1.1); transition: transform var(--dna-d-4) var(--dna-ease), filter var(--dna-d-5) var(--dna-ease); }
.dna-palestrante:hover .dna-palestrante__foto { transform: translateX(-50%) scale(1.03); }
.dna-palestrante__topo { position: absolute; top: 4.5cqi; left: 0; right: 0; text-align: center; }
.dna-palestrante__papel { display: block; font: 400 4.2cqi/1 var(--dna-f-display); color: var(--dna-branco); }
.dna-palestrante__confirmado { display: block; font: 400 12cqi/.95 var(--dna-f-display); color: var(--dna-vermelho-cheio); }
.dna-palestrante__nome { position: absolute; left: 6cqi; top: 26cqi; font: 400 9cqi/.95 var(--dna-f-display); text-transform: uppercase; color: var(--dna-branco); }
.dna-palestrante__contagem { position: absolute; right: 6cqi; top: 22cqi; text-align: center; font: 400 4.2cqi/1 var(--dna-f-display); color: var(--dna-branco); }
.dna-palestrante__contagem b { display: block; font-weight: 400; font-size: 15cqi; line-height: .9; color: var(--dna-vermelho-cheio); }
.dna-palestrante__logo { position: absolute; left: 50%; bottom: 4cqi; width: 40cqi; transform: translateX(-50%); }

/* --- revelação ------------------------------------------------------------ */

html.js [data-dna-revelar] { opacity: 0; transform: translateY(24px); transition: opacity var(--dna-d-4) var(--dna-ease), transform var(--dna-d-4) var(--dna-ease); }
html.js [data-dna-revelar].dna-visivel { opacity: 1; transform: none; }

/* ============================================================================
   MOVIMENTO — keyframes. Os do site mantêm o nome original em comentário.
   ========================================================================== */

@keyframes dna-faixa   { to { transform: translateX(-50%); } }                                  /* site: dna-ticker-scroll */
@keyframes dna-pulso   { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(7); opacity: 0; } }   /* site: br-st-pulse */
@keyframes dna-farol   { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(14); opacity: 0; } }    /* site: br-sp-beacon */
@keyframes dna-brilho  { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }       /* site: ghostShine */
@keyframes dna-piscar  { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }                       /* site: piscarIcone */
@keyframes dna-cutucar { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.025); box-shadow: var(--dna-sombra-modal); } } /* site: pGateNudge */

/* NOVOS — criados para o projeto, na linguagem do site */
@keyframes dna-seta-sobe   { 0% { transform: translate(-60%, 60%); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes dna-desenhar    { from { stroke-dashoffset: var(--comprimento, 4000); } to { stroke-dashoffset: 0; } }
@keyframes dna-preencher   { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes dna-varredura   { 0% { transform: translateY(-100%); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes dna-sangrar     { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes dna-neon        { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; filter: drop-shadow(0 0 6px rgba(232,53,53,.75)); } 20%, 63% { opacity: .55; filter: none; } }
@keyframes dna-subir       { from { transform: translateY(105%); } to { transform: none; } }
@keyframes dna-respirar    { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .85; transform: scale(1.06); } }

.dna-anim-neon      { animation: dna-neon 4s linear infinite; }
.dna-anim-respirar  { animation: dna-respirar 6s var(--dna-ease) infinite; }
/* linha que sobe, palavra por palavra (título de vinheta e LED) */
.dna-linha-sobe { display: inline-block; overflow: hidden; vertical-align: bottom; }
.dna-linha-sobe > span { display: inline-block; animation: dna-subir var(--dna-d-4) var(--dna-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.js [data-dna-revelar] { opacity: 1; transform: none; }
}

/* --- logo animada (abertura, vinheta, LED) -------------------------------- */
/* 1) o contorno se desenha  2) preenche  3) a seta dispara para cima-direita.
   Mesma sequência vai para o motion de logo do LED (capítulo 12). */
.dna-la { width: 100%; height: auto; overflow: visible; }
.dna-la path { stroke-width: 9; stroke-linejoin: miter; fill-opacity: 0; }
.dna-la__dn    { stroke: var(--dna-offwhite); fill: var(--dna-offwhite); animation: dna-desenhar 1.5s var(--dna-ease) both, dna-preencher .5s var(--dna-ease) 1.25s both; }
.dna-la__perna { stroke: var(--dna-vermelho); fill: var(--dna-vermelho); animation: dna-desenhar 1.2s var(--dna-ease) .35s both, dna-preencher .5s var(--dna-ease) 1.35s both; }
.dna-la .dna-la__seta { stroke: var(--dna-vermelho); fill: var(--dna-vermelho); fill-opacity: 1; stroke-dasharray: none !important; transform-box: fill-box; transform-origin: 0 100%; animation: dna-seta-sobe .7s var(--dna-ease) 1.55s both; }
.dna-la--parado path { animation: none !important; fill-opacity: 1; stroke-dashoffset: 0; }

/* --- crachá em escala (planilha: 10×14 cm, etiqueta 9×5 cm na frente, 2 furos) --------
   Prévia em tela. O arquivo de gráfica sai do mesmo HTML em mm (capítulo 11).
   Cada categoria só troca as 4 variáveis abaixo. */
.dna-cracha {
  --c-fundo: var(--dna-preto); --c-tinta: var(--dna-offwhite); --c-faixa: var(--dna-vermelho-cheio); --c-faixa-tinta: var(--dna-branco);
  position: relative; aspect-ratio: 100 / 140; overflow: hidden; container-type: inline-size;
  background: var(--c-fundo); color: var(--c-tinta); border-radius: 3.2cqi;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), 0 0 0 1px var(--dna-filete-suave);
  transition: transform var(--dna-d-3) var(--dna-ease), box-shadow var(--dna-d-3) var(--dna-ease);
}
.dna-cracha:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 40px 70px -30px rgba(0,0,0,.95), var(--dna-brilho-3); }
.dna-cracha::before { content: ""; position: absolute; inset: 0; background-image: url("../img/ruido.png"); background-size: 60cqi; opacity: .35; mix-blend-mode: overlay; pointer-events: none; }
.dna-cracha__furo { position: absolute; top: 4cqi; width: 9cqi; height: 3.2cqi; border-radius: 2cqi; background: #2a2a2e; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.dna-cracha__furo:nth-of-type(1) { left: 22cqi; } .dna-cracha__furo:nth-of-type(2) { right: 22cqi; }
.dna-cracha__logo { position: absolute; top: 12cqi; left: 8cqi; width: 54cqi; }
.dna-cracha__etiqueta { position: absolute; left: 5cqi; right: 5cqi; top: 30cqi; height: 50cqi; border-radius: 1.5cqi; background: #FFFFFF; display: grid; place-items: center; outline: .4cqi dashed rgba(0,0,0,.18); outline-offset: -2cqi; }
.dna-cracha__etiqueta span { font: 400 3cqi/1.3 var(--dna-f-mono); letter-spacing: .14em; text-transform: uppercase; color: #9a9a9e; text-align: center; }
.dna-cracha__faixa { position: absolute; left: 0; right: 0; bottom: 14cqi; height: 22cqi; background: var(--c-faixa); color: var(--c-faixa-tinta); display: flex; align-items: center; padding-inline: 7cqi; overflow: hidden; }
.dna-cracha__categoria { position: relative; font: 400 15cqi/.9 var(--dna-f-display); text-transform: uppercase; letter-spacing: -.01em; }
.dna-cracha__faixa .dna-cracha__dagua { position: absolute; right: -4cqi; bottom: -9cqi; font: 400 34cqi/.8 var(--dna-f-display); opacity: .22; }
.dna-cracha__pe { position: absolute; left: 7cqi; right: 7cqi; bottom: 5cqi; display: flex; justify-content: space-between; font: 400 2.6cqi/1 var(--dna-f-mono); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.dna-cracha__numero { position: absolute; top: 13cqi; right: 7cqi; font: 400 3cqi/1 var(--dna-f-mono); letter-spacing: .14em; color: var(--dna-vermelho); }
.dna-cracha__fita { position: absolute; top: 9cqi; right: -12cqi; width: 50cqi; padding: 1.4cqi 0; transform: rotate(45deg); background: var(--dna-grad-vermelho); text-align: center; font: 400 2.4cqi/1 var(--dna-f-mono); letter-spacing: .2em; text-transform: uppercase; color: #fff; }

.dna-cracha--start      { --c-faixa: var(--dna-offwhite); --c-faixa-tinta: var(--dna-preto); }
.dna-cracha--vip        { --c-faixa: var(--dna-vermelho-cheio); }
.dna-cracha--premier    { --c-fundo: var(--dna-vermelho-4); --c-faixa: var(--dna-preto); --c-faixa-tinta: var(--dna-vermelho); background: var(--dna-grad-vermelho); }
.dna-cracha--cupula     { --c-faixa: var(--dna-grad-vermelho); background-color: var(--dna-preto-0); }
.dna-cracha--cupula .dna-cracha__faixa { background: var(--dna-grad-vermelho); }
.dna-cracha--sponsor    { --c-fundo: var(--dna-offwhite); --c-tinta: var(--dna-preto); --c-faixa: var(--dna-preto); --c-faixa-tinta: var(--dna-offwhite); }
.dna-cracha--palestrante{ --c-fundo: var(--dna-vermelho-cheio); --c-faixa: var(--dna-preto); --c-faixa-tinta: var(--dna-branco); }
.dna-cracha--livre      { --c-fundo: var(--dna-verde-vivo); --c-tinta: var(--dna-preto); --c-faixa: var(--dna-preto); --c-faixa-tinta: var(--dna-verde-vivo); }

/* --- telão de LED em escala (planilha: central 6048×2016, lateral 2016×2016, credenciamento 3584×768)
   Prévia proporcional. Tamanhos em cqi = % da largura do painel, os mesmos que o Remotion usa. */
.dna-led { position: relative; overflow: hidden; container-type: inline-size; background: #000; box-shadow: 0 0 0 1px var(--dna-filete-suave); }
.dna-led--central { aspect-ratio: 6048 / 2016; }
.dna-led--lateral { aspect-ratio: 1 / 1; }
.dna-led--credenc { aspect-ratio: 3584 / 768; }
.dna-led::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(0,0,0,.55) 30%, transparent 31%); background-size: .45cqi .45cqi; opacity: .35; } /* malha de pixel */
.dna-led__seguro { position: absolute; inset: 5% 3%; border: 1px dashed rgba(138,255,120,.5); pointer-events: none; z-index: 3; }
.dna-led__grade { position: absolute; inset: 0; background-image: repeating-linear-gradient(to right, rgba(60,60,60,.35) 0 1px, transparent 1px 1.85cqi), repeating-linear-gradient(to bottom, rgba(60,60,60,.35) 0 1px, transparent 1px 1.85cqi); -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent); mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent); }

/* vinheta de palestrante no LED central: o post oficial deitado em 3:1 */
.dna-vinheta__faixa { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: var(--dna-vermelho-cheio); overflow: hidden; }
.dna-vinheta__faixa span { position: absolute; left: -1cqi; bottom: -6cqi; font: 400 30cqi/.8 var(--dna-f-display); color: var(--dna-vermelho-3); opacity: .7; white-space: nowrap; }
.dna-vinheta__foto { position: absolute; left: 50%; bottom: 0; height: 92%; transform: translateX(-50%); filter: grayscale(1) contrast(1.1); }
/* prévia com o slide oficial: janela que corta o título do slide (15% de cima) e as laterais */
.dna-vinheta__janela { position: absolute; left: 50%; bottom: 0; width: 10.5cqi; height: 82%; transform: translateX(-50%); overflow: hidden; }
.dna-vinheta__janela img { position: absolute; bottom: 0; left: 50%; height: 118%; width: auto; max-width: none; transform: translateX(-52%); }
.dna-vinheta__papel { position: absolute; left: 8cqi; top: 7cqi; font: 400 2.2cqi/1 var(--dna-f-display); text-transform: uppercase; color: var(--dna-branco); }
.dna-vinheta__confirmado { position: absolute; left: 8cqi; top: 9.6cqi; font: 400 6.4cqi/.9 var(--dna-f-display); text-transform: uppercase; color: var(--dna-vermelho-cheio); }
.dna-vinheta__nome { position: absolute; left: 8cqi; top: 17cqi; font: 400 4.6cqi/.92 var(--dna-f-display); text-transform: uppercase; color: var(--dna-branco); }
.dna-vinheta__tema { position: absolute; right: 8cqi; top: 7cqi; text-align: right; font: 400 1cqi/1.5 var(--dna-f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dna-cinza-1); }
.dna-vinheta__tema b { display: block; font: 400 3cqi/1 var(--dna-f-display); letter-spacing: 0; color: var(--dna-branco); }
.dna-vinheta__logo { position: absolute; right: 8cqi; bottom: 3.4cqi; width: 15cqi; z-index: 2; }