/* ============================================================
 * virtus-secoes.css — Escala, ritmo e continuidade
 * ------------------------------------------------------------
 * Não reescreve nenhuma seção. Corrige o que fazia a página
 * perder o nível depois do hero:
 *
 *   1. As seções alternavam --bg / --bg2 / --bg3 em cores chapadas.
 *      Cada troca desenhava uma linha horizontal e a página virava
 *      uma pilha de blocos. Agora existe UM fundo contínuo.
 *   2. Os títulos usavam Lora (serifada) a 40px fixos, enquanto o
 *      hero usa Manrope a 54px. Duas vozes tipográficas na mesma
 *      página. Unificado.
 *   3. O container tinha 1180px contra os 1340px do hero. Tudo
 *      abaixo parecia menor. Igualado.
 *   4. Cards com borda visível em cima de fundo chapado: caixa
 *      dentro de caixa. Trocado por elevação e luz.
 *
 * Carrega DEPOIS do CSS do documento, para vencer por ordem.
 * Não toca no hero: o seletor .hero-v2 está excluído de tudo.
 * ============================================================ */

:root{
  --sc-txt:   #f4f7ff;
  --sc-txt2:  #97a5c0;
  --sc-txt3:  #64748b;
  --sc-linha: rgba(148,163,184,.11);
  --sc-azul:  #3b82f6;
  --sc-ciano: #21d4fd;
  --sc-roxo:  #a855f7;
  --sc-viol:  #7c3aed;
  --sc-curva: cubic-bezier(.16, 1, .3, 1);
}

/* ═══════════ 1. Um fundo só para a página inteira ═══════════ */

/* O degradê vive no body e atravessa todas as seções. Sem trocas
   de cor, não há linha de emenda em lugar nenhum. */
/* Cor sólida no html: o shorthand com degradês zera a
   background-color, e onde o degradê não pinta sobra o branco do
   navegador. Aconteceu no teste — a página abria com faixa branca. */
html{ background-color: #050816; }

body.v2{
  background-color: #050816;
  background-image:
    radial-gradient(120% 40% at 78% 12%,  rgba(124,58,237,.10), transparent 60%),
    radial-gradient(100% 34% at 12% 42%,  rgba(37,99,235,.09),  transparent 62%),
    radial-gradient(110% 36% at 84% 74%,  rgba(168,85,247,.08), transparent 62%),
    linear-gradient(180deg, #050816 0%, #070f22 34%, #060c1e 66%, #050816 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Seções deixam de pintar o próprio fundo. */
body.v2 section:not(.hero-v2),
body.v2 .prof-section,
body.v2 .difs-section,
body.v2 .livros-section,
body.v2 .materiais-section,
body.v2 .mentoria-section,
body.v2 .historias-section,
body.v2 .depo-section,
body.v2 .garantia-section,
body.v2 .cta-final{
  background: transparent;
}

/* ═══════════ 2. Ritmo vertical ═══════════ */

/* Respiração generosa, mas medida. O valor acompanha a altura da
   janela: em notebook a seção não engole a tela, em monitor grande
   não vira uma tira apertada. */
body.v2 section:not(.hero-v2),
body.v2 .section{
  padding: clamp(88px, 9vh, 132px) 0;
}
body.v2 .cta-final{ padding: clamp(120px, 14vh, 190px) 0; }

/* Divisor entre seções: um fio de luz que morre nas pontas.
   Substitui a troca de cor de fundo — separa sem cortar. */
body.v2 section:not(.hero-v2)::before{
  content:'';
  position: absolute; top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sc-linha) 22%,
              rgba(124,58,237,.22) 50%, var(--sc-linha) 78%, transparent);
  pointer-events: none;
}
/* A primeira depois do hero não leva fio: o hero já é a separação. */
body.v2 .hero-v2 + *::before,
body.v2 .h5-faixa-wrap + section::before{ display: none; }

/* ═══════════ 3. Container na mesma largura do hero ═══════════ */

body.v2 .wrap{
  max-width: 1340px;
  padding: 0 32px;
}

/* ═══════════ 4. Tipografia ═══════════ */

/* Uma voz só na página: a mesma do hero. */
body.v2 .sec-title,
body.v2 section:not(.hero-v2) h2{
  font-family: 'Manrope', 'Sora', system-ui, sans-serif !important;
  font-size: clamp(34px, 3.4vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.032em;
  color: var(--sc-txt);
  text-wrap: balance;
  margin-bottom: 18px;
}

body.v2 .sec-sub,
body.v2 section:not(.hero-v2) .sec-sub{
  font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.65;
  color: var(--sc-txt2);
  max-width: 58ch;
  margin-bottom: clamp(40px, 5vh, 64px);
}

body.v2 section:not(.hero-v2) h3{
  font-family: 'Manrope', 'Sora', sans-serif;
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.28;
}

/* Rótulo de seção: pequeno, discreto, sempre igual. */
body.v2 .sec-eyebrow{
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--sc-roxo);
  margin-bottom: 16px;
}
body.v2 .sec-eyebrow::before{
  content:''; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sc-roxo));
}

/* ═══════════ 5. Cards: elevação em vez de caixa ═══════════ */

/* Borda dura sobre fundo chapado é caixa dentro de caixa. Uma
   superfície levemente mais clara com luz na aresta superior faz
   o mesmo trabalho e some quando não é olhada. */
body.v2 section:not(.hero-v2) [class*="card"],
body.v2 section:not(.hero-v2) [class*="-box"],
body.v2 section:not(.hero-v2) [class*="item"]{
  border-radius: 20px;
}

body.v2 .vsurf{
  position: relative;
  border: 1px solid rgba(148,163,184,.09);
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow: 0 26px 60px -34px rgba(0,0,0,.95);
  transition: transform 420ms var(--sc-curva),
              border-color 320ms ease, box-shadow 420ms ease;
}
body.v2 .vsurf::after{
  content:''; position:absolute; top:0; left:16%; right:16%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,.5), transparent);
  opacity: 0; transition: opacity 380ms ease;
}
body.v2 .vsurf:hover{
  transform: translateY(-5px);
  border-color: rgba(148,163,184,.2);
  box-shadow: 0 40px 80px -38px rgba(0,0,0,1);
}
body.v2 .vsurf:hover::after{ opacity: 1; }

/* ═══════════ 6. Prova social ═══════════ */

.vnum{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
  padding: clamp(30px, 4vh, 52px) 0;
  position: relative;
}
/* Fio horizontal de luz atrás dos números */
.vnum::before{
  content:''; position:absolute; left:0; right:0; top:50%;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,.28) 30%,
              rgba(33,212,253,.22) 62%, transparent);
  filter: blur(.4px);
}
.vnum > div{ position: relative; }

.vnum b{
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(42px, 5.4vw, 78px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.045em;
  background: linear-gradient(160deg, #ffffff 30%, #9db4dd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* O "+" vive DENTRO do número. Sem esta regra ele herda o
   display:block do rótulo e cai para a linha de baixo. */
.vnum b span{
  display: inline;
  font-size: .48em;
  vertical-align: .34em;
  margin-left: 2px;
  letter-spacing: 0;
  color: inherit; text-transform: none;
}

.vnum > div > span{
  display: block;
  margin-top: 12px;
  font-size: 13px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--sc-txt3);
}

.vconfianca{
  text-align: center;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--sc-txt3);
  margin-bottom: clamp(28px, 4vh, 48px);
}

/* ═══════════ 7. Entrada das seções ═══════════ */

/* A revelação vive inteira no virtus-motion.css. Três camadas
   mexendo no mesmo [data-aos] — a original da página, esta e a de
   motion — geravam conflito de especificidade e elementos ficavam
   presos em opacity 0. Uma dona só. */

/* ═══════════ 8. Telas menores ═══════════ */

@media (max-width: 900px){
  body.v2 section:not(.hero-v2),
  body.v2 .section{ padding: clamp(62px, 8vh, 90px) 0; }
  body.v2 .wrap{ padding: 0 20px; }
  .vnum{ grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .vnum::before{ display: none; }
  body.v2 section:not(.hero-v2)::before{ left: 6%; right: 6%; }
}

@media (prefers-reduced-motion: reduce){
  body.v2 [data-aos]{ opacity: 1; transform: none; transition: none; }
  body.v2 .vsurf{ transition: none; }
}