/* VX Midas — ajustes de 2026-10-31 (por cima do style.css v103)
   1) Ecossistema num quadro escuro, com rótulo e as frentes numeradas
   2) Método em cartões (o 03 escuro)
   3) Quem somos: cartões com foto redonda no celular + Igor Felipe
   4) Contato com fundo marfim e campos com rótulo */

.ouro { font-weight: inherit; color: var(--ouro); }
.claro .ouro, .diagnostico .ouro { color: #a07d3b; }

/* ---------- 1) Ecossistema ---------- */
.claro .conexao-texto { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 4vw, 52px); border-radius: 26px; background: var(--tinta); color: var(--aco); box-shadow: 0 30px 60px -30px rgba(13,13,12,.55); }
.claro .conexao-texto::after { content: ""; position: absolute; z-index: -1; right: -12%; top: 6%; width: 70%; aspect-ratio: 1.34; background: url(../img/vx-simbolo.svg) center / contain no-repeat; opacity: .05; }
.claro .conexao-texto .titulo { color: var(--branco); }
.claro .conexao-texto .ouro { color: var(--ouro); }
.claro .conexao-texto .diagnostico-rotulo { display: inline-flex; margin-bottom: 18px; color: var(--ouro); }
.claro .conexao-texto p:not(.diagnostico-rotulo) { color: var(--aco); }
.claro .conexao-frentes { border-top-color: rgba(233,229,218,.14); }
.claro .conexao-frentes li { display: flex; align-items: baseline; gap: 14px; color: var(--branco); border-bottom-color: rgba(233,229,218,.14); }
.conexao-frentes .n { flex: none; color: var(--ouro); font: 600 12px var(--fonte); letter-spacing: .06em; }

/* ---------- 2) Método ---------- */
.metodo-cabeca .diagnostico-rotulo { display: inline-flex; margin-bottom: 14px; }
.metodo-lista { display: grid; gap: 14px; }
.metodo-lista::before, .metodo-lista::after { display: none; }
.etapa { grid-template-columns: auto 1fr; gap: 22px; padding: clamp(22px, 3vw, 36px); border: 0; border-radius: 22px; background: #f7f5ef; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 14px 34px -22px rgba(13,13,12,.4); }
.etapa-num, .etapa.ativa .etapa-num { color: #b08a45; font-size: clamp(40px, 4vw, 56px); line-height: 1; }
.etapa p { margin-top: 8px; }
.etapa:last-child { background: var(--tinta); }
.etapa:last-child h3 { color: var(--branco); }
.etapa:last-child p { color: var(--aco); }
.etapa:last-child .etapa-num { color: var(--ouro); }
@media (max-width: 600px) { .etapa { grid-template-columns: auto 1fr; gap: 16px; padding: 22px 20px; } .etapa-num, .etapa.ativa .etapa-num { font-size: 38px; } }

/* ---------- 3) Quem somos ---------- */
@media (min-width: 961px) { .duo { grid-template-columns: repeat(3, minmax(0, 1fr)); } .membro h3 { font-size: clamp(30px, 2.7vw, 44px); } }
.membro-sem-foto { display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 38%, rgba(201,164,92,.16), transparent 70%), linear-gradient(165deg, #1d1c19, #0d0d0c 75%); }
.membro-inicial { font-family: var(--fonte-titulo); font-weight: 200; font-size: clamp(96px, 11vw, 168px); letter-spacing: -.06em; line-height: 1; background: linear-gradient(160deg, #e9e5da 10%, #c9a45c 55%, #7a5b22); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 960px) {
  .membro { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "foto nome" "foto cargo" "bio bio" "fr fr"; column-gap: 16px; row-gap: 4px; padding: 20px 18px 22px; align-items: center; }
  .membro-foto { grid-area: foto; width: 76px; height: 76px; min-height: 0; aspect-ratio: 1; border-radius: 50%; -webkit-mask-image: none; mask-image: none; box-shadow: 0 0 0 1px rgba(233,229,218,.14); }
  .membro-foto img { transform: none !important; object-position: 50% 12%; }
  .membro-texto { display: contents; }
  .membro h3 { grid-area: nome; align-self: end; margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
  .membro h3 em { display: inline; }
  .membro-cargo { grid-area: cargo; align-self: start; color: var(--ouro); font-size: 11px; letter-spacing: .2em; }
  .membro-cargo::before { display: none; }
  .membro-bio { grid-area: bio; margin-top: 14px; font-size: 15px; line-height: 1.6; }
  .membro-frentes { grid-area: fr; display: flex; margin-top: 14px; }
  .membro-frentes li { color: var(--ouro); box-shadow: 0 0 0 1px rgba(201,164,92,.45) inset; font-size: 13px; padding: 6px 14px; }
  .membro-inicial { font-size: 30px; }
}

/* ---------- 4) Contato em marfim ---------- */
.diagnostico { position: relative; background: var(--gelo); box-shadow: 0 0 0 100vmax var(--gelo); clip-path: inset(0 -100vmax); color: var(--tinta-suave); }
.diagnostico-cabeca { justify-items: start; text-align: left; }
.diagnostico .titulo { color: var(--tinta); }
.diagnostico-cabeca .diagnostico-rotulo { color: #8a6a2c; }
.diagnostico .diagnostico-rotulo::before { background: #a07d3b; }
.contato-form { background: #fff; color: var(--tinta); border-radius: 24px; box-shadow: 0 0 0 1px rgba(13,13,12,.06), 0 30px 60px -34px rgba(13,13,12,.35); }
.diagnostico .campo { color: var(--tinta); }
.diagnostico .campo > span:first-child { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; color: var(--tinta); font-size: 13.5px; font-weight: 600; }
.diagnostico .campo input, .diagnostico .campo select, .diagnostico .campo textarea { height: 52px; border-radius: 14px; background: #f4f2ec; color: var(--tinta); box-shadow: 0 0 0 1px rgba(13,13,12,.1) inset; }
.diagnostico .campo textarea { height: auto; min-height: 110px; }
.diagnostico .campo-texto { display: grid; }
.diagnostico .campo select:invalid { color: #8f8a7e; }
.diagnostico .campo ::placeholder { color: #8f8a7e; }
.diagnostico .campo input:focus, .diagnostico .campo select:focus, .diagnostico .campo textarea:focus { background: #fff; box-shadow: 0 0 0 1.5px #a07d3b inset, 0 0 0 4px rgba(201,164,92,.18); }
.diagnostico .form-nota { color: var(--tinta-suave); }
.diagnostico .form-erro { color: #a33a24; }
.diagnostico .campo select { background-color: #f4f2ec; }
.diagnostico .seletor::after { border-color: var(--tinta-suave); }

/* rótulo pequeno em cima de cada seção (Serviços, Ecossistema, Método...) */
.servicos-cabeca .diagnostico-rotulo, .equipe-cabeca .diagnostico-rotulo { display: inline-flex; margin-bottom: 14px; }
.servicos-cabeca .diagnostico-rotulo { color: var(--ouro); }

/* ---------- Rótulos de seção: todos no padrão do "Vamos começar" ----------
   traço + caixa-alta, 12px, espaçamento .16em; ouro no escuro, ouro fechado no marfim */
.diagnostico-rotulo,
.conexao-texto p.diagnostico-rotulo,
.metodo-cabeca p.diagnostico-rotulo { display: block; font-size: 12px; font-weight: 500; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; }
.servicos .diagnostico-rotulo, .claro .conexao-texto p.diagnostico-rotulo, .equipe .diagnostico-rotulo { display: block; color: var(--ouro); }
.servicos .diagnostico-rotulo::before, .claro .conexao-texto .diagnostico-rotulo::before, .equipe .diagnostico-rotulo::before { background: var(--ouro); }
.diagnostico-cabeca .diagnostico-rotulo, .claro .metodo-cabeca p.diagnostico-rotulo { color: #8a6a2c; }
.diagnostico .diagnostico-rotulo::before, .claro .metodo-cabeca .diagnostico-rotulo::before { background: #a07d3b; }
@media (max-width: 600px) {
  .diagnostico-rotulo,
  .conexao-texto p.diagnostico-rotulo,
  .metodo-cabeca p.diagnostico-rotulo { font-size: 11px; letter-spacing: .14em; }
}

/* Serviços: respiro no topo — o bloco marfim do contato vem logo acima */
.servicos { padding-top: clamp(88px, 11vw, 160px); }

/* ---------- Gestão de Mídias Sociais: agenda de conteúdo ----------
   Cena em em, como Sites e Produção: encaixa inteira pela largura e pela altura da janela. */
.tela-midias { container-type: size; }
.agenda {
  width: 36em; max-width: 100%; padding: 1.2em; border-radius: 1.3em; font-size: min(2.75cqw, 4.1cqh, 14px);
  background: #121110; box-shadow: 0 0 0 1px rgba(233,229,218,.1) inset, 0 2.4em 4em -1.6em #000;
}
.agenda-topo { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.agenda-topo b { color: var(--branco); font-size: 1.05em; font-weight: 600; letter-spacing: -.01em; }
.agenda-topo span { display: inline-flex; align-items: center; gap: .3em; padding: .35em .7em; border-radius: 999px; color: var(--prata); font-size: .9em; box-shadow: 0 0 0 1px rgba(233,229,218,.14) inset; }
.agenda-topo svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.agenda-semana, .agenda-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.agenda-semana { margin-top: .85em; color: var(--aco); font-size: .82em; }
.agenda-dias { gap: .25em; margin-top: .3em; }
.agenda-dias span { position: relative; display: grid; place-items: center; height: 2.15em; border-radius: .6em; color: var(--prata); font-size: .95em; font-weight: 500; }
.agenda-dias .tem::after { content: ""; position: absolute; bottom: .08em; width: .28em; height: .28em; border-radius: 50%; background: var(--ouro); }
.agenda-dias .hoje { background: var(--ouro); color: #0d0d0c; font-weight: 700; }
.agenda-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65em; margin-top: .8em; }
.post { overflow: hidden; border-radius: .8em; background: #1b1a17; box-shadow: 0 0 0 1px rgba(233,229,218,.08) inset; }
.post-peca { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e9e5da; }
.post-peca img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.post-frase { display: grid; place-items: center; padding: .6em; background: linear-gradient(150deg, #24221d, #0d0d0c); color: var(--branco); font-family: var(--fonte-titulo); font-size: 1.05em; font-weight: 300; line-height: 1.15; text-align: center; }
.post-frase b { display: block; color: var(--ouro); font-weight: 400; }
.post-info { display: grid; gap: .3em; padding: .5em .6em .6em; }
.post-info small { color: var(--aco); font-size: .78em; white-space: nowrap; }
.post-info em { display: flex; align-items: center; gap: .35em; color: var(--ouro); font-size: .78em; font-style: normal; font-weight: 600; white-space: nowrap; }
.post-info em::before { content: ""; flex: none; width: .45em; height: .45em; border-radius: 50%; background: currentColor; }
.post-info .feito { color: #6ee7a0; }