/* =======================================================================
   VARIÁVEIS DE TEMA
   ======================================================================= */
:root{
  --bg-0:#d8d8d8;        /* cinza claro do fundo "light" */
  --bg-1:#d8d8d8;        /* cinza médio para as seções alternadas */
  --ink:#d8d8d8;         /* cor principal de texto */
  --brand:#f9a631;       /* laranja da identidade (barras) */
  --fade:700ms cubic-bezier(.2,.8,.2,1); /* easing padrão dos fades */
  --page-gutter: clamp(16px, 8vw, 160px); /* <= no máx. 160px por lado */
}


/* =======================================================================
   RESET BÁSICO / LAYOUT GLOBAL
   ======================================================================= */
*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg-0);
  overflow:hidden; /* sem scroll do documento: a navegação troca seções via JS */
}

/* Durante o boot mostramos a seção ativa com opacity 0 (tela “em branco”) */
body.preload .section.active{ opacity:0 !important; }


/* =======================================================================
   TOPBAR (MENU FIXO)
   ======================================================================= */
.topbar{
  position:fixed; inset:0 0 auto 0; height:60px;
  background:#fff; border-bottom:1px solid #e7e7ea;
  z-index:50;
  display:flex; align-items:center; justify-content:center;
  transition: background-color 350ms ease, border-color 350ms ease;
}
.topbar-inner{
  width:min(1200px,92vw);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
  opacity: 1; transition: opacity 300ms ease;
}

/* Estado “intro” (menu transparente + textos brancos + logo oculta) */
.topbar.is-transparent{
  background: transparent;
  border-bottom-color: transparent;
}
.topbar.is-transparent .nav a{
  color: #d8d8d8;      /* links brancos na intro */
  opacity: 1;          /* visíveis mesmo sem hover */
}
.topbar.is-transparent .nav a.is-active::after{
  background: #d8d8d8; /* sublinhado branco na intro */
}
/* esconde a logo enquanto estamos na intro */
.topbar.is-transparent .brand{
  opacity: 0;
  pointer-events: none;
}

/* Menu principal */
.nav .menu{
  display:flex; gap:28px;
  list-style:none; padding:0; margin:0;
}
.nav a{
  text-decoration:none; color:#111;
  font-weight:700; font-size:.9rem; letter-spacing:.03em;
  opacity:.86; position:relative; padding-block:8px;
}
.nav a:hover,
.nav a.is-active{
  opacity:1; color: #f9a631;
}
.nav a.is-active::after{
  content:"";
  position:absolute; left:0; right:0; bottom: 0px;
  height:2px; background:#f9a631;
}


/* =======================================================================
   CONTAINER DAS SEÇÕES (cada uma ocupa a viewport abaixo da topbar)
   ======================================================================= */
.viewport{ position:relative; height:100dvh; }

/* Seção "padrão": começa oculta e o JS ativa uma por vez */
.section{
  position:absolute; inset:60px 0 0 0;  /* 60px para não ficar sob a topbar */
  display:grid; place-items:center;
  opacity:0; pointer-events:none;
  transform:scale(.985);
  transition:opacity var(--fade), transform var(--fade);
}
.section.active{
  opacity:1; pointer-events:auto; transform:scale(1);
}

/* Conteúdo de exemplo das outras páginas */
.sect-inner{ width:min(1100px,92vw); text-align:center; }
.sec{ font-weight:800; font-size:clamp(34px,6vw,76px); }
.sec.gray{  background:var(--bg-1); color:#111; }
.sec.light{ background:var(--bg-0); color:#111; }


/* =======================================================================
   INTRO (index) — grid de 2 colunas: logo à esquerda + palavras/texto à direita
   ======================================================================= */
.intro{ background:var(--bg-0); }

/* garante que o conteúdo da intro fique acima do vídeo */
.intro-inner{
  position:relative;
  width:min(1200px,92vw);
  height:100%;
  margin-inline:auto;

  /* 240px era fixo; agora responsivo e 2ª coluna com largura mínima */
  display:grid;
  grid-template-columns: clamp(220px, 26vw, 320px) minmax(460px, 1fr);
  column-gap: clamp(28px, 4.5vw, 56px);
  align-items: center;
  z-index: 10;
}

/* ao sair da intro, esconda o vídeo para não “vazar” nas outras seções */
.intro:not(.active) .intro-bg{ opacity: 0; }

/* ----- LOGO (V P I) + barras externas do "V" ----- */
.logo-stack{
  position:relative; /* ancoragem das barras */
  display:flex; align-items:flex-end; gap:10px;
  margin-left:24px; min-height:1em; align-self: center;
  padding-bottom: 60px;
}

/* Letras da logo (acima das barras) */
.logo-letter{
  position:relative; z-index:2;
  display:inline-block;
  font-weight:800; font-size:112px; letter-spacing:2px;
  opacity:0; transition:opacity 500ms ease, filter 500ms ease;
}
.logo-letter.ready{ opacity:1; }

/* Barras amarelas (criadas via JS) */
.v-bars{
  position:absolute; bottom:0;
  display:flex; align-items:flex-end;
  pointer-events:none; z-index:1;
}
.v-bars .side{
  display:flex; align-items:flex-end; gap: var(--gap, 8px);
}
.v-bars .side.left{  justify-content:flex-end;  }
.v-bars .side.right{ justify-content:flex-start; }
.v-bars .spacer{ width:var(--spacer, 0px); height:1px; } /* ocupa a largura do V */

/* Barra individual */
.v-bar{
  width: var(--w, 8px);
  height: 0;                          /* começa zerada; JS aplica .grow */
  background: var(--brand);
  border-radius: 1px;
  transform-origin: bottom;
}
.v-bar.left  { transform: skewY(-18deg); } /* inclina topo acompanhando o V */
.v-bar.right { transform: skewY( 18deg); }
.v-bar.grow{
  height: var(--h, 100%);             /* altura final (JS) */
  transition: height 420ms cubic-bezier(.2,.8,.2,1);
}

/* (IMPORTANTE) Removemos o estilo antigo que pintava listras DENTRO do V.
   Se o seu JS ainda chama classList.add('accent'), apague essa linha. */

/* ----- Palavras da intro ----- */
.intro-right{
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  gap: 24px; /* durante a animação */
  padding-bottom: 60px;
}
.intro-right.done{
  gap: 0;
  transform: translateY(var(--intro-nudge-y));
  transition: transform 300ms ease;
}
.intro-right.done .hero-words{
  height: 0; overflow: hidden; margin: 0;
}

.hero-words{ position:relative; height:60vh; }

/* A .word fica ancorada no centro; quem se move é a .wtxt interna (JS) */
.word{
  position:absolute; left:50%; bottom:30%; transform:translateX(-50%);
  opacity:0; white-space:nowrap;
  font-weight:800; font-size:clamp(42px, 6vw, 86px); letter-spacing:3px;
}
.word.show{ opacity:1; }
.word .wtxt{ display:inline-block; will-change: transform, opacity; }
.word .ch{ display:inline-block; } /* cada caractere vira um span */

/* ----- Texto após a montagem + “scroll down” ----- */
.about{
  opacity:0; 
  transform:translateY(12px);
  transition:opacity 800ms ease, transform 800ms ease;  
  max-width:840px; 
  line-height:1.6; 
  font-size:1.02rem; 
  padding-top: 40px;
}
.about p{ margin: 0; }
.about.visible{ opacity:1; transform:translateY(0); }
.about{ transform: translateY(var(--about-nudge, 0)); }

/* Indicador piscando */
.scroll-indicator{
  position:absolute; left:50%; bottom:20px; translate:-50% 0;
  font-size:.72rem; letter-spacing:.28em; opacity:0;
  animation:blink 1.6s infinite steps(2,end);
}
.scroll-indicator.visible{ opacity:.7; }
@keyframes blink { 0%{opacity:.15} 50%{opacity:.7} 100%{opacity:.15} }

.anchor-alias{
  position:absolute; top:-60px; left:0; width:1px; height:1px; overflow:hidden; /* compensa a topbar fixa */
}

/* ----- Fundo de vídeo da intro ----- */
.intro-bg{
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; /* viewport cheia */
  z-index: 0; pointer-events: none; overflow: hidden;
  background: #000; opacity: 0; transition: opacity 900ms ease;
}
.intro-bg.is-ready{ opacity: 1; }

/* Fallback universal (cobrir 100% sem object-fit) */
.intro-bg-video{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%; width: auto; height: auto; display: block;
}

/* Se suportar object-fit, usa o caminho “limpo” */
@supports (object-fit: cover){
  .intro-bg-video{
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    min-width: 0; min-height: 0; transform: none; object-fit: cover;
  }
}

/* Só mostra o vídeo quando a intro está ativa e já saiu do preload */
.section.intro.active .intro-bg { opacity: 1; }
body.preload .section.intro.active .intro-bg { opacity: 0; }

/* Iframe “cover” 16:9 */
.intro-bg-yt{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78vh; height: 100vh; /* base ALTURA */
}
@media (min-aspect-ratio: 16/9){
  .intro-bg-yt{ width: 100vw; height: 56.25vw; } /* base LARGURA */
}

/* filtro escuro sobre o vídeo (legibilidade) */
.section.intro.active .intro-bg::after{
  content:""; position: absolute; inset: 0;
  background: #000; /* Fundo preto sólido */
  
  /* Opacidade controlada pela variável do theme.css */
  opacity: var(--effect-dim-sec0-intro, .85); 
  
  pointer-events: none;
  transition: opacity 700ms ease; /* Adiciona uma transição suave */
}

/* Quando o "Sobre" está visível, usa a variável de opacidade mais escura */
#sec-0.is-showing-about .intro-bg::after {
  opacity: var(--effect-dim-sec0-sobre, .92);
}


/* =======================================================================
   SECTION 1: CONSULTORIA FINANCEIRA
   ======================================================================= */

/* Valores padrão do overlay da imagem (ajustável via HTML: --cf-left-dim) */
#sec-1{
  --cf-left-dim: .45;     /* 0 = transparente | 1 = preto sólido */
  --cf-left-tint: 0,0,0;  /* RGB da cor do overlay (preto) */
}

#sec-1.cf{
  background: var(--bg-1);
  color:#111;
}

/* Apenas o título da tarja em branco */
#sec-1 .cf-panel .cf-title{ color: #d8d8d8; }

/* ----- container (sem header) ----- */
#sec-1 .cf-wrap{
  width: calc(100vw - (var(--page-gutter) * 2));
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: clamp(340px, 33vw, 480px) 1fr; /* referência; a grid real é .cf-grid */
  grid-template-rows: 1fr;
  align-content: start;
  position: relative; /* âncora dos pseudo-elements */
}

/* faixa branca full-bleed da esquerda (base) */
#sec-1 .cf-wrap::before{
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: calc(-1 * var(--page-gutter));
  width: calc(clamp(340px, 33vw, 480px) + var(--page-gutter));
  background: var(--bg-0);
  z-index: 0; pointer-events: none;
}

/* IMAGEM + OVERLAY da faixa esquerda */
#sec-1 .cf-wrap::after{
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: calc(-1 * var(--page-gutter));
  width: calc(clamp(340px, 33vw, 480px) + var(--page-gutter));
  background-image:
    linear-gradient(
      rgba(var(--cf-left-tint), var(--cf-left-dim)),
      rgba(var(--cf-left-tint), var(--cf-left-dim))
    ),
    var(--cf-left-img, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  z-index: 0; pointer-events: none;
}

/* grid principal (centralização vertical perfeita) */
#sec-1 .cf-grid{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: clamp(340px, 33vw, 480px) 1fr;
  column-gap: clamp(32px, 5vw, 72px);
  align-items: center;
  min-height: 100%;
  padding-top: 0;
  position: relative; z-index: 1;
}

/* painel/tarja (título grande à esquerda) */
#sec-1 .cf-panel{
  background: none;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(28px, 5.5vw, 56px);
}
#sec-1 .cf-title{
  margin:0; font-weight:800; line-height:1.06; letter-spacing:.02em;
  text-align:right; font-size: clamp(36px, 5.2vw, 64px);
}

/* coluna direita (lead + cards) */
#sec-1 .cf-right{
  display:grid; grid-auto-rows: max-content; row-gap: clamp(28px, 3.6vw, 40px);
  align-content: start; padding-left: 60px;
}

/* lead/introdução */
#sec-1 .cf-lead{
  margin: 0; line-height: 1.55; font-size: 1rem; max-width: 880px; opacity: .95; margin-top: -20px;
}

/* card genérico */
#sec-1 .cf-card{
  align-self: start;
  display:grid; grid-template-rows: auto auto 1fr auto; row-gap: 10px;
  padding: clamp(8px, 1.4vw, 12px) 0;
  margin-top: -40px;
}
#sec-1 .cf-card-title{
  margin:0; font-weight:800; font-size: 1.08rem; margin-top: 40px;
}
#sec-1 .cf-subtitle{
  margin: 4px 0 8px 0; font-weight: 700; font-size: .98rem; opacity: .96; padding-left: 20px;
}

/* corpo do card em 2 colunas */
#sec-1 .cf-card-body{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(22px,3.2vw,32px);
  row-gap: 10px;
  padding-left: 40px;
}
#sec-1 .cf-card-body ul{ margin:0; padding-left: 1.1rem; }
#sec-1 .cf-card-body li{ margin-bottom:.48rem; }

/* ----- Botões (verde unificado) ----- */
#sec-1 .cf-card .btn{
  justify-self: left;
  margin-top: clamp(12px, 1.6vw, 18px);
  padding: 12px 22px;
  background: #00A305; color: #d8d8d8;
  border: 0; border-radius: 0;
  font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .02em;
  cursor: pointer; position: relative;
  transition:
    transform .15s ease,
    filter .2s ease,
    background-color .15s ease,
    color .15s ease;
}
#sec-1 .cf-card .btn::before{
  content:""; position:absolute; inset: 0; background: #008205; z-index:-1; /* placa atrás */
}
#sec-1 .cf-card .btn:hover{
  transform: translateY(-1px); background: #00BA06;
}
#sec-1 .cf-card .btn:active{
  transform: translateY(0); color: #fdfdfd;
}
#sec-1 .cf-card .btn:focus-visible{
  outline: 2px solid #ffffff33; outline-offset: 2px;
}

/* ----- Responsivo (SEC-1) ----- */
@media (max-width: 1024px){
  /* vira 1 coluna; a faixa full-bleed some e o painel recebe a imagem */
  #sec-1 .cf-wrap{ grid-template-columns: 1fr; }
  #sec-1 .cf-wrap::before,
  #sec-1 .cf-wrap::after{ content: none; }

  #sec-1 .cf-grid{
    grid-template-columns: 1fr; align-items: start; row-gap: 28px;
  }

  /* painel com imagem + overlay no mobile */
  #sec-1 .cf-panel{
    background:
      linear-gradient(
        rgba(var(--cf-left-tint), var(--cf-left-dim)),
        rgba(var(--cf-left-tint), var(--cf-left-dim))
      ),
      var(--cf-left-img, none) center/cover no-repeat,
      var(--bg-0);
    padding: clamp(28px, 5.5vw, 56px);
  }

  #sec-1 .cf-lead{ max-width:none; }
  #sec-1 .cf-card-body{ grid-template-columns: 1fr; }
}
@media (min-width: 1025px){
  /* Desktop: apenas respiro lateral no painel (sem nudges) */
  #sec-1 .cf-panel{ padding-right: clamp(80px, 10vw, 120px); }
}
@media (max-width: 680px){
  #sec-1 .cf-card .btn{
    width: 100%; justify-self: stretch; text-align: center;
  }
}


/* =======================================================================
   SECTION 2: TERCEIRO SETOR (espelho da CF)
   ======================================================================= */
#sec-2{
  --ts-right-dim: .45;
  --ts-right-tint: 0,0,0;

  /* ajustes finos pedidos */
  --ts-left-nudge: 120px;   /* ts-left → direita */
  --ts-panel-nudge: 28px;   /* ts-panel → esquerda */
}

#sec-2.ts{
  background: var(--bg-0);
  color:#111;
}

/* container */
#sec-2 .ts-wrap{
  width: calc(100vw - (var(--page-gutter) * 2));
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: clamp(340px, 33vw, 480px) 1fr;
  grid-template-rows: 1fr;
  align-content: start;
  position: relative;
}

/* faixa branca + imagem à direita */
#sec-2 .ts-wrap::before,
#sec-2 .ts-wrap::after{
  content:"";
  position:absolute; top:0; bottom:0;
  right: calc(-1 * var(--page-gutter));
  width: calc(clamp(340px, 33vw, 480px) + var(--page-gutter));
  z-index:0; pointer-events:none;
}
#sec-2 .ts-wrap::before{ background: var(--bg-0); }
#sec-2 .ts-wrap::after{
  background-image:
    linear-gradient(rgba(var(--ts-right-tint), var(--ts-right-dim)),
                    rgba(var(--ts-right-tint), var(--ts-right-dim))),
    var(--ts-right-img, none);
  background: linear-gradient(rgba(var(--ts-right-tint), var(--ts-right-dim)),
                              rgba(var(--ts-right-tint), var(--ts-right-dim))), var(--ts-right-img, none) center/cover no-repeat;
}

/* grid principal */
#sec-2 .ts-grid{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: 1fr clamp(340px, 33vw, 480px);
  column-gap: clamp(24px, 4.2vw, 56px);
  align-items: center;
  min-height: 100%;
  padding-top: 0;
  position: relative; z-index: 1;
}

/* coluna esquerda */
#sec-2 .ts-left{
  display:grid; grid-auto-rows: max-content; row-gap: clamp(28px, 3.6vw, 40px);
  align-content: start;
  transform: translateX(var(--ts-left-nudge)); /* nudge → direita */
}

#sec-2 .ts-lead{
  margin: 0; line-height: 1.55; font-size: 1rem; max-width: 880px; opacity: .95;
}
#sec-2 .ts-lead + .ts-lead{ margin-top: 6px; }

#sec-2 .ts-block{
  display:grid; grid-template-rows: auto auto 1fr auto; row-gap: 12px;
  padding: clamp(8px, 1.4vw, 12px) 0; align-self:start;
}
#sec-2 .ts-block-title{
  margin:0 0 6px 0; font-weight:800; font-size:1.08rem;
}
#sec-2 .ts-subtitle{
  margin:10px 0 6px 0; font-weight:800; font-size:1rem;
  padding-left: 20px; padding-top: 20px;
}
#sec-2 .ts-list{
  margin:0; padding-left: 60px;
}
#sec-2 .ts-list li{ margin-bottom:.48rem; }

/* tarja direita (título branco) */
#sec-2 .ts-panel{
  background:none;
  display:flex; align-items:center; justify-content:flex-start;
  padding: clamp(28px, 5.5vw, 56px);
  padding-left: calc(clamp(80px, 10vw, 120px) - var(--ts-panel-nudge));
  min-height: clamp(360px, 52vh, 460px);
}
#sec-2 .ts-panel .ts-title{
  margin:0; font-weight:800; line-height:1.06; letter-spacing:.02em;
  text-align:left; font-size: clamp(36px, 5.2vw, 64px);
  color:#d8d8d8; transform: translateX(-60px);
}

/* ----- Botão (verde unificado) ----- */
#sec-2 .ts-block .btn{
  justify-self:start;
  margin-top: clamp(12px, 1.6vw, 18px);
  padding: 12px 22px;
  background: #00A305; color: #d8d8d8;
  border: 0; border-radius: 0;
  font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .02em;
  cursor: pointer; position: relative;
  transition:
    transform .15s ease,
    filter .2s ease,
    background-color .15s ease,
    color .15s ease;
}
#sec-2 .ts-block .btn::before{
  content:""; position:absolute; inset:0;
  background:#008205; border-radius:0; z-index:-1; /* placa atrás */
}
#sec-2 .ts-block .btn:hover{
  transform: translateY(-1px); background:#00BA06;
}
#sec-2 .ts-block .btn:active{
  transform: translateY(0); color:#fdfdfd;
}
#sec-2 .ts-block .btn:focus-visible{
  outline:2px solid #ffffff33; outline-offset:2px;
}

/* ----- Responsivo (SEC-2) ----- */
@media (max-width: 1024px){
  #sec-2 .ts-wrap{ grid-template-columns: 1fr; }
  #sec-2 .ts-wrap::before,
  #sec-2 .ts-wrap::after{ content:none; }

  #sec-2 .ts-grid{
    grid-template-columns: 1fr; align-items:start; row-gap:28px;
  }

  /* zera os nudges no mobile */
  #sec-2 .ts-left{ transform:none; }

  #sec-2 .ts-panel{
    background:
      linear-gradient(rgba(var(--ts-right-tint), var(--ts-right-dim)),
                      rgba(var(--ts-right-tint), var(--ts-right-dim))),
      var(--ts-right-img, none) center/cover no-repeat, var(--bg-0);
    min-height:280px;
    padding: clamp(28px, 5.5vw, 56px);
    justify-content:flex-start;
    padding-left: clamp(28px, 6vw, 48px);
  }
  #sec-2 .ts-panel .ts-title{ transform: none; }
}
@media (max-width: 680px){
  #sec-2 .ts-block .btn{
    width:100%; justify-self:stretch; text-align:center;
  }
}


/* =======================================================================
   SECTION 3: CURSOS E PALESTRAS
   ======================================================================= */
#sec-3.cp{
  display:block;
  background: var(--bg-0);
  color:#111;

  /* paleta local */
  --cp-panel: #cfcfd1;        /* placa do vídeo */
}

#sec-3 .cp-wrap{
  width: calc(100vw - (var(--page-gutter) * 2));
  height: 100dvh;                       /* ocupa a janela (abaixo da topbar) */
  margin-inline: auto;
  position: relative;
}

/* ---- scroller interno (só esta seção rola) ---- */
#sec-3 .cp-scroll{
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;

  /* esconder a barra de rolagem */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge antigo */
  margin-top: -40px;
}
#sec-3 .cp-scroll::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

/* cada “tela” ocupa a viewport e centraliza no Y (desktop) */
#sec-3 .cp-screen{
  min-height: 100%;
  display: grid;
  align-content: center;                 /* centraliza verticalmente */
  justify-items: center;
  padding-block: clamp(36px, 7vh, 88px);
  scroll-snap-align: start;
}

/* grid: texto travado e vídeo ocupa o restante */
#sec-3 .cp-row{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(420px, 520px);
  column-gap: clamp(40px, 5vw, 72px);
  align-items: center;
  justify-content: center;                 /* ajuste fino do layout */
}

/* tela 2 espelhada (vídeo à esquerda) */
#sec-3 .cp-row--b{
  grid-template-columns: 1fr minmax(420px, 520px);
}

/* coluna de texto */
#sec-3 .cp-col--text{ display:grid; row-gap: 18px; margin-left: 20px; }
#sec-3 .cp-block{ display:grid; grid-auto-rows:max-content; row-gap:12px; }

#sec-3 .cp-block-title{
  margin: 0 0 2px 0; font-weight: 800; font-size: 1.18rem; line-height: 1.2;
  margin-left: -40px;
}
#sec-3 .cp-lead{
  margin: 8px 0 2px; line-height: 1.5; font-size: 1rem; max-width: 520px;
  margin-left: -20px; padding-top: 20px;
}
#sec-3 .cp-desc{
  margin: 0; line-height: 1.5; font-size: .95rem; opacity: .96; max-width: 520px;
}
#sec-3 .cp-subtitle{
  margin: 14px 0 6px; font-weight: 800; font-size: .98rem; margin-left: -20px;
}
#sec-3 .cp-list{ margin: 0 0 8px 0; padding-left: 18px; }
#sec-3 .cp-list li{ margin-bottom: .42rem; }

/* ações */
#sec-3 .cp-actions{ display:flex; gap:14px; margin-top:10px; }

/* ----- Botões (verde unificado) ----- */
#sec-3 .cp-btn,
#sec-3 .cp-actions .btn{
  justify-self: start;
  padding: 12px 22px;                 /* “gap” lateral sutil */
  background: #00A305;                /* base */
  color: #d8d8d8;                     /* texto normal */
  border: 0; border-radius: 0;        /* mantém a estética plana do site */
  font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .02em;
  position: relative; cursor: pointer;
  transition:
    transform .15s ease,
    filter .2s ease,
    background-color .15s ease,
    color .15s ease;
}
#sec-3 .cp-btn::before,
#sec-3 .cp-actions .btn::before{
  content:""; position:absolute; inset:0; background:#008205; z-index:-1; /* placa atrás */
}
#sec-3 .cp-btn:hover,
#sec-3 .cp-actions .btn:hover{
  transform: translateY(-1px); background:#00BA06;
}
#sec-3 .cp-btn:active,
#sec-3 .cp-actions .btn:active{
  transform: translateY(0); color:#fdfdfd;
}
#sec-3 .cp-btn:focus-visible,
#sec-3 .cp-actions .btn:focus-visible{
  outline:2px solid #ffffff33; outline-offset:2px;
}

/* painel de vídeo */
#sec-3 .cp-col--video{
  background: var(--cp-panel);
  padding: 0;
  display:flex; align-items:center; justify-content:center;
  justify-self: end;                     /* encosta no lado externo */
}
#sec-3 .cp-row--b .cp-col--video{ justify-self: start; } /* espelhado */

#sec-3 .cp-video{
  width: min(900px, 60vw);
  aspect-ratio: 16/9;
  position: relative;
  background: rgba(0,0,0,.06);
  box-shadow: inset 0 0 0 16px rgba(0,0,0,.045);
}
#sec-3 .cp-video .cp-iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* hint fixo no fundo do scroller */
#sec-3 .cp-hint{
  position: absolute; left: 50%; bottom: 20px; translate: -50% 0;
  pointer-events: none; opacity: .7;
}

/* nudges específicos */
#sec-3 .cp-row--a .cp-col--text{ transform: translateX(20px); }
#sec-3 .cp-row--b .cp-col--text{ transform: translateX(-120px); }
#sec-3 .cp-row--a .cp-col--video{ transform: translateX(-100px); }

/* ----- Responsivo (SEC-3) ----- */
@media (max-width: 1024px){
  #sec-3 .cp-screen{
    align-content: start;     /* no mobile, conteúdo começa do topo */
    padding-block: clamp(24px, 4vh, 40px);
  }
  #sec-3 .cp-row,
  #sec-3 .cp-row--b{
    grid-template-columns: 1fr;
    row-gap: 28px;
    align-items: start;
    margin-top: 0;
  }
  #sec-3 .cp-col--video{ justify-self: stretch; }
  #sec-3 .cp-video{
    width: 100%; max-width: 100%;
    box-shadow: inset 0 0 0 12px rgba(0,0,0,.045);
  }

  /* zera nudges no mobile */
  #sec-3 .cp-row--a .cp-col--text,
  #sec-3 .cp-row--b .cp-col--text,
  #sec-3 .cp-row--a .cp-col--video{
    transform: none;
  }

  /* botões ocupam a linha toda se quiser */
  #sec-3 .cp-actions{ flex-wrap:wrap; }
  #sec-3 .cp-actions .cp-btn{ flex:1 1 100%; text-align:center; }
}

/* ---- VARIANTES COM SUFIXO "2" — para a TELA 2 ----
   (mesmos atributos para permitir estilização independente)
---------------------------------------------------------------- */
#sec-3 .cp-screen2{
  min-height: 100%;
  display: grid; align-content: center; justify-items: center;
  padding-block: clamp(36px, 7vh, 88px);
  scroll-snap-align: start;
}

/* grid base */
#sec-3 .cp-row2{
  width: 100%;
  display: grid;
  grid-template-columns: minmax(420px, 520px) 1fr;
  column-gap: clamp(40px, 5vw, 72px);
  align-items: center; justify-content: center;
}

/* espelhado (vídeo à esquerda) */
#sec-3 .cp-row--b2{
  grid-template-columns: 1fr minmax(420px, 520px);
}

/* colunas e bloco */
#sec-3 .cp-col--text2{ display:grid; row-gap: 18px; margin-left: 20px; }
#sec-3 .cp-block2{ display:grid; grid-auto-rows:max-content; row-gap:12px; }

/* tipografia e textos */
#sec-3 .cp-block-title2{
  margin: 0 0 2px 0; font-weight: 800; font-size: 1.18rem; line-height: 1.2;
  margin-left: -40px;
}
#sec-3 .cp-lead2{
  margin: 8px 0 2px; line-height: 1.5; font-size: 1rem; max-width: 520px;
  margin-left: -20px; padding-top: 20px;
}
#sec-3 .cp-desc2{
  margin: 0; line-height: 1.5; font-size: .95rem; opacity: .96; max-width: 520px;
}
#sec-3 .cp-subtitle2{
  margin: 14px 0 6px; font-weight: 800; font-size: .98rem;
  padding-top: 20px; margin-left: -20px;
}

/* listas */
#sec-3 .cp-list2{ margin: 0 0 8px 0; padding-left: 18px; }
#sec-3 .cp-list2 li{ margin-bottom: .42rem; }

/* ações */
#sec-3 .cp-actions2{ display:flex; gap:14px; margin-top:10px; }

/* botões */
#sec-3 .cp-btn2,
#sec-3 .cp-actions2 .btn2{
  justify-self: start;
  padding: 12px 22px;
  background: #00A305; color: #d8d8d8;
  border: 0; border-radius: 0;
  font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .02em;
  position: relative; cursor: pointer;
  transition:
    transform .15s ease,
    filter .2s ease,
    background-color .15s ease,
    color .15s ease;
}
#sec-3 .cp-btn2::before,
#sec-3 .cp-actions2 .btn2::before{
  content:""; position:absolute; inset:0; background:#008205; z-index:-1;
}
#sec-3 .cp-btn2:hover,
#sec-3 .cp-actions2 .btn2:hover{
  transform: translateY(-1px); background:#00BA06;
}
#sec-3 .cp-btn2:active,
#sec-3 .cp-actions2 .btn2:active{
  transform: translateY(0); color:#fdfdfd;
}
#sec-3 .cp-btn2:focus-visible,
#sec-3 .cp-actions2 .btn2:focus-visible{
  outline:2px solid #ffffff33; outline-offset:2px;
}

/* painel de vídeo */
#sec-3 .cp-col--video2{
  background: var(--cp-panel);
  padding: 0;
  display:flex; align-items:center; justify-content:center;
  justify-self: end; 
}
#sec-3 .cp-row--b2 .cp-col--video2{ justify-self: start; }

/* vídeo */
#sec-3 .cp-video2{
  width: min(900px, 60vw);
  aspect-ratio: 16/9;
  position: relative;
  background: rgba(0,0,0,.06);
  box-shadow: inset 0 0 0 16px rgba(0,0,0,.045);
}
#sec-3 .cp-video2 .cp-iframe2{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* hint opcional duplicado */
#sec-3 .cp-hint2{
  position: absolute; left: 50%; bottom: 20px; translate: -50% 0;
  pointer-events: none; opacity: .7;
}

/* nudges específicos */
#sec-3 .cp-row--a2 .cp-col--text2{ transform: translateX(20px); }
#sec-3 .cp-row--b2 .cp-col--text2{ transform: translateX(-120px); }
#sec-3 .cp-row--a2 .cp-col--video2{ transform: translateX(-100px); }

/* responsivo (sufixo 2) */
@media (max-width: 1024px){
  #sec-3 .cp-screen2{
    align-content: start; padding-block: clamp(24px, 4vh, 40px);
  }
  #sec-3 .cp-row2,
  #sec-3 .cp-row--b2{
    grid-template-columns: 1fr;
    row-gap: 28px; align-items: start; margin-top: 0;
  }
  #sec-3 .cp-col--video2{ justify-self: stretch; }
  #sec-3 .cp-video2{
    width: 100%; max-width: 100%;
    box-shadow: inset 0 0 0 12px rgba(0,0,0,.045);
  }

  /* zera nudges no mobile */
  #sec-3 .cp-row--a2 .cp-col--text2,
  #sec-3 .cp-row--b2 .cp-col--text2,
  #sec-3 .cp-row--a2 .cp-col--video2{
    transform: none;
  }

  /* botões ocupam a linha toda */
  #sec-3 .cp-actions2{ flex-wrap:wrap; }
  #sec-3 .cp-actions2 .cp-btn2{ flex:1 1 100%; text-align:center; }
}

/* --- SEC-3: Lista em duas colunas (Desktop) --- */
#sec-3 .cp-list--cols-2 {
  columns: 2; /* Cria 2 colunas */
  -webkit-columns: 2;
  column-gap: clamp(32px, 5vw, 64px); /* Espaço entre as colunas */
  
  /* Evita que um item da lista quebre no meio */
  break-inside: avoid-column;
  -webkit-break-inside: avoid-column;
}

#sec-3 .cp-list--cols-2 li {
  break-inside: avoid-column;
  -webkit-break-inside: avoid-column;
}



/* =======================================================================
   SECTION 4: CONTATO
   ======================================================================= */
#sec-4.ct{
  background: var(--bg-1);
  color:#111;
}

.ct-wrap{
  width: calc(100vw - (var(--page-gutter) * 2));
  height: 100%;
  margin-inline: auto;

  display: grid; place-items: center;
  text-align: center; row-gap: 16px;
  position: relative; /* para o scroll-indicator */
}

.ct-title{
  margin: 0; font-weight: 800; letter-spacing: .02em;
  font-size: clamp(42px, 8vw, 92px);
  padding-top: 220px; color: #d8d8d8;
}

.ct-sub{
  margin: 0; font-size: .98rem; line-height: 1.45; max-width: 840px; opacity: .95;
  margin-top: -320px; color: #d8d8d8;
}

/* Botão (verde unificado) */
#sec-4.ct .ct-btn{
  justify-self: center;
  padding: 12px 22px;
  background: #00A305; color:#d8d8d8;
  border:0; border-radius:0;
  font-weight:700; font-size:.92rem; text-transform: uppercase; letter-spacing:.02em;
  position: relative; cursor:pointer;
  transition:
    transform .15s ease,
    filter .2s ease,
    background-color .15s ease,
    color .15s ease;
}
#sec-4.ct .ct-btn::before{
  content:""; position:absolute; inset:0; background:#008205; z-index:-1; /* placa atrás */
}
#sec-4.ct .ct-btn:hover{
  transform: translateY(-1px); background:#00BA06;
}
#sec-4.ct .ct-btn:active{
  transform: translateY(0); color:#fdfdfd;
}
#sec-4.ct .ct-btn:focus-visible{
  outline:2px solid #ffffff33; outline-offset:2px;
}

/* hint */
#sec-4.ct .scroll-indicator{
  position: absolute; left: 50%; bottom: 20px; translate: -50% 0; opacity: .7;
}

/* Fundo com imagem + overlay controlado via HTML */
#sec-4 .ct-bg{
  position: absolute; inset: 60px 0 0 0; /* cobre a área útil (abaixo da topbar) */
  z-index: 0; overflow: hidden; pointer-events: none; margin-top: -60px;
}
#sec-4 .ct-bg-img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
#sec-4 .ct-bg-overlay{
  position: absolute; inset: 0; background: #000; /* opacidade controlada no HTML */
}

/* mantém o conteúdo acima do fundo */
#sec-4 .ct-wrap{ position: relative; z-index: 1; }


/* =======================================================================
   EFEITOS / SOBREPOSIÇÕES GERAIS
   ======================================================================= */

/* INTRO: efeitos de saída + ciclo */
.intro-right.fadeout{
  opacity: 0; transition: opacity 500ms ease; pointer-events: none;
}
.intro .logo-stack{
  transition: transform 600ms ease, left 600ms ease, top 600ms ease;
  will-change: left, top, transform;
}
/* fase 1: voa para o centro e cresce */
.intro .logo-stack.centered{
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(1.4); /* 1º zoom */
  margin-left: 0; z-index: 30;
}
/* fase 2: já no centro, dá um zoom extra */
.intro .logo-stack.centered.zoomed{
  transform: translate(-50%, -50%) scale(1.9); /* 2º zoom */ transition: transform 450ms ease;
}
/* overlay para “apagar” a tela */
.intro-fader{
  position: fixed; inset: 0; background: #000;
  opacity: 0; pointer-events: none; transition: opacity 700ms ease; z-index: 40;
}
.intro-fader.show{ opacity: 1; }

/* Topbar transparente na intro */
.topbar{
  transition: background-color .35s ease, border-color .35s ease; /* mantém padrão */
}
.topbar.is-transparent{
  background-color: transparent; border-color: transparent;
}
.topbar .nav a{
  transition: color .35s ease, opacity .35s ease;
}
.topbar.is-transparent .nav a{
  color: #d8d8d8; opacity: 1; /* sem efeito “apagado” */
}
.topbar.is-transparent .nav a.is-active::after{ background: #d8d8d8; }
.topbar .brand{ transition: opacity .35s ease; }
.topbar.is-transparent .brand{ opacity: 0; pointer-events: none; }

/* Faz a intro NÃO criar 'containing block' para o vídeo fixo */
.section.intro,
.section.intro.active{ transform: none; } /* <video> fixed cobre a janela */

/* reforço do transparente (se alguma regra ganhar no cascade) */
.topbar.is-transparent{
  background: transparent; border-bottom: 1px solid transparent;
}

/* Overlay de título da seção */
.section-title-overlay{
  position: fixed; inset: 60px 0 0 0; /* não cobre a topbar */
  background: #000; color: #fff;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; z-index: 60; transition: opacity 280ms ease;
}
.section-title-overlay.show{ opacity: 1; }
.section-title-overlay.fadeout{ opacity: 0; }
.section-title-overlay .sto-title{
  margin: 0; font-weight: 800; letter-spacing: .02em;
  font-size: clamp(28px, 3.6vw, 56px);
  opacity: 0; transform: translateY(8px);
}


/* =======================================================================
   SEC-1: FUNDO COM IMAGEM + OVERLAY CONTROLADO VIA HTML
   ======================================================================= */
#sec-1 .cf-bg{
  position: absolute; inset: 60px 0 0 0; /* cobre a área útil (abaixo da topbar) */
  z-index: 0; overflow: hidden; pointer-events: none; margin-top: -60px; /* alinha topo (como sec-4) */
}
#sec-1 .cf-bg-img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
#sec-1 .cf-bg-overlay{
  position: absolute; inset: 0; background: #000; /* opacidade vem do HTML */
}
/* mantém o conteúdo acima do fundo */
#sec-1 .cf-wrap{ position: relative; z-index: 1; }


/* =======================================================================
   SIMPLE ANIME — BASE: DROP-DOWN POR ELEMENTO
   ======================================================================= */
.section.sa-hold [data-anime]{
  opacity: 0; transform: translateY(-10px); /* drop-down: começa um pouco acima */
  filter: blur(.5px);
}
[data-anime].anime{
  opacity: 1; transform: translateY(0); filter: blur(0);
  transition:
    opacity 420ms cubic-bezier(.2,.8,.2,1),
    transform 420ms cubic-bezier(.2,.8,.2,1),
    filter 420ms cubic-bezier(.2,.8,.2,1);
}
/* você pode ajustar a duração por elemento via CSS var opcional */
[data-anime][data-sa-dur].anime{ transition-duration: attr(data-sa-dur ms); }


/* =======================================================================
   MENU: CORES SÓ NA PÁGINA INICIAL (INTRO)
   ======================================================================= */
.topbar.is-transparent .nav a{
  color: #6e6e6e; /* links NÃO ativos */
  opacity: 1;     /* legibilidade no vídeo */
}
.topbar.is-transparent .nav a:hover{ color: #d8d8d8; }      /* hover */
.topbar.is-transparent .nav a.is-active{ color: #f9a631; }  /* ativo */
.topbar.is-transparent .nav a.is-active::after{ background: #f9a631; } /* sublinhado ativo */


/* SEC-1 — Consultoria (CF) */
#sec-1 .cf-title{        font-size: var(--f-h1);  }
#sec-1 .cf-card-title{   font-size: var(--f-h2);  }
#sec-1 .cf-subtitle{     font-size: var(--f-h3);  }
#sec-1 .cf-lead{         font-size: var(--f-lead);}
#sec-1 .cf-card-body li{ font-size: var(--f-body);}
#sec-1 .cf-card .btn{    font-size: var(--f-btn); }

/* SEC-2 — Terceiro Setor */
#sec-2 .ts-title{        font-size: var(--f-h1);  }
#sec-2 .ts-block-title{  font-size: var(--f-h2);  }
#sec-2 .ts-subtitle{     font-size: var(--f-h3);  }
#sec-2 .ts-lead{         font-size: var(--f-lead);}
#sec-2 .ts-list li{      font-size: var(--f-body);}
#sec-2 .ts-block .btn{   font-size: var(--f-btn); }

/* SEC-3 — Cursos & Palestras (CORRIGIDO) */
#sec-3 .cp-block-title,
#sec-3 .cp-block-title2 {  font-size: var(--f-h2);  }
#sec-3 .cp-lead,
#sec-3 .cp-lead2 {         font-size: var(--f-lead);}
#sec-3 .cp-desc,
#sec-3 .cp-desc2 {         font-size: var(--f-body);} /* <-- CORRIGIDO */
#sec-3 .cp-subtitle,
#sec-3 .cp-subtitle2 {     font-size: var(--f-h3);  }
#sec-3 .cp-list li,
#sec-3 .cp-list2 li {      font-size: var(--f-body);} /* <-- CORRIGIDO */
#sec-3 .cp-btn,
#sec-3 .cp-actions .btn,
#sec-3 .cp-btn2,
#sec-3 .cp-actions2 .btn2 { font-size: var(--f-btn); }

/* SEC-4 — Contato */
#sec-4 .ct-title{        font-size: var(--f-h1);  }
#sec-4 .ct-sub{          font-size: var(--f-lead);}
#sec-4 .ct-btn{          font-size: var(--f-btn); }

/* (opcional) ajuste fino para telas muito pequenas */
@media (max-width: 360px){
  :root{
    --f-h1:   clamp(32px, 9vw, 54px); /* (32–54 px) */
    --f-h2:   1.08rem;                /* (~17.3 px) */
    --f-h3:   0.95rem;                /* (~15.2 px) */
    --f-lead: 0.95rem;                /* (~15.2 px) */
    --f-body: 0.90rem;                /* (~14.4 px) */
    --f-btn:  0.88rem;                /* (~14.1 px) */
  }
}


/* =======================================================================
   OVERRIDES / UTILITÁRIOS
   (Mantido conforme seu código original)
   SEC-3: rolagem horizontal com snap
   ======================================================================= */
#sec-3 .cp-scroll{
  /* de: overflow-y:auto → para horizontal */
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;                /* coloca as “telas” lado a lado */
  flex-flow: row nowrap;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* esconde barras (onde der) */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legado */
}
#sec-3 .cp-scroll::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

/* cada “tela” ocupa 100% da largura útil e alinha no snap */
#sec-3 .cp-screen{
  min-height: 100%;
  flex: 0 0 100%;
  scroll-snap-align: start;
  /* mantemos seu padding existente; remova se quiser mais “cheio” */
}

/* evita sobras verticais causadas por gaps originais */
@media (min-width: 1025px){
  #sec-3 .cp-row{ margin-top: 0; }
}








/* === SEC-3 (horizontal): vídeos visíveis, sem vazamento entre telas === */

/* 1) cada tela continua ocupando 100% e com snap forte */
#sec-3 .cp-screen,
#sec-3 .cp-screen2{
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* NÃO recortamos a tela inteira aqui para não ocultar conteúdo */
  overflow: visible;
}

/* 2) mover o recorte para o painel do vídeo + permitir encolher no grid */
#sec-3 .cp-col--video,
#sec-3 .cp-col--video2{
  min-width: 0;        /* grid item pode encolher (essencial!) */
  overflow: hidden;    /* recorte só do painel do vídeo */
  margin-right: 0;     /* remove a margem negativa que empurrava pra fora */
  justify-self: stretch; /* ocupa a coluna */
}

/* 3) neutralizar nudges que arremessavam elementos pra fora da tela */
#sec-3 .cp-row--a .cp-col--video,
#sec-3 .cp-row--a2 .cp-col--video2,
#sec-3 .cp-row--b .cp-col--text,
#sec-3 .cp-row--b2 .cp-col--text2{
  transform: none;
}

/* 4) largura dos vídeos: pode voltar ao 60vw, mas sem ultrapassar a coluna */
#sec-3 .cp-video,
#sec-3 .cp-video2{
  width: min(900px, 60vw);
  max-width: 100%;      /* nunca maior que a coluna */
  box-sizing: border-box;
}

/* 5) o scroller segue horizontal (garantia) */
#sec-3 .cp-scroll{
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-flow: row nowrap;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

/* 6) pequenos respiros sem empurrar nada pra fora */
#sec-3 .cp-row,
#sec-3 .cp-row2{
  width: 100%;
  padding-inline: clamp(16px, 2vw, 24px);
}


/* === SEC-3: vídeo ocupa toda a coluna, sem barras laterais === */
#sec-3 .cp-col--video,
#sec-3 .cp-col--video2{
  background: transparent;   /* some com a placa cinza do painel */
}

#sec-3 .cp-video,
#sec-3 .cp-video2{
  width: 100%;               /* preenche 100% da coluna */
  max-width: none;           /* não trava em 900px */
  box-shadow: none;          /* remove a moldura interna */
}


/* === SEC-3 / TELA 2: garante vídeo visível e colado na coluna === */
#sec-3 .cp-col--video2{
  justify-self: stretch !important;  /* ocupa a coluna inteira */
  margin: 0 !important;              /* remove o -20px que empurrava o bloco */
  background: transparent !important;
}

#sec-3 .cp-video2{
  width: 100% !important;            /* nada de largura fixa */
  max-width: none !important;
  aspect-ratio: 16/9;                /* mantém proporção */
  box-shadow: none;                   /* sem “moldura” que parecia barra */
}

#sec-3 .cp-video2 .cp-iframe2{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* (opcional) se quiser manter a moldura sutil, use: */
/* #sec-3 .cp-video2{ box-shadow: inset 0 0 0 8px rgba(0,0,0,.035); } */

/* --- SEC-4: posiciona o botão no centro + deslocamento controlável --- */
#sec-4 { 
  --ct-btn-offset: 80px;         /* ajuste aqui (px, rem, etc.) */
}

#sec-4.ct .ct-wrap{
  position: relative;             /* âncora pro posicionamento absoluto do botão */
}

#sec-4.ct .ct-btn{
  margin: 0 !important;
  justify-self: center;
  padding: 12px 22px;
  background: #00A305; color:#d8d8d8;
  border: 0; border-radius: 0;
  font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .02em;
  cursor: pointer; position: absolute;   /* (já definido acima) */
  transition:
    transform .15s ease,
    filter .2s ease,
    background-color .15s ease,
    color .15s ease;
  z-index: 1; /* garante que fique acima de fundos/overlays da seção */
}

/* (opcional) reduz o offset em telas muito baixas */
@media (max-height: 700px){
  #sec-4 { --ct-btn-offset: 120px; }
}




/* === SEC-4: centralização com offsets ajustáveis === */
#sec-4{
  /* ajuste fino a partir do centro da seção (abaixo da topbar) */
  --ct-sub-offset: -20px;   /* sobe 60px a partir do centro */
  --ct-btn-offset: 40px;   /* 200px ABAIXO do centro */
}

#sec-4 .ct-wrap{ position: relative; }

/* Texto */
#sec-4 .ct-sub{
  margin: 0 !important;
  position: absolute;
  left: 50%;
  top: 50%;
  /* centro exato + offset vertical configurável */
  transform: translate(-50%, calc(-50% + var(--ct-sub-offset)));
  text-align: center;
  max-width: 840px;
  z-index: 1;
  /* mantém sua tipografia */
  font-size: .98rem;
  line-height: 1.45;
  color: #d8d8d8;
}

/* Botão */
#sec-4.ct .ct-btn{
  margin: 0 !important;       /* remove o hack anterior */
  position: absolute;
  text-align: center;
  top: calc(50% + var(--ct-btn-offset)); /* abaixo do centro */
  z-index: 1;                  /* acima do fundo/overlay */
  /* seus estilos existentes do botão já estão definidos acima */
}

/* Opcional: em telas muito baixas, reduzir offsets */
@media (max-height: 700px){
  #sec-4{
    --ct-sub-offset: -30px;
    --ct-btn-offset: 140px;
  }
}












/* =========================================================
   MOBILE (até ~768px): menu hambúrguer + ajustes da intro
   ========================================================= */
@media (max-width: 768px){

  /* Topbar mais compacta */
  .topbar{ height:64px; }
  .section{ inset:64px 0 0 0; }         /* compensa a nova topbar */
  .anchor-alias{ top:-64px; }            /* compensação de âncora */

  .topbar-inner{
    width: min(100%, 94vw);
    gap: 12px;
  }
  .brand img{ height: 40px; }            /* logo menor */

  /* ========= Botão hambúrguer ========= */
  .nav-toggle{
    appearance: none;
    border: 0; background: transparent; padding: 8px;
    width: 44px; height: 44px; border-radius: 6px;
    display: grid; place-items: center; cursor: pointer;
  }
  .nav-toggle:focus-visible{ outline: 2px solid #0000001a; outline-offset: 2px; }

  .nav-toggle .nt-bars{
    width: 22px; height: 16px; position: relative;
  }
  .nav-toggle .nt-bars::before,
  .nav-toggle .nt-bars::after,
  .nav-toggle .nt-bar{
    content:""; position: absolute; left:0; right:0; height:2px; background:#e8e8e8;
    transition: transform .25s ease, opacity .2s ease, background-color .25s ease;
  }
  .nav-toggle .nt-bar{ top:7px; }
  .nav-toggle .nt-bars::before{ top:0; }
  .nav-toggle .nt-bars::after{ bottom:0; }

  /* estado “X” */
  body.menu-open .nav-toggle .nt-bar{ opacity:0 }
  body.menu-open .nav-toggle .nt-bars::before{
    transform: translateY(7px) rotate(45deg);
  }
  body.menu-open .nav-toggle .nt-bars::after{
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ========= Painel do menu ========= */
  .nav{
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid #e7e7ea;
    transform: translateY(-8px);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 60;
  }
  body.menu-open .nav{
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }

  /* evita scroll do fundo com menu aberto */
  body.menu-open{ overflow: hidden; }

  /* lista vertical com bons alvos de toque */
  .nav .menu{
    display: grid; gap: 4px; padding: 8px 12px; margin: 0;
  }
  .nav .menu li{ list-style: none; }
  .nav a{
    display: block;
    padding: 14px 10px;
    font-size: 1rem; font-weight: 700; letter-spacing: .02em;
    color:#111; opacity: 1;
  }
  .nav a.is-active{ color: #f9a631; }
  .nav a.is-active::after{ content: none; }  /* sem sublinhado animado no mobile */
  .topbar.is-transparent .nav a{ color:#111; } /* cores consistentes no painel */

  /* ========= Intro (coluna única, tipografia e espaçamentos) ========= */
  .intro-inner{
    grid-template-columns: 1fr;         /* 1 coluna */
    row-gap: 16px;
    padding-inline: 16px;
    align-items: start;
  }

  .logo-stack{
    order: -1;                          /* logo primeiro */
    margin: 0 auto;
    padding-bottom: 16px;
  }
  .logo-letter{
    font-size: clamp(56px, 20vw, 88px);
    letter-spacing: 1px;
  }

  .hero-words{ height: auto; min-height: 32vh; }
  .word{
    position: static; transform: none; text-align: center; white-space: normal;
    font-size: clamp(28px, 8vw, 40px);
    margin: 6px 0;
  }

  .about{
    max-width: 92vw; 
    margin-inline: auto;
    font-size: .98rem; 
    line-height: 1.55;
    padding-top: 40px;
  }

  .scroll-indicator{ bottom: 12px; }

  /* gutters menores em telas pequenas */
  :root{ --page-gutter: clamp(12px, 5vw, 24px); }
}

/* Botão hambúrguer visível só no mobile; no desktop, escondemos */
@media (min-width: 769px){
  .nav-toggle{ display: none; }
}



/* =========================================================
   SEC-3: SETAS LATERAIS (SOBREPÕE ESTILOS PADRÃO)
   Posiciona e anima os botões criados pelo cp-arrows.js
   ========================================================= */

/* Alvo: os botões com as classes que o cp-arrows.js cria */
#sec-3 .cp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; 
  height: 56px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%; /* Botão redondo */
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  /* Adiciona o ícone da seta via SVG (embutido) */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

/* Seta da Esquerda */
#sec-3 .cp-arrow--left {
  left: 24px;
  /* SVG da seta para a esquerda (cor #111, opacidade 0.6) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z' fill='%23111111' opacity='0.6'/%3E%3C/svg%3E");
}

/* Seta da Direita */
#sec-3 .cp-arrow--right {
  right: 24px;
  /* SVG da seta para a direita (cor #111, opacidade 0.6) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.172 12.0007L8.22224 7.05093L9.63645 5.63672L16.0004 12.0007L9.63645 18.3646L8.22224 16.9504L13.172 12.0007Z' fill='%23111111' opacity='0.6'/%3E%3C/svg%3E");
}

/* Remove o texto "Tela anterior/próxima" que o JS adiciona */
#sec-3 .cp-arrow .vh {
  display: none;
}

/* Efeito de HOVER */
#sec-3 .cp-arrow:hover {
  background-color: #f9a631; /* Cor laranja no hover */
  border-color: #f9a631;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%) scale(1.05); /* Leve pulo no hover */
}

/* Muda a cor da seta (SVG) no hover */
#sec-3 .cp-arrow--left:hover {
   /* SVG da seta para a esquerda (cor #FFFFFF, opacidade 1) */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z' fill='%23FFFFFF' opacity='1'/%3E%3C/svg%3E");
}
#sec-3 .cp-arrow--right:hover {
   /* SVG da seta para a direita (cor #FFFFFF, opacidade 1) */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.172 12.0007L8.22224 7.05093L9.63645 5.63672L16.0004 12.0007L9.63645 18.3646L8.22224 16.9504L13.172 12.0007Z' fill='%23FFFFFF' opacity='1'/%3E%3C/svg%3E");
}


/* ANIMAÇÃO "PULSANTE" PARA CHAMAR ATENÇÃO */
@keyframes cpPulse {
  0% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.05); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); }
  100% { transform: translateY(-50%) scale(1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
}

/* Aplica a animação apenas às setas que estão visíveis */
#sec-3 .cp-arrow[style*="display: block;"],
#sec-3 .cp-arrow:not([style*="display: none;"]) {
   animation: cpPulse 1.5s infinite ease-in-out;
}

/* As setas devem desaparecer no mobile (garantia) */
@media (max-width: 768px) {
  #sec-3 .cp-arrow {
    display: none !important;
  }
}



/* =========================================================
   SOBRE (SEC-0): CONTEÚDO ADICIONAL
   ========================================================= */

/* 1. Esconde o bloco "Sobre" por padrão */
#about-vilimar {
  display: none;
  
  /* Adiciona um espaçamento e um divisor */
  margin-top: 24px; 
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* 2. Mostra o bloco quando a sec-0 tiver a classe .is-showing-about */
#sec-0.is-showing-about #about-vilimar {
  display: block;
}




/* =========================================================
   SOBRE (SEC-0): CONTEÚDO ADICIONAL E SCROLL (COM FADE-IN)
   ========================================================= */

/* 1. O container "Sobre" (com o scroll) fica escondido */
#about-sobre {
  display: none;
  font-size: 1.02rem; /* Tamanho da fonte da intro */
  line-height: 1.6;
  color: #d8d8d8;     /* Cor da fonte da intro */
}

/* 2. O container "Início" (parágrafo original) fica visível */
#about-inicio {
  display: block;
}

/* 3. QUANDO "SOBRE" ESTIVER ATIVO... */
#sec-0.is-showing-about #about-sobre {
  display: block; /* ...mostra o container "Sobre" */
}
#sec-0.is-showing-about #about-inicio {
  display: none; /* ...esconde o parágrafo "Início" */
}

/* 4. O container de scroll (Sua solução) - AGORA COM ANIMAÇÃO */
/* 4. O container de scroll (Sua solução) - AGORA COM ANIMAÇÃO */
.about-scroll-content {
  /* Defina a altura máxima */
  max-height: 480px; /* <-- Altura ajustada */
  overflow-y: auto; /* A mágica do scroll interno */
  padding-right: 15px; /* Espaço para a barra de rolagem */
  text-align: left;

  /* --- EFEITO FADE-IN (ESTADO INICIAL) --- */
  opacity: 0;
  filter: blur(2px);
  transform: translateY(10px);
  /* --- TEMPOS AJUSTADOS PARA 2 SEGUNDOS --- */
  transition: opacity 2000ms ease 400ms, /* 2000ms duração, 400ms delay */
              transform 2000ms ease 400ms,
              filter 2000ms ease 400ms;
  /* --- FIM EFEITO --- */
}

/* 5. ESTADO FINAL DO FADE-IN (quando #about-sobre está visível) */
#sec-0.is-showing-about .about-scroll-content {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* 6. Estilização da barra de rolagem (bônus - sem alterações) */
.about-scroll-content::-webkit-scrollbar {
  width: 8px;
}
.about-scroll-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.about-scroll-content::-webkit-scrollbar-thumb {
  background-color: var(--brand, #f9a631); /* Cor laranja */
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.about-scroll-content { /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--brand, #f9a631) rgba(0, 0, 0, 0.2);
}

/* 7. Estilos da tipografia interna do "Sobre" (com mais espaçamento) */
.about-scroll-content h2 {
  font-size: 1.2rem;
  color: var(--brand, #f9a631); /* Cor laranja */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 24px 0; /* Aumentado de 16px */
}
.about-scroll-content h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 36px 0 16px 0; /* Aumentado top de 24px, bottom de 12px */
}
.about-scroll-content p {
  margin: 0 0 20px 0; /* Aumentado de 16px */
  opacity: 0.9;
}
.about-scroll-content ul {
  list-style-type: disc;
  padding-left: 24px;   /* Leve aumento */
  margin: 0 0 24px 0; /* Aumentado de 16px */
}
.about-scroll-content li {
  margin-bottom: 12px; /* Aumentado de 8px */
  padding-left: 6px;   /* Leve aumento */
  opacity: 0.9;
}
.about-scroll-content li strong {
  color: #fff;
  font-weight: 800;
}



/* =========================================================
   CONEXÃO COM O THEME.CSS
   ========================================================= */

/* --- Aplica as Imagens de Fundo --- */
#sec-1 .cf-panel {
  --cf-left-img: var(--image-bg-sec1);
  --cf-left-dim: var(--effect-dim-sec1);
}
#sec-2 {
  --ts-right-img: var(--image-bg-sec2);
  --ts-right-dim: var(--effect-dim-sec2);
}
.ct-bg {
  background-image: var(--image-bg-sec4);
  background-size: cover;
  background-position: center;
}
.ct-bg-overlay {
  opacity: var(--effect-dim-sec4);
}

/* --- Conecta as Cores --- */
:root {
  --brand: var(--color-brand);
  --bg-0: var(--color-bg-light);
  --bg-1: var(--color-bg-gray);
  --ink: var(--color-text-primary);
  --fade: var(--transition-default);
}