/* ==========================================================
   NEW-INDEX.CSS - VERSÃO CONSOLIDADA E LIMPA
   Refatoração gradual para remover redundâncias
   ÚLTIMA ATUALIZAÇÃO: 2025-07-12 - TÍTULOS E TAMANHOS CORRIGIDOS V2
   ========================================================== */

/* ==========================================================
   VARIÁVEIS E CORES GLOBAIS
   ========================================================== */
:root {
    --cor-principal: #000000;
    --cor-secundaria: #f8f8f8;
    --cor-hover: #C89E4F;
    --cor-footer: #091E05;
    --cor-texto: #333;
    --cor-botao: #000000;
    --cor-botao-hover: #4b5563;
    --cor-divider: #000000;
    --cor-destaque: #14532d;
    --cor-subtitulo: #C89E4F;
    --cor-fundo-secao: #f4f4f4;
    
    /* TAMANHOS DE FONTE PADRONIZADOS */
    --fonte-pequena: 1.09rem;    /* 17px - Textos pequenos, labels */
    --fonte-normal: 1.25rem;     /* 20px - Texto padrão, botões pequenos */
    --fonte-media: 1.56rem;      /* 25px - Subtítulos, botões grandes */
    --fonte-grande: 2.5rem;      /* 40px - Títulos principais */
    --fonte-extra-grande: 3.44rem; /* 55px - Títulos de seção */
    
    /* TAMANHOS DE BOTÃO PADRONIZADOS */
    --botao-pequeno: var(--fonte-normal);    /* 1.25rem - Botões secundários */
    --botao-grande: var(--fonte-media);      /* 1.56rem - Botões principais */
    
    /* TAMANHOS ESPECIAIS PARA ÍCONES E MENUS */
    --icone-menu: 2.75rem;        /* 44px - Ícone do menu mobile */
}

/* ==========================================================
   RESET CSS BÁSICO PARA SCROLL - IGUAL AO AYAHUASCA
   ========================================================== */
html, body {
    overflow-x: hidden; /* Previne scroll horizontal */
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove margens do body especificamente */
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw;
}

/* ==========================================================
   HEADER E NAVEGAÇÃO - CONSOLIDADO
   ========================================================== */
/* Reset z-index para garantir que menu sempre fique na frente */
* {
    z-index: auto;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1000;
    background: rgba(10, 20, 40, 0.10);
    backdrop-filter: blur(4px);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 6vw 18px 6vw;
    border-bottom: 1.5px solid rgba(200, 158, 79, 0.13);
    transition: box-shadow 0.3s, border-bottom 0.3s, background 0.3s;
    will-change: transform;
}

.logo {
    font-size: var(--fonte-media); /* Padronizado */
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;
    color: var(--cor-subtitulo);
    letter-spacing: 1px;
    text-shadow: 0 2px 8px #0002;
    padding: 0;
    margin: 0;
    transition: color 0.2s;
}

.logo a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.logo a:hover {
    color: var(--cor-hover);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-icone {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hrefs, .hrefs-desktop {
    display: flex;
    gap: 18px;
    align-items: center;
    font-size: var(--fonte-normal); /* Padronizado */
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    color: var(--cor-secundaria);
    transition: color 0.2s;
}

/* Menu mobile - escondido no desktop */
.hrefs {
    display: none;
}

/* Menu desktop - visível no desktop */
.hrefs-desktop {
    display: flex;
}

.hrefs a, .hrefs-desktop a {
    color: var(--cor-secundaria);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 14px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    position: relative;
    font-size: var(--fonte-normal); /* Padronizado */
}

.hrefs a:hover, .hrefs-desktop a:hover {
    color: var(--cor-hover);
    background: rgba(200, 158, 79, 0.08);
    box-shadow: 0 2px 12px #c89e4f22;
}

.menu-toggle {
    display: none !important; /* Sempre escondido por padrão */
    background: none;
    border: none;
    font-size: var(--icone-menu); /* Padronizado */
    color: var(--cor-subtitulo);
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    margin-left: 18px;
    pointer-events: auto;
    user-select: none;
    -webkit-tap-highlight-color: rgba(132, 220, 198, 0.3);
}

.menu-toggle:active,
.menu-toggle:hover,
.menu-toggle:focus {
    transform: scale(1.1);
    color: var(--cor-hover);
    outline: none;
}

/* Media queries para navegação */
@media (max-width: 900px) {
    header {
        padding: 14px 3vw 14px 3vw;
    }
    .hrefs-desktop {
        gap: 10px;
        font-size: var(--fonte-pequena); /* Padronizado - 0.98rem ≈ 0.875rem */
    }
}

@media (max-width: 700px) {
    header {
        padding: 14px 20px !important;
        justify-content: space-between !important;
        align-items: center !important;
        display: flex !important;
        z-index: 9998 !important; /* Menor que o menu */
        position: fixed !important;
        background: rgba(10, 20, 40, 0.95) !important; /* Fundo mais opaco no mobile */
        backdrop-filter: blur(10px) !important;
        overflow: visible !important; /* Garantir que não corte o menu */
    }
    
    /* Esconde menu desktop no mobile */
    .hrefs-desktop {
        display: none !important;
    }
    
    /* Menu mobile - agora fora do header */
    .hrefs {
        display: flex !important; /* Mostra no mobile */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important; /* Largura total da tela */
        height: 100vh !important; /* Altura total da tela */
        flex-direction: column !important;
        background: linear-gradient(135deg, rgba(10, 20, 40, 0.98), rgba(16, 21, 28, 0.98)) !important;
        backdrop-filter: blur(15px) !important;
        box-shadow: none !important; /* Remove sombra lateral */
        padding: 120px 40px 40px 40px !important; /* Espaço para header + padding */
        align-items: center !important; /* Centraliza os links */
        justify-content: flex-start !important;
        gap: 20px !important; /* Mais espaço entre links */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-100%) !important; /* Vem de cima ao invés da lateral */
        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
        z-index: 9999 !important; /* Z-index alto mas não excessivo */
        overflow-y: auto !important;
    }
    
    /* Estado aberto do menu */
    .hrefs.show {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important; /* Desce para posição normal */
    }
    
    .hrefs a {
        width: auto !important; /* Largura automática ao invés de 100% */
        max-width: 300px !important; /* Largura máxima */
        padding: 20px 30px !important; /* Padding maior para melhor toque */
        border-radius: 25px !important; /* Bordas arredondadas */
        color: var(--cor-secundaria) !important;
        border: 2px solid transparent !important; /* Border ao invés de border-left */
        font-size: var(--fonte-media) !important; /* Padronizado */
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* Centraliza texto */
        margin-bottom: 0 !important; /* Remove margin, usa gap do container */
        transition: all 0.3s ease !important;
        text-align: center !important;
        background: rgba(132, 220, 198, 0.05) !important; /* Fundo sutil */
    }
    
    .hrefs a:hover,
    .hrefs a:focus,
    .hrefs a:active {
        background: rgba(132, 220, 198, 0.2) !important;
        color: #84DCC6 !important;
        border: 2px solid #84DCC6 !important;
        transform: translateY(-2px) !important; /* Efeito de elevação */
        box-shadow: 0 4px 15px rgba(132, 220, 198, 0.3) !important;
    }
    
    /* Logo no mobile - centralizada */
    .logo {
        flex: 1;
        text-align: center;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .logo-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    /* Botão menu no mobile - sempre visível e clicável */
    .menu-toggle {
        display: block !important;
        z-index: 10000 !important; /* Maior que o menu para ficar clicável */
        padding: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
        cursor: pointer !important;
        user-select: none !important;
        -webkit-tap-highlight-color: rgba(132, 220, 198, 0.3) !important;
        background: none !important;
        border: none !important;
        font-size: var(--icone-menu) !important; /* Padronizado */
        color: var(--cor-subtitulo) !important;
        transition: color 0.2s, transform 0.2s !important;
        flex-shrink: 0 !important;
        width: auto !important;
        height: auto !important;
        min-width: 44px !important; /* Área mínima de toque */
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
    
    .menu-toggle:hover,
    .menu-toggle:focus,
    .menu-toggle:active {
        color: var(--cor-hover) !important;
        transform: scale(1.1) !important;
        outline: none !important;
    }
    
    /* Backdrop do menu - agora desnecessário pois menu cobre tudo */
    .menu-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.3) !important; /* Mais sutil */
        z-index: 9997 !important; /* Menor que o menu */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.4s, visibility 0.4s !important;
    }
    
    .menu-backdrop.show {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* ==========================================================
   BOTÕES GLOBAIS - CONSOLIDADO
   ========================================================== */
.botao, button, .faq-btn {
    background-color: var(--cor-botao);
    color: white;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: var(--botao-pequeno); /* Padronizado */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.botao:hover, button:hover, .faq-btn:hover {
    background-color: var(--cor-botao-hover);
    transform: translateY(-2px);
}

/* ==========================================================
   SLIDER E BOTÃO - CONSOLIDADO
   ========================================================== */
.slider-btn-wrapper {
    position: absolute;
    bottom: 15vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(30px);
    transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1);
}

.slider-btn-wrapper.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.btn.slider-btn-modern {
    background: linear-gradient(90deg, #2b5fa3 0%, #1fae8b 100%);
    color: #fff;
    font-size: var(--botao-grande); /* Padronizado */
    font-weight: 600;
    padding: 0.9em 2.5em;
    border: none;
    border-radius: 2em;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
    outline: none;
    letter-spacing: 0.04em;
    position: relative;
    overflow: hidden;
    /* CORREÇÃO: Garantir texto centralizado */
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn.slider-btn-modern:hover, 
.btn.slider-btn-modern:focus {
    background: linear-gradient(90deg, #1fae8b 0%, #2b5fa3 100%);
    transform: translateY(-3px) scale(1.04);
}

.btn.slider-btn-modern span {
    display: block;
    text-align: center;
    width: 100%;
}

/* Mobile específico para slider */
@media (max-width: 768px) {
    .slider-btn-wrapper {
        bottom: 7vh;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .slider-btn-wrapper.active {
        transform: translateX(-50%) translateY(0);
    }
    
    .btn.slider-btn-modern {
        font-size: var(--fonte-normal);
        padding: 0.7em 1.7em;
        /* CORREÇÃO MOBILE: Garantir centralização */
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto;
        min-width: 200px;
    }
}

/* ==========================================================
   MODAL E GALERIA - CONSOLIDADO
   ========================================================== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
    border-radius: 8px;
}

.caption {
    margin: 15px auto;
    text-align: center;
    color: #fff;
    font-size: var(--fonte-normal); /* Padronizado - 18px → 16px */
}

.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
}

.galeria-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.galeria-container img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.3s ease;
}

.galeria-container img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.galeria h1, .galeria p {
    text-align: center;
    margin-bottom: 10px;
}

/* Mobile da galeria */
@media (max-width: 768px) {
    .galeria-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .galeria-container img {
        height: 120px; /* Reduzido de 150px para 120px */
        width: 100%;
    }
    
    .modal-content {
        max-width: 95%;
    }
}

@media (max-width: 480px) {
    .galeria-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .galeria-container img {
        height: 100px; /* Ainda menor em telas muito pequenas */
        width: 100%;
    }
}

/* ==========================================================
   CARDS E SEÇÕES - CONSOLIDADO
   ========================================================== */
.title-card-section {
    font-weight: bold;
    font-size: var(--fonte-extra-grande); /* Padronizado */
    text-align: center;
    padding: 25px 15px;
    color: #e6f7ef;
    margin-bottom: 25px;
    text-shadow: 0 2px 10px #10151c99;
    width: 94%;
    letter-spacing: 0.5px;
}

.card-section {
    display: flex;
    flex-wrap: nowrap;
    gap: 4%;
    justify-content: center;
    padding: 3% 2%;
    max-width: 98%;
    margin: 0 auto;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.card-section::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px) {
    .title-card-section {
        font-size: 28px;
        text-align: center;
        max-width: 94%;
        padding: 20px 10px;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .title-card-section {
        font-size: 24px;
        padding: 15px 10px;
        letter-spacing: 0;
    }
}

/* ==========================================================
   INTRODUÇÃO - CONSOLIDADO
   ========================================================== */
.introducao {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    width: 100%;
    min-height: 80vh; /* Reduzido de 100vh para permitir scroll */
    height: auto; /* Altura automática */
    padding: 80px 0; /* Padding superior e inferior */
}

.introducao-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    gap: 60px;
    min-height: calc(100vh - 160px); /* Altura mínima descontando o padding da seção */
}

.introducao .texto {
    flex: 1;
    max-width: 600px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.introducao .texto h1,
.introducao .h1-anim {
    font-size: var(--fonte-extra-grande) !important; /* Padronizado */
    font-weight: bold !important;
    color: #84DCC6 !important;
    margin-bottom: 3rem !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
}

.introducao .texto p,
.introducao .p-anim {
    font-size: var(--fonte-normal) !important; /* Padronizado - era 18px, agora 16px */
    line-height: 1.8 !important;
    color: #ffffff !important;
    margin-bottom: 3rem !important;
    margin-top: 0 !important;
    text-align: center !important;
    padding: 0 !important;
}

.introducao .botao {
    display: inline-block !important;
    background: linear-gradient(45deg, #84DCC6, #A8E6CF) !important;
    color: #153243 !important;
    padding: 24px 50px !important;
    text-decoration: none !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    font-size: var(--botao-grande) !important; /* Padronizado */
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(132, 220, 198, 0.3) !important;
    min-width: 320px !important;
    min-height: 60px !important;
    text-align: center !important;
    margin-top: 2rem !important;
    margin-bottom: 0 !important;
    align-self: center !important;
}

.introducao .botao:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(132, 220, 198, 0.5);
    background: linear-gradient(45deg, #A8E6CF, #84DCC6);
}

.introducao .imagem {
    flex: 1;
    max-width: 500px;
    text-align: center;
}

.introducao .imagem img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.introducao .imagem img:hover {
    transform: scale(1.02);
}

/* ==========================================================
   INTRODUÇÃO - ESTILOS MOBILE
   ========================================================== */
@media (max-width: 768px) {
    .introducao {
        padding: 60px 0 !important; /* Ajustado para ter padding só vertical */
        text-align: center !important;
        height: auto !important; /* Garantir altura automática no mobile */
    }
    
    .introducao-container {
        flex-direction: column !important;
        gap: 40px !important;
        padding: 0 20px !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        min-height: auto !important; /* Remove altura mínima no mobile */
    }
    
    .introducao .texto {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
    }
    
    .introducao .texto h1,
    .introducao .h1-anim {
        font-size: var(--fonte-grande) !important; /* Padronizado - 32px = 2rem */
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .introducao .texto p,
    .introducao .p-anim {
        font-size: var(--fonte-normal) !important; /* Padronizado */
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
        padding: 0 !important;
        line-height: 1.6 !important;
    }
    
    .introducao .botao {
        margin: 0 auto !important;
        align-self: center !important;
        text-align: center !important;
        display: block !important;
        width: fit-content !important;
        min-width: 280px !important;
        padding: 20px 40px !important;
        font-size: var(--botao-pequeno) !important; /* Padronizado - menor no mobile */
    }
    
    .introducao .imagem {
        width: 100% !important;
        max-width: 350px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    .introducao .imagem img {
        width: 100% !important;
        max-width: 350px !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

/* ==========================================================
   CARDS DAS CERIMÔNIAS - CONSOLIDADO
   ========================================================== */
.nossas-cerimonias-section {
    background: linear-gradient(135deg, #0a1219 0%, #112532 50%, #1e3a46 100%);
    padding: 80px 0;
    min-height: 600px;
}

.section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2%;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 408px;
    min-width: 336px;
    max-width: 432px;
    min-height: 420px;
    border: 1px solid #222c38;
    border-radius: 18px;
    padding: 36px 18px 36px 18px;
    box-shadow: 0 8px 32px #10151cbb;
    background: rgba(16, 21, 28, 0.96);
    color: #e6f7ef;
    transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s;
    flex-shrink: 0;
    margin: 0 10px;
    scroll-snap-align: center;
    position: relative;
}

/* Imagem do card em retângulo vertical */
.card img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    border-radius: 14px;
    transition: transform 0.5s cubic-bezier(.22,1,.36,1), filter 0.5s ease;
    box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}

.card:hover {
    transform: translateY(-12px) scale(1.04);
    box-shadow: 0 16px 32px #10151caa;
    border: 1.5px solid #7fffa788;
}

.card img {
    width: 100%;
    height: 580px; /* imagem maior verticalmente */
    object-fit: cover;
    border-radius: 14px;
    transition: transform 0.5s cubic-bezier(.22,1,.36,1), filter 0.5s ease;
    box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}

.card:hover img {
    transform: scale(1.07);
    filter: brightness(1.12);
}

.card .info {
    margin-top: 28px;
    text-align: center;
    width: 100%;
    padding: 0 14px;
}

.card .info .title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 18px;
    color: #7fffa7;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.5px;
}

.card .info .details {
    font-size: var(--fonte-media);
    color: #e6f7ef;
    opacity: 0.92;
    margin-bottom: 12px;
}

.card .info .button {
    display: inline-block;
    background: linear-gradient(45deg, #7fffa7, #84DCC6);
    color: #153243;
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 28px;
    font-weight: 600;
    font-size: var(--fonte-normal);
    transition: all 0.3s ease;
    margin-top: 18px;
    box-shadow: 0 5px 16px rgba(127, 255, 167, 0.28);
}

.card .info .button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(127, 255, 167, 0.45);
    background: linear-gradient(45deg, #84DCC6, #7fffa7);
}

/* ===== SEÇÃO QUEM SOMOS ===== */
.quem-somos-section {
    background: linear-gradient(120deg, #10151c 0%, #1a2633 100%);
    padding: 65px 0 130px 0;
    width: 100vw;
    min-height: 80vh;
    display: flex;
    justify-content: center;
}

.quem-somos-container {
    max-width: 1400px;
    width: 99%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 32px;
    padding: 6rem 3vw 6rem 3vw;
}

.quem-somos-titulo {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    color: #f7fafc;
    font-size: var(--fonte-extra-grande); /* Padronizado */
    text-align: center;
    padding-top: 1.8rem;
    padding-bottom: 2.2rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

.quem-somos-conteudo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 100px;
    width: 100%;
}

.quem-somos-img-col {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.quem-somos-img {
    width: 100%;
    max-width: 650px;
    min-width: 220px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 8px 32px #15324322, 0 2px 12px #84dcc633;
    filter: grayscale(10%) sepia(5%) brightness(1.05);
    background: var(--cor-principal, #000);
}

.quem-somos-texto-col {
    flex: 0 0 55%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    gap: 3.2rem;
    color: var(--cor-texto, #333);
}

.quem-somos-nome {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #e3f6f5;
    font-size: var(--fonte-grande);
    margin-bottom: 0.2em;
}

.quem-somos-cargo {
    font-family: 'Maitree', serif;
    font-weight: 600;
    color: #b2e4e0;
    font-size: 1.78rem;
    margin-bottom: 0.7em;
}

.quem-somos-paragrafo {
    font-family: 'Maitree', serif;
    color: #e0e7ef;
    font-size: 1.58rem;
    line-height: 1.7;
    margin-bottom: 0.7em;
}

.quem-somos-titulo,
.quem-somos-nome,
.quem-somos-cargo,
.quem-somos-paragrafo {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 1.2s cubic-bezier(.22,1,.36,1), transform 1.2s cubic-bezier(.22,1,.36,1);
}

.quem-somos-titulo.visible,
.quem-somos-nome.visible,
.quem-somos-cargo.visible,
.quem-somos-paragrafo.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsividade Quem Somos */
@media (max-width: 900px) {
    .quem-somos-container {
        width: 99%;
        padding: 1.5rem 0.5rem 1.5rem 0.5rem;
    }
    .quem-somos-conteudo {
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .quem-somos-section {
        padding: 36px 0 36px 0;
    }
    .quem-somos-titulo {
        font-size: var(--fonte-grande);
        padding-top: 1.1rem;
        padding-bottom: 1.3rem;
    }
    .quem-somos-conteudo {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
    .quem-somos-img-col,
    .quem-somos-texto-col {
        flex: none;
        width: 100%;
    }
    .quem-somos-img-col {
        order: 1;
    }
    .quem-somos-img {
        max-width: 400px;
        width: 90%;
    }
    .quem-somos-texto-col {
        order: 2;
        padding: 0 1rem;
        text-align: center;
    }
    .quem-somos-nome {
        font-size: 1.6rem;
    }
    .quem-somos-cargo {
        font-size: var(--fonte-normal);
        text-align: center; /* Centraliza o cargo no mobile */
        width: 100%;        /* Garante centralização */
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    .quem-somos-paragrafo {
        font-size: 0.95rem;
    }
}

/* ===== SEÇÃO DEPOIMENTOS ===== */
.depoimentos-section {
    background: linear-gradient(120deg, #153243 0%, #1a2633 100%);
    padding: 70px 0 60px 0;
    width: 100vw;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.depoimentos-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2%;
}

.depoimentos {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto 40px auto;
    padding: 30px 20px;
    background: rgba(16, 21, 28, 0.85);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.depoimentos-separacao {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 2rem;
    max-width: 700px;
    width: 100%;
}

.depoimento-titulo {
    font-size: 30px;
    font-weight: 600;
    color: #84DCC6;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    line-height: 1.2;
    text-align: left;
}

.depoimento-texto {
    font-size: var(--fonte-normal);
    color: #e6f7ef;
    line-height: 1.6;
    text-align: left;
    margin: 0;
}

.video-depoimento1,
.video-depoimento {
    flex: 0 0 auto;
    width: 400px;
    height: 400px;
    max-width: 400px;
    max-height: 400px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    object-fit: cover;
    display: block;
}

/* Responsividade Depoimentos */
@media (max-width: 900px) {
    .depoimentos {
        flex-direction: column;
        gap: 25px;
        padding: 25px 20px;
        max-width: 98vw;
        margin-bottom: 30px;
    }
    
    .depoimentos-separacao {
        padding: 0;
        align-items: center;
        text-align: center;
        max-width: 100%;
    }
    
    .depoimento-titulo {
        font-size: 24px;
        text-align: center;
        margin-bottom: 12px;
    }
    
    .depoimento-texto {
        font-size: var(--fonte-normal);
        line-height: 1.5;
        text-align: center;
    }
    
    .video-depoimento1,
    .video-depoimento {
        width: 350px;
        height: 350px;
        max-width: 350px;
        max-height: 350px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .depoimentos-section {
        padding: 45px 0 35px 0;
    }
    
    .depoimentos {
        padding: 20px 16px;
        border-radius: 8px;
        margin-bottom: 25px;
    }
    
    .depoimento-titulo {
        font-size: var(--fonte-media);
    }
    
    .video-depoimento1,
    .video-depoimento {
        width: 320px;
        height: 320px;
        max-width: 320px;
        max-height: 320px;
        border-radius: 6px;
    }
}

@media (max-width: 480px) {
    .depoimentos-section {
        padding: 35px 0 25px 0;
    }
    
    .depoimentos {
        padding: 15px 12px;
        gap: 20px;
    }
    
    .depoimento-titulo {
        font-size: var(--fonte-media);
    }
    
    .depoimento-texto {
        font-size: var(--fonte-pequena);
    }
    
    .video-depoimento1,
    .video-depoimento {
        width: 280px;
        height: 280px;
        max-width: 280px;
        max-height: 280px;
    }
}

/* ==========================================================
   FOOTER COMPLETE STYLES
   ========================================================== */
footer, .footer {
    background: linear-gradient(125deg, #10151c 0%, #153243 60%, #284B63 100%);
    color: #fff;
    position: relative;
    padding: 40px 0 20px 0;
    width: 100%;
    margin: 0;
    border-top: none;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}

/* Barra decorativa no topo do footer */
footer::before, .footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #84DCC6 0%, var(--cor-subtitulo) 100%);
    opacity: 0.85;
}

.container-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    gap: 30px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    justify-content: space-between;
    gap: 40px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}

.footer-column:first-child {
    align-items: center;
    text-align: center;
}

.logo-footer {
    width: 140px;
    height: 140px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    display: block;
    margin: 0 auto;
}

.logo-footer:hover {
    transform: scale(1.05);
}

.frase-footer {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: var(--fonte-media);
    font-weight: bold;
    max-width: 450px;
    text-align: center;
    color: #fff;
    line-height: 1.4;
    margin-top: 10px;
}

.frase-footer span {
    color: #84DCC6;
}

.contact-info {
    font-size: var(--fonte-normal);
    color: #f0f0f0;
    line-height: 1.6;
    text-align: left;
}

.contact-info h3 {
    color: #84DCC6;
    margin-bottom: 15px;
    font-size: var(--fonte-media);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.social-icons {
    display: flex;
    gap: 16px;
    margin-top: 20px;
    justify-content: center;
}

.footer-column:not(:first-child) .social-icons {
    justify-content: flex-start;
}

.social-icons img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    filter: brightness(0.9);
    transition: filter 0.3s, transform 0.3s;
}

.social-icons img:hover {
    filter: brightness(1.2) drop-shadow(0 4px 12px rgba(132, 220, 198, 0.5));
    transform: translateY(-5px) scale(1.1);
}

.mapa-footer {
    width: 100%;
    max-width: 300px;
    height: 200px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.footer-copyright {
    color: #c0c0c0;
    font-size: var(--fonte-pequena);
    text-align: center;
    margin-top: 25px;
    width: 100%;
}

/* Responsividade Footer */
@media (max-width: 992px) {
    .footer-top {
        flex-wrap: wrap;
    }
    
    .footer-column {
        flex: 1 1 45%;
        min-width: 250px;
    }
}

@media (max-width: 768px) {
    footer, .footer {
        padding: 30px 0 15px 0;
    }
    
    .footer-top {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    
    .footer-column {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        align-items: center;
        text-align: center;
    }
    
    .logo-footer {
        display: block;
        margin: 0 auto;
        width: 120px;
        height: 120px;
    }
    
    .frase-footer {
        text-align: center;
        margin: 10px auto;
        max-width: 100%;
        width: 100%;
    }
    
    .social-icons {
        justify-content: center;
        margin: 1rem auto;
        display: flex;
        width: 100%;
        gap: 8px;
    }
    
    .social-icons a {
        margin: 0;
        padding: 0;
    }
    
    .footer-column:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0 1rem;
    }
    
    .mapa-footer {
        width: 100%;
        max-width: 350px;
        height: 200px;
        margin: 0 auto;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border: 2px solid rgba(132, 220, 198, 0.2);
    }
    
    #map {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 12px;
        display: block;
        margin: 0 auto;
    }
    
    .contact-info {
        text-align: center;
        padding: 0 1rem;
    }
    
    .contact-item {
        justify-content: center;
        margin: 0.8rem 0;
    }
}

@media (max-width: 480px) {
    .footer-top {
        gap: 1.5rem;
        padding: 0 0.5rem;
    }
    
    .footer-column:last-child {
        padding: 0 0.5rem;
    }
    
    .logo-footer {
        width: 100px;
        height: 100px;
    }
    
    .frase-footer {
        font-size: var(--fonte-normal);
    }
    
    .contact-info h3 {
        font-size: var(--fonte-normal);
    }
    
    .contact-item {
        font-size: 15px;
    }
    
    .mapa-footer {
        height: 180px;
        max-width: 320px;
    }
}

/* ==========================================================
   SEÇÃO DESENVOLVIMENTO - DESENVOLVIMENTO 1
   ========================================================== */
.desenvolvimento {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 20px;
    width: 100%;
    text-align: left;
}

.imagem-cerimonia-desenvolvimento {
    width: 50%;
    max-width: 600px;
    height: auto;
    overflow: hidden;
    opacity: 0;
    animation: fadeIn 1.2s forwards;
}

.imagem-cerimonia-desenvolvimento img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.desenvolvimento-texto {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: var(--fonte-grande);
    color: var(--cor-texto);
}

@media (max-width: 768px) {
    .desenvolvimento {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .imagem-cerimonia-desenvolvimento {
        width: 90%;
        max-width: 400px;
    }

    .desenvolvimento-texto {
        font-size: var(--fonte-normal);
        max-width: 90%;
    }
}

/* ==========================================================
   SEÇÃO DESENVOLVIMENTO - DESENVOLVIMENTO 2
   ========================================================== */
.desenvolvimento-2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 50px;
    padding-top: 20px;
    width: 100%;
}

.imagem_cerimonia_desenvolvimento-2 {
    width: 704px;
    height: 704px;
    overflow: hidden;
    opacity: 0;
    animation: fadeIn 1.2s forwards;
}

.imagem_cerimonia_desenvolvimento-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.desenvolvimento-2_texto {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-size: 34px;
    color: var(--cor-texto);
}

@media (max-width: 768px) {
    .desenvolvimento-2 {
        flex-direction: column-reverse;
        text-align: center;
        gap: 0px;
    }

    .imagem_cerimonia_desenvolvimento-2 {
        width: 90%;
        height: auto;
        max-width: 400px;
    }

    .desenvolvimento-2_texto {
        font-size: var(--fonte-normal);
        max-width: 90%;
        gap: 10px;
    }

    /* desenvolvimento-3 escondido apenas no mobile - agora com especificidade correta */
    .desenvolvimento-3 {
        display: none !important;
    }
}

/* ==========================================================
   SEÇÃO DESENVOLVIMENTO - DESENVOLVIMENTO 3 (IMAGENS DESKTOP)
   ========================================================== */
.desenvolvimento-3 {
    width: 100%;
    margin-top: 20px;
    display: flex !important; /* Força aparição no desktop */
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.desenvolvimento-3_imagens {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 50px;
    width: 85%;
    height: 437px;
    overflow: hidden;
    opacity: 0;
    animation: fadeIn 1.2s forwards;
    margin: 20px auto; /* Centraliza e adiciona margem */
}

.desenvolvimento-3_imagens img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Adiciona sombra sutil */
}

.desenvolvimento-3_imagens img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Sombra mais intensa no hover */
}

/* ==========================================================
   DESENVOLVIMENTO-3 - REGRAS ESPECÍFICAS PARA DESKTOP/MOBILE
   ========================================================== */
   
/* Desktop - Mostra as imagens */
@media (min-width: 769px) {
    .desenvolvimento-3 {
        display: flex !important;
        width: 100%;
        margin-top: 20px;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }
    
    .desenvolvimento-3_imagens {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 50px;
        width: 85%;
        height: 437px;
        overflow: hidden;
        opacity: 0;
        animation: fadeIn 1.2s forwards;
        margin: 20px auto;
    }
    
    .desenvolvimento-3_imagens img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .desenvolvimento-3_imagens img:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }
}

/* Tablet/Mobile - Esconde as imagens */
@media (max-width: 768px) {
    .desenvolvimento-3 {
        display: none !important;
    }
    
    .desenvolvimento-3_imagens {
        display: none !important;
    }
}

/* ==========================================================
   SEÇÃO DESENVOLVIMENTO - COLUNAS
   ========================================================== */
.desenvolvimento-colunas {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important; /* Garante altura igual para todos */
    gap: 40px !important;
    flex-wrap: nowrap !important; /* Força cards em linha */
    padding: 40px 20px !important;
    min-height: auto !important;
    background: transparent !important;
    margin-top: -120px !important; /* Sobrepõe a seção de introdução */
    position: relative !important;
    z-index: 10 !important;
}

.desenvolvimento-coluna {
    flex: 0 0 480px !important; /* Tamanho fixo para ambos - aumentado de 420px para 480px */
    width: 480px !important; /* Força largura fixa igual para ambos - aumentado */
    max-width: 480px !important; /* Aumentado de 420px para 480px */
    min-width: 480px !important; /* Garantir que ambos tenham a mesma largura - aumentado */
    height: auto !important; /* Altura automática */
    padding: 63px 40px !important; /* Aumentado padding vertical em 15%: de 55px para 63px */
    background: rgba(255, 255, 255, 0.98) !important; /* MUITO MAIS OPACO PARA CONTRASTE */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 18px !important;
    text-align: center !important;
    position: relative !important;
    z-index: 11 !important;
}

.beneficio-icone {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #84DCC6 0%, #2E8B7B 100%);
    border-radius: 50%;
    box-shadow: 0 8px 16px rgba(132, 220, 198, 0.3);
}

.beneficio-icone svg {
    width: 40px;
    height: 40px;
    fill: #fff;
}

.desenvolvimento-coluna h3 {
    font-size: 1.6rem !important; /* Aumentado de 1.5rem para 1.6rem */
    color: #0f1419 !important; /* COR MUITO ESCURA PARA CONTRASTE MÁXIMO */
    margin-bottom: 1rem !important;
    font-weight: 700 !important;
    font-family: 'Playfair Display', serif !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.desenvolvimento-coluna p {
    font-size: 1.1rem !important; /* Aumentado de 1rem para 1.1rem */
    color: #1a1a1a !important; /* COR MUITO ESCURA PARA CONTRASTE MÁXIMO */
    line-height: 1.7 !important; /* Aumentado line-height para melhor legibilidade */
    font-family: 'Maitree', serif !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* CSS ESPECÍFICO PARA AS CLASSES DO HTML */
.beneficio-titulo {
    font-size: 1.6rem !important;
    color: #0f1419 !important; /* TÍTULO ESCURO */
    margin-bottom: 1rem !important;
    font-weight: 700 !important;
    font-family: 'Playfair Display', serif !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.beneficio-descricao {
    font-size: 1.1rem !important;
    color: #1a1a1a !important; /* TEXTO ESCURO */
    line-height: 1.7 !important;
    font-family: 'Maitree', serif !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

@media (max-width: 768px) {
    .desenvolvimento-colunas {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 15px !important;
        padding: 20px 15px !important;
        margin-top: 0 !important; /* Remove sobreposição no mobile */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        scroll-behavior: smooth !important;
        justify-content: flex-start !important;
    }
    
    .desenvolvimento-colunas::-webkit-scrollbar {
        display: none !important;
    }
    
    .desenvolvimento-coluna {
        flex: 0 0 340px !important; /* Aumentado de 300px para 340px */
        min-width: 340px !important; /* Aumentado de 300px para 340px */
        max-width: 340px !important; /* Aumentado de 300px para 340px */
        scroll-snap-align: start !important;
        margin-right: 0 !important;
        height: auto !important;
        padding: 35px 25px !important; /* Aumentado padding vertical: de 30px para 35px */
        background: rgba(255, 255, 255, 0.97) !important; /* Ainda mais opaco para melhor contraste */
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(8px) !important;
    }
    
    .desenvolvimento-coluna h3 {
        font-size: 1.4rem !important; /* Aumentado de 1.3rem */
        margin-bottom: 0.8rem !important;
        color: #0f1419 !important; /* COR MUITO ESCURA PARA MOBILE TAMBÉM */
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }
    
    .desenvolvimento-coluna p {
        font-size: 1rem !important; /* Mantido 1rem no mobile */
        line-height: 1.6 !important;
        color: #1a1a1a !important; /* COR MUITO ESCURA PARA MOBILE TAMBÉM */
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* CSS ESPECÍFICO MOBILE PARA AS CLASSES DO HTML */
    .beneficio-titulo {
        font-size: 1.4rem !important;
        color: #0f1419 !important; /* TÍTULO ESCURO NO MOBILE */
        margin-bottom: 0.8rem !important;
        font-weight: 700 !important;
        font-family: 'Playfair Display', serif !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }
    
    .beneficio-descricao {
        font-size: 1rem !important;
        color: #1a1a1a !important; /* TEXTO ESCURO NO MOBILE */
        line-height: 1.6 !important;
        font-family: 'Maitree', serif !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    }
    
    .beneficio-icone {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 1rem !important;
    }
    
    .beneficio-icone svg {
        width: 30px !important;
        height: 30px !important;
    }
}

.desenvolvimento-coluna:hover,
.desenvolvimento-coluna:focus-visible {
    border-color: #84DCC6;
    z-index: 2;
}

.desenvolvimento-coluna:hover .beneficio-icone svg,
.desenvolvimento-coluna:focus-visible .beneficio-icone svg {
    transform: scale(1.88);
    filter: drop-shadow(0 0 8px #84dcc6aa);
}

.beneficio-icone svg {
    transition: transform 0.35s cubic-bezier(.22,1,.36,1), filter 0.35s cubic-bezier(.22,1,.36,1);
}

/* ==========================================================
   GALERIA DE IMAGENS E SLIDER
   ========================================================== */
.slider {
    width: 100vw;
    height: 100vh;
    min-height: 400px;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.slider-content {
    display: flex;
    transition: transform 1s ease-in-out;
    width: 100%;
}

.slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    object-fit: cover;
    opacity: 1;
    animation: fadeIn 1.5s forwards;
    display: block !important;
}

.slide img:hover {
    filter: blur(100.5px) brightness(1) saturate(1.2);
}

.slide-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    z-index: 10;
    font-weight: bold;
    font-size: var(--fonte-grande);
}

@media (max-width: 768px) {
    .slider {
        width: 100vw !important;
        height: 100vh !important; /* Volta para 100vh para ocupar tela inteira */
        min-height: 100vh !important; /* Garante altura mínima */
        max-height: 100vh !important; /* Limita altura máxima */
        position: relative !important; /* CRÍTICO: relative para não bloquear scroll */
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important; /* Remove margin negativa */
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .slider-content {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
    }
    
    .slide {
        width: 100% !important;
        height: 100% !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Mudança de fill para cover */
        object-position: center center !important;
        filter: none !important;
        display: block !important;
    }
    
    .slide-text {
        font-size: 1.5rem !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 10 !important;
        text-align: center !important;
        width: 90% !important;
    }
}

/* Galeria */
.galeria {
    background: linear-gradient(135deg, #0a1219 0%, #112532 50%, #1e3a46 100%);
    padding: 60px 0;
    margin-bottom: 0;
    border-radius: 0;
    width: 100%;
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
}

.galeria h1 {
    color: #84DCC6;
    font-size: var(--fonte-extra-grande);
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
}

.galeria p {
    color: #e6f7ef;
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.galeria-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
}

/* Padrão 1 - Imagem pequena (quadrada) */
.galeria-item {
    height: 280px;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: rgba(16, 21, 28, 0.5);
    border: 1px solid rgba(132, 220, 198, 0.2);
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Padrão 2 - Imagem grande (retangular horizontal) */
.galeria-item.large {
    grid-column: span 2;
    height: 280px;
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border: none;
    outline: none;
    border-radius: 18px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    transition: transform 0.3s ease, filter 0.3s ease;
    min-width: 100%;
    min-height: 100%;
}

.galeria-item:hover {
    transform: scale(1.02);
    border: 2px solid var(--cor-subtitulo);
    box-shadow: 0 8px 25px rgba(132, 220, 198, 0.4);
}

.galeria-item:hover img {
    transform: scale(1.05);
    filter: brightness(1.1) contrast(1.05);
    transition: all 0.3s ease;
}

/* Mobile Layout - Layout bonito com 2 tamanhos distintos */
@media (max-width: 768px) {
    .galeria {
        padding: 40px 0;
        width: 100%;
        height: auto;
        min-height: auto;
    }
    
    .galeria h1 {
        font-size: var(--fonte-grande);
    }
    
    .galeria p {
        font-size: var(--fonte-normal);
        padding: 0 20px;
    }
    
    .galeria-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 220px;
        gap: 25px;
        padding: 0 15px;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: auto;
        box-sizing: border-box;
    }
    
    .galeria-item:nth-child(1) {
        grid-column: span 2;
        height: 220px;
    }
    
    .galeria-item:nth-child(2) {
        grid-column: span 1;
        height: 220px;
    }
    
    .galeria-item:nth-child(3) {
        grid-column: span 1;
        height: 220px;
    }
    
    .galeria-item:nth-child(4) {
        grid-column: span 2;
        height: 220px;
    }
    
    .galeria-item:nth-child(5) {
        grid-column: span 1;
        height: 220px;
    }
    
    .galeria-item:nth-child(6) {
        grid-column: span 1;
        height: 220px;
    }
    
    /* Ajuste específico para imagens no mobile */
    .galeria-item img {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 18px;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* Mobile pequeno */
@media (max-width: 480px) {
    .galeria-container {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
        gap: 15px;
        padding: 0 10px;
        height: auto;
        min-height: auto;
    }
    
    .galeria-item:nth-child(1) {
        grid-column: span 2;
        height: 180px;
    }
    
    .galeria-item:nth-child(2) {
        grid-column: span 1;
        height: 180px;
    }
    
    .galeria-item:nth-child(3) {
        grid-column: span 1;
        height: 180px;
    }
    
    .galeria-item:nth-child(4) {
        grid-column: span 2;
        height: 180px;
    }
    
    .galeria-item:nth-child(5) {
        grid-column: span 1;
        height: 180px;
    }
    
    .galeria-item:nth-child(6) {
        grid-column: span 1;
        height: 180px;
    }
    
    /* Ajuste específico para imagens no mobile pequeno */
    .galeria-item img {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 18px;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* ==========================================================
   CORREÇÃO DEFINITIVA PARA MOBILE - ELIMINA ESPAÇO LATERAL
   ========================================================== */

/* Reset limpo igual ao ayahuasca que funciona */
@media (max-width: 768px) {
    * {
        box-sizing: border-box !important;
    }
    
    html, body {
        overflow-x: hidden !important; /* Previne scroll horizontal */
        overflow-y: auto !important; /* FORÇA scroll vertical */
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important; /* CRÍTICO para scroll funcionar */
        height: auto !important; /* Altura automática */
        min-height: 100vh !important;
    }
    
    /* Força todos os containers principais a não excederem a viewport */
    .container, .main-container, section, .secao {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        position: relative !important; /* Garante posicionamento correto */
    }
    
    /* Força header e footer a não causarem overflow */
    header, footer {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Slider - força largura correta MAS NÃO IMPEDE SCROLL */
    .slider {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important; /* CRÍTICO: não fixed ou absolute */
    }
    
    /* Corrige qualquer div que possa causar overflow */
    div {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Específico para cards de desenvolvimento - SCROLL HORIZONTAL FUNCIONAL */
    .desenvolvimento-colunas {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity !important;
        scroll-behavior: smooth !important;
        gap: 15px !important;
        padding: 20px 15px !important;
        margin-top: 0 !important; /* Remove sobreposição no mobile */
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        box-sizing: border-box !important;
    }
    
    .desenvolvimento-colunas::-webkit-scrollbar {
        display: none !important;
    }
    
    .desenvolvimento-coluna {
        flex: 0 0 340px !important;
        min-width: 340px !important;
        max-width: 340px !important;
        height: auto !important;
        scroll-snap-align: start !important;
        margin-right: 0 !important;
        padding: 35px 25px !important;
        background: rgba(255, 255, 255, 0.97) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(8px) !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
    
    /* Espaçamento específico para primeiro e último card de desenvolvimento */
    .desenvolvimento-colunas .desenvolvimento-coluna:first-child {
        margin-left: 10px !important;
    }
    
    .desenvolvimento-colunas .desenvolvimento-coluna:last-child {
        margin-right: 10px !important;
    }
    
    /* Específico para cards de cerimônia - SCROLL HORIZONTAL FUNCIONAL */
    .card-section {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        gap: 15px !important;
        padding: 20px 10px !important;
        margin: 0 auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        box-sizing: border-box !important;
    }
    
    .card-section::-webkit-scrollbar {
        display: none !important;
    }
    
    .card {
        flex: 0 0 85vw !important;
        min-width: 300px !important;
        max-width: 360px !important;
        min-height: 500px !important;
        padding: 20px 16px 25px 16px !important;
        scroll-snap-align: start !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Ajustes específicos para imagens dos cards em mobile */
    .card img {
        height: 300px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }
    
    .card .info .title {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }
    
    .card .info .details {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    
    .card .info .button {
        padding: 10px 20px !important;
        font-size: 14px !important;
        margin-top: 12px !important;
    }
    
    /* Espaçamento específico para primeiro e último card de cerimônia */
    .card-section .card:first-child {
        margin-left: 10px !important;
    }
    
    .card-section .card:last-child {
        margin-right: 10px !important;
    }
    
    /* Galeria - garante que não cause overflow */
    .galeria-container {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Imagens - previne overflow */
    img {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    
    /* Textos - previne overflow */
    h1, h2, h3, h4, h5, h6, p, div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
}

/* ==========================================================
   ANIMAÇÕES - FADEIN E OUTRAS
   ========================================================== */
@keyframes fadeIn {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
    }
}

/* ==========================================================
   CORREÇÃO FORÇADA PARA MENU TOGGLE MOBILE
   ========================================================== */
@media (max-width: 700px) {
    /* Força visibilidade e funcionamento do botão menu */
    .menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 10000 !important; /* Maior que o menu para ficar sempre visível */
        position: relative !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(132, 220, 198, 0.3) !important;
        user-select: none !important;
        font-size: 2.2rem !important;
        color: var(--cor-subtitulo) !important;
        padding: 12px !important;
        margin: 0 !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        transition: all 0.2s ease !important;
    }
    
    .menu-toggle:hover,
    .menu-toggle:focus,
    .menu-toggle:active {
        color: var(--cor-hover) !important;
        transform: scale(1.1) !important;
        background: rgba(132, 220, 198, 0.1) !important;
        border-radius: 50% !important;
        outline: none !important;
    }
}

/* ==========================================================
   CORREÇÃO Z-INDEX PARA MENU MOBILE
   ========================================================== */
@media (max-width: 700px) {
    /* Garante que nenhum outro elemento interfira com o menu */
    .slider,
    .introducao,
    .desenvolvimento-unificada,
    .nossas-cerimonias-section,
    .quem-somos-section,
    .depoimentos-section,
    .galeria,
    footer {
        z-index: 1 !important;
        position: relative !important;
    }
    
    /* Força o menu a sempre ficar na frente */
    .hrefs.show {
        z-index: 9999 !important;
        position: fixed !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* Header sempre no topo */
    header {
        z-index: 10001 !important;
        position: fixed !important;
    }
    
    /* Botão menu sempre acessível */
    .menu-toggle {
        z-index: 10000 !important;
        position: relative !important;
    }
}

/* ==========================================================
   ANIMAÇÕES DE SCROLL PARA CARDS DE DESENVOLVIMENTO
   ========================================================== */
.desenvolvimento-coluna.aparecer-scroll {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 1.2s cubic-bezier(.22,1,.36,1), transform 1.2s cubic-bezier(.22,1,.36,1);
}

.desenvolvimento-coluna.aparecer-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================
   ANIMAÇÕES DE SCROLL PARA SEÇÃO DE INTRODUÇÃO
   ========================================================== */
.introducao .texto.aparecer-scroll,
.introducao .texto h1.aparecer-scroll,
.introducao .texto p.aparecer-scroll,
.introducao .texto .botao.aparecer-scroll {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 1.2s cubic-bezier(.22,1,.36,1), transform 1.2s cubic-bezier(.22,1,.36,1);
}

.introducao .texto.aparecer-scroll.visible,
.introducao .texto h1.aparecer-scroll.visible,
.introducao .texto p.aparecer-scroll.visible,
.introducao .texto .botao.aparecer-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================
   SEÇÃO DESENVOLVIMENTO UNIFICADA
   ========================================================== */
.desenvolvimento-unificada {
    background: radial-gradient(circle at 50% 50%, #284B63 0%, #153243 100%);
    width: 100%;
    padding: clamp(30px, 5vh, 60px) clamp(25px, 4vw, 70px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(30px, 4vh, 50px);
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    min-height: auto;
}

/* Botão de troca de idioma */
.language-toggle {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.language-btn {
    background: linear-gradient(135deg, #84DCC6 0%, #2E8B7B 100%);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(132, 220, 198, 0.3);
    border: none;
    user-select: none;
}

.language-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(132, 220, 198, 0.4);
    filter: brightness(1.1);
}

.language-btn:active {
    transform: translateY(0);
}

/* Botão de idioma no menu mobile */
.mobile-language-toggle {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(132, 220, 198, 0.2);
    text-align: center;
}

.mobile-language-btn {
    background: linear-gradient(135deg, #84DCC6 0%, #2E8B7B 100%);
    color: #fff;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(132, 220, 198, 0.3);
    border: none;
    user-select: none;
    display: inline-block;
}

.mobile-language-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(132, 220, 198, 0.4);
}

/* Responsividade do botão de idioma */
@media (max-width: 900px) {
    .language-toggle {
        display: none;
    }
}
