/* ═══════════════════════════════════════════════════════════════════════════
 * arke-comercial.css — a página do módulo COMERCIAL.
 *
 * COR: âmbar #f59e0b, a cor registrada do módulo no sistema. Cabe: o Comercial
 * é o módulo do MOVIMENTO, e âmbar é a única cor da paleta que já significa
 * "em curso" — nem parado (cinza), nem resolvido (verde), nem alarme (vermelho).
 *
 * A ASSINATURA DESTA PÁGINA É A ENTIDADE QUE NÃO MUDA.
 * Todas as outras páginas de módulo abrem com uma constelação. Esta abre com
 * UM card só — a mesma empresa — e o que se move ao redor dele é o ESTADO da
 * relação. Isso não é escolha estética: é a tese do módulo. Lead, oportunidade,
 * proposta, venda e cliente não são cinco cadastros; são valores de uma coluna
 * (`emp_empresas.estagio_funil`) na mesma linha.
 *
 * O QUE A PÁGINA EVITA, por ordem do briefing: CRM azul genérico, card de
 * pipeline sem contexto, telefone gigante, vendedor sorrindo, troféu, seta de
 * crescimento. A metáfora aqui é a CONVERSA que continua — não o funil que
 * despeja.
 * ═══════════════════════════════════════════════════════════════════════════ */

.tema-com {
  --accent:        #F59E0B;      /* âmbar registrado do módulo */
  --accent-rgb:    245, 158, 11;
  --accent-text:   #F7B84B;

  --com-fundo:     #08080A;
  --com-superficie:#0E0E11;
  --com-tinta:     #F2EFE9;
  --com-tinta-2:   #A29C93;
  --com-tinta-3:   #6A645C;
  --com-fio:       rgba(242,239,233,.09);
  --com-fio-forte: rgba(242,239,233,.17);

  --com-papel:     #F0EDE6;
  --com-papel-2:   #DEDACF;
  --com-papel-tinta:#16130C;
  --com-papel-tinta-2:#5C5748;

  /* Temperatura da oportunidade — coluna real `temperature` em crm_deals */
  --t-quente:  #D8733F;  --t-quente-rgb:  216, 115, 63;
  --t-morna:   #C9992E;  --t-morna-rgb:   201, 153, 46;
  --t-fria:    #6E90A2;  --t-fria-rgb:    110, 144, 162;
  --t-ganho:   #6E9E7C;  --t-ganho-rgb:   110, 158, 124;
  --t-perdido: #B0564F;  --t-perdido-rgb: 176, 86, 79;

  background: var(--com-fundo);
  color: var(--com-tinta);
}
.tema-com .ark-sec--surface { background: var(--com-superficie); }
.tema-com .ark-sec--deep, .tema-com .ark-final { background: var(--com-fundo); }
.tema-com .ark-lead { color: var(--com-tinta-2); }
.tema-com .ark-lead strong { color: var(--com-tinta); }

.com-k { display: block; font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--com-tinta-3); }
.com-mono { font-family: var(--font-mono, monospace); }

/* ── ETIQUETAS DE ESTADO ───────────────────────────────────────────────── */
.com-e {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 3px;
  font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap;
}
.com-e::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.com-e[data-t="quente"]  { color: var(--t-quente);  background: rgba(var(--t-quente-rgb),.14);  border: 1px solid rgba(var(--t-quente-rgb),.45); }
.com-e[data-t="morna"]   { color: var(--t-morna);   background: rgba(var(--t-morna-rgb),.13);   border: 1px solid rgba(var(--t-morna-rgb),.44); }
.com-e[data-t="fria"]    { color: var(--t-fria);    background: rgba(var(--t-fria-rgb),.13);    border: 1px solid rgba(var(--t-fria-rgb),.44); }
.com-e[data-t="ganho"]   { color: var(--t-ganho);   background: rgba(var(--t-ganho-rgb),.13);   border: 1px solid rgba(var(--t-ganho-rgb),.42); }
.com-e[data-t="perdido"] { color: var(--t-perdido); background: rgba(var(--t-perdido-rgb),.15); border: 1px solid rgba(var(--t-perdido-rgb),.46); }
.com-e[data-t="neutro"]  { color: var(--com-tinta-3); background: rgba(242,239,233,.035);       border: 1px solid var(--com-fio-forte); }

.com-selo {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 9px; border-radius: 3px;
  font-family: var(--font-mono, monospace); font-size: 8.5px; letter-spacing: .15em;
  text-transform: uppercase; line-height: 1.55; max-width: 100%; overflow-wrap: anywhere;
}
.com-selo::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex: 0 0 auto; align-self: center; }
.com-selo[data-s="real"]    { color: #7FB08C; background: rgba(74,124,89,.13); border: 1px solid rgba(74,124,89,.4); }
.com-selo[data-s="exemplo"] { color: #D8A93F; background: rgba(184,134,11,.12); border: 1px solid rgba(184,134,11,.4); }
.com-selo[data-s="futuro"]  { color: #7E9AA8; background: rgba(91,123,138,.14); border: 1px solid rgba(91,123,138,.44); }
.com-selo[data-s="legado"]  { color: #B0564F; background: rgba(176,86,79,.13); border: 1px solid rgba(176,86,79,.42); }

.com-nota {
  margin-top: 20px; padding: 14px 17px; border-radius: 3px; font-size: 12.5px; line-height: 1.62;
  color: var(--com-tinta-2); background: rgba(242,239,233,.03);
  border: 1px solid var(--com-fio); border-left: 2px solid rgba(var(--accent-rgb),.5);
}
.com-nota strong { color: var(--com-tinta); font-weight: 600; }
.com-nota em { font-style: italic; color: var(--accent-text); }
.com-nota code { font-family: var(--font-mono, monospace); color: var(--accent-text); font-size: .95em; }

/* ═══════════════════════════════════════════════════════════════════════════
   §01 · HERO
   ═══════════════════════════════════════════════════════════════════════════ */
.com-hero { position: relative; padding-block: clamp(104px, 12vw, 176px) clamp(56px, 6.4vw, 92px); overflow: hidden; }
.com-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 62% at 50% 8%, rgba(var(--accent-rgb),.07), transparent 68%);
}
.com-hero > .container { position: relative; z-index: 2; }
.com-hero__t { margin: 0; font-size: clamp(32px, 5.2vw, 76px); font-weight: 800; line-height: .97; letter-spacing: -.038em; color: var(--com-tinta); }
.com-hero__t em {
  display: block; margin-top: .16em; font-family: 'Playfair Display', Georgia, serif;
  font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--accent-text);
  font-size: .84em; line-height: 1.02;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §06 · §21 — A PEÇA CENTRAL: A ENTIDADE QUE NÃO MUDA
   Um card só. O que muda é o estado da relação em volta dele.
   ═══════════════════════════════════════════════════════════════════════════ */
.com-palco { margin-top: clamp(38px, 4.4vw, 60px); }

/* Trilho de estados — o funil como régua, não como pilha de cards */
.com-trilho { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.com-trilho::before {
  content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--com-fio-forte) 6%, var(--com-fio-forte) 94%, transparent);
}
.com-passo {
  position: relative; z-index: 2; display: grid; justify-items: center; gap: 11px;
  padding: 0 4px 6px; cursor: pointer; background: transparent; border: 0; min-width: 0;
}
.com-passo__p {
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  background: var(--com-fundo); border: 1px solid var(--com-fio-forte);
  font-family: var(--font-mono, monospace); font-size: 10px; color: var(--com-tinta-3);
  transition: border-color .45s ease, color .45s ease, background .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.com-passo__n {
  font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--com-tinta-3); text-align: center; line-height: 1.4;
  transition: color .45s ease;
}
.com-passo:hover .com-passo__p { border-color: var(--com-tinta-3); color: var(--com-tinta-2); }
.com-passo.is-feito .com-passo__p { border-color: rgba(var(--accent-rgb),.4); color: rgba(var(--accent-rgb),.75); }
.com-passo.is-on .com-passo__p {
  border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb),.12);
  transform: scale(1.14); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.09);
}
.com-passo.is-on .com-passo__n { color: var(--accent-text); }

/* O card da empresa — a peça que NÃO muda */
.com-ent {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  margin-top: clamp(28px, 3.2vw, 44px); border-radius: 4px; overflow: hidden;
  background: var(--com-superficie); border: 1px solid rgba(var(--accent-rgb),.28);
}
.com-ent__fixo { padding: clamp(22px, 2.4vw, 32px); border-right: 1px solid var(--com-fio); min-width: 0; }
.com-ent__fixo::after { content: none; }
.com-ent__nome { margin: 12px 0 0; font-size: clamp(22px, 2.3vw, 32px); font-weight: 750; letter-spacing: -.03em; color: var(--com-tinta); }
.com-ent__campos { display: grid; gap: 1px; margin-top: 20px; background: var(--com-fio); border: 1px solid var(--com-fio); }
.com-ent__f {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: baseline;
  background: var(--com-superficie); padding: 9px 13px;
}
.com-ent__f > i { font-style: normal; font-family: var(--font-mono, monospace); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--com-tinta-3); }
.com-ent__f > span { font-size: 12.5px; color: var(--com-tinta-2); min-width: 0; overflow-wrap: anywhere; }
.com-ent__f > span b { color: var(--com-tinta); font-weight: 600; }
.com-ent__aviso { margin-top: 18px; font-size: 12px; line-height: 1.6; color: var(--com-tinta-3); }
.com-ent__aviso strong { color: var(--com-tinta-2); font-weight: 600; }

/* O lado que MUDA */
.com-ent__muda { padding: clamp(22px, 2.4vw, 32px); min-width: 0; transition: opacity .3s ease; }
.com-ent__muda.is-trocando { opacity: 0; }
.com-ent__estado {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px;
}
.com-ent__col {
  display: inline-flex; align-items: baseline; gap: 9px; padding: 8px 14px; border-radius: 3px;
  background: rgba(var(--accent-rgb),.09); border: 1px solid rgba(var(--accent-rgb),.34);
}
.com-ent__col i { font-style: normal; font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .1em; color: var(--com-tinta-3); }
.com-ent__col b { font-family: var(--font-mono, monospace); font-size: 15px; font-weight: 600; color: var(--accent-text); }

.com-ent__linhas { display: grid; gap: 1px; margin-top: 20px; background: var(--com-fio); border: 1px solid var(--com-fio); }
.com-ent__l {
  display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: baseline;
  background: var(--com-superficie); padding: 11px 14px;
}
.com-ent__l > i { font-style: normal; font-family: var(--font-mono, monospace); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--com-tinta-3); }
.com-ent__l > span { font-size: 13px; line-height: 1.5; color: var(--com-tinta); min-width: 0; }
.com-ent__l > span em { font-style: italic; color: var(--com-tinta-2); }

/* A próxima ação — o elemento fixo da demonstração (§39) */
.com-prox {
  margin-top: 18px; padding: 15px 17px; border-radius: 3px;
  background: rgba(var(--accent-rgb),.06); border: 1px solid rgba(var(--accent-rgb),.34);
}
.com-prox > i { display: block; font-style: normal; font-family: var(--font-mono, monospace); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.com-prox > b { display: block; margin-top: 10px; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: clamp(15px, 1.55vw, 20px); line-height: 1.35; font-weight: 400; color: var(--com-tinta); }
.com-prox > span { display: block; margin-top: 10px; font-size: 12px; line-height: 1.55; color: var(--com-tinta-2); }
.com-prox--vazio { background: rgba(176,86,79,.07); border-color: rgba(176,86,79,.42); }
.com-prox--vazio > i { color: var(--t-perdido); }

/* ═══════════════════════════════════════════════════════════════════════════
   §03 · AS TRÊS CAMADAS
   ═══════════════════════════════════════════════════════════════════════════ */
.com-camadas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(38px, 4.4vw, 58px); }
.com-camada {
  min-width: 0; padding: clamp(20px, 2.2vw, 30px); border-radius: 3px;
  background: var(--com-superficie); border: 1px solid var(--com-fio);
  border-top: 2px solid rgba(var(--accent-rgb), var(--forca, .35));
}
.com-camada__n { font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--com-tinta-3); }
.com-camada__t { display: block; margin-top: 12px; font-size: clamp(19px, 2vw, 27px); font-weight: 750; letter-spacing: -.025em; color: var(--com-tinta); }
.com-camada__d { display: block; margin-top: 11px; font-size: 13px; line-height: 1.6; color: var(--com-tinta-2); }
.com-camada__nucs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.com-camada__nucs span {
  padding: 4px 10px; border-radius: 3px; font-family: var(--font-mono, monospace);
  font-size: 9px; letter-spacing: .07em; color: var(--com-tinta-2);
  background: rgba(242,239,233,.035); border: 1px solid var(--com-fio);
}

/* ═══════════════════════════════════════════════════════════════════════════
   §09 · §10 · §11 — PIPELINES REAIS
   ═══════════════════════════════════════════════════════════════════════════ */
.com-pipes { display: grid; gap: 12px; margin-top: clamp(38px, 4.4vw, 58px); }
.com-pipe { border-radius: 3px; overflow: hidden; background: var(--com-superficie); border: 1px solid var(--com-fio); }
.com-pipe__cab {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 15px 19px; border-bottom: 1px solid var(--com-fio); background: rgba(242,239,233,.025);
}
.com-pipe__cab b { font-size: 14.5px; font-weight: 700; color: var(--com-tinta); }
.com-pipe__cab code { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--com-tinta-3); }
.com-etapas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; background: var(--com-fio); }
.com-etapa { background: var(--com-superficie); padding: 15px 14px; min-width: 0; }
.com-etapa b { display: block; font-size: 12.5px; font-weight: 650; color: var(--com-tinta); overflow-wrap: anywhere; }
.com-etapa__pb { display: block; margin-top: 9px; height: 4px; border-radius: 2px; background: rgba(242,239,233,.06); overflow: hidden; }
.com-etapa__pb i { display: block; height: 100%; width: var(--p, 0%); border-radius: 2px; background: rgba(var(--accent-rgb),.75); }
.com-etapa span { display: block; margin-top: 8px; font-family: var(--font-mono, monospace); font-size: 10px; color: var(--com-tinta-3); }
.com-etapa--zero b { color: var(--com-tinta-3); }
.com-pipe__vazio { padding: 18px 19px; font-size: 12.5px; line-height: 1.6; color: var(--com-tinta-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   BLOCOS GENÉRICOS
   ═══════════════════════════════════════════════════════════════════════════ */
.com-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(38px, 4.4vw, 58px); }
.com-card { min-width: 0; padding: clamp(18px, 2vw, 26px); border-radius: 3px; background: var(--com-superficie); border: 1px solid var(--com-fio); }
.com-card > b { display: block; font-size: 14.5px; font-weight: 700; color: var(--com-tinta); }
.com-card > span { display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.6; color: var(--com-tinta-2); }
.com-card ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.com-card li { position: relative; padding-left: 15px; font-size: 12.5px; line-height: 1.5; color: var(--com-tinta-2); }
.com-card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 1px; background: rgba(var(--accent-rgb),.7); }
.com-card--eu { border-color: rgba(var(--accent-rgb),.42); }
.com-card--eu > b { color: var(--accent-text); }

.com-quatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: clamp(38px, 4.4vw, 58px); }
.com-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(38px, 4.4vw, 58px); }
.com-seis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: clamp(38px, 4.4vw, 58px); }
.com-elo { min-width: 0; padding: 18px 15px; border-radius: 3px; background: var(--com-superficie); border: 1px solid var(--com-fio); border-top: 2px solid rgba(var(--accent-rgb), var(--forca, .3)); }
.com-elo__n { font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--com-tinta-3); }
.com-elo__t { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 650; color: var(--com-tinta); }
.com-elo__d { display: block; margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--com-tinta-2); }

.com-ponte { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; margin-top: clamp(30px, 3.4vw, 44px); }
.com-ponte__seta { display: grid; place-items: center; color: rgba(var(--accent-rgb),.5); }
.com-ponte__seta svg { width: 20px; height: 20px; }

.com-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.com-chips span {
  padding: 6px 12px; border-radius: 3px; font-size: 12px; color: var(--com-tinta-2);
  background: rgba(242,239,233,.035); border: 1px solid var(--com-fio);
}

/* Trilho numerado */
.com-passos { position: relative; margin-top: clamp(38px, 4.4vw, 58px); padding-left: 30px; counter-reset: c; }
.com-passos::before {
  content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--com-fio-forte) 8%, var(--com-fio-forte) 92%, transparent);
}
.com-p { position: relative; padding-bottom: clamp(20px, 2.4vw, 30px); }
.com-p:last-child { padding-bottom: 0; }
.com-p::before {
  content: counter(c); counter-increment: c; position: absolute; left: -30px; top: 0;
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  background: var(--com-fundo); border: 1px solid rgba(var(--accent-rgb),.45);
  font-family: var(--font-mono, monospace); font-size: 9px; color: var(--accent-text);
}
.com-p b { display: block; font-size: 14px; font-weight: 650; line-height: 1.35; color: var(--com-tinta); }
.com-p span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.58; color: var(--com-tinta-2); max-width: 66ch; }
.com-p em {
  display: inline-block; margin-top: 9px; padding: 3px 9px; border-radius: 3px; font-style: normal;
  font-family: var(--font-mono, monospace); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--com-tinta-3); background: rgba(242,239,233,.035); border: 1px solid var(--com-fio);
}

/* ═══════════════════════════════════════════════════════════════════════════
   §34 · PATRONO — Hermes
   ═══════════════════════════════════════════════════════════════════════════ */
.com-ficha { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); background: var(--com-superficie); border: 1px solid var(--com-fio); border-radius: 4px; overflow: hidden; margin-top: clamp(38px, 4.4vw, 58px); }
.com-ficha__retrato { position: relative; min-height: 360px; }
.com-ficha__retrato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.com-ficha__retrato::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,14,17,.95), rgba(14,14,17,.1) 54%),
              linear-gradient(to right, transparent 68%, rgba(14,14,17,.86));
}
.com-ficha__id { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px; z-index: 2; }
.com-ficha__nome { margin: 0; font-size: clamp(23px, 2.3vw, 32px); font-weight: 750; letter-spacing: -.025em; color: var(--com-tinta); }
.com-ficha__papel { display: block; margin-top: 5px; font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.com-ficha__corpo { padding: clamp(24px, 2.8vw, 38px); display: grid; gap: clamp(20px, 2.2vw, 28px); min-width: 0; }
.com-ficha__frase { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: clamp(17px, 1.8vw, 24px); line-height: 1.3; color: var(--com-tinta); }
.com-ficha__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.com-bl > b { display: block; font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .17em; text-transform: uppercase; color: var(--com-tinta-3); margin-bottom: 11px; }
.com-bl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.com-bl li { position: relative; padding-left: 15px; font-size: 12.5px; line-height: 1.55; color: var(--com-tinta-2); }
.com-bl li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 1px; background: rgba(var(--accent-rgb),.7); }
.com-ficha__aviso { padding-top: 18px; border-top: 1px solid var(--com-fio); font-size: 12px; line-height: 1.62; color: var(--com-tinta-3); }
.com-ficha__aviso strong { color: var(--com-tinta-2); font-weight: 600; }
.com-vozes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.com-vozes span {
  padding: 5px 11px; border-radius: 3px; font-size: 11.5px; color: var(--com-tinta-2);
  background: rgba(242,239,233,.035); border: 1px solid var(--com-fio);
}
.com-vozes span.is-patrono { color: var(--accent-text); background: rgba(var(--accent-rgb),.09); border-color: rgba(var(--accent-rgb),.36); }

/* ═══════════════════════════════════════════════════════════════════════════
   §38 · O TEMPO DA OPORTUNIDADE
   ═══════════════════════════════════════════════════════════════════════════ */
.com-tempo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(38px, 4.4vw, 58px); }
.com-tempo__c { min-width: 0; padding: clamp(20px, 2.2vw, 28px); border-radius: 3px; background: var(--com-superficie); border: 1px solid var(--com-fio); border-left: 2px solid var(--cor, var(--com-fio-forte)); }
.com-tempo__c b { display: block; font-size: 14.5px; font-weight: 700; color: var(--com-tinta); }
.com-tempo__m { display: grid; gap: 9px; margin-top: 16px; }
.com-tempo__m > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--com-tinta-2); }
.com-tempo__m > div span:last-child { font-family: var(--font-mono, monospace); color: var(--com-tinta); }
.com-tempo__c > em { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--com-fio); font-style: normal; font-size: 12.5px; line-height: 1.6; color: var(--com-tinta-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   §41 · MANIFESTO
   ═══════════════════════════════════════════════════════════════════════════ */
.com-manifesto { background: var(--com-papel); color: var(--com-papel-tinta); padding-block: clamp(96px, 12vw, 180px); }
.com-manifesto p { margin: 0 0 .3em; font-size: clamp(26px, 4.2vw, 60px); font-weight: 800; line-height: 1.03; letter-spacing: -.035em; color: var(--com-papel-tinta); }
.com-manifesto p em { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; color: #9A6410; }
.com-manifesto__ass { margin-top: clamp(40px, 4.4vw, 64px); padding-top: 28px; border-top: 1px solid rgba(22,19,12,.15); text-align: center; }
.com-manifesto__ass b { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(26px, 3vw, 42px); font-weight: 500; color: var(--com-papel-tinta); }
.com-manifesto__ass span { display: block; margin-top: 6px; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--com-papel-tinta-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   §42 · CTA FINAL
   ═══════════════════════════════════════════════════════════════════════════ */
.com-fim__q {
  margin: 0 auto clamp(30px, 3.4vw, 48px); max-width: 17ch; text-align: center;
  font-size: clamp(31px, 5vw, 74px); font-weight: 800; line-height: .99;
  letter-spacing: -.04em; color: var(--com-tinta);
}
.com-fim__q em { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; color: var(--accent-text); }

/* ── VAZAMENTOS DO TEMA DOURADO ────────────────────────────────────────────
   theme-override.css:6 usa !important no span do título; redefinir --accent no
   wrapper não basta. Mesma correção das outras páginas de produto. */
.tema-com .tp-section-title-playfair span,
.tema-com .st-hero-title i { color: var(--accent-text) !important; }
.tema-com a:hover { color: var(--accent-text) !important; }
.tema-com .st-hero-btn a { background-color: var(--accent); color: #16130C; }
.tema-com .st-hero-btn a:hover { background-color: var(--accent-text); color: #16130C; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVO — nenhuma grid-template-columns inline no HTML.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .com-seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .com-quatro, .com-camadas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .com-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .com-etapas { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .com-trilho { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 6px; }
  .com-trilho::before { display: none; }
}

@media (max-width: 991px) {
  .com-ent, .com-ponte, .com-ficha, .com-tempo, .com-duas { grid-template-columns: minmax(0, 1fr); }
  .com-ent__fixo { border-right: 0; border-bottom: 1px solid var(--com-fio); }
  .com-ficha__retrato { min-height: 300px; }
  .com-ponte__seta { height: 36px; transform: rotate(90deg); }
}

@media (max-width: 767px) {
  .com-seis, .com-quatro, .com-camadas, .com-cards, .com-ficha__grid { grid-template-columns: minmax(0, 1fr); }
  .com-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .com-trilho { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .com-ent__f, .com-ent__l { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .com-passo__p, .com-passo__n, .com-ent__muda { transition: none !important; }
}