/* Evita vazamento horizontal sem transformar em um segundo scroller. */ html, body { overflow-x: clip; } body { font-family: 'Inter', sans-serif; } /* Cor principal personalizada (laranja bico de tucano) */ .vivo-purple { color: #FF6B00; } .bg-vivo-purple { background-color: #FF6B00; } .bg-vivo-purple-dark { background-color: #CC5500; } .text-vivo-purple { color: #FF6B00; } .border-vivo-purple { border-color: #FF6B00; } .hover-vivo-purple:hover { background-color: #CC5500; } .hover\:text-vivo-purple:hover { color: #FF6B00; } .hover\:bg-vivo-purple:hover { background-color: #FF6B00; } .hover\:border-vivo-purple:hover { border-color: #FF6B00; } .hover\:bg-vivo-purple-dark:hover { background-color: #CC5500; } /* Custom scrollbar for carousel */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .banner-shape { background: linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(255, 107, 0, 0.3) 100%); } .hero-gradient { background: linear-gradient(135deg, #FF6B00 0%, #FF9F40 50%, #FF6B00 100%); } /* ===== Hero thumbnails ===== */ .hero-thumb { transition: transform 0.2s ease, box-shadow 0.2s ease; } .thumb-overlay { transition: background-color 0.2s ease; } /* ===== Hero progress circle ===== */ @keyframes heroProgress { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 113.097; } } #heroProgressCircle.running { animation: heroProgress 7s linear forwards; } /* ===== Sombras globais para destacar cards/seções do background ===== */ .offer-card, .testimonial-card, #promoSection > div, #faqSection .bg-white.border, #quem-somos .bg-white, #trabalheConosco { box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.18), 0 4px 10px -2px rgba(0, 0, 0, 0.08) !important; } .offer-card:hover, .testimonial-card:hover { box-shadow: 0 22px 42px -10px rgba(0, 0, 0, 0.28), 0 8px 16px -4px rgba(0, 0, 0, 0.12) !important; } #offersTrack .offer-card { transform: scale(1); transform-origin: center center; opacity: 1; transition: transform 0.32s ease-out, opacity 0.12s ease-out, box-shadow 0.12s ease-out; will-change: transform; } #offersTrack .offer-card:hover { transform: scale(1.08) translateY(-6px); opacity: 1; z-index: 2; box-shadow: 0 24px 50px -14px rgba(0, 0, 0, 0.30), 0 10px 22px -6px rgba(0, 0, 0, 0.14) !important; } /* ===== Scroll reveal animations ===== */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.in-view { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-left.in-view { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(50px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-right.in-view { opacity: 1; transform: translateX(0); } .reveal-zoom { opacity: 0; transform: scale(0.92); transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-zoom.in-view { opacity: 1; transform: scale(1); } /* Stagger delays para filhos */ .reveal-stagger > *:nth-child(1) { transition-delay: 0.05s; } .reveal-stagger > *:nth-child(2) { transition-delay: 0.15s; } .reveal-stagger > *:nth-child(3) { transition-delay: 0.25s; } .reveal-stagger > *:nth-child(4) { transition-delay: 0.35s; } .reveal-stagger > *:nth-child(5) { transition-delay: 0.45s; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-left, .reveal-right, .reveal-zoom { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Dark mode (toggle simples) */ html.dark body { background-color: #0b1220 !important; color: #e5e7eb; } html.dark body .bg-white { background-color: #111827 !important; } html.dark body .bg-gray-50 { background-color: #0b1220 !important; } html.dark body .bg-gray-100 { background-color: #0f172a !important; } html.dark body .bg-green-50 { background-color: #0b1220 !important; } html.dark body .bg-orange-50 { background-color: rgba(255, 107, 0, 0.08) !important; } html.dark body .bg-white\/95 { background-color: rgba(17,24,39,0.92) !important; } html.dark body .text-gray-900 { color: #f9fafb !important; } html.dark body .text-gray-800 { color: #f3f4f6 !important; } html.dark body .text-gray-700 { color: #e5e7eb !important; } html.dark body .text-gray-600 { color: #d1d5db !important; } html.dark body .text-gray-500 { color: #9ca3af !important; } html.dark body .border-gray-200 { border-color: rgba(255,255,255,0.10) !important; } html.dark body .border-gray-100 { border-color: rgba(255,255,255,0.08) !important; } html.dark body .border-green-400 { border-color: rgba(34,197,94,0.35) !important; } html.dark body .border-orange-200 { border-color: rgba(255,255,255,0.10) !important; } html.dark body .shadow, html.dark body .shadow-lg, html.dark body .shadow-xl, html.dark body .shadow-2xl { box-shadow: 0 10px 30px rgba(0,0,0,0.55) !important; } :where(button, a, input, textarea, select, summary, details, [role="button"], [class*="menu"], [class*="modal"], [class*="popup"], [class*="toggle"], [class*="card"], [class*="panel"], [class*="slide"], [class*="extra"]) { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, max-height; transition-duration: 280ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } :where(.modal-root, .modal-backdrop, .modal-content, .collapsible, [class*="menu"], [class*="modal"], [class*="panel"]) { will-change: transform, opacity; } /* Collapsible panels (smooth open/close) */ .collapsible { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 360ms ease, opacity 220ms ease; } .collapsible.open { max-height: 2400px; opacity: 1; } @media (prefers-reduced-motion: reduce) { .collapsible { transition: none; } } /* Modal fade/scale (Login + Acessibilidade) */ .modal-root { display: block; } .modal-backdrop { opacity: 0; transition: opacity 220ms ease; } .modal-content { opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 220ms ease, transform 260ms ease; will-change: opacity, transform; } .modal-root.open .modal-backdrop { opacity: 1; } .modal-root.open .modal-content { opacity: 1; transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { .modal-backdrop, .modal-content { transition: none; } } /* Small CTA inside price boxes */ .price-box { display: flex; flex-direction: column; height: 100%; } .price-box .price-cta { margin-top: auto; } /* Hero mais premium */ #heroSection { min-height: 540px; box-shadow: inset 0 -80px 100px rgba(0,0,0,.18); } #heroSection #heroBg { filter: saturate(1.08) contrast(1.04); transform: scale(1.01); } #heroSection .max-w-xl { width:min(58%,650px); max-width:none !important; } #heroSection .bg-black\/35 { background: linear-gradient(135deg,rgba(10,15,25,.86),rgba(10,15,25,.52)) !important; border:1px solid rgba(255,255,255,.22); border-radius:24px !important; padding:28px 30px !important; box-shadow:0 24px 70px rgba(0,0,0,.34); max-height:58%; overflow:hidden; } #heroProductTitle { font-size:clamp(2rem,4vw,3.6rem) !important; line-height:1.04; letter-spacing:-.04em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } #heroProductSubtitle { font-size:1rem !important; line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } #heroCtaBtn,#heroDetailsBtn { border-radius:999px !important; padding-left:28px !important; padding-right:28px !important; } #heroThumbs > * { border-radius:18px !important; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.25); } /* Cards de ofertas com mais contraste e hierarquia */ #offersSection { position:relative; } #offersSection:before { content:""; position:absolute; inset:0 0 auto; height:220px; background:radial-gradient(circle at 50% 0,rgba(255,107,0,.11),transparent 68%); pointer-events:none; } #offersSection .offer-card { border-radius:24px !important; border:1px solid rgba(255,107,0,.18) !important; box-shadow:0 16px 42px rgba(17,24,39,.14) !important; min-height:390px; background:linear-gradient(180deg,#fff 0%,#fff 72%,#fff8f3 100%); } #offersSection .offer-card:hover { transform:translateY(-8px) scale(1.035) !important; box-shadow:0 28px 60px rgba(17,24,39,.22) !important; } #offersSection .offer-card > div:first-child { padding:7px 14px !important; border-radius:0 0 14px 0 !important; letter-spacing:.04em; text-transform:uppercase; } #offersSection .offer-card .p-6 { padding:26px !important; } #offersSection .offer-card h3 { font-size:1.16rem !important; line-height:1.25; } #offersSection .offer-card button,#offersSection .offer-card a { border-radius:12px !important; } .product-mosaic-card { border:1px solid rgba(255,255,255,.25); transition:transform .3s ease,box-shadow .3s ease; } .product-mosaic-card:hover { transform:translateY(-7px); box-shadow:0 28px 65px rgba(17,24,39,.24) !important; } @media (max-width: 767px) { #heroSection .max-w-xl { width:100%; } #heroSection .bg-black\/35 { max-height:210px; padding:18px 20px !important; } #heroProductTitle { font-size:1.85rem !important; } #heroProductSubtitle { font-size:.9rem !important; -webkit-line-clamp:2; } } .standard-footer{background:#111827;color:#d1d5db;padding:60px 0 26px}.standard-footer .sf-container{width:min(1160px,calc(100% - 40px));margin:auto}.standard-footer .sf-grid{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:34px}.standard-footer h4{color:#fff;font-weight:700;margin-bottom:14px}.standard-footer a{display:block;margin:8px 0;font-size:14px}.standard-footer a:hover{color:#ff6b00}.standard-footer .sf-brand{display:flex;align-items:center;gap:14px;color:#fff;font-weight:900;font-size:25px}.standard-footer .sf-brand img{width:64px;height:64px;object-fit:contain;border:1px solid rgba(255,255,255,.24);border-radius:16px;padding:5px;background:rgba(255,255,255,.06);box-shadow:0 7px 20px rgba(0,0,0,.18)}.standard-footer .sf-brand span{color:#ff6b00}.standard-footer .sf-bottom{border-top:1px solid #303847;margin-top:40px;padding-top:22px;font-size:13px}@media(max-width:900px){.standard-footer .sf-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.standard-footer .sf-grid{grid-template-columns:1fr}}