/* ============================================================================
   Sofá v1 — mockup docs/sofa-v1/mockup-sofa-21set.png (21 set 2026).
   Como na TV e no Desporto v2: nenhum valor de cor, tamanho, raio, espaçamento
   ou sombra escrito à mão fora do bloco «tokens locais». As cores que o mockup
   tem e o sistema não tinha — o amarelo do cartão «Iollo · Agora», o verde-água
   do palpite e o azul-noite do cartão do programa — entram aqui como tokens
   --sofa-*, misturados a partir dos primitivos --io-*, e não como literais.
   Sem consultas de largura: as filas assentam em grelhas de fracções.
   ============================================================================ */
/* sofa-v1 tokens início */
.sofa-surface {
  --sofa-il-personagem: 132px; --sofa-il-reacao: 70px; --sofa-il-programa: 64px;
  --sofa-il-faixa: 34px; --sofa-tracinhos: 26px; --sofa-ponto: 7px;
  --sofa-conta: 20px; --sofa-pega: 40px; --sofa-pega-alta: 5px;
  --sofa-voto: 18px; --sofa-passo-botao: 48px; --sofa-folha-alta: 78%;
  --sofa-av-md: 44px; --sofa-av-pilha: 42px;
  --sofa-col-hora: 48px; --sofa-msg-col: 44px; --sofa-voa: 44px; --sofa-voa-sobe: -300px;
  --sofa-peso-titulo: 800; --sofa-peso-forte: 700;
  --sofa-recuo-conversa: 140px;

  --sofa-manteiga: color-mix(in srgb, var(--io-gold-300) 34%, var(--io-surface));
  --sofa-manteiga-claro: color-mix(in srgb, var(--io-gold-300) 14%, var(--io-surface));
  --sofa-manteiga-forte: color-mix(in srgb, var(--io-gold-500) 46%, var(--io-surface));
  --sofa-menta: color-mix(in srgb, var(--io-turq-500) 13%, var(--io-surface));
  --sofa-menta-forte: color-mix(in srgb, var(--io-turq-500) 26%, var(--io-surface));
  --sofa-noite: color-mix(in srgb, var(--io-blue-600) 42%, var(--io-ink-950));
  --sofa-noite-texto: var(--io-white);
  --sofa-noite-suave: color-mix(in srgb, var(--io-white) 74%, var(--io-blue-600));
  --sofa-pilula: color-mix(in srgb, var(--io-white) 16%, transparent);
  --sofa-etiqueta-fundo: color-mix(in srgb, var(--io-white) 72%, transparent);
  --sofa-sistema-fundo: var(--io-surface-sunk);
  --sofa-brilho: color-mix(in srgb, var(--io-gold-500) 85%, transparent);
  --sofa-brilho-fim: color-mix(in srgb, var(--io-gold-500) 0%, transparent);
  --sofa-demo-texto: calc(11px * var(--io-scale));
  --sofa-demo-fundo: color-mix(in srgb, var(--io-gold-300) 22%, var(--io-surface));
  --sofa-demo-traco: color-mix(in srgb, var(--io-gold-700) 38%, transparent);
  --sofa-tu: var(--io-turq-100); --sofa-rui: color-mix(in srgb, var(--io-blue-600) 22%, var(--io-surface));
  --sofa-iollo-fundo: var(--io-gold-100);
}
[data-theme="escuro"] .sofa-surface {
  --sofa-manteiga: color-mix(in srgb, var(--io-gold-300) 17%, var(--io-surface));
  --sofa-manteiga-claro: color-mix(in srgb, var(--io-gold-300) 9%, var(--io-surface));
  --sofa-manteiga-forte: color-mix(in srgb, var(--io-gold-500) 26%, var(--io-surface));
  --sofa-menta: color-mix(in srgb, var(--io-turq-500) 18%, var(--io-surface));
  --sofa-menta-forte: color-mix(in srgb, var(--io-turq-500) 32%, var(--io-surface));
  --sofa-noite: color-mix(in srgb, var(--io-blue-600) 30%, var(--io-ink-950));
  --sofa-etiqueta-fundo: color-mix(in srgb, var(--io-white) 12%, transparent);
  --sofa-iollo-fundo: color-mix(in srgb, var(--io-gold-300) 14%, var(--io-surface));
}
[data-density="confortavel"] .sofa-surface {
  --sofa-il-reacao: 76px; --sofa-col-hora: 56px; --sofa-msg-col: 48px; --sofa-av-md: 48px; --sofa-av-pilha: 46px;
}
/* sofa-v1 tokens fim */

/* Cabeçalho e página, como nos outros ecrãs desenhados. */
.sofa-surface .product-head .wordmark { width: var(--io-wordmark-width); }
.sofa-surface .area-scroll { padding-top: 0; }
.sofa-surface .sofa-art { display: block; flex: none; height: auto; object-fit: contain; }
.sofa-surface .sofa-art-personagem { width: var(--sofa-il-personagem); }
.sofa-surface .sofa-art-reacao { width: var(--sofa-il-reacao); }
.sofa-surface .sofa-art-programa { width: var(--sofa-il-programa); }
.sofa-surface .sofa-icon { flex: none; width: var(--io-icon-md); height: var(--io-icon-md); }
.sofa-surface .sofa-tracinhos { position: absolute; width: var(--sofa-tracinhos); color: var(--io-gold-500); }

[data-sofa-root] { display: grid; gap: var(--io-space-4); padding-bottom: var(--io-space-2); color: var(--io-text); }
[data-sofa-root] > * { min-width: 0; }
.sofa-surface .sofa-topo { display: grid; gap: var(--io-space-4); min-width: 0; }
.sofa-surface .sofa-seccao { margin: 0; font-size: var(--io-type-lg); font-weight: var(--sofa-peso-titulo); letter-spacing: var(--io-tracking-tight); }
.sofa-surface .sofa-aviso { margin: 0; color: var(--io-text-secondary); font-size: var(--io-type-xs); line-height: var(--io-leading-body); }
/* A etiqueta «demo» ao lado do título «Sofá», no cabeçalho. O `.brand` já
   alinha ao meio (styles.css), por isso aqui só falta a forma. */
.sofa-surface .sofa-demo { flex: none; padding: var(--io-space-1) var(--io-space-2); border: var(--io-stroke-hairline) solid var(--sofa-demo-traco); border-radius: var(--io-radius-round); background: var(--sofa-demo-fundo); color: var(--io-gold-700); font-size: var(--sofa-demo-texto); font-weight: var(--io-weight-control); line-height: var(--io-leading-tight); text-transform: lowercase; }

/* Cartão do programa. */
.sofa-surface .sofa-programa { display: flex; align-items: center; gap: var(--io-space-2); padding: var(--io-space-2) var(--io-space-3); border-radius: var(--io-radius-lg); background: var(--sofa-noite); color: var(--sofa-noite-texto); }
.sofa-surface .sofa-programa-corpo { display: flex; flex: 1; align-items: center; gap: var(--io-space-3); min-width: 0; min-height: var(--io-tap); }
.sofa-surface .sofa-programa-arte { display: grid; flex: none; place-items: center; width: var(--sofa-il-programa); overflow: hidden; border-radius: var(--io-radius-sm); }
.sofa-surface .sofa-programa-copy { display: grid; gap: var(--io-space-1); min-width: 0; }
.sofa-surface .sofa-programa-copy strong { font-size: var(--io-type-lg); font-weight: var(--sofa-peso-titulo); letter-spacing: var(--io-tracking-tight); }
.sofa-surface .sofa-programa-linha { display: flex; align-items: center; gap: var(--io-space-2); color: var(--sofa-noite-suave); font-size: var(--io-type-xs); }
.sofa-surface .sofa-ponto { flex: none; width: var(--sofa-ponto); height: var(--sofa-ponto); border-radius: var(--io-radius-round); background: var(--io-live); }
.sofa-surface .sofa-programa-pilula { display: inline-flex; flex: none; align-items: center; gap: var(--io-space-1); min-height: var(--io-tap); padding: var(--io-space-1) var(--io-space-3); border: 0; border-radius: var(--io-radius-round); background: var(--sofa-pilula); color: inherit; font-size: var(--io-type-sm); font-weight: var(--io-weight-control); }
.sofa-surface .sofa-programa-pilula .sofa-icon { width: var(--io-icon-sm); height: var(--io-icon-sm); }

/* «O nosso sofá.» */
.sofa-surface .sofa-sala { display: grid; gap: var(--io-space-2); }
.sofa-surface .sofa-sala-topo { display: flex; align-items: flex-start; gap: var(--io-space-3); }
.sofa-surface .sofa-sala-topo h2 { position: relative; flex: 1; min-width: 0; margin: 0; font-size: var(--io-type-2xl); font-weight: var(--sofa-peso-titulo); line-height: var(--io-leading-tight); letter-spacing: var(--io-tracking-tight); }
.sofa-surface .sofa-sala-topo h2:focus { outline: none; }
.sofa-surface .sofa-sala-topo .sofa-tracinhos { top: calc(-1 * var(--io-space-2)); left: calc(-1 * var(--io-space-3)); }
.sofa-surface .sofa-convidar { display: inline-flex; flex: none; align-items: center; gap: var(--io-space-2); min-height: var(--io-tap); padding: var(--io-space-1) var(--io-space-4); border: var(--io-stroke-hairline) solid var(--io-border); border-radius: var(--io-radius-round); background: var(--io-surface); color: var(--io-text); font-size: var(--io-type-sm); font-weight: var(--io-weight-control); box-shadow: var(--io-shadow-control); }
.sofa-surface .sofa-convidar .sofa-icon { color: var(--io-accent-text); }
.sofa-surface .sofa-membros { display: flex; align-items: center; gap: var(--io-space-3); }
.sofa-surface .sofa-pilha { display: flex; flex: none; }
.sofa-surface .sofa-pilha .sofa-av { margin-left: calc(-1 * var(--io-space-2)); border: var(--io-stroke-hairline) solid var(--io-canvas); }
.sofa-surface .sofa-pilha .sofa-av:first-child { margin-left: 0; }
.sofa-surface .sofa-membros-texto { min-width: 0; margin: 0; color: var(--io-text-secondary); font-size: var(--io-type-xs); font-weight: var(--io-weight-control); line-height: var(--io-leading-tight); }
.sofa-surface .sofa-membros-texto span { color: var(--io-text); }
.sofa-surface .sofa-membros-texto em { font-style: normal; color: var(--io-text-muted); }
.sofa-surface .sofa-membros-texto small { display: block; color: var(--io-text-muted); font-size: var(--io-type-xs); }
.sofa-surface .sofa-opcoes { display: flex; align-items: center; justify-content: flex-end; gap: var(--io-space-3); }
.sofa-surface .sofa-opcoes button { display: inline-flex; align-items: center; gap: var(--io-space-1); min-height: var(--io-tap); padding: 0 var(--io-space-1); border: 0; background: transparent; color: var(--io-text-secondary); font-size: var(--io-type-xs); font-weight: var(--io-weight-control); }
.sofa-surface .sofa-opcoes .sofa-icon { width: var(--io-icon-sm); height: var(--io-icon-sm); }
.sofa-surface .sofa-opcoes .sofa-ligado { color: var(--io-accent-text); }
.sofa-surface .sofa-separador { width: var(--io-stroke-hairline); height: var(--io-icon-sm); background: var(--io-border); }

/* Avatares. O «TU» são iniciais, não uma imagem. */
.sofa-surface .sofa-av { display: grid; flex: none; place-items: center; width: var(--sofa-av-md); height: var(--sofa-av-md); overflow: hidden; border-radius: var(--io-radius-round); font-size: var(--io-type-xs); font-weight: var(--sofa-peso-titulo); }
.sofa-surface .sofa-pilha .sofa-av { width: var(--sofa-av-pilha); height: var(--sofa-av-pilha); }
.sofa-surface .sofa-palpite-votantes .sofa-av { width: var(--sofa-voto); height: var(--sofa-voto); }
.sofa-surface .sofa-av .sofa-art { width: 100%; height: 100%; }
.sofa-surface .sofa-av-tu { background: var(--sofa-tu); color: var(--io-text); }
.sofa-surface .sofa-av-rui { background: var(--sofa-rui); color: var(--io-text); }
.sofa-surface .sofa-av-ana { background: var(--io-topic-soft); }
.sofa-surface .sofa-av-iollo { background: var(--sofa-iollo-fundo); }

/* Cartão «Iollo · Agora». */
.sofa-surface .sofa-agora { position: relative; display: grid; grid-template-columns: 1fr auto; gap: var(--io-space-2); align-items: center; padding: var(--io-space-4); overflow: hidden; border-radius: var(--io-radius-pill); background: linear-gradient(135deg, var(--sofa-manteiga) 0%, var(--sofa-manteiga-claro) 60%, var(--sofa-manteiga) 100%); }
.sofa-surface .sofa-agora-copy { min-width: 0; }
.sofa-surface .sofa-agora-eyebrow { margin: 0; color: var(--io-accent-text); font-size: var(--io-type-xs); font-weight: var(--sofa-peso-titulo); letter-spacing: var(--io-tracking-label); text-transform: uppercase; }
.sofa-surface .sofa-agora h2 { margin: var(--io-space-2) 0 var(--io-space-1); color: var(--io-ink-950); font-size: var(--io-type-xl); font-weight: var(--sofa-peso-titulo); line-height: var(--io-leading-tight); letter-spacing: var(--io-tracking-tight); text-wrap: balance; }
.sofa-surface .sofa-agora-texto { margin: 0; color: var(--io-ink-800); font-size: var(--io-type-md); font-weight: var(--io-weight-control); line-height: var(--io-leading-body); }
.sofa-surface .sofa-agora-etiqueta { display: inline-flex; align-items: center; gap: var(--io-space-2); margin: var(--io-space-3) 0 0; padding: var(--io-space-1) var(--io-space-3); border-radius: var(--io-radius-round); background: var(--sofa-etiqueta-fundo); color: var(--io-ink-800); font-size: var(--io-type-xs); font-weight: var(--io-weight-control); }
.sofa-surface .sofa-agora-etiqueta.sofa-quente .sofa-icon { width: var(--io-icon-sm); height: var(--io-icon-sm); color: var(--io-coral-700); }
.sofa-surface .sofa-agora-arte { position: relative; flex: none; }
.sofa-surface .sofa-agora-arte .sofa-tracinhos { top: 0; left: calc(-1 * var(--io-space-1)); }

/* «A tua reação?» */
.sofa-surface .sofa-reaccoes-bloco { display: grid; gap: var(--io-space-2); }
.sofa-surface .sofa-reaccoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--io-space-1); }
.sofa-surface .sofa-reaccao { display: flex; flex-direction: column; align-items: center; gap: var(--io-space-1); min-height: var(--io-tap); padding: var(--io-space-1) 0; border: 0; border-radius: var(--io-radius-lg); background: transparent; color: var(--io-text-secondary); }
.sofa-surface .sofa-reaccao-arte { position: relative; display: grid; place-items: center; width: var(--sofa-il-reacao); height: var(--sofa-il-reacao); }
.sofa-surface .sofa-reaccao-arte .sofa-art { max-width: 100%; }
.sofa-surface .sofa-reaccao-etiqueta { font-size: var(--io-type-xs); font-weight: var(--io-weight-control); text-align: center; }
.sofa-surface .sofa-conta { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; min-width: var(--sofa-conta); height: var(--sofa-conta); padding: 0 var(--io-space-1); border: var(--io-stroke-hairline) solid var(--io-canvas); border-radius: var(--io-radius-round); background: var(--io-surface-sunk); font-size: var(--io-type-xs); font-variant-numeric: tabular-nums; }
.sofa-surface .sofa-minha { background: var(--io-accent-soft); color: var(--io-accent-text); }
.sofa-surface .sofa-minha .sofa-conta { background: var(--io-action-brand); color: var(--io-action-brand-text); }

/* «No nosso sofá». */
.sofa-surface .sofa-conversa-bloco { display: grid; gap: var(--io-space-3); padding-top: var(--io-space-4); border-top: var(--io-stroke-hairline) solid var(--io-border); }
.sofa-surface .sofa-conversa { display: grid; gap: var(--io-space-4); }
.sofa-surface .sofa-msg { display: grid; grid-template-columns: var(--sofa-msg-col) 1fr; gap: var(--io-space-3); align-items: start; }
.sofa-surface .sofa-msg-copy { min-width: 0; }
.sofa-surface .sofa-msg-quem { margin: 0; font-size: var(--io-type-sm); font-weight: var(--sofa-peso-titulo); }
.sofa-surface .sofa-msg-quem span { color: var(--io-text-muted); font-weight: var(--io-weight-control); font-variant-numeric: tabular-nums; }
.sofa-surface .sofa-msg-iollo .sofa-msg-quem { color: var(--io-accent-text); }
.sofa-surface .sofa-msg-texto { margin: var(--io-space-1) 0 0; font-size: var(--io-type-md); font-weight: var(--io-weight-control); line-height: var(--io-leading-body); overflow-wrap: anywhere; }
.sofa-surface .sofa-escrever { display: inline-flex; gap: var(--io-space-1); margin: var(--io-space-1) 0 0; padding: var(--io-space-2) var(--io-space-3); border-radius: var(--io-radius-md); background: var(--sofa-manteiga); }
.sofa-surface .sofa-escrever i { width: var(--io-space-1); height: var(--io-space-1); border-radius: var(--io-radius-round); background: var(--io-gold-700); }
.sofa-surface .sofa-sistema { justify-self: center; padding: var(--io-space-1) var(--io-space-3); border-radius: var(--io-radius-round); background: var(--sofa-sistema-fundo); color: var(--io-text-muted); font-size: var(--io-type-xs); font-weight: var(--io-weight-control); }
.sofa-surface .sofa-resumo { padding: var(--io-space-3) var(--io-space-4); border-radius: var(--io-radius-lg); background: var(--sofa-menta); }
.sofa-surface .sofa-resumo h4 { margin: 0 0 var(--io-space-2); font-size: var(--io-type-md); font-weight: var(--sofa-peso-titulo); }
.sofa-surface .sofa-resumo dl { display: grid; grid-template-columns: auto 1fr; gap: var(--io-space-1) var(--io-space-3); margin: 0; font-size: var(--io-type-sm); }
.sofa-surface .sofa-resumo dt { color: var(--io-text-secondary); font-weight: var(--io-weight-control); }
.sofa-surface .sofa-resumo dd { margin: 0; font-weight: var(--sofa-peso-forte); text-align: right; }
.sofa-surface .sofa-novas { justify-self: center; min-height: var(--io-tap); padding: var(--io-space-1) var(--io-space-4); border: 0; border-radius: var(--io-radius-round); background: var(--io-ink-950); color: var(--io-text-inverse); font-size: var(--io-type-xs); font-weight: var(--io-weight-control); }
.sofa-surface .sofa-novas[hidden] { display: none; }

/* Faixa fixa «Iollo · Agora», entre o cabeçalho e a página. */
.sofa-surface .sofa-faixa { flex: none; }
.sofa-surface .sofa-faixa[hidden] { display: none; }
.sofa-surface .sofa-faixa button { display: flex; align-items: center; gap: var(--io-space-3); width: 100%; min-height: var(--io-tap); padding: var(--io-space-2) var(--io-page-gutter); border: 0; background: var(--sofa-manteiga); color: var(--io-ink-950); text-align: left; }
.sofa-surface .sofa-faixa .sofa-art { width: var(--sofa-il-faixa); }
.sofa-surface .sofa-faixa-copy { min-width: 0; }
.sofa-surface .sofa-faixa-copy small { display: block; color: var(--io-turq-700); font-size: var(--io-type-xs); font-weight: var(--sofa-peso-titulo); letter-spacing: var(--io-tracking-label); text-transform: uppercase; }
.sofa-surface .sofa-faixa-copy strong { display: block; overflow: hidden; font-size: var(--io-type-sm); font-weight: var(--sofa-peso-titulo); line-height: var(--io-leading-tight); text-overflow: ellipsis; white-space: nowrap; }

/* Barra de baixo: palpite e as duas acções, por cima do campo de escrita. */
.sofa-surface .sofa-dock { display: grid; gap: var(--io-space-2); padding-bottom: var(--io-space-2); }
.sofa-surface .sofa-palpite-lugar:empty { display: none; }
.sofa-surface .sofa-palpite { display: grid; grid-template-columns: 1fr auto; gap: var(--io-space-3); align-items: center; padding: var(--io-space-3); border-radius: var(--io-radius-lg); background: var(--sofa-menta); }
.sofa-surface .sofa-palpite-copy { min-width: 0; }
.sofa-surface .sofa-palpite-eyebrow { display: flex; align-items: center; gap: var(--io-space-2); margin: 0; color: var(--io-accent-text); font-size: var(--io-type-xs); font-weight: var(--sofa-peso-forte); }
.sofa-surface .sofa-palpite-eyebrow .sofa-icon { width: var(--io-icon-sm); height: var(--io-icon-sm); }
.sofa-surface .sofa-palpite-pergunta { margin: var(--io-space-1) 0 0; font-size: var(--io-type-md); font-weight: var(--sofa-peso-titulo); line-height: var(--io-leading-tight); text-wrap: balance; }
.sofa-surface .sofa-palpite-opcoes { display: flex; gap: var(--io-space-2); }
.sofa-surface .sofa-palpite-opcao { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--io-space-1); min-height: var(--io-tap); padding: var(--io-space-2) var(--io-space-3); overflow: hidden; border: 0; border-radius: var(--io-radius-md); background: var(--io-surface); color: var(--io-text); font-size: var(--io-type-sm); font-weight: var(--sofa-peso-forte); box-shadow: var(--io-shadow-control); }
.sofa-surface .sofa-palpite-opcao > *:not(.sofa-palpite-barra) { position: relative; }
.sofa-surface .sofa-palpite-barra { position: absolute; inset: 0 auto 0 0; width: var(--sofa-barra, 0%); background: var(--sofa-menta-forte); transition: width var(--io-duration-state) var(--io-ease-bounce); }
.sofa-surface .sofa-palpite-etiqueta { display: inline-flex; align-items: center; gap: var(--io-space-2); }
.sofa-surface .sofa-palpite-etiqueta .sofa-icon { width: var(--io-icon-md); height: var(--io-icon-md); color: var(--io-accent-text); }
.sofa-surface .sofa-palpite-pct { color: var(--io-accent-text); font-size: var(--io-type-xs); font-variant-numeric: tabular-nums; }
.sofa-surface .sofa-palpite-votantes { display: flex; min-height: var(--sofa-voto); }
.sofa-surface .sofa-palpite-votantes .sofa-av { margin-left: calc(-1 * var(--io-space-1)); border: var(--io-stroke-hairline) solid var(--io-surface); font-size: var(--io-type-xs); }
.sofa-surface .sofa-palpite-votantes .sofa-av:first-child { margin-left: 0; }
.sofa-surface .sofa-escolhida { outline: var(--io-stroke-focus) solid var(--io-action-brand); outline-offset: calc(-1 * var(--io-stroke-focus)); }
.sofa-surface .sofa-palpite-nota { grid-column: 1 / -1; margin: 0; color: var(--io-text-secondary); font-size: var(--io-type-xs); }
.sofa-surface .sofa-rapidas { display: flex; justify-content: space-between; gap: var(--io-space-3); }
.sofa-surface .sofa-rapidas button { display: inline-flex; align-items: center; gap: var(--io-space-2); min-height: var(--io-tap); padding: 0 var(--io-space-1); border: 0; background: transparent; color: var(--io-text); font-size: var(--io-type-sm); font-weight: var(--io-weight-control); }
.sofa-surface .sofa-rapidas .sofa-icon { color: var(--io-accent-text); }

/* Folhas que sobem do fundo. */
.sofa-surface .sofa-scrim { position: absolute; inset: 0; z-index: var(--io-z-overlay); display: flex; align-items: flex-end; background: var(--io-scrim); }
.sofa-surface .sofa-folha { width: 100%; max-height: var(--sofa-folha-alta); padding: var(--io-space-2) var(--io-space-5) var(--io-space-8); overflow: auto; border-radius: var(--io-radius-pill) var(--io-radius-pill) 0 0; background: var(--io-surface); box-shadow: var(--io-shadow-overlay); }
.sofa-surface .sofa-pega { display: block; width: var(--sofa-pega); height: var(--sofa-pega-alta); margin: 0 auto var(--io-space-3); border-radius: var(--io-radius-round); background: var(--io-border); }
.sofa-surface .sofa-folha h3 { margin: 0 0 var(--io-space-1); font-size: var(--io-type-lg); font-weight: var(--sofa-peso-titulo); }
.sofa-surface .sofa-folha-sub { margin: 0 0 var(--io-space-4); color: var(--io-text-secondary); font-size: var(--io-type-sm); line-height: var(--io-leading-body); }
.sofa-surface .sofa-folha-nota { margin: var(--io-space-2) 0 0; color: var(--io-text-muted); font-size: var(--io-type-xs); text-align: center; }
.sofa-surface .sofa-folha-lista { display: grid; gap: var(--io-space-3); margin: 0; padding: 0; list-style: none; }
.sofa-surface .sofa-folha-lista li { display: grid; grid-template-columns: var(--sofa-col-hora) 1fr; gap: var(--io-space-3); font-size: var(--io-type-sm); line-height: var(--io-leading-body); }
.sofa-surface .sofa-folha-hora { color: var(--io-text-muted); font-weight: var(--sofa-peso-forte); font-variant-numeric: tabular-nums; }
.sofa-surface .sofa-folha-lista strong { display: block; font-weight: var(--sofa-peso-titulo); }
.sofa-surface .sofa-folha-lista span { color: var(--io-text-secondary); }
.sofa-surface .sofa-folha-fim { width: 100%; min-height: var(--io-tap); margin-top: var(--io-space-4); border: 0; border-radius: var(--io-radius-round); background: var(--io-ink-950); color: var(--io-text-inverse); font-size: var(--io-type-md); font-weight: var(--io-weight-control); }
.sofa-surface .sofa-escolhas { display: grid; gap: var(--io-space-3); }
.sofa-surface .sofa-escolha { display: flex; align-items: center; gap: var(--io-space-3); width: 100%; min-height: var(--io-tap); padding: var(--io-space-3) var(--io-space-4); border: var(--io-stroke-hairline) solid var(--io-border); border-radius: var(--io-radius-md); background: var(--io-surface); color: var(--io-text); font-size: var(--io-type-md); font-weight: var(--io-weight-control); text-align: left; }
.sofa-surface .sofa-escolha strong { display: block; font-weight: var(--sofa-peso-forte); }
.sofa-surface .sofa-escolha small { display: block; color: var(--io-text-secondary); font-size: var(--io-type-sm); }
.sofa-surface .sofa-escolha[disabled] { color: var(--io-text-muted); }
.sofa-surface .sofa-escolha.sofa-escolhida { border-color: var(--io-action-brand); background: var(--io-accent-soft); outline: none; }
.sofa-surface .sofa-embreve { margin-left: auto; color: var(--io-text-muted); font-size: var(--io-type-xs); letter-spacing: var(--io-tracking-label); text-transform: uppercase; }
.sofa-surface .sofa-passo { display: flex; align-items: center; justify-content: center; gap: var(--io-space-5); margin: var(--io-space-3) 0 var(--io-space-2); }
.sofa-surface .sofa-passo button { width: var(--sofa-passo-botao); height: var(--sofa-passo-botao); border: 0; border-radius: var(--io-radius-round); background: var(--io-accent-soft); color: var(--io-accent-text); font-size: var(--io-type-xl); font-weight: var(--sofa-peso-titulo); }
.sofa-surface .sofa-passo output { min-width: var(--io-avatar-lg); font-size: var(--io-type-2xl); font-weight: var(--sofa-peso-titulo); font-variant-numeric: tabular-nums; text-align: center; }

/* «O Sofá chega em breve»: o ecrã sem conta de demonstração. */
.sofa-surface .sofa-brevemente { display: grid; justify-items: center; gap: var(--io-space-3); padding: var(--io-space-8) var(--io-space-4); text-align: center; }
.sofa-surface .sofa-brevemente h2 { margin: 0; font-size: var(--io-type-xl); font-weight: var(--sofa-peso-titulo); letter-spacing: var(--io-tracking-tight); }
.sofa-surface .sofa-brevemente h2:focus { outline: none; }
.sofa-surface .sofa-brevemente p { max-width: var(--io-reading-max); margin: 0; color: var(--io-text-secondary); font-size: var(--io-type-md); line-height: var(--io-leading-body); }

/* Movimento. Tudo o que se mexe pára com «reduzir movimento». */
.sofa-surface .sofa-voa { position: absolute; z-index: var(--io-z-toast); width: var(--sofa-voa); height: var(--sofa-voa); pointer-events: none; animation: sofa-voa var(--io-duration-state) var(--io-ease) forwards; animation-duration: calc(var(--io-duration-state) * 4); }
.sofa-surface .sofa-voa .sofa-art { width: 100%; height: 100%; }
.sofa-surface .sofa-msg, .sofa-surface .sofa-sistema, .sofa-surface .sofa-resumo, .sofa-surface .sofa-palpite { animation: sofa-entra var(--io-duration-slow) var(--io-ease) both; }
.sofa-surface .sofa-folha { animation: sofa-sobe var(--io-duration-slow) var(--io-ease) both; }
.sofa-surface .sofa-scrim { animation: sofa-aparece var(--io-duration-base) var(--io-ease) both; }
.sofa-surface .sofa-brilha { animation: sofa-brilha var(--io-duration-state) var(--io-ease) both; }
.sofa-surface .sofa-bate .sofa-reaccao-arte { animation: sofa-bate var(--io-duration-slow) var(--io-ease) both; }
.sofa-surface .sofa-escrever i { animation: sofa-escreve calc(var(--io-duration-state) * 2.4) infinite; }
.sofa-surface .sofa-escrever i:nth-child(2) { animation-delay: var(--io-duration-fast); }
.sofa-surface .sofa-escrever i:nth-child(3) { animation-delay: var(--io-duration-slow); }
@keyframes sofa-entra { from { opacity: 0; transform: translateY(var(--io-space-3)); } }
@keyframes sofa-sobe { from { transform: translateY(100%); } }
@keyframes sofa-aparece { from { opacity: 0; } }
@keyframes sofa-brilha { from { box-shadow: 0 0 0 0 var(--sofa-brilho); } to { box-shadow: 0 0 0 var(--io-space-4) var(--sofa-brilho-fim); } }
@keyframes sofa-bate { 40% { transform: scale(1.18); } }
@keyframes sofa-escreve { 40% { opacity: 1; transform: translateY(calc(-1 * var(--io-space-1))); } }
@keyframes sofa-voa {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.5); }
  15% { opacity: 1; transform: translate(-50%, calc(-1 * var(--io-space-5))) scale(1.1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sofa-voa-x)), var(--sofa-voa-sobe)) scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .sofa-surface .sofa-voa { display: none; }
  .sofa-surface .sofa-msg, .sofa-surface .sofa-sistema, .sofa-surface .sofa-resumo,
  .sofa-surface .sofa-palpite, .sofa-surface .sofa-folha, .sofa-surface .sofa-scrim,
  .sofa-surface .sofa-brilha, .sofa-surface .sofa-bate .sofa-reaccao-arte,
  .sofa-surface .sofa-escrever i { animation: none; }
  .sofa-surface .sofa-palpite-barra { transition: none; }
}