/* ===========================================================
   GeraçãoSioz — Landing Page
   Sistema: cada seção é um "stage" de proporção fixa (16:9 no
   desktop). Todas as medidas internas usam cqw/cqh (% do stage),
   então o layout escala junto com a tela sem quebrar.
   =========================================================== */

:root {
  --azul-escuro:  #00102f;
  --azul-medio:   #1657ae;
  --azul-claro:   #4c9dfb;
  --azul-nav:     #8fb9e8;

  /* Gradiente dos botoes-etiqueta, amostrado na arte. Os dois usam o mesmo. */
  --grad-botao: linear-gradient(90deg,
    #00184b  0%, #00235a 17%, #002d6a 25%, #00387a 33%, #00458b 41%,
    #00529f 48%, #005cab 56%, #005eae 64%, #005eae 100%);
  --borda-botao: #0063aa;
  --azul-suave:   #9cc0e6;
  --branco:       #ffffff;
  --texto-claro:  #f2f7fd;

  /* Placeholder até as fontes do Gui entrarem em /fontes.
     Troque só estas duas linhas depois. */
  --fonte-titulo: "Poppins", system-ui, sans-serif;
  /* Titulos da secao 2: grotesca condensada. Ver nota em fontes.css. */
  --fonte-display: "Encode Sans Semi Condensed", "Poppins", system-ui, sans-serif;
  --fonte-corpo:  "Poppins", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Edge antigo */
}
html::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

body {
  margin: 0;
  background: var(--azul-escuro);
  font-family: var(--fonte-corpo);
  color: var(--branco);
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Stage: base de posicionamento de cada seção ----------
   width:100% sempre, sem exceção — full-bleed, sem margem lateral
   em hipótese nenhuma. Já tentei duas vezes encolher a seção quando
   a altura da tela é curta (pra nunca precisar rolar dentro de uma
   seção), mas as duas versões acabavam criando margem/faixa lateral
   em notebook de 14"/15" de verdade (a altura útil do navegador,
   descontando abas e barra de endereço, é menor do que o esperado
   nos meus testes). Prioridade confirmada: nunca ter margem lateral,
   mesmo que isso signifique rolar um pouco dentro de uma seção em
   janelas bem curtas — incomoda muito menos. */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  container-type: size;
}

.stage__fundo,
.stage__foto {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.stage__fundo {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Grid técnico e círculos concêntricos: em CSS para ficarem
   nítidos em qualquer resolução, inclusive 4K. */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right,  rgba(150, 200, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 200, 255, 0.055) 1px, transparent 1px);
  background-size: 3.33% 5.92%;
}

.hero__anel {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  aspect-ratio: 1;
  border: 1px solid rgba(190, 225, 255, 0.09);
}
.hero__anel--1 { left: 16.5%; top:  2%; width: 50%; }
.hero__anel--2 { left: 11%;   top: -6%; width: 63%; border-color: rgba(190, 225, 255, 0.06); }

/* Sombra na esquerda para o texto branco descolar do fundo */
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(0, 10, 30, 0.55) 0%,
    rgba(0, 10, 30, 0.15) 28%,
    rgba(0, 10, 30, 0)    45%);
}

.stage__foto {
  left: 25.729%;
  top: 12.593%;
  width: 48.75%;
  z-index: 2;
}

/* ---------- Navegação ---------- */
.nav {
  position: absolute;
  left: 9.6%;
  top: 2.6%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 3.35cqw;
  font-size: 1.3cqw;
  white-space: nowrap;
}

.nav a {
  position: relative;
  color: var(--texto-claro);
  padding-bottom: 0.25cqw;
  transition: color 0.2s;
}

/* Sublinhado: cresce do centro no hover. O item ativo ja nasce aberto. */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--azul-nav);
  transform: scaleX(0);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav a:hover        { color: var(--azul-nav); }
.nav a:hover::after { transform: scaleX(1); }

/* ---------- Botão do topo (paralelogramo) ---------- */
/* Geometria e gradiente medidos na arte (x1405-1727, y29-83):
   chanfros em cantos OPOSTOS — superior-direito e inferior-esquerdo. */
.btn-topo {
  position: absolute;
  left: 73.18%;
  top: 2.685%;
  width: 16.77%;
  height: 5.09%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.677cqw;
  clip-path: polygon(0 0, 92.9% 0, 100% 35%, 100% 100%, 6.8% 100%, 0 65%);
  background: var(--borda-botao);
  filter: drop-shadow(-2px 4px 6px rgba(0, 8, 25, 0.55));
  font-size: 1.04cqw;
  font-weight: 400;
  white-space: nowrap;
  transition: filter 0.2s;
}

.btn-topo::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  clip-path: polygon(0 0, 92.9% 0, 100% 35%, 100% 100%, 6.8% 100%, 0 65%);
  background: var(--grad-botao);
}

.btn-topo > * { position: relative; z-index: 1; }
.btn-topo:hover { filter: drop-shadow(-2px 4px 6px rgba(0, 8, 25, 0.55)) brightness(1.2); }
.btn-topo__icone { width: 0.833cqw; height: auto; }

/* ---------- Bloco de texto esquerdo ---------- */
.bloco-esq {
  position: absolute;
  left: 0;
  top: 31.85%;
  width: 38.03%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.bloco-esq .sobretitulo {
  font-family: var(--fonte-titulo);
  font-size: 3.65cqw;
  font-weight: 300;
  line-height: 1;
  color: #cfe3f8;
  white-space: nowrap;
}

.bloco-esq .titulo {
  font-family: var(--fonte-titulo);
  font-size: 4.5cqw;
  font-weight: 700;
  letter-spacing: -0.008em;
  line-height: 1;
  margin: -0.30cqw 0 0;
  white-space: nowrap;
  background: linear-gradient(96deg, #fff 8%, #fff 34%, #6fb0fb 78%, #3f92f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bloco-esq .subtitulo {
  font-family: var(--fonte-titulo);
  font-size: 2.05cqw;
  font-weight: 400;
  line-height: 1;
  margin-top: 0.29cqw;
  white-space: nowrap;
}
.bloco-esq .subtitulo b       { font-weight: 700; }
.bloco-esq .subtitulo .destaque { font-weight: 700; color: var(--azul-claro); }

.bloco-esq p {
  margin: 0.894cqw 0 0;
  width: 100%;
  font-size: 1.944cqw;
  line-height: 1.206;
  text-wrap: pretty;
}

/* ---------- Bloco de texto direito ---------- */
.bloco-dir {
  position: absolute;
  left: 60.57%;
  top: 26.81%;
  width: 33.6%;
  z-index: 3;
}

.bloco-dir .sobretitulo {
  font-family: var(--fonte-titulo);
  font-size: 2.6cqw;
  font-weight: 300;
  letter-spacing: 0.012em;
  line-height: 1;
  color: var(--azul-suave);
  white-space: nowrap;
}

.bloco-dir .titulo {
  font-family: var(--fonte-titulo);
  font-size: 4.05cqw;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.16cqw;
  white-space: nowrap;
  background: linear-gradient(95deg, #fff 0%, #fff 22%, #cfe4fd 55%, #7cb6f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bloco-dir p {
  margin: 1.13cqw 0 0;
  font-size: 1.57cqw;
  line-height: 1.29;
  text-wrap: pretty;
}

/* ---------- Botões do bloco direito ---------- */
.btn-preco {
  margin-top: 0.354cqw;
  width: 25.2cqw;
  height: 2.9cqw;
  display: flex;
  align-items: center;
  gap: 0.75cqw;
  padding-left: 1.35cqw;
  border-radius: 0.45cqw;
  background: linear-gradient(96deg,
    rgba(196, 210, 224, 0.92) 0%,
    rgba(150, 176, 201, 0.72) 55%,
    rgba(120, 152, 185, 0.55) 100%);
  font-size: 1.42cqw;
  white-space: nowrap;
  transition: filter 0.2s;
}
.btn-preco:hover { filter: brightness(1.12); }
.btn-preco b     { font-weight: 700; }

.pills {
  margin-top: 1.78cqw;
  display: flex;
  gap: 0.75cqw;
}

.pill {
  height: 2.45cqw;
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 0 1.1cqw;
  border-radius: 0.45cqw;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  font-size: 1.18cqw;
  white-space: nowrap;
  transition: background 0.2s;
}
.pill:hover { background: rgba(255, 255, 255, 0.12); }

/* mesma seta da seção 4, aplicada aos botões do hero */
.chevron { height: auto; }
.btn-preco .chevron { width: 0.9375cqw; }   /* 18px */
.pill .chevron      { width: 0.677cqw; }    /* 13px */

/* ---------- CTA principal ---------- */
/* Geometria medida na arte: x700-1207, y822-907. Mesma forma do
   .btn-topo (chanfros em cantos opostos), com borda clara de 2px.
   A borda e feita com o pai colorido + ::before recuado, porque
   border comum seria cortada pelo clip-path. */
.cta-principal {
  position: absolute;
  left: 36.458%;
  top: 76.111%;
  width: 26.406%;
  height: 7.87%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.78cqw;
  padding-left: 1.5625cqw;
  clip-path: polygon(0 0, 93.1% 0, 100% 35.3%, 100% 100%, 6.9% 100%, 0 63.5%);
  background: var(--borda-botao);
  filter: drop-shadow(-2px 4px 7px rgba(0, 10, 30, 0.5));
  font-family: var(--fonte-titulo);
  font-size: 1.4cqw;
  letter-spacing: -0.04em;
  white-space: nowrap;
  transition: filter 0.2s;
}

.cta-principal::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: polygon(0 0, 93.1% 0, 100% 35.3%, 100% 100%, 6.9% 100%, 0 63.5%);
  background: var(--grad-botao);
}

.cta-principal > * { position: relative; z-index: 1; }
.cta-principal:hover { filter: drop-shadow(-2px 4px 7px rgba(0, 10, 30, 0.5)) brightness(1.15); }
.cta-principal .cta-icone { height: 5cqh; width: auto; }

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ===========================================================
   SEÇÃO 2 — "O mercado compra percepção"
   O card (borda, entalhes laterais, glow e a foto) vem na
   imagem de fundo; textos e as duas faixas são HTML.
   Medidas tiradas da arte 02-seção.png (1920x1080).
   =========================================================== */

/* Gradiente dos três títulos: #ffffff -> #62b0ff, medido na arte
   e idêntico nas três linhas. */
.s2-texto {
  position: absolute;
  left: 9.479%;
  top: 33.24%;
  z-index: 3;
  font-family: var(--fonte-display);
}

.s2-titulo,
.s2-subtitulo {
  background: linear-gradient(90deg, #ffffff 0%, #62b0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.s2-titulo {
  margin: 0;
  font-size: 5.213cqw;
  font-weight: 700;
  line-height: 0.97;
  letter-spacing: 0.031em;
}

/* O subtitulo usa Poppins (a display condensada dava 13% menos
   largura que a arte); so os dois titulos grandes sao display. */
.s2-subtitulo {
  margin-top: 1.50cqw;
  font-family: var(--fonte-titulo);
  font-size: 3.766cqw;
  font-weight: 400;
  line-height: 1;
}

.s2-apoio {
  margin: 0.905cqw 0 0;
  font-family: var(--fonte-corpo);
  font-size: 2.255cqw;
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
}

/* ---------- Faixa divisora entre seções (fora do .stage, por
   isso container-type próprio em vez de % da altura do stage) --- */
.divisor-marquee {
  position: relative;
  width: 100%;
  height: 3.25cqw;
  overflow: hidden;
  background: linear-gradient(90deg, #fefeff 0%, #83c2ff 100%);
  container-type: inline-size;
}
.divisor-marquee .marquee__bloco { top: 0.2cqw; }

/* ---------- Faixas rolantes ---------- */
.marquee {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 4;
  overflow: hidden;
  background: linear-gradient(90deg, #fefeff 0%, #83c2ff 100%);
}

.marquee--topo { top: 0;    height: 5.648%; }
.marquee--base { bottom: 0; height: 5.926%; }

.marquee__pista {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  width: max-content;
  font-family: var(--fonte-titulo);
  font-size: 1.607cqw;
  font-weight: 500;
  letter-spacing: -0.0335em;
  white-space: nowrap;
}

.marquee__bloco { flex: none; position: relative; }

/* As duas faixas têm alturas diferentes na arte (61px e 64px) e o
   texto não fica no centro exato — deslocamento medido. */
.marquee--topo .marquee__bloco { top: 0.156cqw; }
.marquee--base .marquee__bloco { top: 0.26cqw; }

/* Duas camadas: a azul embaixo, a branca por cima com máscara.
   A máscara é fixa na tela, então a virada de cor fica parada
   enquanto o texto rola — como na arte. */
.marquee__pista--azul   { color: #48a3ff; }
.marquee__pista--branca {
  color: #ffffff;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 60%);
          mask-image: linear-gradient(90deg, transparent 40%, #000 60%);
}

.marquee--topo .marquee__pista,
.divisor-marquee .marquee__pista { animation: rolar-esq 26s linear infinite; }
.marquee--base .marquee__pista { animation: rolar-dir 26s linear infinite; }

@keyframes rolar-esq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes rolar-dir {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__pista { animation: none; }
}

/* ===========================================================
   SEÇÃO 3 — "Entregamos posicionamento"
   A foto, a vinheta, as pills de vidro e os chevrons vêm na
   imagem de fundo; só os textos são HTML. As pills viraram
   links cobrindo exatamente a caixa desenhada na arte.
   Medidas da arte 03-seção.png (1920x1080).
   =========================================================== */

.s3-texto {
  position: absolute;
  left: 0;
  top: 34.17%;              /* topo do "NÃO ENTREGAMOS ARTE" */
  width: 34.69%;            /* borda direita comum em x=666 */
  z-index: 3;
  text-align: right;
  font-family: var(--fonte-titulo);
}

.s3-sobre {
  font-size: 1.528cqw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.3707em;
  white-space: nowrap;
  background: linear-gradient(90deg, #ffffff 0%, #85c7ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.s3-titulo1 {
  margin-top: -0.386cqw;
  font-size: 5.198cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.029em;
  color: #d5edff;           /* medido: sem gradiente, cor sólida */
  white-space: nowrap;
}

.s3-titulo2 {
  margin: 0.204cqw 0 0;
  font-size: 3.472cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.022em;
  white-space: nowrap;
  background: linear-gradient(90deg, #ffffff 0%, #7fc2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.s3-apoio {
  margin: 0.536cqw 0 0;
  font-size: 2.066cqw;
  font-weight: 400;
  line-height: 1.28;
  color: #ffffff;
}
.s3-apoio b { font-weight: 700; }

/* ---------- Pills (a caixa de vidro está na imagem) ---------- */
.s3-lista {
  position: absolute;
  left: 64.11%;             /* x=1231 */
  top: 32.41%;              /* y=350 */
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
}

/* Em cqw, não em %: margin-top percentual se resolve pela LARGURA
   do container, o que desalinhava as pills 2, 3 e 4. */
.s3-lista li { height: 3.542cqw; }          /* 68px */
.s3-lista li + li { margin-top: 1.719cqw; } /* topos a cada 101px */

/* Pílula (mesmo estilo das pills da seção "Não trava"): contorno fino,
   cápsula e a setinha à frente. O texto continua começando em x=1291
   (3.13cqw da esquerda do item); a setinha ocupa o espaço antes dele. */
.s3-lista span {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding-left: 3.13cqw;    /* texto começa em x=1291 */
  padding-right: 1.9cqw;
  border: 1px solid rgba(191, 202, 217, 0.75);
  background: rgba(2, 20, 58, 0.55);   /* fundo escuro para o texto ler bem sobre a foto */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;     /* cápsula */
  font-family: var(--fonte-corpo);
  font-size: 1.632cqw;
  letter-spacing: -0.028em;
  color: #ffffff;
  white-space: nowrap;
}
.s3-chevron {
  position: absolute;
  left: 1.25cqw;
  top: 50%;
  width: 0.95cqw;
  height: auto;
  transform: translateY(-50%);
  opacity: 0.9;
}


/* ===========================================================
   SEÇÃO 4 — "Você acessa uma estrutura"
   O wrapper é alto e o palco fica sticky dentro dele: conforme
   a pessoa rola, o item ativo avança e o marcador desliza pela
   trilha. Medidas da arte 04-seção.png (1920x1080).
   =========================================================== */

.s4-wrap { height: 300vh; }

/* Janela mais "alta" que 16:9 (tablet em pé, janela quadrada…): o palco fixo
   deixaria uma faixa vazia embaixo. Nesses formatos a seção é comum (sem fixar)
   e o js/secao4.js avança os itens sozinho quando ela aparece. */
@media (max-aspect-ratio: 16/9) {
  .s4-wrap { height: auto; }
  .s4-palco { position: relative; }
}

.s4-palco {
  position: sticky;
  top: 0;
}

.s4-titulo {
  position: absolute;
  left: 8.28%;              /* x=159 */
  top: 13.7%;
  margin: 0;
  z-index: 3;
  font-family: var(--fonte-titulo);
  font-size: 2.83cqw;
  font-weight: 400;
  line-height: 1.234;
  color: #f6faff;
  white-space: nowrap;
}
.s4-titulo b { font-weight: 700; color: #a8d2ff; }

/* ---------- Trilha lateral ---------- */
.s4-trilha {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.s4-trilha__linha {
  position: absolute;
  left: 5.156%;             /* x=99 */
  top: 12.5%;               /* y=135 */
  width: 0.156%;            /* 3px */
  height: 67.04%;           /* até y=859 */
  background: rgba(160, 200, 240, 0.55);
}

.s4-trilha__topo {
  position: absolute;
  left: 4.896%;             /* x=94 */
  top: 12.5%;
  width: 0.677%;            /* 13px */
  aspect-ratio: 1;
  border-radius: 0.15cqw;
  background: rgba(170, 205, 240, 0.8);
}

.s4-trilha__ponto {
  position: absolute;
  left: 4.948%;             /* x=95 */
  top: var(--y);
  transform: translateY(-50%);
  width: 0.573%;            /* 11px */
  aspect-ratio: 1;
  border-radius: 50%;
  background: #78a3cf;
  transition: opacity 0.3s;
}

.s4-trilha__marcador {
  position: absolute;
  left: 4.115%;             /* x=79 */
  top: var(--marcador-y, 38.148%);
  width: 2.24cqw;           /* 43px */
  height: auto;
  transform: translateY(-50%);
  transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Lista ---------- */
.s4-lista {
  position: absolute;
  left: 8.28%;              /* x=159 */
  top: 34.81%;              /* y=376 */
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
}

.s4-lista li {
  display: flex;
  align-items: center;
  gap: 0.885cqw;
  height: 3.854cqw;         /* 74px */
  padding-left: 1.667cqw;   /* chevron em x=191 */
  border-radius: 0.6cqw;
  border: 1.5px solid transparent;
  background: rgba(0, 20, 55, 0.30);
  font-family: var(--fonte-corpo);
  font-size: 1.71cqw;
  color: #8fb2d6;
  white-space: nowrap;
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}

.s4-lista li + li { margin-top: 2.29cqw; }   /* topos a cada ~118px */
.s4-lista li:nth-child(2) { margin-top: 3.02cqw; }  /* o 1º vão é maior na arte */

/* chevron extraído da própria arte — o caractere ❯ fica fino demais aqui */
.s4-chevron {
  width: 1.25cqw;           /* 24px */
  height: auto;
  opacity: 0.55;
  transition: opacity 0.35s;
}
.s4-lista li.ativo .s4-chevron { opacity: 1; }

/* estado ativo: o que a arte mostra no primeiro item */
.s4-lista li.ativo {
  background: rgba(0, 30, 75, 0.55);
  border-color: rgba(190, 220, 250, 0.85);
  color: #ffffff;
}

/* larguras medidas, uma a uma */
.s4-lista li:nth-child(1) { width: 25.83cqw; }
.s4-lista li:nth-child(2) { width: 11.25cqw; }
.s4-lista li:nth-child(3) { width: 14.11cqw; }
.s4-lista li:nth-child(4) { width: 26.04cqw; }

.s4-rodape {
  position: absolute;
  left: 8.44%;              /* x=162 */
  top: 79.35%;              /* y=857 */
  margin: 0;
  z-index: 3;
  font-family: var(--fonte-titulo);
  font-size: 2.83cqw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.0175em;
  color: #f2f8ff;
  white-space: nowrap;
}
.s4-rodape b { font-weight: 700; color: #a9d3ff; }

/* Coluna da esquerda um pouco mais para cima. Tudo sobe junto (título,
   trilha com o marcador, itens e rodapé) para o marcador continuar
   alinhado com cada item. Em cqw para acompanhar a altura do palco. */
.s4-titulo,
.s4-trilha,
.s4-lista,
.s4-rodape { transform: translateY(-1.8cqw); }

@media (prefers-reduced-motion: reduce) {
  .s4-trilha__marcador { transition: none; }
}

/* ===========================================================
   SEÇÃO 5 — cards base (reusados pela seção "Depois da GeraçãoSioz")
   Fundo (azul escuro + arco) na imagem; cards, título e lista
   em HTML. Medidas da arte 05-seção.png (1920x1080).
   =========================================================== */

.s5-cards {
  position: absolute;
  left: 4.01%;              /* x=77 */
  top: 20.09%;              /* y=217 */
  z-index: 3;
  display: flex;
  gap: 1.406cqw;            /* 27px */
}

.s5-card-wrap { position: relative; }

.s5-card {
  position: relative;
  width: 18.4375cqw;        /* 354px */
  height: 32.81cqw;         /* 630px */
  border-radius: 1.5625cqw; /* 30px */
  background: #cae5ff;
  overflow: hidden;
}

/* virou <video> nos depoimentos "depois" — mesmo formato do placeholder */
video.s5-card { object-fit: cover; display: block; }

.s5-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0.2cqw 0.8cqw rgba(0, 5, 20, 0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}
.s5-play::after {
  content: "";
  position: absolute;
  left: 56%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.5cqw 0 0.5cqw 0.85cqw;
  border-color: transparent transparent transparent #0a1f45;
}
button.s5-play:hover { transform: translate(-50%, -50%) scale(1.08); background: #ffffff; }
.s5-play[hidden] { display: none; }

/* ===========================================================
   SEÇÃO 5 — PORTFÓLIO (carrossel de artes)
   Faixa de artes 4:5 rolando sozinha, em laço. Só CSS: a lista tem
   as artes duas vezes e anda -50%. O padding-right = gap fecha a
   conta pra emenda não dar salto. Nunca pausa (nem com o mouse).
   Imagens em WebP 720x900 (~45 KB cada), carregadas sob demanda.
   =========================================================== */

.pf-faixa {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.pf-pista {
  display: flex;
  gap: 2cqw;
  width: max-content;
  margin: 0;
  padding: 0 2cqw 0 0;
  list-style: none;
  will-change: transform;
  animation: pf-rolar 70s linear infinite;
}

.pf-item {
  flex: none;
  width: 25cqw;
  aspect-ratio: 4 / 5;
  border-radius: 1.2cqw;
  overflow: hidden;
  background: #0a1f45;
  box-shadow: 0 0.6cqw 1.6cqw rgba(0, 5, 20, 0.4);
}
.pf-item img { display: block; width: 100%; height: 100%; object-fit: cover; }

@keyframes pf-rolar { to { transform: translate3d(-50%, 0, 0); } }

/* sem animação: a faixa vira rolagem manual e some a metade repetida */
@media (prefers-reduced-motion: reduce) {
  .pf-faixa { overflow-x: auto; scrollbar-width: none; }
  .pf-pista { animation: none; }
  .pf-item[aria-hidden="true"] { display: none; }
}

/* ===========================================================
   SEÇÃO 6 — "Sua operação precisa de 3 pontos importantes"
   Fundo na imagem; título, cards, linhas e nota em HTML.
   Medidas da arte 06-seção.png (1920x1080).
   =========================================================== */

.s6-titulo {
  position: absolute;
  left: 5.52%;              /* barra em x=106 */
  top: 20.83%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding-left: 1.25cqw;    /* texto começa em x=130 */
  border-left: 4px solid rgba(235, 245, 255, 0.95);
  font-family: var(--fonte-display);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.s6-sua {
  font-size: 5.28cqw;
  font-weight: 400;
  letter-spacing: 0.015em;
  color: #f0f7ff;
}
.s6-t1, .s6-t2, .s6-t3 { font-size: 6.86cqw; letter-spacing: 0.028em; }

.s6-t1 { color: #c9e4ff; margin-top: 0.73cqw; }
.s6-t2 {
  margin-top: 1.115cqw;
  background: linear-gradient(90deg, #ffffff 0%, #7fb9f5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s6-t3 {
  margin-top: 0;
  background: linear-gradient(90deg, #ffffff 0%, #93b3d6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s6-t4 { font-size: 4.12cqw; margin-top: -0.036cqw; color: #9db9d7; }

/* ---------- Cards + linhas (flutuam juntos) ---------- */
.s6-grupo {
  position: absolute;
  inset: 0;
  z-index: 3;
  animation: s6-flutuar 8s ease-in-out infinite;
}

@keyframes s6-flutuar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.s6-linhas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.5;
}

.s6-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.73cqw;
  padding: 0 1.20cqw;
  border-radius: 0.73cqw;
  background: #0057a6;
  font-family: var(--fonte-corpo);
  color: #ffffff;
}

.s6-card b {
  font-size: 3.27cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.s6-card span {
  font-family: var(--fonte-display);
  font-size: 1.30cqw;
  font-weight: 700;
  line-height: 1.19;
  white-space: nowrap;
}

.s6-card--1 { left: 47.14%; top: 24.07%; width: 19.53cqw; height: 4.427cqw; }
.s6-card--2 { left: 80.05%; top: 50.46%; width: 18.28cqw; height: 4.427cqw; }
.s6-card--3 { left: 42.81%; top: 66.67%; width: 16.20cqw; height: 4.427cqw; }

/* nós brancos onde as linhas encostam nos cards */
/* centros medidos na arte: (1264,343) (1539,570) (1538,599) (1125,762) */
.s6-no {
  position: absolute;
  width: 0.729cqw;          /* 14px */
  height: 0.729cqw;
  background: #ffffff;
  transform: translate(-50%, -50%);
}
.s6-no--dir-baixo { left: 95.7%; top: 97.6%; }
.s6-no--esq-cima  { left: 0.57%; top: 29.4%; }
.s6-no--esq-baixo { left: 0.28%; top: 63.5%; }
.s6-no--dir-meio  { left: 97.4%; top: 49.4%; }

.s6-nota {
  position: absolute;
  left: 64.11%;             /* barra em x=1231 */
  top: 72.87%;              /* y=787 */
  margin: 0;
  z-index: 3;
  padding-left: 1.15cqw;
  border-left: 4px solid rgba(235, 245, 255, 0.95);
  font-family: var(--fonte-corpo);
  font-size: 1.82cqw;
  font-weight: 400;
  line-height: 1.08;
  white-space: nowrap;
  /* na arte o texto puxa para azul da esquerda p/ direita */
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 28%, #6fb0f0 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.s6-nota b { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .s6-grupo { animation: none; }
}

/* ===========================================================
   SEÇÃO — RESULTADOS DOS CLIENTES (vídeos em formato Stories)
   Mesma faixa em laço do portfólio, mas 9:16 e bem mais lenta
   (dá tempo de ver o vídeo passar). Espaços vazios até chegarem
   os vídeos; ver o comentário no HTML.
   =========================================================== */

.vd-faixa {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.vd-pista {
  display: flex;
  gap: 2cqw;
  width: max-content;
  margin: 0;
  padding: 0 2cqw 0 0;
  list-style: none;
  will-change: transform;
  animation: vd-rolar 110s linear infinite;
}

.vd-item {
  position: relative;
  flex: none;
  width: 18.4cqw;
  aspect-ratio: 9 / 16;
  border-radius: 1.5625cqw;
  overflow: hidden;
  background: linear-gradient(160deg, #0d2c63 0%, #061a40 100%);
  box-shadow: 0 0.6cqw 1.6cqw rgba(0, 5, 20, 0.4);
}
.vd-item video { display: block; width: 100%; height: 100%; object-fit: cover; }

.vd-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}
.vd-play::after {
  content: "";
  position: absolute;
  left: 56%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.5cqw 0 0.5cqw 0.85cqw;
  border-color: transparent transparent transparent #0a1f45;
}

@keyframes vd-rolar { to { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .vd-faixa { overflow-x: auto; scrollbar-width: none; }
  .vd-pista { animation: none; }
  .vd-item[aria-hidden="true"] { display: none; }
}

/* ===========================================================
   SEÇÃO — "Não trava por falta de ideias"
   Fundo (cena escura com luminária) na imagem; textos e as 4
   pills em grade 2x2 em HTML. Medidas da arte 08-seção.png.
   =========================================================== */

.s8-texto {
  position: absolute;
  left: 4.95%;              /* x=95 */
  top: 12.04%;              /* topo do SUA EMPRESA (y=146 c/ margem da linha) */
  z-index: 3;
  font-family: var(--fonte-titulo);
  white-space: nowrap;
}

.s8-sobre {
  font-size: 3.41cqw;
  font-weight: 300;
  line-height: 1;
  padding: 0.1em 0 0.12em;
  letter-spacing: 0.045em;
  background: linear-gradient(90deg, #fdfeff 0%, #5fc0ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.s8-titulo {
  margin: 0 0 0;
  padding: 0.1em 0 0.14em;
  font-size: 5.81cqw;
  font-weight: 700;
  line-height: 0.93;
  letter-spacing: -0.012em;
  background: linear-gradient(90deg, #fcfdff 0%, #b3d9ff 55%, #75d8ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.s8-fecho {
  margin-top: -1cqw;
  padding: 0.1em 0 0.14em;
  font-size: 4.93cqw;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #e2e9f0 0%, #a2c8f3 55%, #6bbdff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.s8-sub {
  margin: 0;
  padding: 0.12em 0 0.2em;
  font-size: 4.723cqw;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  background: linear-gradient(95deg, #a1bfe1 0%, #bcdefe 55%, #f4ffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Pills: 2x2, mas cada linha tem seu próprio recuo na
     arte (a col. 2 começa em x=408 na 1ª linha e x=430 na 2ª), então
     cada uma é posicionada em vez de usar grid ---------- */
.s8-lista {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
}

.s8-lista li {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.573cqw;
  height: 2.552cqw;         /* 49px */
  padding: 0 0.781cqw 0 0.833cqw;
  border: 1px solid rgba(191, 202, 217, 0.75);
  border-radius: 1.276cqw;  /* cápsula */
  font-family: var(--fonte-corpo);
  font-size: 1.086cqw;
  color: #bcc9d9;
  white-space: nowrap;
}

.s8-lista li:nth-child(1) { left: 5.156%;  top: 74.907%; }   /* x99  y809 */
.s8-lista li:nth-child(2) { left: 21.250%; top: 74.907%; }   /* x408 */
.s8-lista li:nth-child(3) { left: 5.156%;  top: 81.944%; }   /* x99  y885 */
.s8-lista li:nth-child(4) { left: 22.396%; top: 81.944%; }   /* x430 */

.s8-chevron { width: 0.78cqw; height: auto; opacity: 0.9; }

/* ===========================================================
   SEÇÃO — "A estrutura que acompanha sua operação"
   Fundo na imagem; todo o resto em HTML. O card de preço, o
   slider e os 3 blocos de benefício são recriados.
   Medidas da arte 11-seção.png (1920x1080).
   =========================================================== */

.s11-kicker, .s11-titulo, .s11-titulo2, .s11-sub, .s11-rodape {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  z-index: 3;
  text-align: center;
  white-space: nowrap;
}

.s11-kicker {
  top: 11.6%;
  font-family: var(--fonte-corpo);
  font-size: 1.106cqw;
  font-weight: 500;
  letter-spacing: 0.30em;
  background: linear-gradient(90deg, #ecf5ff 0%, #ecf5ff 45%, #8dc4ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.s11-titulo {
  top: 17.4%;
  font-family: var(--fonte-display);
  font-size: 3.472cqw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.005em;
  color: #e9f4ff;
}

.s11-titulo2 {
  top: 23.7%;
  font-family: var(--fonte-display);
  font-size: 4.981cqw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.20em;
  color: #9fcdff;
}

.s11-sub {
  top: 35.2%;
  font-family: var(--fonte-corpo);
  font-size: 1.275cqw;
  font-weight: 400;
  line-height: 1.55;
  color: #ffffff;
}

/* ---------- Card do investimento ---------- */
.s11-card {
  position: absolute;
  left: 14.5%;
  top: 42.3%;
  width: 71%;
  height: 17.31%;           /* 187px */
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.2cqw;
  border: 1.5px solid rgba(150, 190, 235, 0.55);
  border-radius: 1.30cqw;
  font-family: var(--fonte-corpo);
  color: #ffffff;
}

.s11-preco {
  transform: translateY(-0.417cqw);  /* alinhamento vertical medido na arte */
  display: flex;
  align-items: center;              /* o R$ é centrado com o número, não na base */
  gap: 0.16cqw;
  font-size: 5.99cqw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.s11-preco i { font-style: normal; font-size: 2.19cqw; font-weight: 400; }

.s11-meio { text-align: center; }

.s11-label {
  font-size: 1.09cqw;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: #cfe4ff;
  white-space: nowrap;
}

.s11-slider {
  position: relative;
  width: 27cqw;             /* encurtada: não encosta no R$ */
  height: 0.73cqw;
  margin: 1.15cqw auto 0;
}
.s11-slider::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(180, 215, 250, 0.85);
}
.s11-slider span {
  position: absolute;
  top: 50%;
  width: 0.73cqw;
  height: 0.73cqw;
  border-radius: 50%;
  background: #cfe6ff;
  transform: translate(-50%, -50%);
}
.s11-slider span:nth-child(1) { left: 0; }
.s11-slider span:nth-child(2) { left: 100%; }

.s11-nota {
  margin: 0.9cqw 0 0;
  font-size: 1.04cqw;
  font-weight: 400;
  line-height: 1.42;
  color: #dbeaff;
  white-space: nowrap;
}

/* ---------- CTA (mesma etiqueta chanfrada do site) ---------- */
.s11-cta {
  position: absolute;
  left: 36.8%;
  top: 87.2%;               /* embaixo da frase final, centralizado */
  width: 26.4%;
  height: 5.9%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding-left: 0.65cqw;
  padding-right: 1.4cqw;
  box-sizing: border-box;
  clip-path: polygon(0 0, 93.1% 0, 100% 35.3%, 100% 100%, 6.9% 100%, 0 63.5%);
  background: var(--borda-botao);
  font-family: var(--fonte-corpo);
  font-size: 1.3cqw;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #ffffff;
  white-space: nowrap;
  transition: filter 0.2s;
}
.s11-cta::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  clip-path: polygon(0 0, 93.1% 0, 100% 35.3%, 100% 100%, 6.9% 100%, 0 63.5%);
  background: var(--grad-botao);
}
.s11-cta > * { position: relative; z-index: 1; }
.s11-cta img { width: 2.0cqw; height: auto; }
.s11-cta:hover { filter: brightness(1.15); }

/* ---------- Benefícios ---------- */
.s11-beneficios {
  position: absolute;
  left: 17.81%;             /* x=342 */
  top: 64.2%;
  width: 64.79%;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
}

.s11-beneficios li {
  position: absolute;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.68cqw;
  width: 18.65cqw;
}
.s11-beneficios li:nth-child(1) { left: 0; }
.s11-beneficios li:nth-child(2) { left: 35.29%; }   /* x=781 */
.s11-beneficios li:nth-child(3) { left: 69.85%; }   /* x=1211 */

.s11-beneficios img { width: 5.83cqw; height: auto; flex: none; }  /* 112px */

.s11-beneficios b {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: 1.15cqw;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #b9d8ff;
}
.s11-beneficios p {
  margin: 0.55cqw 0 0;
  font-family: var(--fonte-corpo);
  font-size: 1.09cqw;
  font-weight: 400;
  line-height: 1.30;
  color: #ffffff;
  white-space: nowrap;
}

.s11-rodape {
  top: 80.6%;
  font-family: var(--fonte-corpo);
  font-size: 1.341cqw;
  font-weight: 500;
  letter-spacing: 0.135em;
  background: linear-gradient(90deg, #ffffff 0%, #d1e8ff 30%, #a2cfff 60%, #67b1ff 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ===========================================================
   SEÇÃO — "Por que a GeraçãoSioz existe?"
   Fundo (foto + laptop com mockup embutido) na imagem; os dois
   blocos de texto em HTML. Medidas da arte 07-seção.jpg.
   =========================================================== */

.s7-esq, .s7-dir { position: absolute; z-index: 3; font-family: var(--fonte-corpo); }

/* colunas começam no topo, alinhadas; a da direita termina ~5.5% antes da borda */
.s7-esq { left: 40.0%; top: 7%; width: 26.5cqw; }
.s7-dir { left: 68.5%; top: 7%; width: 26cqw; }

.s7-autor {
  font-size: 1.51cqw;
  font-weight: 500;
  color: #f2f8ff;
}

.s7-kicker {
  margin-top: 2.0cqw;
  font-size: 2.17cqw;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #eaf4ff;
}

.s7-titulo {
  margin: 0.3cqw 0 0;
  font-family: var(--fonte-display);
  font-size: 3.95cqw;
  font-weight: 700;
  line-height: 1.02;
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 30%, #7fb9f5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.s7-texto, .s7-texto2 {
  margin: 1.1cqw 0 0;
  font-size: 1.18cqw;
  font-weight: 400;
  line-height: 1.14;
  color: #dbeaff;
}

.s7-dir .s7-texto2 {
  margin-top: 1.3cqw;
  font-size: 1.27cqw;
  line-height: 1.3;
}
.s7-texto2 b { font-weight: 700; color: #ffffff; }

/* ===========================================================
   SEÇÃO — "Quem entrou para a GeraçãoSioz ganhou capacidade
   sem aumentar a equipe". Fundo na imagem só de textura; vídeo,
   título e lista em HTML. Medidas da arte 10-seção.jpg.
   =========================================================== */

.s10-titulo {
  position: absolute;
  left: 0;
  top: 32.4%;
  width: 36.93%;             /* borda direita comum em x=709 */
  z-index: 3;
  padding-right: 1.1cqw;
  border-right: 3px solid rgba(180, 215, 250, 0.7);
  text-align: right;
  font-family: var(--fonte-display);
  white-space: nowrap;
}

.s10-kicker {
  font-family: var(--fonte-corpo);
  font-size: 2.24cqw;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #eaf4ff;
}

/* cada linha tem seu próprio tamanho: a arte ajusta a fonte pra
   cada uma ocupar a mesma faixa de largura (~627px), não usa um
   tamanho único — medido linha a linha via largura real. */
.s10-t1, .s10-t2, .s10-t3 {
  margin-top: 0.4cqw;
  font-weight: 700;
  line-height: 1.0;
  color: #ffffff;
}
.s10-t1 { font-size: 5.1cqw; }
.s10-t2 { font-size: 3.1cqw; color: #cfe4ff; }
.s10-t3 { font-size: 4.3cqw; }
.s10-t1 i { font-style: normal; font-weight: 400; color: #a9cdef; }

/* Carrossel horizontal dos 3 depoimentos em vídeo — mesma posição
   e tamanho que a caixa única ocupava antes. Arrasta/roda pro lado
   (scroll-snap nativo), com setas e bolinhas pra navegar também. */
.s10-carousel {
  position: absolute;
  left: 36.67%;              /* x=704 */
  top: 14.72%;                /* y=159 */
  width: 24.375cqw;           /* 468px */
  height: 70.37cqh;           /* 760px */
  z-index: 3;
  border-radius: 1.5625cqw;
  background: #050e1f;
  overflow: hidden;
}

.s10-carousel__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.s10-carousel__track::-webkit-scrollbar { display: none; }

.s10-carousel__item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}
/* levemente maior que 100% + centralizado: garante que o vídeo
   cubra o card por inteiro, sem sobrar nem 1px de fresta nas
   bordas (o fundo claro do card aparecia como uma linha fina). */
.s10-carousel__item .s5-card {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 0;
}

.s10-carousel__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 50%;
  border: none;
  background: rgba(0, 10, 30, 0.45);
  color: #ffffff;
  font-size: 1.6cqw;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.s10-carousel__seta--prev { left: 0.7cqw; }
.s10-carousel__seta--next { right: 0.7cqw; }
.s10-carousel__seta:hover { background: rgba(0, 10, 30, 0.7); }

.s10-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 1.3cqw;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 0.65cqw;
}
.s10-carousel__dots button {
  width: 0.6cqw;
  height: 0.6cqw;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.s10-carousel__dots button.ativo { background: #ffffff; transform: scale(1.25); }

.s10-sub {
  position: absolute;
  left: 63.33%;               /* x=1216 */
  top: 22.96%;                 /* y=248 */
  width: 32.5cqw;
  margin: 0;
  z-index: 3;
  font-family: var(--fonte-corpo);
  font-size: 2.0cqw;
  font-weight: 400;
  line-height: 1.012;
  color: #dbeaff;
}

.s10-lista {
  position: absolute;
  left: 63.33%;                /* x=1216 */
  top: 43.9%;                  /* respiro real entre o parágrafo e o 1º item */
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
}

.s10-lista li {
  display: flex;
  align-items: center;
  gap: 0.885cqw;
  height: 2.86cqw;
  padding: 0 1.6cqw 0 1.1cqw;
  border: 1px solid rgba(150, 190, 235, 0.75);
  border-radius: 0.5cqw;
  font-family: var(--fonte-corpo);
  font-size: 1.35cqw;
  color: #ffffff;
  white-space: nowrap;
}
.s10-lista li + li { margin-top: 2.3cqw; }

/* ===========================================================
   SEÇÃO — "Sua operação já tem demandas, agora precisa da
   execução". Foto + ícones Ps/Pr + toolbar ficam na imagem
   como pediu o Arthur; só o texto direito em HTML.
   Medidas da arte 12-seção.jpg.
   =========================================================== */

.s12-texto {
  position: absolute;
  left: 57.5%;                /* x=1104 */
  top: 8.6%;
  width: 41.5%;
  z-index: 3;
  font-family: var(--fonte-titulo);
}

.s12-kicker {
  font-size: 2.4cqw;
  font-weight: 300;
  color: #dceaff;
  white-space: nowrap;
}

.s12-titulo {
  margin: 0.3cqw 0 0;
  font-family: var(--fonte-display);
  font-size: 5.0cqw;
  font-weight: 700;
  line-height: 1.0;
  color: #ffffff;
}

.s12-t2, .s12-t3 {
  margin-top: 0.2cqw;
  font-size: 3.7cqw;
  font-weight: 400;
  line-height: 1.0;
  white-space: nowrap;
}
.s12-t2 { color: #eaf3ff; }
.s12-t3 { font-weight: 700; color: #ffffff; }

.s12-paragrafo {
  margin: 1.6cqw 0 0;
  font-size: 1.36cqw;
  font-weight: 400;
  line-height: 1.5;
  color: #dbeaff;
  max-width: 36cqw;
}

.s12-cta-texto {
  margin: 1.8cqw 0 0;
  font-size: 1.8cqw;
  font-weight: 400;
  line-height: 1.25;
  color: #cfe4ff;
}
.s12-cta-texto b { font-weight: 700; color: #ffffff; }

.s12-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7cqw;
  margin-top: 1.4cqw;
  height: 3.6cqw;
  padding: 0 1.4cqw;
  clip-path: polygon(0 0, 93.1% 0, 100% 35.3%, 100% 100%, 6.9% 100%, 0 63.5%);
  background: var(--borda-botao);
  font-family: var(--fonte-corpo);
  font-size: 1.09cqw;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
  transition: filter 0.2s;
}
.s12-cta::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  clip-path: polygon(0 0, 93.1% 0, 100% 35.3%, 100% 100%, 6.9% 100%, 0 63.5%);
  background: var(--grad-botao);
}
.s12-cta > * { position: relative; z-index: 1; }
.s12-cta img { width: 1.3cqw; height: auto; }
.s12-cta:hover { filter: brightness(1.15); }

/* ===========================================================
   SEÇÃO 13 — "Solicite sua entrada na GeraçãoSioz" (formulário)
   Fundo + foto do rapaz na imagem (recorte por subtração de
   fundo — a arte e o s13-fundo.jpg são a mesma cena, então o
   crop retangular com feather cola sem costura visível).
   Timeline, título e formulário inteiros em HTML.
   Medidas da arte 13-seção.jpg (1920x1080). Formulário é só
   visual por enquanto (sem back-end).
   =========================================================== */

.s13-foto {
  left: 1.042%;
  top: 3.704%;
  width: 30.729%;
  z-index: 2;
}

/* ---------- Linha conectora da timeline (2 segmentos verticais + 1 horizontal) ---------- */
.s13-linha {
  position: absolute;
  z-index: 3;
  background: rgba(235, 244, 255, 0.85);
  pointer-events: none;
}
.s13-linha--v1 { left: 23.906%; top: 14.722%; width: 1px; height: 16.759%; }
.s13-linha--h  { left: 23.906%; top: 31.481%; width: 6.25%;  height: 1px; }
.s13-linha--v2 { left: 30.156%; top: 31.481%; width: 1px; height: 45.278%; }

/* ---------- Timeline: bullets + textos ---------- */
.s13-timeline { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; z-index: 3; }

.s13-item { position: absolute; display: flex; align-items: flex-start; }
.s13-item--1 { left: 23.542%; top: 13.426%; }
.s13-item--2 { left: 23.542%; top: 22.778%; }
.s13-item--3 { left: 29.792%; top: 37.315%; }
.s13-item--4 { left: 29.792%; top: 52.778%; }
.s13-item--5 { left: 29.792%; top: 63.519%; }
.s13-item--6 { left: 29.792%; top: 75.185%; }

.s13-bullet {
  width: 0.729cqw;
  height: 0.729cqw;
  margin-top: 0.15cqw;
  background: #eef5ff;
  flex: none;
}
.s13-bullet--pequeno { width: 0.5cqw; height: 0.5cqw; margin-top: 0.3cqw; }

.s13-texto { margin-left: 2.29cqw; max-width: 24cqw; }

.s13-label, .s13-titulo, .s13-paragrafo { margin: 0; font-family: var(--fonte-corpo); }

.s13-label {
  font-size: 1.25cqw;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: #dce8fa;
  white-space: nowrap;
}

.s13-titulo {
  margin-top: 0.35cqw;
  font-family: var(--fonte-display);
  font-size: 2.45cqw;
  font-weight: 700;
  line-height: 1.05;
  color: #ffffff;
  white-space: nowrap;
}

.s13-paragrafo {
  font-size: 1.38cqw;
  font-weight: 400;
  line-height: 1.42;
  color: #eef5ff;
}
.s13-paragrafo b { font-weight: 600; color: #8fc0f5; }

/* ---------- Bloco do formulário ---------- */
.s13-form {
  position: absolute;
  left: 59.375%;
  top: 11.852%;
  width: 27.6%;
  z-index: 3;
  font-family: var(--fonte-corpo);
}

.s13-form__titulo {
  margin: 0 0 2.2cqw;
  font-weight: 400;
  font-size: 1.98cqw;
  line-height: 1.22;
  color: #ffffff;
}
.s13-form__titulo span { color: #b7d3f5; }
.s13-form__titulo b {
  font-family: var(--fonte-display);
  font-size: 1.35em;
  font-weight: 800;
  color: #ffffff;
}
.s13-form__titulo i {
  font-style: normal;
  font-family: var(--fonte-display);
  font-size: 1.35em;
  font-weight: 300;
  color: #9cc3ee;
  letter-spacing: 0.04em;
}

.s13-campos { display: flex; flex-direction: column; gap: 1.43cqw; }

.s13-input {
  width: 100%;
  height: 1.95cqw;
  padding: 0 1.5cqw;
  border-radius: 1cqw;
  border: 1px solid rgba(200, 222, 250, 0.28);
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--fonte-corpo);
  font-size: 1.1cqw;
  color: #ffffff;
}
.s13-input::placeholder { color: #9db2cc; }
.s13-input:focus { outline: none; border-color: rgba(140, 190, 250, 0.7); }

.s13-dropdown {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  width: 100%;
  height: 1.95cqw;
  padding: 0 1.3cqw;
  border-radius: 1cqw;
  border: 1.5px solid rgba(130, 178, 235, 0.55);
  background: transparent;
  cursor: pointer;
  font-family: var(--fonte-corpo);
  font-size: 0.92cqw;
  font-weight: 500;
  color: #ffffff;
  text-align: left;
  white-space: nowrap;
}
.s13-dropdown span { overflow: hidden; text-overflow: ellipsis; }
.s13-dropdown--ativo {
  background: linear-gradient(90deg, #0a4f9e 0%, #0a63b8 100%);
  border-color: rgba(140, 190, 250, 0.75);
}
.s13-dropdown img { width: 0.95cqw; height: auto; flex: none; }
.s13-dropdown:hover { border-color: rgba(180, 215, 255, 0.9); }

.s13-passos { list-style: none; margin: 0 0 0.4cqw; padding: 0; display: flex; flex-direction: column; gap: 1cqw; }
.s13-passos li {
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  padding: 0.85cqw 1.1cqw;
  border-radius: 1cqw;
  border: 1px solid rgba(200, 222, 250, 0.28);
  background: rgba(255, 255, 255, 0.05);
  font-size: 1cqw;
  line-height: 1.3;
  color: #ffffff;
}
.s13-passos b {
  flex: none;
  width: 2cqw;
  height: 2cqw;
  display: grid;
  place-items: center;
  border-radius: 0.6cqw;
  background: linear-gradient(100deg, #00397f, #0a63c4);
  font-size: 1cqw;
  font-weight: 600;
}
.s13-nota { margin: 0.8cqw 0 0; text-align: center; font-size: 0.85cqw; color: var(--azul-suave); }

.s13-enviar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7cqw;
  margin-top: 1.23cqw;
  width: 100%;
  height: 3.44cqw;
  clip-path: polygon(0 0, 93.1% 0, 100% 25%, 100% 100%, 6.9% 100%, 0 75%);
  background: var(--borda-botao);
  border: none;
  cursor: pointer;
  font-family: var(--fonte-corpo);
  font-size: 1.25cqw;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  transition: filter 0.2s;
}
.s13-enviar::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  clip-path: polygon(0 0, 93.1% 0, 100% 25%, 100% 100%, 6.9% 100%, 0 75%);
  background: var(--grad-botao);
}
.s13-enviar > * { position: relative; z-index: 1; }
.s13-enviar img { width: 1.35cqw; height: auto; }
.s13-enviar:hover { filter: brightness(1.15); }

/* ---------- Rodapé de aviso + contatos ---------- */
.s13-rodape {
  position: absolute;
  left: 10.677%;
  top: 86.852%;
  width: 78.646%;
  height: 8.519%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  padding: 0 1.9cqw;
  border-radius: 1.5cqw;
  border: 1px solid rgba(160, 195, 235, 0.35);
  background: rgba(4, 18, 46, 0.55);
}

.s13-rodape__alerta { width: 1.9cqw; height: auto; flex: none; }

.s13-rodape__aviso {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--fonte-corpo);
  font-size: 0.98cqw;
  font-weight: 400;
  line-height: 1.4;
  color: #dce9fb;
}

.s13-rodape__contato {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  flex: none;
  font-family: var(--fonte-corpo);
  font-size: 1.15cqw;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #ffffff;
}
.s13-rodape__contato img { width: 1.7cqw; height: auto; }
.s13-rodape__contato:hover { color: #bfdaff; }


/* ===========================================================
   Folga para acentos/cedilha nos títulos com degradê.
   O degradê (background-clip:text) só pinta dentro da caixa da
   linha; com line-height ~1 o til (Ã) e a cedilha (Ç) ficavam
   cortados. O padding aumenta a área pintada e a margem negativa
   do mesmo tamanho mantém cada linha exatamente onde estava.
   =========================================================== */
.s2-titulo    { padding: 0.16em 0 0.26em; margin: -0.16em 0 -0.26em; }
.s2-subtitulo { padding: 0.16em 0 0.26em; margin: calc(1.5cqw - 0.16em) 0 -0.26em; }
.s7-titulo    { padding: 0.12em 0 0.22em; margin: calc(0.3cqw - 0.12em) 0 -0.22em; }
.s3-titulo2   { padding: 0.14em 0 0.24em; margin: calc(0.204cqw - 0.14em) 0 -0.24em; }
.bloco-esq .titulo { padding: 0.14em 0 0.24em; margin: calc(-0.30cqw - 0.14em) 0 -0.24em; }
.bloco-dir .titulo { padding: 0.14em 0 0.24em; margin: calc(0.16cqw - 0.14em) 0 -0.24em; }

/* ---------- contador rolante (js/contador.js) ---------- */
.ctd { font-weight: inherit; display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.ctd-dig { display: inline-block; width: 0.62em; height: 1.1em; overflow: hidden; }
.ctd-fita { display: block; will-change: transform; }
.ctd-fita span { display: block; height: 1.1em; line-height: 1.1em; font-style: normal; text-align: center; }
.ctd-sep { display: inline-block; line-height: 1.1em; }

/* Título do formulário: cada linha ocupa toda a largura dos cards de baixo */
.s13-form__titulo { line-height: 1.15; }
.s13-form__titulo .s13-t1, .s13-form__titulo .s13-t2 { display: block; white-space: nowrap; color: #b7d3f5; }
.s13-form__titulo .s13-t1 { font-size: 2.368cqw; letter-spacing: 0.005em; margin-bottom: 0.25cqw; }
.s13-form__titulo .s13-t2 { font-size: 4.215cqw; line-height: 1.25; }
.s13-form__titulo .s13-t2 b, .s13-form__titulo .s13-t2 i { font-size: 1em; }
.s13-rodape__contato img { width: 2.1cqw; }