/* =====================================================================
   explicador-conversa.css — complemento do explicador.css para a peça de
   WhatsApp: uma conversa acontecendo na tela do celular.

   Por que existe: modelo de vídeo (Veo e afins) desenha texto errado —
   é a limitação conhecida deles, e foi o que estragou a primeira versão
   desta peça. Aqui o texto é texto: nítido em qualquer resolução, com as
   falas EXATAS que o sistema manda (copiadas de Whatsapp_conversa.php).

   Duas formas de usar:
     - cena 16:9 normal, para post e para o site;
     - `.palco.vertical` + `.so-tela`, que enche o quadro só com a tela do
       celular — é o que um editor sobrepõe a uma filmagem de mão segurando
       o aparelho.

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

/* ===== Palco vertical (Reels/Stories) ===== */
.palco.vertical{aspect-ratio:9/16;width:min(100%,calc((100vh - 7rem) * 9 / 16))}
.palco.vertical .cena{padding:9em 5em 12em}
.palco.vertical .cena h1{font-size:4.4em}
.palco.vertical .cena h2{font-size:3em}
.palco.vertical .lado{flex-direction:column;gap:2.4em}
.palco.vertical .coluna{max-width:none;text-align:center}

/* ===== Aparelho grande, com a conversa dentro =====
   Altura amarrada ao palco: 56,25em de altura total, menos a folga de cima
   (marca) e a de baixo (legenda). Um celular mais alto que isso vaza para fora
   do quadro e come a última mensagem — justamente a dos números da sorte. */
.cena.conversa{padding:6em 5em 9em}
.zap{width:24em;height:41em;background:#0B141A;border-radius:2.6em;padding:.8em;flex:none;
     box-shadow:0 3em 6em rgba(11,18,32,.45)}
.zap .vidro{width:100%;height:100%;border-radius:2.3em;overflow:hidden;display:flex;flex-direction:column;
            background:#ECE5DD;position:relative}

/* barra de status e cabecalho, no verde do WhatsApp */
.zap .status{background:#075E54;color:#cfe9e4;font-size:.95em;padding:.7em 1.4em .1em;
             display:flex;justify-content:space-between;font-family:var(--f-body)}
.zap .cabeca{background:#075E54;color:#fff;display:flex;align-items:center;gap:.9em;padding:.7em 1.2em 1em}
.zap .avatar{width:3.2em;height:3.2em;border-radius:50%;background:#25D366;flex:none;
             display:flex;align-items:center;justify-content:center;font-size:1em;font-weight:800;color:#0B3D2E}
.zap .quem{line-height:1.2}
.zap .quem b{display:block;font-family:var(--f-disp);font-size:1.25em;font-weight:700}
.zap .quem span{font-size:1em;opacity:.85}

/* fundo do papel de parede: pontinhos discretos, no lugar do padrao original */
/* justify-content:flex-end é o que faz a conversa se comportar como conversa:
   mensagem nova entra embaixo e empurra as antigas para cima, saindo de vista
   pelo topo. Com flex-start, a fita cresceria para baixo e vazaria o aparelho. */
.zap .fita{flex:1;padding:1.2em 1.1em;display:flex;flex-direction:column;justify-content:flex-end;
           gap:.7em;overflow:hidden;
           background-color:#ECE5DD;
           background-image:radial-gradient(rgba(11,20,26,.06) .12em,transparent .12em);
           background-size:1.6em 1.6em}

/* ===== Bolhas ===== */
.bolha{max-width:82%;padding:.75em 1em .5em;border-radius:.9em;font-size:1.12em;line-height:1.42;
       color:#111B21;box-shadow:0 .1em .2em rgba(11,20,26,.13);position:relative;
       opacity:0;transform:translateY(1.2em) scale(.96)}
.bolha.ele{background:#fff;align-self:flex-start;border-top-left-radius:.2em}
.bolha.eu{background:#D9FDD3;align-self:flex-end;border-top-right-radius:.2em}
.bolha b{font-weight:700}
.bolha .hora{display:block;text-align:right;font-size:.72em;color:#667781;margin-top:.15em}
.bolha.eu .hora::after{content:" ✓✓";color:#53BDEB}
.ativa .bolha{animation:entra-bolha .32s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes entra-bolha{to{opacity:1;transform:none}}

/* foto do cupom enviada: miniatura desenhada, sem depender de arquivo */
.bolha .foto{width:12em;height:15em;border-radius:.5em;margin:-.2em 0 .35em;overflow:hidden;
             background:#fff;border:1px solid rgba(11,20,26,.08);position:relative;
             display:flex;flex-direction:column;gap:.55em;padding:1em .9em}
.bolha .foto i{display:block;height:.42em;border-radius:.2em;background:#D9DEE3}
.bolha .foto i:nth-child(1){width:70%;background:#9AA4AC;height:.6em}
.bolha .foto i:nth-child(2){width:45%}
.bolha .foto i:nth-child(4){width:85%}
.bolha .foto i:nth-child(6){width:60%}
.bolha .foto .cod{margin-top:auto;height:3.4em;border-radius:.25em;
                  background:conic-gradient(from 45deg,#111B21 0 25%,#fff 0 50%,#111B21 0 75%,#fff 0);
                  background-size:.55em .55em}

/* botoes interativos da Cloud API, como o WhatsApp desenha */
.bolha .botoes{margin:.6em -1em -.5em;border-top:1px solid rgba(11,20,26,.09)}
.bolha .botoes span{display:block;text-align:center;color:#027EB5;font-weight:600;padding:.6em;
                    border-bottom:1px solid rgba(11,20,26,.09)}
.bolha .botoes span:last-child{border-bottom:0}

/* “digitando…” */
.digita{align-self:flex-start;background:#fff;border-radius:.9em;border-top-left-radius:.2em;
        padding:.9em 1.1em;display:flex;gap:.35em;opacity:0;box-shadow:0 .1em .2em rgba(11,20,26,.13)}
.digita b{width:.5em;height:.5em;border-radius:50%;background:#9AA4AC;display:block;animation:pulo 1.2s infinite}
.digita b:nth-child(2){animation-delay:.15s}
.digita b:nth-child(3){animation-delay:.3s}
@keyframes pulo{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-.35em);opacity:1}}
.ativa .digita{animation:pisca-digita .3s ease forwards}
@keyframes pisca-digita{to{opacity:1}}
/* somem quando a resposta chega */
.ativa .digita.some{animation:pisca-digita .3s ease forwards,esconde .01s linear forwards}
@keyframes esconde{to{opacity:0;height:0;padding:0;margin:0;overflow:hidden}}

/* ===== Atrasos longos =====
   As classes d1..d9 do explicador.css param em 1,9 s — servem para entrada de
   cena. Uma conversa dura vinte segundos e precisa de marcação própria, em
   segundos cheios, para casar com a locução do roteiro. */
.ativa .s1{animation-delay:1s}    .ativa .s15{animation-delay:1.5s}
.ativa .s2{animation-delay:2s}    .ativa .s25{animation-delay:2.5s}
.ativa .s3{animation-delay:3s}    .ativa .s35{animation-delay:3.5s}
.ativa .s4{animation-delay:4s}    .ativa .s45{animation-delay:4.5s}
.ativa .s5{animation-delay:5s}    .ativa .s55{animation-delay:5.5s}
.ativa .s6{animation-delay:6s}    .ativa .s65{animation-delay:6.5s}
.ativa .s7{animation-delay:7s}    .ativa .s75{animation-delay:7.5s}
.ativa .s8{animation-delay:8s}    .ativa .s85{animation-delay:8.5s}
.ativa .s9{animation-delay:9s}    .ativa .s95{animation-delay:9.5s}
.ativa .s10{animation-delay:10s}  .ativa .s11{animation-delay:11s}
.ativa .s12{animation-delay:12s}  .ativa .s13{animation-delay:13s}
.ativa .s14{animation-delay:14s}  .ativa .s15s{animation-delay:15s}
.ativa .s16{animation-delay:16s}  .ativa .s17{animation-delay:17s}

/* ===== Só a tela, para compor sobre filmagem =====
   ?tela=1 tira cenário, marca e moldura: sobra a tela do celular ocupando o
   quadro inteiro, que é o que se sobrepõe a uma mão filmada segurando o
   aparelho. Fundo verde para chroma key, se o editor preferir recortar. */
.so-tela .marca,.so-tela .olho,.so-tela .cena h1,.so-tela .cena h2,.so-tela .sub,
.so-tela .coluna{display:none}
.so-tela .lado{display:block;width:100%;height:100%}
.so-tela .palco{background:#00B140}
/* Especificidade: .palco.vertical .cena (0,3,0) vence .so-tela .cena (0,2,0),
   e o padding do formato vertical voltava, encolhendo a tela. */
.so-tela .palco.vertical .cena,.so-tela .cena{padding:0}
.so-tela .zap{width:100%;height:100%;border-radius:0;padding:0;box-shadow:none;background:transparent}
.so-tela .zap .vidro{border-radius:0}
.so-tela .zap .status{font-size:1.5em}
.so-tela .zap .cabeca{padding:1.2em 1.8em 1.6em}
.so-tela .zap .fita{padding:2em 1.8em}
.so-tela .bolha{font-size:1.75em}