/* ==========================================================================
   Acelera Burguer — Sadia
   Apresentação em sequência de frames com scrub por scroll
   Palco de referência: 1920 x 1080 (todas as medidas em px desse palco)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonte: Source Sans 3 (SIL OFL). É o parente próximo da Myriad Pro usada na
   arte original e vai embutida no projeto — assim a apresentação renderiza
   igual em qualquer máquina, com ou sem internet.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Source Sans 3"; font-style:normal; font-weight:400;
  font-display:block; src:url("../fonts/source-sans-3-400.woff2") format("woff2");
}
@font-face{
  font-family:"Source Sans 3"; font-style:normal; font-weight:600;
  font-display:block; src:url("../fonts/source-sans-3-600.woff2") format("woff2");
}
@font-face{
  font-family:"Source Sans 3"; font-style:normal; font-weight:700;
  font-display:block; src:url("../fonts/source-sans-3-700.woff2") format("woff2");
}
@font-face{
  font-family:"Source Sans 3"; font-style:normal; font-weight:800;
  font-display:block; src:url("../fonts/source-sans-3-800.woff2") format("woff2");
}

:root{
  /* cores amostradas dos próprios frames e da arte tela01 */
  --marrom-fundo:   #1a0c03;   /* letterbox fora do palco */
  --marrom-escuro:  #2d1604;
  --marrom-medio:   #4c2b1c;
  --marrom-claro:   #68361b;
  --laranja:        #fea60b;   /* laranja do logo "acelera" */
  --vermelho-sadia: #d90101;   /* vermelho do logo Sadia */
  --texto:          #f9f7f6;

  --fonte: "Source Sans 3", "Myriad Pro", "Segoe UI", system-ui,
           -apple-system, sans-serif;

  --escala: 1;                 /* definido por JS: palco -> viewport */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; overflow:hidden; }

body{
  background:var(--marrom-fundo);
  color:var(--texto);
  font-family:var(--fonte);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
  touch-action:none;
  cursor:default;
}

img{ display:block; max-width:100%; }

/* ==========================================================================
   PALCO
   ========================================================================== */

.viewport{
  position:fixed; inset:0;
  overflow:hidden;
}

/* Preenche a tela inteira quando a proporção do monitor não é 16:9. É uma
   versão borrada do próprio frame, então o que sobra das bordas continua o
   marrom da cena em vez de virar tarja. */
.backdrop{
  position:absolute; inset:0;
  width:100%; height:100%;
  transform:scale(1.25);
  filter:blur(34px) brightness(.88) saturate(1.02);
  z-index:0;
}

/* Centralização por posicionamento absoluto, e não por grid/flex: quando o
   item é MAIOR que o container, `place-items:center` degrada para `start`
   (comportamento "safe" do CSS) e o palco sairia deslocado. */
.stage{
  position:absolute; left:50%; top:50%;
  width:1920px; height:1080px;
  z-index:1;
  transform:translate(-50%,-50%) scale(var(--escala));
  transform-origin:center center;
  background:var(--marrom-escuro);
  /* o palco só aparece depois que o primeiro frame é desenhado */
  opacity:0; transition:opacity .5s ease;
}
.stage.pronto{ opacity:1; }

.film{
  position:absolute; inset:0;
  width:1920px; height:1080px;
  display:block;
}

.screens{ position:absolute; inset:0; pointer-events:none; }

/* ==========================================================================
   TELAS DE CONTEÚDO (overlay sobre o frame congelado)
   ========================================================================== */

.tela{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s;
}
.tela.ativa{ opacity:1; visibility:visible; }

/* elemento genérico posicionado em coordenadas do palco */
.el{
  position:absolute;
  opacity:0;
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.tela.ativa .el{ opacity:1; transform:none !important; }

/* direções de entrada */
.el[data-anim="left"]  { transform:translateX(-70px); }
.el[data-anim="right"] { transform:translateX(70px);  }
.el[data-anim="up"]    { transform:translateY(40px);  }
.el[data-anim="down"]  { transform:translateY(-40px); }
.el[data-anim="scale"] { transform:scale(.88);        }
.el[data-anim="fade"]  { transform:none;              }

/* texto corrido das telas */
.el--texto{
  font-size:34px;
  line-height:40px;
  letter-spacing:.1px;
  color:var(--texto);
  text-shadow:0 2px 14px rgba(0,0,0,.42);
}
.el--texto strong{ font-weight:700; }
.el--texto em{ font-style:normal; color:var(--laranja); }


/* Ícones em contorno, na cor do texto. */
.el--icones{ display:flex; gap:18px; justify-content:flex-end; }
.el--icones svg{
  width:56px; height:56px; flex:none;
  fill:none; stroke:var(--texto); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));
}

/* --------------------------------------------------------------------------
   Selo da marca — logo Sadia + "Linha de Hambúrgueres" numa pílula creme.
   O vermelho do logo (#d90101) direto sobre o marrom da capa mede 2,98:1,
   abaixo do mínimo de 3:1 para elemento gráfico, e fica apagado. Na pílula
   ele sobe para 4,9:1 e mantém a cor oficial, sem precisar de versão branca.
   O texto é HTML na Source Sans 3, não imagem. Tudo em em: o mesmo selo
   serve à capa (palco, .el--marca) e ao carregamento (.loader__marca),
   mudando só o font-size.
   -------------------------------------------------------------------------- */
.marca{
  display:inline-flex; align-items:center; gap:1.1em;
  height:5.4em; padding:0 1.6em 0 1.5em;
  border-radius:999px;
  background:#fbf4ea;
  box-shadow:0 .7em 2.2em rgba(0,0,0,.42);
  font-family:var(--fonte); line-height:1; text-align:left;
  text-shadow:none; white-space:nowrap;
}
.marca img{ display:block; height:3.3em; width:auto; max-width:none; }
.marca i{
  flex:none; width:1px; height:2.9em;
  background:rgba(58,28,11,.24);
}
.marca b{
  font-size:1em; line-height:1.25; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:#3a1c0b;
}
/* na capa: o elemento é um texto alinhado à direita, então a pílula encosta
   na mesma margem do parágrafo de cima (x=1777) */
.el--marca{ font-size:14px; line-height:1; text-shadow:none; }
/* Na arte original o bloco de texto dissolve na borda esquerda, onde encosta
   na sombra do burger. Reproduzido com máscara em degradê. */
.el--fade-esq{
  -webkit-mask-image:linear-gradient(90deg,
    rgba(0,0,0,.10) 0%, rgba(0,0,0,.58) 14%, rgba(0,0,0,.90) 30%, #000 44%);
          mask-image:linear-gradient(90deg,
    rgba(0,0,0,.10) 0%, rgba(0,0,0,.58) 14%, rgba(0,0,0,.90) 30%, #000 44%);
}

/* títulos / kickers reaproveitáveis nas próximas telas */
.el--titulo{
  font-size:78px; line-height:.94; font-weight:800;
  letter-spacing:-1.6px; text-transform:lowercase;
  text-shadow:0 4px 26px rgba(0,0,0,.5);
}

/* Siglas dentro do título, que é caixa baixa por identidade: IA, PMO, SKU. */
.el--titulo .sigla{ text-transform:none; }
.el--kicker{
  font-size:20px; line-height:1.2; font-weight:700;
  letter-spacing:3.4px; text-transform:uppercase;
  color:var(--laranja);
}
/* Véu em degradê: dá contraste para o texto quando a cena não tem sobra
   livre (o burger em camadas, por exemplo, ocupa quase toda a largura). */
.el--painel{ pointer-events:none; }

/* --------------------------------------------------------------------------
   Grupos — um rótulo e uma linha de itens separados por bolinha.
   -------------------------------------------------------------------------- */
.grupo{ margin-bottom:26px; }
.grupo:last-child{ margin-bottom:0; }

.grupo__rotulo{
  display:block; margin-bottom:7px;
  font-size:15px; font-weight:700; letter-spacing:2.8px; text-transform:uppercase;
  color:var(--laranja);
}
.grupo__itens{
  font-size:var(--corpo, 19px); line-height:var(--lh, 28px);
  color:rgba(255,255,255,.93);
  /* sombra forte: sem véu, o texto encosta no burger e precisa se destacar */
  text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 5px rgba(0,0,0,.7);
  /* reparte as linhas em tamanhos parecidos em vez de largar um item sozinho
     na última linha */
  text-wrap:balance;
}
/* cada KPI é indivisível: a linha quebra entre itens, nunca no meio de um
   nome como "Mix de SKUs" ou "Custo por incremento" */
.grupo__itens span{ white-space:nowrap; }
.grupo__itens i{
  font-style:normal; color:var(--laranja); opacity:.75;
  margin-right:7px;
}





/* --------------------------------------------------------------------------
   Diagrama de arquitetura — camadas empilhadas, rótulo à esquerda e caixas
   à direita. A arte de origem é clara; aqui as caixas são translúcidas para
   assentar no marrom sem precisar de véu.
   -------------------------------------------------------------------------- */
.el--diagrama{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  padding-right:64px;                 /* espaço da faixa de retorno */
}

.dg__linha{ display:flex; align-items:stretch; gap:16px; }

.dg__rotulo{
  flex:none; width:132px; padding-top:9px;
  font-size:11px; line-height:14px; font-weight:700;
  letter-spacing:1.7px; text-transform:uppercase; text-align:right;
  color:rgba(255,255,255,.5);
}

.dg__caixas{ flex:1; display:flex; gap:10px; }

/* a seta que liga uma camada à seguinte */
.dg__linha:not(:last-child) .dg__caixas{ position:relative; }
.dg__linha:not(:last-child) .dg__caixas::after{
  content:""; position:absolute; left:50%; bottom:-13px;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:7px solid var(--laranja); opacity:.85;
}

.dg__caixa{
  flex:1 1 0; min-width:0; padding:11px 14px;
  border:1px solid rgba(255,255,255,.17); border-radius:8px;
  background:rgba(255,255,255,.055);
}
.dg__caixa b{
  display:block; font-size:19px; line-height:23px; font-weight:600;
  color:var(--texto);
}
.dg__caixa span{
  display:block; margin-top:3px;
  font-size:13px; line-height:17px; color:rgba(255,255,255,.62);
}

.dg__caixa--tracejada{
  border-style:dashed; background:none;
}
.dg__caixa--tracejada b{ color:rgba(255,255,255,.62); font-weight:400; }

.dg__caixa--destaque{
  border-color:var(--laranja); background:rgba(254,166,11,.10);
}
.dg__caixa--destaque b{ color:var(--laranja); }

.dg__caixa--motor{
  border-color:rgba(254,166,11,.45); background:rgba(254,166,11,.16);
}

.dg__caixa--escura{
  border-color:rgba(255,255,255,.28); background:rgba(12,6,2,.55);
}

/* faixa vertical de retorno, colada na direita */
.dg__retorno{
  position:absolute; top:0; right:0; bottom:0; width:44px;
  border:1px dashed rgba(254,166,11,.45); border-radius:8px;
  display:grid; place-items:center;
}
.dg__retorno span{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:10px; letter-spacing:2.6px; text-transform:uppercase;
  color:var(--laranja); opacity:.8;
}

/* rodapé de governança */
.el--rodape{ display:flex; gap:34px; flex-wrap:wrap; }
.el--rodape b{
  font-size:12px; font-weight:700; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--laranja);
}
.el--rodape span{ font-size:14px; color:rgba(255,255,255,.66); }


/* --------------------------------------------------------------------------
   Selo — carimbo redondo com um rótulo ao lado. O PDF traz um selo dourado
   com brilho; aqui vira contorno na paleta da apresentação, para não
   introduzir um segundo estilo gráfico no meio da tela.
   -------------------------------------------------------------------------- */
.el--selo{
  display:flex; align-items:center; gap:16px;
  pointer-events:auto;
}
.el--selo svg{
  width:78px; height:78px; flex:none;
  fill:none; stroke:var(--laranja); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.el--selo:hover svg{ transform:rotate(-8deg) scale(1.08); }
.el--selo b{
  font-size:17px; line-height:22px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--texto);
  text-shadow:0 2px 12px rgba(0,0,0,.75);
}

/* --------------------------------------------------------------------------
   Faixa de cases — três colunas com o mockup em cima e desafio, solução e
   resultado embaixo. A altura da arte é fixa (e não a largura) para os três
   mockups ficarem alinhados pela base mesmo com proporções diferentes.
   Tudo tem de terminar antes de y=745: dali para baixo, à direita de x=1520,
   começa o burger do canto.
   -------------------------------------------------------------------------- */
.el--cases{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:48px;
  pointer-events:auto;
}
.cs{
  display:flex; flex-direction:column;
  transition:opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1);
}
.el--cases:hover .cs{ opacity:.38; }
.el--cases .cs:hover{ opacity:1; transform:translateY(-4px); }

.cs__arte{
  height:268px; margin-bottom:16px;
  display:flex; align-items:flex-end; justify-content:center;
}
.cs__arte img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  filter:drop-shadow(0 20px 38px rgba(0,0,0,.55));
}
.cs__nome{
  font-size:23px; font-weight:700; color:var(--texto);
  padding-bottom:9px; margin-bottom:12px;
  border-bottom:1px solid rgba(254,166,11,.5);
}
.cs__bloco + .cs__bloco{ margin-top:11px; }
.cs__bloco em{
  display:block; font-style:normal;
  font-size:12px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--laranja); margin-bottom:3px;
}
.cs__bloco p{ font-size:15px; line-height:20px; color:rgba(255,255,255,.82); }

/* --------------------------------------------------------------------------
   Trilha vertical — os passos ligados por um fio, como na página 1 do PDF.
   -------------------------------------------------------------------------- */
.el--trilha{ display:flex; flex-direction:column; gap:0; pointer-events:auto; }

.trilha__passo{
  position:relative; display:flex; align-items:center; gap:18px;
  padding:11px 0;
  transition:opacity .3s, transform .3s;
}
/* o fio que liga um passo ao seguinte */
.trilha__passo:not(:last-child)::after{
  content:""; position:absolute; left:21px; top:50%; bottom:-50%;
  width:2px; background:rgba(255,255,255,.22);
}
.trilha__num{
  position:relative; z-index:1; flex:none;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.14); color:var(--texto);
  font-size:15px; font-weight:700; letter-spacing:.5px;
  font-variant-numeric:tabular-nums;
  transition:background .3s, color .3s;
}
.trilha__passo b{
  font-size:24px; font-weight:700; letter-spacing:2.4px;
  text-transform:uppercase; color:var(--texto);
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.trilha__passo--destaque .trilha__num{ background:var(--laranja); color:#3a1c0b; }

.el--trilha:hover .trilha__passo{ opacity:.4; }
.el--trilha .trilha__passo:hover{ opacity:1; transform:translateX(7px); }
.el--trilha .trilha__passo:hover .trilha__num{ background:var(--laranja); color:#3a1c0b; }

/* --------------------------------------------------------------------------
   Credenciais de demonstração — rótulo em caixa alta, login em mono para não
   deixar dúvida sobre ponto, hífen ou letra.
   -------------------------------------------------------------------------- */
.el--acesso{ display:flex; flex-direction:column; gap:14px; }
.el--acesso span{ display:flex; flex-direction:column; gap:2px; }
.el--acesso b{
  font-size:13px; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--laranja); margin-bottom:3px;
}
.el--acesso code{
  font-family:ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size:15px; line-height:21px; color:rgba(255,255,255,.8);
}

/* --------------------------------------------------------------------------
   Nota de rodapé de uma tela — recado de produção ou ressalva, com a régua
   laranja à esquerda para não se confundir com o corpo de texto.
   -------------------------------------------------------------------------- */
.el--nota{
  font-size:19px; line-height:26px; color:rgba(255,255,255,.6);
  border-left:3px solid var(--laranja); padding-left:18px;
}
.el--nota b{ color:var(--laranja); font-weight:700; }

/* --------------------------------------------------------------------------
   Gráfico conceitual — série que sobe contra uma linha de base chapada.
   -------------------------------------------------------------------------- */
.el--grafico{ display:block; }
.gr__titulo{
  display:block; font-size:22px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--texto);
}
.gr__sub{
  display:block; margin-top:4px; font-size:17px; color:rgba(255,255,255,.62);
}
.el--grafico svg{ display:block; width:100%; height:auto; margin-top:10px; overflow:visible; }

.gr__grade{ stroke:rgba(255,255,255,.13); stroke-width:1; stroke-dasharray:5 7; }
.gr__eixoY{ stroke:rgba(255,255,255,.22); stroke-width:1.5; }
.gr__base{ stroke:rgba(255,255,255,.38); stroke-width:2.5; stroke-dasharray:9 8; }
.gr__linha{
  fill:none; stroke:var(--laranja); stroke-width:4;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 3px 12px rgba(254,166,11,.45));
}
.gr__marca{ fill:#2d1604; stroke:var(--laranja); stroke-width:3.5; }
.gr__rotSerie{
  fill:var(--laranja); font-size:19px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
}
.gr__rotBase{
  fill:rgba(255,255,255,.6); font-size:15px; letter-spacing:1.6px;
  text-transform:uppercase;
}
.gr__eixo{ fill:rgba(255,255,255,.62); font-size:16px; }
.gr__nota{
  display:block; margin-top:6px;
  font-size:14px; color:rgba(255,255,255,.45);
}

/* --------------------------------------------------------------------------
   Realce por hover nas caixas do diagrama de arquitetura.
   -------------------------------------------------------------------------- */
.el--diagrama{ pointer-events:auto; }
.el--diagrama:hover .dg__caixa{ opacity:.34; }
.el--diagrama .dg__caixa{ transition:opacity .3s, background .3s, border-color .3s, transform .3s; }
.el--diagrama .dg__caixa:hover{
  opacity:1; background:rgba(254,166,11,.14);
  border-color:var(--laranja); transform:translateY(-3px);
}
/* passar o mouse no rótulo acende a camada inteira */
.dg__linha{ transition:opacity .3s; }
.el--diagrama:hover .dg__linha:hover .dg__caixa{ opacity:1; }
/* --------------------------------------------------------------------------
   Etapas — trilha horizontal numerada. Passar o mouse acende uma e apaga as
   outras: conduz o olhar sem precisar de clique.
   -------------------------------------------------------------------------- */
.el--etapas{ display:flex; gap:18px; pointer-events:auto; }

.etapa{
  flex:1 1 0; min-width:0; padding:14px 4px 0;
  border-top:2px solid rgba(255,255,255,.20);
  transition:border-color .3s, opacity .3s, transform .3s;
}
.etapa__num{
  display:block; margin-bottom:6px;
  font-size:12px; font-weight:700; letter-spacing:2px;
  color:var(--laranja); font-variant-numeric:tabular-nums;
}
.etapa b{
  display:block; font-size:19px; line-height:23px; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase; color:var(--texto);
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.etapa__sub{
  display:block; margin-top:5px;
  font-size:15px; line-height:20px; color:rgba(255,255,255,.66);
}
.etapa--destaque{ border-top-color:var(--laranja); }

.el--etapas:hover .etapa{ opacity:.38; }
.el--etapas .etapa:hover{
  opacity:1; border-top-color:var(--laranja); transform:translateY(-4px);
}

/* --------------------------------------------------------------------------
   Funil — faixas que estreitam. Mesma lógica de realce no hover.
   -------------------------------------------------------------------------- */
.el--funil{ display:flex; flex-direction:column; gap:9px; pointer-events:auto; }

.funil__faixa{
  padding:13px 20px; border-radius:7px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  transition:opacity .3s, background .3s, border-color .3s, transform .3s;
}
.funil__faixa b{
  font-size:18px; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--texto);
}
.funil__faixa span{
  display:block; margin-top:3px; font-size:14px; color:rgba(255,255,255,.6);
}
.funil__faixa--destaque{
  border-color:var(--laranja); background:rgba(254,166,11,.18);
}
.funil__faixa--destaque b{ color:var(--laranja); }

.el--funil:hover .funil__faixa{ opacity:.38; }
.el--funil .funil__faixa:hover{
  opacity:1; background:rgba(254,166,11,.16); border-color:var(--laranja);
  transform:translateX(8px);
}

/* --------------------------------------------------------------------------
   Botão de link — usado nos slides que apontam para fora da apresentação.
   -------------------------------------------------------------------------- */
.el--botao{
  display:inline-flex; align-items:center; gap:12px;
  height:60px; padding:0 30px;
  border:0; border-radius:999px;
  background:var(--laranja); color:#3a1c0b;
  font-family:inherit; font-size:19px; font-weight:700;
  text-decoration:none; cursor:pointer; pointer-events:auto;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:background .22s, transform .14s;
}
.el--botao:hover{ background:#ffb734; transform:translateY(-2px); }
.el--botao svg{
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}

/* --------------------------------------------------------------------------
   Cartões — fileira de blocos que acendem no hover.
   -------------------------------------------------------------------------- */
.el--cartoes{ display:flex; gap:16px; pointer-events:auto; }

.cartao{
  flex:1 1 0; min-width:0; padding:18px 20px;
  border:1px solid rgba(255,255,255,.17); border-radius:10px;
  background:rgba(255,255,255,.055);
  transition:opacity .3s, background .3s, border-color .3s, transform .3s;
}
.cartao__marca{
  display:block; margin-bottom:9px;
  font-size:12px; font-weight:700; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--laranja);
}
.cartao b{
  display:block; font-size:21px; line-height:26px; font-weight:700;
  color:var(--texto);
}
.cartao span{
  display:block; margin-top:6px;
  font-size:16px; line-height:22px; color:rgba(255,255,255,.68);
}
.el--cartoes:hover .cartao{ opacity:.4; }
.el--cartoes .cartao:hover{
  opacity:1; background:rgba(254,166,11,.12);
  border-color:var(--laranja); transform:translateY(-5px);
}
/* --------------------------------------------------------------------------
   Chat de demonstração — o logo da campanha abre um painel e a conversa entra
   mensagem por mensagem, com indicador de digitação. O roteiro é fixo: serve
   para o apresentador mostrar o tom da plataforma, não é IA rodando ao vivo.
   -------------------------------------------------------------------------- */
.el--chat{ pointer-events:auto; }

.chat__abrir{
  display:flex; align-items:center; gap:13px;
  height:74px; padding:0 26px 0 8px;
  border:1px solid rgba(255,255,255,.22); border-radius:999px;
  background:rgba(28,14,5,.72); backdrop-filter:blur(10px);
  color:var(--texto); font-family:inherit; font-size:16px; font-weight:600;
  cursor:pointer; white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:background .2s, border-color .2s, transform .12s;
  animation:respira 2.6s ease-in-out infinite;
}
.chat__abrir:hover{ background:rgba(60,30,10,.85); border-color:var(--laranja); }
.chat__abrir:active{ transform:scale(.97); }
/* A arte do avatar é quadrada (978x978): object-fit:cover recorta no centro
   e o border-radius fecha o círculo. Sem o cover a foto achata. */
.chat__cara{
  width:58px; height:58px; flex:none;
  border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.24);
}
.chat__id{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:3px; line-height:1;
}
.chat__id em{
  font-style:normal; font-size:12px; font-weight:600;
  letter-spacing:2.4px; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.chat__id b{ font-size:21px; font-weight:700; letter-spacing:.2px; }
.chat--aberto .chat__abrir{ opacity:.35; animation:none; }

/* o painel sobe a partir do botão. A regra [hidden] vem junto porque
   display:flex anula o comportamento padrão do atributo hidden. */
.chat__painel[hidden]{ display:none; }
.chat__painel{
  position:absolute; left:0; bottom:88px;
  width:520px; height:520px;
  display:flex; flex-direction:column;
  border:1px solid rgba(255,255,255,.16); border-radius:20px;
  background:rgba(20,10,3,.985); backdrop-filter:blur(20px);
  box-shadow:0 26px 70px rgba(0,0,0,.6);
  overflow:hidden;
  animation:sobeChat .32s cubic-bezier(.22,.61,.36,1);
}
@keyframes sobeChat{
  from{ opacity:0; transform:translateY(18px) scale(.97) }
  to  { opacity:1; transform:none }
}

.chat__topo{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; flex:none;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.chat__topo .chat__cara{ width:38px; height:38px; border-width:1.5px; }
.chat__nome{
  font-size:15px; font-weight:700; color:var(--texto);
}
.chat__estado{
  flex:1; font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
  color:#7ddc8a;
}
.chat__estado::before{
  content:""; display:inline-block; width:7px; height:7px; margin-right:7px;
  border-radius:50%; background:#7ddc8a;
}
.chat__fechar{
  flex:none; width:30px; height:30px; border:0; border-radius:50%;
  background:rgba(255,255,255,.10); color:var(--texto);
  font-size:19px; line-height:1; cursor:pointer;
}
.chat__fechar:hover{ background:rgba(255,255,255,.2); }

.chat__corpo{
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin;
}
.chat__corpo::-webkit-scrollbar{ width:5px; }
.chat__corpo::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:3px; }

.chat__bolha{
  max-width:82%; padding:11px 15px;
  font-size:16px; line-height:23px;
  border-radius:16px;
  animation:entraBolha .28s ease-out;
}
@keyframes entraBolha{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

.chat__bolha--equipe{
  align-self:flex-end;
  background:rgba(255,255,255,.13); color:var(--texto);
  border-bottom-right-radius:5px;
}
.chat__bolha--plataforma{
  align-self:flex-start;
  background:var(--laranja); color:#331705; font-weight:500;
  border-bottom-left-radius:5px;
}
.chat__bolha strong{ font-weight:700; }

.chat__digitando{
  align-self:flex-start; display:flex; gap:5px;
  padding:14px 16px; border-radius:16px; border-bottom-left-radius:5px;
  background:rgba(255,255,255,.10);
}
.chat__digitando i{
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.6);
  animation:pisca 1.2s ease-in-out infinite;
}
.chat__digitando i:nth-child(2){ animation-delay:.18s }
.chat__digitando i:nth-child(3){ animation-delay:.36s }
@keyframes pisca{ 0%,60%,100%{opacity:.25} 30%{opacity:1} }


/* barra de escrita do chat */
.chat__envio{
  flex:none; display:flex; gap:8px; align-items:center;
  padding:10px; border-top:1px solid rgba(255,255,255,.12);
}
.chat__campo{
  flex:1; height:38px; padding:0 14px;
  border:1px solid rgba(255,255,255,.18); border-radius:999px;
  background:rgba(255,255,255,.07); color:var(--texto);
  font-family:inherit; font-size:15px;
}
.chat__campo::placeholder{ color:rgba(255,255,255,.38); }
.chat__campo:focus{ outline:none; border-color:var(--laranja); }
.chat__enviar{
  flex:none; width:38px; height:38px; border:0; border-radius:50%;
  background:var(--laranja); cursor:pointer;
  display:grid; place-items:center;
}
.chat__enviar:disabled{ opacity:.4; cursor:default; }
.chat__enviar svg{
  width:19px; height:19px; fill:none; stroke:#3a1c0b; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
/* --------------------------------------------------------------------------
   Carrossel de parceiros — fita de logos deslizando sem fim.
   A lista vai duplicada no HTML e a animação anda -50%: o último quadro é
   igual ao primeiro, então o laço não tem emenda. As bordas somem numa
   máscara, para os cartões não aparecerem cortados na entrada e na saída.
   -------------------------------------------------------------------------- */
.el--carrossel{ display:grid; gap:16px; }

.carrossel__linha{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:linear-gradient(90deg,
    transparent 0, #000 9%, #000 91%, transparent 100%);
}

.carrossel__fita{
  display:flex; gap:16px; width:max-content;
  animation:desliza 26s linear infinite;
  will-change:transform;
}
.carrossel__fita--inversa{ animation-direction:reverse; }

@keyframes desliza{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}

.carrossel__fita img{
  flex:none;
  width:var(--carta-l, 176px); height:var(--carta-a, 110px);
  /* cover recorta o excesso: um dos cartões é quadrado e traria margem
     branca se entrasse inteiro */
  object-fit:cover;
  border-radius:9px;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}

@media (prefers-reduced-motion:reduce){
  .carrossel__fita{ animation:none; }
}
/* --------------------------------------------------------------------------
   Pontos — lista corrida com chamada em destaque e o resto na sequência.
   Usada quando os itens são frases, e não título + explicação (aí é acordeão).
   Seletor composto com .el--lista porque o tipo `lista` aplica as duas classes
   e .el--lista vem depois no arquivo — sem isso ela venceria por ordem.
   Alinhada à esquerda mesmo quando fica na coluna da direita: texto de várias
   linhas com margem esquerda irregular é ruim de ler.
   -------------------------------------------------------------------------- */
.el--lista.el--pontos{
  list-style:none;
  font-size:var(--corpo, 18px); line-height:var(--lh, 26px);
  color:rgba(255,255,255,.90);
  text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 5px rgba(0,0,0,.7);
}
.el--lista.el--pontos li{ position:relative; padding-left:24px;
  margin-bottom:var(--gap-pontos, 19px); }
.el--lista.el--pontos li:last-child{ margin-bottom:0; }
.el--lista.el--pontos li::before{
  content:""; position:absolute; left:0; top:11px;
  width:13px; height:2px; background:var(--laranja);
}
.el--lista.el--pontos strong{ font-weight:700; color:#fff; }

/* destaque dentro dos pontos: mesma cor do título, um pouco mais forte */
.el--lista.el--pontos em{ font-style:normal; color:var(--laranja); font-weight:700; }
/* --------------------------------------------------------------------------
   Acordeão — só os títulos aparecem; clicar abre a explicação.
   É o único elemento clicável das telas, então precisa reativar os cliques
   (o overlay inteiro é pointer-events:none para não roubar o avanço).
   -------------------------------------------------------------------------- */
.el--acordeao{ pointer-events:auto; }

.acordeao__item{ border-top:1px solid rgba(255,255,255,.15); }
.acordeao__item:last-child{ border-bottom:1px solid rgba(255,255,255,.15); }

.acordeao__cabeca{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:12px 2px;
  border:0; background:none; cursor:pointer;
  font-family:inherit; color:var(--texto); text-align:left;
  transition:color .2s;
}
.acordeao__cabeca:hover{ color:var(--laranja); }
.acordeao__cabeca:focus-visible{ outline:2px solid var(--laranja); outline-offset:2px; }

.acordeao__num{
  flex:none; width:26px;
  font-size:14px; font-weight:700; letter-spacing:1px;
  color:var(--laranja); font-variant-numeric:tabular-nums;
}
.acordeao__titulo{
  flex:1; font-size:var(--tit-acordeao, 23px); line-height:1.22; font-weight:600;
  text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 5px rgba(0,0,0,.7);
  text-wrap:balance;
}
.acordeao__seta{
  flex:none; width:17px; height:17px;
  fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.45; transition:transform .38s cubic-bezier(.22,.61,.36,1), opacity .2s;
}
.acordeao__cabeca:hover .acordeao__seta{ opacity:1; }
.acordeao__item.aberto .acordeao__seta{ transform:rotate(180deg); opacity:1; }
.acordeao__item.aberto .acordeao__titulo{ color:var(--laranja); }

/* grid-template-rows 0fr -> 1fr anima até a altura real do conteúdo,
   coisa que max-height não faz sem chutar um valor. */
.acordeao__corpo{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.acordeao__corpo > div{ overflow:hidden; }
.acordeao__corpo p{
  padding:0 2px 15px 40px;
  font-size:19px; line-height:27px; color:rgba(255,255,255,.82);
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.acordeao__item.aberto .acordeao__corpo{ grid-template-rows:1fr; opacity:1; }

.el--lista{ font-size:30px; line-height:52px; list-style:none; }
.el--lista li{ position:relative; padding-left:34px; }
.el--lista li::before{
  content:""; position:absolute; left:0; top:23px;
  width:16px; height:3px; background:var(--laranja);
}

/* ==========================================================================
   CARREGAMENTO
   ========================================================================== */

.loader{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 42%,
             var(--marrom-claro) 0%, var(--marrom-escuro) 62%, #200f03 100%);
  transition:opacity .6s ease, visibility .6s;
}
.loader.oculto{ opacity:0; visibility:hidden; }

.loader__inner{ display:grid; justify-items:center; gap:26px; }

.loader__logo{
  width:min(300px,52vw); height:auto;
  animation:pulsa 2.1s ease-in-out infinite;
}
@keyframes pulsa{ 0%,100%{opacity:.92} 50%{opacity:.55} }

.loader__bar{
  width:min(300px,52vw); height:3px; border-radius:3px;
  background:rgba(255,255,255,.16); overflow:hidden;
}
.loader__fill{
  display:block; height:100%; width:0%;
  background:var(--laranja);
  transition:width .25s ease;
}
.loader__pct{
  font-size:13px; letter-spacing:2.6px; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

/* Botão de início. A abertura não roda sozinha: o navegador só libera áudio
   depois de um gesto, então sem este clique o primeiro filme entraria mudo. */
.loader__comecar{
  display:none;
  margin-top:6px; height:46px; padding:0 26px;
  border:0; border-radius:999px;
  background:var(--laranja); color:#3a1c0b;
  font-family:inherit; font-size:15px; font-weight:700;
  letter-spacing:.4px; cursor:pointer;
  animation:respira 2.4s ease-in-out infinite;
  transition:background .2s, transform .12s;
}
.loader__comecar:hover{ background:#ffb734; }
.loader__comecar:active{ transform:scale(.96); }
.loader__comecar:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.loader.pronta .loader__bar,
.loader.pronta .loader__pct{ display:none; }
.loader.pronta .loader__comecar{ display:block; }
.loader.pronta .loader__logo{ animation:none; opacity:1; }

@keyframes respira{
  0%,100%{ box-shadow:0 0 0 0 rgba(254,166,11,.42) }
  70%    { box-shadow:0 0 0 16px rgba(254,166,11,0) }
}
.loader__marca{
  position:absolute; bottom:38px; left:50%; transform:translateX(-50%);
  font-size:10px; line-height:1;
}

/* ==========================================================================
   INTERFACE
   ========================================================================== */

.ui{
  position:fixed; inset:auto 0 0 0; z-index:40;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; padding:26px 30px;
  transition:opacity .4s ease;
}
.ui.escondida{ opacity:0; pointer-events:none; }

.ui__left{ display:flex; align-items:center; gap:16px; pointer-events:none; }
.ui__right{ display:flex; align-items:center; gap:10px; }

.counter{
  font-size:13px; letter-spacing:2px; color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;
}
.counter b{ color:var(--texto); font-weight:600; }
.counter i{ font-style:normal; margin:0 3px; opacity:.4; }

.dots{ display:flex; gap:1px; }

/* os pontinhos são botões: clicar salta direto para o slide */
.ui__left{ pointer-events:none; }
.dots{ pointer-events:auto; }
.dots button{
  /* 21px de alvo com um ponto de 7px desenhado dentro: o padding entra no
     clique mas nao no fundo, gracas ao background-clip */
  width:21px; height:21px; padding:7px; border:0; border-radius:50%;
  background:rgba(255,255,255,.22); background-clip:content-box;
  cursor:pointer; transition:background .3s, transform .3s;
}
.dots button:hover{ background:rgba(255,255,255,.6); transform:scale(1.3); }
.dots button.on{ background:var(--laranja); transform:scale(1.25); }
.dots button:focus-visible{ outline:2px solid var(--laranja); outline-offset:4px; }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  height:44px; padding:0 15px;
  border:1px solid rgba(255,255,255,.2); border-radius:999px;
  background:rgba(28,14,5,.5); backdrop-filter:blur(9px);
  color:var(--texto); font-family:inherit; font-size:14px; font-weight:600;
  letter-spacing:.3px; cursor:pointer;
  transition:background .22s, border-color .22s, opacity .22s, transform .12s;
}
.btn:hover:not(:disabled){ background:rgba(60,30,10,.72); border-color:rgba(255,255,255,.38); }
.btn:active:not(:disabled){ transform:scale(.96); }
.btn:disabled{ opacity:.3; cursor:default; }
.btn:focus-visible{ outline:2px solid var(--laranja); outline-offset:3px; }

.btn svg{
  width:19px; height:19px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
}
.btn--icon{ width:44px; padding:0; justify-content:center; }

/* o ícone de som troca as ondas pelo X conforme o estado */
#btnSom .som-off{ display:none; }
#btnSom.mudo .som-on { display:none; }
#btnSom.mudo .som-off{ display:inline; }
#btnSom.mudo{ opacity:.55; }
.btn--next{
  background:var(--laranja); border-color:var(--laranja); color:#3a1c0b;
  padding:0 8px 0 19px;
}
.btn--next:hover:not(:disabled){
  background:#ffb734; border-color:#ffb734;
}

.scrollhint{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; align-items:center; gap:11px;
  font-size:12px; letter-spacing:2.4px; text-transform:uppercase;
  color:rgba(255,255,255,.42); white-space:nowrap;
  transition:opacity .5s ease;
}
.scrollhint.oculta{ opacity:0; }
.scrollhint__wheel{
  width:19px; height:29px; border:1.5px solid rgba(255,255,255,.34);
  border-radius:11px; position:relative; flex:none;
}
.scrollhint__wheel i{
  position:absolute; left:50%; top:6px; margin-left:-1.5px;
  width:3px; height:6px; border-radius:2px; background:var(--laranja);
  animation:rola 1.7s ease-in-out infinite;
}
@keyframes rola{
  0%{ transform:translateY(0); opacity:0 }
  35%{ opacity:1 }
  100%{ transform:translateY(11px); opacity:0 }
}

.install{
  position:fixed; top:24px; right:26px; z-index:41;
  height:38px; padding:0 17px;
  border:1px solid rgba(255,255,255,.24); border-radius:999px;
  background:rgba(28,14,5,.55); backdrop-filter:blur(9px);
  color:var(--texto); font-family:inherit; font-size:13px; font-weight:600;
  letter-spacing:.3px; cursor:pointer; transition:background .22s;
}
.install:hover{ background:rgba(60,30,10,.75); }

/* indicador discreto de buffer quando a cena ainda não terminou de baixar */
.buffering{
  position:fixed; top:24px; left:50%; transform:translateX(-50%); z-index:45;
  width:26px; height:26px;
}
.buffering span{
  display:block; width:100%; height:100%; border-radius:50%;
  border:2px solid rgba(255,255,255,.2); border-top-color:var(--laranja);
  animation:gira .8s linear infinite;
}
@keyframes gira{ to{ transform:rotate(360deg) } }

/* ==========================================================================
   RESPONSIVO / ACESSIBILIDADE
   ========================================================================== */

@media (max-width:760px){
  .ui{ padding:18px 16px; }
  .btn--next span{ display:none; }
  .btn--next{ width:44px; padding:0; justify-content:center; }
  .scrollhint{ font-size:10px; letter-spacing:1.6px; bottom:74px; }
  .dots{ display:none; }
  .install{ top:14px; right:14px; height:34px; font-size:12px; }
}

@media (prefers-reduced-motion:reduce){
  .el{ transition-duration:.01ms !important; }
  .loader__logo,.scrollhint__wheel i{ animation:none; }
}