.elementor-1277 .elementor-element.elementor-element-894aa79{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--overlay-opacity:1;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1277 .elementor-element.elementor-element-894aa79:not(.elementor-motion-effects-element-type-background), .elementor-1277 .elementor-element.elementor-element-894aa79 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://eclipseofilme.com.br/wp-content/uploads/2025/12/Eclipse-Direcao-Djin-Sganzerla-com-Sergio-Guize-e-Djin-Sganzerla.webp");background-position:center center;background-size:cover;}.elementor-1277 .elementor-element.elementor-element-894aa79::before, .elementor-1277 .elementor-element.elementor-element-894aa79 > .elementor-background-video-container::before, .elementor-1277 .elementor-element.elementor-element-894aa79 > .e-con-inner > .elementor-background-video-container::before, .elementor-1277 .elementor-element.elementor-element-894aa79 > .elementor-background-slideshow::before, .elementor-1277 .elementor-element.elementor-element-894aa79 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1277 .elementor-element.elementor-element-894aa79 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:radial-gradient(at center center, #0000006E 35%, #000000CC 74%);}.elementor-1277 .elementor-element.elementor-element-894aa79.e-con{--align-self:center;}.elementor-1277 .elementor-element.elementor-element-90d648f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1277 .elementor-element.elementor-element-9527a4d .elementor-heading-title{font-family:"Oxanium", Sans-serif;font-size:128px;font-weight:300;color:#FFFFFF;}.elementor-1277 .elementor-element.elementor-element-78279bb{width:100%;max-width:100%;text-align:center;}.elementor-1277 .elementor-element.elementor-element-78279bb.elementor-element{--align-self:center;}.elementor-1277 .elementor-element.elementor-element-78279bb .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:19px;font-weight:300;color:#FFFFFF;}.elementor-1277 .elementor-element.elementor-element-f43d607{width:auto;max-width:auto;}.elementor-1277 .elementor-element.elementor-element-f43d607.elementor-element{--align-self:center;}.elementor-1277 .elementor-element.elementor-element-f43d607 .elementor-heading-title{font-family:"Inter", Sans-serif;font-weight:600;color:#FFFFFF;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1277 .elementor-element.elementor-element-932c1f6 .elementor-button{background-color:#0A0F1F00;font-family:"Roboto", Sans-serif;font-weight:500;fill:#FFFFFF;color:#FFFFFF;padding:1.5rem 2.5rem 1.5rem 2.5rem;}.elementor-1277 .elementor-element.elementor-element-932c1f6 .elementor-button:hover, .elementor-1277 .elementor-element.elementor-element-932c1f6 .elementor-button:focus{background-color:#00000000;color:#000000;}.elementor-1277 .elementor-element.elementor-element-932c1f6{width:auto;max-width:auto;}.elementor-1277 .elementor-element.elementor-element-932c1f6.elementor-element{--align-self:center;}.elementor-1277 .elementor-element.elementor-element-932c1f6 .elementor-button:hover svg, .elementor-1277 .elementor-element.elementor-element-932c1f6 .elementor-button:focus svg{fill:#000000;}.elementor-1277 .elementor-element.elementor-element-8089c2a{--display:flex;--position:absolute;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;bottom:0rem;}.elementor-1277 .elementor-element.elementor-element-d5906ff{--display:flex;--min-height:40px;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1277 .elementor-element.elementor-element-dfd92e1{--spacer-size:50px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-1277 .elementor-element.elementor-element-d5906ff{--width:1px;}}@media(max-width:767px){.elementor-1277 .elementor-element.elementor-element-894aa79{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1277 .elementor-element.elementor-element-9527a4d .elementor-heading-title{font-size:4.5rem;}.elementor-1277 .elementor-element.elementor-element-78279bb .elementor-heading-title{font-size:0.8rem;}.elementor-1277 .elementor-element.elementor-element-f43d607 .elementor-heading-title{font-size:0.6rem;}.elementor-1277 .elementor-element.elementor-element-932c1f6 .elementor-button{font-size:0.9rem;padding:1rem 2.0rem 1rem 2.0rem;}.elementor-1277 .elementor-element.elementor-element-8089c2a{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1277 .elementor-element.elementor-element-d5906ff{--min-height:10px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}}/* Start custom CSS for container, class: .elementor-element-894aa79 *//* 1. IMPORTAÇÃO DE FONTES */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Oxanium:wght@300&family=JetBrains+Mono:wght@400&display=swap'); /* 2. ISOLAMENTO TOTAL */ /* Isso garante que o CSS só funcione DENTRO deste container */ #eclipse-hero-scope { /* Variáveis Locais */ --e-serif: 'Oxanium', sans-serif; --e-sans: 'Inter', sans-serif; --e-mono: 'JetBrains Mono', monospace; /* Layout */ position: relative; /* Prende os elementos absolutos aqui dentro */ width: 100%; height: 100vh; min-height: 100%; /* Garante que ocupe a altura da coluna do Elementor */ display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; /* Corta qualquer coisa que tente sair */ } /* 4. CONTEÚDO (Texto e Botões) */ #eclipse-hero-scope .eclipse-content { position: relative; z-index: 10; /* Garante que o texto fique acima da imagem de fundo e efeitos */ text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; color: white; } #eclipse-hero-scope .eclipse-title { font-family: var(--e-serif); /* Tamanho fluido seguro */ font-size: clamp(3rem, 12vw, 8rem); font-weight: 300; letter-spacing: 0.1em; line-height: 1; margin: 8rem 0 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.05em; text-shadow: 0 10px 30px rgba(0,0,0,0.9); } #eclipse-hero-scope .eclipse-title span { display: inline-block; opacity: 0; transform: translateY(20px); animation: eclipseFadeUp 0.8s ease forwards; } /* Delays para animação das letras */ #eclipse-hero-scope .eclipse-title span:nth-child(1) { animation-delay: 0.5s; } #eclipse-hero-scope .eclipse-title span:nth-child(2) { animation-delay: 0.6s; } #eclipse-hero-scope .eclipse-title span:nth-child(3) { animation-delay: 0.7s; } #eclipse-hero-scope .eclipse-title span:nth-child(4) { animation-delay: 0.8s; } #eclipse-hero-scope .eclipse-title span:nth-child(5) { animation-delay: 0.9s; } #eclipse-hero-scope .eclipse-title span:nth-child(6) { animation-delay: 1.0s; } #eclipse-hero-scope .eclipse-title span:nth-child(7) { animation-delay: 1.1s; } #eclipse-hero-scope .eclipse-sub { font-family: var(--e-sans); font-size: clamp(0.9rem, 3vw, 1.2rem); font-weight: 300; letter-spacing: 0.2em; color: rgba(255,255,255,0.9); opacity: 0; transform: translateY(15px); animation: eclipseFadeUp 1s ease forwards 1.6s; margin: -0.1rem 0 0.6rem 0; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,0.8); max-width: 90%; } #eclipse-hero-scope .eclipse-date { font-family: var(--e-mono); font-size: 11px; letter-spacing: 0.2em; color: rgba(255,255,255,0.8); text-transform: uppercase; opacity: 0; animation: eclipseFadeSimple 1s ease forwards 2.0s; margin-bottom: 12rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2); padding: 8px 16px; backdrop-filter: blur(4px); } /* 5. BOTÃO */ #eclipse-hero-scope .eclipse-btn { display: inline-block; background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); color: white !important; text-decoration: none; font-family: var(--e-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; transition: all 0.4s ease; opacity: 0; animation: eclipseFadeSimple 1s ease forwards 2.4s; border: 1px solid rgba(255,255,255,0.4); cursor: pointer; } #eclipse-hero-scope .eclipse-btn:hover { background: white; box-shadow: 0 0 20px rgba(255,255,255,0.3); } /* 6. SCROLL INDICATOR */ #eclipse-hero-scope .eclipse-scroll { position: absolute; bottom: 0.6rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0; animation: eclipseFadeSimple 1s ease forwards 3s; z-index: 5; } #eclipse-hero-scope .eclipse-scroll span { font-family: var(--e-sans); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.5); text-shadow: 0 2px 4px rgba(0,0,0,0.8); } #eclipse-hero-scope .scroll-line-wrap { height: 40px; width: 1px; background: rgba(255,255,255,0.1); position: relative; overflow: hidden; } #eclipse-hero-scope .scroll-line-anim { width: 100%; height: 50%; background: white; position: absolute; top: -100%; animation: eclipseScrollMove 2s ease-in-out infinite; } /* KEYFRAMES (Nomes únicos para não conflitar com tema) */ @keyframes eclipseFadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes eclipseFadeSimple { to { opacity: 1; } } @keyframes eclipsePulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.05); opacity: 0.8; } } @keyframes eclipseScrollMove { 0% { top: -100%; opacity: 0; } 50% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* ========================================== 7. RESPONSIVIDADE AVANÇADA (MOBILE & TABLET) ========================================== */ @media (max-width: 768px) { /* 1. Corrige o bug da barra do Safari/Chrome no iPhone e cria uma margem de segurança no fundo */ #eclipse-hero-scope { min-height: 100svh !important; padding-bottom: 100px !important; /* Muro de proteção para o Scroll Indicator */ padding-top: 15px !important; } /* 2. Anula completamente a margem gigante da data no mobile */ #eclipse-hero-scope .eclipse-date .elementor-heading-title, #eclipse-hero-scope .eclipse-date .elementor-widget-container { margin-bottom: 2rem !important; /* Espaço seguro e controlado até o botão */ margin-top: 1rem !important; } /* 3. Dá um respiro pro título principal não grudar no topo */ #eclipse-hero-scope .eclipse-title .elementor-heading-title { margin: -2.8rem 0 0 0 !important; font-size: clamp(2.rem, 15vw, 4rem) !important; /* Ajusta o texto para caber melhor */ } /* 4. Ajusta o tamanho do botão para telas pequenas */ #eclipse-hero-scope .eclipse-btn .elementor-button { padding: 1rem 2rem !important; font-size: 10px !important; } /* 5. Garante que o scroll indicator fique colado no fundo da tela, na área segura */ #eclipse-hero-scope .eclipse-scroll { bottom: 20px !important; } }/* End custom CSS */