/* UNICHAT-LANDING-01 — landing comercial estática do UniChat.

   Proporções: os tamanhos-chave (logo, faixa, botões, ícones, preços) NÃO são estimados a olho.
   Foram medidos na referência aprovada, que tem 724px de largura, e convertidos para % da
   largura da página — por isso muitos valores usam `vw` dentro de um clamp(). Onde aparece um
   comentário "ref: N", N é a medida original em px na referência.
   Ver docs/implementation/unichat/UNICHAT_LANDING_01.md, seção "Fidelidade visual". */

/* ============================================================ RESET / BASE */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--uc-bg);
  color: var(--uc-text-primary);
  font-family: var(--uc-font-body);
  font-size: var(--uc-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--uc-cyan-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

.uc-container {
  width: 100%;
  max-width: var(--uc-container);
  margin-inline: auto;
  padding-inline: var(--uc-gutter);
}

.uc-skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--uc-azure);
  color: var(--uc-ink);
  font-weight: 700;
  padding: 10px 16px;
  border-radius: var(--uc-radius-sm);
  transition: top 0.2s var(--uc-ease);
}

.uc-skip-link:focus {
  top: 12px;
}

/* ============================================================ FUNDO GLOBAL */
.uc-page {
  position: relative;
  background:
    radial-gradient(58% 42% at 22% 2%, rgba(0, 132, 214, 0.2), transparent 62%),
    radial-gradient(46% 36% at 88% 6%, rgba(4, 193, 231, 0.14), transparent 66%),
    radial-gradient(60% 40% at 78% 82%, rgba(0, 132, 214, 0.16), transparent 64%),
    var(--uc-bg);
}

.uc-page > * {
  position: relative;
  z-index: 1;
}

/* ============================================================ FIO DE LUZ DO TOPO
   Trilho de 5px com um facho que cruza a tela em ~1,2s e descansa 2s antes de repetir —
   por isso o ciclo de 3,2s e os keyframes concentrados nos primeiros 37,5%. */
.uc-topbeam {
  position: relative;
  height: 5px;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg,
    rgba(0, 168, 253, 0.06),
    rgba(0, 168, 253, 0.16) 50%,
    rgba(0, 168, 253, 0.06));
  z-index: 2;
}

.uc-topbeam__light {
  position: absolute;
  inset-block: 0;
  left: 0;
  /* O percurso depende desta largura: translateX em % é relativo ao PRÓPRIO elemento, não ao
     trilho. Para atravessar, o facho precisa ir de -100% (encostado fora à esquerda) até
     100/22 ≈ 455% (encostado fora à direita). Mudar a largura exige recalcular os 455%. */
  width: 22%;
  background: linear-gradient(90deg,
    transparent,
    rgba(8, 124, 255, 0.35) 38%,
    rgba(0, 217, 255, 0.9) 49%,
    #d8f7ff 50%,
    rgba(0, 217, 255, 0.9) 51%,
    rgba(0, 168, 255, 0.35) 62%,
    transparent);
  filter: drop-shadow(0 0 5px rgba(0, 217, 255, 0.9)) drop-shadow(0 0 14px rgba(8, 124, 255, 0.5));
  transform: translateX(-100%);
  /* Ciclo de 3,2s = 1,2s de travessia (37,5%) + 2s de pausa. */
  animation: uc-topbeam-sweep 3.2s linear infinite;
}

@keyframes uc-topbeam-sweep {
  0% { transform: translateX(-100%); opacity: 0; }
  4% { opacity: 1; }
  31% { opacity: 1; }
  37.5% { transform: translateX(455%); opacity: 0; }
  100% { transform: translateX(455%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .uc-topbeam__light {
    animation: none;
    opacity: 0;
  }
}

/* ---- textura de pontos nas bordas laterais ----
   Na referência há um campo de pontos azuis nas laterais (direita na seção "ideal para",
   esquerda na dos pilares), com fade em direção ao centro. A máscara radial ancorada na borda
   produz o fade horizontal e vertical de uma vez. */
.uc-dots-right,
.uc-dots-left {
  position: relative;
}

.uc-dots-right::after,
.uc-dots-left::before {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  width: clamp(80px, 11vw, 150px);
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(0, 168, 253, 0.75) 1.1px, transparent 1.6px);
  background-size: 11px 11px;
}

.uc-dots-right::after {
  right: 0;
  -webkit-mask-image: radial-gradient(70% 55% at 100% 50%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 55% at 100% 50%, #000 0%, transparent 78%);
}

.uc-dots-left::before {
  left: 0;
  -webkit-mask-image: radial-gradient(70% 55% at 0% 50%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 55% at 0% 50%, #000 0%, transparent 78%);
}

/* ============================================================ REVEAL
   UNICHAT-CUT-5K — uma única linguagem de movimento para a página inteira:
   fade + deslocamento curto (14px), 560ms, mesma curva; escalonamento de 70ms por
   --uc-reveal-delay para grupos de cards. Variantes por atributo:
     data-reveal          → de baixo para cima (padrão: títulos, texto, cards)
     data-reveal="left"   → da esquerda (coluna de texto em composição de 2 colunas)
     data-reveal="right"  → da direita (coluna oposta)
     data-reveal="media"  → mídia/diagrama: fade + leve escala (0.97 → 1), sem deslocamento
   Só opacity/transform (compositor), nada de layout; reduced-motion desliga tudo. */
[data-reveal] {
  --uc-reveal-x: 0;
  --uc-reveal-y: 14px;
  --uc-reveal-scale: 1;
  opacity: 0;
  transform: translate3d(var(--uc-reveal-x), var(--uc-reveal-y), 0) scale(var(--uc-reveal-scale));
  transition: opacity 0.56s var(--uc-ease), transform 0.56s var(--uc-ease);
  transition-delay: calc(var(--uc-reveal-delay, 0) * 70ms);
  will-change: opacity, transform;
}

[data-reveal="left"] {
  --uc-reveal-x: -18px;
  --uc-reveal-y: 0;
}

[data-reveal="right"] {
  --uc-reveal-x: 18px;
  --uc-reveal-y: 0;
}

[data-reveal="media"] {
  --uc-reveal-y: 8px;
  --uc-reveal-scale: 0.97;
  transition-duration: 0.7s;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ============================================================ TIPOGRAFIA COMPARTILHADA */
.uc-title {
  font-family: var(--uc-font-display);
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: -0.015em;
  font-size: var(--uc-fs-h2);
}

.uc-title__line {
  display: block;
}

.uc-title__accent {
  color: var(--uc-cyan);
}

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

.uc-eyebrow {
  display: block;
  font-family: var(--uc-font-display);
  font-size: clamp(0.75rem, 1.1vw, 1rem); /* ref: ~8,3 → 16px @1440 */
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--uc-cyan);
}

/* No hero a eyebrow é branca na referência; só a da seção final é ciano. */
.uc-eyebrow--plain {
  color: var(--uc-text-primary);
}

/* ============================================================ MARCA
   O lockup mantém a proporção símbolo↔wordmark travada: a largura do wordmark é sempre
   derivada da do símbolo, então mudar `--uc-brand-size` escala o conjunto sem deformar. */
.uc-brand {
  --uc-brand-size: 48px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--uc-brand-size) * 0.17);
}

.uc-brand__mark {
  width: var(--uc-brand-size);
  height: auto;
  filter: drop-shadow(0 0 calc(var(--uc-brand-size) * 0.28) rgba(0, 168, 253, 0.45));
}

.uc-brand__wordmark {
  width: calc(var(--uc-brand-size) * 3.13);
  height: auto;
}

/* ============================================================ BOTÕES */
.uc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1.6px solid transparent;
  border-radius: var(--uc-radius-sm);
  padding: 14px 26px;
  font-family: var(--uc-font-display);
  font-size: var(--uc-fs-body);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: transform 0.25s var(--uc-ease), box-shadow 0.25s var(--uc-ease),
              background 0.25s var(--uc-ease), border-color 0.25s var(--uc-ease),
              color 0.25s var(--uc-ease);
}

.uc-btn:hover {
  transform: translateY(-2px);
}

/* Azul-elétrico com texto PRETO — é assim na referência, não azul royal com texto branco. */
.uc-btn--primary {
  background: var(--uc-azure);
  color: var(--uc-ink);
  box-shadow: 0 18px 44px rgba(0, 168, 253, 0.36);
}

.uc-btn--primary:hover {
  background: var(--uc-cyan-bright);
  box-shadow: 0 22px 56px rgba(0, 168, 253, 0.5);
}

.uc-btn--outline {
  background: transparent;
  border-color: var(--uc-azure);
  color: var(--uc-azure);
}

.uc-btn--outline:hover {
  background: rgba(0, 168, 253, 0.1);
  border-color: var(--uc-cyan-bright);
  color: var(--uc-cyan-bright);
}

.uc-btn--xl {
  min-width: clamp(240px, 27vw, 392px);  /* ref: 196 → 390px @1440 */
  min-height: clamp(56px, 5.8vw, 84px);  /* ref: 43 → 86px @1440 */
  font-size: clamp(1rem, 1.32vw, 1.2rem);
  padding-inline: 34px;
}

.uc-btn--lg {
  min-width: clamp(220px, 22vw, 320px);
  min-height: clamp(52px, 4.6vw, 66px);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  padding-inline: 30px;
}

.uc-btn--block {
  width: 100%;
  min-height: 58px;
}

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

.uc-btn:hover .uc-btn__icon {
  transform: translateX(4px);
}

/* ============================================================ HERO */
.uc-hero {
  position: relative;
  padding-top: clamp(28px, 4vw, 58px);
  padding-bottom: clamp(44px, 6vw, 84px);
}

/* ---- camada decorativa de luz do hero (ver Sections/_HeroEffects.cshtml) ---- */
.uc-hero__effects {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* O conteúdo fica sempre acima da camada de luz. */
.uc-hero > .uc-container {
  position: relative;
  z-index: 1;
}

/* Asset único com toda a iluminação decorativa (1672×941, ~16:9, alfa real).
   `cover` mantém a composição preenchendo a seção em qualquer proporção; o ponto de ancoragem
   fica à direita porque é onde vive a luz do asset — e é onde estão o celular e o painel.
   Não recriar estes efeitos proceduralmente: ver Sections/_HeroEffects.cshtml. */
.uc-hero__light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 78% 50%;
  /* Calibrado para ler como iluminação de fundo: no valor cheio o overlay disputava atenção
     com o headline e com o celular. */
  opacity: 0.66;
  filter: saturate(0.78) brightness(0.86);
  /* A máscara preserva a luz na metade direita (celular e painel) e limpa a coluna de texto —
     é o que permite manter a atmosfera sem perder contraste no headline e nos selos. */
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, 0.22) 26%, rgba(0, 0, 0, 0.62) 44%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, 0.22) 26%, rgba(0, 0, 0, 0.62) 44%, #000 62%);
}

.uc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}

.uc-hero__brand {
  margin-bottom: clamp(24px, 3.6vw, 46px);
}

/* ref: logo do hero = 29% da largura da página → ~390px @1440 */
.uc-hero__brand .uc-brand {
  --uc-brand-size: clamp(58px, 6.7vw, 97px);
}

.uc-hero__eyebrow {
  margin-bottom: clamp(14px, 1.6vw, 22px);
}

.uc-hero__title {
  font-size: var(--uc-fs-h1); /* ref: 24 → ~48px @1440 */
  line-height: 1.24;
}

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

.uc-hero__lead {
  margin-top: clamp(18px, 2vw, 26px);
  max-width: 44ch;
  font-size: var(--uc-fs-lead);
  line-height: 1.75;
  color: var(--uc-text-muted);
}

.uc-hero__actions {
  margin-top: clamp(24px, 3vw, 40px);
}

.uc-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: clamp(20px, 2.4vw, 32px);
}

.uc-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(0.8rem, 1.02vw, 0.95rem);
  color: var(--uc-text-muted);
  white-space: nowrap;
}

.uc-hero__trust-item svg {
  flex: none;
  color: var(--uc-azure);
}

.uc-hero__trust-sep {
  margin-left: 7px;
  color: var(--uc-text-faint);
}

/* ---- composição do hero: badges | celular | card de analytics + bolhas ---- */
.uc-hero__visual {
  display: grid;
  grid-template-columns: minmax(0, 0.17fr) minmax(0, 0.83fr);
  align-items: center;
  gap: clamp(4px, 0.8vw, 14px);
}

.uc-hero__badge img {
  width: 100%;
  animation: uc-float 7s var(--uc-ease) infinite;
}

/* Os PNGs dos badges têm margem transparente embutida (~15% acima, ~18% abaixo); a sobreposição
   negativa recupera o espaçamento apertado da referência sem cortar o glow. */
.uc-hero__badge + .uc-hero__badge {
  margin-top: -28%;
}

.uc-hero__badge:nth-child(2) img { animation-delay: 0.5s; }
.uc-hero__badge:nth-child(3) img { animation-delay: 1s; }
.uc-hero__badge:nth-child(4) img { animation-delay: 1.5s; }

.uc-hero__stage {
  position: relative;
}

.uc-hero__phone {
  width: 68%;
  margin-left: 3%;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
}

/* Ao separar o card das bolhas o leve giro 3D do PNG original se perdeu; estas transformações
   devolvem essa profundidade. `translate` (e não `transform`) é o que a animação de flutuação
   usa, para as duas coisas coexistirem sem uma sobrescrever a outra. */
.uc-hero__analytics {
  position: absolute;
  right: -1%;
  top: 14%;
  width: 40%;
  transform: perspective(1200px) rotateY(-13deg) rotateZ(1.2deg);
  animation: uc-float 8s var(--uc-ease) infinite;
  animation-delay: 0.3s;
}

.uc-hero__bubble {
  position: absolute;
  animation: uc-float 7.5s var(--uc-ease) infinite;
}

.uc-hero__bubble--dash {
  top: -6%;
  right: 0;
  width: 21%;
  transform: perspective(900px) rotateY(-14deg) rotateZ(-2deg);
  animation-delay: 0.9s;
}

.uc-hero__bubble--dots {
  bottom: -8%;
  right: 12%;
  width: 25%;
  transform: perspective(900px) rotateY(-10deg) rotateZ(2deg);
  animation-delay: 1.4s;
}

@keyframes uc-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -11px; }
}

@media (prefers-reduced-motion: reduce) {
  .uc-hero__badge img,
  .uc-hero__analytics,
  .uc-hero__bubble {
    animation: none;
  }
}

/* ============================================================ FAIXA DE TRANSIÇÃO */
.uc-strip {
  position: relative;
  background: var(--uc-azure-strip); /* chapado, não gradiente */
  min-height: clamp(62px, 6.2vw, 90px); /* ref: 45 → 90px @1440 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sem padding vertical: a altura é governada só pelo min-height, senão soma e a faixa fica alta. */
  padding: 0 var(--uc-gutter);
}

.uc-strip__text {
  font-family: var(--uc-font-display);
  font-size: clamp(0.95rem, 1.66vw, 1.5rem); /* ref: ~12 → 24px @1440 */
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  color: #00131f; /* texto preto sobre o azul, como na referência */
}

/* Círculo montado sobre a aresta inferior — ~1/4 dentro da faixa, 3/4 fora. */
.uc-strip__knob {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 62%);
  width: clamp(36px, 3.35vw, 48px); /* ref: 24 → 48px @1440 */
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--uc-bg);
  border: 2px solid var(--uc-azure);
  color: var(--uc-azure);
  box-shadow: 0 0 24px rgba(0, 168, 253, 0.45);
}

/* ============================================================ PARA QUEM É */
.uc-audience {
  padding-block: var(--uc-space-section);
}

.uc-audience__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4.5vw, 60px);
  align-items: center;
}

.uc-audience__lead {
  margin-top: clamp(16px, 1.8vw, 24px);
  max-width: 38ch;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.75;
  color: var(--uc-text-muted);
}

.uc-audience__list {
  position: relative;
  display: grid;
  gap: clamp(18px, 2.4vw, 34px);
  padding-left: clamp(22px, 3.4vw, 46px);
}

/* Divisor vertical com brilho no meio, como na referência. */
.uc-audience__list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(0, 168, 253, 0.65) 25%, rgba(0, 168, 253, 0.65) 75%, transparent);
}

.uc-audience__item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(1rem, 1.32vw, 1.25rem);
  color: var(--uc-text-primary);
}

.uc-check {
  flex: none;
  display: inline-flex;
  color: var(--uc-azure);
}

/* ============================================================ 3 PILARES */
.uc-pillars {
  padding-block: var(--uc-space-section);
}

.uc-pillars__grid {
  margin-top: clamp(30px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.uc-card {
  background: var(--uc-surface);
  border: 1px solid var(--uc-surface-border);
  border-radius: var(--uc-radius-lg);
  box-shadow: var(--uc-shadow-card);
  transition: transform 0.3s var(--uc-ease), border-color 0.3s var(--uc-ease),
              box-shadow 0.3s var(--uc-ease);
}

.uc-card:hover {
  transform: translateY(-6px);
  border-color: var(--uc-surface-border-strong);
  box-shadow: var(--uc-glow-cyan), var(--uc-shadow-card);
}

/* Cards dos pilares são CENTRALIZADOS na referência. */
.uc-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(28px, 3.2vw, 44px) clamp(20px, 2.4vw, 32px) clamp(30px, 3.4vw, 46px);
}

/* ref: ícone = ~35% da largura do card */
.uc-pillar__icon {
  width: clamp(88px, 10vw, 144px);
  height: auto;
  margin-bottom: clamp(18px, 2.2vw, 30px);
}

.uc-pillar__title {
  font-family: var(--uc-font-display);
  font-size: var(--uc-fs-h3);
  font-weight: 700;
}

.uc-pillar__desc {
  margin-top: 12px;
  color: var(--uc-text-muted);
  font-size: clamp(0.95rem, 1.15vw, 1.06rem);
  line-height: 1.72;
}

.uc-pillar__highlight {
  display: block;
  margin-top: clamp(16px, 1.8vw, 24px);
  font-family: var(--uc-font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.15vw, 1.06rem);
  line-height: 1.5;
  color: var(--uc-azure);
}

.uc-pillars__cta {
  margin-top: clamp(30px, 3.6vw, 48px);
  text-align: center;
}

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

.uc-pricing__subtitle {
  margin: clamp(12px, 1.4vw, 18px) auto 0;
  max-width: 56ch;
  text-align: center;
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  color: var(--uc-text-muted);
}

.uc-pricing__grid {
  margin-top: clamp(32px, 4vw, 54px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}

.uc-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.2vw, 30px) clamp(28px, 3vw, 38px);
}

.uc-plan--highlighted {
  border-color: var(--uc-azure);
  box-shadow: var(--uc-glow-azure), var(--uc-shadow-card);
}

.uc-plan--highlighted:hover {
  transform: translateY(-6px) scale(1.012);
}

.uc-plan__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--uc-azure);
  color: var(--uc-ink);
  font-family: var(--uc-font-display);
  font-size: clamp(0.66rem, 0.82vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 7px 18px;
  border-radius: var(--uc-radius-pill);
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0, 168, 253, 0.55);
}

/* Nome e preço centralizados; features à esquerda — como na referência. */
.uc-plan__name {
  display: block;
  text-align: center;
  font-family: var(--uc-font-display);
  font-size: clamp(1.15rem, 2.05vw, 1.85rem); /* ref: 15 → 30px @1440 */
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--uc-azure);
}

.uc-plan__price {
  margin-top: clamp(8px, 1vw, 14px);
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--uc-font-display);
  font-weight: 800;
  line-height: 1.1;
}

.uc-plan__price-currency {
  font-size: clamp(1.3rem, 2.75vw, 2.5rem); /* ref: 21 → 42px @1440 */
}

.uc-plan__price-value {
  font-size: clamp(1.9rem, 4vw, 3.6rem); /* ref: 30 → 58px @1440 */
  letter-spacing: -0.02em;
}

.uc-plan__price-period {
  font-size: clamp(0.95rem, 1.5vw, 1.35rem);
  font-weight: 600;
  color: var(--uc-text-muted);
}

.uc-plan__features {
  margin-top: clamp(20px, 2.4vw, 32px);
  display: grid;
  gap: clamp(12px, 1.35vw, 19px);
  flex: 1;
  align-content: start;
}

.uc-plan__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(0.9rem, 1.1vw, 1.04rem);
  color: var(--uc-text-primary);
}

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

.uc-plan__cta {
  margin-top: clamp(22px, 2.6vw, 34px);
}

/* ---- selos de condição comercial (renderizados só quando confirmados) ---- */
.uc-assurances {
  margin-top: clamp(26px, 3vw, 40px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
}

.uc-assurances__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(0.85rem, 1.05vw, 0.98rem);
  color: var(--uc-text-muted);
}

.uc-assurances__icon {
  display: inline-flex;
  color: var(--uc-azure);
}

.uc-assurances__sep {
  margin-left: 9px;
  color: var(--uc-text-faint);
}

/* ============================================================ SEÇÃO FINAL */
.uc-final {
  padding-block: var(--uc-space-section);
  overflow: hidden; /* o dashboard sangra à direita de propósito */
}

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

.uc-final__title {
  margin-top: clamp(12px, 1.4vw, 18px);
  /* Um pouco menor que os títulos centralizados para "para transformar conversas" caber em
     uma linha, como na referência. */
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
}

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

.uc-final__paragraph {
  margin-top: clamp(16px, 1.8vw, 24px);
  max-width: 46ch;
  font-size: clamp(0.98rem, 1.2vw, 1.14rem);
  line-height: 1.75;
  color: var(--uc-text-muted);
}

.uc-final__cta {
  margin-top: clamp(24px, 2.8vw, 38px);
}

.uc-final__visual {
  position: relative;
}

/* ref: logo da seção final = 40% da largura da página → ~575px @1440 */
.uc-final__brand {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(14px, 1.8vw, 26px);
}

.uc-final__brand .uc-brand {
  --uc-brand-size: clamp(70px, 9.9vw, 143px);
}

.uc-final__dashboard {
  width: 116%;
  max-width: none;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.6)) drop-shadow(var(--uc-glow-azure));
}

/* ============================================================ RODAPÉ */
.uc-footer {
  border-top: 1px solid rgba(0, 168, 253, 0.14);
  padding-block: clamp(28px, 3.4vw, 46px);
}

.uc-footer__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
}

.uc-footer__brand .uc-brand {
  --uc-brand-size: clamp(38px, 4vw, 58px);
}

.uc-footer__copyright {
  text-align: center;
  color: var(--uc-text-muted);
  font-size: var(--uc-fs-sm);
}

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

.uc-footer__legal {
  margin-top: clamp(18px, 2vw, 26px);
  padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid rgba(0, 168, 253, 0.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
}

.uc-footer__legal a {
  color: var(--uc-text-faint);
  font-size: var(--uc-fs-sm);
  transition: color 0.2s var(--uc-ease);
}

.uc-footer__legal a:hover {
  color: var(--uc-azure);
}

/* ============================================================ RESPONSIVIDADE */
@media (max-width: 1080px) {
  .uc-hero__grid,
  .uc-final__grid,
  .uc-audience__grid {
    grid-template-columns: 1fr;
  }

  .uc-hero__lead,
  .uc-audience__lead,
  .uc-final__paragraph {
    max-width: none;
  }

  .uc-final__visual {
    order: -1;
  }

  .uc-final__dashboard {
    width: 100%;
  }

  .uc-audience__list {
    padding-left: 0;
    padding-top: clamp(20px, 3vw, 30px);
  }

  .uc-audience__list::before {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 168, 253, 0.55) 20%, rgba(0, 168, 253, 0.55) 80%, transparent);
  }

  .uc-hero__visual {
    max-width: 620px;
    margin-inline: auto;
  }
}

@media (max-width: 860px) {
  .uc-pillars__grid,
  .uc-pricing__grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }

  .uc-plan--highlighted {
    order: -1;
  }

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

  .uc-footer__copyright,
  .uc-footer__tagline {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .uc-hero__grid {
    gap: clamp(20px, 5vw, 34px);
  }

  .uc-btn--xl,
  .uc-btn--lg {
    min-width: 100%;
  }

  .uc-hero__trust {
    gap: 8px 12px;
  }

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

  .uc-dots-right::after,
  .uc-dots-left::before {
    width: 60px;
    opacity: 0.6;
  }

  /* No mobile o hero é estreito e alto: com `cover` o asset é escalado pela altura e sobra só
     uma fatia vertical — que cai justamente o clarão central atrás do headline, derrubando o
     contraste do texto. `contain` coloca a composição inteira como uma faixa, ancorada embaixo,
     onde ficam o celular e os badges depois que o layout empilha. */
  .uc-hero__light {
    object-fit: contain;
    object-position: 50% 78%;
    opacity: 0.5;
  }
}