/* =========================================================
   Our Spirituality Page - Hero Section
   ========================================================= */
.spirit-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    background-color: #f1ede6; /* Fundo off-white/bege fallback */
}

/* --- Background com Efeito "Gentle Breeze" --- */
.spirit-hero-bg {
    position: absolute;
    inset: -2%; /* Expande levemente para a animação ter espaço sem mostrar as bordas */
    background-size: cover;
    background-position: center left; /* Foco no frade à esquerda */
    z-index: 1;
    /* Movimento super suave simulando a brisa e a paz do ambiente */
    animation: gentleBreeze 30s ease-in-out infinite alternate;
}

@keyframes gentleBreeze {
    0% { transform: scale(1) translateX(0); }
    100% { transform: scale(1.04) translateX(-1%); } /* Zoom sutil e leve deslize */
}

/* --- Máscara (Scrim) "Morning Light" --- */
.spirit-hero-scrim {
    position: absolute;
    inset: 0;
    /* Gradiente CLARO vindo da direita. Isso ilumina a água e garante 
       que o texto marrom seja perfeitamente lido sem estragar a foto */
    background: linear-gradient(to left, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 45%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

/* --- Container e Textos --- */
.spirit-hero-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: flex-end; /* Empurra o bloco para a direita */
}

.spirit-hero-content {
    max-width: 550px;
    text-align: right; /* Alinhamento elegante e fiel à arte */
}

/* Eyebrow: "CHARISM" */
.spirit-eyebrow {
    display: block;
    font-family: var(--font-display), 'Montreal', sans-serif;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--dark-navy, #122235); /* Azul marinho/acinzentado para contrastar com o marrom */
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

/* Tipografia do Título Central */
.spirit-hero-title {
    font-family: var(--font-display), 'Montreal', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 500;
    color: var(--primary-brown-dark, #412f22); /* Marrom terroso e profundo da arte */
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

/* --- Animação "Serene Glide" (Desliza da direita) --- */
.spirit-hero-content .reveal-on-scroll {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.spirit-hero-content .reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================================
   Responsividade (Telas Menores)
   ========================================================= */
@media (max-width: 992px) {
    .spirit-hero-scrim {
        /* Estende o véu claro para cobrir melhor os tablets */
        background: linear-gradient(to left, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 100%);
    }
}

@media (max-width: 768px) {
    .spirit-hero {
        align-items: flex-end; /* Desce o texto no celular */
        min-height: 80vh;
        padding-bottom: 80px;
    }

    .spirit-hero-bg {
        background-position: 30% center; /* Ajusta o foco no frade para telas verticais */
    }

    .spirit-hero-scrim {
        /* No celular, inverte o gradiente: o véu claro vem de baixo para cima */
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0.95) 100%);
    }

    .spirit-hero-container {
        justify-content: center; /* Centraliza no mobile */
        padding: 0 20px;
    }

    .spirit-hero-content {
        max-width: 100%;
        text-align: center; /* Centraliza o texto */
    }

    .spirit-hero-title br {
        display: none; /* Deixa o texto fluir na largura da tela */
    }

    /* Muda a animação de entrada para subir (slide-up) no mobile */
    .spirit-hero-content .reveal-on-scroll {
        transform: translateY(30px);
    }
    .spirit-hero-content .reveal-on-scroll.revealed {
        transform: translateY(0);
    }
}

/* =========================================================
   Our Spirituality Page - The Center (Sessão 2)
   ========================================================= */
.spirit-center {
    background-color: var(--site-bg, #f8f8f7); /* Fundo claro da arte */
    padding-top: 120px;
    position: relative;
    /* Retiramos o overflow: hidden para permitir que a imagem vaze para baixo */
}

.spirit-center-container {
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 2; /* Mantém o conteúdo acima da faixa escura de transição */
}

/* --- Área de Textos --- */
.center-text {
    max-width: 550px;
}

.center-text p {
    font-family: var(--font-body), 'Google Sans', sans-serif;
    font-size: clamp(1.05rem, 1.1vw, 1.15rem);
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Destaque 1: Frase Central */
.center-highlight {
    font-family: var(--font-display), 'Montreal', sans-serif !important;
    font-size: clamp(1.2rem, 1.4vw, 1.3rem) !important;
    color: var(--primary-brown-dark, #412f22) !important;
    font-weight: 500;
    line-height: 1.4 !important;
    margin: 2.5rem 0 !important;
}

/* A mágica da caixa azul desenhada à mão */
.highlight-blue-box {
    position: relative;
    display: inline-block;
    padding: 2px 8px;
    margin-top: 5px;
    white-space: nowrap;
    z-index: 1;
}

.highlight-blue-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid #63a4ff; /* Azul da arte */
    border-radius: 3px;
    z-index: -1;
    /* Estado inicial: esmagado à esquerda e invisível */
    width: 0;
    opacity: 0;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease;
}

/* Quando a classe 'revealed' é acionada pelo JS, o CSS desenha a caixa! */
.center-text .revealed.center-highlight .highlight-blue-box::after {
    width: 100%;
    opacity: 1;
    transition-delay: 0.8s; /* Espera o texto subir para depois desenhar */
}

/* Destaque 2: Citação Final */
.center-quote {
    font-family: var(--font-display), 'Montreal', sans-serif !important;
    font-size: clamp(1.25rem, 1.5vw, 1.4rem) !important;
    color: var(--dark-navy, #122235) !important;
    font-weight: 600;
    line-height: 1.3 !important;
    margin-top: 2.5rem !important;
    margin-bottom: 0 !important;
}

/* --- Área Visual (A Imagem que Vaza) --- */
.center-visual {
    width: 100%;
    position: relative;
    /* O SEGREDO DO VAZAMENTO: Puxa a imagem drasticamente para baixo */
    margin-bottom: -150px; 
    z-index: 5;
}

.center-img-wrapper {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    border-radius: 4px;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.6s ease;
}

.center-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Efeito Urban Focus inicial (levemente cinza) */
    filter: sepia(10%) grayscale(30%);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s ease;
}

/* Interação Mágica no Hover */
.center-visual:hover .center-img-wrapper {
    transform: translateY(-12px); /* Levita */
    box-shadow: 0 35px 60px rgba(0,0,0,0.3); /* Sombra mais profunda */
}

.center-visual:hover .center-img-wrapper img {
    transform: scale(1.05); /* Zoom interno */
    filter: sepia(0%) grayscale(0%); /* Restaura toda a cor e a vida urbana */
}

/* --- Faixa de Transição Escura --- */
/* Esta faixa simula a próxima sessão para que o vazamento da imagem seja visível AGORA */
.spirit-dark-transition {
    width: 100%;
    height: 150px; /* Altura do vazamento */
    background-color: #2b1d14; /* Cor escura da próxima arte */
    position: relative;
    z-index: 1;
    margin-top: 100px;
}

/* --- Animações de Entrada --- */
.spirit-center .reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.spirit-center .reveal-up.revealed {
    opacity: 1;
    transform: translateY(0);
}

.spirit-center .reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.spirit-center .reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================================
   Responsividade (Telas Menores)
   ========================================================= */
@media (max-width: 992px) {
    .spirit-center-container {
        grid-template-columns: 1fr; /* Empilha texto e imagem */
        gap: 60px;
    }
    
    .center-text {
        max-width: 100%;
        text-align: center;
    }

    .center-visual {
        max-width: 600px;
        margin: 0 auto;
        /* No tablet, ajusta o vazamento para não encavalar muito no mobile */
        margin-bottom: -100px; 
    }

    .spirit-dark-transition {
        height: 100px;
        margin-top: 50px;
    }
}

@media (max-width: 576px) {
    .spirit-center {
        padding-top: 80px;
    }

    .center-highlight br,
    .center-quote br {
        display: none; /* Deixa fluir a quebra de texto */
    }
    
    .center-visual {
        margin-bottom: -60px;
    }
    
    .spirit-dark-transition {
        height: 60px;
    }

    /* Muda a entrada da imagem de lateral para baixo no celular */
    .spirit-center .reveal-right {
        transform: translateY(30px);
    }
    .spirit-center .reveal-right.revealed {
        transform: translateY(0);
    }
    
    /* Remove hover 3D em touch */
    .center-visual:hover .center-img-wrapper { transform: none; box-shadow: 0 15px 35px rgba(0,0,0,0.15); }
    .center-visual:hover .center-img-wrapper img { transform: none; filter: sepia(10%) grayscale(30%); }
}

/* =========================================================
   Our Spirituality Page - Expressions & Pillars (Sessão 3)
   ========================================================= */
.spirit-expressions {
    background-color: #2b1d14; /* Mantém a cor exata para fundir com a imagem de cima */
    padding: 180px 20px 100px 20px; /* Padding top gigante para acomodar a foto vazada da seção anterior */
    color: #ffffff;
    position: relative;
    z-index: 1; /* Fica abaixo da imagem vazada */
}

.spirit-expr-container {
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
}

/* --- Cabeçalhos e Linha Desenhada --- */
.expr-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.expr-header h2 {
    font-family: var(--font-display), 'Montreal', sans-serif;
    font-size: clamp(1.6rem, 2.2vw, 2rem);
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* A mágica da linha crescendo */
.animated-line {
    flex-grow: 1; /* Ocupa todo o espaço restante */
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    transform-origin: left;
    transform: scaleX(0); /* Inicia invisível */
    transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.expr-header.reveal-on-scroll.revealed .animated-line {
    transform: scaleX(1); /* Desenha a linha */
}

/* --- Grids --- */
.expr-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.expr-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* --- Itens e Interação --- */
.expr-item {
    padding: 10px;
    border-radius: 4px;
    transition: transform 0.4s ease, background-color 0.4s ease;
    cursor: default;
}

.expr-item h3 {
    font-family: var(--font-display), 'Montreal', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.8rem;
    transition: color 0.4s ease;
}

.expr-item p {
    font-family: var(--font-body), 'Google Sans', sans-serif;
    font-size: clamp(0.95rem, 1vw, 1.05rem);
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin: 0;
    transition: color 0.4s ease;
}

/* Hover: Levita levemente e "acende" o texto */
.expr-item:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.02);
}

.expr-item:hover h3 {
    color: #ffffff;
}

.expr-item:hover p {
    color: rgba(255, 255, 255, 0.85);
}

/* Animação Padrão Reveal Up */
.spirit-expressions .reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.spirit-expressions .reveal-up.revealed {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   Our Spirituality Page - Fullness Section (Sessão 4)
   ========================================================= */
.spirit-fullness {
    position: relative;
    width: 100%;
    min-height: 85vh; /* Altura cinematográfica */
    display: flex;
    align-items: flex-end; /* Textos na base */
    overflow: hidden;
}

/* Parallax Majestoso */
.spirit-fullness-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed; /* O segredo da profundidade */
    z-index: 1;
}

/* O Scrim que garante a leitura perfeita */
.spirit-fullness-scrim {
    position: absolute;
    inset: 0;
    /* Escurece a base vindo de baixo, protegendo o texto */
    background: linear-gradient(to top, rgba(10, 15, 20, 0.95) 0%, rgba(10, 15, 20, 0.4) 40%, rgba(10, 15, 20, 0) 100%);
    z-index: 2;
}

.spirit-fullness-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--container-max, 1400px);
    margin: 0 auto;
    padding: 60px 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}

.fullness-text-left h2 {
    font-family: var(--font-display), 'Montreal', sans-serif;
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    color: #ffffff;
    font-weight: 500;
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.01em;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
}

.fullness-text-right p {
    font-family: var(--font-body), 'Google Sans', sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 1.2rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.fullness-text-right p:last-child {
    margin-bottom: 0;
}

/* --- Animação "Blur Up" Segura pelo JS --- */
.spirit-fullness .blur-up {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(40px);
    transition: opacity 1.2s ease-out, filter 1.2s ease-out, transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.spirit-fullness .blur-up.revealed {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* =========================================================
   Responsividade (Telas Menores)
   ========================================================= */
@media (max-width: 992px) {
    /* Transforma o grid 4 e 3 em grid 2 no tablet */
    .expr-grid-4, .expr-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .spirit-fullness-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    
    .spirit-fullness-scrim {
        background: linear-gradient(to top, rgba(10, 15, 20, 0.95) 0%, rgba(10, 15, 20, 0.6) 60%, rgba(10, 15, 20, 0) 100%);
    }
}

@media (max-width: 768px) {
    .spirit-expressions {
        padding-top: 140px; /* Reduz padding se imagem vazar menos no mobile */
    }

    .expr-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .expr-header h2 {
        white-space: normal; /* Permite quebrar linha no mobile */
    }

    .animated-line {
        width: 100%;
        transform: scaleX(1); /* Deixa a linha estática no mobile pra não bugar layout */
    }

    /* Transforma em 1 coluna no celular */
    .expr-grid-4, .expr-grid-3 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .spirit-fullness {
        min-height: 70vh;
    }

    .spirit-fullness-bg {
        background-attachment: scroll; /* Desativa parallax no mobile */
        background-position: 60% center; /* Ajusta os frades no celular */
    }

    .spirit-fullness-container {
        padding: 40px 20px;
    }

    .fullness-text-left h2 br,
    .fullness-text-right p br {
        display: none; /* Flui o texto livremente */
    }
}