/* ZAMP - Programa de Estagio 2027 Landing page. Editar aqui direto, sem build: so o js/main.js e gerado. As fontes vem do Google Fonts, pelo no do index.html. Sumario: 1. Base, tipografia e componentes 2. Secao da jornada: palco, copy e controles 3. Identidade ZAMP aplicada sobre a base 4. Palco 3D e hero */ /* ========================================================================= 1. BASE, TIPOGRAFIA E COMPONENTES ========================================================================= */ :root{--cream:#ffffff;--ink:#001166;--accent:#FD7F25;--muted:#59617a;--line:#dfe4ef;--warm:#EBEADB;--display:'Poppins',Arial,sans-serif;--body:'Montserrat',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #0028F1;outline-offset:6px}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);font-weight:600}h2{font-size:clamp(38px,4.5vw,66px);letter-spacing:-3px;line-height:1.06}em{font-style:normal;color:#0028F1}p{line-height:1.65}::selection{background:var(--accent);color:var(--ink)}.skip{position:fixed;left:20px;top:-100px;background:var(--accent);padding:15px;z-index:100}.skip:focus{top:15px}.header{height:100px;max-width:1600px;margin:auto;padding:0 5%;display:flex;align-items:center;gap:40px;border-bottom:1px solid var(--line);position:relative;z-index:30;background:var(--cream)}.logo{font-family:Arial,sans-serif;font-weight:900;font-size:49px;letter-spacing:-5px;line-height:1}.logo span{font-size:13px;letter-spacing:0;vertical-align:top;margin-left:6px}.header nav{display:flex;gap:32px;margin-left:auto;font-size:13px;font-weight:600}.header nav a{position:relative}.header nav a:after{content:'';height:2px;background:var(--ink);position:absolute;bottom:-6px;left:0;width:0;transition:width .2s}.header nav a:hover:after{width:100%}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:20px 25px;border-radius:6px;background:var(--ink);color:white;font-size:15px;font-weight:600;transition:transform .2s,background .2s;min-height:54px}.button:hover{transform:translateY(-3px);background:#0028F1}.button span{font-size:24px;line-height:1}.button.small{background:var(--accent);color:var(--ink);padding:14px 20px;font-size:13px;min-height:47px}.menu{display:none}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px;display:flex;align-items:center;gap:9px}.eyebrow b{font-size:13px;letter-spacing:0;border:1px solid #a8b5df;border-radius:4px;padding:1px 6px;margin-left:3px}.status-dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:#0028F1;box-shadow:0 0 0 4px #edf0ff}.hero{position:relative;min-height:720px;height:calc(100svh - 100px);max-height:950px;max-width:1600px;margin:auto;padding:76px 5% 80px;display:grid;grid-template-columns:1.12fr 1fr;overflow:hidden}.hero-copy{position:relative;z-index:3}.hero h1{font-size:clamp(80px,8.3vw,132px);letter-spacing:-8px;line-height:1.01;margin-top:33px}.more{position:relative}.more svg{position:absolute;width:100%;height:24px;bottom:-6px;left:0;overflow:visible}.more path{stroke:var(--accent);stroke-width:12;fill:none}.period{color:#FD7F25}.hero-description{font-size:16px;margin:32px 0 25px;color:#59617a}.deadline{font-size:11px;color:var(--muted);margin-top:16px}.deadline span{margin-right:5px;font-size:16px}.hero-art{position:relative;min-width:0;margin-top:-55px;height:620px}.hero-burger{position:absolute;height:600px;width:400px;object-fit:contain;left:50%;top:0;mix-blend-mode:multiply;transform:translateX(-50%) rotate(-10deg);will-change:transform;z-index:2}.art-word{font-size:160px;position:absolute;top:220px;left:-10px;color:#0028F1;font-weight:700;letter-spacing:-12px;transform:rotate(-90deg);opacity:.6}.orbit{position:absolute;width:510px;height:350px;border:1px solid #d7dfff;border-radius:50%;top:125px;left:50%;transform:translateX(-50%) rotate(-32deg)}.orbit-two{width:440px;height:470px;transform:translateX(-50%) rotate(32deg);top:80px}.sticker{position:absolute;z-index:4;padding:24px 20px;font-size:14px;line-height:1.15;letter-spacing:-.5px;transform:rotate(12deg);top:38px;right:-5px;border-radius:50%;width:128px;height:128px;background:var(--accent);display:flex;flex-direction:column;justify-content:center;align-items:center}.sticker b{font-size:19px}.sticker span{font-size:30px;position:absolute;bottom:9px;right:28px}.ingredient-tag{position:absolute;bottom:26px;left:25px;z-index:4;background:var(--warm);padding:14px 18px;border:1px solid #FD7F25;transform:rotate(-7deg);font-size:12px;font-weight:600;box-shadow:4px 5px 0 #001166}.ingredient-tag span{font-size:24px;vertical-align:middle;margin-right:8px}.spark{position:absolute;font-size:75px;bottom:100px;right:0;z-index:3;color:#0028F1}.hero-bottom{position:absolute;bottom:25px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}.hero-bottom a{letter-spacing:1.5px;font-size:9px;font-weight:700}.hero-bottom a span{font-size:23px;margin-left:18px}.brands{padding:30px 5%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;gap:40px;align-items:center;justify-content:space-between;min-height:128px}.brands>span{font-size:9px;letter-spacing:1px;line-height:1.6}.brands strong{line-height:.9}.bk{font-family:Arial,sans-serif;font-size:26px;font-weight:900;letter-spacing:-1.4px;text-align:center}.popeyes{font-size:28px;letter-spacing:-1.5px}.popeyes span{font-size:10px;vertical-align:top}.starbucks{font-size:19px;letter-spacing:-.8px}.subway{font-size:29px;font-weight:900;letter-spacing:-2px}.brands-end{text-align:right}.section{padding:110px 7%;max-width:1600px;margin:auto}.section-heading .eyebrow{margin-bottom:24px}.program-grid{display:grid;grid-template-columns:1fr 1fr;gap:8%;margin-top:55px;align-items:center}.photo-card{position:relative;min-height:440px;border-radius:9px;overflow:hidden;background:#EBEADB;transform:rotate(-2deg)}.photo-card img{width:100%;height:440px;object-fit:cover}.photo-label{position:absolute;bottom:20px;left:20px;right:20px;padding:15px 10px;background:var(--accent);font-size:10px;letter-spacing:1px;text-align:center;font-weight:700}.mini-star{color:#FD7F25;font-size:44px}.program-text h3{font-size:34px;letter-spacing:-1.5px;margin:12px 0 20px;line-height:1.1}.program-text p{font-size:14px;color:var(--muted);margin-bottom:16px;max-width:440px}.stats{display:flex;gap:50px;margin:32px 0;border-top:1px solid var(--line);padding-top:25px}.stats strong{font-family:var(--display);font-size:40px;letter-spacing:-2px}.stats strong span{font-size:17px;letter-spacing:-.5px}.stats small{display:block;color:var(--muted);font-size:11px}.text-link{display:flex;justify-content:space-between;font-size:12px;font-weight:700;padding-bottom:12px;border-bottom:1px solid var(--ink)}.journey{height:2600px;background:#f1f1f1;position:relative}.journey-sticky{position:sticky;top:0;min-height:760px;height:100svh;max-height:1000px;padding:60px 7% 20px;overflow:hidden}.journey-intro{position:relative;z-index:3}.journey-intro h2{font-size:48px;margin:17px 0 12px}.journey-intro>p:last-child{font-size:13px;color:var(--muted)}.journey-layout{display:grid;grid-template-columns:1fr 1fr;gap:8%;height:490px;max-width:1300px;margin:0 auto}.journey-visual{position:relative;min-height:460px}.journey-visual img{width:300px;height:450px;object-fit:contain;margin:-25px auto 0;mix-blend-mode:multiply;transform:rotate(-7deg);will-change:transform}.journey-ring{position:absolute;width:390px;height:390px;border:1px solid #bbc5e8;border-radius:50%;top:25px;left:50%;transform:translateX(-50%)}.layer-label{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:2px;white-space:nowrap}.layer-label b{background:var(--accent);padding:7px}.journey-content{padding-top:30px;max-width:440px}.journey-tabs{display:flex;gap:12px;margin-bottom:32px}.journey-tabs button{border:1px solid #a8b5df;border-radius:50%;height:42px;width:42px;color:var(--ink);background:transparent;font-size:12px;transition:background .25s}.journey-tabs button[aria-selected=true]{background:var(--ink);color:var(--accent);border-color:var(--ink)}.step-kicker{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#59617a}.journey-content h3{font-size:42px;letter-spacing:-2px;line-height:1.08;margin:16px 0 20px}.journey-content p{font-size:14px;color:#59617a;max-width:390px;min-height:95px}.journey-progress{height:3px;background:#dfe4ef;margin:25px 0 18px}.journey-progress span{height:100%;width:20%;display:block;background:#0028F1;transition:width .25s}.journey-note{font-size:9px;letter-spacing:1.4px;color:#59617a}.ticker{background:var(--accent);overflow:hidden;padding:22px 0;transform:rotate(-1deg);position:relative;z-index:4;margin-top:-8px}.ticker div{display:flex;gap:35px;width:max-content;font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-1px;animation:ticker 28s linear infinite}.ticker span{font-size:28px}.profile{display:grid;grid-template-columns:1fr 1fr;gap:8%}.profile h2{margin:24px 0}.profile-heading>p:last-of-type{font-size:14px;color:var(--muted)}.outlined-arrow{font-size:130px;line-height:1.2;color:#0028F1}.requirements{padding-top:18px}.requirement{border-top:1px solid var(--line);padding:28px 0;display:flex;gap:20px}.requirement>span{font-size:11px;color:var(--muted);padding-top:6px}.requirement>span:last-child{margin-left:auto;font-size:20px}.requirement h3{font-size:22px;margin-bottom:10px;letter-spacing:-.7px}.requirement p{font-size:13px;color:var(--muted);max-width:330px}.requirements .button{margin-top:14px}.benefits{background:var(--ink);color:var(--cream);max-width:none}.benefits-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:48px}.benefits-heading h2{margin-top:23px}.benefits em{color:var(--accent)}.benefits-heading>p{font-size:13px;color:#c0c3d0;margin-bottom:8px}.benefit-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:15px}.benefit-feature{background:var(--accent);color:var(--ink);grid-row:span 2;border-radius:8px;padding:32px;position:relative;overflow:hidden;min-height:340px}.benefit-icon{font-size:27px;display:block;margin-bottom:25px}.benefit-feature>p{font-size:10px;letter-spacing:1.5px;margin-top:40px}.benefit-feature h3{font-size:57px;letter-spacing:-3px;margin-top:7px;white-space:nowrap}.benefit-feature h3 span{font-size:25px;letter-spacing:-1px}.benefit-feature small{font-size:11px;max-width:200px;display:block;margin-top:14px;line-height:1.6;position:relative;z-index:2}.feature-star{position:absolute;font-size:150px;bottom:-55px;right:-20px;color:#e66916}.benefit-card{padding:25px;border:1px solid #ffffff33;border-radius:8px;transition:background .2s}.benefit-card:hover{background:#0028F1}.benefit-card .benefit-icon{color:var(--accent);margin-bottom:15px}.benefit-card h3{font-size:18px;letter-spacing:-.6px;margin-bottom:10px}.benefit-card p{font-size:12px;color:#c0c3d0;max-width:250px}.league{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;background:var(--warm);max-width:none;overflow:hidden}.league-symbol{font-family:var(--display);font-weight:700;font-size:300px;line-height:1;letter-spacing:-25px;transform:rotate(-10deg);text-align:center;position:relative}.league-symbol span{position:absolute;font-size:100px;right:20px;top:-15px;letter-spacing:0}.league h2{margin:22px 0}.league em{color:#0028F1}.league p:not(.eyebrow){font-size:14px;max-width:470px;color:#001166}.pill{border:1px solid #00116666;padding:8px 11px;border-radius:30px;font-size:8px;letter-spacing:1px;display:inline-block;margin:24px 5px 0 0}.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;list-style:none;padding:0;margin:55px 0 0}.steps li{position:relative;border-top:1px solid #c0c3d0;padding-top:25px}.steps li:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ink);position:absolute;top:-4px}.steps li>span{font-size:40px;letter-spacing:-2px;color:#0028F1;font-family:var(--display)}.steps h3{font-size:18px;letter-spacing:-.7px;margin-top:20px}.steps p{font-size:11px;font-weight:600;margin:8px 0 12px}.steps small{font-size:11px;color:var(--muted);line-height:1.7;display:block;max-width:145px}.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:10%;padding-top:60px;border-top:1px solid var(--line)}.faq h2{margin-top:25px}.faq-list details{border-bottom:1px solid var(--line);padding:23px 0}.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:15px;font-weight:600;gap:20px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:24px;font-weight:400;transition:transform .2s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details p{font-size:13px;color:var(--muted);padding:16px 35px 0 0}.final-cta{background:var(--accent);text-align:center;padding:85px 6%;position:relative;overflow:hidden}.final-cta .eyebrow{justify-content:center}.final-cta h2{font-size:clamp(50px,6.8vw,105px);letter-spacing:-5px;margin:27px 0 35px;position:relative}.final-cta em{color:#FD7F25}.final-cta h2>span{position:absolute;right:5%;top:-10px;font-size:120px;transform:rotate(5deg)}.final-cta>p:last-child{font-size:9px;letter-spacing:1.3px;margin-top:23px}footer{display:flex;align-items:center;flex-wrap:wrap;gap:30px;padding:45px 5%}footer .logo{font-size:40px}footer p{font-size:12px;color:var(--muted)}footer>a:not(.logo){font-size:11px;margin-left:auto}footer small{flex-basis:100%;font-size:10px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px}.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.js .reveal.visible{opacity:1;transform:translateY(0)}@keyframes ticker{to{transform:translateX(-40%)}} body{overflow-x:clip}.hero-burger,.journey-visual img{mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);filter:none}.journey-visual img{margin-top:0}.journey-sticky{background:var(--cream)} @media(min-width:1500px){.hero-art{height:690px}.hero-burger{height:680px;width:453px}.hero h1{margin-top:45px}.hero-description{margin-top:40px}.hero{padding-top:85px}} @media(max-width:1050px){.header{gap:25px}.header nav{gap:20px}.hero{min-height:690px;padding-top:70px}.hero h1{font-size:90px;letter-spacing:-6px}.hero-burger{height:550px;width:367px}.hero-art{height:580px}.sticker{right:-10px;width:105px;height:105px;font-size:12px}.sticker b{font-size:16px}.sticker span{font-size:24px;bottom:5px}.ingredient-tag{left:0;font-size:10px}.brands{gap:20px}.brands-end{display:none}.section{padding:85px 6%}.benefit-feature{padding:25px}.benefit-feature h3{font-size:46px}.steps{grid-template-columns:repeat(3,1fr);row-gap:38px}.journey-sticky{padding-top:45px}.final-cta h2>span{right:0}.starbucks{font-size:16px}} @media(max-width:760px){html{scroll-padding-top:25px}.header{height:80px;padding:0 6%;gap:18px}.logo{font-size:41px}.header .button{margin-left:auto}.menu{display:block;border:0;background:transparent;font-size:22px;padding:9px}.header nav{display:none;position:absolute;top:80px;left:0;right:0;padding:25px 6%;background:var(--cream);border-bottom:1px solid var(--line);box-shadow:0 10px 20px #0011660c}.header nav.open{display:flex;flex-direction:column;gap:24px}.hero{height:auto;max-height:none;min-height:1000px;display:flex;flex-direction:column;padding:45px 6% 75px;overflow:hidden}.hero .eyebrow{font-size:9px;letter-spacing:1.1px}.hero h1{font-size:clamp(65px,13vw,100px);letter-spacing:-5px;margin-top:25px;line-height:1}.hero-description{font-size:14px;margin-top:27px;max-width:360px}.hero .button{padding:17px 22px}.hero-art{height:460px;width:100%;margin:25px 0 0;flex-shrink:0}.hero-burger{height:445px;width:297px;top:0;left:49%}.sticker{top:10px;right:4%;width:103px;height:103px}.orbit{width:370px;height:280px;top:80px}.orbit-two{width:300px;height:350px;top:35px}.art-word{font-size:120px;top:155px;left:0}.spark{font-size:55px;bottom:75px;right:6%}.ingredient-tag{bottom:20px;left:8%;padding:10px 15px}.hero-bottom{bottom:20px;left:6%;right:6%}.hero-bottom p{display:none}.brands{padding:25px 6%;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.brands>span:first-child{grid-column:1/-1;font-size:8px}.brands>span:first-child br{display:none}.bk{font-size:18px}.popeyes{font-size:19px}.starbucks{font-size:10px;letter-spacing:-.3px}.subway{font-size:20px}.section{padding:65px 6%}h2{font-size:39px;letter-spacing:-2px}.eyebrow{font-size:9px;letter-spacing:1.4px}.program-grid{grid-template-columns:1fr;gap:35px;margin-top:35px}.photo-card{min-height:310px}.photo-card img{height:310px}.program-text h3{font-size:30px}.stats{margin:25px 0}.journey{height:2200px}.journey-sticky{min-height:730px;max-height:900px;height:100svh;padding:30px 6% 15px}.journey-intro h2{font-size:32px;margin:12px 0 8px;letter-spacing:-1.5px}.journey-intro>p:last-child{font-size:11px}.journey-layout{display:flex;flex-direction:column;gap:0;height:auto}.journey-visual{height:270px;min-height:270px}.journey-visual img{width:180px;height:270px;margin:0 auto}.journey-ring{width:230px;height:230px;top:20px}.layer-label{left:auto;right:0;top:120px;bottom:auto;transform:rotate(90deg);font-size:8px}.journey-content{padding-top:6px;max-width:none}.journey-tabs{gap:9px;margin-bottom:18px}.journey-tabs button{width:34px;height:34px;font-size:10px}.journey-content h3{font-size:28px;letter-spacing:-1px;margin:10px 0}.journey-content p{font-size:12px;min-height:65px;max-width:none}.step-kicker{font-size:8px}.journey-progress{margin:15px 0 10px}.journey-note{font-size:8px}.ticker{padding:16px 0}.ticker div{font-size:20px}.profile{grid-template-columns:1fr;gap:18px}.profile h2 br:nth-child(1){display:none}.profile-heading>p:last-of-type{font-size:12px}.outlined-arrow{display:none}.requirements{padding:0}.requirement{padding:24px 0}.benefits-heading{display:block}.benefits-heading>p{margin-top:20px}.benefit-grid{grid-template-columns:1fr 1fr;gap:10px}.benefit-feature{grid-column:1/-1;grid-row:auto;min-height:240px}.benefit-feature>p{margin-top:10px}.benefit-feature h3{font-size:56px}.benefit-feature .benefit-icon{margin-bottom:8px}.benefit-card{padding:20px 16px}.benefit-card h3{font-size:17px}.benefit-card p{font-size:11px}.feature-star{bottom:-20px;right:20px;font-size:200px}.league{grid-template-columns:1fr;gap:25px}.league-symbol{font-size:160px;letter-spacing:-12px;text-align:left;padding-left:20px}.league-symbol span{left:140px;right:auto;font-size:70px}.league h2{font-size:40px}.league p:not(.eyebrow){font-size:13px}.steps{grid-template-columns:1fr 1fr;gap:35px 22px;margin-top:38px}.steps h3{margin-top:12px}.faq{grid-template-columns:1fr;gap:20px}.faq h2 br{display:none}.faq-list summary{font-size:14px}.final-cta{padding:65px 6%}.final-cta h2{font-size:52px;letter-spacing:-3px}.final-cta h2>span{display:none}.final-cta>p:last-child{font-size:8px;letter-spacing:.5px}footer{padding:30px 6%;gap:20px}footer>a:not(.logo){margin-left:0;flex-basis:100%}footer small{line-height:1.5}.button{font-size:13px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}.journey{height:auto}.journey-sticky{position:relative;height:auto;min-height:760px}.hero-burger,.journey-visual img{will-change:auto}} /* ========================================================================= 2. SECAO DA JORNADA: PALCO, COPY E CONTROLES ========================================================================= */ /* Scroll scene: independent alpha assets, no video or frame downloads. */ .journey{height:500svh;background:#0028F1} .journey-sticky{height:100svh;min-height:640px;max-height:none;display:flex;align-items:center;background:#0028F1;color:#ffffff;padding:7vh 6%;isolation:isolate} .journey-sticky::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 74% 44%,#00116655,transparent 53%)} .assembly-grain{position:absolute;inset:0;opacity:.12;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.3' d='M0 0h160v160H0z'/%3E%3C/svg%3E")} .assembly-topline{position:absolute;top:30px;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;z-index:5;color:#ffffffcc;font-size:9px;font-weight:600;letter-spacing:1.6px} .assembly-topline span:last-child{display:flex;align-items:center;gap:10px}.assembly-topline i{height:6px;width:6px;border-radius:50%;background:var(--accent)} .assembly-copy{width:40%;position:relative;z-index:4;padding-right:15px} .assembly-copy .eyebrow{color:#ffffffcc;font-size:10px} .assembly-copy h2{font-size:clamp(42px,4.6vw,74px);letter-spacing:-3.8px;line-height:1.01;margin:22px 0 20px} .assembly-copy h2 em{color:var(--accent)} .assembly-subtitle{color:#ffffffcc;font-size:13px;max-width:270px;line-height:1.7} .assembly-copy .journey-tabs{margin:34px 0 25px;gap:12px} .assembly-copy .journey-tabs button{width:37px;height:37px;border-color:#ffffff66;color:#ffffff;font-size:10px;background:transparent} .assembly-copy .journey-tabs button[aria-selected=true]{background:var(--accent);color:#001166;border-color:var(--accent)} .assembly-panel{position:relative;min-height:160px;max-width:360px} .assembly-panel .step-kicker{font-size:9px;letter-spacing:1.2px;color:#FD7F25} .assembly-panel h3{font-size:clamp(24px,2.2vw,34px);letter-spacing:-1.2px;line-height:1.12;margin:12px 0} .assembly-panel p{font-size:12px;color:#ffffffcc;line-height:1.65;max-width:310px} .assembly-skip{font-size:10px;border-bottom:1px solid #ffffff66;padding:7px 0;display:inline-flex;gap:25px;margin-top:16px;color:#ffffff} .assembly-stage{position:absolute;left:42%;right:1%;top:50%;transform:translateY(-50%);aspect-ratio:1;perspective:1100px;isolation:isolate;pointer-events:none} .assembly-halo{position:absolute;inset:8% 4%;border:1px solid #ffffff30;border-radius:50%;transform:rotate(-25deg);scale:1 .8} .assembly-halo::after{content:'';position:absolute;inset:11%;border:1px dashed #ffffff20;border-radius:50%} .assembly-word{position:absolute;font-family:var(--display);font-size:clamp(110px,17vw,260px);font-weight:700;letter-spacing:-14px;top:25%;left:-4%;color:#ffffff0c;line-height:1;white-space:nowrap} .assembly-plane{position:absolute;inset:0;transform-origin:50% 60%;will-change:transform} .food-layer{position:absolute;inset:0;width:100%;height:auto;max-width:none;will-change:transform;pointer-events:none;user-select:none;mix-blend-mode:normal;filter:none;mask-image:none} .food-layer[data-layer='0']{z-index:0;transform-origin:50% 77%} .food-layer[data-layer='1']{z-index:1;transform-origin:50% 69%} .food-layer[data-layer='2']{z-index:2;transform-origin:50% 64%} .food-layer[data-layer='3']{z-index:3;transform-origin:50% 65%} .food-layer[data-layer='4']{z-index:4;transform-origin:50% 55%} .food-layer[data-layer='5']{z-index:5;transform-origin:50% 44%} .food-layer[data-layer='6']{z-index:6;transform-origin:50% 36%} .assembly-shadow{position:absolute;width:68%;height:5%;bottom:17%;left:16%;background:#0009;border-radius:50%;filter:blur(18px);transform:scale(.8);opacity:.5;will-change:transform,opacity} .assembly-caption{position:absolute;z-index:8;left:62%;top:15%;padding:9px 12px;font-size:9px;font-weight:600;letter-spacing:1px;border:1px solid #ffffff55;border-radius:20px;color:#FD7F25;white-space:nowrap;transform:rotate(6deg);background:#001166dd} .assembly-caption:before{content:'↙';margin-right:10px} .assembly-seal{position:absolute;right:6%;bottom:15%;z-index:8;width:110px;height:110px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--accent);color:#001166;border-radius:50%;font-size:10px;line-height:1.3;transform:scale(0) rotate(-35deg);font-weight:600;will-change:transform,opacity} .assembly-seal b{font-size:20px;letter-spacing:-1px}.assembly-seal span{font-size:22px} .assembly-bottom{position:absolute;left:6%;right:6%;bottom:25px;display:flex;gap:20px;align-items:center;z-index:5} .assembly-counter{font-family:var(--display);font-size:12px;min-width:68px;color:#ffffffcc}.assembly-counter b{font-size:22px;color:var(--accent);font-weight:500}.assembly-track{height:2px;flex:1;background:#ffffff44;position:relative}.assembly-track span{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;will-change:transform}.assembly-bottom>span:last-child{font-size:9px;letter-spacing:1px;color:#ffffffcc} /* The hero uses the same seven small assets and now opens as an exploded stack. */ .hero-art .hero-burger{display:none}.hero-art .hero-food{position:absolute;inset:0;perspective:1000px;mix-blend-mode:normal} .hero-food .assembly-plane{width:110%;height:auto;aspect-ratio:1;top:10px;left:-5%;transform:rotate(-8deg)} .hero-art{mix-blend-mode:normal}.hero-food .food-layer{filter:drop-shadow(0 10px 7px #00116614)} .hero-art .ingredient-tag{bottom:20px}.hero-art .sticker{top:20px}.hero-art .art-word{opacity:.4} @media(min-width:1400px){.assembly-stage{width:min(59vw,90svh);left:auto;right:2%}.assembly-copy{max-width:560px}} @media(max-width:900px){.assembly-copy h2{font-size:48px}.assembly-copy{width:43%}.assembly-stage{left:42%;right:-3%}.assembly-panel h3{font-size:26px}.assembly-topline{font-size:8px}.assembly-copy .journey-tabs{gap:8px}.assembly-seal{width:85px;height:85px;font-size:8px}.assembly-seal b{font-size:17px}.assembly-caption{font-size:8px;left:50%}} @media(max-width:760px){.journey{height:420svh}.journey-sticky{min-height:680px;padding:0 6%;display:block}.assembly-topline{top:20px;left:6%;right:6%;font-size:7px;letter-spacing:1px}.assembly-topline span:last-child{font-size:7px}.assembly-copy{position:absolute;left:6%;right:6%;width:auto;top:58px;padding:0;display:contents}.assembly-copy>.eyebrow{display:none}.assembly-copy h2{position:absolute;top:58px;left:6%;font-size:35px;letter-spacing:-1.8px;z-index:3;margin:0}.assembly-copy h2 br{display:none}.assembly-copy h2 em{display:block}.assembly-subtitle{display:none}.assembly-stage{width:min(92vw,49svh);left:50%;right:auto;top:45%;transform:translate(-50%,-50%)}.assembly-halo{inset:4%}.assembly-word{font-size:100px;letter-spacing:-6px}.assembly-caption{top:12%;left:60%;font-size:7px;padding:7px 10px}.assembly-seal{bottom:15%;right:-1%;width:75px;height:75px}.assembly-seal b{font-size:15px}.assembly-seal span{font-size:16px}.assembly-copy .journey-tabs{position:absolute;bottom:214px;left:6%;margin:0;gap:10px}.assembly-copy .journey-tabs button{width:32px;height:32px;font-size:9px}.assembly-panel{position:absolute;left:6%;right:6%;bottom:60px;min-height:135px;max-width:none}.assembly-panel h3{font-size:25px;margin:10px 0 8px;letter-spacing:-1px}.assembly-panel h3 br{display:none}.assembly-panel p{font-size:11px;line-height:1.6;max-width:340px}.assembly-panel .step-kicker{font-size:8px}.assembly-skip{position:absolute;bottom:217px;right:6%;margin:0;font-size:8px;gap:9px}.assembly-bottom{bottom:20px;gap:12px}.assembly-counter{min-width:55px;font-size:9px}.assembly-counter b{font-size:17px}.assembly-bottom>span:last-child{font-size:7px;letter-spacing:.4px}.hero-food .assembly-plane{width:120%;left:-10%;top:0}.hero-art .ingredient-tag{bottom:0}} @media(max-width:760px) and (max-height:740px){.journey-sticky{min-height:590px}.assembly-copy h2{font-size:30px;top:48px}.assembly-stage{width:min(78vw,46svh);top:43%}.assembly-copy .journey-tabs{bottom:192px}.assembly-skip{bottom:195px}.assembly-panel{bottom:42px;min-height:130px}.assembly-panel h3{font-size:23px}.assembly-panel p{font-size:10px}.assembly-bottom{bottom:13px}} @media(min-width:761px) and (max-height:720px){.journey-sticky{min-height:540px}.assembly-copy h2{font-size:46px;margin:12px 0}.assembly-copy .journey-tabs{margin:20px 0}.assembly-subtitle{display:none}.assembly-panel{min-height:140px}.assembly-stage{width:85svh;left:auto;right:4%}.assembly-topline{top:20px}} @media(prefers-reduced-motion:reduce){.journey{height:auto}.journey-sticky{position:relative;height:800px;min-height:680px}.food-layer,.assembly-plane{will-change:auto}.assembly-track span{will-change:auto}.assembly-bottom>span:last-child{font-size:0}.assembly-bottom>span:last-child:after{content:'EXPLORE PELOS BOTÕES';font-size:9px}} /* ========================================================================= 3. IDENTIDADE ZAMP APLICADA SOBRE A BASE ========================================================================= */ /* Identity source: https://www.zamp.com.br/assets/css/default.css Primary #0028F1, secondary #FD7F25, menu header #001166, menu #EBEADB. The SVG logo retains its original #0000FE fill. */ :root{--blue:#0028F1;--orange:#FD7F25;--navy:#001166;--beige:#EBEADB;--accent:var(--orange);--ink:var(--navy);--cream:#fff;--warm:var(--beige)} body{background:#fff;color:var(--navy)} h1,h2,h3{font-weight:800}h2{font-size:clamp(35px,4.1vw,62px);letter-spacing:-2.6px;line-height:1.13} .header{max-width:none;padding:0 6%;height:100px;border-bottom:1px solid #dfe4ef}.logo{display:block;letter-spacing:0;flex-shrink:0;line-height:0}.logo img{width:156px;height:auto}.header nav{font-size:12px;gap:27px}.header .button.small{background:var(--blue);color:white;min-height:48px;padding:12px 20px} .button{border-radius:3px;background:var(--blue);color:#fff;font-weight:600;padding:19px 24px}.button:hover{background:var(--navy)}.button.small:hover{background:var(--navy)} .hero{max-width:1600px;grid-template-columns:1.08fr 1fr;padding:70px 6% 80px;min-height:740px;background:#fff} .hero h1{color:var(--blue);font-size:clamp(70px,7.9vw,120px);letter-spacing:-6px;font-weight:800;line-height:1.03;margin-top:30px} .hero h1 .more{color:var(--orange)}.hero h1 .period{color:var(--blue)}.more path{stroke:var(--blue);stroke-width:7}.hero .eyebrow{color:var(--blue);letter-spacing:1.2px}.hero .eyebrow b{border-color:var(--blue)} .hero-description{font-size:14px;max-width:430px;margin:30px 0 25px;color:#59617a}.deadline{font-size:10px}.hero-bottom p{font-size:10px} .hero-art{height:640px;margin-top:-30px}.hero-art:before{content:'';position:absolute;inset:5% -8% 5% 3%;background:var(--blue);border-radius:48% 52% 48% 42%;transform:rotate(-12deg)} .hero-art .orbit{border-color:#ffffff50;z-index:1}.hero-art .art-word{z-index:1;color:white;opacity:.07}.hero-art .hero-food{z-index:2}.hero-art .hero-food .assembly-plane{top:10px;width:108%;left:-4%}.hero-food .food-layer{filter:drop-shadow(0 12px 8px #00116622)} .hero-art .sticker{background:var(--orange);color:var(--navy);width:116px;height:116px;right:-1%;top:8px}.hero-art .sticker b{font-size:17px}.hero-art .ingredient-tag{background:#fff;border:1px solid var(--blue);box-shadow:4px 5px 0 var(--orange);color:var(--blue);font-size:10px;left:12px;bottom:12px}.hero-art .spark{color:var(--orange);bottom:78px;right:-5px} .brands{background:var(--blue);color:#fff;border:0;padding:28px 6%}.brands>span{opacity:.8}.section-heading h2{color:var(--navy)}.section-heading h2 em{color:var(--blue)}.eyebrow{color:var(--blue)} .program{background:#fff}.photo-card{transform:none;border-radius:4px}.photo-label{background:var(--blue);color:#fff}.program-text h3{font-weight:600}.mini-star{color:var(--orange)}.stats strong{font-weight:800;color:var(--blue)}.text-link{color:var(--blue);border-color:var(--blue)} .profile{background:var(--beige);max-width:none}.profile h2{color:var(--navy);font-size:clamp(36px,4vw,61px)}.profile h2 em{color:var(--blue)}.requirement{border-color:#0011662b}.requirement h3{font-weight:600}.outlined-arrow{color:var(--orange)} .benefits{background:var(--navy)}.benefits .eyebrow{color:#ffffffb8}.benefits em{color:var(--orange)}.benefit-feature{background:var(--orange);border-radius:4px;color:var(--navy)}.benefit-card{border-color:#ffffff33;border-radius:4px}.benefit-card h3{font-weight:600}.benefit-card .benefit-icon{color:var(--orange)}.feature-star{color:#00116616}.benefit-feature h3{font-weight:800} .league{background:var(--orange);color:var(--navy)}.league .eyebrow,.league em{color:var(--navy)}.league p:not(.eyebrow){color:var(--navy)}.league-symbol{font-family:Poppins,sans-serif;font-weight:900;color:var(--blue);font-size:270px}.pill{border-color:#00116666;font-weight:600} .selection h2 em,.faq h2 em{color:var(--blue)}.steps li>span{color:var(--blue);font-weight:600}.steps li:before{background:var(--orange)}.steps h3{font-weight:600;font-size:17px}.faq-list summary{font-size:14px}.final-cta{background:var(--blue);color:#fff}.final-cta .eyebrow{color:#ffffffc9}.final-cta h2{font-size:clamp(45px,6.2vw,92px);font-weight:800;letter-spacing:-4px}.final-cta em{color:var(--orange)}.final-cta .button{background:#fff;color:var(--blue)}.final-cta .button:hover{background:var(--orange);color:var(--navy)} footer{background:#fff}footer .logo img{width:140px}.assembly-copy h2{font-weight:800;font-size:clamp(38px,4.05vw,63px);letter-spacing:-2.8px;line-height:1.09}.assembly-copy .eyebrow{color:#ffffffc9}.assembly-copy h2 em{color:var(--orange)}.assembly-panel h3{font-weight:600;font-size:clamp(23px,2vw,30px);letter-spacing:-.8px}.assembly-panel .step-kicker{color:#fff}.assembly-panel p{font-size:11px}.assembly-subtitle{font-size:12px}.assembly-word{font-weight:900;color:#ffffff0a}.assembly-caption{color:#fff;background:var(--navy);font-size:8px;border-color:#ffffff55}.assembly-seal{background:var(--orange);color:var(--navy)}.assembly-counter b{color:#fff}.assembly-track span{background:var(--orange)} .assembly-caption{max-width:45%;white-space:normal;text-align:center;line-height:1.45;left:53%}.motion-toggle{font:inherit;font-size:9px;letter-spacing:.3px;cursor:pointer;border:1px solid #ffffff66;color:#fff;border-radius:30px;padding:7px 12px;background:transparent;display:none}.js .motion-toggle{display:block}.motion-toggle:hover{background:#fff;color:var(--blue)} .motion-paused .journey{height:100svh;min-height:800px}.motion-paused .journey-sticky{position:relative;height:100%;min-height:800px}.motion-paused .assembly-bottom>span:last-child{font-size:0}.motion-paused .assembly-bottom>span:last-child:after{content:'EXPLORE PELOS BOTÕES';font-size:8px} @media(max-width:1100px){.header{gap:20px}.header nav{gap:17px}.hero h1{font-size:83px;letter-spacing:-4.5px}.hero-art{height:590px}.hero-description{font-size:13px}.hero-art .hero-food .assembly-plane{top:25px}.assembly-copy h2{font-size:46px}} @media(max-width:760px){.header{height:80px;padding:0 5%;gap:9px}.header .logo img{width:120px}.header .button.small{font-size:10px;padding:10px 13px;gap:17px;min-height:42px}.header nav{top:80px}.menu{color:var(--blue)}.hero{padding:35px 6% 65px;min-height:1040px}.hero h1{font-size:clamp(58px,12.7vw,90px);letter-spacing:-3.5px;margin-top:25px;line-height:1.06}.hero-description{font-size:12px;line-height:1.8;margin-top:28px}.hero .eyebrow{font-size:8px;letter-spacing:.6px}.hero .eyebrow b{font-size:11px}.hero-art{height:480px;margin-top:40px}.hero-art:before{inset:0 -10% 0 -8%;border-radius:50% 48% 45% 50%}.hero-art .hero-food .assembly-plane{width:123%;left:-12%;top:20px}.hero-art .sticker{width:94px;height:94px;font-size:10px;right:-1%;top:0}.hero-art .sticker b{font-size:14px}.hero-art .ingredient-tag{bottom:0;left:0;font-size:9px;padding:10px 12px}.hero-art .spark{font-size:42px;right:0;bottom:60px}.hero-art .orbit{width:310px;left:50%}.brands{gap:13px}.brands .bk{font-size:16px}.brands .popeyes{font-size:17px}.brands .starbucks{font-size:9px}.brands .subway{font-size:18px}h2{font-size:34px;letter-spacing:-1.5px}.profile h2{font-size:35px}.program-text h3{font-size:28px}.benefit-feature h3{font-size:48px}.benefit-card h3{font-size:15px}.benefit-card p{font-size:10px}.league h2{font-size:35px}.league-symbol{font-size:160px}.final-cta h2{font-size:44px;letter-spacing:-2px}.final-cta>p:last-child{font-size:7px}.assembly-copy h2{font-size:31px;letter-spacing:-1.4px;top:64px;right:6%}.assembly-stage{top:44%;width:min(92vw,46svh)}.assembly-panel h3{font-size:23px;letter-spacing:-.6px}.assembly-panel p{font-size:10px}.assembly-panel{bottom:50px;min-height:145px}.assembly-copy .journey-tabs{bottom:220px;gap:7px}.assembly-skip{bottom:223px;font-size:7px;gap:5px}.assembly-copy .journey-tabs button{width:29px;height:29px}.assembly-topline{font-size:6px;letter-spacing:.6px}.motion-toggle{font-size:7px;padding:6px 9px}.assembly-topline .motion-toggle{margin-left:10px}.assembly-bottom>span:last-child{font-size:6px}.assembly-seal b{font-size:15px}.motion-paused .journey,.motion-paused .journey-sticky{min-height:740px}.assembly-copy h2 br{display:none}} @media(max-width:760px) and (max-height:740px){.assembly-copy h2{font-size:27px;top:52px}.assembly-stage{top:42%;width:min(80vw,43svh)}.assembly-copy .journey-tabs{bottom:186px}.assembly-skip{bottom:189px}.assembly-panel{bottom:35px;min-height:136px}.assembly-panel h3{font-size:21px}.assembly-panel p{font-size:9px}} @media(prefers-reduced-motion:reduce){.motion-enabled .journey{height:500svh}.motion-enabled .journey-sticky{position:sticky;height:100svh;min-height:640px}.motion-enabled .assembly-bottom>span:last-child{font-size:9px}.motion-enabled .assembly-bottom>span:last-child:after{content:none}} @media(prefers-reduced-motion:reduce) and (max-width:760px){.motion-enabled .journey{height:420svh}.motion-enabled .journey-sticky{min-height:680px}.motion-enabled .assembly-bottom>span:last-child{font-size:6px}} /* ========================================================================= 4. PALCO 3D E HERO ========================================================================= */ /* Palco 3D. A tela cobre o quadro do palco; o still do Blender fica atras e so aparece se o WebGL nao subir. */ .burger-webgl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:3;pointer-events:none} .assembly-stage{contain:layout paint} .assembly-stage.has-webgl{left:39%;right:-2%;width:auto;aspect-ratio:1;top:49%} .assembly-stage.has-webgl .assembly-seal{right:13%;bottom:20%} .stage-fallback{position:absolute;left:50%;top:52%;width:88%;max-width:none;transform:translate(-50%,-50%);z-index:2;filter:drop-shadow(0 30px 26px #00093a55);opacity:0;transition:opacity .5s ease} .assembly-stage[data-renderer="fallback"] .stage-fallback,.assembly-stage[data-renderer="loading"] .stage-fallback{opacity:1} .assembly-stage.has-webgl .stage-fallback{opacity:0} /* Altura da secao: cada ingrediente ocupa cerca de 40svh de rolagem, que da uma passada de dedo confortavel por peca sem virar arrasto. */ .journey,.motion-enabled .journey{height:250svh} .journey-sticky{overflow:hidden} .motion-paused .journey{height:100svh;min-height:800px} /* Hero reservado. A secao inteira esta vazia esperando a arte definitiva: a caixa segura a altura para o resto da pagina nao se mexer quando ela chegar. */ .hero{display:block;padding:0;min-height:0;height:auto;max-height:none;background:#fff;overflow:visible} .hero-placeholder{display:flex;align-items:center;justify-content:center;height:calc(100svh - 100px);min-height:520px;max-height:860px;margin:24px 5%;border:1px dashed #c3ccdf;border-radius:12px;background:#fbfcfe} .hero-placeholder span{font-size:12px;letter-spacing:3px;font-weight:700;color:#9aa4bd;text-align:center;padding:0 20px} @media(max-width:760px){.hero-placeholder{height:62svh;min-height:380px;margin:16px 6%}.hero-placeholder span{font-size:10px;letter-spacing:2px}} @media(max-width:760px){ .journey,.motion-enabled .journey{height:268svh} .assembly-stage.has-webgl{left:50%;right:auto;width:112vw;height:50svh;aspect-ratio:auto;top:43%;transform:translate(-50%,-50%)} .assembly-stage.has-webgl .assembly-seal{right:17%;bottom:10%;width:62px;height:62px} .hero-3d{width:128%;left:-14%;object-position:50% 40%} } @media(max-width:760px) and (max-height:740px){.assembly-stage.has-webgl{height:44svh;top:42%}} @media(prefers-reduced-motion:reduce){ .motion-enabled .journey{height:250svh} .hero-food{transform:none!important;opacity:1!important} } @media(prefers-reduced-motion:reduce) and (max-width:760px){.motion-enabled .journey{height:268svh}} /* ========================================================================= 5. LARGURA DO CONTEUDO Uma medida so manda em todas as secoes. O recuo lateral e o maior entre 6% e a sobra dividida em dois: em tela larga a coluna centraliza, em tela estreita ele vira margem percentual sozinho, sem precisar de media query. Trocar a largura do site inteiro e trocar o numero abaixo. Aqui so entra `padding-inline`, nunca o atalho `padding`, senao este bloco sobrescreveria tambem o espacamento vertical definido la em cima. ========================================================================= */ :root{--largura:1040px;--recuo:max(6%,calc((100% - var(--largura)) / 2))} .header, .section, .brands, .journey-sticky, .final-cta, footer{max-width:none;padding-inline:var(--recuo)} .hero{max-width:none} .hero-placeholder{margin-inline:var(--recuo)} /* Filhos posicionados da jornada: a porcentagem deles resolve contra a largura inteira da secao, entao precisam do recuo explicito. */ .assembly-topline, .assembly-bottom{left:var(--recuo);right:var(--recuo)} /* O palco encosta na direita da coluna e vaza uns 22px, de proposito: o hamburguer passando da margem e o que dá profundidade à cena. */ .assembly-stage.has-webgl{left:auto;right:calc(var(--recuo) - 22px);width:min(56vw,600px);aspect-ratio:1} @media(max-width:760px){ .assembly-stage.has-webgl{left:50%;right:auto;width:112vw;height:50svh;aspect-ratio:auto;transform:translate(-50%,-50%)} }