/* ============================================================
   styles-v2.css
   Overrides aplicados SOMENTE na index-v2.html (body.v2).
   Carregado por ultimo -> vence o styles-matricula.css.
   ============================================================ */

/* ---- Secao "Para quem e?" ---- */

/* Mais respiro entre o titulo e os cards */
.v2 .audience-title {
  margin-bottom: clamp(52px, 6vw, 92px);
}

.v2 .audience-grid {
  gap: 28px;
}

/* Cards mais bonitos: vidro com gradiente, cantos arredondados e borda refinada */
.v2 .audience-card {
  padding: 32px 26px 30px;
  border-radius: 22px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 22px 48px rgba(0, 0, 0, 0.45);
}

.v2 .audience-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 238, 162, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 28px 56px rgba(124, 32, 255, 0.28);
}

/* Icone flutuante vira um badge circular com gradiente da marca */
.v2 .audience-card__icon {
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(0, 238, 162, 0.22), transparent 60%),
    linear-gradient(160deg, rgba(124, 45, 203, 0.45), rgba(20, 5, 32, 0.65));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 14px 30px rgba(0, 0, 0, 0.4);
}

/* Rotulo em destaque (escaneavel) no topo de cada card */
.v2 .audience-card__lead {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-primary);
  font-weight: 800;
  font-size: 1.18rem;
  line-height: 1.3;
}

/* Texto um pouco maior e mais legivel */
.v2 .audience-card p {
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--text-primary);
}

@media (max-width: 639px) {
  .v2 .audience-card p {
    font-size: 1.12rem;
  }
}

/* ---- Mobile: remove quebras forcadas (<br>) que estouram em telas estreitas ---- */
@media (max-width: 639px) {
  .v2 .section-subtitle br,
  .v2 .section h2 br {
    display: none;
  }
  /* Sticky CTA removido: footer volta ao padding normal (era 80px pro botao fixo) */
  .v2 .footer {
    padding-bottom: var(--space-xl);
  }

  /* Hero mais compacto no mobile: puxa os botoes pra cima (mais na 1a dobra) */
  .v2 .hero {
    padding-top: var(--space-md);
  }
  /* gap entre os itens do hero (vem do container por causa do display:contents) */
  .v2 .hero .container {
    gap: var(--space-sm);
  }
  .v2 .hero .container > .hero__subheadline {
    margin-bottom: var(--space-sm);
  }
  .v2 .hero__badge {
    margin-bottom: 10px;
  }
  .v2 .hero__headline {
    font-size: 1.4rem;
    line-height: 1.18;
  }
  .v2 .hero__subheadline {
    font-size: 0.95rem;
    line-height: 1.45;
    margin-top: 10px;
  }
  .v2 .hero__cta-wrapper {
    margin-top: 12px;
    margin-bottom: var(--space-md);
  }
}

/* ---- Hero mobile: botoes na primeira dobra (antes do video) ---- */
@media (max-width: 1200px) {
  .v2 .hero__cta-wrapper {
    order: 2;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-lg);
  }
  .v2 .hero__mockup {
    order: 3;
  }
}

/* ---- Hero: pilula amarela "Promocao de aniversario" ---- */
.v2 .hero__badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  border-radius: 999px;
  background: #f5c518;
  color: #181818;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 5px 14px rgba(245, 197, 24, 0.25);
}

/* ---- Secao "Por que e diferente" ---- */
/* Titulo alinhado a esquerda */
.v2 .difference-copy h2 {
  text-align: left;
}

/* ---- Secao de investimento (oferta) ---- */
/* Cabecalho no padrao das outras secoes (titulo + subtitulo) */
.v2 .offer-intro {
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.v2 .offer-title {
  margin: 0;
  text-align: center;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
}

/* Nota com destaque (callout) */
.v2 .offer-note--highlight {
  border-color: rgba(0, 238, 162, 0.4);
  background:
    linear-gradient(160deg, rgba(0, 238, 162, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(8, 12, 18, 0.92);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38);
  font-size: 1.06rem;
  line-height: 1.6;
}
.v2 .offer-note--highlight strong {
  color: var(--accent-primary);
}

/* ---- Secao Scudo: fundo mais rico (mesma paleta do resto) ---- */
.v2 .scudo-section {
  background:
    radial-gradient(50% 45% at 8% -5%, rgba(124, 45, 203, 0.42), transparent 60%),
    radial-gradient(46% 42% at 94% 4%, rgba(0, 238, 162, 0.18), transparent 62%),
    radial-gradient(75% 65% at 50% 116%, rgba(106, 44, 255, 0.26), transparent 72%),
    linear-gradient(180deg, #0c0a14 0%, #08070d 100%);
}

/* ---- Carrosseis no mobile: comecam no 1o item + indicativo de "tem mais" ---- */
@media (max-width: 639px) {
  /* Comeca no 1o card: justify-content center jogava o inicio pra fora da tela */
  /* Peek: o proximo card fica "espiando" -> sinaliza que ha mais conteudo */
  .v2 .carousel-track {
    grid-auto-columns: 80%;
    justify-content: start;
  }
  .v2 .carousel-card {
    scroll-snap-align: start;
  }
  .v2 .projects-section .carousel-shell {
    padding: 0;
  }
  .v2 .projects-section .carousel-track {
    grid-auto-columns: 82%;
    justify-content: start;
    scroll-snap-type: x mandatory;
  }
  .v2 .projects-section .carousel-card {
    scroll-snap-align: start;
  }
  /* Fade na borda direita reforca o indicativo de rolagem */
  .v2 .carousel-shell::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(90deg, transparent, rgba(8, 8, 15, 0.55));
    pointer-events: none;
    z-index: 2;
  }
}