.elementor-12 .elementor-element.elementor-element-228af477{--display:flex;--min-height:800px;--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-end;--align-items:center;}.elementor-12 .elementor-element.elementor-element-228af477:not(.elementor-motion-effects-element-type-background), .elementor-12 .elementor-element.elementor-element-228af477 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-image:url("https://canhotaaviator.com/wp-content/uploads/2026/07/hero-18-canhota.webp");background-position:top center;background-size:cover;}.elementor-12 .elementor-element.elementor-element-505237ed{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );border-style:solid;--border-style:solid;border-width:2px 2px 2px 2px;--border-top-width:2px;--border-right-width:2px;--border-bottom-width:2px;--border-left-width:2px;--border-radius:16px 16px 16px 16px;--padding-top:56px;--padding-bottom:56px;--padding-left:56px;--padding-right:56px;}.elementor-12 .elementor-element.elementor-element-505237ed:not(.elementor-motion-effects-element-type-background), .elementor-12 .elementor-element.elementor-element-505237ed > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#00000000;}.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-12 .elementor-element.elementor-element-366547b{text-align:center;}.elementor-12 .elementor-element.elementor-element-366547b .elementor-heading-title{font-family:"Sora", Sans-serif;font-size:34px;font-weight:600;text-transform:uppercase;color:#FCFCFC;}.elementor-12 .elementor-element.elementor-element-4c4f2bc7{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-12 .elementor-element.elementor-element-c297a4e{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.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-12 .elementor-element.elementor-element-71d68ba4 .elementor-button{background-color:transparent;font-family:"Sora", Sans-serif;font-size:24px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;background-image:linear-gradient(128deg, #08FF00 0%, #0F770E 100%);border-radius:16px 16px 16px 16px;padding:13px 45px 013px 45px;}.elementor-12 .elementor-element.elementor-element-203169b2{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-12 .elementor-element.elementor-element-3df6abdf .elementor-button{background-color:transparent;font-family:"Sora", Sans-serif;font-size:24px;font-weight:600;background-image:linear-gradient(128deg, #565656 0%, #373737 100%);padding:13px 45px 13px 45px;}.elementor-12 .elementor-element.elementor-element-3d9028ce{--display:flex;}body.elementor-page-12:not(.elementor-motion-effects-element-type-background), body.elementor-page-12 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#170202;}@media(min-width:768px){.elementor-12 .elementor-element.elementor-element-228af477{--content-width:1280px;}.elementor-12 .elementor-element.elementor-element-505237ed{--width:47%;}}@media(max-width:767px){.elementor-12 .elementor-element.elementor-element-228af477:not(.elementor-motion-effects-element-type-background), .elementor-12 .elementor-element.elementor-element-228af477 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://canhotaaviator.com/wp-content/uploads/2026/07/hero-mobile-18.webp");}.elementor-12 .elementor-element.elementor-element-228af477{--min-height:666px;}.elementor-12 .elementor-element.elementor-element-366547b .elementor-heading-title{font-size:17px;}.elementor-12 .elementor-element.elementor-element-4c4f2bc7{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:nowrap;}.elementor-12 .elementor-element.elementor-element-c297a4e{--width:330px;--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;}.elementor-12 .elementor-element.elementor-element-71d68ba4 .elementor-button{font-size:25px;padding:20px 040px 20px 40px;}.elementor-12 .elementor-element.elementor-element-203169b2{--width:330px;}.elementor-12 .elementor-element.elementor-element-3df6abdf .elementor-button{font-size:13px;padding:20px 20px 20px 20px;}}/* Start custom CSS for button, class: .elementor-element-71d68ba4 */.elementor-12 .elementor-element.elementor-element-71d68ba4 { animation: pulseGlow 1.8s infinite ease-in-out; border-radius: 50px; box-shadow: 0 0 12px #08FF00, 0 0 20px #08FF00; } @keyframes pulseGlow { 0% { transform: scale(1); box-shadow: 0 0 10px #08FF00, 0 0 20px #08FF00; } 50% { transform: scale(1.05); box-shadow: 0 0 20px #08FF00, 0 0 30px #08FF00; } 100% { transform: scale(1); box-shadow: 0 0 10px #08FF00, 0 0 20px #08FF00; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-505237ed *//* ===================================================== CONTAINER +18 PREMIUM VIDRO FOSCO + BORDA ANIMADA + SELO FLUTUANTE ===================================================== */ .container-18 { /* Personalização rápida */ --cor-principal: #ff1f1f; --cor-secundaria: #7a0000; --cor-escura: #290000; --raio: 36px; --espessura-borda: 2px; position: relative; isolation: isolate; width: min(50%, 760px); min-height: 205px; box-sizing: border-box; margin-top: 60px; margin-left: auto; margin-right: auto; padding: 68px 32px 32px; /* * Vidro com camadas de iluminação. * O radial-gradient cria um reflexo suave no topo. */ background: radial-gradient( circle at 50% -30%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 35%, transparent 68% ), linear-gradient( 145deg, rgba(48, 48, 48, 0.48) 0%, rgba(20, 20, 20, 0.30) 55%, rgba(10, 10, 10, 0.42) 100% ); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: var(--raio); box-shadow: 0 28px 65px rgba(0, 0, 0, 0.38), 0 8px 20px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.035); transform: translateZ(0); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, background 0.4s ease; overflow: visible !important; } /* Pequeno efeito de elevação no desktop */ @media (hover: hover) and (pointer: fine) { .container-18:hover { transform: translateY(-4px); box-shadow: 0 34px 80px rgba(0, 0, 0, 0.44), 0 12px 28px rgba(0, 0, 0, 0.24), 0 0 32px rgba(255, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.04); } } /* Mantém todo conteúdo acima dos efeitos */ .container-18 > * { position: relative; z-index: 3; } /* ===================================================== BORDA DEGRADÊ ANIMADA ===================================================== */ .container-18::after { content: ""; position: absolute; inset: calc(var(--espessura-borda) * -1); padding: var(--espessura-borda); border-radius: calc(var(--raio) + 2px); background: linear-gradient( 110deg, var(--cor-escura) 0%, var(--cor-secundaria) 14%, var(--cor-principal) 30%, #ff7676 43%, #ffffff 50%, #ff7676 57%, var(--cor-principal) 70%, var(--cor-secundaria) 86%, var(--cor-escura) 100% ); background-size: 350% 100%; background-position: 0% 50%; animation: bordaDegradeMovendo 6s linear infinite; /* * Remove o centro do pseudo-elemento, * mantendo apenas a borda visível. */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; filter: drop-shadow(0 0 4px rgba(255, 20, 20, 0.65)) drop-shadow(0 0 12px rgba(255, 0, 0, 0.25)) drop-shadow(0 0 22px rgba(120, 0, 0, 0.14)); opacity: 0.95; pointer-events: none; z-index: 1; } /* ===================================================== SELO CIRCULAR +18 ===================================================== */ .container-18::before { content: "+18"; position: absolute; top: -58px; left: 50%; transform: translateX(-50%); width: 116px; height: 116px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; /* * Reflexo no topo esquerdo e profundidade * no fundo do selo. */ background: radial-gradient( circle at 34% 24%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.06) 20%, transparent 42% ), linear-gradient( 145deg, #a80000 0%, #620000 45%, #250000 100% ); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 2px solid rgba(255, 71, 71, 0.95); border-radius: 50%; outline: 1px solid rgba(255, 255, 255, 0.08); outline-offset: -7px; box-shadow: 0 18px 34px rgba(0, 0, 0, 0.48), 0 0 10px rgba(255, 0, 0, 0.52), 0 0 28px rgba(255, 0, 0, 0.20), inset 0 2px 1px rgba(255, 255, 255, 0.20), inset 0 -8px 18px rgba(0, 0, 0, 0.26); color: #ffffff; font-family: "Inter", "Montserrat", Arial, Helvetica, sans-serif; font-size: 46px; font-weight: 900; letter-spacing: -2px; line-height: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.42), 0 0 12px rgba(255, 255, 255, 0.10); animation: seloFlutuando 4.5s ease-in-out infinite; pointer-events: none; z-index: 4; } /* ===================================================== ANIMAÇÕES ===================================================== */ @keyframes bordaDegradeMovendo { 0% { background-position: 0% 50%; } 100% { background-position: 350% 50%; } } @keyframes seloFlutuando { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } } /* ===================================================== FALLBACK PARA NAVEGADORES SEM BACKDROP FILTER ===================================================== */ @supports not ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) ) { .container-18 { background: radial-gradient( circle at 50% -30%, rgba(255, 255, 255, 0.12), transparent 65% ), rgba(25, 25, 25, 0.94); } } /* ===================================================== TABLET ===================================================== */ @media screen and (max-width: 1024px) { .container-18 { width: calc(100% - 48px) !important; max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; } } /* ===================================================== MOBILE ===================================================== */ @media screen and (max-width: 767px) { .container-18 { --raio: 28px; width: calc(100% - 32px) !important; max-width: calc(100% - 32px) !important; min-height: 170px; margin-top: 50px; margin-left: auto !important; margin-right: auto !important; padding: 56px 22px 26px; backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); box-shadow: 0 20px 42px rgba(0, 0, 0, 0.34), 0 7px 16px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .container-18::before { top: -47px; width: 94px; height: 94px; border-width: 2px; outline-offset: -6px; font-size: 38px; letter-spacing: -1.5px; box-shadow: 0 14px 26px rgba(0, 0, 0, 0.44), 0 0 10px rgba(255, 0, 0, 0.48), 0 0 22px rgba(255, 0, 0, 0.18), inset 0 2px 1px rgba(255, 255, 255, 0.18), inset 0 -7px 14px rgba(0, 0, 0, 0.24); } .container-18::after { filter: drop-shadow(0 0 4px rgba(255, 20, 20, 0.55)) drop-shadow(0 0 9px rgba(255, 0, 0, 0.20)); } } /* ===================================================== MOBILE PEQUENO ===================================================== */ @media screen and (max-width: 480px) { .container-18 { width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; padding: 54px 17px 24px; } } /* ===================================================== ACESSIBILIDADE ===================================================== */ @media (prefers-reduced-motion: reduce) { .container-18, .container-18::before, .container-18::after { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-228af477 */@media (max-width: 767px) { }/* End custom CSS */