/* ===== Vídeo institucional animado ===== */
.video {
  --light: #f7f7f7; /* mesmo tom do fundo da imagem do logo */
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  container-type: inline-size;
  border-radius: 18px; overflow: hidden;
  background: var(--light);
  box-shadow: 0 24px 60px rgba(92, 7, 16, .22), 0 0 0 1px rgba(0, 0, 0, .05);
  font-family: var(--font-head);
  isolation: isolate;
}
.scene {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 7cqw 7cqw 10cqw;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.scene.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; z-index: 1; }
.scene-light {
  background:
    radial-gradient(60cqw 40cqw at 100% 0%, rgba(208, 21, 31, .08), transparent 70%),
    radial-gradient(50cqw 35cqw at 0% 100%, rgba(154, 156, 161, .18), transparent 70%),
    var(--light);
  color: var(--ink);
}
.scene-dark {
  background:
    radial-gradient(70cqw 50cqw at 85% 15%, rgba(208, 21, 31, .55), transparent 65%),
    linear-gradient(140deg, #1f1f23 0%, #3a0a10 60%, #5c0710 100%);
  color: #fff;
}
.scene-dark-2 {
  background:
    radial-gradient(60cqw 50cqw at 10% 90%, rgba(208, 21, 31, .45), transparent 65%),
    linear-gradient(200deg, #1f1f23 0%, #3a0a10 55%, #8e0c18 100%);
}

/* Animações: só rodam na cena ativa */
.scene .a-up, .scene .a-zoom, .scene .a-pop { opacity: 0; }
.scene.is-active .a-up   { animation: v-up .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
.scene.is-active .a-zoom { animation: v-zoom 1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
.scene.is-active .a-pop  { animation: v-pop .55s cubic-bezier(.3, 1.5, .5, 1) var(--d, 0s) both; }
@keyframes v-up   { from { opacity: 0; transform: translateY(3cqw); } to { opacity: 1; transform: none; } }
@keyframes v-zoom { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes v-pop  { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

.video.is-paused .scene,
.video.is-paused .scene * { animation-play-state: paused !important; }

/* Cena 1 */
.scene-logo { background: var(--light); padding-bottom: 9cqw; }
.v-logo { width: 56cqw; }
.v-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .75) 50%, transparent 60%);
  transform: translateX(-100%);
}
.scene.is-active .v-shine { animation: v-shine 1.4s ease 1.2s both; }
@keyframes v-shine { to { transform: translateX(100%); } }

/* Títulos */
.v-title { color: inherit; font-size: 6.2cqw; font-weight: 600; line-height: 1.15; margin: 0; }
.v-title span { color: #ff5a63; }
.scene-light .v-title span { color: var(--red-600); }

/* Cena 2 */
.v-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 5cqw; align-items: center; width: 100%; }
.v-checklist {
  list-style: none; margin: 0; padding: 3.2cqw 3.4cqw;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 2.4cqw;
  display: grid; gap: 2.2cqw;
}
.v-checklist li { display: flex; align-items: center; gap: 2cqw; font-family: var(--font-body); font-size: 3cqw; font-weight: 600; }
.v-tick {
  width: 4.4cqw; height: 4.4cqw; flex: none; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  display: grid; place-items: center;
}
.v-tick svg { width: 70%; height: 70%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.scene.is-active .v-tick { animation: v-tickbg .3s ease var(--d) both; }
.scene.is-active .v-tick svg { animation: v-draw .4s ease calc(var(--d) + .1s) both; }
@keyframes v-tickbg { to { background: var(--red-500); border-color: var(--red-500); } }
@keyframes v-draw { to { stroke-dashoffset: 0; } }

/* Cena 3 */
.scene-dark-2 { place-items: end center; }
.v-chart {
  position: absolute; left: 10cqw; right: 10cqw; top: 8cqw; height: 26cqw;
  display: flex; align-items: flex-end; gap: 3.5cqw;
  border-bottom: 2px solid rgba(255, 255, 255, .25);
}
.v-chart span {
  flex: 1; height: var(--h); border-radius: 1cqw 1cqw 0 0;
  background: linear-gradient(180deg, #d9dadd, #9a9ca1);
  transform-origin: bottom; transform: scaleY(0);
}
.v-chart span:last-of-type { background: linear-gradient(180deg, #ff5a63, var(--red-600)); }
.scene.is-active .v-chart span { animation: v-grow .8s cubic-bezier(.2, .7, .2, 1) var(--d) both; }
@keyframes v-grow { to { transform: scaleY(1); } }
.v-trend { position: absolute; inset: 0 0 2% 0; width: 100%; height: 100%; overflow: visible; }
.v-trend path { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-width: 3; stroke-dasharray: 140; stroke-dashoffset: 140; }
.scene.is-active .v-trend path { animation: v-line 1.2s ease 1s both; }
@keyframes v-line { to { stroke-dashoffset: 0; } }
.v-title-bottom { text-align: center; font-size: 5.2cqw; }

/* Cena 4 */
.scene:has(.v-grid) { align-content: center; gap: 3cqw; }
.v-kicker { margin: 0; font-size: 2.4cqw; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--red-600); }
.v-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8cqw; }
.v-chip {
  display: inline-flex; align-items: center; gap: 1.4cqw;
  padding: 1.5cqw 2.4cqw; border-radius: 999px;
  background: #fff; box-shadow: 0 .6cqw 2cqw rgba(0, 0, 0, .08);
  font-size: 2.6cqw; font-weight: 500; color: var(--ink);
}
.v-chip svg { width: 3.6cqw; height: 3.6cqw; color: var(--red-600); }

/* Cena 5 */
@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }
.v-years { display: flex; align-items: center; gap: 4cqw; }
.v-count {
  --n: 5;
  font-size: 26cqw; font-weight: 700; line-height: .9;
  background: linear-gradient(180deg, #fff, #d9dadd 60%, #9a9ca1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  counter-reset: n var(--n);
}
.v-count::after { content: counter(n); }
.scene.is-active .v-count { animation: v-zoom .8s cubic-bezier(.2, .7, .2, 1) both, v-count 1.2s steps(5, end) .1s both; }
@keyframes v-count { from { --n: 0; } to { --n: 5; } }
.v-years-text { font-size: 3.6cqw; line-height: 1.25; margin: 0 0 2.2cqw; }
.v-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2cqw; max-width: 58cqw; }
.v-pills li {
  padding: 1cqw 2.2cqw; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  font-size: 2.5cqw; font-weight: 500;
}
.v-pills li:first-child, .v-pills li:nth-child(2) { background: var(--red-500); border-color: var(--red-500); }

/* Cena: região e rotinas */
.v-local { width: 100%; text-align: center; }
.v-place-big {
  display: inline-flex; align-items: center; gap: 1.4cqw; margin: 0 0 2cqw;
  font-size: 2.4cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--red-600);
}
.v-pin {
  width: 5cqw; height: 5cqw; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: linear-gradient(135deg, var(--red-500), var(--red-900)); color: #fff;
}
.v-pin svg { width: 60%; height: 60%; }
.v-pin::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--red-500); opacity: 0;
}
.scene.is-active .v-pin::after { animation: v-ripple 1.6s ease-out .6s 3; }
@keyframes v-ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(2.2); opacity: 0; } }
.v-local-text { margin: 0 auto 4.5cqw; max-width: 70cqw; font-size: 3.6cqw; font-weight: 500; line-height: 1.3; color: var(--ink); }
.v-local-text strong { color: var(--red-600); font-weight: 600; }
.v-path { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
.v-path-line {
  position: absolute; left: 16.6%; right: 16.6%; top: 1.3cqw; height: 2px;
  background: var(--red-600); transform-origin: left; transform: scaleX(0);
}
.scene.is-active .v-path-line { animation: v-grow-x 1.6s ease 1.4s both; }
@keyframes v-grow-x { to { transform: scaleX(1); } }
.v-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; font-size: 2.5cqw; font-weight: 500; color: var(--ink); }
.v-dot { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: #fff; border: .6cqw solid var(--red-600); }

/* Cena: contabilidade próxima (conversa) */
.v-chat-wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 5cqw; align-items: center; width: 100%; }
.v-chat { display: flex; flex-direction: column; gap: 1.6cqw; }
.v-bubble {
  max-width: 92%; padding: 1.6cqw 2.2cqw; border-radius: 2.2cqw;
  font-family: var(--font-body); font-size: 2.5cqw; line-height: 1.35;
}
.v-bubble-in { align-self: flex-start; background: rgba(255, 255, 255, .14); border-bottom-left-radius: .6cqw; }
.v-bubble-out { align-self: flex-end; background: #fff; color: var(--ink); border-bottom-right-radius: .6cqw; }
.v-typing, .v-reply { display: none; }
.scene.is-active .v-typing { display: flex; gap: .8cqw; animation: v-typing-life 1.1s linear var(--d) both; }
.scene.is-active .v-reply { display: block; animation: v-up .6s cubic-bezier(.2, .7, .2, 1) var(--d) both; }
@keyframes v-typing-life { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; height: 0; padding: 0; margin: -1.6cqw 0 0; } }
.v-typing i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--silver-3); animation: v-dots .9s ease-in-out infinite; }
.v-typing i:nth-child(2) { animation-delay: .15s; }
.v-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes v-dots { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-.6cqw); opacity: 1; } }
.v-chat-title { font-size: 4.4cqw; }

/* Cena 6 */
.v-end { text-align: center; }
.v-end-mark { width: 21cqw; height: 14cqw; margin: 0 auto 2.5cqw; }
.v-end-line { margin: 0; font-size: 5.4cqw; font-weight: 600; line-height: 1.2; color: var(--ink); }
.v-end-red { color: var(--red-600); }
.v-end-brand {
  margin: 2.4cqw 0 0; font-size: 3cqw; font-weight: 700;
  background: linear-gradient(180deg, var(--red-500), var(--red-900));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Controles */
.v-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .28), transparent);
}
.v-play {
  width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--red-700);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.v-play svg { width: 16px; height: 16px; fill: currentColor; }
.v-play .i-play, .video.is-paused .v-play .i-pause { display: none; }
.video.is-paused .v-play .i-play { display: block; }
.v-progress { flex: 1; display: flex; gap: 6px; }
.v-seg {
  flex: 1; height: 14px; padding: 5px 0; border: 0; background: none; cursor: pointer;
}
.v-seg span { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .45); overflow: hidden; }
.v-seg i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; will-change: transform; }
.v-play:focus-visible, .v-seg:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }


@media (prefers-reduced-motion: reduce) {
  /* vídeo começa pausado e as cenas aparecem já montadas */
  .scene * { animation: none !important; }
  .scene .a-up, .scene .a-zoom, .scene .a-pop { opacity: 1; }
  .v-chart span { transform: none; }
  .v-tick { background: var(--red-500); border-color: var(--red-500); }
  .v-tick svg, .v-trend path { stroke-dashoffset: 0; }
  .v-path-line { transform: none; }
  .v-reply { display: block; }
  .scene.is-active .v-typing { display: none; }
}