/* Meu Rox — folha única para todas as páginas.
   Fica em cache no navegador, então cada página carrega só o próprio conteúdo. */

:root{
  --fundo:#F7F8FA;
  --superficie:#FFFFFF;
  --superficie-2:#FBFCFD;
  --linha:#E8EBF0;
  --linha-forte:#D5DAE3;
  --texto:#14161C;
  --texto-2:#525C6B;
  --apagado:#767F8F;
  --rox:#E11D2A;          /* vermelho do logo, um tom mais fundo para ler bem no claro */
  --rox-suave:rgba(225,29,42,.08);
  --rox-borda:rgba(225,29,42,.30);
  --bom:#0A7A50;
  --ruim:#C82333;
  --alerta:#B26A00;
  --sombra:0 1px 2px rgba(20,22,28,.05), 0 8px 24px -12px rgba(20,22,28,.10);
  --sombra-alta:0 2px 4px rgba(20,22,28,.06), 0 18px 40px -20px rgba(20,22,28,.18);
  --f:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --raio:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fundo);color:var(--texto);
  font-family:var(--f);font-size:15px;line-height:1.55;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
  /* leve calor no topo, para o branco não ficar chapado */
  background-image:radial-gradient(60rem 26rem at 50% -10rem, rgba(225,29,42,.06), transparent 70%);
  background-repeat:no-repeat;
}
a{color:inherit}
h1,h2{margin:0;font-weight:800;letter-spacing:-.02em}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* ------------------------------------------------------------ topo ----- */
.topo{display:flex;justify-content:space-between;align-items:center;gap:16px;
      padding:18px 0;border-bottom:1px solid var(--linha)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;
       font-weight:800;font-size:16px;letter-spacing:-.01em}
.marca img{width:26px;height:26px;object-fit:contain;display:block}
.marca .rx{color:var(--rox)}
.topo nav{display:flex;gap:18px;align-items:center;font-size:13px}
.topo nav a{color:var(--apagado);text-decoration:none;transition:color .15s}
.topo nav a:hover{color:var(--rox)}
.topo nav .quem{color:var(--texto-2)}

/* ------------------------------------------------------------ botões --- */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linha-forte);
     background:var(--superficie);color:var(--texto);border-radius:10px;
     padding:10px 16px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;
     text-decoration:none;box-shadow:var(--sombra);
     transition:border-color .15s,color .15s,background .15s,box-shadow .15s}
.btn:hover{border-color:var(--rox-borda);color:var(--rox);background:var(--superficie)}
.btn.forte{background:var(--rox);border-color:var(--rox);color:#fff;font-weight:600}
.btn.forte:hover{background:#C81824;border-color:#C81824;color:#fff;
                 box-shadow:0 0 0 4px var(--rox-suave)}
.btn.pequeno{padding:6px 11px;font-size:13px;border-radius:8px}
.btn.perigo:hover{border-color:var(--ruim);color:var(--ruim)}
.btn:focus-visible{outline:2px solid var(--rox);outline-offset:2px}

/* ------------------------------------------------------------ campos --- */
input,select,textarea{
  background:var(--superficie);border:1px solid var(--linha-forte);color:var(--texto);
  border-radius:10px;padding:11px 12px;font:inherit;font-size:15px;outline:0;
  transition:border-color .15s,box-shadow .15s;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--rox);box-shadow:0 0 0 3px var(--rox-suave)}
input::placeholder{color:var(--apagado)}
label{display:block;font-size:12.5px;font-weight:500;color:var(--texto-2);margin:0 0 6px}
.dica{font-size:11.5px;color:var(--apagado);margin-top:5px}

/* ------------------------------------------------------------ avisos --- */
.aviso{border:1px solid var(--linha);border-left:3px solid var(--rox);
       background:var(--superficie);border-radius:10px;padding:13px 15px;
       box-shadow:var(--sombra);
       margin:18px 0 0;font-size:13.5px;color:var(--texto-2)}
.aviso.ruim{border-left-color:var(--ruim);color:var(--ruim)}
.aviso.bom{border-left-color:var(--bom);color:var(--bom)}
.aviso strong{color:var(--texto)}

/* ------------------------------------------------------------ cartões -- */
.cartao{background:var(--superficie);border:1px solid var(--linha);
        border-radius:var(--raio);padding:24px;box-shadow:var(--sombra);
        transition:box-shadow .18s,transform .18s}
.cartao:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px)}
.selo{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;
      text-transform:uppercase;border-radius:999px;padding:3px 9px}
.selo.rox{color:var(--rox);background:var(--rox-suave);border:1px solid var(--rox-borda)}
.selo.off{color:var(--ruim);background:rgba(200,35,51,.09)}

/* ------------------------------------------------------------ números -- */
.num{font-variant-numeric:tabular-nums}
.pos{color:var(--bom)} .neg{color:var(--ruim)}

/* ------------------------------------------------------------ tabela --- */
.tabelawrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
   color:var(--apagado);text-align:right;padding:0 12px 10px 0;white-space:nowrap;
   border-bottom:1px solid var(--linha-forte)}
th:first-child{text-align:left}
td{padding:12px 12px 12px 0;border-bottom:1px solid var(--linha);text-align:right;
   white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--texto)}
td:first-child{text-align:left;white-space:normal}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--superficie-2)}

.rodape{border-top:1px solid var(--linha);padding:22px 0 44px;
        font-size:12px;color:var(--apagado);margin-top:32px}
.hide{display:none !important}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}