/*
 * MENTORIA ECOSSISTEMA MÉDICO, PÁGINA DE VENDA (2026-10-12). Escopo: body.venda-mentoria-eco
 * (loja/mentoria-ecossistema.html).
 *
 * Usa as classes de loja/css/spi-venda.css. Aqui fica só o que é desta página: a trilha dos 12
 * encontros em 4 fases, os dois quadros "para quem é" e "para quem não é", a lista do que o
 * médico sai sabendo fazer e as telas largas (computador) da seção de prova.
 */
.venda-mentoria-eco [id] { scroll-margin-top: 1rem; }

/* para quem é e para quem não é */
.venda-mentoria-eco .me-quem { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; margin-top: 1.4rem; }
.venda-mentoria-eco .me-quem > div {
  padding: 1.3rem 1.3rem 1.4rem; background: var(--sv-painel); border: 1px solid var(--sv-fio); border-radius: 1.1rem;
}
.venda-mentoria-eco .me-quem .me-sim { border-color: rgba(241, 207, 107, .45); border-top: 4px solid var(--sv-borda); }
.venda-mentoria-eco .me-quem .me-nao { border-top: 4px solid #5a5a5a; }
.venda-mentoria-eco .me-quem h3 { margin: 0 0 .7rem; color: var(--sv-claro); font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.venda-mentoria-eco .me-quem .me-nao h3 { color: #e6e6e6; }
.venda-mentoria-eco .me-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.venda-mentoria-eco .me-lista li {
  position: relative; padding-left: 1.3rem; color: var(--sv-mudo); font-size: .95rem; line-height: 1.55;
}
.venda-mentoria-eco .me-lista li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sv-ouro);
}
.venda-mentoria-eco .me-nao .me-lista li::before { background: #6b6b6b; }
.venda-mentoria-eco .me-lista strong { color: #fff; font-weight: 700; }
.venda-mentoria-eco .me-quem .me-aviso { margin: 1rem 0 0; color: var(--sv-mudo); font-size: .93rem; line-height: 1.55; }
.venda-mentoria-eco .me-quem .me-aviso a { color: var(--sv-claro); font-weight: 700; }
@media (min-width: 860px) {
  .venda-mentoria-eco .me-quem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* o que sai sabendo fazer: quatro blocos */
.venda-mentoria-eco .me-saber { grid-template-columns: minmax(0, 1fr); }
.venda-mentoria-eco .me-saber > div { border-top: 3px solid var(--sv-borda); }
.venda-mentoria-eco .me-saber .me-ico {
  display: block; margin-bottom: .5rem; color: var(--sv-ouro); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
@media (min-width: 700px) { .venda-mentoria-eco .me-saber { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .venda-mentoria-eco .me-saber { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* a trilha: quatro fases de três encontros, ligadas por uma linha dourada */
.venda-mentoria-eco .me-trilha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.venda-mentoria-eco .me-fase {
  position: relative; padding: 1.3rem 1.2rem; background: var(--sv-painel);
  border: 1px solid var(--sv-fio); border-top: 4px solid var(--sv-borda); border-radius: 1.1rem;
}
.venda-mentoria-eco .me-fase-cab { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.venda-mentoria-eco .me-fase-num {
  flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem;
  background: var(--ouro-grad); color: #1a1306; font-size: 1.4rem; font-weight: 800;
}
.venda-mentoria-eco .me-fase-cab small {
  display: block; color: var(--sv-ouro); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.venda-mentoria-eco .me-fase-cab h3 { margin: 0; color: #fff; font-size: 1.3rem; font-weight: 800; line-height: 1.2; }
.venda-mentoria-eco .me-enc { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.venda-mentoria-eco .me-enc::before {
  content: ""; position: absolute; left: 1.05rem; top: 1.2rem; bottom: 1.2rem; width: 2px;
  background: linear-gradient(180deg, var(--sv-borda), rgba(241, 207, 107, .25));
}
.venda-mentoria-eco .me-enc li { position: relative; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .85rem; padding: .55rem 0; align-items: start; }
.venda-mentoria-eco .me-enc b {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: #0d0d0d; border: 2px solid var(--sv-borda); color: var(--sv-claro); font-size: .9rem; font-weight: 800;
}
.venda-mentoria-eco .me-enc h4 { margin: .1rem 0 .15rem; color: #fff; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.venda-mentoria-eco .me-enc p { margin: 0; color: var(--sv-mudo); font-size: .9rem; line-height: 1.5; }
@media (min-width: 900px) {
  .venda-mentoria-eco .me-trilha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
}

/* telas largas (computador) da seção de prova */
.venda-mentoria-eco .me-tela { margin: 1.6rem auto 0; max-width: 62rem; }
.venda-mentoria-eco .me-tela > div {
  padding: .5rem; background: #0d0d0d; border: 1px solid var(--sv-linha); border-radius: 1rem; box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.venda-mentoria-eco .me-tela img { display: block; width: 100%; height: auto; border-radius: .6rem; }
.venda-mentoria-eco .me-tela figcaption { margin-top: .7rem; color: var(--sv-claro); font-size: .88rem; font-weight: 600; text-align: center; line-height: 1.4; }
.venda-mentoria-eco .me-tela-cerebro { max-width: 40rem; }

/* contato */
.venda-mentoria-eco .me-contato { margin-top: 1.4rem; }