/* Ligações de comida ao domicílio dentro de uma resposta da conversa (food-delivery.js). */
.food-delivery-links { margin-top:16px; padding-top:14px; border-top:1px solid var(--io-border); }
.food-delivery-label { font-size:13px; font-weight:600; }
.food-delivery-results { display:grid; gap:8px; margin:8px 0; }
.food-delivery-results > a { display:grid; gap:8px; padding:12px; border:1px solid var(--io-border); border-radius:12px; text-decoration:none; color:var(--io-text); background:var(--io-surface); overflow-wrap:anywhere; }
.food-delivery-results strong { font-size:15px; line-height:1.4; }
.food-delivery-results span { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; color:var(--io-turq-700); }
.food-delivery-results svg { width:20px; height:20px; flex:none; }
.food-delivery-links .product-meta { font-size:13px; line-height:1.5; }

/* ============================================================================
   Fazer v2 — home por objectos e ecrãs de tarefa (spec 15, Bloco A).
   Só se aplica com a flag FAZER_V2 ligada (.fazer-v2 não existe sem ela).
   Regra da spec §5: nenhum valor literal de cor, tamanho ou raio fora dos
   tokens. Os tamanhos de ilustração e os valores desta secção que não existem
   em design-tokens.css estão no bloco «tokens locais», o único com literais.
   ============================================================================ */
/* fazer-v2 tokens início */
.fazer-v2 {
  --fazer-ilustracao-grelha: 120px; --fazer-ilustracao-hero: 170px; --fazer-ilustracao-linha: 72px;
  --fazer-ilustracao-passo: 64px; --fazer-ilustracao-personagem: 150px; --fazer-ilustracao-fundo: 480px;
  --fazer-fundo-opacidade: .9; --fazer-cartao-min: 104px; --fazer-ponto: 8px; --fazer-topo-min: 176px;
  --fazer-destaque: color-mix(in srgb, var(--io-turq-500) 10%, transparent);
  --fazer-vector-fundo: color-mix(in srgb, var(--io-turq-500) 14%, var(--io-surface));
  --fazer-peso-titulo: 800; --fazer-peso-forte: 700;
  /* «Parceiros iollo»: medido no mockup 21 e convertido a 1 css = 1,664 px do
     mockup (o cartão mede 649 px no mockup e 390 px de CSS a 430 de largura).
     Cartão 66 de altura, fotografia 138×68, círculo da seta 29,5, espaço entre
     cartões 6, folga do círculo à margem 13,8. */
  --fazer-parceiro-altura: 66px; --fazer-parceiro-foto: clamp(104px, 37%, 138px);
  --fazer-parceiro-gap: 6px; --fazer-parceiro-margem: 13px;
  --fazer-parceiro-disco: 30px; --fazer-parceiro-seta-icone: 14px;
  /* Medidas da TINTA de cada logótipo no mockup (largura × altura, css):
     uber-eats 71,5×13,2 · thefork 74,5×19,2 · continente 99,2×11,4 ·
     decathlon 102,8×16,8 · amazon 71,5×22,8. O que a CSS limita não é a tinta
     mas a caixa do ficheiro, e cada ficheiro tem a sua margem transparente —
     o Decathlon é o extremo: a tinta ocupa só 42 % da altura da caixa, por
     causa da zona de exclusão obrigatória da marca. Os valores abaixo são a
     caixa que põe a tinta no tamanho medido. */
  --fazer-parceiro-logo-largura: 102px;
  --fazer-parceiro-logo-uber-eats: 13.5px; --fazer-parceiro-logo-thefork: 15px;
  --fazer-parceiro-logo-continente: 11.5px; --fazer-parceiro-logo-decathlon: 37px;
  --fazer-parceiro-logo-decathlon-largura: 124px; --fazer-parceiro-logo-amazon: 28px;
  --fazer-parceiro-fundo: var(--io-surface); --fazer-parceiro-texto: var(--io-text);
  --fazer-parceiro-borda: var(--io-border);
  --fazer-parceiro-disco-fundo: var(--io-turq-100); --fazer-parceiro-seta: var(--io-turq-700);
}
/* Densidade confortável: o texto e os espaços escalam, as ilustrações não; a
   grelha passa a 2 colunas quando a largura útil é menor que 380 px (§5). */
[data-density="confortavel"] .fazer-v2 { --fazer-cartao-min: 122px; }
/* Os cinco logótipos são ficheiros oficiais das marcas, de uma cor só e
   desenhados para fundo claro — o wordmark preto do Uber Eats desaparecia num
   cartão escuro, e a indicação da marca é essa mesma. Em vez de recolorir
   marcas, o cartão mantém a placa clara no modo escuro, como no mockup. A seta
   repõe o turquesa do modo claro (--io-turq-700 antes do modo escuro o
   reapontar para um tom feito para fundos escuros). */
[data-theme="escuro"] .fazer-v2 {
  --fazer-fundo-opacidade: .5;
  --fazer-parceiro-fundo: var(--io-white); --fazer-parceiro-texto: var(--io-ink-950);
  --fazer-parceiro-borda: var(--io-ivory-300);
  --fazer-parceiro-disco-fundo: #E8F7F9; --fazer-parceiro-seta: #0C7B88;
}
/* fazer-v2 tokens fim */

#area-fazer .fazer-v2 { display: grid; gap: var(--io-space-4); padding-bottom: var(--io-space-2); color: var(--io-text); }
#area-fazer .fazer-v2 .fazer-il { display: block; height: auto; }
#area-fazer .fazer-v2 .fazer-il-grelha { width: min(100%, var(--fazer-ilustracao-grelha)); }
#area-fazer .fazer-v2 .fazer-il-hero { width: min(100%, var(--fazer-ilustracao-hero)); }
#area-fazer .fazer-v2 .fazer-il-linha { width: var(--fazer-ilustracao-linha); }
#area-fazer .fazer-v2 .fazer-il-passo { width: min(100%, var(--fazer-ilustracao-passo)); }
#area-fazer .fazer-v2 .fazer-il-personagem { width: min(100%, var(--fazer-ilustracao-personagem)); }
#area-fazer .fazer-v2 .fazer-il-vector { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--io-radius-md); background: var(--fazer-vector-fundo); color: var(--io-turq-700); }
#area-fazer .fazer-v2 .fazer-il-vector.fazer-il-grelha { width: min(100%, var(--fazer-ilustracao-grelha)); }
#area-fazer .fazer-v2 .fazer-il-vector.fazer-il-hero { width: min(100%, var(--fazer-ilustracao-hero)); }
#area-fazer .fazer-v2 .fazer-il-lista, #area-fazer .fazer-v2 .fazer-il-vector.fazer-il-lista { width: var(--fazer-ilustracao-linha); }
#area-fazer .fazer-v2 .fazer-il-vector svg { width: 50%; height: 50%; }
#area-fazer .fazer-v2 svg { flex: none; }

/* Título em duas linhas; a segunda em turquesa (texto sobre creme, nunca branco). */
.product-ready #area-fazer .fazer-titulo { display: grid; margin: 0; font-size: var(--io-type-2xl); font-weight: var(--fazer-peso-titulo); line-height: var(--io-leading-tight); letter-spacing: var(--io-tracking-tight); }
#area-fazer .fazer-titulo:focus { outline: none; }
#area-fazer .fazer-titulo-destaque { color: var(--io-turq-700); }
.product-ready #area-fazer .fazer-seccao { margin: 0; font-size: var(--io-type-xl); font-weight: var(--fazer-peso-forte); line-height: var(--io-leading-tight); letter-spacing: var(--io-tracking-tight); }

/* Topo da home: fundo atmosférico em camada própria, personagem e balão. */
#area-fazer .fazer-topo { position: relative; isolation: isolate; min-height: var(--fazer-topo-min); border-radius: var(--io-radius-lg); overflow: hidden; }
#area-fazer .fazer-topo-fundo { position: absolute; inset: 0; z-index: var(--io-z-base); width: 100%; height: 100%; object-fit: cover; opacity: var(--fazer-fundo-opacidade); pointer-events: none; }
#area-fazer .fazer-topo-conteudo { position: relative; display: grid; grid-template-columns: minmax(0, var(--fazer-ilustracao-personagem)) minmax(0, 1fr); align-items: center; gap: var(--io-space-2); padding: var(--io-space-3) var(--io-space-3) 0; }
#area-fazer .fazer-balao { margin: 0; padding: var(--io-space-3) var(--io-space-4); border-radius: var(--io-radius-lg); background: var(--io-surface); box-shadow: var(--io-shadow-card); color: var(--io-text); font-size: var(--io-type-md); line-height: var(--io-leading-body); }
#area-fazer .fazer-balao strong { color: var(--io-turq-700); font-weight: var(--fazer-peso-forte); }
#area-fazer .fazer-balao-topo { display: grid; gap: var(--io-space-2); }
#area-fazer .fazer-balao-topo p { margin: 0; }
#area-fazer .fazer-balao-ligacao { display: inline-flex; align-items: center; gap: var(--io-space-1); min-height: var(--io-tap); color: var(--io-turq-700); font-weight: var(--io-weight-heading); text-decoration: none; }
#area-fazer .fazer-balao-ligacao:hover { text-decoration: underline; }
#area-fazer .fazer-topo-controlos { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--io-space-2); }
#area-fazer .fazer-ponto, #area-fazer .fazer-pausa { display: grid; place-items: center; width: var(--io-tap); height: var(--io-tap); padding: 0; border: 0; background: transparent; color: var(--io-turq-700); cursor: pointer; }
#area-fazer .fazer-ponto::before { content: ""; width: var(--fazer-ponto); height: var(--fazer-ponto); border-radius: var(--io-radius-round); background: var(--io-border-control); transition: background var(--io-duration-fast) var(--io-ease); }
#area-fazer .fazer-ponto[aria-pressed="true"]::before { background: var(--io-turq-700); }
#area-fazer .fazer-topo-separador { width: var(--io-stroke-hairline); height: var(--io-icon-sm); background: var(--io-border-control); }
#area-fazer .fazer-pausa svg { width: var(--io-icon-sm); height: var(--io-icon-sm); }
#area-fazer .fazer-personagem-balao { display: grid; grid-template-columns: minmax(0, var(--fazer-ilustracao-personagem)) minmax(0, 1fr); align-items: center; gap: var(--io-space-2); }

/* Separador Começar | A acompanhar (N). */
#area-fazer .fazer-separador { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--io-space-1); padding: var(--io-space-1); border: var(--io-stroke-hairline) solid var(--io-border); border-radius: var(--io-radius-pill); background: var(--io-surface); }
#area-fazer .fazer-tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--io-space-2); min-height: var(--io-tap); padding: var(--io-space-1) var(--io-space-3); border: 0; border-radius: var(--io-radius-pill); background: transparent; color: var(--io-text-secondary); font: inherit; font-size: var(--io-type-md); font-weight: var(--io-weight-heading); cursor: pointer; }
#area-fazer .fazer-tab[aria-selected="true"] { background: var(--io-turq-100); color: var(--io-text); }
#area-fazer .fazer-contagem { display: inline-grid; place-items: center; min-width: var(--io-icon-lg); height: var(--io-icon-lg); padding: 0 var(--io-space-1); border-radius: var(--io-radius-round); background: var(--io-coral-500); color: var(--io-text-inverse); font-size: var(--io-type-xs); font-weight: var(--fazer-peso-forte); }
#area-fazer .fazer-painel { display: grid; gap: var(--io-space-3); }
#area-fazer .fazer-painel[hidden] { display: none; }

/* Grelha 3×2 «Passa-me uma tarefa». */
#area-fazer .fazer-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--fazer-cartao-min), 1fr)); gap: var(--io-space-3) var(--io-space-2); margin: 0; padding: 0; list-style: none; }
#area-fazer .fazer-cartao { display: grid; justify-items: center; gap: var(--io-space-2); min-height: var(--io-tap); padding: var(--io-space-2) var(--io-space-1); border-radius: var(--io-radius-md); color: var(--io-text); text-decoration: none; text-align: center; }
#area-fazer .fazer-cartao-rotulo { font-size: var(--io-type-sm); font-weight: var(--io-weight-control); line-height: var(--io-leading-tight); }
#area-fazer .fazer-ver-todas, #area-fazer .fazer-ligacao { display: inline-flex; align-items: center; justify-content: center; gap: var(--io-space-2); min-height: var(--io-tap); justify-self: center; padding: 0 var(--io-space-2); border: 0; background: transparent; color: var(--io-turq-700); font: inherit; font-size: var(--io-type-md); font-weight: var(--io-weight-heading); text-decoration: none; cursor: pointer; }
#area-fazer .fazer-ver-todas svg, #area-fazer .fazer-ligacao svg { width: var(--io-icon-md); height: var(--io-icon-md); }
#area-fazer .fazer-ver-todas:hover, #area-fazer .fazer-ligacao:hover { text-decoration: underline; }

#area-fazer .fazer-tarefas, #area-fazer .fazer-todas { display: grid; margin: 0; padding: 0; list-style: none; }
#area-fazer .fazer-estado { font-size: var(--io-type-sm); color: var(--io-text-secondary); }
#area-fazer .fazer-vazio { display: grid; justify-items: center; gap: var(--io-space-1); margin: 0; padding: var(--io-space-4) 0; color: var(--io-text-secondary); font-size: var(--io-type-md); line-height: var(--io-leading-body); text-align: center; }
#area-fazer .fazer-seta-chevron { display: grid; place-items: center; width: var(--io-icon-lg); height: var(--io-icon-lg); color: var(--io-turq-700); }
#area-fazer .fazer-seta-chevron svg { width: var(--io-icon-md); height: var(--io-icon-md); }

/* Ecrã de objecto: título + hero, personagem + balão, lista de tarefas. */
#area-fazer .fazer-cabecalho { display: grid; grid-template-columns: minmax(0, 1fr) clamp(var(--io-avatar-lg), 44%, var(--fazer-ilustracao-hero)); align-items: center; gap: var(--io-space-2); }
#area-fazer .fazer-hero { justify-self: end; }
#area-fazer .fazer-tarefa { display: grid; grid-template-columns: var(--fazer-ilustracao-linha) minmax(0, 1fr) var(--io-icon-lg); align-items: center; gap: var(--io-space-3); width: 100%; min-height: var(--io-tap); padding: var(--io-space-2) var(--io-space-2); border: 0; border-bottom: var(--io-stroke-hairline) solid var(--io-border); border-radius: var(--io-radius-md); background: transparent; color: var(--io-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
#area-fazer .fazer-tarefa-destaque { background: var(--fazer-destaque); border-bottom-color: transparent; }
#area-fazer .fazer-tarefa-copy { display: grid; gap: var(--io-space-1); min-width: 0; }
#area-fazer .fazer-tarefa-copy strong { font-size: var(--io-type-lg); font-weight: var(--fazer-peso-forte); line-height: var(--io-leading-tight); letter-spacing: var(--io-tracking-tight); }
#area-fazer .fazer-tarefa-copy > span { font-size: var(--io-type-sm); line-height: var(--io-leading-body); color: var(--io-text-secondary); overflow-wrap: anywhere; }
#area-fazer .fazer-tarefa-em-breve { grid-template-columns: var(--fazer-ilustracao-linha) minmax(0, 1fr); color: var(--io-text-secondary); }
#area-fazer .fazer-em-breve { color: var(--io-gold-700); font-weight: var(--io-weight-heading); }
#area-fazer .fazer-em-breve-nota { margin: 0; padding: var(--io-space-2) var(--io-space-2) var(--io-space-3); color: var(--io-text-secondary); font-size: var(--io-type-sm); line-height: var(--io-leading-body); }

/* Ecrã de tarefa: bloco de entrada, faixa de passos, botão primário e secundária. */
#area-fazer .fazer-entrada { display: grid; gap: var(--io-space-4); margin: 0; }
#area-fazer .fazer-campo { display: grid; gap: var(--io-space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
#area-fazer .fazer-campo-rotulo { padding: 0; font-size: var(--io-type-lg); font-weight: var(--fazer-peso-forte); line-height: var(--io-leading-tight); letter-spacing: var(--io-tracking-tight); }
#area-fazer .fazer-campo-input { display: grid; grid-template-columns: var(--io-icon-lg) minmax(0, 1fr); align-items: center; gap: var(--io-space-2); min-height: var(--io-tap); padding: 0 var(--io-space-3); border: var(--io-stroke-hairline) solid var(--io-border-control); border-radius: var(--io-radius-md); background: var(--io-surface); color: var(--io-turq-700); }
#area-fazer .fazer-campo-input:focus-within { outline: var(--io-stroke-focus) solid var(--io-border-focus); outline-offset: 0; }
#area-fazer .fazer-campo-input svg { width: var(--io-icon-md); height: var(--io-icon-md); }
#area-fazer .fazer-campo-input input { min-width: 0; min-height: var(--io-tap); padding: 0; border: 0; background: transparent; color: var(--io-text); font: inherit; font-size: var(--io-type-md); outline: none; }
#area-fazer .fazer-campo-input input::placeholder { color: var(--io-text-muted); }
#area-fazer .fazer-campo-nota { margin: 0; color: var(--io-text-secondary); font-size: var(--io-type-sm); line-height: var(--io-leading-body); }
#area-fazer .fazer-localizacao { display: inline-flex; align-items: center; gap: var(--io-space-2); justify-self: start; min-height: var(--io-tap); padding: 0 var(--io-space-1); border: 0; background: transparent; color: var(--io-turq-700); font: inherit; font-size: var(--io-type-md); text-decoration: underline; text-underline-offset: var(--io-space-1); cursor: pointer; }
#area-fazer .fazer-localizacao svg { width: var(--io-icon-md); height: var(--io-icon-md); }
#area-fazer .fazer-chips { display: flex; flex-wrap: wrap; gap: var(--io-space-2); }
#area-fazer .fazer-chip { position: relative; display: inline-flex; }
#area-fazer .fazer-chip input, #area-fazer .fazer-opcao-ilustrada input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#area-fazer .fazer-chip > span { display: inline-flex; 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-control); border-radius: var(--io-radius-pill); background: var(--io-surface); color: var(--io-text); font-size: var(--io-type-md); line-height: var(--io-leading-tight); transition: background var(--io-duration-fast) var(--io-ease), border-color var(--io-duration-fast) var(--io-ease); }
#area-fazer .fazer-chip > span svg { display: none; width: var(--io-icon-sm); height: var(--io-icon-sm); color: var(--io-turq-700); }
#area-fazer .fazer-chip input:checked + span { border-color: var(--io-turq-500); background: var(--io-turq-100); font-weight: var(--io-weight-heading); }
#area-fazer .fazer-chip input:checked + span svg { display: block; }
#area-fazer .fazer-chip input:focus-visible + span, #area-fazer .fazer-opcao-ilustrada input:focus-visible + span { outline: var(--io-stroke-focus) solid var(--io-border-focus); outline-offset: var(--io-space-1); }
#area-fazer .fazer-opcoes-ilustradas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--io-space-2); }
#area-fazer .fazer-opcao-ilustrada { position: relative; display: grid; }
#area-fazer .fazer-opcao-ilustrada > span { display: grid; justify-items: center; gap: var(--io-space-2); padding: var(--io-space-2); border: var(--io-stroke-hairline) solid var(--io-border-control); border-radius: var(--io-radius-md); background: var(--io-surface); font-size: var(--io-type-sm); text-align: center; }
#area-fazer .fazer-opcao-ilustrada input:checked + span { border-color: var(--io-turq-500); background: var(--io-turq-100); font-weight: var(--io-weight-heading); }
#area-fazer .fazer-passos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--io-space-1); margin: 0; padding: var(--io-space-4) var(--io-space-2); border-radius: var(--io-radius-lg); background: var(--fazer-destaque); list-style: none; }
#area-fazer .fazer-passo { display: grid; justify-items: center; gap: var(--io-space-2); min-width: 0; font-size: var(--io-type-sm); line-height: var(--io-leading-tight); text-align: center; }
#area-fazer .fazer-passo-seta { display: grid; place-items: center; color: var(--io-turq-700); }
#area-fazer .fazer-passo-seta svg { width: var(--io-icon-md); height: var(--io-icon-md); }
/* Texto escuro sobre turquesa, nunca branco (§5). A secundária tem a mesma altura de toque. */
#area-fazer .fazer-primario { display: inline-flex; align-items: center; justify-content: center; gap: var(--io-space-2); width: 100%; min-height: var(--io-tap); padding: var(--io-space-2) var(--io-space-4); border: 0; border-radius: var(--io-radius-pill); background: var(--io-action-brand); color: var(--io-action-brand-text); font: inherit; font-size: var(--io-type-lg); font-weight: var(--fazer-peso-forte); cursor: pointer; }
#area-fazer .fazer-primario svg { width: var(--io-icon-md); height: var(--io-icon-md); }
#area-fazer .fazer-primario:hover { filter: brightness(.97); }
#area-fazer .fazer-secundario { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--io-tap); margin-top: calc(-1 * var(--io-space-2)); padding: var(--io-space-1) var(--io-space-2); border: 0; background: transparent; color: var(--io-turq-700); font: inherit; font-size: var(--io-type-md); text-decoration: underline; text-underline-offset: var(--io-space-1); cursor: pointer; }
#area-fazer .fazer-entrada-estado { margin: 0; color: var(--io-text-secondary); font-size: var(--io-type-sm); line-height: var(--io-leading-body); text-align: center; }
#area-fazer .fazer-entrada-estado[hidden] { display: none; }

@media (hover: hover) {
  #area-fazer .fazer-cartao:hover, #area-fazer .fazer-tarefa:hover { background: var(--fazer-destaque); }
}
@media (prefers-reduced-motion: reduce) {
  #area-fazer .fazer-ponto::before, #area-fazer .fazer-chip > span { transition: none; }
}

/* Bloco E (§4.5): cartão «Adicionar o meu carro» / «Adicionar o ano escolar» e o diálogo. */
#area-fazer .fazer-perfil-slot:empty { display: none; }
#area-fazer .fazer-perfil-cartao { display: grid; grid-template-columns: var(--io-tap) minmax(0, 1fr) auto; align-items: center; gap: var(--io-space-3); width: 100%; min-height: var(--io-tap); padding: var(--io-space-3); border: 0; border-radius: var(--io-radius-lg); background: var(--fazer-destaque); color: var(--io-text); font: inherit; text-align: left; cursor: pointer; }
#area-fazer .fazer-perfil-preenchido { grid-template-columns: minmax(0, 1fr) auto; }
#area-fazer .fazer-perfil-mais { display: grid; place-items: center; width: var(--io-tap); height: var(--io-tap); border-radius: var(--io-radius-round); background: var(--io-turq-100); color: var(--io-turq-700); }
#area-fazer .fazer-perfil-mais svg { width: var(--io-icon-md); height: var(--io-icon-md); }
#area-fazer .fazer-perfil-copy { display: grid; gap: var(--io-space-1); min-width: 0; }
#area-fazer .fazer-perfil-copy strong { font-size: var(--io-type-md); font-weight: var(--fazer-peso-forte); line-height: var(--io-leading-tight); overflow-wrap: anywhere; }
#area-fazer .fazer-perfil-copy > span { font-size: var(--io-type-sm); line-height: var(--io-leading-body); color: var(--io-text-secondary); }
#area-fazer .fazer-perfil-editar { min-height: var(--io-tap); display: inline-flex; align-items: center; color: var(--io-turq-700); font-weight: var(--io-weight-heading); text-decoration: underline; text-underline-offset: var(--io-space-1); }
.product-detail.fazer-perfil-dialog { box-sizing: border-box; width: min(calc(100% - var(--io-space-8)), var(--io-phone-max)); padding: var(--io-space-5); border: 0; border-radius: var(--io-radius-lg); background: var(--io-surface); color: var(--io-text); }
.fazer-perfil-dialog::backdrop { background: var(--io-scrim); }
.fazer-perfil-form { display: grid; gap: var(--io-space-4); }
.fazer-perfil-titulo { margin: 0; font-size: var(--io-type-xl); font-weight: var(--fazer-peso-forte); line-height: var(--io-leading-tight); letter-spacing: var(--io-tracking-tight); }
.fazer-perfil-subtitulo { margin: 0; color: var(--io-text-secondary); font-size: var(--io-type-sm); line-height: var(--io-leading-body); }
.fazer-perfil-form .fazer-campo { display: grid; gap: var(--io-space-1); }
.fazer-perfil-form .fazer-campo-rotulo { font-size: var(--io-type-md); font-weight: var(--io-weight-heading); }
.fazer-perfil-form .fazer-campo-input { display: grid; grid-template-columns: minmax(0, 1fr); min-height: var(--io-tap); padding: 0 var(--io-space-3); border: var(--io-stroke-hairline) solid var(--io-border-control); border-radius: var(--io-radius-md); background: var(--io-surface); }
.fazer-perfil-form .fazer-campo-input:focus-within { outline: var(--io-stroke-focus) solid var(--io-border-focus); outline-offset: 0; }
.fazer-perfil-form .fazer-campo-input input { min-width: 0; min-height: var(--io-tap); border: 0; background: transparent; color: var(--io-text); font: inherit; font-size: var(--io-type-md); outline: none; }
.fazer-perfil-form .fazer-campo-ajuda { color: var(--io-text-secondary); font-size: var(--io-type-xs); line-height: var(--io-leading-body); }
.fazer-perfil-form .fazer-entrada-estado { margin: 0; color: var(--io-danger); font-size: var(--io-type-sm); }
.fazer-perfil-form .fazer-entrada-estado[hidden] { display: none; }
.fazer-perfil-accoes { display: grid; gap: var(--io-space-2); }
.fazer-perfil-form .fazer-primario { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--io-tap); padding: var(--io-space-2) var(--io-space-4); border: 0; border-radius: var(--io-radius-pill); background: var(--io-action-brand); color: var(--io-action-brand-text); font: inherit; font-size: var(--io-type-lg); font-weight: var(--fazer-peso-forte); cursor: pointer; }
.fazer-perfil-form .fazer-primario:disabled { opacity: .6; cursor: default; }
.fazer-perfil-form .fazer-secundario-igual { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--io-tap); padding: var(--io-space-2) var(--io-space-4); border: var(--io-stroke-hairline) solid var(--io-border-control); border-radius: var(--io-radius-pill); background: transparent; color: var(--io-text); font: inherit; font-size: var(--io-type-lg); cursor: pointer; }

/* Bloco C: «Ver todas» por objecto, «em breve» e o desvio da foto para o WhatsApp. */
#area-fazer .fazer-todas-seccao { display: grid; gap: var(--io-space-2); }
#area-fazer .fazer-todas-objecto a { display: inline-flex; align-items: center; gap: var(--io-space-1); min-height: var(--io-tap); color: var(--io-text); text-decoration: none; }
#area-fazer .fazer-todas-objecto a svg { width: var(--io-icon-md); height: var(--io-icon-md); color: var(--io-turq-700); }
#area-fazer .fazer-todas-objecto .fazer-em-breve { font-size: var(--io-type-sm); }
#area-fazer .fazer-tarefa-em-breve[aria-expanded="true"] { background: var(--fazer-destaque); border-bottom-color: transparent; }
#area-fazer .fazer-foto-desvio a { color: var(--io-turq-700); font-weight: var(--io-weight-heading); }
#area-fazer .fazer-primario:disabled { opacity: .55; cursor: default; }

/* «Parceiros iollo» (mockup 21, 21 set 2026): cinco cartões no fim da home,
   só em modo de demonstração. Todas as medidas saíram do mockup, convertidas
   pela escala do bloco de tokens acima.
   A fotografia sangra até ao bordo do cartão (por isso o overflow: hidden) e o
   logótipo da marca vem de um SVG oficial, nunca redesenhado — daí object-fit:
   contain e uma medida máxima em vez de uma medida fixa. Cada marca leva a sua
   altura máxima porque cada ficheiro tem a sua proporção e a sua margem: com um
   valor único a Amazon ficava minúscula e o Continente gigante. Os cinco
   valores são as alturas medidas nos cinco cartões do mockup. */
#area-fazer .fazer-parceiros-seccao { display: grid; gap: var(--io-space-2); }
#area-fazer .fazer-parceiros-nota { margin: 0; color: var(--io-text-secondary); font-size: var(--io-type-xs); line-height: var(--io-leading-body); }
#area-fazer .fazer-parceiros { display: grid; gap: var(--fazer-parceiro-gap); margin: 0; padding: 0; list-style: none; }
#area-fazer .fazer-parceiro { display: grid; grid-template-columns: var(--fazer-parceiro-foto) minmax(0, 1fr) var(--fazer-parceiro-disco); align-items: center; gap: var(--io-space-3); width: 100%; min-height: var(--fazer-parceiro-altura); padding: 0 var(--fazer-parceiro-margem) 0 0; overflow: hidden; border: var(--io-stroke-hairline) solid var(--fazer-parceiro-borda); border-radius: var(--io-radius-md); background: var(--fazer-parceiro-fundo); box-shadow: var(--io-shadow-card); color: var(--fazer-parceiro-texto); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
/* A fotografia acompanha a altura do cartão: o cartão cresce quando o título
   parte em duas linhas (é o caso do Continente, tal como no mockup). */
#area-fazer .fazer-v2 .fazer-il-parceiro { width: 100%; height: 100%; min-height: var(--fazer-parceiro-altura); object-fit: cover; align-self: stretch; }
#area-fazer .fazer-parceiro-copy { display: grid; gap: var(--io-space-1); justify-items: start; min-width: 0; padding: var(--io-space-1) 0; }
#area-fazer .fazer-parceiro-copy strong { font-size: var(--io-type-sm); font-weight: var(--io-weight-heading); line-height: var(--io-leading-body); letter-spacing: var(--io-tracking-tight); overflow-wrap: anywhere; }
#area-fazer .fazer-parceiro-logo { display: block; width: auto; height: auto; max-width: min(100%, var(--fazer-parceiro-logo-largura)); object-fit: contain; }
#area-fazer .fazer-parceiro-logo-uber-eats { max-height: var(--fazer-parceiro-logo-uber-eats); }
#area-fazer .fazer-parceiro-logo-thefork { max-height: var(--fazer-parceiro-logo-thefork); }
#area-fazer .fazer-parceiro-logo-continente { max-height: var(--fazer-parceiro-logo-continente); }
#area-fazer .fazer-parceiro-logo-decathlon { max-width: min(100%, var(--fazer-parceiro-logo-decathlon-largura)); max-height: var(--fazer-parceiro-logo-decathlon); }
#area-fazer .fazer-parceiro-logo-amazon { max-height: var(--fazer-parceiro-logo-amazon); }
/* A seta do mockup é a mesma do resto do Fazer (fazerIcon('seta')), dentro de
   um disco turquesa claro — não o chevron das listas de tarefas. */
#area-fazer .fazer-parceiro-seta { display: grid; place-items: center; width: var(--fazer-parceiro-disco); height: var(--fazer-parceiro-disco); border-radius: var(--io-radius-round); background: var(--fazer-parceiro-disco-fundo); color: var(--fazer-parceiro-seta); }
#area-fazer .fazer-parceiro-seta svg { width: var(--fazer-parceiro-seta-icone); height: var(--fazer-parceiro-seta-icone); }
#area-fazer .fazer-parceiro:focus-visible { outline: var(--io-stroke-focus) solid var(--io-border-focus); outline-offset: var(--io-space-1); }
@media (hover: hover) {
  #area-fazer .fazer-parceiro:hover { border-color: var(--io-turq-500); }
}