/* ExpertVision — apresentação interativa.
   Design importado de claude.ai/design ("Redesign apresentação interativa").

   A tela do projetor é um QUADRO FIXO de 1920x1080 escalado por transform.
   Por isso todas as medidas aqui são px absolutos: o que couber no design cabe
   em qualquer projetor, sem refluir texto nem recalcular tamanho de fonte. */

:root {
  /* Paleta oficial (manual da marca) */
  --marinho: #003366;
  --azul: #3F688C;
  --azul-claro: #C1CED9;
  --laranja: #F28705;
  --pessego: #F2BC79;

  --fundo: #05070A;
  --tinta: #F7F9FB;
  --acento: var(--laranja);
  --suave: rgba(193, 206, 217, .72);
  --linha: rgba(193, 206, 217, .16);

  --fonte-titulo: Archivo, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --fonte: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
}

@keyframes entra { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes slab  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pulso { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ================= tela do projetor ================= */

.palco {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--fundo);
}

.quadro {
  width: 1920px;
  height: 1080px;
  flex: none;
  position: relative;
  overflow: hidden;
  transform-origin: center center;
  background:
    radial-gradient(1250px 780px at 10% -12%, rgba(0, 51, 102, .9), transparent 70%),
    radial-gradient(900px 640px at 97% 112%, rgba(242, 135, 5, .11), transparent 66%),
    var(--fundo);
}

.quadro__grade, .quadro__hachura { position: absolute; inset: 0; pointer-events: none; }

.quadro__grade {
  background:
    repeating-linear-gradient(90deg, transparent 0 159px, rgba(193, 206, 217, .065) 159px 160px),
    repeating-linear-gradient(0deg, transparent 0 179px, rgba(193, 206, 217, .065) 179px 180px);
}

.quadro__hachura { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .016) 0 2px, transparent 2px 7px); }

/* marcas de canto */
.canto { position: absolute; width: 26px; height: 26px; }
.canto--se { top: 56px; left: 56px; border-left: 2px solid var(--acento); border-top: 2px solid var(--acento); }
.canto--sd { top: 56px; right: 56px; border-right: 2px solid var(--acento); border-top: 2px solid var(--acento); }
.canto--ie { bottom: 56px; left: 56px; border-left: 2px solid rgba(193, 206, 217, .28); border-bottom: 2px solid rgba(193, 206, 217, .28); }
.canto--id { bottom: 56px; right: 56px; border-right: 2px solid rgba(193, 206, 217, .28); border-bottom: 2px solid rgba(193, 206, 217, .28); }

.marca {
  position: absolute;
  top: 96px;
  left: 120px;
  right: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  z-index: 3;
}

.marca__logo { height: 38px; width: auto; opacity: .96; }

.marca__meta {
  font: 500 20px/1 var(--fonte-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--azul-claro);
  text-align: right;
}

/* ---------- cenas ---------- */

.cena {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 230px 120px 210px;
}

.cena.is-ativa { display: flex; animation: entra .5s cubic-bezier(.2, .7, .2, 1) both; }

.kicker {
  margin: 0 0 32px;
  font: 700 22px/1 var(--fonte-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--acento);
}

.titulo {
  margin: 0;
  font: 800 74px/1 var(--fonte-titulo);
  letter-spacing: -.03em;
  color: var(--tinta);
}

.titulo--capa { font-size: 132px; line-height: .94; letter-spacing: -.035em; max-width: 20ch; }
.titulo--grande { font-size: 96px; line-height: .98; letter-spacing: -.035em; max-width: 19ch; }
.titulo--pergunta { font-size: 78px; line-height: 1; }

/* trecho entre [colchetes] no content.py */
.realce {
  display: inline-block;
  background: var(--acento);
  color: #12060A;
  padding: 0 .1em;
  transform-origin: left center;
  animation: slab .55s .35s cubic-bezier(.2, .8, .2, 1) both;
}

.corpo { margin: 44px 0 0; font: 400 32px/1.45 var(--fonte); color: rgba(193, 206, 217, .75); max-width: 34ch; }

.assinatura { display: flex; align-items: center; gap: 28px; margin-top: 56px; animation: surge .6s .5s ease both; }
.assinatura__risco { width: 64px; height: 3px; background: var(--azul); flex: none; }
.assinatura span:last-child { font: 500 26px/1 var(--fonte-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--azul-claro); }

/* número gigante de fundo */
.marca-dagua {
  position: absolute;
  right: 104px;
  bottom: 150px;
  font: 900 460px/1 var(--fonte-titulo);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(193, 206, 217, .09);
  pointer-events: none;
  user-select: none;
}

.citacao { display: flex; gap: 36px; margin-top: 64px; position: relative; }
.citacao__risco { width: 3px; background: var(--acento); flex: none; }
.citacao p { margin: 0; font: 400 34px/1.45 var(--fonte); color: rgba(193, 206, 217, .78); max-width: 26ch; }

/* enquete */

.enquete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 9fr); gap: 96px; align-items: center; }
.contador { display: flex; align-items: baseline; gap: 18px; margin-top: 56px; }
.contador__n { font: 800 92px/1 var(--fonte-titulo); letter-spacing: -.04em; color: var(--acento); font-variant-numeric: tabular-nums; }
.contador__rot { font: 500 24px/1 var(--fonte-mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(193, 206, 217, .7); }
.pulso { width: 11px; height: 11px; border-radius: 50%; background: var(--acento); animation: pulso 1.6s ease-in-out infinite; }

.barras { display: flex; flex-direction: column; gap: 20px; }

.barra {
  position: relative;
  padding: 30px 34px;
  border: 1px solid var(--linha);
  overflow: hidden;
  background: rgba(255, 255, 255, .02);
}

.barra__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgba(242, 135, 5, .55), rgba(242, 188, 121, .22));
  transition: width .7s cubic-bezier(.2, .7, .2, 1);
}

.barra__linha { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.barra__label { font: 500 34px/1.2 var(--fonte); color: var(--tinta); }
.barra__n { font: 700 30px/1 var(--fonte-mono); color: var(--acento); font-variant-numeric: tabular-nums; flex: none; }

/* antes → depois */

.versus { display: flex; flex-direction: column; border-top: 1px solid var(--linha); margin-top: 64px; }

.par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  padding: 40px 0;
  border-bottom: 1px solid var(--linha);
}

.par__antes {
  font: 400 38px/1.25 var(--fonte);
  color: rgba(193, 206, 217, .45);
  text-align: right;
  text-decoration: line-through;
  text-decoration-color: rgba(242, 135, 5, .5);
}

.par__seta { font: 500 52px/1 var(--fonte-mono); color: var(--acento); text-align: center; }
.par__depois { font: 700 44px/1.15 var(--fonte-titulo); letter-spacing: -.02em; color: var(--tinta); }

/* história: foto de um lado, linha do tempo do outro */

.historia { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 9fr); gap: 76px; align-items: center; margin-top: 52px; }
.historia__foto { width: 100%; aspect-ratio: 3/2; object-fit: cover; border: 1px solid rgba(193, 206, 217, .22); }

.historia__vazio {
  aspect-ratio: 3/2;
  border: 1px solid rgba(193, 206, 217, .2);
  background: repeating-linear-gradient(135deg, rgba(193, 206, 217, .09) 0 8px, transparent 8px 18px);
  display: flex;
  align-items: flex-end;
  padding: 24px;
}

.historia__vazio span { font: 400 17px/1.3 var(--fonte-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(193, 206, 217, .6); }

.marcos { display: grid; gap: 34px; }
.marco { display: grid; gap: 10px; border-left: 3px solid var(--acento); padding-left: 30px; }
.marco h3 { margin: 0; font: 700 40px/1.05 var(--fonte-titulo); letter-spacing: -.02em; color: var(--tinta); }
.marco p { margin: 0; font: 400 26px/1.4 var(--fonte); color: rgba(193, 206, 217, .72); }

/* colunas numeradas */

.colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; margin-top: 80px; }
.coluna { border-top: 3px solid var(--acento); padding-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.coluna__n { font: 700 22px/1 var(--fonte-mono); letter-spacing: .2em; color: rgba(193, 206, 217, .55); }
.coluna h3 { margin: 0; font: 700 46px/1.05 var(--fonte-titulo); letter-spacing: -.02em; color: var(--tinta); }
.coluna p { margin: 0; font: 400 28px/1.45 var(--fonte); color: rgba(193, 206, 217, .72); }

/* clientes */

.logos__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 48px; }
.logos__total { text-align: right; flex: none; }
.logos__total strong { display: block; font: 800 96px/.9 var(--fonte-titulo); letter-spacing: -.05em; color: var(--acento); }
.logos__total span { font: 500 20px/1 var(--fonte-mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(193, 206, 217, .65); }

.logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  background: var(--linha);
  border: 1px solid var(--linha);
}

.logo {
  background: #070B12;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  gap: 14px;
  height: 230px;
  padding: 22px 24px;
  min-width: 0;
  overflow: hidden;
}

/* altura fixa e largura livre iguala logos de proporções diferentes;
   --fator compensa arquivos com muita margem interna (ver content.py) */
.logo img { display: block; height: calc(96px * var(--fator, 1)); width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.logo__setor { font: 500 18px/1.2 var(--fonte-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--acento); text-align: center; }

/* nuvem de palavras */

.cena--cloud { justify-content: flex-start; }
.nuvem__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 48px; }
.nuvem__topo .titulo { max-width: 26ch; font-size: 62px; line-height: 1.02; }
.nuvem__topo .contador { margin-top: 0; gap: 16px; }
.nuvem__topo .contador__n { font-size: 84px; }

.nuvem {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  /* px, não em: em resolveria pelo font-size do container (16px) e as palavras
     ficariam coladas, por maiores que fossem */
  gap: 26px 46px;
  line-height: 1;
  padding: 20px 0;
}

/* cada palavra entra até a SUA opacidade (--op) e depois flutua no lugar */
@keyframes nuvem-surge { from { opacity: 0; } to { opacity: var(--op, 1); } }

@keyframes nuvem-flutua {
  from { transform: translateY(calc(var(--dy) - 7px)) rotate(var(--rot)); }
  to   { transform: translateY(calc(var(--dy) + 7px)) rotate(var(--rot)); }
}

.nuvem span {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--tinta);
  opacity: var(--op, 1);
  transition: font-size .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease, color .5s ease;
  animation:
    nuvem-surge .6s ease both,
    nuvem-flutua var(--dur, 8s) var(--atraso, 0s) ease-in-out infinite alternate;
}

.nuvem .destaque { color: var(--acento); }

/* contato */

.contato { display: flex; gap: 96px; margin: 76px 0 0; border-top: 1px solid var(--linha); padding-top: 44px; }
.contato dt { font: 500 20px/1 var(--fonte-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--acento); margin-bottom: 16px; }
.contato dd { margin: 0; font: 600 36px/1 var(--fonte); color: var(--tinta); }

/* QR de participação */

.convite {
  position: absolute;
  right: 120px;
  bottom: 132px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s, transform .4s;
  pointer-events: none;
}

.mostra-qr .convite { opacity: 1; transform: none; }
.convite__texto { text-align: right; display: grid; gap: 4px; }
.convite__chamada { font: 500 17px/1.4 var(--fonte-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(193, 206, 217, .62); }
.convite__url { font: 700 20px/1.4 var(--fonte-mono); letter-spacing: .04em; color: var(--tinta); }
.convite__total { font: 500 17px/1.4 var(--fonte-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acento); }
.convite--espera .convite__total { display: none; }

/* Durante a votação o QR fica discreto: quem ia entrar já entrou pela capa, e
   ele não pode competir com as barras e a nuvem. */
.convite__qr svg { width: 104px; height: 104px; background: #fff; padding: 8px; display: block; }

/* Na capa é o convite de entrada — a sala inteira escaneia ao mesmo tempo. */
.convite--espera .convite__qr svg { width: 260px; height: 260px; padding: 14px; }
.convite--espera .convite__chamada { font-size: 20px; }
.convite--espera .convite__url { font-size: 26px; }

/* rodapé com o progresso */

.rodape { position: absolute; left: 120px; right: 120px; bottom: 64px; display: flex; align-items: center; gap: 28px; z-index: 4; }
.ticks { flex: 1; display: flex; gap: 5px; align-items: center; }
.tick { height: 5px; flex: 1; background: rgba(193, 206, 217, .14); transition: flex .45s cubic-bezier(.2, .7, .2, 1), background .3s; }
.tick.is-visto { background: rgba(193, 206, 217, .4); }
.tick.is-ativa { flex: 4; background: var(--acento); }
.rodape__pos { font: 500 19px/1 var(--fonte-mono); letter-spacing: .18em; color: rgba(193, 206, 217, .6); font-variant-numeric: tabular-nums; flex: none; }

.offline { position: absolute; left: 120px; bottom: 40px; width: 9px; height: 9px; border-radius: 50%; background: #ff4d4f; opacity: 0; transition: opacity .3s; }
.sem-conexao .offline { opacity: 1; }

/* ================= celular: plateia ================= */

.votar {
  min-height: 100dvh;
  display: flex;
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right))
           max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
  background: radial-gradient(520px 400px at 50% 0%, rgba(0, 51, 102, .9), transparent 70%), #06090F;
}

.votar main { width: 100%; max-width: 30rem; margin: auto; }
.votar h1 { margin: 0 0 1.6rem; font: 800 clamp(1.4rem, 6vw, 1.9rem)/1.15 var(--fonte-titulo); letter-spacing: -.025em; color: var(--tinta); }

.espera { text-align: center; color: rgba(193, 206, 217, .66); font: 400 1rem/1.5 var(--fonte); }
.espera strong { display: block; margin-bottom: .5rem; font: 800 1.5rem/1.2 var(--fonte-titulo); letter-spacing: -.02em; color: var(--tinta); }
.espera strong::after { content: " ✓"; color: var(--acento); }
.erro { color: #ff8a8a; text-align: center; font-family: var(--fonte-mono); font-size: .85rem; }

.opcoes { display: grid; gap: .65rem; }

.opcao {
  font: 500 1.05rem/1.3 var(--fonte);
  text-align: left;
  padding: 1.1rem;
  border: 1px solid rgba(193, 206, 217, .2);
  border-radius: 2px;
  background: rgba(255, 255, 255, .04);
  color: var(--tinta);
  cursor: pointer;
}

.opcao:active { border-color: var(--acento); background: rgba(242, 135, 5, .12); }
.opcao:disabled { opacity: .5; }

.palavra { display: grid; gap: .75rem; }

.palavra input {
  font: 500 1.25rem/1 var(--fonte);
  padding: 1.15rem;
  border: 1px solid rgba(193, 206, 217, .2);
  border-radius: 2px;
  background: rgba(255, 255, 255, .04);
  color: var(--tinta);
}

.palavra button {
  padding: 1.15rem;
  border: 0;
  border-radius: 2px;
  background: var(--acento);
  color: #12060A;
  font: 700 1rem/1 var(--fonte-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ================= celular: controle ================= */

.remoto {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "topo" "miolo" "votacao" "nav";
  gap: .8rem;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
           max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: radial-gradient(520px 400px at 50% 0%, rgba(0, 51, 102, .9), transparent 70%), #06090F;
}

.remoto__topo { grid-area: topo; display: flex; align-items: center; gap: .8rem; min-width: 0; font: 500 .8rem/1 var(--fonte-mono); letter-spacing: .1em; color: rgba(193, 206, 217, .6); }
.remoto__topo #titulo-cena { flex: 1; min-width: 0; font-family: var(--fonte); font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pos { min-width: 3.4em; font-variant-numeric: tabular-nums; flex: none; }
#cron { min-width: 6.2em; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; flex: none; }
#cron.no-tempo { color: #35d07f; }
#cron.atrasado { color: #ff8a8a; }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: #35d07f; flex: none; }
.ponto.off { background: #ff4d4f; }

.remoto__miolo { grid-area: miolo; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.remoto__lista { list-style: none; counter-reset: c; margin: 0; padding: 0; display: grid; gap: .4rem; }

.remoto__lista li {
  counter-increment: c;
  padding: .8rem 1rem;
  border: 1px solid rgba(193, 206, 217, .16);
  border-radius: 2px;
  color: rgba(193, 206, 217, .7);
  font: 400 .95rem/1.3 var(--fonte);
  min-width: 0;
  overflow-wrap: break-word;
}

.remoto__lista li::before { content: counter(c, decimal-leading-zero) " "; font-family: var(--fonte-mono); opacity: .55; }
.remoto__lista li.is-ativa { color: var(--tinta); border-color: var(--acento); background: rgba(242, 135, 5, .12); }

#votacao { grid-area: votacao; border: 1px solid rgba(193, 206, 217, .16); border-radius: 2px; padding: 1rem; display: grid; gap: .8rem; }
#prompt { margin: 0; font: 600 1rem/1.3 var(--fonte); overflow-wrap: break-word; }
#apuracao { margin: 0; font: 400 .78rem/1.4 var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(193, 206, 217, .55); }

.remoto__acoes { display: flex; gap: .5rem; }

.remoto__acoes button {
  flex: 1;
  padding: .85rem .4rem;
  border: 1px solid rgba(193, 206, 217, .2);
  border-radius: 2px;
  background: rgba(255, 255, 255, .05);
  color: var(--tinta);
  font: 500 .78rem/1 var(--fonte-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.remoto__acoes button[data-action="open"] { background: var(--acento); border-color: transparent; color: #12060A; font-weight: 700; }
.perigo { color: #ff8a8a; }

.remoto__nav { grid-area: nav; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.remoto__nav button {
  padding: 1.3rem 0;
  border: 1px solid rgba(193, 206, 217, .2);
  border-radius: 2px;
  background: rgba(255, 255, 255, .05);
  color: var(--azul-claro);
  font-size: 1.6rem;
  cursor: pointer;
}

.remoto__nav button:active { background: rgba(242, 135, 5, .45); }

/* celular deitado: navegação vai para a lateral */
@media (orientation: landscape) and (max-height: 520px) {
  .remoto { grid-template-rows: auto 1fr auto; grid-template-columns: 1fr minmax(5rem, 22%); grid-template-areas: "topo topo" "miolo nav" "votacao nav"; }
  .remoto__nav { grid-template-columns: 1fr; }
  .remoto__nav button { padding: .8rem 0; font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}