/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #0a0a0a;
    color: #fff;
    overflow-x: hidden;
}

/* O container do scroll */
.scroll-container {
    /* 250vh significa 100vh da tela inicial + 150vh de espaço para fazer o scroll funcionar */
    height: 250vh; 
    position: relative;
}

/* O Hero que fica fixo */
.hero-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #000;
}

/* Imagens de fundo */
.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.bg-image-2 {
    background-image: url('OTIMIZADAS/2.webp');
    z-index: 1;
    animation: slowZoom2 15s infinite alternate ease-in-out;
}

.bg-image-1 {
    background-image: url('OTIMIZADAS/1.webp');
    z-index: 2;
    will-change: opacity, transform;
    /* Desfoque na primeira imagem */
    filter: blur(10px);
    animation: slowZoom1 15s infinite alternate ease-in-out;
}

/* Animações de zoom cinematográfico para os fundos */
@keyframes slowZoom1 {
    0% { transform: scale(1.05); } /* Começa um pouco maior pra esconder borda do blur */
    100% { transform: scale(1.15); }
}

@keyframes slowZoom2 {
    0% { transform: scale(1.0); }
    100% { transform: scale(1.1); }
}

.bottom-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 40%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

.gate-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

/* Grades Desenhadas com CSS */
.gate {
    position: absolute;
    top: 0;
    width: 50%; /* Cada metade ocupa 50% da tela */
    height: 100%;
    will-change: transform;
    background-color: transparent;
    /* Suportes horizontais (2 tubos finos transversais) */
    background-image: 
        linear-gradient(to bottom, transparent 20%, #0a0a0a 20%, #444 20.3%, #111 20.8%, transparent 20.8%, transparent 80%, #0a0a0a 80%, #444 80.3%, #111 80.8%, transparent 80.8%);
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.8));
}

.gate-left {
    left: 0;
    border-right: 6px solid #222;
    box-shadow: inset -3px 0 6px #000;
    /* Tubos verticais repetindo da direita (centro) para a esquerda */
    background-image: 
        linear-gradient(to bottom, transparent 20%, #0a0a0a 20%, #444 20.3%, #111 20.8%, transparent 20.8%, transparent 80%, #0a0a0a 80%, #444 80.3%, #111 80.8%, transparent 80.8%),
        repeating-linear-gradient(to left, 
            transparent 0, 
            transparent 120px, 
            #050505 120px, 
            #333 122px, 
            #555 125px, 
            #333 128px, 
            #050505 130px
        );
}

.gate-right {
    right: 0;
    border-left: 6px solid #222;
    box-shadow: inset 3px 0 6px #000;
    /* Tubos verticais repetindo da esquerda (centro) para a direita */
    background-image: 
        linear-gradient(to bottom, transparent 20%, #0a0a0a 20%, #444 20.3%, #111 20.8%, transparent 20.8%, transparent 80%, #0a0a0a 80%, #444 80.3%, #111 80.8%, transparent 80.8%),
        repeating-linear-gradient(to right, 
            transparent 0, 
            transparent 120px, 
            #050505 120px, 
            #333 122px, 
            #555 125px, 
            #333 128px, 
            #050505 130px
        );
}

/* Textos Minimalistas da Hero */
.hero-text {
    position: absolute;
    top: 65%; /* Ajustado para compensar o novo alinhamento */
    left: 50%;
    transform: translateX(-50%); /* Alinhamento pelo topo para que o texto 2 fique exatamente em cima do 1 */
    z-index: 5; /* Fica acima de tudo, inclusive da grade e do gradiente */
    text-align: center;
    width: 95%;
    max-width: 1100px; /* Bem mais largo para garantir no máximo 2 linhas */
    pointer-events: none; /* Não bloqueia cliques */
    will-change: opacity, transform;
}

.hero-text h2 {
    font-family: 'Playfair Display', serif; /* Fonte que transmite muita autoridade */
    font-size: clamp(1.8rem, 3.5vw, 2.8rem); /* Responsivo para não quebrar em muitas linhas */
    font-weight: 800; /* Fonte mais forte / bold */
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 4px 30px rgba(0,0,0,1); /* Sombra mais intensa para ajudar no contraste */
    letter-spacing: -0.5px;
    text-wrap: balance; /* Garante que as linhas fiquem equilibradas mesmo em telas menores */
}

.highlight-red {
    color: #cc0000; /* Vermelho mais escuro e sério (crimson) */
    animation: redPulse 3s infinite alternate ease-in-out; /* Pulso mais lento e elegante */
}

@keyframes redPulse {
    0% {
        text-shadow: 0 0 10px rgba(204, 0, 0, 0.4), 0 0 20px rgba(204, 0, 0, 0.2);
    }
    100% {
        text-shadow: 0 0 15px rgba(204, 0, 0, 0.8), 0 0 30px rgba(204, 0, 0, 0.6), 0 0 45px rgba(204, 0, 0, 0.4);
    }
}

/* Frase 1 inicia visível */
.phrase-1 {
    opacity: 1;
}

/* Frase 2 inicia invisível, e levemente mais abaixo para fazer um efeito de subir */
.phrase-2 {
    opacity: 0;
    transform: translate(-50%, 15%); 
}

/* Prova Social (Avatares) */
.social-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
}

.avatars {
    display: flex;
}

.avatar {
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #111;
    border: 1px solid rgba(212, 175, 55, 0.6); /* Borda dourada fina e elegante */
    margin-left: -15px;
    overflow: hidden; /* Garante que o blur não vaze pra fora da bola */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* O blur é aplicado à imagem de fundo através do pseudo-elemento */
.avatar::before {
    content: '';
    position: absolute;
    /* Faz o pseudo-elemento um pouquinho maior para a borda desfocada não aparecer */
    inset: -5px; 
    background-size: cover;
    background-position: center;
    filter: blur(2.5px);
}

.avatar:first-child {
    margin-left: 0;
}
.avatar:first-child::before {
    background-image: url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=100&auto=format&fit=crop');
}
.avatar:nth-child(2)::before {
    background-image: url('https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=100&auto=format&fit=crop');
}
.avatar:nth-child(3)::before {
    background-image: url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=100&auto=format&fit=crop');
}
.avatar:nth-child(4)::before {
    background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=100&auto=format&fit=crop');
}

.social-proof span {
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #d4af37; /* Dourado combinando com as bordas */
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    margin-left: 10px;
}

/* Utilitários para controle exato de quebra de linha no Desktop vs Mobile */
@media (min-width: 769px) {
    .mobile-only { display: none !important; }
    .desktop-space { display: inline !important; }
}
@media (max-width: 768px) {
    .mobile-only { display: block !important; }
    .desktop-space { display: none !important; }
    
    /* Prova social mais minimalista e delicada no mobile */
    .social-proof {
        margin-top: 25px;
        gap: 10px;
    }
    .avatar {
        width: 32px;
        height: 32px;
        margin-left: -12px;
    }
    .social-proof span {
        font-size: 0.7rem;
        letter-spacing: 1px;
        margin-left: 5px;
        white-space: nowrap; /* Impede que o texto quebre em 2 linhas */
    }
    .hero-text h2 {
        font-size: 1.75rem !important; /* Tamanho exato para encaixar as 3 linhas sem quebras extras */
        line-height: 1.25;
        padding: 0 10px;
    }
}

/* =========================================
   NOVA ESTRUTURA (DOBRAS DE LUXO)
========================================= */

.gold-divider {
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.8), transparent);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
    position: relative;
    z-index: 10;
}

.fold {
    position: relative;
    min-height: 100vh;
    background-color: #050505; /* Fundo base muito escuro */
    padding: 100px 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 5;
}

.fold-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
}

.text-column {
    flex: 1;
    min-width: 300px;
}

.image-column {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

/* Tipografia e Ícones */
.luxury-icon {
    font-size: 1.8rem; /* Reduzido para ficar minimalista */
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
}

.gold-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem); /* Bem menor e elegante */
    font-weight: 600;
    color: #d4af37;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

.gold-subtitle {
    font-family: 'Playfair Display', serif;
    color: #cca450;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

/* Classes Utilitárias */
.text-center {
    text-align: center;
}

.bg-text-huge {
    position: absolute;
    top: 0; /* Alinha o texto ao topo da dobra */
    left: 50%;
    transform: translateX(-50%); /* Centraliza horizontalmente, sem empurrar verticalmente */
    font-family: 'Playfair Display', serif;
    font-size: 20vw; /* Tamanho massivo para estourar a tela com elegância */
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
    text-align: center;
    line-height: 0.85;
    pointer-events: none;
    z-index: 0;
    letter-spacing: -5px;
}

/* Dobra 1.5 - Diferenciais */
.fold-differentials {
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #020b18 0%, #051429 50%, #03060d 100%);
    padding: 100px 0;
    position: relative;
}

.diff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
}

.diff-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 50px 35px;
    text-align: left;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.diff-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at top right, rgba(43, 108, 176, 0.1), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.diff-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 20px rgba(212, 175, 55, 0.1);
}

.diff-card:hover::before {
    opacity: 1;
}

.diff-icon {
    margin-bottom: 25px;
    display: inline-block;
}

.diff-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.diff-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #b0b0b0;
    line-height: 1.7;
    position: relative;
    z-index: 2;
}

/* Dobra 2 - Serviços */
.fold-services {
    position: relative;
    background-color: #03060d; /* Fundo escuro base */
    overflow: hidden;
}

.fold-services .fold-content {
    justify-content: center; /* Agrupa o hero e o texto no centro */
    gap: 50px; /* Distância exata entre eles */
}

.fold-services .image-column {
    flex: 0 0 auto; /* Tamanho natural da imagem */
    justify-content: center;
    padding: 0;
}

.fold-services .text-column {
    flex: 0 0 auto; /* Não estica */
    max-width: 450px;
    padding: 0;
}

.fold-services .text-column .gold-title {
    max-width: 380px; /* Limita a headline para não passar o botão */
    line-height: 1.2;
}

.fold-services::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('OTIMIZADAS/bg 2.webp');
    background-size: cover;
    background-position: -15vw center; /* Empurra o rosto para a borda */
    transform: scaleX(-1); /* Mantém o rosto na direita! */
    z-index: 1;
}

.texture-overlay {
    position: absolute;
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
    opacity: 0.1;
    pointer-events: none;
    z-index: 2;
}

/* Layout específico da Dobra 2 (3 espaços visuais) */
.fold-services .fold-content {
    justify-content: flex-start; /* Alinha a partir da esquerda */
    max-width: 1400px; /* Alarga o container para caber tudo sem sobrepor */
}

.fold-services .image-column {
    flex: 0 0 25%; /* Hero na ponta esquerda */
    margin-left: 5%; /* Puxa o Hero mais pro meio */
}

.fold-services .text-column {
    flex: 0 0 35%; /* Reduz a largura para forçar o texto a quebrar em 3 ou mais linhas */
    margin-left: 6%; /* Puxa o texto um pouco mais pro meio */
    /* O resto do espaço (quase 30%) fica vazio na direita para o rosto! */
}

.service-item {
    margin-bottom: 20px;
    border-left: 1px solid rgba(212, 175, 55, 0.4);
    padding-left: 15px;
    transition: border-color 0.3s ease;
}

.service-item:hover {
    border-color: rgba(212, 175, 55, 1);
}

.service-item h3 {
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 5px;
}

.service-item p {
    font-size: 0.85rem;
    color: #a0a0a0;
    line-height: 1.6;
    max-width: 45ch; /* Força o texto a quebrar antes de ficar longo, garantindo 3 linhas */
}

.lawyer-portrait {
    max-width: 100%; /* Agora ele ocupa todo o seu terço esquerdo */
    margin: 0;
    display: block;
    filter: brightness(0.9) contrast(1.1);
    animation: heroBluePulse 3s infinite alternate ease-in-out;
}

/* Animação de luz azul pulsante no fundo do hero (foto do advogado) */
@keyframes heroBluePulse {
    0% {
        filter: brightness(0.9) contrast(1.1) drop-shadow(0 0 10px rgba(43, 108, 176, 0.3));
    }
    100% {
        filter: brightness(0.9) contrast(1.1) drop-shadow(0 0 50px rgba(43, 108, 176, 0.9));
    }
}

.lawyer-portrait-bottom {
    max-width: 100%;
    border-radius: 5px;
    box-shadow: -20px 20px 0 rgba(212, 175, 55, 0.1);
}

/* Dobra 3 - Glass Card */
.fold-methodology {
    background-color: #000;
}

.glass-card {
    background: linear-gradient(135deg, #dfd0ad 0%, #a88a44 100%);
    border-radius: 15px;
    padding: 60px;
    display: flex;
    align-items: center;
    gap: 50px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
}

.card-text {
    flex: 1;
    color: #222;
    z-index: 2;
}

.dark-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: #111;
}

.step-item {
    margin-bottom: 15px;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #333;
}

.step-num {
    font-weight: 800;
    color: #000;
}

.card-image {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hourglass-img {
    max-width: 80%;
    max-height: 400px; /* Restringe a altura para não passar dos textos */
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
}

.bg-card-text {
    position: absolute;
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    font-weight: 800;
    line-height: 0.9;
    color: rgba(0,0,0,0.08);
    text-align: center;
    z-index: 1;
}



/* Dobra 3.5 - Depoimentos (Scroll-Driven Carousel) */
.sticky-carousel-container {
    height: 300vh; /* Pista de rolagem de 3 telas para dar tempo do carrossel passar */
    background: linear-gradient(180deg, #020b18 0%, #03060d 100%);
    position: relative;
}

.sticky-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; /* Esconde as cartas que estão fora da tela */
}

.testi-track-wrapper {
    width: 100%;
    margin-top: 40px;
    padding-left: 50vw; /* Inicia o carrossel a partir do meio da tela para um efeito dramático de entrada */
}

.testi-track {
    display: flex;
    gap: 40px;
    width: max-content; /* Permite que a track cresça o quanto for necessário */
    will-change: transform; /* Otimização de performance para a animação */
    padding-right: 50vw; /* Espaço para a última carta sair graciosamente */
}

.testi-card {
    width: 500px; /* Cartas mais largas e imponentes para luxo */
    flex-shrink: 0; /* Impede que esmaguem umas nas outras */
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 12px;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease;
}

.testi-card:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Responsivo Mobile para Depoimentos (Carrossel Nativo Touch) */
@media (max-width: 768px) {
    .sticky-carousel-container {
        height: auto !important; /* Desativa os 300vh de rolagem vertical */
        padding: 60px 0;
    }
    .sticky-viewport {
        position: relative !important; /* Desativa o sticky */
        height: auto !important;
        overflow: visible;
    }
    .testi-track-wrapper {
        padding-left: 0; /* Remove o espaçamento de entrada dramática do desktop */
        margin-top: 20px;
        overflow-x: auto; /* Ativa o scroll horizontal nativo no celular */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px; /* Espaço para sombra/scroll */
    }
    .testi-track {
        padding-right: 20px; /* Respiro final */
        padding-left: 20px; /* Respiro inicial */
        gap: 20px;
        transform: none !important; /* Desativa a translação JS no celular */
    }
    .testi-card {
        width: 85vw; /* Ocupa quase toda a tela do celular, deixando a pontinha do próximo card visível */
        scroll-snap-align: center;
        padding: 35px 25px;
    }
    /* Ocultar barra de rolagem nativa para manter o luxo */
    .testi-track-wrapper::-webkit-scrollbar {
        display: none;
    }
    .testi-track-wrapper {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

.quote-bg {
    position: absolute;
    top: -20px;
    right: 20px;
    font-family: 'Playfair Display', serif;
    font-size: 150px;
    color: rgba(212, 175, 55, 0.05);
    line-height: 1;
    z-index: 0;
    pointer-events: none;
}

.testi-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.testi-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #d4af37, #aa8529);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #000;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.testi-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: 0.5px;
}

.testi-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #b0b0b0;
    line-height: 1.7;
    position: relative;
    z-index: 2;
    font-style: italic;
}

/* Dobra 4 - Sobre */
.fold-about {
    background: radial-gradient(circle at right, #0a0e17 0%, #050505 60%);
    position: relative;
}

.chess-element {
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 300px;
    opacity: 0.2;
    pointer-events: none;
    mask-image: linear-gradient(to top, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 50%, transparent 100%);
}

.fold-about p {
    font-size: 1.2rem;
    color: #a0a0a0;
    margin-bottom: 20px;
    line-height: 1.8;
}

/* Footer / Botões */
.gold-btn {
    display: inline-block;
    padding: 15px 40px;
    background: linear-gradient(90deg, #b8860b, #d4af37, #b8860b);
    color: #000;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    border-radius: 3px;
    transition: transform 0.3s;
    border: none;
    margin-top: 20px;
}

.gold-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}

.luxury-footer {
    padding: 100px 20px;
    background-color: #050505;
    text-align: center;
}

/* Animações Fade-up */
.fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsivo */
@media (max-width: 768px) {
    .glass-card {
        flex-direction: column;
        padding: 30px;
    }
    
    .reverse-mobile {
        flex-direction: column-reverse;
    }
    
    .bg-card-text {
        font-size: 3rem;
    }
}