/* Seção "A diferença": a mesma frase no look padrão de IA e com as fontes e o borrão reais do kit.
   Fontes do kit (OFL): Archivo e Geist (tela dividida), Inter Tight e Instrument Serif (edit falando). */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url(fonts/Archivo-latin.woff2) format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/InterTight-latin.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/InstrumentSerif-Italic-latin.woff2) format("woff2"); }

.dif-cab { margin-bottom: 32px; }

.dif-duelo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 760px; margin: 0 auto;
}
@media (min-width: 768px) { .dif-duelo { gap: 28px; } }

.dif-lado { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.dif-rotulo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-family: var(--fm); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3);
}
.dif-rotulo b { color: var(--tx); font-weight: 600; }
.dif-lado-kit .dif-rotulo b { color: var(--az-tx); }
.dif-rotulo small { font-size: 10px; color: var(--tx-3); text-transform: none; letter-spacing: 0; }

/* Palco 9:16, medido em fração da largura (1080 de referência: 60 px = 5,56cqw) */
.dif-palco {
  position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden;
  container-type: inline-size; isolation: isolate;
  border: 1px solid var(--linha-2);
}

/* ---------- Look padrão (ilustração) ---------- */
.dif-padrao { background: linear-gradient(165deg, #6A4BFF 0%, #A65CFF 55%, #E37BFF 100%); }
.dif-padrao .pp-frase {
  position: absolute; left: 8cqw; right: 8cqw; top: 50%; transform: translateY(-50%);
  text-align: center; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700; font-size: 8.4cqw; line-height: 1.2; color: #fff;
  background: rgba(0, 0, 0, .45); border-radius: 4cqw; padding: 4cqw 5cqw;
  opacity: 0;
}
.dif-padrao .pp-frase em { font-style: normal; color: #FFE600; }
.dif-padrao .pp-emoji { position: absolute; right: 9cqw; top: 22%; font-size: 11cqw; opacity: 0; }
.dif-padrao.toca .pp-frase { animation: pp-fade .3s linear forwards; }
.dif-padrao.toca .pp-emoji { animation: pp-fade .3s linear .35s forwards; }
@keyframes pp-fade { to { opacity: 1; } }

/* ---------- Com o meu kit ---------- */
.dif-kit { background: var(--k-bg); color: var(--k-tx); transition: background-color .25s; }
.dif-kit .kk-hud {
  position: absolute; left: 6cqw; right: 6cqw; top: 6cqw; display: flex; justify-content: space-between;
  font-family: "Geist Mono", var(--fm); font-size: 3.4cqw; letter-spacing: .04em; color: var(--k-tx); opacity: .8; z-index: 3;
}
.dif-kit .kk-hud i { display: inline-block; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--k-ac); margin-right: 1.4cqw; vertical-align: .1em; }
.dif-kit .kk-canto { position: absolute; width: 7cqw; height: 7cqw; border: 0 solid var(--k-tx); opacity: .55; z-index: 3; }
.dif-kit .kk-c1 { left: 4cqw; top: 13cqw; border-left-width: 2px; border-top-width: 2px; }
.dif-kit .kk-c2 { right: 4cqw; bottom: 13cqw; border-right-width: 2px; border-bottom-width: 2px; }

.dif-kit .kk-fio { position: absolute; left: 0; right: 0; height: 1.2cqw; background: var(--k-sec); bottom: 30%; transform-origin: left; transform: scaleX(0); z-index: 1; }
.dif-kit.toca .kk-fio { animation: kk-fio .5s var(--sobe) .05s forwards; }
@keyframes kk-fio { to { transform: scaleX(1); } }

.dif-kit .kk-texto {
  position: absolute; left: 7cqw; right: 7cqw; top: 30%; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1cqw;
}
.dif-kit .kk-linha { display: block; overflow: visible; }
.dif-kit .kk-pal { display: inline-block; opacity: 0; will-change: transform, filter, opacity; }
.dif-kit .kk-l1 { font-family: var(--k-f-ui); font-weight: var(--k-w-ui, 500); font-size: 8.6cqw; line-height: 1.05; letter-spacing: -.015em; }
.dif-kit .kk-l2 {
  font-family: var(--k-f-disp); font-weight: var(--k-w-disp); font-stretch: var(--k-larg, 100%); font-style: var(--k-st, normal);
  font-size: var(--k-tam, 21cqw); line-height: .9; letter-spacing: var(--k-esp, -.03em); color: var(--k-ac);
}
.dif-kit .kk-l3 { font-family: var(--k-f-ui); font-weight: 400; font-size: 5.2cqw; line-height: 1.2; opacity: .85; margin-top: 3cqw; }
.dif-kit .kk-l3 .kk-pal { opacity: 0; }

/* A regra do kit: sobe 60 px (de 1080) em 7 quadros (233 ms), com desfoque desenhado que some junto */
.dif-kit.toca .kk-pal { animation: kk-sobe var(--t7, 233ms) var(--sobe) forwards; animation-delay: var(--a, 0ms); }
@keyframes kk-sobe {
  from { opacity: 0; transform: translateY(5.56cqw); filter: blur(2.6cqw); }
  60%  { opacity: 1; filter: blur(.5cqw); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.dif-kit .kk-l3 .kk-pal { --o: .85; }

.dif-kit .kk-estilo {
  position: absolute; left: 6cqw; bottom: 6cqw; z-index: 3;
  font-family: "Geist Mono", var(--fm); font-size: 3.2cqw; letter-spacing: .05em; text-transform: uppercase; opacity: .75;
}
.dif-kit .kk-regra {
  position: absolute; right: 6cqw; bottom: 6cqw; z-index: 3;
  font-family: "Geist Mono", var(--fm); font-size: 3.2cqw; padding: 1cqw 2cqw; border-radius: 99px;
  background: color-mix(in srgb, var(--k-tx) 12%, transparent); opacity: 0;
}
.dif-kit.toca .kk-regra { animation: pp-fade .2s linear .9s forwards; }

/* Edit falando: texto por cima da pessoa, serifa itálica de acento */
.dif-kit[data-estilo="edit-falando"] .kk-foto {
  position: absolute; inset: 0; background: center 20% / cover no-repeat var(--k-foto); z-index: 0;
}
.dif-kit[data-estilo="edit-falando"] .kk-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55) 70%); }
.dif-kit[data-estilo="edit-falando"] .kk-fio { display: none; }
.dif-kit[data-estilo="edit-falando"] .kk-texto { top: auto; bottom: 30%; }
.dif-kit .kk-foto { display: none; }
.dif-kit[data-estilo="edit-falando"] .kk-foto { display: block; }

/* Estilos (cores e fontes de kit/skills/tela-dividida/assets/estilos.json) */
.dif-kit[data-estilo="noturno"]         { --k-bg:#0B1026; --k-tx:#F5F5FF; --k-ac:#FF3DA5; --k-sec:#4B5BFF; --k-f-disp:"Archivo"; --k-w-disp:800; --k-larg:125%; --k-tam:25cqw; --k-f-ui:"Geist"; }
.dif-kit[data-estilo="laranja-cobalto"] { --k-bg:#EEE9DF; --k-tx:#141416; --k-ac:#FF5A1F; --k-sec:#3341F2; --k-f-disp:"Archivo"; --k-w-disp:900; --k-larg:112%; --k-tam:27cqw; --k-f-ui:"Geist"; }
.dif-kit[data-estilo="acido"]           { --k-bg:#0A0A0A; --k-tx:#F2F2EC; --k-ac:#C6FF3D; --k-sec:#1E1E22; --k-f-disp:"Archivo"; --k-w-disp:900; --k-larg:75%;  --k-tam:38cqw; --k-esp:-.02em; --k-f-ui:"Geist"; }
.dif-kit[data-estilo="editorial"]       { --k-bg:#F1EADF; --k-tx:#1B1A17; --k-ac:#C2522D; --k-sec:#2F5D50; --k-f-disp:"Archivo"; --k-w-disp:700; --k-larg:100%; --k-tam:30cqw; --k-f-ui:"Geist"; }
.dif-kit[data-estilo="clean"]           { --k-bg:#F4F6FA; --k-tx:#0E1116; --k-ac:#2457FF; --k-sec:#16C784; --k-f-disp:"Geist"; --k-w-disp:700; --k-larg:100%; --k-tam:30cqw; --k-f-ui:"Geist"; }
.dif-kit[data-estilo="edit-falando"]    { --k-bg:#111; --k-tx:#FFFFFF; --k-ac:#8FB0FF; --k-sec:#6383EA; --k-f-disp:"Instrument Serif"; --k-w-disp:400; --k-st:italic; --k-tam:40cqw; --k-esp:-.01em; --k-f-ui:"Inter Tight"; --k-w-ui:300; --k-foto:url(img/bruto-916-720.webp); }

.dif-acoes { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; margin: 24px auto 0; }
.dif-sorteia {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 500 15px/1 var(--f); color: var(--tx); background: rgba(255,255,255,.06);
  border: 1px solid var(--linha-2); border-radius: 99px; padding: 13px 20px;
  transition: background .2s, border-color .2s;
}
.dif-sorteia:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); }
.dif-sorteia .dado { width: 18px; height: 18px; }
.dif-sorteia.gira .dado { animation: dif-gira .45s var(--sobe); }
@keyframes dif-gira { to { transform: rotate(180deg); } }
.dif-de-novo { font: 500 14px/1 var(--f); color: var(--tx-2); background: none; border: 0; cursor: pointer; padding: 8px 4px; text-decoration: underline; text-underline-offset: 4px; }
.dif-de-novo:hover { color: var(--tx); }

.dif-listas { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 920px; margin: 44px auto 0; }
@media (min-width: 768px) { .dif-listas { grid-template-columns: 1fr 1fr; gap: 20px; } }
.dif-lista { border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px 22px 18px; background: rgba(255,255,255,.02); }
.dif-lista-kit { border-color: rgba(92,141,255,.35); background: linear-gradient(180deg, rgba(26,75,255,.10), rgba(26,75,255,.02)); position: relative; }
.dif-lista-kit::before { content: ""; position: absolute; left: 22px; top: -1px; width: 48px; height: 3px; border-radius: 0 0 3px 3px; background: var(--az-grad); }
.dif-lista h3 { font-size: 15px; font-weight: 600; margin: 0 0 12px; color: var(--tx); }
.dif-lista-padrao h3 { color: var(--tx-2); }
.dif-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dif-lista li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--tx-2); }
.dif-lista li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 2px; background: var(--tx-3); }
.dif-lista-kit li { color: var(--tx); }
.dif-lista-kit li::before { width: 10px; height: 10px; top: .45em; border-radius: 3px; background: var(--az-grad); }

.dif-fecho { text-align: center; max-width: 640px; margin: 40px auto 0; font-size: 19px; line-height: 1.5; color: var(--tx-2); }
.dif-fecho b { color: var(--tx); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .dif-padrao .pp-frase, .dif-padrao .pp-emoji, .dif-kit .kk-pal, .dif-kit .kk-regra { opacity: 1 !important; animation: none !important; transform: none !important; filter: none !important; }
  .dif-kit .kk-fio { transform: none; animation: none !important; }
}
.sem-motion .dif-padrao .pp-frase, .sem-motion .dif-padrao .pp-emoji, .sem-motion .dif-kit .kk-pal, .sem-motion .dif-kit .kk-regra { opacity: 1 !important; animation: none !important; transform: none !important; filter: none !important; }

/* Cada estilo também muda a composição, não só a cor */
.dif-kit[data-estilo="noturno"] .kk-texto { top: auto; bottom: 31%; }
.dif-kit[data-estilo="laranja-cobalto"] .kk-fio { height: 26%; bottom: 0; }
.dif-kit[data-estilo="laranja-cobalto"] .kk-texto { top: 34%; }
.dif-kit[data-estilo="acido"] .kk-texto { flex-direction: column-reverse; top: 22%; gap: 3cqw; }
.dif-kit[data-estilo="acido"] .kk-l1 { font-family: "Geist Mono", var(--fm); font-size: 5.4cqw; text-transform: uppercase; letter-spacing: .04em; }
.dif-kit[data-estilo="acido"] .kk-fio { background: var(--k-ac); height: .8cqw; bottom: 38%; }
.dif-kit[data-estilo="editorial"] .kk-texto { align-items: center; text-align: center; top: 36%; }
.dif-kit[data-estilo="editorial"] .kk-l1 { font-family: "Geist Mono", var(--fm); font-size: 4.6cqw; text-transform: uppercase; letter-spacing: .12em; }
.dif-kit[data-estilo="editorial"] .kk-fio { left: 30%; right: 30%; height: .6cqw; bottom: 40%; background: var(--k-tx); }
.dif-kit[data-estilo="clean"] .kk-texto { top: 24%; }
.dif-kit[data-estilo="clean"] .kk-fio { left: 7cqw; right: auto; width: 34cqw; height: 2.4cqw; border-radius: 99px; bottom: auto; top: 58%; background: var(--k-sec); }
.dif-kit[data-estilo="laranja-cobalto"] .kk-estilo, .dif-kit[data-estilo="laranja-cobalto"] .kk-c2 { color: #fff; border-color: #fff; }
.dif-kit[data-estilo="laranja-cobalto"] .kk-regra { color: #fff; background: rgba(255,255,255,.16); }

/* Seção "Reconhece?": três cartões ocupando a largura toda */
@media (min-width: 768px) { .cena-sec .junto { grid-template-columns: repeat(3, 1fr); } }

/* VSL no topo: botão "Clique para ouvir" sobre o celular */
.vsl-ouvir {
  position: absolute; left: 50%; top: 27%; transform: translate(-50%, -50%); z-index: 5;
  display: grid; justify-items: center; gap: 5px; padding: 14px 18px; width: max-content; max-width: 86%;
  border: 1px solid rgba(255,255,255,.28); border-radius: 18px; cursor: pointer;
  background: linear-gradient(160deg, rgba(26,75,255,.92), rgba(92,141,255,.88));
  color: #fff; font: 500 13px/1.2 var(--f); box-shadow: 0 18px 50px rgba(26,75,255,.45);
  animation: vsl-pulso 2.4s var(--ease) infinite;
}
.vsl-ouvir b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.vsl-ouvir small { opacity: .8; font-size: 11px; white-space: nowrap; }
.vsl-ouvir-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); }
@keyframes vsl-pulso { 0%, 100% { box-shadow: 0 18px 50px rgba(26,75,255,.45); } 50% { box-shadow: 0 18px 70px rgba(92,141,255,.75); } }
@media (prefers-reduced-motion: reduce) { .vsl-ouvir { animation: none; } }
.vsl-no-topo video { cursor: pointer; }