/* Peças da comunidade usadas em várias páginas. Tudo com prefixo pc- / dbt- para não esbarrar no CSS de cada página. */

/* tema claro (estilo Instagram): fundo branco, detalhes no roxo gradiente, curtida vermelha */
:root{--pc-g:linear-gradient(135deg,#7a0019 0%,#a3122f 100%);--pc-roxo:#7a0019;--pc-curtida:#ecd3b5}
.po-b.on[data-po-curtir]{color:var(--pc-curtida)}

/* app sem zoom (pinça e dois toques) e sem o "elástico" que puxava o topo junto com a página */
html{touch-action:pan-x pan-y;overscroll-behavior-y:none}
body{overscroll-behavior-y:none}
/* iPhone: a faixa do relógio fica transparente e o conteúdo rolando aparecia acima do topo fixo das telas por cima; esta faixa preta tapa ela */
.po-topo::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:400px;background:#000000;pointer-events:none}
.pc-onb{box-shadow:0 -400px 0 #000000}

/* barra de navegação: no celular fica embaixo, só ícones (como no Instagram); no PC vira trilho à esquerda nas páginas do app */
.pc-barra{display:none}
.pc-barra a{color:#e2caad;text-decoration:none;-webkit-tap-highlight-color:transparent}
.pc-barra svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pc-barra a.on svg{stroke-width:2.5}
.pc-barra a.on .enche{fill:currentColor}
.pc-barra a.on .cruz{stroke:#000000;stroke-width:2}
.pc-barra .pc-barra-av{width:28px;height:28px;font-size:10px}
.pc-barra a.on .pc-barra-av{box-shadow:0 0 0 2px #000000,0 0 0 3.5px #e2caad}
.pc-barra .pc-barra-selo{display:none}
.pc-barra a{position:relative}
.pc-dm-n{position:absolute;top:calc(50% - 20px);left:calc(50% + 4px);min-width:19px;height:19px;padding:0 5px;border-radius:10px;box-sizing:border-box;
  font:700 11px/19px Inter,system-ui,sans-serif;font-style:normal;text-align:center;color:#000000;background:var(--pc-curtida);box-shadow:0 0 0 2px #000000}
@media (max-width:900px){
  .pc-barra{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:58;display:flex;width:auto;max-width:none;margin:0;padding:0 0 env(safe-area-inset-bottom);
    background:rgba(0,0,0,0.97);border:0;border-top:1px solid #0d0b0a;border-radius:0;box-shadow:0 400px 0 #000000;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .pc-barra a{flex:1;height:52px;display:grid;place-items:center}
  .pc-barra a:active{opacity:.55}
  body.pc-com-barra{padding-bottom:calc(53px + env(safe-area-inset-bottom))}
}
@media (min-width:901px){
  body.pc-trilho{padding-left:76px}
  body.pc-trilho .pc-barra{position:fixed;left:0;top:0;bottom:0;z-index:58;display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:18px 0;background:#000000;border-right:1px solid #0d0b0a}
  body.pc-trilho .pc-barra a{width:50px;height:50px;display:grid;place-items:center;border-radius:12px}
  body.pc-trilho .pc-barra a:hover{background:#050403}
  body.pc-trilho .pc-barra .pc-barra-selo{display:grid;width:40px;height:40px;margin-bottom:18px;border-radius:11px;font:600 18px "Noto Serif Hebrew",Georgia,serif;color:#ecd3b5;
    background:var(--pc-g);box-shadow:inset 0 -2px 0 rgba(236,211,181,0.075);background-origin:border-box}
}

/* avatar, selo de oficial, botão seguir, linhas de pessoas */
.pc-av{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;object-fit:cover;overflow:hidden;vertical-align:middle;
  font:600 11px Inter,system-ui,sans-serif;color:#ecd3b5;background:var(--pc-g);background-origin:border-box}
.pc-av.d{background:linear-gradient(180deg,#2a2620,#050403);color:#cdb79d}
img.pc-av{background:#0a0908}
.pc-av-m{width:44px;height:44px;font-size:14px}
.pc-av-g{width:112px;height:112px;font-size:34px;box-shadow:0 0 0 3px #000000,0 0 0 4.5px #443d34}
.pc-selo{width:15px;height:15px;color:#e2caad;vertical-align:-2px;margin-left:4px;flex:none}
.pc-seguir{font:600 13px Inter,system-ui,sans-serif;padding:7px 16px;border-radius:9px;cursor:pointer;white-space:nowrap;color:#ecd3b5;
  background:var(--pc-g);border:1px solid transparent;box-shadow:none;background-origin:border-box}
.pc-seguir.on{color:#dbc4a8;background:linear-gradient(180deg,#161411,#040303);border-color:#000000;box-shadow:inset 0 1px 0 rgba(0,0,0,0.12)}
.pc-seguir:active{transform:translateY(1px)}
.pc-u{display:flex;align-items:center;gap:12px;padding:8px 0}
.pc-u > a{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit}
.pc-u .pc-t{flex:1;min-width:0}
.pc-u b{display:flex;align-items:center;font:600 14px Inter,system-ui,sans-serif;color:#e2caad}
.pc-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-u small{display:block;color:#847665;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* janela (bottom sheet no celular) */
.pc-fundo{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(236,211,181,0.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pc-janela{position:relative;width:min(460px,100%);padding:26px;color:#e2caad;background:linear-gradient(180deg,#0b0a08,#000000);
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);animation:pc-sobe .22s ease-out}
.pc-janela.lista{max-height:80vh;max-height:80dvh;overflow-y:auto;padding-top:18px}
.pc-janela h2{font:500 34px/1.05 "Cormorant Garamond",Georgia,serif;margin:6px 0 8px}
.pc-janela h2 em{font-style:italic;color:#847665}
.pc-janela h3{font:600 15px Inter,system-ui,sans-serif;text-align:center;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid #13110f}
.pc-janela p{font-size:13.5px;color:#9c8b78;line-height:1.55}
.pc-kicker{font:500 11.5px Inter,system-ui,sans-serif;letter-spacing:3px;text-transform:uppercase;color:#726658}
.pc-arroba{display:flex;align-items:center;gap:6px;margin-top:16px;padding:0 12px;border-radius:12px;background:#000000;border:1px solid #1b1814;box-shadow:inset 0 2px 5px rgba(236,211,181,0.16)}
.pc-arroba:focus-within{border-color:#554c41}
.pc-arroba span{color:#726658;font:600 16px Inter,system-ui,sans-serif}
.pc-arroba input{flex:1;min-width:0;font:16px Inter,system-ui,sans-serif;color:#dcc5a9;background:transparent;border:0;outline:none;padding:13px 0}
.pc-botoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.pc-menu{display:flex;flex-direction:column}
.pc-menu a,.pc-menu button{display:block;width:100%;text-align:left;padding:15px 4px;font:500 15px Inter,system-ui,sans-serif;color:#e2caad;text-decoration:none;background:none;border:0;border-top:1px solid #0d0b0a;cursor:pointer}
.pc-menu :first-child{border-top:0}
.pc-menu .perigo{color:#e0245e}
.pc-erro{font-size:12.5px;color:#e0245e;margin-top:6px}
.pc-erro:empty,.pc-aviso:empty{display:none}
.pc-aviso{font-size:12.5px;color:#9c8b78;margin-top:6px}
@keyframes pc-sobe{from{opacity:0;transform:translateY(14px)}}
@media (max-width:600px){
  .pc-fundo{align-items:flex-end;padding:0}
  .pc-janela{width:100%;padding:24px 20px calc(24px + env(safe-area-inset-bottom));clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%,0 18px)}
  .pc-botoes .btn{flex:1}
}

/* ajustar a foto antes de enviar (perfil e posts) */
.pc-rec{position:fixed;inset:0;z-index:97;display:flex;flex-direction:column;color:#e2caad;font-family:Inter,system-ui,sans-serif;background:#000000;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);box-shadow:0 0 0 400px #000000;touch-action:none;user-select:none;-webkit-user-select:none}
.pc-rec-topo{display:grid;grid-template-columns:110px 1fr 110px;align-items:center;height:52px;padding:0 14px;border-bottom:1px solid #0d0b0a}
.pc-rec-topo b{text-align:center;font:700 16px Inter,system-ui,sans-serif}
.pc-rec-topo button{justify-self:start;padding:8px 2px;font:500 15px Inter,system-ui,sans-serif;color:#ae9c86;background:none;border:0;cursor:pointer}
.pc-rec-topo button.on{justify-self:end;color:#ecd3b5;font-weight:700}
.pc-rec-topo button:disabled{opacity:.5}
.pc-rec-area{position:relative;flex:1;min-height:0;cursor:grab}
.pc-rec-area:active{cursor:grabbing}
.pc-rec-area canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.pc-rec-pe{display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 20px 18px}
.pc-rec-zoom{display:flex;align-items:center;gap:12px;width:100%;max-width:360px;font-size:20px;color:#847665}
.pc-rec-zoom input{flex:1;accent-color:#e2caad}
.pc-rec-pe small{font-size:12.5px;color:#726658;text-align:center}
.pc-rec-pe .pc-erro{margin:0;font-size:13px;color:#e0245e}

/* telas cheias: instalar o app, criar e editar perfil */
html.pc-trava{overflow:hidden}
.pc-onb{position:fixed;inset:0;z-index:95;overflow-y:auto;-webkit-overflow-scrolling:touch;color:#ecd3b5;font-family:Inter,system-ui,sans-serif;
  background:radial-gradient(90% 45% at 50% 0%,rgba(122,0,25,0.08),transparent 70%),#000000;
  padding:calc(26px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom))}
.pc-onb-in{max-width:420px;margin:0 auto;display:flex;flex-direction:column;text-align:center;animation:pc-sobe .25s ease-out}
.pc-onb-icone{width:84px;height:84px;border-radius:22px;margin:6px auto 16px;box-shadow:0 18px 40px -10px rgba(236,211,181,0.16),0 0 0 1px #1b1814}
.pc-onb h2{font:500 38px/1.05 "Cormorant Garamond",Georgia,serif;margin:10px 0}
.pc-onb h2 em{font-style:italic;color:#847665}
.pc-onb p{font:14.5px/1.55 Inter,system-ui,sans-serif;color:#9c8b78}
.pc-onb p b{color:#e2caad;font-weight:600}
.pc-onb .pc-onb-cta{width:100%;justify-content:center;margin-top:18px;padding:15px 18px;font-size:15px;text-decoration:none}
.pc-onb .pc-onb-cta + .pc-onb-cta{margin-top:10px}
.pc-onb-pular{display:block;margin:16px auto 0;padding:10px;font:500 14px Inter,system-ui,sans-serif;color:#847665;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pc-onb .pc-onb-mini{font-size:12.5px;margin-top:10px}
.pc-passos{list-style:none;counter-reset:p;text-align:left;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.pc-passos li{counter-increment:p;position:relative;padding:14px 14px 14px 56px;border-radius:14px;background:linear-gradient(180deg,#060605,#000000);border:1px solid #13110f;
  font:14.5px/1.55 Inter,system-ui,sans-serif;color:#c8b39a}
.pc-passos li::before{content:counter(p);position:absolute;left:14px;top:13px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 13px Inter,system-ui,sans-serif;
  color:#ecd3b5;background:var(--pc-g);box-shadow:none;background-origin:border-box}
.pc-passos b{color:#ecd3b5;font-weight:600}
.pc-ic{width:18px;height:18px;padding:3px;margin:0 2px;border-radius:6px;vertical-align:-6px;background:#1b1814;color:#ecd3b5;box-sizing:content-box}
.pc-onb-ok{width:72px;height:72px;margin:6px auto 4px;border-radius:50%;display:grid;place-items:center;font:600 34px Inter,system-ui,sans-serif;color:#ecd3b5;background:var(--pc-g);background-origin:border-box}
.pc-onb-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.pc-onb-barras{display:flex;gap:5px}
.pc-onb-barras i{width:26px;height:4px;border-radius:2px;background:#1b1814}
.pc-onb-barras i.on{background:#e2caad}
.pc-onb .pc-arroba{margin-top:22px}
.pc-onb .pc-status{min-height:21px;margin-top:8px;font-size:13px;text-align:left}
.pc-onb .pc-status.ok{color:#1f9d55}
.pc-onb .pc-status.ruim{color:#e0245e}
.pc-onb-foto{margin:18px auto 6px}
.pc-campo{display:block;text-align:left;margin-top:16px}
.pc-campo > span{display:flex;justify-content:space-between;font:500 12.5px Inter,system-ui,sans-serif;color:#847665;margin-bottom:6px}
.pc-campo i{font-style:normal}
.pc-campo input,.pc-campo textarea{display:block;width:100%;font:16px/1.45 Inter,system-ui,sans-serif;color:#dcc5a9;padding:12px 13px;border-radius:12px;background:#000000;
  border:1px solid #1b1814;outline:none;resize:none;box-shadow:inset 0 2px 5px rgba(236,211,181,0.16)}
.pc-campo input:focus,.pc-campo textarea:focus{border-color:#554c41}
.pc-oficial{display:flex;align-items:center;gap:12px;text-align:left;margin-top:20px;padding:12px;border-radius:14px;background:#010101;border:1px solid #13110f}
.pc-oficial:empty{display:none}
.pc-oficial div{flex:1;min-width:0}
.pc-oficial b{display:flex;align-items:center;font:600 14px Inter,system-ui,sans-serif}
.pc-oficial small{display:block;color:#847665;font-size:12.5px}

/* debate (comentários, respostas e curtidas) */
.dbt-novo{padding:12px;border-radius:14px;background:#000000;border:1px solid #13110f;box-shadow:inset 0 2px 6px rgba(236,211,181,0.16)}
.dbt-novo:focus-within{border-color:#443d34}
.dbt-novo textarea{display:block;width:100%;min-height:70px;resize:vertical;font:15px/1.5 Inter,system-ui,sans-serif;color:#dcc5a9;background:transparent;border:0;outline:none;box-shadow:none;padding:2px}
.dbt-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.dbt-quem{font-size:12px;color:#726658;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbt-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 6px}
.dbt-cab b{font:600 13px Inter,system-ui,sans-serif;color:#bfab93}
.dbt-c{display:flex;gap:11px;padding:14px 0;border-top:1px solid #0b0a08}
.dbt-av{width:34px;height:34px;box-shadow:0 0 0 2px #000000}
.dbt-b{flex:1;min-width:0}
.dbt-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.dbt-who a{display:inline-flex;align-items:center;color:#ecd3b5;text-decoration:none}
.dbt-who b{font-weight:600;color:#ecd3b5}
.dbt-when{color:#64594c;font-size:11.5px;margin-left:auto}
.dbt-ref{font:500 11px Inter,system-ui,sans-serif;padding:3px 8px;border-radius:6px;background:#040303;border:1px solid #1b1814;color:#ae9c86;cursor:pointer}
.dbt-t{font-size:14.5px;line-height:1.55;color:#cbb69c;margin:6px 0 8px;overflow-wrap:anywhere}
.dbt-acts{display:flex;gap:6px;align-items:center}
.dbt-like{font:500 12.5px Inter,system-ui,sans-serif;min-height:32px;padding:6px 12px;border-radius:9px;color:#c8b39a;background:linear-gradient(180deg,#13110f,#040303);border:1px solid #000000;box-shadow:inset 0 1px 0 rgba(0,0,0,0.1);cursor:pointer}
.dbt-like.on{color:#ecd3b5;background:var(--pc-g);border-color:transparent;box-shadow:inset 0 -2px 0 rgba(236,211,181,0.054);background-origin:border-box}
.dbt-like.on{color:var(--pc-curtida);background:#0a0907;border-color:#7a0019;box-shadow:none}
.dbt-like b{font-weight:600}
.dbt-ghost{font:500 12.5px Inter,system-ui,sans-serif;min-height:32px;color:#7f7262;padding:6px 8px;cursor:pointer}
.dbt-ghost:hover{color:#ecd3b5}
.dbt-resps{margin-top:6px;padding-left:12px;border-left:1px solid #161411}
.dbt-resps:empty{display:none}
.dbt-resps .dbt-c{padding:10px 0 4px;border-top:0}
.dbt-resps .dbt-av{width:28px;height:28px;font-size:10px}
.dbt-resps .dbt-novo{margin:8px 0 4px}
.dbt-vazio{color:#726658;font-size:14px;padding:22px 4px;text-align:center;line-height:1.6}

/* ---------- animação de instalar no iPhone, Safari ou Chrome (o celular inteiro mede em cqw = 1% da largura da tela dele) ---------- */
.pc-onb-mini a,.pc-onb p a{color:inherit;text-decoration:underline}
.tut{text-align:center}
.tut-tel{container-type:inline-size;position:relative;width:min(236px,62vw,25vh);aspect-ratio:9/19.5;margin:14px auto 0;padding:3.2%;border-radius:15%/7%;
  background:linear-gradient(160deg,#2a2621,#000000 40%,#151310);box-shadow:inset 0 0 0 1px rgba(236,211,181,0.16),0 30px 60px -20px rgba(236,211,181,0.16),0 0 0 1px #0a0908}
.tut-tela{position:relative;height:100%;overflow:hidden;border-radius:11cqw;background:#000000;color:#e2caad;font-family:Inter,system-ui,sans-serif;text-align:left;user-select:none;-webkit-user-select:none}
.tut-tela svg{width:4.8cqw;height:4.8cqw;flex:none}
.tut-tela img{display:block;flex:none}
.tut-pag,.tut-veu,.tut-menu,.tut-folha,.tut-add,.tut-home{position:absolute;transition:opacity .35s,transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s .4s}
.tut-pag{inset:0}
.tut-cam{overflow:hidden;padding-top:14px} /* janela da "câmera": o celular inteiro cresce dentro dela no zoom */
.tut-cam .tut-tel{margin-top:0;transform-origin:0 0;transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.tut-sb{display:flex;justify-content:space-between;align-items:center;height:11cqw;padding:2cqw 7cqw 0 9cqw;font:600 4.2cqw Inter,system-ui,sans-serif}
.tut-sb span{display:flex;align-items:flex-end;gap:.7cqw}
.tut-sb i{width:1cqw;height:1.6cqw;border-radius:.4cqw;background:#ecd3b5}.tut-sb i:nth-child(2){height:2.3cqw}.tut-sb i:nth-child(3){height:3cqw}
.tut-sb u{width:6cqw;height:3cqw;margin-left:1cqw;border-radius:1cqw;background:#ecd3b5}
.tut-topo{display:flex;align-items:center;gap:2.6cqw;padding:3cqw 5cqw 4cqw}
.tut-selo{width:8cqw;height:8cqw;border-radius:2.2cqw;display:grid;place-items:center;font:600 4.2cqw "Noto Serif Hebrew",serif;color:#ecd3b5;background:var(--pc-g);background-origin:border-box}
.tut-topo em{font:italic 500 7.6cqw/1 "Cormorant Garamond",Georgia,serif}
.tut-c{display:flex;flex-direction:column;gap:2.4cqw;height:30cqw;margin:0 4cqw 3.5cqw;padding:5cqw;border-radius:3cqw;background:linear-gradient(180deg,#060605,#000000);border:.3cqw solid #13110f}
.tut-c.g{height:44cqw}.tut-c.p{height:52cqw}
.tut-c i{height:2.6cqw;border-radius:2cqw;background:#1b1814}.tut-c i:first-child{width:45%;height:4cqw;background:#2a2620}.tut-c i.c{width:70%}
.tut-abas{position:absolute;left:0;right:0;bottom:20cqw;display:flex;justify-content:space-around;padding:3cqw 4cqw;background:#000000;border-top:.3cqw solid #0c0b09}
.tut-abas i{width:6cqw;height:6cqw;border:.6cqw solid #d7c0a5;border-radius:1.6cqw}.tut-abas i:nth-child(1){background:#d7c0a5}.tut-abas i:nth-child(2),.tut-abas i:nth-child(4),.tut-abas i:nth-child(5){border-radius:50%}
.tut-safari{position:absolute;left:3.5cqw;right:3.5cqw;bottom:4cqw;display:flex;gap:2.2cqw;align-items:center}
.tut-bola,.tut-url{height:13cqw;display:flex;align-items:center;justify-content:center;border-radius:7cqw;background:rgba(43,38,33,0.92);box-shadow:inset 0 .3cqw 0 rgba(0,0,0,0.08)}
.tut-bola{width:13cqw;font:700 4cqw/1 Inter,system-ui,sans-serif;letter-spacing:.3cqw;transition:background .2s}
.tut-url{flex:1;min-width:0;font-size:3.6cqw;color:#d7c0a5;overflow:hidden;white-space:nowrap}
.tut-veu{inset:0;background:rgba(236,211,181,0.45);opacity:0;visibility:hidden}
.tut-menu{right:3.5cqw;bottom:19cqw;width:68cqw;padding:2cqw 0;border-radius:6cqw;background:rgba(24,22,18,0.97);box-shadow:0 4cqw 12cqw rgba(236,211,181,0.16);
  transform-origin:90% 100%;transform:scale(.4);opacity:0;visibility:hidden}
.tut-menu > div{display:flex;align-items:center;gap:3.4cqw;padding:2.7cqw 5cqw;font-size:3.9cqw;transition:background .2s}
.tut-menu hr{margin:1.5cqw 5cqw;border:0;border-top:.3cqw solid #3f3830}
.tut-menu .tut-menu-pe{justify-content:space-around;gap:0;padding-top:3cqw;font-size:3cqw}
.tut-menu-pe span{display:flex;flex-direction:column;align-items:center;gap:1cqw}
.tut-folha{left:2cqw;right:2cqw;bottom:2cqw;padding:4.5cqw 4cqw 4cqw;border-radius:8cqw;background:#1c1915;box-shadow:0 -4cqw 14cqw rgba(236,211,181,0.16);transform:translateY(112%);visibility:hidden}
.tut-f-cab{display:flex;gap:3.5cqw;align-items:center;padding-bottom:3.5cqw;border-bottom:.3cqw solid #2d2923}
.tut-f-cab img{width:14cqw;height:14cqw;border-radius:3.4cqw}
.tut-f-cab div{min-width:0}
.tut-f-cab b{display:block;font-size:3.9cqw}
.tut-f-cab small{display:block;font-size:2.9cqw;color:#9c8b78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tut-f-cab span{display:inline-block;margin-top:1.4cqw;padding:1cqw 3cqw;border-radius:4cqw;border:.3cqw solid #443d35;font-size:2.9cqw}
.tut-fila{display:flex;justify-content:space-between;padding:3.4cqw 1cqw;border-bottom:.3cqw solid #2d2923}
.tut-fila span{width:20cqw;display:flex;flex-direction:column;align-items:center;gap:1.3cqw;font-size:2.6cqw;line-height:1.15;text-align:center;color:#d7c0a5}
.tut-fila i{width:13.5cqw;height:13.5cqw;display:grid;place-items:center;font:600 5cqw Inter,system-ui,sans-serif;font-style:normal}
.tut-gente i{border-radius:50%;background:linear-gradient(160deg,#62584b,#1e1b17)}
.tut-apps i{border-radius:3.4cqw;color:#ecd3b5}.tut-apps svg{width:7cqw;height:7cqw}
.tut-apps .a1{background:linear-gradient(180deg,#5fb3ff,#1a73e8)}.tut-apps .a2{background:linear-gradient(180deg,#6ee07f,#22b14c)}
.tut-apps .a3{background:linear-gradient(180deg,#63aaff,#1d6fe0)}.tut-apps .a4{background:linear-gradient(180deg,#f7d34a 30%,#ecd3b5 30%)}
.tut-acoes{border:0}
.tut-acoes i{border-radius:50%;background:#2d2923;transition:background .2s}.tut-acoes svg{width:6cqw;height:6cqw}
.tut-acoes em{font-style:normal}.tut-acoes .n{display:none}
.tut-lista{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.8,.2,1)}
.tut-grupo{border-radius:5cqw;background:#27231e}.tut-grupo + .tut-grupo{margin-top:2.6cqw}
.tut-grupo > div{display:flex;align-items:center;gap:3.4cqw;padding:2.9cqw 4.5cqw;font-size:3.6cqw;border-top:.3cqw solid #3f3830;transition:background .2s}
.tut-grupo > div:first-child{border-top:0}
/* Chrome: endereço em cima (com o Compartilhar) e barra de botões embaixo */
.tut-cr-topo{display:flex;align-items:center;gap:2cqw;height:10.5cqw;margin:1cqw 3.5cqw 0;padding:0 1.2cqw 0 3.2cqw;border-radius:6cqw;background:#161411;font-size:3.3cqw;color:#d7c0a5}
.tut-cr-topo i{display:grid;color:#8e7f6d}.tut-cr-topo svg{width:3.8cqw;height:3.8cqw}
.tut-cr-topo span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tut-cr-topo b{width:8.4cqw;height:8.4cqw;display:grid;place-items:center;border-radius:50%;transition:background .2s}
.tut-cr-pe{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;align-items:center;height:17cqw;padding-bottom:4cqw;background:#010101;border-top:.3cqw solid #13110e;color:#d7c0a5}
.tut-cr-pe svg{width:5.6cqw;height:5.6cqw}.tut-cr-pe svg:nth-child(2){opacity:.4}
.tut-cr-pe b{width:5.4cqw;height:5.4cqw;display:grid;place-items:center;border:.5cqw solid #d7c0a5;border-radius:1.3cqw;font:700 2.8cqw Inter,system-ui,sans-serif}
.tut-cr-pe span{font:700 4cqw Inter,system-ui,sans-serif;letter-spacing:.3cqw}
.tut.chrome .tut-abas{bottom:17cqw}
/* Safari com a barra "Embaixo": endereço e, abaixo, os botões (o Compartilhar já à mostra) */
.tut-sf2{position:absolute;left:0;right:0;bottom:0;padding:2.4cqw 3.5cqw 4cqw;background:#060605;border-top:.3cqw solid #13110e}
.tut-sf2 .tut-url{height:10cqw;border-radius:3.4cqw;background:#1d1a16;box-shadow:none}
.tut-sf2-bar{display:flex;justify-content:space-around;align-items:center;height:9cqw;margin-top:2cqw;color:#3d8bff}
.tut-tela .tut-sf2-bar svg{width:5.8cqw;height:5.8cqw}.tut-sf2-bar > svg:nth-child(2){opacity:.4}
.tut-sf2-bar b{width:10cqw;height:9cqw;display:grid;place-items:center;border-radius:3cqw;transition:background .2s}
.tut[data-v="comp"] .tut-safari,.tut:not([data-v="comp"]) .tut-sf2{display:none}
.tut[data-v="comp"] .tut-abas{bottom:27.4cqw}
.tut.chrome .tut-c.p{height:40cqw}
.tut-add{inset:0;padding:12cqw 3.5cqw 0;background:#0c0b09;transform:translateY(100%);visibility:hidden}
.tut-add-topo{display:flex;align-items:center;gap:2.5cqw;margin-bottom:6cqw}
.tut-add-topo b{flex:1;font-size:3.5cqw;text-align:center}
.tut-x{width:10cqw;height:10cqw;display:grid;place-items:center;border-radius:50%;background:#1d1a16}
.tut-azul{padding:2.6cqw 3.6cqw;border-radius:6cqw;font:600 3.7cqw Inter,system-ui,sans-serif;color:#ecd3b5;background:#3d8bff;transition:filter .2s,transform .2s}
.tut-add-app{display:flex;gap:3.5cqw;align-items:center;margin:0 -3.5cqw;padding:3.5cqw 4cqw;background:#1b1815;border-block:.3cqw solid #29251f}
.tut-add-app img{width:15cqw;height:15cqw;border-radius:3.6cqw}
.tut-add-app div{min-width:0}.tut-add-app b{display:block;font-size:4.2cqw;font-weight:500}
.tut-add-app small{display:block;margin-top:1.4cqw;font-size:3.2cqw;color:#847665;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tut-add-sw{display:flex;align-items:center;justify-content:space-between;margin:7cqw -3.5cqw 0;padding:3.5cqw 4cqw;background:#1b1815;border-block:.3cqw solid #29251f;font-size:3.9cqw}
.tut-add-sw i{position:relative;width:13cqw;height:7.8cqw;border-radius:4cqw;background:#34c759}
.tut-add-sw i::after{content:"";position:absolute;right:.8cqw;top:.8cqw;width:6.2cqw;height:6.2cqw;border-radius:50%;background:#ecd3b5}
.tut-add p{margin-top:2.5cqw;font-size:3cqw;line-height:1.4;color:#847665}
.tut-home{inset:0;background:radial-gradient(120% 80% at 30% 10%,#453e35,#090807 70%);opacity:0;visibility:hidden}
.tut-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:7cqw 0;justify-items:center;padding:8cqw 5cqw}
.tut-grade i,.tut-doca i{width:14cqw;height:14cqw;border-radius:3.6cqw;background:rgba(236,211,181,0.16)}
.tut-novo{display:flex;flex-direction:column;align-items:center;gap:1.4cqw;transform:scale(0)}
.tut-novo img{width:14cqw;height:14cqw;border-radius:3.6cqw;box-shadow:0 1cqw 4cqw rgba(236,211,181,0.15)}
.tut-novo small{font-size:2.5cqw;white-space:nowrap}
.tut-doca{position:absolute;left:4cqw;right:4cqw;bottom:4cqw;display:flex;justify-content:space-around;padding:4cqw;border-radius:9cqw;background:rgba(236,211,181,0.14)}
.tut-dedo{position:absolute;left:0;top:0;z-index:5;pointer-events:none;transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .3s}
.tut-dedo i{position:absolute;left:-6cqw;top:-6cqw;width:12cqw;height:12cqw;border-radius:50%;background:rgba(236,211,181,0.32);border:.7cqw solid rgba(236,211,181,0.95);
  box-shadow:0 1cqw 5cqw rgba(236,211,181,0.16)}
.tut-dedo::after{content:"";position:absolute;left:-6cqw;top:-6cqw;width:12cqw;height:12cqw;border-radius:50%;border:.6cqw solid #ecd3b5;opacity:0}
.tut.toque .tut-dedo i{animation:tut-aperta .45s ease-out}
.tut.toque .tut-dedo::after{animation:tut-onda .6s ease-out}
@keyframes tut-aperta{40%{transform:scale(.72)}}
@keyframes tut-onda{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.2)}}
.tut .ativo{background:rgba(236,211,181,0.2)}
.tut-acoes .ativo{background:none}.tut-acoes .ativo i{background:#534a40}
.tut-bola.ativo,.tut-cr-topo b.ativo{background:#62584b}
.tut-azul.ativo{background:#3d8bff;filter:brightness(1.3);transform:scale(.94)}
/* cada passo mostra a sua tela */
.tut[data-cena="menu"] .tut-veu,.tut[data-cena="folha"] .tut-veu,.tut[data-cena="lista"] .tut-veu{opacity:1;visibility:visible;transition-delay:0s}
.tut[data-cena="menu"] .tut-menu{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.tut[data-cena="folha"] .tut-folha,.tut[data-cena="lista"] .tut-folha{transform:none;visibility:visible;transition-delay:0s}
.tut[data-cena="lista"] .tut-lista{max-height:90cqw}
.tut[data-cena="lista"] .tut-acoes .m{display:none}.tut[data-cena="lista"] .tut-acoes .n{display:inline}
.tut[data-cena="lista"] [data-a="vermais"] svg{transform:rotate(180deg)}
.tut[data-cena="add"] .tut-add{transform:none;visibility:visible;transition-delay:0s}
.tut[data-cena="home"] .tut-home{opacity:1;visibility:visible;transition-delay:0s}
.tut[data-cena="home"] .tut-novo{animation:tut-surge .6s .5s cubic-bezier(.3,1.6,.5,1) forwards}
.tut[data-cena="home"] .tut-dedo{opacity:0}
@keyframes tut-surge{to{transform:scale(1)}}
.tut-leg{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;margin:16px auto 0;max-width:330px;font:14.5px/1.4 Inter,system-ui,sans-serif;color:#c6b198;text-align:left}
.tut-leg b.tut-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 13px Inter,system-ui,sans-serif;color:#ecd3b5;background:var(--pc-g);background-origin:border-box}
.tut-leg span b{color:#ecd3b5;font-weight:600}
.tut-leg span svg{width:17px;height:17px;vertical-align:-3px}
.tut-leg.entra span{animation:pc-sobe .3s ease-out}
.tut-pontos{display:flex;justify-content:center;gap:5px;margin-top:10px}
.tut-pontos i{width:14px;height:3px;border-radius:2px;background:#1e1b17;transition:background .3s}
.tut-pontos i.on{background:#e2caad}
@media (prefers-reduced-motion:reduce){.tut *,.tut *::after{transition-duration:.01s!important;animation-duration:.01s!important}}
.tut-tec{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2.6cqw;padding:3cqw 1.6cqw 10cqw;background:#1d1a16}
.tut-tec div{display:flex;justify-content:center;gap:1.6cqw}
.tut-tec i{flex:0 0 8.2cqw;height:10cqw;border-radius:1.6cqw;background:#554c41;font:600 4.5cqw/10cqw Inter,system-ui,sans-serif;font-style:normal;text-align:center}
.tut-tec i.l{flex-basis:22cqw;background:#322c26}.tut-tec i.e{flex-basis:46cqw}.tut-tec i.ok{flex-basis:22cqw;background:#0a84ff}
.tut.mede *{transition:none!important}

/* tela de instalar no celular, estilo página da App Store: logo + Instalar; o tutorial só aparece depois do toque */
.pc-loja{text-align:left;padding-top:8px}
.pc-loja-cab{display:flex;gap:16px;align-items:flex-start}
.pc-loja-selo{flex:none;width:112px;height:112px;border-radius:26px;display:grid;place-items:center;font:600 52px "Noto Serif Hebrew",Georgia,serif;color:#ecd3b5;
  background:var(--pc-g);background-origin:border-box;box-shadow:inset 0 -3px 0 rgba(236,211,181,0.075),0 18px 40px -12px rgba(163,18,47,0.55),0 0 0 1px #1b1814}
.pc-loja-cab h1{margin:4px 0 2px;font:700 22px/1.15 Inter,system-ui,sans-serif;color:#ecd3b5}
.pc-loja-cab p{margin:0 0 14px;font-size:14px;color:#847665}
.pc-loja-obter{padding:7px 22px;border:0;border-radius:999px;font:700 14px Inter,system-ui,sans-serif;letter-spacing:.02em;color:#ecd3b5;background:var(--pc-g);background-origin:border-box;cursor:pointer}
.pc-loja-obter:active{opacity:.8}
.pc-loja-info{display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0 18px;padding:12px 0;border-top:1px solid #1b1814;border-bottom:1px solid #1b1814;text-align:center}
.pc-loja-info div + div{border-left:1px solid #1b1814}
.pc-loja-info small{display:block;font:600 10.5px Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6b5f52}
.pc-loja-info b{display:block;margin-top:4px;font:700 17px Inter,system-ui,sans-serif;color:#cdb79d}
.pc-onb p.pc-loja-txt{margin:0;color:#9c8b78}
.pc-prep{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62vh;text-align:center}
.pc-prep-roda{width:64px;height:64px;margin-bottom:18px;border-radius:50%;border:4px solid #1b1814;border-top-color:#a3122f;animation:pc-gira .9s linear infinite}
@keyframes pc-gira{to{transform:rotate(360deg)}}
.pc-cad .btn{display:block;width:100%;margin-top:10px}