/* home-contexts.css — estudos HM002–HM004 e ecrãs de contexto (CX).
   Só entra em ação com as classes criadas por js/components/home-contexts.js;
   o HM001 (Home e rail originais) não usa nenhuma regra deste ficheiro. */

/* ---------- Home: menu central ---------- */
.menu-vpill--context { box-shadow: inset 0 0 0 3px rgba(255,255,255,.22); }

/* ---------- rail com etiquetas (HM003, HM004) ---------- */
.rail--labelled .rail__items { gap: 8px; }
.rail__item--labelled { width: 108px; height: auto; min-height: 84px; border-radius: 18px; padding: 10px 4px 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.rail__item--labelled .tomi-icon { font-size: calc(40px * var(--ds-rail-scale)); }
.rail__lbl { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 14px; line-height: 1.05;
  text-transform: uppercase; letter-spacing: .04em; text-align: center; max-width: 100px; overflow-wrap: anywhere; }
.rail__item--labelled.rail__item--accent { border-radius: 18px; }
/* módulo de contexto no rail (HM002): cor própria do contexto */
.rail__item--context { background: var(--ctx); color: var(--ctx-ink); opacity: 1; box-shadow: inset 0 0 0 3px rgba(255,255,255,.2); }
.rail__sep { width: 56px; height: 2px; border-radius: 2px; background: var(--ds-rail-ink); opacity: .2; margin: 6px 0; flex: 0 0 auto; }

/* ---------- hub de contexto e sub-secções ---------- */
.ctx-page { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 28px 28px 40px; display: flex; flex-direction: column; gap: 20px;
  background: #f3f2ef; color: var(--ds-ink); }
.ctx-hero { display: flex; align-items: center; gap: 24px; padding: 30px 32px; border-radius: 26px; background: var(--ctx); color: var(--ctx-ink); flex: 0 0 auto; }
.ctx-hero__mark { flex: 0 0 auto; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ctx-ink) 16%, transparent); color: var(--ctx-ink); }
.ctx-hero__mark .tomi-icon { font-size: 58px; }
.ctx-hero small { display: block; font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.ctx-hero h1 { margin: 6px 0 8px; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 56px; line-height: .95; text-transform: uppercase; }
.ctx-hero p { margin: 0; font-size: 21px; line-height: 1.35; opacity: .84; }
.ctx-hero--compact { padding: 24px 28px; }
.ctx-hero--compact h1 { font-size: 46px; }

.ctx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 232px; gap: 16px; }
/* cada botão recebe um tom (inline) e a tinta certa: ícone + label brancos em
   fundos escuros, pretos em fundos claros — nunca na cor do contexto */
.ctx-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 26px; border-radius: 24px; text-align: left; }
.ctx-tile--wide { grid-column: span 2; }
.ctx-tile__icon { position: absolute; left: 26px; top: 24px; line-height: 0; color: currentColor; }
.ctx-tile__icon .tomi-icon { font-size: 60px; }
.ctx-tile__arrow { position: absolute; right: 24px; top: 26px; line-height: 0; }
.ctx-tile__arrow .tomi-icon { font-size: 26px; }
.ctx-tile__txt b { display: block; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 38px; line-height: 1; text-transform: uppercase; }
.ctx-tile__txt small { display: block; margin-top: 6px; font-size: 19px; }

.ctx-list { display: flex; flex-direction: column; gap: 12px; }
.ctx-row { display: flex; align-items: center; gap: 20px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid #e6e3dd; }
.ctx-row__icon { flex: 0 0 auto; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; }
.ctx-row__icon .tomi-icon { font-size: 36px; }
.ctx-row b { display: block; font-size: 26px; line-height: 1.2; }
.ctx-row small { display: block; margin-top: 4px; font-size: 19px; color: #6b6f74; }
.ctx-demo { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 16px; color: #6b6f74; }
.ctx-demo .tomi-icon { color: #111; }
.ctx-demo .tomi-icon { font-size: 22px; }

/* ---------- moldura fixa: pílula desligada ocupa o mesmo espaço ---------- */
.menu-vpill--ghost { visibility: hidden; pointer-events: none; }

/* ================= CN · navegação entre sub-secções do contexto ================= */
/* CN002 · separadores no topo da coluna de conteúdo */
.ctx-tabs { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--ctx); color: var(--ctx-ink); z-index: 3; }
.ctx-tabs__mark { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ctx-ink) 16%, transparent); }
.ctx-tabs__mark .tomi-icon { font-size: 32px; }
.ctx-tabs__track { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.ctx-tabs__track::-webkit-scrollbar { display: none; }
.ctx-tabs__tab { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-radius: 999px; background: color-mix(in srgb, var(--ctx-ink) 14%, transparent); color: var(--ctx-ink);
  font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 21px; text-transform: uppercase; white-space: nowrap; }
.ctx-tabs__tab .tomi-icon { font-size: 26px; }
.ctx-tabs__tab.is-on { background: var(--ctx-ink); color: var(--ctx-inv); }

/* CN004 · dock flutuante no fundo */
.ctx-dock { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: 26px; background: rgba(18,18,18,.9); backdrop-filter: blur(10px); color: #fff; box-shadow: 0 24px 50px -20px rgba(0,0,0,.6), inset 0 0 0 2px var(--ctx); }
.ctx-dock__step { flex: 0 0 210px; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.1); color: #fff; text-align: left; }
.ctx-dock__step--next { justify-content: flex-end; text-align: right; background: var(--ctx); color: var(--ctx-ink); }
.ctx-dock__step .tomi-icon { font-size: 26px; flex: 0 0 auto; }
.ctx-dock__step span { min-width: 0; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 20px; text-transform: uppercase; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-dock__step small { display: block; font-family: var(--ds-font-body, sans-serif); font-size: 11px; letter-spacing: .14em; opacity: .7; }
.ctx-dock__dots { flex: 1; display: flex; justify-content: center; gap: 8px; }
.ctx-dock__dot { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; }
.ctx-dock__dot .tomi-icon { font-size: 26px; }
.ctx-dock__dot.is-on { background: #fff; color: #111; }
/* o conteúdo não fica escondido por baixo do dock */
.module-content:has(.ctx-dock) .ctx-page { padding-bottom: 130px; }

/* CN003 · rail de contexto */
.rail--context { box-shadow: inset -6px 0 0 var(--ds-accent); }
.rail--context .rail__item.is-active { background: rgba(255,255,255,.14); }
.rail__home--exit span { color: var(--ds-accent); }

/* ================= HM004 · lançador de contexto ================= */
/* botão de acesso ao mosaico, maior */
.search-launcher--mega { gap: 18px; padding: 16px 32px 16px 16px; min-width: 660px; z-index: 6;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.55), inset 0 0 0 3px color-mix(in srgb, var(--ds-search-ink) 18%, transparent);
  transition: transform 420ms cubic-bezier(.2,.88,.22,1); }
.search-launcher--mega .search-launcher__context-icon { width: 84px; height: 84px; }
.search-launcher--mega .search-launcher__context-icon .tomi-icon { font-size: 44px; }
.ctx-mega__txt { display: flex; flex-direction: column; align-items: flex-start; font-size: 38px; line-height: 1; letter-spacing: .02em; }
.ctx-mega__txt small { font-family: var(--ds-font-body, sans-serif); font-size: 14px; font-weight: 800; letter-spacing: .16em; opacity: .85; margin-bottom: 5px; }
.ctx-mega__chev { margin-left: auto; line-height: 0; transition: transform .2s ease; }
.ctx-mega__chev .tomi-icon { font-size: 30px; }
/* a pílula cresce um pouco e fica — o bloco nasce por baixo */
.search-launcher--grow.is-open { transform: translate(-50%, 50%) scale(1.06); }
.search-launcher--mega.is-hidden { visibility: hidden; }
.search-launcher--mega.is-open .ctx-mega__chev { transform: rotate(45deg); }

/* camadas sobre o scroll de notícias/eventos/POIs (.home-cards): escurecem-no */
/* a camada que escurece o scroll tem a cor do contexto (um pouco mais escura,
   para manter a profundidade); sem contexto (City) fica o preto TOMI */
.ctx-pop, .ctx-ask { position: absolute; inset: 0; z-index: 30; display: none;
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);   /* desfoca o scroll por trás */
  background: color-mix(in srgb, color-mix(in srgb, var(--ctx, #111) 78%, #000) 64%, transparent); }
.ctx-pop.is-open, .ctx-ask.is-open { display: flex; animation: ctx-fade .2s ease-out; }
@keyframes ctx-fade { from { opacity: 0; } to { opacity: 1; } }

/* popup do contexto (HM004) — centrado sobre os cartões */
.ctx-pop { align-items: flex-start; justify-content: center; padding: 8px 34px 30px; }
.ctx-pop--grow { padding-top: 84px; }
.ctx-pop__panel { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 30px; background: #fff; color: #111;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.7); overflow: hidden; will-change: transform; }
.ctx-pop__lead { margin: 0; text-align: center; font-size: 18px; color: #3a3f44; }
/* aberto, o botão fica no lugar e serve de cabeçalho do painel */
@keyframes ctx-pop-in { from { opacity: 0; transform: scale(.94) translateY(16px); } to { opacity: 1; transform: none; } }
.ctx-pop__head { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 22px; background: var(--ctx); color: var(--ctx-ink); }
.ctx-pop__mark { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ctx-ink) 16%, transparent); }
.ctx-pop__mark .tomi-icon { font-size: 40px; }
.ctx-pop__head div { flex: 1; min-width: 0; }
.ctx-pop__head small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.ctx-pop__head b { display: block; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 38px; line-height: 1; text-transform: uppercase; }
.ctx-pop__head p { margin: 4px 0 0; font-size: 17px; }
.ctx-pop__close { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ctx-ink); color: var(--ctx-inv); }
.ctx-pop__close .tomi-icon { font-size: 26px; }
.ctx-pop__ask, .ctx-ask__type { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; background: #111; color: #fff; text-align: left;
  font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 24px; text-transform: uppercase; }
.ctx-pop__ask .tomi-icon, .ctx-ask__type .tomi-icon { font-size: 30px; }
.ctx-pop__ask .tomi-icon:last-child, .ctx-ask__type .tomi-icon:last-child { margin-left: auto; font-size: 22px; }
.ctx-pop__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ctx-pop__tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 160px; padding: 18px; border-radius: 20px; text-align: left; }
.ctx-pop__tile .tomi-icon { font-size: 42px; margin-bottom: auto; }
.ctx-pop__tile b { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 22px; line-height: 1.05; text-transform: uppercase; }
.ctx-pop__tile small { font-size: 14px; line-height: 1.25; }
.ctx-pop__all, .ctx-ask__go { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 16px; background: var(--ctx); color: var(--ctx-ink); font-weight: 800; font-size: 18px; }

/* pesquisa sensível ao contexto (HM002) — abre por baixo do lançador */
/* HM002: o painel abre ao centro da área de scroll (notícias/eventos/POIs) */
.ctx-ask { align-items: center; justify-content: center; padding: 70px 30px 30px; }
/* SS002: a forma partilhada cresce a partir do botão e a cada passo */
.ctx-ask { --ask-ease: cubic-bezier(.2,.88,.22,1); }
.ctx-ask__panel { width: 640px; max-width: 100%; border-radius: 30px; background: #fff; color: #111; overflow: hidden;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.7); transform-origin: var(--ask-ox, 50%) var(--ask-oy, 0%);
  transition: width 560ms var(--ask-ease), border-radius 440ms var(--ask-ease); will-change: width, transform; }
.ctx-ask[data-step="results"] .ctx-ask__panel { width: min(840px, 100%); border-radius: 36px; }
/* HM002 — 1.º estado compacto, 2.º estado claramente maior (largura e altura) */
.ctx-ask[data-step="choose"] .ctx-ask__view { gap: 12px; padding: 20px; }
.ctx-ask[data-step="choose"] .ctx-ask__mark { width: 58px; height: 58px; }
.ctx-ask[data-step="choose"] .ctx-ask__mark .tomi-icon { font-size: 28px; }
.ctx-ask[data-step="choose"] .ctx-ask__head b { font-size: 34px; }
.ctx-ask[data-step="choose"] .ctx-ask__close { width: 44px; height: 44px; }
.ctx-ask[data-step="choose"] .ctx-ask__lead { font-size: 16px; }
.ctx-ask[data-step="choose"] .ctx-ask__intent { min-height: 144px; padding: 18px; border-radius: 20px; }
.ctx-ask[data-step="choose"] .ctx-ask__intent .tomi-icon { font-size: 40px; }
.ctx-ask[data-step="choose"] .ctx-ask__intent b { font-size: 26px; }
.ctx-ask[data-step="choose"] .ctx-ask__intent small { font-size: 15px; }
.ctx-ask[data-step="choose"] .ctx-ask__type { padding: 14px 16px; font-size: 20px; }
.ctx-ask[data-step="results"] .ctx-ask__view { min-height: 640px; gap: 14px; padding: 24px; }
.ctx-ask[data-step="results"] .ctx-ask__head b { font-size: 40px; }
.ctx-ask[data-step="results"] .ctx-ask__best { padding: 26px 26px; min-height: 180px; }
.ctx-ask[data-step="results"] .ctx-ask__best-ic { width: 88px; height: 88px; }
.ctx-ask[data-step="results"] .ctx-ask__best-ic .tomi-icon { font-size: 46px; }
.ctx-ask[data-step="results"] .ctx-ask__best b { font-size: 40px; }
.ctx-ask[data-step="results"] .ctx-ask__best p { font-size: 19px; }
.ctx-ask[data-step="results"] .ctx-ask__list .ctx-row { padding: 18px 22px; }
.ctx-ask[data-step="results"] .ctx-ask__list .ctx-row__icon { width: 60px; height: 60px; }
.ctx-ask[data-step="results"] .ctx-ask__list .ctx-row b { font-size: 23px; }
.ctx-ask[data-step="results"] .ctx-ask__go { margin-top: auto; padding: 18px; font-size: 19px; }
.ctx-ask__view { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.ctx-ask__view.is-in { animation: ctx-ask-view-in 360ms var(--ask-ease) both; }
.ctx-ask.is-opening .ctx-ask__panel { animation: ctx-ask-open 520ms var(--ask-ease) both; }
.ctx-ask.is-opening .ctx-ask__view { animation: ctx-ask-view-in 420ms var(--ask-ease) 160ms both; }
.ctx-ask.is-closing { animation: ctx-ask-scrim-out 340ms ease-in both; }
.ctx-ask.is-closing .ctx-ask__panel { animation: ctx-ask-close 340ms cubic-bezier(.6,0,.8,.2) both; }
@keyframes ctx-ask-open { from { opacity: 0; transform: scale(.08); border-radius: 999px; } to { opacity: 1; transform: scale(1); } }
@keyframes ctx-ask-close { to { opacity: 0; transform: scale(.08); border-radius: 999px; } }
@keyframes ctx-ask-view-in { from { opacity: 0; transform: translateY(7px) scale(.99); } }
@keyframes ctx-ask-scrim-out { to { opacity: 0; } }
.ctx-ask__head { display: flex; align-items: center; gap: 14px; }
.ctx-ask__mark { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ctx); color: var(--ctx-ink); }
.ctx-ask__mark .tomi-icon { font-size: 34px; }
.ctx-ask__head div { flex: 1; }
.ctx-ask__head small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #555; }
.ctx-ask__head b { display: block; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 38px; line-height: 1; text-transform: uppercase; }
.ctx-ask__close { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #111; color: #fff; }
.ctx-ask__lead { margin: 0; font-size: 18px; color: #555; }
.ctx-ask__intents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ctx-ask__intent { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 160px; padding: 20px; border-radius: 22px; text-align: left; }
.ctx-ask__intent .tomi-icon { font-size: 46px; margin-bottom: auto; }
.ctx-ask__intent b { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 30px; line-height: 1; text-transform: uppercase; }
.ctx-ask__intent small { font-size: 16px; }
.ctx-ask__back { align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #f0eeea; font-weight: 700; font-size: 16px; }
.ctx-ask__best { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: 22px; }
.ctx-ask__best-ic { flex: 0 0 auto; width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, currentColor 16%, transparent); }
.ctx-ask__best-ic .tomi-icon { font-size: 42px; }
.ctx-ask__best small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.ctx-ask__best b { display: block; margin-top: 4px; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 36px; line-height: 1; text-transform: uppercase; }
.ctx-ask__best p { margin: 6px 0 0; font-size: 18px; }
.ctx-ask__list { display: flex; flex-direction: column; gap: 8px; }
.ctx-ask__list .ctx-row { padding: 14px 18px; }
.ctx-ask__list .ctx-row__icon { width: 56px; height: 56px; }
.ctx-ask__list .ctx-row b { font-size: 22px; }
.ctx-ask__list .ctx-row small { font-size: 17px; }

/* o lançador fica acima da camada escura que cobre os cartões */
.search-launcher--ctxask, .search-launcher--mega { z-index: 50; }


/* ================= HM004 · lançador conversacional ================= */
/* 1.º nível pequeno → 2.º nível maior (largura em CSS, altura por FLIP no JS) */
/* HM004: a largura é a da pílula crescida (--pill-w) nos dois níveis; o 2.º nível cresce em altura */
.ctx-pop__panel.ctx-conv { width: min(var(--pill-w, 700px), 100%); padding: 0;
  transition: width 560ms cubic-bezier(.2,.88,.22,1), border-radius 440ms cubic-bezier(.2,.88,.22,1); }
/* HM004 — 2.º estado claramente maior: mais largo do que a pílula e mais alto */
.ctx-pop[data-step="precise"] .ctx-pop__panel.ctx-conv { width: min(860px, 100%); border-radius: 36px; }
.ctx-pop[data-step="precise"] .ctx-conv__view { min-height: 620px; gap: 16px; padding: 26px; }
.ctx-pop[data-step="precise"] .ctx-conv__avatar { width: 78px; height: 78px; }
.ctx-pop[data-step="precise"] .ctx-conv__bubble b { font-size: 40px; }
.ctx-pop[data-step="precise"] .ctx-conv__pick { padding: 20px 22px; }
.ctx-pop[data-step="precise"] .ctx-conv__pick b { font-size: 24px; }
.ctx-pop[data-step="precise"] .ctx-conv__pick--best { padding: 26px; min-height: 170px; }
.ctx-pop[data-step="precise"] .ctx-conv__pick--best .ctx-conv__pick-ic { width: 90px; height: 90px; }
.ctx-pop[data-step="precise"] .ctx-conv__pick--best .ctx-conv__pick-ic .tomi-icon { font-size: 46px; }
.ctx-pop[data-step="precise"] .ctx-conv__pick--best b { font-size: 40px; }
.ctx-pop[data-step="precise"] .ctx-conv__foot { margin-top: auto; }
.ctx-conv__view { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.ctx-conv__bubble { display: flex; gap: 16px; align-items: flex-start; }
.ctx-conv__avatar { flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--ctx); color: var(--ctx-ink); }
.ctx-conv__avatar .tomi-icon { font-size: 36px; }
.ctx-conv__bubble > div { flex: 1; padding: 16px 20px; border-radius: 6px 24px 24px 24px; background: #f3f2ef; }
.ctx-conv__bubble b { display: block; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 34px; line-height: 1; text-transform: uppercase; }
.ctx-conv__bubble p { margin: 6px 0 0; font-size: 21px; line-height: 1.35; color: #111; }
.ctx-conv__opts { display: flex; flex-direction: column; gap: 10px; }
.ctx-conv__opt { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 16px 20px; border-radius: 22px; text-align: left; background: #f3f2ef; color: #111; }
.ctx-conv__opt > .tomi-icon:last-child { margin-left: auto; font-size: 24px; }
.ctx-conv__opt b { display: block; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 30px; line-height: 1; text-transform: uppercase; }
.ctx-conv__opt small { display: block; margin-top: 4px; font-size: 17px; }
.ctx-conv__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ctx-conv__type, .ctx-conv__all { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 16px; font-weight: 800; font-size: 18px; }
.ctx-conv__type { background: #111; color: #fff; }
.ctx-conv__type .tomi-icon { font-size: 24px; }
.ctx-conv__all { background: var(--ctx); color: var(--ctx-ink); }
.ctx-conv__back { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 16px; background: #f0eeea; color: #111; font-weight: 800; font-size: 18px; }
.ctx-conv__back .tomi-icon { font-size: 22px; }
.ctx-conv__picks { display: flex; flex-direction: column; gap: 10px; }
.ctx-conv__pick { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 20px; background: #f3f2ef; color: #111; text-align: left; }
.ctx-conv__pick > .tomi-icon:last-child { margin-left: auto; font-size: 24px; }
.ctx-conv__pick-ic { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #111; color: #fff; }
.ctx-conv__pick-ic .tomi-icon { font-size: 30px; }
.ctx-conv__pick b { display: block; font-size: 22px; line-height: 1.2; }
.ctx-conv__pick em { display: block; margin-top: 2px; font-style: normal; font-size: 17px; }
.ctx-conv__pick--best { padding: 22px; }
.ctx-conv__pick--best .ctx-conv__pick-ic { width: 76px; height: 76px; background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; }
.ctx-conv__pick--best small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.ctx-conv__pick--best b { margin-top: 4px; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 34px; line-height: 1; text-transform: uppercase; }

/* ================= HM005 · mosaico sobre a zona de scroll (sem painel branco) ================= */
.ctx-pop--bare { align-items: stretch; justify-content: stretch; padding: 86px 34px 30px;
  background: color-mix(in srgb, color-mix(in srgb, var(--ctx, #111) 78%, #000) 84%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1); }
.ctx-pop__panel.ctx-bare { width: 100%; background: transparent; box-shadow: none; border-radius: 0; padding: 0; gap: 16px; color: var(--scrim-ink); }
.ctx-bare__ask { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-radius: 999px; background: var(--scrim-ink); color: var(--scrim-inv); text-align: left;
  font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 26px; text-transform: uppercase; }
.ctx-bare__ask .tomi-icon { font-size: 30px; }
.ctx-bare__ask .tomi-icon:last-child { margin-left: auto; font-size: 24px; }
.ctx-bare__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 14px; }
.ctx-bare__tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: 22px; border-radius: 26px; text-align: left; color: var(--scrim-ink);
  background: color-mix(in srgb, var(--scrim-ink) 10%, transparent); border: 2px solid color-mix(in srgb, var(--scrim-ink) 34%, transparent); }
.ctx-bare__tile .tomi-icon { font-size: 60px; margin-bottom: auto; }
.ctx-bare__tile b { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 30px; line-height: 1.02; text-transform: uppercase; }
.ctx-bare__tile small { font-size: 18px; line-height: 1.3; }
.ctx-bare__all { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; border-radius: 999px; color: var(--scrim-ink);
  border: 2px solid color-mix(in srgb, var(--scrim-ink) 50%, transparent); font-weight: 800; font-size: 19px; }

/* HM005 · banda achatada numa tira enquanto o contexto está aberto:
   fica só a ajuda (círculo) e uma pega larga ao centro (tipo "deslizar" dos
   telemóveis) que fecha o contexto; a pílula desce para baixo da tira. */
.home-root .central-menu { position: relative; transition: min-height 460ms cubic-bezier(.2,.88,.22,1); }
.central-menu .menu-modules, .central-menu > .menu-vpill, .central-menu .menu-mini { transition: opacity 240ms ease, transform 420ms cubic-bezier(.2,.88,.22,1); }
.central-menu.is-ctx-collapsed { min-height: 56px; }
.central-menu.is-ctx-collapsed .menu-modules,
.central-menu.is-ctx-collapsed > .menu-vpill,
.central-menu.is-ctx-collapsed .menu-mini--dark,
.central-menu.is-ctx-collapsed .menu-mini--trans { opacity: 0; pointer-events: none; transform: scale(.85); position: absolute; visibility: hidden; }
/* a ajuda também fica na fronteira tira/contexto, à esquerda, na linha da pega */
.central-menu.is-ctx-collapsed .menu-circles { position: absolute; left: 30px; top: 100%; translate: 0 -50%; height: auto; z-index: 55; }
.central-menu.is-ctx-collapsed .menu-mini--light { width: 64px; height: 64px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); }
/* a pega fica na FRONTEIRA entre a tira amarela e a zona do contexto, como o CTA do contexto */
.ctx-band-back { display: none; position: absolute; left: 50%; top: 100%; translate: -50% -50%; min-width: 260px; padding: 0 16px 0 26px; height: 66px; border-radius: 999px;
  place-items: center; background: #111; color: #fff; z-index: 55; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.18); }
.ctx-band-back { grid-auto-flow: column; gap: 12px; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 24px; letter-spacing: .06em; text-transform: uppercase; }
.ctx-band-back__chev { width: 26px; height: 26px; color: #fff; }
.ctx-band-back__icons { display: flex; gap: 10px; margin-left: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.12); font-style: normal; }
.ctx-band-back__icons .tomi-icon { font-size: 28px; color: #fff; }
.central-menu.is-ctx-collapsed .ctx-band-back { display: grid; animation: ctx-fade .3s ease both; }
/* HM005: movimento inverso de “Descobrir a cidade” — a pílula do contexto DESDOBRA-SE
   no cabeçalho da zona aberta (largura do mosaico, cantos menos redondos); ao fechar,
   volta a encolher para pílula. Largura explícita para a transição funcionar. */
.home-root .search-launcher--grow { width: 660px; min-width: 0;
  transition: transform 480ms cubic-bezier(.2,.88,.22,1), width 480ms cubic-bezier(.2,.88,.22,1), border-radius 480ms cubic-bezier(.2,.88,.22,1); }
/* aberta é sempre MAIOR do que fechada (660 px): mínimo 780 px, ajusta-se ao texto até à largura da zona */
.central-menu.is-ctx-collapsed ~ .search-launcher--grow.is-open { width: fit-content; min-width: 780px; max-width: calc(100% - 68px); border-radius: 999px; padding-top: 22px; padding-bottom: 22px;
  transform: translate(-50%, 142%); box-shadow: 0 16px 34px -18px rgba(0,0,0,.55); }
.ctx-pop--bare { padding-top: 212px; }  /* mais ar entre o cabeçalho do contexto e a saudação */

/* HM005 — frase do TOMI (conversacional) sobre o fundo desfocado */
.ctx-bare__say { display: flex; align-items: center; gap: 18px; color: var(--scrim-ink); }
.ctx-bare__avatar { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--scrim-ink); color: var(--scrim-inv); }
.ctx-bare__avatar .tomi-icon { font-size: 38px; }
.ctx-bare__say b { display: block; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 40px; line-height: 1; text-transform: uppercase; }
.ctx-bare__say p { margin: 6px 0 0; font-size: 22px; line-height: 1.3; }

/* HM005 · regresso ao menu: fade curto dos ícones (sem morph) */
.home-root { position: relative; }
.central-menu.is-ctx-return .menu-modules,
.central-menu.is-ctx-return > .menu-vpill,
.central-menu.is-ctx-return .menu-mini { animation: ctx-fade 360ms ease both; }

/* HM005 aberto: mantém-se a label pequena (“Aqui · …”) e o nome do contexto (sem saudação) */
.ctx-mega__txt small { transition: opacity 240ms ease, max-height 360ms cubic-bezier(.2,.88,.22,1), margin 360ms ease; max-height: 20px; overflow: hidden; }

/* HM005: saudação centrada, alinhada com a pílula */
.ctx-bare__say { justify-content: center; text-align: center; }

/* HM005: a frase do momento fica por baixo, um pouco maior */
.ctx-bare__say p { margin: 0; font-size: 28px; line-height: 1.35; max-width: 860px; }
.central-menu.is-ctx-collapsed ~ .search-launcher--grow.is-open .ctx-mega__txt { min-width: 0; }
.central-menu.is-ctx-collapsed ~ .search-launcher--grow.is-open .ctx-mega__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* HM005 aberto: a pílula tem a mesma cor do fundo — sombra curta e discreta, sem contorno */
.central-menu.is-ctx-collapsed ~ .search-launcher--grow.is-open {
  box-shadow: 0 12px 24px -12px rgba(0,0,0,.55); }

/* ================= HM005 · lançador na fronteira ================= */
/* a banda encolhe para uma tira com “Explorar a cidade” + seta larga; a pílula NÃO desce:
   fica na fronteira tira/contexto e cresce no lugar (com a saudação dentro) */
.central-menu.is-ctx-seam.is-ctx-collapsed { min-height: 150px; }
/* a ajuda fica na fronteira tira/contexto, como a pílula */
.central-menu.is-ctx-seam.is-ctx-collapsed .menu-circles { left: 30px; top: 100%; translate: 0 -50%; }
.central-menu.is-ctx-seam.is-ctx-collapsed ~ .search-launcher--grow.is-open { transform: translate(-50%, 50%); }
/* “Explorar a cidade”: frase · seta · 4 ícones — grelha 1fr auto 1fr para a seta ficar
   exatamente ao centro do ecrã; a seta pulsa de cima para baixo */
.ctx-band-back--seam { top: 20px; left: 0; right: 0; translate: 0 0; width: auto; height: auto; min-width: 0; padding: 8px 30px;
  grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; background: transparent; color: var(--ds-menu-ink, #111);
  box-shadow: none; font-size: 28px; border-radius: 0; }
.ctx-explore__txt { justify-self: end; }
.ctx-band-back__cta { width: 30px; height: 30px; display: block; animation: ctx-nudge 1.4s ease-in-out infinite; }
@keyframes ctx-nudge { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .ctx-band-back__cta { animation: none; } }
.ctx-explore__icons { justify-self: start; display: flex; gap: 12px; font-style: normal; }
.ctx-explore__icons .tomi-icon { font-size: 28px; }
.central-menu.is-ctx-collapsed .ctx-band-back--seam { display: grid; }
.ctx-pop--seam { padding: 84px 56px 26px; background: color-mix(in srgb, color-mix(in srgb, var(--ctx, #111) 78%, #000) 74%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05); }
.ctx-pop--seam .ctx-bare__grid { flex: 0 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 172px; gap: 14px; }
/* mosaico em vidro sobre a camada escura na cor do contexto: ícones e labels a branco
   (a tinta vem do contraste APCA da própria camada, via --scrim-ink) */
.ctx-pop--seam .ctx-bare__hubtile { background: color-mix(in srgb, var(--scrim-ink) 13%, transparent); color: var(--scrim-ink);
  border: 2px solid color-mix(in srgb, var(--scrim-ink) 30%, transparent); }
.ctx-bare__hubtile { justify-content: flex-end; padding: 20px 22px; }
.ctx-bare__hubtile .ctx-tile__icon { left: 22px; top: 20px; }
.ctx-bare__hubtile .ctx-tile__icon .tomi-icon { font-size: 50px; }
.ctx-bare__hubtile .ctx-tile__txt b { font-size: 30px; }
.ctx-bare__hubtile .ctx-tile__txt small { font-size: 17px; }

/* ================= HM006 · lançador em faixa ================= */
/* a banda amarela fica intacta; a faixa (cor sólida do contexto) empurra a zona de scroll
   e fica visível só uma fila de cartões */
.home-cards [data-cardscroll], .home-cards .qr-float { transition: translate 520ms cubic-bezier(.2,.88,.22,1); }
/* o cartão QR do controlo remoto desce junto com o scroll */
.home-cards.is-ctx-pushed [data-cardscroll], .home-cards.is-ctx-pushed .qr-float { translate: 0 var(--ctx-push, 50%); }
.ctx-pop--push { bottom: auto; height: var(--ctx-push, 50%); padding: 74px 30px 16px; background: var(--ctx);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.ctx-pop--push .ctx-pop__panel.ctx-bare { gap: 12px; height: 100%; }
.ctx-seam__say { text-align: center; color: var(--scrim-ink); font-size: 21px; line-height: 1.3; }
.ctx-seam__say b { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 26px; text-transform: uppercase; margin-right: 6px; }
.ctx-seam__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 12px; }
.ctx-seam__tile { padding: 14px 16px; border-radius: 20px; gap: 2px; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; align-content: center; }
.ctx-seam__tile .tomi-icon { font-size: 42px; margin: 0 14px 0 0; }
.ctx-seam__tile b { font-size: 25px; flex: 1; min-width: 0; }
.ctx-seam__tile small { flex-basis: 100%; font-size: 16px; }
.ctx-seam__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.ctx-seam__row .ctx-bare__ask { padding: 14px 20px; font-size: 20px; }
.ctx-seam__row .ctx-bare__all { padding: 14px 22px; font-size: 17px; }

/* HM006 · mosaico ao estilo do menu TOMI (ícone grande + label + sub), escala ~75 % */
.ctx-seam__menu { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: space-evenly; }
.ctx-seam__module { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px;
  color: var(--scrim-ink); text-align: center; background: transparent; }
.ctx-seam__module-ic { line-height: 0; }
.ctx-seam__module-ic { height: 96px; display: grid; place-items: center; }
.ctx-seam__module-ic .tomi-icon { font-size: calc(96px * var(--ic-k, 1)); }
/* HM003: os ícones de contexto ao centro têm o MESMO peso ótico dos do HM006 (base 96 px ×
   fator ótico); a caixa mantém a altura do menu TOMI para as labels não saltarem */
.central-menu:not(.is-ctx-compact) .menu-modules--context .menu-module__icon { height: calc(128px * var(--ds-menu-scale, 1)); display: grid; place-items: center; }
.central-menu:not(.is-ctx-compact) .menu-modules--context .menu-module__icon .tomi-icon { font-size: calc(96px * var(--ic-k, 1)); }
.ctx-seam__module b { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 22px; line-height: 1.05; text-transform: uppercase; }
.ctx-seam__module small { font-size: 13px; line-height: 1.25; opacity: .85; max-width: 190px; }

/* ================= HM007 · lançador compacto ================= */
/* o menu TOMI fica numa linha de círculos iguais, sem labels; a pílula diminui; sobra
   espaço para a saudação e um mosaico de ícones moderado */
.central-menu.is-ctx-compact { min-height: 152px; justify-content: center; align-items: flex-start; padding-top: 14px; gap: 14px; }
.central-menu.is-ctx-compact .menu-circles { flex-direction: row; height: auto; gap: 14px; align-self: flex-start; }
.central-menu.is-ctx-compact .menu-mini { width: 68px; height: 68px; }
.central-menu.is-ctx-compact .menu-mini .tomi-icon { font-size: 30px; }
.central-menu.is-ctx-compact .menu-modules { flex: 0 0 auto; gap: 14px; }
.central-menu.is-ctx-compact .menu-module { height: auto; padding: 0; gap: 0; }
.central-menu.is-ctx-compact .menu-module__label, .central-menu.is-ctx-compact .menu-module__sub,
.central-menu.is-ctx-compact .menu-vpill__vlabel { display: none; }
.central-menu.is-ctx-compact .menu-module__icon { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.1); }
.central-menu.is-ctx-compact .menu-module__icon .tomi-icon { font-size: 36px; }
.central-menu.is-ctx-compact > .menu-vpill { width: 68px; height: 68px; padding: 0; border-radius: 50%; justify-content: center; align-self: flex-start; }
.central-menu.is-ctx-compact > .menu-vpill .tomi-icon { font-size: 30px; }
.central-menu.is-ctx-compact > .menu-vpill--ghost { display: none; }
.central-menu.is-ctx-compact ~ .search-launcher--grow.is-open { transform: translate(-50%, 50%) scale(.9); }
.ctx-pop--compact .ctx-seam__module-ic { height: 80px; }
.ctx-pop--compact .ctx-seam__module-ic .tomi-icon { font-size: calc(80px * var(--ic-k, 1)); }
.ctx-pop--compact .ctx-seam__say { font-size: 24px; }
.ctx-pop--compact .ctx-seam__say b { font-size: 30px; }

/* ================= HM003 · pílula de pesquisa abre o menu TOMI normal em faixa ================= */
/* reutiliza a faixa empurradora do HM006, mas na cor TOMI do menu normal, com os
   4 módulos da cidade à escala do HM006 (ícone grande + label, sem sub) */
.ctx-pop--menu { background: var(--ds-menu-bg, #FAC200); color: var(--ds-menu-ink, #111); }
.ctx-pop--menu .ctx-pop__panel.ctx-bare { justify-content: center; }
.ctx-pop--menu .ctx-menu__head { text-align: center; color: var(--ds-menu-ink, #111); font-size: 24px; line-height: 1.25; }
.ctx-pop--menu .ctx-menu__mods { flex: 0 0 auto; }
/* a pílula de pesquisa (que abre a faixa) fica acima dela, como no HM006 */
.home-root .search-launcher[data-ctx-menu] { z-index: 55; }

/* HM008 · restantes serviços do contexto no modal de pesquisa (morph) */
.ctx-ask__more { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ctx-ask__more > small { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5b6166; }
.ctx-ask__more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ctx-ask__svc { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; border: 0; border-radius: 16px;
  background: var(--ctx-soft, #f1f3f4); color: var(--ctx-soft-ink, #111); text-align: left; min-width: 0; }
.ctx-ask__svc-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ctx, #111); color: var(--ctx-ink, #fff); line-height: 0; margin-bottom: 4px; }
.ctx-ask__svc-ic .tomi-icon { font-size: 22px; }
.ctx-ask__svc b { font-size: 18px; line-height: 1.15; font-weight: 800; }
.ctx-ask__svc small { font-size: 14px; line-height: 1.2; opacity: .8; }