/* Importação da Fonte Personalizada */
@font-face {
    font-family: 'Pavon';
    src: url('pavon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Reset Global Rigoroso */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 1. MATA A FRESTA LATERAL (Força o limite da tela ignorando a barra de rolagem) */
html, body {
    width: 100%;
    overflow-x: hidden !important;
    background-color: #151515;
}

body {
    font-family: 'Arial', sans-serif;
}

/* ========================================= */
/* TYPOGRAPHY OVERRIDE - TITULOS EM PAVON    */
/* ========================================= */
h1, h2, h3, h4, h5, h6,
.psi-titulo,
.metodo-titulo,
.titulo-centralizado-passos,
.dominio-titulo,
.investimento-titulo,
.faq-titulo {
    font-family: 'Pavon', sans-serif !important;
    line-height: 1.1 !important; /* Impede que fontes mal configuradas encavalem as linhas */
    font-weight: normal !important; /* Evita que o navegador engrosse fontes que já são grossas */
    overflow-wrap: break-word !important; /* Impede que a fonte vaze da tela */
}

/* ========================================= */
/* BLINDAGEM DE CAMADAS (Z-INDEX)            */
/* ========================================= */

/* 2. O VÍDEO NO FUNDO (Troca de 100vw para 100% para encaixar perfeitamente) */
.intro-stack-section {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

/* 2. O VÍDEO PREENCHE TUDO (Mata as bordas pretas) */
.fullscreen-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 3. OVERLAY DO TEXTO (Role para baixo) */
.slide-overlay-content {
  position: absolute !important;
  bottom: 3rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Indicador de Scroll */
.scroll-indicator {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.arrow-down {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  60% { transform: translateY(-4px); }
}

/* 3. A SEÇÃO HERO (Continua subindo como uma cortina) */
.hero-shader-root {
  position: relative !important;
  z-index: 10 !important;
  background-color: #151515 !important;
  width: 100% !important;
}

/* 5. A NEBLINA PRETA (CANVAS): Restaura o motor gráfico ACIMA do fundo do Hero (Z-Index 2) */
#shader-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* 6. OS TEXTOS DO HERO: Ficam na camada mais alta, intocáveis (Z-Index 5) */
.hero-content-overlay {
  position: absolute !important;
  z-index: 5 !important;
}

/* 4. BLINDAGEM CIRÚRGICA E FUNDO DE NÉVOA ESCURA */
/* Removemos o seletor 'div' para as animações de texto voltarem a respirar e aparecer */
.hero-shader-root ~ section,
.hero-shader-root ~ footer,
.hero-shader-root ~ main {
  position: relative;
  z-index: 2;
  /* Recria o background de névoa bem escura e suave */
  background-color: #151515;
  background-image: none;
}

/* ========================================= */
/* STAGGERED MENU                            */
/* Definições de cor apenas para o Staggered Menu */
:root { --sm-accent: #c0c0c0; }

.staggered-menu-wrapper.fixed-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999 !important; /* Acima de tudo */
  overflow: hidden;
  pointer-events: none;
}

.staggered-menu-wrapper[data-open="true"] {
  pointer-events: auto;
}

.staggered-menu-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px 4%; /* Respiro do topo */
  display: flex;
  justify-content: space-between; /* Distribui logo e botão nos extremos com alinhamento vertical perfeito */
  align-items: center;
  pointer-events: none; /* A faixa do header não bloqueia o clique no fundo */
  z-index: 10000; /* Tem que ficar acima do panel de vidro (9999) para mostrar o botão 'Close' */
}

.sm-logo-img {
  display: none;
}

.sm-toggle {
  background: transparent;
  border: none;
  color: #FCFCFA;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 10px;
  font-family: 'Arial', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: auto;
}

.sm-toggle-textWrap {
  overflow: hidden;
  display: inline-block;
}

.sm-toggle-textInner {
  display: flex;
}

.sm-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sm-icon-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #FCFCFA;
}

.sm-icon-line-v {
  transform: rotate(90deg);
}

.sm-prelayers, .staggered-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 500px;
  height: 100%;
}

.sm-prelayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.staggered-menu-panel {
  background-color: #111111;
  padding: 100px 40px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.sm-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.sm-panel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sm-panel-itemWrap {
  overflow: hidden;
}

.sm-panel-item {
  text-decoration: none;
  font-family: 'Arial', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: #FCFCFA;
  display: block;
  line-height: 1.1;
  transition: color 0.3s ease;
}

.sm-panel-itemLabel {
  display: block;
  transform-origin: left bottom;
}

.sm-panel-item:hover {
  color: var(--sm-accent);
}

.sm-socials {
  margin-top: 80px;
}

.sm-socials-title {
  font-family: 'Arial', sans-serif;
  font-size: 1rem;
  color: #FCFCFA;
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
}

.sm-socials-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 20px;
}

.sm-socials-link {
  text-decoration: none;
  color: #FCFCFA;
  font-family: 'Arial', sans-serif;
  font-size: 1.1rem;
  transition: opacity 0.3s ease;
}

.sm-socials-link:hover {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .sm-prelayers, .staggered-menu-panel {
    max-width: 100%;
  }
  .sm-panel-item {
    font-size: 2.5rem;
  }
}

/* Container do MAP (Voltou para o Centro Original) */
.top-logo-container {
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; 
    pointer-events: none; 
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s ease;
}

/* Container do ROADMAP (Fixo no Canto Esquerdo) */
.top-logo-roadmap {
    /* Removida position: absolute para usar o alinhamento flexível perfeito com o menu */
    z-index: 10;
    pointer-events: none; 
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s ease;
}

/* Ocultar Logos ao Fazer Scroll Down */
.hide-logos .top-logo-container {
    transform: translate(-50%, -150%);
    opacity: 0;
}
.hide-logos .top-logo-roadmap {
    transform: translateY(-150%);
    opacity: 0;
}

/* Dimensionamento do Roadmap */
.top-logo-img-roadmap {
    width: auto;
    max-width: 180px; 
    height: auto;
    display: block;
}

/* Dimensionamento do Map (Tamanho reduzido para não encostar na borda) */
.top-logo-img {
    width: auto;
    max-width: 95px; /* Reduzido para dar respiro em relação ao topo da tela */
    height: auto;
    display: block;
}

/* Animação Flutuante Contínua para as Logos */
.animate-float-logo {
    animation: blobAnim 4s ease-in-out infinite;
}

/* 
  Trilho do Scroll: 
  A altura define a duração e o tempo de vida da animação na tela. 
*/
#hero-scroll-container {
    position: relative;
    width: 100%;
    height: 400vh;
    background-color: transparent;
}

.sticky-wrapper {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* 
  Projetor do Cinema (Canvas):
*/
#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: block; /* Garante que não haverá espaços fantasma */
}

/* Lenis Scroll Smooth - Estilos Base */
html.lenis {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}

/* Scroll Velocity Divider */
.scroll-velocity-divider {
    width: 100%;
    padding: 60px 0;
    overflow: hidden;
    background-color: transparent;
    position: relative;
    z-index: 5;
}

.parallax-marquee {
    /* overflow: hidden; <- REMOVIDO pois estava cortando as pernas (descenders) da fonte Pavon */
    display: flex;
    white-space: nowrap;
}

.scroller-track {
    display: flex;
    white-space: nowrap;
    font-family: 'Pavon', sans-serif; /* Aplicando a nova fonte */
    font-size: 1.5rem; /* Fonte reduzida no celular */
    font-weight: normal; /* Removendo o bold para manter a identidade original da Pavon */
    letter-spacing: 0; /* Zerando o letter-spacing para não deformar a fonte nova */
    color: #FCFCFA; /* Cor clara para contrastar lindamente com o fundo preto */
}

.scroller-track span {
    flex-shrink: 0;
    display: flex;
    align-items: center; /* Garante que imagem e texto fiquem na mesma linha horizontal */
}

.marquee-map-icon {
    height: 1.2em; /* Tamanho aumentado para 120% do tamanho da fonte */
    width: auto;
    margin: 0 0.5em; /* Margem flexível de espaçamento */
    display: inline-block;
    vertical-align: middle;
}

/* Seção PSI Escura */
.secao-conteudo-escura {
    width: 100%;
    min-height: auto !important;
    height: auto !important;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 4%;
    padding-bottom: 140px !important;
    overflow: visible !important;
    box-sizing: border-box;
    position: relative;
    z-index: 2 !important;
}


.psi-grid-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    gap: 100px; /* Espaço vertical geral bem maior */
    overflow: visible !important;
    position: relative;
    z-index: 5 !important; /* Garante que os textos e links fiquem na frente do vídeo */
    pointer-events: auto;
}

.psi-coluna-texto {
    align-self: flex-start;
    max-width: 650px;
    text-align: left;
}

.psi-titulo {
    font-family: 'Arial', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: #FCFCFA;
    line-height: 1.2;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

/* Coluna Direita (Método) */
.psi-coluna-metodo {
    align-self: flex-end;
    max-width: 550px;
    text-align: left;
    padding-left: 0;
    margin-top: 250px; /* Mergulho profundo */
}

.metodo-titulo {
    font-family: 'Arial', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #FCFCFA;
    line-height: 1.3;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

/* Título Centralizado - 4 Passos */
.titulo-centralizado-passos {
    align-self: center;
    text-align: center;
    margin-top: 150px;
    max-width: 900px;
}

.titulo-centralizado-passos h2 {
    font-family: 'Arial', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: #FCFCFA;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Grid Preparado para os 4 Cards */
.psi-cards-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    margin-top: 80px !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.psi-card-glass {
    min-width: 0;
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    padding: 30px;
    color: #FCFCFA;
}

.psi-card-glass h4 {
    font-family: 'Inter', 'Arial', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 12px; /* Respiro essencial entre o título e o texto */
    letter-spacing: -0.02em;
}

.psi-card-glass p {
    font-family: 'Inter', 'Arial', sans-serif;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75); /* Texto ligeiramente opaco para criar contraste com o título */
    line-height: 1.6;
    margin: 0;
}

/* ========================================= */
/* SKEW CARDS (PREÇOS INCLINADOS)            */
/* ========================================= */
.pricing-skew-container {
  gap: 60px !important; /* Espaço maior para o efeito inclinado respirar */
}
.skew-card {
  position: relative;
  width: 340px !important;
  height: 580px;
  flex-shrink: 0 !important;
  transition: all 0.5s ease;
}
.skew-bg, .skew-bg-blur {
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 100%;
  border-radius: 8px;
  transform: skewX(-15deg);
  transition: all 0.5s ease;
}
.skew-bg-blur {
  filter: blur(40px);
  opacity: 0.8;
}
/* Efeitos de Hover disparados pelo mouse */
.skew-card:hover .skew-bg,
.skew-card:hover .skew-bg-blur {
  transform: skewX(0deg);
  left: -5%;
  width: 110%;
}
.blob-container {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.blob-1, .blob-2 {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 8px;
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: all 0.5s ease;
  animation: blobAnim 2s ease-in-out infinite;
}
.blob-2 {
  animation-delay: -1s;
}
.skew-card:hover .blob-1 {
  top: -50px; left: 50px; width: 100px; height: 100px; opacity: 1;
}
.skew-card:hover .blob-2 {
  bottom: -50px; right: 50px; width: 100px; height: 100px; opacity: 1;
}
.skew-content {
  position: relative;
  z-index: 20;
  left: 0;
  height: 100%;
  padding: 40px 30px;
  background: rgba(10, 10, 10, 0.6); /* Vidro fumê igual aos outros cards */
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 15px 35px rgba(0,0,0,0.5);
  border-radius: 8px;
  color: #ffffff; /* Texto branco no estado normal */
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.skew-card:hover .skew-content {
  left: -25px;
  padding: 50px 30px;
  color: #ffffff;
}
.skew-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 5px; }
.skew-price { font-size: 2.2rem; font-weight: 900; margin-bottom: 5px; letter-spacing: -1px; }
.skew-subtitle { font-size: 0.85rem; opacity: 0.7; margin-bottom: 20px; font-weight: 500; }
.skew-list { list-style: none; padding: 0; margin-bottom: 20px; flex-grow: 1; }
.skew-list li { font-size: 0.9rem; line-height: 1.4; margin-bottom: 12px; font-weight: 500; }
.skew-desc { font-size: 0.95rem; line-height: 1.5; margin-bottom: 15px; }
.skew-btn {
  display: inline-block;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  background: transparent;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s;
}
.skew-card:hover .skew-btn {
  background: #ffffff;
  color: #000000;
}

@keyframes blobAnim {
  0%, 100% { transform: translateY(10px); }
  50% { transform: translateY(-10px) translateX(-10px); }
}

/* ========================================= */
/* SEÇÃO: TUDO EM UM SÓ LUGAR                */
/* ========================================= */
.secao-conteudo-escura-centralizada {
    width: 100%;
    background-color: transparent;
    padding: 150px 4%; /* Respiro luxuoso entre seções */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    z-index: 4;
}

.dominio-container {
    max-width: 900px; /* Limite de leitura agradável no centro */
    text-align: center;
}

.dominio-titulo {
    font-family: 'Arial', sans-serif;
    font-size: 3.2rem; /* Título bem impactante */
    font-weight: 800;
    color: #FCFCFA;
    line-height: 1.15;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.dominio-subtitulo {
    font-family: 'Arial', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #FCFCFA;
    opacity: 0.9;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
}

/* ========================================= */
/* ESTILIZAÇÃO DO ACCORDION (SANFONA)        */
/* ========================================= */
.psi-accordion {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
    position: relative;
    padding-left: 50px; /* Cria espaço para a trilha lateral */
}

/* Linha vertical do caminho */
.psi-accordion::before {
    content: '';
    position: absolute;
    top: 35px; /* Alinha perfeitamente ao centro do primeiro card */
    bottom: 35px; /* Alinha ao centro do último card */
    left: 20px;
    width: 2px;
    background: rgba(255, 255, 255, 0.15); /* Linha sutil conectando os pontos */
    z-index: 1;
}

.accordion-item {
    position: relative;
    background: rgba(10, 10, 10, 0.5); /* Escuro e forte para ler o texto */
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Nó (Ponto) minimalista do caminho na lateral */
.accordion-item::before {
    content: '';
    position: absolute;
    top: 35px; /* Centro do padding + texto */
    left: -35px; /* Eixo X exato do centro da linha vertical */
    width: 12px;
    height: 12px;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.4); /* Anel apagado */
    border-radius: 50%;
    z-index: 2;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

.accordion-item.active {
    background: rgba(25, 25, 25, 0.7); /* Fica ligeiramente mais denso quando focado */
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* Quando o card abre, o ponto "acende" indicando o passo atual */
.accordion-item.active::before {
    background-color: #FCFCFA;
    border-color: #FCFCFA;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); /* Glow de energia */
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px;
    cursor: pointer;
    user-select: none;
}

.accordion-title {
    font-family: 'Arial', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    color: #FCFCFA;
}

.accordion-icon {
    font-size: 1.8rem;
    font-weight: 300;
    color: #FCFCFA;
    transition: transform 0.3s ease;
}

/* Transforma o sinal de '+' em um 'X' animado */
.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}

/* Container escondido usando CSS Grid Hack para transição fluida */
.accordion-content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

.accordion-item.active .accordion-content-wrapper {
    grid-template-rows: 1fr;
    opacity: 1;
}

.accordion-content {
    overflow: hidden;
}

.accordion-content p {
    font-family: 'Arial', sans-serif;
    font-size: 1.05rem;
    color: #FCFCFA;
    opacity: 0.8;
    line-height: 1.6;
    margin: 0;
    padding: 0 30px 20px 30px; /* Reduzido levemente para o botão respirar */
}

/* Botão Interno da Sanfona - Design Delicado */
.btn-sanfona {
    display: inline-block;
    background-color: #FCFCFA;
    color: #000000;
    font-family: 'Arial', sans-serif;
    font-size: 0.95rem; /* Fonte levemente menor */
    font-weight: 600; /* Peso médio-forte, sem ser grosseiro (antes era 800) */
    padding: 12px 36px; /* Mais magro verticalmente e mais comprido nas laterais */
    border: none;
    border-radius: 50px; /* Bordas totalmente arredondadas (estilo pílula) */
    cursor: pointer;
    margin-left: 30px;
    margin-bottom: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    letter-spacing: 0.03em; /* Espaçamento sutil para dar elegância às letras */
}

.btn-sanfona:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
    opacity: 0.95; /* Brilho mais delicado ao passar o mouse */
}

/* ========================================= */
/* SEÇÃO: INVESTIMENTO                       */
/* ========================================= */
#secao-investimento {
    width: 100%;
    background-color: transparent; /* Integração invisível com as seções anteriores */
    padding: 120px 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 4;
}

.investimento-titulo {
    font-family: 'Arial', sans-serif;
    font-size: 3.2rem; /* Mantendo o peso titânico da tipografia */
    font-weight: 800;
    color: #FCFCFA;
    line-height: 1.2;
    margin-bottom: 80px; /* Abismo até os cards */
    letter-spacing: -0.02em;
    max-width: 900px;
}

.investimento-cards-container {
    display: flex;
    flex-direction: row;
    gap: 30px; /* Espaço simétrico entre os 3 blocos */
    width: 100%;
    max-width: 1200px;
    justify-content: center;
}

.investimento-card {
    flex: 1; /* Todos esticam de forma idêntica */
    min-height: 400px; /* Altura provisória para visualização enquanto não há conteúdo */
    background: rgba(10, 10, 10, 0.5); /* Vidro fumê para consistência visual */
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.15); /* Borda prata fantasma */
    border-radius: 24px; /* Arredondamento bem macio e premium */
    padding: 50px 30px;
    color: #FCFCFA;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
}

/* O card central geralmente precisa de um destaque visual */
.card-destaque {
    background: rgba(25, 25, 25, 0.7); /* Fica mais denso para destacar */
    border-color: rgba(255, 255, 255, 0.85); /* Borda branca minimalista e destacada */
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.05); /* Brilho super suave para acompanhar a borda */
    transform: translateY(-15px); /* Salta um pouco pra fora da linha */
}

.investimento-card:hover {
    transform: translateY(-15px); /* Efeito Hover forte */
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.card-destaque:hover {
    transform: translateY(-25px); /* O do meio pula ainda mais */
}

/* ========================================= */
/* ESTILOS INTERNOS DA PRECIFICAÇÃO          */
/* ========================================= */
.investimento-card {
    text-align: left; /* Garante que os itens fiquem alinhados internamente à esquerda */
}

.plano-nome {
    font-family: 'Inter', 'Arial', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
}

.plano-preco-box {
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.plano-preco {
    font-family: 'Inter', 'Arial', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.04em;
    line-height: 1;
}

.plano-periodo {
    font-family: 'Inter', 'Arial', sans-serif;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: lowercase;
}

.plano-descricao {
    font-family: 'Inter', 'Arial', sans-serif;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 35px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Linha divisória fina */
    line-height: 1.5;
}

.plano-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 45px 0;
    flex-grow: 1; /* Força o footer a descer sempre para o final do card */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espaçamento limpo e consistente entre os benefícios */
}

.plano-lista li {
    font-family: 'Inter', 'Arial', sans-serif;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
}

.plano-lista .check {
    color: #FCFCFA;
    font-weight: bold;
    margin-right: 12px;
    font-size: 1.1rem;
}

.plano-footer {
    margin-top: auto; /* Cola o botão na parte inferior do container pai */
    width: 100%;
}

.btn-plano {
    display: block; /* Para funcionar como link ocupando a largura total */
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    width: 100%;
    background-color: transparent;
    color: #FCFCFA;
    border: 2px solid rgba(255, 255, 255, 0.4);
    font-family: 'Inter', 'Arial', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 16px 0;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-plano:hover {
    background-color: #FCFCFA;
    color: #000000;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

/* O botão do plano central tem contraste máximo por padrão */
.destaque-btn {
    background-color: #FCFCFA;
    color: #000000;
    border-color: #FCFCFA;
}

.destaque-btn:hover {
    background-color: transparent;
    color: #FCFCFA;
    border-color: #FCFCFA;
}

/* ========================================= */
/* SEÇÃO: FAQ                                */
/* ========================================= */
#secao-faq {
    width: 100%;
    background-color: transparent;
    padding: 120px 4% 150px 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 4;
}

.faq-titulo {
    font-family: 'Arial', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: #FCFCFA;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    max-width: 800px;
}

.faq-subtitulo {
    font-family: 'Arial', sans-serif;
    font-size: 1.15rem;
    color: #FCFCFA;
    opacity: 0.7;
    line-height: 1.6;
    max-width: 650px;
}

/* Modificador: Sanfona do FAQ (Sem a trilha vertical) */
.faq-accordion {
    padding-left: 0;
    max-width: 900px; /* Mantém o tamanho da leitura confortável e centrado */
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
    width: 100%;
}

.faq-accordion::before,
.faq-accordion .accordion-item::before {
    display: none; /* Esconde os pontos da linha do tempo da primeira sanfona */
}

@media (min-width: 768px) {
    .scroller-track {
        font-size: 3.5rem; /* Fonte reduzida no desktop */
        line-height: normal; /* Volta ao normal para a fonte ter espaço total para ser desenhada */
        padding-bottom: 10px; /* Margem de segurança extra pro 'g' e 'p' */
    }
}

@media (max-width: 768px) {
    .psi-grid-container {
        gap: 40px;
    }
    .psi-coluna-texto {
        align-self: center;
        text-align: center;
    }
    .psi-subtitulo {
        margin: 0 auto;
    }
    .psi-coluna-metodo {
        align-self: center;
        text-align: center;
        margin-top: 0;
    }
    .metodo-subtitulo {
        margin: 0 auto;
    }
    .titulo-centralizado-passos {
        margin-top: 80px; /* Reduz um pouco o abismo no celular */
        padding: 0 10px;
    }
    .titulo-centralizado-passos h2 {
        font-size: 1.8rem; /* Evita quebra exagerada no mobile */
    }
    .psi-cards-container {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 colunas no tablet */
    }
    
    /* Responsividade Nova Seção */
    .secao-conteudo-escura-centralizada {
        padding: 100px 4%;
    }
    .dominio-titulo {
        font-size: 2.2rem;
    }
    .dominio-subtitulo {
        font-size: 1.1rem;
    }
    
    /* Responsividade Sanfona */
    .psi-accordion {
        padding-left: 35px; /* Reduz espaço da trilha no celular */
    }
    .psi-accordion::before {
        left: 12px;
        top: 30px;
        bottom: 30px;
    }
    .accordion-item::before {
        top: 30px; /* Recalibra o eixo Y para fontes menores */
        left: -29px;
    }
    .accordion-title {
        font-size: 1.2rem;
    }
    .accordion-header {
        padding: 20px;
    }
    .accordion-content p {
        padding: 0 20px 16px 20px;
    }
    .btn-sanfona {
        margin-left: 20px;
        margin-bottom: 24px;
        font-size: 0.85rem;
        padding: 10px 28px; /* Adaptação da pílula para o mobile */
    }
    
    /* Responsividade Investimento */
    #secao-investimento {
        padding: 80px 4%;
    }
    .investimento-titulo {
        font-size: 2.2rem;
        margin-bottom: 50px;
    }
    .investimento-cards-container {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .investimento-card {
        width: 100%;
        max-width: 400px;
        min-height: 350px;
    }
    .card-destaque {
        transform: none; /* Tira o degrau centralizado no mobile porque estão empilhados */
    }
    .investimento-card:hover, .card-destaque:hover {
        transform: translateY(-10px);
    }
    
    /* Responsividade FAQ */
    #secao-faq {
        padding: 80px 4% 100px 4%;
    }
    .faq-titulo {
        font-size: 2rem;
    }
    .faq-subtitulo {
        font-size: 1.05rem;
    }
}

@media (max-width: 480px) {
    .psi-cards-container {
        flex-direction: column !important; /* Empilha no celular */
        width: 100% !important;
        padding-left: 0 !important;
        transform: none !important;
        align-items: center;
    }
    .psi-card-glass {
        width: 100% !important;
        max-width: 350px !important;
    }
}

/* ========================================= */
/* HERO WEBGL SHADER EFEITOS                 */
/* ========================================= */
.hero-shader-root {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: transparent;
  z-index: 1;
}
.shader-canvas-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  touch-action: none;
  background: transparent;
  z-index: -1;
}
.hero-content-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  padding: 0 20px;
  font-family: sans-serif;
}
.trust-badge-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(249, 115, 22, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(253, 186, 116, 0.3);
  border-radius: 9999px;
  font-size: 0.875rem;
}
.badge-text { color: #ffedd5; }
.headline-container h1 {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.hero-headline-1 { background-image: linear-gradient(to right, #fed7aa, #facc15, #fcd34d); }
.hero-headline-2 { background-image: linear-gradient(to right, #fde047, #fb923c, #f87171); }

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: #c0c0c0;
  max-width: 720px;
  margin: 24px auto 0 auto;
  font-weight: 300;
  line-height: 1.6;
}
.hero-buttons-container {
  display: flex;
  gap: 16px;
  margin-top: 40px;
}
.btn-primary-gradient {
  padding: 16px 32px;
  background: #ffffff;
  color: #000000;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-primary-gradient:hover { transform: scale(1.05); box-shadow: 0 10px 25px rgba(255, 255, 255, 0.4); }
.btn-secondary-outline {
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}
.btn-secondary-outline:hover { transform: scale(1.05); background: rgba(255, 255, 255, 0.15); }

/* Animações nativas de Keyframes */
@keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes framedInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
.animate-fade-in-down { animation: fadeInDown 0.8s ease-out forwards; }
.animate-fade-in-up { animation: framedInUp 0.8s ease-out forwards; opacity: 0; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-600 { animation-delay: 0.6s; }
.animation-delay-800 { animation-delay: 0.8s; }

/* ========================================= */
/* AJUSTES PREMIUM DA TIPOGRAFIA HERO        */
/* ========================================= */
.hero-content-overlay {
  padding: 0 8% !important;
}

/* A pílula de cima idêntica à imagem */
.trust-badge-pill {
  background: rgba(40, 20, 10, 0.4) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(253, 186, 116, 0.15) !important;
  padding: 10px 28px !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em;
  color: #fbd38d !important;
}

/* Títulos gigantes e pesados (Novo Design Premium) */
.headline-container h1 {
  font-size: clamp(2.2rem, 5.5vw, 5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important; /* Premium mixed-case */
  color: #ffffff !important; /* Solid white base */
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  background-image: none !important;
}

.headline-container h1 .gradient-text {
  background-image: linear-gradient(to right, #ffffff, #c0c0c0) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

/* Subtítulo com boa leitura */
.hero-subtitle {
  font-size: clamp(1.1rem, 2.2vw, 1.45rem) !important;
  color: #c0c0c0 !important;
  max-width: 820px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Botões robustos e elegantes */
.btn-primary-gradient {
  padding: 18px 42px !important;
  font-size: 1.15rem !important;
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 700 !important;
}

.btn-secondary-outline {
  padding: 18px 42px !important;
  font-size: 1.15rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ========================================= */
/* AJUSTES FINAIS - ALTURA E FEIXES DE LUZ   */
/* ========================================= */
/* Força o container do Hero a ter a altura correta e não aceitar transbordo */
.hero-shader-root {
  position: relative !important;
  height: 92vh !important; /* Mantém os 92vh originais que projetamos */
  overflow: hidden !important;
  display: block !important;
}

/* Remove o Canvas do fluxo de espaço do site. Ele vira um fantasma ao fundo */
#shader-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: -1 !important; /* Fica atrás de tudo (global) */
  pointer-events: none !important; /* Não bloqueia cliques */
}

/* Garante que a seção seguinte do site suba para o seu lugar correto */
.hero-shader-root + section, 
.hero-shader-root + div {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  clear: both !important;
}

.hero-content, .hero-container, .hero-text-wrap {
  position: relative !important;
  z-index: 2 !important; /* Camada acima do Canvas */
}
  background: transparent;
  z-index: -1;
}
.hero-content-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  padding: 0 20px;
  font-family: sans-serif;
}
.trust-badge-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(249, 115, 22, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(253, 186, 116, 0.3);
  border-radius: 9999px;
  font-size: 0.875rem;
}
.badge-text { color: #ffedd5; }
.headline-container h1 {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.hero-headline-1 { background-image: linear-gradient(to right, #fed7aa, #facc15, #fcd34d); }
.hero-headline-2 { background-image: linear-gradient(to right, #fde047, #fb923c, #f87171); }

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: #c0c0c0;
  max-width: 720px;
  margin: 24px auto 0 auto;
  font-weight: 300;
  line-height: 1.6;
}
.hero-buttons-container {
  display: flex;
  gap: 16px;
  margin-top: 40px;
}
.btn-primary-gradient {
  padding: 16px 32px;
  background: #ffffff;
  color: #000000;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-primary-gradient:hover { transform: scale(1.05); box-shadow: 0 10px 25px rgba(255, 255, 255, 0.4); }
.btn-secondary-outline {
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}
.btn-secondary-outline:hover { transform: scale(1.05); background: rgba(255, 255, 255, 0.15); }

/* Animações nativas de Keyframes */
@keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes framedInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
.animate-fade-in-down { animation: fadeInDown 0.8s ease-out forwards; }
.animate-fade-in-up { animation: framedInUp 0.8s ease-out forwards; opacity: 0; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-600 { animation-delay: 0.6s; }
.animation-delay-800 { animation-delay: 0.8s; }

/* ========================================= */
/* AJUSTES PREMIUM DA TIPOGRAFIA HERO        */
/* ========================================= */
.hero-content-overlay {
  padding: 0 8% !important;
}

/* A pílula de cima idêntica à imagem */
.trust-badge-pill {
  background: rgba(40, 20, 10, 0.4) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(253, 186, 116, 0.15) !important;
  padding: 10px 28px !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em;
  color: #fbd38d !important;
}

/* Títulos gigantes e pesados (Novo Design Premium) */
.headline-container h1 {
  font-size: clamp(2.2rem, 5.5vw, 5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important; /* Premium mixed-case */
  color: #ffffff !important; /* Solid white base */
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  background-image: none !important;
}

.headline-container h1 .gradient-text {
  background-image: linear-gradient(to right, #ffffff, #c0c0c0) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

/* Subtítulo com boa leitura */
.hero-subtitle {
  font-size: clamp(1.1rem, 2.2vw, 1.45rem) !important;
  color: #c0c0c0 !important;
  max-width: 820px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Botões robustos e elegantes */
.btn-primary-gradient {
  padding: 18px 42px !important;
  font-size: 1.15rem !important;
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 700 !important;
}

.btn-secondary-outline {
  padding: 18px 42px !important;
  font-size: 1.15rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ========================================= */
/* AJUSTES FINAIS - ALTURA E FEIXES DE LUZ   */
/* ========================================= */
/* Força o container do Hero a ter a altura correta e não aceitar transbordo */
.hero-shader-root {
  position: relative !important;
  height: 92vh !important; /* Mantém os 92vh originais que projetamos */
  overflow: hidden !important;
  display: block !important;
}

/* Remove o Canvas do fluxo de espaço do site. Ele vira um fantasma ao fundo */
#shader-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: -1 !important; /* Fica atrás de tudo (global) */
  pointer-events: none !important; /* Não bloqueia cliques */
}

/* Garante que a seção seguinte do site suba para o seu lugar correto */
.hero-shader-root + section, 
.hero-shader-root + div {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  clear: both !important;
}

.hero-content, .hero-container, .hero-text-wrap {
  position: relative !important;
  z-index: 2 !important; /* Camada acima do Canvas */
}

.hero-content-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important; /* Camada acima do Canvas */
}

/* ========================================= */
/* PADRONIZAÇÃO DE ESPAÇAMENTO (MODELO 2 - LUXO / FLOW) */
/* ========================================= */
section {
  padding: 160px 4% !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

@media (max-width: 768px) {
  section {
    padding: 100px 4% !important;
    min-height: 100vh !important;
  }
}

/* ========================================= */
/* HORIZONTAL SCROLL (GSAP)                  */
/* ========================================= */
.horizontal-section {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

.h-header-container {
  text-align: center;
  padding: 80px 20px 40px;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 10;
}

.h-title {
  font-family: 'Inter', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: #FCFCFA;
  margin-bottom: 10px;
}

.h-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  color: #c0c0c0; /* Cinza prateado padronizado */
}

.horizontal-track {
  display: flex;
  height: 100vh;
  width: max-content;
  align-items: center;
}

.horizontal-panel {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 160px 20px 40px 20px; /* espaco pro texto no topo */
}

.h-panel-card {
  width: 100%;
  max-width: 600px;
  background: rgba(216, 185, 111, 0.15); /* Dourado escurecido */
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 50px;
  color: #FCFCFA;
  text-align: left;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.h-panel-title {
  font-family: 'Inter', sans-serif;
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: #d8b96f;
  font-weight: 800;
}

.h-print {
  width: 768px;
  height: auto;
  max-width: 85vw;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  flex-shrink: 0;
}

.h-panel-content {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1200px;
}

.h-panel-info {
  max-width: 280px;
  flex-shrink: 0;
}

.h-panel-info-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #FCFCFA;
  margin-bottom: 12px;
  line-height: 1.2;
}

.h-panel-info-sub {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  font-weight: 400;
}

/* ========================================= */
/* MOBILE RESPONSIVO COMPLETO                */
/* ========================================= */
@media (max-width: 768px) {

  /* --- INTRO VIDEO --- */
  .intro-stack-section {
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .fullscreen-video {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* --- HERO --- */
  .hero-shader-root {
    height: 50vh !important;
  }
  .hero-content-overlay {
    padding: 0 6% !important;
  }
  .headline-container h1 {
    font-size: clamp(1.6rem, 7vw, 2.8rem) !important;
    letter-spacing: -0.02em !important;
  }
  .hero-subtitle {
    font-size: 1rem !important;
    max-width: 100% !important;
    margin: 16px auto 0 auto !important;
  }
  .hero-buttons-container {
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 28px !important;
    width: 100% !important;
    align-items: center !important;
  }
  .btn-primary-gradient,
  .btn-secondary-outline {
    width: 100% !important;
    max-width: 300px !important;
    padding: 14px 24px !important;
    font-size: 1rem !important;
    text-align: center !important;
  }

  /* --- SEÇÃO 4 PASSOS --- */
  .secao-conteudo-escura {
    padding: 60px 5% !important;
    padding-bottom: 80px !important;
  }
  .titulo-centralizado-passos {
    margin-top: 20px !important;
  }
  .titulo-centralizado-passos h2 {
    font-size: 1.5rem !important;
  }
  .psi-cards-container {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 40px !important;
  }
  .psi-card-glass {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px !important;
  }
  .psi-card-glass h4 {
    font-size: 1.15rem !important;
  }
  .psi-card-glass p {
    font-size: 0.95rem !important;
  }

  /* --- SEÇÃO FERRAMENTAS (ACCORDION) --- */
  .secao-conteudo-escura-centralizada {
    padding: 60px 5% !important;
  }
  .dominio-titulo {
    font-size: 1.7rem !important;
  }
  .dominio-subtitulo {
    font-size: 1rem !important;
  }
  .psi-accordion {
    padding-left: 0 !important;
  }
  .psi-accordion::before {
    display: none !important;
  }
  .accordion-item::before {
    display: none !important;
  }
  .accordion-title {
    font-size: 1.1rem !important;
  }
  .accordion-header {
    padding: 18px 16px !important;
  }
  .accordion-content p {
    padding: 0 16px 16px 16px !important;
    font-size: 0.95rem !important;
  }
  .btn-sanfona {
    margin-left: 16px !important;
    font-size: 0.85rem !important;
    padding: 10px 24px !important;
  }

  /* --- HORIZONTAL SCROLL => EMPILHADO NO MOBILE --- */
  .horizontal-section {
    height: auto !important;
    min-height: auto !important;
    padding: 60px 5% !important;
    overflow: visible !important;
  }
  .h-header-container {
    position: relative !important;
    padding: 0 0 30px 0 !important;
    width: 100% !important;
  }
  .h-title {
    font-size: 1.5rem !important;
  }
  .h-subtitle {
    font-size: 1rem !important;
  }
  .horizontal-track {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
    gap: 50px !important;
    transform: none !important; /* Anula qualquer transform do GSAP */
  }
  .horizontal-panel {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .h-panel-content {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
    width: 100% !important;
  }
  .h-print {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    border-radius: 10px !important;
  }
  .h-panel-info {
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 10px !important;
  }
  .h-panel-info-title {
    font-size: 1.2rem !important;
    margin-bottom: 6px !important;
  }
  .h-panel-info-sub {
    font-size: 0.9rem !important;
  }

  /* --- PREÇOS --- */
  #secao-investimento {
    padding: 60px 5% !important;
    min-height: auto !important;
  }
  .investimento-titulo {
    font-size: 1.7rem !important;
    margin-bottom: 40px !important;
  }
  .investimento-cards-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
  }
  .investimento-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 30px 20px !important;
  }
  .card-destaque {
    transform: none !important;
  }
  .investimento-card:hover,
  .card-destaque:hover {
    transform: none !important;
  }
  .plano-preco {
    font-size: 2.8rem !important;
  }

  /* --- FAQ --- */
  #secao-faq {
    padding: 60px 5% 80px 5% !important;
    min-height: auto !important;
  }
  .faq-titulo {
    font-size: 1.6rem !important;
  }
  .faq-subtitulo {
    font-size: 0.95rem !important;
  }
  .faq-accordion {
    padding-left: 0 !important;
  }

  /* --- PADRONIZAÇÃO GLOBAL MOBILE --- */
  section {
    padding: 60px 5% !important;
    min-height: auto !important;
  }

  /* --- Desabilita WebGL shader no mobile para performance --- */
  .shader-canvas-layer {
    display: none !important;
  }
}

/* Telas muito pequenas (< 380px) */
@media (max-width: 380px) {
  .headline-container h1 {
    font-size: 1.4rem !important;
  }
  .hero-subtitle {
    font-size: 0.9rem !important;
  }
  .btn-primary-gradient,
  .btn-secondary-outline {
    max-width: 100% !important;
    font-size: 0.9rem !important;
  }
}