/* Layout "Mostruário": leve, com cara de loja. Fundo branco, cartões com
   canto bem redondo e sombra macia, busca grande na capa e as categorias
   com foto logo embaixo. Letra normal, sem máquina de escrever. Vem depois
   do institucional.css e só troca desenho. */

[data-layout="mostruario"] .inst {
  --i-fundo: #FFFFFF;
  --i-papel: #FFFFFF;
  --i-alt: color-mix(in oklab, var(--cor-marca) 6%, #F7F6F3);
  --i-suave: color-mix(in oklab, var(--cor-marca) 10%, #FFFFFF);
  --i-tinta: #1D1C1A;
  --i-tinta-2: #5B5853;
  --i-tinta-3: #8C8883;
  --i-linha: rgba(29, 28, 26, .08);
  --i-linha-forte: rgba(29, 28, 26, .16);
  --i-grade: transparent;
  --i-visor: color-mix(in oklab, var(--cor-marca) 9%, #FFFFFF);
  --i-sobre-visor: #1D1C1A;
  --i-rodape: #F4F3EF;
  --i-sombra: 0 2px 6px rgba(29, 28, 26, .05), 0 22px 48px -22px color-mix(in oklab, var(--cor-marca) 40%, rgba(29, 28, 26, .5));
  --i-sombra-leve: 0 1px 3px rgba(29, 28, 26, .05), 0 12px 28px -16px rgba(29, 28, 26, .22);
  color-scheme: light;
}
[data-layout="mostruario"] body.inst { background-image: none; }

/* Títulos: largura normal, pesados e macios. */
[data-layout="mostruario"] .inst :is(h1, h2) { font-stretch: 100%; font-weight: 800; letter-spacing: -.035em; }
[data-layout="mostruario"] .inst h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.04; }

/* Rótulo: uma pílula clarinha na cor da marca, sem número. */
[data-layout="mostruario"] .inst-rotulo {
  padding: 8px 14px; margin-bottom: 16px; border-radius: 999px; background: var(--i-suave);
  font: 700 13px/1 var(--i-letra); letter-spacing: 0; color: var(--i-marca);
}
[data-layout="mostruario"] .inst-rotulo::after { display: none; }
[data-layout="mostruario"] .inst-rotulo > span { display: none; }

[data-layout="mostruario"] .inst-pilula { font-stretch: 100%; }
[data-layout="mostruario"] .inst-pilula-contorno { border-color: var(--i-linha-forte); }

/* Topo branco. */
[data-layout="mostruario"] .inst-topo { background: rgba(255, 255, 255, .88); }
[data-layout="mostruario"] .inst-marca-nome { font-stretch: 100%; font-weight: 800; }
[data-layout="mostruario"] .inst-marca-lugar { font-family: var(--i-letra); font-size: 12.5px; }
[data-layout="mostruario"] .inst-faixa-demo, [data-layout="mostruario"] .inst .troca-layout { background: var(--i-alt); color: var(--i-tinta-2); }
[data-layout="mostruario"] .inst .troca-layout-rotulo { font-family: var(--i-letra); font-weight: 700; }
[data-layout="mostruario"] .inst .troca-layout a { border-color: var(--i-linha-forte); color: var(--i-tinta); }
[data-layout="mostruario"] .inst .troca-layout a[aria-current="true"] { background: var(--i-tinta); color: #FFFFFF; border-color: var(--i-tinta); }
[data-layout="mostruario"] .inst-pilula-add.inst-pilula-escolher { background: #FFFFFF; color: var(--i-tinta); border-color: var(--i-linha-forte); }
[data-layout="mostruario"] .inst-pilula-add.inst-pilula-escolher:hover { background: var(--i-tinta); color: #FFFFFF; border-color: var(--i-tinta); }

/* ---------------------------------------------------------------- capa */
.ms-capa {
  position: relative; padding: clamp(36px, 5.5vw, 76px) 0 clamp(28px, 4vw, 48px) !important; overflow: hidden;
  background:
    radial-gradient(60% 70% at 88% 18%, color-mix(in oklab, var(--cor-marca) 16%, transparent), transparent 70%),
    radial-gradient(45% 60% at 0% 100%, color-mix(in oklab, var(--cor-marca) 9%, transparent), transparent 70%);
}
.ms-capa-grade { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
[data-layout="mostruario"] .ms-capa h1 { margin: 20px 0 16px; font-size: clamp(40px, 5.2vw, 72px); line-height: 1; }
.ms-busca { display: flex; gap: 10px; margin-top: 28px; padding: 8px; border-radius: 999px; background: #FFFFFF; box-shadow: var(--i-sombra); max-width: 600px; }
[data-layout="mostruario"] .ms-busca .inst-busca { flex: 1; height: 54px; border: 0; background: transparent; box-shadow: none; padding-left: 14px; }
[data-layout="mostruario"] .ms-busca .inst-busca input { font-size: 17px; }
.ms-busca .inst-pilula { height: 54px; padding: 0 28px; font-size: 16px; }
.ms-busca:has(input:focus) { box-shadow: var(--i-sombra), 0 0 0 4px var(--i-realce); }
.ms-ou { margin: 14px 0 0 22px; color: var(--i-tinta-2); font-size: 15px; }

.ms-capa-foto { position: relative; margin: 0; }
/* height:auto (v107): sem ele valia a altura do atributo da imagem (675px) e a
   proporção era ignorada — a foto ficava altíssima, no celular mais ainda. */
/* (v117) A foto num recorte: o zoom da capa (Visual da página) fica dentro do
   quadro arredondado, e a altura cresce pelo --capa-altura. */
.ms-capa-recorte {
  display: block; overflow: hidden; border-radius: 36px; box-shadow: var(--i-sombra);
  aspect-ratio: 4 / calc(3.3 * var(--capa-altura, 1));
}
.ms-capa-recorte > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ms-cartao-flutua {
  position: absolute; left: -32px; bottom: 34px; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px;
  border-radius: 24px; background: #FFFFFF; box-shadow: var(--i-sombra); text-decoration: none; max-width: calc(100% - 20px);
}
.ms-cartao-flutua img { width: 58px; height: 58px; border-radius: 16px; object-fit: cover; flex: none; }
.ms-cartao-flutua span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ms-cartao-flutua small { font-size: 12px; font-weight: 700; color: var(--i-marca); }
.ms-cartao-flutua b { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-cartao-flutua em { margin-left: 6px; font-style: normal; font-weight: 800; font-size: 16px; white-space: nowrap; }
.ms-cartao-flutua em small { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 600; color: var(--i-tinta-2); }
.ms-selo-entrega {
  position: absolute; right: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: var(--i-sombra-leve); font-size: 14px; font-weight: 700;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ms-selo-entrega .ic { color: var(--i-marca); }

/* As categorias com foto, embaixo da capa. */
/* (v129) A faixa (com as setas no computador) e o trilho que rola; 4px em cima para o cartão subir no hover sem
   ser cortado. */
.ms-atalhos-faixa { margin-top: calc(clamp(32px, 4.5vw, 56px) - 4px); }
.ms-atalhos { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 6px; }
.ms-atalhos::-webkit-scrollbar { display: none; }
.ms-atalho {
  flex: 1 0 200px; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 12px 18px 12px 12px; border-radius: 24px; background: #FFFFFF; border: 1px solid var(--i-linha);
  text-decoration: none; transition: box-shadow .25s, transform .25s, border-color .25s;
}
.ms-atalho:hover { box-shadow: var(--i-sombra-leve); transform: translateY(-2px); border-color: transparent; }
.ms-atalho-foto { grid-row: span 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; overflow: hidden; background: var(--i-alt); color: var(--i-marca); }
.ms-atalho-foto img { width: 100%; height: 100%; object-fit: cover; }
.ms-atalho-nome { align-self: end; font-weight: 750; font-size: 16px; line-height: 1.2; }
.ms-atalho small { align-self: start; font-size: 13px; color: var(--i-tinta-3); }

/* ------------------------------------------------------------- seções */
[data-layout="mostruario"] .inst-secao { border-top: 0; }
[data-layout="mostruario"] #calculadora, [data-layout="mostruario"] #empresa, [data-layout="mostruario"] #contato { background: var(--i-alt); }

/* Catálogo: cartão de loja, foto quadrada por dentro, botão largo embaixo. */
[data-layout="mostruario"] .inst-filtros { --i-filtros-fundo: rgba(255, 255, 255, .92); }
[data-layout="mostruario"] .inst-busca { background: var(--i-alt); border-color: transparent; }
[data-layout="mostruario"] .inst-chip { border-color: transparent; background: var(--i-alt); font-weight: 600; }
[data-layout="mostruario"] .inst-chip small { font-family: var(--i-letra); }
[data-layout="mostruario"] .inst-chip[aria-current="true"] { background: var(--i-tinta); color: #FFFFFF; }
[data-layout="mostruario"] .inst-contagem { font-family: var(--i-letra); font-size: 13.5px; }
[data-layout="mostruario"] .inst-fichas { gap: 22px; }
[data-layout="mostruario"] .inst-ficha { border: 0; border-radius: 28px; background: #FFFFFF; box-shadow: var(--i-sombra-leve); padding: 10px; }
[data-layout="mostruario"] .inst-ficha:hover { box-shadow: var(--i-sombra); transform: translateY(-3px); }
[data-layout="mostruario"] .inst-ficha-foto { aspect-ratio: 1; border-radius: 20px; }
[data-layout="mostruario"] .inst-selo { left: 10px; top: 10px; font-family: var(--i-letra); font-weight: 700; font-size: 12px; }
[data-layout="mostruario"] .inst-ficha-corpo { padding: 14px 8px 6px; }
[data-layout="mostruario"] .inst-ficha-cat { font-family: var(--i-letra); font-size: 12.5px; }
[data-layout="mostruario"] .inst-ficha-nome { font-size: 17.5px; font-weight: 750; }
[data-layout="mostruario"] .inst-ficha-pe { flex-wrap: wrap; gap: 12px; }
[data-layout="mostruario"] .inst-preco b { font-family: var(--i-letra); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
[data-layout="mostruario"] .inst-preco s, [data-layout="mostruario"] .inst-preco-a-partir { font-family: var(--i-letra); }
[data-layout="mostruario"] .inst-preco-consulta, [data-layout="mostruario"] .inst-preco-falta { font-family: var(--i-letra); font-weight: 700; }
[data-layout="mostruario"] .inst-pilula-add { flex: 1 0 100%; height: 44px; background: var(--i-botao); border-color: var(--i-botao); color: var(--i-sobre-botao); }
[data-layout="mostruario"] .inst-pilula-add:hover { background: var(--i-botao-2); border-color: var(--i-botao-2); }
[data-layout="mostruario"] .inst-ficha-pe .inst-passo { flex: 1 0 100%; justify-content: space-between; height: 44px; }
[data-layout="mostruario"] .inst-passo output, [data-layout="mostruario"] .inst-passo input { font-family: var(--i-letra); font-weight: 700; }
[data-layout="mostruario"] .inst .dica { border-style: solid; border-color: transparent; background: var(--i-alt); }

/* Quem atende: cartão macio, foto redonda com sombra. */
[data-layout="mostruario"] .inst-pessoa { border: 0; border-radius: 28px; box-shadow: var(--i-sombra-leve); }
[data-layout="mostruario"] .inst-pessoa-foto { box-shadow: var(--i-sombra-leve); }
[data-layout="mostruario"] .inst-pessoa-nome { font-stretch: 100%; font-weight: 800; }

/* Calculadora: painel macio, abas como controle segmentado. */
[data-layout="mostruario"] .inst-calc { background: #FFFFFF; background-image: none; border: 0; box-shadow: var(--i-sombra-leve); border-radius: 32px; }
[data-layout="mostruario"] .inst-calc-abas { display: inline-flex; padding: 5px; gap: 4px; border-radius: 999px; background: var(--i-alt); }
[data-layout="mostruario"] .inst-calc-aba { border: 0; background: transparent; height: 40px; font-weight: 600; }
[data-layout="mostruario"] .inst-calc-aba[aria-selected="true"] { background: #FFFFFF; color: var(--i-tinta); box-shadow: 0 2px 8px rgba(29, 28, 26, .12); }
[data-layout="mostruario"] .inst-entrada, [data-layout="mostruario"] .inst-campo :is(input, select, textarea) { background: var(--i-alt); border-color: transparent; }
[data-layout="mostruario"] .inst-campo .inst-entrada input { background: none; font-family: var(--i-letra); font-weight: 700; }
[data-layout="mostruario"] .inst-entrada em { font-family: var(--i-letra); }
[data-layout="mostruario"] .inst-calc-resultado { border-radius: 26px; }
[data-layout="mostruario"] .inst-calc-titulo { font-family: var(--i-letra); font-weight: 700; letter-spacing: 0; font-size: 13.5px; }
[data-layout="mostruario"] .inst-calc-lista li { border-bottom-color: var(--i-linha-forte); }
[data-layout="mostruario"] .inst-calc-lista b { font-family: var(--i-letra); font-weight: 800; letter-spacing: -.03em; color: var(--i-marca); }
[data-layout="mostruario"] .inst-calc-lista small { font-family: var(--i-letra); }

/* Serviços: quatro cartões lado a lado, ícone em círculo clarinho. */
[data-layout="mostruario"] .inst-servicos { grid-template-columns: minmax(0, 1fr); gap: 36px; }
[data-layout="mostruario"] .inst-servicos-lado { position: static; max-width: 640px; }
[data-layout="mostruario"] .inst-foto-moldura { display: none; }
[data-layout="mostruario"] .inst-servicos-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
[data-layout="mostruario"] .inst-servicos-lista li {
  grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; padding: 26px 22px; border: 0; border-radius: 28px; background: var(--i-alt);
}
[data-layout="mostruario"] .inst-servicos-lista li:last-child { border-bottom: 0; }
[data-layout="mostruario"] .inst-servico-icone { width: 58px; height: 58px; border-radius: 999px; background: #FFFFFF; border: 0; box-shadow: var(--i-sombra-leve); }
[data-layout="mostruario"] .inst-servicos-lista h3 { font-size: 19px; font-weight: 800; font-stretch: 100%; }
[data-layout="mostruario"] .inst-servico-num { display: none; }

/* A empresa */
[data-layout="mostruario"] .inst-empresa-foto-a { border-radius: 36px; }
[data-layout="mostruario"] .inst-empresa-foto-b { border-radius: 28px; border-color: var(--i-alt); }
[data-layout="mostruario"] .inst-empresa-selo { font-family: var(--i-letra); font-weight: 700; }

/* Como funciona: quatro cartões numerados. */
[data-layout="mostruario"] .inst-trilha { gap: 18px; }
[data-layout="mostruario"] .inst-trilha::before { display: none; }
[data-layout="mostruario"] .inst-trilha li { padding: 26px 22px; border-radius: 28px; border: 1px solid var(--i-linha); }
[data-layout="mostruario"] .inst-trilha-num { border: 0; background: var(--i-suave); color: var(--i-marca); font: 800 18px/1 var(--i-letra); margin-bottom: 18px; }
[data-layout="mostruario"] .inst-trilha li:first-child .inst-trilha-num { background: var(--i-botao); color: var(--i-sobre-botao); }

/* Onde fica */
[data-layout="mostruario"] .inst-mapa, [data-layout="mostruario"] .inst-local-foto { border: 0; border-radius: 36px; box-shadow: var(--i-sombra-leve); }
[data-layout="mostruario"] .inst .semana b { font-family: var(--i-letra); }
[data-layout="mostruario"] .inst .semana li { border-bottom-style: solid; border-bottom-color: var(--i-linha); }
[data-layout="mostruario"] .inst .semana b { font-weight: 700; font-size: 14.5px; }
[data-layout="mostruario"] .inst .semana em { font-family: var(--i-letra); font-weight: 700; }

/* Contato e perguntas */
[data-layout="mostruario"] .inst-form :is(input, select, textarea) { background: #FFFFFF; border-color: transparent; box-shadow: var(--i-sombra-leve); }
[data-layout="mostruario"] .inst-canais { border: 0; border-radius: 32px; }
[data-layout="mostruario"] .inst-canal-icone { border-radius: 999px; background: var(--i-suave); }
[data-layout="mostruario"] .inst-canais small { font-family: var(--i-letra); font-size: 12.5px; }
[data-layout="mostruario"] .inst-qa > div { padding: 20px 24px; margin-bottom: 12px; border: 0; border-radius: 22px; background: var(--i-alt); }
[data-layout="mostruario"] .inst-qa > div:last-child { border-bottom: 0; }

/* Chamada: um painel redondo na cor da marca, dentro da página. */
[data-layout="mostruario"] .inst-chamada { background: transparent; background-image: none; padding: 0 0 clamp(40px, 5.5vw, 72px); color: var(--cor-sobre-marca); }
[data-layout="mostruario"] .inst-chamada-in {
  padding: clamp(40px, 6vw, 80px); border-radius: 40px; background: var(--cor-marca);
  background-image: radial-gradient(70% 90% at 100% 0%, color-mix(in oklab, #FFFFFF 18%, transparent), transparent 60%);
  width: calc(100% - 2 * clamp(16px, 4vw, 40px)); max-width: calc(1240px - 2 * clamp(16px, 4vw, 40px));
}
[data-layout="mostruario"] .inst-chamada h2 { font-stretch: 100%; font-weight: 800; letter-spacing: -.04em; }

/* Rodapé claro. */
[data-layout="mostruario"] .inst-rodape { color: var(--i-tinta-2); }
[data-layout="mostruario"] .inst-rodape a, [data-layout="mostruario"] .inst-rodape-nome { color: var(--i-tinta); }
[data-layout="mostruario"] .inst-rodape-titulo { color: var(--i-tinta-3) !important; font-family: var(--i-letra) !important; font-weight: 700 !important; }
[data-layout="mostruario"] .inst-rodape-fim { border-top-color: var(--i-linha); color: var(--i-tinta-3); font-family: var(--i-letra); }
[data-layout="mostruario"] .inst-rodape-redes .rede { color: var(--i-tinta); }

/* Lista do orçamento */
[data-layout="mostruario"] .inst-orc { border-radius: 28px 0 0 28px; }
[data-layout="mostruario"] .inst-orc .inst-rotulo { background: var(--i-suave); }
[data-layout="mostruario"] .inst-orc-valor, [data-layout="mostruario"] .inst-orc-subtotal, [data-layout="mostruario"] .inst-orc-resumo b { font-family: var(--i-letra); font-weight: 700; }
[data-layout="mostruario"] .inst-orc-resumo { background: var(--i-alt); border-radius: 22px; }

/* ---------------------------------------------------------------- telas */
@media (max-width: 1080px) {
  [data-layout="mostruario"] .inst-servicos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .ms-capa-grade { grid-template-columns: minmax(0, 1fr); }
  .ms-capa-recorte { aspect-ratio: 16 / calc(10 * var(--capa-altura, 1)); }
  .ms-cartao-flutua { left: 14px; bottom: 14px; }
  [data-layout="mostruario"] .inst-trilha { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
}
@media (max-width: 720px) {
  [data-layout="mostruario"] .ms-capa h1 { font-size: 38px; }
  .ms-busca { padding: 6px; }
  [data-layout="mostruario"] .ms-busca .inst-busca { height: 48px; padding-left: 10px; }
  [data-layout="mostruario"] .ms-busca .inst-busca input { font-size: 16px; }
  .ms-busca .inst-pilula { height: 48px; padding: 0 18px; }
  .ms-ou { margin-left: 12px; }
  .ms-capa-recorte { border-radius: 28px; aspect-ratio: 16 / calc(9 * var(--capa-altura, 1)); }
  .ms-selo-entrega { top: 12px; right: 12px; padding: 8px 12px; font-size: 13px; }
  .ms-atalhos-faixa { margin-top: 22px; }
  .ms-atalho { flex: 0 0 190px; }
  [data-layout="mostruario"] .inst-ficha { padding: 8px; border-radius: 22px; }
  [data-layout="mostruario"] .inst-selo { left: 6px; top: 6px; padding: 4px 7px; font-size: 10px; }
  [data-layout="mostruario"] .inst-ficha-foto { border-radius: 16px; aspect-ratio: 1; height: auto; min-height: 0; align-self: start; }
  [data-layout="mostruario"] .inst-ficha-corpo { padding: 6px 6px 4px 12px; }
  [data-layout="mostruario"] .inst-pilula-add { flex: 0 0 auto; }
  [data-layout="mostruario"] .inst-ficha-pe .inst-passo { flex: 0 0 auto; }
  [data-layout="mostruario"] .inst-calc-abas { display: flex; }
  [data-layout="mostruario"] .inst-servicos-lista { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  [data-layout="mostruario"] .inst-servicos-lista li { grid-template-columns: 58px minmax(0, 1fr); padding: 20px 18px; }
  [data-layout="mostruario"] .inst-trilha { grid-template-columns: minmax(0, 1fr); }
  [data-layout="mostruario"] .inst-trilha li { padding: 20px 18px; }
  [data-layout="mostruario"] .inst-trilha li::before { display: none; }
  [data-layout="mostruario"] .inst-trilha-num { margin: 0; }
  [data-layout="mostruario"] .inst-chamada-in { border-radius: 30px; }
  [data-layout="mostruario"] .inst-orc { border-radius: 0; }
}

/* v107: com a frase numa linha em cima, o texto começa logo embaixo dela (no
   meio da foto sobrava um vão); e no celular o cartão do mais pedido fica
   menor, para não cobrir a foto (que agora é 16 × 9). */
.capa-com-linha .ms-capa-grade { align-items: start; }
.capa-com-linha .ms-capa-texto .inst-capa-linha { margin-top: 6px; }
@media (max-width: 720px) {
  .ms-cartao-flutua { left: 10px; right: 10px; bottom: 10px; gap: 10px; padding: 7px 12px 7px 7px; border-radius: 18px; }
  .ms-cartao-flutua img { width: 42px; height: 42px; border-radius: 12px; }
  .ms-cartao-flutua small { font-size: 11px; }
  .ms-cartao-flutua b { font-size: 14px; }
  .ms-cartao-flutua em { font-size: 14.5px; }
  .ms-selo-entrega { padding: 6px 10px; font-size: 12px; }
}

/* v135: os mais pedidos embaixo da busca (o vão ao lado da foto da capa) e os três passos na faixa da
   chamada (o lado direito vazio). */
.ms-mais { margin-top: 24px; max-width: 600px; }
[data-layout="mostruario"] .ms-capa .ms-mais h2 { margin: 0 0 10px 6px; line-height: 1.3; font-stretch: 100%; font-family: var(--i-letra); font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--i-tinta-2); }
.ms-mais ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ms-mais-item { display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 9px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35); }
.ms-mais-foto { flex: none; display: block; width: 58px; height: 58px; border-radius: 16px; overflow: hidden; }
.ms-mais-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-mais-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--i-tinta); text-decoration: none; }
.ms-mais-nome b { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-mais-nome small { color: var(--i-tinta-2); font-size: 14px; }
.ms-mais-nome small small { font-size: inherit; margin-right: 4px; }
.ms-mais-nome:hover b { color: var(--cor-marca); }
.ms-mais-pe { flex: none; display: flex; align-items: center; min-height: 42px; }
[data-layout="mostruario"] .ms-mais-pe .inst-pilula-add, [data-layout="mostruario"] .ms-mais-pe .inst-pilula-add.inst-pilula-escolher { width: 42px; height: 42px; min-width: 0; padding: 0; border-radius: 50%; justify-content: center; background: var(--cor-marca); border-color: var(--cor-marca); color: var(--cor-sobre-marca); }
[data-layout="mostruario"] .ms-mais-pe .inst-pilula-add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-layout="mostruario"] .ms-mais-pe .inst-pilula-add .ic { margin: 0; }
.ms-mais-pe .inst-pilula-add:hover { filter: brightness(1.08); }
.ms-mais + .ms-ou { margin-top: 12px; }

[data-layout="mostruario"] .inst-chamada-in.com-passos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: clamp(32px, 5vw, 64px); }
.inst-chamada-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.inst-chamada-passos li { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 24px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); }
.inst-chamada-passos i { flex: none; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: #FFFFFF; color: var(--cor-marca); font-style: normal; font-weight: 800; font-size: 18px; }
.inst-chamada-passos b { display: block; font-size: 18px; line-height: 1.25; }
.inst-chamada-passos small { display: block; margin-top: 2px; font-size: 14.5px; opacity: .85; }
@media (max-width: 980px) {
  .ms-mais { max-width: none; }
  [data-layout="mostruario"] .inst-chamada-in.com-passos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ms-mais { margin-top: 18px; }
  .ms-mais-item { gap: 12px; padding: 8px; border-radius: 20px; }
  .ms-mais-foto { width: 52px; height: 52px; border-radius: 14px; }
  .ms-mais-nome b { font-size: 15px; }
  .ms-mais-nome small { font-size: 13.5px; }
  .inst-chamada-passos li { padding: 14px 16px; border-radius: 20px; gap: 14px; }
  .inst-chamada-passos i { width: 38px; height: 38px; font-size: 16px; }
  .inst-chamada-passos b { font-size: 16px; }
  .inst-chamada-passos small { font-size: 13.5px; }
}