/* ══════════════════════════════════════════════════════════════════════
   REVVOS · peças de hero (Panorama, Simulador, Painel, Estudo)
   Mesma gramática da peça da Análise de Anúncio: cartão escuro com brilho
   petróleo, uma folha clara inclinada no fundo, um painel de vidro na
   frente, um selo que fecha a ideia — e o produto acontecendo em movimento.
   O cartão recebe .in quando entra na tela (script de cada página) e .lido
   quando a animação termina (revvos_show.js).
   ══════════════════════════════════════════════════════════════════════ */
.sh{position:relative;min-height:540px;border-radius:30px;overflow:hidden;isolation:isolate;color:#fff;
  font-family:'Archivo',system-ui,sans-serif;
  background:radial-gradient(90% 70% at 100% 0%,rgba(30,107,115,.55),transparent 60%),
             radial-gradient(70% 60% at 0% 100%,rgba(15,76,79,.5),transparent 65%),#141311;
  box-shadow:0 40px 90px -30px rgba(15,76,79,.55),0 18px 40px -20px rgba(20,19,17,.5)}
.hero .fig.sh{aspect-ratio:auto;display:block;padding:0;background:radial-gradient(90% 70% at 100% 0%,rgba(30,107,115,.55),transparent 60%),
  radial-gradient(70% 60% at 0% 100%,rgba(15,76,79,.5),transparent 65%),#141311;box-shadow:0 40px 90px -30px rgba(15,76,79,.55),0 18px 40px -20px rgba(20,19,17,.5)}
@media(min-width:901px){ .hero .inner:has(> .sh){grid-template-columns:1fr 1.08fr} }
.sh-trama{position:absolute;inset:0;z-index:0;opacity:.35;pointer-events:none;
  background-image:radial-gradient(rgba(159,207,199,.35) 1px,transparent 1.2px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(80% 70% at 70% 30%,#000,transparent 75%);mask-image:radial-gradient(80% 70% at 70% 30%,#000,transparent 75%)}
.sh-topo{position:absolute;z-index:4;top:20px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,246,244,.5)}
.sh-vivo{display:inline-flex;align-items:center;gap:8px;color:#9FCFC7}
.sh-vivo i{width:8px;height:8px;border-radius:50%;background:#5FB3A8;animation:shPulso 1.6s infinite}
.sh.lido .sh-vivo i{animation:none;background:#9FCFC7}
@keyframes shPulso{0%{box-shadow:0 0 0 0 rgba(95,179,168,.55)}70%{box-shadow:0 0 0 9px rgba(95,179,168,0)}100%{box-shadow:0 0 0 0 rgba(95,179,168,0)}}

/* folha clara inclinada no fundo */
.sh-papel{position:absolute;z-index:1;background:#fff;color:#141311;border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  transform:rotate(var(--rot,-4deg)) translateY(18px);opacity:0;transition:transform 1.1s cubic-bezier(.16,1,.3,1) .1s,opacity .8s ease .1s}
.sh.in .sh-papel{transform:rotate(var(--rot,-4deg));opacity:1}

/* vidro na frente */
.sh-vidro{position:absolute;z-index:2;padding:20px 20px 18px;border-radius:22px;background:rgba(20,19,17,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 50px -18px rgba(0,0,0,.6);
  transform:translateY(24px);opacity:0;transition:transform 1s cubic-bezier(.16,1,.3,1) .3s,opacity .8s ease .3s}
.sh.in .sh-vidro{transform:none;opacity:1}
.sh-rot{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,246,244,.5);margin-bottom:10px}
.sh-papel .sh-rot{color:#8E8D89}

/* selo */
.sh-selo{position:absolute;z-index:4;left:22px;bottom:20px;display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 12px;border-radius:999px;
  background:#fff;color:#141311;font-size:13px;font-weight:700;letter-spacing:-.01em;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);
  transform:translateY(14px) scale(.96);opacity:0;transition:transform .6s cubic-bezier(.3,1.4,.5,1) .2s,opacity .5s ease .2s}
.sh.lido .sh-selo{transform:none;opacity:1}
.sh-selo span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#0F4C4F;color:#9FCFC7;font-size:12px}

/* etiqueta flutuante (pino) */
.sh-pino{position:absolute;z-index:3;display:flex;align-items:center;gap:6px;transform:scale(.6);opacity:0;
  transition:transform .5s cubic-bezier(.3,1.5,.5,1) var(--pd,0s),opacity .4s var(--pd,0s)}
.sh.lido .sh-pino{transform:none;opacity:1}
.sh-pino b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#141311;background:#9FCFC7;
  box-shadow:0 0 0 4px rgba(159,207,199,.28),0 6px 14px rgba(0,0,0,.35)}
.sh-pino.quente b{background:#E0866E;color:#fff;box-shadow:0 0 0 4px rgba(224,134,110,.3),0 6px 14px rgba(0,0,0,.35)}
.sh-pino em{font-family:'Archivo',system-ui,sans-serif;letter-spacing:-.005em;font-style:normal;font-size:11px;font-weight:700;white-space:nowrap;color:#141311;background:#fff;padding:4px 9px;border-radius:999px;
  box-shadow:0 6px 14px rgba(0,0,0,.25)}

/* barras que sobem (genérico) */
.sh-barras{display:flex;align-items:flex-end;gap:5px;height:100%}
.sh-barras i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(to top,#0F4C4F,#1E6B73);transform:scaleY(0);transform-origin:bottom;
  transition:transform .9s cubic-bezier(.16,1,.3,1) var(--i)}
.sh.in .sh-barras i{transform:scaleY(1)}
.sh-barras i.pico{background:linear-gradient(to top,#1E6B73,#9FCFC7);box-shadow:0 0 16px rgba(95,179,168,.45)}
.sh-barras i.vale{background:rgba(247,246,244,.16)}
.sh-meses{display:flex;gap:5px;margin-top:7px}
.sh-meses span{flex:1;text-align:center;font-size:9.5px;font-weight:700;color:rgba(247,246,244,.4)}

/* linhas de faixa (genérico): rótulo · trilho · valor */
.sh-faixas{list-style:none;display:grid;gap:8px}
.sh-faixas li{display:grid;grid-template-columns:var(--col1,84px) 1fr auto;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:rgba(247,246,244,.88);
  opacity:0;transform:translateX(10px);transition:opacity .5s ease calc(.9s + var(--i)),transform .5s cubic-bezier(.16,1,.3,1) calc(.9s + var(--i))}
.sh.in .sh-faixas li{opacity:1;transform:none}
.sh-faixas i{display:block;height:6px;border-radius:6px;background:rgba(247,246,244,.12);overflow:hidden}
.sh-faixas u{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#1E6B73,#9FCFC7);transition:width 1.1s cubic-bezier(.33,1,.68,1) calc(1s + var(--i))}
.sh.in .sh-faixas u{width:var(--w)}
.sh-faixas small{font-size:11px;font-weight:700;color:#9FCFC7}

/* ── Panorama: a cidade acendendo ───────────────────────────────────── */
.pn-mapa{left:22px;top:60px;width:60%;aspect-ratio:1/1;padding:10px;--rot:-3deg;background:#F2F1EC;overflow:hidden}
.pn-mapa svg{width:100%;height:100%;display:block;border-radius:12px}
.pn-rua{stroke:#DCDAD3;stroke-width:5;fill:none;stroke-linecap:round}
.pn-rua.fina{stroke-width:2.5}
.pn-mar{fill:#CFE3DE}
.pn-pt{fill:#0F4C4F;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:opacity .4s ease var(--i),transform .5s cubic-bezier(.3,1.5,.5,1) var(--i)}
.sh.in .pn-pt{opacity:.85;transform:scale(1)}
.pn-pt.q{fill:#C8553D}
.pn-anel{fill:none;stroke:#1E6B73;stroke-width:1.5;opacity:0}
.sh.lido .pn-anel{animation:pnPulso 2.6s ease-out infinite}
@keyframes pnPulso{0%{opacity:.8;r:6}100%{opacity:0;r:34}}
.pn-curva{right:20px;bottom:74px;width:60%}
.pn-graf{position:relative;margin-top:30px}
.pn-curva .sh-barras{height:96px}
.pn-perfis{--col1:76px}
.pn-curva .sh-rot.pn-r2{margin:16px 0 9px}

/* ── Simulador: a conta montando ────────────────────────────────────── */
.sm-recibo{left:22px;top:64px;width:60%;padding:22px 20px 20px;--rot:-3.5deg}
.sm-recibo ul{list-style:none;display:grid;gap:2px}
.sm-recibo li{display:flex;justify-content:space-between;font-size:14px;color:#5A5955;padding:10px 10px;border-radius:8px;
  opacity:0;transform:translateY(6px);transition:opacity .4s ease var(--i),transform .4s ease var(--i)}
.sm-recibo li:nth-child(odd){background:#F7F6F4}
.sh.in .sm-recibo li{opacity:1;transform:none}
.sm-recibo li b{color:#141311;font-weight:700;font-variant-numeric:tabular-nums}
.sm-recibo li.quente{transition:opacity .4s ease var(--i),transform .4s ease var(--i),background .5s ease .3s,box-shadow .5s ease .3s}
.sh.lido .sm-recibo li.quente{background:#FBEDE8;box-shadow:inset 3px 0 0 #C8553D}
.sh.lido .sm-recibo li.quente b{color:#A8443A}
.sm-recibo .sm-corte{margin:12px 2px 0;height:0;border-top:2px dashed #E4E4E2}
.sm-recibo .sm-meta{display:flex;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8E8D89;margin-top:10px;padding:0 8px}
.sm-piso{right:20px;bottom:74px;width:56%;text-align:left}
.sm-num{display:flex;align-items:baseline;gap:6px}
.sm-num b{font-size:54px;font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.sm-num span{font-size:13px;font-weight:600;color:rgba(247,246,244,.55)}
.sm-sub{font-size:12.5px;color:rgba(247,246,244,.6);margin-top:4px}
.sm-cen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.sm-cen div{border-radius:12px;background:rgba(247,246,244,.06);padding:10px 10px 9px;opacity:0;transform:translateY(8px);
  transition:opacity .5s ease calc(1.2s + var(--i)),transform .5s ease calc(1.2s + var(--i))}
.sh.in .sm-cen div{opacity:1;transform:none}
.sm-cen small{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,246,244,.5)}
.sm-cen strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.03em;margin-top:3px}
.sm-cen i{display:block;height:5px;border-radius:5px;background:rgba(247,246,244,.12);margin-top:8px;overflow:hidden}
.sm-cen u{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#1E6B73,#9FCFC7);transition:width 1s ease calc(1.4s + var(--i))}
.sh.in .sm-cen u{width:var(--w)}
.sm-cen div.mid{background:rgba(159,207,199,.12);box-shadow:inset 0 0 0 1px rgba(159,207,199,.35)}

/* ── Painel: o ano se colorindo ─────────────────────────────────────── */
.pi-cal{left:22px;top:60px;width:62%;padding:16px 16px 14px;--rot:-3deg}
.pi-mes{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.pi-mes b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.pi-mes span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8E8D89}
.pi-sem{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:5px}
.pi-sem span{text-align:center;font-size:9.5px;font-weight:700;color:#A8A49E}
.pi-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.pi-dias i{aspect-ratio:1;border-radius:7px;background:#F2F2F1;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:600;color:#8E8D89;
  transition:background .45s ease var(--i),color .45s ease var(--i),transform .45s cubic-bezier(.3,1.5,.5,1) var(--i)}
.pi-dias i.vz{background:transparent}
.sh.in .pi-dias i.a{background:#F6EEDC;color:#8A6A2E}
.sh.in .pi-dias i.h{background:#CFE3DE;color:#0F4C4F}
.sh.in .pi-dias i.p{background:#1E6B73;color:#fff;transform:scale(1.06);box-shadow:0 6px 14px -6px rgba(15,76,79,.6)}
.pi-dias i.alvo{position:relative}
.sh.lido .pi-dias i.alvo{box-shadow:0 0 0 3px #fff,0 0 0 5px #0F4C4F}
.pi-dica{right:20px;bottom:74px;width:44%}
.pi-dica h4{font-size:19px;font-weight:600;letter-spacing:-.025em;margin-bottom:12px}
.pi-dica .pi-linhas{display:grid;gap:8px}
.pi-dica .pi-l{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:rgba(247,246,244,.7);padding:9px 12px;border-radius:12px;background:rgba(247,246,244,.06);
  opacity:0;transform:translateX(10px);transition:opacity .5s ease calc(1.1s + var(--i)),transform .5s ease calc(1.1s + var(--i))}
.sh.in .pi-dica .pi-l{opacity:1;transform:none}
.pi-dica .pi-l b{font-size:13px;font-weight:700;color:#fff}
.pi-dica .pi-l b.cor{color:#9FCFC7}
.pi-leg{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,246,244,.5)}
.pi-leg span{display:inline-flex;align-items:center;gap:5px}
.pi-leg u{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ── Estudo: o relatório vivo ───────────────────────────────────────── */
.es-nuvem{left:22px;top:62px;width:62%;aspect-ratio:1.15/1;padding:16px 16px 12px;--rot:-3deg}
.es-nuvem svg{width:100%;height:calc(100% - 24px);display:block}
.es-pt{fill:#C7C6C3;opacity:0;transition:opacity .5s ease var(--i),fill .6s ease}
.sh.in .es-pt{opacity:1}
.sh.lido .es-pt.cmp{fill:#1E6B73}
.es-voce{fill:#141311;opacity:0;transition:opacity .4s ease 1.4s}
.sh.in .es-voce{opacity:1}
.es-halo{fill:none;stroke:#1E6B73;stroke-width:1.5;opacity:0}
.sh.lido .es-halo{animation:pnPulso 2.4s ease-out infinite}
.es-eixos{font-size:6.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;fill:#A8A49E}
.es-guias{position:absolute;z-index:3;right:22px;top:66px;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.es-guias span{font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:rgba(247,246,244,.08);color:rgba(247,246,244,.55);
  opacity:0;transform:translateY(-6px);transition:opacity .4s ease var(--i),transform .4s ease var(--i),background .3s,color .3s}
.sh.in .es-guias span{opacity:1;transform:none}
.es-guias span.on{background:#9FCFC7;color:#141311}
.es-prev{right:20px;bottom:74px;width:52%}
.es-prev .sh-barras{height:92px;gap:12px}
.es-prev .sh-barras i{border-radius:10px 10px 3px 3px}
.es-prev .sh-meses span{font-size:10px}
.es-faixa{display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;box-shadow:inset 0 1px 0 rgba(247,246,244,.1);font-size:12px;color:rgba(247,246,244,.6)}
.es-faixa b{color:#fff;font-weight:700}

/* laço (data-loop): .zera desliga as transições para voltar ao quadro zero
   sem que se veja; .sai apaga as camadas antes de recomeçar */
.sh.zera *{transition:none!important;animation:none!important}
.sh.sai .sh-papel,.sh.sai .sh-vidro,.sh.sai .sh-selo,.sh.sai .sh-pino,.sh.sai .es-guias{opacity:0!important;transition:opacity .45s ease!important}

@media(max-width:900px){
  .sh,.hero .fig.sh{min-height:640px;margin-top:8px}
  .sh-topo span:last-child{display:none}
  .pn-mapa,.sm-recibo,.pi-cal,.es-nuvem{width:78%;left:18px;top:56px}
  .pn-curva,.sm-piso,.pi-dica,.es-prev{width:80%;right:16px;bottom:74px}
  .es-guias{display:none}
  .sh:has(.sm-recibo),.hero .fig.sh:has(.sm-recibo){min-height:700px}
  .sm-recibo .sh-pino{display:none}
  .sh:has(.pi-cal),.hero .fig.sh:has(.pi-cal){min-height:730px}
  .pi-cal .sh-pino{display:none}
  .pi-dica h4{font-size:17px}
  .sm-num b{font-size:46px}
  .sm-cen strong{font-size:15px;white-space:nowrap}
  .sm-cen div{padding:9px 8px 8px}
}
@media (prefers-reduced-motion: reduce){
  .sh *{transition:none!important;animation:none!important}
  .sh .sh-papel,.sh .sh-vidro,.sh .sh-selo,.sh .sh-pino,.sh .sh-faixas li,.sh .sm-recibo li,.sh .sm-cen div,.sh .pi-dica .pi-l,.sh .es-guias span{opacity:1!important}
}