/* =========================================================
   Componentes v2: carrossel automático, esteira de prints,
   clientes e ilustrações do método (em HTML, sem imagem)
   ========================================================= */

/* ---------- Carrossel com setas e avanço automático ---------- */
.carrossel { position: relative; }
.carrossel__trilho {
  display: flex; gap: 22px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 34px max(var(--gutter), calc((100vw - var(--largura)) / 2 + var(--gutter))) 26px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--largura)) / 2 + var(--gutter)));
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho > * { scroll-snap-align: start; }
.carrossel .cartao { margin-top: 0; }
.carrossel__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: var(--largura); margin: 6px auto 0; padding-inline: var(--gutter);
}
.carrossel__pontos { display: flex; gap: 6px; flex-wrap: wrap; }
.carrossel__pontos button {
  width: 26px; height: 4px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
  background: rgba(246, 239, 228, 0.16); transition: background 0.3s, width 0.3s;
}
.carrossel__pontos button[aria-current="true"] { background: var(--ouro); width: 44px; }
.claro .carrossel__pontos button { background: rgba(23, 20, 15, 0.16); }
.claro .carrossel__pontos button[aria-current="true"] { background: var(--ambar); }
.carrossel__setas { display: flex; gap: 10px; }
.carrossel__setas button {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--linha); background: var(--carvao); color: var(--marfim);
  transition: border-color 0.2s, background 0.2s;
}
.carrossel__setas button:hover { border-color: var(--ouro); background: var(--carvao-2); }
.carrossel__setas svg { width: 20px; height: 20px; }
.claro .carrossel__setas button { background: #fff; color: var(--tinta); border-color: rgba(23, 20, 15, 0.14); }

/* depoimentos em vídeo dentro do carrossel */
.carrossel .depo { flex: 0 0 clamp(230px, 24vw, 270px); }

/* ---------- Esteira contínua (prints e clientes) ---------- */
.esteira {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.esteira__trilho {
  display: flex; gap: 18px; width: max-content;
  padding-block: 14px 26px;
  animation: correr var(--duracao, 60s) linear infinite;
}
.esteira--volta .esteira__trilho { animation-direction: reverse; }
.esteira:hover .esteira__trilho, .esteira:focus-within .esteira__trilho { animation-play-state: paused; }

.print {
  flex: none;
  width: 236px; height: 300px;
  display: grid; place-items: center;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 36px -20px rgba(23, 20, 15, 0.45), 0 0 0 1px rgba(23, 20, 15, 0.06);
  margin: 0;
}
.print img { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 8px; }

.provas-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin: 72px 0 6px; }
.provas-sub h3 { font-size: clamp(22px, 2.4vw, 30px); }
.provas-sub p { margin: 0; color: var(--tinta-2); font-size: 15px; }

/* clientes (cards montados a partir dos perfis) */
.cliente {
  flex: none; width: 300px;
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
  padding: 16px 18px; border-radius: 18px;
  background: #fff; border: 1px solid rgba(23, 20, 15, 0.07);
  box-shadow: 0 14px 30px -22px rgba(23, 20, 15, 0.5);
}
.cliente img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.cliente strong { display: flex; align-items: center; gap: 5px; font-size: 15.5px; line-height: 1.25; color: var(--tinta); }
.cliente strong svg { width: 15px; height: 15px; color: #3897f0; flex: none; }
.cliente span { display: block; font-size: 13.5px; color: var(--tinta-2); line-height: 1.35; }
.cliente em { display: block; font-style: normal; font-size: 13px; color: var(--ambar-escuro); margin-top: 3px; font-weight: 500; }

/* ---------- Ilustrações do método ---------- */
.ilustra {
  border-radius: var(--raio-l);
  background: #fbf8f3; color: var(--tinta);
  padding: clamp(20px, 3vw, 30px);
  box-shadow: 30px 50px 80px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.07);
  font-size: 14px;
}
.ilustra--escura { background: var(--carvao-2); color: var(--marfim); border: 1px solid var(--linha); }
.ilustra__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ilustra__topo b { font-size: 15px; letter-spacing: -0.01em; }
.ilustra__topo small { font-size: 12px; color: var(--tinta-2); padding: 4px 10px; border-radius: 999px; background: rgba(23, 20, 15, 0.06); white-space: nowrap; }
.ilustra--escura .ilustra__topo small { color: var(--marfim-2); background: rgba(246, 239, 228, 0.07); }

.tabela-rhc { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela-rhc th { text-align: left; font-weight: 500; color: var(--tinta-2); font-size: 12px; padding: 0 8px 8px; border-bottom: 1px solid rgba(23, 20, 15, 0.1); }
.tabela-rhc td { padding: 11px 8px; border-bottom: 1px solid rgba(23, 20, 15, 0.07); }
.tabela-rhc td:not(:first-child), .tabela-rhc th:not(:first-child) { white-space: nowrap; text-align: right; }
.tabela-rhc td:last-child, .tabela-rhc th:last-child { text-align: right; }
.tabela-rhc .baixo { color: #b45309; font-weight: 600; }
.tabela-rhc tr.ancora td { background: #043333; color: var(--marfim); font-weight: 600; border: 0; }
.tabela-rhc tr.ancora td:first-child { border-radius: 10px 0 0 10px; }
.tabela-rhc tr.ancora td:last-child { border-radius: 0 10px 10px 0; color: #ffd27a; }

.linha-item .ilustra p { color: inherit; max-width: none; }
.linha-item .ilustra .rhc-nota { color: var(--tinta-2); }
.rhc-nota { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font-size: 13.5px; color: var(--tinta-2); }
.rhc-nota b { font-size: 40px; line-height: 1; color: #043333; font-weight: 400; }

.cascata { display: grid; gap: 7px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(23, 20, 15, 0.08); }
.cascata > b { font-size: 13px; margin-bottom: 4px; }
.cascata div { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 10px; font-size: 12.5px; color: var(--tinta-2); }
.cascata span { height: 14px; border-radius: 4px; background: #d9d2c5; transform-origin: left; }
.cascata div:nth-of-type(1) span { background: #043333; }
.cascata div:last-child span { background: var(--ouro); }
.cascata div:last-child { color: var(--tinta); font-weight: 600; }

.camadas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; }
.camada { border-radius: 14px; padding: 16px 12px; border: 1px solid rgba(23, 20, 15, 0.1); background: #fff; }
.camada small { display: block; font-size: 11.5px; color: var(--tinta-2); }
.camada b { display: block; font-size: 17px; margin: 4px 0 10px; letter-spacing: -0.02em; }
.camada .preco { font-family: var(--fonte-num); font-size: 28px; line-height: 1; }
.camada ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: 12px; color: var(--tinta-2); }
.camada li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ambar); margin-right: 7px; vertical-align: middle; }
.camada--premium { padding-block: 26px; border-color: var(--ambar); box-shadow: 0 16px 30px -18px rgba(208, 140, 39, 0.7); }
.camada--black { background: #17140f; color: var(--marfim); border-color: transparent; }
.camada--black small, .camada--black ul { color: var(--marfim-2); }
.ancora-tag { display: flex; gap: 10px; align-items: center; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: rgba(4, 51, 51, 0.06); font-size: 13px; color: var(--tinta-2); }
.ancora-tag b { color: var(--tinta); }

.conversa { display: grid; gap: 10px; }
.bolha { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; }
.bolha small { display: block; font-size: 11px; opacity: 0.75; margin-bottom: 3px; }
.bolha--paciente { background: rgba(246, 239, 228, 0.08); border-bottom-left-radius: 4px; }
.bolha--antes { justify-self: end; background: rgba(229, 72, 77, 0.1); border: 1px dashed rgba(229, 72, 77, 0.55); color: var(--marfim-2); border-bottom-right-radius: 4px; }
.bolha--antes p { margin: 0; text-decoration: line-through; text-decoration-color: rgba(229, 72, 77, 0.9); }
.bolha--depois { justify-self: end; background: #1f6f4a; color: #fff; border-bottom-right-radius: 4px; }
.tempo-consulta { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linha-fraca); }
.tempo-consulta > b { display: block; font-size: 13px; margin-bottom: 10px; }
.tempo-consulta__barra { display: flex; height: 34px; border-radius: 10px; overflow: hidden; font-size: 12px; font-weight: 600; }
.tempo-consulta__barra span { display: grid; place-items: center; color: var(--breu); }
.tempo-consulta__legenda { display: grid; grid-template-columns: 5fr 40fr 30fr 25fr; font-size: 11.5px; color: var(--marfim-3); margin-top: 8px; gap: 4px; }
.tempo-consulta__legenda span:first-child { visibility: hidden; }

.foto-ilustra { border-radius: var(--raio-l); overflow: hidden; box-shadow: 30px 50px 80px -40px rgba(0, 0, 0, 0.9); }
.foto-ilustra img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

/* ---------- Cupom da consulta (seção do problema) ---------- */
.cupom-palco { display: grid; justify-items: center; position: relative; }
.cupom {
  position: relative;
  width: min(380px, 100%);
  background: #fbf8f3; color: var(--tinta);
  padding: 30px 28px 38px;
  font-size: 14.5px;
  rotate: 2.5deg;
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.7));
  -webkit-mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0 / 18px 100% repeat-x;
          mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0 / 18px 100% repeat-x;
}
.cupom h3 { font-size: 18px; text-align: center; margin-bottom: 4px; }
.cupom > small { display: block; text-align: center; color: var(--tinta-2); font-size: 12.5px; margin-bottom: 22px; }
.cupom dl { margin: 0; display: grid; grid-template-columns: 1fr auto; row-gap: 10px; }
.cupom dt { color: var(--tinta-2); }
.cupom dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cupom dt.inicio, .cupom dd.inicio { color: var(--tinta); font-weight: 600; padding-bottom: 6px; }
.cupom dt.total, .cupom dd.total { border-top: 2px dashed rgba(23, 20, 15, 0.25); padding-top: 14px; margin-top: 6px; color: var(--tinta); font-weight: 600; }
.cupom dd.total { font-family: var(--fonte-num); font-weight: 400; font-size: 36px; line-height: 1; color: #b91c1c; }
.cupom__carimbo {
  position: absolute; right: 22px; bottom: 76px;
  padding: 7px 12px; border: 2px solid #b91c1c; border-radius: 8px;
  color: #b91c1c; font-weight: 700; font-size: 12.5px;
  rotate: -10deg;
}
.cupom-nota { font-size: 12.5px; color: var(--marfim-3); text-align: center; margin: 26px 0 0; }

/* comparação avulso x protocolo (fase 02) */
.avulso-protocolo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 24px; }
.avulso-protocolo > div { border-radius: 14px; padding: 14px; border: 1px solid rgba(23, 20, 15, 0.1); background: #fff; }
.avulso-protocolo small { display: block; font-size: 12px; color: var(--tinta-2); }
.avulso-protocolo b { display: block; font-family: var(--fonte-num); font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; margin-top: 4px; }
.avulso-protocolo > div:last-child { background: #043333; color: var(--marfim); border-color: transparent; }
.avulso-protocolo > div:last-child small { color: rgba(246, 239, 228, 0.7); }
.avulso-protocolo > div:last-child b { color: #ffd27a; }
.avulso-protocolo svg { width: 22px; height: 22px; color: var(--ambar-escuro); }

/* ilustrações ficam levemente inclinadas, como as imagens da MVM */
.linha-item__midia .ilustra,
.linha-item__midia .foto-ilustra { transform: rotateY(-10deg) rotateX(4deg) rotateZ(-1deg); transition: transform 0.6s cubic-bezier(.2, .7, .2, 1); }
.linha-item:nth-child(even) .linha-item__midia .ilustra,
.linha-item:nth-child(even) .linha-item__midia .foto-ilustra { transform: rotateY(10deg) rotateX(4deg) rotateZ(1deg); }
.linha-item:hover .linha-item__midia .ilustra,
.linha-item:hover .linha-item__midia .foto-ilustra { transform: none; }

.linha-item > * { min-width: 0; }
.ilustra { overflow: hidden; }

@media (max-width: 640px) {
  .tabela-rhc th:nth-child(3), .tabela-rhc td:nth-child(3) { display: none; }
  .tabela-rhc { font-size: 12.5px; }
  .tabela-rhc th, .tabela-rhc td { padding-inline: 5px; }
  .ilustra__topo small { display: none; }
  .carrossel__trilho { gap: 14px; }
  .carrossel .cartao { flex-basis: 80vw; }
  .carrossel .depo { flex-basis: 68vw; }
  .carrossel__setas button { width: 44px; height: 44px; }
  .print { width: 196px; height: 256px; }
  .cliente { width: 268px; }
  .camadas { gap: 6px; }
  .camada { padding: 12px 9px; }
  .camada .preco { font-size: 22px; }
  .camada ul { display: none; }
  .linha-item__midia .ilustra, .linha-item__midia .foto-ilustra,
  .linha-item:nth-child(even) .linha-item__midia .ilustra,
  .linha-item:nth-child(even) .linha-item__midia .foto-ilustra { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .esteira__trilho { animation: none; }
  .esteira { overflow-x: auto; }
}

/* ---------- Toques de verde da marca (v2.1): só detalhe, o ouro segue dominante ---------- */
:root { --onyx: #043333; --menta: #23ffb9; }
/* 1. ponto dos selos de seção pulsa em menta, como "ao vivo" */
.selo i { background: var(--menta); box-shadow: 0 0 0 4px rgba(35, 255, 185, 0.16); animation: pulso-menta 2.4s ease-out infinite; }
@keyframes pulso-menta {
  0% { box-shadow: 0 0 0 0 rgba(35, 255, 185, 0.45); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(35, 255, 185, 0); }
}
/* 2. nas faixas escuras, uma estrela a cada duas fica menta */
.faixa:not(.faixa--ouro) .faixa__item:nth-child(even) svg { color: var(--menta); }
/* 3. resposta "depois" do WhatsApp em Onyx com rótulo menta */
.bolha--depois { background: var(--onyx); border: 1px solid rgba(35, 255, 185, 0.35); }
.bolha--depois small { color: var(--menta); }
/* 4. último mês do gráfico de faturamento em menta (o resultado) */
.barras span:last-child { background: linear-gradient(180deg, var(--menta), #0f9e74); }
/* 5. "sim" do comparativo no verde da marca */
.sim { color: var(--onyx); }
/* 6. selo de agenda aberta na oferta */
.agenda-aberta { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 6px 14px 6px 10px; border-radius: 999px; border: 1px solid rgba(35, 255, 185, 0.3); background: rgba(4, 51, 51, 0.55); font-size: 13.5px; color: var(--marfim-2); }
.agenda-aberta i { width: 8px; height: 8px; border-radius: 50%; background: var(--menta); animation: pulso-menta 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .selo i, .agenda-aberta i { animation: none; } }

/* ---------- Hero com promessa (07/11) ---------- */
.hero__assinatura { margin: 0; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--marfim-3); }
.hero h1.hero__promessa { font-size: clamp(34px, 5vw, 66px); line-height: 1.06; max-width: 22ch; }
.hero__promessa u { text-decoration: none; background: linear-gradient(var(--menta), var(--menta)) left bottom / 100% 4px no-repeat; padding-bottom: 2px; }
.hero .lead s { color: #e5484d; text-decoration-thickness: 2px; }
.hero__cta { display: grid; justify-items: center; gap: 12px; }
.hero__cta small { font-size: 13.5px; color: var(--marfim-3); }
/* marca-texto menta baixo, no lugar do sublinhado */
.hero__promessa mark { color: inherit; background: linear-gradient(transparent 62%, rgba(35, 255, 185, 0.32) 62%, rgba(35, 255, 185, 0.32) 92%, transparent 92%); padding: 0 0.06em; }

/* =========================================================
   Ajustes de copy e layout (07/11, tarde)
   ========================================================= */

/* sem topo fixo: o hero sobe um pouco */
.hero { padding-top: clamp(56px, 8vw, 96px); }

/* frase-tese com destaque: pílula dourada com estrelas */
.hero__assinatura {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 20px; border-radius: 999px;
  border: 1px solid rgba(235, 162, 51, 0.45);
  background: linear-gradient(180deg, rgba(235, 162, 51, 0.16), rgba(235, 162, 51, 0.06));
  box-shadow: 0 0 34px -10px rgba(235, 162, 51, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--ouro-claro); font-weight: 600;
  font-size: clamp(12.5px, 1.35vw, 15.5px); letter-spacing: 0.16em; line-height: 1.35;
  text-transform: uppercase; text-wrap: balance;
}
.hero__assinatura svg { width: 12px; height: 12px; flex: none; color: var(--menta); }
@media (max-width: 640px) {
  .hero__assinatura { padding: 9px 14px; gap: 9px; letter-spacing: 0.1em; max-width: 340px; }
  .hero__assinatura svg { width: 10px; height: 10px; }
}

/* botões com seta depois do texto */
.btn svg:last-child:not(:first-child) { margin-right: -4px; }

/* problema: a frase do exame ganha peso */
.dupla p.problema__virada { font-size: clamp(19px, 1.8vw, 23px); color: var(--marfim); font-weight: 500; letter-spacing: -0.01em; margin-top: 28px; }

/* cards do arsenal: altura pelo conteúdo (todos ficam iguais pelo flex) */
.carrossel .cartao { min-height: 0; padding-bottom: 36px; }

/* letreiro inclinado em fundo branco */
.faixa--branca { background: #fff; border: 0; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8); }
.faixa--branca .faixa__item { color: var(--tinta); font-weight: 500; }
.faixa--branca .faixa__item svg { color: var(--ouro); }
.faixa.faixa--branca .faixa__item:nth-child(even) svg { color: #0f9e74; }

/* ---------- Movimento 2: plano de execução ---------- */
.plano { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.plano li {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "area status" "tarefa tarefa" "barra barra";
  gap: 3px 12px; padding: 12px 14px; border-radius: 14px;
  background: #fff; border: 1px solid rgba(23, 20, 15, 0.08);
}
.plano__area { grid-area: area; font-size: 12px; font-weight: 600; color: var(--ambar-escuro); letter-spacing: 0.02em; }
.plano__status { grid-area: status; align-self: center; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(235, 162, 51, 0.16); color: #8a5a12; white-space: nowrap; }
.plano__status--ok { background: #043333; color: var(--menta); }
.plano__tarefa { grid-area: tarefa; font-size: 14px; color: var(--tinta); line-height: 1.3; }
.plano__barra { grid-area: barra; display: block; height: 5px; margin-top: 7px; border-radius: 5px; background: rgba(23, 20, 15, 0.08); overflow: hidden; }
.plano__barra i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--ouro), var(--ambar)); transform-origin: left; }
.plano li:has(.plano__status--ok) .plano__barra i { background: linear-gradient(90deg, #0f9e74, var(--menta)); }
.linha-item .ilustra p.plano__rodape { margin: 14px 0 0; font-size: 13px; color: var(--tinta-2); text-align: center; }
.plano__rodape b { color: var(--tinta); }

/* rostos não encolhem nem encostam no texto */
.prova-mini__rostos { flex: none; }

/* sobre: foto de palco do Matheus mais próxima */
.socio img[src*="palco"] { transform: scale(1.3); transform-origin: 62% 32%; }

/* nota do arsenal */
.arsenal__nota { text-align: center; font-size: 14px; color: var(--marfim-3); margin-top: 26px; }

/* ---------- Depoimentos em vídeo: moldura branca, grade de 4 ---------- */
.videos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.video-depo {
  margin: 0; padding: 10px 10px 16px;
  border-radius: 24px; background: #fff;
  border: 1px solid rgba(23, 20, 15, 0.06);
  box-shadow: 0 30px 50px -34px rgba(23, 20, 15, 0.55);
  transition: transform 0.35s cubic-bezier(.2, .7, .2, 1), box-shadow 0.35s;
}
.video-depo:hover { transform: translateY(-6px); box-shadow: 0 40px 60px -34px rgba(23, 20, 15, 0.6); }
.video-depo .depo__tela { border-radius: 16px; box-shadow: none; }
.video-depo .depo__play { background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45)); padding: 16px; gap: 0; place-content: end start; }
.video-depo .depo__play span.botao { width: 56px; height: 56px; box-shadow: 0 0 0 8px rgba(235, 162, 51, 0.25), 0 14px 30px -10px rgba(0, 0, 0, 0.7); }
.video-depo .depo__play svg { width: 22px; height: 22px; }
.provas-topo h2 { max-width: 780px; }
.video-depo.tocando .depo__play { display: none; }
.video-depo figcaption { display: grid; gap: 2px; padding: 14px 6px 0; text-align: left; }
.video-depo figcaption strong { font-size: 16px; color: var(--tinta); letter-spacing: -0.01em; }
.video-depo figcaption span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ambar-escuro); font-weight: 500; }
.video-depo figcaption span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 3px rgba(35, 255, 185, 0.2); }
@media (max-width: 900px) {
  .videos {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 20px;
    scrollbar-width: none;
  }
  .videos::-webkit-scrollbar { display: none; }
  .video-depo { flex: 0 0 min(64vw, 260px); scroll-snap-align: center; }
}

/* ---------- Esteiras: nunca param, nem com mouse nem com clique ---------- */
.esteira:hover .esteira__trilho,
.esteira:focus-within .esteira__trilho,
.esteira:active .esteira__trilho { animation-play-state: running; }
/* prints: a imagem cabe inteira no cartão (altura fixa em px, não em %) */
.print { --alto: 300px; height: var(--alto); overflow: hidden; }
.print img { max-width: 100%; max-height: calc(var(--alto) - 24px); width: auto; height: auto; object-fit: contain; }
@media (max-width: 640px) { .print { --alto: 256px; } }

/* ---------- Fases: visuais animados ---------- */
.chat__digitando {
  display: inline-flex; gap: 5px; align-items: center; justify-self: end;
  padding: 12px 16px; border-radius: 16px; border-bottom-right-radius: 4px;
  background: var(--carvao-2); border: 1px solid var(--linha-fraca);
}
.chat__digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--marfim-3); animation: digitando 1.1s infinite ease-in-out; }
.chat__digitando i:nth-child(2) { animation-delay: 0.15s; }
.chat__digitando i:nth-child(3) { animation-delay: 0.3s; }
@keyframes digitando { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
/* sem a animação do JS o indicador some e as duas mensagens aparecem */
html:not(.chat-anima) .chat__digitando { display: none; }

.fase p.desconto-riscado { margin-top: 18px; font-size: 14.5px; }
.desconto-riscado s { color: #b42318; text-decoration-thickness: 2px; margin-right: 6px; }

.avisos { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.avisos li {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "quem hora" "msg msg"; gap: 2px 12px;
  padding: 12px 14px 12px 44px; border-radius: 14px;
  background: rgba(246, 239, 228, 0.05); border: 1px solid var(--linha-fraca);
  font-size: 14.5px; color: var(--marfim-2); line-height: 1.35;
}
.avisos li::before {
  content: ""; position: absolute; left: 14px; top: 14px;
  width: 18px; height: 18px; border-radius: 6px;
  background: rgba(229, 72, 77, 0.18); border: 1px solid rgba(229, 72, 77, 0.55);
}
.avisos b { grid-area: quem; font-size: 12.5px; color: var(--ouro); font-weight: 600; }
.avisos small { grid-area: hora; font-size: 12px; color: var(--marfim-3); }
.fase p.avisos__total { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14.5px; }
.avisos__total span {
  display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 10px;
  border-radius: 999px; background: var(--alerta); color: #fff; font-weight: 700; font-size: 14px;
}
.fase p.barras-nota { font-size: 13px; color: var(--marfim-3); margin-top: 12px; }
.fases__cta { display: none; text-align: center; margin-top: 10px; }
@media (max-width: 959px) { .fases__cta { display: block; } }

/* ---------- Movimento 3: painel de resultados ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { border-radius: 14px; padding: 14px; background: #fff; border: 1px solid rgba(23, 20, 15, 0.08); display: grid; gap: 2px; align-content: start; }
.kpi small { font-size: 12px; color: var(--tinta-2); line-height: 1.3; }
.kpi b { font-family: var(--fonte-num); font-weight: 400; font-size: clamp(28px, 3vw, 36px); line-height: 1.05; color: var(--tinta); }
.kpi em { font-style: normal; font-size: 12px; font-weight: 600; color: #0f7a58; }
.kpi__barra { display: block; height: 6px; margin-top: 8px; border-radius: 6px; background: rgba(23, 20, 15, 0.08); overflow: hidden; }
.kpi__barra i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--ouro), var(--ambar)); transform-origin: left; }
.kpi--dono { background: #043333; border-color: transparent; }
.kpi--dono small { color: rgba(246, 239, 228, 0.7); }
.kpi--dono b { color: var(--menta); }
.kpi--dono em { color: rgba(246, 239, 228, 0.85); }
.kpi--dono .kpi__barra { background: rgba(246, 239, 228, 0.12); }
.kpi--dono .kpi__barra i { background: var(--menta); }
.rotina { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(23, 20, 15, 0.08); }
.rotina > b { display: block; font-size: 13px; margin-bottom: 10px; }
.rotina ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 13px; color: var(--tinta-2); }
.rotina li { display: flex; align-items: center; gap: 8px; }
.rotina li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid rgba(23, 20, 15, 0.25); }
.rotina li.feito { color: var(--tinta); }
.rotina li.feito::before { border-color: #043333; background: #043333 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2323ffb9' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 640px) { .rotina ul { grid-template-columns: 1fr; } .kpi { padding: 12px; } }

/* ---------- Ecossistema: clínica no centro, especialistas em volta ---------- */
.ecossistema { padding-bottom: clamp(18px, 3vw, 26px); }
.ao-vivo { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--menta); margin-right: 7px; vertical-align: 1px; animation: pulso-menta 2.4s ease-out infinite; }
.orbita { position: relative; aspect-ratio: 1 / 1; max-width: 460px; margin: 0 auto; }
.orbita__linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbita__anel { fill: none; stroke: rgba(235, 162, 51, 0.22); stroke-width: 0.3; stroke-dasharray: 1 1.6; transform-origin: 50px 50px; animation: girar 60s linear infinite; }
.orbita__anel--fora { stroke: rgba(246, 239, 228, 0.07); stroke-dasharray: none; animation: none; }
.orbita__fio { fill: none; stroke: rgba(235, 162, 51, 0.38); stroke-width: 0.35; stroke-dasharray: 1.2 1.2; animation: fluxo 2.4s linear infinite; }
.orbita__pulso { fill: var(--menta); }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes fluxo { to { stroke-dashoffset: -4.8; } }
.orbita__centro {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 31%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  background: radial-gradient(circle at 50% 35%, #2a2116, #120e09 70%);
  border: 1px solid rgba(235, 162, 51, 0.5);
  box-shadow: 0 0 0 8px rgba(235, 162, 51, 0.06), 0 0 60px -6px rgba(235, 162, 51, 0.55);
  animation: respira 3.6s ease-in-out infinite;
}
.orbita__centro img { width: 42%; height: auto; }
.orbita__centro b { font-size: clamp(11.5px, 1.2vw, 14px); color: var(--marfim); letter-spacing: -0.01em; white-space: nowrap; }
@keyframes respira { 50% { box-shadow: 0 0 0 14px rgba(235, 162, 51, 0.04), 0 0 80px -4px rgba(235, 162, 51, 0.7); } }
.no {
  position: absolute; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(31, 25, 18, 0.95); border: 1px solid var(--linha);
  font-size: clamp(11px, 1.05vw, 13px); font-weight: 500; color: var(--marfim);
  white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.9);
}
.no i { width: 7px; height: 7px; border-radius: 50%; background: var(--ouro); flex: none; }
.no:nth-of-type(even) i { background: var(--menta); }
@media (max-width: 640px) { .no { padding: 6px 9px; gap: 5px; } }
@media (prefers-reduced-motion: reduce) {
  .orbita__anel, .orbita__fio, .orbita__centro, .ao-vivo, .chat__digitando i { animation: none; }
  .orbita__pulso { display: none; }
}

/* ---------- Comparativo com 4 alternativas e "em parte" ---------- */
.compara { min-width: 760px; }
.compara thead th { vertical-align: bottom; }
.parcial { width: 22px; height: 22px; margin: 0 auto; color: var(--ambar); }
.compara-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 20px 0 0; font-size: 13.5px; color: var(--marfim-2); }
.compara-legenda span { display: inline-flex; align-items: center; gap: 8px; }
.compara-legenda svg { width: 18px; height: 18px; margin: 0; }
.compara-legenda .sim { color: var(--menta); }
.compara-legenda .nao { color: #ff8a8d; opacity: 1; }
@media (max-width: 760px) {
  .compara th:first-child, .compara td:first-child { position: sticky; left: 0; z-index: 1; background: #fbf8f3; min-width: 168px; box-shadow: 8px 0 12px -10px rgba(23, 20, 15, 0.35); }
  .compara th, .compara td { padding: 13px 10px; font-size: 13.5px; }
}