/* ========================================================= BAILE — POLIMENTO VISUAL ========================================================= */ /* --------------------------------------------------------- FUNDO UM POUCO MAIS CLARO Mantém as bordas cinematográficas e os textos legíveis --------------------------------------------------------- */ .hero{ box-shadow: inset 0 0 0 100vmax rgba(255,245,240,.045), inset 0 0 150px rgba(0,0,0,.18) !important; } /* texto continua muito legível */ .copy, .copy h1, .copy h2, .copy p, .date, .nav, .nav a, .outline-btn, .brand-luxury{ text-shadow: 0 2px 5px rgba(0,0,0,.78), 0 0 18px rgba(0,0,0,.42); } /* ========================================================= MÁSCARA GRANDE Só começa a virar quando chega sobre a mesa ========================================================= */ .mask-wrap{ left:48.5% !important; perspective:900px; transform-style:preserve-3d; } .mask-wrap > img.custom-mask-image{ transform-origin:50% 86%; transform-style:preserve-3d; backface-visibility:hidden; animation: mascaraSobreMesa 3.15s cubic-bezier(.2,.78,.24,1) forwards !important; filter: drop-shadow( 10px 15px 13px rgba(0,0,0,.55) ); } @keyframes mascaraSobreMesa{ 0%, 68%{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 80%{ transform: rotateX(7deg) rotateY(-8deg) rotateZ(-2deg); } 92%{ transform: rotateX(4deg) rotateY(-12deg) rotateZ(-4.5deg); } 100%{ transform: rotateX(5deg) rotateY(-10deg) rotateZ(-4deg); } } /* ========================================================= NOVO TÍTULO LESS IS MORE ========================================================= */ .brand-luxury{ position:relative !important; display:block !important; width:max-content !important; max-width:330px !important; padding-right:38px !important; color:#f5eee7 !important; text-align:left !important; text-decoration:none !important; line-height:1 !important; } /* PRIMEIRO */ .brand-luxury .brand-kicker{ display:block; margin-bottom:5px; font-family: Arial, sans-serif; font-size:9px; font-weight:500; letter-spacing:.47em; opacity:.78; } /* BAILE DE MÁSCARAS */ .brand-luxury .brand-main{ display:block; font-family: Georgia, "Times New Roman", serif; font-size: clamp( 22px, 2vw, 31px ); font-weight:400; letter-spacing:.015em; white-space:nowrap; } /* DE FLORIPA */ .brand-luxury .brand-place{ display:block; margin-top:6px; font-family: Arial, sans-serif; font-size:7px; letter-spacing:.42em; opacity:.67; } /* ========================================================= MÁSCARA PENDURADA NO LOGO ========================================================= */ .brand-hanging-mask{ position:absolute; right:-2px; top:-13px; width:29px; height:62px; display:block; transform-origin: 50% 0; animation: mascaraPendurada 5.8s ease-in-out infinite; filter: drop-shadow( 0 4px 4px rgba(0,0,0,.6) ); } .brand-hanging-mask svg{ width:100%; height:100%; overflow:visible; } @keyframes mascaraPendurada{ 0%, 100%{ transform: rotate(-2deg); } 50%{ transform: rotate(2.5deg); } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:900px){ .brand-luxury{ max-width:235px !important; padding-right:30px !important; } .brand-luxury .brand-main{ font-size:20px; } .brand-luxury .brand-kicker{ font-size:7px; } .brand-luxury .brand-place{ font-size:6px; } .brand-hanging-mask{ width:23px; height:52px; right:0; top:-10px; } .mask-wrap > img.custom-mask-image{ animation: mascaraSobreMesaMobile 3.15s cubic-bezier(.2,.78,.24,1) forwards !important; } } @keyframes mascaraSobreMesaMobile{ 0%, 70%{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100%{ transform: rotateX(4deg) rotateY(-7deg) rotateZ(-3deg); } } /* ========================================================= MÁSCARA NA MESA — MENOS BRILHO + UM POUCO MENOR ========================================================= */ .mask-wrap > img.custom-mask-image{ animation: mascaraSobreMesaRefinada 3.15s cubic-bezier(.2,.78,.24,1) forwards !important; } @keyframes mascaraSobreMesaRefinada{ 0%, 68%{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); filter: brightness(1) saturate(1) drop-shadow(10px 15px 13px rgba(0,0,0,.55)); } 80%{ transform: rotateX(7deg) rotateY(-8deg) rotateZ(-2deg) scale(.98); filter: brightness(.96) saturate(.98) drop-shadow(10px 15px 13px rgba(0,0,0,.55)); } 92%{ transform: rotateX(4deg) rotateY(-12deg) rotateZ(-4.5deg) scale(.95); filter: brightness(.88) saturate(.94) drop-shadow(9px 13px 11px rgba(0,0,0,.50)); } 100%{ transform: rotateX(5deg) rotateY(-10deg) rotateZ(-4deg) scale(.92); filter: brightness(.82) saturate(.90) drop-shadow(8px 11px 10px rgba(0,0,0,.45)); } } /* MOBILE */ @media(max-width:900px){ .mask-wrap > img.custom-mask-image{ animation: mascaraSobreMesaMobileRefinada 3.15s cubic-bezier(.2,.78,.24,1) forwards !important; } @keyframes mascaraSobreMesaMobileRefinada{ 0%, 70%{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); filter: brightness(1) saturate(1) drop-shadow(10px 15px 13px rgba(0,0,0,.55)); } 100%{ transform: rotateX(4deg) rotateY(-7deg) rotateZ(-3deg) scale(.93); filter: brightness(.84) saturate(.92) drop-shadow(8px 11px 10px rgba(0,0,0,.45)); } } } /* ========================================================= LATERAIS CINEMATOGRÁFICAS — VERSÃO SEGURA Não cria overlay. Não mexe em position. Não mexe em z-index. Não interfere na máscara. ========================================================= */ .hero{ box-shadow: /* esquerda */ inset 125px 0 105px -72px rgba(4, 1, 6, .42), /* direita */ inset -125px 0 105px -72px rgba(4, 1, 6, .42), /* mantém o leve clareamento aprovado */ inset 0 0 0 100vmax rgba(255,245,240,.035), /* profundidade geral */ inset 0 0 145px rgba(0,0,0,.15) !important; } /* ========================================================= NOTEBOOK / DESKTOP MENOR ========================================================= */ @media (min-width:901px) and (max-width:1400px){ .hero{ box-shadow: inset 105px 0 90px -62px rgba(4,1,6,.40), inset -105px 0 90px -62px rgba(4,1,6,.40), inset 0 0 0 100vmax rgba(255,245,240,.035), inset 0 0 125px rgba(0,0,0,.14) !important; } } /* ========================================================= CELULAR — BEM MAIS SUAVE ========================================================= */ @media (max-width:900px){ .hero{ box-shadow: inset 55px 0 55px -38px rgba(4,1,6,.25), inset -55px 0 55px -38px rgba(4,1,6,.25), inset 0 0 0 100vmax rgba(255,245,240,.025) !important; } } /* garante que o overlay defeituoso não exista */ .hero::after{ content:none !important; display:none !important; } /* máscara acima da composição, sem alterar sua animação */ .mask-wrap{ z-index:30 !important; } /* ========================================================= LATERAIS CINEMATOGRÁFICAS V2 - escurece esquerda e direita - centro permanece iluminado - não cobre máscara - não cobre textos ========================================================= */ /* elimina qualquer overlay antigo que possa dar problema */ .hero::after{ display:none !important; content:none !important; } .hero{ box-shadow: /* ESCURECIMENTO PRINCIPAL ESQUERDA */ inset 24vw 0 18vw -15vw rgba(0,0,0,.88), /* ESCURECIMENTO PRINCIPAL DIREITA */ inset -24vw 0 18vw -15vw rgba(0,0,0,.88), /* SEGUNDA CAMADA — TRANSIÇÃO MAIS SUAVE */ inset 16vw 0 13vw -13vw rgba(20,0,5,.55), inset -16vw 0 13vw -13vw rgba(20,0,5,.55), /* LEVE ESCURECIMENTO SUPERIOR */ inset 0 7vh 9vh -7vh rgba(0,0,0,.28) !important; } /* ========================================================= NOTEBOOK / DESKTOP MENOR ========================================================= */ @media (min-width:901px) and (max-width:1400px){ .hero{ box-shadow: inset 27vw 0 20vw -17vw rgba(0,0,0,.90), inset -27vw 0 20vw -17vw rgba(0,0,0,.90), inset 17vw 0 14vw -14vw rgba(20,0,5,.50), inset -17vw 0 14vw -14vw rgba(20,0,5,.50), inset 0 7vh 9vh -7vh rgba(0,0,0,.25) !important; } } /* ========================================================= MOBILE MAIS SUAVE PARA NÃO APAGAR A ARTE ========================================================= */ @media (max-width:900px){ .hero{ box-shadow: inset 22vw 0 18vw -16vw rgba(0,0,0,.66), inset -22vw 0 18vw -16vw rgba(0,0,0,.66) !important; } } /* ========================================================= MOBILE — TIPOGRAFIA MAIS ELEGANTE DESKTOP NÃO É ALTERADO ========================================================= */ @media (max-width:900px){ /* ----------------------------------------------------- BOTÃO SUPERIOR ----------------------------------------------------- */ .mobile-top-ticket{ width:auto !important; max-width:170px !important; padding:15px 18px !important; font-size:11px !important; line-height:1.25 !important; letter-spacing:.10em !important; text-align:center !important; } /* ----------------------------------------------------- O SEGREDO ESTÁ PRESTES ----------------------------------------------------- */ .mobile-secret-title{ max-width:355px !important; margin-top:0 !important; margin-bottom:10px !important; font-size: clamp(38px, 10.5vw, 48px) !important; line-height:.98 !important; letter-spacing:-.025em !important; text-wrap:balance; } /* ----------------------------------------------------- A SER REVELADO ----------------------------------------------------- */ .mobile-reveal-title{ display:block !important; max-width:340px !important; margin-top:4px !important; margin-bottom:20px !important; font-size: clamp(34px, 9vw, 43px) !important; line-height:1 !important; } /* ----------------------------------------------------- TEXTO MENOR ----------------------------------------------------- */ .mobile-description{ max-width:315px !important; font-size:14px !important; line-height:1.45 !important; letter-spacing:.03em !important; } /* ----------------------------------------------------- BOTÃO TEASER ----------------------------------------------------- */ .mobile-teaser-button{ width:auto !important; min-width:220px !important; max-width:270px !important; padding: 16px 20px !important; font-size:11px !important; letter-spacing:.09em !important; } /* ===================================================== BLOCO DE PRÉ-VENDA ===================================================== */ .mobile-presale-title{ display:block !important; width:100% !important; max-width:360px !important; margin: 18px auto 4px !important; font-size: clamp(34px, 9vw, 43px) !important; line-height:.92 !important; letter-spacing:-.025em !important; text-align:center !important; text-wrap:balance; } /* 31.OUT */ .mobile-presale-date{ display:block !important; width:100% !important; margin: 10px auto 2px !important; font-size: clamp(52px, 14vw, 67px) !important; line-height:.95 !important; text-align:center !important; letter-spacing:-.035em !important; } /* FLORIANÓPOLIS/SC */ .mobile-presale-location{ display:block !important; width:100% !important; margin: 7px auto 18px !important; font-size:13px !important; line-height:1.2 !important; letter-spacing:.04em !important; text-align:center !important; } /* botão final */ .mobile-ticket-button{ display:flex !important; width:min(236px, 74vw) !important; min-height:54px !important; margin: 0 auto !important; padding: 14px 20px !important; align-items:center !important; justify-content:center !important; font-size:11px !important; letter-spacing:.10em !important; text-align:center !important; } } /* ========================================================= MOBILE — COMPOSIÇÃO EDITORIAL TEXTO / IMAGEM / TEXTO DESKTOP NÃO MUDA ========================================================= */ #mobile-editorial-layout{ display:none; } @media (max-width:900px){ html, body{ height:auto !important; min-height:100% !important; overflow-x:hidden !important; overflow-y:auto !important; } body{ position:static !important; } .hero{ height:auto !important; min-height:100svh !important; overflow:visible !important; background-color:#100204 !important; } .content{ height:auto !important; min-height:0 !important; overflow:visible !important; } /* quando a imagem do painel foi carregada no novo palco, retiramos a imagem antiga do fundo da hero */ body.mobile-editorial-has-bg .hero{ background-image:none !important; background-color:#100204 !important; } /* wrappers que ficaram vazios depois da reorganização */ .mobile-editorial-empty{ display:none !important; } /* ===================================================== NOVO BLOCO ===================================================== */ #mobile-editorial-layout{ display:block; width:100%; margin: 54px auto 0; position:relative; z-index:10; } /* ===================================================== BLOCO SUPERIOR texto = esquerda botão = direita ===================================================== */ .mobile-editorial-top{ width:100%; display:grid; grid-template-columns: minmax(0, 1fr) 132px; gap:16px; align-items:center; padding: 12px 26px 32px; } .mobile-editorial-top-copy{ min-width:0; text-align:left; } .mobile-editorial-top-action{ display:flex; justify-content:flex-end; align-items:center; } /* O SEGREDO */ #mobile-editorial-layout .mobile-secret-title{ max-width:none !important; margin:0 0 8px !important; font-size: clamp(32px, 8.5vw, 42px) !important; line-height:.96 !important; letter-spacing:-.025em !important; text-align:left !important; } /* a ser revelado */ #mobile-editorial-layout .mobile-reveal-title{ max-width:none !important; margin: 0 0 15px !important; font-size: clamp(29px, 7.8vw, 38px) !important; line-height:1 !important; text-align:left !important; } #mobile-editorial-layout .mobile-description{ max-width:245px !important; margin:0 !important; font-size:12px !important; line-height:1.42 !important; text-align:left !important; } /* ===================================================== BOTÃO DO TEASER — DIREITA ===================================================== */ #mobile-editorial-layout .mobile-teaser-button{ width:132px !important; min-width:0 !important; min-height:72px !important; margin:0 !important; padding: 13px 12px !important; display:flex !important; justify-content:center !important; align-items:center !important; text-align:center !important; font-size:10px !important; line-height:1.3 !important; letter-spacing:.08em !important; } /* ===================================================== A IMAGEM FICA SOZINHA ===================================================== */ .mobile-editorial-image{ width: calc(100% - 30px); aspect-ratio: 4 / 3; margin: 0 auto; position:relative; overflow:hidden; background-color:#090102; background-repeat:no-repeat; background-position:center center; background-size:contain; box-shadow: 0 22px 55px rgba(0,0,0,.40); } /* escurecimento mínimo nas bordas da FOTO, sem afetar o conteúdo */ .mobile-editorial-image::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient( to right, rgba(0,0,0,.18), transparent 15%, transparent 85%, rgba(0,0,0,.18) ); } /* ===================================================== BLOCO INFERIOR botão = esquerda texto = direita ===================================================== */ .mobile-editorial-bottom{ width:100%; display:grid; grid-template-columns: 132px minmax(0, 1fr); gap:18px; align-items:center; padding: 32px 26px 50px; } .mobile-editorial-bottom-action{ display:flex; justify-content:flex-start; align-items:center; } .mobile-editorial-bottom-copy{ min-width:0; text-align:right; } /* ===================================================== PRÉ VENDA ===================================================== */ #mobile-editorial-layout .mobile-presale-title{ width:100% !important; max-width:none !important; margin: 0 0 8px !important; font-size: clamp(27px, 7.5vw, 37px) !important; line-height:.94 !important; letter-spacing:-.02em !important; text-align:right !important; } #mobile-editorial-layout .mobile-presale-date{ width:100% !important; margin: 4px 0 3px !important; font-size: clamp(43px, 11.5vw, 58px) !important; line-height:.92 !important; text-align:right !important; } #mobile-editorial-layout .mobile-presale-location{ width:100% !important; margin:8px 0 0 !important; font-size:11px !important; line-height:1.2 !important; letter-spacing:.02em !important; text-align:right !important; } /* ===================================================== BOTÃO FINAL — ESQUERDA ===================================================== */ #mobile-editorial-layout .mobile-ticket-button{ width:132px !important; min-height:72px !important; margin:0 !important; padding: 13px 10px !important; display:flex !important; justify-content:center !important; align-items:center !important; text-align:center !important; font-size:10px !important; line-height:1.3 !important; letter-spacing:.07em !important; } } /* ========================================================= CELULARES BEM ESTREITOS ========================================================= */ @media (max-width:380px){ .mobile-editorial-top{ grid-template-columns: minmax(0, 1fr) 112px; gap:11px; padding-left:20px; padding-right:20px; } .mobile-editorial-bottom{ grid-template-columns: 112px minmax(0, 1fr); gap:13px; padding-left:20px; padding-right:20px; } #mobile-editorial-layout .mobile-teaser-button, #mobile-editorial-layout .mobile-ticket-button{ width:112px !important; font-size:9px !important; } } /* ========================================================= MOBILE EDITORIAL — MÁSCARA CAI NA MESA DESKTOP NÃO MUDA ========================================================= */ @media (max-width:900px){ .mobile-editorial-image{ position:relative !important; overflow:hidden !important; } .mobile-editorial-image::after{ z-index:1 !important; } /* máscara dentro da foto */ .mobile-editorial-image .mask-wrap.mobile-mask-on-table{ display:block !important; position:absolute !important; width:38% !important; max-width:155px !important; height:auto !important; left:40% !important; top:-42%; margin:0 !important; z-index:8 !important; transform: translateX(-50%) !important; transform-origin: center center !important; animation: quedaMascaraMobileEditorial 3.25s cubic-bezier(.18,.72,.24,1) forwards !important; pointer-events:none !important; } .mobile-editorial-image .mask-wrap.mobile-mask-on-table > img.custom-mask-image{ display:block !important; width:100% !important; height:auto !important; opacity:1 !important; transform-origin: 50% 85% !important; animation: mascaraPousaMobileEditorial 3.25s cubic-bezier(.18,.72,.24,1) forwards !important; } /* ===================================================== QUEDA ===================================================== */ @keyframes quedaMascaraMobileEditorial{ 0%{ top:-42%; opacity:0; } 8%{ opacity:1; } 68%{ top:61%; } 82%{ top:68%; } 91%{ top:65.5%; } 100%{ top:67%; opacity:1; } } /* ===================================================== AO CHEGAR NA MESA: - vira um pouco - diminui - perde brilho ===================================================== */ @keyframes mascaraPousaMobileEditorial{ 0%, 68%{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); filter: brightness(1) saturate(1) drop-shadow( 8px 12px 10px rgba(0,0,0,.50) ); } 82%{ transform: rotateX(5deg) rotateY(-6deg) rotateZ(-2deg) scale(.97); filter: brightness(.94) saturate(.96) drop-shadow( 7px 10px 9px rgba(0,0,0,.48) ); } 91%{ transform: rotateX(4deg) rotateY(-9deg) rotateZ(-4deg) scale(.91); filter: brightness(.86) saturate(.92) drop-shadow( 6px 8px 8px rgba(0,0,0,.44) ); } 100%{ transform: rotateX(5deg) rotateY(-8deg) rotateZ(-3.5deg) scale(.90); filter: brightness(.80) saturate(.88) drop-shadow( 5px 7px 7px rgba(0,0,0,.42) ); } } } /* ========================================================= MOBILE FINAL - UMA ÚNICA TELA - SEM ESPAÇO GRANDE NO TOPO - MENU HAMBÚRGUER - BOTÕES MAIS LEGÍVEIS DESKTOP NÃO MUDA ========================================================= */ .mobile-hamburger, .mobile-menu-panel, .mobile-menu-backdrop{ display:none; } @media (max-width:900px){ html, body{ width:100% !important; height:100svh !important; min-height:100svh !important; margin:0 !important; overflow:hidden !important; } body{ position:relative !important; } /* ===================================================== HERO ===================================================== */ .hero{ width:100% !important; height:100svh !important; min-height:100svh !important; max-height:100svh !important; overflow:hidden !important; } /* topo original mais compacto */ .nav{ min-height:48px !important; padding: 7px 18px !important; margin:0 !important; } /* links antigos do menu somem; o logo/nome continua */ .mobile-original-menu-link{ display:none !important; } /* CTA antigo do topo: já temos os botões no layout editorial */ .mobile-top-ticket{ display:none !important; } /* ===================================================== TÍTULO DO EVENTO NO TOPO ===================================================== */ .brand-luxury{ max-width:245px !important; padding-right:26px !important; transform: scale(.90); transform-origin: left center; } .brand-luxury .brand-main{ font-size:18px !important; } .brand-luxury .brand-kicker{ font-size:6px !important; } .brand-luxury .brand-place{ font-size:5.5px !important; } /* ===================================================== LAYOUT EDITORIAL CABENDO EM UMA TELA ===================================================== */ #mobile-editorial-layout{ width:100% !important; height: calc(100svh - 52px) !important; margin: 0 auto !important; padding:0 !important; display:grid !important; grid-template-rows: auto minmax(0, 1fr) auto; overflow:hidden !important; } /* ===================================================== BLOCO DE CIMA ===================================================== */ .mobile-editorial-top{ grid-template-columns: minmax(0,1fr) 126px !important; gap:12px !important; padding: 3px 20px 10px !important; align-items:center !important; } #mobile-editorial-layout .mobile-secret-title{ font-size: clamp(28px,7.8vw,37px) !important; line-height:.94 !important; margin: 0 0 4px !important; } #mobile-editorial-layout .mobile-reveal-title{ font-size: clamp(25px,7vw,34px) !important; line-height:.96 !important; margin: 0 0 8px !important; } #mobile-editorial-layout .mobile-description{ font-size: 10.5px !important; line-height: 1.28 !important; max-width: 230px !important; } /* ===================================================== BOTÃO TEASER TEXTO MAIOR ===================================================== */ #mobile-editorial-layout .mobile-teaser-button{ width:126px !important; min-width:126px !important; min-height:58px !important; padding: 10px 9px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: .055em !important; } /* ===================================================== FOTO OCUPA TODO O ESPAÇO QUE SOBRA ===================================================== */ .mobile-editorial-image{ width: calc(100% - 22px) !important; height: 100% !important; min-height:0 !important; aspect-ratio:auto !important; margin: 0 auto !important; background-size: contain !important; background-position: center center !important; } /* ===================================================== BLOCO INFERIOR ===================================================== */ .mobile-editorial-bottom{ grid-template-columns: 126px minmax(0,1fr) !important; gap: 12px !important; padding: 10px 20px 10px !important; align-items:center !important; } #mobile-editorial-layout .mobile-presale-title{ margin: 0 0 3px !important; font-size: clamp(24px,6.8vw,32px) !important; line-height:.92 !important; } #mobile-editorial-layout .mobile-presale-date{ margin: 2px 0 1px !important; font-size: clamp(38px,10vw,50px) !important; line-height:.88 !important; } #mobile-editorial-layout .mobile-presale-location{ margin: 5px 0 0 !important; font-size: 10px !important; } /* ===================================================== BOTÃO INGRESSO TEXTO MAIOR ===================================================== */ #mobile-editorial-layout .mobile-ticket-button{ width: 126px !important; min-width: 126px !important; min-height: 58px !important; padding: 10px 9px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: .055em !important; } /* ===================================================== HAMBÚRGUER ===================================================== */ .mobile-hamburger{ display:flex !important; position:absolute; top: max( 10px, env(safe-area-inset-top) ); right:15px; width:42px; height:42px; padding:10px; border: 1px solid rgba(255,255,255,.18); border-radius:50%; background: rgba(10,2,5,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); flex-direction:column; justify-content:center; gap:5px; z-index:10002; cursor:pointer; } .mobile-hamburger span{ display:block; width:20px; height:1.5px; margin:0 auto; background:#f3ede8; border-radius:10px; transition: transform .25s ease, opacity .25s ease; } /* animação do X */ .mobile-hamburger.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); } .mobile-hamburger.open span:nth-child(2){ opacity:0; } .mobile-hamburger.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); } /* ===================================================== FUNDO ESCURO DO MENU ===================================================== */ .mobile-menu-backdrop{ display:block; position:fixed; inset:0; background: rgba(0,0,0,.58); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity:0; visibility:hidden; transition: opacity .25s ease, visibility .25s ease; z-index:9998; } .mobile-menu-backdrop.open{ opacity:1; visibility:visible; } /* ===================================================== MENU LATERAL ===================================================== */ .mobile-menu-panel{ display:flex; position:fixed; top:0; right:0; width: min( 78vw, 310px ); height:100svh; padding: 90px 28px 30px; background: rgba(18,3,7,.97); border-left: 1px solid rgba(255,255,255,.10); flex-direction:column; gap:6px; transform: translateX(105%); transition: transform .32s cubic-bezier(.2,.75,.2,1); z-index:10000; } .mobile-menu-panel.open{ transform: translateX(0); } .mobile-menu-panel a{ display:block; padding: 15px 3px; color:#f4eee8; border-bottom: 1px solid rgba(255,255,255,.10); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; text-decoration:none; } } /* ========================================================= CELULARES BEM BAIXOS ========================================================= */ @media (max-width:900px) and (max-height:700px){ #mobile-editorial-layout{ height: calc(100svh - 46px) !important; } .nav{ min-height:44px !important; padding-top:4px !important; padding-bottom:4px !important; } .mobile-editorial-top{ padding-top:0 !important; padding-bottom:6px !important; } .mobile-editorial-bottom{ padding-top:6px !important; padding-bottom:5px !important; } #mobile-editorial-layout .mobile-secret-title{ font-size: 27px !important; } #mobile-editorial-layout .mobile-reveal-title{ font-size: 24px !important; } #mobile-editorial-layout .mobile-description{ font-size: 9.5px !important; } } /* ========================================================= MOBILE FIX — VOLTAR TEXTO DE BAIXO mantém hambúrguer + layout compacto ========================================================= */ @media (max-width: 768px){ /* não corta o conteúdo vertical */ .hero, .hero-section, .banner-hero, .hero-wrap, .hero-content{ min-height: auto !important; height: auto !important; overflow: visible !important; } /* reduz espaço do topo */ .hero{ padding-top: 14px !important; padding-bottom: 18px !important; } /* bloco de cima */ .hero .hero-text-top, .hero .top-copy, .hero .headline-wrap{ margin-bottom: 10px !important; } /* imagem principal menor para caber o bloco de baixo */ .hero img, .hero .hero-image, .hero .poster-image, .hero .main-poster{ width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 40vh !important; object-fit: contain !important; display: block !important; margin: 10px auto 12px auto !important; } /* garante que o bloco inferior apareça */ .hero .hero-bottom, .hero .bottom-copy, .hero .evento-info, .hero .pre-venda-wrap{ display: block !important; position: relative !important; opacity: 1 !important; visibility: visible !important; margin-top: 8px !important; padding-top: 0 !important; } /* aperta um pouco os textos de baixo */ .hero .hero-bottom h2, .hero .hero-bottom h3, .hero .evento-info h2, .hero .evento-info h3{ margin: 0 0 6px 0 !important; line-height: .95 !important; } .hero .hero-bottom p, .hero .evento-info p{ margin: 0 0 8px 0 !important; line-height: 1.1 !important; } /* botão continua grande, mas sem exagero */ .hero .btn, .hero .button, .hero a.cta, .hero .cta-button{ font-size: 16px !important; line-height: 1.1 !important; padding: 14px 18px !important; min-height: auto !important; } } /* ========================================================= MOBILE — FIT FINAL EM UMA TELA topo + texto + foto + bloco inferior ========================================================= */ @media (max-width:768px){ html, body{ height:100svh !important; min-height:100svh !important; overflow:hidden !important; } body{ position:relative !important; } .hero{ height:100svh !important; min-height:100svh !important; max-height:100svh !important; overflow:hidden !important; padding:0 !important; } /* ===================================================== TOPO / MARCA ===================================================== */ .nav{ min-height:46px !important; padding: 6px 18px !important; margin:0 !important; } .brand-luxury{ transform:scale(.86) !important; transform-origin:left center !important; } /* ===================================================== LAYOUT PRINCIPAL ===================================================== */ #mobile-editorial-layout{ width:100% !important; height: calc(100svh - 48px) !important; min-height:0 !important; margin:0 !important; padding:0 !important; display:grid !important; grid-template-rows: 150px minmax(0,1fr) 104px !important; overflow:hidden !important; } /* ===================================================== BLOCO SUPERIOR ===================================================== */ .mobile-editorial-top{ height:150px !important; min-height:0 !important; padding: 4px 20px 8px !important; margin:0 !important; display:grid !important; grid-template-columns: minmax(0,1fr) 126px !important; gap:12px !important; align-items:center !important; } .mobile-editorial-top-copy, .mobile-editorial-top-action{ margin:0 !important; padding:0 !important; } #mobile-editorial-layout .mobile-secret-title{ margin:0 0 3px !important; font-size: clamp(27px,7.6vw,35px) !important; line-height:.94 !important; } #mobile-editorial-layout .mobile-reveal-title{ margin:0 0 7px !important; font-size: clamp(24px,6.8vw,32px) !important; line-height:.96 !important; } #mobile-editorial-layout .mobile-description{ margin:0 !important; font-size:10px !important; line-height:1.24 !important; } /* ===================================================== FOTO MENOR PARA SOBRAR ESPAÇO EMBAIXO ===================================================== */ .mobile-editorial-image{ width: calc(100% - 22px) !important; height:100% !important; min-height:0 !important; max-height:none !important; margin:0 auto !important; aspect-ratio:auto !important; background-size: contain !important; background-position: center center !important; overflow:hidden !important; } /* ===================================================== BLOCO DE BAIXO — SEMPRE VISÍVEL ===================================================== */ .mobile-editorial-bottom{ height:104px !important; min-height:104px !important; margin:0 !important; padding: 7px 20px 8px !important; display:grid !important; grid-template-columns: 126px minmax(0,1fr) !important; gap:12px !important; align-items:center !important; opacity:1 !important; visibility:visible !important; position:relative !important; z-index:20 !important; } .mobile-editorial-bottom-copy, .mobile-editorial-bottom-action{ display:block !important; opacity:1 !important; visibility:visible !important; margin:0 !important; padding:0 !important; } #mobile-editorial-layout .mobile-presale-title{ display:block !important; margin:0 0 2px !important; font-size: clamp(21px,6vw,28px) !important; line-height:.91 !important; opacity:1 !important; visibility:visible !important; } #mobile-editorial-layout .mobile-presale-date{ display:block !important; margin:1px 0 !important; font-size: clamp(34px,9vw,44px) !important; line-height:.88 !important; opacity:1 !important; visibility:visible !important; } #mobile-editorial-layout .mobile-presale-location{ display:block !important; margin:4px 0 0 !important; font-size:9px !important; line-height:1.1 !important; opacity:1 !important; visibility:visible !important; } #mobile-editorial-layout .mobile-ticket-button{ display:flex !important; width:126px !important; min-width:126px !important; min-height:54px !important; margin:0 !important; padding: 9px 8px !important; font-size:11px !important; line-height:1.12 !important; align-items:center !important; justify-content:center !important; opacity:1 !important; visibility:visible !important; } } /* iPhones/telas mais baixas */ @media (max-width:768px) and (max-height:720px){ #mobile-editorial-layout{ grid-template-rows: 132px minmax(0,1fr) 94px !important; } .mobile-editorial-top{ height:132px !important; } .mobile-editorial-bottom{ height:94px !important; min-height:94px !important; } #mobile-editorial-layout .mobile-secret-title{ font-size:25px !important; } #mobile-editorial-layout .mobile-reveal-title{ font-size:22px !important; } #mobile-editorial-layout .mobile-description{ font-size:9px !important; } } /* ========================================================= MOBILE — CORREÇÃO FINAL - texto inferior volta - foto volta à proporção anterior - máscara volta ao lugar correto na mesa - reduz espaço vazio superior - continua em uma tela ========================================================= */ @media (max-width:768px){ html, body{ width:100% !important; height:100svh !important; min-height:100svh !important; margin:0 !important; overflow:hidden !important; } .hero{ width:100% !important; height:100svh !important; min-height:100svh !important; max-height:100svh !important; padding:0 !important; overflow:hidden !important; } /* ===================================================== TOPO MAIS CURTO ===================================================== */ .nav{ min-height:44px !important; height:44px !important; padding: 5px 18px !important; margin:0 !important; } .brand-luxury{ transform: scale(.84) !important; transform-origin: left center !important; } /* ===================================================== ESTRUTURA: texto foto pré-venda ===================================================== */ #mobile-editorial-layout{ width:100% !important; height: calc(100svh - 44px) !important; min-height:0 !important; margin:0 !important; padding:0 !important; display:grid !important; grid-template-rows: auto auto auto !important; align-content:start !important; overflow:hidden !important; } /* ===================================================== TEXTO DE CIMA ===================================================== */ .mobile-editorial-top{ width:100% !important; min-height:0 !important; height:auto !important; margin:0 !important; padding: 4px 20px 8px !important; display:grid !important; grid-template-columns: minmax(0,1fr) 126px !important; gap:12px !important; align-items:center !important; } #mobile-editorial-layout .mobile-secret-title{ margin: 0 0 3px !important; font-size: clamp(26px,7.4vw,34px) !important; line-height:.94 !important; } #mobile-editorial-layout .mobile-reveal-title{ margin: 0 0 6px !important; font-size: clamp(23px,6.5vw,30px) !important; line-height:.96 !important; } #mobile-editorial-layout .mobile-description{ margin:0 !important; font-size: 9.5px !important; line-height: 1.22 !important; } /* ===================================================== FOTO VOLTA PARA 4:3 — ERA A PROPORÇÃO EM QUE A MÁSCARA ESTAVA CAINDO CERTO ===================================================== */ .mobile-editorial-image{ position:relative !important; width: calc(100% - 22px) !important; height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio: 4 / 3 !important; margin: 0 auto !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; overflow:hidden !important; } /* ===================================================== MÁSCARA RESTAURA EXATAMENTE A GEOMETRIA ANTERIOR ===================================================== */ .mobile-editorial-image .mask-wrap.mobile-mask-on-table{ width: 38% !important; max-width: 155px !important; left: 40% !important; margin: 0 !important; z-index: 8 !important; transform: translateX(-50%) !important; } /* ===================================================== BLOCO INFERIOR — SEMPRE VISÍVEL ===================================================== */ .mobile-editorial-bottom{ width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; padding: 7px 20px 6px !important; display:grid !important; grid-template-columns: 126px minmax(0,1fr) !important; gap: 12px !important; align-items:center !important; position:relative !important; opacity:1 !important; visibility:visible !important; z-index:20 !important; } .mobile-editorial-bottom-action, .mobile-editorial-bottom-copy{ display:block !important; height:auto !important; margin:0 !important; padding:0 !important; opacity:1 !important; visibility:visible !important; } /* PRÉ VENDA */ #mobile-editorial-layout .mobile-presale-title{ display:block !important; margin: 0 0 2px !important; font-size: clamp(20px,5.7vw,27px) !important; line-height: .91 !important; text-align:right !important; opacity:1 !important; visibility:visible !important; } /* 31.OUT */ #mobile-editorial-layout .mobile-presale-date{ display:block !important; margin: 1px 0 !important; font-size: clamp(33px,8.8vw,43px) !important; line-height: .88 !important; text-align:right !important; opacity:1 !important; visibility:visible !important; } /* FLORIANÓPOLIS */ #mobile-editorial-layout .mobile-presale-location{ display:block !important; margin: 4px 0 0 !important; font-size: 9px !important; line-height: 1.1 !important; text-align:right !important; opacity:1 !important; visibility:visible !important; } /* BOTÃO DE INGRESSO */ #mobile-editorial-layout .mobile-ticket-button{ display:flex !important; width: 126px !important; min-width: 126px !important; min-height: 52px !important; margin: 0 !important; padding: 8px !important; align-items:center !important; justify-content:center !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.12 !important; opacity:1 !important; visibility:visible !important; } } /* ========================================================= CELULARES MAIS BAIXOS ========================================================= */ @media (max-width:768px) and (max-height:700px){ .mobile-editorial-top{ padding-top: 0 !important; padding-bottom: 4px !important; } #mobile-editorial-layout .mobile-secret-title{ font-size: 24px !important; } #mobile-editorial-layout .mobile-reveal-title{ font-size: 21px !important; } #mobile-editorial-layout .mobile-description{ font-size: 8.5px !important; } .mobile-editorial-image{ width: calc(100% - 36px) !important; } .mobile-editorial-bottom{ padding-top: 4px !important; padding-bottom: 4px !important; } } /* ========================================================= MOBILE — FOTO FUNDIDA NO FUNDO + FONTES MAIORES - some com início/fim duro da foto - blur/degradê preto em cima e embaixo - máscara continua acima do efeito - textos maiores ========================================================= */ @media (max-width:768px){ /* ===================================================== FOTO — FUNDE COM O FUNDO PRETO ===================================================== */ .mobile-editorial-image{ position:relative !important; isolation:isolate !important; background-color:#080002 !important; overflow:hidden !important; } /* BLUR / PRETO NO INÍCIO DA FOTO */ .mobile-editorial-image::before{ content:"" !important; display:block !important; position:absolute !important; top:-2px !important; left:0 !important; right:0 !important; height:18% !important; z-index:3 !important; pointer-events:none !important; background: linear-gradient( to bottom, rgba(8,0,2,1) 0%, rgba(8,0,2,.92) 18%, rgba(8,0,2,.63) 48%, rgba(8,0,2,.24) 75%, rgba(8,0,2,0) 100% ) !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } /* BLUR / PRETO NO FIM DA FOTO */ .mobile-editorial-image::after{ content:"" !important; display:block !important; position:absolute !important; left:0 !important; right:0 !important; bottom:-2px !important; height:20% !important; z-index:3 !important; pointer-events:none !important; background: linear-gradient( to bottom, rgba(8,0,2,0) 0%, rgba(8,0,2,.20) 22%, rgba(8,0,2,.58) 55%, rgba(8,0,2,.90) 82%, rgba(8,0,2,1) 100% ) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* máscara fica ACIMA do fade */ .mobile-editorial-image .mask-wrap.mobile-mask-on-table{ z-index:8 !important; } /* ===================================================== TEXTO SUPERIOR — MAIOR ===================================================== */ .mobile-editorial-top{ padding: 1px 20px 5px !important; } #mobile-editorial-layout .mobile-secret-title{ font-size: clamp(30px,8.2vw,38px) !important; line-height: .93 !important; margin: 0 0 3px !important; } #mobile-editorial-layout .mobile-reveal-title{ font-size: clamp(27px,7.3vw,34px) !important; line-height: .95 !important; margin: 0 0 5px !important; } #mobile-editorial-layout .mobile-description{ font-size: 11px !important; line-height: 1.22 !important; } /* ===================================================== BOTÃO TEASER — TEXTO MAIOR ===================================================== */ #mobile-editorial-layout .mobile-teaser-button{ font-size: 13px !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: .035em !important; } /* ===================================================== BLOCO INFERIOR — FONTES MAIORES ===================================================== */ .mobile-editorial-bottom{ padding: 4px 20px 4px !important; } #mobile-editorial-layout .mobile-presale-title{ font-size: clamp(23px,6.4vw,30px) !important; line-height: .90 !important; margin: 0 0 2px !important; } #mobile-editorial-layout .mobile-presale-date{ font-size: clamp(38px,10vw,48px) !important; line-height: .87 !important; margin: 1px 0 !important; } #mobile-editorial-layout .mobile-presale-location{ font-size: 10.5px !important; line-height: 1.1 !important; margin: 4px 0 0 !important; } /* ===================================================== BOTÃO INGRESSO — TEXTO MAIOR ===================================================== */ #mobile-editorial-layout .mobile-ticket-button{ font-size: 13px !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: .035em !important; } } /* ========================================================= TELAS MAIS BAIXAS mantém as fontes maiores sem estourar a tela ========================================================= */ @media (max-width:768px) and (max-height:700px){ #mobile-editorial-layout .mobile-secret-title{ font-size:28px !important; } #mobile-editorial-layout .mobile-reveal-title{ font-size:25px !important; } #mobile-editorial-layout .mobile-description{ font-size:10px !important; } #mobile-editorial-layout .mobile-presale-title{ font-size:22px !important; } #mobile-editorial-layout .mobile-presale-date{ font-size:36px !important; } } /* ========================================================= MOBILE — FIX REAL DO CORTE DA IMAGEM - remove o blur que cortou a foto - mantém a imagem inteira visível - faz fusão suave sem esconder topo da arte - aumenta o texto pequeno de verdade - desktop não muda ========================================================= */ @media (max-width:768px){ /* ----------------------------------------------------- 1. REMOVE O EFEITO QUE ESTÁ CORTANDO A FOTO ----------------------------------------------------- */ .hero :is(.hero-image, .hero-photo, .poster-wrap, .hero-poster, .event-poster, .banner-image)::before, .hero :is(.hero-image, .hero-photo, .poster-wrap, .hero-poster, .event-poster, .banner-image)::after{ content:none !important; display:none !important; filter:none !important; backdrop-filter:none !important; opacity:0 !important; } /* ----------------------------------------------------- 2. RESTAURA O BLOCO DA IMAGEM ----------------------------------------------------- */ .hero :is(.hero-image, .hero-photo, .poster-wrap, .hero-poster, .event-poster, .banner-image){ position:relative !important; overflow:visible !important; height:auto !important; min-height:auto !important; max-height:none !important; background:transparent !important; filter:none !important; mask-image:none !important; -webkit-mask-image:none !important; clip-path:none !important; box-shadow: inset 0 18px 28px rgba(0,0,0,.42), inset 0 -18px 28px rgba(0,0,0,.42) !important; } /* ----------------------------------------------------- 3. GARANTE A FOTO INTEIRA, SEM CORTAR TOPO/FIM ----------------------------------------------------- */ .hero :is(.hero-image, .hero-photo, .poster-wrap, .hero-poster, .event-poster, .banner-image) img{ display:block !important; width:100% !important; height:auto !important; max-height:none !important; min-height:0 !important; object-fit:contain !important; object-position:center top !important; transform:none !important; clip-path:none !important; filter:none !important; margin:0 auto !important; } /* ----------------------------------------------------- 4. MÁSCARA CONTINUA NA FRENTE E NO LUGAR CERTO ----------------------------------------------------- */ .mask-wrap{ position:relative !important; z-index:6 !important; overflow:visible !important; } .mask-wrap > img.custom-mask-image{ position:relative !important; z-index:7 !important; } /* ----------------------------------------------------- 5. AUMENTA O TEXTO PEQUENO DE VERDADE ----------------------------------------------------- */ .hero p, .hero .hero-text p, .hero .hero-copy p, .hero .hero-description, .hero .subcopy, .hero .lead, .hero .description, .hero .content-text, .hero .text-small{ font-size: clamp(20px, 4.3vw, 24px) !important; line-height: 1.34 !important; letter-spacing: 0.01em !important; } /* subtítulo em script */ .hero .script, .hero .subtitle-script, .hero .hero-script, .hero em{ font-size: clamp(28px, 6vw, 36px) !important; line-height:1.05 !important; } /* bloco inferior */ .hero .pre-sale, .hero .pre-venda, .hero .ticket-block, .hero .ticket-text, .hero .event-date, .hero .event-location{ line-height:1.02 !important; } .hero .pre-sale, .hero .pre-venda, .hero .ticket-text{ font-size: clamp(24px, 5.8vw, 34px) !important; } .hero .event-date{ font-size: clamp(42px, 10vw, 62px) !important; } .hero .event-location{ font-size: clamp(18px, 4.4vw, 24px) !important; } /* botão inferior */ .hero .btn, .hero button, .hero .cta-button, .hero .hero-btn{ font-size: clamp(18px, 4.5vw, 22px) !important; line-height:1.1 !important; } } /* ========================================================= MOBILE — REFINO DO TOPO - máscara menor - mostra o rosto inteiro na foto - texto superior maior - parte inferior NÃO MUDA ========================================================= */ @media (max-width:768px){ /* ===================================================== FOTO MOSTRA MAIS DA PARTE DE CIMA ===================================================== */ .mobile-editorial-image{ position:relative !important; background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat !important; } /* caso a foto esteja sendo desenhada pelo ::before */ .mobile-editorial-image::before{ background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat !important; filter:none !important; -webkit-mask-image:none !important; mask-image:none !important; clip-path:none !important; } /* ===================================================== MÁSCARA MENOR mantém a mesma região da mesa ===================================================== */ .mobile-editorial-image .mask-wrap.mobile-mask-on-table{ width: 29% !important; max-width: 118px !important; left: 40% !important; z-index: 8 !important; } .mobile-editorial-image .mask-wrap.mobile-mask-on-table > img.custom-mask-image{ width: 100% !important; height: auto !important; } /* ===================================================== TEXTO SUPERIOR ===================================================== */ #mobile-editorial-layout .mobile-description{ max-width: 285px !important; font-size: 16px !important; line-height: 1.22 !important; letter-spacing: 0 !important; margin: 2px 0 0 !important; } /* A SER REVELADO */ #mobile-editorial-layout .mobile-reveal-title{ font-size: clamp( 29px, 7.8vw, 37px ) !important; line-height: .98 !important; margin: 1px 0 7px !important; } /* título principal continua forte */ #mobile-editorial-layout .mobile-secret-title{ font-size: clamp( 31px, 8.5vw, 40px ) !important; line-height: .93 !important; } /* botão teaser também um pouco mais legível */ #mobile-editorial-layout .mobile-teaser-button{ font-size: 15px !important; line-height: 1.05 !important; } } /* ========================================================= IPHONES MAIS BAIXOS ========================================================= */ @media (max-width:768px) and (max-height:720px){ #mobile-editorial-layout .mobile-description{ font-size: 14.5px !important; line-height: 1.18 !important; } #mobile-editorial-layout .mobile-secret-title{ font-size: 29px !important; } #mobile-editorial-layout .mobile-reveal-title{ font-size: 27px !important; } .mobile-editorial-image .mask-wrap.mobile-mask-on-table{ width: 27% !important; max-width: 108px !important; } } /* ========================================================= MOBILE — ROSTO INTEIRO NO TOPO - mostra mais área superior da foto - reduz levemente o zoom - mantém a parte de baixo como está - desktop não muda ========================================================= */ @media (max-width:768px){ /* área principal da arte */ .hero :is( .hero-image, .hero-photo, .poster-wrap, .hero-poster, .hero-banner, .hero-visual, .poster-image ){ overflow:hidden !important; background-position:center top !important; background-size:100% auto !important; background-repeat:no-repeat !important; } /* quando a arte estiver em */ .hero :is( .hero-image img, .hero-photo img, .poster-wrap img, .hero-poster img, .hero-banner img, .hero-visual img, .poster-image img ){ width:100% !important; height:auto !important; object-fit:contain !important; object-position:center top !important; transform:scale(.92) translateY(10px) !important; transform-origin:top center !important; display:block !important; margin:0 auto !important; } /* abre um respiro no topo sem alterar a parte inferior */ .hero :is( .poster-wrap, .hero-poster, .hero-visual, .poster-image ){ padding-top:6px !important; } } /* ========================================================= MOBILE — SOBE O BLUR PRETO DE CIMA - tira o blur de cima do rosto - mantém a parte de baixo como está - desktop não muda ========================================================= */ @media (max-width:768px){ .hero :is( .hero-image, .hero-photo, .poster-wrap, .hero-poster, .hero-art, .hero-media, .hero-banner, .hero-cover ){ position: relative !important; overflow: hidden !important; } /* blur superior: sobe e cobre menos a foto */ .hero :is( .hero-image, .hero-photo, .poster-wrap, .hero-poster, .hero-art, .hero-media, .hero-banner, .hero-cover )::before{ content:"" !important; position:absolute !important; left:-4% !important; right:-4% !important; top:-46px !important; /* sobe o blur */ height:76px !important; /* reduz a área que encobre */ background:linear-gradient( to bottom, rgba(0,0,0,.96) 0%, rgba(0,0,0,.84) 32%, rgba(0,0,0,.35) 68%, rgba(0,0,0,0) 100% ) !important; filter: blur(14px) !important; pointer-events:none !important; z-index:2 !important; } /* garante a foto mais alinhada para o topo */ .hero :is( .hero-image img, .hero-photo img, .poster-wrap img, .hero-poster img, .hero-art img, .hero-media img, .hero-banner img, .hero-cover img ){ object-position:center top !important; } } /* ========================================================= MOBILE — ROSTO 100% VISÍVEL CORREÇÃO NO ELEMENTO REAL DA FOTO ========================================================= */ @media (max-width:768px){ /* ===================================================== CONTAINER DA FOTO ===================================================== */ .mobile-editorial-image{ position:relative !important; overflow:hidden !important; background-image:none !important; background-color:#080002 !important; } /* ===================================================== A FOTO REAL ESTÁ NESTA CAMADA NÃO APLICA MAIS FADE/BLUR NO TOPO ===================================================== */ .mobile-editorial-image::before{ content:"" !important; display:block !important; position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; z-index:1 !important; background-image: var(--mobile-editorial-bg) !important; background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat !important; /* REMOVE O QUE ESTAVA ESCONDENDO O ROSTO */ filter:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; mask:none !important; -webkit-mask:none !important; mask-image:none !important; -webkit-mask-image:none !important; clip-path:none !important; opacity:1 !important; transform:none !important; top:0 !important; pointer-events:none !important; } /* ===================================================== SÓ O FINAL DA FOTO SE MISTURA COM O FUNDO NÃO ENCOSTA NO ROSTO ===================================================== */ .mobile-editorial-image::after{ content:"" !important; display:block !important; position:absolute !important; left:0 !important; right:0 !important; top:auto !important; bottom:-1px !important; height:7% !important; z-index:3 !important; pointer-events:none !important; background: linear-gradient( to bottom, rgba(8,0,2,0) 0%, rgba(8,0,2,.15) 35%, rgba(8,0,2,.65) 75%, rgba(8,0,2,1) 100% ) !important; filter:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ===================================================== MÁSCARA CONTINUA NA FRENTE POSIÇÃO E TAMANHO NÃO MUDAM ===================================================== */ .mobile-editorial-image .mask-wrap.mobile-mask-on-table{ z-index:8 !important; } } /* ========================================================= MOBILE — RESTAURA FOTO PRINCIPAL - traz a foto de volta - não altera máscara - não altera textos - não altera bloco inferior ========================================================= */ @media (max-width:768px){ /* Restaura qualquer imagem principal que tenha sido escondida por regras anteriores. */ .hero img, .hero-image img, .hero-photo img, .poster-wrap img, .hero-poster img, .main-photo img, .photo-wrap img, .image-wrap img{ display:block !important; visibility:visible !important; opacity:1 !important; filter:none !important; clip-path:none !important; -webkit-clip-path:none !important; mask-image:none !important; -webkit-mask-image:none !important; mix-blend-mode:normal !important; } /* Mantém o container da foto existente visível. NÃO muda altura nem posição. */ .hero-image, .hero-photo, .poster-wrap, .hero-poster, .main-photo, .photo-wrap, .image-wrap{ display:block !important; visibility:visible !important; opacity:1 !important; } /* Remove apenas pseudo-elementos superiores que possam estar cobrindo a imagem inteira. */ .hero-image::before, .hero-photo::before, .poster-wrap::before, .hero-poster::before, .main-photo::before, .photo-wrap::before, .image-wrap::before{ display:none !important; content:none !important; } } /* ========================================================= MOBILE — RESTAURAÇÃO REAL DA FOTO causa corrigida: background-image:none removido na prática imagem volta para o próprio container ========================================================= */ @media (max-width:768px){ .mobile-editorial-image{ position:relative !important; background-color:#080002 !important; background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat !important; overflow:hidden !important; } /* NÃO USA MAIS ::before PARA DESENHAR A FOTO */ .mobile-editorial-image::before{ content:none !important; display:none !important; background:none !important; filter:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; mask:none !important; -webkit-mask:none !important; opacity:0 !important; } /* mantém somente a fusão discreta embaixo */ .mobile-editorial-image::after{ content:"" !important; display:block !important; position:absolute !important; left:0 !important; right:0 !important; top:auto !important; bottom:-1px !important; height:5% !important; z-index:3 !important; pointer-events:none !important; background: linear-gradient( to bottom, rgba(8,0,2,0) 0%, rgba(8,0,2,.18) 45%, rgba(8,0,2,.70) 82%, rgba(8,0,2,1) 100% ) !important; filter:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* máscara continua exatamente onde já está */ .mobile-editorial-image .mask-wrap.mobile-mask-on-table{ z-index:8 !important; } }