/* ========================================================================== REGRAS DE OURO (SISTEMA 360): Edite os valores abaixo para alterar o design ========================================================================== */ #block-hero{ /* CORES */ --cor-fundo-transicao: #253064; --cor-primaria-amarelo: #d89a14; --cor-texto-claro: #ffffff; --cor-texto-escuro: #000000; --overlay-escurecimento: rgba(0, 0, 0, 0.7); --opacidade-overlay-video: 1; /* DIMENSÕES DO QUADRADO (SIMETRIA) */ --gap-externo: 3vh; --raio-borda-quadrado: 40px; /* ÁREA DE CONTEÚDO (DENTRO DO QUADRADO) */ --largura-maxima-conteudo: 1200px; --padding-lateral-conteudo: 80px; /* ESPAÇAMENTOS (DISTÂNCIAS VERTICAIS) */ --distancia-titulo-texto: 30px; --distancia-texto-botoes: 45px; --distancia-entre-botoes: 25px; /* TIPOGRAFIA (FONTES) */ --fonte-titulo: "Lemon Milk"; --fonte-corpo: "Ekster"; /* TAMANHOS DE FONTE */ --tamanho-titulo: 34px; --tamanho-descricao: 19px; --tamanho-botao: 14px; /* ALTURA DE LINHA (LINE-HEIGHT) */ --altura-linha-titulo: 1.3; --altura-linha-descricao: 1.5; /* ESPAÇAMENTO DE LETRAS (LETTER-SPACING) */ --espacamento-letras-titulo: 0.5px; --espacamento-letras-botao: 0.1px; /* CONTROLE DE TEXTO */ --largura-maxima-descricao: 700px; --opacidade-descricao: 100%; /* BOTÕES & EFEITOS (ESTADO ESTÁVEL) */ --raio-borda-botao: 8px; --padding-botao: 14px 28px; --cor-brilho-eletrico: rgba(216, 154, 20, 0.15); --cor-brilho-branco: rgba(255, 255, 255, 0.12); /* ESTADO DE EXPANSÃO (SCROLL) */ --progresso-expansao: 0; /* Controlado via JS de 0 a 1 */ /* FECHAMENTO DO PORTAL */ --portal-final-size: 25%; } /* ========================================================================== IMPORTAÇÃO DE FONTES ========================================================================== */ @font-face{ font-family: "Lemon Milk"; src: url("/fontes/lemonmilk-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face{ font-family: "Lemon Milk"; src: url("/fontes/lemonmilk-lightitalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } @font-face{ font-family: "Lemon Milk"; src: url("/fontes/lemonmilk-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face{ font-family: "Lemon Milk"; src: url("/fontes/lemonmilk-regularitalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face{ font-family: "Lemon Milk"; src: url("/fontes/lemonmilk-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face{ font-family: "Lemon Milk"; src: url("/fontes/lemonmilk-mediumitalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face{ font-family: "Lemon Milk"; src: url("/fontes/lemonmilk-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face{ font-family: "Lemon Milk"; src: url("/fontes/lemonmilk-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-thin.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-thinitalic.woff2") format("woff2"); font-weight: 100; font-style: italic; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-hairline.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-hairlineitalic.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-extralight.woff2") format("woff2"); font-weight: 250; font-style: normal; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-extralightitalic.woff2") format("woff2"); font-weight: 250; font-style: italic; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-lightitalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-mediumitalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-extrabolditalic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } @font-face{ font-family: "Ekster"; src: url("/fontes/ekster-blackitalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; } /* ========================================================================== ANIMAÇÕES ========================================================================== */ @keyframes hero__energy-sweep{ 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes hero__electric-pulse{ 0% { transform: scale(1); opacity: 0.08; } 100% { transform: scale(1.05); opacity: 0; } } @keyframes hero__inner-glow{ 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } /* PADRÃO REVEAL SURGICAL */ #block-hero .reveal-item{ opacity: 0; transform: translate3d(0, 30px, 0); filter: blur(4px); /* Reduzido de 10px para manter FPS no Hero */ transition: opacity 0.32s cubic-bezier(0.23, 1, 0.32, 1), transform 0.32s cubic-bezier(0.23, 1, 0.32, 1), filter 0.32s ease; transition-delay: var(--reveal-delay, 0s); will-change: transform, opacity, filter; } #block-hero .reveal-item.is-visible{ opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); } @keyframes hero__fade-slide-left{ 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes hero__fade-slide-right{ 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes hero__fade-slide-up{ 0% { opacity: 0; transform: translateY(34px); } 100% { opacity: 1; transform: translateY(0); } } /* ========================================================================== ESTILOS BASE (ESTRUTURA) ========================================================================== */ #block-hero, #block-hero *{ margin: 0; padding: 0; box-sizing: border-box; } #block-hero{ background-color: var(--cor-fundo-transicao); min-height: 100vh; color: var(--cor-texto-claro); } #block-hero .hero-scroll-wrapper{ height: 200vh; /* Define a área de scroll */ position: relative; } #block-hero .hero-sticky-container{ position: sticky; top: 0; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; /* Máscara SVG pré-definida a 15000% — sem flash na fase 2 */ -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22Camada_1%22%20data-name%3D%22Camada%201%22%20viewBox%3D%220%200%201033.552%201147.778%22%3E%3Cdefs%3E%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23000%3B%20stroke-linecap%3A%20square%3B%20stroke-miterlimit%3A%2010%3B%20stroke-width%3A%2012px%3B%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpolyline%20class%3D%22cls-1%22%20points%3D%22415.052%201023.813%20415.052%201141.778%206%201141.778%206%206%20415.052%206%20415.052%20120.8%22%3E%3C%2Fpolyline%3E%3Cg%3E%3Cpath%20d%3D%22M230.949%2C232.302v17.952h40.852v28.484h-40.852v18.431h49.628v31.995h-83.378v-128.619h83.378v31.756h-49.628Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M410.703%2C200.387v130.055h-10.851l-66.145-64.07v62.873h-34.149v-129.975h11.011l65.905%2C63.831v-62.714h34.229Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M466.782%2C232.302v17.952h40.852v28.484h-40.852v18.431h49.628v31.995h-83.378v-128.619h83.378v31.756h-49.628Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M604.087%2C329.165l-34.389-55.852v55.852h-34.149l-.16-128.619h48.831c27.766%2C0%2C47.634%2C18.75%2C47.634%2C41.809%2C0%2C16.038-9.655%2C29.442-22.262%2C35.187l34.469%2C51.623h-39.974ZM569.538%2C257.037l13.963.08c7.261.08%2C13.884-5.026%2C13.884-12.926%2C0-7.979-6.702-12.925-13.884-12.925h-13.963v25.771Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M788.546%2C267.808c0%2C39.096-29.522%2C64.389-66.065%2C64.389-40.852%2C0-71.729-30.479-71.729-67.182s30.958-67.581%2C70.853-67.581c16.356.239%2C35.266%2C7.181%2C45.878%2C16.995l-18.91%2C25.931c-7.181-6.702-17.474-11.011-26.968-11.011-19.149%2C0-35.985%2C15.718-35.985%2C35.585%2C0%2C18.032%2C14.442%2C35.585%2C38.219%2C35.585%2C15.559%2C0%2C26.649-7.5%2C27.128-19.788h-29.441v-25.452h65.984c.639%2C4.309%2C1.038%2C8.458%2C1.038%2C12.527Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M805.288%2C200.547h34.149v128.619h-34.149v-128.619Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M944.195%2C314.165h-48.033l-6.542%2C15h-37.341l59.761-130.214h16.197l59.841%2C130.214h-37.42l-6.463-15ZM933.343%2C289.191l-13.165-30.479-13.245%2C30.479h26.41Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M996.823%2C346.699c3.998%2C0%2C11.251-2.855%2C11.251-10.509%2C0-2.285-.456-3.427-.971-4.284-5.54%2C0-11.365-5.482-11.365-12.85%2C0-7.939%2C6.683-15.021%2C15.991-15.021%2C9.71%2C0%2C15.821%2C7.71%2C15.821%2C19.59%2C0%2C13.479-7.825%2C27.472-21.247%2C27.472-5.597%2C0-9.48-2.798-9.48-4.398Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M230.949%2C417.446v17.952h40.852v28.484h-40.852v18.431h49.628v31.995h-83.378v-128.619h83.378v31.756h-49.628ZM244.832%2C375.078h-21.463l13.724-26.889h26.729l-18.99%2C26.889Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M343.835%2C450.159c0-38.617%2C30.639-67.899%2C70.613-67.899s70.613%2C29.282%2C70.613%2C67.899c0%2C38.298-30.639%2C67.421-70.692%2C67.421s-70.533-29.123-70.533-67.421ZM450.512%2C449.92c0-19.867-15.639-35.187-36.064-35.187s-36.064%2C15.319-36.064%2C35.187%2C15.639%2C35.027%2C36.064%2C35.027%2C36.064-15.239%2C36.064-35.027Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M676.134%2C539.203c-23.298-1.676-38.218-11.25-49.867-22.181-3.191.399-6.383.559-9.654.559-39.974%2C0-70.533-29.123-70.533-67.421%2C0-38.617%2C30.639-67.899%2C70.612-67.899s70.613%2C29.282%2C70.613%2C67.899c0%2C23.219-11.25%2C43.006-28.963%2C55.054%2C8.776%2C2.074%2C19.069%2C3.351%2C29.441%2C3.59l-11.649%2C30.399ZM616.692%2C484.947c20.426%2C0%2C36.064-15.239%2C36.064-35.027s-15.639-35.187-36.064-35.187-36.063%2C15.319-36.063%2C35.187%2C15.638%2C35.027%2C36.063%2C35.027Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M703.648%2C467.553v-81.863h34.389v81.783c0%2C10.691%2C9.175%2C17.792%2C18.909%2C17.792%2C9.654%2C0%2C19.069-7.261%2C19.069-17.792v-81.783h34.389v81.863c0%2C29.521-23.937%2C50.346-53.378%2C50.346s-53.378-20.825-53.378-50.346Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M865.367%2C417.446v17.952h40.852v28.484h-40.852v18.431h49.628v31.995h-83.379v-128.619h83.379v31.756h-49.628Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M308.343%2C558.753v130.055h-10.851l-66.145-64.07v62.873h-34.149v-129.974h11.011l65.905%2C63.831v-62.714h34.229Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M325.086%2C623.381c0-38.617%2C30.639-67.899%2C70.613-67.899s70.612%2C29.282%2C70.612%2C67.899c0%2C38.299-30.639%2C67.422-70.692%2C67.422s-70.533-29.123-70.533-67.422ZM431.764%2C623.142c0-19.867-15.639-35.187-36.064-35.187s-36.064%2C15.319-36.064%2C35.187%2C15.639%2C35.027%2C36.064%2C35.027%2C36.064-15.239%2C36.064-35.027Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M476.351%2C665.749l20.665-20.267c5.346%2C7.899%2C15.319%2C12.687%2C26.09%2C12.687%2C7.261%2C0%2C14.362-2.633%2C14.362-7.899%2C0-6.622-13.165-12.446-25.771-18.032-16.277-7.021-30.24-17.713-30.24-37.101%2C0-22.261%2C21.144-38.139%2C45.559-38.139%2C19.627%2C0%2C34.947%2C9.255%2C39.973%2C21.942l-19.708%2C18.989c-3.829-6.782-13.722-9.734-19.867-9.734-7.021%2C0-12.048%2C3.591-12.048%2C7.979%2C0%2C5.904%2C9.096%2C7.819%2C22.979%2C13.644%2C20.106%2C8.457%2C33.43%2C20.745%2C33.43%2C39.734%2C0%2C24.495-22.819%2C39.734-48.59%2C39.734-21.144%2C0-40.373-9.335-46.835-23.537Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M416.363%2C740.038v200.619h-52.775v-78.793l-53.515%2C75.464h-.37l-53.638-75.464v78.793h-52.775v-200.619h21.209l85.328%2C116.895%2C85.328-116.895h21.208Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M442.251%2C841.519c0-59.68%2C47.35-104.934%2C109.126-104.934s109.126%2C45.254%2C109.126%2C104.934c0%2C59.188-47.35%2C104.194-109.25%2C104.194s-109.002-45.007-109.002-104.194ZM607.112%2C841.15c0-30.704-24.168-54.378-55.734-54.378s-55.734%2C23.674-55.734%2C54.378%2C24.168%2C54.131%2C55.734%2C54.131%2C55.734-23.551%2C55.734-54.131Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M860.5%2C741.888l-91.616%2C200.866h-23.922l-91.246-200.866h57.091l45.869%2C107.646%2C45.993-107.646h57.831Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M932.507%2C790.964v27.743h63.133v44.021h-63.133v28.483h76.696v49.446h-128.855v-198.77h128.855v49.076h-76.696Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22Camada_1%22%20data-name%3D%22Camada%201%22%20viewBox%3D%220%200%201033.552%201147.778%22%3E%3Cdefs%3E%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23000%3B%20stroke-linecap%3A%20square%3B%20stroke-miterlimit%3A%2010%3B%20stroke-width%3A%2012px%3B%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpolyline%20class%3D%22cls-1%22%20points%3D%22415.052%201023.813%20415.052%201141.778%206%201141.778%206%206%20415.052%206%20415.052%20120.8%22%3E%3C%2Fpolyline%3E%3Cg%3E%3Cpath%20d%3D%22M230.949%2C232.302v17.952h40.852v28.484h-40.852v18.431h49.628v31.995h-83.378v-128.619h83.378v31.756h-49.628Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M410.703%2C200.387v130.055h-10.851l-66.145-64.07v62.873h-34.149v-129.975h11.011l65.905%2C63.831v-62.714h34.229Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M466.782%2C232.302v17.952h40.852v28.484h-40.852v18.431h49.628v31.995h-83.378v-128.619h83.378v31.756h-49.628Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M604.087%2C329.165l-34.389-55.852v55.852h-34.149l-.16-128.619h48.831c27.766%2C0%2C47.634%2C18.75%2C47.634%2C41.809%2C0%2C16.038-9.655%2C29.442-22.262%2C35.187l34.469%2C51.623h-39.974ZM569.538%2C257.037l13.963.08c7.261.08%2C13.884-5.026%2C13.884-12.926%2C0-7.979-6.702-12.925-13.884-12.925h-13.963v25.771Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M788.546%2C267.808c0%2C39.096-29.522%2C64.389-66.065%2C64.389-40.852%2C0-71.729-30.479-71.729-67.182s30.958-67.581%2C70.853-67.581c16.356.239%2C35.266%2C7.181%2C45.878%2C16.995l-18.91%2C25.931c-7.181-6.702-17.474-11.011-26.968-11.011-19.149%2C0-35.985%2C15.718-35.985%2C35.585%2C0%2C18.032%2C14.442%2C35.585%2C38.219%2C35.585%2C15.559%2C0%2C26.649-7.5%2C27.128-19.788h-29.441v-25.452h65.984c.639%2C4.309%2C1.038%2C8.458%2C1.038%2C12.527Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M805.288%2C200.547h34.149v128.619h-34.149v-128.619Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M944.195%2C314.165h-48.033l-6.542%2C15h-37.341l59.761-130.214h16.197l59.841%2C130.214h-37.42l-6.463-15ZM933.343%2C289.191l-13.165-30.479-13.245%2C30.479h26.41Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M996.823%2C346.699c3.998%2C0%2C11.251-2.855%2C11.251-10.509%2C0-2.285-.456-3.427-.971-4.284-5.54%2C0-11.365-5.482-11.365-12.85%2C0-7.939%2C6.683-15.021%2C15.991-15.021%2C9.71%2C0%2C15.821%2C7.71%2C15.821%2C19.59%2C0%2C13.479-7.825%2C27.472-21.247%2C27.472-5.597%2C0-9.48-2.798-9.48-4.398Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M230.949%2C417.446v17.952h40.852v28.484h-40.852v18.431h49.628v31.995h-83.378v-128.619h83.378v31.756h-49.628ZM244.832%2C375.078h-21.463l13.724-26.889h26.729l-18.99%2C26.889Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M343.835%2C450.159c0-38.617%2C30.639-67.899%2C70.613-67.899s70.613%2C29.282%2C70.613%2C67.899c0%2C38.298-30.639%2C67.421-70.692%2C67.421s-70.533-29.123-70.533-67.421ZM450.512%2C449.92c0-19.867-15.639-35.187-36.064-35.187s-36.064%2C15.319-36.064%2C35.187%2C15.639%2C35.027%2C36.064%2C35.027%2C36.064-15.239%2C36.064-35.027Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M676.134%2C539.203c-23.298-1.676-38.218-11.25-49.867-22.181-3.191.399-6.383.559-9.654.559-39.974%2C0-70.533-29.123-70.533-67.421%2C0-38.617%2C30.639-67.899%2C70.612-67.899s70.613%2C29.282%2C70.613%2C67.899c0%2C23.219-11.25%2C43.006-28.963%2C55.054%2C8.776%2C2.074%2C19.069%2C3.351%2C29.441%2C3.59l-11.649%2C30.399ZM616.692%2C484.947c20.426%2C0%2C36.064-15.239%2C36.064-35.027s-15.639-35.187-36.064-35.187-36.063%2C15.319-36.063%2C35.187%2C15.638%2C35.027%2C36.063%2C35.027Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M703.648%2C467.553v-81.863h34.389v81.783c0%2C10.691%2C9.175%2C17.792%2C18.909%2C17.792%2C9.654%2C0%2C19.069-7.261%2C19.069-17.792v-81.783h34.389v81.863c0%2C29.521-23.937%2C50.346-53.378%2C50.346s-53.378-20.825-53.378-50.346Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M865.367%2C417.446v17.952h40.852v28.484h-40.852v18.431h49.628v31.995h-83.379v-128.619h83.379v31.756h-49.628Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M308.343%2C558.753v130.055h-10.851l-66.145-64.07v62.873h-34.149v-129.974h11.011l65.905%2C63.831v-62.714h34.229Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M325.086%2C623.381c0-38.617%2C30.639-67.899%2C70.613-67.899s70.612%2C29.282%2C70.612%2C67.899c0%2C38.299-30.639%2C67.422-70.692%2C67.422s-70.533-29.123-70.533-67.422ZM431.764%2C623.142c0-19.867-15.639-35.187-36.064-35.187s-36.064%2C15.319-36.064%2C35.187%2C15.639%2C35.027%2C36.064%2C35.027%2C36.064-15.239%2C36.064-35.027Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M476.351%2C665.749l20.665-20.267c5.346%2C7.899%2C15.319%2C12.687%2C26.09%2C12.687%2C7.261%2C0%2C14.362-2.633%2C14.362-7.899%2C0-6.622-13.165-12.446-25.771-18.032-16.277-7.021-30.24-17.713-30.24-37.101%2C0-22.261%2C21.144-38.139%2C45.559-38.139%2C19.627%2C0%2C34.947%2C9.255%2C39.973%2C21.942l-19.708%2C18.989c-3.829-6.782-13.722-9.734-19.867-9.734-7.021%2C0-12.048%2C3.591-12.048%2C7.979%2C0%2C5.904%2C9.096%2C7.819%2C22.979%2C13.644%2C20.106%2C8.457%2C33.43%2C20.745%2C33.43%2C39.734%2C0%2C24.495-22.819%2C39.734-48.59%2C39.734-21.144%2C0-40.373-9.335-46.835-23.537Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M416.363%2C740.038v200.619h-52.775v-78.793l-53.515%2C75.464h-.37l-53.638-75.464v78.793h-52.775v-200.619h21.209l85.328%2C116.895%2C85.328-116.895h21.208Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M442.251%2C841.519c0-59.68%2C47.35-104.934%2C109.126-104.934s109.126%2C45.254%2C109.126%2C104.934c0%2C59.188-47.35%2C104.194-109.25%2C104.194s-109.002-45.007-109.002-104.194ZM607.112%2C841.15c0-30.704-24.168-54.378-55.734-54.378s-55.734%2C23.674-55.734%2C54.378%2C24.168%2C54.131%2C55.734%2C54.131%2C55.734-23.551%2C55.734-54.131Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M860.5%2C741.888l-91.616%2C200.866h-23.922l-91.246-200.866h57.091l45.869%2C107.646%2C45.993-107.646h57.831Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M932.507%2C790.964v27.743h63.133v44.021h-63.133v28.483h76.696v49.446h-128.855v-198.77h128.855v49.076h-76.696Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 8000%; mask-size: 8000%; } #block-hero .container-imagem{ /* Calcula dimensões e bordas baseado no progresso (0 a 1) */ --gap-atual: calc(var(--gap-externo) * (1 - var(--progresso-expansao))); --raio-atual: calc( var(--raio-borda-quadrado) * (1 - var(--progresso-expansao)) ); width: calc(100vw - (var(--gap-atual) * 2)); height: calc(100vh - (var(--gap-atual) * 2)); border-radius: var(--raio-atual); position: relative; overflow: hidden; display: flex; align-items: center; /* CORREÇÃO DE BORDAS (SISTEMA 360) Resolve linhas brancas/pretas sub-pixel induzidas por border-radius + overflow: hidden */ background-color: transparent; /* Removido fundo para evitar bleed interno */ -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0); -webkit-mask-image: -webkit-radial-gradient( white, black ); /* Chrome force clip fix */ isolation: isolate; } /* SELO FÍSICO: Uma moldura que sobrepõe as bordas para esconder falhas do navegador */ #block-hero .container-imagem::before{ content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border: 4px solid var(--cor-fundo-transicao); border-radius: inherit; z-index: 10; /* Fica acima do vídeo e do overlay */ pointer-events: none; } #block-hero .container-imagem .hero-bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } #block-hero .container-imagem::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-escurecimento); opacity: var(--opacidade-overlay-video); pointer-events: none; z-index: 1; } #block-hero .hero-layout{ position: relative; z-index: 2; width: 100%; padding: 0 calc(var(--gap-externo) + var(--padding-lateral-conteudo)); display: flex; align-items: flex-end; justify-content: space-between; } #block-hero .hero-content{ max-width: var(--largura-maxima-conteudo); opacity: 0; transform: translateX(-50px); will-change: transform, opacity; } #block-hero .hero-layout.animate .hero-content{ animation: hero__fade-slide-left 0.8s ease forwards; } /* Fade-out com scroll (só ativa após animação de entrada terminar) */ #block-hero .hero-content.entry-done{ animation: none !important; opacity: calc(1 - (var(--progresso-expansao) * 1.5)); transform: translateX(calc(-50px * var(--progresso-expansao) * 1.5)); } #block-hero .hero-slogan.entry-done{ animation: none !important; opacity: calc(1 - (var(--progresso-expansao) * 1.5)); transform: translateX(calc(50px * var(--progresso-expansao) * 1.5)); will-change: transform, opacity; } #block-hero .hero-title{ font-family: var(--fonte-titulo); font-weight: bold; font-size: var(--tamanho-titulo); line-height: var(--altura-linha-titulo); letter-spacing: var(--espacamento-letras-titulo); text-transform: uppercase; margin-bottom: var(--distancia-titulo-texto); } #block-hero .hero-title .texto-digitavel{ color: var(--cor-primaria-amarelo); background: linear-gradient( 90deg, var(--cor-primaria-amarelo) 0%, var(--cor-primaria-amarelo) 30%, #dfb455 50%, var(--cor-primaria-amarelo) 70%, var(--cor-primaria-amarelo) 100% ); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; white-space: nowrap; vertical-align: bottom; border-right: 3px solid transparent; /* Cursor escondido por padrão */ padding-right: 4px; } /* Efeito visual enquanto digita (cursor sólido e gradiente rolando) */ #block-hero .hero-title .texto-digitavel.is-typing{ border-color: var(--cor-primaria-amarelo); /* Mostra o cursor */ animation: hero__energy-sweep 8s linear infinite; } /* Efeito visual ao terminar (cursor some, mas o brilho continua) */ #block-hero .hero-title .texto-digitavel.typing-done{ border-color: transparent; /* Remove o cursor */ animation: hero__energy-sweep 8s linear infinite; } #block-hero .hero-description{ font-family: var(--fonte-corpo); font-weight: 500; font-size: var(--tamanho-descricao); line-height: var(--altura-linha-descricao); max-width: var(--largura-maxima-descricao); margin-bottom: var(--distancia-texto-botoes); opacity: var(--opacidade-descricao); } #block-hero .hero-actions{ display: flex; gap: var(--distancia-entre-botoes); } #block-hero .btn{ display: inline-block; padding: var(--padding-botao); border-radius: var(--raio-borda-botao); font-family: var(--fonte-titulo); font-weight: bold; font-size: var(--tamanho-botao); letter-spacing: var(--espacamento-letras-botao); text-decoration: none; text-transform: uppercase; transition: all 0.4s ease; text-align: center; position: relative; overflow: visible; text-decoration: none !important; isolation: isolate; } #block-hero .btn::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--raio-borda-botao); opacity: 0; z-index: -1; } #block-hero .action-btn .btn-sheen{ position: absolute; inset: 0; overflow: hidden; border-radius: var(--raio-borda-botao); pointer-events: none; z-index: 1; } #block-hero .action-btn .btn-sheen::after{ content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 34%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.22), transparent ); transform: translateX(-160%) skewX(-22deg); transition: transform 0.6s ease; opacity: 0; filter: blur(1px); } #block-hero .action-btn:hover .btn-sheen::after{ transform: translateX(420%) skewX(-22deg); opacity: 1; } #block-hero .action-btn .btn-label{ position: relative; z-index: 2; } #block-hero .btn:hover{ transform: none; text-decoration: none !important; } #block-hero .btn:hover::before{ animation: hero__electric-pulse 1.2s ease-out infinite; } #block-hero .btn-primario{ background-color: var(--cor-primaria-amarelo); color: var(--cor-texto-claro); border: 1px solid rgba(216, 154, 20, 0.5); } #block-hero .btn-primario::before{ box-shadow: 0 0 15px var(--cor-primaria-amarelo); } #block-hero .btn-primario:hover{ opacity: 1; background-color: #f7b11d; color: var(--cor-texto-claro) !important; box-shadow: 0 0 10px rgba(216, 154, 20, 0.75), 0 0 28px rgba(216, 154, 20, 0.35); } #block-hero .btn-primario:focus, #block-hero .btn-primario:active, #block-hero .btn-primario:visited{ color: var(--cor-texto-claro) !important; text-decoration: none !important; } #block-hero .btn-secundario{ background-color: var(--cor-texto-claro); color: var(--cor-texto-escuro); border: 1px solid rgba(255, 255, 255, 0.3); } #block-hero .btn-secundario::before{ box-shadow: 0 0 15px #ffffff; } #block-hero .btn-secundario:hover{ opacity: 1; background-color: #ffffff; color: var(--cor-texto-escuro) !important; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 28px rgba(255, 255, 255, 0.3); } #block-hero .btn-secundario:focus, #block-hero .btn-secundario:active, #block-hero .btn-secundario:visited{ color: var(--cor-texto-escuro) !important; text-decoration: none !important; } /* SLOGAN (LADO DIREITO) */ #block-hero .hero-slogan{ width: 120px; height: auto; flex-shrink: 0; opacity: 0; transform: translateX(50px); pointer-events: none; filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5)); } #block-hero .hero-layout.animate .hero-slogan{ animation: hero__fade-slide-right 0.8s ease 0.3s forwards; } /* RESPONSIVIDADE BÁSICA */ @media (max-width: 768px){ #block-hero{ --padding-lateral-conteudo: 28px; --tamanho-titulo: 20px; --tamanho-descricao: 15px; --tamanho-botao: 13px; --distancia-titulo-texto: 20px; --distancia-texto-botoes: 26px; --distancia-entre-botoes: 12px; --largura-maxima-descricao: 320px; --portal-final-size: 50%; } /* Altura baseada em svh: exclui a barra do browser, sem overflow */ #block-hero .hero-sticky-container{ height: 100svh; } /* Esconde o br do título no mobile — fluxo natural de texto */ #block-hero .hero-title br{ display: none; } /* Quadrado interno em 98svh — simula espaço de cabeçalho no topo */ #block-hero .container-imagem{ --gap-externo: 1svh !important; border-radius: 20px !important; height: 98svh !important; width: calc(100vw - 2svh) !important; } /* Slogan oculto no mobile */ #block-hero .hero-slogan{ display: none !important; } #block-hero .hero-layout{ min-height: 100svh; /* Topo: espaço para o cabeçalho fixo (~66px) + margem de respiro */ padding: clamp(88px, 16svh, 120px) var(--padding-lateral-conteudo) clamp(28px, 5svh, 48px); flex-direction: column; align-items: center; justify-content: flex-start; gap: 24px; text-align: center; } #block-hero .hero-content{ max-width: 360px; width: 100%; display: flex; flex-direction: column; align-items: center; transform: translateY(28px); } #block-hero .hero-layout.animate .hero-content{ animation: hero__fade-slide-up 0.7s ease forwards; } #block-hero .hero-content.entry-done{ opacity: calc(1 - (var(--progresso-expansao) * 1.35)); transform: translateY(calc(-20px * var(--progresso-expansao))); } #block-hero .hero-title{ text-align: center; } #block-hero .hero-title .texto-digitavel{ white-space: normal; } #block-hero .hero-description{ text-align: center; } #block-hero .hero-actions{ flex-direction: column; gap: var(--distancia-entre-botoes); width: 100%; max-width: 340px; } #block-hero .btn{ width: 100%; padding: 15px 18px; } #block-hero .scroll-indicator{ display: none; } } /* Suporte a prefers-reduced-motion: desativa animações pesadas */ @media (prefers-reduced-motion: reduce){ #block-hero .reveal-item{ opacity: 1; transform: none; filter: none; transition: none; } } #block-hero .hero-white-fill{ position: absolute; inset: 0; background-color: #ffffff; opacity: 0; z-index: 20; pointer-events: none; will-change: opacity; } /* Scroll indicator */ @keyframes hero__scroll-core-travel{ 0% { opacity: 0; transform: translate(-50%, -7px) scale(0.5); } 18% { opacity: 1; transform: translate(-50%, 0) scale(0.88); } 70% { opacity: 1; transform: translate(-50%, 16px) scale(1); } 100% { opacity: 0; transform: translate(-50%, 22px) scale(0.4); } } @keyframes hero__scroll-core-pulse{ 0% { opacity: 0; transform: scale(0.55); } 25% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } } #block-hero .scroll-indicator{ position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; justify-content: center; width: 48px; height: 56px; opacity: calc(1 - (var(--progresso-expansao) * 4)); pointer-events: auto; cursor: pointer; transition: transform 0.35s ease, opacity 0.35s ease; } #block-hero .scroll-indicator:hover{ transform: translateX(-50%) translateY(-1px); } #block-hero .scroll-signal{ position: relative; width: 28px; height: 42px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.36); background: linear-gradient( 180deg, rgba(12, 18, 40, 0.42), rgba(255, 255, 255, 0.04) ), radial-gradient( circle at 50% 82%, rgba(216, 154, 20, 0.18), transparent 34% ); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 0 12px rgba(255, 255, 255, 0.03), 0 8px 18px rgba(0, 0, 0, 0.14), 0 0 18px rgba(216, 154, 20, 0.06); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); overflow: hidden; } #block-hero .scroll-signal::before{ content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 1px; transform: translateX(-50%); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.04) ); } #block-hero .scroll-signal::after{ content: ""; position: absolute; left: 50%; bottom: 6px; width: 9px; height: 2px; border-radius: 999px; transform: translateX(-50%); background: rgba(255, 255, 255, 0.16); } #block-hero .scroll-signal-core{ position: absolute; left: 50%; top: 8px; width: 7px; height: 7px; border-radius: 999px; transform: translateX(-50%); background: radial-gradient( circle at 35% 35%, #fff5cc, #d89a14 60%, #9f6700 100% ); box-shadow: 0 0 8px rgba(216, 154, 20, 0.5), 0 0 16px rgba(216, 154, 20, 0.18); animation: hero__scroll-core-travel 1.8s cubic-bezier(0.23, 1, 0.32, 1) infinite; } #block-hero .scroll-signal-core::after{ content: ""; position: absolute; inset: -4px; border-radius: 999px; border: 1px solid rgba(255, 227, 164, 0.38); animation: hero__scroll-core-pulse 1.8s ease-out infinite; } /* Drop-shadow pulsante nas letras */ @keyframes hero__slogan-glow-pulse{ 0%, 100% { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 28px rgba(216, 154, 20, 0.8)) drop-shadow(0 0 70px rgba(216, 154, 20, 0.45)); } 50% { filter: drop-shadow(0 0 18px #fff) drop-shadow(0 0 45px rgba(255, 210, 60, 0.95)) drop-shadow(0 0 110px rgba(216, 154, 20, 0.6)); } } #block-hero .hero-sticky-container.portal-done{ animation: hero__slogan-glow-pulse 2.5s ease-in-out infinite; } #block-hero .hero-vignette{ position: absolute; inset: 0; z-index: 50; pointer-events: none; opacity: 0; will-change: opacity; transition: opacity 0.16s linear; background: radial-gradient( circle at center, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.7) 82% ); } #block-hero .hero-scroll-wrapper.vignette-active .hero-vignette{ opacity: 1; } #block-hero[data-motion="off"]{ --opacidade-overlay-video: 0.28; } #block-hero[data-motion="off"] .hero-scroll-wrapper{ height: 100vh !important; } #block-hero[data-motion="off"] .hero-sticky-container{ position: relative; -webkit-mask-image: none; mask-image: none; -webkit-mask-size: auto; mask-size: auto; } #block-hero[data-motion="off"] .container-imagem{ width: 100vw; height: 100vh; border-radius: 0; } #block-hero[data-motion="off"] .reveal-item, #block-hero[data-motion="off"] .hero-content, #block-hero[data-motion="off"] .hero-slogan{ opacity: 1; transform: none; filter: none; transition: none; animation: none; will-change: auto; } #block-hero[data-motion="off"] .hero-white-fill, #block-hero[data-motion="off"] .scroll-indicator, #block-hero[data-motion="off"] .hero-vignette{ display: none; }