/* ==========================================================================
   TROK — protótipo navegável · v2
   Fiel à referência (app de bikes): fotos de produto recortadas, cards brancos,
   título largo, quadrados de categoria, barra grafite e folha branca no detalhe.
   ========================================================================== */

/* --- 1. Tokens ------------------------------------------------------------ */
:root{
  --roxo:        #6746EA;   /* PDF da marca */
  --roxo-escuro: #4F31CF;
  --roxo-claro:  #9A86F5;
  --roxo-nevoa:  #EEEAFE;
  --amarelo:     #FBBC1F;   /* PDF da marca */
  --amarelo-esc: #C98F00;
  --amarelo-nev: #FFF5DB;
  --grafite:     #292D45;   /* referência + plano funcional */
  --grafite-2:   #353A57;

  --tinta:   #292D45;
  --tinta-2: #7D8099;
  --tinta-3: #A7A9BC;
  --linha:   #E6E6EE;
  --fundo:   #F1F1F4;
  --cinza:   #F4F4F7;       /* cards de especificação inativos */
  --branco:  #FFFFFF;
  --verde:   #12A05C;
  --vermelho:#EF3B45;

  --f-display: "Unbounded", system-ui, sans-serif;
  --f-texto:   "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-script:  "Yellowtail", cursive;

  --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px;
  --sombra-1: 0 4px 18px rgba(41,45,69,.06);
  --sombra-2: 0 14px 34px rgba(41,45,69,.10);
  --sombra-3: 0 22px 50px rgba(41,45,69,.22);
  --sombra-roxo: 0 12px 26px rgba(103,70,234,.38);
  --sombra-foto: drop-shadow(0 16px 14px rgba(41,45,69,.20));

  --g: 24px;                 /* margem lateral */
  --nav-h: 64px;
  --seg-topo: 52px;          /* área de status: simulada na moldura */
  --seg-base: 0px;
  --mola: cubic-bezier(.2,.9,.3,1.25);
}

/* no celular de verdade (ou instalado como app) usamos as áreas seguras reais */
@media (max-width:760px), (display-mode: standalone){
  :root{
    --seg-topo: max(env(safe-area-inset-top), 18px);
    --seg-base: env(safe-area-inset-bottom);
    --g: 22px;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; height:100%; }
body{
  margin:0; height:100%; overflow:hidden; overscroll-behavior:none;
  font-family:var(--f-texto); color:var(--tinta); background:#DEDEE5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; padding:0; touch-action:manipulation; }
a{ color:inherit; }
input,textarea,select{ font:inherit; color:inherit; font-size:16px; } /* 16px: o iPhone não dá zoom */
img{ display:block; max-width:100%; height:auto; -webkit-user-drag:none; -webkit-touch-callout:none; }
/* moldura de foto: a imagem nunca sai da caixa, qualquer que seja o tamanho da tela */
.moldura{ position:relative; overflow:hidden; }
.moldura > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
svg{ display:block; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
:focus-visible{ outline:2.5px solid var(--roxo); outline-offset:3px; border-radius:8px; }

/* --- 2. Palco e moldura ---------------------------------------------------- */
#palco{
  height:100vh; height:100dvh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(103,70,234,.28), transparent 60%),
    radial-gradient(700px 500px at 95% 110%, rgba(251,188,31,.26), transparent 60%), #DEDEE5;
}
#aparelho{
  position:relative; width:390px; height:844px; max-height:calc(100dvh - 48px);
  background:var(--fundo); border-radius:50px; overflow:hidden; isolation:isolate;
  box-shadow:0 40px 90px rgba(28,25,45,.35), 0 0 0 11px #17151F, 0 0 0 13px #34304A;
  user-select:none; -webkit-user-select:none;
}
#aparelho::after{
  content:""; position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:116px; height:30px; border-radius:999px; background:#17151F; z-index:200; pointer-events:none;
}
@media (max-width:760px), (display-mode: standalone){
  body{ background:var(--fundo); }
  #palco{ padding:0; background:var(--fundo); }
  #aparelho{ width:100%; height:100vh; height:100dvh; max-height:none; border-radius:0; box-shadow:none; }
  #aparelho::after{ display:none; }
}
input,textarea{ user-select:text; -webkit-user-select:text; }

/* --- 3. Telas -------------------------------------------------------------- */
#app{ position:absolute; inset:0; }
.tela{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--fundo); }
.rolagem{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:0 var(--g) 28px;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.rolagem::-webkit-scrollbar{ display:none; }
.tela--nav .rolagem{ padding-bottom:calc(var(--nav-h) + var(--seg-base) + 48px); }

.topo{
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:calc(var(--seg-topo) + 8px) var(--g) 12px; position:relative; z-index:5;
}
.topo__t{ font-family:var(--f-display); font-size:17px; font-weight:600; letter-spacing:-.02em; }
.topo__s{ font-size:12px; color:var(--tinta-2); margin-top:2px; }

.quad{ /* botão quadrado branco da referência (cesta) */
  position:relative; width:46px; height:46px; flex:0 0 46px; border-radius:15px; background:var(--branco);
  display:grid; place-items:center; color:var(--tinta); box-shadow:var(--sombra-1);
  transition:transform .2s var(--mola);
}
.quad:active{ transform:scale(.9); }
.quad--nu{ background:transparent; box-shadow:none; }
.selo{
  position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:var(--vermelho); color:#fff; font-size:10.5px; font-weight:700; display:grid; place-items:center;
  border:2.5px solid var(--fundo);
}
.voltar-fino{ width:46px; height:46px; display:grid; place-items:center; margin-left:-8px; color:var(--tinta); }
.voltar-fino svg{ width:30px; height:30px; stroke-width:1.5; }
.menu-ref{ width:46px; height:46px; display:grid; place-items:center; margin-left:-10px; }
.menu-ref i{ display:block; height:2.6px; border-radius:2px; background:var(--tinta); }
.menu-ref span{ display:grid; gap:5px; justify-items:start; }
.menu-ref i:nth-child(1){ width:18px; background:var(--roxo); margin-left:6px; }
.menu-ref i:nth-child(2){ width:24px; }

/* --- 4. Tipografia ----------------------------------------------------------- */
.titulo-ref{ font-family:var(--f-display); font-weight:700; font-size:27px; line-height:1.14; letter-spacing:-.03em; color:var(--tinta); }
.t-lg{ font-family:var(--f-display); font-weight:700; font-size:22px; line-height:1.18; letter-spacing:-.03em; }
.t-md{ font-family:var(--f-display); font-weight:600; font-size:16px; letter-spacing:-.02em; }
.apoio{ font-size:13.5px; color:var(--tinta-2); line-height:1.55; }
.mini{ font-size:11.5px; color:var(--tinta-2); }
.rotulo{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-3); }
.secao{ display:flex; align-items:baseline; justify-content:space-between; margin:28px 0 14px; }
.secao h2{ font-family:var(--f-display); font-size:17px; font-weight:600; letter-spacing:-.025em; }
.secao button{ font-size:12.5px; font-weight:700; color:var(--roxo); padding:6px 0; }

/* --- 5. Botões ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%;
  min-height:56px; padding:0 26px; border-radius:18px; font-size:15.5px; font-weight:700; letter-spacing:-.01em;
  background:var(--grafite); color:#fff; box-shadow:0 12px 24px rgba(41,45,69,.24);
  transition:transform .2s var(--mola), box-shadow .2s, background .2s;
}
.btn:active{ transform:scale(.96); }
.btn--roxo{ background:var(--roxo); box-shadow:var(--sombra-roxo); }
.btn--amarelo{ background:var(--amarelo); color:var(--grafite); box-shadow:0 12px 24px rgba(251,188,31,.38); }
.btn--branco{ background:var(--branco); color:var(--tinta); box-shadow:var(--sombra-1); }
.btn--linha{ background:transparent; color:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--linha); }
.btn--baixo{ min-height:46px; font-size:14px; border-radius:15px; padding:0 18px; }
.btn--auto{ width:auto; }
.btn[disabled]{ opacity:.4; pointer-events:none; box-shadow:none; }
.btn .simbolo{ width:13px; height:22px; }

.circ{ /* botão redondo amarelo da referência (+) */
  width:42px; height:42px; flex:0 0 42px; border-radius:999px; background:var(--amarelo); color:var(--grafite);
  display:grid; place-items:center; box-shadow:0 8px 16px rgba(251,188,31,.4);
  transition:transform .2s var(--mola);
}
.circ:active{ transform:scale(.86) rotate(-15deg); }
.circ .simbolo{ width:12px; height:20px; }

/* --- 6. Símbolo e carregamentos ---------------------------------------------- */
.simbolo{ width:20px; height:34px; overflow:visible; }
.simbolo__giro{ transform-box:fill-box; transform-origin:center; }
/* o símbolo gira parado, no próprio eixo, sem andar nem pulsar */
.gira .simbolo__giro{ animation:trok-giro 1.15s linear infinite; }
@keyframes trok-giro{ to{ transform:rotate(360deg); } }

.carregador{ display:grid; place-items:center; gap:12px; padding:30px 0; color:var(--roxo); }
.carregador .simbolo{ width:26px; height:44px; }
.carregador span{ font-size:12px; font-weight:600; color:var(--tinta-2); }

.esq{ /* esqueleto */
  position:relative; overflow:hidden; background:#E7E7EE; border-radius:14px;
}
.esq::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation:brilho 1.2s ease-in-out infinite;
}
@keyframes brilho{ to{ transform:translateX(100%); } }

.puxar{ /* indicador do puxar para atualizar */
  position:absolute; left:50%; top:calc(var(--seg-topo) + 4px); z-index:8; width:44px; height:44px;
  margin-left:-22px; border-radius:999px; background:var(--branco); box-shadow:var(--sombra-2);
  display:grid; place-items:center; color:var(--roxo); opacity:0; transform:translateY(-40px);
  pointer-events:none;
}
.puxar .simbolo{ width:13px; height:22px; }

/* --- 7. Categorias (quadrados da referência) ---------------------------------- */
.cats{ display:flex; gap:13px; overflow-x:auto; margin:0 calc(var(--g) * -1); padding:6px var(--g) 18px; scrollbar-width:none; }
.cats::-webkit-scrollbar{ display:none; }
.cat{
  flex:0 0 60px; height:60px; border-radius:19px; background:var(--branco); color:var(--tinta);
  display:grid; place-items:center; box-shadow:var(--sombra-1);
  transition:background .25s, color .25s, box-shadow .25s, transform .2s var(--mola);
}
.cat svg{ width:25px; height:25px; stroke-width:1.6; }
.cat:active{ transform:scale(.9); }
.cat[aria-pressed="true"]{ background:var(--roxo); color:#fff; box-shadow:var(--sombra-roxo); }
.cat-nome{ font-size:12px; font-weight:700; color:var(--roxo); margin:-6px 0 2px; min-height:16px; }

/* abas de texto do feed */
.abas-txt{ display:flex; gap:22px; margin:18px 0 14px; overflow-x:auto; scrollbar-width:none; }
.abas-txt::-webkit-scrollbar{ display:none; }
.aba-txt{ position:relative; font-size:14px; font-weight:600; color:var(--tinta-3); padding:6px 0 10px; white-space:nowrap; transition:color .2s; }
.aba-txt[aria-pressed="true"]{ color:var(--tinta); font-weight:700; }
.aba-txt[aria-pressed="true"]::after{
  content:""; position:absolute; left:50%; bottom:0; width:6px; height:6px; margin-left:-3px;
  border-radius:999px; background:var(--roxo);
}

/* --- 8. Cards de produto (referência) ------------------------------------------ */
.trilho{ display:flex; gap:16px; overflow-x:auto; margin:0 calc(var(--g) * -1); padding:6px var(--g) 22px; scroll-snap-type:x mandatory; scroll-padding-inline:var(--g); scrollbar-width:none; }
.trilho::-webkit-scrollbar{ display:none; }
.trilho > .card{ flex:0 0 198px; scroll-snap-align:start; }

.card{
  position:relative; display:flex; flex-direction:column; width:100%; text-align:left;
  background:var(--branco); border-radius:var(--r-lg); padding:14px 16px 16px; box-shadow:var(--sombra-1);
  transition:transform .25s var(--mola), box-shadow .25s;
}
.card:active{ transform:scale(.97); }
.card__foto{ position:relative; height:150px; margin:26px 0 10px; overflow:visible; }
.card__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:var(--sombra-foto); }
.grade .card__foto{ height:118px; margin-top:28px; }
.card__fav{
  position:absolute; top:8px; right:8px; width:36px; height:36px; display:grid; place-items:center;
  color:var(--tinta-3); z-index:2;
}
.card__fav svg{ width:20px; height:20px; }
.card__fav[aria-pressed="true"]{ color:var(--vermelho); }
.card__fav[aria-pressed="true"] svg{ fill:currentColor; stroke:currentColor; }
.card__selo{ position:absolute; top:14px; left:14px; z-index:2; max-width:calc(100% - 64px); }
.grade .card__selo{ top:12px; left:12px; }
.card__nome{ font-family:var(--f-display); font-size:14px; font-weight:600; letter-spacing:-.025em; line-height:1.25; min-height:2.5em; }
.card__sub{ font-size:11.5px; color:var(--tinta-2); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card__rodape{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.preco{ font-family:var(--f-display); font-weight:700; font-size:17px; color:var(--roxo); letter-spacing:-.03em; white-space:nowrap; }
.preco small{ font-family:var(--f-texto); font-size:10.5px; font-weight:600; color:var(--tinta-3); letter-spacing:0; }
.preco--troca{ display:inline-flex; align-items:center; gap:6px; }
.preco--troca .simbolo{ width:10px; height:17px; color:var(--roxo); }

.grade{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.grade > *{ min-width:0; }
.grade .card{ padding:12px 14px 14px; }
.grade .card__nome{ font-size:13px; }
.grade .preco{ font-size:15px; }
.grade .circ{ width:36px; height:36px; flex-basis:36px; }

.tag{ display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 9px; border-radius:8px; font-size:10.5px; font-weight:700; letter-spacing:.01em; }
.tag--troca{ background:var(--roxo-nevoa); color:var(--roxo-escuro); }
.tag--aluguel{ background:var(--amarelo-nev); color:#8A6200; }
.tag--patro{ background:var(--grafite); color:#fff; }
.tag .simbolo{ width:7px; height:12px; }

/* linha (lista) */
.linha{
  display:flex; gap:14px; align-items:center; width:100%; text-align:left; background:var(--branco);
  border-radius:var(--r-md); padding:10px 14px 10px 10px; box-shadow:var(--sombra-1);
  transition:transform .2s var(--mola);
}
.linha:active{ transform:scale(.98); }
.linha__foto{ position:relative; width:78px; height:78px; flex:0 0 78px; border-radius:16px; background:var(--cinza); overflow:hidden; }
.linha__foto img{ position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); object-fit:contain; filter:drop-shadow(0 6px 6px rgba(41,45,69,.18)); }
.linha__txt{ flex:1; min-width:0; }
.linha__txt h3{ font-family:var(--f-display); font-size:13.5px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* banner Descobrir */
.banner{
  position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--grafite); color:#fff; border-radius:var(--r-lg); padding:18px; margin:4px 0 18px;
  box-shadow:0 16px 30px rgba(41,45,69,.25);
}
.banner__ic{ width:52px; height:52px; flex:0 0 52px; border-radius:17px; background:var(--roxo); display:grid; place-items:center; color:var(--amarelo); }
.banner__ic .simbolo{ width:15px; height:26px; }
.banner b{ display:block; font-family:var(--f-display); font-size:14.5px; font-weight:600; letter-spacing:-.02em; }
.banner span{ font-size:12px; opacity:.7; }
.banner__marca{ position:absolute; right:-18px; top:-24px; width:90px; height:150px; color:rgba(255,255,255,.05); }

/* --- 9. Pessoas ---------------------------------------------------------------- */
.avatar{
  width:34px; height:34px; flex:0 0 auto; border-radius:999px; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:600; font-size:12px; color:#fff; letter-spacing:-.02em;
}
.avatar--p{ width:26px; height:26px; font-size:9.5px; }
.avatar--g{ width:52px; height:52px; font-size:17px; }
.avatar--gg{ width:88px; height:88px; font-size:28px; box-shadow:0 0 0 5px rgba(255,255,255,.25); }
.nota{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700; color:var(--tinta); }
.nota svg{ width:13px; height:13px; color:var(--amarelo); }
.verif{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--roxo); }
.verif svg{ width:14px; height:14px; }

/* --- 10. Navegação líquida ------------------------------------------------------ */
.nav{
  contain:layout style;
  position:absolute; left:20px; right:20px; bottom:calc(var(--seg-base) + 16px); height:var(--nav-h);
  z-index:60; pointer-events:none;
}
.nav.oculta{ visibility:hidden; }
/* véu na cor do fundo: o conteúdo some antes de passar por baixo da barra */
.nav__veu{ position:absolute; left:-20px; right:-20px; bottom:calc((var(--seg-base) + 16px) * -1); height:calc(var(--nav-h) + var(--seg-base) + 84px);
  background:linear-gradient(to top, var(--fundo) 0%, var(--fundo) 52%, rgba(241,241,244,.8) 70%, rgba(241,241,244,0) 100%); pointer-events:none; }
.nav__liquido{ position:absolute; inset:-80px 0 0 0; filter:url(#gosma); pointer-events:none; }
.nav__gota,.nav__bolha{ will-change:transform; }
.nav__barra{ position:absolute; left:0; right:0; bottom:0; height:var(--nav-h); border-radius:24px; background:var(--grafite); }
/* geometria: o centro da bolha fica na borda de cima da barra (sobe só metade dela);
   a gota (mesmo centro, maior) abraça a bolha e o anel da cor do fundo faz o "recorte" do vídeo */
.nav__gota{ position:absolute; bottom:calc(var(--nav-h) - 32px); left:0; width:64px; height:64px; margin-left:-32px; border-radius:999px; background:var(--grafite); }
.nav__gota--2{ width:44px; height:44px; margin-left:-22px; bottom:calc(var(--nav-h) - 22px); }
.nav__bolha{
  position:absolute; left:0; bottom:calc(var(--nav-h) - 22px); width:44px; height:44px; margin-left:-22px;
  border-radius:999px; background:var(--roxo); color:#fff; display:grid; place-items:center;
  box-shadow:0 0 0 5px var(--fundo), 0 8px 18px rgba(103,70,234,.4); pointer-events:none;
}
.nav__bolha.amarela{ background:var(--amarelo); color:var(--grafite); box-shadow:0 0 0 5px var(--fundo), 0 8px 18px rgba(251,188,31,.45); }
.nav__bolha svg{ width:21px; height:21px; }
.nav__bolha .simbolo{ width:13px; height:23px; }
.nav__item .simbolo{ width:13px; height:23px; }
.nav__itens{ position:absolute; left:0; right:0; bottom:0; height:var(--nav-h); display:flex; pointer-events:auto; }
.nav__item{ flex:1; height:100%; display:grid; place-items:center; color:rgba(255,255,255,.62); transition:color .2s, opacity .25s; }
.nav__item svg{ width:23px; height:23px; }
.nav__item.ativo{ opacity:0; }
/* Descobrir: botão central em destaque, sempre elevado, com halo pulsando */
.nav__item--desc{ position:relative; opacity:1 !important; }
.nav__desc{
  position:absolute; left:50%; top:-25px; width:50px; height:50px; margin-left:-25px; border-radius:999px;
  display:grid; place-items:center; color:var(--amarelo);
  background:radial-gradient(circle at 35% 28%, #8C6FF7 0%, var(--roxo) 55%, #4A2FC8 100%);
  box-shadow:0 0 0 5px var(--fundo), 0 8px 18px rgba(103,70,234,.45);
  transition:opacity .25s, transform .25s var(--mola);
}
.nav__desc::after{ content:""; position:absolute; inset:-4px; border-radius:999px; border:2px solid rgba(124,93,244,.55); animation:halo 2.2s ease-out infinite; pointer-events:none; }
@keyframes halo{ 0%{ transform:scale(1); opacity:.8; } 100%{ transform:scale(1.32); opacity:0; } }
.nav__desc .simbolo{ width:14px; height:24px; }
.nav__desc-txt{ position:absolute; left:-6px; right:-6px; bottom:7px; text-align:center; font-size:9.5px; font-weight:800; letter-spacing:.02em; color:var(--amarelo); }
.nav__item--desc:active .nav__desc{ transform:scale(.9); }
.nav__item--desc.ativo .nav__desc{ opacity:0; }
.nav__bolha.destaque{ width:50px; height:50px; margin-left:-25px; bottom:calc(var(--nav-h) - 25px); color:var(--amarelo);
  background:radial-gradient(circle at 35% 28%, #8C6FF7 0%, var(--roxo) 55%, #4A2FC8 100%); }
.nav__bolha.destaque .simbolo{ width:14px; height:24px; }
.nav__mais{ width:34px; height:34px; border-radius:11px; background:var(--amarelo); color:var(--grafite); display:grid; place-items:center; }
.nav__mais svg{ width:20px; height:20px; stroke-width:2.2; }

/* --- 11. Capa (tela 1 da referência) --------------------------------------------
   Em fluxo vertical: topo > palco da foto (cresce) > texto > botão > link.
   O chão grafite nasce no fim do palco e desce por trás do texto, então
   foto e texto nunca se encostam, em qualquer altura de tela. */
.capa{
  position:absolute; inset:0; overflow:hidden; color:#fff; display:flex; flex-direction:column;
  padding:calc(var(--seg-topo) + 14px) var(--g) calc(var(--seg-base) + 10px);
  background:radial-gradient(120% 70% at 70% 22%, #7A5BF2 0%, var(--roxo) 45%, #5233D6 100%);
}
.capa__marca-agua{ position:absolute; left:50%; top:9%; width:62%; max-width:300px; height:auto; aspect-ratio:99/170; transform:translateX(-50%); color:rgba(255,255,255,.06); pointer-events:none; }
.capa__topo{ position:relative; z-index:3; display:flex; align-items:center; justify-content:center; min-height:58px; }
.capa__logo{ width:112px; }
.capa__idioma{
  position:absolute; right:0; top:50%; transform:translateY(-50%); height:36px; padding:0 12px; border-radius:12px;
  background:rgba(255,255,255,.14); display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
}
.capa__idioma svg{ width:16px; height:16px; }
/* a bike fica inteira e centrada, apoiada no chão (antes vazava pela direita e parecia torta) */
.capa__palco{ position:relative; flex:1 1 auto; min-height:170px; margin:0 calc(var(--g) * -1); z-index:1; display:flex; align-items:flex-end; justify-content:center; }
.capa__chao{ /* chão em diagonal */
  position:absolute; left:0; right:0; top:calc(100% - 110px); height:200vh; background:var(--grafite);
  clip-path:polygon(0 52px, 100% 0, 100% 100%, 0 100%); z-index:0;
}
.capa__foto{
  position:relative; z-index:1; height:100%; width:auto; max-width:calc(100% - 2 * var(--g)); max-height:min(100%, 100vw); aspect-ratio:1;
  object-fit:contain; object-position:center bottom; filter:drop-shadow(0 26px 20px rgba(0,0,0,.35));
}
.capa__txt{ position:relative; z-index:2; text-align:center; padding-top:14px; }
.capa__titulo{ font-family:var(--f-display); font-weight:700; font-size:clamp(38px, 12vw, 50px); letter-spacing:-.05em; line-height:1; }
.capa__script{ font-family:var(--f-script); font-size:clamp(30px, 10vw, 40px); line-height:1.1; color:var(--roxo-claro); transform:rotate(-4deg); }
.capa__sub{ font-size:12.5px; color:rgba(255,255,255,.66); margin:10px auto 0; max-width:280px; line-height:1.5; }
.deslize{
  position:relative; z-index:2; flex:0 0 auto; margin-top:20px; height:74px; border-radius:40px;
  background:rgba(255,255,255,.08); display:flex; align-items:center; touch-action:none;
}
.deslize__txt{ position:absolute; inset:0; display:grid; place-items:center; padding-left:52px; font-size:15px; font-weight:600; color:#fff; pointer-events:none; text-align:center; }
.deslize__txt small{ display:block; font-size:10.5px; font-weight:500; opacity:.55; }
.deslize__bola{
  position:relative; z-index:2; width:58px; height:58px; margin-left:8px; border-radius:999px; background:var(--amarelo);
  color:var(--grafite); display:grid; place-items:center; box-shadow:0 0 0 9px rgba(255,255,255,.07);
  cursor:grab; touch-action:none;
}
.deslize__bola svg{ width:24px; height:24px; stroke-width:2.4; }
.capa__conta{ position:relative; z-index:2; align-self:center; margin-top:8px; min-height:40px; padding:0 14px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.66); }

/* --- 12. Onboarding ---------------------------------------------------------------- */
.onb__arte{ position:relative; height:clamp(190px, 36dvh, 300px); margin:4px 0 0; }
.onb__arte::before{ content:""; position:absolute; left:50%; top:50%; width:82%; aspect-ratio:1; max-height:100%; transform:translate(-50%,-50%); border-radius:999px; background:var(--roxo-nevoa); }
.onb__arte img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.pontos{ display:flex; gap:7px; margin:26px 0 24px; }
.ponto{ width:8px; height:8px; border-radius:999px; background:var(--linha); transition:width .35s var(--mola), background .3s; }
.ponto.on{ width:26px; background:var(--roxo); }

/* --- 13. Formulários ------------------------------------------------------------------ */
.campo{ margin-bottom:15px; }
.campo label{ display:block; font-size:12.5px; font-weight:700; color:var(--tinta-2); margin-bottom:7px; }
.campo input,.campo textarea,.campo select{
  width:100%; min-height:54px; padding:0 18px; border-radius:17px; border:1.5px solid transparent;
  background:var(--branco); box-shadow:var(--sombra-1); outline:0; transition:border-color .2s, box-shadow .2s;
  -webkit-appearance:none; appearance:none;
}
.campo select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23292D45' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 18px center; }
.campo textarea{ min-height:108px; padding:15px 18px; resize:none; line-height:1.45; }
.campo input:focus,.campo textarea:focus,.campo select:focus{ border-color:var(--roxo); box-shadow:0 0 0 4px rgba(103,70,234,.14); }
.campo__dica{ font-size:11.5px; color:var(--tinta-2); margin-top:6px; }
.dupla{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  min-height:40px; padding:0 15px; border-radius:13px; background:var(--branco); box-shadow:var(--sombra-1);
  font-size:13px; font-weight:600; color:var(--tinta-2); transition:background .2s, color .2s, transform .2s var(--mola);
  display:inline-flex; align-items:center; gap:7px;
}
.chip:active{ transform:scale(.94); }
.chip[aria-pressed="true"]{ background:var(--grafite); color:#fff; }

.escolha{
  display:flex; gap:14px; align-items:center; width:100%; text-align:left; padding:16px; border-radius:var(--r-md);
  background:var(--branco); box-shadow:var(--sombra-1); border:2px solid transparent;
  transition:border-color .2s, transform .2s var(--mola);
}
.escolha:active{ transform:scale(.98); }
.escolha[aria-pressed="true"]{ border-color:var(--roxo); }
.escolha__ic{ width:50px; height:50px; flex:0 0 50px; border-radius:16px; display:grid; place-items:center; }
.escolha__ic .simbolo{ width:14px; height:24px; }
.escolha h3{ font-family:var(--f-display); font-size:14.5px; font-weight:600; letter-spacing:-.02em; margin-bottom:3px; }
.escolha__foto{ position:relative; width:58px; height:58px; flex:0 0 58px; border-radius:16px; background:var(--cinza); overflow:hidden; }
.escolha__foto img{ position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); object-fit:contain; }
.marca-check{ width:24px; height:24px; flex:0 0 24px; border-radius:8px; border:2px solid var(--linha); display:grid; place-items:center; color:#fff; transition:background .2s, border-color .2s; }
.marca-check svg{ width:14px; height:14px; stroke-width:3; }
[aria-pressed="true"] .marca-check{ background:var(--roxo); border-color:var(--roxo); }

.fotos-grade{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.vaga{ aspect-ratio:1/1; border-radius:17px; border:1.5px dashed #D3D3DE; background:var(--branco); display:grid; place-items:center; color:var(--tinta-3); }
.vaga.cheia{ position:relative; border:0; background:var(--cinza); overflow:hidden; }
.vaga.cheia img{ position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); object-fit:contain; }
.passos{ display:flex; gap:6px; margin:4px 0 22px; }
.passos i{ flex:1; height:4px; border-radius:999px; background:var(--linha); transition:background .3s; }
.passos i.on{ background:var(--roxo); }

.interruptor{ position:relative; width:50px; height:30px; flex:0 0 50px; border-radius:999px; background:#D9D9E3; transition:background .25s; }
.interruptor::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:999px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform .3s var(--mola); }
[aria-checked="true"] .interruptor{ background:var(--roxo); }
[aria-checked="true"] .interruptor::after{ transform:translateX(20px); }

/* --- 14. Detalhe (tela 3 da referência) ------------------------------------------------- */
.det{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--fundo); }
.det__palco{ position:relative; flex:0 0 auto; height:46%; min-height:300px; }
/* foto centrada no espaço entre a borda e as abas verticais, igual em todos os anúncios */
.det__foto{ position:absolute; left:var(--g); top:calc(var(--seg-topo) + 64px); width:calc(100% - var(--g) - 52px); height:calc(100% - var(--seg-topo) - 64px - 46px); object-fit:contain; object-position:center; filter:var(--sombra-foto); transform-origin:center; }
.det__vert{ position:absolute; right:12px; top:calc(var(--seg-topo) + 66px); bottom:58px; display:flex; flex-direction:column; justify-content:center; gap:14px; z-index:3; }
.det__vert button{ writing-mode:vertical-rl; font-size:12px; font-weight:600; color:var(--tinta-3); padding:4px; transition:color .2s; }
.det__vert button[aria-pressed="true"]{ color:var(--tinta); font-weight:800; }
.det__topo{ position:absolute; top:0; left:0; right:0; z-index:6; display:flex; align-items:center; justify-content:space-between; padding:calc(var(--seg-topo) + 8px) var(--g) 0; }
.det__topo .grupo{ display:flex; gap:10px; }
.det__folha{
  position:relative; flex:1; min-height:0; margin-top:-34px; z-index:4; background:var(--branco);
  border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:0 -10px 30px rgba(41,45,69,.05);
  display:flex; flex-direction:column;
}
.det__salvar{
  position:absolute; right:var(--g); top:-25px; z-index:6; width:50px; height:50px; border-radius:999px;
  background:var(--amarelo); color:var(--grafite); display:grid; place-items:center; box-shadow:0 10px 20px rgba(251,188,31,.45);
  transition:transform .25s var(--mola);
}
.det__salvar svg{ width:21px; height:21px; }
.det__salvar[aria-pressed="true"] svg{ fill:currentColor; }
.det__salvar:active{ transform:scale(.88); }
.det__rolagem{ flex:1; min-height:0; overflow-y:auto; padding:30px var(--g) calc(var(--seg-base) + 118px); overscroll-behavior:contain; scrollbar-width:none; }
.det__rolagem::-webkit-scrollbar{ display:none; }
.det__nome{ font-family:var(--f-display); font-size:22px; font-weight:700; letter-spacing:-.035em; line-height:1.15; padding-right:56px; }
.det__desc{ font-size:13.5px; color:var(--tinta-2); line-height:1.6; margin-top:8px; }

.specs{ display:flex; gap:11px; overflow-x:auto; margin:22px calc(var(--g) * -1) 0; padding:4px var(--g) 14px; scrollbar-width:none; }
.specs::-webkit-scrollbar{ display:none; }
.spec{
  flex:0 0 92px; height:124px; border-radius:24px; background:var(--cinza); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:8px; color:var(--roxo);
  transition:background .3s, color .3s, box-shadow .3s, transform .25s var(--mola);
}
.spec svg{ width:30px; height:30px; stroke-width:1.5; margin-bottom:10px; }
.spec b{ font-size:13px; font-weight:700; color:var(--tinta); line-height:1.15; transition:color .3s; }
.spec span{ font-size:11px; color:var(--tinta-2); margin-top:3px; line-height:1.2; transition:color .3s; }
.spec[aria-pressed="true"]{ background:var(--roxo); color:#fff; box-shadow:var(--sombra-roxo); transform:translateY(-4px); }
.spec[aria-pressed="true"] b,.spec[aria-pressed="true"] span{ color:#fff; }

.dono{ display:flex; align-items:center; gap:12px; margin-top:8px; padding:14px; border-radius:var(--r-md); background:var(--cinza); width:100%; text-align:left; }
.dono b{ display:block; font-size:14px; font-weight:700; }
.aviso{ display:flex; gap:10px; padding:13px 14px; border-radius:16px; background:var(--amarelo-nev); color:#6E5000; font-size:12px; line-height:1.5; }
.aviso svg{ flex:0 0 auto; width:17px; height:17px; color:var(--amarelo-esc); }
.aviso--roxo{ background:var(--roxo-nevoa); color:var(--roxo-escuro); }
.aviso--roxo svg{ color:var(--roxo); }
.link-fraco{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:14px; font-size:12.5px; font-weight:600; color:var(--tinta-3); }
.link-fraco svg{ width:15px; height:15px; }

.barra-acao{
  position:absolute; left:0; right:0; bottom:0; z-index:8; display:flex; align-items:center; gap:16px;
  padding:14px var(--g) calc(var(--seg-base) + 16px); background:#fff; box-shadow:0 -10px 24px rgba(41,45,69,.07); border-top:1px solid #F0F0F4;
}
.barra-acao__preco{ flex:1; min-width:0; }
.barra-acao__preco span{ display:block; font-size:12px; color:var(--tinta-2); margin-bottom:2px; }
.barra-acao__preco b{ font-family:var(--f-display); font-size:22px; font-weight:700; color:var(--roxo); letter-spacing:-.035em; white-space:nowrap; }
.barra-acao__preco b small{ font-family:var(--f-texto); font-size:12px; color:var(--tinta-2); letter-spacing:0; }
.barra-acao__preco em{ display:block; font-style:normal; font-size:12.5px; font-weight:600; color:var(--tinta); line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.barra-acao .btn{ width:auto; flex:0 0 auto; }

/* --- 15. Descobrir ------------------------------------------------------------------ */
/* os cards de trás descem até 24px: a margem de baixo guarda esse espaço para o aviso não ficar por baixo */
.baralho{ position:relative; flex:1; min-height:0; margin:6px var(--g) 30px; }
.swipe{
  position:absolute; inset:0; background:var(--branco); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sombra-2); display:flex; flex-direction:column; will-change:transform; cursor:grab; touch-action:none;
}
.swipe__foto{ flex:1 1 auto; min-height:120px; position:relative; overflow:hidden;
  background:radial-gradient(70% 60% at 50% 55%, var(--roxo-nevoa), #fff 70%); }
.swipe__foto img{ position:absolute; inset:22px 20px 6px; width:calc(100% - 40px); height:calc(100% - 28px); object-fit:contain; filter:var(--sombra-foto); pointer-events:none; }
.swipe__info{ flex:0 0 auto; }
.swipe__info{ padding:4px 22px 22px; }
.swipe__info h2{ font-family:var(--f-display); font-size:21px; font-weight:700; letter-spacing:-.035em; }
.carimbo{ position:absolute; top:24px; font-family:var(--f-display); font-size:22px; font-weight:800; padding:7px 15px; border-radius:14px; border:3px solid; opacity:0; background:rgba(255,255,255,.92); }
.carimbo--sim{ left:20px; transform:rotate(-12deg); color:var(--roxo); border-color:var(--roxo); }
.carimbo--nao{ right:20px; transform:rotate(12deg); color:var(--vermelho); border-color:var(--vermelho); }
.acoes-swipe{ position:relative; z-index:61; display:flex; justify-content:center; align-items:center; gap:22px; padding:12px 0 calc(var(--nav-h) + var(--seg-base) + 74px); }
.acao{ width:60px; height:60px; border-radius:999px; background:var(--branco); display:grid; place-items:center; box-shadow:var(--sombra-2); transition:transform .2s var(--mola); }
.acao:active{ transform:scale(.86); }
.acao--nao{ color:var(--vermelho); }
.acao--talvez{ color:var(--amarelo-esc); }
/* amarelo com o símbolo roxo: não se confunde com o botão roxo do Descobrir na barra logo abaixo */
.acao--sim{ width:76px; height:76px; background:var(--amarelo); color:var(--roxo); box-shadow:0 14px 30px rgba(251,188,31,.45); }
.acao--sim .simbolo{ width:18px; height:31px; }
.baralho__fim{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:24px; }
.dica-desc{ margin:2px var(--g) 0; font-size:11.5px; color:var(--tinta-2); text-align:center; line-height:1.45; }

/* --- 16. Deu Trok! -------------------------------------------------------------------- */
.match{
  position:absolute; inset:0; z-index:150; display:none; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(var(--seg-topo) + 10px) 26px calc(var(--seg-base) + 26px); color:#fff; overflow:hidden; text-align:center;
  background:radial-gradient(90% 60% at 50% 40%, #7C5DF4 0%, var(--roxo) 45%, #3E25B5 100%);
}
.match.on{ display:flex; }
.match__aneis{ position:absolute; left:50%; top:38%; width:0; height:0; }
.match__aneis i{ position:absolute; left:-150px; top:-150px; width:300px; height:300px; border-radius:999px; border:2px solid rgba(255,255,255,.12); }
.match__palco{ position:relative; width:300px; height:240px; margin-bottom:10px; }
.match__orbita{ position:absolute; inset:0; }
.match__item{
  position:absolute; top:50%; width:128px; height:128px; margin-top:-64px; border-radius:34px; background:#fff;
  display:grid; place-items:center; padding:14px; box-shadow:0 20px 40px rgba(20,10,70,.35);
}
.match__item{ overflow:hidden; }
.match__item img{ position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); object-fit:contain; }
.match__item--a{ left:0; }
.match__item--b{ right:0; }
.match__centro{ position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:999px; background:var(--amarelo); color:var(--grafite); display:grid; place-items:center; box-shadow:0 0 0 8px rgba(251,188,31,.25); z-index:3; }
.match__centro .simbolo{ width:21px; height:36px; }
.match__titulo{ font-family:var(--f-display); font-size:44px; font-weight:800; letter-spacing:-.05em; line-height:1; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0 .02em; }
.match__titulo .l{ display:inline-block; }
.match__titulo .esp{ width:.28em; }
.match__titulo .o{ display:inline-grid; place-items:center; width:.62em; height:.9em; color:var(--amarelo); }
.match__titulo .o .simbolo{ width:100%; height:100%; }
.match__sub{ font-size:14.5px; opacity:.85; margin-top:12px; max-width:270px; line-height:1.5; }
.match__botoes{ width:100%; max-width:310px; display:grid; gap:11px; margin-top:28px; }
.particula{ position:absolute; left:50%; top:38%; pointer-events:none; }

/* --- 17. Chat ------------------------------------------------------------------------- */
.chat-ctx{ display:flex; gap:12px; align-items:center; margin:0 var(--g) 8px; padding:10px 14px 10px 10px; border-radius:var(--r-md); background:var(--branco); box-shadow:var(--sombra-1); text-align:left; }
.chat-ctx .linha__foto{ width:52px; height:52px; flex-basis:52px; border-radius:14px; padding:5px; }
.conversa{ display:flex; flex-direction:column; gap:9px; padding-bottom:12px; }
.balao{ max-width:80%; padding:11px 15px; border-radius:20px; font-size:14px; line-height:1.45; }
.balao--eles{ background:var(--branco); box-shadow:var(--sombra-1); border-bottom-left-radius:6px; align-self:flex-start; }
.balao--eu{ background:var(--roxo); color:#fff; border-bottom-right-radius:6px; align-self:flex-end; }
.balao__h{ display:block; font-size:10px; opacity:.55; margin-top:4px; }
.dia{ text-align:center; font-size:11px; font-weight:600; color:var(--tinta-3); margin:8px 0; }
.prop-card{ align-self:flex-end; width:88%; background:var(--branco); border-radius:22px; padding:15px; box-shadow:var(--sombra-2); }
.prop-card__topo{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.prop-card__lados{ display:flex; align-items:center; gap:10px; }
.prop-card__lado{ flex:1; display:flex; gap:6px; flex-wrap:wrap; }
.mini-foto{ position:relative; width:54px; height:54px; flex:0 0 54px; border-radius:14px; background:var(--cinza); overflow:hidden; }
.mini-foto img{ position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); object-fit:contain; }
.prop-card__seta{ width:34px; height:34px; flex:0 0 34px; border-radius:999px; background:var(--amarelo); color:var(--grafite); display:grid; place-items:center; }
.prop-card__seta .simbolo{ width:9px; height:16px; }
.estado{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:9px; }
.estado svg{ width:12px; height:12px; }
.estado--espera{ background:var(--amarelo-nev); color:#8A6200; }
.estado--aceita{ background:#E1F6EB; color:#0A7A45; }
.estado--recusada{ background:#FDE8E9; color:#B42830; }
.estado--concluida{ background:var(--roxo-nevoa); color:var(--roxo-escuro); }
.barra-chat{ flex:0 0 auto; display:flex; gap:10px; align-items:center; padding:10px var(--g) calc(var(--seg-base) + 14px); background:var(--fundo); }
.entrada{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; min-height:50px; padding:0 16px; border-radius:17px; background:var(--branco); box-shadow:var(--sombra-1); }
.entrada input{ flex:1; border:0; outline:0; background:none; min-width:0; color:var(--tinta); }
.entrada input::placeholder{ color:var(--tinta-3); }
.entrada input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; }
.quad--roxo{ background:var(--roxo); color:#fff; box-shadow:var(--sombra-roxo); }
.quad--amarelo{ background:var(--amarelo); color:var(--grafite); }
.quad .simbolo{ width:12px; height:20px; }

/* --- 18. Atividade, perfil e afins ------------------------------------------------------ */
.abas{ display:flex; gap:4px; background:#E5E5EC; padding:4px; border-radius:16px; position:relative; }
.aba{ position:relative; z-index:1; flex:1; min-height:40px; border-radius:12px; font-size:13px; font-weight:700; color:var(--tinta-2); transition:color .25s; }
.aba[aria-pressed="true"]{ color:var(--tinta); }
.abas__marca{ position:absolute; top:4px; bottom:4px; left:4px; border-radius:12px; background:var(--branco); box-shadow:var(--sombra-1); }
.bloco{ background:var(--branco); border-radius:var(--r-md); padding:15px; box-shadow:var(--sombra-1); }
.lista{ display:grid; grid-template-columns:minmax(0, 1fr); gap:11px; }
.lista > *, .linha, .escolha, .bloco{ min-width:0; }

.perfil-capa{ margin:0 calc(var(--g) * -1); padding:10px var(--g) 46px; text-align:center; color:#fff; position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 70% 0%, #7A5BF2, var(--roxo) 50%, #4C30CC); border-radius:0 0 var(--r-xl) var(--r-xl); }
.perfil-capa__marca{ position:absolute; right:-30px; top:-20px; width:120px; height:200px; color:rgba(255,255,255,.07); }
.perfil-stats{ display:flex; gap:10px; margin-top:-28px; position:relative; z-index:2; }
.perfil-stat{ flex:1; background:var(--branco); border-radius:var(--r-md); padding:14px 6px; text-align:center; box-shadow:var(--sombra-2); }
.perfil-stat b{ display:block; font-family:var(--f-display); font-size:20px; font-weight:700; letter-spacing:-.03em; }
.perfil-stat span{ font-size:10.5px; color:var(--tinta-2); }
.menu-item{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:14px; margin-bottom:9px; border-radius:var(--r-md); background:var(--branco); box-shadow:var(--sombra-1); transition:transform .2s var(--mola); }
.menu-item:active{ transform:scale(.98); }
.menu-item__ic{ width:40px; height:40px; flex:0 0 40px; border-radius:13px; background:var(--roxo-nevoa); color:var(--roxo); display:grid; place-items:center; }
.menu-item__ic svg{ width:19px; height:19px; }
.menu-item b{ flex:1; font-size:14px; font-weight:600; }
.menu-item small{ font-size:12px; color:var(--tinta-2); font-weight:600; }
.menu-item > svg{ width:17px; height:17px; color:var(--tinta-3); }

.plano{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:16px; border-radius:var(--r-md); background:var(--branco); box-shadow:var(--sombra-1); border:2px solid transparent; transition:border-color .2s, transform .2s var(--mola); }
.plano[aria-pressed="true"]{ border-color:var(--roxo); }
.plano b{ font-family:var(--f-display); font-size:15px; font-weight:600; }
.plano .preco{ margin-left:auto; font-size:16px; }
.plano .tag{ margin-left:8px; }
.pix{ display:grid; place-items:center; gap:14px; text-align:center; }
.pix__qr{ width:190px; height:190px; border-radius:24px; background:#fff; padding:16px; box-shadow:var(--sombra-2); }
.pix__qr svg{ width:100%; height:100%; }
.numero-grande{ font-family:var(--f-display); font-size:30px; font-weight:700; letter-spacing:-.04em; color:var(--roxo); }

/* --- 19. Camadas: folha, toast, aviso offline -------------------------------------------- */
.folha{ position:absolute; inset:0; z-index:140; display:none; }
.folha.on{ display:block; }
.folha__fundo{ position:absolute; inset:0; background:rgba(28,26,42,.48); }
.folha__painel{ position:absolute; left:0; right:0; bottom:0; max-height:88%; overflow-y:auto; overscroll-behavior:contain;
  background:var(--fundo); border-radius:var(--r-xl) var(--r-xl) 0 0; padding:12px var(--g) calc(var(--seg-base) + 24px); }
.folha__alca{ width:42px; height:5px; border-radius:999px; background:#D6D6E0; margin:0 auto 18px; }
.idioma-op{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:15px 16px; border-radius:var(--r-md); background:var(--branco); box-shadow:var(--sombra-1); margin-bottom:9px; border:2px solid transparent; }
.idioma-op[aria-pressed="true"]{ border-color:var(--roxo); }
.idioma-op__sigla{ width:42px; height:42px; border-radius:13px; background:var(--roxo-nevoa); color:var(--roxo); display:grid; place-items:center; font-family:var(--f-display); font-size:12px; font-weight:700; }
.idioma-op b{ display:block; font-size:14.5px; }

.toast{
  position:absolute; left:50%; bottom:calc(var(--nav-h) + var(--seg-base) + 40px); z-index:180; transform:translate(-50%,16px);
  display:flex; align-items:center; gap:10px; max-width:calc(100% - 40px); padding:12px 18px 12px 14px; border-radius:16px;
  background:var(--grafite); color:#fff; font-size:13px; font-weight:600; box-shadow:var(--sombra-3); opacity:0; pointer-events:none;
}
.toast .simbolo{ width:10px; height:17px; color:var(--amarelo); flex:0 0 auto; }
.offline{
  position:absolute; left:var(--g); right:var(--g); top:calc(var(--seg-topo) + 4px); z-index:170; display:none; align-items:center; gap:9px;
  padding:10px 14px; border-radius:14px; background:var(--grafite); color:#fff; font-size:12px; font-weight:600; box-shadow:var(--sombra-2);
}
.offline.on{ display:flex; }

/* --- 20. Abertura (splash) ----------------------------------------------------------------- */
#abertura{ position:absolute; inset:0; z-index:190; display:grid; place-items:center; background:radial-gradient(90% 60% at 50% 45%, #7A5BF2, var(--roxo) 50%, #4C30CC); }
#abertura .abertura__simbolo{ display:grid; place-items:center; }
#abertura .simbolo{ width:54px; height:93px; }
#abertura .gira .simbolo__giro{ animation-duration:1.4s; }

.vazio{ text-align:center; padding:26px 12px; }
.vazio img{ width:150px; height:150px; object-fit:contain; margin:0 auto 12px; }
.ilustra{ width:160px; height:160px; object-fit:contain; margin:0 auto 8px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  /* a barra do story é um relógio, não enfeite: continua mostrando o tempo */
  .story-ver__barras .atual b{ animation-duration:5s !important; }
}
@media (max-height:700px){
  .capa__titulo{ font-size:42px; }
  .det__palco{ min-height:250px; }
}