:root{
  --max: 980px;
  --r: 14px;

  /* tokens */
  --bg: #f7f7f8;
  --text: #111;
  --muted: #444;
  --card: #fff;
  --border: rgba(0,0,0,.08);
  --border-strong: rgba(0,0,0,.15);
  --shadow: 0 6px 20px rgba(0,0,0,.06);

  /* spacing */
  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 16px;
  --s-5: 20px;

  /* focus */
  --focus: 0 0 0 3px rgba(0,0,0,.18);
}

*{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth; /* ajuda os links de âncora */
  scrollbar-gutter: stable; 
}

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

/* melhora performance de renderização e evita CLS em fontes/elementos */
img, svg, video{ max-width: 100%; height: auto; display: block; }
button, a{ -webkit-tap-highlight-color: transparent; }
button, input { min-height: 44px; }
.stack nav a { display:inline-block; padding:4px 6px; border-radius:10px; }
.stack nav a:hover { background: rgba(0,0,0,.04); text-decoration:none; }

header{ padding: 28px 16px; }
.wrap{ max-width: var(--max); margin: 0 auto; }

.hero{
  display: grid;
  gap: 16px;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
}
@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; }
}

.colInfo{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Agrupa "Atalhos" + "Como funciona?" lado a lado */
.stack{
  margin-top: 14px;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 860px){
  .stack{
    grid-template-columns: 1fr;
  }
}

/* Deixa o sumário mais compacto (sem inline style) */
.stack nav ul{
  margin: 0;
  padding-left: 18px;
}

.stack nav li{
  margin: 4px 0;
}

@media (max-width: 860px){
  .stack{
    grid-template-columns: 1fr;
  }
}

h1{
  font-size: clamp(1.65rem, 2.6vw, 2.25rem);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
h2{
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

p{ margin: 0 0 10px; color: #222; }

a{
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover{ text-decoration: underline; }
a:focus-visible{
  outline: none;
  box-shadow: var(--focus);
  border-radius: 10px;
}

/* cards */
.card{
  background: var(--card);
  border-radius: var(--r);
  padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

/* form grid */
.grid{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

label{
  font-size: .92rem;
  display: block;
  margin-bottom: 6px;
}

small{
  display: block;
  margin-top: 6px;
  font-size: .86rem;
  color: var(--muted);
}

input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: #fff;
  font-size: 1rem;
  line-height: 1.2;
}

/* melhora INP: evita “double tap zoom” e dá feedback de foco */
input:focus-visible{
  outline: none;
  box-shadow: var(--focus);
  border-color: rgba(0,0,0,.22);
}

/* remove setinhas do number no Chrome (opcional, mas ajuda UX) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"]{ -moz-appearance: textfield; }

/* botões */
.row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

button{
  border: 0;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 650;
  background: #111;
  color: #fff;

  /* INP: resposta mais “seca” */
  touch-action: manipulation;
}

button:hover{ filter: brightness(0.95); }
button:active{ transform: translateY(1px); }
button:focus-visible{
  outline: none;
  box-shadow: var(--focus);
}

button.secondary{
  background: #e9e9ee;
  color: #111;
}

button:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* KPIs */
.kpis{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 860px){
  .kpis{ grid-template-columns: 1fr; }
}

.kpi{
  padding: 12px;
  border-radius: 12px;
  background: #fafafa;
  border: 1px solid var(--border);
}
.kpi span{ display:block; font-size:.86rem; color: var(--muted); }
.kpi strong{ font-size: 1.15rem; }

/* util */
.muted{ color: var(--muted); font-size: .95rem; }
.note{ margin-top: 10px; font-size: .92rem; color: var(--muted); }

/* tabela (responsiva sem quebrar layout no mobile) */
#tableWrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}

table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  min-width: 620px; /* impede “amassar” demais no mobile */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}

th, td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}
th{
  background: #fafafa;
  font-size: .92rem;
}
td:first-child, th:first-child{ text-align: left; }

tbody tr:hover{ background: rgba(0,0,0,.02); }

/* details */
details{ margin-top: 12px; }
details summary{
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
details summary::-webkit-details-marker{ display:none; }

.footer{
  padding: 16px;
  text-align: center;
  color: #555;
  font-size: .9rem;
}

/* acessibilidade: respeita usuários que preferem menos animação */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  button:active{ transform: none; }
}