/* PcBuilder — camada de design clara (creme + dourado + azul). Carregada por último em todas as páginas. */ :root { --pb-bg:#dcd6c8; --pb-surface:#efebe1; --pb-surface-2:#e7e2d5; --pb-line:#d2c9b4; --pb-line-2:#c4b99e; --pb-ink:#0f1a2e; --pb-ink-2:#1f2a42; --pb-muted:#3c475c; --pb-muted-2:#56617a; --pb-gold:#b0812a; --pb-gold-2:#d9ab4b; --pb-gold-soft:#f5ead2; --pb-gold-ink:#7a5a17; --pb-blue:#1f5fd6; --pb-blue-2:#3b7cf0; --pb-blue-soft:#e8f0ff; --pb-good:#1f9d63; --pb-good-soft:#e5f6ee; --pb-r:22px; --pb-r-sm:12px; --pb-shadow:0 1px 2px #0f1a2e0a, 0 8px 28px #0f1a2e0d; --pb-shadow-lg:0 2px 4px #0f1a2e0d, 0 22px 50px #0f1a2e17; --pb-ease:cubic-bezier(.22,1,.36,1); /* variáveis antigas do site, agora no tema claro */ --bg:var(--pb-bg); --panel:var(--pb-surface); --panel-2:var(--pb-surface-2); --border:var(--pb-line); --border-soft:#efe9dc; --text:var(--pb-ink); --muted:var(--pb-muted); --muted-2:var(--pb-muted-2); --copper:var(--pb-gold); --good:var(--pb-good); --blue:var(--pb-blue); } /* ---------- fundo vivo ---------- */ html body { background:var(--pb-bg) !important; color:var(--pb-ink); min-height:100vh; } html body::before { content:""; position:fixed; inset:-20vmax; z-index:-2; pointer-events:none; opacity:1; mask-image:none; -webkit-mask-image:none; background: radial-gradient(38vmax 38vmax at 12% 8%, #e6cf9a66, transparent 60%), radial-gradient(34vmax 34vmax at 92% 30%, #c3d3f266, transparent 60%), radial-gradient(30vmax 30vmax at 40% 100%, #e3d2a855, transparent 60%) !important; animation:pb-aurora 26s ease-in-out infinite alternate; } html body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(#b0812a26 1px, transparent 1.2px) !important; background-size:26px 26px !important; mask-image:linear-gradient(180deg,#000,transparent 70%); -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%); } @keyframes pb-aurora { 0% { transform:translate3d(0,0,0) rotate(0deg); } 100% { transform:translate3d(4vmax,-3vmax,0) rotate(8deg); } } ::selection { background:var(--pb-gold-soft); color:var(--pb-ink); } ::-webkit-scrollbar-thumb { background:#d8ccb0; border-radius:8px; } /* ---------- cabeçalho ---------- */ body .topbar, body .guides-top, body .article-top, body header.top { position:relative; z-index:50; margin:12px 0 18px; padding:12px 18px !important; border:1px solid #ffffffcc !important; border-radius:18px !important; background:#efebe1e6 !important; backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); box-shadow:var(--pb-shadow) !important; } body .brand-mark { width:46px !important; height:46px !important; transition:transform .5s var(--pb-ease); } body .brand-mark img { width:42px !important; height:42px !important; } body .brand:hover .brand-mark, body .guides-brand:hover img, body .article-brand:hover img { transform:rotate(-8deg) scale(1.06); } body .guides-brand img, body .article-brand img { transition:transform .5s var(--pb-ease); } body .brand-name, body .guides-brand strong, body .article-brand strong, body header.top .brand { font-family:'Jost','Sora',sans-serif !important; font-weight:400 !important; letter-spacing:.005em !important; color:var(--pb-ink) !important; } body .brand-name span, body .guides-brand strong span, body .article-brand strong span, body header.top .brand span { color:var(--pb-gold) !important; } body .brand-sub { color:var(--pb-muted-2) !important; } /* links do topo com sublinhado animado */ body .studio-nav { gap:10px !important; } body .studio-nav a { position:relative; padding:10px 14px !important; border-radius:12px !important; color:var(--pb-ink-2) !important; background:transparent !important; border:1px solid transparent !important; } body .studio-nav a::after { content:""; position:absolute; left:14px; right:14px; bottom:6px; height:1.5px; background:linear-gradient(90deg,var(--pb-gold),var(--pb-blue)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--pb-ease); } body .studio-nav a:hover::after { transform:scaleX(1); } body .studio-nav .nav-build { border-color:var(--pb-line-2) !important; background:var(--pb-surface) !important; gap:10px !important; } body .studio-nav .nav-build span, body .studio-nav .nav-guides span { color:var(--pb-gold) !important; } /* ---------- títulos ---------- */ body .studio-intro h1, body .intro h1 { color:var(--pb-ink) !important; } body .studio-intro h1 span { background:linear-gradient(100deg,var(--pb-gold-ink),var(--pb-gold-2) 45%,var(--pb-gold) 70%,var(--pb-gold-ink)); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent !important; animation:pb-sheen 7s ease-in-out infinite; } @keyframes pb-sheen { 50% { background-position:100% 0; } } body .studio-eyebrow > span { background:var(--pb-blue) !important; box-shadow:0 0 0 0 #1f5fd655 !important; animation:pb-ping 2.2s var(--pb-ease) infinite; } @keyframes pb-ping { 0% { box-shadow:0 0 0 0 #1f5fd655; } 80%,100% { box-shadow:0 0 0 10px #1f5fd600; } } /* ---------- painéis ---------- */ body .visual-panel, body .selection-panel, body .compare-panel, body .build-panel, body .ready-pcs, body .cat-desc { position:relative; border:1px solid var(--pb-line) !important; border-radius:var(--pb-r) !important; background:linear-gradient(180deg,var(--pb-surface),#e9e4d8) !important; box-shadow:var(--pb-shadow) !important; overflow:hidden; } body .visual-panel::after, body .selection-panel::after, body .compare-panel::after, body .build-panel::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .4s; background:radial-gradient(420px circle at var(--px,50%) var(--py,0%), #d9ab4b1f, transparent 60%); } body .visual-panel:hover::after, body .selection-panel:hover::after, body .compare-panel:hover::after, body .build-panel:hover::after { opacity:1; } /* filete dourado animado no topo de cada painel */ body .visual-panel::before, body .selection-panel::before, body .compare-panel::before, body .build-panel::before { content:"" !important; position:absolute !important; left:0 !important; right:0 !important; top:0 !important; width:auto !important; height:2px !important; transform:none !important; filter:none !important; opacity:1 !important; border-radius:0 !important; background:linear-gradient(90deg,transparent,var(--pb-gold-2),var(--pb-blue-2),transparent) !important; background-size:200% 100% !important; animation:pb-flow 6s linear infinite; } @keyframes pb-flow { to { background-position:-200% 0; } } /* ---------- roda de componentes ---------- */ body .wheel-lines line { stroke:#d7cbb0 !important; stroke-width:.35 !important; stroke-dasharray:1 1.6 !important; animation:pb-dash 1.6s linear infinite; } body .wheel-lines line.active { stroke:var(--pb-gold) !important; stroke-width:.7 !important; stroke-dasharray:2 1.4 !important; animation-duration:.8s; } @keyframes pb-dash { to { stroke-dashoffset:-5.2; } } body .wheel-wrap::before { border:1px dashed #d9c9a3 !important; box-shadow:none !important; animation:pb-spin 60s linear infinite; } @keyframes pb-spin { to { transform:rotate(360deg); } } body .tower-plate img { opacity:1 !important; mix-blend-mode:normal !important; filter:drop-shadow(0 26px 34px #0f1a2e2e) !important; animation:pb-float 6s ease-in-out infinite; } @keyframes pb-float { 50% { transform:translateY(-8px); } } /* foto com fundo (não recortada): bordas esbatidas para se fundir com o painel */ body .tower-plate:has(.tower-photo) { filter:drop-shadow(0 26px 30px #0f1a2e40) drop-shadow(0 0 40px #d9ab4b33); } body .tower-plate img.tower-photo { width:128% !important; height:128% !important; object-fit:contain; filter:saturate(1.08) contrast(1.04) !important; clip-path:polygon(7.5% 16.7%, 53.2% 12.3%, 74.6% 12.7%, 91.9% 16.5%, 91.9% 82.9%, 56.1% 92.3%, 8.1% 84.9%); } body .tower-plate::before { background:radial-gradient(circle,#f3e2b9,transparent 68%) !important; } body .node { background:var(--pb-surface) !important; border:1px solid var(--pb-line-2) !important; color:var(--pb-ink-2) !important; box-shadow:0 6px 18px #0f1a2e14 !important; transition:transform .35s var(--pb-ease), border-color .25s, box-shadow .35s var(--pb-ease) !important; } body .node:hover { transform:translate(-50%,-50%) scale(1.08) !important; border-color:var(--pb-gold-2) !important; box-shadow:0 12px 28px #b0812a2e !important; } body .node.active { border:1.5px solid var(--pb-gold) !important; background:radial-gradient(circle at 50% 30%,#efe3c6,var(--pb-surface) 70%) !important; box-shadow:0 0 0 6px #d9ab4b26, 0 14px 30px #b0812a33 !important; } body .node.active::after { content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid #d9ab4b80; animation:pb-ring 2.4s var(--pb-ease) infinite; pointer-events:none; } @keyframes pb-ring { 0% { transform:scale(.92); opacity:1; } 100% { transform:scale(1.25); opacity:0; } } body .node .node-label { color:var(--pb-ink-2) !important; font-weight:600 !important; } body .node-custom-icon { filter:drop-shadow(0 4px 8px #0f1a2e26) !important; } /* todos os ícones da roda em 3D: inclinados em repouso, giram ao passar o rato */ body .node { perspective:220px; } body .node-custom-icon.cooler-icon { margin-top:-14px !important; transform:perspective(160px) rotateX(46deg) rotateZ(-24deg) scale(1.1); transform-origin:50% 60%; filter:drop-shadow(0 10px 6px #0f1a2e40) !important; transition:transform .55s var(--pb-ease) !important; } body .node:hover .node-custom-icon.cooler-icon, body .node.active .node-custom-icon.cooler-icon { transform:perspective(160px) translateY(-3px) rotateX(34deg) rotateZ(-10deg) scale(1.18); } body .node-custom-icon:not(.mobo-icon):not(.cooler-icon) { transform:perspective(220px) rotateX(14deg) rotateY(-20deg); transform-style:preserve-3d; filter:drop-shadow(-4px 8px 6px #0f1a2e38) !important; transition:transform .55s var(--pb-ease), filter .55s var(--pb-ease) !important; } body .node:hover .node-custom-icon:not(.mobo-icon):not(.cooler-icon), body .node.active .node-custom-icon:not(.mobo-icon):not(.cooler-icon) { transform:perspective(220px) translateY(-3px) rotateX(8deg) rotateY(22deg) scale(1.14); filter:drop-shadow(5px 12px 8px #0f1a2e40) !important; } /* motherboard deitada em perspetiva, em vez de em pé */ body .node-custom-icon.mobo-icon { margin-top:-16px !important; margin-bottom:-2px !important; transform:perspective(160px) rotateX(48deg) rotateZ(-38deg) scale(1.12); transform-origin:50% 60%; filter:drop-shadow(0 10px 6px #0f1a2e40) !important; transition:transform .5s var(--pb-ease); } body .node:hover .node-custom-icon.mobo-icon, body .node.active .node-custom-icon.mobo-icon { transform:perspective(160px) rotateX(38deg) rotateZ(-28deg) scale(1.18); } /* ---------- botões: sistema ---------- */ body button, body .nav-build, body .nav-guides, body .affiliate-link, body .amazon-link, body .back, body .back-link, body .article-back, body .ready-pcs-button { -webkit-tap-highlight-color:transparent; position:relative; overflow:hidden; isolation:isolate; transition:transform .25s var(--pb-ease), box-shadow .3s var(--pb-ease), background-color .25s, border-color .25s, color .25s !important; } /* os nós da roda e o botão × precisam de mostrar o selo ✓ fora da borda */ body .node, body .node-remove { overflow:visible !important; isolation:auto; } body .node .pb-ripple { display:none; } body .node .node-build-status { z-index:5; top:-6px !important; right:-6px !important; width:26px !important; height:26px !important; border-radius:50% !important; background:var(--pb-good) !important; color:#fff !important; border:2px solid #fff !important; box-shadow:0 4px 12px #1f9d6366 !important; } body .node.has-build-part .node-build-status svg { color:#fff !important; width:15px !important; height:15px !important; } body .node.has-build-part .node-build-status { animation:pb-pop .4s var(--pb-ease) !important; } body .node.has-build-part { border-color:#1f9d63a6 !important; } body .node-build-status svg { transform:none !important; } body button:active:not(:disabled):not(.node):not(.node-remove), body .affiliate-link:active, body .back-link:active, body .article-back:active { transform:scale(.96) !important; } body button:focus-visible, body a:focus-visible { outline:2px solid var(--pb-blue) !important; outline-offset:3px !important; } body button:disabled { opacity:.45; cursor:not-allowed; } .pb-ripple { position:absolute; z-index:-1; border-radius:50%; pointer-events:none; transform:scale(0); background:currentColor; opacity:.18; animation:pb-ripple .6s var(--pb-ease) forwards; } @keyframes pb-ripple { to { transform:scale(1); opacity:0; } } /* primário — azul */ body .search-button, body .save-build-button, body .confirm-save, body .confirm-catalog, body .apply-filters, body .cookie-accept, body .preset-card button, body .ready-pcs-button { min-height:44px; padding:0 18px !important; border:1px solid #1a50b8 !important; border-radius:12px !important; color:#fff !important; font-weight:700 !important; background:linear-gradient(135deg,var(--pb-blue-2),var(--pb-blue)) !important; box-shadow:0 6px 16px #1f5fd640, inset 0 1px #ffffff40 !important; } body .search-button:hover, body .save-build-button:hover, body .confirm-save:hover, body .confirm-catalog:hover, body .apply-filters:hover, body .cookie-accept:hover, body .preset-card button:hover, body .ready-pcs-button:hover { transform:translateY(-2px); box-shadow:0 12px 26px #1f5fd659, inset 0 1px #ffffff55 !important; } body .search-button::after, body .save-build-button::after, body .ready-pcs-button::after { content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,#ffffff55,transparent); transition:left .7s var(--pb-ease); } body .search-button:hover::after, body .save-build-button:hover::after, body .ready-pcs-button:hover::after { left:130%; } /* perigo — limpar/remover */ body .confirm-clear { min-height:44px; border:1px solid #d14343 !important; border-radius:12px !important; background:#d14343 !important; color:#fff !important; } /* secundário — branco com contorno */ body #clearBtn, body .favorites-toggle, body .filter-toggle, body .clear-filters, body .footer-button, body .status-pill, body .catalog-toggle, body .back, body .back-link, body .article-back, body .load-more-parts, body .compare-build-btn, body .build-part-btn, body .filter-actions button:not(.apply-filters) { min-height:36px; border:1px solid var(--pb-line-2) !important; border-radius:11px !important; background:var(--pb-surface) !important; color:var(--pb-ink-2) !important; font-weight:600 !important; box-shadow:0 1px 2px #0f1a2e0d !important; } body #clearBtn:hover, body .favorites-toggle:hover, body .filter-toggle:hover, body .clear-filters:hover, body .footer-button:hover, body .status-pill:hover, body .catalog-toggle:hover, body .back:hover, body .back-link:hover, body .article-back:hover, body .load-more-parts:hover, body .compare-build-btn:hover, body .build-part-btn:hover, body .filter-actions button:not(.apply-filters):hover { transform:translateY(-1px); border-color:var(--pb-gold-2) !important; color:var(--pb-gold-ink) !important; box-shadow:0 8px 18px #b0812a1f !important; } body .favorites-toggle.active, body .filter-toggle.active { border-color:var(--pb-gold) !important; background:var(--pb-gold-soft) !important; color:var(--pb-gold-ink) !important; } body .build-part-btn.active, body .compare-build-btn.active { border-color:var(--pb-good) !important; background:var(--pb-good-soft) !important; color:var(--pb-good) !important; } body .status-pill::before { background:var(--pb-good) !important; box-shadow:0 0 0 0 #1f9d6366 !important; animation:pb-ping-green 2s infinite; } @keyframes pb-ping-green { 0% { box-shadow:0 0 0 0 #1f9d6366; } 80%,100% { box-shadow:0 0 0 8px #1f9d6300; } } body .filter-count { background:var(--pb-gold) !important; color:#fff !important; } /* ícones */ body .favorite-part-btn, body .clear-build-button, body .remove-compare, body .remove-build, body .dialog-close, body .close-filters, body .node-remove { border:1px solid var(--pb-line-2) !important; background:var(--pb-surface) !important; color:var(--pb-muted) !important; border-radius:10px !important; } body .favorite-part-btn:hover, body .clear-build-button:hover, body .remove-compare:hover, body .remove-build:hover, body .dialog-close:hover, body .close-filters:hover { transform:translateY(-1px) rotate(-4deg); border-color:var(--pb-gold-2) !important; color:var(--pb-gold-ink) !important; } body .favorite-part-btn.active { border-color:#e0577a !important; background:#fdecf1 !important; color:#d43c67 !important; } body .favorite-part-btn.active svg { animation:pb-heart .45s var(--pb-ease); } @keyframes pb-heart { 40% { transform:scale(1.35); } } body .spec-help-btn, body .category-help { border:1px solid #c9d8f7 !important; background:var(--pb-blue-soft) !important; color:var(--pb-blue) !important; } body .category-help-text, body .spec-help-popover { background:var(--pb-surface) !important; color:var(--pb-ink-2) !important; border:1px solid var(--pb-line) !important; box-shadow:var(--pb-shadow-lg) !important; } body .spec-help-popover strong { color:var(--pb-gold-ink) !important; } /* afiliados */ body .affiliate-link, body .amazon-link { border:1px solid #e6c47d !important; background:#f1e8d2 !important; color:var(--pb-ink) !important; box-shadow:none !important; border-radius:10px !important; } body .affiliate-link:hover, body .amazon-link:hover { background:#fff3d9 !important; border-color:var(--pb-gold) !important; transform:translateY(-1px); } /* ---------- pesquisa e filtros ---------- */ body .part-search, body .filter-field input, body .filter-field select { height:44px; border:1px solid var(--pb-line-2) !important; border-radius:12px !important; background:var(--pb-surface) !important; color:var(--pb-ink) !important; transition:border-color .2s, box-shadow .25s var(--pb-ease) !important; } body .part-search:focus, body .filter-field input:focus, body .filter-field select:focus { outline:none; border-color:var(--pb-blue-2) !important; box-shadow:0 0 0 4px #3b7cf026 !important; } body .smart-filters { border:1px solid var(--pb-line) !important; background:var(--pb-surface-2) !important; border-radius:14px !important; animation:pb-drop .35s var(--pb-ease); } @keyframes pb-drop { from { opacity:0; transform:translateY(-6px); } } body .filter-panel-heading { color:var(--pb-gold-ink) !important; } body .search-suggestions { background:var(--pb-surface) !important; border:1px solid var(--pb-line) !important; box-shadow:var(--pb-shadow-lg) !important; } body .suggestion-item:hover, body .suggestion-item.active { background:var(--pb-gold-soft) !important; } /* ---------- cards de peças ---------- */ body .part-card { border:1px solid var(--pb-line) !important; border-left-width:1px !important; border-radius:16px !important; background:var(--pb-surface) !important; box-shadow:0 1px 2px #0f1a2e0a !important; transition:transform .35s var(--pb-ease), box-shadow .35s var(--pb-ease), border-color .25s !important; } body .part-card::before { background:linear-gradient(135deg,#f5ead2aa,transparent 55%) !important; } body .part-card::after { content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(var(--pb-gold-2),var(--pb-gold)); transform:scaleY(0); transition:transform .35s var(--pb-ease); } body .part-card:hover { transform:translateY(-3px) !important; border-color:#e3cf9f !important; box-shadow:0 14px 30px #0f1a2e14 !important; } body .part-card.selected { border-color:var(--pb-gold) !important; box-shadow:0 0 0 3px #d9ab4b2b, 0 12px 28px #b0812a1f !important; } body .part-card.selected::after, body .part-card:hover::after { transform:scaleY(1); } body .part-card .text-base, body .suggestion-price { color:var(--pb-gold-ink) !important; font-weight:700; } body .chk { border:1.5px solid #cbbf9f !important; background:var(--pb-surface) !important; border-radius:6px !important; } body .part-card.selected .chk { background:var(--pb-gold) !important; border-color:var(--pb-gold) !important; animation:pb-pop .35s var(--pb-ease); } @keyframes pb-pop { 50% { transform:scale(1.2); } } body .category-tag { border-color:#e3cf9f !important; background:var(--pb-gold-soft) !important; color:var(--pb-gold-ink) !important; } body .badge { background:var(--pb-good-soft) !important; color:var(--pb-good) !important; border-color:#bfe6d2 !important; } /* ---------- comparação e montagem ---------- */ body .compare-shell { background:var(--pb-surface) !important; border:1px solid var(--pb-line) !important; } body table.compare thead th, body table.compare thead th.label-col { background:var(--pb-surface-2) !important; } body table.compare th.label-col, body table.compare td.label-col { background:var(--pb-surface) !important; color:var(--pb-muted) !important; } body table.compare tbody tr { transition:background .2s; } body table.compare tbody tr:hover td { background:#e9dfc8 !important; } body .best-cell { color:var(--pb-good) !important; background:#eaf7f0 !important; box-shadow:inset 3px 0 var(--pb-good) !important; } body .empty-state { border:1.5px dashed var(--pb-line-2) !important; background:repeating-linear-gradient(135deg,var(--pb-surface) 0 12px,#fbf8f1 12px 13px) !important; } body .build-metric, body .saved-build-card, body .mobile-compare-card, body .preset-card { border:1px solid var(--pb-line) !important; background:var(--pb-surface) !important; border-radius:16px !important; transition:transform .35s var(--pb-ease), box-shadow .35s var(--pb-ease), border-color .25s !important; } body .build-metric:hover, body .saved-build-card:hover, body .preset-card:hover { transform:translateY(-2px); box-shadow:0 12px 26px #0f1a2e12 !important; border-color:#e3cf9f !important; } body .build-metric-icon { background:var(--pb-gold-soft) !important; color:var(--pb-gold-ink) !important; border-color:#ecd9ac !important; } body .comparison-insight { background:linear-gradient(120deg,#efe4c8,#fff) !important; border:1px solid #ecd9ac !important; color:var(--pb-muted) !important; } body .comparison-insight strong, body .comparison-method summary { color:var(--pb-gold-ink) !important; } /* ---------- diálogos e avisos ---------- */ body dialog { border:1px solid var(--pb-line) !important; border-radius:22px !important; background:var(--pb-surface) !important; color:var(--pb-ink) !important; box-shadow:0 30px 80px #0f1a2e33 !important; } body dialog[open] { animation:pb-dialog .45s var(--pb-ease); } /* a regra antiga "* { margin:0 }" da página principal tirava a centragem automática das janelas */ body dialog:modal { margin:auto !important; inset:0; } body dialog::backdrop { background:#0f1a2e40; backdrop-filter:blur(6px); } @keyframes pb-dialog { from { opacity:0; transform:translateY(14px) scale(.97); } } body .catalog-dialog-warning { background:var(--pb-blue-soft) !important; border-color:#c9d8f7 !important; color:var(--pb-ink-2) !important; } body .cookie-notice { border:1px solid var(--pb-line) !important; background:#efebe1f2 !important; backdrop-filter:blur(14px); box-shadow:var(--pb-shadow-lg) !important; animation:pb-up .6s var(--pb-ease); } body .cookie-copy strong { color:var(--pb-ink) !important; } body .cookie-copy a { color:var(--pb-gold-ink) !important; } @keyframes pb-up { from { opacity:0; transform:translate(-50%,20px); } } body .site-footer { border-top:1px solid var(--pb-line) !important; color:var(--pb-muted) !important; } /* ---------- guias ---------- */ body .guide-card, body [class*="guide-card"] { background:var(--pb-surface) !important; border:1px solid var(--pb-line) !important; transition:transform .35s var(--pb-ease), box-shadow .35s var(--pb-ease), border-color .25s !important; } body .guide-card:hover, body [class*="guide-card"]:hover { transform:translateY(-4px); box-shadow:0 16px 34px #0f1a2e14 !important; border-color:#e3cf9f !important; } /* ---------- acabamento interno dos painéis ---------- */ /* textura: grelha de pontos no canto superior direito + brilho dourado suave */ body .visual-panel, body .selection-panel, body .compare-panel, body .build-panel { background: radial-gradient(420px 260px at 100% 0%, #ecdcb459, transparent 70%), radial-gradient(360px 240px at 0% 100%, #d5e0f659, transparent 70%), linear-gradient(180deg,var(--pb-surface),#e9e4d8) !important; } .pb-texture { position:absolute; top:0; right:0; width:260px; height:200px; pointer-events:none; z-index:0; background-image:radial-gradient(#b0812a40 1px, transparent 1.3px); background-size:14px 14px; -webkit-mask-image:radial-gradient(circle at 100% 0%, #000, transparent 70%); mask-image:radial-gradient(circle at 100% 0%, #000, transparent 70%); } /* borda animada (degradê a girar) ao passar o rato */ .pb-frame { position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:3; opacity:0; transition:opacity .45s var(--pb-ease); background:conic-gradient(from var(--pb-angle,0deg), transparent 0 60%, #d9ab4b 75%, #3b7cf0 88%, transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:pb-angle 5s linear infinite; } @property --pb-angle { syntax:''; inherits:false; initial-value:0deg; } @keyframes pb-angle { to { --pb-angle:360deg; } } *:hover > .pb-frame { opacity:1; } /* etiqueta técnica no canto (ex.: "01 / MAPA") com mini código de barras */ .pb-tag { position:absolute; top:14px; right:34px; z-index:2; display:flex; align-items:center; gap:8px; pointer-events:none; color:#9a7a3a; font:600 .56rem/1 'IBM Plex Mono',monospace; letter-spacing:.16em; } .pb-tag b { color:var(--pb-blue); font-weight:600; } .pb-tag i { width:28px; height:9px; opacity:.55; background:repeating-linear-gradient(90deg,#a8781f 0 1px,transparent 1px 3px,#a8781f 3px 5px,transparent 5px 6px); } body .visual-panel > *, body .selection-panel > *, body .compare-panel > *, body .build-panel > * { position:relative; z-index:1; } body .visual-panel > .pb-corner, body .selection-panel > .pb-corner, body .compare-panel > .pb-corner, body .build-panel > .pb-corner, body .visual-panel > .pb-frame, body .selection-panel > .pb-frame, body .compare-panel > .pb-frame, body .build-panel > .pb-frame, body .visual-panel > .pb-tag, body .selection-panel > .pb-tag, body .compare-panel > .pb-tag, body .build-panel > .pb-tag, body .visual-panel > .pb-texture, body .selection-panel > .pb-texture, body .compare-panel > .pb-texture, body .build-panel > .pb-texture { position:absolute; } /* afastar a etiqueta dos botões do topo nos painéis que já têm ações à direita */ body .visual-panel > .pb-tag, body .selection-panel > .pb-tag { top:auto; bottom:14px; right:34px; } /* títulos das secções: barra dourada + linha que se estende */ body .section-eyebrow, body .panel-kicker-title > span:first-child { display:inline-flex !important; align-items:center; gap:8px; color:#8a6a24 !important; } body .section-eyebrow::before, body .panel-kicker-title > span:first-child::before { content:""; width:14px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--pb-gold),var(--pb-blue)); } body .compare-heading, body .build-heading, body .category-heading { position:relative; padding-bottom:12px; margin-bottom:14px !important; } body .compare-heading::after, body .build-heading::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,var(--pb-gold-2),#e8e1d1 30%,transparent); } body .compare-heading h2, body .build-heading h2, body .category-heading h2 { letter-spacing:-.02em; } /* cards de peças: listra diagonal subtil, chip de preço dourado, brilho ao passar */ body .part-card { background:linear-gradient(105deg,var(--pb-surface) 70%,#e9dfc8) !important; } body .part-card .text-base, body .part-card [class*="price"] { padding:4px 9px; border-radius:8px; border:1px solid #ecdcb4; background:linear-gradient(180deg,#f1e8d2,#f8ecd0) !important; color:var(--pb-gold-ink) !important; font-family:'IBM Plex Mono',monospace; } body .part-card > .pb-shine { position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit; } body .part-card::before { opacity:0; } body .part-card:hover::before { opacity:1; } body .part-card .chk { box-shadow:inset 0 1px 2px #0f1a2e14; } /* métricas de desempenho/consumo: ícone com anel tracejado a girar */ body .build-metric { position:relative; background:linear-gradient(110deg,var(--pb-surface) 60%,#ebe1ca) !important; } body .build-metric-icon { position:relative; border-radius:12px !important; } body .build-metric-icon::after { content:""; position:absolute; inset:-5px; border-radius:15px; border:1px dashed #d9ab4b99; animation:pb-spin 14s linear infinite; } body .build-metric-value { font-family:'IBM Plex Mono',monospace !important; color:var(--pb-blue) !important; } /* casas da montagem (GPU, CPU, …): tracejado, “+” e destaque quando preenchidas */ body .build-slot { position:relative; border:1.5px dashed #ddd2b8 !important; border-radius:14px !important; background:linear-gradient(180deg,var(--pb-surface),#e9e4d8) !important; transition:transform .35s var(--pb-ease), border-color .25s, box-shadow .35s var(--pb-ease) !important; overflow:hidden; } body .build-slot::after { content:""; position:absolute; right:10px; bottom:10px; width:18px; height:18px; background:#cbb98d; -webkit-mask:var(--ic-plus) center/contain no-repeat; mask:var(--ic-plus) center/contain no-repeat; transition:transform .35s var(--pb-ease), background .25s; } body .build-slot:hover { transform:translateY(-2px); border-color:var(--pb-gold-2) !important; box-shadow:0 10px 22px #b0812a1a !important; } body .build-slot:hover::after { transform:rotate(60deg); background:var(--pb-gold); } body .build-slot-label { color:#8a6a24 !important; font-family:'IBM Plex Mono',monospace !important; letter-spacing:.12em; } body .build-slot:has(.build-slot-price) { border-style:solid !important; border-color:#bfe6d2 !important; background:linear-gradient(180deg,var(--pb-surface),#e2efe7) !important; } body .build-slot:has(.build-slot-price)::after { background:var(--pb-good); -webkit-mask-image:var(--ic-check); mask-image:var(--ic-check); } body .build-total { font-family:'IBM Plex Mono',monospace !important; padding:6px 12px; border-radius:10px; border:1px solid #ecdcb4; background:linear-gradient(180deg,#f1e8d2,#f8ecd0); } /* estado vazio da comparação: borda que corre e ícones a flutuar */ body .empty-state { position:relative; border:0 !important; overflow:hidden; } body .empty-state::before { content:""; position:absolute; inset:0; width:auto; height:auto; margin:0; border:0; display:block; border-radius:inherit; pointer-events:none; background:linear-gradient(90deg,#d9ab4b 50%,transparent 0) top/16px 1.5px repeat-x, linear-gradient(90deg,#d9ab4b 50%,transparent 0) bottom/16px 1.5px repeat-x, linear-gradient(0deg,#d9ab4b 50%,transparent 0) left/1.5px 16px repeat-y, linear-gradient(0deg,#d9ab4b 50%,transparent 0) right/1.5px 16px repeat-y; opacity:.6; animation:pb-march 1.2s linear infinite; } @keyframes pb-march { to { background-position:16px 0, -16px 100%, 0 -16px, 100% 16px; } } body .empty-art { animation:pb-float 4.5s ease-in-out infinite; } /* ilustração da comparação vazia: hexágonos GPU · VS · CPU + terceiro lugar */ body .pb-cmp-art svg { width:240px !important; height:auto !important; padding:0 !important; border:0 !important; background:none !important; transform:none !important; overflow:visible; } .pb-cmp-art .hexf { fill:var(--pb-surface); stroke:var(--pb-gold); stroke-width:1.6; } .pb-cmp-art .glyph rect, .pb-cmp-art .glyph circle, .pb-cmp-art .glyph path { stroke:var(--pb-ink-2); stroke-width:1.5; fill:none; } .pb-cmp-art .slot.b .glyph rect:nth-of-type(2) { fill:#f5ead2; stroke:var(--pb-gold); } .pb-cmp-art .slot.a { animation:pb-bob 3.6s ease-in-out infinite; } .pb-cmp-art .slot.b { animation:pb-bob 3.6s ease-in-out 1.8s infinite; } @keyframes pb-bob { 50% { transform:translateY(-4px); } } .pb-cmp-art .slot.a .glyph circle { transform-box:fill-box; transform-origin:center; animation:pb-spin 2.4s linear infinite; stroke-dasharray:6 3; } .pb-cmp-art .trace { stroke:#d6c69e; stroke-width:1.6; stroke-dasharray:3 4; } .pb-cmp-art .trace.pulse { stroke:var(--pb-blue-2); stroke-dasharray:10 90; animation:pb-tracepulse 1.8s linear infinite; } @keyframes pb-tracepulse { from { stroke-dashoffset:100; } to { stroke-dashoffset:0; } } /* "VS" estilizado: letras pinceladas, inclinadas, contorno branco tipo autocolante, degradê dourado → azul */ .pb-cmp-art .vs-txt { font:400 50px/1 'Bangers','Impact',sans-serif; letter-spacing:1px; } .pb-cmp-art .vs-outer { fill:none; stroke:#2a2410; stroke-width:12; stroke-linejoin:round; opacity:.85; } .pb-cmp-art .vs-white { fill:none; stroke:#fffaf0; stroke-width:8; stroke-linejoin:round; } .pb-cmp-art .vs-fill { fill:url(#vsFill); stroke:#7a5212; stroke-width:.8; } .pb-cmp-art .vs-shine { fill:url(#vsShine); animation:pb-vsshine 3.2s ease-in-out infinite; } @keyframes pb-vsshine { 0%,55% { transform:translateX(0); } 100% { transform:translateX(110px); } } .pb-cmp-art .vs { transform-box:fill-box; transform-origin:center; transform:skewX(-8deg) rotate(-4deg); filter:drop-shadow(0 6px 8px #0f1a2e40); animation:pb-vs 2.6s ease-in-out infinite; } @keyframes pb-vs { 50% { transform:skewX(-8deg) rotate(-4deg) scale(1.07); } } .pb-cmp-art .hexd { fill:none; stroke:#c9b27c; stroke-width:1.3; stroke-dasharray:3 3; } .pb-cmp-art .plus { stroke:#c9b27c; stroke-width:1.6; } body .empty-art > * { filter:drop-shadow(0 8px 14px #b0812a26); } /* computadores salvos */ body .saved-builds-head { padding-top:14px; border-top:1px dashed #e3d8bf; } body .saved-builds-count { color:var(--pb-gold-ink) !important; } /* ---------- ícones dos botões (substituem as setas de texto) ---------- */ :root { /* ícones com a linguagem da marca: hexágono da logo, cantoneiras HUD e traço fino */ --ic-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6.5l5.5 5.5-5.5 5.5M3 9.5v5'/%3E%3C/svg%3E"); --ic-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M11 6.5 5.5 12l5.5 5.5M21 9.5v5'/%3E%3C/svg%3E"); --ic-out:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H5.5A1.5 1.5 0 0 0 4 5.5V9M4 15v3.5A1.5 1.5 0 0 0 5.5 20H9M20 15v3.5a1.5 1.5 0 0 1-1.5 1.5H15'/%3E%3Cpath d='M13 4h7v7M20 4l-8.5 8.5'/%3E%3C/svg%3E"); --ic-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 20.7 7v10L12 22 3.3 17V7z'/%3E%3Cpath d='M12 9v7.5M12 9c-1.2-.8-2.6-1-4-.9v7c1.4-.1 2.8.1 4 .9M12 9c1.2-.8 2.6-1 4-.9v7c-1.4-.1-2.8.1-4 .9'/%3E%3C/svg%3E"); --ic-pc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Ccircle cx='12' cy='15' r='3'/%3E%3Cpath d='M9 6h6M9 9h6'/%3E%3C/svg%3E"); --ic-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 20.7 7v10L12 22 3.3 17V7z'/%3E%3Cpath d='M12 8.3v7.4M8.3 12h7.4'/%3E%3C/svg%3E"); --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 20.7 7v10L12 22 3.3 17V7z'/%3E%3Cpath d='m8.3 12.2 2.6 2.6 4.8-5'/%3E%3C/svg%3E"); --ic-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='5.6'/%3E%3Cpath d='M10.5 2v2.4M10.5 16.6V19M2 10.5h2.4M16.6 10.5H19M15 15l6 6'/%3E%3Ccircle cx='10.5' cy='10.5' r='1' fill='%23000'/%3E%3C/svg%3E"); } .pb-ic { display:inline-block; flex:none; width:15px; height:15px; background:currentColor; -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat; transition:transform .35s var(--pb-ease); } /* chip redondo à direita, com seta que desliza */ .pb-chip { display:inline-grid; place-items:center; width:24px; height:24px; margin-left:2px; border-radius:50%; background:var(--pb-gold-soft); color:var(--pb-gold-ink); transition:background .3s, color .3s, transform .35s var(--pb-ease); } .pb-chip .pb-ic { width:12px; height:12px; } a:hover > .pb-chip, button:hover > .pb-chip { background:var(--pb-gold); color:#fff; transform:rotate(-45deg); } a:hover > .pb-chip.no-rot, button:hover > .pb-chip.no-rot { transform:none; } a:hover > .pb-chip.no-rot .pb-ic, button:hover > .pb-chip.no-rot .pb-ic { transform:translateX(2px); } a:hover > .pb-ic.pb-back, button:hover > .pb-ic.pb-back { transform:translateX(-3px); } /* navegação do topo como botões em pílula com ícone */ body .studio-nav a { display:inline-flex !important; align-items:center; gap:9px !important; padding:7px 8px 7px 14px !important; border-radius:999px !important; font-weight:600 !important; } body .studio-nav a::after { display:none; } body .studio-nav .nav-guides { border:1px solid var(--pb-line-2) !important; background:#ffffffb3 !important; color:var(--pb-ink-2) !important; } body .studio-nav .nav-build { border:1px solid #1a50b8 !important; background:linear-gradient(135deg,var(--pb-blue-2),var(--pb-blue)) !important; color:#fff !important; box-shadow:0 6px 16px #1f5fd640 !important; } body .studio-nav .nav-build .pb-chip { background:var(--pb-surface); color:var(--pb-blue); } body .studio-nav .nav-build:hover .pb-chip { background:var(--pb-gold-2); color:#fff; } body .studio-nav .nav-build > .pb-ic { background:var(--pb-surface) !important; } body .studio-nav a:hover { transform:translateY(-1px); } body .studio-nav .nav-guides:hover { border-color:var(--pb-gold-2) !important; color:var(--pb-gold-ink) !important; } /* botões de voltar / comparar nas outras páginas */ body .back-link, body .article-back, body .back { display:inline-flex !important; align-items:center; gap:9px; padding:7px 8px 7px 14px !important; border-radius:999px !important; } body .back-link.pb-has-back, body .article-back.pb-has-back, body .back.pb-has-back { padding:7px 14px 7px 10px !important; } /* pesquisar com lupa, usar no PC com +/✓, amazon com ícone externo */ body .search-button { display:inline-flex !important; align-items:center; gap:8px; } body .build-part-btn, body .compare-build-btn { display:inline-flex !important; align-items:center; gap:6px; padding:5px 10px !important; border-radius:999px !important; } body .build-part-btn .pb-ic, body .compare-build-btn .pb-ic { width:15px; height:15px; } body .build-part-btn:hover .pb-ic { transform:rotate(90deg); } body .amazon-badge .amazon-arrow { display:none !important; } body .amazon-link, body .affiliate-pending.amazon-badge { gap:6px !important; border-radius:999px !important; padding:5px 10px !important; } body .amazon-link .pb-ic { width:12px; height:12px; color:var(--pb-gold); } body .amazon-link:hover .pb-ic { transform:translate(2px,-2px); } body .favorites-toggle, body #clearBtn { border-radius:999px !important; } /* ---------- HUD de fundo (mesmo estilo da tela de início, mais discreto) ---------- */ /* preso à página: rola junto com o conteúdo */ html body { position:relative; } .pb-hud { position:absolute; top:0; left:0; right:0; height:var(--pb-page-h,100%); z-index:-1; pointer-events:none; overflow:hidden; } .pb-hud svg { height:100vh !important; } .pb-hud .ruler { top:50vh; } .pb-hud .c { position:absolute; width:40px; height:40px; border:0 solid #a8781f99; } .pb-hud .c::after { content:""; position:absolute; width:4px; height:4px; background:var(--pb-blue); opacity:.8; } .pb-hud .tl { top:14px; left:14px; border-width:1.5px 0 0 1.5px; } .pb-hud .tl::after { top:5px; left:5px; } .pb-hud .tr { top:14px; right:14px; border-width:1.5px 1.5px 0 0; } .pb-hud .tr::after { top:5px; right:5px; } .pb-hud .bl { bottom:14px; left:14px; border-width:0 0 1.5px 1.5px; } .pb-hud .bl::after { bottom:5px; left:5px; } .pb-hud .br { bottom:14px; right:14px; border-width:0 1.5px 1.5px 0; } .pb-hud .br::after { bottom:5px; right:5px; } .pb-hud .scan { position:absolute; left:0; right:0; top:0; height:1px; opacity:.55; background:linear-gradient(90deg,transparent,#1f5fd640 20%,#c9962b80 50%,#1f5fd640 80%,transparent); animation:hud-scan 9s linear infinite; } @keyframes hud-scan { from { transform:translateY(0); } to { transform:translateY(var(--pb-page-h,100vh)); } } .pb-hud .ruler { position:absolute; top:50%; width:12px; height:40vh; transform:translateY(-50%); opacity:.6; background:repeating-linear-gradient(to bottom,#a8781f80 0 1px,transparent 1px 12px),repeating-linear-gradient(to bottom,#a8781f 0 1px,transparent 1px 60px); background-size:7px 100%,12px 100%; background-repeat:no-repeat; } .pb-hud .ruler.l { left:6px; } .pb-hud .ruler.r { right:6px; transform:translateY(-50%) scaleX(-1); } .pb-hud .lbl { position:absolute; bottom:20px; color:#7a6430b3; font:500 .58rem/1 'IBM Plex Mono',monospace; letter-spacing:.14em; } .pb-hud .lbl.l { left:64px; } .pb-hud .lbl.r { right:64px; } .pb-hud .lbl i { display:inline-block; width:5px; height:5px; margin:0 5px; border-radius:50%; background:#2fbf71; box-shadow:0 0 6px #2fbf71; animation:intro-blink 1.6s ease-in-out infinite; } @keyframes intro-blink { 50% { opacity:.25; } } .pb-hud svg { position:absolute; inset:0; width:100%; height:100%; opacity:.45; } .pb-hud svg path { fill:none; stroke:url(#pbTrace); stroke-width:1.2; stroke-linecap:round; stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:pb-draw 2.6s cubic-bezier(.65,0,.35,1) forwards; animation-delay:var(--d,0s); } .pb-hud svg circle { fill:#c9962b; opacity:0; animation:pb-dot .5s ease forwards; animation-delay:var(--d,0s); } @keyframes pb-draw { to { stroke-dashoffset:0; } } @keyframes pb-dot { to { opacity:.85; } } .pb-hud .pt { position:absolute; border-radius:50%; background:#d9ab4b; box-shadow:0 0 6px #c9962b; opacity:0; animation:pb-rise linear infinite; } .pb-hud .pt:nth-child(3n) { background:#3b7cf0; box-shadow:0 0 6px #1f5fd6; } @keyframes pb-rise { 0% { opacity:0; transform:translateY(0); } 20% { opacity:.6; } 100% { opacity:0; transform:translateY(-35vh); } } /* cantoneiras HUD nos painéis */ body .visual-panel, body .selection-panel, body .compare-panel, body .build-panel { --hc:#c9962b; } .pb-corner { position:absolute; width:16px; height:16px; border:0 solid var(--hc); opacity:.7; pointer-events:none; z-index:2; transition:transform .4s var(--pb-ease), opacity .3s; } .pb-corner.tl { top:10px; left:10px; border-width:1.5px 0 0 1.5px; } .pb-corner.tr { top:10px; right:10px; border-width:1.5px 1.5px 0 0; } .pb-corner.bl { bottom:10px; left:10px; border-width:0 0 1.5px 1.5px; } .pb-corner.br { bottom:10px; right:10px; border-width:0 1.5px 1.5px 0; } *:hover > .pb-corner { opacity:1; } *:hover > .pb-corner.tl { transform:translate(-3px,-3px); } *:hover > .pb-corner.tr { transform:translate(3px,-3px); } *:hover > .pb-corner.bl { transform:translate(-3px,3px); } *:hover > .pb-corner.br { transform:translate(3px,3px); } @media (max-width:900px) { .pb-hud .ruler, .pb-hud .lbl { display:none; } .pb-hud .c { width:24px; height:24px; } } /* ---------- entrada ao rolar ---------- */ .pb-reveal { opacity:0; transform:translateY(22px); transition:opacity .8s var(--pb-ease), transform .8s var(--pb-ease); } .pb-reveal.is-in { opacity:1; transform:none; } /* ---------- responsivo ---------- */ @media (max-width:900px) { body .topbar, body .guides-top, body .article-top, body header.top { top:8px; border-radius:16px !important; } body .visual-panel, body .selection-panel, body .compare-panel, body .build-panel { border-radius:18px !important; } } @media (max-width:560px) { body .studio-nav a { padding:9px 10px !important; font-size:.74rem !important; } body .search-button, body .save-build-button { min-height:46px; } body .part-card-actions button, body .part-card-actions a { min-height:38px; } body .favorite-part-btn { width:38px !important; height:38px !important; } } @media (hover:none) { body .part-card:hover, body .node:hover, body .build-metric:hover, body .preset-card:hover { transform:none !important; } } @media (prefers-reduced-motion:reduce) { body *, body *::before, body *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .pb-reveal { opacity:1; transform:none; } } /* ---------- conteúdo decorativo dentro das caixas ---------- */ /* trilha de circuito em marca d'água no canto inferior */ .pb-circuit { position:absolute; left:0; bottom:0; width:280px; height:160px; pointer-events:none; opacity:.5; z-index:0; } .pb-circuit path { fill:none; stroke:#c9a65e; stroke-width:1; stroke-linecap:round; } .pb-circuit circle { fill:#c9a65e; } .pb-circuit .pulse { stroke:#3b7cf0; stroke-width:1.6; stroke-dasharray:14 400; animation:pb-pulse 4.5s linear infinite; } @keyframes pb-pulse { from { stroke-dashoffset:0; } to { stroke-dashoffset:-414; } } /* leitura técnica (barras a oscilar) */ .pb-readout { position:absolute; left:22px; bottom:44px; z-index:1; display:grid; gap:7px; width:120px; pointer-events:none; } .pb-readout span { display:grid; grid-template-columns:34px 1fr; align-items:center; gap:6px; color:#7d6a3e; font:600 .52rem/1 'IBM Plex Mono',monospace; letter-spacing:.12em; } .pb-readout em { position:relative; height:3px; border-radius:3px; background:#d9cdb2; overflow:hidden; } .pb-readout em::after { content:""; position:absolute; inset:0 auto 0 0; width:var(--w,50%); border-radius:3px; background:linear-gradient(90deg,var(--pb-blue),var(--pb-gold-2)); animation:pb-meter 3.4s ease-in-out infinite alternate; animation-delay:var(--dl,0s); } @keyframes pb-meter { from { width:18%; } to { width:var(--w,80%); } } /* régua de coordenadas no topo dos painéis largos */ .pb-scale { position:absolute; left:28px; right:28px; top:0; height:6px; pointer-events:none; opacity:.55; background:repeating-linear-gradient(90deg,#b8995a 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,#b8995a 0 1px,transparent 1px 50px); background-size:100% 3px,100% 6px; background-repeat:no-repeat; } @media (max-width:900px) { .pb-readout, .pb-circuit { display:none; } } /* lista de peças com scroll (altura de 4 cards, calculada em theme-fx.js) */ body #cardsGrid.pb-scroll { overflow-y:auto; overscroll-behavior:contain; padding:2px 8px 2px 2px; margin-right:-8px; scroll-behavior:smooth; } /* os cards nunca são espremidos pela altura da lista: mantêm sempre a altura do conteúdo */ body #cardsGrid { grid-auto-rows:max-content; align-content:start; } /* a caixa 2 tinha altura fixa de 640px (regra antiga) e cortava a 4.ª peça: cresce com o conteúdo */ body .selection-panel { height:auto !important; min-height:0 !important; } /* quadros 1 e 2 sempre com a mesma altura; a roda fica centrada no quadro 1 */ @media (min-width:981px) { body .workspace { align-items:stretch !important; } html body .workspace > .visual-panel { align-self:stretch !important; height:auto !important; min-height:0 !important; display:flex !important; flex-direction:column; } html body .workspace > .selection-panel { align-self:stretch !important; } body .workspace > .visual-panel > .wheel-wrap { margin-block:auto !important; } } body #cardsGrid:not(.pb-scroll) { max-height:none !important; overflow:visible !important; } body #cardsGrid > .part-card { min-height:max-content; flex-shrink:0; } body #cardsGrid.pb-scroll::-webkit-scrollbar { width:6px; } body #cardsGrid.pb-scroll::-webkit-scrollbar-thumb { background:linear-gradient(var(--pb-gold-2),var(--pb-gold)); border-radius:6px; } body #cardsGrid.pb-scroll::-webkit-scrollbar-track { background:#e6dcc5; border-radius:6px; } body #cardsGrid.pb-scroll { scrollbar-width:thin; scrollbar-color:var(--pb-gold) #e6dcc5; } /* ---------- telemóvel ---------- */ @media (max-width:640px) { /* cabeçalho: logo + nome à esquerda, botões só com ícone à direita */ body .topbar { padding:10px 12px !important; gap:10px !important; flex-wrap:nowrap !important; } body .brand { flex:1 1 auto !important; min-width:0 !important; gap:9px !important; } body .brand > div:last-child { min-width:0; } body .brand-name { font-size:1.05rem !important; white-space:nowrap; } body .brand-sub { display:none !important; } body .brand-mark, body .brand-mark img { width:34px !important; height:34px !important; } body .studio-nav { flex:none; gap:6px !important; } body .studio-nav a { width:40px; height:40px; padding:0 !important; justify-content:center; gap:0 !important; font-size:0 !important; border-radius:50% !important; } body .studio-nav a .pb-chip { display:none !important; } body .studio-nav a > .pb-ic { width:17px; height:17px; } body .pb-theme-toggle { width:40px; height:40px; } /* guias / artigos */ body .guides-top, body .article-top { flex-wrap:wrap; gap:10px; } body .back-link, body .article-back, body .back { font-size:.78rem !important; } /* etiquetas técnicas e cantoneiras não tapam conteúdo */ .pb-tag { display:none !important; } .pb-corner { width:12px; height:12px; } /* cards de peças mais compactos */ body .part-card { padding:12px !important; } body .part-card-actions { gap:6px !important; margin-top:8px !important; } body .build-part-btn, body .compare-build-btn, body .amazon-link, body .affiliate-pending.amazon-badge { min-height:36px !important; } body #cardsGrid.pb-scroll { padding-right:6px; margin-right:-6px; } /* painéis com menos margem interna */ body .visual-panel, body .selection-panel, body .compare-panel, body .build-panel { padding-left:14px !important; padding-right:14px !important; } body .studio-intro h1 { font-size:clamp(1.8rem,8.4vw,2.4rem) !important; } } /* tela de início em telemóveis baixos: deixa rolar em vez de cortar */ @media (max-height:700px) { .intro-screen { overflow-y:auto; place-items:start center; } .intro-content { padding-top:24px; } } /* "?" com explicação do componente: não pode ser cortado pelo botão nem ficar por trás da pesquisa */ body .category-help { overflow:visible !important; isolation:auto !important; } body .category-help .pb-ripple { display:none; } body .selection-panel > *:has(.category-help) { z-index:20 !important; } body .category-help-text { z-index:1000 !important; width:min(320px,calc(100vw - 48px)) !important; max-height:none !important; padding:14px 16px !important; border-radius:14px !important; border:1px solid #d9c38f !important; background:var(--pb-surface) !important; color:var(--pb-ink-2) !important; font:400 .78rem/1.55 'Manrope',sans-serif !important; text-align:left; box-shadow:0 18px 40px #0f1a2e2e !important; } body .category-help-text::before { content:"O QUE É"; display:block; margin-bottom:6px; color:var(--pb-gold-ink); font:600 .58rem/1 'IBM Plex Mono',monospace; letter-spacing:.16em; } body .category-help.open .category-help-text { opacity:1 !important; visibility:visible !important; transform:translateY(0) !important; transition:none !important; animation:pb-drop .25s var(--pb-ease); pointer-events:auto; } /* ---------- relatório detalhado da comparação ---------- */ .pb-report { margin-top:18px; padding:20px; border:1px solid #d9c38f; border-radius:18px; background:linear-gradient(160deg,#f3ead4,var(--pb-surface) 45%); position:relative; overflow:hidden; } .pb-report::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,transparent,var(--pb-gold-2),var(--pb-blue-2),transparent); background-size:200% 100%; animation:pb-flow 6s linear infinite; } .pbr-kicker { color:var(--pb-gold-ink); font:600 .6rem/1 'IBM Plex Mono',monospace; letter-spacing:.18em; } .pbr-head p { margin:8px 0 0; color:var(--pb-ink-2); font-size:.92rem; line-height:1.5; } .pbr-head b { color:var(--pb-ink); } .pbr-sec { display:flex; align-items:center; gap:10px; margin:22px 0 10px; color:var(--pb-ink); font:650 .82rem/1 'Sora',sans-serif; } .pbr-sec::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,#d9c38f,transparent); } .pbr-idx { display:inline-grid; place-items:center; flex:none; width:22px; height:22px; border-radius:7px; background:var(--pb-ink); color:#f3ead4; font:700 .7rem/1 'IBM Plex Mono',monospace; } .pbr-idx.s { width:18px; height:18px; border-radius:6px; font-size:.6rem; } /* cards do veredito */ .pbr-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:14px; } .pbr-card { padding:14px; border:1px solid var(--pb-line); border-radius:14px; background:var(--pb-surface); transition:transform .35s var(--pb-ease), box-shadow .35s var(--pb-ease); } .pbr-card:hover { transform:translateY(-2px); box-shadow:0 12px 24px #0f1a2e14; } .pbr-card.win { border-color:var(--pb-gold); box-shadow:0 0 0 3px #d9ab4b26; } .pbr-card header { display:flex; align-items:flex-start; gap:9px; } .pbr-card h4 { margin:0; color:var(--pb-ink); font:600 .82rem/1.3 'Sora',sans-serif; } .pbr-tags { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 12px; } .pbr-tag { padding:3px 8px; border-radius:999px; border:1px solid var(--pb-line-2); color:var(--pb-muted); font:600 .6rem/1.3 'Manrope',sans-serif; } .pbr-tag.gold { border-color:#d9ab4b; background:#f1e2bc; color:var(--pb-gold-ink); } .pbr-tag.green { border-color:#9fd8bb; background:#e2f3ea; color:var(--pb-good); } .pbr-tag.blue { border-color:#b9cdf4; background:var(--pb-blue-soft); color:var(--pb-blue); } .pbr-meter { display:grid; grid-template-columns:1fr auto; gap:4px 8px; margin-bottom:9px; color:var(--pb-muted); font:500 .66rem/1 'IBM Plex Mono',monospace; letter-spacing:.06em; text-transform:uppercase; } .pbr-meter b { color:var(--pb-ink); font-weight:600; } .pbr-meter i, .pbr-bar i { grid-column:1/-1; position:relative; height:6px; border-radius:6px; background:#ded4bc; overflow:hidden; } .pbr-meter em, .pbr-bar em { position:absolute; inset:0 auto 0 0; border-radius:6px; background:linear-gradient(90deg,var(--pb-gold),var(--pb-gold-2)); transform-origin:left; animation:pbr-grow .9s var(--pb-ease); } .pbr-meter em.v { background:linear-gradient(90deg,var(--pb-good),#5fd3a0); } @keyframes pbr-grow { from { transform:scaleX(.05); } } .pbr-price { margin-top:4px; color:var(--pb-gold-ink); font:700 1rem/1 'IBM Plex Mono',monospace; } /* frente a frente */ .pbr-rows { display:grid; gap:10px; } .pbr-row { display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:14px; align-items:center; padding:10px 12px; border:1px solid var(--pb-line); border-radius:12px; background:var(--pb-surface); } .pbr-lbl { display:flex; flex-wrap:wrap; align-items:center; gap:6px; color:var(--pb-ink-2); font:600 .74rem/1.2 'Manrope',sans-serif; } .pbr-lbl .spec-icon { margin:0; } .pbr-dir, .pbr-eq { flex-basis:100%; color:var(--pb-muted-2); font:500 .56rem/1 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; } .pbr-eq { color:#a07a1e; } .pbr-bars { display:grid; gap:6px; } .pbr-bar { display:grid; grid-template-columns:18px 1fr minmax(90px,auto); align-items:center; gap:8px; } .pbr-bar i { grid-column:auto; height:8px; } .pbr-bar em { background:linear-gradient(90deg,var(--pb-gold),var(--pb-gold-2)); } .pbr-bar.best em { background:linear-gradient(90deg,#1f9d63,#3fc98a); box-shadow:0 0 10px #1f9d6355; } .pbr-bar.worst em { background:linear-gradient(90deg,#c0392b,#e0675a); } .pbr-bar.tie em { background:linear-gradient(90deg,#c9962b,#e8bd55); } .pbr-bar b { color:var(--pb-ink-2); font:600 .72rem/1 'IBM Plex Mono',monospace; text-align:right; white-space:nowrap; } .pbr-bar.best b { color:var(--pb-good); } .pbr-bar.worst b { color:#b4372a; } .pbr-bar.best b::after { content:" ▲"; font-size:.6rem; } .pbr-bar.worst b::before { content:"▼ "; font-size:.6rem; } /* nomes nos cards: sem o estilo antigo de "header" */ body .pbr-card header, body .pbr-card h4 { all:unset; } body .pbr-card header { display:flex; align-items:flex-start; gap:9px; } body .pbr-card h4 { color:var(--pb-ink); font:600 .82rem/1.3 'Sora',sans-serif; } /* cores na tabela de comparação: verde = melhor, vermelho = pior, amarelo = empate */ body .best-cell { color:#167a4c !important; background:#dff1e7 !important; box-shadow:inset 3px 0 #1f9d63 !important; font-weight:700; } body .worse-cell { color:#a8322a !important; background:#f6e0dc !important; box-shadow:inset 3px 0 #c0392b !important; } body .equivalent-cell { color:#8a6412 !important; background:#f3e6c3 !important; box-shadow:inset 3px 0 #c9962b !important; } body .best-cell .dot { background:#1f9d63 !important; } .value-tag.worse-tag { border:1px solid #e3a59c; color:#a8322a; } body .best-tag { border-color:#9fd8bb !important; color:#167a4c !important; } body .mobile-spec.best-cell, body .mobile-spec.worse-cell, body .mobile-spec.equivalent-cell { border-radius:8px; padding-left:8px; } .pbr-bar small { margin-left:6px; color:#b4473b; font-weight:600; } .pbr-bar.na b { color:var(--pb-muted-2); } /* preço */ .pbr-price-list, .pbr-usage { margin:0; padding:0; list-style:none; display:grid; gap:8px; } .pbr-price-list li { padding:10px 12px 10px 34px; position:relative; border:1px solid var(--pb-line); border-radius:12px; background:var(--pb-surface); color:var(--pb-ink-2); font-size:.78rem; line-height:1.5; } .pbr-price-list li::before { content:"€"; position:absolute; left:11px; top:10px; width:16px; height:16px; display:grid; place-items:center; border-radius:5px; background:#f1e2bc; color:var(--pb-gold-ink); font:700 .62rem/1 'IBM Plex Mono',monospace; } /* prós e contras */ .pbr-pcs { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; } .pbr-pc { padding:12px 14px; border:1px solid var(--pb-line); border-radius:14px; background:var(--pb-surface); } .pbr-pc h5 { display:flex; align-items:center; gap:8px; margin:0 0 8px; color:var(--pb-ink); font:600 .76rem/1.3 'Sora',sans-serif; } .pbr-pc ul { margin:0; padding:0; list-style:none; display:grid; gap:4px; } .pbr-pc ul + ul { margin-top:8px; padding-top:8px; border-top:1px dashed var(--pb-line-2); } .pbr-pc li { position:relative; padding-left:18px; color:var(--pb-ink-2); font-size:.74rem; line-height:1.45; } .pbr-pc .pro li::before, .pbr-pc .con li::before { content:""; position:absolute; left:0; top:4px; width:11px; height:11px; -webkit-mask:var(--ic-check) center/contain no-repeat; mask:var(--ic-check) center/contain no-repeat; background:var(--pb-good); } .pbr-pc .con li::before { -webkit-mask-image:var(--ic-plus); mask-image:var(--ic-plus); transform:rotate(45deg); background:#c0392b; } /* uso */ .pbr-usage li { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--pb-line); border-radius:12px; background:var(--pb-surface); } .pbr-usage b { display:block; color:var(--pb-ink); font:600 .76rem/1.3 'Sora',sans-serif; } .pbr-usage span:not(.pbr-idx) { display:block; margin-top:3px; color:var(--pb-ink-2); font-size:.76rem; line-height:1.45; } .pb-report .comparison-method { margin-top:16px; } /* botão para abrir o relatório completo */ .pbr-details > summary { list-style:none; } .pbr-details > summary::-webkit-details-marker { display:none; } .pbr-toggle { display:inline-flex; align-items:center; gap:10px; margin-top:14px; padding:10px 12px 10px 18px; border:1px solid #1a50b8; border-radius:999px; cursor:pointer; user-select:none; background:linear-gradient(135deg,var(--pb-blue-2),var(--pb-blue)); color:#fff; font:700 .82rem/1 'Manrope',sans-serif; box-shadow:0 6px 16px #1f5fd640; transition:transform .25s var(--pb-ease), box-shadow .3s var(--pb-ease); } .pbr-toggle:hover { transform:translateY(-2px); box-shadow:0 12px 24px #1f5fd659; } .pbr-toggle:focus-visible { outline:2px solid var(--pb-gold); outline-offset:3px; } .pbr-toggle i { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#fff; } .pbr-toggle i::before { content:""; width:12px; height:12px; background:var(--pb-blue); -webkit-mask:var(--ic-arrow) center/contain no-repeat; mask:var(--ic-arrow) center/contain no-repeat; transform:rotate(90deg); transition:transform .35s var(--pb-ease); } .pbr-details[open] > .pbr-toggle i::before { transform:rotate(-90deg); } .pbr-toggle .close-txt, .pbr-details[open] > .pbr-toggle .open-txt { display:none; } .pbr-details[open] > .pbr-toggle .close-txt { display:inline; } .pbr-details[open] > .pbr-toggle { background:var(--pb-surface); color:var(--pb-ink-2); border-color:var(--pb-line-2); box-shadow:none; } .pbr-details[open] > .pbr-toggle i { background:var(--pb-gold-soft); } .pbr-details[open] > .pbr-toggle i::before { background:var(--pb-gold-ink); } .pbr-details[open] > *:not(summary) { animation:pb-drop .4s var(--pb-ease); } @media (max-width:640px) { .pb-report { padding:14px; } .pbr-row { grid-template-columns:1fr; gap:8px; } .pbr-bar { grid-template-columns:18px 1fr auto; } } /* ---------- consentimento de cookies (pb-consent.js) ---------- */ #cookieNotice { display:none !important; } /* aviso antigo, substituído */ .pb-consent { position:fixed; z-index:10050; left:50%; bottom:18px; width:min(720px,calc(100% - 24px)); transform:translateX(-50%); padding:18px 18px 16px; border:1px solid #d9c38f; border-radius:20px; background:#efebe1f5; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 24px 60px #0f1a2e33; color:var(--pb-ink); font-family:'Manrope',sans-serif; animation:pbc-in .5s var(--pb-ease); } .pb-consent.out { animation:pbc-out .3s ease forwards; } @keyframes pbc-in { from { opacity:0; transform:translate(-50%,24px); } } @keyframes pbc-out { to { opacity:0; transform:translate(-50%,24px); } } .pb-consent::before { content:""; position:absolute; left:20px; right:20px; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--pb-gold-2),var(--pb-blue-2),transparent); } .pbc-main { display:flex; gap:14px; align-items:flex-start; } .pbc-ic { flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--pb-gold-soft); color:var(--pb-gold-ink); } .pbc-ic svg, .pb-consent-fab svg, [data-pb-consent-link] svg { flex:none; width:22px; height:22px; } .pbc-copy strong { display:block; font:650 .95rem/1.2 'Sora',sans-serif; } .pbc-copy p { margin:6px 0 0; color:var(--pb-ink-2); font-size:.8rem; line-height:1.55; } .pbc-copy a { color:var(--pb-gold-ink); font-weight:600; } .pbc-prefs { display:grid; gap:8px; margin:14px 0 0; } .pbc-prefs[hidden] { display:none; } .pbc-opt { position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px; border:1px solid var(--pb-line); border-radius:12px; background:var(--pb-surface); cursor:pointer; } .pbc-opt b { display:block; font:650 .8rem/1.2 'Sora',sans-serif; } .pbc-opt small { display:block; margin-top:3px; color:var(--pb-muted); font-size:.72rem; line-height:1.4; } .pbc-opt input { position:absolute; opacity:0; pointer-events:none; } .pbc-opt i { flex:none; position:relative; width:42px; height:24px; border-radius:999px; background:#cdc3ab; transition:background .25s; } .pbc-opt i::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 4px #0003; transition:transform .3s var(--pb-ease); } .pbc-opt input:checked + i { background:var(--pb-good); } .pbc-opt input:checked + i::after { transform:translateX(18px); } .pbc-opt input:disabled + i { opacity:.6; } .pbc-opt input:focus-visible + i { outline:2px solid var(--pb-blue); outline-offset:2px; } .pbc-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:14px; } .pbc-btn { min-height:42px; padding:0 18px; border-radius:12px !important; font:700 .8rem/1 'Manrope',sans-serif !important; cursor:pointer; } .pbc-btn[hidden] { display:none !important; } .pbc-btn.ghost { border:1px solid var(--pb-line-2) !important; background:var(--pb-surface) !important; color:var(--pb-ink) !important; } .pbc-btn.ghost:hover { border-color:var(--pb-gold) !important; } .pbc-btn.primary { border:1px solid #1a50b8 !important; background:linear-gradient(135deg,var(--pb-blue-2),var(--pb-blue)) !important; color:#fff !important; } /* botão para reabrir nas páginas sem rodapé */ .pb-consent-fab { position:fixed; z-index:60; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:0; width:40px; height:40px; padding:0 9px !important; overflow:hidden; border:1px solid var(--pb-line-2) !important; border-radius:999px !important; background:var(--pb-surface) !important; color:var(--pb-gold-ink) !important; box-shadow:0 6px 16px #0f1a2e1f; cursor:pointer; transition:width .35s var(--pb-ease) !important; white-space:nowrap; } .pb-consent-fab span { margin-left:8px; font:600 .72rem/1 'Manrope',sans-serif; opacity:0; transition:opacity .2s; } .pb-consent-fab:hover, .pb-consent-fab:focus-visible { width:200px; } .pb-consent-fab:hover span, .pb-consent-fab:focus-visible span { opacity:1; } [data-pb-consent-link].footer-button svg { width:15px; height:15px; color:var(--pb-gold-ink); } @media (max-width:560px) { .pb-consent { bottom:10px; padding:14px; border-radius:16px; } .pbc-ic { display:none; } .pbc-actions { display:grid; grid-template-columns:1fr 1fr; } .pbc-actions .primary { grid-column:1/-1; order:-1; } } /* ---------- avisos legais no rodapé ---------- */ .pb-amazon-disclosure { display:block; margin-top:6px; color:var(--pb-gold-ink); font:600 .74rem/1.45 'Manrope',sans-serif; } .pb-amazon-disclosure::before { content:""; display:inline-block; width:12px; height:12px; margin-right:6px; vertical-align:-1px; background:var(--pb-gold); -webkit-mask:var(--ic-check) center/contain no-repeat; mask:var(--ic-check) center/contain no-repeat; } .pb-inline-link { all:unset; color:var(--pb-gold-ink); font-weight:600; text-decoration:underline; cursor:pointer; } .pb-legal-footer { box-sizing:border-box; font-family:'Manrope',sans-serif; width:auto; max-width:1180px; margin:40px 16px 28px; margin-inline:max(16px,calc((100% - 1180px) / 2)); padding:20px 22px; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px; border:1px solid var(--pb-line); border-radius:18px; background:var(--pb-surface); } .pb-legal-footer .footer-copy { max-width:640px; } .pb-legal-footer .footer-copy strong { display:block; margin-bottom:4px; font:400 1.05rem/1 'Jost',sans-serif; } .pb-legal-footer .affiliate-disclosure { display:block; color:var(--pb-muted); font:400 .76rem/1.5 'Manrope',sans-serif; } .pb-legal-footer .footer-nav { display:flex; flex-wrap:wrap; gap:8px; } .pb-legal-footer .footer-button { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 14px; border:1px solid var(--pb-line-2); border-radius:999px; color:var(--pb-ink-2); font:600 .74rem/1 'Manrope',sans-serif; text-decoration:none; background:var(--pb-surface); } .pb-legal-footer .footer-button:hover { border-color:var(--pb-gold-2); color:var(--pb-gold-ink); } /* ---------- janela central (páginas do rodapé) ---------- */ .pb-modal { width:min(820px,calc(100% - 24px)); height:min(84vh,860px); max-height:none; padding:0 !important; overflow:hidden; display:flex; flex-direction:column; border:1px solid #d9c38f !important; border-radius:22px !important; background:var(--pb-surface) !important; } .pb-modal:not([open]) { display:none; } .pb-modal::backdrop { background:#0f1a2e59; backdrop-filter:blur(6px); } .pb-modal-head { display:flex; align-items:center; gap:10px; padding:12px 12px 12px 22px; border-bottom:1px solid var(--pb-line); background:linear-gradient(180deg,#f3ead4,var(--pb-surface)); position:relative; } .pb-modal-head::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,transparent,var(--pb-gold-2),var(--pb-blue-2),transparent); } .pb-modal-head strong { flex:1; color:var(--pb-ink); font:650 1rem/1.2 'Sora',sans-serif; } .pb-modal-full, .pb-modal-close { display:grid; place-items:center; width:36px; height:36px; flex:none; border:1px solid var(--pb-line-2) !important; border-radius:50% !important; background:var(--pb-surface) !important; color:var(--pb-ink-2) !important; text-decoration:none; font:400 1.3rem/1 'Manrope',sans-serif; cursor:pointer; } .pb-modal-full::before { content:""; width:16px; height:16px; background:currentColor; -webkit-mask:var(--ic-out) center/contain no-repeat; mask:var(--ic-out) center/contain no-repeat; } .pb-modal-full:hover, .pb-modal-close:hover { border-color:var(--pb-gold) !important; color:var(--pb-gold-ink) !important; } .pb-modal iframe { flex:1; width:100%; border:0; background:var(--pb-surface); } @media (max-width:640px) { .pb-modal { height:90vh; border-radius:18px !important; } } /* conteúdo dentro da janela: só a página, sem cabeçalho, rodapé nem HUD */ html.pb-embed body { background:var(--pb-surface) !important; } html.pb-embed body::before, html.pb-embed body::after, html.pb-embed .pb-hud, html.pb-embed .legal-top, html.pb-embed .pb-legal-footer, html.pb-embed .pb-consent-fab, html.pb-embed .pb-consent { display:none !important; } html.pb-embed .legal { width:auto; margin:0; } html.pb-embed .legal-card { border:0; border-radius:0; background:transparent; } /* preferências de cookies reabertas: no centro */ .pb-consent-backdrop { position:fixed; inset:0; z-index:10040; background:#0f1a2e59; backdrop-filter:blur(6px); animation:pb-drop .3s ease; } .pb-consent.center { top:50%; bottom:auto; transform:translate(-50%,-50%); width:min(560px,calc(100% - 24px)); animation:pbc-in-center .4s var(--pb-ease); } .pb-consent.center.out { animation:pbc-out-center .3s ease forwards; } @keyframes pbc-in-center { from { opacity:0; transform:translate(-50%,-46%) scale(.97); } } @keyframes pbc-out-center { to { opacity:0; transform:translate(-50%,-46%) scale(.97); } } /* com rodapé na página, o botão flutuante de cookies deixa de ser preciso */ body:has(.footer-nav [data-pb-consent-link]) .pb-consent-fab { display:none; } /* ---------- preços: sempre identificados como média de referência (regras da Amazon) ---------- */ body .price-ref { display:block; margin-top:3px; color:var(--pb-muted-2); font:600 .54rem/1.2 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; text-align:right; } /* lugar próprio na grelha do card: logo por baixo do preço */ body .part-card .flex-1 { grid-template-areas:'name price' 'spec pref' 'actions actions' !important; } body .part-card .price-ref { grid-area:pref; align-self:start; margin-top:-3px; white-space:nowrap; padding:0 !important; border:0 !important; background:none !important; color:var(--pb-muted-2) !important; font:600 .52rem/1.2 'IBM Plex Mono',monospace !important; } @media (max-width:560px) { body .part-card .flex-1 { grid-template-areas:'name' 'spec' 'price' 'pref' 'actions' !important; } body .part-card .price-ref { text-align:left; } } body .price-note { margin:-4px 0 12px; padding:8px 12px 8px 30px; position:relative; border:1px dashed #d4c18f; border-radius:10px; background:#f1e8d22e; color:var(--pb-muted); font:400 .7rem/1.45 'Manrope',sans-serif; } body .price-note strong { color:var(--pb-ink-2); } body .price-note::before { content:"i"; position:absolute; left:10px; top:9px; display:grid; place-items:center; width:13px; height:13px; border-radius:50%; background:var(--pb-gold); color:#fff; font:700 .55rem/1 'Sora',sans-serif; } .pbr-price small { display:block; margin-top:4px; color:var(--pb-muted-2); font:600 .52rem/1 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; } /* ---------- espaços de anúncio (AdSense) ---------- Escondidos até ADS_ENABLED em pb-consent.js. Sempre identificados e afastados dos botões. */ .pb-ad { display:none; } html.pb-ads-on .pb-ad { display:block; position:relative; min-height:120px; margin:28px 0; padding:22px 12px 12px; border:1px dashed var(--pb-line-2); border-radius:14px; background:var(--pb-surface-2); clear:both; } html.pb-ads-on .pb-ad::before { content:"Publicidade"; position:absolute; top:6px; left:12px; color:var(--pb-muted-2); font:600 .56rem/1 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; } html.pb-ads-on .pb-ad.page-ad { max-width:1180px; margin:24px auto; } /* catálogo da API fica sempre ligado: sem botão para alternar */ #catalogToggle { display:none !important; } /* botão × para tirar a peça: mantém a posição ao clicar */ body .node-remove { z-index:9 !important; width:24px !important; height:24px !important; border-radius:50% !important; background:var(--pb-surface) !important; color:#c0392b !important; border:1px solid #e6b8b2 !important; box-shadow:0 4px 10px #0f1a2e26 !important; } body .node-remove:hover { background:#c0392b !important; color:#fff !important; border-color:#c0392b !important; } body .node-remove .pb-ripple { display:none; } /* ---------- laterais decorativas do mapa ---------- */ body .visual-panel > .pb-deco { position:absolute; top:96px; bottom:120px; z-index:0; display:flex; flex-direction:column; gap:18px; pointer-events:none; } .pb-deco.l { left:24px; align-items:flex-start; } .pb-deco.r { right:24px; align-items:flex-end; } .pb-deco .gauge { width:34px; height:200px; flex:none; overflow:visible; } .pb-deco .gauge path { fill:none; stroke:#c2a466; stroke-width:1.2; } .pb-deco .gauge .rail { stroke:#d8c9a6; stroke-dasharray:2 3; } .pb-deco .gauge .mark { fill:var(--pb-blue); stroke:none; animation:pb-gauge 6s ease-in-out infinite alternate; } @keyframes pb-gauge { 0% { transform:translateY(40px); } 35% { transform:translateY(190px); } 70% { transform:translateY(110px); } 100% { transform:translateY(260px); } } .pb-deco .hex { width:62px; height:62px; overflow:visible; } .pb-deco .hex path { fill:none; stroke:#c9a65e; stroke-width:1.1; } .pb-deco .hex .hx1 { fill:#e9d9b2; animation:pb-hexblink 3s ease-in-out infinite; } .pb-deco .hex .hx2 { stroke:#3b7cf0; animation:pb-hexblink 3s ease-in-out 1.5s infinite; } @keyframes pb-hexblink { 50% { opacity:.25; } } .pb-deco .txt { color:#8c7646; font:500 .56rem/1.7 'IBM Plex Mono',monospace; letter-spacing:.12em; } .pb-deco.r .txt { text-align:right; } .pb-deco .radar { position:relative; width:64px; height:64px; border-radius:50%; border:1px solid #cdb47c; background:radial-gradient(circle,transparent 30%,#cdb47c55 31%,transparent 32%,transparent 62%,#cdb47c55 63%,transparent 64%), linear-gradient(#cdb47c55,#cdb47c55) center/1px 100% no-repeat, linear-gradient(#cdb47c55,#cdb47c55) center/100% 1px no-repeat; overflow:hidden; } .pb-deco .radar i { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,#3b7cf066,transparent 25%); animation:pb-spin 3.2s linear infinite; } .pb-deco .radar::after { content:""; position:absolute; left:62%; top:30%; width:5px; height:5px; border-radius:50%; background:var(--pb-gold); box-shadow:0 0 6px var(--pb-gold-2); animation:intro-blink 1.6s ease-in-out infinite; } .pb-deco .spec { display:flex; align-items:flex-end; gap:3px; height:34px; } .pb-deco .spec i { width:4px; height:var(--h); border-radius:2px 2px 0 0; background:linear-gradient(var(--pb-gold-2),var(--pb-blue)); opacity:.7; animation:pb-spec 1.4s ease-in-out infinite alternate; animation-delay:var(--dl); } @keyframes pb-spec { from { transform:scaleY(.3); } to { transform:scaleY(1); } } .pb-deco .spec i { transform-origin:bottom; } @media (max-width:1500px) { .pb-deco .txt, .pb-deco .hex, .pb-deco .spec { display:none; } .pb-deco .radar { width:44px; height:44px; } } @media (max-width:900px) { body .visual-panel > .pb-deco { display:none; } } html[data-theme="dark"] .pb-deco .hex .hx1 { fill:#e9d9b266; } /* ---------- detalhes das outras caixas ---------- */ .pb-rail { position:absolute !important; top:110px; bottom:70px; width:6px; z-index:0; pointer-events:none; background:repeating-linear-gradient(to bottom,#c9a65e99 0 1px,transparent 1px 9px); } .pb-rail.l { left:9px; } .pb-rail.r { right:9px; } .pb-rail::before { content:""; position:absolute; left:2px; top:0; bottom:0; width:1px; background:linear-gradient(transparent,#d9c9a6,transparent); } .pb-rail i { position:absolute; left:-2px; width:10px; height:22px; border-radius:3px; background:linear-gradient(var(--pb-gold-2),var(--pb-blue)); opacity:.75; animation:pb-railmove 5.5s ease-in-out infinite alternate; } @keyframes pb-railmove { 0% { top:0; } 50% { top:60%; } 100% { top:calc(100% - 22px); } } .pb-mini { position:absolute !important; z-index:1; display:flex; align-items:center; gap:10px; pointer-events:none; color:#8c7646; font:500 .54rem/1.6 'IBM Plex Mono',monospace; letter-spacing:.14em; } .pb-mini em { font-style:normal; } .pb-wave { width:110px; height:18px; overflow:visible; } .pb-wave path { fill:none; stroke:var(--pb-gold-2); stroke-width:1.4; stroke-dasharray:6 4; animation:pb-wavedash 1.2s linear infinite; } .pb-wave path.b { stroke:var(--pb-blue-2); opacity:.6; animation-direction:reverse; } @keyframes pb-wavedash { to { stroke-dashoffset:-20; } } .pb-mini.sel { right:34px; top:86px; } .pb-mini.bld { left:50%; top:30px; transform:translateX(-50%); } .pb-mini.cmp { right:40px; top:44px; align-items:flex-start; } .pb-mini.cmp .txt { text-align:right; } .pb-mini .radar { position:relative; flex:none; width:48px; height:48px; border-radius:50%; border:1px solid #cdb47c; overflow:hidden; background:radial-gradient(circle,transparent 30%,#cdb47c55 31%,transparent 32%,transparent 62%,#cdb47c55 63%,transparent 64%), linear-gradient(#cdb47c55,#cdb47c55) center/1px 100% no-repeat, linear-gradient(#cdb47c55,#cdb47c55) center/100% 1px no-repeat; } .pb-mini .radar i { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,#3b7cf066,transparent 25%); animation:pb-spin 3.2s linear infinite; } .pb-mini.cmp .radar { order:2; } /* marcas de mira nos cantos do estado vazio da comparação */ body .empty-state::after { content:""; position:absolute; inset:14px; pointer-events:none; opacity:.6; background: linear-gradient(#b0812a,#b0812a) left top/12px 1.5px no-repeat, linear-gradient(#b0812a,#b0812a) left top/1.5px 12px no-repeat, linear-gradient(#b0812a,#b0812a) right top/12px 1.5px no-repeat, linear-gradient(#b0812a,#b0812a) right top/1.5px 12px no-repeat, linear-gradient(#b0812a,#b0812a) left bottom/12px 1.5px no-repeat, linear-gradient(#b0812a,#b0812a) left bottom/1.5px 12px no-repeat, linear-gradient(#b0812a,#b0812a) right bottom/12px 1.5px no-repeat, linear-gradient(#b0812a,#b0812a) right bottom/1.5px 12px no-repeat; } @media (max-width:1100px) { .pb-mini.sel, .pb-mini.bld { display:none; } } @media (max-width:900px) { .pb-mini, .pb-rail { display:none; } } /* ---------- faixa HUD no cabeçalho ---------- */ .pb-headstrip { flex:1; display:flex; align-items:center; justify-content:center; gap:12px; min-width:0; margin:0 24px; padding:8px 16px; border-radius:999px; border:1px dashed #d8c9a6; background:#f3efe466; color:#7d6a3e; font:500 .56rem/1 'IBM Plex Mono',monospace; letter-spacing:.14em; white-space:nowrap; overflow:hidden; pointer-events:none; } .pb-headstrip .dot { width:6px; height:6px; border-radius:50%; background:var(--pb-good); box-shadow:0 0 0 0 #1f9d6366; animation:pb-ping-green 2s infinite; flex:none; } .pb-headstrip .sep { width:1px; height:12px; background:#d8c9a6; flex:none; } .pb-headstrip .clock { color:var(--pb-blue); font-weight:600; min-width:62px; text-align:center; } .pb-ecg { width:110px; height:20px; flex:none; overflow:visible; } .pb-ecg path { fill:none; stroke:var(--pb-gold); stroke-width:1.4; stroke-linejoin:round; stroke-dasharray:60 200; animation:pb-ecg 2.4s linear infinite; } @keyframes pb-ecg { from { stroke-dashoffset:260; } to { stroke-dashoffset:0; } } .pb-headstrip .bars { flex:none; width:30px; height:10px; opacity:.6; background:repeating-linear-gradient(90deg,#a8781f 0 1px,transparent 1px 3px,#a8781f 3px 5px,transparent 5px 6px); } /* linha que corre por baixo do cabeçalho */ body .topbar::after, body .guides-top::after, body .article-top::after { content:""; position:absolute; left:24px; right:24px; bottom:-1px; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--pb-gold-2),var(--pb-blue-2),transparent); background-size:200% 100%; animation:pb-flow 5s linear infinite; opacity:.8; } @media (max-width:1100px) { .pb-headstrip .pb-ecg, .pb-headstrip span:nth-of-type(5), .pb-headstrip .sep:nth-of-type(n+3) { display:none; } } @media (max-width:820px) { .pb-headstrip { display:none; } } /* ---------- lateral "Sua montagem" no mapa (removida) ---------- */ body .visual-panel > .pb-buildside { position:absolute; left:22px; top:96px; z-index:4; width:168px; display:grid; gap:12px; } .pb-bs-head { display:flex; align-items:center; gap:10px; } .pb-bs-head strong { display:block; color:var(--pb-ink); font:600 .8rem/1.2 'Sora',sans-serif; } .pb-bs-head em { display:block; margin-top:2px; color:var(--pb-gold-ink); font:500 .64rem/1 'IBM Plex Mono',monospace; font-style:normal; letter-spacing:.06em; } .pb-bs-ring { position:relative; flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:conic-gradient(var(--pb-good) calc(var(--p)*1%), #e2d9c4 0); transition:background .6s var(--pb-ease); } .pb-bs-ring::before { content:""; position:absolute; inset:4px; border-radius:50%; background:var(--pb-surface); } .pb-bs-ring b, .pb-bs-ring small { position:relative; font-family:'IBM Plex Mono',monospace; color:var(--pb-ink); } .pb-bs-ring b { font-size:.9rem; line-height:1; } .pb-bs-ring small { position:absolute; bottom:8px; right:7px; font-size:.5rem; color:var(--pb-muted-2); } .pb-buildside ul { list-style:none; margin:0; padding:8px; display:grid; gap:2px; border:1px solid var(--pb-line); border-radius:14px; background:#efebe1cc; backdrop-filter:blur(6px); } .pb-buildside li button { width:100%; display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:8px; padding:6px 8px !important; border:0 !important; border-radius:9px !important; background:transparent !important; color:var(--pb-ink-2) !important; font:500 .7rem/1.2 'Manrope',sans-serif !important; text-align:left; box-shadow:none !important; min-height:0 !important; cursor:pointer; } .pb-buildside li button:hover { background:var(--pb-gold-soft) !important; transform:translateX(3px) !important; } .pb-buildside li button.cur { background:#fff4dc !important; color:var(--pb-gold-ink) !important; font-weight:700 !important; } .pb-buildside li button i { width:8px; height:8px; border-radius:50%; background:#d6ccb5; transition:background .3s, box-shadow .3s; } .pb-buildside li button.ok i { background:var(--pb-good); box-shadow:0 0 0 3px #1f9d6326; } .pb-buildside li button span { color:var(--pb-muted-2); font:600 .62rem/1 'IBM Plex Mono',monospace; } .pb-buildside li button.ok span { color:var(--pb-good); } @media (max-width:1500px) { body .visual-panel > .pb-buildside { display:none; } } /* ---------- botão de tema ---------- */ .pb-theme-toggle { position:relative; display:inline-grid; place-items:center; width:42px; height:42px; flex:none; border-radius:50% !important; border:1px solid var(--pb-line-2) !important; background:var(--pb-surface) !important; color:var(--pb-gold-ink) !important; cursor:pointer; overflow:hidden; } .pb-theme-toggle:hover { border-color:var(--pb-gold-2) !important; transform:rotate(-12deg); } .pb-theme-toggle .pb-ic { position:absolute; width:18px; height:18px; transition:transform .5s var(--pb-ease), opacity .35s; } .pb-theme-toggle .moon { transform:translateY(26px) rotate(-60deg); opacity:0; } html[data-theme="dark"] .pb-theme-toggle .sun { transform:translateY(-26px) rotate(60deg); opacity:0; } html[data-theme="dark"] .pb-theme-toggle .moon { transform:none; opacity:1; } :root { --ic-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); --ic-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/%3E%3C/svg%3E"); } body .topbar .studio-nav, body .guides-top, body .article-top, body header.top { align-items:center; } /* ---------- modo escuro ---------- Inverte o tema claro (mantendo dourado e azul) e devolve as imagens às cores reais. */ /* O filtro vai em cada bloco do (e não no ): um filtro no faria o Chrome posicionar janelas, avisos e a intro em relação à página inteira em vez da tela. */ html[data-theme="dark"] body > *:not(script):not(style):not(link):not(dialog) { filter:invert(.9) hue-rotate(180deg); } /* nas janelas, o filtro no próprio estraga a centragem: aplica-se ao conteúdo */ html[data-theme="dark"] body > dialog { background:#26231d !important; border-color:#5a4a26 !important; } html[data-theme="dark"] body > dialog > * { filter:invert(.9) hue-rotate(180deg); } html[data-theme="dark"], html[data-theme="dark"] body { background:#26231d !important; } html[data-theme="dark"] body::after { opacity:.35; } html[data-theme="dark"] img, html[data-theme="dark"] video, html[data-theme="dark"] picture, html[data-theme="dark"] .amazon-badge svg, html[data-theme="dark"] .intro-logo { filter:invert(1) hue-rotate(180deg) !important; } html[data-theme="dark"] .tower-plate:has(.tower-photo) { filter:none; } html[data-theme="dark"] body::before { opacity:.18; } html[data-theme="dark"] .pb-frame { filter:invert(1) hue-rotate(180deg); } html[data-theme="dark"] dialog::backdrop { background:#000000a6; } /* devolve as fotos às cores reais (seletor reforçado para vencer os filtros dos ícones) */ html[data-theme="dark"] body .amazon-badge svg:not(#pb-x):not(#pb-y) { filter:none !important; } html[data-theme="dark"] body img:not(#pb-x):not(#pb-y) { filter:invert(1) hue-rotate(180deg) drop-shadow(0 6px 10px #0003) !important; } body .visual-panel > .pb-circuit, body .selection-panel > .pb-circuit, body .compare-panel > .pb-circuit, body .build-panel > .pb-circuit, body .visual-panel > .pb-scale, body .selection-panel > .pb-scale, body .compare-panel > .pb-scale, body .build-panel > .pb-scale, body .visual-panel > .pb-readout { position:absolute; } /* ---------- botões redondos só com ícone (cabeçalho) + dica ao passar o rato ---------- */ :root { --ic-tower:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='2.5' width='13' height='19' rx='2.5'/%3E%3Ccircle cx='12' cy='14.5' r='3.2'/%3E%3Ccircle cx='12' cy='14.5' r='.9' fill='%23000'/%3E%3Cpath d='M9 6h6M9 8.7h3'/%3E%3C/svg%3E"); --ic-guides:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.2c-1.7-1.3-4-1.8-7.2-1.5v12.6c3.2-.3 5.5.2 7.2 1.5 1.7-1.3 4-1.8 7.2-1.5V4.7c-3.2-.3-5.5.2-7.2 1.5Z'/%3E%3Cpath d='M12 6.2v12.6M7.5 8.6c1-.1 2 0 2.8.3M7.5 11.6c1-.1 2 0 2.8.3'/%3E%3C/svg%3E"); } body .studio-nav a.pb-iconbtn { display:inline-grid !important; place-items:center; width:42px; height:42px; padding:0 !important; gap:0 !important; flex:none; font-size:0 !important; border:1px solid var(--pb-line-2) !important; border-radius:50% !important; background:var(--pb-surface) !important; color:var(--pb-gold-ink) !important; box-shadow:none !important; } body .studio-nav a.pb-iconbtn::after { display:none; } body .studio-nav a.pb-iconbtn { overflow:visible !important; } body .studio-nav a.pb-iconbtn:hover { border-color:var(--pb-gold-2) !important; transform:translateY(-2px) rotate(-6deg); box-shadow:0 8px 18px #b0812a22 !important; } body .studio-nav a.pb-iconbtn > .pb-ic { width:20px; height:20px; } body .studio-nav { gap:10px !important; } /* dica (tooltip) */ [data-tip] { position:relative; } [data-tip]:hover::before, [data-tip]:focus-visible::before { content:attr(data-tip); position:absolute; z-index:200; top:calc(100% + 10px); right:50%; transform:translateX(50%); white-space:nowrap; padding:6px 11px; border-radius:9px; background:var(--pb-ink); color:#f6efdc; font:600 .7rem/1.2 'Manrope',sans-serif; letter-spacing:.01em; pointer-events:none; box-shadow:0 8px 20px #0f1a2e40; animation:pb-tip .18s var(--pb-ease); } [data-tip]:hover::after, [data-tip]:focus-visible::after { } @keyframes pb-tip { from { opacity:0; transform:translate(50%,-4px); } } body .pb-theme-toggle[data-tip] { overflow:visible !important; } body .pb-theme-toggle[data-tip]:hover::before { z-index:200; } @media (max-width:640px) { body .studio-nav a.pb-iconbtn { width:40px; height:40px; } [data-tip]:hover::before { right:0; transform:none; } } /* ---------- montagens por orçamento (página PCs prontos) ---------- */ .budget-section { margin:6px 0 30px; } .budget-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; } .budget-card { position:relative; display:flex; flex-direction:column; gap:6px; padding:18px; border:1px solid var(--pb-line); border-radius:18px; background:var(--pb-surface); color:var(--pb-ink); text-decoration:none; overflow:hidden; transition:transform .35s var(--pb-ease), box-shadow .35s var(--pb-ease), border-color .25s; } .budget-card::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--pb-gold-2),var(--pb-blue-2)); } .budget-card:hover { transform:translateY(-3px); border-color:#e3cf9f; box-shadow:0 14px 28px #0f1a2e14; } .budget-card .bc-tag { color:var(--pb-muted-2); font:600 .56rem/1 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; } .budget-card b { color:var(--pb-gold-ink); font:700 1.6rem/1.1 'IBM Plex Mono',monospace; } .budget-card strong { font:600 .86rem/1.35 'Sora',sans-serif; } .budget-card small { color:var(--pb-muted); font:400 .74rem/1.45 'Manrope',sans-serif; } .budget-card i { margin-top:auto; padding-top:8px; color:var(--pb-blue); font:700 .74rem 'Manrope',sans-serif; font-style:normal; } @media (max-width:1000px) { .budget-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px) { .budget-cards { grid-template-columns:1fr; } } /* ---------- logótipo como ligação, seletor de idioma, atalhos de idioma no menu ---------- */ a.brand, a.brand:hover, .brand a, a.article-brand, a.legal-brand, a.guides-brand { text-decoration:none; color:inherit; } a.brand .brand-name, a.brand .brand-sub { text-decoration:none; } .pb-lang { position:relative; display:inline-flex; flex:none; } .pb-lang-btn { display:inline-grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid var(--pb-line-2) !important; border-radius:50% !important; background:var(--pb-surface) !important; color:var(--pb-gold-ink) !important; font:700 .7rem/1 'IBM Plex Mono',monospace !important; letter-spacing:.04em; cursor:pointer; overflow:visible !important; } .pb-lang-btn:hover { border-color:var(--pb-gold-2) !important; transform:translateY(-2px); } .pb-lang-menu { position:absolute; z-index:300; top:calc(100% + 10px); right:0; min-width:170px; margin:0; padding:6px; list-style:none; border:1px solid var(--pb-line-2); border-radius:14px; background:var(--pb-surface); box-shadow:var(--pb-shadow-lg); animation:pb-drop .2s var(--pb-ease); } .pb-lang-menu[hidden] { display:none; } .pb-lang-menu a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; color:var(--pb-ink-2); font:600 .8rem/1 'Manrope',sans-serif; text-decoration:none; } .pb-lang-menu a b { display:inline-grid; place-items:center; width:28px; height:22px; border-radius:6px; background:var(--pb-gold-soft); color:var(--pb-gold-ink); font:700 .62rem/1 'IBM Plex Mono',monospace; } .pb-lang-menu a:hover { background:var(--pb-gold-soft); } .pb-lang-menu a[aria-current] { color:var(--pb-ink); } .pb-lang-menu a[aria-current] b { background:var(--pb-ink); color:#f6efdc; } .menu-langs { position:fixed; z-index:10020; top:22px; left:50%; transform:translateX(-50%); display:flex; gap:6px; padding:5px; border:1px solid #c9b27c80; border-radius:999px; background:#efebe1cc; backdrop-filter:blur(8px); } .menu-langs a { display:grid; place-items:center; min-width:44px; height:32px; padding:0 12px; border-radius:999px; color:#2a3550; font:700 .72rem/1 'IBM Plex Mono',monospace; letter-spacing:.06em; text-decoration:none; transition:background .2s, color .2s; } .menu-langs a:hover { background:#f1e2bc; } .menu-langs a[aria-current] { background:#0f1a2e; color:#f6efdc; } @media (max-width:640px) { .pb-lang-btn { width:40px; height:40px; } .menu-langs { top:14px; } } /* ---------- logótipo como ligação, seletor de idioma, atalhos de idioma no menu ---------- */ a.brand, a.brand:hover, .brand a, a.article-brand, a.legal-brand, a.guides-brand { text-decoration:none; color:inherit; } a.brand .brand-name, a.brand .brand-sub { text-decoration:none; } .pb-lang { position:relative; display:inline-flex; flex:none; } .pb-lang-btn { display:inline-grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid var(--pb-line-2) !important; border-radius:50% !important; background:var(--pb-surface) !important; color:var(--pb-gold-ink) !important; font:700 .7rem/1 'IBM Plex Mono',monospace !important; letter-spacing:.04em; cursor:pointer; overflow:visible !important; } .pb-lang-btn:hover { border-color:var(--pb-gold-2) !important; transform:translateY(-2px); } .pb-lang-menu { position:absolute; z-index:300; top:calc(100% + 10px); right:0; min-width:170px; margin:0; padding:6px; list-style:none; border:1px solid var(--pb-line-2); border-radius:14px; background:var(--pb-surface); box-shadow:var(--pb-shadow-lg); animation:pb-drop .2s var(--pb-ease); } .pb-lang-menu[hidden] { display:none; } .pb-lang-menu a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; color:var(--pb-ink-2); font:600 .8rem/1 'Manrope',sans-serif; text-decoration:none; } .pb-lang-menu a b { display:inline-grid; place-items:center; width:28px; height:22px; border-radius:6px; background:var(--pb-gold-soft); color:var(--pb-gold-ink); font:700 .62rem/1 'IBM Plex Mono',monospace; } .pb-lang-menu a:hover { background:var(--pb-gold-soft); } .pb-lang-menu a[aria-current] { color:var(--pb-ink); } .pb-lang-menu a[aria-current] b { background:var(--pb-ink); color:#f6efdc; } .menu-langs { position:fixed; z-index:10020; top:22px; left:50%; transform:translateX(-50%); display:flex; gap:6px; padding:5px; border:1px solid #c9b27c80; border-radius:999px; background:#efebe1cc; backdrop-filter:blur(8px); } .menu-langs a { display:grid; place-items:center; min-width:44px; height:32px; padding:0 12px; border-radius:999px; color:#2a3550; font:700 .72rem/1 'IBM Plex Mono',monospace; letter-spacing:.06em; text-decoration:none; transition:background .2s, color .2s; } .menu-langs a:hover { background:#f1e2bc; } .menu-langs a[aria-current] { background:#0f1a2e; color:#f6efdc; } @media (max-width:640px) { .pb-lang-btn { width:40px; height:40px; } .menu-langs { top:14px; } } /* lista de FPS por jogo: abre por baixo e fica por cima das peças (os filhos do painel têm z-index próprio) */ body .build-panel > .build-metrics { z-index:8; } body .performance-popover { max-height:none; overflow:visible; background:var(--pb-surface, #f2f1ed); }