/* Páginas de segmento (segmento.php). Carregado só em /segmentos/<slug>.
   Hero, dores, FAQ, demonstração e contato vêm do hero.css; aqui ficam os
   números, a lista "como resolve" e os cartões de agentes. */

/* Subtítulo do hero: mesmo tom do rótulo sobre o vídeo. */
.seg-hero-sub {
  max-width: 720px;
  margin: 0;
  font-size: var(--meds-font-size-lg);
  line-height: var(--meds-line-height-body);
  color: rgba(255, 255, 255, 0.85);
}

.seg-nums,
.seg-sol,
.seg-agentes {
  padding: var(--meds-spacing-space-24) 20px 0;
}
@media (min-width: 901px) {
  .page-shell .seg-nums,
  .page-shell .seg-sol,
  .page-shell .seg-agentes { padding-inline: calc(120px - var(--shell-inset)); }
}
.seg-agentes { padding-bottom: var(--meds-spacing-space-24); }

.seg-head {
  display: flex;
  flex-direction: column;
  gap: var(--meds-spacing-space-6);
  max-width: 760px;
  margin-bottom: var(--meds-spacing-space-16);
}
.seg-h2 {
  margin: 0;
  font-family: 'Space Grotesk', var(--meds-font-family-sans);
  font-size: var(--meds-font-size-4xl);
  font-weight: var(--meds-font-weight-regular);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--meds-text-primary);
  text-wrap: balance;
}

/* ═══ Números ═══ */
.seg-nums-grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--meds-border-subtle);
  border-radius: 20px;
  background: var(--meds-border-subtle);
}
.seg-num {
  display: flex;
  flex-direction: column;
  gap: var(--meds-spacing-space-3);
  padding: var(--meds-spacing-space-12) var(--meds-spacing-space-10);
  background: var(--meds-surface-page);
}
.seg-num-v {
  font-family: 'Space Grotesk', var(--meds-font-family-sans);
  font-size: 56px;
  font-weight: var(--meds-font-weight-regular);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--meds-text-primary);
  font-variant-numeric: tabular-nums;
}
.seg-num-l {
  font-size: var(--meds-font-size-lg);
  font-weight: var(--meds-font-weight-semibold);
  color: var(--meds-text-primary);
}
.seg-num-s { font-size: var(--meds-font-size-md); line-height: 1.45; color: var(--meds-text-secondary); }
.seg-nums-nota {
  margin: var(--meds-spacing-space-6) 0 0;
  font-size: var(--meds-font-size-sm);
  color: var(--meds-text-tertiary);
}

/* ═══ Como resolve ═══ */
.seg-sol-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--meds-spacing-space-12) var(--meds-spacing-space-10);
}
.seg-sol-lista li {
  padding-top: var(--meds-spacing-space-8);
  border-top: 1px solid var(--meds-border-default);
}
.seg-sol-n {
  display: block;
  margin-bottom: var(--meds-spacing-space-6);
  font-size: var(--meds-font-size-sm);
  font-weight: var(--meds-font-weight-semibold);
  letter-spacing: 0.06em;
  color: var(--meds-text-brand);
}
.seg-sol-lista h3 {
  margin: 0 0 var(--meds-spacing-space-4);
  font-size: var(--meds-font-size-xl);
  font-weight: var(--meds-font-weight-semibold);
  line-height: 1.25;
  color: var(--meds-text-primary);
}
.seg-sol-lista p {
  margin: 0;
  font-size: var(--meds-font-size-md);
  line-height: var(--meds-line-height-body);
  color: var(--meds-text-secondary);
}

/* ═══ Agentes ═══ */
.seg-agentes-grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--meds-spacing-space-6);
}
.seg-agente {
  padding: var(--meds-spacing-space-10);
  border: 1px solid var(--meds-border-subtle);
  border-radius: 20px;
  background: var(--meds-surface-page);
}
.seg-agente header {
  display: flex;
  align-items: center;
  gap: var(--meds-spacing-space-5);
  margin-bottom: var(--meds-spacing-space-6);
}
.seg-agente-foto {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px; height: 56px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--meds-surface-accent-default);
  color: var(--meds-text-inverse);
  font-weight: var(--meds-font-weight-semibold);
}
.seg-agente-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seg-agente header b { display: block; font-size: var(--meds-font-size-lg); color: var(--meds-text-primary); }
.seg-agente header small { font-size: var(--meds-font-size-md); color: var(--meds-text-brand); }
.seg-agente header small strong { font-weight: var(--meds-font-weight-semibold); }
.seg-agente p {
  margin: 0;
  font-size: var(--meds-font-size-md);
  line-height: var(--meds-line-height-body);
  color: var(--meds-text-secondary);
}

@media (max-width: 1100px) {
  .seg-nums-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg-sol-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg-agentes-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .seg-nums, .seg-sol, .seg-agentes { padding-top: var(--meds-spacing-space-16); }
  .seg-agentes { padding-bottom: var(--meds-spacing-space-16); }
  .seg-h2 { font-size: var(--meds-font-size-3xl); }
  .seg-num { padding: var(--meds-spacing-space-8); }
  .seg-num-v { font-size: 44px; }
  .seg-hero-sub { font-size: var(--meds-font-size-md); }
}
@media (max-width: 600px) {
  .seg-sol-lista, .seg-agentes-grade { grid-template-columns: 1fr; }
}

/* Na home a FAQ vem depois de uma seção clara com respiro próprio; aqui ela
   sucede a faixa escura das integrações e precisa do espaço em cima. */
.seg .faq { padding-top: var(--meds-spacing-space-24); }
@media (max-width: 900px) { .seg .faq { padding-top: var(--meds-spacing-space-16); } }

/* Foto do hero no lugar do vídeo. Foto clara pede véu mais forte embaixo,
   onde ficam o título e o subtítulo; em cima a imagem continua visível. */
.seg-hero-img { object-position: 50% 45%; }
.seg-hero-img ~ .pc-hero-veil {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.3) 100%);
}