/* AGIO — folha única do site. v2 (arquitetura Red Bull, tom vencer/coragem/inspiração). Sem biblioteca. Cantos retos de propósito: passa esporte, não passa fofura. */ :root{ --navy:#13294c; --navy2:#0e2140; --navy-dk:#0a1830; --night:#06101f; --navy-lite:#1d3c68; --mustard:#feb01c; --gold:#e2ad52; --cream:#f6ecd2; --cream-2:#efe3c4; --cream-dim:#b9ad86; --ink:#07142a; --maxw:1240px; /* largura das seções largas */ --read:680px; /* largura de leitura: ~68 caracteres */ --ease:cubic-bezier(.25,1,.5,1); } @font-face{font-family:'Barbaro';src:url('barbaro-pt.ttf') format('truetype');font-display:swap} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:'Bitter',Georgia,serif;background:var(--night);color:var(--cream); line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} img,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3{text-wrap:balance;line-height:1.02} ::selection{background:var(--mustard);color:var(--ink)} :focus-visible{outline:3px solid var(--mustard);outline-offset:3px} .display{font-family:'Barbaro',Georgia,serif;letter-spacing:-.005em} .label{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.14em;text-transform:uppercase} .script{font-family:'Yellowtail',cursive} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .read{max-width:var(--read);margin-inline:auto} /* grão de filme, bem discreto */ body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.055;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ====================================================================== SISTEMA DE MOVIMENTO Regra da casa: o "torto" permanente usa a propriedade `rotate`, e a entrada no scroll usa `transform`. São propriedades separadas, então uma não apaga a outra e dá pra ter as duas no mesmo elemento. ====================================================================== */ /* --- entradas no scroll, em todas as direções -------------------------- só esconde se o JS estiver de pé (a classe .js entra no antes da pintura). Sem isso, um erro de JS deixaria blocos invisíveis pra sempre. */ [data-rv="up"] {--rvt:translateY(42px)} [data-rv="down"] {--rvt:translateY(-34px)} [data-rv="left"] {--rvt:translateX(-58px)} [data-rv="right"]{--rvt:translateX(58px)} [data-rv="zoom"] {--rvt:scale(.88)} [data-rv="wide"] {--rvt:scale(1.1)} [data-rv="tilt"] {--rvt:translateY(30px) rotate(-5deg)} [data-rv="tiltr"]{--rvt:translateY(30px) rotate(5deg)} [data-rv="flip"] {--rvt:perspective(900px) rotateX(24deg) translateY(26px)} .js .rise,.js .rv{opacity:0;transform:var(--rvt,translateY(30px)); transition:opacity .78s var(--ease),transform .78s var(--ease)} .rise.in,.rv.in{opacity:1;--rvt:none} .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s} .d4{transition-delay:.32s}.d5{transition-delay:.40s}.d6{transition-delay:.48s} /* --- torto permanente --- */ .tt {rotate:-1.7deg} .tt2{rotate:1.5deg} .tt3{rotate:-3.2deg} .tt4{rotate:2.6deg} /* --- balanço em loop: nada em sincronia, senão vira metrônomo --- */ @keyframes sway{0%,100%{rotate:var(--a,-1.8deg)}50%{rotate:var(--b,1.4deg)}} .sway{animation:sway var(--t,6.5s) ease-in-out infinite;animation-delay:var(--dl,0s)} .sway:nth-of-type(2n){--t:7.8s;--dl:-1.7s} .sway:nth-of-type(3n){--t:5.6s;--dl:-3.1s} /* pendurado num prego: gira pelo topo */ @keyframes hang{0%,100%{rotate:-2.6deg}50%{rotate:2.4deg}} .hang{transform-origin:50% 4px;animation:hang var(--t,5.4s) ease-in-out infinite;animation-delay:var(--dl,0s)} .hang:nth-child(2){--t:6.6s;--dl:-2.2s} .hang:nth-child(3){--t:4.9s;--dl:-3.6s} .hang:nth-child(4){--t:7.3s;--dl:-1.1s} /* respiro lento, pra coisa grande (lata, selo) */ @keyframes float{0%,100%{translate:0 -6px}50%{translate:0 6px}} .float{animation:float 7s ease-in-out infinite} /* --- reage ao mouse e ao clique --- */ @keyframes wob{0%{transform:rotate(0)}20%{transform:rotate(-3.6deg)}42%{transform:rotate(2.7deg)} 64%{transform:rotate(-1.6deg)}84%{transform:rotate(.8deg)}100%{transform:rotate(0)}} .wob{transition:filter .2s} .wob:hover,.wob:focus-visible{animation:wob .72s ease-out} .wob:active{animation:wob .34s ease-out} @keyframes pop{0%{scale:1}40%{scale:1.06}100%{scale:1}} .pop:hover{animation:pop .45s var(--ease)} @media (prefers-reduced-motion:reduce){ .rise,.rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} .sway,.hang,.float,.wob,.pop{animation:none!important} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ====================================================================== DETALHES DE AGRO — tudo em CSS/SVG, nenhum arquivo novo ====================================================================== */ /* costura de couro */ .stitch{position:relative} .stitch::before{content:"";position:absolute;inset:7px;pointer-events:none; border:1.5px dashed rgba(226,173,82,.55)} .sec--cream .stitch::before,.prod .stitch::before,.px .stitch::before{border-color:rgba(122,86,20,.4)} /* rebite nos cantos */ .rivet::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(circle,var(--gold) 42%,transparent 46%); background-size:7px 7px;background-repeat:no-repeat; background-position:9px 9px,calc(100% - 9px) 9px,9px calc(100% - 9px),calc(100% - 9px) calc(100% - 9px)} /* prego de onde a plaquinha pendura */ .nail{position:relative} .nail::before{content:"";position:absolute;top:-9px;left:50%;translate:-50% 0;width:9px;height:9px; border-radius:50%;background:var(--gold);box-shadow:0 1px 0 rgba(0,0,0,.5) inset,0 2px 5px rgba(0,0,0,.5)} /* arame farpado: divisor fino */ .wire{height:22px;background-repeat:repeat-x;background-position:center;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22'%3E%3Cg stroke='%23e2ad52' stroke-width='1.3' fill='none'%3E%3Cpath d='M0 11h120'/%3E%3Cpath d='M56 4l8 14M64 4l-8 14M52 8l-4-3M52 14l-4 3M68 8l4-3M68 14l4 3'/%3E%3C/g%3E%3C/svg%3E")} /* corda torcida: divisor grosso */ .rope{height:12px;background-repeat:repeat-x;opacity:.75; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='12'%3E%3Cpath d='M0 6c5-7 12-7 17 0s12 7 17 0' stroke='%23a6763a' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")} /* carimbo de ferro de marcar */ .stamp{display:inline-flex;align-items:center;gap:9px;padding:8px 15px; border:2px solid var(--gold);color:var(--mustard);rotate:-2.4deg; font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.2em;font-size:.82rem; box-shadow:2px 2px 0 rgba(226,173,82,.28)} .sec--cream .stamp,.prod .stamp,.px .stamp{border-color:#9a6f12;color:#7a5614;box-shadow:2px 2px 0 rgba(122,86,20,.22)} /* fita adesiva no canto da foto */ .tape{position:relative} .tape::before,.tape::after{content:"";position:absolute;width:76px;height:22px;z-index:3; background:rgba(246,236,210,.28);border-left:1px solid rgba(246,236,210,.16);border-right:1px solid rgba(246,236,210,.16)} .tape::before{top:-9px;left:-16px;rotate:-32deg} .tape::after{bottom:-9px;right:-16px;rotate:-32deg} /* número grande e torto de fundo */ .bignum{position:absolute;font-family:'Barbaro',Georgia,serif;line-height:.8;pointer-events:none; color:rgba(226,173,82,.13);font-size:clamp(7rem,18vw,15rem);rotate:-6deg;z-index:0} /* ---------- topo ---------- */ .nav{position:sticky;top:0;z-index:200;background:rgba(6,16,31,.82);backdrop-filter:blur(14px); border-bottom:1px solid rgba(226,173,82,.24)} .nav-in{max-width:var(--maxw);margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px} .nav-logo img{height:40px;width:auto} .nav-links{display:flex;gap:30px;align-items:center} .nav-links a{font-family:'Bebas Neue',Impact,sans-serif;font-size:1.06rem;letter-spacing:.12em;text-transform:uppercase; color:var(--cream);opacity:.86;transition:opacity .15s,color .15s} .nav-links a:hover{opacity:1;color:var(--mustard)} .nav-cta{color:var(--ink)!important;background:var(--mustard);padding:9px 20px;opacity:1!important} .nav-cta:hover{background:var(--cream);color:var(--ink)!important} @media(max-width:860px){ .nav-links{gap:16px} .nav-links a:not(.nav-cta){display:none} .nav-logo img{height:34px} } /* ====================================================================== EMPILHAMENTO — a seção de baixo SOBE e cobre a de cima, como na Red Bull. Toda seção fica na mesma camada, com fundo sólido, e a regra que decide quem passa por cima de quem é a ordem do HTML. A parte que gruda (.cv) está no FIM deste arquivo, junto com a explicação. ====================================================================== */ /* mesma camada pra TODAS: quem cobre quem é a ordem do HTML, não um número. Com camadas diferentes, uma seção grudada depois de outra grudada ficava por baixo em vez de subir por cima. */ .band,.px,.prova,.cine,.sec,.foot,.wire{position:relative;z-index:1} /* .cv fica no FIM do arquivo: cada seção redeclara position:relative mais abaixo (.px, .pi, .band, .cine...), e com a mesma força quem vem depois ganha. Aqui em cima ela seria apagada. */ /* a borda de cima da seção que sobe: sem essa sombra a troca lê como rolagem normal, e não como uma folha passando por cima da outra */ .px,.prova,.cine,.sec,.band,.foot{box-shadow:0 -24px 54px rgba(3,10,22,.5)} .sec--cream,.px{box-shadow:0 -24px 54px rgba(3,10,22,.28)} /* sem isso o z-index da lata fixa escapa da seção e ela aparece por cima do bloco de baixo (foi exatamente o bug da tabela nutricional) */ .px,.cine{isolation:isolate} /* ---------- capa: carrossel de histórias ---------- Tempos medidos quadro a quadro na gravação da Red Bull (60 fps): texto sai (0 → 340ms) · fotos fazem crossfade (450 → 750ms) · texto novo entra (800ms, 340ms de duração, 70ms de atraso entre cada linha). Nada translada: é fade puro. */ .hx{position:relative;height:92svh;min-height:520px;background:var(--night);overflow:hidden} .hx__stage{position:absolute;inset:0} .hx__slide{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;pointer-events:none} .hx__slide.on{z-index:2;pointer-events:auto} .hx__media{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .30s linear .45s} .hx__slide.on .hx__media{opacity:1} .hx__media img,.hx__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hx__media video{opacity:0;transition:opacity .8s ease;z-index:1} .hx__media video.ready{opacity:1} /* scrim em dois eixos: o pé (onde o texto vive) e a coluna da esquerda. Só o de baixo não basta — as fotos têm rosto claro exatamente atrás do título. */ .hx__media::after{content:"";position:absolute;inset:0;z-index:2;background: linear-gradient(90deg,rgba(3,9,18,.84) 0%,rgba(3,9,18,.58) 26%,rgba(3,9,18,.14) 54%,rgba(3,9,18,0) 72%), linear-gradient(0deg,rgba(3,9,18,.93) 0%,rgba(3,9,18,.7) 26%,rgba(3,9,18,.16) 58%,rgba(3,9,18,.42) 100%)} /* ken burns: a foto ativa cresce devagar durante a exibição */ .js .hx__slide.on .hx__media img,.js .hx__slide.on .hx__media video{animation:hxkb 12s linear forwards} @keyframes hxkb{from{transform:scale(1)}to{transform:scale(1.07)}} .hx__in{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px 104px} .js .hx__in>*{opacity:0;transition:opacity .34s ease-out} .js .hx__slide.on .hx__in>*{opacity:1;transition-delay:calc(.80s + var(--i,0)*.07s)} .hx__kick{display:inline-block;font-family:'Bebas Neue',Impact,sans-serif;font-size:.95rem;letter-spacing:.28em; text-transform:uppercase;color:var(--mustard);margin-bottom:18px;text-shadow:0 2px 10px rgba(0,0,0,.7)} .hx__title{font-size:clamp(2rem,4.7vw,4.05rem);color:var(--cream);max-width:19ch;text-shadow:0 4px 30px rgba(0,0,0,.5)} .hx__sub{margin-top:20px;max-width:52ch;font-size:clamp(1rem,1.5vw,1.14rem);color:#ded3b7;text-shadow:0 2px 14px rgba(0,0,0,.65)} .hx__row{margin-top:30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap} .hx__meta{display:flex;align-items:center;gap:12px;font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.2em; font-size:.84rem;color:#cfc4a6;text-shadow:0 2px 10px rgba(0,0,0,.85)} .hx__meta i{width:4px;height:4px;background:var(--gold);font-style:normal;flex:none} /* paginação: o ativo vira uma barra que enche no tempo do slide */ .hx__pager{position:absolute;left:0;right:0;bottom:30px;z-index:5;max-width:var(--maxw);margin:0 auto; padding:0 24px;display:flex;gap:10px;align-items:center} .hx__dot{width:11px;height:11px;flex:none;padding:0;border:0;border-radius:99px;overflow:hidden;cursor:pointer; background:rgba(246,236,210,.34);transition:width .42s var(--ease),background .42s var(--ease)} .hx__dot:hover{background:rgba(246,236,210,.62)} .hx__dot.on{width:58px;background:rgba(246,236,210,.26)} .hx__dot i{display:block;height:100%;width:0;background:var(--mustard);border-radius:99px} .hx__dot.on i{animation:hxfill 6s linear forwards} @keyframes hxfill{from{width:0}to{width:100%}} .hx--pause .hx__dot.on i{animation-play-state:paused} @media(max-width:760px){ .hx{height:88svh} .hx__in{padding-bottom:118px} .hx__title{max-width:none} .hx__media::after{background:linear-gradient(0deg,rgba(3,9,18,.97) 0%,rgba(3,9,18,.9) 32%, rgba(3,9,18,.62) 62%,rgba(3,9,18,.28) 84%,rgba(3,9,18,.5) 100%)} .hx__row{gap:14px} .hx__row .btn{width:100%;justify-content:center} .hx__pager{bottom:22px} .nav-cta{padding:8px 14px} } @media (prefers-reduced-motion:reduce){ .hx__dot.on i{animation:none;width:100%} .js .hx__slide.on .hx__media img,.js .hx__slide.on .hx__media video{animation:none} } /* sem JS ninguém troca de slide: as três histórias viram uma pilha normal, nada some */ html:not(.js) .hx{height:auto} html:not(.js) .hx__stage{position:static} html:not(.js) .hx__slide{position:relative;min-height:72svh} html:not(.js) .hx__media{opacity:1} html:not(.js) .hx__pager{display:none} /* ---------- botões ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:'Bebas Neue',Impact,sans-serif; font-size:1.16rem;letter-spacing:.1em;text-transform:uppercase;padding:14px 30px;border:2px solid transparent; cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)} .btn:hover{transform:translateY(-2px)} .btn--gold{background:var(--mustard);color:var(--ink)} .btn--gold:hover{background:var(--cream)} .btn--ghost{border-color:rgba(246,236,210,.5);color:var(--cream);background:transparent} .btn--ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)} .btn--ink{background:var(--ink);color:var(--cream)} .btn--ink:hover{background:var(--navy)} /* ---------- títulos de seção ---------- */ .sec{padding:clamp(72px,10vw,132px) 0;position:relative} .sec--cream{background:var(--cream);color:var(--ink)} .sec--navy{background:var(--navy-dk)} .sec--night{background:var(--night)} .eyebrow{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.28em;text-transform:uppercase; font-size:.92rem;color:var(--gold);margin-bottom:16px;display:block} .sec--cream .eyebrow{color:#9a6f12} .sec h2{font-family:'Barbaro',Georgia,serif;font-size:clamp(2rem,4.6vw,3.5rem)} .sec--cream h2{color:var(--ink)} .sec p{font-size:1.06rem} /* ---------- cards de "outras histórias" (páginas de história) ---------- */ .story{position:relative;overflow:hidden;background:var(--navy);isolation:isolate;display:block; border:1px solid rgba(226,173,82,.24)} .story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform 1.1s var(--ease);will-change:transform} .story:hover img{transform:scale(1.06)} .story::after{content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(4,10,20,.94) 4%,rgba(4,10,20,.55) 44%,rgba(4,10,20,.05) 80%)} .story__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 24px} .story__tag{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.2em;font-size:.8rem;color:var(--mustard);display:block;margin-bottom:10px} .story__title{font-family:'Barbaro',Georgia,serif;font-size:clamp(1.35rem,2.4vw,1.9rem);color:var(--cream);margin-bottom:10px} .story__go{display:inline-flex;align-items:center;gap:9px;font-family:'Bebas Neue',Impact,sans-serif; letter-spacing:.14em;font-size:.92rem;color:var(--mustard)} .story__go i{font-style:normal;transition:transform .2s var(--ease)} .story:hover .story__go i{transform:translateX(5px)} /* ---------- dentro do artigo: foto real, pausa da marca e vídeo ---------- */ .art-foto{margin:clamp(38px,5vw,58px) 0;position:relative} /* foto em pé no meio do texto não pode ocupar a tela inteira: trava a altura */ .art-foto img{display:block;max-width:100%;max-height:70svh;width:auto;margin-inline:auto} .art-foto--dupla img{max-height:44svh} .art-foto figcaption{margin-top:10px;font-size:.86rem;color:#6b7383;font-style:italic} .art-foto--dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} @media(max-width:600px){.art-foto--dupla{grid-template-columns:1fr}} /* a pausa da AGIO: parece uma plaquinha pregada no meio do texto, não um banner */ .art-agio{position:relative;margin:clamp(44px,6vw,70px) 0;padding:30px 30px 28px; background:var(--navy-dk);color:var(--cream);rotate:-1.1deg; box-shadow:0 22px 46px -22px rgba(7,20,42,.5)} .art-agio::before{content:"";position:absolute;inset:8px;border:1.5px dashed rgba(226,173,82,.5);pointer-events:none} .art-agio img{width:78px;height:auto;margin-bottom:14px} .art-agio p{font-family:'Barbaro',Georgia,serif!important;font-size:clamp(1.2rem,2.4vw,1.6rem)!important; line-height:1.24!important;color:var(--cream)!important;margin:0!important} .art-agio a{display:inline-flex;align-items:center;gap:9px;margin-top:18px; font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.14em;font-size:.92rem; color:var(--ink);background:var(--mustard);padding:10px 20px} .art-agio a:hover{background:var(--cream)} /* vídeo do YouTube com fachada: só carrega o player depois do clique. Sem isso o YouTube planta cookie e 700 KB de script em quem só veio ler. */ .art-yt{position:relative;margin:clamp(38px,5vw,58px) 0;aspect-ratio:9/16;max-width:420px; background:var(--night);overflow:hidden;cursor:pointer;border:0;padding:0;width:100%;display:block} .art-yt img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .3s,transform .6s var(--ease)} .art-yt:hover img{opacity:1;transform:scale(1.04)} .art-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .art-yt__play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none} .art-yt__play span{width:74px;height:74px;border-radius:50%;background:rgba(254,176,28,.94); display:grid;place-items:center;color:var(--ink);font-size:1.7rem;padding-left:5px; box-shadow:0 10px 34px rgba(0,0,0,.5)} .art-yt__lg{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px;pointer-events:none; font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.14em;font-size:.86rem;color:var(--cream); background:linear-gradient(0deg,rgba(4,10,20,.9),transparent)} /* ---------- produto, ato 1: a lata atravessa a tela ---------- Medido na gravação: a lata encolhe de ~1,42x para 1x nos primeiros 28% da rolagem e só depois viaja da esquerda (28,6% da tela) para a direita (70,6%). É rolagem que comanda, não tempo: o JS só escreve --p (0 a 1) e o CSS faz o resto. */ .prod{background:var(--cream);color:var(--ink)} /* nada de overflow:hidden aqui: isso mata o position:sticky do .px__pin */ .px{position:relative;background:var(--cream);color:var(--ink)} /* a seção da lata é longa e clara; sem textura e sem número grande ela fica vazia */ .px::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:url('pattern-gold.png') repeat;background-size:980px auto;opacity:.05} .px::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(120% 70% at 50% 50%,transparent 45%,rgba(122,86,20,.14) 100%)} /* --tx junta as DUAS viagens da mesma lata: --pt leva pra direita durante os atos, --pv traz de volta pra esquerda quando os ingredientes chegam. O ponto de chegada é o mesmo ponto de partida (28,6% bate com o centro da coluna da esquerda da grade), então basta a volta zerar a ida. */ .px__chao{position:absolute;left:28.6%;top:calc(50% + 30px);z-index:0;pointer-events:none; width:34vw;max-width:420px;height:26px;translate:-50% 30svh; background:radial-gradient(closest-side,rgba(7,20,42,.2),transparent 72%); transform:translateX(calc(42vw * (var(--pt,1) - var(--pv,0))))} .px__pin{position:sticky;top:0;height:100svh;z-index:1} /* o +30px tira a tampa de baixo da barra de navegação, que é fixa e cobriria a lata */ .px__can{position:absolute;top:calc(50% + 30px);left:28.6%;height:60svh;width:auto;max-width:none; --sc:calc(1.42 - .42 * min(1, var(--p,1) / .18)); --tx:calc(42vw * (var(--pt,1) - var(--pv,0))); transform:translate(-50%,-50%) translateX(var(--tx)) scale(var(--sc)); filter:drop-shadow(0 26px 44px rgba(7,20,42,.26));will-change:transform} .px__acts{position:relative;z-index:2;margin-top:-100svh;pointer-events:none} .px__act{min-height:100svh;display:flex;align-items:center;max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative} .px__act .bignum{color:rgba(122,86,20,.13)} .px__act--l .bignum{left:14px;top:12%} .px__act--r .bignum{right:14px;top:12%;rotate:6deg} .px__act--l{justify-content:flex-start} .px__act--r{justify-content:flex-end} .px__box{width:min(38%,430px);pointer-events:auto} .px__act--r .px__box{text-align:right} .px__box h2{font-family:'Barbaro',Georgia,serif;font-size:clamp(2.2rem,5vw,4.2rem);color:var(--ink)} .px__box h3{font-family:'Barbaro',Georgia,serif;font-size:clamp(1.8rem,3.4vw,2.8rem);color:var(--ink);margin-bottom:16px} .px__box p{font-size:clamp(1.05rem,1.6vw,1.24rem);color:#3a4356} /* ---------- produto, ato 2: a lata para à esquerda e os ingredientes sobem por ela ---- A faixa gruda igual à da lata e ocupa 100svh de fluxo, que os cards logo abaixo comem de volta com margin-top:-100svh. O cabeçalho entra com --pv, no mesmo compasso em que a lata volta pra esquerda. */ .px__ingpin{position:sticky;top:0;height:100svh;z-index:1;max-width:var(--maxw);margin:0 auto; padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .px__ing{grid-column:2;opacity:var(--pv,0); transform:translateY(calc(30px * (1 - var(--pv,0))))} .px__ing h2{font-family:'Barbaro',Georgia,serif;font-size:clamp(1.9rem,3.8vw,3.1rem);color:var(--ink);margin-bottom:16px} .px__ing p{color:#3a4356;max-width:36ch;margin-bottom:22px} .pi__size{display:inline-flex;align-items:center;gap:9px;font-family:'Bebas Neue',Impact,sans-serif; letter-spacing:.14em;font-size:.9rem;color:#6b7383;border:1px solid rgba(7,20,42,.18);padding:8px 15px} .pi__size b{color:var(--ink)} .pi__cards{position:relative;z-index:2;margin:-100svh auto 0;max-width:var(--maxw);padding:0 24px;pointer-events:none} .pi__card{position:relative;width:min(46%,392px);margin:0 0 46svh;padding:24px 26px;pointer-events:auto; background:#fffaf0;border:1px solid rgba(7,20,42,.14);box-shadow:0 20px 44px -20px rgba(7,20,42,.34)} .pi__card:first-child{margin-top:26svh} .pi__card:last-child{margin-bottom:24svh} /* o pinolzinho que liga o card à lata, como na Red Bull */ .pi__card::before{content:"";position:absolute;top:-15px;left:34px;width:2px;height:15px;background:var(--mustard)} .pi__card::after{content:"";position:absolute;top:-21px;left:31px;width:8px;height:8px;border-radius:99px;background:var(--mustard)} .pi__n{display:block;font-family:'Bebas Neue',Impact,sans-serif;font-size:.86rem;letter-spacing:.24em;color:#9a6f12;margin-bottom:10px} .pi__card b{display:block;font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.08;color:var(--ink);margin-bottom:10px} .pi__card p{font-size:1rem;color:#3a4356} .pi__fig{display:block;margin-top:16px;padding-top:13px;border-top:2px solid rgba(7,20,42,.14); font-family:'Barbaro',Georgia,serif;font-size:1.7rem;color:var(--ink);line-height:1} .pi__fig em{font-style:normal;font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.14em;font-size:.86rem;color:#6b7383} /* sem JS a lata voadora não faz sentido: vira empilhamento normal, nada some */ html:not(.js) .px__pin{position:static;height:auto;padding:32px 0} html:not(.js) .px__can{position:static;transform:none;margin:0 auto;height:52svh} html:not(.js) .px__acts{margin-top:0} html:not(.js) .px__act{min-height:0;padding:28px 24px} html:not(.js) .px__ingpin{position:static;height:auto;display:block;padding:24px} html:not(.js) .px__ing{opacity:1;transform:none} html:not(.js) .pi__cards{margin-top:0} @media(max-width:900px){ /* no celular a lata não atravessa nada nem gira: aparece uma vez e o texto empilha */ .px__pin{position:static;height:auto;padding:26px 0 6px} .px__can{position:static;transform:none;margin:0 auto;height:46svh} .px__chao{display:none} .px__acts{margin-top:0} .px__act{min-height:0;padding:30px 24px;display:block} .px__box,.px__act--r .px__box{width:100%;text-align:left} /* no celular não existe travessia nem lata parada de lado: o cabeçalho dos ingredientes é só um título normal, na ordem do HTML, antes dos cards. Faixa fixa com miniatura da lata NÃO volta aqui: era ela que fazia parecer que o site tinha duas latas. */ .px__ingpin{position:static;height:auto;display:block;max-width:none;padding:22px 24px 0} .px__ing{opacity:1;transform:none} .px__ing h2{font-size:1.7rem} .px__ing p{margin-bottom:14px} .pi__cards{margin-top:26px} .pi__card{width:100%;margin:0 0 22px} .pi__card:first-child{margin-top:0} .pi__card:last-child{margin-bottom:0} } /* tabela nutricional */ .nut{max-width:var(--maxw);margin:clamp(56px,7vw,84px) auto 0;padding:0 24px} .nut__box{border:2px solid rgba(7,20,42,.18);background:#fffaf0} .nut__hd{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; padding:18px 22px;border-bottom:2px solid rgba(7,20,42,.18)} .nut__hd h3{font-family:'Barbaro',Georgia,serif;font-size:1.4rem;color:var(--ink)} .nut__hd span{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.14em;font-size:.86rem;color:#6b7383} .nut__scroll{overflow-x:auto} table.nut__t{width:100%;border-collapse:collapse;min-width:460px;font-size:.98rem} table.nut__t th,table.nut__t td{padding:11px 22px;text-align:right;color:#2c3446;border-bottom:1px solid rgba(7,20,42,.1)} table.nut__t th:first-child,table.nut__t td:first-child{text-align:left} table.nut__t thead th{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.12em;color:#6b7383;font-size:.86rem} table.nut__t tbody tr.sub td:first-child{padding-left:40px;color:#5a6273} table.nut__t tbody tr.hi td{background:rgba(254,176,28,.16);font-weight:600;color:var(--ink)} .nut__foot{padding:14px 22px;font-size:.88rem;color:#6b7383} /* ====================================================================== FAIXAS DE VÍDEO — respiro com movimento entre as seções de leitura ====================================================================== */ .band{position:relative;overflow:hidden;background:var(--night);isolation:isolate; min-height:var(--h,clamp(260px,42vw,560px));display:flex;align-items:center} .band__bg{position:absolute;inset:0;z-index:0} .band__bg>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .band__bg video{opacity:0;transition:opacity .9s ease} .band__bg video.ready{opacity:1} .band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(3,9,18,.86) 0%,rgba(3,9,18,.5) 42%,rgba(3,9,18,.16) 74%), linear-gradient(0deg,rgba(3,9,18,.7) 0%,rgba(3,9,18,.1) 46%,rgba(3,9,18,.4) 100%)} .band__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(48px,7vw,88px) 24px;width:100%} .band__in h2{font-family:'Barbaro',Georgia,serif;font-size:clamp(1.8rem,5vw,4rem);color:var(--cream); max-width:16ch;text-shadow:0 4px 30px rgba(0,0,0,.6)} .band__in p{margin-top:16px;max-width:44ch;color:#ded3b7;text-shadow:0 2px 14px rgba(0,0,0,.7)} .band--center .band__in{text-align:center} .band--center .band__in h2,.band--center .band__in p{max-width:none;margin-inline:auto} .band--center::after{background:linear-gradient(0deg,rgba(3,9,18,.82) 0%,rgba(3,9,18,.3) 50%,rgba(3,9,18,.72) 100%)} /* ====================================================================== O LANÇAMENTO — a prova. Vídeos verticais reais + números reais. ====================================================================== */ .prova{background:var(--night);padding:clamp(64px,9vw,120px) 0;position:relative;overflow:hidden} .prova__head{max-width:var(--maxw);margin:0 auto clamp(30px,4vw,48px);padding:0 24px; display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap} .prova__head h2{font-family:'Barbaro',Georgia,serif;font-size:clamp(2rem,4.6vw,3.4rem);color:var(--cream)} .prova__grid{max-width:var(--maxw);margin:0 auto;padding:0 24px; display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .pv{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--navy);isolation:isolate; border:1px solid rgba(226,173,82,.28)} .pv:nth-child(odd){rotate:-1.3deg} .pv:nth-child(even){rotate:1.1deg} .pv>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pv video{opacity:0;transition:opacity .8s ease} .pv video.ready{opacity:1} .pv figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 14px; font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.14em;font-size:.84rem;color:var(--cream); background:linear-gradient(0deg,rgba(4,10,20,.92),transparent)} .prova__nums{max-width:var(--maxw);margin:clamp(34px,5vw,56px) auto 0;padding:0 24px; display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(226,173,82,.24)} .pn{background:var(--night);padding:26px 22px;position:relative} .pn b{display:block;font-family:'Barbaro',Georgia,serif;font-size:clamp(2rem,4.4vw,3.2rem); color:var(--mustard);line-height:1} .pn span{display:block;margin-top:8px;font-size:.96rem;color:#a99f84} @media(max-width:900px){.prova__grid{grid-template-columns:1fr 1fr}.prova__nums{grid-template-columns:1fr}} /* ====================================================================== ORIGEM EM CINEMA — uma frase por tela, vídeo por baixo. Zero paredão. ====================================================================== */ .cine{position:relative;background:var(--night)} .cine__pin{position:sticky;top:0;height:100svh;overflow:hidden;z-index:0} .cine__cena{position:absolute;inset:0;opacity:0;transition:opacity .9s ease} .cine__cena.on{opacity:1} .cine__cena>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cine__cena video{opacity:0;transition:opacity .9s ease} .cine__cena video.ready{opacity:1} /* scrim em dois eixos: tem cena clara (sala, festa) atrás de texto creme */ .cine__pin::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background: linear-gradient(90deg,rgba(3,9,18,.88) 0%,rgba(3,9,18,.62) 34%,rgba(3,9,18,.24) 66%,rgba(3,9,18,.34) 100%), linear-gradient(0deg,rgba(3,9,18,.86) 0%,rgba(3,9,18,.34) 46%,rgba(3,9,18,.4) 100%)} /* a fala par fica à direita: inverte o lado escuro */ .cine__pin.esq::after{background: linear-gradient(270deg,rgba(3,9,18,.88) 0%,rgba(3,9,18,.62) 34%,rgba(3,9,18,.24) 66%,rgba(3,9,18,.34) 100%), linear-gradient(0deg,rgba(3,9,18,.86) 0%,rgba(3,9,18,.34) 46%,rgba(3,9,18,.4) 100%)} .cine__falas{position:relative;z-index:3;margin-top:-100svh} .cine__fala{min-height:100svh;display:flex;align-items:center;max-width:var(--maxw);margin:0 auto;padding:0 24px} .cine__fala>div{max-width:min(92%,660px)} .cine__n{display:block;font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.3em;font-size:.86rem; color:var(--mustard);margin-bottom:18px} .cine__fala p{font-family:'Barbaro',Georgia,serif!important;font-size:clamp(1.75rem,4.4vw,3.5rem)!important; line-height:1.06;color:var(--cream);text-shadow:0 4px 34px rgba(0,0,0,.7);text-wrap:balance} .cine__fala small{display:block;margin-top:20px;font-family:'Bitter',Georgia,serif;font-size:1rem; line-height:1.6;color:#ded3b7;max-width:34ch;text-shadow:0 2px 12px rgba(0,0,0,.8)} .cine__fala:nth-child(even){justify-content:flex-end} .cine__fala:nth-child(even)>div{text-align:right} .cine__fala:nth-child(even) small{margin-left:auto} @media(max-width:760px){ .cine__fala,.cine__fala:nth-child(even){justify-content:flex-start} .cine__fala:nth-child(even)>div{text-align:left} .cine__fala:nth-child(even) small{margin-left:0} .cine__fala>div{max-width:none} } /* ---------- tabela nutricional: agora dobrada, ocupa 1 linha ---------- */ .nut__box>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between; align-items:center;gap:16px;padding:18px 22px;font-family:'Bebas Neue',Impact,sans-serif; letter-spacing:.16em;font-size:1rem;color:var(--ink)} .nut__box>summary::-webkit-details-marker{display:none} .nut__box>summary i{font-style:normal;font-size:1.3rem;transition:rotate .25s var(--ease);color:#9a6f12} .nut__box[open]>summary i{rotate:180deg} .nut__box[open]>summary{border-bottom:2px solid rgba(7,20,42,.18)} /* ---------- onde comprar ---------- */ .pdv{background:var(--navy-dk);position:relative;overflow:hidden} .pdv__pattern{position:absolute;inset:0;background:url('pattern-gold.png') repeat;background-size:420px auto;opacity:.16;pointer-events:none} .pdv__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 24px;text-align:center} .pdv h2{margin-bottom:14px} .pdv__sub{color:#c9bd9c;max-width:46ch;margin:0 auto 30px} /* o ponto de venda aparece SEM clicar em nada; o botão só acrescenta a distância */ .pdv__lista{margin:32px auto 0;max-width:660px;display:grid;gap:14px;text-align:left} .pdv__acao{margin-top:28px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .pdv__msg{margin-top:16px;color:#c9bd9c;font-size:.95rem;min-height:1.2em} .pdv__results{margin-top:34px;display:grid;gap:14px;max-width:640px;margin-inline:auto;text-align:left} .pdv-card{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px; background:rgba(246,236,210,.055);border:1px solid rgba(226,173,82,.3)} .pdv-card__name{font-family:'Barbaro',Georgia,serif;font-size:1.3rem;color:var(--cream)} .pdv-card__city{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.12em;font-size:.86rem;color:var(--gold);margin-top:3px} .pdv-card__type{font-size:.92rem;color:#a99f84;margin-top:6px} .pdv-route{display:inline-block;margin-top:14px;font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.12em; font-size:.9rem;color:var(--ink);background:var(--mustard);padding:8px 16px} .pdv-route:hover{background:var(--cream)} .pdv-card__dist{font-family:'Barbaro',Georgia,serif;font-size:1.7rem;color:var(--mustard);text-align:right;line-height:1;flex:none} .pdv-card__dist small{display:block;font-family:'Bebas Neue',Impact,sans-serif;font-size:.68rem;letter-spacing:.16em;color:#a99f84;margin-top:5px} .pdv-fallback{padding:26px;border:1px dashed rgba(226,173,82,.42);text-align:center} .pdv-fallback p{color:var(--cream);margin-bottom:16px} /* ---------- formulário ---------- */ .form__grid{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start} .form__side p{color:#c9bd9c;margin-top:16px;max-width:34ch} .form__note{margin-top:26px;padding:18px 20px;border-left:3px solid var(--gold);background:rgba(246,236,210,.05)} .form__note strong{color:var(--mustard);display:block;font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.14em;margin-bottom:6px} .form__note span{font-size:.96rem;color:#c9bd9c} form.lead{display:grid;gap:16px} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .f{display:flex;flex-direction:column;gap:7px} .f label{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.14em;font-size:.86rem;color:var(--gold)} .f input,.f select,.f textarea{background:rgba(246,236,210,.06);border:1px solid rgba(246,236,210,.22); color:var(--cream);padding:13px 15px;font-family:'Bitter',Georgia,serif;font-size:1rem;width:100%} .f input:focus,.f select:focus,.f textarea:focus{border-color:var(--mustard);background:rgba(246,236,210,.1)} .f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat} .f select option{background:var(--navy-dk);color:var(--cream)} .f textarea{resize:vertical;min-height:96px} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form__msg{font-size:.98rem;padding:14px 16px;display:none} .form__msg.ok{display:block;background:rgba(254,176,28,.14);border-left:3px solid var(--mustard);color:var(--cream)} .form__msg.err{display:block;background:rgba(210,80,60,.14);border-left:3px solid #d2503c;color:#f3d9d3} @media(max-width:860px){.form__grid{grid-template-columns:1fr;gap:34px}.f-row{grid-template-columns:1fr}} /* faixa de eventos */ .evt{border-top:1px solid rgba(226,173,82,.22);border-bottom:1px solid rgba(226,173,82,.22); background:rgba(246,236,210,.03);padding:30px 0} .evt__in{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .evt__in p{color:#c9bd9c} .evt__in strong{color:var(--cream);font-family:'Barbaro',Georgia,serif;font-size:1.25rem;display:block;margin-bottom:4px} /* ---------- sobre ---------- */ /* precisa ser `.sec p.about__lead`: `.sec p` acima é mais forte que a classe sozinha e estava achatando esta frase, que é a tese da marca */ .sec p.about__lead,.sec h1.about__lead{font-size:clamp(1.7rem,4.2vw,3.1rem);line-height:1.12;color:var(--ink); font-family:'Barbaro',Georgia,serif;margin-bottom:30px} .sec--cream .about__body p{color:#3a4356;margin-bottom:18px} .symbols{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:clamp(44px,6vw,72px) 0 0} .sym{position:relative;background:#fffaf0;padding:34px 26px 30px;border:1px solid rgba(122,86,20,.3); box-shadow:0 18px 40px -22px rgba(7,20,42,.4)} .sym::before{content:"";position:absolute;inset:7px;border:1.5px dashed rgba(122,86,20,.34);pointer-events:none} .sym:nth-child(1){rotate:-1.8deg}.sym:nth-child(2){rotate:1.4deg} .sym:nth-child(3){rotate:-1.1deg}.sym:nth-child(4){rotate:2deg} .sym i{position:absolute;top:-13px;left:50%;translate:-50% 0;width:11px;height:11px;border-radius:50%; background:var(--gold);box-shadow:0 1px 0 rgba(0,0,0,.35) inset,0 3px 7px rgba(7,20,42,.4)} .sym b{font-family:'Barbaro',Georgia,serif;font-size:1.5rem;color:var(--ink);display:block;margin-bottom:10px} .sym span{font-size:.99rem;color:#3a4356;display:block} @media(max-width:820px){.symbols{grid-template-columns:1fr 1fr}} @media(max-width:480px){.symbols{grid-template-columns:1fr}} .creed{background:var(--ink);color:var(--cream);text-align:center;padding:clamp(70px,9vw,110px) 24px} .creed p{font-family:'Barbaro',Georgia,serif;font-size:clamp(1.5rem,3.6vw,2.7rem);max-width:20ch;margin:0 auto;line-height:1.12} .creed span{display:block;margin-top:22px;font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.34em;color:var(--mustard);font-size:1rem} /* ---------- rodapé ---------- */ .foot{background:var(--night);border-top:1px solid rgba(226,173,82,.2);padding:56px 0 40px} .foot__in{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start} .foot img{height:52px;width:auto;margin-bottom:14px} .foot p{font-size:.94rem;color:#8d8570;max-width:34ch} .foot__links{display:flex;flex-direction:column;gap:10px} .foot__links a{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.14em;font-size:.96rem;color:var(--cream);opacity:.82} .foot__links a:hover{color:var(--mustard);opacity:1} .foot__legal{max-width:var(--maxw);margin:40px auto 0;padding:20px 24px 0;border-top:1px solid rgba(246,236,210,.1); font-size:.82rem;color:#6f6a5b;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} /* aviso jurídico: pequeno, mas onde qualquer um encontra */ .foot__aviso{max-width:var(--maxw);margin:14px auto 0;padding:0 24px;font-size:.76rem;line-height:1.55;color:#5f5b4f} /* ---------- página de história ---------- */ .art-hero{position:relative;min-height:82svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--navy)} .art-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%} /* escurecimento do pé. Calibrado pelo pior caso: foto clara (neon dourado) atrás de texto creme. Se afrouxar isso, o subtítulo some no celular. */ .art-hero::before{content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(4,10,20,.97) 0%,rgba(4,10,20,.95) 24%,rgba(4,10,20,.84) 44%, rgba(4,10,20,.5) 64%,rgba(4,10,20,.2) 84%,rgba(4,10,20,.55) 100%)} .art-hero__in{position:relative;z-index:2;max-width:960px;margin:0 auto;width:100%;padding:0 24px 64px} .art-hero h1{font-family:'Barbaro',Georgia,serif;font-size:clamp(2rem,5vw,4rem);color:var(--cream);max-width:20ch; text-shadow:0 4px 30px rgba(0,0,0,.5)} .art-hero__sub{margin-top:20px;max-width:52ch;color:#ddd2b6;font-size:clamp(1rem,1.5vw,1.14rem);text-shadow:0 2px 12px rgba(0,0,0,.6)} .art-meta{margin-top:24px;display:flex;gap:14px;align-items:center;flex-wrap:wrap; font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.2em;font-size:.84rem;color:var(--mustard); text-shadow:0 2px 10px rgba(0,0,0,.8)} .art-meta i{width:4px;height:4px;background:var(--gold);font-style:normal;flex:none} @media(max-width:520px){.art-meta{gap:6px 14px}.art-meta i{display:none}} /* o bloco de leitura sobe por cima da foto, como na Red Bull */ .art-body{background:var(--cream);color:#2b3245;position:relative;z-index:3;margin-top:-46px; padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,110px)} .art-body .read>*{margin-bottom:24px} /* a linha de resumo: fica aqui e não sobre a foto, senão não se lê no celular */ .art-deck{font-family:'Barbaro',Georgia,serif;font-size:clamp(1.25rem,2.6vw,1.75rem)!important; line-height:1.24;color:var(--ink)!important;margin-bottom:34px!important; padding-bottom:28px;border-bottom:2px solid rgba(7,20,42,.14)} .art-body p{font-size:1.12rem;line-height:1.78;color:#333b4d} .art-body h2{font-family:'Barbaro',Georgia,serif;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--ink); margin-top:clamp(44px,5vw,64px);margin-bottom:6px} .art-body blockquote{border-left:4px solid var(--mustard);padding:6px 0 6px 24px;margin:34px 0; font-family:'Barbaro',Georgia,serif;font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.28;color:var(--ink)} .art-body strong{color:var(--ink)} .art-body figure{margin:clamp(38px,5vw,56px) 0} .art-body figure img{width:100%} .art-body figcaption{margin-top:10px;font-size:.88rem;color:#6b7383} .art-sign{margin-top:clamp(48px,6vw,72px);padding-top:26px;border-top:2px solid rgba(7,20,42,.16); font-family:'Barbaro',Georgia,serif;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--ink)} .art-sign span{display:block;font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.2em;font-size:.86rem;color:#9a6f12;margin-top:10px} /* leitura maior no celular, que é onde isso vai ser lido */ @media(max-width:700px){.art-body p{font-size:1.08rem}.art-hero{min-height:70svh}} .next{background:var(--night);padding:clamp(56px,7vw,90px) 0} .next__grid{max-width:var(--maxw);margin:22px auto 0;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:760px){.next__grid{grid-template-columns:1fr}} .skip{position:absolute;left:-9999px} .skip:focus{left:12px;top:12px;z-index:999;background:var(--mustard);color:var(--ink);padding:10px 16px} /* ====================================================================== EMPILHAMENTO (fim do arquivo de propósito — ver comentário lá em cima) A seção gruda no instante em que a BASE dela encosta na base da tela, e a seguinte sobe por cima e a substitui. É o efeito do site da Red Bull, que lá é feito com JS (GSAP prende a seção com position:fixed e um espaçador come a rolagem). O deslocamento é NEGATIVO e do tamanho que sobra da seção (altura da tela menos a altura dela): é isso que faz a seção longa rolar inteira antes de travar. Como esse número depende da altura da tela, quem escreve --cvt é o JS, e a classe .cv--pin só entra depois da conta. Sem JS, nenhuma seção gruda e o site vira uma rolagem comum — nada some, nada fica cortado. `bottom:0` NÃO serve aqui: sticky também empurra pra cima, então a seção de baixo era puxada pra dentro da tela desde o começo da página. ====================================================================== */ .cv--pin{position:sticky;top:var(--cvt,0)} /* já foi coberta por inteiro: sai da conta do navegador (celular agradece) */ .cv--off{visibility:hidden}