/* =====================================================================
   explicador-real.css — complemento do explicador.css para os vídeos de
   DEMONSTRAÇÃO, os que mostram o sistema de verdade.

   A diferença para o explicador comum: lá as telas são desenhadas em
   HTML; aqui são capturas reais do sistema rodando (PNG), apresentadas
   dentro de uma moldura de navegador ou de celular, com movimento lento
   de aproximação (Ken Burns) e um alvo pulsante para apontar o que
   interessa na tela.

   Depende de /css/explicador.css (paleta, palco, cenas, legenda).
   ===================================================================== */

/* ===== Medidas das cenas com tela real =====
   O palco é 16:9 (100em × 56,25em). Uma captura de celular em tamanho cheio
   tem o dobro da largura em altura e estoura isso sozinha, empurrando título e
   legenda para fora do quadro. Por isso a mídia entra numa JANELA de altura
   fixa: a imagem pode ser mais alta que a janela e o movimento de rolagem
   mostra o resto — que é como um screencast se comporta, de todo modo. */
.cena.real{padding:5.5em 5em 7.5em}
.cena.real h2{font-size:3em}
.cena.real .sub{font-size:1.5em}
.cena.real .quadro{width:58em}
.cena.real .quadro .tela-img{height:30em}
.cena.real .aparelho{width:15.5em}
.cena.real .aparelho .vidro{height:31em}
.cena.real .lado{gap:3.2em}

/* ===== Moldura de navegador ===== */
.quadro{width:64em;border-radius:1em;overflow:hidden;background:#fff;border:1px solid var(--line);
        box-shadow:0 2.4em 5em rgba(11,18,32,.28)}
.quadro .barra-url{display:flex;align-items:center;gap:.6em;padding:.9em 1.2em;background:#EDF1EA;border-bottom:1px solid var(--line)}
.quadro .barra-url i{width:.8em;height:.8em;border-radius:50%;background:#D2D9CE;display:block}
.quadro .barra-url span{margin-left:.8em;font-family:var(--f-mono);font-size:1.05em;color:#7C8A73;
                        background:#fff;border-radius:.4em;padding:.35em 1em;flex:1}
.quadro .tela-img{position:relative;overflow:hidden;background:#fff;line-height:0}
.quadro img{width:100%;display:block}

/* ===== Recorte de tela =====
   A captura inteira dentro de uma moldura pequena fica ilegível. Nas cenas de
   conteúdo entra só o pedaço que importa, grande: é o mesmo pixel do sistema,
   só que na escala em que dá para ler. */
.recorte{border-radius:1em;overflow:hidden;background:#fff;border:1px solid var(--line);
         box-shadow:0 2em 4.4em rgba(11,18,32,.26);position:relative;line-height:0}
.recorte img{width:100%;display:block}
.recorte.movel{width:28em;border-radius:1.4em}
.recorte.largo{width:58em}

/* ===== Moldura de celular (a captura mobile ocupa a tela inteira) ===== */
.aparelho{width:20em;background:#0B1220;border-radius:2.6em;padding:.85em;flex:none;position:relative;
          box-shadow:0 2.6em 5em rgba(11,18,32,.42)}
.aparelho::before{content:"";position:absolute;top:1.5em;left:50%;transform:translateX(-50%);
                  width:5.2em;height:.5em;border-radius:999px;background:#2A3242;z-index:3}
.aparelho .vidro{border-radius:2em;overflow:hidden;background:#fff;line-height:0;position:relative}
.aparelho img{width:100%;display:block}

/* ===== Aproximação lenta (Ken Burns) =====
   Sem isso a cena fica uma foto parada por 12 segundos, que é o que faz
   um vídeo de screenshot parecer um slide. O movimento é mínimo de
   propósito: o suficiente para a imagem respirar, não para enjoar. */
.ativa .aproxima img{animation:aproxima 14s linear forwards;transform-origin:50% 0%}
.ativa .aproxima.baixo img{transform-origin:50% 100%}
.ativa .aproxima.alto  img{transform-origin:50% 0%}
@keyframes aproxima{from{transform:scale(1)}to{transform:scale(1.10)}}

/* Sobe a imagem devagar, para percorrer uma tela longa. */
.ativa .rola img{animation:rola 13s ease-in-out forwards}
@keyframes rola{from{transform:translateY(0)}to{transform:translateY(-22%)}}

/* ===== Alvo pulsante: aponta o que olhar na tela real ===== */
.alvo{position:absolute;width:4.2em;height:4.2em;border-radius:50%;pointer-events:none;
      border:.22em solid var(--green-bright);opacity:0;z-index:4}
.alvo::after{content:"";position:absolute;inset:-.22em;border-radius:50%;border:.22em solid var(--green-bright)}
.ativa .alvo{animation:alvo-entra .5s ease 1.4s forwards}
.ativa .alvo::after{animation:alvo-pulsa 1.9s ease-out 1.9s infinite}
@keyframes alvo-entra{to{opacity:1}}
@keyframes alvo-pulsa{0%{transform:scale(1);opacity:.9}70%{transform:scale(2.1);opacity:0}100%{opacity:0}}

/* ===== Etiqueta que sai do alvo ===== */
.etiqueta{position:absolute;background:var(--ink);color:#fff;font-size:1.25em;font-weight:600;
          border-radius:.6em;padding:.6em 1em;white-space:nowrap;opacity:0;z-index:5;
          box-shadow:0 .8em 2em rgba(11,18,32,.35)}
.etiqueta::before{content:"";position:absolute;left:-.45em;top:50%;margin-top:-.45em;
                  border:.45em solid transparent;border-right-color:var(--ink)}
.ativa .etiqueta{animation:sobe .5s ease 1.9s forwards}

/* ===== Mão segurando o celular ===== */
.mao-cena{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0}
.mao{position:absolute;bottom:-6em;left:50%;transform:translateX(-50%);width:34em;z-index:2;pointer-events:none}
.ativa .mao{animation:mao-sobe 1.2s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes mao-sobe{from{transform:translate(-50%,6em);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.mao-cena .aparelho{position:relative;z-index:1;margin-bottom:2em}

/* ===== Cupom fiscal desenhado (a folha na mesa) ===== */
.cupom-papel{width:16em;background:#fff;border-radius:.4em;padding:1.4em 1.2em;
             box-shadow:0 1.4em 3em rgba(11,18,32,.22);transform:rotate(-3deg);
             font-family:var(--f-mono);font-size:1.05em;color:#4A5568;line-height:1.7}
.cupom-papel .topo-cupom{text-align:center;font-weight:700;color:var(--ink);letter-spacing:.06em;margin-bottom:.6em}
.cupom-papel .linha-cupom{display:flex;justify-content:space-between;border-bottom:1px dotted #D8DEE4}
.cupom-papel .total-cupom{display:flex;justify-content:space-between;font-weight:700;color:var(--ink);
                          font-size:1.2em;margin-top:.5em;border-top:.14em solid var(--ink);padding-top:.4em}
.cupom-papel .qr-cupom{width:5em;height:5em;margin:.9em auto 0;
                       background:conic-gradient(from 45deg,var(--ink) 0 25%,#fff 0 50%,var(--ink) 0 75%,#fff 0);
                       background-size:.55em .55em}

/* ===== Números da sorte em destaque ===== */
.numeros{display:flex;gap:1.2em;margin-top:1.6em;flex-wrap:wrap;justify-content:center}
.numero{background:linear-gradient(135deg,var(--green-bright),var(--green-deep));color:#fff;
        font-family:var(--f-mono);font-weight:700;font-size:1.9em;letter-spacing:.12em;
        border-radius:.5em;padding:.4em .75em;box-shadow:0 .6em 1.6em rgba(76,140,33,.35)}

@media (max-width:700px){ .quadro{width:92%} }