/* PLUZIGAME — loja de games e sistemas White Label DESIGN SYSTEM Todas as cores vivem nos tokens abaixo; os componentes só usam var(--…). Escuro é o padrão; [data-theme="light"] troca apenas os tokens. O tema é aplicado no de cada página e alternado em assets/js/site.js. */ :root, :root[data-theme="dark"]{ color-scheme:dark; --background:#0B0B0D; --background-alt:#0F0F12; --surface:#131317; --surface-secondary:#18181E; --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14); --border-hover:rgba(255,255,255,.30); --text:#FFFFFF; --text-soft:rgba(255,255,255,.88); --text-muted:rgba(255,255,255,.70); --text-subtle:rgba(255,255,255,.52); --primary:#FF751F; /* laranja PLUZI: preenchimentos */ --primary-hover:#FF8A42; --primary-contrast:#FFFFFF; /* texto sobre o laranja */ --primary-text:#FF751F; /* laranja como texto sobre o fundo */ --primary-icon:#FF751F; --primary-display:#FF751F; /* títulos grandes em laranja */ --primary-soft:rgba(255,117,31,.10); --primary-border:rgba(255,117,31,.45); --secondary:#5A3AA8; /* roxo de apoio */ --secondary-soft:rgba(90,58,168,.22); --secondary-glow:rgba(90,58,168,.30); --secondary-text:rgba(255,255,255,.90); --success:#25D366; /* WhatsApp */ --success-hover:#2FE477; --success-contrast:#FFFFFF; --ghost:rgba(255,255,255,.03); --ghost-hover:rgba(255,255,255,.07); --btn-secondary:#26262E; --btn-secondary-hover:#33333D; --btn-secondary-text:#FFFFFF; --overlay:rgba(11,11,13,.72); --overlay-strong:rgba(11,11,13,.94); --header-bg:rgba(11,11,13,.78); --header-bg-scrolled:rgba(11,11,13,.92); --shadow-card:0 18px 40px rgba(0,0,0,.45); --shadow-media:rgba(0,0,0,.50); --shadow-media-strong:rgba(0,0,0,.60); --skeleton:#18181E; --skeleton-hi:#202028; --lightbox-bg:rgba(5,5,7,.95); --popup-overlay:rgba(5,5,7,.78); --hero-glow:rgba(90,58,168,.32); --hero-glow-accent:rgba(255,117,31,.10); } :root[data-theme="light"]{ color-scheme:light; --background:#FAFAFB; --background-alt:#F3F3F6; --surface:#FFFFFF; --surface-secondary:#F3F3F7; --border:rgba(15,15,25,.09); --border-strong:rgba(15,15,25,.16); --border-hover:rgba(15,15,25,.32); --text:#0B0B0D; --text-soft:rgba(11,11,13,.86); --text-muted:rgba(11,11,13,.68); --text-subtle:rgba(11,11,13,.58); --primary:#FF751F; --primary-hover:#F2680F; --primary-contrast:#FFFFFF; --primary-text:#C2410C; /* 5,2:1 sobre branco */ --primary-icon:#E2600E; /* ícones: 3,4:1 */ --primary-display:#E85D04; /* títulos grandes: laranja vivo, 3,3:1 */ --primary-soft:rgba(255,117,31,.10); --primary-border:rgba(226,96,14,.45); --secondary:#5A3AA8; --secondary-soft:rgba(90,58,168,.09); --secondary-glow:rgba(90,58,168,.12); --secondary-text:#4A2F91; --success:#25D366; --success-hover:#1FC25C; --success-contrast:#FFFFFF; --ghost:rgba(11,11,13,.02); --ghost-hover:rgba(11,11,13,.05); --btn-secondary:#16161A; --btn-secondary-hover:#2A2A31; --btn-secondary-text:#FFFFFF; --overlay:rgba(255,255,255,.86); --overlay-strong:rgba(255,255,255,.96); --header-bg:rgba(250,250,251,.80); --header-bg-scrolled:rgba(250,250,251,.94); --shadow-card:0 16px 36px rgba(17,17,26,.10); --shadow-media:rgba(17,17,26,.18); --shadow-media-strong:rgba(17,17,26,.26); --skeleton:#ECECF0; --skeleton-hi:#F7F7FA; --lightbox-bg:rgba(250,250,251,.97); --popup-overlay:rgba(11,11,13,.62); --hero-glow:rgba(90,58,168,.13); --hero-glow-accent:rgba(255,117,31,.10); } :root{ --r-sm:10px; --r:14px; --r-lg:20px; --ease:cubic-bezier(.22,.61,.36,1); --max:1240px; --header-h:64px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)} body{ margin:0;background:var(--background);color:var(--text); font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:16px;line-height:1.6;letter-spacing:-.005em; overflow-x:hidden;-webkit-font-smoothing:antialiased; } body.is-locked{overflow:hidden} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.02em;font-weight:600} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} fieldset{margin:0;padding:0;border:0;min-width:0} :focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px} .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:-9999px;top:0;z-index:200;background:var(--primary);color:var(--primary-contrast);padding:10px 16px;border-radius:0 0 var(--r-sm) 0} .skip:focus{left:0} /* troca de tema suave (classe aplicada por ~350ms no clique) */ html.is-theming,html.is-theming *,html.is-theming *::before,html.is-theming *::after{ transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),fill .3s var(--ease) !important} .container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:20px} .container--narrow{max-width:820px} .eyebrow{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-text)} .ico{width:20px;height:20px;flex:none;color:var(--primary-icon)} .ico-arrow{width:16px;height:16px;flex:none} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:46px;padding:0 20px;border-radius:999px;border:1px solid transparent; font-size:.93rem;font-weight:600;line-height:1.2;cursor:pointer;text-align:center;white-space:nowrap; transition:transform .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease); } .btn:active{transform:translateY(0)} .btn--sm{min-height:40px;padding:0 16px;font-size:.86rem} .btn--lg{min-height:52px;padding:0 26px;font-size:.96rem} .btn--block{width:100%} .btn--primary{background:var(--primary);color:var(--primary-contrast)} .btn--primary:hover{background:var(--primary-hover);transform:translateY(-2px)} /* secundário: preenchido e neutro, com texto branco nos dois temas */ .btn--ghost{background:var(--btn-secondary);border-color:var(--btn-secondary);color:var(--btn-secondary-text)} .btn--ghost:hover{background:var(--btn-secondary-hover);border-color:var(--btn-secondary-hover);transform:translateY(-2px)} .btn--whats{background:var(--success);color:var(--success-contrast);border-color:var(--success)} .btn--whats:hover{background:var(--success-hover);border-color:var(--success-hover);transform:translateY(-2px)} .btn--whats:focus-visible{outline-color:var(--success)} /* ---------- Badges ---------- */ .badge{ display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px; border:1px solid var(--border-strong);background:var(--secondary-soft); font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary-text);line-height:1.4; } .badge--status{border-color:var(--primary-border);background:var(--primary-soft);color:var(--primary-text)} .badge--status[data-status="em-breve"]{border-color:var(--border-strong);background:var(--overlay);color:var(--text-muted)} /* ---------- Header ---------- */ .header{position:sticky;top:0;z-index:100;min-height:var(--header-h);background:var(--header-bg); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent; transition:border-color .3s var(--ease),background-color .3s var(--ease)} .header.is-scrolled{border-bottom-color:var(--border);background:var(--header-bg-scrolled)} .header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header-h)} .header__tools{display:flex;align-items:center;gap:8px} .logo{display:inline-flex;align-items:center;line-height:0} .logo img{height:26px;width:auto;display:block;transition:opacity .25s var(--ease)} .logo:hover img{opacity:.85} /* mesma especificidade de ".logo img" para vencer o display:block */ .logo .logo__img--light{display:none} :root[data-theme="light"] .logo .logo__img--dark{display:none} :root[data-theme="light"] .logo .logo__img--light{display:block} .icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;background:transparent; border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);cursor:pointer; transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease)} .icon-btn:hover{border-color:var(--primary-border);color:var(--primary-text);background:var(--ghost-hover)} /* botão de tema: só o ícone, sem fundo nem borda */ .theme-toggle,.theme-toggle:hover{border-color:transparent;background:transparent} .theme-toggle:hover{color:var(--primary-text)} .theme-toggle svg{width:21px;height:21px} .theme-toggle__moon{display:none} :root[data-theme="light"] .theme-toggle__sun{display:none} :root[data-theme="light"] .theme-toggle__moon{display:block} /* align-items:stretch desfaz o place-items do .icon-btn (senão as barras ficam com largura 0) */ .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:stretch;gap:5px;padding:0 11px} .nav-toggle span{display:block;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .2s var(--ease)} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .nav{position:fixed;inset:var(--header-h) 0 auto 0;background:var(--background);border-bottom:1px solid var(--border); padding:8px 20px 24px;display:none;flex-direction:column;gap:18px;max-height:calc(100dvh - var(--header-h));overflow-y:auto} .nav.is-open{display:flex;animation:slideDown .28s var(--ease)} @keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .nav__list{display:flex;flex-direction:column} .nav__list a{display:block;padding:14px 0;color:var(--text-muted);border-bottom:1px solid var(--border);transition:color .2s var(--ease)} .nav__list a:hover,.nav__list a[aria-current="page"]{color:var(--text)} .nav .btn{width:100%} /* ---------- Hero (só texto, centralizada) ---------- */ .hero{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--border)} .hero::before,.hero::after{content:"";position:absolute;left:50%;z-index:-1;pointer-events:none;transform:translateX(-50%)} .hero::before{top:-300px;width:min(1100px,160%);height:640px;background:radial-gradient(closest-side,var(--hero-glow),transparent 72%)} .hero::after{top:-120px;width:min(520px,110%);height:320px;background:radial-gradient(closest-side,var(--hero-glow-accent),transparent 70%)} .hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:40px 36px} .hero .badge{font-size:.62rem;padding:4px 10px} .hero__title{font-size:clamp(1.9rem,7.6vw,3.2rem);font-weight:700;letter-spacing:-.045em;line-height:1.06;margin:14px 0 10px} .hero__title em{display:block;font-style:normal;color:var(--primary-display)} .hero__desc{color:var(--text-muted);font-size:.9rem;max-width:34ch;text-wrap:balance} .hero__cta{display:flex;justify-content:center;margin-top:22px} .hero__cta .btn{min-height:46px;min-width:180px;padding-inline:28px} /* ---------- Sections ---------- */ .section{padding-block:60px} .section--alt{background:var(--background-alt);border-block:1px solid var(--border)} .section__head{margin-bottom:28px;max-width:62ch} .section__title{font-size:clamp(1.6rem,4.6vw,2.2rem);font-weight:700;letter-spacing:-.035em;line-height:1.1} .section__desc{color:var(--text-muted);margin-top:8px} /* ---------- Catálogo ---------- */ /* 2 colunas já no celular (estilo marketplace); 3 e 4 no desktop */ .pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .pcard{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--border); border-radius:var(--r);overflow:hidden; transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)} .pcard:hover{border-color:var(--primary-border);transform:translateY(-3px);box-shadow:var(--shadow-card)} .pcard:focus-within{border-color:var(--primary)} .pcard__media{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--border); background:radial-gradient(110% 90% at 78% 0%,var(--secondary-glow),transparent 62%),var(--surface-secondary)} .pcard__status{position:absolute;top:12px;left:12px;z-index:3} .pcard__body{display:flex;flex-direction:column;gap:4px;flex:1;padding:16px 16px 18px} .pcard__cat{font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-subtle)} .pcard__name{font-size:1.2rem;font-weight:700;letter-spacing:-.025em;line-height:1.25} .pcard__link::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit} .pcard__link:focus-visible{outline:none} .pcard__desc{color:var(--text-muted);font-size:.87rem;line-height:1.5;margin-top:2px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* sem botão: o card inteiro é o link; o preço fica centralizado e em destaque */ .pcard__foot{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:auto;padding-top:14px;text-align:center} .pcard__from{font-size:.68rem;font-weight:500;line-height:1;color:var(--text-subtle)} .pcard__price{display:inline-flex;align-items:center;justify-content:center;min-width:70%;padding:7px 18px; border:1.5px solid var(--primary);border-radius:999px;background:var(--primary-soft);color:var(--primary-text); font-size:1.3rem;font-weight:700;letter-spacing:-.03em;line-height:1.15;white-space:nowrap; transition:background-color .25s var(--ease),color .25s var(--ease)} .pcard:hover .pcard__price,.pcard:focus-within .pcard__price{background:var(--primary);color:var(--primary-contrast)} .pcard--soon .cover{opacity:.72} /* capa: painel + celular + logotipo */ .cover{position:absolute;inset:0} .cover img{position:absolute;max-width:none;pointer-events:none;transition:transform .5s var(--ease)} .cover__back{left:2%;top:13%;width:82%;filter:drop-shadow(0 16px 26px var(--shadow-media))} .cover__front{right:6%;bottom:5%;height:80%;width:auto;filter:drop-shadow(0 14px 24px var(--shadow-media-strong))} .cover__logo{left:6%;bottom:7%;width:21%;border-radius:22%;box-shadow:0 12px 26px var(--shadow-media-strong)} .cover__image{inset:0;width:100%;height:100%;object-fit:cover} .cover--solo .cover__front{right:50%;transform:translateX(50%)} .cover--empty{display:grid;place-items:center;font-size:1.4rem;font-weight:700;color:var(--text-subtle)} .pcard:hover .cover__front{transform:translateY(-5px)} .pcard:hover .cover--solo .cover__front{transform:translate(50%,-5px)} .pcard:hover .cover__back{transform:scale(1.02)} .pcard:hover .cover__image{transform:scale(1.03)} /* card "novos games" */ .pcard--request{border-style:dashed;border-color:var(--border-strong);background:transparent;min-height:260px} .pcard--request:hover{transform:none;box-shadow:none;border-color:var(--primary-border)} .pcard__request{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;height:100%;padding:28px 22px} .pcard__request .pcard__desc{-webkit-line-clamp:4;margin-bottom:10px} .pcard__request .btn{position:relative;z-index:5} /* card compacto no celular (2 colunas): imagem, nome, preço e botão */ @media (max-width:559px){ .pgrid{gap:10px} .pcard__status{top:8px;left:8px;padding:3px 8px;font-size:.56rem} .pcard__body{gap:2px;padding:10px 10px 12px} .pcard__cat{font-size:.56rem;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pcard__name{font-size:.95rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pcard__desc{display:none} .pcard__foot{gap:5px;padding-top:10px} .pcard__from{font-size:.6rem} .pcard__price{min-width:0;width:100%;padding:6px 8px;font-size:1.08rem} .pcard--request{min-height:0} .pcard__request{align-items:stretch;gap:6px;padding:14px 12px} .pcard__request .eyebrow{font-size:.58rem} .pcard__request .pcard__desc{display:-webkit-box;-webkit-line-clamp:5;font-size:.74rem;margin-bottom:6px} .pcard__request .btn{min-height:34px;padding:0 10px;font-size:.74rem;white-space:normal;line-height:1.2} } /* skeleton */ .pcard--skeleton{pointer-events:none} .pcard--skeleton .pcard__media,.sk{background:linear-gradient(90deg,var(--skeleton) 25%,var(--skeleton-hi) 50%,var(--skeleton) 75%); background-size:200% 100%;animation:shimmer 1.4s linear infinite} .sk{display:block;height:12px;border-radius:6px;width:80%;margin-top:8px} .sk--sm{width:34%;height:10px;margin-top:0} .sk--lg{width:52%;height:18px} .sk--foot{width:100%;height:38px;border-radius:999px;margin-top:18px} @keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}} /* ---------- Como funciona ---------- */ .steps{display:grid;grid-template-columns:minmax(0,1fr);gap:12px} .step{position:relative;padding:22px 20px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface); transition:border-color .3s var(--ease)} .step:hover{border-color:var(--primary-border)} .step__num{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%; border:1.5px solid var(--primary-border);color:var(--primary-text);font-size:.82rem;font-weight:700} .step__title{font-size:1.02rem;font-weight:600;margin:14px 0 4px} .step__desc{color:var(--text-muted);font-size:.9rem;line-height:1.5} /* ---------- CTA ---------- */ .section--cta{padding-block:20px 72px} .cta{position:relative;overflow:hidden;text-align:center;padding:44px 22px;border:1px solid var(--border);border-radius:var(--r-lg); background:radial-gradient(70% 110% at 50% 125%,var(--secondary-glow),transparent 62%),var(--surface)} .cta__title{font-size:clamp(1.6rem,4.6vw,2.3rem);font-weight:700;letter-spacing:-.035em;line-height:1.1} .cta__text{color:var(--text-muted);margin:10px auto 0;max-width:48ch} .cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px} /* ---------- Footer ---------- */ .footer{border-top:1px solid var(--border);padding-block:40px;background:var(--background-alt)} .footer__inner{display:grid;gap:22px} .footer__tag{color:var(--text-subtle);font-size:.86rem;margin-top:12px;max-width:34ch} .footer__nav{display:flex;flex-wrap:wrap;gap:12px 22px;color:var(--text-muted);font-size:.9rem} .footer__nav a{transition:color .25s var(--ease)} .footer__nav a:hover{color:var(--primary-text)} .footer__copy{color:var(--text-subtle);font-size:.82rem} /* ========================================================================== PÁGINA DO PROJETO ========================================================================== */ .crumbs{padding-block:18px 14px;font-size:.8rem;color:var(--text-subtle)} .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .crumbs li{display:inline-flex;align-items:center;gap:6px} .crumbs li+li::before{content:"›";color:var(--text-subtle)} .crumbs a{transition:color .2s var(--ease)} .crumbs a:hover{color:var(--text)} .crumbs [aria-current]{color:var(--text)} .pdp{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;padding-bottom:44px} /* galeria */ .gal{min-width:0} .gal__stage{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden; background:radial-gradient(90% 80% at 80% 0%,var(--secondary-glow),transparent 60%),var(--surface)} .gal__stage--cover{aspect-ratio:4/3} .gal__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain} .gal__track::-webkit-scrollbar{display:none} .gal__track:focus-visible{outline-offset:-3px} .gal__slide{position:relative;flex:0 0 100%;aspect-ratio:4/3;scroll-snap-align:center;scroll-snap-stop:always} .gal__zoom{position:absolute;inset:0;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in} .gal__zoom .gal__media{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain; filter:drop-shadow(0 18px 30px var(--shadow-media))} .gal__video{position:absolute;inset:5%;display:flex;align-items:center;justify-content:center} .gal__video video{display:block;height:100%;width:auto;max-width:100%;aspect-ratio:var(--ratio,9/16);object-fit:contain;background:transparent} .gal__video.has-mask video{ -webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-size:100% 100%;mask-repeat:no-repeat} .glass-btn,.gal__play,.gal__nav{border:1px solid var(--border-strong);background:var(--overlay);color:var(--text); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer; transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),opacity .25s var(--ease)} .gal__play{position:absolute;right:14px;bottom:14px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%} .gal__play:hover{background:var(--primary);border-color:var(--primary);color:var(--primary-contrast)} .gal__play svg{width:18px;height:18px} .gal__play .ico-pause,.gal__slide--video.is-playing .gal__play .ico-play{display:none} .gal__slide--video.is-playing .gal__play .ico-pause{display:block} .gal__nav{position:absolute;top:50%;z-index:2;display:none;place-items:center;width:42px;height:42px;margin-top:-21px;border-radius:50%} .gal__nav svg{width:20px;height:20px} .gal__nav:hover{border-color:var(--primary);background:var(--primary-soft)} .gal__nav--prev{left:12px} .gal__nav--next{right:12px} .gal__count{position:absolute;left:12px;bottom:12px;z-index:2;padding:3px 10px;border-radius:999px;font-size:.74rem;color:var(--text-muted); background:var(--overlay);border:1px solid var(--border)} .gal__count b{color:var(--text);font-weight:600} .gal__thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding:2px} .gal__thumbs::-webkit-scrollbar{display:none} .gal__thumb{position:relative;flex:0 0 68px;aspect-ratio:4/3;padding:4px;border-radius:10px;border:1px solid var(--border); background:var(--surface);cursor:pointer;opacity:.62;transition:opacity .2s var(--ease),border-color .2s var(--ease)} .gal__thumb img{width:100%;height:100%;object-fit:contain} .gal__thumb:hover{opacity:1} .gal__thumb[aria-current="true"]{opacity:1;border-color:var(--primary)} .gal__thumb-ph{display:block;width:100%;height:100%;background:var(--surface-secondary);border-radius:6px} .gal__thumb-play{position:absolute;inset:0;display:grid;place-items:center;color:var(--text)} .gal__thumb-play svg{width:22px;height:22px;padding:5px;border-radius:50%;background:var(--overlay)} /* informações */ .pinfo{min-width:0} .pinfo__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .pinfo__cat{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-subtle)} .pinfo__title{font-size:clamp(2.1rem,8vw,2.9rem);font-weight:700;letter-spacing:-.045em;line-height:1.04;margin:14px 0 0} /* preço da modalidade escolhida */ .price{margin-top:18px} .price__label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-subtle)} .price__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:2px} .price__value{font-size:2.5rem;font-weight:700;letter-spacing:-.045em;line-height:1.12} .price__old{color:var(--text-subtle);font-size:.95rem} .price__off{padding:3px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary-text);font-size:.74rem;font-weight:700} .price__note{display:block;margin-top:2px;font-size:.8rem;color:var(--text-subtle)} /* seletor de modalidade */ .picker{margin-top:20px} .picker__legend{padding:0;margin-bottom:6px;font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-subtle)} .picker__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:8px} .picker__opt{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2px 10px;padding:14px; border:1px solid var(--border-strong);border-radius:14px;background:var(--surface);cursor:pointer; transition:border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease)} .picker__opt:hover{border-color:var(--border-hover)} .picker__opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .picker__radio{grid-row:1/3;width:18px;height:18px;border-radius:50%;border:2px solid var(--border-hover); transition:border-color .2s var(--ease),box-shadow .2s var(--ease)} .picker__name{font-weight:600;font-size:.98rem;line-height:1.25} .picker__price{font-weight:700;font-size:.95rem;line-height:1.25} .picker__note{grid-column:2/-1;font-size:.76rem;line-height:1.3;color:var(--text-subtle)} .picker__tag{position:absolute;top:-10px;right:12px;padding:3px 9px;border-radius:999px;background:var(--primary);color:var(--primary-contrast); font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.3} /* modalidade em destaque (Pro): realçada mesmo sem estar selecionada */ .picker__opt.is-featured{border-color:var(--primary-border);background:linear-gradient(135deg,var(--primary-soft),transparent 75%),var(--surface)} .picker__opt.is-on{border-color:var(--primary);background:var(--primary-soft);box-shadow:inset 0 0 0 1px var(--primary)} .picker__opt.is-on .picker__radio{border-color:var(--primary);background:var(--primary);box-shadow:inset 0 0 0 3px var(--surface)} .picker__opt.is-on .picker__note{color:var(--text-muted)} .picker__opt:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:3px} /* o que a modalidade inclui */ .plandetail{margin-top:12px;padding:16px 16px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface)} .plandetail--featured{border-color:var(--primary-border)} .plandetail__title{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:12px} .plandetail__note{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:.8rem;color:var(--text-muted)} .is-swap{animation:swapIn .28s var(--ease)} @keyframes swapIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .pinfo__actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:16px} .pinfo__help{margin-top:12px;font-size:.84rem;color:var(--text-subtle)} .pinfo__help a{color:var(--text);text-decoration:underline;text-decoration-color:var(--border-hover);text-underline-offset:3px} .pinfo__help a:hover{color:var(--primary-text);text-decoration-color:var(--primary-text)} /* descrição: sempre depois do bloco de compra */ .pinfo__about{margin-top:24px;padding-top:22px;border-top:1px solid var(--border)} .pinfo__sub{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:8px} .pinfo__desc{color:var(--text-muted);font-size:.95rem;line-height:1.65;max-width:52ch} .pinfo__legal{margin-top:16px;font-size:.76rem;line-height:1.55;color:var(--text-subtle)} .checks{display:grid;gap:10px} .checks li{display:flex;align-items:center;gap:10px;font-size:.93rem;line-height:1.4} .checks--info,.checks--detail{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px} .checks--info{margin-top:16px} .checks--info li,.checks--detail li{font-size:.87rem;color:var(--text-soft)} .checks--info .ico,.checks--detail .ico{width:18px;height:18px} @media (max-width:559px){ .checks--detail{grid-template-columns:minmax(0,1fr)} } /* sobre + recursos */ .about{display:grid;grid-template-columns:minmax(0,1fr);gap:32px} .about__body{margin-top:16px;display:grid;gap:14px;color:var(--text-muted);max-width:60ch} .about__sub{font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:14px} .res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .res__item{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface); font-size:.87rem;font-weight:500;line-height:1.35} .res__item .ico{width:18px;height:18px} /* galeria em funcionamento */ .show{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:220px;gap:12px} .show__item{position:relative;display:block;padding:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:zoom-in; background:radial-gradient(90% 90% at 50% 0%,var(--secondary-glow),transparent 62%),var(--surface); transition:border-color .3s var(--ease)} .show__item:hover{border-color:var(--primary-border)} .show__item img,.show__item video{position:absolute;inset:8% 6% 16%;width:88%;height:76%;object-fit:contain;transition:transform .5s var(--ease)} .show__item:hover img{transform:scale(1.03)} .show__item img.has-mask{inset:auto;left:50%;top:8%;height:76%;width:auto;aspect-ratio:var(--ratio);transform:translateX(-50%); -webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-size:100% 100%;mask-repeat:no-repeat} .show__item:hover img.has-mask{transform:translateX(-50%) scale(1.03)} .show__play{position:absolute;left:50%;top:46%;display:grid;place-items:center;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%; background:var(--primary);color:var(--primary-contrast);box-shadow:0 10px 26px var(--shadow-media-strong)} .show__play svg{width:22px;height:22px;margin-left:2px} .show__label{position:absolute;left:12px;bottom:12px;padding:3px 10px;border-radius:999px;font-size:.72rem;color:var(--text-muted); background:var(--overlay);border:1px solid var(--border)} /* CTA fixo (mobile) */ .buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:14px; padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:var(--overlay-strong); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border); transform:translateY(110%);transition:transform .3s var(--ease)} .buybar.is-on{transform:none} .buybar__info{display:flex;flex-direction:column;min-width:0;line-height:1.2} .buybar__plan{font-size:.72rem;color:var(--text-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .buybar__price{font-size:1.2rem;font-weight:700;letter-spacing:-.03em} .buybar .btn{min-width:140px} body.has-buybar .footer{padding-bottom:104px} .notfound{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-block:96px 120px} .notfound .btn{margin-top:12px} .pdp-loading{min-height:70vh} /* ========================================================================== PÁGINA WHITE LABEL ========================================================================== */ .page-hero{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--border);padding-bottom:48px} .page-hero::before{content:"";position:absolute;z-index:-1;top:-260px;right:-140px;width:680px;height:520px;pointer-events:none; background:radial-gradient(closest-side,var(--hero-glow),transparent 72%)} .page-hero__title{font-size:clamp(2rem,6.6vw,3rem);font-weight:700;letter-spacing:-.045em;line-height:1.05;margin:16px 0 12px;max-width:18ch} .page-hero__desc{color:var(--text-muted);font-size:1.04rem;max-width:52ch} .wl{display:grid;gap:24px;align-items:start} .wl__desc{color:var(--text-muted);margin-top:14px;max-width:60ch} .wl__note{border:1px solid var(--primary-border);border-radius:var(--r-lg);padding:24px; background:linear-gradient(180deg,var(--primary-soft),var(--secondary-soft)),var(--surface)} .wl__highlight{font-weight:600;font-size:1.06rem;margin-bottom:8px;color:var(--primary-text)} .wl__small{color:var(--text-muted);font-size:.92rem} .table-wrap{display:none;overflow-x:auto} .table{width:100%;border-collapse:collapse;font-size:.95rem} .table th,.table td{padding:15px 14px;border-bottom:1px solid var(--border);text-align:left} .table thead th{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-subtle);font-weight:600} .table td{text-align:center;color:var(--text-muted)} .table tbody th{font-weight:500;color:var(--text-soft)} .table__price td{color:var(--text);font-weight:700;font-size:1.05rem} .table .ico,.cmp__list .ico{vertical-align:middle} .ok .ico{color:var(--primary-icon)} .no .ico{color:var(--text-subtle)} .val{color:var(--primary-text);font-weight:600;min-width:26px;display:inline-block} .cmp-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:14px} .cmp{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:22px 20px} .cmp--pro{border-color:var(--primary-border)} .cmp__title{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)} .cmp__price{font-size:1.9rem;font-weight:700;margin:6px 0 16px} .cmp__list{display:flex;flex-direction:column;gap:10px;color:var(--text-muted);font-size:.93rem} .cmp__list li{display:flex;gap:10px;align-items:center} /* ---------- FAQ ---------- */ .faq{border-top:1px solid var(--border)} .faq__item{border-bottom:1px solid var(--border)} .faq__item h3{font-size:inherit;font-weight:inherit;letter-spacing:inherit} .faq__q{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:20px 0;background:none;border:0; text-align:left;font-size:1rem;font-weight:500;line-height:1.4;cursor:pointer;transition:color .25s var(--ease)} .faq__q:hover{color:var(--primary-text)} .faq__icon{position:relative;flex:none;width:14px;height:14px} .faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--primary-icon);transition:transform .3s var(--ease),opacity .3s var(--ease)} .faq__icon::before{top:6px;left:0;width:14px;height:1.5px} .faq__icon::after{left:6px;top:0;width:1.5px;height:14px} .faq__item.is-open .faq__icon::after{transform:rotate(90deg);opacity:0} .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)} .faq__a>p{overflow:hidden;color:var(--text-muted);font-size:.95rem} .faq__item.is-open .faq__a{grid-template-rows:1fr} .faq__item.is-open .faq__a>p{padding-bottom:20px} /* ---------- Lightbox ---------- */ .lightbox{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;gap:8px;padding:20px; background:var(--lightbox-bg);backdrop-filter:blur(6px);animation:fadeIn .22s var(--ease)} .lightbox[hidden]{display:none} .lightbox__figure{margin:0;min-width:0;max-width:min(1100px,86vw)} .lightbox__figure img,.lightbox__figure video{display:block;max-width:100%;max-height:80dvh;margin-inline:auto;object-fit:contain;border-radius:var(--r)} .lightbox__cap{margin-top:12px;text-align:center;color:var(--text-muted);font-size:.85rem} .lightbox__close,.lightbox__nav{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%; background:var(--ghost-hover);border:1px solid var(--border-strong);color:var(--text);cursor:pointer;transition:background-color .25s var(--ease),border-color .25s var(--ease)} .lightbox__close{position:absolute;top:16px;right:16px} .lightbox__nav svg{width:20px;height:20px} .lightbox__nav[hidden]{display:none} .lightbox__nav:hover,.lightbox__close:hover{background:var(--primary-soft);border-color:var(--primary)} @keyframes fadeIn{from{opacity:0}to{opacity:1}} /* ---------- Reveal ---------- */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)} .reveal.is-in{opacity:1;transform:none} .pcard.reveal.is-in:hover{transform:translateY(-3px)} .pcard--request.reveal.is-in:hover{transform:none} /* ---------- Tablet ---------- */ @media (min-width:560px){ .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .steps{grid-template-columns:repeat(2,minmax(0,1fr))} .pinfo__actions{grid-template-columns:repeat(2,minmax(0,1fr))} .show{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:240px} } @media (min-width:640px){ .container{padding-inline:28px} .nav{padding-inline:28px} .buybar{padding-inline:28px} .plans{grid-template-columns:repeat(2,minmax(0,1fr))} .cmp-cards{grid-template-columns:repeat(2,minmax(0,1fr))} .footer__inner{grid-template-columns:1fr auto;align-items:start} .footer__nav{justify-content:flex-end;padding-top:4px} .footer__copy{grid-column:1/-1;padding-top:18px;border-top:1px solid var(--border)} .gal__thumb{flex-basis:84px} } /* ---------- Desktop ---------- */ @media (min-width:900px){ .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .section{padding-block:84px} .section--cta{padding-block:24px 96px} .section__head{margin-bottom:36px} .cta{padding:56px 32px} .hero__inner{padding-block:60px 56px} .hero__title{margin:16px 0 12px} .hero__desc{font-size:.98rem;max-width:52ch} .hero__cta{margin-top:26px} .hero__cta .btn{min-height:48px} } @media (min-width:960px){ body{font-size:16.5px} .logo img{height:28px} .nav-toggle{display:none} /* logo | menu centralizado | WhatsApp + tema */ .header__inner{display:grid;grid-template-columns:1fr auto 1fr;gap:24px} .logo{grid-column:1;grid-row:1} .nav,.nav.is-open{display:contents} .nav__list{grid-column:2;grid-row:1;flex-direction:row;gap:30px;align-items:center} .nav__list a{padding:0;border:0;font-size:.9rem;position:relative} .nav__list a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--primary);transition:width .3s var(--ease)} .nav__list a:hover::after,.nav__list a[aria-current="page"]::after{width:100%} .nav .btn{grid-column:3;grid-row:1;justify-self:end;width:auto;margin-right:50px} .header__tools{grid-column:3;grid-row:1;justify-self:end} .icon-btn{width:40px;height:40px} .pdp{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:start;padding-bottom:64px} .pinfo{position:sticky;top:calc(var(--header-h) + 20px)} .gal__nav{display:grid;opacity:0} .gal__stage:hover .gal__nav,.gal__nav:focus-visible{opacity:1} .buybar{display:none} body.has-buybar .footer{padding-bottom:40px} .about{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:start} .show{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:260px;gap:14px} .wl{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px} .table-wrap{display:block;max-width:820px} .cmp-cards{display:none} } @media (min-width:1180px){ .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))} } /* ---------- Banner de aviso (popup 1080×1350) ---------- */ .aviso{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:24px;background:var(--popup-overlay); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .25s var(--ease)} .aviso__caixa{position:relative;width:min(440px,calc(100vw - 48px),calc((100dvh - 48px) * .8));animation:avisoIn .35s var(--ease)} .aviso__img{display:block;width:100%;height:auto;aspect-ratio:1080/1350;object-fit:cover;border-radius:var(--r-lg); box-shadow:0 30px 80px var(--shadow-media-strong)} .aviso__link{display:block;border-radius:var(--r-lg)} .aviso__fechar{position:absolute;top:-14px;right:-14px;z-index:1;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%; border:1px solid var(--border-strong);background:var(--surface);color:var(--text);box-shadow:var(--shadow-card);cursor:pointer; transition:background-color .2s var(--ease),color .2s var(--ease)} .aviso__fechar svg{width:18px;height:18px} .aviso__fechar:hover{background:var(--primary);border-color:var(--primary);color:var(--primary-contrast)} @media (max-width:520px){ .aviso__fechar{top:10px;right:10px;background:var(--overlay)} } @keyframes avisoIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .reveal{opacity:1;transform:none} }