/* =========================================================
   TOPBAR / MENU — SMARTPHONE (≤ 768px)
   Compatível com o HTML:
   <header class="topbar"><div class="topbar-inner">
     <button class="nav-toggle"><span class="nt-bars"><span class="nt-bar"></span></span></button>
     <a class="brand"><img .../></a>
     <nav class="nav" id="primary-menu"><ul class="menu">...</ul></nav>
   </div></header>
   ========================================================= */
@media (max-width: 768px){

  /* ---- Barra fixa e altura compacta ---- */
  header.topbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    z-index: 60;
    display: flex;
    align-items: center;
  }

  /* Estado transparente (somente na sec-0, seu JS liga .is-transparent) */
  header.topbar.is-transparent{
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Estado sólido (sections 1,2,3,4) */
  header.topbar:not(.is-transparent){
    background: rgba(0,0,0,.98);
    border-bottom: 0;
    backdrop-filter: saturate(160%) blur(6px);
  }

  /* ---- Container interno ocupa 100% e distribui extremos ---- */
  header.topbar > .topbar-inner{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 16px;
    padding-right: 16px;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
  }

  /* ---- Logo (marca) à ESQUERDA ---- */
  .topbar-inner .brand{
    order: 1;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
  }
  /* se quiser trocar a arte no mobile, deixe esta linha;
     caso contrário, remova-a e use o src do HTML */
  .topbar-inner .brand img{
    content: url("/assets/logo-vpi2.svg"); 
    height: 28px;
    display: block;
    margin-left: -90px;
  }

  /* ---- Botão hambúrguer à DIREITA ---- */
  .topbar-inner .nav-toggle{
    order: 2;
    margin-left: auto;                   /* encosta na direita do padding */
    appearance: none;
    border: 0; background: transparent;
    width: 44px; height: 44px;
    border-radius: 6px;
    display: grid; place-items: center;
    padding: 8px;
    cursor: pointer;
  }
  .nav-toggle:focus-visible{ outline: 2px solid #0000001a; outline-offset: 2px; }

  /* Ícone (3 barras) */
  .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;
    transition: transform .25s ease, opacity .2s ease, background-color .25s ease;
  }
  .nav-toggle .nt-bar{ top:7px; }

  /* cor das barras por estado da topbar */
  .topbar.is-transparent .nav-toggle .nt-bars::before,
  .topbar.is-transparent .nav-toggle .nt-bars::after,
  .topbar.is-transparent .nav-toggle .nt-bar{
    background:#e8e8e8; /* claro sobre fundo de vídeo escuro */
  }
  .topbar:not(.is-transparent) .nav-toggle .nt-bars::before,
  .topbar:not(.is-transparent) .nav-toggle .nt-bars::after,
  .topbar:not(.is-transparent) .nav-toggle .nt-bar{
    background:#e8e8e8;
  }

  /* animação do “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 (dropdown) ---- */
  nav.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: 65;
  }
  body.menu-open nav.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;
    justify-items: end;                 /* links alinhados à direita */
  } /* ← não esqueça esta chave! */
  .nav .menu li{ list-style: none; width: 100%; }
  .nav a{
    display: block;
    padding: 14px 4px 14px 10px;
    font-size: 1rem; font-weight: 700; letter-spacing: .02em;
    color:#111;
    text-align: right;
  }
  .nav a.is-active{ color: #f9a631; }
  .nav a.is-active::after{ content: none; } /* sem sublinhado animado no mobile */

  /* Links dentro do painel quando a topbar está transparente (intro) */
  .topbar.is-transparent .nav a{ color:#111; }

  /* ---- Integração com a intro (sec-0) ---- */
  /* Quando a topbar for transparente, a sec-0 precisa subir por trás do header */
  .topbar.is-transparent + #viewport #sec-0.active{
    inset: 0 0 0 0 !important;
  }


  /* ---- Tokens & base ---- */
  :root{
    --page-gutter: 40px;                  /* margem lateral fixa */
    --sec-pad-y: clamp(28px, 6vh, 48px);  /* respiro vertical por section */
    --stack-gap: clamp(16px, 3.5vw, 24px);
    --list-gap:  0.56rem;
    --lead-mt:   8px;

    /* Intro: posicionamentos finos */
    --scroll-offset: 40px; /* SCROLL até a borda inferior */
    --about-gap:     60px; /* base do .about acima do SCROLL */
  }

  html, body{
    height: 100%;
    background: var(--bg-0);
    overscroll-behavior-y: contain; /* evita “rebote” global */
    touch-action: pan-y;            /* prioriza gesto vertical */
  }

  /* ---------------------------------------------
     Section: 1 bloco central, drop-down e scroll
     --------------------------------------------- */
  .section{
    /* ocupa a viewport abaixo da topbar e cresce conforme conteúdo */
    position: absolute; inset: 64px 0 0 0;
    width: 100%;
    min-height: calc(100dvh - 64px);
    height: auto;

    /* bloco único centralizado */
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    gap: 18px;

    /* respiro lateral e inferior */
    padding: 24px var(--page-gutter) 40px;

    overflow-y: hidden;               /* padrão: sem rolagem visível */
    -webkit-overflow-scrolling: touch;

    opacity: 0; pointer-events: none; transform: scale(.985);
    transition: opacity var(--fade), transform var(--fade);
    background: transparent;
  }
  .section.active{
    opacity: 1; pointer-events: auto; transform: scale(1);

    /* rola apenas a ativa — barra invisível */
    overflow-y: auto;
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE/Edge antigo */
    touch-action: pan-y;
  }
  .section.active::-webkit-scrollbar{ width:0; height:0; }

  /* Drop-down com SimpleAnime (se usado) */
  .section.sa-hold [data-anime]{ opacity: 0; transform: translateY(-10px); 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);
  }

  /* ---- Mídia universal (imagens / vídeos) ---- */
  img, video{ max-width: 100%; width: 100%; height: auto; display: block; }
  .cp-iframe, .cp-iframe2{ width: 100% !important; height: auto !important; aspect-ratio: auto !important; }


  /* =========================================================
     INTRO (Sec-0): coluna única + fundo em vídeo cobrindo a tela
     ========================================================= */
  .section.intro,
  .section.intro.active{ transform: none; }

  .intro-inner{
    position: relative;
    min-height: calc(100vh - 64px);   /* garante área útil cheia */
    display: grid; grid-template-columns: 1fr;
    row-gap: 16px; width: 100%; margin: 0;
    padding-inline: var(--page-gutter);
    align-items: start; z-index: 10;  /* acima do vídeo */
  }

  /* Fundo em vídeo “cover” */
  .intro-bg{
    position: fixed; inset: 0; width: 100vw; height: 100vh;
    background: #000; opacity: 0; transition: opacity 900ms ease;
    pointer-events: none; z-index: 0; overflow: hidden;
  }
  .section.intro.active .intro-bg{ opacity: 1; }
  .section.intro.active .intro-bg::after{ background: rgba(0,0,0,.88); content:""; position:absolute; inset:0; }

  .intro-bg-video{
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    object-fit: cover;
    object-position: center; /* seu ajuste de enquadramento */
    pointer-events: none;
    margin-top: -64px;
  }
  .intro-bg-yt{
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    height: 100vh; width: 177.78vh; min-width: 100vw;
    pointer-events: none; background: #000;
  }

  /* Logo, palavras e texto */
  .logo-stack{
    order: -1; margin: 0 auto; padding: 8px 0 10px;
    display: flex; align-items: flex-end; gap: 8px;
  }
  .logo-letter{ font-size: clamp(56px, 20vw, 88px); letter-spacing: 1px; opacity: 1; }
  .intro-right{ display: flex; flex-direction: column; gap: 12px; width: 100%; }
  .hero-words{ position: relative; height: auto; min-height: 32vh; display: grid; gap: 6px; }
  .word{
    position: static; transform: none; opacity: 1;
    white-space: normal; text-align: center;
    font-weight: 800; letter-spacing: 2px; font-size: clamp(28px, 8vw, 40px);
  }


  /* --- POSICIONAMENTO EXATO: SCROLL + ABOUT --- */
  .scroll-indicator{
    position: absolute;
    left: 50%;
    bottom: var(--scroll-offset);      /* 40px do rodapé */
    transform: translateX(-50%);
    translate: -50% 0;
    text-align: center;
    z-index: 11;
  }
  .about{
    position: absolute;
    left: 50%;
    bottom: calc(var(--scroll-offset) + var(--about-gap)); /* 40 + 60 = 100px */
    transform: translateX(-50%);        /* neutraliza qualquer nudge Y */
    margin: 0;
    max-width: min(640px, calc(100% - 2 * var(--page-gutter)));
    width: 100%;
    font-size: .98rem; line-height: 1.55;
  }
  /* zera hook de nudge, caso exista em desktop */
  .about{ --about-nudge: 0 !important; }



/* =========================================================
   SECTION 1 — Consultoria Financeira (CLONE DA SEC-2)
   ========================================================= */

  /* Garante que a section não tenha padding no topo e NÃO tenha overflow-x */
  #sec-1.section {
    padding-top: 0 !important;
    /* overflow-x: hidden; <--- REMOVIDO (era a causa do "empurrão") */
  }

  /* Grid principal */
  #sec-1 .cf-grid {
    row-gap: calc(var(--stack-gap) + 6px);
    padding-block: 0; /* Começa colado no topo */
    grid-template-columns: 1fr;
    align-items: start;
    padding-top: 0 !important;
  }
  
  #sec-1 .cf-grid > *:first-child {
    margin-top: 0 !important;
  }

  /* Coluna de conteúdo (clone da .ts-left) */
  #sec-1 .cf-right {
    row-gap: calc(var(--stack-gap) + 4px);
    transform: none;
    justify-items: center;
    width: 100%;
    padding-left: 0; /* Garante que não tenha padding-left */
  }

  /* Texto de introdução (clone da .ts-lead) */
  #sec-1 .cf-lead {
    margin-top: var(--lead-mt);
    line-height: 1.68;
    max-width: 60ch;
    padding-top: 60px;    /* Espaçamento igual da sec-2 */
    padding-bottom: 60px; /* Espaçamento igual da sec-2 */
  }

  /* Cards (clone do .ts-block) */
  #sec-1 .cf-card {
    row-gap: 14px;
    padding: 10px 0;
    width: 100%;
    margin-top: 0; /* Remove margens negativas */
  }

  /* Títulos e subtítulos (clone de .ts-block-title e .ts-subtitle) */
  #sec-1 .cf-card-title {
    padding-top: 0; /* Ajuste: sem padding-top de 40px */
    margin-top: 0;
    text-transform: uppercase;
  }
  
  #sec-1 .cf-subtitle {
    margin: 12px 0 8px 0;
    padding: 0;
    padding-top: 20px; /* Igual ao .ts-subtitle */
  }

  /* Lista de itens (clone da .ts-list) */
  #sec-1 .cf-card-body {
    padding-left: 18px; /* Indentação igual da sec-2 */
    margin: 0;
    grid-template-columns: 1fr; /* Garante 1 coluna */
    row-gap: 12px;
  }

  /* Botão (clone do .ts-block .btn) */
  #sec-1 .cf-card .btn {
    width: 100%;
    text-align: center;
    margin-top: 30px; /* Margem igual da sec-2 */
  }

  /* Banner (clone do .ts-panel) */
  #sec-1 .cf-panel {
    /* Esta é a regra do "banner full-bleed" que causa a rolagem, 
       idêntica à da sec-2 */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    
    /* Layout idêntico ao .ts-panel */
    height: var(--bannerH);
    min-height: 250px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px 20px;
    text-align: center;
  }

  /* Título do Banner (clone do .ts-title) */
  #sec-1 .cf-title {
    position: relative;
    margin: 0;
    color: #fff;
    line-height: 1.08;
    letter-spacing: .015em;
    z-index: 1;
    /* Removemos o "position: absolute" que estava quebrando */
  }

  /* Gradiente do Banner (idêntico) */
  #sec-1 .cf-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0 38%, transparent 60%);
    pointer-events: none;
  }
  
  /* Espaçador no final (clone do .ts-left::after) */
  #sec-1 .cf-right::after {
    content: "";
    display: block;
    height: 80px; /* Mesmo espaçador da sec-2 */
  }

  #sec-2 .ts-block-title {
  text-transform: uppercase; /* <-- Deixa o título "Sobre a Consultoria" maiúsculo */
  }

 
  /* =========================================================
     SECTION 2 — Terceiro Setor
     ========================================================= */
  #sec-2 .ts-grid{
    row-gap: calc(var(--stack-gap) + 6px);
    padding-block: var(--sec-pad-y);
    grid-template-columns: 1fr; align-items: start;
  }
  #sec-2 .ts-left{
    row-gap: calc(var(--stack-gap) + 4px); transform: none;
    justify-items: center;
  }
  #sec-2 .ts-lead{ margin-top: var(--lead-mt); line-height: 1.68; max-width: 60ch; padding-top: 60px; padding-bottom: 60px;}
  #sec-2 .ts-block{ row-gap: 14px; padding: 10px 0; width: 100%; }
  #sec-2 .ts-subtitle{ margin: 12px 0 8px 0; padding: 0; padding-top: 20px;}
  #sec-2 .ts-list{ padding-left: 18px; }
  #sec-2 .ts-panel{
    padding: clamp(28px, 6vw, 48px);
    min-height: 300px; width: 100%;
    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);
    display: grid; place-items: center; text-align: center;
  }
  #sec-2 .ts-title{ line-height: 1.08; letter-spacing: .015em; margin: 0; }
  #sec-2 .ts-title .ts-word{display: block; }
  
    /* tamanhos individuais (ajuste à vontade) */
  #sec-2 .ts-title .ts-w1{ font-size: 42px; font-weight: 800; text-align: center; } /* TERCEIRO */
  #sec-2 .ts-title .ts-w2{ font-size: 62px; font-weight: 800; text-align: center; } /* SETOR */

  #sec-2 .ts-block .btn{ width: 100%; text-align: center; margin-top: 30px; }

    /* Sec-2: espaço vazio ~80px após o conteúdo da coluna esquerda */
  #sec-2 .ts-left::after{
    content: "";
    display: block;
    height: 80px;   /* ajuste fino aqui */
  }


  /* =========================================================
     SECTION 3 — Cursos & Palestras
     ========================================================= */
  #sec-3 .cp-wrap{ padding-bottom: var(--sec-pad-y); padding-top: 0; }
  #sec-3 .cp-scroll{
    display: block !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    margin: 0; padding: 0;
  }
  #sec-3 .cp-screen, #sec-3 .cp-screen2{
    position: static; min-height: auto; flex: none;
    scroll-snap-align: none; scroll-snap-stop: normal;
    padding: 0;
    display: grid; align-content: start; justify-items: center;
    gap: 20px; margin-bottom: 28px;
  }
  #sec-3 .cp-row, #sec-3 .cp-row--b,
  #sec-3 .cp-row2, #sec-3 .cp-row--b2{
    display: grid; grid-template-columns: 1fr;
    row-gap: 24px; align-items: start; justify-items: stretch; width: 100%;
  }
  #sec-3 .cp-col--text, #sec-3 .cp-col--text2{ row-gap: clamp(14px, 4vw, 18px); margin: 0; }
  #sec-3 .cp-col--text { margin-top: 60px; }
  #sec-3 .cp-block, #sec-3 .cp-block2{ row-gap: 14px; }
  #sec-3 .cp-block-title, #sec-3 .cp-block-title2{ margin: 0 0 4px 0; line-height: 1.18; text-transform: uppercase; margin-left: -20px;}
  #sec-3 .cp-lead, #sec-3 .cp-lead2{ margin-top: var(--lead-mt); line-height: 1.6; }
  #sec-3 .cp-desc, #sec-3 .cp-desc2{ line-height: 1.6; margin-left: -20px;}
  #sec-3 .cp-subtitle, #sec-3 .cp-subtitle2{ margin: 14px 0 8px; padding-top: 12px; margin-left: -20px;}
  #sec-3 .cp-list li, #sec-3 .cp-list2 li{ margin-bottom: var(--list-gap); margin-left: -20px;}

  #sec-3 .cp-col--video, #sec-3 .cp-col--video2{
    background: transparent !important;
    padding: 0; margin: 0; overflow: hidden; min-width: 0; justify-self: stretch;
  }
  #sec-3 .cp-video, #sec-3 .cp-video2{
    width: 100% !important; max-width: none !important;
    aspect-ratio: 16/9; box-shadow: none !important; background: transparent;
  }

  #sec-3 .cp-actions, #sec-3 .cp-actions2{
    display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px;
  }
  #sec-3 .cp-actions .btn, #sec-3 .cp-actions2 .btn2,
  #sec-3 .cp-btn, .cp-btn2{ width: 100%; text-align: center; }


  /* =========================================================
     SECTION 4 — Contato
     ========================================================= */
  #sec-4 .ct-wrap{
    position: relative; z-index: 1;
    width: 100%;
    display: grid; place-items: center; text-align: center;
    row-gap: 12px;
    padding-block: clamp(20px, 4vh, 32px);
  }
  #sec-4 .ct-bg{
    position: absolute; inset: 64px 0 0 0; margin-top: -64px;
    z-index: 0; overflow: hidden; pointer-events: none;
  }
  #sec-4 .ct-bg-img{ width: 100%; height: 100%; object-fit: cover; }
  #sec-4 .ct-sub{
    margin: 0; 
    max-width: 100%;
    position: static !important; 
    font-size: .98rem; 
    line-height: 1.6; 
    color: #d8d8e8;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }
  #sec-4 .ct-btn{
    margin-top: 0 !important;
    position: static; 
    transform: none;
    width: 100%; 
    max-width: 520px;
    justify-self: center; 
    text-align: center; 
  }
  /* puxa o botão 60px pra cima (opcional) */
  #sec-4.ct .ct-btn{ 
    margin-top: -60px !important; 
  }

  /* Intro — MOBILE: letras V P I na mesma linha, só aparecem quando .ready */
  .logo-stack{
    display: flex;
    justify-content: center;
    align-items: baseline;   /* mesma altura */
    gap: 10px;
    z-index: 9;              /* fica sob o .about (que está z>=11) */
  }

  .logo-letter{
    position: static !important;    /* neutraliza offsets/anim do desktop */
    top: auto !important;
    left: auto !important;
    transform: none !important;
    line-height: 0.9;
  }
  .logo-letter:not(.ready){ display: none !important; }
  .logo-letter.ready{
    display: inline-block !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* mantém o texto e o hint nas posições combinadas */
  .scroll-indicator{
    position: absolute; left: 50%; bottom: 40px;
    transform: translateX(-50%); translate: -50% 0;
    text-align: center; z-index: 11;
  }
  .about{
    position: absolute; left: 50%; bottom: 100px;  /* 40 (scroll) + 60 (gap) */
    transform: translateX(-50%);
    margin: 0; max-width: min(640px, calc(100% - 2 * var(--page-gutter)));
    width: 100%; z-index: 11;
    --about-nudge: 0 !important;
  }

  /* ===== Intro (MOBILE): 1 palavra por vez, sem flash inicial ===== */
  .hero-words{
    position: relative;
    height: min(36vh, 360px);
    min-height: 220px;
    overflow: hidden;
  }

  .word{
    position: absolute !important;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) !important;
    margin: 0; white-space: nowrap; text-align: center;
    opacity: 0 !important; visibility: hidden !important;
    pointer-events: none;
  }
  .word.show{
    opacity: 1 !important; visibility: visible !important;
    pointer-events: auto;
  }
  body.preload .word{
    opacity: 0 !important; visibility: hidden !important;
  }

  .logo-stack{ z-index: 10; }
  .about{ z-index: 11; }
  .scroll-indicator{ z-index: 11; }

  /* INTRO — mobile: ajustes finos */
  .section.intro .intro-inner{ position: relative; }

  :root{ --about-offset: 0px; } /* ajuste manual, se quiser */

  .section.intro .scroll-indicator{
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
    transform: translateX(-50%);
    translate: -50% 0;
    z-index: 11;
    text-align: center;
  }

  .section.intro .about{
    position: absolute !important;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) translateY(var(--about-offset));
    max-width: min(640px, calc(100% - 2 * var(--page-gutter, 40px)));
    width: 100%; margin: 0; z-index: 11;
    --about-nudge: 0 !important;
  }

  .section.intro .logo-stack{
    position: absolute;
    left: 50%; top: 34vh;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

  /* INTRO — smartphone: about sempre 60px acima do "SCROLL" */
  .section.intro .intro-inner{ position: relative; }
  .section.intro .intro-right{ position: static !important; }

  .section.intro .scroll-indicator{
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
    transform: translateX(-50%); translate: -50% 0;
    z-index: 11; text-align: center;
  }

  .section.intro .about{
    position: absolute !important;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); /* 40 + 60 */
    transform: translateX(-50%);
    margin: 0;
    max-width: min(640px, calc(100% - 2 * var(--page-gutter, 40px)));
    width: 100%; z-index: 11; --about-nudge: 0 !important;
  }

  .section.intro .logo-stack{
    position: absolute;
    left: 50%; top: 34vh; transform: translate(-50%, -50%);
    z-index: 10;
  }

  /* ===== Overlay da apresentação — COBRIR TUDO no smartphone ===== */
  .section-title-overlay{
    position: fixed;
    inset: 0 !important;
    z-index: 9999 !important;
    background: #000;
  }

  /* === Sec-1 & Sec-2 (mobile): banner encostado no topo da tela === */
  #sec-1.section, #sec-2.section, #sec-3.section{ padding-top: 0 !important; }
  /* FIX: Impede overflow horizontal SÓ na sec-1 */
  #sec-1.section { overflow-x: hidden; }
  #sec-1 .cf-grid, #sec-2 .ts-grid{ padding-top: 0 !important; }
  #sec-1 .cf-grid > *:first-child,
  #sec-2 .ts-grid > *:first-child{ margin-top: 0 !important; }

  #sec-1 .cf-panel, #sec-2 .ts-panel{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: max(33vh, 250px);
    min-height: 250px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 16px 20px;
  }

  #sec-1 .cf-panel::after, #sec-2 .ts-panel::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0 38%, transparent 60%);
    pointer-events:none;
  }

  #sec-1 .cf-title, #sec-2 .ts-title{
    position: relative; margin: 0; color: #fff;
    z-index: 1; line-height: 1.08; text-align: center;
  }

  :root{ --bannerH: max(33vh, 420px); }
  #sec-2 .ts-panel{ order: -1; }

  #sec-1 .cf-panel, #sec-2 .ts-panel{
    height: var(--bannerH); min-height: 250px;
    text-align: center;
  }

  #sec-1 .cf-panel::after, #sec-2 .ts-panel::after{
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0 38%, transparent 60%);
    pointer-events: none;
  }

  #sec-1 .cf-title, #sec-2 .ts-title{
    position: relative; margin: 0; color: #fff;
    line-height: 1.08; letter-spacing: .015em; z-index: 1;
  }

  /* === SEC-3 (smartphone): vídeo full-bleed SEM quebrar a navegação === */
  #sec-3 .cp-scroll{
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: none !important;
    margin: 0; padding: 0;
  }

  #sec-3 .cp-col--video, #sec-3 .cp-col--video2{
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    justify-self: stretch !important;
    width: calc(100% + 2 * var(--page-gutter)) !important;
    margin-left: calc(-1 * var(--page-gutter)) !important;
    margin-right: calc(-1 * var(--page-gutter)) !important;
  }

  #sec-3 .cp-video, #sec-3 .cp-video2{
    width: 100% !important; max-width: none !important;
    aspect-ratio: 16/9; box-shadow: none !important;
    background: transparent !important;
  }

  #sec-3 .cp-video .cp-iframe,
  #sec-3 .cp-video2 .cp-iframe2{
    position: static !important; display: block !important;
    width: 100% !important; height: auto !important;
  }

  /* === Mobile: SCROLL só na section 0 === */
  .section .scroll-indicator,
  #sec-1 .scroll-indicator,
  #sec-2 .scroll-indicator,
  #sec-3 .scroll-indicator,
  #sec-4 .scroll-indicator,
  #sec-3 .cp-hint, #sec-3 .cp-hint2{
    display: none !important;
  }

  #sec-0 .scroll-indicator{
    display: block !important;
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
    transform: translateX(-50%);
    text-align: center; z-index: 11;
  }

  #sec-0 .intro-inner{ position: relative; }

  /* === MOBILE: sec-0 justinha na viewport === */
  #sec-0.section{
    padding: 0 !important;
    display: block !important;
    min-height: calc(100dvh - 64px) !important;
    height: calc(100dvh - 0px) !important;
  }
  #sec-0.section.active{ overflow: hidden !important; }

  #sec-0 .intro-inner{
    height: calc(100dvh - 64px) !important;
    min-height: 0 !important;
    padding-inline: var(--page-gutter);
  }
  #sec-0 .scroll-indicator{
    bottom: calc(env(safe-area-inset-bottom, 0px) + 40px) !important;
  }
  #sec-0 .about{
    bottom: calc(env(safe-area-inset-bottom, 0px) + 100px) !important;
  }

  /* =========================================================
   AJUSTES DE RESPIRO — TABLET ESTREITO (<= 1024px)
   (bloco repetido mantido conforme original)
   ========================================================= */

  /* Section 1 */
  #sec-1 .cf-grid{ padding-block: clamp(28px, 6vh, 48px); row-gap: 22px; }
  #sec-1 .cf-right{ row-gap: 20px; padding-left: 0; }
  #sec-1 .cf-card{ row-gap: 12px; }
  #sec-1 .cf-card-body{ padding-left: 0; }

  /* Section 2 */
  #sec-2 .ts-grid{ padding-block: clamp(28px, 6vh, 48px); row-gap: 22px; }
  #sec-2 .ts-left{ row-gap: 20px; }
  #sec-2 .ts-list{ padding-left: 18px; }
  #sec-2 .ts-panel{ min-height: 300px; padding: clamp(28px, 6vw, 48px); }

  /* Section 3 */
  #sec-3 .cp-wrap{ padding-block: clamp(24px, 5vh, 40px); }
  #sec-3 .cp-screen, #sec-3 .cp-screen2{ padding-block: clamp(20px, 4vh, 36px); }
  #sec-3 .cp-row, #sec-3 .cp-row2, #sec-3 .cp-row--b, #sec-3 .cp-row--b2{ row-gap: 24px; }


  /* Smartphone: centraliza o "SCROLL" e desce +30px */
  #scrollHint.scroll-indicator{
    position: absolute;
    left: 50%;
    transform: translateX(-50%) !important;
    translate: 0 0 !important;
    right: auto !important;
    z-index: 20;
    pointer-events: none;
    text-align: center;
  }

  .intro-bg{
    position: fixed;
    inset: 0;               /* ocupa a tela inteira */
    overflow: hidden;
    background: #000;
  }
  .intro-bg-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;      /* preenche proporcionalmente, sem bordas */
    object-position: center;
  }

  /* -- FIX: vídeo da intro centralizado e cobrindo toda a viewport no smartphone -- */
  #sec-0 .intro-bg-video{
    position: fixed;          /* fica preso à viewport */
    inset: 0;                 /* ocupa 100% da largura e altura */
    width: 100svw;
    height: 100svh;
    min-width: 100svw;
    min-height: 100svh;

    /* centralização e cobertura sem distorcer */
    object-fit: cover;        /* cobre toda a tela */
    object-position: center;  /* centralizado */
    transform: none;          /* remove o translate(-50%, -50%) */
    margin: 0;                /* nada de -64px */
    pointer-events: none;
    display: block;
  }

  /* fallback p/ browsers sem svh/svw */
  @supports not (height: 100svh){
    #sec-0 .intro-bg-video{
      width: 100dvw;
      height: 100dvh;
      min-width: 100dvw;
      min-height: 100dvh;
    }
  }


  /* ===== FIX — sec-0 deve começar no topo e o vídeo cobrir tudo ===== */
  /* ===== FIX — sec-0 deve começar no topo e o vídeo cobrir tudo ===== */
  /* 1) Zera o offset padrão (64px) só na sec-0 */
  #sec-0.section { inset: 0 0 0 0 !important; padding-top: 0 !important; }
  #sec-0.section.active { inset: 0 0 0 0 !important; }

  /* (extra) se existir um wrapper #viewport após o header, garanta também: */
  .topbar + #viewport #sec-0.section { inset: 0 0 0 0 !important; }

  /* 2) Vídeo 100% da viewport dinâmica (iOS/Android), centralizado */
  #sec-0 .intro-bg{
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #000;
    z-index: 0;
  }


  /* === INTRO (sec-0) — vídeo 100% viewport, centrado, estável no iOS === */
  /* A section 0 ocupa a viewport inteira e não anima */
  #sec-0.section{
    inset: 0 !important;
    padding: 0 !important;
    min-height: 100svh !important;
    height: 100svh !important;
    transform: none !important;
    transition: none !important;
  }
  #sec-0.section.active{
    overflow: hidden !important;
  }

  /* Container do vídeo: cobre a tela toda (nada de offsets) */
  #sec-0 .intro-bg{
    position: fixed;            /* fica por trás de tudo */
    inset: 0;                   /* 0 em todos os lados */
    background: #000;
    overflow: hidden;
    z-index: 0;

    /* isolado para o compositor (evita reflows) */
    contain: layout paint size;
    will-change: opacity;
    transition: none !important;
  }

  /* O <video> em si: 100% da viewport, sem transform, centralizado */
  #sec-0 .intro-bg-video{
    position: fixed;            /* segue o container */
    inset: 0;
    width: 100svw;              /* viewport “segura” do iOS */
    height: 100svh;
    min-width: 100svw;
    min-height: 100svh;

    object-fit: cover;          /* preenche proporcionalmente, sem bordas */
    object-position: center;
    pointer-events: none;

    /* ZERA qualquer transform herdado */
    transform: none !important;

    /* empurra pra GPU e evita “flicker” */
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* O conteúdo da intro fica acima do vídeo */
  #sec-0 .intro-inner{ 
    position: relative;
    z-index: 1;
    height: 100%;
  }

  /* Evita animações/transições pesadas durante a intro no mobile */
  #sec-0 .intro-inner,
  #sec-0 .logo-stack,
  #sec-0 .about,
  #sec-0 .scroll-indicator{
    transition: none !important;
    filter: none !important;
  }

  /* ===== PERFORMANCE FIX: intro video mais suave no iPhone ===== */
  /* 1) vídeo ocupa a viewport inteira e fica em layer própria de GPU */
  #sec-0 .intro-bg{
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #000;
    z-index: 0;
    /* evitar repaints do fade durante a decodificação do vídeo */
    transition: none !important;
    will-change: opacity;
    contain: paint layout size style; /* isola escopo de pintura */
  }

  #sec-0 .intro-bg-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    /* força layer própria e aceleração no iOS */
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    backface-visibility: hidden;
    will-change: transform;
    pointer-events: none;
  }

  /* 2) desliga filtros/blur nas animações sobre o vídeo (pesados no iOS) */
  .section.sa-hold [data-anime]{ filter: none !important; }
  [data-anime].anime{ filter: none !important; }

  /* 3) garante que a intro não crie scroll com “elástico” no iOS */
  #sec-0.section.active{
    overflow: hidden !important;
    -webkit-overflow-scrolling: auto !important;
  }


  #sec-0 .intro-bg{ position: fixed; inset: 0; overflow: hidden; background: #000; z-index: 0; transition: none !important; }
  #sec-0 .intro-bg-video{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
    backface-visibility: hidden; will-change: transform;
    pointer-events: none;
  }
  /* Evita filtros pesados sobre o vídeo */
  .section.sa-hold [data-anime], [data-anime].anime{ filter: none !important; }
  #sec-0.section.active{ overflow: hidden !important; -webkit-overflow-scrolling: auto !important; }


  /* painel do título centralizado */
  #sec-1 .cf-panel{
    display: block;  
    align-items: flex-end;  /* joga o título pro fundo do painel */
    justify-content: center;
    text-align: center;           /* garante centralização do h2 */
    padding: clamp(28px, 6vw, 48px);
    position: relative;              /* referência para o h2 absoluto */
    height: var(--bannerH);
    min-height: 250px;               /* já usa isso no seu CSS */
    padding: 16px 20px;              /* laterais; sem padding-bottom grande */
  }

  /* título em duas linhas, centralizado */
  #sec-1 .cf-title{
    margin-top: 0 !important;
    position: absolute;
    left: 50%;
    bottom: 40px;                    /* o “respiro” que você quer */
    transform: translateX(-50%);     /* centraliza horizontalmente */
    margin: 0;
    line-height: 1.04;
    letter-spacing: .02em;
    text-align: center;
    z-index: 1; 
  }

  /* cada palavra ocupa sua própria linha */
  #sec-1 .cf-title .cf-word{
    display: block;
  }

  /* tamanhos (ajuste como preferir) */
  #sec-1 .cf-title .cf-w1{        /* “CONSULTORIA” */
    font-size: 42px;
  }
  #sec-1 .cf-title .cf-w2{        /* “FINANCEIRA”  */
    font-size: 50px;
  }

  /* Overlay: cobre a tela e CENTRALIZA o título */
  .section-title-overlay{
    display: grid;
    place-items: center;
    text-align: center;
    padding: 0 24px;          /* respiro lateral */
  }

  /* Título do overlay */
  .section-title-overlay .sto-title{
    margin: 0;
    text-align: center;
    line-height: 1.05;
    letter-spacing: .02em;
    font-weight: 800;
    font-size: clamp(28px, 9vw, 40px); /* ajuste confortável no mobile */
  }

  #sec-1 .cf-right > .cf-card + .cf-card{
    margin-top: 60px; 
  }

  #sec-1 .cf-right > article.cf-card:nth-of-type(2){
    margin-bottom: 80px; /* espaço externo abaixo do card */
  }

}









/* === FIX: SEC-1, 2, 3 rolar como UMA ÚNICA section (mobile) === */
@media (max-width: 768px){

  /* FIX: Impede o "vazamento" horizontal em TODAS as seções
     causado pelos banners de 100vw. */
  #sec-1.section,
  #sec-2.section,
  #sec-3.section {
    overflow-x: hidden !important;
  }

  /* a própria section rola (lógica existente) */
  #sec-3.section.active{
    overflow-y: auto !important;
    /* overflow-x já foi aplicado acima */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
  }

  /* desliga QUALQUER rolagem interna do scroller da sec-3 */
  #sec-3 .cp-scroll{
    height: auto !important;
    overflow: visible !important;     /* <- chave */
    scroll-snap-type: none !important;
  }

  /* empilha as duas telas normalmente */
  #sec-3 .cp-screen,
  #sec-3 .cp-screen2{
    position: static !important;
    min-height: 0 !important;
    flex: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 0 28px 0 !important;
    display: grid !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 20px !important;
  }

  /* vídeo full-bleed sem criar scroller próprio */
  #sec-3 .cp-col--video,
  #sec-3 .cp-col--video2{
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden !important;
    justify-self: stretch !important;
    margin-top: -40px;
  }
  #sec-3 .cp-video,
  #sec-3 .cp-video2{
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 16/9 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #sec-3 .cp-video .cp-iframe,
  #sec-3 .cp-video2 .cp-iframe2{
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}


/* =========================================================
   FIX: SEC-3 — Ajustes de Padding e Alinhamento (Mobile)
   ========================================================= */
@media (max-width: 768px) {
  
  /* 1. Define o padding lateral da seção para 20px */
  #sec-3.section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* 2. Força o contêiner do texto a ocupar 100% e alinhar à esquerda */
  #sec-3 .cp-col--text,
  #sec-3 .cp-col--text2 {
    width: 100%;
    text-align: left;
  }

  /* 3. Garante que os parágrafos também fiquem à esquerda */
  #sec-3 .cp-lead, #sec-3 .cp-lead2,
  #sec-3 .cp-desc, #sec-3 .cp-desc2 {
    text-align: left;
  }

  /* 4. Mantém a indentação original da lista */
  #sec-3 .cp-list,
  #sec-3 .cp-list2 {
    padding-left: 18px; /* */
  }

  #sec-3 .cp-list--cols-2 {
    columns: 1; /* Força 1 coluna só */
    -webkit-columns: 1;
    column-gap: 0;
  }
}



/* --- Ajuste "Sobre" no Mobile --- */
@media (max-width: 768px) {
  /* Ajusta a altura do container "Sobre" no mobile */
  .about-scroll-content {
    /* * O .about é posicionado a 100px do fundo.
     * A logo está no top 34vh.
     * Vamos usar o espaço entre eles.
    */
    max-height: 40vh; /* Usa 40% da altura da tela */
  }
}



/* =========================================================
   AJUSTE SEC-0 (INTRO/SOBRE) — MOBILE (SOLUÇÃO DE POSICIONAMENTO)
   ========================================================= */
@media (max-width: 768px) {
  /*
     Força a centralização usando 'left: 50%' e 'transform: translate()',
     o método mais robusto para superar conflitos de margem herdada.
  */
  #sec-0.is-showing-about .logo-stack {
    
    /* Passo 1: Anular a margem teimosa do desktop e garantir que seja flexível */
    margin: 0 !important;
    width: auto !important; 
    
    /* Passo 2: Centralizar Horizontalmente */
    left: 50%;
    
    /* Passo 3: Mover para cima (-140px) E puxar de volta pela metade da sua largura (-50%) */
    /* O transform combina as duas ações! */
    transform: translate(-50%, -200px);
  }
}