/* 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:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:var(--header-h)} .header__tools{display:flex;align-items:center;gap:8px} .logo{display:inline-flex;align-items:center;min-width:0;line-height:1} .logo__img{display:block;height:24px;width:auto;max-width:100%} .logo__img--claro{display:none} :root[data-theme="light"] .logo__img--escuro{display:none} :root[data-theme="light"] .logo__img--claro{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) ---------- */ /* sem divisória nem troca de fundo: o hero emenda na seção seguinte */ /* z-index + sem overflow: a lista de sugestões da busca passa por cima da seção seguinte; o brilho fica recortado dentro de .hero__bg */ .hero{position:relative;z-index:20;isolation:isolate;background:var(--background)} .hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none} .hero__bg::before,.hero__bg::after{content:"";position:absolute;left:50%;pointer-events:none;transform:translateX(-50%)} .hero__bg::before{top:-120px;width:min(760px,135%);height:500px;background:radial-gradient(closest-side,var(--hero-glow),transparent 76%);opacity:.5} .hero__bg::after{top:20px;width:min(390px,92%);height:230px;background:radial-gradient(closest-side,var(--hero-glow-accent),transparent 74%);opacity:.65} .hero__inner{display:flex;min-height:255px;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-block:34px} .hero__title{font-size:clamp(1.75rem,4.4vw,2.7rem);font-weight:720;letter-spacing:-.04em;line-height:1.06;margin:0 0 12px;max-width:720px;color:var(--text)} .hero__title span,.hero__title em{display:block} /* frases empilhadas na mesma célula: a altura é a da maior, sem pular o layout */ .hero__title .hero__rot{display:grid;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;perspective:600px} .hero__title .hero__phrase{display:block;grid-area:1/1;opacity:0;transform:translateY(70%) rotateX(-55deg);transform-origin:50% 100%; transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s ease} .hero__phrase.is-in{opacity:1;transform:none} .hero__phrase.is-out{opacity:0;transform:translateY(-70%) rotateX(55deg);transform-origin:50% 0;transition-timing-function:cubic-bezier(.6,0,.8,.2),ease} .hero__phrase.is-reset{transition:none} @media (prefers-reduced-motion:reduce){ .hero__phrase,.hero__phrase.is-out{transform:none;transition:opacity .4s ease} } .hero__title em{font-style:normal;color:var(--primary-display)} .hero__desc{color:var(--text-muted);font-size:clamp(.95rem,1.6vw,1.08rem);max-width:46ch;text-wrap:balance} /* busca do marketplace (filtra a lista de anúncios da Home) */ .hero-search{position:relative;display:flex;align-items:center;gap:10px;width:100%;max-width:560px;height:52px;margin-top:24px;padding:0 18px; border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text-muted);box-shadow:var(--shadow-card); transition:border-color .2s var(--ease),background-color .2s var(--ease)} .hero-search:focus-within{border-color:var(--primary-border);background:var(--surface-secondary)} .hero-search svg{width:20px;height:20px;flex:none} .hero-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:.98rem} .hero-search input::placeholder{color:var(--text-subtle)} .hero-search input::-webkit-search-cancel-button{cursor:pointer} /* sugestões enquanto digita (site.js) */ .hsug{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;max-height:min(460px,62vh);overflow-y:auto;overscroll-behavior:contain; padding:6px 8px 8px;border:1px solid var(--border-strong);border-radius:18px;background:var(--surface);text-align:left;color:var(--text); box-shadow:0 24px 48px -12px rgba(0,0,0,.28);animation:hsugIn .14s var(--ease)} .hsug[hidden]{display:none} @keyframes hsugIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .hsug .msearch__group{margin:10px 8px 4px} .hsug .mres{grid-template-columns:40px minmax(0,1fr) auto;gap:12px;padding:7px 8px} .hsug .mres__img,.hsug .mres__ph{width:40px;height:40px;border-radius:9px} .mres.is-active,.hsug__all.is-active{background:var(--ghost-hover)} .mres mark{background:none;color:var(--primary-text);font-weight:600} .hsug__all{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:6px;padding:11px 12px;border:0; border-top:1px solid var(--border);border-radius:0 0 12px 12px;background:transparent;color:var(--primary-text);font:inherit;font-size:.86rem; font-weight:500;text-align:left;cursor:pointer} .hsug__all:hover{background:var(--ghost-hover)} .hsug__all b{font-weight:700} .hsug__all svg{width:16px;height:16px;flex:none} .hsug__empty{padding:22px 12px;text-align:center} .hsug__loading{padding:16px 12px;color:var(--text-muted);font-size:.86rem;text-align:center} /* ---------- Sections ---------- */ .section{padding-block:60px} .section--compact{padding-block:38px 20px} .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} /* tema claro: títulos em cinza escuro (não preto puro) */ :root[data-theme="light"] .section__title,:root[data-theme="light"] .crow__title{color:#2B2B31} .section__desc{color:var(--text-muted);margin-top:8px} .cat-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} .cat-strip::-webkit-scrollbar{display:none} .cat-strip a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;white-space:nowrap;padding:0 16px;border:1px solid var(--border); border-radius:999px;background:var(--surface);color:var(--text-muted);font-size:.9rem;font-weight:600; transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease)} .cat-strip a:hover{border-color:var(--primary-border);background:var(--primary-soft);color:var(--text);transform:translateY(-1px)} .cat-strip a.is-active,.cat-strip a.is-active:hover{border-color:var(--primary);background:var(--primary);color:var(--primary-contrast)} .cat-strip[hidden]{display:none} /* banners de categoria (Admin → Banners de categorias): mesmo carrossel das linhas de anúncios */ .crow.cat-banners{--cols:3.2;--cgap:8px;margin-bottom:0} .cat-banner{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface); transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)} .cat-banner__img{display:block;aspect-ratio:1080/1450;overflow:hidden;background:var(--surface-secondary)} .cat-banner__img img{display:block;width:100%;height:100%;object-fit:cover} .cat-banner__label{padding:8px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center; font-size:.8rem;font-weight:600;color:var(--text)} a.cat-banner:hover{border-color:var(--primary-border);transform:translateY(-2px)} a.cat-banner:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .cat-banner.is-active{border-color:var(--primary);outline:2px solid var(--primary);outline-offset:-2px} .cat-banners .crow__nav{top:calc(50% - 21px)} /* poucos banners: centraliza; "safe" volta a alinhar à esquerda quando a linha rola, sem cortar o primeiro */ .cat-banners .crow__track{justify-content:safe center} @media (min-width:560px){ .crow.cat-banners{--cols:4.3;--cgap:10px} } @media (min-width:900px){ .crow.cat-banners{--cols:6;--cgap:12px} } @media (min-width:1200px){ .crow.cat-banners{--cols:7} } /* barra do filtro ativo acima da lista de anúncios */ .cat-active{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:18px;padding:0 0 12px; border-bottom:1px solid var(--border);font-size:.9rem;color:var(--text-muted)} .cat-active[hidden]{display:none} .cat-active b{color:var(--text)} .cat-active__clear{padding:0;border:0;background:transparent;color:var(--primary-text);font:inherit;font-weight:600;cursor:pointer} .cat-active__clear:hover{text-decoration:underline} .empty-state{grid-column:1/-1;display:grid;place-items:center;text-align:center;min-height:220px;padding:30px;border:1px dashed var(--border-strong); border-radius:var(--r);background:var(--surface)} .empty-state h3{font-size:1.2rem} .empty-state p{margin-top:6px;color:var(--text-muted)} /* ---------- 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-strong); border-radius:var(--r);overflow:hidden;box-shadow:0 1px 2px rgba(17,17,26,.06),0 10px 24px -6px rgba(17,17,26,.14); 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:0 2px 4px rgba(17,17,26,.06),0 18px 34px -8px rgba(17,17,26,.22)} :root:not([data-theme="light"]) .pcard{box-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 26px -6px rgba(0,0,0,.55)} :root:not([data-theme="light"]) .pcard:hover{box-shadow:0 2px 4px rgba(0,0,0,.35),0 20px 38px -8px rgba(0,0,0,.7)} .pcard:focus-within{border-color:var(--primary)} .pcard__media{position:relative;aspect-ratio:16/9;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:10px;left:10px;z-index:3} .pcard__body{display:flex;flex-direction:column;gap:2px;flex:1;padding:10px 12px} .pcard__cat{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-subtle)} .pcard__name{margin-bottom:8px;min-height:2.6em;font-size:.88rem;font-weight:600;letter-spacing:-.015em;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pcard__link::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit} /* categoria + selos (entrega automática, dinâmico) */ .pcard__catrow{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px} .pcard__top{display:flex;align-items:flex-start} .pcard__badges{display:flex;gap:4px;flex:none} .pbadge{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;cursor:help; transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .pbadge svg{width:12px;height:12px} .pbadge:hover,.pbadge:focus-visible{transform:translateY(-1px)} .pbadge:focus-visible{outline:2px solid currentColor;outline-offset:2px} .pbadge--auto{background:rgba(16,185,129,.14);color:#10B981} .pbadge--dyn{background:rgba(59,130,246,.14);color:#3B82F6} :root[data-theme="light"] .pbadge--auto{background:rgba(4,120,87,.10);color:#059669} :root[data-theme="light"] .pbadge--dyn{background:rgba(37,99,235,.10);color:#2563EB} /* tooltip global ([data-tip]) — posicionado por site.js */ .tip{position:fixed;z-index:400;max-width:min(300px,calc(100vw - 24px));padding:10px 13px;border-radius:10px; background:#2A2A31;color:#F4F4F6;font-size:.8rem;line-height:1.45;box-shadow:0 12px 30px rgba(0,0,0,.28);pointer-events:none; opacity:0;transform:translateY(4px);transition:opacity .15s var(--ease),transform .15s var(--ease)} .tip.is-on{opacity:1;transform:none} .tip b{font-weight:700;color:#fff} .tip::after{content:"";position:absolute;left:var(--tip-x,50%);bottom:-6px;width:12px;height:12px;margin-left:-6px;background:inherit; transform:rotate(45deg);border-radius:2px} .tip--below::after{bottom:auto;top:-6px} .pcard__link:focus-visible{outline:none} .pcard__desc{display:none} /* sem botão: o card inteiro é o link; preço em texto, entre divisórias finas */ .pcard__foot{display:flex;flex-direction:column;align-items:center;gap:1px;margin-top:auto;padding-block:10px; text-align:center; background:linear-gradient(90deg,transparent,var(--primary-border) 25%,var(--primary-border) 75%,transparent) top/100% 2px no-repeat, linear-gradient(90deg,transparent,var(--primary-border) 25%,var(--primary-border) 75%,transparent) bottom/100% 2px no-repeat} .pcard__from{font-size:.6rem;font-weight:500;line-height:1;color:var(--text-subtle)} .pcard__price{color:var(--text);font-size:1.3rem;font-weight:700;letter-spacing:-.03em;line-height:1.15;white-space:nowrap} .pcard__price-mais{margin-left:2px;color:var(--primary-text);font-size:.85em;font-weight:800;vertical-align:top} .pcard__seller{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;margin:auto 0 0;padding-top:10px;position:relative;z-index:5; color:var(--text-muted);font-size:.74rem;line-height:1.2} .pcard__foot+.pcard__seller{margin-top:0} .pcard__seller:hover span{color:var(--primary-text);text-decoration:underline;text-underline-offset:3px} .pcard__sales{flex:none;font-size:inherit;color:var(--text-muted)} .pcard__seller span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pcard__op{flex:none;width:7px;height:7px;border-radius:50%;background:var(--primary);font-style:normal} .pcard__avatar{flex:none;width:20px;height:20px;border-radius:50%;object-fit:cover} .pcard__avatar--letter{display:grid;place-items:center;background:var(--primary);color:var(--primary-contrast);font-size:.66rem;font-weight:700} .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 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 10px} .pcard__cat{font-size:.56rem;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pcard__name{font-size:.88rem;line-height:1.25} .pcard__foot{padding-block:12px} .pcard__name{margin-bottom:8px} .pcard__from{font-size:.58rem} .pcard__price{font-size:1.15rem} .pcard__seller{gap:6px;padding-top:12px;font-size:.72rem} .pcard__avatar{width:20px;height:20px} } /* ---------- Vitrine em linhas por categoria (carrossel) ---------- Título, uma linha de cards com setas circulares e "Ver mais" entre filetes. */ .prows{display:block} .crow{--cols:2.4;--cgap:10px;margin-bottom:44px} .crow:last-child{margin-bottom:0} .crow__title{margin-bottom:14px;font-size:1.25rem;font-weight:600;letter-spacing:-.02em;line-height:1.2} .crow__wrap{position:relative} .crow__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--cols) - 1) * var(--cgap)) / var(--cols)); gap:var(--cgap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity; scrollbar-width:none; /* folga para a sombra dos cards não ser cortada pelo overflow; a margem negativa mantém o alinhamento */ padding:14px 20px 40px;margin:-9px -20px -28px;scroll-padding-inline:20px} .crow__track::-webkit-scrollbar{display:none} .crow__track>*{scroll-snap-align:start} .crow__nav{position:absolute;top:calc(50% - 28px);z-index:6;display:grid;place-items:center;width:42px;height:42px;padding:0; border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);box-shadow:var(--shadow-card); cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease)} .crow__nav[hidden]{display:none} .crow__nav:disabled{opacity:.3;cursor:default} .crow__nav:not(:disabled):hover{background:var(--primary);border-color:var(--primary);color:var(--primary-contrast)} .crow__nav svg{width:20px;height:20px} .crow__nav--prev{left:-10px} .crow__nav--next{right:-10px} .crow__more{display:flex;align-items:center;gap:18px;margin-top:6px} /* linhas laranja que esmaecem para fora, a partir do botão */ .crow__more::before,.crow__more::after{content:"";flex:1;height:1px} .crow__more::before{background:linear-gradient(90deg,transparent,var(--primary))} .crow__more::after{background:linear-gradient(270deg,transparent,var(--primary))} .crow__more-btn{display:inline-flex;align-items:center;gap:10px;padding:5px 5px 5px 18px;border:1px solid var(--primary-border);border-radius:999px; background:var(--surface);color:var(--primary-text);font:inherit;font-size:.84rem;font-weight:600;letter-spacing:-.01em;cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)} .crow__more-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--primary);color:var(--primary-contrast); transition:transform .25s var(--ease)} .crow__more-ico svg{width:14px;height:14px} .crow__more-btn:hover{border-color:var(--primary);box-shadow:0 8px 22px var(--primary-soft);transform:translateY(-1px)} .crow__more-btn:hover .crow__more-ico{transform:translateX(2px)} .crow__more-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px} @media (min-width:560px){ .crow{--cols:3.6;--cgap:12px} } @media (min-width:900px){ .crow{--cols:5;--cgap:14px;margin-bottom:56px} .crow__title{margin-bottom:16px;font-size:1.45rem} } @media (min-width:1200px){ .crow{--cols:6} } /* telas largas: as setas saem para fora da linha de cards, como na referência */ @media (min-width:1520px){ .crow__nav--prev{left:-56px} .crow__nav--next{right:-56px} } /* 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} /* Home: garantias (compra segura, suporte, recompensa) */ .perks__grid{display:grid;gap:12px;margin:0;padding:0;list-style:none} @media (min-width:760px){ .perks__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} } .perk{position:relative;display:flex;align-items:flex-start;gap:14px;padding:20px 22px;border:1px solid var(--border);border-radius:var(--r); background:var(--surface);box-shadow:0 1px 2px rgba(17,17,26,.05),0 10px 24px -10px rgba(17,17,26,.12); transition:border-color .25s var(--ease),transform .25s var(--ease)} .perk:has(.perk__link):hover{border-color:var(--primary-border);transform:translateY(-2px)} .perk__link{position:absolute;inset:0;z-index:1;border-radius:inherit} .perk__link:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .perk__ico{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:var(--primary-soft);color:var(--primary-text)} .perk__ico svg{width:22px;height:22px} .perk__title{font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.3} :root[data-theme="light"] .perk__title{color:#2B2B31} .perk__desc{margin-top:4px;color:var(--text-muted);font-size:.88rem;line-height:1.5} /* Home: bloco central "Veja como você pode vender ou comprar" */ .how__inner{display:flex;flex-direction:column;align-items:center;text-align:center} .how__title{margin-top:10px;font-size:clamp(1.6rem,4.6vw,2.3rem);font-weight:700;letter-spacing:-.035em;line-height:1.1;max-width:20ch;text-wrap:balance} :root[data-theme="light"] .how__title{color:#2B2B31} .how__desc{margin-top:10px;color:var(--text-muted);max-width:46ch;text-wrap:balance} .how__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px} /* Página de passos (/como-funciona/passos/) */ .passos{padding-top:0} .passos__inner{display:flex;flex-direction:column;align-items:center;max-width:760px;text-align:center} .passos__inner .crumbs{align-self:stretch;text-align:left} .passos__tabs{display:inline-flex;gap:4px;margin-top:8px;padding:4px;border:1px solid var(--border);border-radius:999px;background:var(--surface)} .passos__tab{min-height:40px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:var(--text-muted);font:inherit;font-size:.9rem; font-weight:600;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)} .passos__tab:hover{color:var(--text)} .passos__tab.is-active{background:var(--primary);color:var(--primary-contrast)} .passos__tab:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .passos__title{margin-top:26px;font-size:clamp(1.8rem,5.4vw,2.6rem);font-weight:700;letter-spacing:-.04em;line-height:1.08;text-wrap:balance} :root[data-theme="light"] .passos__title{color:#2B2B31} .passos__desc{margin-top:10px;color:var(--text-muted);max-width:48ch;text-wrap:balance} /* linha do tempo vertical */ .passos__lista{position:relative;display:grid;gap:14px;width:100%;margin:36px 0 0;padding:0;list-style:none;text-align:left} .passos__lista::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px; background:linear-gradient(180deg,var(--primary),var(--primary-border) 60%,transparent)} .passo{position:relative;display:flex;align-items:flex-start;gap:16px;animation:passo-in .45s var(--ease) both;animation-delay:calc(var(--i) * 70ms)} .passo__num{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%; background:var(--primary);color:var(--primary-contrast);font-size:.9rem;font-weight:700;box-shadow:0 0 0 6px var(--background)} .passo__body{flex:1;min-width:0;padding:14px 18px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface); transition:border-color .25s var(--ease)} .passo:hover .passo__body{border-color:var(--primary-border)} .passo__title{font-size:1.02rem;font-weight:600;letter-spacing:-.01em} .passo__desc{margin-top:4px;color:var(--text-muted);font-size:.9rem;line-height:1.55} .passos__cta{margin-top:32px} @keyframes passo-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .passo{animation:none} } /* ---------- CTA ---------- */ .section--cta{padding-block:20px 72px} /* sem bloco de fundo: só título, texto e botões sobre a cor da página */ .cta{text-align:center;padding:20px 0} .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-top:48px;background:var(--background-alt)} .footer__inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px;padding-bottom:44px} .footer__about{grid-column:1/-1} .footer__title{margin:0 0 20px;color:var(--text);font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .footer__about-body{display:flex;align-items:center;gap:18px} .footer__mark{flex:none;width:56px;height:56px;border-radius:50%} .footer__tag{margin:0;color:var(--text-muted);font-size:.92rem;line-height:1.65;max-width:52ch} .footer__social{display:flex;gap:6px;margin:22px 0 0 -7px;padding:0;list-style:none} .footer__social a{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--text-muted);transition:color .25s var(--ease),background-color .25s var(--ease)} .footer__social a:hover{color:var(--primary-text);background:var(--ghost-hover)} .footer__social svg{width:21px;height:21px} .footer__links{display:grid;gap:14px;margin:0;padding:0;list-style:none;color:var(--text-muted);font-size:.9rem;line-height:1.4} .footer__links a{transition:color .25s var(--ease)} .footer__links a:hover{color:var(--primary-text)} .footer__bottom{border-top:1px solid var(--border);padding-block:20px;color:var(--text-subtle);font-size:.82rem;line-height:1.6;text-align:center} .footer__bottom p{margin:0} /* celular: bloco "Sobre" empilhado (logo, texto, redes) e links em 2 colunas compactas */ @media (max-width:639px){ .footer{padding-top:36px} .footer__inner{gap:28px 16px;padding-bottom:28px} .footer__about{padding-bottom:28px;border-bottom:1px solid var(--border)} .footer__about .footer__title{display:none} .footer__about-body{flex-direction:column;align-items:flex-start;gap:14px} .footer__mark{width:44px;height:44px} .footer__tag{font-size:.88rem;line-height:1.6} .footer__social{gap:8px;margin:18px 0 0} .footer__social a{width:40px;height:40px;border:1px solid var(--border);border-radius:12px;background:var(--surface)} .footer__social svg{width:19px;height:19px} .footer__title{margin-bottom:14px;font-size:.7rem;color:var(--text-subtle)} .footer__links{gap:12px;font-size:.86rem} .footer__bottom{padding-block:16px;font-size:.76rem} } /* ========================================================================== 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__desc p + p{margin-top:10px} .pinfo__desc p,.about__body p{overflow-wrap:anywhere} .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: mídia em cima, legenda embaixo */ .show{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:236px;gap:12px} .show__item{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;padding:0;text-align:left;cursor:pointer; border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface); transition:border-color .3s var(--ease),box-shadow .3s var(--ease)} .show__item:hover{border-color:var(--primary-border);box-shadow:var(--shadow-card)} .show__media{position:relative;display:block;overflow:hidden; background:radial-gradient(90% 90% at 50% 0%,var(--secondary-glow),transparent 62%),var(--surface-secondary)} .show__media img,.show__media video{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;transition:transform .5s var(--ease)} .show__item:hover .show__media img{transform:scale(1.04)} .show__media img.has-mask{inset:auto;left:50%;top:8%;height:84%;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 .show__media img.has-mask{transform:translateX(-50%) scale(1.04)} .show__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%; background:var(--primary);color:var(--primary-contrast);box-shadow:0 10px 26px var(--shadow-media-strong)} .show__play svg{width:20px;height:20px;margin-left:2px} .show__info{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-top:1px solid var(--border)} .show__title{min-width:0;font-size:.88rem;font-weight:600;line-height:1.3;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .show__hint{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:.74rem;font-weight:500;color:var(--text-subtle);transition:color .25s var(--ease)} .show__hint svg{width:13px;height:13px} .show__item:hover .show__hint,.show__item:focus-visible .show__hint{color:var(--primary-text)} @media (max-width:559px){ .show__info{padding:10px 11px} .show__title{font-size:.8rem} .show__hint-texto{display:none} } /* 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)} /* ---------- 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:256px} } @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:repeat(3,minmax(0,1fr))} .gal__thumb{flex-basis:84px} } /* ---------- Desktop ---------- */ @media (min-width:900px){ .pgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .section{padding-block:84px} .section--compact{padding-block:44px 26px} .section--cta{padding-block:24px 96px} .section__head{margin-bottom:36px} .cta{padding:32px 0} .footer{padding-top:64px} .footer__inner{grid-template-columns:minmax(0,2.3fr) repeat(3,minmax(0,1fr));gap:40px;padding-bottom:64px} .footer__about{grid-column:auto;padding-right:24px} .hero__inner{min-height:300px;padding-block:42px} } @media (min-width:960px){ body{font-size:16.5px} .logo__img{height:27px} .nav-toggle{display:none} .header__inner{grid-template-columns:auto 1fr auto;gap:18px} .logo{grid-column:1;grid-row:1} .nav,.nav.is-open{grid-column:2;grid-row:1;justify-self:end;position:static;display:flex;flex-direction:row;align-items:center;gap:18px; padding:0;border:0;background:transparent;max-height:none;overflow:visible} .nav__list{flex-direction:row;gap:20px;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{width:auto} .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:280px;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(5,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}} /* ---------- Chat de atendimento (assets/js/chat.js) ---------- Botão flutuante + popup de chamada + painel (bottom sheet no celular). Acima do header e da barra de compra; abaixo do lightbox e do banner. */ .pchat{--pchat-bot:var(--surface-secondary);--pchat-corpo:var(--background-alt); position:fixed;right:20px;bottom:20px;z-index:120;font-size:16px;line-height:1.5} :root[data-theme="light"] .pchat{--pchat-bot:var(--surface)} .pchat [hidden]{display:none !important} .pchat button{font:inherit} .pchat__avatar{position:relative;display:block;flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--primary)} /* LOGOAVATAR.png é 16:9 com o círculo no centro: cover + leve zoom preenche o recorte redondo */ .pchat__avatar img{width:100%;height:100%;object-fit:cover;transform:scale(1.07)} .pchat__avatar--sm{width:44px;height:44px} .pchat__avatar--msg{width:28px;height:28px} /* botão flutuante */ .pchat__fab{position:relative;z-index:3;display:grid;place-items:center;width:70px;height:70px;padding:0;border-radius:50%;cursor:pointer; border:0;background:var(--primary);color:var(--btn-secondary-text); /* sombra curta e suave: não deixa halo escuro marcado em volta do botão */ box-shadow:0 4px 12px rgba(255,117,31,.28); transition:transform .3s var(--ease),background-color .3s var(--ease),opacity .25s var(--ease)} .pchat__fab:hover{transform:translateY(-2px) scale(1.04)} .pchat__fab::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--primary);opacity:0;animation:pchatPulse 2.8s var(--ease) infinite;pointer-events:none} .pchat__fab-avatar,.pchat__fab-fechar{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .25s var(--ease),transform .3s var(--ease)} .pchat__fab-avatar .pchat__avatar{width:100%;height:100%} .pchat__fab-fechar{opacity:0;transform:rotate(-60deg) scale(.6)} .pchat__fab-fechar svg{width:24px;height:24px} .pchat__badge{position:absolute;top:-3px;right:-3px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px; border:2px solid var(--background);background:#E5322D;color:#FFFFFF;font-size:.72rem;font-weight:700;line-height:1;animation:pchatPop .4s var(--ease)} .pchat.is-aberto .pchat__fab{background:var(--btn-secondary)} .pchat.is-aberto .pchat__fab::before{display:none} .pchat.is-aberto .pchat__fab-avatar{opacity:0;transform:rotate(60deg) scale(.6)} .pchat.is-aberto .pchat__fab-fechar{opacity:1;transform:none} /* popup de chamada */ .pchat__teaser{position:absolute;right:0;bottom:calc(100% + 14px);z-index:2;width:min(310px,calc(100vw - 40px)); border:1px solid var(--primary-border);border-radius:18px;background:var(--surface);box-shadow:0 20px 50px var(--shadow-media-strong); opacity:0;transform:translateY(14px) scale(.96);transform-origin:bottom right;transition:opacity .35s var(--ease),transform .35s var(--ease)} .pchat__teaser.is-in{opacity:1;transform:none} .pchat__teaser::after{content:"";position:absolute;right:24px;bottom:-7px;width:14px;height:14px;transform:rotate(45deg); background:var(--surface);border-right:1px solid var(--primary-border);border-bottom:1px solid var(--primary-border)} .pchat__teaser-corpo{display:flex;align-items:flex-start;gap:12px;width:100%;padding:15px 40px 15px 15px;border:0;border-radius:inherit; background:linear-gradient(135deg,var(--primary-soft),transparent 70%);color:var(--text);text-align:left;cursor:pointer} .pchat__teaser-textos{display:flex;flex-direction:column;gap:3px;min-width:0} .pchat__teaser-titulo{font-size:.9rem;font-weight:600;line-height:1.35} .pchat__teaser-texto{font-size:.8rem;color:var(--text-muted);line-height:1.45} .pchat__teaser-cta{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:.82rem;font-weight:700;color:var(--primary-text)} .pchat__teaser-cta svg{width:15px;height:15px;transition:transform .25s var(--ease)} .pchat__teaser-corpo:hover .pchat__teaser-cta svg{transform:translateX(3px)} .pchat__teaser-fechar{position:absolute;top:8px;right:8px;z-index:1;display:grid;place-items:center;width:28px;height:28px;padding:0;border-radius:50%; border:0;background:var(--ghost-hover);color:var(--text-muted);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)} .pchat__teaser-fechar:hover{background:var(--primary-soft);color:var(--text)} .pchat__teaser-fechar svg{width:14px;height:14px} /* painel */ .pchat__painel{position:absolute;right:0;bottom:calc(100% + 14px);z-index:2;display:flex;flex-direction:column; width:min(400px,calc(100vw - 40px));height:min(640px,calc(100dvh - 120px));overflow:hidden; border:1px solid var(--border-strong);border-radius:22px;background:var(--surface);box-shadow:0 30px 80px var(--shadow-media-strong); transform-origin:bottom right;animation:pchatIn .3s var(--ease)} .pchat__topo{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;border-bottom:1px solid var(--border); background:linear-gradient(120deg,var(--primary-soft),transparent 65%),var(--surface)} .pchat__online{position:relative;flex:none} .pchat__online::after,.pchat__status::before{content:"";border-radius:50%;background:var(--success)} .pchat__online::after{position:absolute;right:0;bottom:0;width:12px;height:12px;border:2px solid var(--surface)} .pchat__quem{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3} .pchat__nome{font-size:.98rem;font-weight:700;letter-spacing:-.01em} .pchat__status{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--text-muted)} .pchat__status::before{width:7px;height:7px;animation:pchatBlink 2s ease-in-out infinite} .pchat__fechar{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:0;background:transparent;color:var(--text-muted);cursor:pointer; transition:background-color .2s var(--ease),color .2s var(--ease)} .pchat__fechar:hover{background:var(--ghost-hover);color:var(--text)} .pchat__fechar svg{width:20px;height:20px} .pchat__corpo{flex:1;display:flex;flex-direction:column;gap:10px;padding:18px 14px 20px;overflow-y:auto;overscroll-behavior:contain;background:var(--pchat-corpo)} /* mensagens */ .pchat__linha{display:flex;align-items:flex-end;gap:8px;animation:pchatMsg .32s var(--ease) both} .pchat__linha--eu{justify-content:flex-end} .pchat__pilha{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;max-width:86%} .pchat__balao{padding:10px 14px;border:1px solid var(--border);border-radius:18px 18px 18px 6px;background:var(--pchat-bot);color:var(--text-soft); font-size:.9rem;line-height:1.5;overflow-wrap:anywhere;animation:pchatMsg .32s var(--ease) both} .pchat__balao p + p{margin-top:8px} .pchat__balao--eu{max-width:86%;border-color:var(--primary);border-radius:18px 18px 6px 18px;background:var(--primary);color:var(--primary-contrast);font-weight:500} .pchat__digitando{display:inline-flex;align-items:center;gap:4px;padding:14px 16px} .pchat__digitando i{width:7px;height:7px;border-radius:50%;background:var(--text-subtle);animation:pchatDot 1.2s ease-in-out infinite} .pchat__digitando i:nth-child(2){animation-delay:.16s} .pchat__digitando i:nth-child(3){animation-delay:.32s} /* respostas rápidas e CTAs (alinhados ao balão, depois do avatar) */ .pchat__opcoes,.pchat__acoes{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-left:36px} .pchat__opcao{display:flex;align-items:center;gap:9px;max-width:100%;min-height:44px;padding:9px 14px;border:1.5px solid var(--primary-border);border-radius:14px; background:var(--surface);color:var(--text);font-size:.86rem;font-weight:500;line-height:1.35;text-align:left;cursor:pointer; animation:pchatMsg .32s var(--ease) both;transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)} .pchat__opcao:hover{border-color:var(--primary);background:var(--primary-soft);transform:translateX(2px)} .pchat__opcoes .pchat__opcao:nth-child(2){animation-delay:.05s} .pchat__opcoes .pchat__opcao:nth-child(3){animation-delay:.1s} .pchat__opcoes .pchat__opcao:nth-child(4){animation-delay:.15s} .pchat__opcoes .pchat__opcao:nth-child(n+5){animation-delay:.2s} .pchat__emoji{flex:none;font-size:1.05rem;line-height:1} .pchat__opcao--mais{border-style:dashed} .pchat__acao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid transparent;border-radius:999px; font-size:.87rem;font-weight:600;line-height:1.2;text-align:center;animation:pchatMsg .32s var(--ease) both; transition:transform .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease)} .pchat__acao svg{width:18px;height:18px;flex:none} .pchat__acao:hover{transform:translateY(-1px)} .pchat__acao--whatsapp{background:var(--success);color:var(--success-contrast)} .pchat__acao--whatsapp:hover{background:var(--success-hover)} .pchat__acao--comunidade{background:var(--btn-secondary);color:var(--btn-secondary-text)} .pchat__acao--comunidade svg{color:var(--success)} .pchat__acao--comunidade:hover{background:var(--btn-secondary-hover)} .pchat__acao--interno{background:var(--primary);color:var(--primary-contrast)} .pchat__acao--interno:hover{background:var(--primary-hover)} .pchat__acao--externo{background:var(--surface);border-color:var(--border-strong);color:var(--text)} .pchat__acao--externo:hover{border-color:var(--border-hover)} .pchat__fundo{position:fixed;inset:0;z-index:1;background:var(--popup-overlay);animation:fadeIn .25s var(--ease)} /* Central de ajuda DroppaX: suporte, faixa do ticket e formulário */ .pchat__digitando-txt{margin-left:6px;font-size:.76rem;color:var(--text-subtle)} .pchat__opcao--suporte{border-color:var(--primary);background:var(--primary);color:var(--primary-contrast);font-weight:600} .pchat__opcao--suporte:hover{border-color:var(--primary-hover);background:var(--primary-hover)} .pchat__opcao--suporte svg{width:18px;height:18px;flex:none} .pchat__ticket{display:grid;gap:2px;padding:10px 16px;border-bottom:1px solid var(--border);background:rgba(37,211,102,.08);font-size:.8rem; line-height:1.45;color:var(--text-muted);animation:pchatMsg .32s var(--ease) both} .pchat__ticket-titulo{display:flex;align-items:center;gap:7px;font-size:.86rem;color:var(--text)} .pchat__ticket-ponto{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(37,211,102,.22)} .pchat__ticket-tempo{font-weight:600;color:var(--text-soft)} .pchat__form{display:grid;gap:10px;margin-left:36px;padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--pchat-bot); animation:pchatMsg .32s var(--ease) both} .pchat__campo{display:grid;gap:5px;font-size:.78rem;font-weight:600;color:var(--text-muted)} .pchat__campo input,.pchat__campo select,.pchat__campo textarea{width:100%;min-height:40px;padding:8px 11px;border:1px solid var(--border-strong);border-radius:10px; background:var(--surface);color:var(--text);font:inherit;font-size:.88rem;font-weight:400;outline:none;transition:border-color .2s var(--ease)} .pchat__campo textarea{min-height:76px;resize:vertical;line-height:1.45} .pchat__campo input:focus,.pchat__campo select:focus,.pchat__campo textarea:focus{border-color:var(--primary)} .pchat__erro{min-height:0;margin:0;color:#E5322D;font-size:.78rem} .pchat__erro:empty{display:none} .pchat__enviar{min-height:44px;border:0;border-radius:999px;background:var(--primary);color:var(--primary-contrast);font-size:.88rem;font-weight:600;cursor:pointer; transition:background-color .2s var(--ease)} .pchat__enviar:hover{background:var(--primary-hover)} .pchat__enviar:disabled{opacity:.7;cursor:progress} .pchat__voltar{padding:4px;border:0;background:transparent;color:var(--text-muted);font-size:.8rem;cursor:pointer} .pchat__voltar:hover{color:var(--text)} @keyframes pchatIn{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}} @keyframes pchatSheet{from{transform:translateY(100%)}to{transform:none}} @keyframes pchatMsg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes pchatDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} @keyframes pchatPulse{0%{opacity:.55;transform:scale(.92)}70%,100%{opacity:0;transform:scale(1.25)}} @keyframes pchatPop{from{transform:scale(0)}to{transform:scale(1)}} @keyframes pchatBlink{50%{opacity:.4}} /* página do projeto: sobe acima da barra de compra fixa */ @media (max-width:959px){ body.has-buybar .pchat{bottom:calc(86px + env(safe-area-inset-bottom))} } /* celular: painel vira bottom sheet */ @media (max-width:560px){ .pchat{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))} .pchat__teaser{width:min(300px,calc(100vw - 32px))} .pchat__painel{position:fixed;left:0;right:0;bottom:0;width:auto;height:min(88dvh,calc(100dvh - 24px)); border-width:1px 0 0;border-radius:22px 22px 0 0;animation:pchatSheet .34s var(--ease)} .pchat__topo{padding-top:18px;position:relative} .pchat__topo::before{content:"";position:absolute;top:7px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:999px;background:var(--border-strong)} .pchat__corpo{padding-bottom:calc(20px + env(safe-area-inset-bottom))} .pchat.is-aberto .pchat__fab{opacity:0;pointer-events:none;transform:scale(.8)} } body.pchat-travado{overflow:hidden} /* ========================================================================== AUTENTICAÇÃO / CONTA DROPPAX ========================================================================== */ .auth-page{min-height:calc(100dvh - var(--header-h));background: radial-gradient(650px 360px at 18% 0%,var(--secondary-soft),transparent 70%), radial-gradient(520px 300px at 86% 18%,var(--primary-soft),transparent 72%), var(--background)} .auth-shell{width:min(1080px,100%);margin-inline:auto;padding:48px 20px 72px;display:grid;gap:24px} .auth-shell--wide{width:min(1160px,100%)} .auth-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:560px} .auth-copy h1{font-size:clamp(2rem,6vw,3.6rem);font-weight:700;letter-spacing:-.045em} .auth-copy p{color:var(--text-muted);max-width:58ch} .auth-card{display:grid;gap:16px;width:100%;padding:22px;border:1px solid var(--border);border-radius:var(--r-lg); background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:var(--shadow-card)} .auth-card h2{font-size:1.25rem} .auth-field{display:grid;gap:7px} .auth-field span,.auth-check{font-size:.84rem;color:var(--text-muted)} .auth-field input{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--r-sm); background:var(--surface-secondary);color:var(--text);font:inherit;outline:none;transition:border-color .2s var(--ease),background-color .2s var(--ease)} .auth-field input:focus{border-color:var(--primary-border);background:var(--surface)} .auth-check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;line-height:1.45} .auth-check input{margin-top:3px;accent-color:var(--primary)} .auth-status{min-height:22px;color:var(--text-muted);font-size:.86rem} .auth-status--erro{color:#F87171} .auth-status--ok{color:var(--success)} .auth-link{justify-self:center;border:0;background:transparent;color:var(--primary-text);font-weight:600;cursor:pointer} .auth-link:hover{text-decoration:underline} .auth-alt{color:var(--text-muted);font-size:.9rem;text-align:center} .auth-alt a{color:var(--primary-text);font-weight:600} .auth-help{font-size:.9rem;color:var(--text-muted);line-height:1.55} .auth-shell--reset{width:min(620px,100%);min-height:calc(100dvh - var(--header-h));place-items:center;align-content:center;padding-block:36px} .auth-shell--reset .auth-copy{align-items:center;text-align:center} .auth-shell--reset .auth-card{max-width:520px;margin-inline:auto} .seller-state{display:grid;gap:12px;margin-top:4px} body[data-page="login"] .auth-shell, body[data-page="signup"] .auth-shell, body[data-page="seller-start"] .auth-shell{ width:min(620px,100%); min-height:calc(100dvh - var(--header-h)); place-items:center; align-content:center; padding-block:36px; } body[data-page="login"] .auth-copy, body[data-page="signup"] .auth-copy, body[data-page="seller-start"] .auth-copy{ align-items:center; text-align:center; } body[data-page="login"] .auth-card, body[data-page="signup"] .auth-card, body[data-page="seller-start"] .auth-card{ max-width:520px; margin-inline:auto; } @media (min-width:860px){ .auth-shell{grid-template-columns:minmax(0,1fr) minmax(360px,430px);align-items:center} .auth-shell--wide{grid-template-columns:minmax(0,.9fr) minmax(420px,520px)} body[data-page="login"] .auth-shell, body[data-page="signup"] .auth-shell, body[data-page="seller-start"] .auth-shell{grid-template-columns:minmax(0,1fr)} .auth-card{padding:28px} } /* auth em popup sobre a página atual */ body.auth-modal-open{overflow:hidden} .auth-modal[hidden]{display:none !important} .auth-modal{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:18px} .auth-modal__backdrop{position:absolute;inset:0;background:rgba(18,18,32,.64);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .auth-modal__panel{position:relative;z-index:1;width:min(500px,calc(100vw - 32px));max-height:min(90dvh,680px);overflow-y:auto; padding:28px 30px 26px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 30px 90px var(--shadow-media-strong)} .auth-modal__close{position:absolute;top:13px;right:14px;display:grid;place-items:center;width:38px;height:38px;border:0;background:transparent; color:var(--primary-text);font-size:2rem;line-height:1;cursor:pointer;border-radius:50%} .auth-modal__close:hover{background:var(--ghost-hover)} .auth-modal__title{margin:8px 42px 22px;text-align:center;font-size:clamp(1.55rem,4.5vw,2rem);font-weight:700;letter-spacing:-.035em} .auth-modal__form{display:grid;gap:12px} .auth-modal__form[hidden]{display:none !important} .auth-modal__row{display:grid;gap:10px} .auth-modal .auth-field span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .auth-modal .auth-field input{min-height:50px;padding-inline:16px;background:var(--surface);color:var(--text);font-size:16px} .auth-modal .auth-field input::placeholder{color:var(--text-muted);opacity:1} .auth-modal .auth-check{margin-top:2px} .auth-modal .auth-actions{display:flex;justify-content:center;margin-top:-2px} .auth-modal .auth-actions[hidden]{display:none !important} .auth-modal .btn{min-height:50px;margin-top:6px;text-transform:none} .auth-modal .auth-link{font-size:.94rem;color:var(--text-muted)} .auth-modal .auth-alt{font-size:.94rem} @media (min-width:620px){ .auth-modal__row{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .auth-modal{padding:12px} .auth-modal__panel{width:100%;padding:24px 18px 20px;border-radius:16px} .auth-modal__title{margin-inline:34px;font-size:1.55rem} } /* ---------- Header logado (menu da conta) ---------- */ .umenu{position:relative;display:flex;align-items:center;gap:8px} .umenu__bell{position:relative;border-color:transparent} .umenu__bell svg{width:21px;height:21px} .umenu__badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px; background:var(--primary);color:var(--primary-contrast);font-size:.62rem;font-weight:700;line-height:16px;text-align:center} .umenu__btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:50%; background:var(--surface);cursor:pointer;overflow:hidden} .umenu__btn:hover{border-color:var(--primary-border)} .umenu__avatar{width:100%;height:100%;border-radius:50%;object-fit:cover} .umenu__avatar--letter{display:grid;place-items:center;background:var(--primary-soft);color:var(--primary-text);font-weight:700} .umenu__panel{position:absolute;top:calc(100% + 10px);right:0;z-index:120;width:min(280px,calc(100vw - 24px));display:grid;gap:12px;padding:14px; border:1px solid var(--border);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-card)} .umenu__panel[hidden]{display:none} .umenu__head{display:flex;align-items:center;gap:10px;min-width:0} .umenu__head .umenu__avatar{width:40px;height:40px;flex:none} .umenu__who{display:grid;min-width:0;line-height:1.3} .umenu__who span{font-size:.78rem;color:var(--text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .umenu__links{display:grid;border-top:1px solid var(--border);padding-top:6px} .umenu__links a,.umenu__links button{display:block;width:100%;padding:9px 6px;border:0;border-radius:8px;background:transparent; color:var(--text-muted);font-size:.88rem;text-align:left;cursor:pointer} .umenu__links a:hover,.umenu__links button:hover{background:var(--ghost-hover);color:var(--text)} .umenu__scroll{display:grid;gap:12px} /* itens exclusivos de cada breakpoint: .umenu__m só no celular, .umenu__d só no desktop */ .umenu__m{display:none !important} /* ---------- Notificações (popup do sino + central em /conta/notificacoes) ---------- */ .npop[hidden]{display:none} .npop{position:fixed;z-index:190;top:var(--ntop,72px);right:var(--nright,16px);width:min(480px,calc(100vw - 24px))} .npop__backdrop,.npop__head-m{display:none} .npop.is-empty .npop__panel{height:auto} .npop__panel{display:grid;grid-template-columns:60px minmax(0,1fr);height:min(580px,calc(100dvh - var(--ntop,72px) - 16px));overflow:hidden; border:1px solid var(--border);border-radius:var(--r);background:var(--surface);box-shadow:0 18px 48px var(--shadow-media);outline:none; animation:npopIn .18s var(--ease)} @keyframes npopIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .npop__rail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;border-right:1px solid var(--border);background:var(--background-alt)} .npop__filter{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--r-sm); background:transparent;color:var(--text-muted);font:inherit;cursor:pointer;transition:background-color .15s var(--ease),color .15s var(--ease)} .npop__filter svg{width:20px;height:20px} .npop__filter:hover{background:var(--ghost-hover);color:var(--text)} .npop__filter[aria-selected="true"]{background:var(--primary-soft);color:var(--primary-text)} .npop__flabel{display:none} .npop__count{position:absolute;top:1px;right:-1px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--primary); color:var(--primary-contrast);font-size:.6rem;font-weight:700;line-height:16px;text-align:center} .npop__count[hidden]{display:none} .npop__filter::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;z-index:2;padding:5px 9px;border-radius:8px; background:var(--text);color:var(--background);font-size:.74rem;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0; transform:translate(-4px,-50%);transition:opacity .15s var(--ease),transform .15s var(--ease)} .npop__filter:hover::after,.npop__filter:focus-visible::after{opacity:1;transform:translate(0,-50%)} .npop__main{display:flex;flex-direction:column;min-width:0;min-height:0} .npop__top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 16px 6px} .npop__title{font-size:1rem;font-weight:600} .npop__readall{padding:4px 0;border:0;background:transparent;color:var(--primary-text);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer} .npop__readall:hover{text-decoration:underline} .npop__readall[hidden]{display:none} .npop__list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 8px 8px} .npop__foot{padding:10px 12px;border-top:1px solid var(--border)} .npop__more{display:block;width:100%;margin-top:4px;padding:10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--primary-text); font:inherit;font-size:.84rem;font-weight:600;cursor:pointer} .npop__more:hover{background:var(--ghost-hover)} .npop__empty{display:grid;justify-items:center;gap:4px;padding:36px 20px;text-align:center;color:var(--text-muted);font-size:.84rem} .npop__empty svg{width:32px;height:32px;margin-bottom:6px;color:var(--text-subtle)} .npop__empty-title{font-size:.92rem;font-weight:600;color:var(--text)} .nitem{display:grid;grid-template-columns:36px minmax(0,1fr) 8px;gap:12px;align-items:start;width:100%;padding:12px 10px;border:0; border-radius:var(--r-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .15s var(--ease)} .nitem:hover{background:var(--ghost-hover)} .nitem__icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--surface-secondary);color:var(--text-muted)} .nitem__icon svg{width:18px;height:18px} .nitem__icon--order{background:var(--primary-soft);color:var(--primary-text)} .nitem__icon--sale{background:rgba(52,211,153,.12);color:#34D399} .nitem__icon--message{background:var(--secondary-soft);color:var(--secondary-text)} :root[data-theme="light"] .nitem__icon--sale{background:rgba(4,120,87,.09);color:#047857} .nitem__body{display:grid;gap:2px;min-width:0} .nitem__title{font-size:.88rem;font-weight:500;line-height:1.35;color:var(--text-soft)} .nitem.is-unread .nitem__title{font-weight:600;color:var(--text)} .nitem__msg{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.82rem;line-height:1.45;color:var(--text-muted)} .nitem__time{margin-top:2px;font-size:.74rem;color:var(--text-subtle)} .nitem__dot{width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--primary)} .nsk{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:12px 10px} .nsk span{display:block;height:36px;border-radius:8px;background:linear-gradient(90deg,var(--skeleton),var(--skeleton-hi),var(--skeleton)); background-size:200% 100%;animation:shimmer 1.4s linear infinite} .nsk span:first-child{border-radius:50%} /* central (inline) e popup no mobile: filtros viram chips roláveis */ .npop__panel--inline{grid-template-columns:minmax(0,1fr);height:auto;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;animation:none} .npop__panel--inline .npop__top{padding:4px 0 6px} .npop__panel--inline .npop__list{overflow:visible;padding:0} .npop__panel--inline .npop__rail{flex-direction:row;gap:8px;padding:0 0 8px;overflow-x:auto;border:0;background:transparent;scrollbar-width:none} .npop__panel--inline .npop__filter{display:inline-flex;flex:none;gap:6px;width:auto;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:999px;font-size:.84rem} .npop__panel--inline .npop__filter svg{width:16px;height:16px} .npop__panel--inline .npop__flabel{display:inline} .npop__panel--inline .npop__count{position:static} .npop__panel--inline .npop__filter::after{display:none} /* No celular o popup do sino vira um card logo abaixo do header, com a trilha de categorias em pé à esquerda (ver "Header no celular", no fim). */ @media (max-width:959px){ .npop{top:calc(var(--header-h) + 8px);right:var(--hcard-gap);left:var(--hcard-gap);width:auto} .npop__backdrop{position:fixed;inset:0;display:block;background:transparent} .npop__panel{position:relative;grid-template-columns:52px minmax(0,1fr);height:min(70dvh,560px); border-radius:var(--hcard-r);box-shadow:var(--hcard-shadow)} .npop.is-empty .npop__panel{height:auto} .npop__rail{gap:4px;padding:10px 0} .npop__filter{width:36px;height:36px} .npop__filter svg{width:19px;height:19px} .npop__filter::after{display:none} .npop__top{min-height:44px;padding:10px 14px 4px} .npop__title{font-size:.95rem} .npop__list{padding:0 6px 6px} .npop__foot{padding:10px} } @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} } /* ========================================================================== HEADER NO CELULAR (≤959px) — menu, logo, busca, notificações, carrinho e conta Acima de 960px nada aqui vale: o desktop segue com logo + nav + sino + conta. ========================================================================== */ :root{ --hcard-gap:10px; /* respiro lateral dos cards */ --hcard-r:16px; --hcard-shadow:0 22px 56px var(--shadow-media-strong); } /* No celular o logotipo vira o ícone redondo (object-fit recorta o PNG 16:9) */ .logo__icone{display:none} /* Botões quadrados do header (busca, sino, carrinho e conta) */ .hbtn{position:relative} .hbtn svg{width:21px;height:21px} .hbadge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px; background:var(--primary);color:var(--primary-contrast);font-size:.62rem;font-weight:700;line-height:16px;text-align:center} .hbadge[hidden]{display:none} /* busca, carrinho e conta são exclusivos do celular */ .hbtn--search,.hbtn--user,.hcart{display:none} /* Estado vazio centralizado (carrinho) */ .hempty{display:grid;justify-items:center;align-content:center;gap:4px;min-height:200px;padding:32px 24px;text-align:center} .hempty svg{width:38px;height:38px;margin-bottom:8px;color:var(--text-subtle)} .hempty__title{font-size:.98rem;font-weight:600;color:var(--text)} .hempty__text{font-size:.84rem;color:var(--text-muted)} /* Lista do carrinho quando há itens */ .hcart__list{display:grid;gap:2px;padding:8px} .hcart__item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border-radius:var(--r-sm)} .hcart__item img,.hcart__ph{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--surface-secondary)} .hcart__body{display:grid;gap:1px;min-width:0} .hcart__name{font-size:.86rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hcart__meta{font-size:.76rem;color:var(--text-subtle)} .hcart__price{font-size:.86rem;font-weight:600} .hcart__foot{display:grid;gap:8px;padding:10px;border-top:1px solid var(--border)} .hcart__total{display:flex;align-items:center;justify-content:space-between;font-size:.88rem} .hcart__total b{font-size:1rem} .hcart__nota{display:block;font-size:.72rem;line-height:1.4;color:var(--text-subtle)} /* Busca em tela cheia */ .msearch{position:fixed;inset:0;z-index:220;display:flex;flex-direction:column;background:var(--background);animation:fadeIn .15s var(--ease)} .msearch[hidden]{display:none} .msearch__bar{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px; border-bottom:1px solid var(--border)} .msearch__field{display:flex;align-items:center;gap:10px;flex:1;min-width:0;height:46px;padding:0 14px; border:1px solid var(--border-strong);border-radius:12px;background:var(--surface)} .msearch__field svg{flex:none;width:19px;height:19px;color:var(--text-subtle)} .msearch__input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--text);font:inherit;font-size:.95rem;outline:none} .msearch__input::placeholder{color:var(--text-subtle)} .msearch__input::-webkit-search-cancel-button,.msearch__input::-webkit-search-decoration{-webkit-appearance:none;display:none} .msearch__x{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px; background:transparent;color:var(--text);cursor:pointer} .msearch__x svg{width:22px;height:22px} .msearch__x:hover{background:var(--ghost-hover)} .msearch__body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 12px calc(env(safe-area-inset-bottom,0px) + 24px)} .msearch__body.is-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:24px} .msearch__body.is-center svg{width:42px;height:42px;margin-bottom:8px;color:var(--text-subtle)} .msearch__hint-title{font-size:1rem;font-weight:600;color:var(--text)} .msearch__hint-text{font-size:.85rem;color:var(--text-muted)} .msearch__group{margin:10px 4px 4px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle)} .mres{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 6px;border-radius:var(--r-sm)} .mres:hover{background:var(--ghost-hover)} .mres__img,.mres__ph{width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--surface-secondary)} .mres__ph{display:grid;place-items:center;color:var(--text-subtle);font-weight:700} .mres__ph--round,.mres__img--round{border-radius:50%} .mres__body{display:grid;gap:2px;min-width:0} .mres__title{font-size:.9rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mres__meta{font-size:.78rem;color:var(--text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mres__price{font-size:.86rem;font-weight:600;white-space:nowrap} /* Gaveta de categorias (abre pelas 3 linhas, só no celular) */ .cdrawer{position:fixed;inset:0;z-index:210} .cdrawer[hidden]{display:none} .cdrawer__backdrop{position:absolute;inset:0;background:var(--popup-overlay);animation:fadeIn .2s var(--ease)} .cdrawer__panel{position:absolute;top:0;bottom:0;left:0;display:flex;flex-direction:column;width:min(82vw,360px); padding-top:env(safe-area-inset-top,0px);background:var(--surface);outline:none; box-shadow:0 0 60px var(--shadow-media-strong);animation:cdrawerIn .24s var(--ease)} @keyframes cdrawerIn{from{transform:translateX(-100%)}to{transform:none}} .cdrawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 14px 8px 18px} .cdrawer__title{font-size:1.32rem;font-weight:600;line-height:1.2} .cdrawer__x{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%; background:var(--surface-secondary);color:var(--text);cursor:pointer} .cdrawer__x svg{width:20px;height:20px} .cdrawer__search{display:flex;align-items:center;gap:10px;height:48px;margin:6px 16px 10px;padding:0 14px; border:1px solid var(--border-strong);border-radius:12px;background:var(--surface)} .cdrawer__search svg{flex:none;width:19px;height:19px;color:var(--text-subtle)} .cdrawer__search input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--text);font:inherit;font-size:.95rem;outline:none} .cdrawer__search input::placeholder{color:var(--text-subtle)} .cdrawer__search input::-webkit-search-cancel-button,.cdrawer__search input::-webkit-search-decoration{-webkit-appearance:none;display:none} .cdrawer__list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 8px} .cdrawer__empty{padding:24px 10px;color:var(--text-muted);font-size:.88rem;text-align:center} .citem{display:flex;align-items:center} .citem__link{display:flex;flex:1;align-items:center;gap:14px;min-width:0;padding:10px 8px;border-radius:12px} .citem__link:hover{background:var(--ghost-hover)} .citem__ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;object-fit:cover; background:var(--surface-secondary);color:var(--text-muted);font-size:.95rem;font-weight:700} .citem__name{font-size:1rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .citem__more{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%; background:transparent;color:var(--text-subtle);cursor:pointer} .citem__more svg{width:18px;height:18px;transition:transform .2s var(--ease)} .citem__more[aria-expanded="true"] svg{transform:rotate(180deg)} .csubs{display:grid;padding:0 8px 6px 62px} .csubs[hidden]{display:none} .csub{padding:9px 8px;border-radius:10px;color:var(--text-muted);font-size:.92rem} .csub:hover{background:var(--ghost-hover);color:var(--text)} .csk{height:40px;margin:10px 8px;border-radius:12px;background:linear-gradient(90deg,var(--skeleton),var(--skeleton-hi),var(--skeleton)); background-size:200% 100%;animation:shimmer 1.4s linear infinite} .cdrawer__foot{display:grid;gap:4px;padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 12px);border-top:1px solid var(--border)} .cdrawer__theme{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 2px; border:0;background:transparent;color:var(--text-soft);font-size:.92rem;text-align:left;cursor:pointer} @media (max-width:959px){ /* Card ancorado abaixo do header (carrinho e menu da conta). Só existe no celular: no desktop o menu da conta continua colado ao avatar. */ .hcard{position:fixed;top:calc(var(--header-h) + 8px);right:var(--hcard-gap);left:var(--hcard-gap);z-index:190; border:1px solid var(--border);border-radius:var(--hcard-r);background:var(--surface);box-shadow:var(--hcard-shadow); overflow:hidden;animation:npopIn .18s var(--ease)} .hcard[hidden]{display:none} .hcard__body{max-height:min(70dvh,560px);overflow-y:auto;overscroll-behavior:contain} /* menu à esquerda · logo · ferramentas à direita */ .header__inner{display:flex;align-items:center;gap:4px} .header__inner .nav-toggle{order:-1;flex:none} .logo{margin-right:auto;flex:none} .logo__icone{display:block;width:34px;height:34px;object-fit:cover} .logo__img--escuro,.logo__img--claro, :root[data-theme="light"] .logo__img--claro{display:none} .header__tools{gap:6px} .header__tools>.theme-toggle{display:none} .hbtn--search,.hbtn--user{display:inline-grid} .hcart{display:block;position:relative} .header.is-panel-open{z-index:200} /* todos os botões no mesmo quadrado arredondado */ .header .icon-btn,.umenu__btn{width:38px;height:38px;border-radius:11px} /* foto de perfil: círculo limpo, sem quadrado, borda ou fundo em volta */ .umenu__btn{border:0;border-radius:50%;background:transparent} .umenu__avatar{border-radius:50%} .umenu{gap:6px} .umenu__bell{border-color:var(--border)} /* as 3 linhas: sem fundo nem borda, traços curtos e arredondados */ .header .nav-toggle{align-items:flex-start;gap:4.5px;padding:0 9px;border-color:transparent;background:transparent} .header .nav-toggle span{height:2px;border-radius:2px;background:var(--text-soft);transform:none} .header .nav-toggle span:nth-child(1){width:15px} .header .nav-toggle span:nth-child(2){width:20px} .header .nav-toggle span:nth-child(3){width:11px} .header .nav-toggle:hover{background:transparent;border-color:transparent} .header .nav-toggle:hover span{background:var(--text)} /* Menu da conta: card alto, alinhado à direita e rolável por dentro */ .umenu__panel{position:fixed;top:calc(var(--header-h) + 8px);right:var(--hcard-gap);left:auto; width:min(300px,calc(100vw - var(--hcard-gap) * 2));max-height:calc(100dvh - var(--header-h) - 22px); display:flex;padding:0;border-radius:var(--hcard-r);box-shadow:var(--hcard-shadow)} .umenu__scroll{flex:1;min-width:0;gap:0;padding:14px 12px calc(env(safe-area-inset-bottom,0px) + 12px); overflow-y:auto;overscroll-behavior:contain} .umenu__d{display:none !important} .umenu__m{display:block !important} .umenu__row{display:flex !important} .umenu__head{padding-bottom:12px;border-bottom:1px solid var(--border)} .umenu__head .umenu__avatar{width:44px;height:44px;border-radius:50%} .umenu__who strong{font-size:.98rem} .umenu__who span{font-size:.76rem} .umenu__account{margin-top:2px;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--primary-text)} .umenu__links{border-top:0;padding-top:4px} .umenu__links a,.umenu__links button{padding:12px 8px;font-size:.92rem;color:var(--text-soft)} .umenu__row{align-items:center;justify-content:space-between;gap:12px} .umenu__tag{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:8px;padding:0 5px;border-radius:999px; background:var(--primary);color:var(--primary-contrast);font-size:.64rem;font-weight:700;vertical-align:middle} .umenu__tag[hidden]{display:none} .umenu__out{margin-top:6px;border-top:1px solid var(--border) !important;border-radius:0 !important;color:#F87171 !important;font-weight:600} .umenu__out:hover{background:rgba(248,113,113,.10) !important;color:#F87171 !important} /* interruptor dos itens "Tema escuro" e "Versão experimental" */ .uswitch{flex:none;position:relative;width:38px;height:22px;border-radius:999px;background:var(--surface-secondary); border:1px solid var(--border-strong);transition:background-color .2s var(--ease),border-color .2s var(--ease)} .uswitch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text-subtle); transition:transform .2s var(--ease),background-color .2s var(--ease)} [aria-pressed="true"] .uswitch{background:var(--primary);border-color:var(--primary)} [aria-pressed="true"] .uswitch::after{transform:translateX(16px);background:var(--primary-contrast)} } /* ícone dentro de botão (ex.: megafone do Anunciar) */ .btn__ico{display:block;width:17px;height:17px;flex:none} .btn:has(>.btn__ico){gap:7px} /* Celular/tablet: o iOS dá zoom ao focar campos com fonte < 16px. 16px em todo campo de digitação evita o zoom (login, cadastro, busca, chat, conta). */ @media (hover:none) and (pointer:coarse){ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select,textarea{font-size:16px !important} }