/* Responsive sizing and landing typography. Motion remains the original ZIP's CSS. */
@font-face {font-family:Inter;src:url('../fonts/suisse-400-latin-f534c1b59f.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face {font-family:Inter;src:url('../fonts/suisse-600-latin-41c3bc81c4.woff2') format('woff2');font-weight:500 700;font-display:swap;}
html,body {height:100%;min-height:0;background:transparent;overflow:hidden;}
main {max-width:none;height:100%;margin:0;padding:0;}
.panel {height:100%;border:0;border-radius:0;box-shadow:none;}
.headline {font-size:clamp(32px,4.8vw,52px);text-wrap:balance;}
.term-barra i {display:none;}
.term-barra span {margin:0;text-align:left;}
.panel.revelado .eyebrow {color:#e8dafa;}
.camada-rotulo,.relogio-rot,.exec-cab,.resumo-passo .n {color:#bdb6ca;}
.fase {color:#bbb4c6;}
.fone > div {transform:scale(var(--phone-scale,.78));}
.dots {bottom:12px;gap:6px;}
.dots button {width:32px;height:30px;border-radius:6px;color:#d6cede;background:#ffffff0b;font:11px Inter,system-ui;}
.dots button.on {width:32px;color:#160f21;background:#c8afff;}
.dots button:focus-visible {outline:2px solid white;outline-offset:2px;}
@media(max-width:900px) {
 .pilha-cena {padding:0 28px;}
 .camada {grid-template-columns:110px 1fr;gap:12px;}
 .bloco {padding:12px;gap:8px;}
 .bloco strong {font-size:15px;}
 .bloco.agente {padding:10px 8px;gap:6px;}
 .bloco.agente .ic {width:24px;height:24px;}
 .bloco.agente strong {font-size:14px;}
 .execucao {padding:32px 24px;grid-template-columns:1fr 260px;gap:20px;}
 .exec-cab {left:24px;}
 .etapa {font-size:19px;gap:8px;}
 .relogio {font-size:40px;}
 .fases {font-size:14px;}
 .fones {width:90%;gap:16px;}
 .fone {width:calc((100% - 32px)/3);height:auto;aspect-ratio:280/570;}
 .resumo-cena {padding:24px 28px 48px;}
 .resumo-passos {gap:10px;}
 .resumo-passo {padding:14px 12px;}
 .resumo-passo strong {font-size:17px;}
}
@media(max-width:600px) {
 .frase {padding:0 20px;}
 .headline {font-size:32px;line-height:1.15;}
 .eyebrow {font-size:11px;}
 .pilha-cena {padding:20px 16px 48px;justify-content:center;}
 .pilha-titulo h2 {font-size:26px;line-height:1.12;}
 .pilha {margin-top:22px;gap:16px;}
 .camada {grid-template-columns:1fr;gap:6px;}
 .camada-rotulo {text-align:left;font-size:10px;display:flex;align-items:baseline;gap:8px;}
 .camada-rotulo b {font-size:11px;}
 .camada-blocos {gap:6px;}
 .bloco {padding:10px 8px;gap:8px;min-width:0;}
 .bloco strong {font-size:13px;line-height:1.25;}
 .bloco .ic,.bloco.topo .ic {width:26px;height:28px;flex-shrink:0;}
 .bloco .ic svg {width:17px;height:17px;}
 .bloco.agente {padding:10px 2px;gap:5px;flex-direction:column;}
 .bloco.agente strong {font-size:11px;}
 .bloco.agente .ic {width:20px;height:20px;}
 .prompt-cena {padding:16px;}
 .term {width:100%;max-width:100%;}
 .term-corpo {padding:22px 14px;}
 .p-cab {font-size:12px;}
 .p-pergunta {font-size:21px;}
 .p-opcoes {font-size:18px;padding-left:0;}
 .term-corpo > div {white-space:normal;}
 .fundo-cli {inset:16px;width:calc(100% - 32px);height:calc(100% - 64px);}
 .panel.revelado .fundo-cli {inset:12px 12px 48px;width:calc(100% - 24px);height:calc(100% - 60px);}
 .execucao {display:flex;flex-direction:column;justify-content:center;gap:12px;padding:44px 16px 50px;}
 .exec-cab {left:16px;top:20px;font-size:11px;}
 .exec-cab span {display:none;}
 .roleta {width:100%;height:180px;flex-shrink:0;}
 .etapa {font-size:16px;gap:6px;white-space:normal;line-height:1.2;}
 .etapa .num {font-size:12px;}
 .etapa .marca {width:18px;flex-shrink:0;}
 .lado {width:100%;gap:12px;}
 .relogio {font-size:38px;}
 .relogio-rot {font-size:10px;}
 .barra-etapas {font-size:12px;}
 .fases {font-size:12px;gap:8px;}
 .fase {gap:6px;}
 .concluido {padding:20px;text-align:center;}
 .concluido h2 {font-size:30px;}
 .concluido p {font-size:16px;line-height:1.6;max-width:260px;}
 .app-cena {padding:28px 10px 50px;justify-content:center;}
 .app-cena h2 {font-size:26px;line-height:1.2;padding:0 10px;}
 .fones {width:100%;gap:8px;margin-top:32px;}
 .fone {width:calc((100% - 16px)/3);}
 .resumo-cena {padding:24px 16px 48px;}
 .resumo-cena h2 {font-size:26px;}
 .resumo-passos {margin-top:20px;grid-template-columns:1fr 1fr;gap:8px;}
 .resumo-passo {padding:12px;}
 .resumo-passo .n {font-size:10px;}
 .resumo-passo strong {font-size:15px;margin-top:8px;}
 .resumo-passo p {font-size:12px;line-height:1.35;}
 .resumo-passo::after {display:none;}
 .resumo-fecho {font-size:14px;margin-top:16px;text-align:center;}
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after {animation:none!important;transition:none!important;}
}
/* The original 280×570 screens are scaled inside a device-sized layout box. */
.fone {position:relative;overflow:hidden;}
.fone > div {position:absolute;left:0;top:0;width:280px;height:570px;}
@media(max-width:600px) {
 .bloco.topo strong {font-size:13px;line-height:1.25;}
 .bloco > div {min-width:0;}
}
@media(max-width:600px) {
 .bloco.topo {padding:10px 8px;}
 .resumo-passos {grid-template-columns:repeat(2,minmax(0,1fr));}
 .resumo-passo {min-width:0;}
 .resumo-passo strong {font-size:14px;overflow-wrap:anywhere;}
 .resumo-passo .n {display:block;font-size:9px;line-height:1.3;}
}
@media(max-width:300px) {
 .resumo-passo {padding:10px 8px;}
 .resumo-passo strong {font-size:13px;}
 .pilha-titulo h2,.resumo-cena h2 {font-size:24px;}
}

.scene:not(.on) .caret {animation-play-state:paused;}