/* Dia do Síndico 26 — Disco Party. Valores extraídos do arquivo do Figma: desktop = quadro 1440 (1rem = 16px em 1440; a página escala em proporção de 1224 a 1920 px); celular = quadro 390 (px fixos). */ :root{ --bg:#08070C; --bg-2:#0D0B13; --bg-foot:#050408; --bg-mapa:#14121C; --magenta:#E42BD0; --pink:#FF2D6E; --grad-btn:linear-gradient(90deg,#FFC21F 0%,#FF2D6E 50%,#B52BEF 100%); --grad-btn-45:linear-gradient(45deg,rgba(255,194,31,.9) 0%,rgba(255,45,110,.9) 50%,rgba(181,43,239,.9) 100%); --grad-line:linear-gradient(90deg,#FFD21F 0%,#FF2D55 50%,#7B2BFF 100%); --grad-rule:linear-gradient(90deg,#FFD21F 0%,#FF7A1A 35%,#FF2D6E 60%,#7B2BFF 100%); --grad-text:linear-gradient(90deg,#FFD21F 0%,#FF2D6E 45%,#B52BEF 100%); --f-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --f-zetta:'Lexend Zetta',system-ui,sans-serif; --f-peta:'Lexend Peta',system-ui,sans-serif; /* PROVISÓRIO: o título do hero é Good Times (fonte comercial, licença web pendente); até lá cai na Lexend Peta */ --f-h1:'Good Times','Lexend Peta',system-ui,sans-serif; --f-caveat:'Caveat','Segoe Script','Bradley Hand',cursive; --ease:cubic-bezier(.2,.7,.2,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:#fff;font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} img,video{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} ul[role=list]{list-style:none;margin:0;padding:0} h1,h2,h3,p,figure{margin:0} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;color:#000;padding:8px 14px;border-radius:8px} .skip:focus{left:8px} :focus-visible{outline:2px solid #fff;outline-offset:3px} [tabindex="-1"]:focus-visible{outline:0} .wrap{width:100%;padding:0 24px;margin:0 auto} /* ---------- tipografia comum ---------- */ .eyebrow{display:flex;align-items:center;width:fit-content;gap:14px;font-family:var(--f-zetta);font-weight:600;font-size:13px;line-height:16px;letter-spacing:1.04px;text-transform:uppercase;color:rgba(255,255,255,.75)} .eyebrow .dash{width:36px;height:2px;border-radius:1px;background:var(--grad-line);flex:none} h2{font-family:var(--f-peta);font-weight:600;font-size:26px;line-height:33px;text-transform:uppercase;color:#fff} .titulo{display:flex;flex-direction:column;gap:24px} .titulo.centro{align-items:center;text-align:center} .titulo.centro .eyebrow{justify-content:center} .titulo.centro h2{width:100%} .texto{display:flex;flex-direction:column;gap:18px} .texto p{font-weight:300;font-size:16px;line-height:26px;color:rgba(255,255,255,.78)} h2 br{display:none} /* ---------- Good Times (comercial, licença pendente): .gt marca todo texto nessa fonte ---------- */ .gt{font-family:var(--f-h1);font-weight:400;text-transform:uppercase} html.sem-goodtimes .gt{font-family:var(--f-peta);font-weight:600;letter-spacing:0} .caveat{font-family:var(--f-caveat);font-weight:400} /* ---------- navegação (compartilhada pelo hero) ---------- */ .nav{position:absolute;left:0;right:0;top:24px;z-index:5} .nav-row{display:flex;align-items:center;justify-content:space-between;height:40px} .brand img{width:131.6px;height:34px} .burger{width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center} .menu{display:none} /* ---------- botões ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;font-family:var(--f-zetta);font-weight:600;font-size:13px;line-height:16px;letter-spacing:.52px;text-transform:uppercase;color:#fff;white-space:nowrap} .btn-cta{position:relative;width:281px;height:56px;padding:20px 40px;background:var(--grad-btn);box-shadow:0 -2px 30.6px rgba(255,45,110,.45);transition:box-shadow .25s var(--ease)} .btn-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.12);opacity:0;transition:opacity .25s var(--ease)} .btn-cta:hover{box-shadow:0 -1px 44px rgba(255,45,110,.75)} .btn-cta:hover::after{opacity:1} .btn-ghost{height:48px;padding:0 24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.25);transition:background .2s,border-color .2s} .btn-ghost:hover,.btn-ghost:focus-visible{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)} .btn-ghost img{width:16px;height:16px} /* ---------- brilho animado (componente Brilho / Animado: aceso → diminuindo → apagado → crescendo) ---------- */ .brilho{position:absolute;display:block;transform-origin:center;animation:twinkle 2.6s var(--ease) infinite;pointer-events:none} .brilho img{width:100%;height:100%} @keyframes twinkle{0%{transform:scale(1);opacity:1}30%{transform:scale(.6);opacity:.6}55%{transform:scale(.28);opacity:.15}80%{transform:scale(.6);opacity:.6}100%{transform:scale(1);opacity:1}} /* ---------- seções: ritmo e carrossel genérico ---------- */ section{padding:72px 0} .carousel{margin-top:40px;padding-bottom:40px} .track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 24px;scroll-padding-left:24px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .track::-webkit-scrollbar{display:none} .slide{flex:0 0 300px;scroll-snap-align:start} .slide img{width:100%;height:375px;object-fit:cover;border-radius:16px} .carousel-controls{display:flex;align-items:center;justify-content:space-between;margin-top:24px;height:56px} .dots{display:flex;gap:10px;align-items:center} .dot-btn{position:relative;width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.28);transition:width .3s var(--ease),background .3s} .dot-btn::before{content:"";position:absolute;inset:-12px -5px} .dot-btn[aria-current=true]{width:28px;background:var(--grad-line)} .arrows{display:flex;gap:12px} .arrow{width:44px;height:44px;border-radius:99px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);transition:opacity .2s} .arrow img{width:22px;height:22px} .arrow.prev img{transform:scaleX(-1)} .arrow.next{background:var(--grad-btn);border-color:transparent} .arrow[disabled],.arrow[aria-disabled="true"]{opacity:.35;cursor:default} /* ---------- player de vídeo (galeria) ---------- */ .player{position:relative;margin-top:40px;width:100%;aspect-ratio:342/192;border-radius:20px;overflow:hidden;background:#000} .player video{cursor:pointer} .player video:focus-visible{outline:2px solid #fff;outline-offset:-4px} .player video{width:100%;height:100%;object-fit:cover;border-radius:14px} .btn-som{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;height:38px;padding:9px 14px 9px 12px;border-radius:999px;background:rgba(14,12,20,.75);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-weight:700;font-size:11px;line-height:14px;letter-spacing:1.1px;text-transform:uppercase;color:#fff} .btn-som img{width:18px;height:18px} .player[data-indisponivel] .btn-som{opacity:.4;cursor:default;pointer-events:none} .video-caption{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:40px;text-align:center} .video-title{font-family:var(--f-zetta);font-weight:600;font-size:13px;line-height:16px;letter-spacing:.78px;text-transform:uppercase;color:#fff} .video-caption .dot{font-style:normal;font-weight:500;font-size:14px;line-height:18px;color:var(--magenta)} .link-yt{font-weight:400;font-size:14px;line-height:18px;color:rgba(255,255,255,.6)} a.link-yt:hover{color:#fff} /* ---------- player de música (fixo) ---------- */ .music{position:fixed;z-index:40;left:50%;bottom:25px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:291px;height:58px;padding:10px 12px 10px 10px;border-radius:999px;background:rgba(14,12,20,.82);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 28px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:border-color .3s,box-shadow .3s} .music[data-on]{border-color:rgba(255,45,110,.55);box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 22px rgba(255,45,110,.35)} .bola{width:36px;height:36px;border-radius:18px;overflow:hidden;flex:none} .bola img{width:36px;height:36px} .music[data-on] .bola img{animation:girar 6s linear infinite} @keyframes girar{to{transform:rotate(360deg)}} .music-text{display:flex;flex-direction:column;gap:3px;width:160px;min-width:0} .music-state{font-weight:700;font-size:9px;line-height:11px;letter-spacing:1.26px;text-transform:uppercase;color:rgba(255,255,255,.5)} .music[data-on] .music-state{color:var(--pink)} .letreiro{display:block;width:160px;height:18px;overflow:hidden} .faixa{display:flex;gap:36px;width:max-content;font-weight:600;font-size:13px;line-height:16px;color:rgba(255,255,255,.55);white-space:nowrap} .music[data-on] .faixa{animation:correr 7s linear infinite} @keyframes correr{to{transform:translateX(calc(-50% - 18px))}} .music-div{width:1px;height:26px;background:rgba(255,255,255,.15)} .music-btn{width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.08);display:grid;place-items:center;flex:none} .music-btn img{width:18px;height:18px} .music[data-on] .music-btn{background:var(--grad-btn)} .music[data-indisponivel] .music-btn{opacity:.4;cursor:default} /* ---------- menu mobile (overlay do Figma) ---------- */ .menu-mobile{position:fixed;inset:0;z-index:50;background:rgba(8,7,12,.97);padding:24px 24px 40px;display:flex;flex-direction:column;gap:40px;overflow-y:auto;-webkit-overflow-scrolling:touch} .menu-mobile[hidden]{display:none} .menu-topo{display:flex;align-items:center;justify-content:space-between;height:40px} .menu-topo img{width:131.6px;height:34px} .menu-mobile-close{width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center} .menu-mobile-close img{width:20px;height:20px} .menu-mobile ul{display:flex;flex-direction:column} .menu-mobile ul a{display:flex;align-items:center;justify-content:space-between;height:64px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--f-zetta);font-weight:600;font-size:18px;line-height:23px;letter-spacing:1.08px;text-transform:uppercase;color:#fff} .menu-mobile ul a img{width:18px;height:18px} .menu-info{margin-top:auto;font-weight:500;font-size:14px;line-height:22px;color:rgba(255,255,255,.6)} /* sem a Good Times instalada (licença pendente), o h1 usa Lexend Peta SemiBold sem tracking */ html.sem-goodtimes h1{font-weight:600;letter-spacing:0;font-size:21px;line-height:1.1} @media (min-width:1024px){html.sem-goodtimes h1{font-size:2.25rem;line-height:2.4375rem}} /* ---------- 404 ---------- */ .erro{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:40px 24px;background:var(--bg)} .erro h1{font-size:clamp(22px,4vw,38px);letter-spacing:.06em;margin:0 0 16px;max-width:none} .erro p{color:rgba(255,255,255,.78);max-width:40ch;margin:0 auto 28px} /* ---------- telas pequenas ---------- */ @media (max-width:345px){.eyebrow{font-size:12px}} /* ---------- tablet: estrutura do celular com coluna limitada ---------- */ @media (min-width:600px) and (max-width:1023px){ .wrap{max-width:600px} .nav-row{max-width:552px;margin:0 auto} .carousel-controls{max-width:600px} .track{padding-left:max(24px,calc((100% - 552px)/2));scroll-padding-left:max(24px,calc((100% - 552px)/2))} } /* ==================================================================== DESKTOP compartilhado (quadro 1440; 1rem = 16px em 1440, escala de 1224 a 1920) ==================================================================== */ @media (min-width:1024px){ html{font-size:clamp(13.6px,1.1111vw,21.333px)} body{font-size:1rem} .wrap{width:min(75rem,calc(100% - 3rem));padding:0} .eyebrow{gap:.875rem;font-size:.8125rem;line-height:1rem;letter-spacing:.065rem} .eyebrow .dash{width:2.25rem;height:.125rem} h2{font-size:2.5rem;line-height:3.1875rem} h2 br{display:inline} .titulo{gap:1.5rem} .titulo.centro{width:56.25rem;margin:0 auto} .titulo.centro .texto{width:47.5rem} .texto{gap:1.125rem} .texto p{font-size:1.125rem;line-height:1.875rem} .nav{top:2.25rem} .nav-row{height:3rem} .brand img{width:10.64rem;height:2.75rem} .burger{display:none} .menu{display:flex;gap:2.25rem} .menu a{display:block;padding:.375rem 0;font-weight:500;font-size:.8125rem;line-height:1rem;letter-spacing:.065rem;text-transform:uppercase;color:rgba(255,255,255,.85);transition:color .2s} .menu a:hover,.menu a:focus-visible{color:var(--pink)} .btn{gap:.75rem;font-size:.8125rem;line-height:1rem;letter-spacing:.0325rem} .btn-cta{width:17.5625rem;height:3.5rem;padding:1.25rem 2.5rem;box-shadow:0 -.125rem 1.9125rem rgba(255,45,110,.45)} .btn-cta:hover{box-shadow:0 -.0625rem 2.75rem rgba(255,45,110,.75)} .btn-ghost{height:3rem;padding:0 1.5rem} .btn-ghost img{width:1rem;height:1rem} section{padding:8.125rem 0} .carousel{margin-top:3.5rem;padding-bottom:0} .track{gap:1.5rem;padding:0 1.5rem 0 max(1.5rem,calc((100% - 75rem)/2));scroll-padding-left:max(1.5rem,calc((100% - 75rem)/2))} .slide{flex-basis:25rem} .slide img{height:31.25rem;border-radius:1rem} .carousel-controls{margin-top:3.5rem;height:3.5rem} .dots{gap:.625rem} .dot-btn{width:.5rem;height:.5rem} .dot-btn[aria-current=true]{width:2rem} .arrows{gap:.75rem} .arrow{width:3.5rem;height:3.5rem} .arrow img{width:1.375rem;height:1.375rem} .player{margin:3.5rem auto 0;width:68.75rem;max-width:100%;aspect-ratio:1100/620;border-radius:1.25rem} .player video{border-radius:1.25rem} .btn-som{right:1.25rem;bottom:1.25rem;gap:.5rem;height:2.375rem;padding:.5625rem .875rem .5625rem .75rem;font-size:.6875rem;line-height:0.875rem;letter-spacing:.06875rem} .btn-som img{width:1.125rem;height:1.125rem} .video-caption{flex-direction:row;justify-content:center;gap:.875rem;margin-top:3.5rem} .video-title{font-size:.8125rem;line-height:1rem;letter-spacing:.04875rem} .video-caption .dot{font-size:.875rem;line-height:1.125rem} .link-yt{font-size:.875rem;line-height:1.125rem} /* player fixo: no quadro, a 24px da direita e 199px da base (1037) */ .music{left:auto;right:1.5rem;bottom:12.4375rem;transform:none;gap:.75rem;width:18.1875rem;height:3.625rem;padding:.625rem .75rem .625rem .625rem;box-shadow:0 .625rem 1.75rem rgba(0,0,0,.45)} .music[data-on]{box-shadow:0 .625rem 1.75rem rgba(0,0,0,.45),0 0 1.375rem rgba(255,45,110,.35)} .bola,.bola img{width:2.25rem;height:2.25rem} .music-text{width:10rem;gap:.1875rem} .music-state{font-size:.5625rem;line-height:0.6875rem;letter-spacing:.07875rem} .letreiro{width:10rem;height:1.125rem} .faixa{gap:2.25rem;font-size:.8125rem;line-height:1rem} .music-div{height:1.625rem} .music-btn{width:2.125rem;height:2.125rem} .music-btn img{width:1.125rem;height:1.125rem} .menu-mobile{display:none} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} } @media (min-width:1024px) and (max-width:1129px){.music{right:auto;left:1rem;bottom:1rem}} /* ======== 01-hero.css ======== */ /* 01 — Banner Principal (Figma V2 nó 231:1521): y 0, 1440 × 1037, fundo IMG bf375db0. Header 120→1320 em y 36 (h 48); nav 716→1320 em y 47.5 (gap 26, links 25 de altura, texto 10/13 ls 1). Coluna de conteúdo 390→1050 (660) em y 150, h 799: lockup 592 × 431 (y 150) → data 46 + 10 + local 27 (y 607) → eyebrow 21 + 10 + frase 21 (y 720) → texto 660 × 60 (y 802) → CTA 271 × 57 (y 892 → 949) → 88 até 1037. Logo Secovi 235, 328, 181 × 80; logo Sicoob 980, 346, 166 × 37; brilho central 220, 120, 1000 × 700. Celular: hero mobile da V1 (390 × 849) com o bloco de data no lugar do título. Classes do base reaproveitadas: .nav .nav-row .brand .burger .menu .wrap .btn .gt .brilho (+ @keyframes twinkle) .sr-only. */ /* ---------- celular (390 × 849) ---------- */ .hero{position:relative;overflow:hidden;background:var(--bg);min-height:849px;isolation:isolate} .hero-bg{position:absolute;inset:0;z-index:-2} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%} .hero-glow{position:absolute;z-index:-1;pointer-events:none;left:calc(50% - 310px);top:-20px;width:620px;height:434px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(123,43,255,.35) 0%,rgba(228,43,208,.08) 55%,rgba(228,43,208,0) 100%)} .hero-content{position:relative;margin:96px 24px 0;padding-bottom:48px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px} .hero-eyebrow{font-family:var(--f-peta);font-weight:400;font-size:12px;line-height:15px;letter-spacing:.72px;text-transform:uppercase;color:rgba(238,238,238,.75)} .hero-brands{display:flex;align-items:center;gap:28px;max-width:100%} .hero-brand{display:block;flex:none} .hero-brand-secovi{width:136px;height:60px} .hero-brand-secovi img{width:100%;height:100%} .hero-brand-sicoob{width:128px;height:28.4px} .hero-brands-sep{width:1px;height:32px;background:rgba(255,255,255,.25);flex:none} /* logos compactos até 369 px: a linha normal (136 + 28 + 1 + 28 + 128 = 321 px) não cabe na coluna antes de 370 px */ @media (max-width:369px){ .hero-brands{gap:16px} .hero-brand-secovi{width:120px;height:53px} .hero-brand-sicoob{width:112px;height:24.9px} } @media (max-width:359px){ .hero-btn{max-width:100%;padding:20px 32px} } .hero-lockup{position:relative;width:342px;max-width:100%;aspect-ratio:592/431} .hero-lockup picture img{width:100%;height:100%} /* brilhos: classe .brilho do base (absoluto + animação twinkle = componente Brilho / Animado); aqui só posição e atraso. Posições dos 6 brilhos no quadro do lockup (592 × 431 → %) */ .hero-b1{left:10.47%;top:22.51%;width:20.27%;height:27.84%;animation-delay:0s} .hero-b2{left:62.16%;top:16.24%;width:13.51%;height:18.56%;animation-delay:-.9s} .hero-b3{left:62.33%;top:45.01%;width:14.86%;height:20.42%;animation-delay:-1.6s} .hero-b4{left:47.8%;top:60.79%;width:18.92%;height:25.99%;animation-delay:-.4s} .hero-b5{left:33.78%;top:66.82%;width:10.81%;height:14.85%;animation-delay:-2.1s} .hero-b6{left:43.75%;top:17.63%;width:9.46%;height:12.99%;animation-delay:-1.2s} /* bloco de data em Good Times: fonte, peso e caixa alta vêm da classe .gt do base (fonte comercial pendente: cai na Lexend Peta 600) */ .hero-data{display:flex;flex-direction:column;align-items:center;gap:6px;color:#D9D9D9;max-width:342px} .hero-data-hora{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;font-size:26px;line-height:27px;letter-spacing:.1em} .hero-data-sep{display:block;width:6px;height:6px;border-radius:50%;background:#D9D9D9;flex:none} .hero-data-local{display:block;font-size:18px;line-height:19px;letter-spacing:.1em} /* sem a Good Times (html.sem-goodtimes), o base zera o tracking do .gt; os filhos acompanham para "05 DEZ • 20H" caber em 272 px */ html.sem-goodtimes .hero-data-hora,html.sem-goodtimes .hero-data-local{letter-spacing:0} .hero .hero-frase{font-family:var(--f-peta);font-weight:700;font-size:12px;line-height:15px;letter-spacing:.72px;text-transform:none;color:rgba(238,238,238,.75);text-shadow:none;white-space:normal;max-width:342px} .hero-lead{font-weight:300;font-size:16px;line-height:26px;color:rgba(238,238,238,.82);max-width:342px} .hero-lead br{display:none} /* CTA: componente "Botão / Primário — Escuro" (fill #03030E, borda 1px interna em gradiente #36243D → #AFAFAF) */ .hero-btn{position:relative;isolation:isolate;width:281px;height:56px;padding:20px 40px;border:1px solid transparent;color:#EEEEEE;background:linear-gradient(#03030E,#03030E) padding-box,linear-gradient(90deg,#36243D 0%,#AFAFAF 100%) border-box;transition:color .25s var(--ease),box-shadow .25s var(--ease)} /* Hover: fill gradiente #FF2D6E → #B52BEF sob #03030E@82%, borda #FF2D6E → #B9A3C8 → #E6E6E6, sombra 0 -2 26 #FF2D6E@20%, texto #FFF */ .hero-btn::before{content:"";position:absolute;inset:-1px;z-index:-1;border:1px solid transparent;border-radius:inherit;background:linear-gradient(rgba(3,3,14,.82),rgba(3,3,14,.82)) padding-box,linear-gradient(90deg,#FF2D6E 0%,#B52BEF 100%) padding-box,linear-gradient(90deg,#FF2D6E 0%,#B9A3C8 50%,#E6E6E6 100%) border-box;opacity:0;transition:opacity .25s var(--ease)} .hero-btn:hover,.hero-btn:focus-visible{color:#fff;box-shadow:0 -2px 26px rgba(255,45,110,.2)} .hero-btn:hover::before,.hero-btn:focus-visible::before{opacity:1} /* ---------- tablet (600–1023): estrutura do celular, como na V1 ---------- */ @media (min-width:600px) and (max-width:1023px){ .hero-content{width:342px;margin-left:auto;margin-right:auto} } /* ---------- desktop (quadro 1440; 1rem = 16px) ---------- */ @media (min-width:1024px){ .hero{min-height:64.8125rem} .hero-glow{left:calc(50% - 31.25rem);top:7.5rem;width:62.5rem;height:43.75rem} /* nav: 7 links, gap 26, Plus Jakarta Sans 600 10/13 ls 1 #EEEEEE; Nav/Link Hover = #FF2D6E */ .nav .hero-menu{gap:1.625rem} .nav .hero-menu a{display:block;padding:.375rem 0;font-family:var(--f-body);font-weight:600;font-size:.625rem;line-height:.8125rem;letter-spacing:.0625rem;text-transform:uppercase;color:#EEEEEE;transition:color .2s} .nav .hero-menu a:hover,.nav .hero-menu a:focus-visible{color:var(--pink)} .hero-content{width:41.25rem;margin:9.375rem auto 0;padding-bottom:5.5rem;gap:1.875rem} /* ordem do Figma: lockup → data → eyebrow → frase → texto → CTA */ .hero-eyebrow{order:1;font-size:1.0625rem;line-height:1.3125rem;letter-spacing:.06375rem} /* marcas soltas, ancoradas pela coluna centrada (390, 150): Secovi 235, 328 e Sicoob 980, 346 */ .hero-brands{display:contents} .hero-brands-sep{display:none} .hero-brand{position:absolute;z-index:3} .hero-brand-secovi{left:-9.6875rem;top:11.125rem;width:11.3125rem;height:5rem} .hero-brand-sicoob{left:36.875rem;top:12.25rem;width:10.375rem;height:2.3125rem} .hero-lockup{width:37rem;margin-bottom:-.25rem} .hero-data{gap:.625rem;max-width:none} .hero-data-hora{gap:1.0625rem;font-size:2.75rem;line-height:2.875rem} .hero-data-sep{width:.625rem;height:.625rem} .hero-data-local{font-size:1.625rem;line-height:1.6875rem} .hero .hero-frase{order:2;margin-top:-1.25rem;font-size:1.0625rem;line-height:1.3125rem;letter-spacing:.06375rem;max-width:none} .hero-lead{order:3;font-size:1.125rem;line-height:1.875rem;max-width:41.25rem} .hero-lead br{display:inline} .hero-btn{order:4;width:16.9375rem;height:3.5625rem;padding:1.25rem 2.5rem;font-size:.75rem;line-height:.9375rem;letter-spacing:.045rem} .hero-btn:hover,.hero-btn:focus-visible{box-shadow:0 -.125rem 1.625rem rgba(255,45,110,.2)} } /* ======== 02-esquenta.css ======== */ /* 02 — Esquenta Jantar do Síndico (Figma 297:1584): y 1078–1895, 1440 × 817, fundo #08070C, padding 110 / 120 / 160 / 120, "Conteúdo" 1096 em x 172 (gap 48), "Título + informações" 1104 (gap 60), bloco de data 822,5 × 65 em x 312,74 / y 1350, retângulo Multiplicar 822 × 80 em y 1335, parágrafos 760 em x 340 / y 1463, destaque y 1707. Inclui o divisor 231:1767 (y 1037–1078: 20 + linha 524 × 1 + 20), por isso a seção começa em y 1037 e o padding superior do desktop é 41 + 110 = 151 (9,4375rem). Celular: coluna 342 do quadro de 390, padding 41 + 72 em cima e 72 embaixo. */ /* ---------- celular (px) ---------- */ .esquenta{position:relative;isolation:isolate;background:var(--bg);padding:113px 0 72px} .esq-divisor{position:absolute;top:20px;left:24px;right:24px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 100%);pointer-events:none} .esq-conteudo{display:flex;flex-direction:column;align-items:center;gap:40px} .esq-titulo{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%} .esq-h2{width:100%;text-align:center;color:transparent;background-image:linear-gradient(97.02deg,#F4F5F8 -24.78%,#B9BCC4 2.63%,#FFFFFF 27.55%,#8C8F99 47.48%,#D6D8DE 74.89%,#9EA1AA 99.81%);-webkit-background-clip:text;background-clip:text} .esq-info{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%} .esq-nome{width:100%;text-align:center;font-size:16px;line-height:16px;letter-spacing:.64px;color:rgba(238,238,238,.78)} .esq-data{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center} .esq-data .gt{font-size:15px;line-height:16px;letter-spacing:.3px;color:#EEEEEE} .esq-data i{display:none;font-family:var(--f-peta);font-style:normal;font-weight:300;color:#FFFFFF} .esq-degrade{position:absolute;inset:-12px 0;background:linear-gradient(90deg,#FF6A24 0%,#FF2D6E 61%,#B52BEF 100%);mix-blend-mode:multiply;pointer-events:none} .esq-corpo{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%} .esq-texto{width:100%;text-align:center} .esq-texto p{color:rgba(238,238,238,.78)} .esq-texto br{display:none} .esq-destaque{font-family:var(--f-peta);font-weight:600;font-size:18px;line-height:25px;letter-spacing:.36px;text-align:center;color:#D9D9D9} /* sem a Good Times (fallback Lexend Peta 600, bem mais larga: 358 px a 16 px) o nome cai para 13 px só no celular (≈ 291 px: 1 linha em telas ≥ 360; em ≤ 345 quebra em 2 linhas sem sobrepor, lh 16). No tablet (coluna 552) os 16 px cabem. */ @media (max-width:599px){html.sem-goodtimes .esq-nome{font-size:13px}} /* ---------- tablet: divisor com a largura da coluna de 600 ---------- */ @media (min-width:600px) and (max-width:1023px){ .esq-divisor{left:calc(50% - 276px);right:auto;width:552px} } /* ---------- desktop (quadro 1440; 1rem = 16px) ---------- */ @media (min-width:1024px){ .esquenta{padding:9.4375rem 0 10rem} .esq-divisor{top:1.25rem;left:calc(50% - 16.375rem);right:auto;width:32.75rem} .esq-conteudo{width:68.5rem;margin:0 auto;align-items:flex-start;gap:3rem} .esq-titulo{width:69rem;gap:3.75rem} .esq-h2{background-image:linear-gradient(97.02deg,#F4F5F8 13.86%,#B9BCC4 27.11%,#FFFFFF 39.16%,#8C8F99 48.8%,#D6D8DE 62.05%,#9EA1AA 74.09%)} .esq-info{width:auto;gap:.625rem} .esq-nome{width:47.5rem;font-size:1.5rem;line-height:1rem;letter-spacing:.06rem} .esq-data{flex-direction:row;justify-content:center;gap:1.5549rem;height:2.4375rem} .esq-data .gt{font-size:1.25rem;line-height:1.3125rem;letter-spacing:.025rem} .esq-data i{display:block;font-size:1.25rem;line-height:1.5625rem} .esq-degrade{inset:-.9375rem 0 0} .esq-corpo{gap:1.75rem} .esq-texto{width:47.5rem} .esq-texto br{display:inline} .esq-destaque{font-size:1.25rem;line-height:1.75rem;letter-spacing:.025rem} } /* recorte na altura das capitulares (leadingTrim CAP_HEIGHT do Figma) onde o navegador souber fazer; a altura fica travada em 1rem (16, valor arredondado do Figma) para o ritmo vertical não depender da fonte */ @supports (text-box-trim:trim-both){ @media (min-width:1024px){ .esq-nome{height:1rem;line-height:2.475rem;text-box-trim:trim-both;text-box-edge:cap alphabetic} } } /* ======== 03-passaporte.css ======== */ /* 03 — Passaporte para Roma (nó 231:1811). Figma desktop: seção em y 1895, 1440 x 1019, fundo #08070C, padding 93 / 120 / 74 / 120, gap 40. Container 1200 (x 120–1320); cabeçalho 900 (x 270–1170, y +93); texto 760 (x 340–1100, y +363); carrossel "Como funciona" 1200 x 255 em y +537 (trilha 203 + controles 44 + 8); caixa Atenção 738 x 113 em x 351 / y +832. Decoração: halftone 1438 x 358 em y −98; brilhos radiais 2038 x 1337 em (−299, 498) e (−317, 565). Celular: quadro de 390, margens 24, coluna 342, padding 72 / 72. 1rem = 16px em 1440 (desktop). */ /* ---------- seção e camadas decorativas (celular) ---------- */ .passaporte{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);padding:72px 0} .pas-halftone,.pas-glow{position:absolute;z-index:-1;pointer-events:none} .pas-halftone{left:calc(50% - 719px);top:-98px;width:1438px;height:358px;max-width:none} .pas-glow{width:552px;height:362px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(181,43,239,.2) 0%,rgba(181,43,239,.05) 55%,rgba(181,43,239,0) 100%)} .pas-glow-1{left:calc(50% - 276px);bottom:-221px} .pas-glow-2{left:calc(50% - 281px);bottom:-239px} /* ---------- cabeçalho: avião + brilhos, título em gradiente, lema, texto ---------- */ .pas-cabecalho{display:flex;flex-direction:column;align-items:center;text-align:center} .pas-aviao{position:relative;width:64px;height:64px} .pas-aviao picture,.pas-aviao picture img{display:block;width:100%;height:100%} .pas-brilho-1{left:58.11%;top:6.76%;width:48.65%;height:48.65%;animation-delay:0s} .pas-brilho-2{left:18.92%;top:44.59%;width:27.03%;height:27.03%;animation-delay:-1.3s} .pas-h2{margin-top:24px;width:100%;background-image:linear-gradient(90deg,#FF6A24 18.11%,#FF2D6E 54.07%,#7B2BFF 77%);-webkit-background-clip:text;background-clip:text;color:transparent} .pas-lema{margin-top:16px;font-family:var(--f-zetta);font-weight:600;font-size:13px;line-height:16px;letter-spacing:.52px;text-transform:uppercase;color:#EEEEEE} .pas-texto{margin-top:24px;width:100%} .pas-texto br{display:none} .passaporte .pas-texto p{color:rgba(238,238,238,.78)} .passaporte .pas-destino{font-family:var(--f-h1);font-weight:400;font-size:18px;line-height:24px;letter-spacing:.72px;text-transform:uppercase} /* ---------- carrossel "Como funciona" (componente 261:1703) ---------- */ .pas-como{margin-top:40px} .pas-como .track{position:relative;margin:0;list-style:none;gap:16px;padding:0 calc((100% - 300px)/2);scroll-padding:0} .pas-como .slide{flex:0 0 300px;min-width:0;scroll-snap-align:center} /* --p (0 a 1) vem do site.js a cada quadro da rolagem (1 = etapa centrada): o destaque acompanha o deslize em vez de trocar só quando a rolagem para (pedido do cliente em 27/10/2026, "mais fluido"); sem JS vale o aria-current da primeira etapa */ .pas-etapa{--p:0;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:var(--p)} /* celular: só a etapa atual aparece (as vizinhas cortadas na borda pareciam erro); setas, pontos e arraste indicam o carrossel */ .pas-etapa[aria-current="step"]{--p:1} /* arrastar com o mouse: sem encaixe enquanto arrasta; ao soltar o site.js leva suave à etapa mais próxima */ .pas-como .track.arrastando{cursor:grabbing;scroll-snap-type:none;user-select:none} @media (hover:hover) and (pointer:fine){.pas-como .track{cursor:grab}} .pas-num{display:inline-block;font-family:var(--f-h1);font-weight:400;font-size:64px;line-height:64px;letter-spacing:0; background-image:linear-gradient(138deg,#F4F5F8 8.3%,#B9BCC4 23.6%,#FFFFFF 37.5%,#8C8F99 48.6%,#D6D8DE 63.9%,#9EA1AA 77.8%);-webkit-background-clip:text;background-clip:text;color:transparent} .pas-etapa p{margin-top:12px;width:100%;font-weight:400;font-size:16px;line-height:26px;color:#EEEEEE} .pas-etapa p br{display:none} .pas-controles{display:flex;align-items:center;justify-content:center;gap:24px;height:44px;margin-top:20px} .pas-como .pas-controles .arrow{width:44px;height:44px;border:0;border-radius:0;background:none} .pas-como .arrow img{width:44px;height:44px} .pas-como .pas-controles .arrow[disabled],.pas-como .pas-controles .arrow[aria-disabled="true"]{opacity:.25} .pas-como .dot-btn{background:rgba(238,238,238,.28)} .pas-como .dot-btn[aria-current=true]{width:32px;background:linear-gradient(90deg,#FF6A24 0%,#FF2D6E 100%)} /* ---------- caixa Atenção ---------- */ .pas-atencao{position:relative;display:flex;align-items:center;gap:16px;margin-top:40px;padding:25px 0 24px;opacity:.51} .pas-atencao::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(238,238,238,.49) 0%,#000000 100%)} .pas-atencao>img{width:32px;height:32px;flex:none} .pas-atencao-texto{min-width:0} .pas-atencao-texto p{font-weight:500;font-size:12px;line-height:18px;letter-spacing:.12px;color:#EEEEEE} .pas-atencao-texto p+p{margin-top:6px;font-weight:300} .pas-atencao-texto strong{font-weight:700} /* ==================================================================== DESKTOP (quadro 1440; 1rem = 16px) ==================================================================== */ @media (min-width:1024px){ .passaporte{padding:5.8125rem 0 4.625rem} .pas-halftone{left:calc(50% - 45rem);top:-6.125rem;width:89.875rem;height:22.375rem} .pas-glow{width:127.375rem;height:83.5625rem;bottom:auto} .pas-glow-1{left:calc(50% - 63.6875rem);top:31.125rem} .pas-glow-2{left:calc(50% - 64.8125rem);top:35.3125rem} .pas-cabecalho{width:56.25rem;margin:0 auto} .pas-aviao{width:4.625rem;height:4.625rem} .pas-h2{margin-top:2.5rem;font-size:1.875rem;line-height:2.375rem} .pas-lema{margin-top:1.25rem;font-size:1rem;line-height:1.25rem;letter-spacing:.04rem} .pas-texto{margin-top:2.5rem;width:47.5rem;gap:1.6875rem} .pas-texto br{display:inline} /* caixa fixa de 27 (1.6875rem) com linha de 39.6 → 40: a linha começa no topo da caixa e o fluxo continua 27 abaixo */ .passaporte .pas-destino{font-size:1.5rem;line-height:2.5rem;letter-spacing:.06rem;margin-bottom:-.8125rem} /* fallback Lexend Peta (licença da Good Times pendente): mais larga, reduz para caber em 1 linha nos 760 */ html.sem-goodtimes .passaporte .pas-destino{font-size:1.25rem;letter-spacing:.05rem} .pas-como{width:min(75rem,calc(100% - 3rem));margin:3.75rem auto 0;padding-bottom:.5rem} .pas-como .track{gap:0;padding:0 calc((100% - 26.875rem)/2);height:12.6875rem;overflow-y:hidden;align-items:flex-start} .pas-como .slide{flex-basis:26.875rem} /* cada etapa tem o tamanho da etapa ativa e encolhe por transform conforme --p: número 6.875 -> 3.5rem (x.5091, desce 3rem), texto 1.125 -> .9375rem (x.8333, sobe .75rem); só opacidade e transform mudam, então nada reflui durante o movimento */ .pas-etapa{opacity:calc(.28 + .72 * var(--p))} .pas-num{font-size:6.875rem;line-height:6.875rem;transform-origin:50% 0;transform:translateY(calc((1 - var(--p)) * 3rem)) scale(calc(.5091 + .4909 * var(--p))); background-image:linear-gradient(138deg,#F4F5F8 8.3%,#B9BCC4 23.6%,#FFFFFF 37.5%,#8C8F99 48.6%,#D6D8DE 63.9%,#9EA1AA 77.8%)} /* largura acompanha --p (19.5rem x .8333 = 16.25rem visual do Figma nas vizinhas -> 30rem na ativa): vizinhas com a quebra estreita do Figma, sem cortar na borda */ .pas-etapa p{margin-top:1rem;width:calc(19.5rem + 10.5rem * var(--p));font-size:1.125rem;line-height:1.75rem;transform-origin:50% 0;transform:translateY(calc((1 - var(--p)) * -.75rem)) scale(calc(.8333 + .1667 * var(--p)))} .pas-etapa p br{display:inline} .pas-etapa:last-child p{width:calc(19.5rem + 14.625rem * var(--p))} .pas-controles{gap:1.5rem;height:2.75rem;margin-top:0} .pas-como .pas-controles .arrow,.pas-como .arrow img{width:2.75rem;height:2.75rem} .pas-como .dot-btn[aria-current=true]{width:2rem} .pas-atencao{width:46.125rem;margin:2.5rem auto 0;justify-content:center;gap:1.25rem;padding:1.6875rem 0 1.625rem} .pas-atencao>img{width:2rem;height:2rem} .pas-atencao-texto{width:39.375rem;flex:none} .pas-atencao-texto p{font-size:.75rem;line-height:1.125rem;letter-spacing:.0075rem} .pas-atencao-texto p+p{margin-top:.375rem} } /* ======== 04-sorteios-evento.css ======== */ /* 04 — Sorteios da Noite + Sobre o Jantar (nó 231:2187). Figma desktop 1440: seção y=2914, h=2073 (termina em 4987), fundo #08070C. #sorteios = frame "Sorteios da Noite" 231:2976: y 2936→4020 (pad-top 22 do pai + pad-bottom 130), coluna 1200 em x=120; cabeça 1070 em x=185: estrela 28 → 96 → h2 30/38 (76) → 20 → intro 760 em x=340 (18/30, 120); → 56 → cards 460 em x=195,5 e 784,5, separador 1×558 em x=719,5, gap 64; foto 460×280 r8 → conteúdo pad-top 32, gap 14 (tag 28, h3 26, 48, 52, 36). #evento = frame "Conteúdo" 231:2188: y 4261→4838 (logo 221×58 → 24 → h2 40/51 de 1022 → 24 → textos 550/550/486 em 18/30), 241 acima (gap do pai) e 149 abaixo (altura fixa). Decoração: brilhos de topo (−317,2471 e −299,2404; 2038×1337), LINHAS (860,4008 e −752,4014) e brilho-solo (−1971/668, 2841; nó 2673×2292, opacidade .24) — detalhes em 04-sorteios-evento.md §1. Celular: quadro 390, coluna 342 (REGRAS-mobile.md). Desktop em rem (1rem = 16px em 1440) a partir de 1024px. */ /* ---------- seções (celular) ---------- */ .sor-evt{position:relative;overflow:hidden;isolation:isolate;background:var(--bg)} /* as duas seções dividem o mesmo fundo (no Figma são um só quadro): os feixes de #evento sobem por trás de #sorteios */ .sorteios,.evento{position:relative;padding:72px 0} .sorteios>.wrap,.evento>.wrap{position:relative;z-index:1} /* brilhos de topo — ELLIPSE 248:3065 e 376:1492 (radial #B52BEF 20% → 5% a 55% → 0%); fator 390/1440 no celular */ .sor-glow{position:absolute;z-index:-1;pointer-events:none;width:552px;height:362px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(181,43,239,.2) 0%,rgba(181,43,239,.05) 55%,rgba(181,43,239,0) 100%)} .sor-glow-1{left:calc(50% - 281px);top:-120px} .sor-glow-2{left:calc(50% - 276px);top:-138px} /* ---------- cabeça dos sorteios ---------- */ .sor-cabeca{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px} .sor-estrela{width:28px;height:28px} .sor-cabeca h2{width:100%;background:linear-gradient(95.4deg,#F4F5F8 13.9%,#B9BCC4 27.1%,#FFFFFF 39.1%,#8C8F99 48.8%,#D6D8DE 62%,#9EA1AA 74%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .sorteios .sor-intro{width:100%} .sorteios .sor-intro p{color:rgba(238,238,238,.78)} .sorteios .sor-intro br{display:none} .sorteios .sor-intro p.sor-intro-data{font-weight:600;color:rgba(238,238,238,.64)} /* ---------- cards de prêmio ---------- */ .sor-premios{display:flex;flex-direction:column;gap:16px;margin-top:40px} .sor-premio{display:flex;flex-direction:column} .sor-foto{display:block;width:100%;aspect-ratio:460/280;border-radius:8px;overflow:hidden} .sor-foto img{width:100%;height:100%;object-fit:cover} .sor-conteudo{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:24px} .sor-tag{display:inline-flex;align-items:center;height:28px;padding:0 14px;border:1px solid transparent;border-radius:999px;background:linear-gradient(#03030E,#03030E) padding-box,linear-gradient(90deg,#36243D 0%,#AFAFAF 100%) border-box;font-family:var(--f-zetta);font-weight:600;font-size:11px;line-height:14px;letter-spacing:1.1px;text-transform:uppercase;color:#EEEEEE;white-space:nowrap} .sor-premio h3{font-family:var(--f-peta);font-weight:600;font-size:18px;line-height:23px;text-transform:uppercase;color:#EEEEEE} .sor-destaque{font-weight:500;font-size:16px;line-height:24px;color:rgba(238,238,238,.9)} .sor-desc{font-weight:300;font-size:16px;line-height:26px;color:rgba(238,238,238,.7)} .sor-nota{font-weight:400;font-size:12px;line-height:18px;letter-spacing:.12px;color:rgba(238,238,238,.5);opacity:.75} .sor-sep{flex:none;width:100%;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 100%)} /* ---------- Sobre o Jantar ---------- */ /* LINHAS (GROUP 248:3121 em 860,4008 e 305:1746 em −752,4014) e brilho-solo (RECTANGLE 365:2129/365:2132, opacidade .24 do fill, blur 17 embutido na imagem) — medidas a partir do topo de #evento (y 4020); fator 390/1440 no celular */ .eve-linhas,.eve-solo{position:absolute;z-index:-2;pointer-events:none;max-width:none} .eve-linhas-dir{left:calc(50% + 38px);top:-3px;width:427px;height:333px} .eve-linhas-esq{left:calc(50% - 399px);top:-2px;width:333px;height:427px} .eve-solo{width:724px;height:621px;top:-310px;opacity:.24} .eve-solo-esq{left:calc(50% - 721px);transform:rotate(1.41deg)} .eve-solo-dir{left:calc(50% - 7px);transform:rotate(178.59deg)} .eve-conteudo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px} .eve-logo{width:170px;height:auto} .eve-titulo{width:100%;background:linear-gradient(90deg,#FF6A24 -7.1%,#FF2D6E 54.7%,#B52BEF 94.1%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .evento .eve-texto{width:100%;align-items:center} .evento .eve-texto p{color:rgba(238,238,238,.78)} .evento .eve-texto .eve-p3{margin-top:22px} /* ==================================================================== DESKTOP (quadro 1440; 1rem = 16px) ==================================================================== */ @media (min-width:1024px){ .sorteios{padding:1.375rem 0 8.125rem} .sor-glow{width:127.375rem;height:83.5625rem} .sor-glow-1{left:calc(50% - 64.8125rem);top:-27.6875rem} .sor-glow-2{left:calc(50% - 63.6875rem);top:-31.875rem} .sor-cabeca{width:66.875rem;margin:0 auto;gap:1.25rem} .sor-estrela{width:1.75rem;height:1.75rem;margin-bottom:4.75rem} .sor-cabeca h2{font-size:1.875rem;line-height:2.375rem} .sorteios .sor-intro{width:47.5rem;gap:1.875rem} .sorteios .sor-intro br{display:inline} .sor-premios{flex-direction:row;justify-content:center;align-items:stretch;gap:4rem;margin-top:3.5rem} .sor-premio{width:28.75rem;flex:none} .sor-foto{border-radius:.5rem} .sor-conteudo{gap:.875rem;padding-top:2rem} .sor-tag{height:1.75rem;padding:0 .875rem;font-size:.6875rem;line-height:.875rem;letter-spacing:.06875rem} .sor-premio h3{font-size:1.25rem;line-height:1.625rem} .sor-destaque{font-size:1rem;line-height:1.5rem} .sor-desc{font-size:1rem;line-height:1.625rem} .sor-nota{font-size:.75rem;line-height:1.125rem;letter-spacing:.0075rem} .sor-sep{width:1px;height:auto;align-self:stretch;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 100%)} .evento{padding:15.0625rem 0 9.3125rem} .eve-linhas-dir{left:calc(50% + 8.75rem);top:-.75rem;width:98.63rem;height:76.9375rem} .eve-linhas-esq{left:calc(50% - 92rem);top:-.375rem;width:76.9375rem;height:98.63rem} .eve-solo{width:167.09rem;height:143.25rem;top:-71.65rem} .eve-solo-esq{left:calc(50% - 166.45rem)} .eve-solo-dir{left:calc(50% - 1.5125rem)} .eve-conteudo{gap:1.5rem} .eve-logo{width:13.8125rem;height:3.625rem} .eve-titulo{width:63.875rem} .evento .eve-texto p{max-width:34.375rem} .evento .eve-texto .eve-p3{max-width:30.375rem;margin-top:2.625rem} } /* ======== 05-atracoes.css ======== */ /* 05 — Atrações Especiais (nó 231:2200). Figma desktop 1440: seção y=4987, h=1169,56 (termina em 6156,56, onde começa a 06); padding 130/120/130/120 (coluna 1200 em x=120), gap 56. Título 900 em x=270, y=5117 (h2 30/38 = 76 + 24 + texto 760 de 90 + 24 + lema 20 = 234). Linha de cards 1200 em x=120, y=5407, h=619,56: card SHOW 460 em x=195,5 · separador 1×619,56 em x=719,5 · card GASTRONOMIA 460 em x=784,5, gap 64; fotos 460×280 (SHOW r=8, GASTRONOMIA sem raio); conteúdo pad-top 32, gap 14; pílulas 28 (pad 6/14 + borda 1 em gradiente, incluída no layout); botão 267,94×45,56 (pad 14/28 + borda 1, gap 10,375, ícone 15,56, texto 12/15 ls .72). Decoração = continuação da 04: LINHAS em (860,4008) e (−752,4014); brilho-solo em (−1871,2841) e (518,2841), op .24, blur 17 embutido na imagem. Padding da seção vem da regra base `section` (72 no celular, 8.125rem = 130 no desktop). Celular: quadro 390, coluna 342 (REGRAS-mobile.md). Desktop em rem (1rem = 16px em 1440) a partir de 1024px. */ /* ---------- celular ---------- */ .atracoes{position:relative;overflow:hidden;background:var(--bg);isolation:isolate} .atracoes .wrap{position:relative;z-index:1} /* linhas (353:1497 em 860,4008 e 353:1506 em −752,4014) e brilho-solo (373:1493/373:1495 em −1871/518, 2841; op .24) — relativas ao topo da seção (y 4987), fator 0,27 no celular */ .atr-linhas,.atr-solo{position:absolute;z-index:0;pointer-events:none;max-width:none} .atr-linhas-h{left:calc(50% + 38px);top:-265px;width:427px;height:333px} .atr-linhas-v{left:calc(50% - 399px);top:-264px;width:333px;height:427px} .atr-solo{width:724px;height:621px;top:-572px;opacity:.24;transform-origin:50% 50%} .atr-solo-esq{left:calc(50% - 694px);transform:rotate(1.41deg)} .atr-solo-dir{left:calc(50% - 47px);transform:rotate(178.59deg)} /* título */ .atracoes h2{color:#EEEEEE} .atracoes .texto p{color:rgba(238,238,238,.78)} .atr-lema{width:fit-content;font-family:var(--f-zetta);font-weight:600;font-size:14px;line-height:18px;letter-spacing:.56px;background:linear-gradient(90deg,#FF6A24 3.85%,#FF2D6E 62.02%,#7B2BFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent} /* cards */ .atr-atracoes{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin-top:40px} .atr-card{display:flex;flex-direction:column} .atr-foto{display:block;width:100%;aspect-ratio:460/280;overflow:hidden} .atr-card-show .atr-foto{border-radius:8px} .atr-foto img{width:100%;height:100%;object-fit:cover} .atr-conteudo{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:24px} .atr-tag,.atr-btn{border:1px solid transparent;background:linear-gradient(#03030E,#03030E) padding-box,linear-gradient(90deg,#36243D 0%,#AFAFAF 100%) border-box} .atr-tag{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;font-family:var(--f-zetta);font-weight:600;font-size:11px;line-height:14px;letter-spacing:1.1px;text-transform:uppercase;color:#EEEEEE;white-space:nowrap} .atr-card h3{font-family:var(--f-peta);font-weight:600;font-size:18px;line-height:23px;text-transform:uppercase;color:#EEEEEE} .atr-destaque{font-weight:500;font-size:16px;line-height:24px;color:rgba(238,238,238,.9)} .atr-desc{font-weight:300;font-size:16px;line-height:26px;color:rgba(238,238,238,.7)} .atr-btn{position:relative;isolation:isolate;gap:10.375px;min-height:48px;padding:14px 28px;font-size:12px;line-height:15px;letter-spacing:.72px;color:#EEEEEE;transition:color .25s var(--ease),box-shadow .25s var(--ease)} .atr-btn img{width:15.5625px;height:15.5625px;flex:none;transition:filter .25s var(--ease)} /* Hover do componente 307:1635: fill #FF2D6E→#B52BEF coberto por #03030E a 82%, borda #FF2D6E→#B9A3C8→#E6E6E6, sombra #FF2D6E 20% (0 −2 26), texto e ícone brancos */ .atr-btn::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;border:1px solid transparent;background:linear-gradient(rgba(3,3,14,.82),rgba(3,3,14,.82)) padding-box,linear-gradient(90deg,#FF2D6E 0%,#B52BEF 100%) padding-box,linear-gradient(90deg,#FF2D6E 0%,#B9A3C8 50%,#E6E6E6 100%) border-box;opacity:0;transition:opacity .25s var(--ease)} .atr-btn:hover,.atr-btn:focus-visible{color:#FFFFFF;box-shadow:0 -2px 26px rgba(255,45,110,.2)} .atr-btn:hover::before,.atr-btn:focus-visible::before{opacity:1} .atr-btn:hover img,.atr-btn:focus-visible img{filter:brightness(1.0714)} .atr-sep{flex:none;width:100%;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 100%)} /* ---------- desktop (1440 → rem) ---------- */ @media (min-width:1024px){ .atr-linhas-h{left:calc(50% + 8.75rem);top:-61.1875rem;width:98.63rem;height:76.9375rem} .atr-linhas-v{left:calc(50% - 92rem);top:-60.8125rem;width:76.9375rem;height:98.63rem} .atr-solo{width:167.09rem;height:143.25rem;top:-132.09rem} .atr-solo-esq{left:calc(50% - 160.2rem)} .atr-solo-dir{left:calc(50% - 10.8875rem)} .atracoes h2{font-size:1.875rem;line-height:2.375rem} .atr-lema{font-size:1rem;line-height:1.25rem;letter-spacing:.04rem} .atr-atracoes{flex-direction:row;justify-content:center;align-items:flex-start;gap:4rem;margin-top:3.5rem} .atr-card{width:28.75rem;flex:none} .atr-card-show .atr-foto{border-radius:.5rem} .atr-conteudo{gap:.875rem;padding-top:2rem} .atr-tag{padding:.375rem .875rem;font-size:.6875rem;line-height:.875rem;letter-spacing:.06875rem} .atr-card h3{font-size:1.25rem;line-height:1.625rem} .atr-destaque{font-size:1rem;line-height:1.5rem} .atr-desc{font-size:1rem;line-height:1.625rem} .atr-btn{gap:.6484rem;min-height:0;padding:.875rem 1.75rem;font-size:.75rem;line-height:.9375rem;letter-spacing:.045rem} .atr-btn img{width:.9727rem;height:.9727rem} .atr-btn:hover,.atr-btn:focus-visible{box-shadow:0 -.125rem 1.625rem rgba(255,45,110,.2)} .atr-sep{width:1px;height:auto;align-self:stretch;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 100%)} } /* ======== 06-trilha.css ======== */ /* ---------- 06 — NOSSA TRILHA SONORA (nó 231:2242) ---------- Figma desktop 1440: seção em y 6156,6, 1440 x 1273; padding 130 em cima/embaixo e 120 nas laterais (container 1200, x 120–1320), auto layout vertical gap 56, fundo #08070C, clip. Conteúdo 120,130 1200 x 1013 (gap 48) = Coluna texto 411,130 618 x 478 (gap 28) + Formulário 448,656 544 x 487 (gap 28). Coluna: bola 683,5,130 73 x 74 · gap 40 · h2 425,244 590 x 76 · gap 24 · texto 414,344 612 x 138 · gap 28 · destaque 497,5,510 445 x 34 · gap 28 · nota 411,572 618 x 36. Formulário: título 543 x 18 · 3 campos 544 x 77 (rótulo 18 + 8 + input 51, só borda inferior 1 px) · botões 544 x 126 (pad-top 8, 53 + 12 + 53). Decoração: halftone 0,-64 1438 x 358 (op .3 no SVG); brilhos radiais 1723 x 1788 em x -1103 e x 697, y 422,4, fill op .88. Celular: quadro 390, coluna 342 (.wrap), padding 72 (base); medidas em 06-trilha.md, seção 4. */ .trilha{position:relative;overflow:hidden;isolation:isolate;background:var(--bg)} .tri-halftone,.tri-glow{position:absolute;z-index:-1;pointer-events:none} .tri-halftone{left:calc(50% - 719px);top:-64px;width:1438px;height:358px;max-width:none} /* VECTOR 305:1724 / 305:1725: radial #B52BEF 20% → 5% a 55% → 0, centro 46,7% / 50,1%, fill a 88%; celular = fator 390/1440 ancorado na base */ .tri-glow{width:862px;height:894px;border-radius:50%;opacity:.88;background:radial-gradient(50% 50% at 46.7% 50.1%,rgba(181,43,239,.2) 0%,rgba(181,43,239,.05) 55%,rgba(181,43,239,0) 100%)} /* ancorados na base: continuam exatamente nos brilhos do topo do Dress Code (mesma elipse dos dois lados da divisa), mesmo quando a seção cresce (mural de músicas) */ .tri-glow-esq{left:calc(50% - 912px);bottom:-452px} .tri-glow-dir{left:calc(50% - 12px);bottom:-452px} /* ---------- coluna de texto ---------- */ .tri-conteudo{display:flex;flex-direction:column;align-items:center;gap:40px} .tri-coluna{display:flex;flex-direction:column;align-items:center;gap:28px;width:100%} .tri-titulo{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%} .tri-icone-titulo{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%} /* ícone: disco-ball 73 x 74 + 2 brilhos (instâncias 378:1508 "Diminuindo" e 378:1516 "Crescendo" do componente Brilho / Animado) */ .tri-icone{position:relative;display:block;width:73px;height:74px} .tri-icone picture{display:block} .tri-icone picture img{width:73px;height:74px} /* vídeo da bola girando: por cima da imagem, recortado em círculo; aparece quando começa a tocar (.girando, posto pelo site.js) */ .tri-bola-video{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)} .tri-icone.girando .tri-bola-video{opacity:1} .tri-brilho-1{left:39.5px;top:-10.6px;width:56px;height:56px;animation-delay:-.78s} .tri-brilho-2{left:-22.5px;top:16.4px;width:52.5px;height:52.5px;animation-delay:-2.08s} /* h2 231:2248: Lexend Peta 600 (26/33 no celular pelo base), fill gradiente #FF6A24 → #FF2D6E @61 → #B52BEF, alças de 26% a 74,7% da caixa */ .trilha h2{width:100%;text-align:center;background:linear-gradient(90deg,#FF6A24 26%,#FF2D6E 55.7%,#B52BEF 74.7%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .tri-texto{width:100%;text-align:center} .trilha .texto p{color:rgba(238,238,238,.78)} .tri-texto br,.tri-nota br{display:none} /* destaque 231:2252: Good Times 400 24/34 → 18/25 no celular (regra 24 → 18) */ .tri-destaque{font-family:var(--f-h1);font-weight:400;font-size:18px;line-height:25px;text-align:center;text-transform:uppercase;color:#EEEEEE} /* nota 231:2253: Plus Jakarta Sans 400 12/18 ls .12, #EEEEEE a 60% */ .tri-nota{width:100%;font-weight:400;font-size:12px;line-height:18px;letter-spacing:.12px;text-align:center;color:rgba(238,238,238,.6)} /* ---------- formulário 231:2254 ---------- */ .tri-form{position:relative;display:flex;flex-direction:column;gap:16px;width:100%} /* título 231:2257: Lexend Zetta 600 14/18 ls 1,12; título → 1º campo = 28 (16 do gap + 12) */ .tri-form-topo{margin-bottom:12px;font-family:var(--f-zetta);font-weight:600;font-size:14px;line-height:18px;letter-spacing:1.12px;text-transform:uppercase;text-align:center;color:#EEEEEE} .tri-campo{display:flex;flex-direction:column;gap:8px} .tri-campo label{font-weight:500;font-size:14px;line-height:18px;color:#EEEEEE} /* input 231:2260: sem fundo, só borda inferior 1 px #EEEEEE a 30%; texto Plus Jakarta Sans 400 16/20; placeholder #EEEEEE a 40% */ .tri-campo input{display:block;width:100%;height:56px;margin:0;padding:0;border:0;border-bottom:1px solid rgba(238,238,238,.3);border-radius:0;background:transparent;font:inherit;font-weight:400;font-size:16px;line-height:20px;color:#EEEEEE;-webkit-appearance:none;appearance:none;transition:border-color .2s var(--ease)} .tri-campo input::placeholder{color:rgba(238,238,238,.4);opacity:1} .tri-campo input:focus{border-bottom-color:#EEEEEE} /* foco do campo: a linha de baixo acende e engrossa (no lugar da moldura branca genérica, que não existe no Figma) */ .tri-campo input:focus-visible{outline:0;border-bottom-color:#EEEEEE;box-shadow:0 1px 0 #EEEEEE} .tri-campo input[aria-invalid="true"]{border-bottom-color:var(--pink)} /* honeypot: fora da tela (não display:none, para os robôs preencherem) */ .tri-form .hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none} /* aviso de privacidade acima do botão de envio (pedido do cliente em 26/10/2026): mesma fonte da .tri-nota, alinhado aos rótulos */ .tri-aviso{margin:0;font-weight:400;font-size:12px;line-height:18px;letter-spacing:.12px;color:rgba(238,238,238,.6)} /* botões escuros (conjuntos 307:1577 e 307:1615, variante Padrão): fill #03030E, borda 1 px gradiente #36243D → #AFAFAF, texto Lexend Zetta 600 12/15 ls .72 #EEEEEE. Hover: gradiente #FF2D6E → #B52BEF sob #03030E a 82%, borda #FF2D6E → #B9A3C8 @50 → #E6E6E6, sombra 0 -2 26 #FF2D6E a 20%, texto #FFFFFF. */ .tri-botoes{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:8px;width:100%} .tri-form .tri-btn{position:relative;isolation:isolate;width:100%;height:56px;padding:0 34px;border:1px solid transparent;background:linear-gradient(#03030E,#03030E) padding-box,linear-gradient(90deg,#36243D 0%,#AFAFAF 100%) border-box;font-size:12px;line-height:15px;letter-spacing:.72px;color:#EEEEEE;transition:color .25s var(--ease),box-shadow .25s var(--ease)} .tri-form .tri-btn::before{content:"";position:absolute;inset:1px;z-index:-1;border-radius:999px;background:linear-gradient(rgba(3,3,14,.82),rgba(3,3,14,.82)),linear-gradient(90deg,#FF2D6E 0%,#B52BEF 100%);opacity:0;transition:opacity .25s var(--ease)} .tri-form .tri-btn:hover,.tri-form .tri-btn:focus-visible{color:#FFFFFF;background:linear-gradient(#03030E,#03030E) padding-box,linear-gradient(90deg,#FF2D6E 0%,#B9A3C8 50%,#E6E6E6 100%) border-box;box-shadow:0 -2px 26px rgba(255,45,110,.2)} .tri-form .tri-btn:hover::before,.tri-form .tri-btn:focus-visible::before{opacity:1} /* Spotify: pad 12/17, ícone 20 + gap 12 + texto; no celular o texto (354 px) quebra em 2 linhas → 12 + 30 + 12 + 2 = 56 */ .tri-form .tri-btn-spotify{height:auto;min-height:56px;padding:12px 17px;white-space:normal;text-align:center} .tri-btn-spotify img{width:20px;height:20px;flex:none} .tri-form[data-enviando] .tri-btn[type="submit"]{opacity:.6;pointer-events:none} /* mensagens de estado (não existem no Figma): o JS central remove o hidden */ .tri-estado{font-weight:500;font-size:14px;line-height:18px;text-align:center;color:#EEEEEE} .tri-estado[data-estado="erro"]{color:var(--pink)} .tri-estado[hidden]{display:none} /* ---------- desktop (1rem = 16px em 1440) ---------- */ @media (min-width:1024px){ .tri-halftone{left:calc(50% - 45rem);top:-4rem;width:89.875rem;height:22.375rem} .tri-glow{width:107.6875rem;height:111.75rem} .tri-glow-esq{left:calc(50% - 113.9375rem);top:auto;bottom:-58.5625rem} .tri-glow-dir{left:calc(50% - 1.4375rem);top:auto;bottom:-58.5625rem} .tri-conteudo{gap:3rem} .tri-coluna{width:38.625rem;gap:1.75rem} .tri-titulo{gap:1.5rem} .tri-icone-titulo{width:36.875rem;gap:2.5rem} .tri-icone{width:4.5625rem;height:4.625rem} .tri-icone picture img{width:4.5625rem;height:4.625rem} .tri-brilho-1{left:2.46875rem;top:-.6625rem;width:3.5rem;height:3.5rem} .tri-brilho-2{left:-1.40625rem;top:1.025rem;width:3.28125rem;height:3.28125rem} .trilha h2{font-size:1.875rem;line-height:2.375rem} .tri-texto{width:38.25rem} .tri-texto br,.tri-nota br{display:inline} .tri-destaque{font-size:1.5rem;line-height:2.125rem} .tri-nota{font-size:.75rem;line-height:1.125rem;letter-spacing:.0075rem} .tri-form{width:34rem;gap:1.75rem} .tri-form-topo{margin-bottom:0;font-size:.875rem;line-height:1.125rem;letter-spacing:.07rem} .tri-campo{gap:.5rem} .tri-campo label{font-size:.875rem;line-height:1.125rem} .tri-campo input{height:3.1875rem;padding:.9375rem 0;font-size:1rem;line-height:1.25rem} .tri-botoes{gap:.75rem;padding-top:.5rem} .tri-aviso{font-size:.75rem;line-height:1.125rem;letter-spacing:.0075rem} .tri-form .tri-btn{height:3.3125rem;padding:0 2.125rem;font-size:.75rem;line-height:.9375rem;letter-spacing:.045rem} .tri-form .tri-btn:hover,.tri-form .tri-btn:focus-visible{box-shadow:0 -.125rem 1.625rem rgba(255,45,110,.2)} .tri-form .tri-btn-spotify{min-height:0;height:3.3125rem;padding:0 1.0625rem;white-space:nowrap} .tri-btn-spotify img{width:1.25rem;height:1.25rem} .tri-estado{font-size:.875rem;line-height:1.125rem} } /* ---------- mural das músicas indicadas (pedido do cliente; fora do Figma, no estilo da seção) ---------- */ .tri-mural{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;margin-top:16px} .tri-mural[hidden]{display:none} .tri-mural-titulo{font-family:var(--f-zetta);font-weight:600;font-size:14px;line-height:18px;letter-spacing:1.12px;text-transform:uppercase;text-align:center;color:#EEEEEE} .tri-mural-sub{font-weight:300;font-size:14px;line-height:20px;text-align:center;color:rgba(238,238,238,.6)} /* lista em flex centralizado: com 1 ou 2 músicas aprovadas os cartões ficam no meio, não encostados à esquerda */ .tri-mural .tri-mural-lista{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%;margin-top:12px} .tri-mural-lista>.tri-musica{flex:0 1 100%} .tri-musica{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 18px;border:1px solid transparent;border-radius:16px;background:linear-gradient(#03030E,#03030E) padding-box,linear-gradient(90deg,#36243D 0%,#AFAFAF 100%) border-box} .tri-musica-ico{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(90deg,#FF2D6E 0%,#B52BEF 100%)} .tri-musica-ico img{width:18px;height:18px} .tri-musica-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .tri-musica-nome{font-family:var(--f-peta);font-weight:600;font-size:14px;line-height:18px;text-transform:uppercase;color:#EEEEEE;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tri-musica-artista{font-weight:400;font-size:14px;line-height:18px;color:rgba(238,238,238,.78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tri-musica-quem{font-weight:300;font-size:12px;line-height:16px;color:rgba(238,238,238,.5)} @keyframes tri-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* mural vivo: selo "ao vivo" com contador, cartões entram em sequência, destaque "tocando agora" passeando pela lista e músicas novas chegando sem recarregar a página (site.js). Tudo parado para quem pede menos movimento. */ .tri-mural-ao-vivo{display:inline-flex;align-items:center;gap:10px;height:32px;margin-bottom:4px;padding:0 14px;border-radius:999px;background:rgba(255,45,110,.08);border:1px solid rgba(255,45,110,.35);font-family:var(--f-zetta);font-weight:600;font-size:12px;line-height:15px;letter-spacing:.72px;text-transform:uppercase;color:#EEEEEE;white-space:nowrap} .tri-pulso{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:#FF2D6E} .tri-pulso::after{content:"";position:absolute;inset:0;border-radius:50%;background:#FF2D6E;animation:tri-pulso 1.6s ease-out infinite} @keyframes tri-pulso{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}} .tri-mural[data-animar] .tri-musica{opacity:0} .tri-mural.ativo .tri-musica{opacity:1;animation:tri-entra .6s var(--ease) calc(var(--i,0) * 90ms) both} .tri-musica{position:relative;transition:box-shadow .5s var(--ease)} .tri-musica.tocando,.tri-musica.nova{background:linear-gradient(#03030E,#03030E) padding-box,linear-gradient(90deg,#FF2D6E 0%,#B52BEF 100%) border-box;box-shadow:0 0 26px rgba(255,45,110,.22)} .tri-eq{display:none;align-items:flex-end;gap:2px;width:16px;height:16px} .tri-eq i{display:block;flex:1;height:100%;border-radius:1px;background:#fff;transform-origin:bottom;animation:tri-eq .9s ease-in-out infinite} .tri-eq i:nth-child(2){animation-delay:-.3s} .tri-eq i:nth-child(3){animation-delay:-.6s} @keyframes tri-eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}} .tri-musica.tocando .tri-musica-ico img{display:none} .tri-musica.tocando .tri-eq{display:flex} .tri-selo{position:absolute;top:-10px;right:14px;height:20px;padding:0 9px;border-radius:999px;background:linear-gradient(90deg,#FF2D6E 0%,#B52BEF 100%);font-family:var(--f-zetta);font-weight:600;font-size:12px;line-height:20px;letter-spacing:.6px;text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none} .tri-musica.tocando .tri-selo,.tri-musica.nova .tri-selo{opacity:1;transform:none} .tri-mural.ativo .tri-musica.nova{animation:tri-nova 1s var(--ease) both} @keyframes tri-nova{0%{opacity:0;transform:translateY(-16px) scale(.96)}60%{opacity:1;transform:translateY(2px) scale(1.01)}100%{opacity:1;transform:none}} /* celular: mostra as 6 mais recentes para a lista não ficar longa demais */ @media (max-width:599px){.tri-musica:nth-child(n+7){display:none}} /* celular: o selo fica curto ("37 músicas indicadas") para caber na coluna */ @media (max-width:599px){.tri-ate{display:none}.tri-mural-ao-vivo{max-width:100%;letter-spacing:.5px}} @media (min-width:600px) and (max-width:1023px){ .tri-mural-lista>.tri-musica{flex-basis:calc((100% - 12px)/2)} } @media (min-width:1024px){ .tri-mural{width:69rem;gap:.75rem;margin-top:1rem} .tri-mural-titulo{font-size:.875rem;line-height:1.125rem;letter-spacing:.07rem} .tri-mural-sub{font-size:.875rem;line-height:1.25rem} .tri-mural .tri-mural-lista{gap:1rem;margin-top:1rem} .tri-mural-lista>.tri-musica{flex-basis:calc((100% - 2rem)/3)} .tri-musica{gap:.875rem;padding:.875rem 1.125rem;border-radius:1rem} .tri-musica-ico{width:2.25rem;height:2.25rem} .tri-musica-ico img{width:1.125rem;height:1.125rem} .tri-musica-txt{gap:.125rem} .tri-musica-nome{font-size:.875rem;line-height:1.125rem} .tri-musica-artista{font-size:.875rem;line-height:1.125rem} .tri-musica-quem{font-size:.75rem;line-height:1rem} .tri-mural-ao-vivo{gap:.625rem;height:2rem;margin-bottom:.25rem;padding:0 .875rem;font-size:.75rem;line-height:.9375rem;letter-spacing:.045rem} .tri-selo{top:-.625rem;right:.875rem;height:1.25rem;padding:0 .5625rem;font-size:.6875rem;line-height:1.25rem} } /* ======== 07-dresscode.css ======== */ /* ---------- 07 — DRESS CODE (Figma 231:2278) ---------- Desktop: quadro 1440, y 7429.6, 1440 x 1039, VER gap 56, pad 28 cima / 120 lados / 130 baixo, fundo #08070C, clip. Separador 458,28 524x1 (wrapper 1200x103) · Título 270,187 900x287 (gap 24: h2 900x76, texto 760x30, selo 505,341 430x49, texto 760x60) · INSPIRE-SE 559,530 322x18 · Inspirações 261.5,604 917x194 (gap 50; Frame 16 408x160 = ♀ 90 + 24 + look 294x160; Frame 15 423x194 = ♂ 80 + 24 + divisor 1x194 + 24 + look 294x160) · Fechamento 418.5,854 603x55. Decoração: halftone 0,624.1 1437.8x357.9 (op .3 no SVG); brilhos radiais 1723x1788 em x=-1103 e x=697, y=-883.6, op .88. Celular: quadro 390, coluna 342 (.wrap), padding 101 (28 + divisor + 72) / 72. y acima = y_figma - 7429.6. */ .dresscode{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);padding:101px 0 72px} .dre-divisor{position:absolute;z-index:0;top:28px;left:24px;right:24px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 100%);pointer-events:none} .dre-halftone{position:absolute;z-index:0;left:calc(50% - 719px);bottom:57px;width:1438px;height:358px;max-width:none;pointer-events:none} .dre-glow{position:absolute;z-index:0;pointer-events:none;width:862px;height:894px;top:-442px;border-radius:50%;opacity:.88;background:radial-gradient(50% 50% at 46.7% 50.1%,rgba(181,43,239,.2) 0%,rgba(181,43,239,.05) 55%,rgba(181,43,239,0) 100%)} .dre-glow-esq{left:calc(50% - 912px)} .dre-glow-dir{left:calc(50% - 12px)} .dre-conteudo{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:40px} /* título: h2 Lexend Peta 600 (26/33 no celular pelo base) com fill gradiente prata #F4F5F8 > #B9BCC4 @22 > #FFF @42 > #8C8F99 @58 > #D6D8DE @80 > #9EA1AA @100, reta (126,1.5)->(666,62.3) em 900x76 = 96.4deg */ .dre-titulo{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%} .dre-h2{width:100%;text-align:center;background:linear-gradient(96.4deg,#F4F5F8 13.9%,#B9BCC4 27.1%,#FFFFFF 39.2%,#8C8F99 48.8%,#D6D8DE 62.1%,#9EA1AA 74.1%);-webkit-background-clip:text;background-clip:text;color:transparent} .dre-texto{width:100%;text-align:center} .dre-titulo .dre-texto p{color:rgba(238,238,238,.78)} .dre-texto br{display:none} /* selo: Good Times (cai na Lexend Peta via --f-h1), HOR gap 14, pad 16/8; textos com o gradiente #FF6A24 > #FF2D6E @61 > #B52BEF cujas alças cobrem o selo inteiro; linhas 430x1 (topo) e 430x2 (logo abaixo da caixa) com 5 paradas */ .dre-selo{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:14px;row-gap:8px;max-width:100%;padding:16px 8px;font-family:var(--f-h1);font-weight:400;text-transform:uppercase;text-align:center} .dre-selo::before,.dre-selo::after{content:"";position:absolute;left:0;right:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,106,36,0) 0%,rgba(255,90,60,.85) 22%,#FF2D6E 61%,rgba(196,44,216,.85) 82%,rgba(181,43,239,0) 100%)} .dre-selo::before{top:0;height:1px} .dre-selo::after{top:100%;height:2px} .dre-selo-rotulo,.dre-selo-valor{display:inline-block;-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap} .dre-selo-rotulo{font-size:12px;line-height:13px;letter-spacing:.96px;background-image:linear-gradient(90deg,#FF6A24 -5.2%,#FF2D6E 201.6%,#B52BEF 333.8%)} .dre-selo-valor{font-size:13px;line-height:14px;letter-spacing:.78px;background-image:linear-gradient(90deg,#FF6A24 -52.1%,#FF2D6E 42.1%,#B52BEF 102.4%)} /* INSPIRE-SE PARA BRILHAR: Lexend Zetta 600 14/18 ls 1.12 #EEEEEE @75% (celular 13/16 ls 1.04) */ .dre-eyebrow{font-family:var(--f-zetta);font-weight:600;font-size:13px;line-height:16px;letter-spacing:1.04px;text-transform:uppercase;text-align:center;color:rgba(238,238,238,.75)} /* inspirações: 2 colunas no desktop (917 fixo, gap 50, alinhado à esquerda) -> 1 coluna no celular (40 entre os looks) */ .dre-looks{display:flex;flex-direction:column;gap:40px;width:100%} .dre-look{display:flex;align-items:center;gap:24px;width:100%} .dre-icone{position:relative;display:block;flex:none} .dre-icone picture{display:block} .dre-icone picture img{width:100%;height:100%} .dre-icone-elas{width:72px;height:72px} .dre-icone-eles{width:64px;height:64px} /* brilhos (4 estados do componente Brilho / Animado) posicionados em relação ao símbolo; desktop x0.8 no celular */ .dre-look-elas .dre-brilho-1{left:42.8px;top:3.5px;width:16px;height:16px;animation-delay:-1.43s} .dre-look-elas .dre-brilho-2{left:10.8px;top:29.9px;width:10.4px;height:10.4px;animation-delay:0s} .dre-look-eles .dre-brilho-1{left:46px;top:-3.7px;width:16px;height:16px;animation-delay:-2.08s} .dre-look-eles .dre-brilho-2{left:-.4px;top:33.1px;width:10.4px;height:10.4px;animation-delay:-.78s} .dre-look-divisor{display:block;flex:none;align-self:stretch;width:1px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 100%)} .dre-look-corpo{display:flex;align-items:center;gap:28px;flex:1 1 auto;min-width:0;padding:24px 0} .dre-look-eles .dre-look-corpo{padding:17px 0} .dre-look-texto{display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-width:0} .dre-look-titulo{font-family:var(--f-zetta);font-weight:600;font-size:13px;line-height:16px;letter-spacing:1.04px;text-transform:uppercase;color:#EEEEEE} .dre-look-texto p{font-weight:300;font-size:16px;line-height:26px;color:rgba(238,238,238,.8)} /* fechamento: linha 1 PJS 300 18/23 #EEEEEE; linha 2 PJS 700 24/32 ls .48 com gradiente #FF6A24 > #FF2D6E @59.1 > #B52BEF */ .dre-fechamento{width:100%;text-align:center;font-weight:300;font-size:16px;line-height:20px;color:#EEEEEE} .dre-fechamento br{display:none} .dre-fechamento-destaque{display:block;font-weight:700;font-size:20px;line-height:27px;letter-spacing:.4px;background:linear-gradient(90deg,#FF6A24 0%,#FF2D6E 59.1%,#B52BEF 100%);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- tablet: divisor com a largura da coluna de 600 ---------- */ @media (min-width:600px) and (max-width:1023px){ .dre-divisor{left:calc(50% - 276px);right:auto;width:552px} } /* ---------- desktop (1rem = 16px em 1440) ---------- */ @media (min-width:1024px){ .dresscode{padding:11.6875rem 0 8.125rem} .dre-divisor{top:1.75rem;left:calc(50% - 16.375rem);right:auto;width:32.75rem} /* pontilhado 4rem acima do Figma (39rem) e com entrada suave: começa antes dos títulos "Para elas / Para eles" (pedido do cliente, 27/10/2026) */ .dre-halftone{left:calc(50% - 45rem);top:35rem;bottom:auto;width:89.875rem;height:22.375rem;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 3.75rem);mask-image:linear-gradient(180deg,transparent 0,#000 3.75rem)} .dre-glow{width:107.6875rem;height:111.75rem;top:-55.225rem} .dre-glow-esq{left:calc(50% - 113.9375rem)} .dre-glow-dir{left:calc(50% - 1.4375rem)} .dre-conteudo{gap:3.5rem} .dre-titulo{width:56.25rem;gap:1.5rem} .dre-h2{font-size:1.875rem;line-height:2.375rem} .dre-texto{width:47.5rem} .dre-texto br{display:inline} .dre-selo{flex-wrap:nowrap;column-gap:.875rem;row-gap:0;padding:1rem .5rem} .dre-selo::after{height:.125rem} .dre-selo-rotulo{font-size:.875rem;line-height:.9375rem;letter-spacing:.07rem} .dre-selo-valor{font-size:1rem;line-height:1.0625rem;letter-spacing:.06rem} .dre-eyebrow{font-size:.875rem;line-height:1.125rem;letter-spacing:.07rem} /* os dois looks com a mesma altura (a do maior, 194): títulos na mesma linha, divisores iguais e ícones centrados entre si (pedido do cliente, 27/10/2026) */ .dre-looks{flex-direction:row;align-items:stretch;justify-content:flex-start;gap:3.125rem;width:57.3125rem} .dre-look{width:auto;gap:1.5rem} .dre-icone-elas{width:5.625rem;height:5.625rem} .dre-icone-eles{width:5rem;height:5rem} .dre-look-elas .dre-brilho-1{left:3.34375rem;top:.275rem;width:1.25rem;height:1.25rem} .dre-look-elas .dre-brilho-2{left:.84375rem;top:2.3375rem;width:.8125rem;height:.8125rem} .dre-look-eles .dre-brilho-1{left:3.59375rem;top:-.2875rem;width:1.25rem;height:1.25rem} .dre-look-eles .dre-brilho-2{left:-.03125rem;top:2.5875rem;width:.8125rem;height:.8125rem} .dre-look-corpo{flex:none;align-self:stretch;align-items:stretch;width:18.375rem;gap:1.75rem;padding:0} .dre-look-eles .dre-look-divisor{align-self:stretch;height:auto} .dre-look-eles .dre-look-corpo{padding:0} .dre-look-texto{align-self:flex-start;gap:.75rem;padding:1.0625rem 0} .dre-look-titulo{font-size:.875rem;line-height:1.125rem;letter-spacing:.07rem} .dre-look-texto p{font-size:1rem;line-height:1.625rem} .dre-fechamento{width:auto;font-size:1.125rem;line-height:1.4375rem} .dre-fechamento br{display:inline} .dre-fechamento-destaque{font-size:1.5rem;line-height:2rem;letter-spacing:.03rem} } /* ======== 08-compartilhe.css ======== */ /* ---------- 08 — COMPARTILHE SEUS MOMENTOS (Figma 231:2369) ---------- Desktop: quadro 1440, y 8468.6, 1440 x 762, pad 130 cima/baixo e 120 lados, fundo #08070C, VER gap 40. Conteúdo 270,130 900x502 > Título 900x226 (h2 76 + 24 + texto 760x126) · hashtag 287,396 866x70 · "Marque" 402,506 636x30 · botão 515.5,576 409x56. Decoração: brilho-solo 1 (IMG 9717aa0d, STRETCH, op .24, blur 17) nó -1238,-45.6 2210.2x1973.2 com a imagem deslocada 61.46,255.92 (2210.8x1973.2); brilho-solo 2 omitido (só 44 px transparentes caem na seção). Sem halftone. Celular: quadro 390, coluna 342 (.wrap), padding 72; brilho x0.5 ancorado ao canto inferior esquerdo. y abaixo = y_figma - 8468.6. */ .compartilhe{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);padding:72px 0} /* brilho-solo 1: = caixa do nó (corta a imagem como no Figma), = imagem deslocada pelo imageTransform */ .com-solo{position:absolute;z-index:0;display:block;overflow:hidden;pointer-events:none;opacity:.24;left:-619px;bottom:-582.8px;width:1105.1px;height:986.6px} .com-solo img{position:absolute;left:30.7px;top:128px;width:1105.4px;height:986.6px;max-width:none} .com-conteudo{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:40px} /* h2: Lexend Peta 600 (26/33 no celular pelo base), fill gradiente "prata" de 6 paradas (alças (0.14,0.02) > (0.74,0.82) na caixa 900x76) */ .com-h2{background:linear-gradient(96.42deg,#F4F5F8 13.89%,#B9BCC4 27.13%,#FFFFFF 39.17%,#8C8F99 48.8%,#D6D8DE 62.04%,#9EA1AA 74.08%);-webkit-background-clip:text;background-clip:text;color:transparent} .com-texto p{color:rgba(238,238,238,.78)} /* hashtag: Lexend Peta 600 56/70 no desktop; 15.46 em de largura (866/56) -> no celular cabe em 1 linha com 21/19/16 px */ .com-hashtag{font-family:var(--f-peta);font-weight:600;font-size:21px;line-height:26px;letter-spacing:0;text-align:center;background:linear-gradient(90deg,#FF7A1A 0%,#FF2D6E 53.85%,#B52BEF 100%);-webkit-background-clip:text;background-clip:text;color:transparent} @media (max-width:389px){.com-hashtag{font-size:19px;line-height:24px}} @media (max-width:359px){.com-hashtag{font-size:16px;line-height:20px}} .com-marque{font-weight:500;font-size:16px;line-height:26px;text-align:center;color:#EEEEEE} /* botão escuro (conjunto 307:1594): fill #03030E, stroke 1px gradiente #36243D > #AFAFAF, texto Lexend Zetta 600 12/15 ls .72 #EEEEEE hover: gradiente #FF2D6E > #B52BEF sob #03030E @82%, stroke #FF2D6E > #B9A3C8 @50 > #E6E6E6, sombra 0 -2 26 #FF2D6E @20%, texto e ícone #FFF */ .compartilhe .com-btn{position:relative;isolation:isolate;height:56px;padding:0 34px;gap:12px;border:1px solid transparent;background:linear-gradient(#03030E,#03030E) padding-box,linear-gradient(90deg,#36243D 0%,#AFAFAF 100%) border-box;font-size:12px;line-height:15px;letter-spacing:.72px;text-align:center;color:#EEEEEE;transition:color .25s var(--ease),box-shadow .25s var(--ease)} .compartilhe .com-btn img{width:18px;height:18px;flex:none;transition:filter .25s var(--ease)} .compartilhe .com-btn::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;border:1px solid transparent;background:linear-gradient(rgba(3,3,14,.82),rgba(3,3,14,.82)) padding-box,linear-gradient(90deg,#FF2D6E 0%,#B52BEF 100%) padding-box,linear-gradient(90deg,#FF2D6E 0%,#B9A3C8 50%,#E6E6E6 100%) border-box;opacity:0;transition:opacity .25s var(--ease)} .compartilhe .com-btn:hover,.compartilhe .com-btn:focus-visible{color:#FFFFFF;box-shadow:0 -2px 26px rgba(255,45,110,.2)} .compartilhe .com-btn:hover::before,.compartilhe .com-btn:focus-visible::before{opacity:1} .compartilhe .com-btn:hover img,.compartilhe .com-btn:focus-visible img{filter:brightness(1.0714)} /* ---------- tablet (600–1023): coluna 600 do .wrap; hashtag maior e botão em 1 linha ---------- */ @media (min-width:600px){.compartilhe .com-btn br{display:none}} @media (min-width:600px) and (max-width:1023px){.com-hashtag{font-size:32px;line-height:40px}} /* ---------- desktop (1rem = 16px em 1440) ---------- */ @media (min-width:1024px){ .compartilhe{padding:8.125rem 0} .com-solo{left:calc(50% - 122.375rem);top:-2.8477rem;bottom:auto;width:138.139rem;height:123.327rem} .com-solo img{left:3.8412rem;top:15.9952rem;width:138.1757rem;height:123.327rem} .com-conteudo{gap:2.5rem} .com-h2{font-size:1.875rem;line-height:2.375rem} .com-hashtag{font-size:3.5rem;line-height:4.375rem} .com-marque{font-size:1.125rem;line-height:1.875rem} .compartilhe .com-btn{height:3.5rem;padding:0 2.125rem;gap:.75rem;font-size:.75rem;line-height:.9375rem;letter-spacing:.045rem} .compartilhe .com-btn img{width:1.125rem;height:1.125rem} .compartilhe .com-btn:hover,.compartilhe .com-btn:focus-visible{box-shadow:0 -.125rem 1.625rem rgba(255,45,110,.2)} } /* ======== 09-galeria.css ======== */ /* 09 — Galeria de Fotos e Vídeos (Figma V2 nó 231:2391): y 9230.6, 1440 × 2297, fundo #08070C. Separador 458→982 em y 0 (1 px, branco 0 → 28% → 0). Título 176→1264 em y 130 (h2 2 linhas 30/38, texto 760: 2 + 1 linhas 18/30). Polaroids (331:1509) 934 × 623 centradas em y 394: cartão 233.5 × 294.2 (#D4D4D4, r 2.34, sombras 0 14 31 #000@50 e 0 1.6 3.1 #000@35), foto 211.8 × 233.5 a 10.85 das bordas, legenda Caveat 20.24/26 #1F1C24@85 centrada 12 abaixo da foto; rotações 6, −3, 3, −5, 4, −6°. Vídeos (231:2412) em y 1073, 1224 de altura: estrela 28 em +64.6, título em +214, player 1100 × 620 em +397, legenda em +1073, base 130. Decoração: linhas (860,120 e −752,1080), dois brilho-solo (op .24, blur), elipse radial roxa (−197,96) e elipse do vídeo (−459,+613). */ .gal{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);padding:72px 0 0} .gal-decor{position:absolute;inset:0;z-index:0;pointer-events:none} .gal-solo,.gal-glow,.gal-linhas{display:none} .gal-divisor{position:absolute;top:0;left:calc(50% - 171px);width:342px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 100%)} .gal-conteudo{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center} .gal-titulo{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;text-align:center} .gal h2{width:100%;background:linear-gradient(95.3deg,#F4F5F8 13.9%,#B9BCC4 27.2%,#FFFFFF 39.2%,#8C8F99 48.8%,#D6D8DE 62%,#9EA1AA 74.1%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .gal .texto p{color:rgba(238,238,238,.78)} .gal .texto br{display:none} /* polaroids: 2 colunas no celular, rotação reduzida à metade */ .gal .gal-fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;width:100%;margin-top:40px} .gal-foto{position:relative;display:flex;flex-direction:column;gap:8px;padding:7.6px 7.6px 6px;border-radius:2px;background:#D4D4D4;box-shadow:0 10px 22px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.35);transform:rotate(var(--r,0deg));transition:scale .45s var(--ease),translate .45s var(--ease),box-shadow .45s var(--ease)} .gal-foto picture{display:block;aspect-ratio:211.8/233.5;overflow:hidden} .gal-foto img{width:100%;height:100%;object-fit:cover} .gal-legenda{display:block;font-size:18px;line-height:22px;text-align:center;color:rgba(31,28,36,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* rotação de cada polaroid (--r) e o balanço leve: amplitude (--gira), subida (--sobe), duração e defasagem próprias */ .gal-f1{--r:3deg;--gira:1.6deg;--sobe:-5px;--dur:6.2s;--entra:0s} .gal-f2{--r:-1.5deg;--gira:-1.4deg;--sobe:-4px;--dur:7.1s;--entra:.12s} .gal-f3{--r:1.5deg;--gira:1.8deg;--sobe:-6px;--dur:5.6s;--entra:.24s} .gal-f4{--r:-2.5deg;--gira:-1.5deg;--sobe:-5px;--dur:6.8s;--entra:.36s} .gal-f5{--r:2deg;--gira:1.3deg;--sobe:-4px;--dur:7.4s;--entra:.48s} .gal-f6{--r:-3deg;--gira:-1.7deg;--sobe:-6px;--dur:5.9s;--entra:.6s} /* animação (só com JS e sem "reduzir movimento"): as fotos caem na mesa uma a uma e depois balançam de leve */ .gal[data-animar] .gal-foto{opacity:0} .gal[data-animar].gal-visivel .gal-foto{opacity:1;animation:gal-entra .9s cubic-bezier(.2,.8,.2,1) var(--entra) both,gal-balanco var(--dur) ease-in-out calc(var(--entra) + .9s) infinite} .gal.gal-pausado .gal-foto{animation-play-state:paused} @keyframes gal-entra{from{opacity:0;transform:translateY(36px) rotate(calc(var(--r) * 3))}to{opacity:1;transform:translateY(0) rotate(var(--r))}} @keyframes gal-balanco{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(var(--sobe)) rotate(calc(var(--r) + var(--gira)))}} @media (hover:hover) and (pointer:fine){ .gal-foto:hover{z-index:3;scale:1.06;translate:0 -6px;box-shadow:0 22px 40px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.35)} .gal.gal-visivel .gal-foto:hover{animation-play-state:paused} } /* vídeos */ .gal-videos{position:relative;padding:72px 0} .gal-videos-glow{position:absolute;z-index:0;pointer-events:none;left:calc(50% - 320px);top:220px;width:640px;height:523px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(181,43,239,.2) 0%,rgba(181,43,239,.05) 55%,rgba(181,43,239,0) 100%)} .gal-estrela{width:28px;height:28px;margin-bottom:40px} .gal-videos .btn-som{border:0;background:rgba(14,12,20,.75);color:#EEEEEE} .gal-videos .video-title{font-size:13px;line-height:16px;letter-spacing:1.04px;color:#EEEEEE} @media (max-width:359px){.gal-legenda{font-size:16px;line-height:20px}} /* tablet: polaroids em 3 colunas */ @media (min-width:600px) and (max-width:1023px){ .gal .gal-fotos{grid-template-columns:repeat(3,minmax(0,1fr))} .gal-divisor{left:calc(50% - 276px);width:552px} } /* ---------- desktop (1rem = 16px em 1440) ---------- */ @media (min-width:1024px){ .gal{padding:8.125rem 0 0} .gal-divisor{left:calc(50% - 16.375rem);width:32.75rem} .gal-solo,.gal-glow,.gal-linhas{display:block;position:absolute;max-width:none} .gal-solo{overflow:hidden;width:123.756rem;height:106.1375rem} .gal-solo img{position:absolute;width:100%;height:100%;max-width:none;opacity:.24} .gal-solo-1{left:calc(50% - 124.997rem);top:-50.13rem;transform:rotate(8.54deg)} .gal-solo-1 img{left:2.78%;top:12.97%} .gal-solo-2{left:calc(50% - 9.1rem);top:3.95rem;transform:rotate(90.82deg)} .gal-solo-2 img{left:-3.92%;top:1.65%} .gal-glow{left:calc(50% - 57.3125rem);top:6.025rem;width:107.6875rem;height:111.75rem;border-radius:50%;opacity:.88;background:radial-gradient(50% 50% at 53.3% 49.9%,rgba(181,43,239,.2) 0%,rgba(181,43,239,.05) 55%,rgba(181,43,239,0) 100%)} .gal-linhas{background-repeat:no-repeat;background-size:100% 100%} .gal-linhas-h{left:calc(50% + 8.75rem);top:7.5rem;width:98.63rem;height:76.9375rem;background-image:url(img/svg/v2-bg-linhas-h.svg)} .gal-linhas-v{left:calc(50% - 92rem);top:67.5rem;width:76.9375rem;height:98.63rem;background-image:url(img/svg/v2-bg-linhas-v.svg)} .gal-titulo{width:68rem;gap:1.5rem} .gal h2{font-size:1.875rem;line-height:2.375rem} .gal .texto{width:47.5rem;gap:1.125rem} .gal .texto br{display:inline} /* polaroids: posições do Figma (centro de cada cartão menos metade do cartão) */ .gal .gal-fotos{display:block;position:relative;width:58.38rem;height:38.92rem;margin-top:3.5rem} .gal-foto{position:absolute;width:14.594rem;height:18.3875rem;gap:.759rem;padding:.678rem .678rem 0;border-radius:.146rem;box-shadow:0 .876rem 1.946rem rgba(0,0,0,.5),0 .0973rem .1946rem rgba(0,0,0,.35)} .gal-foto picture{flex:none;width:13.2375rem;height:14.594rem;aspect-ratio:auto} .gal-legenda{font-size:1.2649rem;line-height:1.625rem;overflow:visible} .gal-f1{left:3.89rem;top:.78rem;--r:6deg} .gal-f2{left:21.89rem;top:-.19rem;--r:-3deg} .gal-f3{left:40.134rem;top:1.75rem;--r:3deg} .gal-f4{left:7.297rem;top:18.78rem;--r:-5deg} .gal-f5{left:25.053rem;top:19.994rem;--r:4deg} .gal-f6{left:41.353rem;top:18.5375rem;--r:-6deg} .gal-foto{--sobe:-.4rem} .gal-videos{margin-top:3.5rem;padding:4.038rem 0 8.125rem} .gal-videos-glow{left:calc(50% - 73.6875rem);top:38.3125rem;width:147.375rem;height:120.3125rem} .gal-estrela{width:1.75rem;height:1.75rem;margin-bottom:7.587rem} .gal-videos .gal-titulo{width:56.25rem} .gal-videos .texto{gap:.3125rem} .gal-videos .player{margin-top:3.5rem} .gal-videos .btn-som{right:1.375rem;bottom:1.375rem;height:2.25rem;padding:.5625rem .875rem .5625rem .75rem} .gal-videos .video-title{font-size:.875rem;line-height:1.125rem;letter-spacing:.07rem} } /* ======== 10-patrocinadores.css ======== */ /* ---------- 10 — PATROCINADORES 2026 (Figma 231:2435) ---------- Desktop: quadro 1440, y 11527.3, 1440 x 1286.31, VER gap 64, pad 130 cima/baixo, fundo #08070C (var(--bg)), clip. Título 270,130 900x234 (h2 Lexend Peta 600 40/51 = 102, gap 24, texto 760x108 PJS 300 18/30 #EEEEEE@78%). Cotas 361.72,428 716.56x728.31 (opacidade .8, VER gap 76): REALIZAÇÃO 404.93,428 630.14x166.21 · DIAMANTE 361.72,670.21 716.56x145.74 · OURO 555.48,891.95 329.05x75.55 · PRATA 471.21,1043.5 497.59x112.81. Cota = rótulo (cunha 96x2 #EEEEEE 0→40% + Lexend Zetta 600 11/14 ls 1.1 #EEEEEE + cunha, gap 16.02) → 24.92 → logos (gap 56 na Realização, 17.8 nas outras). Caixas de logo (r 10.68, clip, sem fill): Secovi 267.04x127.29 (img 266.84x117.59), Sicoob 307.1x86.34, Diamante 226.99x106.82 x3, Advance 166.75x36.63 (sem caixa), Prata 153.99x73.88 x3 (CTL img 74x47 em 42.79,9.02; Intermidia img 143.24x101.34 em 5.34,−13.35, cortada). Decoração (y relativo ao topo da seção): LINHAS 358:1515 em −752,−1216.7 1231x1578.11; halftone 231:2414 em 7,−508.6 1426x779 (op .3 dentro do SVG); brilho-solo 1 373:1499 em 174,194.7 2178.09x2371.41 e brilho-solo 2 373:1500 em −1018,546.7 2187.83x1945.75 (IMG 9717aa0d FILL, op .24, blur 17 embutido na imagem). Celular: quadro 390, coluna 342 (.wrap), padding 72; decoração x0.27 ancorada ao centro; logos em grade 2 x N (REGRAS-mobile.md). Desktop em rem (1rem = 16px em 1440). */ .patrocinadores{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);padding:72px 0} /* ---------- decoração (fator 0,27 no celular; left = 50% − (720 − x_figma) × 0,27) ---------- */ .pat-linhas,.pat-halftone,.pat-solo{position:absolute;z-index:0;pointer-events:none;max-width:none} .pat-linhas{left:calc(50% - 397.4px);top:-328.5px;width:332.4px;height:426.1px} .pat-halftone{left:calc(50% - 192.5px);top:-137.3px;width:385px;height:210.3px} .pat-solo{display:block;overflow:hidden;opacity:.24} .pat-solo img{width:100%;height:100%;max-width:none;object-fit:cover} .pat-solo{width:990px;height:849px;transform-origin:center} .pat-solo-1{left:calc(50% - 223.5px);top:265.8px;transform:rotate(106deg)} .pat-solo-2{left:calc(50% - 817px);top:335.4px;transform:rotate(-7.63deg)} /* ---------- conteúdo ---------- */ .pat-conteudo{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:40px} /* h2: Lexend Peta 600 (26/33 no celular, 40/51 no desktop pelo base); gradiente das alças (0.26,0.657)→(0.747,0.618) da caixa 900x102 */ .pat-h2{background:linear-gradient(89.48deg,#FF6A24 26%,#FF2D6E 55.73%,#B52BEF 74.69%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .patrocinadores .pat-texto p{color:rgba(238,238,238,.78)} /* ---------- cotas (frame 231:2444, opacidade .8) ---------- */ .pat-cotas{display:flex;flex-direction:column;align-items:center;gap:40px;width:100%} /* .cota/.cota-titulo/.grade ficam no HTML pelo brief, mas o base V2 atual não as define: as regras .pat-* são completas e escopadas em .patrocinadores */ .patrocinadores .pat-cota{display:flex;flex-direction:column;align-items:center;width:100%;gap:25px} /* rótulo: Lexend Zetta 600 11/14 ls 1.1 #EEEEEE; linhas = cunhas 96x2 com gradiente #EEEEEE 0% → 40% (esquerda) e 40% → 0% (direita); encolhem quando o rótulo não cabe na coluna */ .patrocinadores .pat-rotulo{display:flex;align-items:center;justify-content:center;width:100%;gap:16px;margin:0;font-family:var(--f-zetta);font-weight:600;font-size:11px;line-height:14px;letter-spacing:1.1px;text-transform:uppercase;color:#EEEEEE} .patrocinadores .pat-rotulo span{flex:none;white-space:nowrap} .patrocinadores .pat-rotulo i{display:block;flex:0 1 96px;width:96px;max-width:96px;height:2px;background:linear-gradient(90deg,rgba(238,238,238,0) 0%,rgba(238,238,238,.4) 100%);clip-path:polygon(0 50%,100% 0,100% 100%)} .patrocinadores .pat-rotulo i:last-child{background:linear-gradient(90deg,rgba(238,238,238,.4) 0%,rgba(238,238,238,0) 100%);clip-path:polygon(0 0,100% 50%,0 100%)} /* grades de logos: 2 x N no celular (flex-wrap), centradas, gap 16 */ .patrocinadores .pat-grade{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;width:100%} .patrocinadores .pat-grade>li{display:flex;max-width:100%} /* logos com link: área clicável = caixa do logo; sem href (link ainda não informado) não reage */ a.pat-logo,a.pat-logo-advance{color:inherit} a.pat-logo[href],a.pat-logo-advance[href]{cursor:pointer;transition:opacity .2s var(--ease)} a.pat-logo[href]:hover,a.pat-logo-advance[href]:hover{opacity:.8} a.pat-logo[href]:focus-visible,a.pat-logo-advance[href]:focus-visible{outline:2px solid #fff;outline-offset:4px} /* caixas de logo = frames do Figma (r 10.68, clip, sem fill); as artes internas seguem a caixa */ .pat-logo{position:relative;display:flex;align-items:center;justify-content:center;flex:none;max-width:100%;overflow:hidden;border-radius:10.68px} .pat-logo picture{display:block} .pat-logo img{display:block;width:100%;height:auto} .pat-logo-secovi{width:267.04px;aspect-ratio:267.04/127.29} .pat-logo-secovi picture{width:99.925%;aspect-ratio:266.84/117.59} .pat-logo-sicoob{width:307.1px;aspect-ratio:307.1/86.34} .pat-logo-sicoob img{height:100%} .pat-logo-diamante{width:220px;aspect-ratio:226.99/106.82} .pat-logo-diamante>img{height:100%} .pat-logo-dezainy picture{align-self:flex-start;width:44.737%;margin-top:.15%;aspect-ratio:101.55/97.84} .pat-logo-advance{display:block;width:200px;max-width:100%;aspect-ratio:166.75/36.63} .pat-logo-advance img{width:100%;height:100%;object-fit:cover} .pat-logo-prata{width:153.99px;aspect-ratio:153.99/73.88} .pat-logo-prata>img{height:100%} /* CTL: logo completo do cliente (300 x 305, quase quadrado) no lugar do símbolo do Figma; caixa mais alta que as outras da Prata para o nome "CTL" ficar legível (28/10/2026) */ .patrocinadores .pat-logo-ctl{width:auto;height:92px;aspect-ratio:300/305} .pat-logo-ctl img{width:100%;height:100%;object-fit:contain} .pat-logo-intermidia picture{position:absolute;left:3.47%;top:-18.07%;width:93.02%;height:137.17%} /* as têm a proporção da caixa do Figma; object-fit:cover = FILL (as imagens pedidas já saem nessa proporção, sem corte visível) */ .pat-logo-secovi img,.pat-logo-dezainy img,.pat-logo-intermidia img{height:100%;object-fit:cover} /* celular: Secovi e Sicoob lado a lado (como no hero) em vez de empilhados em tamanho de desktop */ @media (max-width:599px){ .patrocinadores .pat-grade-realizacao{gap:24px;flex-wrap:nowrap} .pat-logo-secovi{width:150px} .pat-logo-sicoob{width:160px} } @media (min-width:600px) and (max-width:1023px){ .patrocinadores .pat-grade-realizacao{gap:40px;flex-wrap:nowrap} .pat-logo-secovi{width:200px} .pat-logo-sicoob{width:216px} } @media (max-width:359px){ .patrocinadores .pat-grade-realizacao{gap:16px} .pat-logo-secovi{width:128px} .pat-logo-sicoob{width:136px} } /* ---------- cotas com peso diferente (pedido do cliente em 26/10/2026, fora do Figma) ---------- O Figma tem as cotas a 80 % de opacidade em grupo; agora Realização e Prata 80 %, Ouro 90 % e Diamante 100 %. Ouro: logo maior (166,75 → 200 px no celular; 10,42 → 13,5rem no desktop) e rótulo em tom de ouro. Diamante: "palco" de vidro com borda no gradiente do evento e brilho suave em volta, selo com gema no topo, logos maiores (163 → 220 px no celular, um por linha; 14,19 → 16,875rem no desktop), três brilhos piscando e um reflexo de luz que atravessa o cartão a cada 7 s. Com "reduzir movimento" o reflexo some e os brilhos ficam parados (regras do base/final). */ .patrocinadores .pat-cota{opacity:.8} .patrocinadores .pat-cota-ouro{opacity:.9} .patrocinadores .pat-cota-diamante{opacity:1;margin-top:14px} /* Ouro: texto e cunhas do rótulo em ouro */ .patrocinadores .pat-cota-ouro .pat-rotulo span{background:linear-gradient(90deg,#FBE3A1 0%,#E9B44C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .patrocinadores .pat-cota-ouro .pat-rotulo i{background:linear-gradient(90deg,rgba(233,180,76,0) 0%,rgba(233,180,76,.6) 100%)} .patrocinadores .pat-cota-ouro .pat-rotulo i:last-child{background:linear-gradient(90deg,rgba(233,180,76,.6) 0%,rgba(233,180,76,0) 100%)} /* Diamante: palco (borda = anel com o gradiente do evento recortado por máscara, para o fundo da seção continuar aparecendo) */ .pat-palco{position:relative;width:100%;padding:44px 20px 28px;border-radius:20px;background:radial-gradient(110% 80% at 50% 0%,rgba(255,45,110,.16) 0%,rgba(181,43,239,.09) 45%,rgba(181,43,239,0) 80%),rgba(238,238,238,.03);box-shadow:0 0 40px -8px rgba(255,45,110,.3),0 0 110px -20px rgba(181,43,239,.35)} .pat-palco::before{content:"";position:absolute;inset:0;z-index:0;padding:1px;border-radius:inherit;pointer-events:none;opacity:.85;background:linear-gradient(120deg,#FF7A1A 0%,#FF2D6E 50%,#B52BEF 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .patrocinadores .pat-grade-diamante{position:relative;z-index:1;flex-direction:column;gap:14px} /* selo no meio da borda de cima */ .patrocinadores .pat-selo{position:absolute;top:0;left:50%;z-index:3;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;margin:0;padding:9px 18px 9px 14px;white-space:nowrap;border:1px solid transparent;border-radius:999px;background:linear-gradient(#0E0C14,#0E0C14) padding-box,linear-gradient(90deg,#FF7A1A 0%,#FF2D6E 50%,#B52BEF 100%) border-box;box-shadow:0 0 22px -4px rgba(255,45,110,.5);font-family:var(--f-zetta);font-weight:600;font-size:12px;line-height:14px;letter-spacing:1.2px;text-transform:uppercase;color:#FFFFFF} .pat-gema{display:block;flex:none;width:18px;height:18px} /* reflexo de luz: só transform (compositor); começa e termina fora do cartão, então a volta do ciclo não aparece */ .pat-palco-luz{position:absolute;inset:0;z-index:2;border-radius:inherit;overflow:hidden;pointer-events:none} .pat-palco-luz::before{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:36%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.05) 62%,rgba(255,255,255,0) 100%);transform:translateX(-260%) skewX(-14deg);animation:pat-reflexo 7s cubic-bezier(.45,0,.2,1) 1.5s infinite} @keyframes pat-reflexo{0%{transform:translateX(-260%) skewX(-14deg)}26%,100%{transform:translateX(430%) skewX(-14deg)}} /* brilhos (componente .brilho do base; as fases st-1/st-2/st-3 vêm do final.css) */ .pat-palco .brilho{z-index:3} /* em triângulo: um grande no canto de cima à direita, um na borda esquerda e um na borda de baixo */ .pat-palco-b1{top:-15px;right:-6px;width:36px;height:36px} .pat-palco-b2{bottom:-10px;left:28%;width:20px;height:20px} .pat-palco-b3{top:46%;left:-10px;width:20px;height:20px} /* até 359 px o selo encolhe para caber com folga na coluna de 272 */ @media (max-width:359px){ .patrocinadores .pat-selo{gap:8px;padding:8px 14px 8px 12px;font-size:12px;letter-spacing:.9px} .pat-gema{width:16px;height:16px} } @media (min-width:600px) and (max-width:1023px){ .pat-palco{padding:48px 28px 32px} .patrocinadores .pat-grade-diamante{flex-direction:row;flex-wrap:wrap;gap:16px 24px} .pat-logo-advance{width:210px} } /* ---------- desktop (1rem = 16px em 1440) ---------- */ @media (min-width:1024px){ .patrocinadores{padding:8.125rem 0} .pat-linhas{left:calc(50% - 92rem);top:-76.0438rem;width:76.9375rem;height:98.6319rem} .pat-halftone{left:calc(50% - 44.5625rem);top:-31.7875rem;width:89.125rem;height:48.6875rem} /* nós girados (106° e −7,63°): caixa sem rotação 1980 × 1698, posicionada pelo centro */ .pat-solo{width:123.756rem;height:106.1375rem} .pat-solo-1{left:calc(50% - 27.9375rem);top:33.225rem} .pat-solo-2{left:calc(50% - 102.13rem);top:41.92rem} .pat-conteudo{gap:4rem} .pat-cotas{gap:4.75rem} .patrocinadores .pat-cota{width:auto;gap:1.5577rem} .patrocinadores .pat-rotulo{width:auto;gap:1.0014rem;font-size:.6875rem;line-height:.875rem;letter-spacing:.0688rem} .patrocinadores .pat-rotulo i{flex-basis:6rem;width:6rem;max-width:6rem;height:.125rem} .patrocinadores .pat-grade{width:auto;flex-wrap:nowrap} .patrocinadores .pat-grade-realizacao{gap:3.5rem} .patrocinadores .pat-grade-prata{gap:1.1127rem} .pat-logo{border-radius:.6676rem} .pat-logo-secovi{width:16.69rem} .pat-logo-sicoob{width:19.1938rem} .pat-logo-diamante{width:16.875rem} .pat-logo-advance{width:13.5rem} .pat-logo-prata{width:9.6244rem} .patrocinadores .pat-logo-ctl{height:6rem} /* cotas com peso diferente: palco da Diamante */ .patrocinadores .pat-cota-diamante{margin-top:.5rem} .pat-palco{width:auto;padding:3.25rem 2.75rem 2.5rem;border-radius:1.5rem} .patrocinadores .pat-grade-diamante{flex-direction:row;gap:1.5rem} .patrocinadores .pat-selo{gap:.625rem;padding:.5625rem 1.25rem .5625rem 1rem;font-size:.75rem;line-height:.875rem;letter-spacing:.075rem} .pat-gema{width:1.125rem;height:1.125rem} .pat-palco-b1{top:-1.125rem;right:2.5rem;width:2.25rem;height:2.25rem} .pat-palco-b2{bottom:-.625rem;left:auto;right:28%;width:1.25rem;height:1.25rem} .pat-palco-b3{top:2.25rem;left:-.625rem;width:1.25rem;height:1.25rem} } /* ======== 11-informacoes.css ======== */ /* 11 — Informações do Evento (Figma V2 nó 231:2622): y 12813.6 no quadro, 1440 × 1361.1, fill #08070C, pad 130/130. Conteúdo 120→1320 (1200) em y 130, h 1101.1, gap 48, centrado: lockup 497.4 × 362.1 (x 471.3; logo 210.6 × 54.9 em +122.6, +0.2) → h2 900 × 38 (y 540.1) → data 373 × 83 (y 626.1: 46 + 10 + 27) → mapa 798 × 340 (x 321, y 757.1, r 20, op .72; print 1180 × 916 em −26, −100) → localização 362 × 86 (y 1145.1: eyebrow 18 + 16 + endereço 21 + 10 + link 21) → 130 até 1361.1. Decoração: halftone 7, 1005.1, 1426 × 779 (op .3 no SVG; só 356 px visíveis); brilho-solo 1 e 2 = nó 1980 × 1698 (fill op .24, blur embutido) girados 106° e −7.63°, cantos (273.05, −956.15) e (−914.08, −816.98). Celular: coluna 342, blocos com 40 entre si, lockup 342 × 249, mapa 342 × 300 ancorado pelo pino (197, 165 na janela de 798 × 340). Classes do base reaproveitadas: .wrap .gt .sr-only; padding da seção vem de section{} do base. */ /* ---------- celular (coluna 342) ---------- */ .inf{position:relative;overflow:hidden;isolation:isolate;background:var(--bg)} .inf-halftone,.inf-solo{position:absolute;z-index:-1;pointer-events:none;max-width:none} .inf-halftone{left:calc(50% - 713px);bottom:-423px;width:1426px;height:779px} .inf-solo{display:block;width:990px;height:849px;opacity:.24;transform-origin:center} .inf-solo img{width:100%;height:100%} .inf-solo-1{left:calc(50% - 223.5px);top:-478px;transform:rotate(106deg)} .inf-solo-2{left:calc(50% - 817px);top:-408.5px;transform:rotate(-7.63deg)} .inf-conteudo{position:relative;display:flex;flex-direction:column;align-items:center;gap:40px} .inf-lockup{position:relative;width:342px;max-width:100%;aspect-ratio:592/431} .inf-lockup picture img{width:100%;height:100%} /* logo 210.6 × 54.9 em (122.6, 0.2) do lockup 497.4 × 362.1 → % */ .inf-logo{position:absolute;left:24.65%;top:0;width:42.34%;height:15.16%} /* h2: Lexend Peta 600 (base) 26/33 no celular; gradiente "prata" (alças .14,.02 → .74,.82) convertido para a caixa 342 × 66 */ .inf-titulo{width:100%;text-align:center;color:transparent;background-image:linear-gradient(104.43deg,#F4F5F8 13.43%,#B9BCC4 26.84%,#FFFFFF 39.03%,#8C8F99 48.78%,#D6D8DE 62.19%,#9EA1AA 74.38%);-webkit-background-clip:text;background-clip:text} /* bloco de data em Good Times (licença pendente: var(--f-h1) cai na Lexend Peta); valores iguais aos do hero */ .inf-data{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--f-h1);font-weight:400;text-transform:uppercase;color:#D9D9D9;max-width:342px} .inf-data-hora{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;font-size:26px;line-height:27px;letter-spacing:.1em} .inf-data-sep{display:block;width:6px;height:6px;border-radius:50%;background:#D9D9D9;flex:none} .inf-data-local{display:block;font-size:18px;line-height:19px;letter-spacing:.1em} /* mapa: janela 342 × 300 com a imagem no tamanho da janela desktop (798 × 340), pino (197, 165) centrado, sem descobrir borda */ .inf-mapa{position:relative;width:100%;max-width:342px;height:300px;border-radius:20px;overflow:hidden;background:#000;opacity:.72} .inf-mapa img{position:absolute;width:798px;height:340px;max-width:none;left:clamp(calc(100% - 798px),calc(50% - 197px),0px);top:clamp(calc(100% - 340px),calc(50% - 165px),0px)} .inf-local{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;text-align:center} .inf-eyebrow{font-family:var(--f-zetta);font-weight:600;font-size:13px;line-height:16px;letter-spacing:1.04px;text-transform:uppercase;color:#EEEEEE} .inf-endereco{display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:400;font-size:14px;line-height:21px;color:rgba(238,238,238,.75)} .inf-link{font-weight:500;color:var(--pink);text-decoration:underline} /* ---------- tablet (600–1023): estrutura do celular; só o mapa ocupa a coluna ---------- */ @media (min-width:600px) and (max-width:1023px){ .inf-mapa{max-width:none;height:340px} } /* ---------- desktop (quadro 1440; 1rem = 16px) ---------- */ @media (min-width:1024px){ .inf-halftone{left:calc(50% - 44.5625rem);top:62.8214rem;bottom:auto;width:89.125rem;height:48.6875rem} .inf-solo{width:123.75rem;height:106.125rem} .inf-solo-1{left:calc(50% - 27.9346rem);top:-59.7595rem} .inf-solo-2{left:calc(50% - 102.1303rem);top:-51.0614rem} .inf-conteudo{gap:3rem} .inf-lockup{width:31.0875rem} /* 30/38.4→38 na caixa 900 × 38: reta (126, .76) → (666, 31.16) = 93.22deg; paradas projetadas na linha CSS de 900.71 */ .inf-titulo{max-width:56.25rem;font-size:1.875rem;line-height:2.375rem;background-image:linear-gradient(93.22deg,#F4F5F8 13.97%,#B9BCC4 27.18%,#FFFFFF 39.19%,#8C8F99 48.8%,#D6D8DE 62.01%,#9EA1AA 74.02%)} .inf-data{gap:.625rem;max-width:none} .inf-data-hora{gap:1.0625rem;font-size:2.75rem;line-height:2.875rem} .inf-data-sep{width:.625rem;height:.625rem} .inf-data-local{font-size:1.625rem;line-height:1.6875rem} .inf-mapa{max-width:none;width:49.875rem;height:21.25rem;border-radius:1.25rem} .inf-mapa img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover} .inf-local{gap:1rem;max-width:22.625rem} .inf-eyebrow{font-size:.875rem;line-height:1.125rem;letter-spacing:.07rem} .inf-endereco{gap:.625rem;font-size:.875rem;line-height:1.3125rem} } /* ======== 12-rodape.css ======== */ /* ---------- 12 — RODAPÉ (Figma 231:2669) ---------- Desktop: quadro 1440, y 14174.7, 1440 x 529.1, fundo #08070C (var(--bg)); "Conteúdo" VER gap 56, pad 88 cima / 120 lados / 40 baixo. Topo 120,88 1200x270.1 (HOR space-between): Marca 370x200 (VER gap 20: logo 247.7x64 · edição 14/18 ls 1.12 · frase 18/23 · Let's 28/35) · Realização 897.7,88 422.3x270.1 (VER gap 20: REALIZAÇÃO 11/14 · logos 422.3x79 = Secovi 210x79 + 28 + Sicoob 184.3x51.8 · Regional 14/21 · redes 188x38.06 (4 x 38, gap 12) · contato 276x38 pad 10/16/10/0 sem caixa). Divisor 120,414.1 1200x1 #EEE@10%. Base 120,471.1 1200x18 (© 12/18 ls .12 · VOLTAR AO TOPO 11/14 ls 1.1 à direita). Cor-base dos textos #EEEEEE com as opacidades do Figma. A linha gradiente do topo (nó 231:2672, 1440x1) está OCULTA no Figma V2 (visible:false): não entra. y abaixo = y_figma - 14174.7. Celular: rodapé mobile da V1 (390: margens 24 + 24 = coluna 294; pad 64 em cima, 40 + 83 do player embaixo; Topo e Base em coluna). */ .rodape{background:var(--bg);padding:0 24px} .rod-conteudo{padding:64px 24px 123px;display:flex;flex-direction:column;gap:56px} .rod-topo{display:flex;flex-direction:column;gap:48px} /* marca */ .rod-marca{display:flex;flex-direction:column;align-items:flex-start;gap:20px} .rod-logo{width:247.7px;height:64px;max-width:100%;filter:brightness(.9333)} .rod-edicao{font-family:var(--f-zetta);font-weight:600;font-size:12px;line-height:15px;letter-spacing:.72px;text-transform:uppercase;color:#EEEEEE} .rod-frase{font-weight:300;font-size:16px;line-height:20px;color:rgba(238,238,238,.8)} .rod-celebrate{font-family:var(--f-zetta);font-weight:700;font-size:20px;line-height:25px;letter-spacing:.4px;background:linear-gradient(90deg,#FF7A1A 0%,#FF2D6E 51.92%,#B52BEF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;white-space:nowrap} /* realização e contato */ .rod-realizacao{display:flex;flex-direction:column;align-items:flex-start;gap:20px} .rod-label{font-family:var(--f-zetta);font-weight:600;font-size:11px;line-height:14px;letter-spacing:1.1px;text-transform:uppercase;color:rgba(238,238,238,.6)} .rod-logos{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px} .rod-secovi{display:block;width:210px;height:79px} .rod-secovi img{width:210px;height:79px} .rod-sicoob{display:flex;align-items:center;justify-content:center;width:184.3px;height:51.8px} .rod-sicoob img{width:150.6px;height:33.1px;filter:brightness(.9333)} /* a linha "Regional Norte do Secovi/PR" (14/21 @75 %) saiu a pedido do cliente em 26/10/2026 */ .rod-sociais{display:flex;gap:12px} /* cada ícone é uma janela de 38 x 38.06 sobre o sprite v2-redes-sociais.svg (188 x 39; glifos em 0 / 50 / 100 / 150) */ .rod-social{display:block;width:38px;height:38px;overflow:hidden} .rod-social img{width:188px;height:39px;max-width:none} .rod-social-fb img{margin-left:-50px} .rod-social-in img{margin-left:-100px} .rod-social-yt img{margin-left:-150px} /* ícones com endereço viram link: mesmo retorno visual dos logos dos patrocinadores */ a.rod-social{transition:opacity .2s var(--ease)} a.rod-social:hover{opacity:.75} a.rod-social:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px} /* contato institucional do cliente no lugar do texto provisório do Figma: mesma fonte PJS 400 12/18 ls .12 @70 % e mesmo padding 10/16/10/0. Celular: um item por linha (telefone e e-mail com alvo de toque de 28 px sem sobreposição). A partir de 600 px: três linhas com | e · */ .rod-contato{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:10px 16px 10px 0;font-style:normal;font-weight:400;font-size:12px;line-height:18px;letter-spacing:.12px;color:rgba(238,238,238,.7)} .rod-contato-titulo,.rod-contato-linha{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .rod-contato-titulo{gap:4px;margin-bottom:2px} .rod-sep{display:none} .rod-contato a{display:inline-block;padding:5px 0;margin:-5px 0;color:inherit;transition:color .2s var(--ease)} .rod-contato a:hover,.rod-contato a:focus-visible{color:#EEEEEE;text-decoration:underline;text-underline-offset:3px} @media (min-width:600px){ .rod-contato{gap:8px} .rod-contato-titulo,.rod-contato-linha{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0} .rod-contato-titulo{margin-bottom:4px} .rod-sep{display:inline;margin:0 8px;opacity:.6} } /* divisor e base */ .rod-divisor{height:1px;background:rgba(238,238,238,.1)} .rod-base{display:flex;flex-direction:column;align-items:flex-start;gap:16px} .rod-copy{font-weight:300;font-size:12px;line-height:18px;letter-spacing:.12px;color:rgba(238,238,238,.5)} .rod-voltar{font-family:var(--f-zetta);font-weight:600;font-size:11px;line-height:14px;letter-spacing:1.1px;text-transform:uppercase;color:rgba(238,238,238,.7)} /* crédito "Desenvolvido por Y2 Smarketing" (mesmo padrão do site da Gera Agro): no celular e no tablet fica por último e centralizado (12 px a mais de respiro acima, pedido do cliente em 26/10/2026); no desktop, no meio da linha de baixo */ .rod-credito{order:3;align-self:center;display:inline-flex;align-items:center;gap:9px;padding:13px 0;margin:-1px 0 -13px;font-weight:300;font-size:12px;line-height:18px;letter-spacing:.12px;color:rgba(238,238,238,.5);transition:color .2s var(--ease)} .rod-credito picture{display:block} .rod-credito img{display:block;width:auto;height:18px;opacity:.85;transition:opacity .2s var(--ease)} .rod-credito:hover,.rod-credito:focus-visible{color:#EEEEEE} .rod-credito:hover img,.rod-credito:focus-visible img{opacity:1} /* abaixo de 385 px a coluna de 294 encolhe e "26º JANTAR DO SÍNDICO 2026" (288 px a 12/.72) quebraria: 11/14 ls .55 cabe até 360 px */ @media (max-width:384px){.rod-edicao{font-size:11px;line-height:14px;letter-spacing:.55px}} /* ---------- desktop (1440; 1rem = 16px) ---------- */ @media (min-width:1024px){ .rodape{padding:0} .rod-conteudo{padding:5.5rem 0 2.5rem;gap:3.5rem} .rod-topo{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:3rem} .rod-marca{width:23.125rem;gap:1.25rem} .rod-logo{width:15.481rem;height:4rem} .rod-edicao{font-size:.875rem;line-height:1.125rem;letter-spacing:.07rem} .rod-frase{font-size:1.125rem;line-height:1.4375rem} .rod-celebrate{font-size:1.75rem;line-height:2.1875rem;letter-spacing:.035rem} .rod-realizacao{width:26.391rem;gap:1.25rem} .rod-label{font-size:.6875rem;line-height:.875rem;letter-spacing:.06875rem} .rod-logos{flex-wrap:nowrap;gap:1.75rem} .rod-secovi,.rod-secovi img{width:13.125rem;height:4.9375rem} .rod-sicoob{width:11.516rem;height:3.238rem} .rod-sicoob img{width:9.413rem;height:2.07rem} .rod-sociais{gap:.75rem} .rod-social{width:2.375rem;height:2.379rem} .rod-social img{width:11.75rem;height:2.4375rem} .rod-social-fb img{margin-left:-3.125rem} .rod-social-in img{margin-left:-6.25rem} .rod-social-yt img{margin-left:-9.375rem} .rod-contato{gap:.5rem;padding:.625rem 1rem .625rem 0;font-size:.75rem;line-height:1.125rem;letter-spacing:.0075rem} .rod-contato-titulo{margin-bottom:.25rem} .rod-sep{margin:0 .5rem} .rod-contato a{padding:0;margin:0} .rod-base{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem} .rod-base .rod-voltar{justify-self:end} .rod-copy{font-size:.75rem;line-height:1.125rem;letter-spacing:.0075rem} .rod-voltar{font-size:.6875rem;line-height:.875rem;letter-spacing:.06875rem} .rod-credito{order:0;gap:.5625rem;padding:0;margin:0;font-size:.75rem;line-height:1.125rem;letter-spacing:.0075rem} .rod-credito img{height:1.125rem} } /* ======== final.css (ajustes globais depois das seções) ======== */ /* ---------- celular: legibilidade e alvos de toque (regras de adaptação mobile da V2) ---------- */ @media (max-width:1023px){ .sor-tag,.atr-tag,.rod-label,.rod-voltar,.pat-rotulo,.btn-som span{font-size:12px} .rod-voltar,.inf-link{display:inline-block;padding:13px 0;margin:-13px 0} } /* ---------- brilhos: cada instância começa no estado do Figma (aceso, diminuindo, apagado, crescendo) ---------- */ .brilho.st-1{animation-delay:0s} .brilho.st-2{animation-delay:-.78s} .brilho.st-3{animation-delay:-1.43s} .brilho.st-4{animation-delay:-2.08s} /* quem pediu menos movimento vê o quadro parado exatamente como no Figma */ @media (prefers-reduced-motion:reduce){ .brilho.st-2,.brilho.st-4{transform:scale(.6);opacity:.6} .brilho.st-3{transform:scale(.28);opacity:.15} } /* ---------- telas estreitas (até 359 px: iPhone SE 1ª geração, Androids compactos) ---------- */ @media (max-width:359px){ .dre-look{gap:14px} .dre-look-corpo{gap:16px} .pat-logo-diamante{width:200px} .pat-logo-prata{width:128px} } /* quem pede menos movimento vê as polaroids paradas e visíveis */ @media (prefers-reduced-motion:reduce){ .gal[data-animar] .gal-foto{opacity:1} .gal-foto:hover{scale:1;translate:0 0} } /* ---------- pente fino de 26/10/2026 ---------- */ /* celular: rótulos das cotas também em 12 px (a regra do topo perdia para .patrocinadores .pat-rotulo) e estado do player legível */ @media (max-width:1023px){ .patrocinadores .pat-rotulo{font-size:12px} .music-state{font-size:10px;line-height:12px} } /* até 359 px a coluna tem 272 px: "EXPERIÊNCIAS" (h2 26 px) e "Let's Celebrate!" (20 px, sem quebra) passavam da coluna */ @media (max-width:359px){ h2{font-size:24px;line-height:31px} .rod-celebrate{font-size:16.5px;line-height:21px} } /* logo do rodapé: a altura acompanha a largura quando a coluna é mais estreita que o logo (antes achatava abaixo de 344 px) */ .rod-logo{height:auto;aspect-ratio:247.7/64} /* de 1024 a 1439 px a página toda encolhe com a tela (1rem = 13,6 a 16 px) e os textos de 10, 11 e 12 px do Figma chegavam a 8,5, 9,3 e 10,2 px. Piso só nessa faixa: em 1440 px e acima nada muda */ @media (min-width:1024px) and (max-width:1439px){ .nav .hero-menu a{font-size:max(.625rem,10px)} .sor-tag,.atr-tag,.tri-selo,.btn-som,.patrocinadores .pat-rotulo,.rod-label,.rod-voltar{font-size:max(.6875rem,10.5px)} .hero-btn,.pas-atencao-texto p,.sor-nota,.atr-btn,.tri-nota,.tri-form .tri-btn,.tri-mural-ao-vivo,.tri-musica-quem,.compartilhe .com-btn,.patrocinadores .pat-selo,.rod-contato,.rod-copy,.rod-credito,.tri-aviso{font-size:max(.75rem,11px)} .music-state{font-size:max(.5625rem,9px)} } /* menu do celular com 8 itens (Patrocinadores entrou em 26/10/2026): em telas baixas (iPhone SE 1ª geração, 568 px) os itens ficam com 56 px de altura para os oito caberem sem rolar; continuam alvos de toque confortáveis */ @media (max-width:1023px) and (max-height:600px){ .menu-mobile{gap:28px} .menu-mobile ul a{height:56px;padding:16px 0} } /* até 359 px "PATROCINADORES" (18 px) encostava na seta: letra do menu do celular em 16 px nessa faixa */ @media (max-width:359px){ .menu-mobile ul a{font-size:16px;letter-spacing:.9px} }