/* ==========================================================================
   sections.css — layout específico de cada seção da página
   A ordem segue a ordem visual do site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grids de duas colunas: destravar o encolhimento

   Item de grid nasce com `min-width: auto`, ou seja, não encolhe abaixo do
   min-content do próprio conteúdo. Num mockup de dashboard esse mínimo passa
   de 300px, e a faixa estoura o container em telas estreitas — o conteúdo é
   cortado sem gerar scroll horizontal (o body tem overflow-x oculto).
   Uma regra resolve a classe inteira do problema.
   -------------------------------------------------------------------------- */

.hero__grid > *,
.white-label__grid > *,
.how__grid > *,
.tele-grid > *,
.products > *,
.support > *,
.resource-panel > *,
.donut-grid > *,
.map-grid > *,
.plans-grid > *,
.steps > *,
.tele-models > *,
.tele-highlights > *,
.metrics > *,
.kpi-row > *,
.brand-grid > *,
.campaign-grid > *,
.specialties > *,
.mockup__cards > *,
.ledger-row > *,
.tree-row > *,
.doctor > * {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  overflow: hidden;
  padding: 92px 0 74px;
  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(0, 191, 170, 0.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 12% 10%,
      rgba(142, 105, 173, 0.14),
      transparent 28%
    ),
    linear-gradient(var(--color-background), var(--n-50));
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 70px;
  align-items: center;
}

.hero__lead {
  font-size: 20px;
  color: var(--color-text);
  max-width: 720px;
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* --------------------------------------------------------------------------
   Faixa de marcas parceiras
   -------------------------------------------------------------------------- */

.partner-strip {
  padding: 28px 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
  background: var(--color-surface-raised);
}

.partner-strip__title {
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   A mágica do White Label (texto + vídeo vertical)
   -------------------------------------------------------------------------- */

.white-label {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(142, 105, 173, 0.12),
      transparent 32%
    ),
    linear-gradient(var(--color-background), var(--n-50));
}

.white-label__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}

/* A frase-conceito. A ênfase vem de peso, tamanho e da tinta da marca —
   não de uma barra colorida na lateral. */
.white-label__claim {
  font-size: clamp(23px, 2.5vw, 30px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.7px;
  color: var(--color-action-ink);
  margin: 22px 0 24px;
  max-width: 22ch;
  text-wrap: balance;
}

.white-label__text {
  font-size: 17px;
  color: var(--color-text);
  margin-bottom: 14px;
}

.white-label__points {
  display: grid;
  gap: 10px;
  margin: 24px 0 30px;
}

.white-label__points li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  color: var(--color-text);
}

.white-label__points li::before {
  content: "✓";
  color: var(--color-evidence-ink);
  font-weight: 900;
}

/* --------------------------------------------------------------------------
   Produtos
   -------------------------------------------------------------------------- */

.products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.product {
  border-radius: var(--border-radius-xl);
  padding: 40px;
  min-height: 390px;
  position: relative;
  overflow: hidden;
  color: var(--color-on-brand);
  /* Sobrescritos por cada variante; aqui ficam os padrões seguros. */
  --product-muted: var(--color-on-brand);
  --product-tag: rgba(0, 0, 0, 0.38);
}

/* Cada card define a sua própria tinta secundária, derivada da matiz do
   próprio fundo. Sem rgba(): com alpha, o contraste do texto passa a depender
   do ponto do gradiente em que ele calha de cair. */
.product--white-label {
  background: var(--gradient-product-white-label);
  --product-muted: var(--color-on-purple-muted);
  --product-tag: var(--color-tag-white-label);
}

.product--service {
  background: var(--gradient-product-service);
  --product-muted: var(--color-on-teal-muted);
  --product-tag: var(--color-tag-service);
}

.product h3 {
  font-size: 34px;
  line-height: 1.05;
  margin: 20px 0 14px;
  letter-spacing: -1px;
}

.product p {
  color: var(--product-muted); /* ≥4.60:1 no ponto mais claro do gradiente */
  font-size: 16px;
  max-width: 520px;
}

.product ul {
  padding-left: 18px;
  margin-top: 18px;
  color: var(--color-on-brand);
  list-style: disc;
}

.product li {
  margin-bottom: 6px;
}

/* Chip sólido, escurecido a partir da própria matiz do card. O branco a .18
   caía para 2.80:1 sobre o ponto claro do gradiente roxo. */
.tag {
  display: inline-block;
  background: var(--product-tag);
  color: var(--color-on-brand); /* ≥8.85:1 */
  padding: 7px 10px;
  border-radius: var(--border-radius-pill);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.4px;
}

/* --------------------------------------------------------------------------
   Recursos da plataforma
   -------------------------------------------------------------------------- */

.resource-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  margin-bottom: 30px;
  width: fit-content;
  max-width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--border-radius-pill);
}

.resource-tabs__tab {
  min-height: 40px;
  padding: 8px 18px;
  border-radius: var(--border-radius-pill);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 800;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.resource-tabs__tab:hover {
  color: var(--color-action-ink);
}

.resource-tabs__tab[aria-pressed="true"] {
  background: var(--gradient-action);
  color: var(--color-on-brand);
}

.resource-showcase {
  display: grid;
  gap: 26px;
}

/* Repete as categorias depois dos cards, num desenho mais discreto que as
   abas do topo: texto corrido separado por travessão, sem pílula. */
.resource-tabs-repeat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--color-line);
}

.resource-tabs-repeat__item {
  padding: 4px 2px 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  /* A borda hoje mora só no rótulo — o travessão vive fora do botão
     (span irmão), então o sublinhado nunca se estende até ele. */
  border-bottom: 2px solid transparent;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.resource-tabs-repeat__sep {
  color: var(--color-line-strong);
  font-weight: 400;
  align-self: center;
}

.resource-tabs-repeat__item:hover {
  color: var(--color-action-ink);
}

/* Sublinhado na cor da marca — o mesmo padrão universal de "aba ativa"
   (abas de navegador, link de menu corrente). Não precisa de negrito nem
   de um caractere extra pra se explicar. */
.resource-tabs-repeat__item[aria-pressed="true"] {
  color: var(--color-action-ink);
  border-color: var(--color-action);
}

.resource-panel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 32px;
  align-items: center;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line);
  border-radius: 28px;
  padding: 28px;
}

/* Alterna o lado do dashboard a cada painel */
.resource-panel:nth-child(even) {
  grid-template-columns: 1.1fr 0.9fr;
}

.resource-panel:nth-child(even) .resource-panel__copy {
  order: 2;
}

/* Com as abas de categoria (resource-tabs.js) a paridade par/ímpar do DOM
   completo não bate mais com a posição realmente visível — um painel par
   pode ser o 1º item de uma categoria. Estas classes têm a mesma
   especificidade de :nth-child(even) e, por virem depois no arquivo, ganham
   o empate: corrigem a orientação para a ordem vista, nos dois sentidos. */
.resource-panel.resource-panel--flip {
  grid-template-columns: 1.1fr 0.9fr;
}

.resource-panel.resource-panel--flip .resource-panel__copy {
  order: 2;
}

.resource-panel.resource-panel--noflip {
  grid-template-columns: 0.9fr 1.1fr;
}

.resource-panel.resource-panel--noflip .resource-panel__copy {
  order: 0;
}

.resource-panel__kicker {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-action-ink);
  background: var(--purple-wash);
  padding: 6px 9px;
  border-radius: var(--border-radius-pill);
}

.resource-panel__copy h3 {
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 15px 0 12px;
}

.resource-panel__copy > p {
  color: var(--color-text);
  font-size: 16px;
}

.resource-panel__bullets {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.resource-panel__bullets li {
  font-size: 14px;
  color: var(--color-text);
  display: flex;
  gap: 8px;
}

.resource-panel__bullets li::before {
  content: "✓";
  color: var(--color-evidence-ink);
  font-weight: 900;
}

/* --------------------------------------------------------------------------
   Como funciona (título + vídeo horizontal + etapas)
   -------------------------------------------------------------------------- */

.how__grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 52px;
  align-items: center;
  margin-bottom: 48px;
}

.how__text {
  font-size: 18px;
  color: var(--color-text);
  margin-bottom: 18px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  counter-reset: step;
}

.step {
  padding: 26px;
  border: 1px solid var(--color-line);
  border-radius: 20px;
  background: var(--color-surface-raised);
  counter-increment: step;
}

.step::before {
  content: "0" counter(step);
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: var(--color-evidence-ink);
  margin-bottom: 28px;
}

.step h3 {
  margin: 0 0 8px;
}

.step p {
  color: var(--color-text);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Telemedicina
   -------------------------------------------------------------------------- */

.telemedicine {
  padding: 96px 0;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(0, 191, 170, 0.13),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 80%,
      rgba(142, 105, 173, 0.12),
      transparent 30%
    ),
    var(--color-background);
}

.tele-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 52px;
  align-items: center;
}

.tele-copy h2 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.03;
  letter-spacing: -2px;
  margin: 14px 0 18px;
}

.tele-copy > p {
  font-size: 18px;
  color: var(--color-text);
}

.tele-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
}

.tele-badge {
  padding: 9px 12px;
  border-radius: var(--border-radius-pill);
  background: var(--purple-wash);
  border: 1px solid var(--color-line-strong);
  font-size: 12px;
  font-weight: 900;
  color: var(--color-action-ink);
}

.tele-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.tele-highlight {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--border-radius-md);
  padding: 18px;
}

.tele-highlight strong {
  display: block;
  font-size: 27px;
  letter-spacing: -1px;
}

.tele-highlight span {
  font-size: 13px;
  color: var(--color-text);
}

.tele-demo {
  background: var(--color-dark-deep);
  border-radius: 32px;
  padding: 16px;
  box-shadow: var(--shadow-deep);
}

.tele-screen {
  background: var(--color-surface);
  border-radius: var(--border-radius-lg);
  padding: 20px;
}

.tele-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line);
  border-radius: 15px;
  padding: 13px 15px;
  margin-bottom: 14px;
}

.tele-top b {
  font-size: 13px;
}

.tele-online {
  font-size: var(--font-size-micro);
  color: var(--color-evidence-ink);
  font-weight: 900;
}

.specialties {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 12px;
}

.specialty {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line);
  border-radius: 13px;
  padding: 13px;
  font-size: var(--font-size-micro);
  line-height: 1.4;
  color: var(--color-text);
}

.specialty strong {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--color-ink);
}

.doctor-list {
  display: grid;
  gap: 8px;
}

.doctor {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 9px;
  align-items: center;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line);
  border-radius: 13px;
  padding: 10px;
  font-size: var(--font-size-micro);
  line-height: 1.35;
}

.doctor__avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--purple-tint), var(--teal-tint));
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: var(--font-size-micro);
  color: var(--color-action-ink); /* 4.76:1 sobre o lilás — era 3.42:1 */
}

.doctor__action {
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--purple-tint);
  color: var(--color-action-ink); /* 4.80:1 */
  font-size: var(--font-size-micro);
  font-weight: 900;
}

.tele-models {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 34px;
}

.tele-model {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line);
  border-radius: 20px;
  padding: 22px;
}

.tele-model h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.tele-model p {
  font-size: 13px;
  color: var(--color-text);
  margin: 0 0 14px;
}

.tele-model ul {
  padding-left: 17px;
  color: var(--color-text);
  font-size: 13px;
  list-style: disc;
}

/* --------------------------------------------------------------------------
   Planos
   -------------------------------------------------------------------------- */

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}

.plan {
  position: relative;
  border: 1px solid var(--color-line);
  border-radius: var(--border-radius-lg);
  padding: 30px;
  background: var(--color-surface-raised);
  display: flex;
  flex-direction: column;
}

.plan h3 {
  margin: 0 0 8px;
  font-size: 23px;
}

.plan p {
  color: var(--color-text);
}

.plan__price {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-action);
  margin: 18px 0;
}

.plan ul {
  padding-left: 19px;
  color: var(--color-text);
  list-style: disc;
  margin-bottom: 24px;
  flex: 1;
}

.plan li {
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Plano em destaque — mesma identidade visual do card "White Label" em
   Produtos (mesmo gradiente), pra reforçar que é a mesma oferta. Preenchido
   e elevado, não só contornado: cor sozinha já diferenciava pouco (as três
   opções pareciam variações do mesmo cartão), e um rótulo de texto garante
   que a leitura não dependa só da cor pra dizer "esta é a recomendada".
   -------------------------------------------------------------------------- */

.plan--featured {
  border: none;
  background: var(--gradient-product-white-label);
  color: var(--color-on-brand);
  box-shadow: var(--shadow-deep);
  padding-top: 40px;
  margin-block: -14px;
}

.plan--featured h3,
.plan--featured > p {
  color: var(--color-on-brand);
}

.plan--featured .plan__price {
  color: var(--color-on-purple-muted);
}

.plan__badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-ink);
  color: var(--color-on-brand);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 7px 16px;
  border-radius: var(--border-radius-pill);
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}

/* Espelha o bloco "Everything on [plano anterior]" de referências de
   pricing conhecidas: deixa explícito que o plano herda o de baixo em vez
   de repetir os mesmos 4 itens genéricos lado a lado sem hierarquia. */
.plan__inherit {
  flex: 1;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--border-radius-md);
  padding: 18px 20px;
  margin-bottom: 24px;
}

.plan__inherit-label {
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-on-purple-muted);
  margin-bottom: 12px;
}

.plan__inherit ul {
  margin-bottom: 0;
  color: var(--color-on-brand);
}

/* --------------------------------------------------------------------------
   Suporte
   -------------------------------------------------------------------------- */

.support {
  background: var(--color-support);
  color: var(--color-on-brand);
  border-radius: 34px;
  padding: 52px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.support h2 {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.05;
  margin: 12px 0 16px;
}

.support p {
  color: var(--color-on-dark-muted);
  font-size: 17px;
}

.support__box {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 24px;
  border-radius: 22px;
}

.support__box strong {
  display: block;
  font-size: 22px;
  margin-bottom: 10px;
}

.support__box p + p {
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   CTA final e rodapé
   -------------------------------------------------------------------------- */

.cta {
  padding: 70px 0;
}

.cta__box {
  background: var(--gradient-cta);
  color: var(--color-on-brand);
  border-radius: 34px;
  padding: 58px;
  text-align: center;
}

.cta__box h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.05;
  margin: 0 auto 14px;
  max-width: 780px;
}

.cta__box p {
  color: var(--color-on-cta-muted);
  max-width: 700px;
  margin: 0 auto 28px;
  font-size: 17px;
}

.cta__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.site-footer {
  padding: 40px 0 55px;
  border-top: 1px solid var(--color-line);
  color: var(--color-text-muted);
}

.site-footer__grid {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.site-footer b {
  color: var(--color-ink);
}