/* Visor de tours 360 da Agência FF360 (v5: prova social do Google, painel Sobre, nota mínima com exceção)
   Moldura FF360 (azul-noite, vidro, gradiente azul→verde, Inter) com a
   identidade de cada cliente entrando por duas variáveis: --cli (cor) e
   --cli-serif (fonte de título). Os dados de cada tour ficam no tour.json. */

:root{
  --bg:#0b0f19; --bg-alt:#11172a; --surface:#161d33;
  --text:#f4f6fb; --muted:#b4bccd;
  --accent:#4285f4; --accent-2:#34d399;
  --grad:linear-gradient(135deg,#4285f4,#34a853);
  --vidro:rgba(11,15,25,.66); --vidro-forte:rgba(11,15,25,.86);
  --borda:rgba(255,255,255,.12); --borda-forte:rgba(255,255,255,.34);
  --cli:#D1A072; --cli-ink:#1A1206;
  --cli-serif:Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --raio:16px;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
a{color:inherit}
img,svg{display:block}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}

/* ------------------------------------------------------------ botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:44px;padding:.75rem 1.35rem;border-radius:999px;font-weight:600;
  text-decoration:none;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,border-color .2s}
.btn svg{width:18px;height:18px;flex:none}
.btn--ff{background:var(--grad);color:#06110a}
.btn--ff:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(66,133,244,.38)}
.btn--vidro{background:var(--vidro);border:1px solid var(--borda);color:var(--text);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn--vidro:hover{border-color:var(--borda-forte);background:var(--vidro-forte)}
.ico{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:999px;
  background:var(--vidro);border:1px solid var(--borda);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .2s,background .2s}
.ico:hover{border-color:var(--borda-forte);background:var(--vidro-forte)}
.ico svg{width:20px;height:20px}
.ico[aria-pressed="true"]{border-color:var(--cli);color:var(--cli)}

/* ------------------------------------------------------- marcas */
.cli-marca{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;min-width:0}
.cli-marca img{width:52px;height:52px;border-radius:50%;flex:none;box-shadow:0 2px 14px rgba(0,0,0,.5)}
.cli-marca b{display:block;font-family:var(--cli-serif);font-weight:500;font-size:1.05rem;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli-marca small{display:block;font-size:.75rem;color:var(--muted);letter-spacing:.02em}
.ff-selo{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-size:.8rem;
  color:var(--muted);padding:.35rem .8rem .35rem .45rem;border-radius:999px;
  background:var(--vidro);border:1px solid var(--borda);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ff-selo img{height:26px;width:auto}
.ff-selo strong{color:var(--text);font-weight:800}
.ff-selo strong span{color:var(--accent)}
.ff-selo:hover{border-color:var(--borda-forte)}

/* ============================================================ CAPA */
.capa{position:fixed;inset:0;z-index:30;display:grid;grid-template-rows:auto 1fr auto;
  padding:calc(18px + var(--st)) calc(22px + var(--sr)) calc(16px + var(--sb)) calc(22px + var(--sl));
  transition:opacity .8s var(--ease),visibility .8s}
.capa.sai{opacity:0;visibility:hidden}
.capa__foto,.capa__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.capa__foto img{animation:capa-zoom 24s var(--ease) both}
@keyframes capa-zoom{from{transform:scale(1.07)}to{transform:scale(1)}}
.capa__veu{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(11,15,25,.55) 0%,rgba(11,15,25,0) 22%),
    linear-gradient(0deg,rgba(11,15,25,.96) 0%,rgba(11,15,25,.82) 30%,rgba(11,15,25,.25) 58%,rgba(11,15,25,0) 72%),
    radial-gradient(60% 50% at 0% 100%,rgba(66,133,244,.22),transparent 70%)}
.capa__topo{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.capa__corpo{align-self:end;max-width:min(680px,100%);padding-bottom:1.2rem;position:relative}
.kicker{margin:0 0 .7rem;font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cli)}
.capa h1{margin:0;font-family:var(--cli-serif);font-weight:400;font-size:clamp(2.6rem,6.4vw,5.2rem);
  line-height:1.02;letter-spacing:-.015em;max-width:12ch;text-wrap:balance}
.capa__texto{margin:1rem 0 1.6rem;font-size:clamp(1rem,1.5vw,1.15rem);color:#dfe4ee;max-width:44ch}
.capa__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.2rem}
.capa__acoes .btn--ff{font-size:1.02rem;padding:.9rem 1.6rem}
.capa__nota{font-size:.85rem;color:var(--muted)}
.capa__grupos{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0;padding:0}
.capa__grupos li{font-size:.8rem;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--borda);
  background:rgba(11,15,25,.5);color:#dfe4ee}
.capa__grupos li b{color:var(--text);font-weight:600}
.capa__grupos li.comp{border-style:dashed}
.capa__rodape{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;
  font-size:.8rem;color:var(--muted);border-top:1px solid var(--borda);padding-top:.8rem}
.capa__rodape a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.capa__rodape a:hover{text-decoration-color:var(--accent)}
.capa__erro{margin:1rem 0 0;padding:.8rem 1rem;border-radius:12px;background:rgba(160,30,40,.35);
  border:1px solid rgba(255,120,120,.4);max-width:52ch;font-size:.92rem}

/* assinatura: régua de 360 graus girando devagar atrás do título */
.regua{position:absolute;z-index:-1;width:min(560px,92vw);aspect-ratio:1;left:-14%;bottom:-38%;
  opacity:.32;pointer-events:none;animation:gira 120s linear infinite}
.regua circle{fill:none;stroke:var(--cli)}
@keyframes gira{to{transform:rotate(360deg)}}

/* ============================================================ TOUR */
.tour{position:fixed;inset:0;background:var(--bg)}
.visor{position:absolute;top:0;left:0;right:0;bottom:var(--painel-h,0px);z-index:0;background:var(--bg)}
.visor.pnlm-container{position:absolute;height:auto;width:auto}
.visor .pnlm-load-box,.visor .pnlm-error-msg,.visor .pnlm-about-msg{display:none!important}
.visor .pnlm-ui{cursor:grab}
.visor .pnlm-grabbing{cursor:grabbing}

/* carregando */
.carga{position:absolute;z-index:8;left:50%;top:calc((100% - var(--painel-h,0px)) / 2);transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:.8rem;padding:.8rem 1.2rem;border-radius:999px;
  background:var(--vidro-forte);border:1px solid var(--borda);font-size:.9rem;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.carga.on{opacity:1;visibility:visible;transition-delay:.15s}
.carga__anel{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.18);
  border-top-color:var(--accent-2);animation:gira .8s linear infinite}
.erro{position:absolute;z-index:9;left:50%;top:calc((100% - var(--painel-h,0px)) / 2);transform:translate(-50%,-50%);
  width:min(440px,calc(100% - 32px));padding:1.4rem;border-radius:var(--raio);text-align:center;
  background:var(--vidro-forte);border:1px solid rgba(255,140,140,.4);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.erro h2{margin:0 0 .4rem;font-size:1.05rem}
.erro p{margin:0 0 1rem;color:#dfe4ee;font-size:.92rem}
.erro .acoes{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* HUD */
.hud{position:absolute;z-index:5;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.hud-topo{top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:calc(14px + var(--st)) calc(16px + var(--sr)) 0 calc(16px + var(--sl));pointer-events:none}
.hud-topo > *{pointer-events:auto}
.hud-topo .cli-marca{padding:.3rem 1rem .3rem .3rem;border-radius:999px;background:var(--vidro);
  border:1px solid var(--borda);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hud-topo .cli-marca img{width:40px;height:40px}
.hud-acoes{display:flex;gap:.5rem;align-items:center}
.luz{display:inline-flex;align-items:center;gap:.5rem;height:44px;padding:0 1rem 0 .8rem;border-radius:999px;
  background:var(--vidro);border:1px solid var(--cli);color:var(--text);font-weight:600;font-size:.88rem;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.luz svg{width:20px;height:20px;color:var(--cli)}
.luz:hover{background:var(--vidro-forte)}

.legenda{left:calc(16px + var(--sl));bottom:calc(var(--painel-h,190px) + 16px);max-width:min(440px,calc(100% - 100px));
  padding:1rem 1.15rem;border-radius:var(--raio);background:var(--vidro);border:1px solid var(--borda);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.legenda__grupo{margin:0 0 .25rem;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cli)}
.legenda__grupo .comp{color:var(--muted);letter-spacing:.06em;text-transform:none;font-weight:500}
.legenda h2{margin:0;font-family:var(--cli-serif);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.15}
.legenda p.desc{margin:.3rem 0 0;color:#dfe4ee;font-size:.92rem}
.legenda__nav{display:flex;gap:.4rem;margin-top:.7rem}
.legenda__nav button{display:inline-flex;align-items:center;gap:.3rem;min-height:36px;padding:0 .8rem;border-radius:999px;
  border:1px solid var(--borda);font-size:.82rem;color:#dfe4ee}
.legenda__nav button:hover{border-color:var(--borda-forte);color:var(--text)}
.legenda__nav svg{width:16px;height:16px}

.zoom{right:calc(16px + var(--sr));bottom:calc(var(--painel-h,190px) + 14px);display:flex;flex-direction:column;gap:.5rem}

/* painel inferior: ambientes + crédito + contato */
.painel{left:0;right:0;bottom:0;padding:0 calc(12px + var(--sr)) calc(10px + var(--sb)) calc(12px + var(--sl));
  background:rgba(11,15,25,.97);border-top:1px solid var(--borda)}
.painel__barra{display:flex;align-items:center;gap:.6rem;padding:.6rem 4px .5rem;flex-wrap:wrap}
.b-amb{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:0 .95rem;border-radius:999px;
  border:1px solid var(--borda);background:var(--vidro);font-weight:600;font-size:.88rem}
.b-amb svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.b-amb[aria-expanded="true"] svg{transform:rotate(180deg)}
.abas{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1}
.abas::-webkit-scrollbar{display:none}
.aba{min-height:36px;padding:0 .85rem;border-radius:999px;font-size:.84rem;color:var(--muted);white-space:nowrap;
  border:1px solid transparent}
.aba:hover{color:var(--text)}
.aba[aria-selected="true"]{color:var(--text);border-color:var(--borda-forte);background:rgba(255,255,255,.06)}
.aba.comp::after{content:" · complementar";color:var(--muted);font-size:.78rem}
.trilho{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 4px 10px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;
  transition:max-height .35s var(--ease),opacity .3s;max-height:160px}
.trilho.fechado{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}
.mini{flex:none;width:124px;scroll-snap-align:center;text-align:left;border-radius:12px;padding:0;
  background:var(--surface);border:1px solid var(--borda);overflow:hidden;position:relative;
  transition:border-color .2s,transform .2s var(--ease)}
.mini img{width:100%;height:68px;object-fit:cover;opacity:.82;transition:opacity .2s}
.mini span{display:block;padding:.4rem .55rem .5rem;font-size:.76rem;line-height:1.25;color:#dfe4ee;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini:hover{transform:translateY(-2px);border-color:var(--borda-forte)}
.mini:hover img{opacity:1}
.mini[aria-current="true"]{border-color:var(--cli);box-shadow:0 0 0 1px var(--cli)}
.mini[aria-current="true"] img{opacity:1}
.mini .lua{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:rgba(11,15,25,.75);color:var(--cli)}
.mini .lua svg{width:13px;height:13px}
.painel__pe{display:flex;justify-content:space-between;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;
  padding:.2rem 4px 0;font-size:.78rem;color:var(--muted)}
.painel__pe a.credito{color:var(--muted);text-decoration:none}
.painel__pe a.credito strong{color:var(--text);font-weight:700}
.painel__pe a.credito:hover strong{color:var(--accent)}
.b-negocio{display:inline-flex;align-items:center;gap:.45rem;min-height:36px;padding:0 .9rem;border-radius:999px;
  border:1px solid rgba(66,133,244,.55);color:var(--text);text-decoration:none;font-weight:600;font-size:.8rem;
  background:rgba(66,133,244,.12)}
.b-negocio:hover{background:rgba(66,133,244,.24);border-color:var(--accent)}
.b-negocio{transform:translate(var(--bx,0px),var(--by,0px));transition:transform .35s cubic-bezier(.2,.9,.3,1.4),background .2s,border-color .2s}
.b-negocio .ico-zap{width:19px;height:19px;flex:none;color:#25d366;filter:drop-shadow(0 0 6px rgba(37,211,102,.45));
  transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--ms,1));transition:transform .35s cubic-bezier(.2,.9,.3,1.4),filter .3s}
.b-negocio.ima .ico-zap{filter:drop-shadow(0 0 10px rgba(37,211,102,.8))}
/* no toque não há mouse para atrair: o ícone dá um chamado discreto de tempos em tempos */
@media (hover:none){.b-negocio .ico-zap{animation:chama 4.5s ease-in-out infinite}}
@keyframes chama{0%,82%,100%{transform:none}86%{transform:rotate(-14deg) scale(1.15)}90%{transform:rotate(12deg) scale(1.15)}94%{transform:rotate(-6deg) scale(1.08)}}

/* setas de passagem dentro do panorama */
.ff-hs{width:56px;height:56px}
.ff-hs__alvo{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
  background:rgba(11,15,25,.55);border:2px solid rgba(255,255,255,.9);color:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.45);transition:transform .25s var(--ease),background .25s,border-color .25s}
.ff-hs__alvo svg{width:24px;height:24px}
.ff-hs__alvo::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--cli);
  opacity:0;animation:pulso 2.6s var(--ease) infinite}
@keyframes pulso{0%{opacity:.8;transform:scale(.8)}100%{opacity:0;transform:scale(1.35)}}
.ff-hs__rotulo{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;
  padding:.3rem .7rem;border-radius:999px;font-size:.8rem;font-weight:600;background:rgba(11,15,25,.82);
  border:1px solid var(--borda);pointer-events:none}
.ff-hs:hover .ff-hs__alvo,.ff-hs:focus-visible .ff-hs__alvo{transform:scale(1.1);background:var(--cli);border-color:var(--cli);color:var(--cli-ink)}
.ff-hs:focus-visible{outline:none}
.ff-hs--volta{width:42px;height:42px}
.ff-hs--volta .ff-hs__alvo{border-width:1.5px;border-color:rgba(255,255,255,.7)}
.ff-hs--volta .ff-hs__alvo svg{width:18px;height:18px}
.ff-hs--volta .ff-hs__alvo::after{display:none}
.ff-hs--volta .ff-hs__rotulo{opacity:0;transition:opacity .2s}
.ff-hs--volta:hover .ff-hs__rotulo,.ff-hs--volta:focus-visible .ff-hs__rotulo{opacity:1}

/* aviso curto (link copiado etc.) */
.aviso{position:absolute;z-index:12;left:50%;top:calc(76px + var(--st));transform:translate(-50%,-8px);
  padding:.6rem 1rem;border-radius:999px;background:var(--vidro-forte);border:1px solid var(--borda);
  font-size:.88rem;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s var(--ease),visibility .25s}
.aviso.on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* quieto: no toque, o HUD some depois de um tempo parado */
.tour.quieto .legenda,.tour.quieto .zoom{opacity:0;transform:translateY(8px);pointer-events:none}

/* ------------------------------------------------------- celular */
@media (max-width:720px){
  .capa{padding-left:calc(16px + var(--sl));padding-right:calc(16px + var(--sr))}
  .capa .cli-marca img{width:44px;height:44px}
  .capa .ff-selo .txt{display:none}
  .capa .ff-selo{padding:.35rem}
  .capa__acoes .btn--ff{width:100%}
  .capa__grupos{margin-top:1.1rem}
  .regua{left:-30%;bottom:-20%}
  .hud-topo .cli-marca{padding-right:.3rem}
  .hud-topo .cli-marca span{display:none}
  .luz .txt{display:none}
  .luz{padding:0 .75rem}
  .legenda{left:calc(10px + var(--sl));right:calc(10px + var(--sr));max-width:none;padding:.75rem .9rem}
  .legenda p.desc{font-size:.86rem}
  .zoom{display:none}
  .mini{width:112px}
  .mini img{height:64px}
  .painel__pe{justify-content:center;text-align:center}
}
@media (max-height:520px){
  .legenda{padding:.55rem .8rem;right:auto;max-width:min(360px,60%)}
  .legenda h2{font-size:1.1rem}
  .painel__barra{padding:.35rem 4px .3rem}
  .mini{width:96px}
  .mini img{height:46px}
  .mini span{padding:.25rem .45rem .3rem}
  .painel__pe{flex-wrap:nowrap;justify-content:space-between}
  .legenda p.desc{display:none}
  .legenda__nav{display:none}
  .capa__grupos,.capa__texto{display:none}
  .capa h1{font-size:2.2rem}
  .regua{display:none}
}
@media (pointer:coarse){
  .aba{min-height:44px}
  .legenda__nav button{min-height:44px}
  .b-amb,.b-negocio{min-height:44px}
  .painel__pe a.credito{display:inline-flex;align-items:center;gap:.3em;min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .carga__anel{border-top-color:var(--accent-2)}
}

/* capa vertical: a placa fica no alto; o véu sobe para o texto ler bem sobre o portão */
@media (max-aspect-ratio:4/5){
  .capa__veu{background:
    linear-gradient(180deg,rgba(11,15,25,.6) 0%,rgba(11,15,25,0) 14%),
    linear-gradient(0deg,rgba(11,15,25,.97) 0%,rgba(11,15,25,.9) 40%,rgba(11,15,25,.45) 58%,rgba(11,15,25,0) 70%)}
}

/* ===================================================== PROVA SOCIAL (v3) */
.capa__prova{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1.2rem 0 0}
.selo-g{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.45rem .95rem .45rem .6rem;border-radius:999px;
  background:rgba(255,255,255,.94);color:#1f1f1f;text-decoration:none;font-size:.86rem;box-shadow:0 6px 22px rgba(0,0,0,.35);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.selo-g:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.selo-g .ico-g{width:20px;height:20px;flex:none}
.selo-g b{font-size:1.05rem;font-weight:800}
.selo-g > span{color:#4b4b4b}
.estrelas{display:inline-flex;gap:1px}
.est{width:14px;height:14px;display:inline-block;background:#d7dbe0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.est.on{background:#fbbc04}
.est.meia{background:linear-gradient(90deg,#fbbc04 50%,#d7dbe0 50%)}
.redes{display:inline-flex;gap:.5rem}
.rede{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:999px;color:var(--text);
  background:var(--vidro);border:1px solid var(--borda);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:border-color .2s,transform .2s var(--ease),color .2s}
.rede svg{width:20px;height:20px}
.rede:hover{transform:translateY(-2px);border-color:var(--cli);color:var(--cli)}

/* painel Sobre: lateral no computador, folha de baixo no celular */
.sobre{position:absolute;z-index:11;top:calc(72px + var(--st));right:calc(16px + var(--sr));width:min(380px,calc(100% - 32px));
  max-height:calc(100% - var(--painel-h,0px) - 96px - var(--st));overflow:auto;padding:1.2rem;border-radius:var(--raio);
  background:var(--vidro-forte);border:1px solid var(--borda);box-shadow:0 20px 60px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:sobe .35s var(--ease)}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sobre__x{position:absolute;top:10px;right:10px;width:38px;height:38px}
.sobre__topo{display:flex;gap:.8rem;align-items:center;padding-right:2.6rem}
.sobre__topo img{width:56px;height:56px;border-radius:50%;flex:none;box-shadow:0 2px 12px rgba(0,0,0,.45)}
.sobre__topo h2{margin:0;font-family:var(--cli-serif);font-weight:600;font-size:1.25rem;line-height:1.15}
.sobre__topo p{margin:.15rem 0 0;color:var(--muted);font-size:.85rem}
.sobre__end{display:flex;gap:.5rem;align-items:flex-start;margin:1rem 0 0;font-size:.88rem;color:#dfe4ee}
.sobre__end svg{width:18px;height:18px;flex:none;color:var(--cli);margin-top:1px}
.sobre__nota{display:flex;align-items:center;gap:.7rem;margin:1rem 0 0;padding:.75rem .9rem;border-radius:12px;text-decoration:none;
  background:rgba(255,255,255,.95);color:#1f1f1f}
.sobre__nota .ico-g{width:26px;height:26px;flex:none}
.sobre__nota b{font-size:1.7rem;font-weight:800;line-height:1}
.sobre__nota > span{display:flex;flex-direction:column;gap:.15rem}
.sobre__nota small{color:#4b4b4b;font-size:.8rem}
.sobre__nota:hover{box-shadow:0 0 0 2px var(--cli)}
.sobre__deps{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.sobre__deps li{padding:.75rem .9rem;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--borda);
  border-left:3px solid var(--cli)}
.sobre__deps blockquote{margin:0;font-size:.92rem;line-height:1.45;color:var(--text)}
.sobre__deps blockquote::before{content:"“"}
.sobre__deps blockquote::after{content:"”"}
.sobre__deps cite{display:block;margin-top:.35rem;font-style:normal;font-size:.78rem;color:var(--muted)}
.sobre__links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.sobre__links .btn{min-height:40px;padding:.5rem .9rem;font-size:.85rem}
.sobre__links .btn svg{width:17px;height:17px;color:var(--cli)}
.sobre__fonte{margin:.9rem 0 0;font-size:.74rem;color:var(--muted)}
#b-sobre[aria-expanded="true"]{border-color:var(--cli);color:var(--cli)}
@media (max-width:720px){
  .sobre{top:auto;right:calc(8px + var(--sr));left:calc(8px + var(--sl));width:auto;
    bottom:calc(var(--painel-h,0px) + 8px);max-height:calc(100% - var(--painel-h,0px) - 80px - var(--st))}
  .capa__prova{margin-top:.9rem}
  .selo-g{font-size:.8rem}
}
@media (max-height:520px){ .capa__prova .selo-g > span{display:none} }