/* 07 Da venda à gestão: um notebook com o funil da loja de purificadores e três momentos dentro dele (funil, assistente,
   pós-venda). As telas são desenhadas em HTML no casco claro do sistema; o gestao.js escreve transform e opacity.
   Na cena o notebook fica e os momentos trocam dentro dele; empilhada, cada momento é um bloco com o seu notebook */
.s7{--marca:oklch(0.64 0.19 245);--marca-suave:oklch(0.94 0.035 240);--verde:oklch(0.62 0.15 152);--tinta-3:oklch(0.58 0.02 250);--claro-3:oklch(0.66 0.02 248);background:linear-gradient(180deg,var(--noite) 0,oklch(0.16 0.024 250) 100%);overflow:clip}

/* texto: rótulo de máquina com o nome do momento em azul e três tracinhos, título 48, apoio de uma frase */
.s7 .rot{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--claro-3)}
.s7 .rot em{font-style:normal;color:var(--luz)}
.passos{display:flex;gap:6px;margin-top:14px}
.passos i{position:relative;width:28px;height:2px;border-radius:2px;background:oklch(1 0 0/.16)}
.passos i:after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--luz);opacity:0;transition:opacity .45s}
.passos i.on:after{opacity:1}
.m7 h2{margin-top:18px;max-width:none}
.s7 .apoio{margin-top:20px;max-width:440px;font-size:17px;font-weight:500;line-height:1.45;color:var(--claro-2)}
.s7 .btns{align-items:center;gap:12px 28px;margin-top:36px}
.s7 .lk{gap:9px;font-size:16px;color:var(--claro-2)}
@media (hover:hover) and (pointer:fine){
  .s7 .lk:hover{color:var(--claro);text-decoration:none}
}
.rot7,.ceu7{display:none}

/* o notebook e a janela de fora; as medidas de dentro da tela são pontos de um desenho de 800 de largura (--u) */
.obj7{position:relative;container-type:inline-size}
.poca7{position:absolute;left:-4%;right:-4%;top:86%;height:22%;border-radius:50%;background:radial-gradient(closest-side,oklch(0.85 0.06 232/.22),oklch(0.7 0.08 238/.07) 60%,transparent);pointer-events:none}
.nb7{position:relative;filter:drop-shadow(0 40px 40px oklch(0.04 0.02 250/.6))}
.nb7 .tela{--u:calc(100cqw / 800);background:oklch(0.955 0.006 250)}
.casco{position:absolute;inset:0;display:flex;color:oklch(0.25 0.02 255);font-size:calc(var(--u) * 11);line-height:1.35;letter-spacing:0;text-align:left}
.faixa{display:flex;flex:none;flex-direction:column;align-items:center;gap:calc(var(--u) * 13);width:calc(var(--u) * 58);margin:calc(var(--u) * 6) 0 calc(var(--u) * 6) calc(var(--u) * 6);padding-top:calc(var(--u) * 12);border-radius:calc(var(--u) * 10);background:oklch(0.985 0.003 250);box-shadow:0 1px 2px oklch(0.3 0.02 250/.12),inset 0 0 0 1px oklch(0.9 0.006 250)}
.faixa img{width:calc(var(--u) * 22)}
.faixa i{width:calc(var(--u) * 24);height:calc(var(--u) * 24);border-radius:calc(var(--u) * 7);background:oklch(0.92 0.006 250)}
.faixa i.on{background:var(--marca-suave);box-shadow:inset 0 0 0 calc(var(--u) * 1.5) oklch(0.64 0.19 245/.5)}
.miolo{display:flex;flex:1;flex-direction:column;min-width:0;padding:calc(var(--u) * 6)}
.cabeca{display:flex;flex:none;align-items:center;gap:calc(var(--u) * 14);height:calc(var(--u) * 40);padding:0 calc(var(--u) * 14);border-radius:calc(var(--u) * 10);background:oklch(0.985 0.003 250);box-shadow:0 1px 2px oklch(0.3 0.02 250/.12),inset 0 0 0 1px oklch(0.9 0.006 250)}
.cabeca b{font-size:calc(var(--u) * 15);font-weight:700}
.cabeca .sub-c{color:var(--tinta-3)}
.cabeca .aba{font-weight:600;color:var(--tinta-2)}
.cabeca .aba.on{color:var(--tinta);box-shadow:0 calc(var(--u) * 2) 0 var(--marca)}
.cabeca .novo-c{margin-left:auto;font-weight:700;color:var(--marca)}

/* o funil: cinco colunas num trilho, quatro à vista; na recompra o trilho anda uma coluna e a Recompra entra pela direita.
   As colunas não têm posição própria: o gestao.js mede os cartões a partir do trilho */
.funil{--gap:calc(var(--u) * 8);flex:1;min-height:0;margin-top:calc(var(--u) * 8);overflow:hidden}
.trilha{position:relative;display:flex;gap:var(--gap);height:100%}
.col{display:flex;flex:0 0 calc((100% - 3 * var(--gap)) / 4);flex-direction:column;gap:calc(var(--u) * 6);min-width:0;padding:calc(var(--u) * 8);border-radius:calc(var(--u) * 10);background:oklch(0.91 0.008 250);box-shadow:inset 0 1px 3px oklch(0.3 0.02 250/.12)}
.col h4{display:flex;margin:0;align-items:center;gap:calc(var(--u) * 6);font-size:calc(var(--u) * 11.5);font-weight:700;white-space:nowrap}
.col h4 i{flex:none;width:calc(var(--u) * 7);height:calc(var(--u) * 7);border-radius:50%;background:var(--marca)}
.c-ganho h4 i,.c-recompra h4 i{background:var(--verde)}
.col h4 .c{margin-left:auto;font-weight:600;color:var(--tinta-3)}
.col .total{margin:calc(var(--u) * -3) 0 calc(var(--u) * 2) calc(var(--u) * 13);color:var(--tinta-2);font-variant-numeric:tabular-nums;transform-origin:0 50%}
.c-ganho .total{font-weight:700;color:var(--marca)}
.card{position:relative;padding:calc(var(--u) * 8) calc(var(--u) * 9);border-radius:calc(var(--u) * 8);background:oklch(0.99 0.003 250);box-shadow:0 1px 2px oklch(0.3 0.02 250/.14),inset 0 0 0 1px oklch(0.92 0.006 250)}
.card .l1{display:flex;justify-content:space-between;gap:calc(var(--u) * 6);font-weight:700;white-space:nowrap}
.card .l1 span:first-child{overflow:hidden;text-overflow:ellipsis}
.card .l1 span:last-child{font-variant-numeric:tabular-nums}
.card .l2{margin-top:calc(var(--u) * 2);font-size:calc(var(--u) * 10.5);color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .l3{display:flex;justify-content:space-between;margin-top:calc(var(--u) * 5);font-size:calc(var(--u) * 10);color:var(--tinta-3)}
.card .l3 b{font-weight:600;color:var(--marca)}
.zap{padding:0 calc(var(--u) * 6);border-radius:99px;background:oklch(0.94 0.04 152);font-weight:700;color:oklch(0.38 0.1 152)}
.tarefa{position:relative;margin:calc(var(--u) * 6) calc(var(--u) * -9) calc(var(--u) * -8);padding:calc(var(--u) * 5) calc(var(--u) * 9);border-radius:0 0 calc(var(--u) * 8) calc(var(--u) * 8);box-shadow:inset 0 1px 0 oklch(0.92 0.006 250);font-size:calc(var(--u) * 10);color:var(--tinta-3)}
.tarefa b{position:absolute;inset:0;padding:inherit;border-radius:inherit;background:var(--marca-suave);font-weight:600;color:oklch(0.42 0.17 250);opacity:0}
.volta{display:inline-flex;margin-top:calc(var(--u) * 5);padding:calc(var(--u) * 2) calc(var(--u) * 7);border-radius:99px;background:oklch(0.94 0.04 152);font-size:calc(var(--u) * 10);font-weight:700;color:oklch(0.38 0.1 152)}
/* o rastro que o cartão da Ana deixa nas etapas por onde passou */
.vaga{background:transparent;box-shadow:inset 0 0 0 calc(var(--u) * 1.5) oklch(0.64 0.19 245/.5);opacity:0}
.ana{z-index:2}
.anel{position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none}
.ana .anel{box-shadow:0 0 0 calc(var(--u) * 2) var(--marca),0 calc(var(--u) * 10) calc(var(--u) * 24) calc(var(--u) * -8) oklch(0.64 0.19 245/.45)}
.c-recompra{position:relative}
.c-recompra .anel{background:oklch(0.64 0.19 245/.07);box-shadow:inset 0 0 0 calc(var(--u) * 1.5) oklch(0.64 0.19 245/.6)}

/* o assistente dentro do sistema: a caixa no canto, com a pergunta, a resposta e o cartão de Confirmar */
.assis{position:absolute;z-index:3;display:flex;flex-direction:column;gap:calc(var(--u) * 7);width:calc(var(--u) * 262);padding:calc(var(--u) * 10);border-radius:calc(var(--u) * 12);background:oklch(0.99 0.003 250);box-shadow:0 calc(var(--u) * 18) calc(var(--u) * 40) calc(var(--u) * -12) oklch(0.2 0.03 250/.45),inset 0 0 0 1px oklch(0.9 0.006 250);font-size:calc(var(--u) * 11);line-height:1.4;color:var(--tinta);opacity:0;transform-origin:0 0}
.a-pede{left:calc(var(--u) * 72);top:calc(var(--u) * 54)}
.a-sugere{left:calc(var(--u) * 72);bottom:calc(var(--u) * 10);transform-origin:0 100%}
.cab-a{display:flex;align-items:center;gap:calc(var(--u) * 7);font-size:calc(var(--u) * 12);font-weight:700}
.cab-a img{width:calc(var(--u) * 15)}
.cab-a span{margin-left:auto;font-size:calc(var(--u) * 10);font-weight:500;color:var(--tinta-3)}
.assis .eu{align-self:flex-end;max-width:88%;padding:calc(var(--u) * 6) calc(var(--u) * 9);border-radius:calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 3) calc(var(--u) * 10);background:oklch(0.93 0.008 250)}
.conf{padding:calc(var(--u) * 8) calc(var(--u) * 9);border-radius:calc(var(--u) * 9);background:oklch(0.975 0.004 250);box-shadow:inset 0 0 0 1px oklch(0.88 0.008 250)}
.conf small{display:block;font:500 calc(var(--u) * 9) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
.conf b{display:block;margin-top:calc(var(--u) * 3)}
.bts{display:flex;gap:calc(var(--u) * 6);margin-top:calc(var(--u) * 7)}
.bts span{padding:calc(var(--u) * 4) calc(var(--u) * 10);border-radius:99px;font-weight:700;box-shadow:inset 0 0 0 1px oklch(0.86 0.008 250)}
.bts span:first-child{color:var(--marca);box-shadow:inset 0 0 0 calc(var(--u) * 1.5) oklch(0.64 0.19 245/.6)}
.troca{display:grid;align-items:center}
.troca > *{grid-area:1/1}
.troca .bts{margin-top:calc(var(--u) * 7)}
.feito{margin-top:calc(var(--u) * 7);font-weight:700;color:oklch(0.42 0.12 152);opacity:0}
.campo{padding:calc(var(--u) * 7) calc(var(--u) * 9);border-radius:99px;background:oklch(0.95 0.005 250);box-shadow:inset 0 1px 2px oklch(0.3 0.02 250/.12);color:var(--tinta-3)}

/* a ferramenta de IA da pessoa, fora do sistema e sem marca, por cima do canto do notebook (--v: pontos de 820 de largura) */
.fora{--v:calc(100cqw / 820);position:absolute;z-index:4;right:-3%;top:62%;width:40%;overflow:hidden;border-radius:calc(var(--v) * 14);background:oklch(0.22 0.008 250);box-shadow:0 calc(var(--v) * 30) calc(var(--v) * 60) calc(var(--v) * -20) oklch(0.02 0.02 250/.9),inset 0 0 0 1px oklch(0.4 0.01 250);font-size:calc(var(--v) * 13);line-height:1.4;text-align:left;color:var(--claro);opacity:0}
.fora .barra{display:flex;align-items:center;gap:calc(var(--v) * 6);padding:calc(var(--v) * 9) calc(var(--v) * 12);background:oklch(0.26 0.008 250);white-space:nowrap}
.fora .barra i{width:calc(var(--v) * 9);height:calc(var(--v) * 9);border-radius:50%;background:oklch(0.42 0.01 250)}
.fora .barra em,.fora .barra span{font:500 calc(var(--v) * 10) var(--mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal}
.fora .barra em{margin-left:calc(var(--v) * 8);color:var(--claro-3)}
.fora .barra span{display:inline-flex;align-items:center;gap:calc(var(--v) * 6);margin-left:auto;color:var(--luz)}
.fora .barra span:before{content:"";width:calc(var(--v) * 6);height:calc(var(--v) * 6);border-radius:50%;background:var(--verde)}
.fora .corpo{display:flex;flex-direction:column;gap:calc(var(--v) * 9);min-height:calc(var(--v) * 128);padding:calc(var(--v) * 12)}
.fora .eu{align-self:flex-end;max-width:88%;padding:calc(var(--v) * 8) calc(var(--v) * 11);border-radius:calc(var(--v) * 12) calc(var(--v) * 12) calc(var(--v) * 3) calc(var(--v) * 12);background:oklch(0.32 0.01 250)}
.fora .ele{color:var(--claro-2)}
.fora .ele b{font-weight:600;color:var(--claro)}

/* as falas de dentro das duas caixas entram no seu tempo, como na conversa da 06 */
.anima .obj7 .dig{display:flex;align-self:flex-start;gap:calc(var(--u) * 4);margin-bottom:calc(var(--u) * -27);padding:calc(var(--u) * 8) calc(var(--u) * 10);border-radius:calc(var(--u) * 10);background:oklch(0.93 0.008 250)}
.obj7 .dig i{width:calc(var(--u) * 5);height:calc(var(--u) * 5);--pula:calc(var(--u) * -3)}
.anima .fora .dig{gap:calc(var(--v) * 4);margin-bottom:calc(var(--v) * -32);padding:calc(var(--v) * 9) calc(var(--v) * 11);background:oklch(0.32 0.01 250)}
.fora .dig i{width:calc(var(--v) * 6);height:calc(var(--v) * 6);background:var(--claro-2);--pula:calc(var(--v) * -3)}
.anima :is(.assis,.fora .corpo) > :is(.eu,.ele,.dig,.conf){opacity:0;transform:translateY(.5em) scale(.97);transform-origin:0 100%;transition:opacity .25s,transform .25s}
.anima :is(.assis,.fora .corpo) > .eu{transform-origin:100% 100%}
.anima :is(.assis,.fora .corpo) > .on{opacity:1;transform:none;transition:opacity .4s,transform .65s var(--saida)}

/* na cena: um palco de 1440x900 preso na tela; o rótulo fica e os títulos trocam por máscara */
.viva .s7{height:300vh;padding:0}
.viva .s7 .in{position:sticky;top:0;height:100vh;max-width:none;overflow:hidden}
.viva .ceu7{display:block;position:absolute;inset:0;background:linear-gradient(180deg,oklch(0.27 0.045 248) 0,oklch(0.19 0.03 250) 38%,oklch(0.16 0.024 250) 100%);opacity:0;will-change:opacity}
.viva .palco7{position:absolute;left:50%;top:50%;width:1440px;height:900px;transform:translate(-50%,-50%) scale(var(--k7,1))}
.viva .rot7{display:block;position:absolute;left:100px;top:240px;margin:0;opacity:0}
.viva .passos.rot7{display:flex;top:271px}
.viva .m7-tx{position:absolute;left:100px;top:279px;width:480px;pointer-events:none}
.viva .m7-tx.on{pointer-events:auto}
.viva .m7-tx > :is(.rot,.passos){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.viva .m7 h2{font-size:48px}
.viva .m7-tx > :not(h2),.viva .m7 .pi{will-change:transform,opacity}
.viva .m7[data-m="0"] .obj7{position:absolute;left:560px;top:166px;width:820px;will-change:transform,opacity}
.viva .m7:not([data-m="0"]) .obj7{display:none}
.viva .obj7:before{content:"";position:absolute;z-index:-1;inset:-30% -18%;background:radial-gradient(closest-side,oklch(0.88 0.05 232/.11),transparent);pointer-events:none}
.viva :is(.trilha,.ana,.assis,.fora,.tarefa b,.vaga,.c-recompra .card){will-change:transform,opacity}

/* empilhada: três blocos, um por momento, com o texto e o notebook de cada um */
html:not(.viva) .palco7{display:grid;gap:clamp(88px,14vw,160px)}
.m7{display:grid;gap:40px;align-items:center}
@media (min-width:860px){
  html:not(.viva) .m7{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,4vw,64px)}
}
@media (max-width:859px){
  .s7 .apoio,.s7 .btn{font-size:16px}
  .fora{right:-2%;top:58%;width:58%;--v:calc(100cqw / 600)}
}
/* no celular o notebook inteiro fica pequeno demais para ler: a tela cresce até a letra ler e a faixa da página mostra
   só um recorte dela, com a moldura cortada nas bordas. --off é o ponto do desenho de 800 que fica na borda esquerda:
   Aguardando e Ganho no funil e na recompra (que anda uma coluna e traz a Recompra), a caixa do assistente na 07b */
@media (max-width:599px){
  html:not(.viva) .obj7{--off:430;margin-inline:calc(-1 * var(--gut));overflow:hidden}
  html:not(.viva) .m7[data-m="1"] .obj7{--off:62}
  html:not(.viva) .nb7{width:225.8%;margin-left:calc(-225.8% * (.0212 + var(--off) * .9576 / 800))}
  html:not(.viva) .poca7{display:none}
  html:not(.viva) .a-sugere{left:calc(var(--u) * 440)}
  html:not(.viva) .fora{right:var(--gut);top:56%;width:78%;--v:calc(100cqw / 440)}
}