/* ==========================================================================
   Redesign de seções — Clinical LP
   1. Gargalo operacional (tema dark + demos visuais)
   2. Fluxo completo (cards em uma row com animação de fluxo)
   3. Impacto mensurável (tema dark, números em destaque)
   4. Quem atende (cena de cidade em CSS com cards glassmorphism)
   5. Carrossel mini de clientes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Gargalo operacional — tema dark + representações visuais
   -------------------------------------------------------------------------- */
.clinical-problem {
  background:
    radial-gradient(circle at 88% 10%, rgba(43, 159, 232, 0.12), transparent 38%),
    linear-gradient(160deg, #1a2624 0%, #101816 100%);
  color: #cfdcdb;
}

.clinical-problem .h2,
.clinical-problem .sec-heading,
.clinical-problem .h3,
.clinical-problem h3,
.clinical-problem strong {
  color: #f2f8fa;
}

.clinical-problem .body-large {
  color: rgba(207, 220, 219, 0.8);
}

.clinical-problem .text-micro {
  color: #7cc3f2;
  border: 1px solid rgba(64, 189, 236, 0.3);
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
  background: rgba(43, 159, 232, 0.1);
}

.clinical-problem .clinical-pain-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: none;
  padding: 1.7rem;
  border-radius: 26px;
}

.clinical-problem .clinical-pain-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.clinical-problem .pain-index {
  color: #40bdec;
  opacity: 0.5;
  display: block;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 1.1rem;
}

.clinical-problem .clinical-pain-card p {
  color: rgba(207, 220, 219, 0.76);
}

/* moldura comum para os visuais */
.pain-demo {
  position: relative;
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1.6rem;
  padding: 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(64, 189, 236, 0.16);
  background:
    radial-gradient(circle at 80% 0%, rgba(43, 159, 232, 0.1), transparent 60%),
    rgba(9, 16, 15, 0.55);
  min-height: 168px;
  align-content: start;
  font-family: var(--font-main);
  font-size: 10px;
  line-height: 1.3;
}

/* card 1: telefone ocupado */
.pd-call {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0.6rem;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.pd-ava {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(64, 189, 236, 0.18);
  color: #7cc3f2;
  font-weight: 900;
  font-size: 12px;
}

.pd-ava--on {
  background: rgba(37, 211, 102, 0.2);
  color: #59e389;
}

.pd-call small {
  display: block;
  color: rgba(207, 220, 219, 0.6);
  font-size: 9.5px;
}

.pd-call b {
  display: block;
  color: #f2f8fa;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-mute,
.pd-busy {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.pd-mute {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.pd-mute::before {
  content: '';
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: rgba(207, 220, 219, 0.55);
}

.pd-busy {
  background: rgba(201, 127, 18, 0.16);
  border: 1px solid rgba(241, 157, 24, 0.4);
}

.pd-busy u {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(241, 157, 24, 0.85);
  border-right-color: transparent;
  animation: pdSpin 1.1s linear infinite;
}

.pd-call.is-busy {
  border-color: rgba(241, 157, 24, 0.35);
  animation: pdBusy 3.4s ease-in-out infinite;
}

@keyframes pdSpin { to { transform: rotate(360deg); } }
@keyframes pdBusy {
  0%, 100% { box-shadow: 0 0 0 0 rgba(241, 157, 24, 0.3); }
  50% { box-shadow: 0 0 0 7px rgba(241, 157, 24, 0); }
}

/* card 2: agenda com barras animadas e status legível */
.pd-slot {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.44rem 0.6rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.pd-slot time {
  color: rgba(207, 220, 219, 0.75);
  font-weight: 850;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.pd-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.pd-fill {
  display: block;
  height: 100%;
  width: var(--pdw, 60%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(64, 189, 236, 0.85), rgba(64, 189, 236, 0.4));
  transform-origin: left center;
  animation: pdFillIn 4.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.pd-fill.is-gap {
  background: repeating-linear-gradient(135deg, rgba(225, 90, 90, 0.5) 0 6px, transparent 6px 11px);
}

.pd-status {
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 850;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.pd-status.is-ok {
  color: #59e389;
  background: rgba(37, 211, 102, 0.14);
  border: 1px solid rgba(37, 211, 102, 0.32);
}

.pd-status.is-fail {
  color: #ff9f9f;
  background: rgba(225, 90, 90, 0.16);
  border: 1px solid rgba(225, 90, 90, 0.42);
  animation: pdFailBlink 2.6s ease-in-out infinite;
}

.pd-slot.is-missed {
  border-color: rgba(225, 90, 90, 0.35);
  background: rgba(225, 90, 90, 0.07);
}

.pd-slot:nth-child(2) .pd-fill { animation-delay: 0.4s; }
.pd-slot:nth-child(4) .pd-fill { animation-delay: 1.2s; }

.pd-agenda-foot {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.3rem;
  padding-left: 0.15rem;
  color: rgba(241, 157, 24, 0.9);
  font-size: 10px;
  font-weight: 750;
}

.pd-agenda-foot i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(241, 157, 24, 0.9);
  box-shadow: 0 0 0 0 rgba(241, 157, 24, 0.5);
  animation: pdFootPing 2.6s ease-out infinite;
}

@keyframes pdFillIn {
  0% { transform: scaleX(0.12); opacity: 0.55; }
  38%, 82% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0.12); opacity: 0.55; }
}

@keyframes pdFailBlink {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes pdFootPing {
  0% { box-shadow: 0 0 0 0 rgba(241, 157, 24, 0.55); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(241, 157, 24, 0); }
}

/* card 3: dados dispersos — fontes espalhadas em grade + varredura de busca */
.pain-demo--scattered {
  display: grid;
  gap: 0.95rem;
  align-content: center;
  min-height: 208px;
  overflow: hidden;
}

/* varredura que "procura" os dados pelo painel */
.pain-demo--scattered::after {
  content: '';
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: -26%;
  width: 24%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(64, 189, 236, 0.13), transparent);
  transform: skewX(-12deg);
  animation: pdScan 6.4s ease-in-out infinite;
}

/* chips em grade: cada um torto e fora de altura, sem sobreposição */
.pd-scatter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 0.9rem;
  padding: 0.15rem 0.15rem;
}

.pd-chip {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.55rem;
  align-items: center;
  padding: 0.62rem 0.8rem;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.055);
  animation: pdChipDrift 5.6s ease-in-out var(--bd, 0s) infinite;
}

.pd-chip:nth-child(1) { --dy: 7px; --bd: 0s; }
.pd-chip:nth-child(2) { --dy: -6px; --bd: 0.9s; }
.pd-chip:nth-child(3) { --dy: 8px; --bd: 1.7s; }
.pd-chip:nth-child(4) { --dy: -5px; --bd: 2.6s; }

.pd-chip i {
  grid-row: 1 / span 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.pd-chip b {
  color: #f2f8fa;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.pd-chip small {
  color: rgba(207, 220, 219, 0.55);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.pd-chip--wa i { background: #2fd06b; box-shadow: 0 0 8px rgba(47, 208, 107, 0.75); }
.pd-chip--ag i { background: #40bdec; box-shadow: 0 0 8px rgba(64, 189, 236, 0.75); }
.pd-chip--fm i { background: #f19d18; box-shadow: 0 0 8px rgba(241, 157, 24, 0.75); }
.pd-chip--pr i { background: #30a3a4; box-shadow: 0 0 8px rgba(48, 163, 164, 0.75); }

@keyframes pdChipDrift {
  0%, 100% { translate: 0 var(--dy, 0); }
  50% { translate: 0 calc(var(--dy, 0) - 5px); }
}

@keyframes pdScan {
  0%, 10% { translate: 0 0; opacity: 0; }
  22% { opacity: 1; }
  78% { opacity: 1; }
  90%, 100% { translate: 540% 0; opacity: 0; }
}

.pd-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.pd-search i {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(241, 157, 24, 0.8);
  animation: pdSpin 1.6s linear infinite;
}

.pd-search span {
  color: rgba(207, 220, 219, 0.62);
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* cursor piscando depois do texto */
.pd-search::after {
  content: '';
  width: 1.5px;
  height: 11px;
  margin-left: -0.35rem;
  border-radius: 2px;
  background: rgba(241, 157, 24, 0.85);
  animation: pdCaret 1.1s steps(1) infinite;
}

@keyframes pdCaret {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   2. Fluxo completo — linha do tempo (paradas alternadas em cima/baixo)
   -------------------------------------------------------------------------- */
.clinical-flow-section .flow-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 44px 10px 48px;
  border-radius: 30px;
  border: 1px solid rgba(43, 159, 232, 0.16);
  background:
    radial-gradient(circle at 18% 10%, rgba(43, 159, 232, 0.07), transparent 34rem),
    rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px rgba(33, 68, 86, 0.09);
}

/* trilho central (a "via" do fluxo) */
.clinical-flow-section .flow-line::before {
  content: '';
  position: absolute;
  left: 48px;
  right: 48px;
  top: 272px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(43, 159, 232, 0.65) 0 7px, transparent 7px 13px);
  background-size: 26px 2px;
  animation: flowDash 1.15s linear infinite;
}

/* ponta seta no fim do trilho */
.clinical-flow-section .flow-line::after {
  content: '';
  position: absolute;
  top: 266px;
  right: 26px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #40bdec;
}

/* faísca que percorre a linha */
.flow-spark {
  position: absolute;
  z-index: 2;
  top: 267px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #40bdec;
  box-shadow: 0 0 16px rgba(64, 189, 236, 0.9);
  animation: flowSparkRun 5.2s cubic-bezier(0.66, 0, 0.36, 1) infinite;
}

.flow-stop {
  position: relative;
  display: grid;
  grid-template-rows: 200px 58px auto;
  justify-items: center;
  padding: 0 0.9rem;
}

.flow-stop-card {
  position: relative;
  grid-row: auto;
  max-width: 218px;
  padding: 1.05rem 1.1rem 1.15rem;
  border-radius: 20px;
  border: 1px solid rgba(43, 159, 232, 0.18);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 44px rgba(33, 68, 86, 0.08);
  text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.flow-stop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px rgba(33, 68, 86, 0.13);
}

.flow-stop-card.is-up {
  grid-row: 1;
  align-self: end;
}

.flow-stop-card.is-down {
  grid-row: 3;
  align-self: start;
}

.flow-stop-card h3 {
  color: var(--dark);
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.flow-stop-card p {
  margin: 0;
  color: var(--text-body);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* conectorzinho entre card e parada */
.flow-stop-card::after {
  content: '';
  position: absolute;
  left: 50%;
  z-index: 1;
  width: 2px;
  height: 18px;
  background: rgba(43, 159, 232, 0.5);
}

.flow-stop-card.is-up::after { bottom: -18px; }
.flow-stop-card.is-down::after { top: -18px; }

.flow-stop-dot {
  grid-row: 2;
  align-self: center;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(145deg, #40bdec, #1a8bc7);
  color: #ffffff;
  font-weight: 900;
  font-size: 1.05rem;
  box-shadow: 0 10px 24px rgba(43, 159, 232, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  animation: flowNode 4.5s ease-in-out infinite;
}

.flow-stop:nth-child(3) .flow-stop-dot { animation-delay: 0.35s; }
.flow-stop:nth-child(4) .flow-stop-dot { animation-delay: 0.7s; }
.flow-stop:nth-child(5) .flow-stop-dot { animation-delay: 1.05s; }
.flow-stop:nth-child(6) .flow-stop-dot { animation-delay: 1.4s; }

.flow-stop-card.is-highlight {
  border-color: rgba(43, 159, 232, 0.4);
  background: linear-gradient(160deg, rgba(43, 159, 232, 0.14), rgba(255, 255, 255, 0.96) 62%);
}

@keyframes flowDash {
  to { background-position-x: 26px; }
}

@keyframes flowSparkRun {
  0% { left: 48px; opacity: 0; }
  8%, 88% { opacity: 1; }
  100% { left: calc(100% - 66px); opacity: 0; }
}

@keyframes flowNode {
  0%, 18% { box-shadow: 0 10px 24px rgba(43, 159, 232, 0.4), 0 0 0 0 rgba(43, 159, 232, 0.5); }
  34% { box-shadow: 0 10px 24px rgba(43, 159, 232, 0.4), 0 0 0 14px rgba(43, 159, 232, 0); }
  100% { box-shadow: 0 10px 24px rgba(43, 159, 232, 0.4), 0 0 0 0 rgba(43, 159, 232, 0); }
}

/* --------------------------------------------------------------------------
   3. Impacto mensurável — tema dark, números grandes, entrada animada
   -------------------------------------------------------------------------- */
.metrics-dark {
  background:
    radial-gradient(circle at 82% 0%, rgba(43, 159, 232, 0.16), transparent 40%),
    radial-gradient(circle at 8% 100%, rgba(48, 163, 164, 0.12), transparent 38%),
    linear-gradient(165deg, #16211f 0%, #0c1312 100%);
}

.metrics-dark-eyebrow {
  display: inline-block;
  color: #7cc3f2;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(64, 189, 236, 0.3);
  border-radius: 999px;
  background: rgba(43, 159, 232, 0.1);
}

.metrics-dark .h2 { color: #f2f8fa; }

.metric-strip {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
  counter-reset: metric;
}

.metric-strip-item {
  position: relative;
  padding: 2rem 1.7rem 2.2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.metric-strip-item:first-child { border-left: 0; }

.chart-container.reveal-active .metric-strip-item,
.metrics-dark .reveal-active .metric-strip-item {
  opacity: 1;
  transform: translateY(0);
}

.chart-container.reveal-active .stagger-1 { transition-delay: 0.05s; }
.chart-container.reveal-active .stagger-2 { transition-delay: 0.15s; }
.chart-container.reveal-active .stagger-3 { transition-delay: 0.25s; }
.chart-container.reveal-active .stagger-4 { transition-delay: 0.35s; }

.metric-number {
  display: block;
  font-size: clamp(2.6rem, 4.6vw, 3.7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #f2f8fa;
  margin-bottom: 0.9rem;
}

.metric-label {
  display: block;
  color: #7cc3f2;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.metric-strip-item p {
  margin: 0;
  color: rgba(207, 220, 219, 0.66);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   4. Quem atende — cidade minimalista em CSS
   -------------------------------------------------------------------------- */
.city-scene {
  position: relative;
  height: 460px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(43, 159, 232, 0.14);
  background:
    radial-gradient(circle at 50% 118%, rgba(43, 159, 232, 0.12), transparent 42%),
    #eef6fa;
}

.city-ground {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 88px;
  height: 2px;
  background: rgba(70, 100, 110, 0.35);
}

.city-sky {
  position: absolute;
  bottom: 90px;
  border-radius: 6px 6px 0 0;
  background: #d4e2ea;
}

.city-sky::after {
  content: '';
  position: absolute;
  inset: 12px 10px auto;
  height: 46%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 10px, transparent 10px 18px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.55) 0 7px, transparent 7px 14px);
  opacity: 0.6;
}

.city-sky--1 { left: 4%; width: 74px;  height: 110px; background: #dce8ef; }
.city-sky--2 { left: 15%; width: 56px; height: 158px; background: #c9dbe5; }
.city-sky--3 { right: 26%; width: 64px; height: 96px;  background: #dce8ef; }
.city-sky--4 { right: 12%; width: 84px; height: 140px; background: #cfe0e9; }
.city-sky--5 { right: 5%;  width: 48px; height: 84px;  background: #dbe7ee; }

/* unidades com identidade */
.city-unit {
  position: absolute;
  bottom: 92px;
  width: 148px;
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(43, 159, 232, 0.2);
  box-shadow: 0 18px 40px rgba(33, 68, 86, 0.16);
  background: #ffffff;
  z-index: 2;
}

.city-unit--public,
.city-unit--private {
  height: 196px;
}

.city-unit--public { left: 22%; }
.city-unit--private { right: 23.5%; }

.city-unit-banner {
  display: flex;
  gap: 4px;
  padding: 9px 10px 4px;
}

.city-unit-banner b {
  height: 4px;
  flex: 1;
  border-radius: 999px;
  background: #0e7a3e;
  opacity: 0.85;
}

.city-unit-banner--private b {
  background: #2b9fe8;
}

.city-unit-cross,
.city-unit-heart {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 10px auto 6px;
  border-radius: 50%;
  color: #ffffff;
}

.city-unit-cross {
  background: #0e7a3e;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  animation: cityPulse 3.2s ease-in-out infinite;
}

.city-unit-heart {
  width: 40px;
  height: 40px;
  background: #2b9fe8;
  animation: cityPulse 3.2s ease-in-out infinite;
}

.city-unit-heart svg {
  width: 20px;
  height: 20px;
  fill: #ffffff;
}

.city-unit-windows {
  margin: 4px 12px 0;
  height: 44px;
  background:
    repeating-linear-gradient(90deg, rgba(64, 130, 160, 0.16) 0 16px, transparent 16px 24px),
    repeating-linear-gradient(0deg, rgba(64, 130, 160, 0.16) 0 12px, transparent 12px 20px);
}

.city-unit-tag {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: #0e7a3e;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.city-unit-tag--private { background: #1a8bc7; }

/* rota + pacotes */
.city-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.city-edge {
  fill: none;
  stroke: rgba(43, 159, 232, 0.5);
  stroke-width: 2;
  stroke-dasharray: 7 9;
  animation: cityDash 1.4s linear infinite;
}

.city-packet { fill: #2b9fe8; filter: drop-shadow(0 0 6px rgba(43, 159, 232, 0.9)); }
.city-packet--wa { fill: #25d366; }
.city-packet--top { fill: #7cc3f2; }

/* cards flutuantes glassmorphism */
.city-card {
  position: absolute;
  z-index: 5;
  max-width: 252px;
  padding: 1rem 1.2rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 22px 52px rgba(21, 55, 75, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: cityFloat 5.4s ease-in-out infinite;
}

.city-card span {
  display: block;
  color: var(--primary);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.city-card strong {
  display: block;
  color: var(--dark);
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.city-card p {
  margin: 0;
  color: #5a6b67;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* seta indicadora (dashed animado + ponta) —.card na esquerda aponta p/ a direita */
.city-card::after {
  content: '';
  position: absolute;
  width: 34px;
  height: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(43, 159, 232, 0.65) 0 6px, transparent 6px 10px);
  background-size: 22px 2px;
  animation: cityDash 1s linear infinite;
}

.city-card::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #40bdec;
  animation: cityTip 1.4s ease-in-out infinite;
}

/* card público (esquerda) → seta no lado direito apontando à UBS */
.city-card--public::after { left: auto; right: -46px; top: 52px; }
.city-card--public::before { left: auto; right: -16px; top: 49px; transform: none; }

/* card privado (direita) → seta no lado esquerdo apontando à clínica */
.city-card--private::before {
  right: auto;
  left: -16px;
  top: 49px;
  border-left: 0;
  border-right: 9px solid #40bdec;
}

.city-card--private::after { right: auto; left: -46px; top: 52px; }

.city-card--public {
  left: 3.5%;
  top: 128px;
}

.city-card--private {
  right: 3.5%;
  top: 128px;
}

.city-card--top {
  left: 50%;
  transform: translateX(-50%);
  top: -8px;
  max-width: 300px;
  text-align: center;
}

.city-card--top::before,
.city-card--top::after { display: none; }

/* núcleo Ê-Bot: logo central pulando do tamanho das unidades */
.city-hub {
  position: absolute;
  left: 50%;
  bottom: 218px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.city-hub-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(43, 159, 232, 0.42);
  box-shadow: 0 18px 40px rgba(21, 55, 75, 0.22), 0 0 24px rgba(64, 189, 236, 0.22);
  animation: cityHubPulse 2.8s ease-in-out infinite;
}

.city-hub-logo img {
  width: 92px;
  height: 92px;
}

.city-hub-logo::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 44px;
  border: 2px solid rgba(43, 159, 232, 0.55);
  opacity: 0;
  animation: cityHubRing 2.8s ease-out infinite;
}

.city-hub-label {
  padding: 0.16rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(43, 159, 232, 0.32);
  color: var(--dark);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.city-edge.is-hub {
  stroke: rgba(43, 159, 232, 0.75);
  stroke-dasharray: 5 7;
}

@keyframes cityHubPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

@keyframes cityHubRing {
  0% { transform: scale(0.92); opacity: 0.9; }
  75%, 100% { transform: scale(1.5); opacity: 0; }
}

@keyframes cityFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes cityPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}

@keyframes cityDash {
  to { background-position-x: 22px; }
}

@keyframes cityTip {
  0%, 100% { transform: translateX(0); opacity: 0.65; }
  50% { transform: translateX(4px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   5. Carrossel mini de clientes
   -------------------------------------------------------------------------- */
.clients-mini-head {
  margin: 4rem 0 1.25rem;
  text-align: center;
}

.clients-mini-head .h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  color: var(--dark);
}

.clients-swiper--mini {
  padding: 0.5rem 0 1rem;
}

.clients-swiper--mini .client-card {
  padding: 0.75rem;
  border-radius: 22px;
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 0;
  align-items: stretch;
}

.clients-swiper--mini .client-card img {
  height: 100%;
  min-height: 118px;
  aspect-ratio: auto;
  border-radius: 16px;
  object-fit: cover;
}

.clients-swiper--mini .client-card > div {
  padding: 0.85rem 0.9rem;
}

.clients-swiper--mini .client-card span {
  margin-bottom: 0.3rem;
  font-size: 0.62rem;
}

.clients-swiper--mini .client-card strong {
  font-size: 0.98rem;
  margin-bottom: 0.35rem;
}

.clients-swiper--mini .client-card p {
  font-size: 0.8rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* carrossel: cursor de arrastar + foco fluido */
.clients-swiper--mini,
.clients-swiper--mini.swiper-container {
  cursor: grab;
  user-select: none;
}

.clients-swiper--mini:active {
  cursor: grabbing;
}

.clients-swiper--mini .swiper-slide {
  transition: opacity 0.35s ease;
}

.clients-swiper--mini .swiper-slide-active .client-card {
  box-shadow: 0 30px 70px rgba(33, 68, 86, 0.16);
}

/* controles compactos (ficam dentro do elemento .swiper) */
.clients-swiper--mini .testimonials-controls {
  margin-top: 1.6rem;
}

/* --------------------------------------------------------------------------
   6. Integrações em destaque (MV, RANG, FEEGOW, IDS) — cards tipográficos
   -------------------------------------------------------------------------- */
.integration-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.integration-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.5rem 1.4rem 1.35rem;
  border-radius: 22px;
  border: 1px solid rgba(43, 159, 232, 0.16);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 44px rgba(33, 68, 86, 0.07);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* filete superior com gradiente da marca deslizando devagar */
.integration-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #91d0d3, #40bdec 40%, #1a8bc7 70%, #91d0d3);
  background-size: 220% 100%;
  opacity: 0.85;
  animation: integrationSheen 7s linear infinite;
}

/* brilho suave no hover */
.integration-card::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: auto -30% -60% auto;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 189, 236, 0.35), transparent 70%);
  filter: blur(26px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}

.integration-card:hover {
  transform: translateY(-6px);
  border-color: rgba(64, 189, 236, 0.45);
  box-shadow: 0 30px 70px rgba(43, 159, 232, 0.18);
}

.integration-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.integration-card > * {
  position: relative;
  z-index: 1;
}

.integration-card-name {
  font-family: "CocogooseProTrial-Bold", "CocogooseProTrial", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.02em;
  color: var(--dark);
  line-height: 1;
  transition: color 0.3s ease;
}

.integration-card:hover .integration-card-name {
  background: linear-gradient(100deg, #1a8bc7, #40bdec 60%, #30a3a4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #1a8bc7;
}

.integration-card p {
  margin: 0;
  color: var(--text-body);
  font-size: 0.9rem;
  line-height: 1.6;
}

.integration-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  margin-top: auto; /* alinha a tag na base do card, independente do texto (o gap do card garante o respiro mínimo) */
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(43, 159, 232, 0.3);
  background: rgba(43, 159, 232, 0.08);
  color: #166f9f;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.integration-card-tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1a8bc7;
  box-shadow: 0 0 0 0 rgba(43, 159, 232, 0.45);
  animation: integrationPing 2.4s ease-out infinite;
}

.integrations-logos-head {
  display: flex;
  justify-content: center;
  margin: 2.6rem 0 0.4rem;
}

@keyframes integrationSheen {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

@keyframes integrationPing {
  0% { box-shadow: 0 0 0 0 rgba(43, 159, 232, 0.45); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(43, 159, 232, 0); }
}

@media (max-width: 900px) {
  .integration-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .integration-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .integration-card::before,
  .integration-card-tag i {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Anexos gerais
   -------------------------------------------------------------------------- */

/* âncoras nunca escondem o título atrás da navbar fixa */
section[id] {
  scroll-margin-top: 96px;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-strip-item:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .metric-strip-item:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, 0.08); }
}

@media (max-width: 1024px) {
  .city-scene { height: 520px; }
  .city-card--top { top: 6px; }
  /* cards mais estreitos e colados nas bordas para não cobrir os prédios */
  .city-card--public,
  .city-card--private {
    max-width: 204px;
    top: 140px;
  }
  .city-card--public { left: 1.25%; }
  .city-card--private { right: 1.25%; }
}

@media (max-width: 1100px) {
  /* linha do fluxo vira timeline vertical com o trilho à esquerda */
  .clinical-flow-section .flow-line {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1rem 2rem;
  }

  .clinical-flow-section .flow-line::before {
    left: 44px;
    right: auto;
    top: 72px;
    bottom: 72px;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, rgba(43, 159, 232, 0.65) 0 7px, transparent 7px 13px);
    background-size: 2px 26px;
  }

  .clinical-flow-section .flow-line::after,
  .flow-spark { display: none; }

  .flow-stop {
    grid-template-rows: none;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 0 1.1rem;
    padding: 0.8rem 0;
  }

  .flow-stop-card {
    grid-row: 1;
    grid-column: 2;
    max-width: none;
    text-align: left;
  }

  /* is-up/is-down vencem por especificidade fora daqui; normaliza a linha */
  .flow-stop-card.is-up,
  .flow-stop-card.is-down {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
  }

  .flow-stop-dot {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    justify-self: center;
  }

  .flow-stop-card::after { display: none; }
}

@media (max-width: 720px) {
  .metric-strip { grid-template-columns: 1fr; }
  .metric-strip-item { border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .metric-strip-item:first-child { border-top: 0; }

  .city-scene {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 1rem 1rem 1.4rem;
  }

  .city-sky, .city-unit, .city-route, .city-hub, .city-card::before, .city-card::after { display: none; }

  .city-ground { display: none; }

  .city-card {
    position: static;
    transform: none;
    max-width: none;
    width: 100%;
    margin: 0.6rem 0;
    animation: none;
  }

  .city-card--top { order: -1; }

  .clients-swiper--mini .client-card {
    grid-template-columns: 1fr;
  }

  .clients-swiper--mini .client-card img {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .city-edge, .city-packet, .city-card, .city-card::after, .city-card::before,
  .city-hub-logo, .city-hub-logo::after,
  .flow-spark,
  .clinical-flow-section .flow-line::before,
  .clinical-flow-section .flow-stop-dot,
  .pd-busy u, .pd-call.is-busy, .pd-search i, .pd-search::after, .pd-agenda-foot i,
  .pd-fill, .pd-status.is-fail, .pd-chip, .pain-demo--scattered::after {
    animation: none !important;
  }

  .metric-strip-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}