/* Demo guiada: celular com o vídeo à esquerda, etapas e linha do tempo à direita. */
.demo-guiada { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; background: var(--superficie); border: 1px solid var(--linha); border-radius: 20px; padding: 24px; margin-top: 8px; }
@media (max-width: 760px) { .demo-guiada { grid-template-columns: 1fr; padding: 16px; } .dg-celular { max-width: 220px; justify-self: center; width: 100%; } }

/* Celular */
.dg-celular { border: 1px solid var(--linha); border-radius: 30px; padding: 8px; background: #050506; }
.dg-tela { position: relative; aspect-ratio: 9 / 16; border-radius: 23px; overflow: hidden; background: radial-gradient(120% 70% at 50% 18%, #3a221d, #120d0c 70%); }
.dg-etiqueta { position: absolute; top: 12px; left: 12px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); background: rgba(0, 0, 0, 0.45); padding: 4px 8px; border-radius: 999px; }
.dg-relogio { position: absolute; top: 12px; right: 12px; font-size: 12px; color: var(--texto); background: rgba(0, 0, 0, 0.45); padding: 4px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.dg-pessoa { position: absolute; left: 50%; bottom: 0; width: 72%; aspect-ratio: 1 / 1.15; transform: translateX(-50%); }
.dg-pessoa::before { content: ""; position: absolute; left: 50%; top: 4%; width: 42%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(160deg, #6b4a42, #3b2823); }
.dg-pessoa::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; border-radius: 48% 48% 0 0; background: linear-gradient(160deg, #5a3d36, #2c1e1a); }
.tocando .dg-pessoa::before { animation: dg-fala 0.5s ease-in-out infinite alternate; }
@keyframes dg-fala { to { transform: translateX(-50%) translateY(2px) rotate(1deg); } }
.dg-legenda { position: absolute; left: 8%; right: 8%; bottom: 16%; margin: 0; text-align: center; font-weight: 700; font-size: clamp(15px, 4.6vw, 19px); line-height: 1.3; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); z-index: 1; }
.dg-legenda span { border-radius: 4px; transition: background 0.1s; }
.dg-legenda span.ativa { background: var(--coral); color: var(--tinta-botao); text-shadow: none; padding-inline: 2px; }

/* Painel */
.dg-painel { display: grid; gap: 16px; min-width: 0; }
.dg-etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: etapa; }
.dg-etapas li { counter-increment: etapa; display: flex; align-items: center; gap: 10px; color: var(--suave); font-size: 15px; }
.dg-etapas li::before { content: counter(etapa); flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linha); font-size: 12px; font-weight: 700; }
.dg-etapas li.atual { color: var(--texto); }
.dg-etapas li.atual::before { border-color: var(--coral); color: var(--coral); animation: dg-pulso 0.9s ease-in-out infinite alternate; }
.dg-etapas li.feita { color: var(--texto); }
.dg-etapas li.feita::before { content: "✓"; background: var(--coral); border-color: var(--coral); color: var(--tinta-botao); }
@keyframes dg-pulso { to { box-shadow: 0 0 0 4px var(--coral-fundo); } }

/* Linha do tempo */
.dg-linha { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 12px; align-items: center; background: var(--fundo); border: 1px solid var(--linha); border-radius: 12px; padding: 14px; }
.dg-rotulo-faixa { font-size: 12px; color: var(--suave); }
.dg-faixa { display: flex; gap: 2px; height: 34px; min-width: 0; }
.dg-faixa-legenda { height: 18px; }
.dg-bloco, .dg-bloco-leg { position: relative; flex-basis: 0; min-width: 0; border-radius: 5px; overflow: hidden; transition: flex-grow 0.8s ease, opacity 0.5s ease, background 0.3s ease; }
.dg-bloco.fala { background: repeating-linear-gradient(90deg, rgba(237, 111, 92, 0.75) 0 2px, rgba(237, 111, 92, 0.3) 2px 5px); }
.dg-bloco.pausa { background: var(--superficie-2); }
.dg-bloco.repeticao { background: repeating-linear-gradient(90deg, rgba(168, 167, 173, 0.5) 0 2px, rgba(168, 167, 173, 0.18) 2px 5px); }
.dg-bloco i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 10px; letter-spacing: 0.04em; color: var(--tinta-botao); font-weight: 700; opacity: 0; white-space: nowrap; }
.marcado .dg-bloco.pausa, .marcado .dg-bloco.repeticao { background: repeating-linear-gradient(135deg, var(--coral) 0 6px, var(--coral-forte) 6px 12px); }
.marcado .dg-bloco i { opacity: 1; }
.cortado .dg-bloco.pausa, .cortado .dg-bloco.repeticao, .cortado .dg-bloco-leg.pausa, .cortado .dg-bloco-leg.repeticao { flex-grow: 0 !important; opacity: 0; margin: 0; }
.dg-bloco-leg { background: transparent; }
.legendado .dg-bloco-leg.fala { background: var(--texto); opacity: 0.85; }
.dg-cursor { position: absolute; top: 8px; bottom: 8px; width: 2px; background: #fff; border-radius: 2px; left: calc(14px + 64px + 12px + (100% - 28px - 64px - 12px) * var(--p, 0)); opacity: 0; pointer-events: none; }
.tocando .dg-cursor { opacity: 1; }

.dg-transcricao { margin: 0; min-height: 3em; color: var(--suave); font-size: 15px; border-left: 2px solid var(--linha); padding-left: 12px; }
.dg-transcricao:empty { display: none; }
.dg-agenda { display: grid; gap: 2px; border: 1px solid var(--coral); background: var(--coral-fundo); border-radius: 12px; padding: 12px 14px; }
.dg-agenda[hidden] { display: none; }
.dg-agenda span { color: var(--suave); font-size: 14px; }
.dg-status { margin: 0; font-size: 15px; color: var(--texto); }
.dg-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.dg-botoes [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.dg-bloco, .dg-bloco-leg, .dg-legenda span { transition: none; }
	.tocando .dg-pessoa::before, .dg-etapas li.atual::before { animation: none; }
}

/* Vídeo da demonstração */
.dg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; cursor: pointer; }
.dg-etiqueta, .dg-relogio { z-index: 1; }
.dg-legenda { z-index: 2; pointer-events: none; }

/* Posição da demo: no celular ela fica logo depois da abertura. */
.demo-bloco { display: grid; gap: 18px; min-width: 0; }
.demo-celular { padding-top: 40px; }
.demo-celular[hidden] { display: none; }
@media (max-width: 760px) {
	/* No celular, o status e os botões ficam logo abaixo do vídeo. */
	.dg-painel { display: flex; flex-direction: column; }
	.dg-status { order: -2; }
	.dg-botoes { order: -1; }
	.dg-botoes .botao { flex: 1 1 auto; }
}
/* Relógio no canto de baixo, para não disputar espaço com a etiqueta no celular. */
.dg-relogio { top: auto; bottom: 10px; right: 10px; }

/* Botão de som no canto de cima do aparelho. */
.dg-som { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.55); color: #fff; font: 700 12px/1 var(--fonte); cursor: pointer; }
.dg-som:hover { border-color: var(--coral); }
.dg-som.ligado { background: var(--coral); border-color: var(--coral); color: var(--tinta-botao); }
@media (max-width: 760px) {
	.dg-som { min-width: 36px; min-height: 36px; padding: 6px; justify-content: center; }
	.dg-som span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Abertura em telas largas: texto à esquerda e o vídeo editado tocando à direita. */
@media (min-width: 980px) {
	.abertura { grid-template-columns: minmax(0, 1fr) 290px; column-gap: 56px; align-items: center; }
	.abertura .tela-destaque { grid-column: 1 / -1; }
}
.abertura-demo { display: grid; gap: 14px; justify-items: center; }
.abertura-demo[hidden] { display: none; }
.dg-celular-abertura { width: 100%; box-shadow: 0 40px 90px rgba(237, 111, 92, 0.18), 0 20px 50px rgba(0, 0, 0, 0.6); transform: rotate(2deg); }
.dg-celular-abertura .dg-legenda { font-size: 17px; }
.dg-pausa { min-width: 34px; justify-content: center; padding: 6px; }
.abertura-demo-link { font-size: 15px; font-weight: 700; color: var(--coral); text-decoration: none; }
.abertura-demo-link::after { content: " ↓"; }
.abertura-demo-link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .dg-celular-abertura { transform: none; } }