/*
Theme Name:    BeTravel Engine
Theme URI:     https://betravel.pt
Description:   Tema exclusivo e de alta performance desenvolvido sob medida para a BeTravel Tours, Agência de Viagens Personalizadas. Otimizado para Elementor Pro com funções avançadas nativas criadas por Atelier X.
Author:        Danieli - Atelier X 
Author URI:    https://xtecnologias.com
Template:      hello-elementor
Version:       2.3
Text Domain:   betravel-tours
*/


/* ==========================================================================
   0. NÚCLEO ESTRUTURAL GLOBAL
   ========================================================================== */
:root {
    /* Variáveis Estruturais de Design */
    --radius-main:      2rem;                                       
    --transition-fast:  0.4s ease-in-out;                           
}


/* ==========================================================================
   1. PADRONIZAÇÃO DE SEÇÕES E CONTAINERS (PADDINGS RESPONSIVOS)
   ========================================================================== */
   
/* Secção Padrão: Transição fluida entre 48px e 128px nas verticais */   
.secao-global {
    padding-top: clamp(3rem, 7vw, 8rem) !important;
    padding-bottom: clamp(3rem, 7vw, 8rem) !important;
    padding-left: clamp(1rem, 4vw, 2rem) !important; 
    padding-right: clamp(1rem, 4vw, 2rem) !important;  
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Secção Compacta */
.secao-global-compacta {
    padding-top: clamp(1.5rem, 3vw, 2.5rem) !important;    
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important; 
    padding-left: clamp(1rem, 4vw, 1.5rem) !important;     
    padding-right: clamp(1rem, 4vw, 1.5rem) !important;    
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Secção Hero */
.secao-global-hero {
    padding-top: clamp(3.75rem, 10vw, 7.5rem) !important;   
    padding-bottom: clamp(3.75rem, 8vw, 6.25rem) !important; 
    padding-left: clamp(1rem, 4vw, 1.5rem) !important;       
    padding-right: clamp(1rem, 4vw, 1.5rem) !important;      
    width: 100% !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   2. MATEMÁTICA ESTRUTURAL E TIPOGRÁFICA RECALCULADA
   ========================================================================== */

/* Tipografia Fluida */
h1, .elementor-kit-default h1 {
    font-size: clamp(2.5rem, calc(var(--e-global-typography-primary-font-size) + 1.2vw), 4.5rem);
}
h2, .elementor-kit-default h2 {
    font-size: clamp(2rem, calc(var(--e-global-typography-secondary-font-size) + 1vw), 3.5rem);
}
h3, .elementor-kit-default h3 {
    font-size: clamp(1.5rem, calc(var(--e-global-typography-text-font-size) + 0.8vw), 2.5rem);
}
p, .elementor-kit-default body, .elementor-text-editor p {
    font-size: clamp(1rem, calc(var(--e-global-typography-text-font-size) + 0.2vw), 1.25rem);
}
.elementor-text-editor p:last-child { 
    margin-bottom: 0; 
}

/* Tipografia Fluida para o Menu principal */
.roblox li a, #header .elementor-nav-menu a, .elementor-nav-menu--main .elementor-item {
    font-size: clamp(0.9rem, calc(var(--e-global-typography-accent-font-size, var(--e-global-typography-text-font-size)) + 0.1vw), 1.15rem) !important;
    transition: color var(--transition-fast) !important;
}


/* ==========================================================================
   EXTRA: SUBMENU DROPDOWN GLASS (FUNDO BRANCO FOSCO - BLUR 20PX)
   ========================================================================== */
.elementor-nav-menu .sub-menu,
.elementor-nav-menu--dropdown,
#header .elementor-nav-menu .sub-menu {
    backdrop-filter: blur(20px) saturate(180%) !important; /* Desfoque ajustado para 20px */
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important; /* Suporte para Safari */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08) !important; /* Sombra suave para dar profundidade */
}



/* Botões e Caixas com Paddings Escalonados */
.elementor-button, .fonte-botao {
    border-radius: var(--radius-main) !important;     
    transition: all var(--transition-fast) !important; 
}


/* ==========================================================================
   3. ATALHOS ENCURTADOS PARA SPANS NO MEIO DE TÍTULOS E FRASES
   ========================================================================== */
.f-cy { font-family: 'CyGrotesk', sans-serif !important; font-weight: inherit; }
.f-alt { font-family: 'Montserrat Alternates', sans-serif !important; font-weight: 700; }


/* ==========================================================================
   4. EFEITOS VISUAIS AVANÇADOS (BIO.SITE STYLE & GRADIENTES)
   ========================================================================== */
.betravel-bg {
    background: radial-gradient(circle at 50% 50%, #D0F4F3, #CADFF5, #C4C6F8, #DBBFF8, #EABBFA);
    background-size: 500% 400%;
    animation: gradientMove 8s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.glass-box { 
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(25px) !important; 
    padding: 2rem !important; 
    border-radius: var(--radius-main) !important; 
}

.box-gradient-border {
    border: 3px solid transparent;
    background-image: linear-gradient(white, white), linear-gradient(to top right, #CE1CB9, #0FA5FF);
    background-clip: padding-box, border-box;
    background-origin: border-box;
    padding: 2rem !important;
    border-radius: var(--radius-main) !important; 
    box-sizing: border-box !important;
}

.texto-gradiente, .texto-gradiente .text-degrade, .text-degrade .elementor-heading-title {
    background: linear-gradient(135deg, #CE1CB9 0%, #0FA5FF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block;
}


/* ==========================================================================
   5. BOTÕES CUSTOMIZADOS (CTA DEGRADÉ & SECUNDÁRIO TRANSPARENTE)
   ========================================================================== */
.btn-cta-degrade .elementor-button {
    background: linear-gradient(135deg, #CE1CB9 0%, #0FA5FF 100%) !important;
    color: #ffffff !important;
    border: none !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    border-radius: var(--radius-main) !important;
}

.btn-cta-degrade .elementor-button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #0FA5FF 0%, #CE1CB9 100%) !important; 
    z-index: -1 !important;
    opacity: 0 !important;
    transition: opacity var(--transition-fast) !important; 
    border-radius: var(--radius-main) !important;
}

.btn-cta-degrade .elementor-button:hover::before { opacity: 1 !important; }
.btn-cta-degrade .elementor-button:hover { transform: translateY(2px) !important; }

.btn-secundario-degrade .elementor-button {
    background: white !important; 
    border: 2px solid transparent !important;
    background-image: linear-gradient(white, white), linear-gradient(135deg, #CE1CB9 0%, #0FA5FF 100%) !important; 
    background-clip: padding-box, border-box !important;
    background-origin: border-box !important;
    position: relative !important;
    z-index: 1 !important;
    border-radius: var(--radius-main) !important; 
}

.btn-secundario-degrade .elementor-button:hover {
    background-image: linear-gradient(white, white), linear-gradient(135deg, #0FA5FF 0%, #CE1CB9 100%) !important; 
    transform: translateY(2px) !important;
    border-radius: var(--radius-main) !important;
}

.btn-link-interno .elementor-button {
    background: transparent !important;
    border: 2px solid !important;	
    border-color: var(--e-global-color-primary) !important; 
    color: var(--e-global-color-primary) !important;        
    position: relative !important;
    z-index: 1 !important;
    transition: all var(--transition-fast) !important; 
    border-radius: var(--radius-main) !important;
}

.btn-link-interno .elementor-button:hover {
    background: var(--e-global-color-primary) !important;
    border-color: var(--e-global-color-primary) !important;
    color: white !important;         
    transform: translateY(2px);
    border-radius: var(--radius-main) !important;	
}


/* ==========================================================================
   6. REGRAS ESTRUTURAIS DE IMAGENS (CANTOS RESPONSIVOS & BASES RETAS)
   ========================================================================== */
.elementor-image img, .elementor-widget-image img, .glass-box img {
    border-radius: var(--radius-main) !important;
    object-fit: cover;
}

.elementor-carousel-image, .elementor-image-carousel-wrapper img, .swiper-slide img {
    border-top-left-radius: var(--radius-main) !important;
    border-top-right-radius: var(--radius-main) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.elementor-posts-container .elementor-post__thumbnail img, .elementor-loop-container img, .archive .elementor-post__thumbnail img {
    border-top-left-radius: var(--radius-main) !important;
    border-top-right-radius: var(--radius-main) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}


/* ==========================================================================
   7. SISTEMA DE LOGÓTIPO VETORIAL EM SVG & NAVEGAÇÃO
   ========================================================================== */
#header {
    background: rgba(255,255,255,1);
    transition: background .3s ease, box-shadow .3s ease;
    position: relative;
    z-index: 1000;
}

#header.elementor-sticky--effects {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.roblox li a { transition: color .3s ease; }
#header.elementor-sticky--effects .roblox li a { color: #363638 !important; }

.logo-svg { width: 200px; height: auto; }
.logo-wrap { display: inline-block; min-height: 40px; }

.logo-original, .logo-scroll { position: absolute; }
.logo-original { opacity: 1; transition: opacity 0.3s ease; }
.logo-scroll { opacity: 0; transition: opacity 0.3s ease; }

.logo-wrap.scrolled .logo-original { opacity: 0; }
.logo-wrap.scrolled .logo-scroll { opacity: 1; }


/* ==========================================================================
   8. MARQUEE
   ========================================================================== */
.marquee-css { width: 100%; overflow: hidden; white-space: nowrap; box-sizing: border-box; }
.marquee-css-track { display: inline-block; animation: marquee-scroll 25s linear infinite; }
.marquee-css-item { display: inline-block; margin-right: 0.8rem; font-size: 0.8rem; font-weight: 500; color: #fff; text-decoration: none; }
.marquee-css-item.whatsapp-link { color: #BCE6FF; text-decoration: none; }

@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-css:hover .marquee-css-track { animation-play-state: paused; }

@media (max-width: 768px) { 
    .marquee-css-item {
        font-size: clamp(1rem, calc(var(--e-global-typography-text-font-size) + 0.2vw), 1.25rem);
        margin-right: 2rem; 
    } 
}


/* ==========================================================================
   9. MOTOR VISUAL AVANÇADO (ÁGUA E CANVAS - ANA E CARLOS)
   ========================================================================== */
.elementor-widget-image img[alt*="agua"], .elementor-widget-image img[alt*="water"],
.elementor-element .elementor-widget-image img[alt*="agua"], .elementor-element .elementor-widget-image img[alt*="water"],
.agua-decorativa, .water-decoration, .img-agua, .img-water {
    max-height: 40vh !important; width: auto !important; object-fit: cover !important; object-position: bottom center !important;
}

@media (min-width: 768px) and (max-width: 1366px) {
    .elementor-widget-image img[alt*="agua"], .elementor-widget-image img[alt*="water"],
    .agua-decorativa, .water-decoration, .img-agua, .img-water { max-height: 30vh !important; }
}
@media (max-width: 767px) {
    .elementor-widget-image img[alt*="agua"], .elementor-widget-image img[alt*="water"] { max-height: 25vh !important; }
}

.scroller-wrapper-global {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; 
    z-index: 0; 
    pointer-events: none; 
    will-change: transform; 
}

.motion-container-axis {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; will-change: transform; transform: translateY(0) scale(1);
}

#liquid-canvas {
    position: absolute !important;
    top: 0 !important;
    left: -30% !important;
    width: 160% !important;
    height: 250vh !important;
    transform-origin: bottom center !important;
    will-change: transform;
}

.sea-bottom-overlay {
    position: fixed; bottom: 0;
    left: 0; width: 100%; height: 35vh;
    background: linear-gradient(to bottom, rgba(15, 45, 55, 0) 0%, rgba(10, 32, 39, 0.95) 100%);
    z-index: 3;
    opacity: 0;
    will-change: opacity;
    transition: opacity 0.3s ease-out;
    pointer-events: none;
}


/* ==========================================================================
   10. ARQUITETURA ESTRUTURAL E RESPONSIVIDADE - ANA E CARLOS
   ========================================================================== */

/* Fix da Imagem de Fundo Parallax */
.camera-lens-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 180vh !important; 
    background-image: url('/wp-content/uploads/2026/08/sobre-nos-ana-e-carlos.webp') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
    transform-origin: center top !important;
    will-change: transform;
}

/* Aplica o margin-top negativo APENAS na página específica */
.page-id-1299 .elementor-location-footer, 
.page-id-1299 footer.elementor-footer {
    position: relative !important;
    z-index: 99 !important;
    width: 100% !important;
    margin-top: -80px !important; 
    clear: both !important;
}

/* Espaçamentos e Margens do Fluxo */
.scroller-wrapper-global {
    padding-top: 0 !important;
}

.anaecarlos {
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important;
    margin-top: clamp(35vh, 38vh, 40vh) !important;
    margin-bottom: clamp(20vh, 32vh, 35vh) !important;
}

.historia-bolhas {
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important;
    margin-bottom: clamp(20vh, 32vh, 35vh) !important;
}

.oquenosmove {
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important;
    margin-bottom: clamp(20vh, 32vh, 35vh) !important;
}

.vamosplanear {
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important;
    margin-bottom: clamp(20vh, 32vh, 35vh) !important;
}

.historia-bolhas .glass-box, 
.vamosplanear .glass-box, 
.anaecarlos .glass-box {
    flex-direction: column !important;
    margin-bottom: 2rem !important;
}


/* ==========================================================================
   11. PERFIL SOCIAL UNIFICADO
   ========================================================================== */
.perfilsocial {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important; 
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important;
    padding-left: clamp(1rem, 4vw, 2rem) !important; 
    padding-right: clamp(1rem, 4vw, 2rem) !important;  
    box-sizing: border-box !important;
    margin-top: 35vh !important; 
    margin-bottom: 25vh !important;
}
.perfilsocial .glass-box {
    width: 48% !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   12. TRAVA ATÓMICA DE CURSO DO FLUXO (ESTÁTICA DE FINAL DE PÁGINA)
   ========================================================================== */

/* Tranca os boxes do perfil social no centro exato da viewport */
.perfilsocial-pinned {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 90% !important;
    max-width: 1200px !important;
    z-index: 50 !important;
}

/* Regras Mobile Únicas */
@media (max-width: 768px) {
    .perfilsocial {
         flex-direction: row !important; /* Mantém os cards lado a lado */
         gap: 0.75rem !important;
    }
	
    .perfilsocial .glass-box {
        width: 50% !important; 
        padding: 1rem !important;
    }
	
    .perfilsocial .glass-box h3 {
        font-size: 1.2rem !important;
        line-height: 1.4rem !important;
    }
	
    .perfilsocial .glass-box p,
    .perfilsocial .glass-box .elementor-text-editor p {
        font-size: 0.8rem !important;
        line-height: 1.2rem !important;
    }
	
    .page-id-1299 .elementor-location-footer, 
    .page-id-1299 footer.elementor-footer {
        margin-top: -170px !important;
    }
	
    .anaecarlos {
        margin-top: 18vh !important;
    }	

    .anaecarlos-text h1, 
    .anaecarlos-text .elementor-heading-title {
        font-size: 2rem !important;
        line-height: 2.2rem !important; 
    }

    .anaecarlos-text h2, 
    .anaecarlos-text .elementor-heading-title.elementor-size-medium {
        font-size: 1.2rem !important;
    }	
}