/*
  PodiumOS: layout e componentes da página (estilo.css)
  Monta a composição de DESIGN-NOTAS.md com os tokens de tokens.css. Sem valores crus de cor aqui:
  cor, fonte, espaço e raio vêm de tokens.css. Sem style="" no HTML (a CSP não permite).
*/

/* ---------- Quadro e utilitários locais ---------- */
.quadro { width: 100%; max-width: 90rem; margin-inline: auto; }
.disco {
  display: block;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-full);
  background: var(--amber);
}
.acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.cartao p, .podio-colunas p { color: var(--ink-muted); }

/* O pódio em SVG (hero, CTA, 404, obrigado): as cores dos degraus vêm dos tokens da faixa */
.podio { display: block; width: 100%; height: auto; overflow: visible; }
.podio .b2 { fill: var(--bar-second); }
.podio .b1 { fill: var(--bar-first); }
.podio .b3 { fill: var(--bar-third); }
.podio .dk { fill: var(--amber); }

/* ---------- Topo ---------- */
/* O cabeçalho acompanha a rolagem; as âncoras param logo abaixo dele */
html { scroll-padding-top: 4.5rem; }
header.topo[data-theme] {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: 0;
  border-bottom: 1px solid var(--line); /* taste-skill-ignore: identidade do dono / fragmento data-ui, ver DESIGN-NOTAS */
}
.topo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 4.5rem;
}
.topo__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--alvo);
  color: var(--ink);
  text-decoration: none;
  font: 700 1.375rem / 1 var(--font-display);
  letter-spacing: -0.02em;
}
@media (max-width: 359.98px) { .topo__linha { gap: var(--space-2); } .topo__logo { font-size: 1.25rem; } }
.topo__logo img { display: block; width: 1.875rem; height: auto; }
.topo__logo .os { color: var(--amber-ink); }
.topo__links { display: none; align-items: center; gap: var(--space-1); margin: 0 auto; padding: 0; list-style: none; }
.topo__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font-size: var(--fs-body);
  text-decoration: none;
  transition: color var(--dur-toque) var(--ease);
}
.topo__links a:hover { color: var(--ink); }
@media (min-width: 720px) { .topo__links { display: flex; } }

/* ---------- 1. Hero ---------- */
/* Texto à esquerda e logo inteiro à direita. A grade cabe na primeira tela, para o pódio nunca ser cortado pela dobra. */
section.hero[data-theme] {
  padding-block: clamp(2rem, 0.5rem + 4vw, 3.5rem);
  overflow: clip;
}
.hero__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12) var(--gap); }
.hero__selo { margin-bottom: var(--space-6); }
.hero h1 { max-width: 15em; }
.hero__sub { max-width: 40ch; margin-top: var(--space-6); color: var(--ink-muted); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
/* Celular e tablet: a logo vira um detalhe pequeno no canto, ao lado do selo */
@media (max-width: 859.98px) {
  .hero__grade { position: relative; display: block; }
  .hero__podio { position: absolute; top: -0.25rem; right: var(--margem); width: 2.25rem; }
}
@media (min-width: 860px) {
  section.hero[data-theme] { padding-block: var(--space-8); }
  .hero__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    min-height: min(calc(100vh - 4.5rem - var(--space-16)), 44rem);
    min-height: min(calc(100svh - 4.5rem - var(--space-16)), 44rem);
  }
  .hero__texto { grid-column: 1 / 8; }
  .hero h1 { font-size: clamp(2.75rem, 0.75rem + 3.9vw, 4.5rem); line-height: 1.02; }
  .hero__podio {
    grid-column: 8 / 13;
    justify-self: end;
    width: min(100%, 28rem, calc((100vh - 4.5rem - var(--space-16)) * 0.9));
    width: min(100%, 28rem, calc((100svh - 4.5rem - var(--space-16)) * 0.9));
  }
}

/* ---------- 2. O que fazemos ---------- */
.faz__cartoes { display: grid; gap: var(--gap); margin-top: var(--bloco); align-items: end; }
.faz .cartao { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-8) var(--space-6); }
.cartao__link { margin-top: auto; padding-inline: 0; }
.faz .cartao--b { background: var(--painel-2); }
.faz .cartao--b h3 { max-width: 12ch; }
@media (min-width: 720px) {
  .faz__cartoes { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .faz .cartao { padding: var(--space-12) var(--space-8); }
  .faz .cartao--a { grid-column: 1 / 8; min-height: calc(var(--h-1) * var(--u) * 0.85); }
  .faz .cartao--b { grid-column: 8 / 13; min-height: calc(var(--h-2) * var(--u) * 0.8); }
}

/* ---------- 3. Como funciona ---------- */
.degraus {
  --degrau-max: calc(var(--h-1) * var(--u) * 0.9);
  margin: var(--bloco) 0 0;
  padding: 0;
  list-style: none;
}
.degraus > li { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.degraus .rotulo { margin-bottom: var(--space-1); }
.degraus h3 { margin-top: auto; }
.degraus > li[data-passo="4"] { background: var(--bar-first); border-color: var(--bar-first); color: var(--surface-0); }
.degraus > li[data-passo="4"] .rotulo { color: var(--bar-third); }
.degraus > li[data-passo="4"] p { color: var(--surface-2); }
.degraus > li[data-passo="4"] .disco { margin-bottom: var(--space-2); }
@media (min-width: 960px) {
  .degraus > li { padding: var(--space-8) var(--space-6); }
}

/* ---------- 4. Trabalhos ---------- */
.trab { display: grid; gap: var(--space-12) var(--gap); margin: var(--bloco) 0 0; }
.trab__item { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; min-width: 0; }
.moldura {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--painel-2);
  border: 1px solid var(--line); /* taste-skill-ignore: identidade do dono / fragmento data-ui, ver DESIGN-NOTAS */
  border-radius: var(--radius-lg);
}
.moldura .rotulo { padding: var(--space-1) var(--space-1) 0; }
.trab figcaption { display: grid; gap: var(--space-2); padding-inline: var(--space-1); }
.trab figcaption p { color: var(--ink-muted); }
@media (min-width: 960px) {
  .trab { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .trab__item--1 { grid-column: 1 / 8; }
  .trab__item--2 { grid-column: 8 / 13; }
  .trab__item--3 { grid-column: 1 / 13; }
  .trab__item--3 .tela { min-height: 0; }
  .trab__item--3 .tela__corpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .trab__item--3 .site__blocos { grid-template-columns: minmax(0, 1fr); }
}

/* A tela ilustrativa: interface em miniatura, desenhada em HTML, com dados fictícios.
   Cores só dos tokens; cada tela pode ter o seu tema (data-theme) para alternar escuro e claro. */
.tela {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 17.5rem;
  overflow: hidden;
  background: var(--surface-0);
  color: var(--ink);
  border: 1px solid var(--line); /* taste-skill-ignore: identidade do dono / fragmento data-ui, ver DESIGN-NOTAS */
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
  line-height: 1.4;
}
.tela__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--line); /* taste-skill-ignore: identidade do dono / fragmento data-ui, ver DESIGN-NOTAS */
  color: var(--ink-muted);
  font: 500 var(--fs-caption) / 1.2 var(--font-mono); /* taste-skill-ignore: identidade do dono / fragmento data-ui, ver DESIGN-NOTAS */
}
.tela__topo i { flex: none; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--amber); }
.tela__corpo { display: flex; flex: 1; flex-direction: column; gap: 0.625rem; padding: 0.875rem; }
.tela ul { margin: 0; padding: 0; list-style: none; }
.tela--img { padding: 0; }
.tela--img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Portaria: contadores e movimentos */
.tela__contagem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.tela__contagem li { display: grid; gap: 0.25rem; padding: 0.625rem 0.75rem; background: var(--painel); border: 1px solid var(--line); border-radius: var(--radius-sm); } /* taste-skill-ignore: identidade do dono / fragmento data-ui, ver DESIGN-NOTAS */
.tela__contagem b { font: 700 1.75rem / 1 var(--font-display); letter-spacing: -0.02em; }
.tela__contagem span { color: var(--ink-muted); }
.tela__linhas { display: grid; flex: 1; align-content: start; gap: 0.375rem; }
.tela__linhas li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--painel);
  border-radius: var(--radius-sm);
}
.tela__linhas .hora { color: var(--ink-muted); font-family: var(--font-mono); } /* taste-skill-ignore: identidade do dono / fragmento data-ui, ver DESIGN-NOTAS */
.etiqueta {
  display: inline-block;
  min-width: 4.5rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--line-strong); /* taste-skill-ignore: identidade do dono / fragmento data-ui, ver DESIGN-NOTAS */
  border-radius: var(--radius-full);
  color: var(--ink);
  font-size: var(--fs-caption);
  font-style: normal;
  text-align: center;
}
.etiqueta--forte { background: var(--bar-first); border-color: var(--bar-first); color: var(--surface-0); }

/* Barras dos blocos de serviço */
.barra { grid-column: 1 / -1; position: relative; height: 0.375rem; overflow: hidden; border-radius: var(--radius-full); background: var(--surface-2); }
.barra::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); border-radius: var(--radius-full); background: var(--bar-first); }
.barra--30 { --w: 30%; } .barra--40 { --w: 40%; } .barra--55 { --w: 55%; } .barra--70 { --w: 70%; } .barra--85 { --w: 85%; }

/* Painel de projetos: progresso e colunas */
.tela__progresso { height: 0.375rem; overflow: hidden; border-radius: var(--radius-full); background: var(--surface-2); }
.tela__progresso::before { content: ""; display: block; width: 64%; height: 100%; border-radius: var(--radius-full); background: var(--amber); }
.tela__colunas { display: grid; flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.tela__colunas > li { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; background: var(--painel); border: 1px solid var(--line); border-radius: var(--radius-sm); } /* taste-skill-ignore: identidade do dono / fragmento data-ui, ver DESIGN-NOTAS */
.tela__colunas b { font-weight: 600; }
.cartinha { display: grid; align-content: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.5rem; background: var(--painel-2); border-radius: var(--radius-sm); }
.cartinha::before, .cartinha::after { content: ""; display: block; height: 0.375rem; border-radius: var(--radius-full); background: var(--bar-second); }
.cartinha::before { width: 75%; }
.cartinha::after { width: 45%; background: var(--bar-third); }
.cartinha--curta { min-height: 1.875rem; }
.cartinha--curta::after { display: none; }

/* Site de serviços: página em miniatura */
.site__capa { display: grid; gap: 0.5rem; padding: 1rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.site__capa b { max-width: 18ch; font: 700 clamp(1.125rem, 0.8rem + 1.2vw, 1.625rem) / 1.1 var(--font-display); letter-spacing: -0.02em; }
.site__capa span { color: var(--ink-muted); }
.site__botao {
  justify-self: start;
  margin-top: 0.25rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-md);
  background: var(--amber);
  color: var(--on-amber);
  font-size: var(--fs-caption);
  font-style: normal;
  font-weight: 600;
}
.site__blocos { display: grid; flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.site__blocos > div { display: grid; align-content: space-between; gap: 0.5rem; padding: 0.625rem; background: var(--painel); border: 1px solid var(--line); border-radius: var(--radius-sm); } /* taste-skill-ignore: identidade do dono / fragmento data-ui, ver DESIGN-NOTAS */
.site__blocos b { font-weight: 600; }
@media (max-width: 479.98px) {
  .site__blocos { grid-template-columns: minmax(0, 1fr); }
  .tela__corpo { padding: 0.75rem; }
}

/* ---------- 5. Por que a PodiumOS ---------- */
.porque .podio-colunas { margin: var(--bloco) 0 0; padding: 0; list-style: none; }
.porque .podio-colunas > li {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  background: var(--painel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.porque .podio-colunas > li[data-lugar="1"] { background: var(--bar-first); border-color: var(--bar-first); color: var(--surface-0); }
.porque .podio-colunas > li[data-lugar="1"] p { color: var(--surface-2); }
.porque .podio-colunas > li[data-lugar="1"] .disco { margin-bottom: auto; }
.porque .podio-colunas > li[data-lugar="1"] h3 { margin-top: var(--space-6); }

/* ---------- 6. FAQ ---------- */
.faq__grade { display: grid; gap: var(--bloco) var(--gap); }
.faq__lista { display: grid; gap: var(--space-3); }
.faq details { background: var(--painel); border-radius: var(--radius-md); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3.5rem;
  padding: var(--space-2) var(--space-6);
  cursor: pointer;
  list-style: none;
  font: 600 var(--fs-body-lg) / 1.3 var(--font-text);
  border-radius: var(--radius-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--ink-muted); font: 400 1.5rem / 1 var(--font-text); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { max-width: 68ch; padding: 0 var(--space-6) var(--space-6); color: var(--ink-muted); }
.faq details[open] > p { animation: abre var(--dur-faq) var(--ease); }
@keyframes abre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) {
  .faq__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .faq__grade h2 { grid-column: 1 / 5; position: sticky; top: 6rem; }
  .faq__lista { grid-column: 5 / 13; }
}

/* ---------- 7. CTA e formulário ---------- */
section.cta[data-theme] { overflow: clip; }
.cta__grade { display: grid; gap: var(--bloco) var(--gap); }
.cta__texto h2 { max-width: 13ch; }
.cta__texto .body-lg { margin-top: var(--space-4); color: var(--ink-muted); }
.cta__form .cartao { padding: var(--space-6) var(--space-4); }
.cta__podio { width: min(55%, 13rem); align-self: end; }
#form-contato { display: grid; gap: var(--space-4); }
.aviso { max-width: none; }
.form__status:empty { display: none; }
.form__status { padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--painel-2); }
.form__status[data-estado="erro"] { border-color: var(--danger); color: var(--danger); }
.form__status[data-estado="erro"] a { color: inherit; }
@media (min-width: 720px) {
  .cta__form .cartao { padding: var(--space-8); }
}
@media (min-width: 960px) {
  .cta__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; }
  .cta__texto { grid-column: 1 / 6; grid-row: 1; }
  .cta__podio { grid-column: 1 / 6; grid-row: 2; width: min(100%, 20rem); }
  .cta__form { grid-column: 7 / 13; grid-row: 1 / 3; }
}

/* ---------- 8. Rodapé ---------- */
footer.rodape[data-theme] { padding-bottom: 0; overflow: clip; }
.rodape p { color: var(--ink-muted); }
.rodape__grade { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.rodape__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); margin: 0; padding: 0; list-style: none; }
.rodape__links a { display: inline-flex; align-items: center; min-height: var(--alvo); color: var(--ink); text-decoration: none; }
.rodape__links a:hover { color: var(--amber-ink); }
.rodape__links .icone-rede { width: 18px; height: 18px; margin-right: var(--space-2); flex: none; }
.rodape .rodape__nome {
  margin: var(--space-16) 0 -0.14em;
  max-width: none;
  color: var(--surface-2);
  font: 700 min(19vw, 18rem) / 0.78 var(--font-display);
  letter-spacing: -0.045em;
  white-space: nowrap;
  text-align: center;
  user-select: none;
}
@media (max-width: 719.98px) {
  footer.rodape[data-theme] { padding-bottom: calc(var(--space-16) + var(--space-6) + env(safe-area-inset-bottom)); } /* espaço para o botão flutuante */
  .rodape .rodape__nome { margin-bottom: 0; }
}

/* ---------- Página de privacidade ---------- */
.priv__texto { max-width: calc(44rem + 2 * var(--margem)); }
.priv h1 { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: var(--tr-display-lg); margin-bottom: var(--space-8); }
.priv h2 { margin: var(--space-8) 0 var(--space-2); font: 600 var(--fs-heading) / var(--lh-heading) var(--font-display); letter-spacing: -0.01em; }
.priv p + p { margin-top: var(--space-3); }
.priv p { color: var(--ink-muted); }

/* ---------- 404 e obrigado ---------- */
.fim { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow: clip; } /* taste-skill-ignore: identidade do dono / fragmento data-ui, ver DESIGN-NOTAS */
.fim__miolo { display: grid; flex: 1; align-content: center; justify-items: start; gap: var(--space-6); padding-block: var(--faixa) var(--space-12); }
.fim__miolo .topo__logo { margin-bottom: var(--space-8); }
.fim__miolo h1 { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: var(--tr-display-lg); }
.fim__miolo p { color: var(--ink-muted); font-size: var(--fs-body-lg); }
.fim__podio { width: min(100%, 17.5rem); margin-left: auto; margin-right: var(--margem); }
@media (min-width: 720px) {
  .fim__podio { width: 22rem; }
}

/* ---------- 9. Botão flutuante do WhatsApp ---------- */
.whats-fab {
  position: fixed;
  right: calc(var(--space-4) + env(safe-area-inset-right));
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 3.5rem;
  padding: 0 var(--space-6) 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--amber);
  color: var(--on-amber);
  font: 600 var(--fs-body) / 1 var(--font-text);
  text-decoration: none;
  box-shadow: var(--shadow-raised);
  transition: background-color var(--dur-toque) var(--ease), transform var(--dur-toque) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.whats-fab:hover { background: var(--amber-hover); transform: translateY(-2px); }
.whats-fab:active { background: var(--amber-press); transform: none; }
.whats-fab:focus-visible { outline-color: var(--ink); outline-offset: 3px; }
.whats-fab[hidden], .whats-fab--oculto { display: none; }
.icone-whats { flex: none; width: 1.625rem; height: 1.625rem; fill: currentColor; }
@media (max-width: 520px) { .whats-fab__resto { display: none; } }

/* ---------- 10. Questionário de orçamento ---------- */
.trava, .trava body { overflow: hidden; }
.orc {
  position: fixed;
  right: calc(var(--space-4) + env(safe-area-inset-right));
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(26rem, calc(100vw - var(--space-8)));
  height: min(40rem, calc(100vh - var(--space-8)));
  height: min(40rem, calc(100dvh - var(--space-8)));
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  animation: orc-abre var(--dur-faq) var(--ease);
}
section.orc[data-theme] { padding-block: 0; }
.orc[hidden] { display: none; }
.orc:focus { outline: none; }
@keyframes orc-abre { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.orc__topo { display: flex; flex: none; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
.orc__topo img { display: block; width: 1.75rem; height: auto; }
.orc__topo h2 { font: 700 var(--fs-body) / 1.25 var(--font-display); letter-spacing: -0.01em; }
.orc__topo p { color: var(--ink-muted); font-size: var(--fs-caption); line-height: 1.3; }
.orc__fechar {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--alvo);
  height: var(--alvo);
  margin-left: auto;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.orc__fechar:hover { background: var(--surface-2); }
.orc__fechar svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.orc__progresso { flex: none; height: 0.25rem; background: var(--surface-2); }
.orc__progresso i { display: block; width: 0; height: 100%; background: var(--amber); transition: width var(--dur-faq) var(--ease); }
.orc__conversa {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
  padding: var(--space-4);
  overflow-y: auto;
  background: var(--surface-0);
  overscroll-behavior: contain;
}
.orc__msg { max-width: 88%; padding: 0.625rem var(--space-3); border-radius: var(--radius-lg); font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.orc__msg--bot { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: var(--radius-sm); }
.orc__msg--voce { align-self: flex-end; background: var(--amber); color: var(--on-amber); border-bottom-right-radius: var(--radius-sm); }
.orc__msg--nova { animation: abre var(--dur-faq) var(--ease); }
.orc__passo { display: block; margin-bottom: var(--space-1); color: var(--ink-muted); font: 500 var(--fs-caption) / 1.3 var(--font-mono); } /* taste-skill-ignore: identidade do dono / fragmento data-ui, ver DESIGN-NOTAS */
.orc__resumo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; }
.orc__resumo dt { color: var(--ink-muted); }
.orc__resumo dd { margin: 0; }
.orc__resposta {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 66%;
  padding: var(--space-3) var(--space-4) var(--space-4);
  overflow-y: auto;
  border-top: 1px solid var(--line);
}
.orc__opcoes { display: grid; gap: var(--space-2); }
.orc__opcao {
  min-height: var(--alvo);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font: 500 var(--fs-body) / 1.3 var(--font-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-toque) var(--ease), background-color var(--dur-toque) var(--ease);
}
.orc__opcao:hover { border-color: var(--amber); background: var(--surface-2); }
.orc__opcao[aria-pressed="true"] { border-color: var(--amber); }
.orc .campo textarea { min-height: 5.5rem; }
.orc__dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.orc__pe { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.orc__conta { color: var(--ink-muted); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.orc__link {
  min-height: var(--alvo);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: 500 0.875rem / 1.2 var(--font-text);
  cursor: pointer;
}
.orc__link:hover { color: var(--ink); }
.orc__link--centro { align-self: center; }
.orc__enviar { width: 100%; }
.orc__copia { width: 100%; min-height: 6rem; padding: var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink); font: 400 var(--fs-caption) / 1.5 var(--font-text); }
.orc__copia[hidden] { display: none; }
@media (max-width: 520px) {
  .orc {
    top: var(--vvt, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: var(--vvh, 100dvh);
    border: 0;
    border-radius: 0;
  }
  .orc__topo { padding-top: calc(var(--space-3) + env(safe-area-inset-top)); }
  .orc__resposta { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .orc, .orc__msg--nova { animation: none; }
  .whats-fab:hover { transform: none; }
}
@media print { .whats-fab, .orc { display: none !important; } }