/* ============================================================
   CONHEÇA NOSSAS TURMAS — jogo de vestir as mascotes
   Depende das variáveis e das .pilula de landing.css.
   ============================================================ */
.tj{
  --tj-verde:   #174D2C;
  --tj-manteiga:#FFF2B7;
  --tj-creme:   #FFF9E9;
  --tj-claro:   #DCE8C8;
  --tj-coral:   #F47B68;
  --tj-laranja: #F2A64A;
  --tj-amora:   #8E6A9E;
  --cor: var(--tj-claro);
  --ease: cubic-bezier(.22,.7,.2,1);

  /* clip (e não hidden): com hidden o navegador pode rolar a seção de lado
     sozinho durante as animações, e tudo fica deslocado */
  position:relative; overflow:hidden; overflow:clip;
  padding:calc(88 * var(--u)) calc(var(--borda) + 80 * var(--u)) calc(96 * var(--u));
  background:var(--tj-creme);
  color:var(--tj-verde);
  font-family:var(--f-satoshi);
}
.tj button{ font-family:inherit; color:inherit; }
.tj :focus-visible{ outline:3px solid var(--tj-laranja); outline-offset:3px; }

.tj-bola{ position:absolute; border-radius:50%; pointer-events:none; }
.tj-bola-1{ width:calc(380 * var(--u)); height:calc(380 * var(--u)); left:calc(var(--borda) - 120 * var(--u)); top:calc(30 * var(--u)); background:var(--tj-manteiga); opacity:.5; }
.tj-bola-2{ width:calc(240 * var(--u)); height:calc(220 * var(--u)); right:calc(var(--borda) - 70 * var(--u)); bottom:calc(140 * var(--u)); background:var(--tj-claro); opacity:.55; }

/* ---------- cabeçalho ---------- */
.tj-cabeca{
  position:relative;
  display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:16px 48px;
}
.tj-titulo{
  font-weight:900; font-size:max(40px, calc(58 * var(--u))); line-height:.9;
  text-transform:lowercase; letter-spacing:-.01em;
}
.tj-sub{ max-width:400px; font-size:16px; line-height:1.55; color:#3f493a; }
.tj-som{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:0 14px; border:0; border-radius:999px;
  background:transparent; font-size:12px; font-weight:700; text-transform:lowercase;
  opacity:.88; transition:opacity .2s, background .2s;
}
.tj-som:hover{ opacity:1; background:rgba(23,77,44,.06); }
.tj-som svg{ width:20px; height:20px; }
.tj-som .tj-som-onda{ display:none; }
.tj-som[aria-pressed="true"]{ opacity:1; }
.tj-som[aria-pressed="true"] .tj-som-onda{ display:inline; }
.tj-som[aria-pressed="true"] .tj-som-mudo{ display:none; }

/* sem z-index aqui: a gaveta do celular (position:fixed) precisa ficar acima das outras seções */
.tj-trilho{ position:relative; margin-top:calc(44 * var(--u)); }
.tj-tela[hidden]{ display:none !important; }

/* ---------- 1. escolha ---------- */
.tj-pergunta{
  font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.tj-varal{ display:block; width:100%; height:40px; margin-top:6px; color:var(--tj-verde); opacity:.35; }
.tj-opcoes{ display:flex; justify-content:space-between; gap:calc(18 * var(--u)); margin-top:-6px; }
.tj-opcao-item{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; }
/* alturas desencontradas, como fotos penduradas num varal */
.tj-opcao-1{ margin-top:0; }
.tj-opcao-2{ margin-top:34px; }
.tj-opcao-3{ margin-top:6px; }
.tj-opcao-4{ margin-top:40px; }
.tj-opcao-5{ margin-top:14px; }
.tj-opcao{
  position:relative; width:100%; padding:18px 10px 20px; border:0; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.tj-opcao-fundo{
  position:absolute; inset:28px 6px 64px; z-index:0;
  background:var(--cor);
  border-radius:56% 44% 52% 48% / 48% 56% 44% 52%;
  transition:transform .4s var(--ease), border-radius .6s var(--ease);
}
.tj-opcao-2 .tj-opcao-fundo{ border-radius:44% 56% 40% 60% / 58% 42% 58% 42%; }
.tj-opcao-3 .tj-opcao-fundo{ border-radius:62% 38% 56% 44% / 44% 52% 48% 56%; }
.tj-opcao-4 .tj-opcao-fundo{ border-radius:48% 52% 62% 38% / 54% 40% 60% 46%; }
.tj-opcao-5 .tj-opcao-fundo{ border-radius:40% 60% 48% 52% / 50% 58% 42% 50%; }
.tj-opcao-mascote{
  position:relative; z-index:1; display:block;
  width:78%; aspect-ratio:1;
  transition:transform .45s var(--ease);
}
.tj-opcao-mascote img, .tj-opcao-mascote svg{ width:100%; height:100%; object-fit:contain; display:block; }
.tj-opcao-mascote[data-pose="crescido"]{ transform:scale(1.06) rotate(-2deg); }
.tj-opcao-texto{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:12px; }
.tj-opcao-nome{ font-weight:900; font-size:max(22px, calc(28 * var(--u))); line-height:1; text-transform:lowercase; }
.tj-opcao-idade{
  padding:5px 12px; border-radius:999px;
  background:rgba(23,77,44,.08);
  font-weight:700; font-size:13px; transition:background .25s, color .25s, transform .25s;
}
.tj-opcao-fruta{ font-weight:500; font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
/* véu de "iniciar": só no celular, e só com o script do jogo ativo */
.tj-capa{ display:none; }
.tj-opcao-frase{ margin-top:6px; max-width:200px; text-align:center; font-size:13px; line-height:1.45; color:#3f493a; opacity:.8; }
.tj-js .tj-opcao-frase{ display:none; }
.tj-opcao:hover .tj-opcao-mascote, .tj-opcao:focus-visible .tj-opcao-mascote{ transform:translateY(-8px) rotate(-3deg) scale(1.05); }
.tj-opcao:hover .tj-opcao-fundo{ transform:scale(1.04) rotate(2deg); }
.tj-opcao:hover .tj-opcao-idade, .tj-opcao:focus-visible .tj-opcao-idade{ background:var(--tj-verde); color:var(--tj-creme); transform:scale(1.06); }
.tj-opcao:active .tj-opcao-mascote{ transform:translateY(-2px) scale(.98); }

/* ---------- 2. a turma ---------- */
.tj-topo{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.tj-voltar{
  min-height:44px; padding:0 4px; border:0; background:none; cursor:pointer;
  font-weight:700; font-size:13px; text-transform:lowercase;
}
.tj-voltar:hover{ text-decoration:underline; text-underline-offset:4px; }
.tj-idades{
  position:relative; display:flex; align-items:center; gap:0; margin:0; padding:0; list-style:none;
}
/* a linha da jornada, ligando as idades */
.tj-idades::before{
  content:""; position:absolute; left:28px; right:28px; top:50%; height:0;
  border-top:2px dashed rgba(23,77,44,.25);
}
.tj-idades li{ position:relative; }
.tj-idades button{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:8px;
  min-height:44px; padding:0 18px; border:0; border-radius:999px;
  background:transparent; cursor:pointer;
  font-weight:700; font-size:14px; font-variant-numeric:tabular-nums;
  transition:color .3s;
}
.tj-idades-ponto{
  width:10px; height:10px; border-radius:50%;
  border:2px solid var(--tj-verde); background:var(--tj-creme);
  transition:background .3s;
}
.tj-idades button[aria-current="step"] .tj-idades-ponto{ background:var(--tj-verde); }
.tj-idades button:hover .tj-idades-ponto{ background:var(--tj-claro); }
.tj-idades-marca{
  position:absolute; z-index:0; top:50%; left:0; width:0; height:40px;
  margin-top:-20px; border-radius:999px; background:var(--tj-manteiga);
  transition:left .45s var(--ease), width .45s var(--ease);
}

.tj-corpo{
  display:grid;
  grid-template-columns:minmax(0, 27fr) minmax(0, 42fr) minmax(0, 28fr);
  grid-template-areas:
    "info palco armario"
    "info pronto armario";
  grid-template-rows:auto 1fr;
  gap:0 calc(40 * var(--u));
  align-items:center;
  margin-top:calc(28 * var(--u));
}

/* informações */
.tj-info{ grid-area:info; align-self:center; display:flex; flex-direction:column; gap:26px; }
.tj-info-atelie{ font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
/* line-height folgado: "guga" tem letras que descem e batiam na pílula da idade */
.tj-info-nome{ margin-top:4px; padding-bottom:4px; font-weight:900; font-size:max(48px, calc(70 * var(--u))); line-height:1.02; text-transform:lowercase; }
.tj-info-idade{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; font-weight:700; font-size:15px; }
.tj-info-idade > span:first-child{ padding:6px 14px; border-radius:999px; background:var(--tj-verde); color:var(--tj-creme); }
.tj-info-fruta{ font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.tj-info-conceito{ position:relative; display:inline-block; font-weight:900; font-size:max(30px, calc(40 * var(--u))); line-height:1; text-transform:lowercase; color:var(--tj-coral); }
.tj-info-conceito svg{ position:absolute; left:-2%; bottom:-10px; width:104%; height:12px; }
.tj-info-frase{ margin-top:18px; font-weight:700; font-size:20px; line-height:1.3; }
.tj-info-historia{ max-width:340px; font-weight:500; font-size:20px; line-height:1.45; color:#3f493a; }
.tj-info-historia strong{ font-weight:900; color:var(--tj-coral); }
.tj-info-desc{ margin-top:10px; max-width:330px; font-size:15px; line-height:1.6; color:#3f493a; }
.tj-cta{ align-self:flex-start; }

/* palco */
.tj-palco{
  grid-area:palco; position:relative;
  width:100%; aspect-ratio:1 / 1.02; max-height:640px;
  touch-action:pan-y;
}
.tj-palco-fundo{
  position:absolute; inset:7% 3% 6%;
  background:var(--cor);
  border-radius:47% 53% 42% 58% / 54% 44% 56% 46%;
  transition:background-color .5s var(--ease), border-radius .8s var(--ease);
}
.tj-experiencia{ position:absolute; inset:0; pointer-events:none; }
.tj-experiencia svg{ position:absolute; inset:0; width:100%; height:100%; }
.tj-mascote{
  position:absolute; left:50%; bottom:9%;
  height:76%; transform:translateX(-50%);
}
.tj-mascote[hidden]{ display:none; }
.tj-mascote[data-pose="crescido"]{ height:80%; transform:translateX(-50%) rotate(-2deg); }
.tj-mascote > picture, .tj-mascote > img, .tj-mascote > .tj-provisoria{ display:block; width:100%; height:100%; }
.tj-mascote img{ width:100%; height:100%; object-fit:contain; }
.tj-camadas{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;  z-index:2; }
.tj-camadas-atras{ z-index:0; }
.tj-mascote img{ position:relative; z-index:1; }
.tj-chao{
  position:absolute; left:28%; right:28%; bottom:7.5%; height:4%;
  border-radius:50%; background:rgba(23,77,44,.1);
}
.tj-seta{
  position:absolute; top:46%; z-index:3;
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:var(--tj-creme); box-shadow:0 2px 0 rgba(23,77,44,.15);
  font-size:20px; display:none; place-items:center;
}
.tj-seta-ant{ left:0; }
.tj-seta-prox{ right:0; }

/* armário */
.tj-armario{
  grid-area:armario; align-self:center;
  padding:24px 22px 20px;
  background:var(--tj-manteiga);
  border-radius:34px 12px 38px 26px;
}
.tj-armario-titulo{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:24px; text-transform:lowercase; }
.tj-armario-titulo svg{ width:34px; height:20px; }
.tj-categorias{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:16px; }
.tj-categorias button{
  position:relative;
  display:flex; align-items:center; gap:8px;
  min-height:44px; padding:0 12px; border:0; border-radius:14px;
  background:rgba(255,249,233,.7); cursor:pointer;
  font-weight:700; font-size:13px; text-align:left;
  transition:background .25s, color .25s, transform .15s;
}
.tj-categorias button:hover{ background:var(--tj-creme); }
.tj-categorias button:active{ transform:scale(.97); }
.tj-categorias button[aria-selected="true"]{ background:var(--tj-verde); color:var(--tj-creme); }
.tj-cat-icone svg{ display:block; width:20px; height:20px; }
/* bolinha: essa parte do armário já tem escolha */
.tj-cat-marca{ display:none; width:7px; height:7px; margin-left:auto; border-radius:50%; background:var(--tj-coral); }
.tj-categorias button.tem-escolha .tj-cat-marca{ display:block; }

.tj-gaveta{ margin-top:16px; }
.tj-gaveta-topo{ display:none; }
.tj-itens{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.tj-item{
  position:relative; aspect-ratio:1; padding:8px; border:0; cursor:pointer;
  border-radius:18px 14px 20px 12px; background:var(--tj-creme);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:transform .2s var(--ease), box-shadow .2s;
}
.tj-item:nth-child(3n+2){ border-radius:14px 20px 12px 18px; }
.tj-item:nth-child(3n){ border-radius:20px 12px 18px 14px; }
.tj-item:hover{ transform:translateY(-2px) rotate(-1.5deg); }
.tj-item:active{ transform:scale(.95); }
.tj-item svg{ width:74%; height:74%; overflow:hidden; pointer-events:none; }
.tj-item-nome{ font-size:10px; font-weight:700; line-height:1.15; text-align:center; text-transform:lowercase; margin-top:2px; }
.tj-item[aria-pressed="true"]{ box-shadow:inset 0 0 0 2.5px var(--tj-verde); }
.tj-item[aria-pressed="true"]::after{
  content:"✓"; position:absolute; top:-6px; right:-6px;
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--tj-verde); color:var(--tj-creme); font-size:12px; font-weight:900;
}
.tj-dica{ margin-top:12px; font-size:12px; opacity:.6; }
.tj-veu{ display:none; }

/* "pronto!" */
.tj-pronto{
  grid-area:pronto; justify-self:center; align-self:start;
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 16px;
  max-width:460px; margin-top:6px; padding:16px 18px 16px 22px;
  border-radius:24px 26px 24px 8px;
  background:var(--tj-verde); color:var(--tj-creme);
}
.tj-pronto[hidden]{ display:none; }
.tj-pronto-titulo{ font-weight:900; font-size:26px; color:var(--tj-manteiga); text-transform:lowercase; }
.tj-pronto-texto{ font-size:15px; line-height:1.4; }
.tj-pronto-botoes{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.tj-de-novo{
  min-height:44px; padding:0 18px; border:1.5px solid rgba(255,249,233,.5); border-radius:999px;
  background:transparent; color:var(--tj-creme) !important; cursor:pointer;
  font-weight:800; font-size:11px; text-transform:uppercase;
}
.tj-de-novo:hover{ background:rgba(255,249,233,.1); }
.tj-pronto .pilula{ height:44px; }

.tj-navega{ display:flex; justify-content:center; gap:40px; margin-top:20px; }
.tj-navega button{
  min-height:44px; padding:0 8px; border:0; background:none; cursor:pointer;
  font-weight:700; font-size:13px; text-transform:lowercase; opacity:.75;
}
.tj-navega button:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.tj-aviso{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- frase final ---------- */
.tj-final{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:24px;
  margin-top:calc(80 * var(--u)); text-align:center;
}
.tj-final-frase{ font-weight:900; font-size:max(30px, calc(44 * var(--u))); line-height:1; text-transform:lowercase; }

/* ---------- jogo: progresso, surpresa, selos ---------- */
.tj-armario-topo{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tj-surpresa{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  min-height:40px; padding:0 14px; border:0; border-radius:999px; cursor:pointer;
  background:var(--tj-verde); color:var(--tj-creme) !important;
  font-weight:800; font-size:12px; text-transform:lowercase;
  transition:transform .15s, background .2s;
}
.tj-surpresa svg{ width:18px; height:18px; }
.tj-surpresa:hover{ background:#0f3a20; }
.tj-surpresa:active{ transform:scale(.95) rotate(-4deg); }
.tj-progresso{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.tj-progresso-trilha{ flex:1; height:8px; border-radius:999px; background:rgba(23,77,44,.12); overflow:hidden; }
.tj-progresso-barra{ display:block; width:0; height:100%; border-radius:999px; background:var(--tj-coral); transition:width .45s var(--ease), background .3s; }
.tj-completo .tj-progresso-barra{ background:var(--tj-verde); }
.tj-progresso-texto{ flex:none; font-weight:700; font-size:12px; white-space:nowrap; }
.tj-completo .tj-progresso-texto{ color:var(--tj-coral); }
/* 5 partes em 2 colunas: a última ocupa a linha toda */
.tj-categorias button:last-child{ grid-column:1 / -1; }
.tj-cat-mini{ display:none; }
.tj-gaveta-abas, .tj-gaveta-x, .tj-gaveta-pe, .tj-gaveta-titulo{ display:none; }

.tj-selo{
  display:inline-grid; place-items:center; flex:none;
  width:16px; height:16px; margin-left:2px; border-radius:50%;
  background:var(--tj-coral); color:#fff; font-size:10px; font-weight:900; line-height:1;
}
.tj-selo[hidden]{ display:none; }
.tj-selo-grande{
  position:absolute; z-index:2; top:12px; right:8px;
  width:auto; height:auto; padding:5px 10px; margin:0;
  background:var(--tj-verde); color:var(--tj-creme); font-size:11px; font-weight:800; text-transform:lowercase;
}
@keyframes tj-chama{ 0%,100%{ transform:none; } 30%{ transform:scale(1.04); } 60%{ transform:scale(.99); } }
.tj-gaveta-proximo.chama{ animation:tj-chama .5s var(--ease) 2; }

/* ============================================================
   CELULAR E TABLET — experiência própria, pensada para uma mão:
   idades → nome → mascote → armário (logo abaixo dela) → "pronto!" →
   texto da turma → botão. O armário abre num painel que sobe de baixo.
   ============================================================ */
@media (max-width: 959px){
  .tj{ padding:56px 0 56px; }
  .tj-cabeca{ grid-template-columns:1fr auto; padding:0 20px; gap:10px; }
  .tj-titulo{ grid-column:1; font-size:clamp(34px, 10vw, 48px); }
  .tj-som{ grid-column:2; grid-row:1; align-self:start; }
  .tj-sub{ grid-column:1 / -1; font-size:15px; }
  .tj-trilho{ margin-top:22px; }

  /* escolha: as 4 turmas numa grade 2 × 2, sem rolar de lado */
  .tj-pergunta{ padding:0 20px; }
  .tj-varal{ display:none; }
  .tj-opcoes{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 10px; margin-top:10px; padding:0 14px; }
  .tj-opcao-item{ margin-top:0 !important; }
  .tj-opcao{ padding:10px 4px 14px; }
  .tj-opcao-fundo{ inset:16px 4px 58px; }
  .tj-opcao-mascote{ width:82%; }
  .tj-opcao-texto{ margin-top:8px; gap:4px; }
  .tj-opcao-nome{ font-size:clamp(20px, 6.2vw, 26px); }
  .tj-opcao-idade{ font-size:12px; padding:4px 10px; }
  .tj-opcao-fruta{ font-size:10px; }
  .tj-selo-grande{ top:4px; right:2px; font-size:10px; padding:4px 8px; }

  .tj-escolha{ position:relative; }
  .tj-js .tj-capa{
    position:absolute; z-index:5; inset:-8px 0 0;
    display:flex; justify-content:center; align-items:center;
    background:rgba(232,240,220,.72);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    /* bordas em degradê: o véu "some" nas pontas em vez de cortar reto */
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    mask-image:linear-gradient(180deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    transition:opacity .45s ease, visibility 0s linear .45s;
  }
  .tj-iniciado .tj-capa{ opacity:0; visibility:hidden; pointer-events:none; }
  .tj .tj-capa-botao{
    position:relative;
    display:inline-flex; align-items:center; gap:10px;
    height:52px; padding:0 30px 0 24px; border:0; border-radius:999px; cursor:pointer;
    background:var(--tj-verde); color:#fffdf4;
    font-family:inherit; font-weight:900; font-size:18px; text-transform:lowercase;
    box-shadow:0 12px 26px -14px rgba(24,53,14,.7);
  }
  .tj-capa-botao svg{ width:18px; height:18px; flex:none; }
  .tj-capa-botao:active{ transform:scale(.97); }

  /* turma */
  /* no celular a linha das idades fica embaixo do jogo (depois do "pronto!") */
  .tj-turma:not([hidden]){ display:flex; flex-direction:column; }
  .tj-topo{ order:2; flex-direction:column; align-items:stretch; gap:4px; padding:0 12px; margin-top:26px; }
  .tj-voltar{ align-self:flex-start; padding:0 8px; }
  .tj-idades{ justify-content:space-between; }
  .tj-idades li{ flex:1; }
  .tj-idades button{ width:100%; justify-content:center; flex-direction:column; gap:4px; padding:6px 0; min-height:52px; font-size:13px; }
  .tj-idades::before{ left:12%; right:12%; top:17px; }
  .tj-idades-marca{ height:52px; margin-top:-26px; border-radius:18px; }
  .tj-selo{ position:absolute; top:3px; left:calc(50% + 7px); margin:0; width:15px; height:15px; font-size:9px; }

  .tj-corpo{
    grid-template-columns:minmax(0, 1fr); /* sem o minmax, uma linha larga alarga a coluna além da tela */
    grid-template-rows:none;
    grid-template-areas:"cabeca" "texto" "palco" "armario" "pronto" "cta";
    gap:0; margin-top:14px; padding:0 16px;
  }
  .tj-info{ display:contents; }
  /* nome da mascote primeiro, depois ateliê + idade numa linha só */
  .tj-info-cabeca{ grid-area:cabeca; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 10px; text-align:center; }
  .tj-info-nome{ order:-1; flex-basis:100%; margin:0; font-size:clamp(44px, 14vw, 60px); }
  .tj-info-atelie{ margin:0; }
  .tj-info-idade{ justify-content:center; margin:0; font-size:14px; }
  .tj-info-texto{ grid-area:texto; text-align:center; margin-top:14px; }
  .tj-info-desc{ margin-left:auto; margin-right:auto; }
  .tj-info-frase{ font-size:18px; margin-top:16px; }
  .tj-info-historia{ margin:0 auto; font-size:18px; }
  .tj-info-cta{ grid-area:cta; display:flex; justify-content:center; margin-top:22px; }
  .tj-cta{ align-self:center; }

  .tj-palco{ width:min(100%, 420px); justify-self:center; margin-top:2px; }
  .tj-seta{ display:grid; width:44px; height:44px; top:auto; bottom:14%; }
  .tj-seta-ant{ left:-4px; }
  .tj-seta-prox{ right:-4px; }

  /* armário: barra com as 5 partes logo abaixo da mascote */
  .tj-armario{ margin-top:12px; padding:14px 12px 12px; border-radius:24px 10px 26px 20px; }
  .tj-armario-titulo{ font-size:18px; gap:8px; }
  .tj-armario-titulo svg{ width:28px; height:17px; }
  .tj-progresso{ margin-top:10px; }
  .tj-categorias{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; margin-top:12px; }
  .tj-categorias button{
    flex-direction:column; justify-content:center; gap:5px;
    min-height:76px; padding:8px 2px 7px; border-radius:16px;
    font-size:clamp(9px, 2.7vw, 11px); line-height:1.1; text-align:center;
  }
  .tj-categorias button:last-child{ grid-column:auto; }
  /* no celular a parte "aberta" é o painel; a barra só mostra o que está vestido */
  .tj-categorias button[aria-selected="true"]{ background:rgba(255,249,233,.7); color:inherit; }
  .tj-cat-icone, .tj-cat-mini{ width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:var(--tj-creme); }
  .tj-cat-icone svg{ width:20px; height:20px; }
  .tj-cat-mini{ display:none; overflow:hidden; background:#fff; box-shadow:inset 0 0 0 2px var(--tj-verde); }
  .tj-cat-mini svg, .tj-cat-mini img{ width:100%; height:100%; }
  .tem-mini .tj-cat-mini{ display:grid; }
  .tem-mini .tj-cat-icone{ display:none; }
  .tj-cat-marca{ display:none !important; }
  .tj-cat-rotulo{ max-width:100%; overflow-wrap:anywhere; }
  .tj-dica{ display:none; }

  /* painel que sobe de baixo: abas da parte, itens grandes e "próximo" */
  .tj-gaveta{
    position:fixed; z-index:80; left:0; right:0; bottom:0; margin:0;
    max-height:52vh; max-height:52dvh; overflow:auto; overscroll-behavior:contain;
    padding:0 14px;
    background:var(--tj-creme);
    border-radius:24px 24px 0 0;
    box-shadow:0 -10px 34px rgba(23,77,44,.18);
    transform:translateY(105%); visibility:hidden;
    transition:transform .32s var(--ease), visibility 0s linear .32s;
  }
  .tj-gaveta.aberta{ transform:translateY(0); visibility:visible; transition:transform .32s var(--ease), visibility 0s; }
  .tj-gaveta-topo{
    position:sticky; top:0; z-index:2;
    display:flex; align-items:center; gap:8px;
    padding:20px 0 6px; background:var(--tj-creme);
    touch-action:none;
  }
  .tj-gaveta-alca{ position:absolute; left:50%; top:8px; width:42px; height:5px; margin-left:-21px; border-radius:3px; background:rgba(23,77,44,.22); }
  .tj-gaveta-abas{ flex:1; display:flex; gap:6px; }
  .tj-gaveta-abas button{
    width:44px; height:44px; padding:0; border:0; border-radius:14px; cursor:pointer;
    display:grid; place-items:center; background:var(--tj-manteiga);
  }
  .tj-gaveta-abas button > span:last-child{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .tj-gaveta-abas .tj-cat-icone{ width:auto; height:auto; background:none; }
  .tj-gaveta-abas button[aria-pressed="true"]{ background:var(--tj-verde); color:var(--tj-creme); }
  .tj-gaveta-x{
    display:grid; place-items:center; flex:none;
    width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer;
    background:rgba(23,77,44,.08); font-size:26px; line-height:1;
  }
  .tj-gaveta-titulo{ display:block; margin:6px 0 10px; font-weight:900; font-size:20px; text-transform:lowercase; }
  .tj-itens{ grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; }
  .tj-item{ min-height:96px; background:var(--tj-manteiga); }
  .tj-item-nome{ font-size:11px; }
  .tj-gaveta-pe{
    display:block; position:sticky; bottom:0; z-index:2;
    margin:0 -14px; padding:12px 14px calc(14px + env(safe-area-inset-bottom));
    background:var(--tj-creme); box-shadow:0 -1px 0 rgba(23,77,44,.08);
  }
  .tj-gaveta-proximo{
    width:100%; min-height:50px; border:0; border-radius:999px; cursor:pointer;
    background:var(--tj-verde); color:var(--tj-creme) !important;
    font-weight:800; font-size:14px; text-transform:lowercase;
  }
  .tj-veu{ display:block; position:fixed; inset:0; z-index:79; background:rgba(23,77,44,.14); touch-action:none; }
  .tj-veu[hidden]{ display:none; }

  .tj-pronto{ max-width:none; margin-top:14px; grid-template-columns:minmax(0, 1fr); text-align:center; padding:18px 16px; }
  .tj-pronto-botoes{ flex-direction:column; }
  .tj-pronto-botoes > *{ width:100%; justify-content:center; }
  /* o "pronto!" já traz o botão da turma: não repete logo abaixo */
  .tj-corpo:has(.tj-pronto:not([hidden])) .tj-info-cta{ display:none; }
  .tj-navega{ display:none; }

  .tj-final{ margin-top:64px; padding:0 20px; }
  .tj-final-frase{ font-size:clamp(28px, 8vw, 40px); }
}

/* celular deitado: a mascote cabe na altura da tela e o armário vira um
   painel do lado direito — a mascote vai para a esquerda e continua à vista */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 540px){
  .tj-palco{ width:min(100%, 74vh); width:min(100%, 74dvh); transition:transform .32s var(--ease); }
  .tj-gaveta{
    top:0; left:auto; right:0; bottom:0;
    width:min(52vw, 440px); max-height:none;
    border-radius:24px 0 0 24px;
    transform:translateX(105%);
  }
  .tj-gaveta.aberta{ transform:none; }
  .tj-gaveta-aberta .tj-palco{ transform:translateX(-24vw); }
  .tj-gaveta-alca{ display:none; }
}

/* celulares bem estreitos (320–359px) */
@media (max-width: 359px){
  .tj-corpo{ padding:0 10px; }
  .tj-armario{ padding:12px 8px 10px; }
  .tj-categorias{ gap:4px; }
  .tj-cat-icone, .tj-cat-mini{ width:30px; height:30px; }
  .tj-itens{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
  .tj-item{ min-height:84px; }
  .tj-opcoes{ padding:0 8px; gap:4px 6px; }
  .tj-surpresa{ padding:0 10px; }
}

@media (prefers-reduced-motion: reduce){
  .tj *{ transition:none !important; }
}