/* Tema "Ateliê" (layout do print Trendly, em teste no localhost).
   Compartilhado por index, cliente, login e conectar. Só variáveis + componentes. */
:root{
  --fundo:#0c0a09; --janela:#151311; --lateral:#1c1a18; --peca:#25221f; --peca2:#2e2a26;
  --linha:rgba(255,236,212,.09); --linha2:rgba(255,236,212,.16);
  --tinta:#f4efe7; --cinza:#aaa297; --cinza2:#7f786f;
  --marca:#d2513f; --marca-hover:#b9442f; --brasa:#ee7d4f;
  --ok:#8fcf9f; --alerta:#e9b864; --ruim:#ff8f7d; --ruim-fundo:#2e1713;
  --raio:20px; --raio-ctl:14px;
  --fonte:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,Consolas,monospace;
  color-scheme:dark;
  --vidro:rgba(37,34,31,.9); --caixa:rgba(58,54,50,.55); --campo:rgba(20,18,16,.72); --suave:#e4ddd2;
  --grad-on:linear-gradient(115deg,#2e2a26 0%,#262320 55%,#2c2824 100%); --barra:#0a0908; --sobre-tinta:#161412; --ponto:rgba(10,8,7,.75);
  --arte1:#6b4a1e; --arte2:#8a3f1c; --arte3:#3d4a52; --arte4:#8a7a55;
  --fundo-app:radial-gradient(1000px 600px at 10% 100%,#2b2110 0%,transparent 60%),radial-gradient(900px 500px at 100% 0%,#1d1612 0%,transparent 60%),#0a0807;
  --fundo-simples:radial-gradient(900px 520px at 85% -10%,rgba(238,125,79,.14),transparent 60%),radial-gradient(800px 500px at -10% 110%,rgba(120,100,40,.16),transparent 60%),#0c0a09;
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--fonte);background:var(--fundo);color:var(--tinta);min-height:100dvh;line-height:1.5}
button,a,select,summary,label.clicavel{touch-action:manipulation}
button,.btn,nav a,.pilula{-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brasa);outline-offset:2px}

/* ---------- controles ---------- */
input,select,textarea{width:100%;min-height:44px;border:1px solid var(--linha2);border-radius:var(--raio-ctl);padding:10px 14px;
  font:400 16px var(--fonte);background:var(--peca);color:var(--tinta)}
input::placeholder,textarea::placeholder{color:var(--cinza2)}
textarea{min-height:110px;resize:vertical;line-height:1.5}
input[type=color]{padding:4px;width:64px}
input[type=file]{padding:9px 12px}
label{display:block;font-size:13px;font-weight:500;color:var(--cinza);margin:16px 0 6px}
.btn{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--linha2);background:var(--peca);color:var(--tinta);
  font:500 15px var(--fonte);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s,border-color .15s,transform .1s}
.btn:active{transform:scale(.97);background:var(--peca2)}
.btn.pri{background:var(--marca);border-color:var(--marca);color:#fff}
.btn.pri:active{background:var(--marca-hover)}
.btn.claro{background:var(--tinta);border-color:var(--tinta);color:var(--sobre-tinta)}
.btn.perigo{color:var(--ruim)}
.btn:disabled{opacity:.5;cursor:wait}
.btn svg,.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--peca2);border-color:var(--linha2)}
  .btn.pri:hover{background:var(--marca-hover)}
  .btn.claro:hover{background:#fff}
}
.acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.sub{color:var(--cinza)}
.vazio{color:var(--cinza);padding:34px 0;text-align:center}
.erro{color:var(--ruim);margin-top:12px;font-size:14px}
.tag{display:inline-block;font:500 12px var(--mono);padding:4px 10px;border-radius:99px;background:var(--peca2);color:var(--cinza);white-space:nowrap}
.tag.ok{background:var(--ok);color:#10200f}
.tag.ajuste{background:var(--alerta);color:#2a1e07}
.card{background:var(--peca);border:1px solid var(--linha);border-radius:var(--raio);padding:20px;margin-bottom:14px;min-width:0}
.alerta{border-radius:14px;padding:12px 14px;margin-top:12px;font-size:14px;line-height:1.5;background:var(--peca2);color:var(--suave)}
.alerta.ruim{background:var(--ruim-fundo);color:var(--ruim)}
.leg{white-space:pre-wrap;font-size:15px;line-height:1.6;margin-top:14px;color:var(--suave);overflow-wrap:anywhere}
.tira{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.tira img{height:300px;width:auto;aspect-ratio:4/5;border-radius:14px;border:1px solid var(--linha);scroll-snap-align:start;flex:none;background:var(--peca2)}

/* ---------- paginas simples (cliente, login, conectar) ---------- */
body.simples{background:var(--fundo-simples)}
body.simples main{max-width:760px;margin:auto;padding:max(24px,env(safe-area-inset-top)) 16px max(60px,env(safe-area-inset-bottom))}
body.simples h1{font-size:clamp(26px,5vw,36px);letter-spacing:-.035em;line-height:1.1;margin:6px 0}
body.simples .topo{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.marca-mini{display:flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--cinza);font-weight:500}
.marca-mini svg{width:30px;height:30px}
body.centro{display:grid;place-items:center;padding:16px}

/* ---------- app (index) ---------- */
body.app{height:100dvh;overflow:hidden;background:var(--fundo-app)}
.quadro{height:100dvh;display:grid;grid-template-columns:304px minmax(0,1fr);gap:14px;padding:14px}
.lateral,.palco{position:relative;border-radius:28px;overflow:hidden;min-height:0;border:1px solid var(--linha)}
.lateral{background:var(--lateral);display:flex;flex-direction:column;padding:22px 16px 16px}
.palco{background:var(--janela);display:flex;flex-direction:column}

/* arte pontilhada (a textura do print): nuvens quentes + pontos */
.arte{position:absolute;inset:auto 0 0 0;height:62%;pointer-events:none;z-index:0;opacity:.9;
  background:
   radial-gradient(60% 50% at 20% 85%,var(--arte1) 0%,transparent 70%),
   radial-gradient(70% 45% at 80% 100%,var(--arte2) 0%,transparent 70%),
   radial-gradient(50% 40% at 70% 30%,var(--arte3) 0%,transparent 70%),
   radial-gradient(45% 35% at 15% 20%,var(--arte4) 0%,transparent 70%);
  -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 100%);mask-image:linear-gradient(to top,#000 5%,transparent 100%)}
.arte::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,var(--ponto) 1.1px,transparent 1.5px);background-size:4px 4px}
.lateral>:not(.arte),.palco>:not(.arte){position:relative;z-index:1}

.cab-lateral{display:flex;align-items:center;justify-content:space-between;padding:0 6px 22px 8px}
.logo{display:flex;align-items:center;gap:10px;font:700 26px var(--fonte);letter-spacing:-.04em}
.logo svg{width:30px;height:30px;flex:none}
.icone-btn{width:44px;height:44px;border-radius:14px;border:1px solid var(--linha2);background:var(--peca);display:grid;place-items:center;cursor:pointer;position:relative;flex:none}
.icone-btn::after{content:"";position:absolute;inset:-4px}
.icone-btn:active{background:var(--peca2)}
@media (hover:hover) and (pointer:fine){.icone-btn:hover{background:var(--peca2)}}

.menu{display:flex;flex-direction:column;gap:6px}
.menu button,.menu a{min-height:52px;padding:0 18px;border:1px solid transparent;border-radius:18px;background:none;color:var(--cinza);
  font:500 17px var(--fonte);cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:14px;text-align:left;width:100%}
.menu .ico{width:22px;height:22px}
.menu button:active,.menu a:active{background:var(--peca)}
.menu .on{color:var(--tinta);border-color:var(--linha2);background:var(--grad-on);box-shadow:0 6px 18px -8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.menu .on::after{content:"";margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--brasa)}
@media (hover:hover) and (pointer:fine){.menu button:hover:not(.on),.menu a:hover{background:var(--peca);color:var(--tinta)}}
.linha-fina{height:1px;width:72px;margin:20px 8px;background:linear-gradient(90deg,var(--linha2),transparent)}
.ctx-cab{display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px;font:600 17px var(--fonte);margin-bottom:12px}
.busca{position:relative;margin-bottom:10px}
.busca .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--cinza);pointer-events:none}
.busca input{padding-left:42px;border-radius:16px;background:transparent}
.ctx-lista{flex:1;display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0;margin:0 -4px;padding:0 4px}
.ctx{min-height:52px;display:flex;align-items:center;gap:12px;padding:0 8px 0 14px;border-radius:16px;background:none;border:0;color:var(--tinta);cursor:pointer;font:400 16px var(--fonte);text-align:left;width:100%}
.ctx span.nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx.on{background:var(--peca)}
.ctx .ico{color:var(--cinza)}
.ctx:active{background:var(--peca)}
@media (hover:hover) and (pointer:fine){.ctx:hover{background:var(--peca)}}
.conta{margin-top:12px;flex:none;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;border:1px solid var(--linha2);background:var(--grad-on);width:100%;text-align:left;cursor:default}
.conta .av{width:42px;height:42px;border-radius:50%;background:var(--janela);display:grid;place-items:center;flex:none;border:1px solid var(--linha2)}
.conta b{display:block;font-size:17px}.conta small{color:var(--cinza);font-size:14px}

.rolagem{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 clamp(20px,5vw,52px)}
.cabeca{padding:clamp(24px,6vh,60px) clamp(20px,5vw,52px) 14px}
.cabeca h2{font:700 clamp(28px,4.4vw,40px) var(--fonte);letter-spacing:-.045em;line-height:1.1}
.cabeca p{margin-top:6px}
.fio{max-width:820px;margin:0;padding-bottom:24px}
.fio.largo{max-width:1100px}

/* conversa */
.bolha{border-radius:22px;border:1px solid var(--linha);padding:16px 22px;font-size:17px;line-height:1.65;margin-bottom:14px;background:var(--grad-on);max-width:88%;overflow-wrap:anywhere}
.bolha.eu{margin-left:auto;border-top-right-radius:8px}
.bolha.bot{background:var(--vidro);border-top-left-radius:8px}
.quem{font:600 14px var(--fonte);padding:6px 10px;color:var(--tinta)}
.abrir{width:100%;max-width:520px;display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:22px;border:1px solid var(--linha);background:var(--vidro);cursor:pointer;text-align:left;margin-bottom:14px}
.abrir b{display:block;font-size:16px}.abrir small{color:var(--cinza);font-size:14px}
.abrir .ico:last-child{margin-left:auto}
.abrir:active{background:var(--peca2)}
@media (hover:hover) and (pointer:fine){.abrir:hover{background:var(--peca2)}}
.sugestoes{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 22px}
.sug{min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid var(--linha2);background:var(--vidro);cursor:pointer;font:400 15px var(--fonte);text-align:left;max-width:100%}
.sug:active{background:var(--peca2)}
@media (hover:hover) and (pointer:fine){.sug:hover{background:var(--peca2)}}
.pensando::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brasa);margin-left:8px;animation:pulsa 1s infinite}
@keyframes pulsa{50%{opacity:.2}}

/* campo de mensagem */
.compor{padding:8px clamp(14px,5vw,52px) max(18px,env(safe-area-inset-bottom))}
.caixa{max-width:860px;margin:0;border-radius:26px;border:1px solid var(--linha2);background:var(--caixa);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:hidden}
.caixa .rotulo{font:500 14px var(--fonte);padding:10px 20px 8px;color:var(--tinta)}
.caixa textarea{border:0;background:var(--campo);border-radius:20px;margin:0 8px;width:calc(100% - 16px);min-height:84px;max-height:30dvh;padding:14px 16px;font-size:17px}
.caixa textarea.pauta{min-height:70px;margin-top:8px;font-size:16px}
.ferr{display:flex;align-items:center;gap:8px;padding:10px 10px 12px;flex-wrap:wrap}
.pilula{position:relative;min-height:44px;border-radius:999px;border:1px solid var(--linha2);background:var(--vidro);display:inline-flex;align-items:center;gap:8px;padding:0 14px;cursor:pointer;font:500 15px var(--fonte);max-width:100%;color:var(--tinta)}
.pilula select{position:absolute;inset:0;opacity:0;width:100%;height:100%;min-height:0;cursor:pointer;font-size:16px}
.pilula .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.pilula.on{border-color:var(--brasa)}
.pilula:active{background:var(--peca2)}
@media (hover:hover) and (pointer:fine){.pilula:hover{background:var(--peca2)}}
.mola{flex:1}
.enviar{width:48px;height:48px;border-radius:50%;border:0;background:var(--marca);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.enviar:disabled{opacity:.5;cursor:wait}
.enviar:active{background:var(--marca-hover)}
@media (hover:hover) and (pointer:fine){.enviar:hover{background:var(--marca-hover)}}

/* conteudos */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.mini{border-radius:22px;border:1px solid var(--linha);background:var(--peca);overflow:hidden;cursor:pointer;text-align:left;padding:0;display:block;width:100%}
.mini img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--peca2)}
.mini .corpo{padding:14px 16px 16px}
.mini .corpo b{display:block;font-size:15px;line-height:1.35;margin:8px 0 2px}
.mini:active{background:var(--peca2)}
@media (hover:hover) and (pointer:fine){.mini:hover{border-color:var(--linha2)}}
.abas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.abas button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--linha);background:none;color:var(--cinza);cursor:pointer;font:500 15px var(--fonte)}
.abas button.on{background:var(--tinta);color:var(--sobre-tinta);border-color:var(--tinta)}
.detalhe-topo{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.esc-item{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.dot{width:14px;height:14px;border-radius:50%;display:inline-block;margin-right:8px;vertical-align:-2px}
.logoprev{height:56px;margin-top:8px;border-radius:8px;background:#fff}

/* barra de baixo (celular) */
.abas-baixo{display:none}

@media (max-width:860px){
  body.app{overflow:hidden}
  .quadro{display:block;padding:0;height:100dvh}
  .lateral{display:none}
  .palco{border-radius:0;border:0;height:100dvh}
  .cabeca{padding:max(18px,env(safe-area-inset-top)) 16px 8px}
  .rolagem{padding:0 16px}
  .palco>.rolagem:last-child{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .compor{padding:6px 10px calc(86px + env(safe-area-inset-bottom))}
  .compor.sem-barra{padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .bolha{max-width:96%;font-size:16px;padding:14px 16px}
  .row{grid-template-columns:1fr}
  .tira img{height:260px}
  .grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .abas-baixo{display:flex;position:fixed;z-index:20;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
    bottom:max(12px,env(safe-area-inset-bottom));background:var(--barra);border:1px solid var(--linha2);border-radius:999px;padding:6px;gap:2px;box-shadow:0 12px 30px -10px rgba(0,0,0,.8)}
  .abas-baixo button,.abas-baixo a{flex:1;min-height:48px;border:0;border-radius:999px;background:none;color:var(--cinza);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    font:500 11px var(--fonte);cursor:pointer;text-decoration:none;min-width:0}
  .abas-baixo .on{background:var(--peca2);color:var(--tinta)}
  .abas-baixo .ico{width:20px;height:20px}
  .arte{height:45%}
}

/* ---------- modo claro (botão no menu; guarda a escolha no aparelho) ---------- */
:root[data-tema="light"]{
  --fundo:#eee8df; --janela:#fbf8f3; --lateral:#f4efe7; --peca:#ffffff; --peca2:#efe9e0;
  --linha:rgba(60,40,20,.10); --linha2:rgba(60,40,20,.20);
  --tinta:#1e1a16; --cinza:#6a6258; --cinza2:#8c8378;
  --marca:#c94a38; --marca-hover:#b03d2c; --brasa:#d9622f;
  --ok:#2f6b45; --alerta:#7a5a1e; --ruim:#b42318; --ruim-fundo:#fbeae7;
  --vidro:rgba(255,255,255,.9); --caixa:rgba(255,255,255,.7); --campo:rgba(244,239,231,.9); --suave:#3a342d;
  --grad-on:linear-gradient(115deg,#ffffff 0%,#f4efe7 100%); --barra:#ffffff; --sobre-tinta:#ffffff; --ponto:rgba(251,248,243,.78);
  --arte1:#d9b87a; --arte2:#e0875a; --arte3:#9fb3bd; --arte4:#d6c9a0;
  --fundo-app:radial-gradient(1000px 600px at 10% 100%,#e6d3b0 0%,transparent 60%),radial-gradient(900px 500px at 100% 0%,#efe2d0 0%,transparent 60%),#e8e1d6;
  --fundo-simples:radial-gradient(900px 520px at 85% -10%,rgba(238,125,79,.16),transparent 60%),#eee8df;
  color-scheme:light;
}
:root[data-tema="light"] .tag.ok{color:#fff}
:root[data-tema="light"] .tag.ajuste{color:#fff}
:root[data-tema="light"] .alerta.ruim{border:1px solid rgba(180,35,24,.25)}
:root[data-tema="light"] .abas-baixo,:root[data-tema="light"] .conta{box-shadow:0 8px 24px -12px rgba(60,40,20,.35)}
.btn.tema{width:44px;padding:0}

.flut{display:none}
@media (max-width:860px){
  .flut{display:flex;gap:6px;position:fixed;z-index:25;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
  .flut .icone-btn{background:var(--vidro);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .cabeca h2{padding-right:100px}
}
[hidden]{display:none!important}

.tag.falhou{background:var(--ruim-fundo);color:var(--ruim)}
.tag.rejeitado{opacity:.6}
.cal-semana,.cal-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-semana span{text-align:center;font:500 12px var(--mono);color:var(--cinza);padding-bottom:6px;text-transform:uppercase}
.cal-dia{min-height:104px;border:1px solid var(--linha);border-radius:14px;background:var(--peca);padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0}
.cal-dia.hoje{border-color:var(--brasa)}
.cal-n{font:500 12px var(--mono);color:var(--cinza)}
.cal-p{display:flex;align-items:center;gap:6px;min-height:44px;border:1px solid var(--linha2);border-radius:10px;background:var(--peca2);padding:3px;cursor:pointer;text-align:left;min-width:0}
.cal-p img{width:28px;height:36px;object-fit:cover;border-radius:5px;flex:none}
.cal-p span{font:500 11px var(--mono);color:var(--cinza)}
.cal-p.st-aprovado,.cal-p.st-publicado{border-color:var(--ok)}
.cal-p.st-falhou{border-color:var(--ruim)}
.cal-p.st-rejeitado{opacity:.45}
.cal-leg{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
@media (max-width:860px){.cal-dia{min-height:72px;padding:3px}.cal-p span{display:none}.cal-p{justify-content:center;padding:2px}.cal-grade,.cal-semana{gap:3px}}

/* ---------- imagem ampliada ---------- */
.tira img[data-zoom]{cursor:zoom-in}
.zoom{position:fixed;inset:0;z-index:100;background:rgba(6,5,4,.94);display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.zoom-cx{flex:1;height:100%;display:flex;align-items:center;justify-content:center;padding:max(64px,env(safe-area-inset-top)) 12px max(64px,env(safe-area-inset-bottom));min-width:0;overflow:auto;touch-action:pinch-zoom pan-x pan-y}
.zoom-cx img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;background:var(--peca2)}
.zoom-x,.zoom-n{position:absolute;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(30,26,22,.8);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.zoom-x{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
.zoom-n.ant{left:max(12px,env(safe-area-inset-left))}
.zoom-n.prox{right:max(12px,env(safe-area-inset-right))}
.zoom-c{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:#fff;font:500 13px var(--mono);pointer-events:none}
@media (max-width:860px){
  .zoom-n{top:auto;bottom:max(10px,env(safe-area-inset-bottom))}
  .zoom-n.ant{left:16px}
  .zoom-n.prox{right:16px}
}

/* ---------- celular: topo com escritório, ações fixas, abas rolando ---------- */
@media (max-width:860px){
  .flut{left:max(12px,env(safe-area-inset-left));align-items:center}
  .flut #esc-movel{min-height:44px;background:var(--vidro);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:calc(100vw - 150px)}
  .flut #esc-movel .txt{max-width:none;font-weight:600}
  .cabeca{padding-top:calc(max(10px,env(safe-area-inset-top)) + 58px)}
  .cabeca h2{padding-right:0;font-size:26px}
  input,select,textarea{font-size:16px}
  .abas{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 14px;padding:0 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .abas::-webkit-scrollbar{display:none}
  .abas button{flex:none;white-space:nowrap}
  .tira{margin:14px -16px 0;padding:0 16px 8px;gap:10px}
  .tira img{height:auto;width:78vw;max-width:340px;scroll-snap-align:center}
  .tira img[style*="9/16"]{width:56vw}
  .acoes.pri{position:sticky;bottom:calc(86px + env(safe-area-inset-bottom));z-index:15;margin:16px -6px 0;padding:10px;border-radius:24px;background:var(--barra);border:1px solid var(--linha2);box-shadow:0 10px 30px -10px rgba(0,0,0,.7);flex-wrap:nowrap}
  .acoes.pri:empty{display:none}
  .acoes.pri .btn{flex:1;min-width:0;padding:0 10px;white-space:nowrap}
  .acoes.sec{margin-top:14px}
  .acoes.sec .btn{flex:1 1 100%}
  .leg{font-size:15px}
}