/* =========================================================
   Couples Page - Hero Section
   ========================================================= */
.couples-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    background-color: #2b1d14; /* Cor de fallback quente */
}

/* --- Background com Efeito "Warm Welcome" --- */
.couples-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right; /* Mantém o foco no casal à direita */
    z-index: 1;
    /* Começa levemente desfocado e maior, revelando os sorrisos suavemente */
    animation: warmWelcome 12s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes warmWelcome {
    0% { transform: scale(1.1); filter: blur(4px); }
    100% { transform: scale(1); filter: blur(0); }
}

/* --- Máscara (Scrim) com Tons Quentes --- */
.couples-hero-scrim {
    position: absolute;
    inset: 0;
    /* Gradiente linear da esquerda para a direita em um tom sépia/marrom muito escuro */
    background: linear-gradient(to right, rgba(35, 20, 10, 0.85) 0%, rgba(35, 20, 10, 0.5) 45%, rgba(35, 20, 10, 0) 100%);
    z-index: 2;
}

/* --- Container e Textos --- */
.couples-hero-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: 0 20px;
}

.couples-hero-content {
    max-width: 500px; /* Limita a largura para o texto não invadir os rostos na foto */
}

.couples-hero-title {
    font-family: var(--font-display), 'Montreal', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    font-weight: 500;
    color: #dfdbd2; /* Cor off-white extraída da arte */
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Leve sombra para destacar do fundo */
}

.couples-hero-text {
    font-family: var(--font-body), 'Google Sans', sans-serif;
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    color: #f1ede6;
    line-height: 1.6;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Animação personalizada de entrada (Slide-in lateral da esquerda) */
.couples-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);
}

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

/* =========================================================
   Responsividade (Telas Menores)
   ========================================================= */
@media (max-width: 992px) {
    .couples-hero-scrim {
        /* Estica o gradiente para garantir leitura em tablets */
        background: linear-gradient(to right, rgba(35, 20, 10, 0.9) 0%, rgba(35, 20, 10, 0.7) 50%, rgba(35, 20, 10, 0.1) 100%);
    }
}

@media (max-width: 768px) {
    .couples-hero {
        align-items: flex-end; /* Desce o texto para não tampar os rostos */
        padding-bottom: 80px;
    }

    .couples-hero-bg {
        background-position: 70% center; /* Ajusta o foco da imagem no mobile */
    }

    .couples-hero-scrim {
        /* Inverte o gradiente: agora vem de baixo para cima */
        background: linear-gradient(to bottom, rgba(35, 20, 10, 0) 0%, rgba(35, 20, 10, 0.7) 40%, rgba(35, 20, 10, 0.95) 100%);
    }

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

    /* Muda o slide-in para subir (slide-up) no celular, fica mais natural com o texto centralizado */
    .couples-hero-content .reveal-on-scroll {
        transform: translateY(30px);
    }
    .couples-hero-content .reveal-on-scroll.revealed {
        transform: translateY(0);
    }
}

/* =========================================================
   Couples Page - Retreat Section (Sessão 2)
   ========================================================= */
.couples-retreat {
    /* Cor de fundo marrom quente inspirada na arte */
    background-color: #4a3424; 
    padding-top: 100px;
    padding-bottom: 0; /* Removemos o padding inferior para a imagem vazar livremente */
    /* NÃO use overflow: hidden aqui, senão a foto de baixo será cortada! */
}

.couples-retreat-container {
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas */
    gap: 80px;
    align-items: center;
}

/* --- Lado Esquerdo: Imagens --- */
.retreat-visuals {
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
}

.retreat-img-top,
.retreat-img-bottom {
    width: 100%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    /* Transições prontas para a mágica do hover */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.6s ease;
}

/* Define a proporção das imagens para ficarem iguais à arte */
.retreat-img-top {
    aspect-ratio: 16 / 10;
    z-index: 2;
}

.retreat-img-bottom {
    aspect-ratio: 16 / 10;
    z-index: 3;
    /* O SEGREDO DO VAZAMENTO: Margem negativa que empurra a imagem para fora da sessão marrom */
    margin-bottom: -100px; 
}

.retreat-visuals img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Interação "Fora da Caixinha": Efeito "Photo Split" */
.retreat-visuals:hover .retreat-img-top {
    transform: translateY(-10px) rotate(-1deg); /* Sobe e dá uma leve inclinada */
    box-shadow: -5px 15px 40px rgba(0,0,0,0.3);
}

.retreat-visuals:hover .retreat-img-bottom {
    transform: translateY(10px) rotate(1deg); /* Desce e dá uma leve inclinada oposta, abrindo espaço */
    box-shadow: 5px 25px 50px rgba(0,0,0,0.4);
}

.retreat-visuals:hover img {
    transform: scale(1.06); /* Zoom charmoso em ambas */
}

/* --- Lado Direito: Textos --- */
.retreat-text {
    color: #ffffff;
    /* Padding inferior garante que o texto não cole no fundo da sessão marrom */
    padding-bottom: 100px; 
}

.retreat-text h2 {
    font-family: var(--font-display), 'Montreal', sans-serif;
    font-size: clamp(1.6rem, 2.3vw, 2rem);
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
}

.retreat-text p {
    font-family: var(--font-body), 'Google Sans', sans-serif;
    font-size: clamp(1.05rem, 1.2vw, 1.15rem);
    color: rgba(255, 255, 255, 0.9); /* Branco levemente suavizado */
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

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

/* =========================================================
   Responsividade (Telas Menores)
   ========================================================= */
@media (max-width: 992px) {
    .couples-retreat-container {
        grid-template-columns: 1fr; /* Quebra para 1 coluna */
        gap: 60px;
    }

    /* INVERSÃO ESTRATÉGICA: No mobile, o texto sobe e as fotos descem. 
       Isso garante que a foto de baixo continue vazando para a próxima sessão! */
    .retreat-text {
        order: -1; 
        padding-bottom: 0;
        text-align: center;
    }

    .retreat-visuals {
        max-width: 600px;
        margin: 0 auto;
    }
    
    .retreat-img-bottom {
        margin-bottom: -60px; /* Reduz o vazamento no mobile para não cobrir tanto do rodapé */
    }
}

@media (max-width: 576px) {
    .couples-retreat {
        padding-top: 80px;
    }
    
    .retreat-img-bottom {
        margin-bottom: -40px; 
    }

    /* Desativa a separação de fotos no mobile por ser touch, mantém só o layout bonito */
    .retreat-visuals:hover .retreat-img-top,
    .retreat-visuals:hover .retreat-img-bottom {
        transform: none;
    }
}