/* PXART, por BKR IMPORTS: sistema visual do site.
 * Precisa Arte: grade, medida e régua. Um acento só (azul de sinal), verde
 * reservado para economia e confirmação. Títulos em Clash Grotesk, texto em
 * Figtree, medidas em IBM Plex Mono. */

@font-face{font-family:"Clash Grotesk";src:url("ClashGrotesk-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Clash Grotesk";src:url("ClashGrotesk-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Clash Grotesk";src:url("ClashGrotesk-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --fundo:#0B1017; --fundo-2:#0E141C; --sup:#121A24; --sup-2:#18222F; --campo:#080C12;
  --linha:rgba(252,253,253,.09); --linha-forte:rgba(252,253,253,.18);
  --papel:#FCFDFD; --texto:#DCE3EB; --suave:#9AA7B6; --fraco:#6E7B8C;
  --sinal:#4AA3EA; --sinal-claro:#7CC0F2; --sinal-fundo:rgba(74,163,234,.10);
  --bkr:#005DA3;
  --verde:#6FD6A2; --verde-fundo:rgba(111,214,162,.10);
  --alerta:#F2B544; --erro:#F07167; --erro-fundo:rgba(240,113,103,.10);
  --titulo:"Clash Grotesk","Helvetica Neue",Arial,sans-serif;
  --corpo:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1140px; --r:6px; --r2:12px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--fundo);color:var(--texto);font-family:var(--corpo);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;padding-inline:20px}
@media (max-width:480px){body{font-size:16px;padding-inline:16px}}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--sinal);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--wrap);margin-inline:auto}
h1,h2,h3,h4{font-family:var(--titulo);font-weight:600;color:var(--papel);letter-spacing:-.01em;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(2.35rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
h3{font-size:1.22rem;line-height:1.2}
p{margin:0}
b,strong{color:var(--papel);font-weight:600}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.suave{color:var(--suave)}
.lead{font-size:1.1rem;color:var(--texto);max-width:60ch}

/* rótulo de seção: quadrado da grade + texto em mono */
.rotulo{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sinal)}
.rotulo::before{content:"";width:8px;height:8px;background:var(--sinal);flex:none}

/* régua: marcação a cada 10 px, traço longo a cada 50 px */
.regua{height:12px;background:
  linear-gradient(90deg,var(--linha-forte) 1px,transparent 1px) 0 0/50px 12px repeat-x,
  linear-gradient(90deg,var(--linha) 1px,transparent 1px) 0 6px/10px 6px repeat-x;border-top:1px solid var(--linha)}

/* barra superior */
.topo{position:sticky;top:0;z-index:30;background:rgba(11,16,23,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linha);margin-inline:-20px;padding-inline:20px}
@media (max-width:480px){.topo{margin-inline:-16px;padding-inline:16px}}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;white-space:nowrap}
.marca .px{display:grid;grid-template-columns:repeat(2,9px);grid-template-rows:repeat(2,9px);gap:2px}
.marca .px i{background:var(--papel);display:block}
.marca .px i:nth-child(4){background:var(--sinal);transform:translate(2px,2px)}
.marca b{font-family:var(--titulo);font-weight:700;font-size:1.28rem;letter-spacing:.02em;color:var(--papel)}
.marca span{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--suave);text-transform:uppercase}
.topo nav{display:flex;gap:1.5rem;font-size:.95rem}
.topo nav a{text-decoration:none;color:var(--suave)}
.topo nav a:hover,.topo nav a[aria-current]{color:var(--papel)}
@media (max-width:900px){.topo nav{display:none}}
@media (max-width:420px){.marca span{display:none}}

/* botões: retângulo de canto curto, como tudo na grade */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font:600 .98rem/1.1 var(--corpo);padding:.95rem 1.35rem;border-radius:var(--r);text-decoration:none;border:1px solid var(--linha-forte);color:var(--papel);background:transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s;text-align:center}
.bt:hover{border-color:rgba(252,253,253,.4)}
.bt:active{transform:translateY(1px)}
.bt-pri{background:var(--sinal);border-color:var(--sinal);color:#04121F}
.bt-pri:hover{background:var(--sinal-claro);border-color:var(--sinal-claro)}
.bt-claro{background:var(--papel);border-color:var(--papel);color:#0B1017}
.bt-claro:hover{background:#E5EAF0}
.bt-p{padding:.62rem 1rem;font-size:.9rem}
.bt svg{width:18px;height:18px;flex:none}
.bt[disabled]{opacity:.55;cursor:not-allowed}
.acoes{display:flex;flex-wrap:wrap;gap:.75rem}

/* seções */
.secao{padding-block:clamp(64px,8vw,112px)}
.cab{display:grid;gap:1rem;max-width:760px;margin-bottom:clamp(32px,4vw,52px)}

/* cartões */
.cartao{background:var(--sup);border:1px solid var(--linha);border-radius:var(--r2);padding:clamp(20px,2.4vw,28px)}

/* formulários */
.campo{display:grid;gap:.35rem}
.campo label{font-size:.9rem;color:var(--texto);font-weight:500}
.campo label span{color:var(--fraco);font-weight:400}
.campo input,.campo select{width:100%;background:var(--campo);border:1px solid var(--linha-forte);border-radius:var(--r);color:var(--papel);font:500 1rem/1.3 var(--corpo);padding:.8rem .9rem;min-height:48px}
.campo input::placeholder{color:#556273}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--sinal);box-shadow:0 0 0 3px var(--sinal-fundo)}
.campo .erro{display:none;font-size:.82rem;color:var(--erro)}
.campo.ruim input,.campo.ruim select{border-color:var(--erro)}
.campo.ruim .erro{display:block}
.campo .dica{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem;color:var(--fraco)}
.grade2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grade2 .todo{grid-column:1/-1}
@media (max-width:560px){.grade2{grid-template-columns:1fr}}
.aceite{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--suave);cursor:pointer}
.aceite input{margin-top:.25rem;width:18px;height:18px;accent-color:var(--sinal);flex:none}
.aviso{border-radius:var(--r);padding:.8rem 1rem;font-size:.92rem;background:var(--erro-fundo);border:1px solid rgba(240,113,103,.35);color:#FFD9D5}
.aviso.ok{background:var(--verde-fundo);border-color:rgba(111,214,162,.35);color:#D8F5E6}

/* perguntas */
.perguntas details{border-top:1px solid var(--linha)}
.perguntas details:last-child{border-bottom:1px solid var(--linha)}
.perguntas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 0;font-weight:600;color:var(--papel)}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"+";font-family:var(--mono);color:var(--sinal);font-size:1.2rem;flex:none}
.perguntas details[open] summary::after{content:"\2212"}
.perguntas details p{padding:0 0 1.15rem;color:var(--texto);max-width:70ch}

/* rodapé */
.rodape{border-top:1px solid var(--linha);padding-block:40px 56px;color:var(--suave);font-size:.9rem}
.rodape .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:2rem}
.rodape h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fraco);font-weight:500;margin-bottom:.8rem}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.rodape a{text-decoration:none;color:var(--texto)}
.rodape a:hover{color:var(--papel)}
.rodape .fino{grid-column:1/-1;border-top:1px solid var(--linha);padding-top:1.4rem;font-size:.8rem;color:var(--fraco);max-width:none}
@media (max-width:760px){.rodape .wrap{grid-template-columns:1fr}}

/* ---- Os outros produtos PXART: bloco comum às páginas de produto ---- */
.outros{border-top:1px solid var(--linha);padding-block:clamp(48px,7vw,88px)}
.outros .wrap{display:grid;gap:1.6rem}
.outros .rotulo-outros{font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--suave);display:flex;gap:.6rem;align-items:center}
.outros .rotulo-outros::before{content:"";width:8px;height:8px;background:var(--sinal);border-radius:2px}
.outros h2{font-family:var(--titulo);font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.12;color:var(--papel);letter-spacing:-.01em;max-width:40ch;margin:0}
.outros h2 em{font-style:normal;color:var(--sinal-claro)}
.outros .grade-outros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.outros .c{background:var(--sup);border:1px solid var(--linha);border-radius:var(--r2);padding:1.3rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.45rem;text-decoration:none;color:var(--texto);position:relative;overflow:hidden;transition:border-color .15s ease,transform .15s ease}
.outros .c::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cor)}
.outros .c:hover{border-color:var(--cor);transform:translateY(-2px)}
.outros .c.pp{--cor:#CFD8E3} .outros .c.vd{--cor:#6FD6A2} .outros .c.am{--cor:#FFE300} .outros .c.az{--cor:#4AA3EA}
.outros .c .et{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.outros .c .nm{font-family:var(--titulo);font-weight:600;font-size:1.25rem;color:var(--papel);line-height:1.15}
.outros .c .ds{font-size:.92rem;line-height:1.45;color:var(--suave);flex:1}
.outros .c .pr{font-family:var(--mono);font-size:.82rem;color:var(--papel);margin-top:.4rem}
.outros .c .pr b{color:var(--cor);font-weight:600}
.outros .c .ir{margin-top:.6rem;font-weight:600;color:var(--cor);font-size:.92rem}
.outros .c .ir::after{content:" \2192"}
.outros .nota-outros{font-size:.85rem;color:var(--fraco);max-width:70ch;margin:0}
@media (max-width:900px){.outros .grade-outros{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.outros .grade-outros{grid-template-columns:1fr}}