/* ============================================================================
 * integrado.css — MURAL colorido "tudo num lugar só".
 *
 * Bento: um bloco grande (Música) + os outros em volta, TODOS visíveis e se
 * mexendo, cada um como a tela real do recurso e COM SUA PRÓPRIA COR. Sem anel,
 * sem ícone escondendo nada. Sobre um vidro escuro leve, pra as cores saltarem
 * sem brigar com a pintura de fundo.
 *
 * REGRAS: nenhuma fonte < 14px (alvo 16). Sem fallback/truncamento/chunking.
 * ============================================================================ */

#integrado {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
#integrado > .wrap {
  width: 100%;
  margin: 0;
  padding: clamp(14px, 2.4vh, 26px) 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4vh, 26px);
}

/* ---------- frase principal ---------- */
.itg-head {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  padding: 16px clamp(24px, 4vw, 44px);
  margin: 0 auto;
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
  backdrop-filter: blur(14px) saturate(1.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  text-align: center;
  /* largura suficiente pra a 1ª parte caber numa linha só (no tamanho máximo da
     fonte, 48px). A ÚNICA quebra é o <br> antes de "sem sair do aplicativo". */
  max-width: min(1180px, calc(100% - 24px));
}
.itg-statement {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(28px, 4.2vmin, 48px);
  line-height: 1.08;
  color: var(--md-creme-bright);
  margin: 0;
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.itg-statement em {
  font-style: italic;padding-left:.18em;padding-right:.18em;margin-left:-.18em;margin-right:-.18em;
  background: linear-gradient(120deg, var(--md-gold-bright) 0%, var(--md-gold) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--md-gold);
}

/* ============================================================================
 * MURAL (bento)
 * ============================================================================ */
/* palco do mural: centraliza e reserva a altura JÁ ESCALADA (definida pelo
   scaler em integrado.js), pra o painel caber na tela sem deixar buraco. */
#integradoMount {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.itg-mural {
  /* Tamanho "cheio" de projeto (largura fixa + altura que NÃO corta nenhum
     cartão). O encolher-pra-caber é feito por inteiro, como um bloco só, pelo
     scaler em integrado.js (transform: scale) — assim cabe sempre numa tela,
     sem cortar nada e sem encolher fonte de um cartão só. */
  width: 1340px;
  height: 780px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr 1.42fr;
  grid-template-areas:
    "music music flash medita"
    "music music flash medita"
    "mood mood pomo move";
  padding: 16px;
  border-radius: 26px;
  background: rgba(8, 10, 18, .42);
  border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 90px rgba(0,0,0,.4);
}

/* bloco base */
.itg-tile {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column;
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
  color: #fff;
}
.itg-tile--music   { grid-area: music; }
.itg-tile--flash   { grid-area: flash; }
.itg-tile--pomo    { grid-area: pomo; }
.itg-tile--medita  { grid-area: medita; }
.itg-tile--mood    { grid-area: mood; }
.itg-tile--move    { grid-area: move; }

.tile__tag {
  font: 700 18px Inter, system-ui, sans-serif; letter-spacing: .03em;
  color: #fff; opacity: .95; flex: 0 0 auto;
}
/* blocos que viram interativos ao clicar */
.itg-tile--pomo, .itg-tile--medita, .itg-tile--move { cursor: pointer; }
.itg-tile--pomo:focus-visible, .itg-tile--medita:focus-visible, .itg-tile--move:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
 * MÚSICA (violeta/rosa) — tocador real com Apple Music + Audius à mostra
 * ------------------------------------------------------------------------- */
.itg-tile--music {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(138,92,255,.34), transparent 60%),
    radial-gradient(120% 90% at 100% 100%, rgba(255,110,160,.26), transparent 60%),
    linear-gradient(160deg, #241a3e 0%, #1a1530 100%);
  border: 1px solid rgba(176,140,255,.30);
  gap: 12px;
}
/* categorias de som — não é só música: foco, natureza, chuva + música */
.tmu__cats { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.tmu__cat {
  font: 600 18px Inter, system-ui, sans-serif; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.82); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.tmu__cat:hover { background: rgba(255,255,255,.16); color: #fff; }
.tmu__cat.is-on { background: #fff; color: #2a1a4a; border-color: #fff; font-weight: 700; }
/* painel de Frequências: fileira do tipo (Binaural/Isocrônico/Solfeggio) +
   fileira da onda (Delta…Gama) ou dos Hz (solfeggio). É um painel próprio, não
   mais pílulas de categoria soltas. */
.tmu__freq { display: flex; flex-direction: column; gap: 7px; flex: 0 0 auto; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); }
.tmu__hzrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tmu__freqlbl { min-width: 34px; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-right: 2px; }
.tmu__freqbtn { font: 600 18px Inter, system-ui, sans-serif; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: rgba(255,255,255,.84); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.tmu__freqbtn:hover { background: rgba(255,255,255,.16); color: #fff; }
.tmu__freqbtn.is-on { background: #fff; color: #2a1a4a; border-color: #fff; font-weight: 700; }
.tmu__art {
  flex: 1 1 auto; min-height: 60px; border-radius: 14px;
  background: linear-gradient(135deg, #ff7eb3 0%, #8a5cff 48%, #4ad6ff 100%);
  box-shadow: 0 12px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px;
  position: relative; overflow: hidden;
  transition: background .45s ease;
}
.tmu__art::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.4), transparent 45%); }
.tmu__eq { display: flex; align-items: flex-end; gap: 4px; height: 40px; position: relative; }
.tmu__eq i { width: 6px; border-radius: 3px; background: rgba(255,255,255,.92); box-shadow: 0 0 8px rgba(255,255,255,.5); transform-origin: bottom; animation: itgEq 900ms ease-in-out infinite; }
.tmu__eq i:nth-child(1){ height: 45%; animation-delay:-150ms; animation-duration:780ms }
.tmu__eq i:nth-child(2){ height: 90%; animation-delay:-520ms; animation-duration:1020ms }
.tmu__eq i:nth-child(3){ height: 60%; animation-delay:-300ms; animation-duration:840ms }
.tmu__eq i:nth-child(4){ height: 100%; animation-delay:-640ms; animation-duration:960ms }
.tmu__eq i:nth-child(5){ height: 50%; animation-delay:-220ms; animation-duration:720ms }
.tmu__eq i:nth-child(6){ height: 80%; animation-delay:-480ms; animation-duration:1100ms }
.tmu__eq i:nth-child(7){ height: 65%; animation-delay:-360ms; animation-duration:900ms }
@keyframes itgEq { 0%,100% { transform: scaleY(.32) } 50% { transform: scaleY(1) } }
.tmu__meta { flex: 0 0 auto; }
.tmu__t { font: 700 20px Inter; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmu__a { font-size: 18px; color: rgba(255,255,255,.74); }
/* pausa de verdade: congela equalizador e barra */
.itg-tile--music.is-paused .tmu__eq i,
.itg-tile--music.is-paused .tmu__bar span { animation-play-state: paused; }
.tmu__bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; flex: 0 0 auto; }
.tmu__bar span { display: block; height: 100%; width: 40%; border-radius: 999px; background: #fff; animation: itgPlay 9s linear infinite; }
@keyframes itgPlay { from { width: 8% } to { width: 100% } }
.tmu__ctrls { display: flex; align-items: center; justify-content: center; gap: 18px; flex: 0 0 auto; }
.tmu__btn { width: 26px; height: 26px; display: grid; place-items: center; color: rgba(255,255,255,.9); background: none; border: none; cursor: pointer; padding: 0; }
.tmu__btn svg { width: 100%; height: 100%; }
.tmu__btn--play { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #ffffff, #e6d8ff); color: #5b2bbf; box-shadow: 0 8px 20px rgba(0,0,0,.4); animation: itgPlayPulse 2.4s ease-in-out infinite; }
.tmu__btn--play svg { width: 22px; height: 22px; }
@keyframes itgPlayPulse { 0%,100% { box-shadow: 0 8px 20px rgba(0,0,0,.4), 0 0 0 0 rgba(255,255,255,.0) } 50% { box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 22px 2px rgba(180,140,255,.5) } }
.tmu__svc { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; flex: 0 0 auto; padding-top: 2px; }
.tmu__svclabel { font-size: 18px; color: rgba(255,255,255,.78); }
.tmu__svc-item { display: flex; align-items: center; gap: 8px; }
.tmu__svcname { font-size: 18px; font-weight: 600; color: rgba(255,255,255,.92); white-space: nowrap; }
.tmu__logo img { width: 40px; height: 40px; display: block; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.tmu__logo { animation: itgLogoGlow 5.2s ease-in-out infinite; border-radius: 12px; }
.tmu__svc-item:nth-child(3) .tmu__logo { animation-delay: -2.6s; }
@keyframes itgLogoGlow { 0%,40% { filter: drop-shadow(0 0 0 transparent) } 60%,90% { filter: drop-shadow(0 0 8px rgba(255,255,255,.55)) } 100% { filter: drop-shadow(0 0 0 transparent) } }
.tmu__btn { cursor: pointer; }

/* ---------------------------------------------------------------------------
 * FLASHCARD (azul) — cartão de verdade que vira (frente/verso)
 * ------------------------------------------------------------------------- */
.itg-tile--flash {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(91,141,239,.30), transparent 60%),
    linear-gradient(160deg, #15233f 0%, #111a2e 100%);
  border: 1px solid rgba(120,160,255,.30);
  gap: 12px;
}
/* apoio logo sob o título Flashcards: a opção de importar do Anki */
.tfc__import { margin: 0; font-size: 18px; line-height: 1.35; color: rgba(255,255,255,.78); flex: 0 0 auto; }
.tfc__import b { color: #fff; font-weight: 700; }
/* FSRS EM DESTAQUE (não letrinha): a coisa mais moderna */
.tfc__fsrs { margin: 0; font-size: 18px; line-height: 1.4; color: rgba(255,255,255,.88); flex: 0 0 auto; }
.tfc__fsrs b { color: #fff; font-weight: 800; }
/* hospeda o widget REAL .w-stack (estilo herda do markets-demo.css), mas faz o
   cartão ENCHER o bloco (sem aperto) e os botões respirarem. */
.itg-stack { flex: 1 1 auto; width: 100%; min-height: 180px; }
.itg-tile--flash .itg-stack .w-stack__card { width: 100%; height: 100%; }
.itg-tile--flash .w-stack__front { font-size: clamp(21px, 3.6vmin, 28px); }
.itg-tile--flash .w-stack__back { font-size: 18px; padding: 16px 14px 56px; }
.itg-tile--flash .w-stack__back-text { font-size: 19px; }
/* A carta do bento é estreita (~229px). Pra os 4 botões caberem numa linha SEM
   encolher fonte (piso 16px), a barra vai quase até a borda e os botões usam
   gap/padding enxutos. Junto com o minmax(0,1fr) da base, nada transborda. */
.itg-tile--flash .w-stack__rate { left: 4px; right: 4px; bottom: 12px; gap: 3px; }
.itg-tile--flash .w-stack__rate-btn { font-size: 18px; padding: 8px 2px; letter-spacing: 0; }
.itg-tile--flash .w-stack__hint { font-size: 18px; bottom: 12px; }

/* ---------------------------------------------------------------------------
 * POMODORO (coral/âmbar) — timer real
 * ------------------------------------------------------------------------- */
.itg-tile--pomo {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,138,91,.34), transparent 62%),
    linear-gradient(160deg, #3a2018 0%, #2a1812 100%);
  border: 1px solid rgba(255,150,100,.30);
  align-items: center; gap: 8px;
}
.itg-tile--pomo .tile__tag { align-self: flex-start; }
.tpo__ring { position: relative; flex: 1 1 auto; aspect-ratio: 1; max-height: 100%; display: grid; place-items: center; }
.tpo__ring svg { width: 100%; height: 100%; max-width: 116px; transform: rotate(-90deg); }
.tpo__track { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 9; }
.tpo__prog { fill: none; stroke: #ff7a45; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 326.726; stroke-dashoffset: 0; filter: drop-shadow(0 0 5px rgba(255,122,69,.6)); animation: itgPomo 25s linear infinite; transition: stroke-dashoffset 1s linear; }
@keyframes itgPomo { from { stroke-dashoffset: 0 } to { stroke-dashoffset: 326.726 } }
.tpo__time { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tpo__time b { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 34px; color: #fff; line-height: 1; }
.tpo__time span { font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.78); margin-top: 3px; }
.tpo__sub { font-size: 18px; color: rgba(255,255,255,.82); flex: 0 0 auto; }
.tpo__lead { margin: 0; align-self: flex-start; font-size: 18px; line-height: 1.3; color: rgba(255,255,255,.8); flex: 0 0 auto; }
.tpo__lead-top { display: block; font-weight: 600; color: rgba(255,255,255,.92); }
.tpo__lead-bot { display: block; color: rgba(255,255,255,.7); }
.itg-tile--pomo .tpo__ring svg { max-width: 96px; }
.itg-tile--pomo, .itg-tile--move { padding: 14px; gap: 6px; }
.itg-tile--pomo.is-running .tpo__prog { filter: drop-shadow(0 0 8px rgba(255,122,69,.85)); }

/* Painel lateral da sessão de foco: aparece à DIREITA do bloco quando a sessão
   roda (clica → vê os 4 blocos e por onde a sessão vai). Em telas largas é um
   cartão flutuante que escapa do bloco (overflow:visible quando rodando). */
.tpo__panel {
  position: absolute; left: calc(100% + 10px); top: 0; width: 232px; max-width: 46vw;
  background: linear-gradient(160deg, #341d14 0%, #1f110c 100%);
  border: 1px solid rgba(255,150,100,.32); border-radius: 16px; padding: 14px;
  box-shadow: 0 20px 54px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  opacity: 0; transform: translateX(-8px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease; z-index: 30;
}
.itg-tile--pomo.is-open { overflow: visible; z-index: 20; }
.itg-tile--pomo.is-open .tpo__panel { opacity: 1; transform: none; pointer-events: auto; }
.tpo__panel-title { font: 700 18px Inter, system-ui, sans-serif; color: #fff; }
.tpo__blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tpo__blocks li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); transition: background .25s ease; }
.tpo__b-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); flex: 0 0 auto; transition: all .25s ease; }
.tpo__b-name { font-size: 18px; font-weight: 600; color: rgba(255,255,255,.9); flex: 1 1 auto; }
.tpo__b-meta { font-size: 18px; color: rgba(255,255,255,.6); }
.tpo__blocks li.is-current { background: rgba(255,122,69,.22); }
.tpo__blocks li.is-current .tpo__b-dot { border-color: #ff7a45; background: #ff7a45; box-shadow: 0 0 8px rgba(255,122,69,.85); }
.tpo__blocks li.is-done .tpo__b-dot { border-color: #3dd68c; background: #3dd68c; }
.tpo__blocks li.is-done .tpo__b-name { color: rgba(255,255,255,.55); }
.tpo__panel-foot { font-size: 18px; line-height: 1.35; color: rgba(255,255,255,.6); }

/* ---------------------------------------------------------------------------
 * MEDITAÇÃO DIÁRIA (azul/verde-água/roxo — frio) — bloco alto
 * ------------------------------------------------------------------------- */
.itg-tile--medita {
  background: linear-gradient(165deg, #1f8f9e 0%, #2f5bb0 52%, #5b3aa0 100%);
  border: 1px solid rgba(140,210,230,.30);
  align-items: center; gap: 10px;
}
.itg-tile--medita .tile__tag { align-self: flex-start; }
.tme__stage { position: relative; flex: 1 1 auto; width: 100%; display: grid; place-items: center; min-height: 0; }
.tme__ring { position: absolute; width: clamp(96px, 60%, 150px); aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); animation: itgMedRing 9s ease-in-out infinite; }
.tme__orb { width: clamp(70px, 46%, 116px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffffff, #bfeaff 55%, rgba(255,255,255,.1) 80%); box-shadow: 0 0 40px rgba(255,255,255,.5); animation: itgMedOrb 9s ease-in-out infinite; }
@keyframes itgMedOrb { 0%,100% { transform: scale(.62); opacity: .85 } 45%,55% { transform: scale(1); opacity: 1 } }
@keyframes itgMedRing { 0%,100% { transform: scale(.72); opacity: .5 } 50% { transform: scale(1.05); opacity: 1 } }
.tme__count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font: 700 18px Inter; color: #0e3445; text-align: center; }
/* sessão guiada: o JS controla o orbe; desliga a respiração ambiente */
.itg-tile--medita.is-guided .tme__orb { animation: none; transition: transform .12s linear; }
.tme__sub { font-size: 18px; color: rgba(255,255,255,.92); flex: 0 0 auto; text-align: center; white-space: pre-line; line-height: 1.32; }
.tme__lead { margin: 0; align-self: flex-start; font-size: 18px; line-height: 1.35; color: rgba(255,255,255,.88); flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
 * DIÁRIO DO HUMOR (plum quente) — carinhas coloridas, registra o dia num toque
 * ------------------------------------------------------------------------- */
.itg-tile--mood {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,180,120,.18), transparent 60%),
    linear-gradient(160deg, #2b2336 0%, #211b2c 100%);
  border: 1px solid rgba(255,200,160,.24);
  gap: 8px;
}
.tmd__lead { margin: 0; align-self: flex-start; font-size: 18px; line-height: 1.3; color: rgba(255,255,255,.82); flex: 0 0 auto; }
.tmd__faces { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.tmd__face { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 4px 0; }
.tmd__face svg { width: clamp(46px, 8vmin, 60px); height: clamp(46px, 8vmin, 60px); filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); transition: transform .16s ease, filter .16s ease; }
.tmd__face:hover svg { transform: translateY(-3px) scale(1.07); }
.tmd__face.is-picked svg { transform: scale(1.16); filter: drop-shadow(0 0 12px var(--mc)) drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.tmd__lbl { font-size: 18px; color: rgba(255,255,255,.78); }
.tmd__face.is-picked .tmd__lbl { color: #fff; font-weight: 700; }
.tmd__week { position: absolute; top: 16px; right: 16px; display: flex; gap: 7px; flex: 0 0 auto; }
.tmd__week span { width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.16); transition: background .2s, box-shadow .2s; }
.tmd__week .is-today { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.itg-pop { animation: itgPop .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes itgPop { 0% { transform: scale(1) } 45% { transform: scale(1.16) } 100% { transform: scale(1) } }
.tmd__note { font-size: 18px; color: rgba(255,255,255,.8); flex: 0 0 auto; }
.tmd__note b { color: #ffd166; }

/* ---------------------------------------------------------------------------
 * MOVIMENTO (anéis de atividade vermelho/verde/azul)
 * ------------------------------------------------------------------------- */
.itg-tile--move {
  background:
    radial-gradient(120% 100% at 100% 100%, rgba(61,220,132,.20), transparent 60%),
    linear-gradient(160deg, #16202b 0%, #111821 100%);
  border: 1px solid rgba(120,200,160,.26);
  align-items: center; gap: 8px;
}
.itg-tile--move .tile__tag { align-self: flex-start; }
.tmo__lead { margin: 0; align-self: flex-start; font-size: 18px; line-height: 1.35; color: rgba(255,255,255,.8); flex: 0 0 auto; }
.tmo__fig { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: grid; place-items: center; }
/* anéis e boneco ocupam a MESMA célula — trocam um pelo outro conforme o estado */
.tmo__rings, .tmo__person { grid-column: 1; grid-row: 1; }

/* ===== parado: anéis estilo Apple (rosa / verde / azul) ===== */
.tmo__rings { aspect-ratio: 1; max-height: 100%; display: grid; place-items: center; }
.tmo__rings svg { width: 100%; height: 100%; max-width: 110px; transform: rotate(-90deg); }
.tmo__t { fill: none; stroke-width: 7; opacity: .2; }
.tmo__p { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.3,1,.4,1); }
.tmo__t1, .tmo__p1 { stroke: #ff3b6b; } .tmo__p1 { stroke-dasharray: 263.9; stroke-dashoffset: 263.9; animation: itgMo1 3.4s ease-out infinite alternate; filter: drop-shadow(0 0 4px rgba(255,59,107,.6)); }
.tmo__t2, .tmo__p2 { stroke: #3ddc84; } .tmo__p2 { stroke-dasharray: 194.8; stroke-dashoffset: 194.8; animation: itgMo2 3.4s ease-out infinite alternate; filter: drop-shadow(0 0 4px rgba(61,220,132,.6)); }
.tmo__t3, .tmo__p3 { stroke: #2ec5ff; } .tmo__p3 { stroke-dasharray: 125.7; stroke-dashoffset: 125.7; animation: itgMo3 3.4s ease-out infinite alternate; filter: drop-shadow(0 0 4px rgba(46,197,255,.6)); }
@keyframes itgMo1 { to { stroke-dashoffset: 60 } }
@keyframes itgMo2 { to { stroke-dashoffset: 30 } }
@keyframes itgMo3 { to { stroke-dashoffset: 18 } }

/* ===== clicado: boneco fazendo o alongamento (anéis somem) ===== */
.tmo__person { display: none; height: 100%; max-height: 92px; width: auto; color: #9affc8; filter: drop-shadow(0 0 8px rgba(61,220,132,.45)); }
/* pescoço: a cabeça pende pra cada lado pivotando na nuca */
.tmo__neck { transform-box: fill-box; transform-origin: 50% 100%; animation: itgNeck 2.2s ease-in-out infinite; }
@keyframes itgNeck { 0%,100% { transform: rotate(0deg) } 22% { transform: rotate(-17deg) } 50% { transform: rotate(0deg) } 78% { transform: rotate(17deg) } }
/* ombros: leve elevação acompanhando o alongamento */
.tmo__arms { transform-box: fill-box; transform-origin: 50% 50%; animation: itgShoulder 2.2s ease-in-out infinite; }
@keyframes itgShoulder { 0%,100% { transform: translateY(0) } 36% { transform: translateY(-2.5px) } 50% { transform: translateY(0) } 86% { transform: translateY(-2.5px) } }
/* a troca: parado mostra anéis; alongando mostra o boneco (com um pop de entrada) */
.itg-tile--move.is-stretching .tmo__rings { display: none; }
.itg-tile--move.is-stretching .tmo__person { display: block; animation: itgPersonIn .34s cubic-bezier(.34,1.56,.64,1); }
@keyframes itgPersonIn { 0% { opacity: 0; transform: scale(.55) } 100% { opacity: 1; transform: scale(1) } }
.tmo__sub { font-size: 18px; color: rgba(255,255,255,.82); flex: 0 0 auto; text-align: center; white-space: pre-line; line-height: 1.32; }

/* ============================================================================
 * Telas estreitas — o bento empilha numa coluna (cada bloco vira faixa).
 * ============================================================================ */
@media (max-width: 860px) {
  .itg-mural {
    width: 100%; height: auto; transform: none !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "music music"
      "flash flash"
      "pomo medita"
      "mood mood"
      "move move";
  }
  .itg-tile { min-height: 150px; }
  .itg-tile--music { min-height: 320px; }
  .itg-tile--medita { min-height: 220px; }
  /* Em tela estreita o painel da sessão não cabe ao lado: vira faixa embaixo. */
  .tpo__panel { position: static; left: auto; top: auto; width: auto; max-width: none; margin-top: 10px; transform: none; display: none; }
  .itg-tile--pomo.is-open { overflow: hidden; }
  .itg-tile--pomo.is-open .tpo__panel { display: flex; }
}