L&L Pescados - Qualidade e Confian\u00e7a<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root {\r\n --neon-cyan: #00f2ff; \r\n --silver-text: #ffffff; \r\n --deep-dark: #050505;\r\n --ocean-blue: #030d14;\r\n --sim-gold: #ffd700;\r\n --susaf-green: #00ff88;\r\n --sisbi-orange: #ffaa00;\r\n \r\n --wa-green: #25D366;\r\n --fb-blue: #4267b2;\r\n --ig-purple: #e1306c;\r\n }\r\n\r\n body, html { \r\n margin: 0; padding: 0; background-color: #000; \r\n overflow-x: hidden; font-family: 'Montserrat', sans-serif;\r\n scroll-behavior: smooth;\r\n }\r\n\r\n \/* --- 1. INTRODU\u00c7\u00c3O (VIDEO E TEXTOS) --- *\/\r\n #intro-stage { position: fixed; inset: 0; z-index: 10000; background: #000; display: flex; align-items: center; justify-content: center; }\r\n \r\n #shark-video { \r\n position: absolute; width: 100%; height: 100%; \r\n object-fit: cover; \/* Cobre a tela inteira (tela cheia) *\/\r\n object-position: center center; \/* Centraliza o foco do v\u00eddeo *\/\r\n filter: contrast(1.1) saturate(1.1); \r\n }\r\n \r\n #reveal-container { \r\n position: relative; z-index: 10001; \r\n display: flex; flex-direction: column; \r\n align-items: center; justify-content: center; \r\n text-align: center; pointer-events: none; width: 100%; padding: 0 20px; \r\n }\r\n \r\n \/* Container T\u00edtulo + Slogan *\/\r\n #brand-main { \r\n opacity: 0; transform: scale(4); \r\n display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n margin-bottom: 15px; \/* Espa\u00e7o para o slogan abaixo *\/\r\n }\r\n .ll-text { font-weight: 900; font-size: 80px; color: #fff; line-height: 1; letter-spacing: -2px; }\r\n .pescados-text { font-weight: 700; font-size: 32px; color: #fff; letter-spacing: 10px; text-transform: uppercase; margin-top: -5px; }\r\n \r\n \/* Slogan Aumentado e Centralizado *\/\r\n #brand-tagline { \r\n opacity: 0; \r\n font-weight: 800; \/* Mais peso *\/\r\n font-size: 24px; \/* Maior no desktop *\/\r\n color: var(--neon-cyan); \r\n text-transform: uppercase; \r\n letter-spacing: 0.3em; \/* Espa\u00e7amento ajustado *\/\r\n white-space: nowrap; \r\n text-shadow: 0 0 20px var(--neon-cyan); \r\n text-align: center;\r\n }\r\n\r\n \/* --- 2. CABE\u00c7ALHO --- *\/\r\n .hero-wrapper { position: relative; width: 100vw; min-height: 100vh; background: linear-gradient(180deg, rgba(0, 242, 255, 0.08) 0%, rgba(0,0,0,1) 15%), #000; opacity: 0; visibility: hidden; z-index: 1; }\r\n \r\n .header-titan { \r\n position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; height: 120px; \r\n display: flex; align-items: center; \r\n background: rgba(255, 255, 255, 0.06); \r\n backdrop-filter: blur(30px) saturate(150%); \r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1); \r\n pointer-events: all; opacity: 0; visibility: hidden; \r\n transition: all 0.3s ease;\r\n }\r\n \r\n .header-container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; }\r\n #logo-slot { width: 420px; display: flex; align-items: center; }\r\n \r\n .final-logo { display: flex; flex-direction: column; opacity: 0; transform: scale(1.1); }\r\n .final-logo .top { font-weight: 900; font-size: 36px; color: #fff; line-height: 1; }\r\n .final-logo .top span { font-weight: 700; font-size: 18px; letter-spacing: 4px; margin-left: 8px; color: #fff; }\r\n .final-logo .bottom { font-weight: 700; font-size: 11px; color: var(--neon-cyan); letter-spacing: 0.45em; text-transform: uppercase; margin-top: 4px; }\r\n \r\n \/* MENU DESKTOP *\/\r\n .nav-desktop { display: flex; align-items: center; gap: 50px; opacity: 0; transform: translateY(-20px); }\r\n .nav-item { font-weight: 700; font-size: 14px; color: var(--silver-text); text-transform: uppercase; letter-spacing: 0.2em; text-decoration: none; transition: all 0.4s ease; cursor: pointer; }\r\n .nav-item:hover { color: var(--neon-cyan); text-shadow: 0 0 15px var(--neon-cyan); }\r\n .nav-item.active { color: var(--neon-cyan) !important; text-shadow: 0 0 10px rgba(0, 242, 255, 0.5); }\r\n\r\n \/* MENU MOBILE (INICIALMENTE OCULTO NO PC) *\/\r\n .mobile-nav-bar { display: none; }\r\n\r\n \/* --- 3. CONTAINER 1: HERO --- *\/\r\n .hero-content { \r\n position: relative; z-index: 10; height: 100vh; \r\n display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;\r\n padding-top: 120px; padding-bottom: 0px; box-sizing: border-box;\r\n }\r\n .text-target-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; padding: 30px; z-index: 5; width: 100%; max-width: 1200px; }\r\n .targeted-glow-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at center, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0.1) 70%, transparent 90%); filter: blur(60px); z-index: -1; opacity: 0; pointer-events: none; transform: scale(1.1); border-radius: 50%; }\r\n \r\n \/* T\u00edtulo Hero *\/\r\n .hero-title { \r\n font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; line-height: 1.2; text-transform: uppercase; opacity: 0; color: #fff; letter-spacing: 2px; position: relative; text-shadow: 0 0 15px rgba(0,0,0,0.5); \r\n }\r\n .subtitle-container { position: relative; margin-top: 2.5rem; opacity: 0; max-width: 850px; padding: 0 20px; }\r\n .hero-subtitle { \r\n font-size: clamp(0.75rem, 1.2vw, 0.95rem); color: rgba(255,255,255,0.85); line-height: 2.4; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; display: block; text-shadow: 0 0 10px rgba(0,0,0,0.5); \r\n }\r\n .btn-premium { position: relative; z-index: 6; padding: 18px 45px; border: 1px solid var(--neon-cyan); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; overflow: hidden; transition: 0.4s; margin-top: 1.5rem; display: inline-block; opacity: 0; background: rgba(0, 242, 255, 0.05); backdrop-filter: blur(5px); }\r\n .btn-premium:hover { background: var(--neon-cyan); color: #000; box-shadow: 0 0 40px var(--neon-cyan); transform: translateY(-3px); }\r\n\r\n \/* --- 4. CONTAINER 2: CERTIFICA\u00c7\u00d5ES --- *\/\r\n #certificacoes {\r\n position: relative; width: 102vw; left: 50%; transform: translateX(-50%); margin-left: 0; margin-right: 0; padding: 160px 40px 140px; background: #020a10; overflow: hidden; z-index: 10; margin-top: -100px; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 85%, transparent 100%); box-sizing: border-box;\r\n }\r\n .cert-header { text-align: center; margin-bottom: 80px; position: relative; z-index: 5; padding-top: 40px; }\r\n .cert-header::before {\r\n content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; height: 180px; background: radial-gradient(ellipse at center, rgba(0, 242, 255, 0.3) 0%, transparent 70%); filter: blur(60px); z-index: -1; pointer-events: none;\r\n }\r\n .cert-header h2 { font-size: clamp(2rem, 3vw, 3.5rem); font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 10px; position: relative; z-index: 5; text-shadow: 0 2px 5px rgba(0,0,0,0.8); opacity: 0; transform: translateY(30px); }\r\n .cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 60px; max-width: 1400px; margin: 0 auto; position: relative; z-index: 5; justify-content: center; }\r\n \r\n .cert-card { position: relative; background: rgba(3, 13, 20, 0.7); box-shadow: 0 0 20px 2px rgba(0, 242, 255, 0.4), 0 0 60px 10px rgba(0, 242, 255, 0.15); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid var(--neon-cyan); padding: 60px 25px; border-radius: 20px; transition: all 0.4s ease-out; opacity: 0; transform: translateY(80px); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; overflow: visible; z-index: 1; }\r\n .cert-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 0 40px 5px rgba(0, 242, 255, 0.6), 0 0 100px 20px rgba(0, 242, 255, 0.2); }\r\n \r\n .cert-img-wrapper { width: 200px; height: 200px; background: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; padding: 5px; transition: all 0.5s ease; position: relative; z-index: 2; box-shadow: 0 10px 30px rgba(0,0,0,0.3); overflow: hidden; }\r\n .cert-card:hover .cert-img-wrapper { transform: scale(1.03); }\r\n .cert-img { width: 100%; height: 100%; object-fit: contain; }\r\n .img-susaf { transform: scale(1.55); } \r\n .img-sisbi { transform: scale(1.2); margin-top: 5px; }\r\n\r\n .cert-title { color: #fff; font-weight: 800; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 15px; position: relative; z-index: 2; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }\r\n .cert-status { position: relative; z-index: 2; font-size: 10px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; padding: 8px 20px; border-radius: 30px; display: inline-block; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 10px rgba(0,0,0,0.3); }\r\n .type-sim .cert-status, .type-susaf .cert-status { color: var(--susaf-green); border-color: var(--susaf-green); background: rgba(0, 255, 136, 0.1); }\r\n .type-sisbi .cert-status { color: var(--sisbi-orange); border-color: var(--sisbi-orange); background: rgba(255, 170, 0, 0.1); }\r\n .cert-desc { position: relative; z-index: 2; font-size: 11px; color: rgba(255,255,255,0.85); line-height: 1.8; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; margin-top: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }\r\n\r\n \/* --- 5. CONTAINER 3: JORNADA ZIG-ZAG --- *\/\r\n #zigzag-showcase {\r\n position: relative; z-index: 10; padding: 0px 40px 120px; background: var(--ocean-blue); width: 102vw; left: 50%; transform: translateX(-50%); margin-left: 0; margin-right: 0; box-sizing: border-box; border-top: none; overflow: hidden; margin-top: -100px; padding-top: 100px; \r\n }\r\n .showcase-header { position: relative; width: calc(100% + 80px); margin-left: -40px; height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 100px; overflow: hidden; z-index: 5; opacity: 0; transform: translateY(150px); }\r\n .header-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }\r\n .twin-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: contrast(1.2) brightness(0.8); transition: opacity 1s linear; will-change: opacity; }\r\n .twin-video.video-visible { opacity: 0.8; z-index: 2; }\r\n .twin-video.video-hidden { opacity: 0; z-index: 1; }\r\n .header-video-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, #030d14 0%, transparent 25%, transparent 75%, #030d14 100%); z-index: 3; }\r\n .sc-title { font-size: clamp(2rem, 3vw, 3.5rem); font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 10px; position: relative; z-index: 5; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }\r\n .sc-subtitle { font-size: 14px; color: var(--neon-cyan); text-transform: uppercase; letter-spacing: 0.3em; font-weight: 700; position: relative; z-index: 5; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }\r\n\r\n .zigzag-container { max-width: 1300px; margin: 0 auto; position: relative; }\r\n .zz-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent, rgba(0, 242, 255, 0.3), transparent); transform: translateX(-50%); z-index: 1; }\r\n .zz-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 150px; position: relative; z-index: 2; }\r\n .zz-item:last-child { margin-bottom: 0; }\r\n .zz-content-box { width: 45%; padding: 20px; }\r\n .zz-img-box { width: 45%; height: 350px; background: radial-gradient(circle at center, #1a1a1a 0%, #050505 100%); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.5s ease; }\r\n .zz-img-box:hover { border-color: var(--neon-cyan); box-shadow: 0 0 30px rgba(0, 242, 255, 0.1); transform: scale(1.02); }\r\n .zz-icon { font-size: 80px; filter: grayscale(1); opacity: 0.5; transition: all 0.5s ease; }\r\n .zz-img-box:hover .zz-icon { filter: grayscale(0) drop-shadow(0 0 15px var(--neon-cyan)); transform: scale(1.1); opacity: 1; }\r\n .zz-tag { color: var(--neon-cyan); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 15px; display: block; }\r\n .zz-title { color: #fff; font-size: clamp(1.8rem, 2.5vw, 2.5rem); font-weight: 900; text-transform: uppercase; line-height: 1.1; margin-bottom: 20px; }\r\n .zz-desc { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.8; margin-bottom: 30px; max-width: 400px; }\r\n .zz-btn { color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; border-bottom: 1px solid var(--neon-cyan); padding-bottom: 5px; transition: all 0.3s; }\r\n .zz-btn:hover { color: var(--neon-cyan); padding-bottom: 8px; }\r\n .zz-node { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background: #000; border: 2px solid var(--neon-cyan); border-radius: 50%; box-shadow: 0 0 15px var(--neon-cyan); z-index: 3; }\r\n .zz-left .zz-content-box { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }\r\n .zz-right { flex-direction: row-reverse; }\r\n .zz-right .zz-content-box { text-align: left; display: flex; flex-direction: column; align-items: flex-start; }\r\n .view-all-container { text-align: center; margin-top: 100px; z-index: 10; position: relative; }\r\n .btn-outline { display: inline-block; padding: 15px 40px; border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; transition: all 0.4s; }\r\n .btn-outline:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 20px rgba(0, 242, 255, 0.1); }\r\n footer { border-top: 1px solid rgba(255, 255, 255, 0.1); background: #000; padding: 80px 40px 40px; margin-top: 0; }\r\n\r\n \/* --- 6. FOOTER CINEMATOGR\u00c1FICO --- *\/\r\n #cinematic-footer { position: relative; border-top: 1px solid rgba(0, 242, 255, 0.3); background: linear-gradient(180deg, var(--ocean-blue) 0%, #000 90%); padding: 80px 0 0; color: #fff; overflow: hidden; z-index: 20; width: 100%; }\r\n .footer-content { position: relative; max-width: 1400px; margin: 0 auto; z-index: 2; padding: 0 40px; }\r\n .footer-cta { text-align: center; margin-bottom: 80px; opacity: 0; transform: translateY(50px); padding-bottom: 60px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }\r\n .cta-title { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; line-height: 1.1; margin-bottom: 30px; letter-spacing: -1px; }\r\n .cta-title span { color: var(--neon-cyan); text-shadow: 0 0 20px rgba(0, 242, 255, 0.4); }\r\n .cta-btn { display: inline-block; padding: 18px 50px; background: transparent; border: 2px solid var(--neon-cyan); color: #fff; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 3px; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); position: relative; overflow: hidden; }\r\n .cta-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: var(--neon-cyan); transition: all 0.4s ease; z-index: -1; }\r\n .cta-btn:hover::before { width: 100%; }\r\n .cta-btn:hover { color: #000; box-shadow: 0 0 50px rgba(0, 242, 255, 0.3); }\r\n\r\n .footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding-bottom: 80px; padding-top: 20px; text-align: center; }\r\n .f-col { display: flex; flex-direction: column; gap: 20px; align-items: center; opacity: 0; transform: translateY(30px); }\r\n .f-brand h3, .f-col h4 { font-size: 20px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #fff; margin: 0; }\r\n .f-brand h3 { margin-bottom: 5px; font-size: 30px; } \r\n .f-brand p { color: var(--neon-cyan); letter-spacing: 6px; font-size: 12px; text-transform: uppercase; font-weight: 700; }\r\n .brand-group { margin-top: -18px; }\r\n .f-col.explorar { margin: 0 auto; width: fit-content; align-items: flex-start; text-align: left; }\r\n .f-link, .social-btn, .footer-bottom { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; text-decoration: none; }\r\n .f-link { transition: all 0.3s; display: block; padding: 5px 0; }\r\n .f-link:hover { color: var(--neon-cyan); transform: translateX(5px); }\r\n\r\n .footer-seals-container { display: flex; gap: 15px; margin-top: 25px; flex-wrap: wrap; justify-content: center; }\r\n .f-seal-box { width: 95px; height: 95px; background: #fff; border-radius: 50%; padding: 4px; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 15px rgba(0,0,0,0.5); transition: all 0.3s ease; overflow: hidden; position: relative; }\r\n .f-seal-box:hover { transform: translateY(-5px); box-shadow: 0 0 25px var(--neon-cyan); }\r\n .f-seal-box .f-seal-img { width: 100%; height: 100%; object-fit: contain; }\r\n .f-seal-box .f-seal-susaf { transform: scale(1.55); } \r\n \r\n .f-seal-box.f-seal-sisbi-container .f-seal-img { opacity: 0.2; filter: grayscale(100%); }\r\n .sisbi-orbital-scanner { position: absolute; inset: 0; animation: rotate-orbit 3s linear infinite; }\r\n .sisbi-orbital-scanner::before, .sisbi-orbital-scanner::after { content: ''; position: absolute; border-radius: 50%; border: 2px solid transparent; }\r\n .sisbi-orbital-scanner::before { top: 5px; left: 5px; right: 5px; bottom: 5px; border-top-color: var(--sisbi-orange); filter: drop-shadow(0 0 5px var(--sisbi-orange)); }\r\n .sisbi-orbital-scanner::after { top: 15px; left: 15px; right: 15px; bottom: 15px; border-bottom-color: var(--sisbi-orange); filter: drop-shadow(0 0 5px var(--sisbi-orange)); animation: rotate-orbit 1.5s linear infinite reverse; }\r\n @keyframes rotate-orbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n\r\n .social-links { display: flex; flex-direction: column; gap: 10px; margin-top: 0px; align-items: center; width: 100%; }\r\n .social-btn { display: flex; align-items: center; gap: 12px; justify-content: flex-start; padding: 0 20px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 30px; background: rgba(255,255,255,0.05); backdrop-filter: blur(5px); width: 190px; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); }\r\n .social-btn i { font-size: 18px; width: 20px; text-align: center; color: #fff; transition: all 0.3s ease; }\r\n .social-btn.wa:hover { border-color: var(--wa-green); color: var(--wa-green); box-shadow: 0 0 25px rgba(37, 211, 102, 0.4); }\r\n .social-btn.wa:hover i { color: var(--wa-green); }\r\n .social-btn.fb:hover { border-color: var(--fb-blue); color: var(--fb-blue); box-shadow: 0 0 25px rgba(66, 103, 178, 0.4); }\r\n .social-btn.fb:hover i { color: var(--fb-blue); }\r\n .social-btn.ig:hover { border-color: var(--ig-purple); color: var(--ig-purple); box-shadow: 0 0 25px rgba(225, 48, 108, 0.4); }\r\n .social-btn.ig:hover i { color: var(--ig-purple); }\r\n .social-btn.email:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 25px rgba(0, 242, 255, 0.4); }\r\n .social-btn.email:hover i { color: var(--neon-cyan); }\r\n\r\n .footer-bottom-wrapper { width: 100vw; margin-left: calc(-50vw + 50%); width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 25px 0; background: #000; }\r\n .footer-bottom { max-width: 1400px; margin: 0 auto; display: flex; justify-content: center; color: rgba(255, 255, 255, 0.4); }\r\n\r\n \/* --- RESPONSIVIDADE (MOBILE & TABLET) --- *\/\r\n @media (max-width: 1024px) {\r\n \/* 1. Header: Logo esquerda, Menu Horizontal abaixo *\/\r\n .header-titan { height: auto; padding: 15px 0 0 0; background: rgba(3, 13, 20, 0.95); flex-direction: column; }\r\n .header-container { width: 100%; justify-content: center; padding: 0 20px; padding-bottom: 15px; }\r\n \r\n #logo-slot { width: auto; z-index: 10003; }\r\n .final-logo { transform: scale(0.9) !important; }\r\n \r\n \/* Esconder menu desktop *\/\r\n .nav-desktop { display: none; }\r\n \r\n \/* Exibir barra mobile horizontal (Linha \u00fanica - Sem Hamb\u00farguer) *\/\r\n .mobile-nav-horizontal {\r\n display: flex; width: 100%;\r\n justify-content: space-evenly;\r\n align-items: center;\r\n border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n background: rgba(0, 0, 0, 0.3);\r\n padding: 10px 0;\r\n }\r\n .mobile-nav-item {\r\n font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.8);\r\n text-transform: uppercase; letter-spacing: 1px; text-decoration: none;\r\n transition: color 0.3s;\r\n }\r\n .mobile-nav-item:hover, .mobile-nav-item:active { color: var(--neon-cyan); text-shadow: 0 0 10px rgba(0, 242, 255, 0.5); }\r\n\r\n \/* 2. Hero: Ajuste de quebras e tamanho *\/\r\n .hero-content { padding-top: 180px; justify-content: center; min-height: 100vh; }\r\n .hero-title { \r\n font-size: clamp(1.6rem, 5vw, 3rem); \r\n line-height: 1.3; \r\n margin-bottom: 10px;\r\n display: flex; flex-direction: column; gap: 5px; \r\n }\r\n .mobile-br { display: block; height: 5px; } \r\n\r\n \/* --- INTRO RESPONSIVA (CORRE\u00c7\u00d5ES ESPEC\u00cdFICAS) --- *\/\r\n #intro-stage { background: #000; } \r\n \r\n #shark-video { \r\n \/* CORRE\u00c7\u00c3O DO VIDEO NO MOBILE: Tela Cheia (Cover) + Centralizado *\/\r\n width: 100% !important;\r\n height: 100% !important; \r\n object-fit: cover !important; \r\n object-position: center center !important; \r\n }\r\n \r\n \/* Centraliza\u00e7\u00e3o do Texto da Intro *\/\r\n #brand-main {\r\n display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n gap: 10px;\r\n }\r\n \r\n \/* Tamanhos ajustados para mobile *\/\r\n .ll-text { font-size: 60px !important; }\r\n .pescados-text { font-size: 24px !important; letter-spacing: 8px !important; }\r\n \r\n \/* Slogan Aumentado e Abaixo *\/\r\n #brand-tagline {\r\n position: relative !important; \/* Entra no fluxo *\/\r\n font-size: 20px !important; \/* Aumentado *\/\r\n letter-spacing: 0.25em !important;\r\n white-space: normal !important; \/* Permite quebra se necess\u00e1rio *\/\r\n width: 100%;\r\n margin-top: 10px;\r\n line-height: 1.4;\r\n }\r\n \r\n .footer-grid { grid-template-columns: 1fr; gap: 50px; }\r\n .brand-group { margin-top: 0; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div id=\"intro-stage\">\r\n <video id=\"shark-video\" autoplay muted playsinline>\r\n <source src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/TUBARAO.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div id=\"reveal-container\">\r\n <div id=\"brand-main\">\r\n <span class=\"ll-text\">L&L<\/span>\r\n <span class=\"pescados-text\">Pescados<\/span>\r\n <div id=\"brand-tagline\">Qualidade e Confian\u00e7a<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-wrapper\" id=\"main-site\">\r\n <header class=\"header-titan\" id=\"main-header\">\r\n <div class=\"header-container\">\r\n <div id=\"logo-slot\">\r\n <div class=\"final-logo\" id=\"header-logo\">\r\n <div class=\"top\">L&L <span>PESCADOS<\/span><\/div>\r\n <div class=\"bottom\">Qualidade e Confian\u00e7a<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <nav class=\"nav-desktop\" id=\"main-nav\">\r\n <a href=\"index.html\" class=\"nav-item active\">IN\u00cdCIO<\/a>\r\n <a href=\"catalogo.html\" class=\"nav-item\">CAT\u00c1LOGO<\/a>\r\n <a href=\"industria.html\" class=\"nav-item\">A IND\u00daSTRIA<\/a>\r\n <a href=\"rastreio.html\" class=\"nav-item\">RASTREIO<\/a>\r\n <\/nav>\r\n <\/div>\r\n\r\n <nav class=\"mobile-nav-horizontal\">\r\n <a href=\"index.html\" class=\"mobile-nav-item\">In\u00edcio<\/a>\r\n <a href=\"catalogo.html\" class=\"mobile-nav-item\">Cat\u00e1logo<\/a>\r\n <a href=\"industria.html\" class=\"mobile-nav-item\">Ind\u00fastria<\/a>\r\n <a href=\"rastreio.html\" class=\"mobile-nav-item\">Rastreio<\/a>\r\n <\/nav>\r\n <\/header>\r\n\r\n <div class=\"hero-content\">\r\n <div class=\"text-target-wrapper\">\r\n <div class=\"targeted-glow-effect\" id=\"h-targeted-glow\"><\/div>\r\n \r\n <h1 class=\"hero-title\" id=\"h-title\">\r\n <span>CUIDADO EM CADA PROCESSO<\/span>\r\n <span class=\"mobile-br\"><\/span>\r\n <span style=\"color: var(--neon-cyan);\">COMPROMISSO EM CADA<\/span>\r\n <span class=\"mobile-br\"><\/span>\r\n <span style=\"color: var(--neon-cyan);\">ENTREGA<\/span>\r\n <\/h1>\r\n \r\n <div class=\"subtitle-container\" id=\"h-sub-wrap\">\r\n <p class=\"hero-subtitle\">\r\n TRABALHAMOS COM A DEDICA\u00c7\u00c3O DE QUEM VALORIZA CADA DETALHE DA<br>\r\n PRODU\u00c7\u00c3O DI\u00c1RIA, GARANTINDO QUE A CONFIAN\u00c7A DEPOSITADA SEJA<br>\r\n RETRIBU\u00cdDA COM O M\u00c1XIMO FRESCOR QUE O SEU NEG\u00d3CIO MERECE.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div id=\"h-btn-container\">\r\n <a href=\"industria.html\" class=\"btn-premium\">Conhe\u00e7a nosso Trabalho<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <section id=\"certificacoes\">\r\n <div class=\"cert-header\">\r\n <h2>Nossas Certifica\u00e7\u00f5es<\/h2>\r\n <\/div>\r\n\r\n <div class=\"cert-grid\">\r\n <a href=\"industria.html#sim\" class=\"cert-card type-sim\">\r\n <div class=\"cert-img-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_wli274wli274wli2-removebg-preview.png\" alt=\"Selo S.I.M\" class=\"cert-img\">\r\n <\/div>\r\n <h3 class=\"cert-title\">S.I.M Rio Grande<\/h3>\r\n <span class=\"cert-status\">Certificado Ativo<\/span>\r\n <p class=\"cert-desc\">GARANTIA MUNICIPAL DE INSPE\u00c7\u00c3O<br>RIGOROSA EM TODOS OS PROCESSOS<\/p>\r\n <\/a>\r\n \r\n <a href=\"industria.html#susaf\" class=\"cert-card type-susaf\">\r\n <div class=\"cert-img-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/12071951_169428_GDO-removebg-preview.png\" alt=\"Selo SUSAF\" class=\"cert-img img-susaf\">\r\n <\/div>\r\n <h3 class=\"cert-title\">SUSAF - RS<\/h3>\r\n <span class=\"cert-status\">Certificado Ativo<\/span>\r\n <p class=\"cert-desc\">QUALIDADE RECONHECIDA PARA<br>COMERCIALIZA\u00c7\u00c3O EM TODO O ESTADO<\/p>\r\n <\/a>\r\n \r\n <a href=\"industria.html#sisbi\" class=\"cert-card type-sisbi\">\r\n <div class=\"cert-img-wrapper sisbi-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/download-removebg-preview.png\" alt=\"Selo SISBI\" class=\"cert-img img-sisbi\">\r\n <\/div>\r\n <h3 class=\"cert-title\">SISBI<\/h3>\r\n <span class=\"cert-status\">Em Implementa\u00e7\u00e3o<\/span>\r\n <p class=\"cert-desc\">RUMO \u00c0 EXCEL\u00caNCIA NACIONAL<br>PROCESSO DE ADES\u00c3O EM ANDAMENTO<\/p>\r\n <\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"zigzag-showcase\">\r\n <div class=\"showcase-header\">\r\n <div class=\"header-video-bg\">\r\n <video id=\"v1\" class=\"twin-video active\" muted playsinline preload=\"auto\">\r\n <source src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/0117-1.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <video id=\"v2\" class=\"twin-video video-hidden\" muted playsinline preload=\"auto\">\r\n <source src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/0117-1.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div class=\"header-video-overlay\"><\/div>\r\n <\/div>\r\n <span class=\"sc-subtitle\">Nossos Campe\u00f5es<\/span>\r\n <h2 class=\"sc-title\">Destaques do Mar<\/h2>\r\n <\/div>\r\n\r\n <div class=\"zigzag-container\">\r\n <div class=\"zz-line\"><\/div>\r\n <div class=\"zz-item zz-left\">\r\n <div class=\"zz-content-box\">\r\n <span class=\"zz-tag\">O Cl\u00e1ssico<\/span>\r\n <h3 class=\"zz-title\">Fil\u00e9 de Tra\u00edra IQF<\/h3>\r\n <p class=\"zz-desc\">Produto congelado individualmente (IQF), preservando sabor e textura. O cl\u00e1ssico de vendas, com a qualidade L&L garantida em pacotes de 1kg.<\/p>\r\n <a href=\"catalogo.html\" class=\"zz-btn\">Ver Especifica\u00e7\u00f5es<\/a>\r\n <\/div>\r\n <div class=\"zz-node\"><\/div>\r\n <div class=\"zz-img-box\"><div class=\"zz-icon\">\ud83d\udc1f<\/div><\/div>\r\n <\/div>\r\n <div class=\"zz-item zz-right\">\r\n <div class=\"zz-content-box\">\r\n <span class=\"zz-tag\">O Nobre<\/span>\r\n <h3 class=\"zz-title\">Fil\u00e9 de Linguado<\/h3>\r\n <p class=\"zz-desc\">Sabor delicado e textura macia. Sele\u00e7\u00e3o premium para alta gastronomia, com o m\u00e1ximo de frescor preservado em cada fil\u00e9.<\/p>\r\n <a href=\"catalogo.html\" class=\"zz-btn\">Ver Especifica\u00e7\u00f5es<\/a>\r\n <\/div>\r\n <div class=\"zz-node\"><\/div>\r\n <div class=\"zz-img-box\"><div class=\"zz-icon\">\ud83e\udd88<\/div><\/div>\r\n <\/div>\r\n <div class=\"zz-item zz-left\">\r\n <div class=\"zz-content-box\">\r\n <span class=\"zz-tag\">O Premium<\/span>\r\n <h3 class=\"zz-title\">Camar\u00e3o Rosa<\/h3>\r\n <p class=\"zz-desc\">Camar\u00e3o rosa limpo e descascado. Classifica\u00e7\u00e3o premium para pratos que exigem excel\u00eancia visual e gustativa. Pacote de 1kg.<\/p>\r\n <a href=\"catalogo.html\" class=\"zz-btn\">Ver Especifica\u00e7\u00f5es<\/a>\r\n <\/div>\r\n <div class=\"zz-node\"><\/div>\r\n <div class=\"zz-img-box\"><div class=\"zz-icon\">\ud83e\udd90<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"view-all-container\">\r\n <a href=\"catalogo.html\" class=\"btn-outline\">Ver Cat\u00e1logo Completo<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer id=\"cinematic-footer\">\r\n <div class=\"footer-content\">\r\n <div class=\"footer-cta\">\r\n <h2 class=\"cta-title\">Leve a <span>Excel\u00eancia<\/span><br>para sua mesa<\/h2>\r\n <a href=\"contato.html\" class=\"cta-btn\">Fale com a L&L<\/a>\r\n <\/div>\r\n <div class=\"footer-grid\">\r\n <div class=\"f-col f-brand\">\r\n <div class=\"brand-group\">\r\n <h3>L&L<\/h3>\r\n <p>PESCADOS<\/p>\r\n <\/div>\r\n \r\n <div class=\"footer-seals-container\">\r\n <div class=\"f-seal-box circulo-rente\">\r\n <img decoding=\"async\" src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_wli274wli274wli2-removebg-preview.png\" class=\"f-seal-img\" title=\"S.I.M\">\r\n <\/div>\r\n <div class=\"f-seal-box circulo-rente\">\r\n <img decoding=\"async\" src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/12071951_169428_GDO-removebg-preview.png\" class=\"f-seal-img f-seal-susaf\" title=\"SUSAF\">\r\n <\/div>\r\n <div class=\"f-seal-box circulo-rente f-seal-sisbi-container\">\r\n <img decoding=\"async\" src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/download-removebg-preview.png\" class=\"f-seal-img f-seal-sisbi\" title=\"SISBI\">\r\n <div class=\"sisbi-orbital-scanner\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"f-col explorar\">\r\n <h4>Explorar<\/h4>\r\n <a href=\"index.html\" class=\"f-link\">In\u00edcio<\/a>\r\n <a href=\"catalogo.html\" class=\"f-link\">Cat\u00e1logo<\/a>\r\n <a href=\"industria.html\" class=\"f-link\">A Ind\u00fastria<\/a>\r\n <a href=\"rastreio.html\" class=\"f-link\">Rastreio<\/a>\r\n <\/div>\r\n \r\n <div class=\"f-col\">\r\n <h4>Contato & Redes<\/h4>\r\n <div class=\"social-links\">\r\n <a href=\"mailto:peixarial.l@hotmail.com\" class=\"social-btn email\">\r\n <i class=\"fa-solid fa-envelope\"><\/i>\r\n E-mail\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/5553997039520\" target=\"_blank\" class=\"social-btn wa\">\r\n <i class=\"fa-brands fa-whatsapp fa-2xs\"><\/i>\r\n WhatsApp\r\n <\/a>\r\n <a href=\"https:\/\/www.facebook.com\/p\/Peixaria-L-L-100049531189182\/?locale=pt_BR\" target=\"_blank\" class=\"social-btn fb\">\r\n <i class=\"fa-brands fa-facebook\"><\/i>\r\n Facebook\r\n <\/a>\r\n <a href=\"https:\/\/www.instagram.com\/peixarial.l\/\" target=\"_blank\" class=\"social-btn ig\">\r\n <i class=\"fa-brands fa-instagram\"><\/i>\r\n Instagram\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"footer-bottom-wrapper\">\r\n <div class=\"footer-bottom\">\r\n <p>\u00a9 2026 L&L PESCADOS. TODOS OS DIREITOS RESERVADOS.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n \/\/ --- L\u00d3GICA DO VIDEO LOOP ---\r\n function setupTwinVideoLoop(videoIds, offset) {\r\n const v1 = document.getElementById(videoIds[0]);\r\n const v2 = document.getElementById(videoIds[1]);\r\n \r\n if (!v1 || !v2) return;\r\n\r\n v1.playbackRate = 0.5; v2.playbackRate = 0.5;\r\n v1.muted = true; v2.muted = true;\r\n v2.play().then(() => v2.pause()).catch(()=>{}); \r\n\r\n let active = v1; \r\n let next = v2;\r\n\r\n const swap = () => {\r\n next.currentTime = 0;\r\n next.play().catch(e => console.log(\"Swap play error:\", e));\r\n next.classList.remove('video-hidden');\r\n next.classList.add('video-visible');\r\n active.classList.remove('video-visible');\r\n active.classList.add('video-hidden');\r\n let temp = active; active = next; next = temp;\r\n };\r\n\r\n const check = () => {\r\n if (!active.paused && !isNaN(active.duration)) {\r\n const timeLeft = active.duration - active.currentTime;\r\n if (timeLeft < offset) { swap(); }\r\n }\r\n requestAnimationFrame(check);\r\n };\r\n\r\n v1.play().then(() => { check(); }).catch(() => {\r\n window.addEventListener('scroll', () => v1.play(), {once:true});\r\n window.addEventListener('click', () => v1.play(), {once:true});\r\n });\r\n }\r\n\r\n window.addEventListener('load', function() {\r\n setupTwinVideoLoop(['v1', 'v2'], 1.5);\r\n\r\n const tl = gsap.timeline();\r\n \r\n \/\/ Anima\u00e7\u00e3o combinada: T\u00edtulo e Slogan juntos\r\n tl.to(\"#brand-main\", { opacity: 1, scale: 1, duration: 0.6, delay: 1.5, ease: \"expo.out\" })\r\n .to(\"#brand-tagline\", { opacity: 1, duration: 0.5, ease: \"power2.out\" }, \"-=0.2\") \/\/ Slogan aparece logo depois do t\u00edtulo\r\n .to(\"#brand-main\", { scale: 0.5, opacity: 0, duration: 0.4, ease: \"power2.inOut\", delay: 0.5 }) \/\/ Tudo some junto\r\n .to(\"#main-header\", { autoAlpha: 1, duration: 0.1 })\r\n .to(\"#main-site\", { autoAlpha: 1, duration: 0.1 }, \"-=0.1\")\r\n .to(\"#intro-stage\", { backgroundColor: \"transparent\", duration: 1 }, \"-=0.2\")\r\n .to(\"#header-logo\", { opacity: 1, duration: 0.8 })\r\n .to(\"#shark-video\", { opacity: 0, duration: 1, onComplete: () => { document.getElementById('intro-stage').style.display = 'none'; } }, \"-=1\")\r\n .to(\"#main-nav\", { opacity: 1, y: 0, duration: 0.8 }, \"-=0.5\")\r\n .to(\"#h-title\", { opacity: 1, y: 0, duration: 1.2, ease: \"power4.out\", startAt: {y: 30} }, \"-=0.5\")\r\n .to(\"#h-sub-wrap\", { opacity: 1, y: 0, duration: 1.2, ease: \"power3.out\", startAt: {y: 20} }, \"-=0.8\")\r\n .to(\"#h-targeted-glow\", { opacity: 0.85, duration: 1.5, ease: \"power2.out\" }, \"-=1\")\r\n .to(\".btn-premium\", { opacity: 1, y: 0, duration: 0.8, ease: \"back.out(1.7)\", startAt: {y: 20} }, \"-=0.6\");\r\n\r\n \/\/ ANIMA\u00c7\u00c3O CERTIFICA\u00c7\u00d5ES\r\n const certTl = gsap.timeline({ scrollTrigger: { trigger: \".cert-grid\", start: \"top 90%\", end: \"top 40%\", scrub: 1 } });\r\n \r\n gsap.to(\".cert-header h2\", {\r\n scrollTrigger: { trigger: \".cert-header\", start: \"top 85%\", toggleActions: \"play none none reverse\" },\r\n y: 0, opacity: 1, duration: 1, ease: \"power3.out\"\r\n });\r\n\r\n certTl.to(\".cert-card\", { opacity: 1, y: 0, stagger: 0.2, ease: \"none\" });\r\n\r\n \/\/ HEADER SCROLL\r\n const headerTl = gsap.timeline({ scrollTrigger: { trigger: \"#zigzag-showcase\", start: \"top 90%\", end: \"top 30%\", scrub: 1 } });\r\n headerTl.to(\".showcase-header\", { opacity: 1, y: 0, ease: \"none\", duration: 1 });\r\n\r\n \/\/ ZIG ZAG\r\n gsap.from(\".zz-line\", { height: 0, ease: \"none\", scrollTrigger: { trigger: \"#zigzag-showcase\", start: \"top 60%\", end: \"bottom 80%\", scrub: 1 } });\r\n const items = document.querySelectorAll('.zz-item');\r\n items.forEach(item => {\r\n const isLeft = item.classList.contains('zz-left');\r\n const content = item.querySelector('.zz-content-box');\r\n const img = item.querySelector('.zz-img-box');\r\n const node = item.querySelector('.zz-node');\r\n gsap.from(content, { scrollTrigger: { trigger: item, start: \"top 85%\", toggleActions: \"play none none reverse\" }, x: isLeft ? -50 : 50, opacity: 0, duration: 1, ease: \"power3.out\" });\r\n gsap.from(img, { scrollTrigger: { trigger: item, start: \"top 85%\", toggleActions: \"play none none reverse\" }, x: isLeft ? 50 : -50, opacity: 0, duration: 1, delay: 0.2, ease: \"power3.out\" });\r\n gsap.from(node, { scrollTrigger: { trigger: item, start: \"top 85%\", toggleActions: \"play none none reverse\" }, scale: 0, duration: 0.5, delay: 0.5, ease: \"back.out(1.7)\" });\r\n });\r\n\r\n \/\/ FOOTER\r\n const footerTl = gsap.timeline({ scrollTrigger: { trigger: \"#cinematic-footer\", start: \"top 80%\", toggleActions: \"play none none reverse\" } });\r\n footerTl.to(\".footer-cta\", { opacity: 1, y: 0, duration: 1, ease: \"power3.out\" })\r\n .to(\".f-col\", { opacity: 1, y: 0, stagger: 0.1, duration: 0.8 }, \"-=0.5\")\r\n .to(\".footer-bottom\", { opacity: 1, duration: 1 }, \"-=0.5\");\r\n \r\n ScrollTrigger.refresh();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>L&L Pescados – Qualidade e Confian\u00e7a :root { –neon-cyan: #00f2ff; –silver-text: #ffffff; –deep-dark: #050505; –ocean-blue: #030d14; –sim-gold: #ffd700; –susaf-green: #00ff88; –sisbi-orange: #ffaa00; –wa-green: #25D366; –fb-blue: #4267b2; –ig-purple: #e1306c; } body, html { margin: 0; padding: 0; background-color: #000; overflow-x: hidden; font-family: ‘Montserrat’, sans-serif; scroll-behavior: smooth; } \/* — 1. INTRODU\u00c7\u00c3O (VIDEO E TEXTOS) — *\/ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-253","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=\/wp\/v2\/pages\/253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=253"}],"version-history":[{"count":677,"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=\/wp\/v2\/pages\/253\/revisions"}],"predecessor-version":[{"id":1053,"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=\/wp\/v2\/pages\/253\/revisions\/1053"}],"wp:attachment":[{"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n L&L Pescados - Qualidade e Confian\u00e7a<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root {\r\n --neon-cyan: #00f2ff; \r\n --silver-text: #ffffff; \r\n --deep-dark: #050505;\r\n --ocean-blue: #030d14;\r\n --sim-gold: #ffd700;\r\n --susaf-green: #00ff88;\r\n --sisbi-orange: #ffaa00;\r\n \r\n --wa-green: #25D366;\r\n --fb-blue: #4267b2;\r\n --ig-purple: #e1306c;\r\n }\r\n\r\n body, html { \r\n margin: 0; padding: 0; background-color: #000; \r\n overflow-x: hidden; font-family: 'Montserrat', sans-serif;\r\n scroll-behavior: smooth;\r\n }\r\n\r\n \/* --- 1. INTRODU\u00c7\u00c3O (VIDEO E TEXTOS) --- *\/\r\n #intro-stage { position: fixed; inset: 0; z-index: 10000; background: #000; display: flex; align-items: center; justify-content: center; }\r\n \r\n #shark-video { \r\n position: absolute; width: 100%; height: 100%; \r\n object-fit: cover; \/* Cobre a tela inteira (tela cheia) *\/\r\n object-position: center center; \/* Centraliza o foco do v\u00eddeo *\/\r\n filter: contrast(1.1) saturate(1.1); \r\n }\r\n \r\n #reveal-container { \r\n position: relative; z-index: 10001; \r\n display: flex; flex-direction: column; \r\n align-items: center; justify-content: center; \r\n text-align: center; pointer-events: none; width: 100%; padding: 0 20px; \r\n }\r\n \r\n \/* Container T\u00edtulo + Slogan *\/\r\n #brand-main { \r\n opacity: 0; transform: scale(4); \r\n display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n margin-bottom: 15px; \/* Espa\u00e7o para o slogan abaixo *\/\r\n }\r\n .ll-text { font-weight: 900; font-size: 80px; color: #fff; line-height: 1; letter-spacing: -2px; }\r\n .pescados-text { font-weight: 700; font-size: 32px; color: #fff; letter-spacing: 10px; text-transform: uppercase; margin-top: -5px; }\r\n \r\n \/* Slogan Aumentado e Centralizado *\/\r\n #brand-tagline { \r\n opacity: 0; \r\n font-weight: 800; \/* Mais peso *\/\r\n font-size: 24px; \/* Maior no desktop *\/\r\n color: var(--neon-cyan); \r\n text-transform: uppercase; \r\n letter-spacing: 0.3em; \/* Espa\u00e7amento ajustado *\/\r\n white-space: nowrap; \r\n text-shadow: 0 0 20px var(--neon-cyan); \r\n text-align: center;\r\n }\r\n\r\n \/* --- 2. CABE\u00c7ALHO --- *\/\r\n .hero-wrapper { position: relative; width: 100vw; min-height: 100vh; background: linear-gradient(180deg, rgba(0, 242, 255, 0.08) 0%, rgba(0,0,0,1) 15%), #000; opacity: 0; visibility: hidden; z-index: 1; }\r\n \r\n .header-titan { \r\n position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; height: 120px; \r\n display: flex; align-items: center; \r\n background: rgba(255, 255, 255, 0.06); \r\n backdrop-filter: blur(30px) saturate(150%); \r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1); \r\n pointer-events: all; opacity: 0; visibility: hidden; \r\n transition: all 0.3s ease;\r\n }\r\n \r\n .header-container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; }\r\n #logo-slot { width: 420px; display: flex; align-items: center; }\r\n \r\n .final-logo { display: flex; flex-direction: column; opacity: 0; transform: scale(1.1); }\r\n .final-logo .top { font-weight: 900; font-size: 36px; color: #fff; line-height: 1; }\r\n .final-logo .top span { font-weight: 700; font-size: 18px; letter-spacing: 4px; margin-left: 8px; color: #fff; }\r\n .final-logo .bottom { font-weight: 700; font-size: 11px; color: var(--neon-cyan); letter-spacing: 0.45em; text-transform: uppercase; margin-top: 4px; }\r\n \r\n \/* MENU DESKTOP *\/\r\n .nav-desktop { display: flex; align-items: center; gap: 50px; opacity: 0; transform: translateY(-20px); }\r\n .nav-item { font-weight: 700; font-size: 14px; color: var(--silver-text); text-transform: uppercase; letter-spacing: 0.2em; text-decoration: none; transition: all 0.4s ease; cursor: pointer; }\r\n .nav-item:hover { color: var(--neon-cyan); text-shadow: 0 0 15px var(--neon-cyan); }\r\n .nav-item.active { color: var(--neon-cyan) !important; text-shadow: 0 0 10px rgba(0, 242, 255, 0.5); }\r\n\r\n \/* MENU MOBILE (INICIALMENTE OCULTO NO PC) *\/\r\n .mobile-nav-bar { display: none; }\r\n\r\n \/* --- 3. CONTAINER 1: HERO --- *\/\r\n .hero-content { \r\n position: relative; z-index: 10; height: 100vh; \r\n display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;\r\n padding-top: 120px; padding-bottom: 0px; box-sizing: border-box;\r\n }\r\n .text-target-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; padding: 30px; z-index: 5; width: 100%; max-width: 1200px; }\r\n .targeted-glow-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at center, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0.1) 70%, transparent 90%); filter: blur(60px); z-index: -1; opacity: 0; pointer-events: none; transform: scale(1.1); border-radius: 50%; }\r\n \r\n \/* T\u00edtulo Hero *\/\r\n .hero-title { \r\n font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; line-height: 1.2; text-transform: uppercase; opacity: 0; color: #fff; letter-spacing: 2px; position: relative; text-shadow: 0 0 15px rgba(0,0,0,0.5); \r\n }\r\n .subtitle-container { position: relative; margin-top: 2.5rem; opacity: 0; max-width: 850px; padding: 0 20px; }\r\n .hero-subtitle { \r\n font-size: clamp(0.75rem, 1.2vw, 0.95rem); color: rgba(255,255,255,0.85); line-height: 2.4; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; display: block; text-shadow: 0 0 10px rgba(0,0,0,0.5); \r\n }\r\n .btn-premium { position: relative; z-index: 6; padding: 18px 45px; border: 1px solid var(--neon-cyan); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; overflow: hidden; transition: 0.4s; margin-top: 1.5rem; display: inline-block; opacity: 0; background: rgba(0, 242, 255, 0.05); backdrop-filter: blur(5px); }\r\n .btn-premium:hover { background: var(--neon-cyan); color: #000; box-shadow: 0 0 40px var(--neon-cyan); transform: translateY(-3px); }\r\n\r\n \/* --- 4. CONTAINER 2: CERTIFICA\u00c7\u00d5ES --- *\/\r\n #certificacoes {\r\n position: relative; width: 102vw; left: 50%; transform: translateX(-50%); margin-left: 0; margin-right: 0; padding: 160px 40px 140px; background: #020a10; overflow: hidden; z-index: 10; margin-top: -100px; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 85%, transparent 100%); box-sizing: border-box;\r\n }\r\n .cert-header { text-align: center; margin-bottom: 80px; position: relative; z-index: 5; padding-top: 40px; }\r\n .cert-header::before {\r\n content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; height: 180px; background: radial-gradient(ellipse at center, rgba(0, 242, 255, 0.3) 0%, transparent 70%); filter: blur(60px); z-index: -1; pointer-events: none;\r\n }\r\n .cert-header h2 { font-size: clamp(2rem, 3vw, 3.5rem); font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 10px; position: relative; z-index: 5; text-shadow: 0 2px 5px rgba(0,0,0,0.8); opacity: 0; transform: translateY(30px); }\r\n .cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 60px; max-width: 1400px; margin: 0 auto; position: relative; z-index: 5; justify-content: center; }\r\n \r\n .cert-card { position: relative; background: rgba(3, 13, 20, 0.7); box-shadow: 0 0 20px 2px rgba(0, 242, 255, 0.4), 0 0 60px 10px rgba(0, 242, 255, 0.15); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid var(--neon-cyan); padding: 60px 25px; border-radius: 20px; transition: all 0.4s ease-out; opacity: 0; transform: translateY(80px); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; overflow: visible; z-index: 1; }\r\n .cert-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 0 40px 5px rgba(0, 242, 255, 0.6), 0 0 100px 20px rgba(0, 242, 255, 0.2); }\r\n \r\n .cert-img-wrapper { width: 200px; height: 200px; background: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; padding: 5px; transition: all 0.5s ease; position: relative; z-index: 2; box-shadow: 0 10px 30px rgba(0,0,0,0.3); overflow: hidden; }\r\n .cert-card:hover .cert-img-wrapper { transform: scale(1.03); }\r\n .cert-img { width: 100%; height: 100%; object-fit: contain; }\r\n .img-susaf { transform: scale(1.55); } \r\n .img-sisbi { transform: scale(1.2); margin-top: 5px; }\r\n\r\n .cert-title { color: #fff; font-weight: 800; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 15px; position: relative; z-index: 2; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }\r\n .cert-status { position: relative; z-index: 2; font-size: 10px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; padding: 8px 20px; border-radius: 30px; display: inline-block; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 10px rgba(0,0,0,0.3); }\r\n .type-sim .cert-status, .type-susaf .cert-status { color: var(--susaf-green); border-color: var(--susaf-green); background: rgba(0, 255, 136, 0.1); }\r\n .type-sisbi .cert-status { color: var(--sisbi-orange); border-color: var(--sisbi-orange); background: rgba(255, 170, 0, 0.1); }\r\n .cert-desc { position: relative; z-index: 2; font-size: 11px; color: rgba(255,255,255,0.85); line-height: 1.8; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; margin-top: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }\r\n\r\n \/* --- 5. CONTAINER 3: JORNADA ZIG-ZAG --- *\/\r\n #zigzag-showcase {\r\n position: relative; z-index: 10; padding: 0px 40px 120px; background: var(--ocean-blue); width: 102vw; left: 50%; transform: translateX(-50%); margin-left: 0; margin-right: 0; box-sizing: border-box; border-top: none; overflow: hidden; margin-top: -100px; padding-top: 100px; \r\n }\r\n .showcase-header { position: relative; width: calc(100% + 80px); margin-left: -40px; height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 100px; overflow: hidden; z-index: 5; opacity: 0; transform: translateY(150px); }\r\n .header-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }\r\n .twin-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: contrast(1.2) brightness(0.8); transition: opacity 1s linear; will-change: opacity; }\r\n .twin-video.video-visible { opacity: 0.8; z-index: 2; }\r\n .twin-video.video-hidden { opacity: 0; z-index: 1; }\r\n .header-video-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, #030d14 0%, transparent 25%, transparent 75%, #030d14 100%); z-index: 3; }\r\n .sc-title { font-size: clamp(2rem, 3vw, 3.5rem); font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 10px; position: relative; z-index: 5; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }\r\n .sc-subtitle { font-size: 14px; color: var(--neon-cyan); text-transform: uppercase; letter-spacing: 0.3em; font-weight: 700; position: relative; z-index: 5; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }\r\n\r\n .zigzag-container { max-width: 1300px; margin: 0 auto; position: relative; }\r\n .zz-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent, rgba(0, 242, 255, 0.3), transparent); transform: translateX(-50%); z-index: 1; }\r\n .zz-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 150px; position: relative; z-index: 2; }\r\n .zz-item:last-child { margin-bottom: 0; }\r\n .zz-content-box { width: 45%; padding: 20px; }\r\n .zz-img-box { width: 45%; height: 350px; background: radial-gradient(circle at center, #1a1a1a 0%, #050505 100%); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.5s ease; }\r\n .zz-img-box:hover { border-color: var(--neon-cyan); box-shadow: 0 0 30px rgba(0, 242, 255, 0.1); transform: scale(1.02); }\r\n .zz-icon { font-size: 80px; filter: grayscale(1); opacity: 0.5; transition: all 0.5s ease; }\r\n .zz-img-box:hover .zz-icon { filter: grayscale(0) drop-shadow(0 0 15px var(--neon-cyan)); transform: scale(1.1); opacity: 1; }\r\n .zz-tag { color: var(--neon-cyan); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 15px; display: block; }\r\n .zz-title { color: #fff; font-size: clamp(1.8rem, 2.5vw, 2.5rem); font-weight: 900; text-transform: uppercase; line-height: 1.1; margin-bottom: 20px; }\r\n .zz-desc { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.8; margin-bottom: 30px; max-width: 400px; }\r\n .zz-btn { color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; border-bottom: 1px solid var(--neon-cyan); padding-bottom: 5px; transition: all 0.3s; }\r\n .zz-btn:hover { color: var(--neon-cyan); padding-bottom: 8px; }\r\n .zz-node { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background: #000; border: 2px solid var(--neon-cyan); border-radius: 50%; box-shadow: 0 0 15px var(--neon-cyan); z-index: 3; }\r\n .zz-left .zz-content-box { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }\r\n .zz-right { flex-direction: row-reverse; }\r\n .zz-right .zz-content-box { text-align: left; display: flex; flex-direction: column; align-items: flex-start; }\r\n .view-all-container { text-align: center; margin-top: 100px; z-index: 10; position: relative; }\r\n .btn-outline { display: inline-block; padding: 15px 40px; border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; transition: all 0.4s; }\r\n .btn-outline:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 20px rgba(0, 242, 255, 0.1); }\r\n footer { border-top: 1px solid rgba(255, 255, 255, 0.1); background: #000; padding: 80px 40px 40px; margin-top: 0; }\r\n\r\n \/* --- 6. FOOTER CINEMATOGR\u00c1FICO --- *\/\r\n #cinematic-footer { position: relative; border-top: 1px solid rgba(0, 242, 255, 0.3); background: linear-gradient(180deg, var(--ocean-blue) 0%, #000 90%); padding: 80px 0 0; color: #fff; overflow: hidden; z-index: 20; width: 100%; }\r\n .footer-content { position: relative; max-width: 1400px; margin: 0 auto; z-index: 2; padding: 0 40px; }\r\n .footer-cta { text-align: center; margin-bottom: 80px; opacity: 0; transform: translateY(50px); padding-bottom: 60px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }\r\n .cta-title { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; line-height: 1.1; margin-bottom: 30px; letter-spacing: -1px; }\r\n .cta-title span { color: var(--neon-cyan); text-shadow: 0 0 20px rgba(0, 242, 255, 0.4); }\r\n .cta-btn { display: inline-block; padding: 18px 50px; background: transparent; border: 2px solid var(--neon-cyan); color: #fff; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 3px; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); position: relative; overflow: hidden; }\r\n .cta-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: var(--neon-cyan); transition: all 0.4s ease; z-index: -1; }\r\n .cta-btn:hover::before { width: 100%; }\r\n .cta-btn:hover { color: #000; box-shadow: 0 0 50px rgba(0, 242, 255, 0.3); }\r\n\r\n .footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding-bottom: 80px; padding-top: 20px; text-align: center; }\r\n .f-col { display: flex; flex-direction: column; gap: 20px; align-items: center; opacity: 0; transform: translateY(30px); }\r\n .f-brand h3, .f-col h4 { font-size: 20px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #fff; margin: 0; }\r\n .f-brand h3 { margin-bottom: 5px; font-size: 30px; } \r\n .f-brand p { color: var(--neon-cyan); letter-spacing: 6px; font-size: 12px; text-transform: uppercase; font-weight: 700; }\r\n .brand-group { margin-top: -18px; }\r\n .f-col.explorar { margin: 0 auto; width: fit-content; align-items: flex-start; text-align: left; }\r\n .f-link, .social-btn, .footer-bottom { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; text-decoration: none; }\r\n .f-link { transition: all 0.3s; display: block; padding: 5px 0; }\r\n .f-link:hover { color: var(--neon-cyan); transform: translateX(5px); }\r\n\r\n .footer-seals-container { display: flex; gap: 15px; margin-top: 25px; flex-wrap: wrap; justify-content: center; }\r\n .f-seal-box { width: 95px; height: 95px; background: #fff; border-radius: 50%; padding: 4px; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 15px rgba(0,0,0,0.5); transition: all 0.3s ease; overflow: hidden; position: relative; }\r\n .f-seal-box:hover { transform: translateY(-5px); box-shadow: 0 0 25px var(--neon-cyan); }\r\n .f-seal-box .f-seal-img { width: 100%; height: 100%; object-fit: contain; }\r\n .f-seal-box .f-seal-susaf { transform: scale(1.55); } \r\n \r\n .f-seal-box.f-seal-sisbi-container .f-seal-img { opacity: 0.2; filter: grayscale(100%); }\r\n .sisbi-orbital-scanner { position: absolute; inset: 0; animation: rotate-orbit 3s linear infinite; }\r\n .sisbi-orbital-scanner::before, .sisbi-orbital-scanner::after { content: ''; position: absolute; border-radius: 50%; border: 2px solid transparent; }\r\n .sisbi-orbital-scanner::before { top: 5px; left: 5px; right: 5px; bottom: 5px; border-top-color: var(--sisbi-orange); filter: drop-shadow(0 0 5px var(--sisbi-orange)); }\r\n .sisbi-orbital-scanner::after { top: 15px; left: 15px; right: 15px; bottom: 15px; border-bottom-color: var(--sisbi-orange); filter: drop-shadow(0 0 5px var(--sisbi-orange)); animation: rotate-orbit 1.5s linear infinite reverse; }\r\n @keyframes rotate-orbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n\r\n .social-links { display: flex; flex-direction: column; gap: 10px; margin-top: 0px; align-items: center; width: 100%; }\r\n .social-btn { display: flex; align-items: center; gap: 12px; justify-content: flex-start; padding: 0 20px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 30px; background: rgba(255,255,255,0.05); backdrop-filter: blur(5px); width: 190px; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); }\r\n .social-btn i { font-size: 18px; width: 20px; text-align: center; color: #fff; transition: all 0.3s ease; }\r\n .social-btn.wa:hover { border-color: var(--wa-green); color: var(--wa-green); box-shadow: 0 0 25px rgba(37, 211, 102, 0.4); }\r\n .social-btn.wa:hover i { color: var(--wa-green); }\r\n .social-btn.fb:hover { border-color: var(--fb-blue); color: var(--fb-blue); box-shadow: 0 0 25px rgba(66, 103, 178, 0.4); }\r\n .social-btn.fb:hover i { color: var(--fb-blue); }\r\n .social-btn.ig:hover { border-color: var(--ig-purple); color: var(--ig-purple); box-shadow: 0 0 25px rgba(225, 48, 108, 0.4); }\r\n .social-btn.ig:hover i { color: var(--ig-purple); }\r\n .social-btn.email:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 25px rgba(0, 242, 255, 0.4); }\r\n .social-btn.email:hover i { color: var(--neon-cyan); }\r\n\r\n .footer-bottom-wrapper { width: 100vw; margin-left: calc(-50vw + 50%); width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 25px 0; background: #000; }\r\n .footer-bottom { max-width: 1400px; margin: 0 auto; display: flex; justify-content: center; color: rgba(255, 255, 255, 0.4); }\r\n\r\n \/* --- RESPONSIVIDADE (MOBILE & TABLET) --- *\/\r\n @media (max-width: 1024px) {\r\n \/* 1. Header: Logo esquerda, Menu Horizontal abaixo *\/\r\n .header-titan { height: auto; padding: 15px 0 0 0; background: rgba(3, 13, 20, 0.95); flex-direction: column; }\r\n .header-container { width: 100%; justify-content: center; padding: 0 20px; padding-bottom: 15px; }\r\n \r\n #logo-slot { width: auto; z-index: 10003; }\r\n .final-logo { transform: scale(0.9) !important; }\r\n \r\n \/* Esconder menu desktop *\/\r\n .nav-desktop { display: none; }\r\n \r\n \/* Exibir barra mobile horizontal (Linha \u00fanica - Sem Hamb\u00farguer) *\/\r\n .mobile-nav-horizontal {\r\n display: flex; width: 100%;\r\n justify-content: space-evenly;\r\n align-items: center;\r\n border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n background: rgba(0, 0, 0, 0.3);\r\n padding: 10px 0;\r\n }\r\n .mobile-nav-item {\r\n font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.8);\r\n text-transform: uppercase; letter-spacing: 1px; text-decoration: none;\r\n transition: color 0.3s;\r\n }\r\n .mobile-nav-item:hover, .mobile-nav-item:active { color: var(--neon-cyan); text-shadow: 0 0 10px rgba(0, 242, 255, 0.5); }\r\n\r\n \/* 2. Hero: Ajuste de quebras e tamanho *\/\r\n .hero-content { padding-top: 180px; justify-content: center; min-height: 100vh; }\r\n .hero-title { \r\n font-size: clamp(1.6rem, 5vw, 3rem); \r\n line-height: 1.3; \r\n margin-bottom: 10px;\r\n display: flex; flex-direction: column; gap: 5px; \r\n }\r\n .mobile-br { display: block; height: 5px; } \r\n\r\n \/* --- INTRO RESPONSIVA (CORRE\u00c7\u00d5ES ESPEC\u00cdFICAS) --- *\/\r\n #intro-stage { background: #000; } \r\n \r\n #shark-video { \r\n \/* CORRE\u00c7\u00c3O DO VIDEO NO MOBILE: Tela Cheia (Cover) + Centralizado *\/\r\n width: 100% !important;\r\n height: 100% !important; \r\n object-fit: cover !important; \r\n object-position: center center !important; \r\n }\r\n \r\n \/* Centraliza\u00e7\u00e3o do Texto da Intro *\/\r\n #brand-main {\r\n display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n gap: 10px;\r\n }\r\n \r\n \/* Tamanhos ajustados para mobile *\/\r\n .ll-text { font-size: 60px !important; }\r\n .pescados-text { font-size: 24px !important; letter-spacing: 8px !important; }\r\n \r\n \/* Slogan Aumentado e Abaixo *\/\r\n #brand-tagline {\r\n position: relative !important; \/* Entra no fluxo *\/\r\n font-size: 20px !important; \/* Aumentado *\/\r\n letter-spacing: 0.25em !important;\r\n white-space: normal !important; \/* Permite quebra se necess\u00e1rio *\/\r\n width: 100%;\r\n margin-top: 10px;\r\n line-height: 1.4;\r\n }\r\n \r\n .footer-grid { grid-template-columns: 1fr; gap: 50px; }\r\n .brand-group { margin-top: 0; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div id=\"intro-stage\">\r\n <video id=\"shark-video\" autoplay muted playsinline>\r\n <source src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/TUBARAO.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div id=\"reveal-container\">\r\n <div id=\"brand-main\">\r\n <span class=\"ll-text\">L&L<\/span>\r\n <span class=\"pescados-text\">Pescados<\/span>\r\n <div id=\"brand-tagline\">Qualidade e Confian\u00e7a<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-wrapper\" id=\"main-site\">\r\n <header class=\"header-titan\" id=\"main-header\">\r\n <div class=\"header-container\">\r\n <div id=\"logo-slot\">\r\n <div class=\"final-logo\" id=\"header-logo\">\r\n <div class=\"top\">L&L <span>PESCADOS<\/span><\/div>\r\n <div class=\"bottom\">Qualidade e Confian\u00e7a<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <nav class=\"nav-desktop\" id=\"main-nav\">\r\n <a href=\"index.html\" class=\"nav-item active\">IN\u00cdCIO<\/a>\r\n <a href=\"catalogo.html\" class=\"nav-item\">CAT\u00c1LOGO<\/a>\r\n <a href=\"industria.html\" class=\"nav-item\">A IND\u00daSTRIA<\/a>\r\n <a href=\"rastreio.html\" class=\"nav-item\">RASTREIO<\/a>\r\n <\/nav>\r\n <\/div>\r\n\r\n <nav class=\"mobile-nav-horizontal\">\r\n <a href=\"index.html\" class=\"mobile-nav-item\">In\u00edcio<\/a>\r\n <a href=\"catalogo.html\" class=\"mobile-nav-item\">Cat\u00e1logo<\/a>\r\n <a href=\"industria.html\" class=\"mobile-nav-item\">Ind\u00fastria<\/a>\r\n <a href=\"rastreio.html\" class=\"mobile-nav-item\">Rastreio<\/a>\r\n <\/nav>\r\n <\/header>\r\n\r\n <div class=\"hero-content\">\r\n <div class=\"text-target-wrapper\">\r\n <div class=\"targeted-glow-effect\" id=\"h-targeted-glow\"><\/div>\r\n \r\n <h1 class=\"hero-title\" id=\"h-title\">\r\n <span>CUIDADO EM CADA PROCESSO<\/span>\r\n <span class=\"mobile-br\"><\/span>\r\n <span style=\"color: var(--neon-cyan);\">COMPROMISSO EM CADA<\/span>\r\n <span class=\"mobile-br\"><\/span>\r\n <span style=\"color: var(--neon-cyan);\">ENTREGA<\/span>\r\n <\/h1>\r\n \r\n <div class=\"subtitle-container\" id=\"h-sub-wrap\">\r\n <p class=\"hero-subtitle\">\r\n TRABALHAMOS COM A DEDICA\u00c7\u00c3O DE QUEM VALORIZA CADA DETALHE DA<br>\r\n PRODU\u00c7\u00c3O DI\u00c1RIA, GARANTINDO QUE A CONFIAN\u00c7A DEPOSITADA SEJA<br>\r\n RETRIBU\u00cdDA COM O M\u00c1XIMO FRESCOR QUE O SEU NEG\u00d3CIO MERECE.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div id=\"h-btn-container\">\r\n <a href=\"industria.html\" class=\"btn-premium\">Conhe\u00e7a nosso Trabalho<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <section id=\"certificacoes\">\r\n <div class=\"cert-header\">\r\n <h2>Nossas Certifica\u00e7\u00f5es<\/h2>\r\n <\/div>\r\n\r\n <div class=\"cert-grid\">\r\n <a href=\"industria.html#sim\" class=\"cert-card type-sim\">\r\n <div class=\"cert-img-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_wli274wli274wli2-removebg-preview.png\" alt=\"Selo S.I.M\" class=\"cert-img\">\r\n <\/div>\r\n <h3 class=\"cert-title\">S.I.M Rio Grande<\/h3>\r\n <span class=\"cert-status\">Certificado Ativo<\/span>\r\n <p class=\"cert-desc\">GARANTIA MUNICIPAL DE INSPE\u00c7\u00c3O<br>RIGOROSA EM TODOS OS PROCESSOS<\/p>\r\n <\/a>\r\n \r\n <a href=\"industria.html#susaf\" class=\"cert-card type-susaf\">\r\n <div class=\"cert-img-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/12071951_169428_GDO-removebg-preview.png\" alt=\"Selo SUSAF\" class=\"cert-img img-susaf\">\r\n <\/div>\r\n <h3 class=\"cert-title\">SUSAF - RS<\/h3>\r\n <span class=\"cert-status\">Certificado Ativo<\/span>\r\n <p class=\"cert-desc\">QUALIDADE RECONHECIDA PARA<br>COMERCIALIZA\u00c7\u00c3O EM TODO O ESTADO<\/p>\r\n <\/a>\r\n \r\n <a href=\"industria.html#sisbi\" class=\"cert-card type-sisbi\">\r\n <div class=\"cert-img-wrapper sisbi-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/download-removebg-preview.png\" alt=\"Selo SISBI\" class=\"cert-img img-sisbi\">\r\n <\/div>\r\n <h3 class=\"cert-title\">SISBI<\/h3>\r\n <span class=\"cert-status\">Em Implementa\u00e7\u00e3o<\/span>\r\n <p class=\"cert-desc\">RUMO \u00c0 EXCEL\u00caNCIA NACIONAL<br>PROCESSO DE ADES\u00c3O EM ANDAMENTO<\/p>\r\n <\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"zigzag-showcase\">\r\n <div class=\"showcase-header\">\r\n <div class=\"header-video-bg\">\r\n <video id=\"v1\" class=\"twin-video active\" muted playsinline preload=\"auto\">\r\n <source src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/0117-1.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <video id=\"v2\" class=\"twin-video video-hidden\" muted playsinline preload=\"auto\">\r\n <source src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/0117-1.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div class=\"header-video-overlay\"><\/div>\r\n <\/div>\r\n <span class=\"sc-subtitle\">Nossos Campe\u00f5es<\/span>\r\n <h2 class=\"sc-title\">Destaques do Mar<\/h2>\r\n <\/div>\r\n\r\n <div class=\"zigzag-container\">\r\n <div class=\"zz-line\"><\/div>\r\n <div class=\"zz-item zz-left\">\r\n <div class=\"zz-content-box\">\r\n <span class=\"zz-tag\">O Cl\u00e1ssico<\/span>\r\n <h3 class=\"zz-title\">Fil\u00e9 de Tra\u00edra IQF<\/h3>\r\n <p class=\"zz-desc\">Produto congelado individualmente (IQF), preservando sabor e textura. O cl\u00e1ssico de vendas, com a qualidade L&L garantida em pacotes de 1kg.<\/p>\r\n <a href=\"catalogo.html\" class=\"zz-btn\">Ver Especifica\u00e7\u00f5es<\/a>\r\n <\/div>\r\n <div class=\"zz-node\"><\/div>\r\n <div class=\"zz-img-box\"><div class=\"zz-icon\">\ud83d\udc1f<\/div><\/div>\r\n <\/div>\r\n <div class=\"zz-item zz-right\">\r\n <div class=\"zz-content-box\">\r\n <span class=\"zz-tag\">O Nobre<\/span>\r\n <h3 class=\"zz-title\">Fil\u00e9 de Linguado<\/h3>\r\n <p class=\"zz-desc\">Sabor delicado e textura macia. Sele\u00e7\u00e3o premium para alta gastronomia, com o m\u00e1ximo de frescor preservado em cada fil\u00e9.<\/p>\r\n <a href=\"catalogo.html\" class=\"zz-btn\">Ver Especifica\u00e7\u00f5es<\/a>\r\n <\/div>\r\n <div class=\"zz-node\"><\/div>\r\n <div class=\"zz-img-box\"><div class=\"zz-icon\">\ud83e\udd88<\/div><\/div>\r\n <\/div>\r\n <div class=\"zz-item zz-left\">\r\n <div class=\"zz-content-box\">\r\n <span class=\"zz-tag\">O Premium<\/span>\r\n <h3 class=\"zz-title\">Camar\u00e3o Rosa<\/h3>\r\n <p class=\"zz-desc\">Camar\u00e3o rosa limpo e descascado. Classifica\u00e7\u00e3o premium para pratos que exigem excel\u00eancia visual e gustativa. Pacote de 1kg.<\/p>\r\n <a href=\"catalogo.html\" class=\"zz-btn\">Ver Especifica\u00e7\u00f5es<\/a>\r\n <\/div>\r\n <div class=\"zz-node\"><\/div>\r\n <div class=\"zz-img-box\"><div class=\"zz-icon\">\ud83e\udd90<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"view-all-container\">\r\n <a href=\"catalogo.html\" class=\"btn-outline\">Ver Cat\u00e1logo Completo<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer id=\"cinematic-footer\">\r\n <div class=\"footer-content\">\r\n <div class=\"footer-cta\">\r\n <h2 class=\"cta-title\">Leve a <span>Excel\u00eancia<\/span><br>para sua mesa<\/h2>\r\n <a href=\"contato.html\" class=\"cta-btn\">Fale com a L&L<\/a>\r\n <\/div>\r\n <div class=\"footer-grid\">\r\n <div class=\"f-col f-brand\">\r\n <div class=\"brand-group\">\r\n <h3>L&L<\/h3>\r\n <p>PESCADOS<\/p>\r\n <\/div>\r\n \r\n <div class=\"footer-seals-container\">\r\n <div class=\"f-seal-box circulo-rente\">\r\n <img decoding=\"async\" src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_wli274wli274wli2-removebg-preview.png\" class=\"f-seal-img\" title=\"S.I.M\">\r\n <\/div>\r\n <div class=\"f-seal-box circulo-rente\">\r\n <img decoding=\"async\" src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/12071951_169428_GDO-removebg-preview.png\" class=\"f-seal-img f-seal-susaf\" title=\"SUSAF\">\r\n <\/div>\r\n <div class=\"f-seal-box circulo-rente f-seal-sisbi-container\">\r\n <img decoding=\"async\" src=\"https:\/\/www.llpescados.com.br\/wp-content\/uploads\/2026\/01\/download-removebg-preview.png\" class=\"f-seal-img f-seal-sisbi\" title=\"SISBI\">\r\n <div class=\"sisbi-orbital-scanner\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"f-col explorar\">\r\n <h4>Explorar<\/h4>\r\n <a href=\"index.html\" class=\"f-link\">In\u00edcio<\/a>\r\n <a href=\"catalogo.html\" class=\"f-link\">Cat\u00e1logo<\/a>\r\n <a href=\"industria.html\" class=\"f-link\">A Ind\u00fastria<\/a>\r\n <a href=\"rastreio.html\" class=\"f-link\">Rastreio<\/a>\r\n <\/div>\r\n \r\n <div class=\"f-col\">\r\n <h4>Contato & Redes<\/h4>\r\n <div class=\"social-links\">\r\n <a href=\"mailto:peixarial.l@hotmail.com\" class=\"social-btn email\">\r\n <i class=\"fa-solid fa-envelope\"><\/i>\r\n E-mail\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/5553997039520\" target=\"_blank\" class=\"social-btn wa\">\r\n <i class=\"fa-brands fa-whatsapp fa-2xs\"><\/i>\r\n WhatsApp\r\n <\/a>\r\n <a href=\"https:\/\/www.facebook.com\/p\/Peixaria-L-L-100049531189182\/?locale=pt_BR\" target=\"_blank\" class=\"social-btn fb\">\r\n <i class=\"fa-brands fa-facebook\"><\/i>\r\n Facebook\r\n <\/a>\r\n <a href=\"https:\/\/www.instagram.com\/peixarial.l\/\" target=\"_blank\" class=\"social-btn ig\">\r\n <i class=\"fa-brands fa-instagram\"><\/i>\r\n Instagram\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"footer-bottom-wrapper\">\r\n <div class=\"footer-bottom\">\r\n <p>\u00a9 2026 L&L PESCADOS. TODOS OS DIREITOS RESERVADOS.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n \/\/ --- L\u00d3GICA DO VIDEO LOOP ---\r\n function setupTwinVideoLoop(videoIds, offset) {\r\n const v1 = document.getElementById(videoIds[0]);\r\n const v2 = document.getElementById(videoIds[1]);\r\n \r\n if (!v1 || !v2) return;\r\n\r\n v1.playbackRate = 0.5; v2.playbackRate = 0.5;\r\n v1.muted = true; v2.muted = true;\r\n v2.play().then(() => v2.pause()).catch(()=>{}); \r\n\r\n let active = v1; \r\n let next = v2;\r\n\r\n const swap = () => {\r\n next.currentTime = 0;\r\n next.play().catch(e => console.log(\"Swap play error:\", e));\r\n next.classList.remove('video-hidden');\r\n next.classList.add('video-visible');\r\n active.classList.remove('video-visible');\r\n active.classList.add('video-hidden');\r\n let temp = active; active = next; next = temp;\r\n };\r\n\r\n const check = () => {\r\n if (!active.paused && !isNaN(active.duration)) {\r\n const timeLeft = active.duration - active.currentTime;\r\n if (timeLeft < offset) { swap(); }\r\n }\r\n requestAnimationFrame(check);\r\n };\r\n\r\n v1.play().then(() => { check(); }).catch(() => {\r\n window.addEventListener('scroll', () => v1.play(), {once:true});\r\n window.addEventListener('click', () => v1.play(), {once:true});\r\n });\r\n }\r\n\r\n window.addEventListener('load', function() {\r\n setupTwinVideoLoop(['v1', 'v2'], 1.5);\r\n\r\n const tl = gsap.timeline();\r\n \r\n \/\/ Anima\u00e7\u00e3o combinada: T\u00edtulo e Slogan juntos\r\n tl.to(\"#brand-main\", { opacity: 1, scale: 1, duration: 0.6, delay: 1.5, ease: \"expo.out\" })\r\n .to(\"#brand-tagline\", { opacity: 1, duration: 0.5, ease: \"power2.out\" }, \"-=0.2\") \/\/ Slogan aparece logo depois do t\u00edtulo\r\n .to(\"#brand-main\", { scale: 0.5, opacity: 0, duration: 0.4, ease: \"power2.inOut\", delay: 0.5 }) \/\/ Tudo some junto\r\n .to(\"#main-header\", { autoAlpha: 1, duration: 0.1 })\r\n .to(\"#main-site\", { autoAlpha: 1, duration: 0.1 }, \"-=0.1\")\r\n .to(\"#intro-stage\", { backgroundColor: \"transparent\", duration: 1 }, \"-=0.2\")\r\n .to(\"#header-logo\", { opacity: 1, duration: 0.8 })\r\n .to(\"#shark-video\", { opacity: 0, duration: 1, onComplete: () => { document.getElementById('intro-stage').style.display = 'none'; } }, \"-=1\")\r\n .to(\"#main-nav\", { opacity: 1, y: 0, duration: 0.8 }, \"-=0.5\")\r\n .to(\"#h-title\", { opacity: 1, y: 0, duration: 1.2, ease: \"power4.out\", startAt: {y: 30} }, \"-=0.5\")\r\n .to(\"#h-sub-wrap\", { opacity: 1, y: 0, duration: 1.2, ease: \"power3.out\", startAt: {y: 20} }, \"-=0.8\")\r\n .to(\"#h-targeted-glow\", { opacity: 0.85, duration: 1.5, ease: \"power2.out\" }, \"-=1\")\r\n .to(\".btn-premium\", { opacity: 1, y: 0, duration: 0.8, ease: \"back.out(1.7)\", startAt: {y: 20} }, \"-=0.6\");\r\n\r\n \/\/ ANIMA\u00c7\u00c3O CERTIFICA\u00c7\u00d5ES\r\n const certTl = gsap.timeline({ scrollTrigger: { trigger: \".cert-grid\", start: \"top 90%\", end: \"top 40%\", scrub: 1 } });\r\n \r\n gsap.to(\".cert-header h2\", {\r\n scrollTrigger: { trigger: \".cert-header\", start: \"top 85%\", toggleActions: \"play none none reverse\" },\r\n y: 0, opacity: 1, duration: 1, ease: \"power3.out\"\r\n });\r\n\r\n certTl.to(\".cert-card\", { opacity: 1, y: 0, stagger: 0.2, ease: \"none\" });\r\n\r\n \/\/ HEADER SCROLL\r\n const headerTl = gsap.timeline({ scrollTrigger: { trigger: \"#zigzag-showcase\", start: \"top 90%\", end: \"top 30%\", scrub: 1 } });\r\n headerTl.to(\".showcase-header\", { opacity: 1, y: 0, ease: \"none\", duration: 1 });\r\n\r\n \/\/ ZIG ZAG\r\n gsap.from(\".zz-line\", { height: 0, ease: \"none\", scrollTrigger: { trigger: \"#zigzag-showcase\", start: \"top 60%\", end: \"bottom 80%\", scrub: 1 } });\r\n const items = document.querySelectorAll('.zz-item');\r\n items.forEach(item => {\r\n const isLeft = item.classList.contains('zz-left');\r\n const content = item.querySelector('.zz-content-box');\r\n const img = item.querySelector('.zz-img-box');\r\n const node = item.querySelector('.zz-node');\r\n gsap.from(content, { scrollTrigger: { trigger: item, start: \"top 85%\", toggleActions: \"play none none reverse\" }, x: isLeft ? -50 : 50, opacity: 0, duration: 1, ease: \"power3.out\" });\r\n gsap.from(img, { scrollTrigger: { trigger: item, start: \"top 85%\", toggleActions: \"play none none reverse\" }, x: isLeft ? 50 : -50, opacity: 0, duration: 1, delay: 0.2, ease: \"power3.out\" });\r\n gsap.from(node, { scrollTrigger: { trigger: item, start: \"top 85%\", toggleActions: \"play none none reverse\" }, scale: 0, duration: 0.5, delay: 0.5, ease: \"back.out(1.7)\" });\r\n });\r\n\r\n \/\/ FOOTER\r\n const footerTl = gsap.timeline({ scrollTrigger: { trigger: \"#cinematic-footer\", start: \"top 80%\", toggleActions: \"play none none reverse\" } });\r\n footerTl.to(\".footer-cta\", { opacity: 1, y: 0, duration: 1, ease: \"power3.out\" })\r\n .to(\".f-col\", { opacity: 1, y: 0, stagger: 0.1, duration: 0.8 }, \"-=0.5\")\r\n .to(\".footer-bottom\", { opacity: 1, duration: 1 }, \"-=0.5\");\r\n \r\n ScrollTrigger.refresh();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>L&L Pescados – Qualidade e Confian\u00e7a :root { –neon-cyan: #00f2ff; –silver-text: #ffffff; –deep-dark: #050505; –ocean-blue: #030d14; –sim-gold: #ffd700; –susaf-green: #00ff88; –sisbi-orange: #ffaa00; –wa-green: #25D366; –fb-blue: #4267b2; –ig-purple: #e1306c; } body, html { margin: 0; padding: 0; background-color: #000; overflow-x: hidden; font-family: ‘Montserrat’, sans-serif; scroll-behavior: smooth; } \/* — 1. INTRODU\u00c7\u00c3O (VIDEO E TEXTOS) — *\/ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-253","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=\/wp\/v2\/pages\/253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=253"}],"version-history":[{"count":677,"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=\/wp\/v2\/pages\/253\/revisions"}],"predecessor-version":[{"id":1053,"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=\/wp\/v2\/pages\/253\/revisions\/1053"}],"wp:attachment":[{"href":"https:\/\/www.llpescados.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}