/* ==========================================================================
   ARQUIVO CSS ESPECÍFICO (page-styles.css)
   Estilos usados APENAS na página "Mesa Romântica"
   ==========================================================================
*/

/* --- Hero Section --- */
.hero-romantic { 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    color: white; 
    position: relative; 
    overflow: hidden; 
    padding: 1rem; 
}
.hero-slider { 
    position: absolute; 
    inset: 0; 
    z-index: 1; 
}
.hero-slider-image { 
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 0; 
    transform: scale(1.05); 
    transition: opacity 1.5s ease-in-out, transform 8s ease-out; 
}
.hero-slider-image.active { 
    opacity: 1; 
    transform: scale(1); 
}
.hero-overlay { 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3)); 
    z-index: 2; 
}
.hero-content { 
    position: relative; 
    z-index: 3; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    height: 100%; 
}

/* --- Hero Phrase Slider --- */
.hero-phrase-slider { 
    min-height: 100px; /* Garante espaço para a troca */
    position: relative;
    width: 100%;
}
.hero-phrase { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%) translateY(20px); 
    width: 90%; 
}
.hero-phrase.active { 
    opacity: 1; 
    transform: translateX(-50%) translateY(0); 
}

/* --- Scroll Indicator --- */
.scroll-indicator { 
    position: absolute; 
    bottom: 2rem; 
    z-index: 3; 
    animation: bounce 2s infinite; 
}
@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 
    40% { transform: translateY(-15px); } 
    60% { transform: translateY(-5px); } 
}

/* --- Ícones de Benefícios --- */
@keyframes icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.icon-animate {
    animation: icon-pulse 2.5s infinite ease-in-out;
}

/* --- Estrutura Genérica do Slider (Fotos, Vídeos, Depoimentos) --- */
.image-slider-container {
    position: relative;
    overflow: hidden;
    /* Ajuste para desktop: os slides viram grid */
    @media (min-width: 768px) {
        &.testimonial-slider,
        &.video-slider {
            max-width: 48rem; /* max-w-4xl */
            margin-left: auto;
            margin-right: auto;
        }
    }
}

.image-slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    /* Ajuste para desktop: vira grid */
    @media (min-width: 768px) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem; /* gap-6 */
        transform: none !important; /* Desativa a translação do JS */
    }
}

.image-slider-slide {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;
    /* Ajuste para desktop: vira grid */
    @media (min-width: 768px) {
        /* Para o slider de depoimentos, mantemos a base de 100% no grid */
        .testimonial-slider & {
            width: 100%;
        }
    }
}

/* Grid específico para Vídeos no Desktop */
@media (min-width: 768px) {
    .video-slider .image-slider-track {
        grid-template-columns: repeat(2, 1fr);
        max-width: 48rem; /* max-w-4xl */
        margin-left: auto;
        margin-right: auto;
    }
}


.image-slider-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    aspect-ratio: 4 / 5; /* Padrão mobile: vertical */
    @media (min-width: 768px) {
        aspect-ratio: 4 / 3; /* Padrão desktop: paisagem */
    }
}

/* --- Setas de Navegação do Slider --- */
.image-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(74, 87, 43, 0.8);
    color: white;
    border: none;
    border-radius: 9999px;
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s;
    display: none; /* Escondido por padrão */
}
.image-slider-arrow:hover {
    background-color: #4A572B;
}
.image-slider-arrow.prev { left: 1rem; }
.image-slider-arrow.next { right: 1rem; }
.image-slider-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
/* Mostra setas no desktop */
@media (min-width: 768px) {
    .image-slider-arrow { display: block; }
}

/* --- Bolinhas de Navegação do Slider --- */
.image-slider-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
    /* Esconde bolinhas no desktop */
    @media (min-width: 768px) {
        display: none;
    }
}
.image-slider-dot {
    width: 0.75rem; /* w-3 */
    height: 0.75rem; /* h-3 */
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0,0,0,0.2);
    cursor: pointer;
    transition: background-color 0.2s;
}
.image-slider-dot.active {
    background-color: white;
}

/* --- Estilos Específicos (Vídeo e Depoimentos) --- */
.video-slide-content {
    aspect-ratio: 9 / 16; /* Proporção de Reels/Shorts */
    width: 100%;
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-lg */
}
.video-slide-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.testimonial-card {
    background-color: white; 
    padding: 2rem; /* p-8 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
}