/* UNICHAT-CUT-5K — COMMERCIAL LAUNCH EXPERIENCE: seções abaixo do hero.

   Consome só os tokens de tokens.css e reaproveita as classes de landing.css onde o componente
   já existe (.uc-container, .uc-title, .uc-eyebrow, .uc-btn, .uc-card, .uc-plan__*, .uc-check,
   data-reveal). O hero (landing.css + bloco HERO V2 abaixo) é estrutura congelada pelo Owner.

   Sistema de ritmo — toda seção usa a mesma gramática, na mesma ordem:
     .uc-section-head  (eyebrow + título [+ lead]; --split = título | lead ao lado; --center)
     bloco principal   (grade, mídia, cards)
     .uc-section-foot  (síntese + CTA contextual) ou .uc-connector (síntese sem CTA)
   Espaçamentos: seção = --uc-space-section; head→bloco = --uc-space-lg; bloco→bloco = --uc-space-lg.
   Um valor fora dessa escada é defeito, não calibração. */

/* ============================================================ ÍCONES DE LINHA (V2) */
.uc-icon {
  display: block;
}

/* ============================================================ NAVBAR */
.uc-nav {
  position: relative;
  z-index: 5;
  padding-block: clamp(14px, 1.8vw, 22px);
  border-bottom: 1px solid rgba(0, 168, 253, 0.12);
}

.uc-nav__bar {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
}

.uc-nav__bar .uc-brand {
  --uc-brand-size: 34px;
}

.uc-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  margin-inline: auto;
}

.uc-nav__links a {
  font-size: var(--uc-fs-sm);
  font-weight: 600;
  color: var(--uc-text-muted);
  transition: color 0.2s var(--uc-ease);
}

.uc-nav__links a:hover {
  color: var(--uc-cyan-bright);
}

.uc-nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
}

.uc-nav__login {
  font-size: var(--uc-fs-sm);
  font-weight: 600;
  color: var(--uc-text-primary);
}

.uc-nav__login:hover {
  color: var(--uc-cyan-bright);
}

.uc-btn--sm {
  min-height: 42px;
  padding-inline: 18px;
  font-size: var(--uc-fs-sm);
}

.uc-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--uc-surface-border);
  border-radius: var(--uc-radius-sm);
  cursor: pointer;
}

.uc-nav__burger span {
  display: block;
  height: 2px;
  margin-inline: 10px;
  background: var(--uc-text-primary);
  border-radius: 2px;
  transition: transform 0.2s var(--uc-ease), opacity 0.2s var(--uc-ease);
}

.uc-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.uc-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.uc-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile: some por padrão; landing.js alterna .is-open pelo botão. */
.uc-nav__mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  max-width: var(--uc-container);
  margin-inline: auto;
  padding: 12px var(--uc-gutter) 20px;
}

.uc-nav__mobile.is-open {
  display: flex;
}

.uc-nav__mobile a:not(.uc-btn) {
  padding: 12px 6px;
  border-bottom: 1px solid rgba(0, 168, 253, 0.1);
  font-weight: 600;
  color: var(--uc-text-primary);
}

.uc-nav__mobile .uc-btn {
  margin-top: 12px;
}

@media (max-width: 1080px) {
  .uc-nav__links,
  .uc-nav__actions {
    display: none;
  }

  .uc-nav__burger {
    display: flex;
    margin-left: auto;
  }
}

/* ============================================================ HERO V2 — polimento (estrutura congelada) */
.uc-hero--v2 .uc-hero__grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.22fr);
  gap: clamp(20px, 2.4vw, 36px);
}

/* Título de quatro linhas da referência ("oportunidade de negócio." inteira na última): um degrau
   abaixo do h1 original para caber na coluna sem quinta linha. */
.uc-hero--v2 .uc-hero__title {
  font-size: clamp(1.85rem, 2.6vw, 2.35rem);
}

.uc-hero--v2 .uc-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 20px);
}

.uc-hero--v2 .uc-hero__actions .uc-btn {
  width: min(100%, 500px);
  min-width: 0;
  min-height: clamp(60px, 5.4vw, 78px);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
}

.uc-hero__visual--legacy-assets {
  width: 100%;
}

/* ---- HERO v3 (referência do Owner, 2026-09-17): badges | celular | balões + métricas ----
   Três colunas em vez de "badges + palco com absolutos": a coluna da direita é um fluxo vertical
   (Instagram → painel → WhatsApp) que se distribui pela altura do celular, então nada depende de
   coordenadas mágicas e o empilhamento responsivo continua determinístico. */
.uc-hero__visual--v3 {
  /* Regra da dobra (feedback do Owner em monitor baixo): a mídia é limitada pela ALTURA do viewport,
     não só pela coluna — em 1366×768 ela passava 185px da dobra. A proporção da composição é
     ~1,03:1; 12rem é o que a barra + respiros do hero ocupam. Em telas altas o limite não atua. */
  width: 100%;
  max-width: min(100%, calc((100vh - 9rem) * 1.03));
  margin-inline: auto;
  grid-template-columns: minmax(0, 0.16fr) minmax(0, 0.54fr) minmax(0, 0.3fr);
  align-items: center;
  gap: clamp(4px, 0.8vw, 12px);
}

/* Telas largas e baixas (1366×768, 1280×720, 1536×864): o texto também respeita a dobra — um
   degrau de tipografia e de ritmo vertical, em rem, para título + lead + CTAs + chips caberem ao
   lado da mídia sem rolagem. */
@media (min-width: 1081px) and (max-height: 920px) {
  .uc-hero {
    padding-top: 1rem;
    padding-bottom: 1.25rem;
  }

  .uc-hero--v2 .uc-hero__title {
    font-size: clamp(1.7rem, 2.3vw, 2.1rem);
  }

  .uc-hero__eyebrow {
    margin-bottom: 0.75rem;
    text-wrap: balance; /* evita "FOLLOW-/UP" quebrado no hífen em 1366px */
  }

  .uc-hero--v2 .uc-hero__lead {
    margin-top: 0.9rem;
    font-size: 1.02rem;
    line-height: 1.6;
  }

  .uc-hero--v2 .uc-hero__actions {
    margin-top: 1.4rem;
    gap: 0.75rem;
  }

  .uc-hero--v2 .uc-hero__actions .uc-btn {
    min-height: 3.5rem;
    width: min(100%, 28rem);
  }

  .uc-hero__trust {
    margin-top: 1.1rem;
  }
}

/* O quinto badge (Instagram) foi recortado com margem menor que os quatro originais (que trazem
   ~16% de transparência acima); a sobreposição negativa é menor pelo mesmo motivo. */
.uc-hero__visual--v3 .uc-hero__badge--instagram {
  margin-top: -16%;
}

.uc-hero__visual--v3 .uc-hero__badge--instagram img {
  animation-delay: 2s;
}

.uc-hero__visual--v3 .uc-hero__phone {
  width: 100%;
  margin-left: 0;
  filter: drop-shadow(0 34px 64px rgba(0, 0, 0, 0.62));
}

.uc-hero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  padding-block: 4%;
}

.uc-hero__visual--v3 .uc-hero__analytics,
.uc-hero__visual--v3 .uc-hero__bubble {
  position: static;
  right: auto;
  top: auto;
  bottom: auto;
}

.uc-hero__visual--v3 .uc-hero__analytics {
  width: 100%;
  transform: perspective(1200px) rotateY(-12deg) rotateZ(1deg);
}

.uc-hero__visual--v3 .uc-hero__bubble--instagram {
  width: 58%;
  margin-right: 2%;
  transform: perspective(900px) rotateY(-10deg);
  animation-delay: 0.9s;
}

.uc-hero__visual--v3 .uc-hero__bubble--whatsapp {
  width: 60%;
  margin-right: 4%;
  transform: perspective(900px) rotateY(-8deg);
  animation-delay: 1.4s;
}

.uc-hero--v2 .uc-hero__lead {
  max-width: 50ch;
}

/* Eyebrow do hero: apoio, não destaque — menor e cinza-claro (feedback do Owner). */
.uc-hero--v2 .uc-hero__eyebrow {
  font-size: clamp(0.68rem, 0.82vw, 0.8rem);
  letter-spacing: 0.14em;
  color: var(--uc-text-muted);
}

/* Cinco selos de confiança: sem separador visual entre eles (o "•" quebrava linha sozinho). */
.uc-hero--v2 .uc-hero__trust {
  gap: 8px 10px;
}

.uc-hero--v2 .uc-hero__trust-item {
  padding: 5px 11px 5px 9px;
  font-size: clamp(0.78rem, 0.95vw, 0.86rem);
  border: 1px solid rgba(0, 168, 253, 0.16);
  border-radius: var(--uc-radius-pill);
  background: rgba(0, 168, 253, 0.05);
}

.uc-hero--v2 .uc-hero__trust-sep {
  display: none;
}

/* ============================================================ GRAMÁTICA COMPARTILHADA (5K) */
.uc-section-head {
  margin-bottom: var(--uc-space-lg);
}

.uc-section-head .uc-eyebrow {
  margin-bottom: clamp(10px, 1.2vw, 16px);
}

/* Largura em px, não em ch: `ch` aqui seria medido no font-size do container (16px), e o título
   de 42px ficava preso a ~560px, quebrando em 3–4 linhas. */
.uc-section-head--center {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

.uc-section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
}

/* Títulos que dividem a largura com outra coluna (cabeçalho dividido ou composição de duas
   colunas) usam um degrau abaixo do título centralizado — cabem na coluna sem quebra extra e
   preservam a hierarquia: seção "aberta" (centro) > seção "em coluna". */
.uc-section-head--split .uc-title,
.uc-auto__text .uc-title,
.uc-ai__text .uc-title,
.uc-campaigns__text .uc-title,
.uc-team__text .uc-title {
  font-size: clamp(1.6rem, 2.5vw, 2.3rem);
}

.uc-section-lead {
  margin-top: clamp(12px, 1.4vw, 18px);
  max-width: 52ch;
  color: var(--uc-text-muted);
  font-size: clamp(0.98rem, 1.12vw, 1.08rem);
  line-height: 1.7;
}

.uc-section-lead + .uc-section-lead {
  margin-top: 12px;
}

.uc-section-head--center .uc-section-lead {
  margin-inline: auto;
  max-width: 60ch;
}

.uc-section-lead--aside {
  margin-top: 0;
  max-width: none;
  padding-bottom: 0.35em; /* alinha a última linha do lead com a base do título */
  display: grid;
  gap: 12px;
}

.uc-section-note {
  margin-top: var(--uc-space-lg);
  text-align: center;
  color: var(--uc-text-faint);
  font-size: var(--uc-fs-sm);
  max-width: 78ch;
  margin-inline: auto;
}

.uc-section-foot {
  margin-top: var(--uc-space-lg);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--uc-surface-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.uc-section-foot__text {
  max-width: 50ch;
  font-weight: 600;
  line-height: 1.6;
}

.uc-section-foot__text--display {
  font-family: var(--uc-font-display);
  font-weight: 700;
}

.uc-block-title {
  font-family: var(--uc-font-display);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 700;
  line-height: 1.35;
}

.uc-block-title--center {
  text-align: center;
  margin-bottom: clamp(18px, 2vw, 26px);
}

.uc-block-lead {
  margin-top: 8px;
  color: var(--uc-text-muted);
  line-height: 1.65;
}

.uc-icon-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--uc-radius-md);
  background: rgba(0, 168, 253, 0.1);
  color: var(--uc-cyan);
}

.uc-icon-badge--sm {
  width: 44px;
  height: 44px;
  border-radius: var(--uc-radius-sm);
}

/* Canais: o ícone carrega a cor do canal, o resto continua na paleta do UniChat. */
.uc-icon-badge--instagram { color: #f472b6; background: rgba(244, 114, 182, 0.12); }
.uc-icon-badge--qr,
.uc-icon-badge--cloud-api { color: var(--uc-success); background: rgba(52, 211, 153, 0.12); }

/* Barra-síntese: ícone + frase forte + apoio. */
.uc-connector {
  margin-top: var(--uc-space-lg);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(18px, 2vw, 26px) clamp(22px, 2.6vw, 32px);
  background: var(--uc-surface);
  border: 1px solid var(--uc-surface-border);
  border-radius: var(--uc-radius-lg);
}

.uc-connector--pill {
  border-radius: var(--uc-radius-pill);
  padding-block: 16px;
}

.uc-connector--center {
  max-width: 760px;
  margin-inline: auto;
}

.uc-connector__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0, 168, 253, 0.12);
  color: var(--uc-cyan);
}

.uc-connector strong {
  display: block;
  font-family: var(--uc-font-display);
}

.uc-connector p {
  color: var(--uc-text-muted);
  font-size: var(--uc-fs-sm);
  line-height: 1.6;
}

.uc-connector strong + p {
  margin-top: 4px;
}

.uc-connector--pill p {
  color: var(--uc-text-primary);
  font-size: var(--uc-fs-body);
  font-weight: 600;
}

/* Lista de pontos de valor (ícone + título + apoio). */
.uc-point-list {
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
}

.uc-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.uc-point__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.4px solid var(--uc-surface-border-strong);
  color: var(--uc-cyan);
}

.uc-point strong {
  display: block;
  font-size: 1rem;
}

.uc-point p {
  margin-top: 4px;
  color: var(--uc-text-muted);
  font-size: var(--uc-fs-sm);
  line-height: 1.6;
}

/* Variante com fio luminoso à esquerda (herdada da lista "para quem é" da V1). */
.uc-point-list--rail {
  position: relative;
  padding-left: clamp(22px, 3vw, 40px);
}

.uc-point-list--rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(0, 168, 253, 0.65) 20%, rgba(0, 168, 253, 0.65) 80%, transparent);
}

.uc-check-list {
  margin-top: clamp(18px, 2vw, 24px);
  display: grid;
  gap: 10px;
}

.uc-check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
}

.uc-check-list svg {
  flex: none;
  color: var(--uc-azure);
}

/* Linha de "estatísticas"/resultados: quatro cards iguais. */
.uc-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}

.uc-stat {
  padding: clamp(18px, 2vw, 24px);
}

.uc-stat strong {
  display: block;
  margin-top: 14px;
  font-family: var(--uc-font-display);
  font-size: 0.98rem;
}

.uc-stat p {
  margin-top: 6px;
  color: var(--uc-text-muted);
  font-size: var(--uc-fs-sm);
  line-height: 1.55;
}

/* ============================================================ DOR / "SE ISSO ACONTECE" */
.uc-pain {
  padding-block: var(--uc-space-section);
}

.uc-pain__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.uc-pain__card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 28px) clamp(18px, 2vw, 24px);
}

.uc-pain__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.uc-pain__number {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--uc-surface-border-strong);
  border-radius: var(--uc-radius-sm);
  font-family: var(--uc-font-display);
  font-size: var(--uc-fs-xs);
  font-weight: 700;
  color: var(--uc-cyan);
}

.uc-pain__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.4px solid var(--uc-surface-border-strong);
  color: var(--uc-cyan);
}

.uc-pain__card-title {
  margin-top: 18px;
  font-family: var(--uc-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.uc-pain__card-desc {
  margin-top: 8px;
  color: var(--uc-text-muted);
  font-size: var(--uc-fs-sm);
  line-height: 1.65;
  flex: 1;
}

.uc-pain__action {
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--uc-surface-border);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--uc-azure);
}

/* ============================================================ MAPA DA PLATAFORMA */
.uc-platform {
  padding-block: var(--uc-space-section);
}

.uc-platform__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.uc-platform__tile-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(22px, 2.4vw, 28px);
}

.uc-platform__tile-title {
  margin-top: 18px;
  font-family: var(--uc-font-display);
  font-size: 1.08rem;
  font-weight: 700;
}

.uc-platform__tile-desc {
  margin-top: 8px;
  color: var(--uc-text-muted);
  font-size: var(--uc-fs-sm);
  line-height: 1.65;
  flex: 1;
}

.uc-platform__tile-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--uc-azure);
  transition: gap 0.2s var(--uc-ease);
}

.uc-platform__tile:hover .uc-platform__tile-more {
  gap: 10px;
  color: var(--uc-cyan-bright);
}

/* ============================================================ ATENDIMENTO OMNICHANNEL */
.uc-omni {
  padding-block: var(--uc-space-section);
}

.uc-omni__channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.uc-omni__channel {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(20px, 2.2vw, 26px);
}

.uc-omni__channel-name {
  font-family: var(--uc-font-display);
  font-size: 1.02rem;
  font-weight: 700;
}

.uc-omni__channel-desc {
  margin-top: 6px;
  color: var(--uc-text-muted);
  font-size: var(--uc-fs-sm);
  line-height: 1.6;
}

.uc-omni__channel-tag {
  display: block;
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--uc-azure);
}

.uc-omni__grid {
  margin-top: var(--uc-space-lg);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

/* Diagrama canais → caixa de entrada → equipe/IA. É esquema, não captura de tela. */
.uc-omni__diagram {
  display: grid;
  grid-template-columns: auto minmax(28px, 0.35fr) auto minmax(28px, 0.35fr) auto;
  align-items: center;
  align-content: center;
  gap: 0;
  padding: clamp(18px, 2.2vw, 28px);
  background: var(--uc-surface);
  border: 1px solid var(--uc-surface-border);
  border-radius: var(--uc-radius-lg);
  color: rgba(0, 168, 253, 0.55);
}

.uc-omni__sources,
.uc-omni__targets {
  display: grid;
  gap: 22px;
}

.uc-omni__lines {
  width: 100%;
  height: 100%;
  min-height: 250px;
}

.uc-omni__node {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: var(--uc-radius-md);
  border: 1px solid var(--uc-surface-border-strong);
  background: var(--uc-surface-elevated);
  color: var(--uc-text-primary);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}

.uc-omni__node .uc-icon {
  width: 20px;
  height: 20px;
  color: var(--uc-cyan);
}

.uc-omni__node--hub {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 24px;
  border-color: var(--uc-azure);
  box-shadow: var(--uc-glow-cyan);
  text-align: center;
  font-family: var(--uc-font-display);
  font-weight: 700;
  white-space: normal;
  max-width: 190px;
}

.uc-omni__node--hub .uc-icon {
  width: 32px;
  height: 32px;
}

.uc-omni__points .uc-block-title {
  margin-bottom: clamp(16px, 1.8vw, 22px);
}

.uc-omni__node--hub small {
  font-family: var(--uc-font-body);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--uc-text-muted);
}

.uc-omni__node--source:nth-child(3) .uc-icon { color: #f472b6; }

/* ============================================================ CRM / KANBAN */
.uc-crm {
  padding-block: var(--uc-space-section);
}

.uc-crm__visual {
  position: relative;
  max-width: 1080px;
  margin-inline: auto;
}

.uc-crm__board {
  width: 100%;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}

.uc-crm__followup {
  position: absolute;
  width: 30%;
  left: -3%;
  top: -6%;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.5));
  animation: uc-float 7.5s var(--uc-ease) infinite;
  animation-delay: 0.4s;
}

.uc-crm__rule {
  margin-top: var(--uc-space-lg);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}

.uc-crm__rule-card {
  margin-top: clamp(18px, 2vw, 24px);
  display: grid;
  gap: 10px;
  padding: clamp(18px, 2vw, 24px);
  background: var(--uc-surface);
  border: 1px solid var(--uc-surface-border-strong);
  border-radius: var(--uc-radius-lg);
  box-shadow: var(--uc-glow-cyan);
}

.uc-crm__rule-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
}

.uc-crm__rule-tag {
  flex: none;
  min-width: 52px;
  padding: 4px 10px;
  border-radius: var(--uc-radius-sm);
  font-family: var(--uc-font-display);
  font-size: var(--uc-fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
}

.uc-crm__rule-tag--if,
.uc-crm__rule-tag--and {
  background: rgba(0, 168, 253, 0.14);
  color: var(--uc-cyan-bright);
}

.uc-crm__rule-tag--then {
  background: var(--uc-azure);
  color: var(--uc-ink);
}

.uc-crm__examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 16px);
}

.uc-crm__example {
  padding: clamp(18px, 2vw, 22px);
}

.uc-crm__example h3 {
  font-family: var(--uc-font-display);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
}

.uc-crm__example p {
  margin-top: 8px;
  color: var(--uc-text-muted);
  font-size: var(--uc-fs-sm);
  line-height: 1.6;
}

/* ============================================================ AUTOMAÇÕES */
.uc-auto {
  padding-block: var(--uc-space-section);
}

.uc-auto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.uc-auto__grammar {
  margin-top: clamp(18px, 2vw, 24px);
  display: grid;
  gap: 10px;
}

.uc-auto__grammar li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
}

.uc-auto__visual img {
  width: min(100%, 460px);
  margin-inline: auto;
  filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.55));
}

.uc-auto__cases {
  margin-top: var(--uc-space-lg);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 16px);
}

.uc-auto__case {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(16px, 1.8vw, 20px);
}

.uc-auto__case strong {
  display: block;
  font-size: 0.98rem;
}

.uc-auto__case p {
  margin-top: 4px;
  color: var(--uc-text-muted);
  font-size: var(--uc-fs-sm);
  line-height: 1.55;
}

/* ============================================================ AGENTE DE IA */
.uc-ai {
  padding-block: var(--uc-space-section);
}

.uc-ai__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.uc-ai__title .uc-title__accent {
  background: var(--uc-gradient-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.uc-ai__visual img {
  width: min(100%, 580px);
  margin-inline: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}

.uc-ai__benefits {
  margin-top: var(--uc-space-lg);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 16px);
}

.uc-ai__benefit {
  padding: clamp(20px, 2.2vw, 24px);
}

.uc-ai__benefit h3 {
  margin-top: 14px;
  font-family: var(--uc-font-display);
  font-size: 1rem;
  font-weight: 700;
}

.uc-ai__benefit p {
  margin-top: 8px;
  color: var(--uc-text-muted);
  font-size: var(--uc-fs-sm);
  line-height: 1.6;
}

/* ============================================================ CAMPANHAS */
.uc-campaigns {
  padding-block: var(--uc-space-section);
}

.uc-campaigns__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.uc-campaigns__usecases {
  margin-top: clamp(18px, 2vw, 24px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.uc-campaigns__usecases li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.uc-campaigns__usecases li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--uc-surface);
  border: 1px solid var(--uc-surface-border);
  border-radius: var(--uc-radius-sm);
  font-size: 0.92rem;
  line-height: 1.5;
}

.uc-campaigns__usecase-icon {
  flex: none;
  display: inline-flex;
  color: var(--uc-cyan);
  margin-top: 1px;
}

.uc-campaigns__usecase-desc {
  color: var(--uc-text-muted);
}

.uc-campaigns__visual {
  position: relative;
  padding-bottom: 6%; /* reserva o espaço do card flutuante para ele não invadir a seção seguinte */
}

.uc-campaigns__dashboard {
  width: 100%;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}

.uc-campaigns__live-card {
  position: absolute;
  width: 40%;
  right: -4%;
  bottom: 0;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  animation: uc-float 7s var(--uc-ease) infinite;
}

.uc-campaigns__results {
  margin-top: var(--uc-space-lg);
}

/* ---- Inteligência de campanha (delta 5J) ----
   Jornada de 8 nós sobre uma linha: os 6 primeiros são etapas do funil (o que aconteceu), os 2
   últimos são ações da pessoa (segmento → nova campanha) e ganham o azul de ação. Mesma família
   visual do diagrama omnichannel, sem fingir captura de tela. */
.uc-intel {
  margin-top: var(--uc-space-lg);
  padding-top: var(--uc-space-lg);
  border-top: 1px solid var(--uc-surface-border);
}

.uc-intel__title {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.uc-intel__journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(6px, 0.8vw, 12px);
}

.uc-intel__journey::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 168, 253, 0.55) 6%, rgba(0, 168, 253, 0.55) 70%, var(--uc-azure) 78%, var(--uc-azure) 94%, transparent);
}

.uc-intel__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 0 2px;
}

.uc-intel__stage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--uc-bg);
  border: 1.4px solid var(--uc-surface-border-strong);
  color: var(--uc-cyan);
  box-shadow: 0 0 0 6px var(--uc-bg);
}

.uc-intel__stage--action .uc-intel__stage-icon {
  background: var(--uc-azure);
  border-color: var(--uc-azure);
  color: var(--uc-ink);
  box-shadow: 0 0 0 6px var(--uc-bg), 0 0 24px rgba(0, 168, 253, 0.45);
}

.uc-intel__stage strong {
  margin-top: 4px;
  font-family: var(--uc-font-display);
  font-size: 0.86rem;
  line-height: 1.3;
}

.uc-intel__stage--action strong {
  color: var(--uc-cyan-bright);
}

.uc-intel__stage span:last-child {
  font-size: 0.76rem;
  color: var(--uc-text-muted);
  line-height: 1.45;
}

.uc-intel__points {
  margin-top: var(--uc-space-lg);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}

.uc-intel__point {
  padding: clamp(20px, 2.2vw, 26px);
}

.uc-intel__point h4 {
  margin: 14px 0 0;
  font-family: var(--uc-font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
}

.uc-intel__point p {
  margin-top: 8px;
  color: var(--uc-text-muted);
  font-size: var(--uc-fs-sm);
  line-height: 1.62;
}

.uc-intel__note {
  margin-top: clamp(18px, 2vw, 26px);
}

/* ============================================================ EQUIPE E GESTÃO */
.uc-team {
  padding-block: var(--uc-space-section);
}

.uc-team__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}

.uc-team__highlight {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding: 16px 20px;
  border-left: 3px solid var(--uc-azure);
  background: rgba(0, 168, 253, 0.06);
  border-radius: 0 var(--uc-radius-md) var(--uc-radius-md) 0;
  font-family: var(--uc-font-display);
  font-weight: 700;
}

/* ============================================================ FLUXO INTEGRADO (stepper) */
.uc-flow {
  padding-block: var(--uc-space-section);
}

.uc-flow__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
}

/* Linha contínua atrás dos marcadores. */
.uc-flow__steps::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 168, 253, 0.6) 8%, rgba(0, 168, 253, 0.6) 92%, transparent);
}

.uc-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 0 4px;
}

.uc-flow__step-marker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--uc-bg);
  border: 1.4px solid var(--uc-surface-border-strong);
  color: var(--uc-cyan);
  box-shadow: 0 0 0 6px var(--uc-bg);
}

.uc-flow__step-number {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--uc-azure);
  color: var(--uc-ink);
  font-family: var(--uc-font-display);
  font-size: 0.7rem;
  font-weight: 800;
}

.uc-flow__step strong {
  margin-top: 6px;
  font-family: var(--uc-font-display);
  font-size: 0.9rem;
  line-height: 1.3;
}

.uc-flow__step span:last-child {
  font-size: 0.8rem;
  color: var(--uc-text-muted);
  line-height: 1.5;
}

.uc-flow__closing {
  margin-top: var(--uc-space-lg);
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}

.uc-flow__closing strong {
  display: block;
  font-family: var(--uc-font-display);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
}

.uc-flow__closing p {
  margin-top: 10px;
  color: var(--uc-text-muted);
}

/* ============================================================ PLANOS V2 — toggle mensal/anual */
.uc-pricing__toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.uc-pricing__toggle {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.uc-pricing__toggle label {
  cursor: pointer;
  font-family: var(--uc-font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--uc-text-muted);
  transition: color 0.2s var(--uc-ease);
}

.uc-pricing__toggle-switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: var(--uc-radius-pill);
  background: var(--uc-surface-elevated);
  border: 1px solid var(--uc-surface-border-strong);
}

.uc-pricing__toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--uc-azure);
  transition: transform 0.25s var(--uc-ease);
}

.uc-pricing__toggle-input:checked ~ .uc-pricing__toggle .uc-pricing__toggle-switch::after {
  transform: translateX(20px);
}

.uc-pricing__toggle-input:checked ~ .uc-pricing__toggle .uc-pricing__toggle-monthly {
  color: var(--uc-text-muted);
}

.uc-pricing__toggle-input:not(:checked) ~ .uc-pricing__toggle .uc-pricing__toggle-annual {
  color: var(--uc-text-muted);
}

.uc-pricing__toggle-input:checked ~ .uc-pricing__toggle .uc-pricing__toggle-annual,
.uc-pricing__toggle-input:not(:checked) ~ .uc-pricing__toggle .uc-pricing__toggle-monthly {
  color: var(--uc-text-primary);
}

.uc-pricing--v2 .uc-pricing__grid {
  margin-top: clamp(26px, 3vw, 40px);
}

.uc-plan__positioning {
  margin-top: 6px;
  text-align: center;
  color: var(--uc-text-muted);
  font-size: 0.86rem;
  min-height: 2.6em;
}

/* Bloco de preço com altura fixa nos três cards: nome, preço e nota ocupam a mesma faixa,
   então a lista de recursos começa na mesma linha em Pro, Max e Enterprise. */
.uc-pricing--v2 .uc-plan__price {
  flex-wrap: wrap;
  min-height: 6.2em;
  align-content: start;
}

.uc-plan__price--annual {
  display: none;
}

/* O checkbox e a grade de planos são irmãos diretos dentro do mesmo .uc-container (ver
   Pages/Shared/SectionsV2/_Pricing.cshtml) — por isso o combinador de irmão geral alcança a
   grade sem precisar subir para o ancestral. */
.uc-pricing__toggle-input:checked ~ .uc-pricing__grid .uc-plan__price--monthly {
  display: none;
}

.uc-pricing__toggle-input:checked ~ .uc-pricing__grid .uc-plan__price--annual {
  display: flex;
}

.uc-plan__price-annual-note,
.uc-plan__price-savings {
  flex-basis: 100%;
  margin-top: 4px;
  text-align: center;
  font-family: var(--uc-font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--uc-text-faint);
}

.uc-plan__price-savings {
  color: var(--uc-success);
  font-weight: 600;
}

.uc-plan__feature--lead {
  padding-bottom: clamp(12px, 1.35vw, 19px);
  border-bottom: 1px solid var(--uc-surface-border);
  font-weight: 600;
}

.uc-pricing__footnotes {
  margin-top: clamp(24px, 2.8vw, 34px);
  text-align: center;
  color: var(--uc-text-muted);
  font-size: 0.86rem;
  display: grid;
  gap: 4px;
  max-width: 88ch;
  margin-inline: auto;
}

.uc-pricing__disclaimer {
  margin-top: 12px;
  color: var(--uc-text-faint);
  font-size: 0.78rem;
  font-style: italic;
}

/* FINAL COMMERCIAL AUTHORITY — o ciclo do toggle viaja no CTA: dois links por plano, um visível. */
.uc-plan__cta-link--annual {
  display: none;
}

.uc-pricing__toggle-input:checked ~ .uc-pricing__grid .uc-plan__cta-link--monthly {
  display: none;
}

.uc-pricing__toggle-input:checked ~ .uc-pricing__grid .uc-plan__cta-link--annual {
  display: inline-flex;
}

/* Enterprise: sem preço numérico. Mesma faixa de altura dos outros dois cards. */
.uc-plan__price--consult {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.uc-plan__price-value--consult {
  font-size: 1.55rem;
  line-height: 1.2;
}

/* ============================================================ FAQ */
.uc-faq {
  padding-block: var(--uc-space-section);
}

.uc-faq__list {
  margin-top: var(--uc-space-lg);
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: 10px;
}

.uc-faq__item {
  padding: 4px clamp(18px, 2vw, 24px);
  background: var(--uc-surface);
  border: 1px solid var(--uc-surface-border);
  border-radius: var(--uc-radius-md);
  transition: border-color 0.2s var(--uc-ease);
}

.uc-faq__item[open] {
  border-color: var(--uc-surface-border-strong);
}

.uc-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.uc-faq__item summary::-webkit-details-marker {
  display: none;
}

.uc-faq__chevron {
  flex: none;
  color: var(--uc-azure);
  transition: transform 0.25s var(--uc-ease);
}

.uc-faq__item[open] .uc-faq__chevron {
  transform: rotate(180deg);
}

.uc-faq__item p {
  padding-bottom: 18px;
  color: var(--uc-text-muted);
  line-height: 1.7;
  font-size: 0.94rem;
}

/* ============================================================ CTA FINAL V2 */
.uc-final--v2 .uc-final__lead {
  margin-top: clamp(16px, 1.8vw, 24px);
  max-width: 46ch;
  color: var(--uc-text-muted);
  line-height: 1.75;
}

.uc-final__highlight {
  margin-top: clamp(20px, 2.4vw, 28px);
  display: grid;
  gap: 4px;
  font-family: var(--uc-font-display);
  font-weight: 700;
  color: var(--uc-cyan);
}

.uc-final__orb {
  width: min(100%, 560px);
  margin-inline: auto;
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.5));
}

/* ============================================================ RODAPÉ V2 */
.uc-footer--v2 {
  padding-block: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 36px);
}

.uc-footer__grid--v2 {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
  text-align: left;
}

.uc-footer__brand-col .uc-brand {
  --uc-brand-size: 34px;
}

.uc-footer__brand-col .uc-footer__tagline {
  margin-top: 14px;
  text-align: left;
  max-width: 34ch;
}

.uc-footer__col h3 {
  font-family: var(--uc-font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--uc-text-primary);
}

.uc-footer__col ul {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.uc-footer__col a {
  color: var(--uc-text-muted);
  font-size: 0.88rem;
  transition: color 0.2s var(--uc-ease);
}

.uc-footer__col a:hover {
  color: var(--uc-cyan-bright);
}

.uc-footer__copyright--v2 {
  margin-top: clamp(28px, 3.2vw, 40px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(0, 168, 253, 0.1);
  text-align: center;
  color: var(--uc-text-faint);
  font-size: var(--uc-fs-sm);
}

/* ============================================================ TOGGLE DE COMPARAÇÃO (homologação) */
.uc-compare-toggle {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--uc-surface-elevated);
  border: 1px solid var(--uc-surface-border-strong);
  color: var(--uc-text-primary);
  box-shadow: var(--uc-shadow-card);
  opacity: 0.55;
  transition: opacity 0.2s var(--uc-ease), border-color 0.2s var(--uc-ease), color 0.2s var(--uc-ease);
}

.uc-compare-toggle__label {
  display: none;
}

.uc-compare-toggle:hover,
.uc-compare-toggle:focus-visible {
  opacity: 1;
  border-color: var(--uc-cyan-bright);
  color: var(--uc-cyan-bright);
}

/* ============================================================ RESPONSIVIDADE — TABLET (≤1080) */
@media (max-width: 1080px) {
  .uc-hero--v2 .uc-hero__grid,
  .uc-omni__grid,
  .uc-crm__rule,
  .uc-auto__grid,
  .uc-ai__grid,
  .uc-campaigns__grid,
  .uc-team__grid {
    grid-template-columns: 1fr;
  }

  .uc-section-head--split {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .uc-section-lead--aside {
    padding-bottom: 0;
    max-width: 62ch;
  }

  .uc-section-lead {
    max-width: 62ch;
  }

  /* Ordem de leitura no empilhamento: copy primeiro, mídia depois — a mídia é prova, não abertura. */
  .uc-ai__visual {
    order: 2;
  }

  .uc-auto__visual img,
  .uc-ai__visual img {
    width: min(100%, 440px);
  }

  .uc-campaigns__visual {
    max-width: 640px;
    margin-inline: auto;
  }

  .uc-omni__diagram {
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
  }

  .uc-pain__grid,
  .uc-ai__benefits,
  .uc-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .uc-platform__grid,
  .uc-omni__channels,
  .uc-auto__cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .uc-flow__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: clamp(28px, 4vw, 40px);
  }

  .uc-flow__steps::before {
    display: none;
  }

  .uc-intel__journey {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: clamp(24px, 3vw, 32px);
  }

  .uc-intel__journey::before {
    display: none;
  }

  .uc-intel__points {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-inline: auto;
  }

  .uc-footer__grid--v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================ RESPONSIVIDADE — MOBILE (≤860) */
@media (max-width: 860px) {
  .uc-pain__grid,
  .uc-platform__grid,
  .uc-omni__channels,
  .uc-crm__examples,
  .uc-auto__cases,
  .uc-ai__benefits,
  .uc-stat-row {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }

  .uc-section-foot {
    justify-content: center;
    text-align: center;
  }

  .uc-section-foot .uc-btn {
    width: 100%;
  }

  /* Empilhados, os cards ficam horizontais (ícone à esquerda): metade da altura, mesma leitura. */
  .uc-platform__tile-link {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    padding: 18px;
  }

  .uc-platform__tile-link .uc-icon-badge {
    grid-row: 1 / span 3;
    width: 44px;
    height: 44px;
  }

  .uc-platform__tile-title {
    margin-top: 2px;
  }

  .uc-platform__tile-desc {
    margin-top: 4px;
  }

  .uc-platform__tile-more {
    margin-top: 10px;
  }

  .uc-ai__benefit,
  .uc-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    padding: 18px;
  }

  .uc-ai__benefit .uc-icon-badge,
  .uc-stat .uc-icon-badge {
    grid-row: 1 / span 2;
  }

  .uc-ai__benefit h3,
  .uc-stat strong {
    margin-top: 2px;
  }

  .uc-ai__benefit p,
  .uc-stat p {
    margin-top: 4px;
  }

  .uc-campaigns__usecases {
    grid-template-columns: 1fr;
  }

  .uc-campaigns__usecases li:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .uc-connector {
    align-items: flex-start;
  }

  /* Diagrama omnichannel vira coluna: fontes → caixa de entrada → destinos. */
  .uc-omni__diagram {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
  }

  .uc-omni__lines {
    display: none;
  }

  .uc-omni__sources,
  .uc-omni__targets {
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 8px;
  }

  .uc-omni__node {
    font-size: 0.8rem;
    padding: 8px 12px;
  }

  /* Stepper vira linha do tempo vertical. */
  .uc-flow__steps {
    grid-template-columns: 1fr;
    row-gap: 22px;
    padding-left: 8px;
  }

  .uc-flow__steps::before {
    display: block;
    left: 37px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, rgba(0, 168, 253, 0.6) 5%, rgba(0, 168, 253, 0.6) 95%, transparent);
  }

  .uc-flow__step {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    gap: 4px 16px;
  }

  .uc-flow__step-marker {
    flex: none;
  }

  .uc-flow__step strong {
    margin-top: 0;
    flex: 1;
    min-width: 0;
  }

  .uc-flow__step span:last-child {
    flex-basis: 100%;
    padding-left: 76px;
  }

  /* Jornada de campanha vira linha do tempo vertical, como o stepper. */
  .uc-intel__journey {
    grid-template-columns: 1fr;
    row-gap: 18px;
    padding-left: 6px;
  }

  .uc-intel__journey::before {
    display: block;
    left: 31px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, rgba(0, 168, 253, 0.55) 5%, rgba(0, 168, 253, 0.55) 70%, var(--uc-azure) 78%, var(--uc-azure) 95%, transparent);
  }

  .uc-intel__stage {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    gap: 2px 14px;
  }

  .uc-intel__stage-icon {
    flex: none;
  }

  .uc-intel__stage strong {
    margin-top: 0;
    flex: 1;
  }

  .uc-intel__stage span:last-child {
    flex-basis: 100%;
    padding-left: 66px;
  }

  .uc-footer__grid--v2 {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .uc-footer__brand-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .uc-footer__brand-col .uc-footer__tagline {
    text-align: center;
  }

  .uc-footer__col {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .uc-hero--v2 .uc-hero__actions .uc-btn {
    width: 100%;
  }

  /* Hero v3 no celular: o telefone domina (62%), badges e balões viram colunas estreitas. */
  .uc-hero__visual--v3 {
    grid-template-columns: minmax(0, 0.18fr) minmax(0, 0.62fr) minmax(0, 0.2fr);
    gap: 6px;
    max-width: none;
  }

  .uc-hero__visual--v3 .uc-hero__bubble--instagram,
  .uc-hero__visual--v3 .uc-hero__bubble--whatsapp {
    width: 78%;
    margin-right: 0;
  }

  /* Faixa de transição com texto em 4 linhas: reserva espaço para o botão-seta não cobrir a última. */
  .uc-strip {
    padding-bottom: 26px;
    padding-top: 12px;
  }

  .uc-hero--v2 .uc-hero__trust-item {
    font-size: 0.8rem;
    padding: 5px 10px 5px 8px;
  }

  .uc-omni__sources,
  .uc-omni__targets {
    grid-template-columns: 1fr;
  }

  .uc-compare-toggle {
    left: 12px;
    bottom: 12px;
    width: 32px;
    height: 32px;
  }
}