e crie um novo modificador de posição com top/right/left/bottom. ============================================= */ .section > .container{ position:relative; z-index:1; } .float-deco{ position:absolute; z-index:0; height:clamp(96px,9vw,140px); width:auto; pointer-events:none; user-select:none; -webkit-user-drag:none; filter:drop-shadow(0 20px 34px rgba(0,230,118,.3)); animation:float-y 7.5s ease-in-out infinite; } /* 1ª seção comercial — lateral direita, ao lado da oferta */ .float-deco--a{top:16%;right:2%} /* FAQ — lateral esquerda */ .float-deco--b{top:34%;left:2%;animation-delay:-2.6s} /* Formulário — lateral direita */ .float-deco--c{top:44%;right:2%;animation-delay:-4.4s} @keyframes float-y{ 0%,100%{transform:translate3d(0,0,0) rotate(-2deg)} 50%{transform:translate3d(0,-18px,0) rotate(2deg)} } /* Abaixo disso as laterais não têm espaço e o ícone encostaria no conteúdo */ @media (max-width:1180px){ .float-deco{display:none} } /* ============================================= ANIMAÇÕES ON-SCROLL ============================================= */ [data-animate]{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); } [data-animate="slide-right"]{transform:translateX(-24px)} [data-animate].is-visible{ opacity:1; transform:none; } /* ============================================= RESPONSIVO ============================================= */ /* Tablet */ @media (max-width:1024px){ .promo-text{font-size:.68rem} .benefits{grid-template-columns:repeat(2,minmax(0,1fr))} .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .footer-brand{grid-column:1 / -1} } @media (max-width:900px){ .split, .plan-grid{ grid-template-columns:minmax(0,1fr); gap:clamp(20px,4vw,32px); } .plan-art{order:2} .plan-card{order:1} .plan-art img{max-width:360px} } /* Mobile */ @media (max-width:860px){ :root{--header-h:96px} /* Header em duas linhas: logo + CTA juntos e centralizados; cronômetro inteiro embaixo */ .header-inner{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:clamp(10px,3vw,18px); row-gap:7px; padding-block:9px; } .brand{flex:0 0 auto;order:1} .btn-header{flex:0 0 auto;order:2} .header-mid{flex:0 0 100%;order:3;width:100%;margin-right:0;gap:0} .countdown{justify-content:center;width:100%} .promo-text{display:none} .site-header{ --brand-h:28px; } .cd-unit strong{font-size:.95rem} .btn-header{font-size:.72rem;padding:10px 16px} .plan-art img{max-width:100%} .steps{grid-template-columns:minmax(0,1fr)} } @media (max-width:640px){ :root{--section-y:clamp(36px,8vw,52px);--header-h:96px} body{font-size:15px} .site-header{ --brand-h:25px; --header-gap:10px; } .btn-header{ padding:10px 14px; font-size:.7rem; letter-spacing:.015em; white-space:nowrap; text-align:center; line-height:1.2; max-width:none; } .cd-unit{padding:5px 4px} .cd-unit strong{font-size:.92rem} .benefits{grid-template-columns:minmax(0,1fr)} .title-break{display:none} .form{grid-template-columns:minmax(0,1fr)} .footer-grid{grid-template-columns:minmax(0,1fr);gap:26px} .btn-lg{padding:16px 24px;font-size:.88rem;width:100%} .steps-cta .btn-lg, .faq-cta .btn-lg{width:100%;max-width:420px} .chip, .chips{gap:6px} .chips li{font-size:.78rem;padding:7px 12px} .plan-card__speed{font-size:.86rem;padding:.55rem 1rem} .footer-list address{max-width:none} .wa-float{width:52px;height:52px} .wa-float svg{width:25px;height:25px} } @media (max-width:520px){ .cd-unit{padding:4px 3px} .cd-unit small{font-size:.46rem;letter-spacing:.1em} .cd-unit strong{font-size:.86rem} } @media (max-width:420px){ :root{--header-h:92px} .site-header{--brand-h:23px} .btn-header{max-width:none;font-size:.66rem;padding:9px 12px;white-space:nowrap} .price-line strong{font-size:1.9rem} } /* Acessibilidade: movimento reduzido */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } [data-animate]{ opacity:1; transform:none; } }