/* =========================================
   1. IMPORTAÇÃO DE FONTES
   Outfit (Moderno/Clean) + Caveat (Manuscrito/Praia)
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700;800&family=Caveat:wght@700&display=swap');

/* =========================================
   2. VARIÁVEIS E CORES (VIBE PRAIA)
   ========================================= */
:root {
    --primary-blue: #0ea5e9;  /* Azul Turquesa vibrante (Coroa Alta) */
    --deep-ocean: #1e3a8a;    /* Azul Marinho (Profundidade) */
    --sand-light: #fffbeb;    /* Bege Areia (Amber 50 - Suave) */
    --accent-orange: #f97316; /* Laranja Pôr do Sol */
    --sand-warm: #fff7ed;     /* Areia mais quente para a seção do roteiro */
}

/* =========================================
   3. ESTILOS GERAIS
   ========================================= */
body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--sand-light); /* Fundo padrão cor de areia */
    color: #334155;
    overflow-x: hidden; /* Evita rolagem horizontal indesejada */
}

/* Classe para fonte manuscrita (Detalhes) */
.font-hand {
    font-family: 'Caveat', cursive;
}

/* Ajuste de Ícones (Lucide) */
.lucide {
    display: inline-block;
    vertical-align: middle;
}

/* =========================================
   4. UTILITÁRIOS VISUAIS
   ========================================= */

/* Fundo com Textura de Areia (SVG Inline sutil) - Usado no corpo do site */
.bg-texture-sand {
    background-color: var(--sand-light);
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d97706' fill-opacity='0.08' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Efeito Glassmorphism (Vidro Fosco) - Aprimorado para mais contraste na areia */
.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1);
}

/* --- Container de Imagem com Zoom (Usado nos Cards do Roteiro) --- */
.img-zoom-container {
    overflow: hidden; /* Garante que o zoom não saia da borda */
    /* As bordas e sombras são controladas pelo Tailwind no HTML, mas aqui garantimos o comportamento */
    position: relative;
    border-radius: 1.5rem; /* Arredondamento padrão */
}

.img-zoom-container img,
.img-zoom-container video {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Zoom mais suave */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-zoom-container:hover img,
.img-zoom-container:hover video {
    transform: scale(1.12); /* O efeito de zoom ao passar o mouse */
}

/* =========================================
   5. ANIMAÇÕES GERAIS
   ========================================= */

/* Zoom Lento na Hero */
@keyframes slow-zoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}
.animate-slow-zoom {
    animation: slow-zoom 20s infinite alternate linear;
}

/* Pulso do Botão (Chamada para Ação) */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); transform: scale(1); }
    70% { box-shadow: 0 0 0 20px rgba(249, 115, 22, 0); transform: scale(1.03); }
    100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); transform: scale(1); }
}
.pulsate {
    animation: pulse-glow 2s infinite;
}

/* =========================================
   6. SEÇÕES ESPECÍFICAS
   ========================================= */

/* --- Hero Section --- */
.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: scale(1.1); /* Leve zoom inicial para evitar bordas na animação */
    transform-origin: center; 
}

.hero-overlay {
    background: linear-gradient(to bottom, 
        rgba(0,0,0,0.3) 0%, 
        rgba(14, 165, 233, 0.2) 50%, 
        rgba(30, 58, 138, 0.5) 100%);
}

/* NOVO: Transição suave do final do Hero para a próxima seção */
.header-bottom-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Altura do degradê */
    /* Gradiente da cor do overlay final para a cor da próxima seção (areia) */
    background: linear-gradient(to bottom, rgba(30, 58, 138, 0) 0%, var(--sand-warm) 100%);
    z-index: 1;
    pointer-events: none;
}


/* =========================================
   7. NOVA SEÇÃO: AREIA VIVA (Roteiro) - APRIMORADA
   ========================================= */

/* Fundo realista com textura de areia e gradiente de luz */
.bg-sand-real {
    background-color: var(--sand-warm);
    position: relative;
    /* Combinação de gradiente radial para "dunas/luz" e textura de ruído SVG para grãos */
    background-image: 
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 247, 237, 0) 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 247, 237, 0) 50%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12' style='mix-blend-mode:multiply'/%3E%3C/svg%3E");
    background-attachment: fixed; /* Efeito parallax sutil na textura */
}

/* Elementos Flutuantes (Concha, Estrela, etc.) - Estilos Base */
.beach-element {
    position: absolute;
    z-index: 1; 
    pointer-events: none; /* Permite clicar através deles */
    /* Sombra suave para parecer que está pousado na areia */
    filter: drop-shadow(2px 4px 8px rgba(167, 123, 77, 0.2)); 
    transition: all 0.5s ease-in-out;
}

/* Badge de Preservação (Novo estilo para o alerta) */
.preservation-badge {
    transition: all 0.3s ease;
}
.preservation-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15);
    background-color: rgba(255, 247, 237, 0.95);
}

/* =========================================
   8. NOVAS TRANSIÇÕES ENTRE SEÇÕES
   ========================================= */

/* Transição da seção de Areia para a seção Azul (Investimento) */
.section-fade-sand-to-blue {
    height: 150px;
    /* Gradiente da cor da areia para o azul escuro do início da próxima seção */
    background: linear-gradient(to bottom, var(--sand-warm) 0%, #1e3a8a 100%);
    margin-top: -2px; /* Evita linhas brancas finas entre as seções */
    position: relative;
    z-index: 10;
    pointer-events: none;
}

/* Transição da seção Azul (Investimento) para a seção Azul Claro (Turismo Consciente) */
.section-fade-blue-to-light {
    height: 150px;
    /* Gradiente do azul escuro do final da seção anterior para o azul claro da próxima */
    background: linear-gradient(to bottom, #1e40af 0%, #eff6ff 100%);
    margin-top: -2px; /* Evita linhas brancas finas entre as seções */
    position: relative;
    z-index: 10;
    pointer-events: none;
}

/* =========================================
   9. MODAL E OUTROS
   ========================================= */
/* (Estilos do modal mantidos ou ajustados levemente pelo Tailwind no HTML) */
#modalContent {
    max-height: 90vh; /* Evita que o modal ultrapasse a altura da tela */
    overflow-y: auto; /* Adiciona rolagem interna se necessário */
}

/* =========================================
   10. INTEGRAÇÃO WHATSAPP (NOVOS ESTILOS)
   ========================================= */

/* --- BOTÃO FLUTUANTE WHATSAPP (Desktop) --- */
.whatsapp-float {
    position: fixed;
    bottom: 40px;
    right: 40px;
    background-color: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-float:hover {
    background-color: #128C7E;
    transform: scale(1.1);
}

.whatsapp-pulse {
    animation: whatsapp-pulse-anim 2s infinite;
}

@keyframes whatsapp-pulse-anim {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Ícone SVG dentro do botão */
.whatsapp-icon {
    width: 35px;
    height: 35px;
    fill: white;
}

/* --- BOTÃO WHATSAPP MOBILE (Barra Fixa Inferior) --- */
.btn-zap-mobile {
    background: linear-gradient(to right, #25D366, #128C7E);
    /* Garante que o gradiente e a cor se mantenham consistentes */
}