:root {
  --ink: #10231d; --muted: #61736a; --green: #17654b; --lime: #c6ed63;
  --paper: #fbfcfa; --soft: #eef7ef; --line: #d9e5dc; --amber: #72500d;
  --pain: #f7c945; --swelling: #e9574f; --both: #7e57c2;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.bar { height: 72px; display: flex; align-items: center; justify-content: space-between; max-width: 1160px; margin: auto; padding: 0 26px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 1.2rem; font-weight: 800; letter-spacing: -.045em; text-decoration: none; }
.brand span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: var(--green); color: var(--lime); font-size: 20px; }
.text-link { color: var(--muted); font-size: .9rem; font-weight: 700; text-decoration: none; }
.home { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(130deg, #fbfdf9 0%, #eef8ef 100%); }
.home-main { width: min(100% - 52px, 850px); margin: auto; padding: 52px 0 76px; }
.eyebrow { margin: 0; color: var(--green); font-size: .75rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.home h1 { max-width: 700px; margin: 15px 0 18px; font-size: clamp(3.1rem, 8vw, 6.5rem); line-height: .95; letter-spacing: -.075em; }
.lead { max-width: 570px; margin: 0; color: var(--muted); font-size: 1.1rem; }
.button { display: inline-flex; align-items: center; gap: 18px; margin-top: 31px; padding: 13px 17px; border: 0; border-radius: 9px; background: var(--green); color: #fff; font: 800 .92rem inherit; text-decoration: none; cursor: pointer; }
.button:hover { background: #10523c; }.button span { font-size: 1.2rem; }
.home-note { max-width: 520px; margin: 32px 0 0; padding-left: 12px; border-left: 2px solid #c4d2c7; color: var(--muted); font-size: .8rem; }
.page { width: min(100% - 52px, 1100px); margin: 0 auto; padding: 62px 0 80px; }.page.narrow { max-width: 790px; }
.page-title { margin: 7px 0 6px; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.065em; }.compact { font-size: 1rem; }
.calculator-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 38px; }
.calculator-card { min-height: 133px; display: flex; flex-direction: column; justify-content: space-between; padding: 19px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--muted); }
.calculator-card b { display: block; color: var(--ink); font-size: 1.18rem; letter-spacing: -.03em; }.calculator-card span { display: block; margin-top: 2px; font-size: .8rem; }.calculator-card em { color: #8a9890; font-size: .75rem; font-style: normal; }
.calculator-card.active { border-color: #9bc5a5; background: var(--soft); color: var(--green); box-shadow: 0 10px 20px rgba(30,91,53,.06); text-decoration: none; }.calculator-card strong { font-size: .78rem; }.calculator-card i { margin-left: 5px; font-size: 1rem; font-style: normal; }
.notice { margin: 28px 0 20px; padding: 12px 14px; border-left: 3px solid #c1881e; border-radius: 0 8px 8px 0; background: #fffaf1; color: var(--amber); font-size: .86rem; }
.score-card { padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.tabs { display: flex; gap: 4px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }.tab { padding: 8px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 800 .85rem inherit; cursor: pointer; }.tab.selected { background: var(--soft); color: var(--green); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; margin-top: 22px; }label { color: #34493f; font-size: .83rem; font-weight: 800; }label small { display: block; margin: 2px 0 6px; color: var(--muted); font-size: .74rem; font-weight: 500; }
input { width: 100%; padding: 10px 11px; border: 1px solid #cadbd0; border-radius: 8px; color: var(--ink); font: inherit; outline: 0; }input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,101,75,.1); }
.joint-tools { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding: 13px 0 0; border-top: 1px solid var(--line); }.joint-tools b { display: block; font-size: .85rem; }.joint-tools span { display: block; color: var(--muted); font-size: .76rem; }
.map-button, .clear-map, .download { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--green); font: 800 .8rem inherit; white-space: nowrap; cursor: pointer; }
.joint-map { margin-top: 16px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #f7fbf7; }.map-copy b { font-size: .9rem; }.map-copy p { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }.map-copy mark { padding: 2px 5px; border-radius: 4px; color: #3a3424; font-weight: 800; }.map-copy mark.pain { background: #ffeba0; }.map-copy mark.swelling { background: #ffd7d3; color: #8b302b; }.map-copy mark.both { background: #e8dbfc; color: #5d4191; }
.map-guide { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }.map-guide span { padding: 4px 8px; border: 1px solid #d5e3d8; border-radius: 99px; background: #fff; color: var(--muted); font-size: .7rem; }.map-guide b { color: var(--ink); font-size: .7rem; }
.map-layout { display: flex; align-items: center; justify-content: center; gap: 36px; margin-top: 12px; }.svg-wrap { width: 270px; max-width: 62%; padding: 3px; border-radius: 10px; background: #fff; }.svg-wrap svg { display: block; width: 100%; height: auto; }.body-line { fill: none; stroke: #b4c7ba; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }.hand-line { fill: none; stroke: #c2d2c6; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }.anatomy-label { fill: #71867a; font: 700 5.3px Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .2px; }.anatomy-label path { stroke: #9caf9f; stroke-width: .8; }
.joint { fill: #fff; stroke: #668274; stroke-width: 2; cursor: pointer; transition: transform .12s, fill .12s; }.joint:hover, .joint:focus { stroke: #122d21; stroke-width: 2.5; outline: none; }.joint.state-1 { fill: var(--pain); stroke: #d19b08; }.joint.state-2 { fill: var(--swelling); stroke: #bd3933; }.joint.state-3 { fill: var(--both); stroke: #60409c; }
.map-summary { min-width: 150px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.map-summary div { padding: 10px; border-radius: 8px; background: #fff; text-align: center; }.map-summary small { display: block; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.map-summary strong { display: block; font-size: 1.35rem; line-height: 1.2; }.map-summary .clear-map { grid-column: 1 / -1; }
.actions { display: flex; align-items: center; gap: 15px; margin-top: 22px; }.actions .button { margin: 0; }.clear { border: 0; background: none; color: var(--muted); font: 700 .85rem inherit; cursor: pointer; }
.result { display: block; margin-top: 22px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.score-result { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; background: linear-gradient(110deg, var(--soft), #fbfdfb); }.score-result small { display: block; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.score-result strong { display: block; font-size: 2rem; line-height: 1; letter-spacing: -.06em; }
.status { margin-left: auto; padding: 5px 9px; border-radius: 99px; background: #dcf0df; color: var(--green); font-size: .77rem; font-weight: 800; }.status.low { background: #e3edf8; color: #215d95; }.status.moderate { background: #f8ebce; color: #875609; }.status.high { background: #fae3e0; color: #92342d; }
.activity-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }.scale-step { min-height: 58px; padding: 10px; background: #fff; color: #8a9890; }.scale-step b, .scale-step span { display: block; font-size: .7rem; }.scale-step span { margin-top: 2px; font-size: .72rem; }.scale-step.current { background: #eff9ef; color: var(--green); font-weight: 800; box-shadow: inset 0 3px 0 var(--green); }.scale-step.current.low { background: #eff5fa; color: #215d95; box-shadow: inset 0 3px 0 #3c7db5; }.scale-step.current.moderate { background: #fff8e9; color: #875609; box-shadow: inset 0 3px 0 #c58918; }.scale-step.current.high { background: #fff1ef; color: #92342d; box-shadow: inset 0 3px 0 #c84b43; }
.download { margin-top: 12px; }.formula { margin: 14px 0 0; color: var(--muted); font-size: .78rem; }.references { margin-top: 26px; color: var(--muted); font-size: .84rem; }
.references details { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.references summary { list-style: none; padding: 12px 14px; color: var(--ink); font-weight: 800; cursor: pointer; user-select: none; }
.references summary::-webkit-details-marker { display: none; }
.references summary::after { content: "+"; float: right; color: var(--green); font-size: 1.1rem; line-height: 1; }
.references details[open] summary { border-bottom: 1px solid var(--line); }
.references details[open] summary::after { content: "−"; }
.references .reference-list { padding: 2px 14px 12px; }
.references p { margin: 9px 0 0; }
.references a { color: var(--green); font-weight: 700; }footer { margin-top: auto; padding: 24px 26px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; text-align: center; }
.footer-disclaimer { display: block; margin-top: 4px; font-size: .70rem; line-height: 1.4; }
@media (max-width:700px) { .bar { padding: 0 20px; }.home-main, .page { width: min(100% - 40px, 1100px); }.calculator-grid, .form-grid { grid-template-columns: 1fr; }.page { padding-top: 48px; }.score-card { padding: 18px; }.calculator-card { min-height: 115px; }.joint-tools { align-items: flex-start; flex-direction: column; }.map-layout { align-items: stretch; gap: 12px; }.svg-wrap { max-width: 60%; align-self: center; }.map-summary { min-width: 0; }.activity-scale { grid-template-columns: repeat(2, 1fr); } }
.unit-input { display: flex; gap: 7px; }.unit-input input { min-width: 0; }.unit-input select { width: 88px; flex: 0 0 auto; padding: 10px 7px; border: 1px solid #cadbd0; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; outline: 0; }.unit-input select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,101,75,.1); }

/* ESSDAI */
.essdai-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid var(--line);}
.essdai-head b{display:block;font-size:.9rem}.essdai-head span{display:block;margin-top:2px;color:var(--muted);font-size:.76rem}
.essdai-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
.essdai-domain{padding:15px;border:1px solid var(--line);border-radius:11px;background:#fbfdfb}
.domain-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.domain-top b{display:block;color:var(--ink);font-size:.86rem}.domain-top span{display:block;margin-top:1px;color:var(--muted);font-size:.7rem;font-weight:600}.domain-top strong{min-width:34px;text-align:right;color:var(--green);font-size:1.1rem}
.essdai-domain select{width:100%;padding:10px 30px 10px 10px;border:1px solid #cadbd0;border-radius:8px;background:#fff;color:var(--ink);font:700 .78rem inherit;outline:0}
.essdai-domain select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(23,101,75,.1)}
.domain-description{min-height:34px;margin-top:8px;color:#53675d;font-size:.74rem;line-height:1.4}
.essdai-domain details{margin-top:8px;padding-top:8px;border-top:1px solid #e5eee7}.essdai-domain summary{color:var(--green);font-size:.7rem;font-weight:800;cursor:pointer}.essdai-domain details p{margin:6px 0 0;color:var(--muted);font-size:.7rem;line-height:1.4}
.essdai-scale{grid-template-columns:repeat(3,1fr)}.essdai-breakdown{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:1px;background:var(--line)}.essdai-breakdown div{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;background:#fff;color:var(--muted);font-size:.73rem}.essdai-breakdown b{color:var(--ink)}.essdai-breakdown p{grid-column:1/-1;margin:0;padding:12px;background:#fff;color:var(--muted);font-size:.75rem}
@media (max-width:700px){.essdai-grid{grid-template-columns:1fr}.essdai-head{align-items:flex-start;flex-direction:column}.essdai-scale{grid-template-columns:1fr}.essdai-breakdown{grid-template-columns:1fr}}

/* ESSDAI — opções sempre visíveis */
.level-options{display:grid;gap:6px}
.level-option{display:flex;align-items:flex-start;gap:8px;padding:8px 9px;border:1px solid #dce8df;border-radius:8px;background:#fff;color:var(--ink);font-weight:500;cursor:pointer}
.level-option:hover{border-color:#a9c9b2;background:#fbfefb}
.level-option input{width:auto;margin:3px 0 0;accent-color:var(--green);flex:0 0 auto}
.level-copy{display:block;min-width:0}.level-copy b{display:block;color:var(--ink);font-size:.74rem;font-weight:800}.level-copy em{display:block;margin-top:2px;color:var(--muted);font-size:.69rem;font-style:normal;font-weight:500;line-height:1.35}
.level-option:has(input:checked){border-color:#8fbea0;background:var(--soft);box-shadow:inset 3px 0 0 var(--green)}

/* SLEDAI-2K */
.sledai-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
.sledai-item{padding:13px;border:1px solid var(--line);border-radius:10px;background:#fbfdfb}
.sledai-item-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.sledai-item-top b{display:block;color:var(--ink);font-size:.82rem}.sledai-item-top span{display:block;color:var(--muted);font-size:.68rem;font-weight:700}.sledai-item-top strong{color:var(--green);font-size:1rem;min-width:24px;text-align:right}
.sledai-check{display:flex;align-items:flex-start;gap:9px;padding:8px;border:1px solid #dce8df;border-radius:8px;background:#fff;cursor:pointer}
.sledai-check input{width:auto;flex:0 0 auto;margin:3px 0 0;accent-color:var(--green)}
.sledai-check span{min-width:0}.sledai-check b{display:block;font-size:.72rem;color:var(--ink)}.sledai-check em{display:block;margin-top:2px;font-size:.69rem;line-height:1.38;color:var(--muted);font-style:normal;font-weight:500}
.sledai-check:has(input:checked){border-color:#8fbea0;background:var(--soft);box-shadow:inset 3px 0 0 var(--green)}
.sledai-breakdown{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:1px;background:var(--line)}.sledai-breakdown div{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;background:#fff;color:var(--muted);font-size:.73rem}.sledai-breakdown b{color:var(--ink)}.sledai-breakdown p{grid-column:1/-1;margin:0;padding:12px;background:#fff;color:var(--muted);font-size:.75rem}
@media(max-width:700px){.sledai-grid{grid-template-columns:1fr}.sledai-breakdown{grid-template-columns:1fr}}


/* =========================================================
   ReumaFoco — styles for new calculators
   IMPORTANT: all rules are scoped to .calc-page so they
   cannot affect the existing site layout.
   ========================================================= */

.calc-page .domain-grid,
.calc-page .score-grid,
.calc-page .criteria-grid {
  display: grid;
  gap: 16px;
}

.calc-page .domain-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calc-page .domain-card,
.calc-page .score-card,
.calc-page .criteria-card {
  background: #fff;
  border: 1px solid #dfe9e3;
  border-radius: 18px;
  padding: 20px;
}

.calc-page .domain-card h3,
.calc-page .score-card h3,
.calc-page .criteria-card h3 {
  margin: 0 0 10px;
}

.calc-page .choice-list {
  display: grid;
  gap: 10px;
}

.calc-page .choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid #dfe9e3;
  border-radius: 12px;
  background: #fff;
}

.calc-page .choice input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.calc-page .result-card {
  margin-top: 24px;
}

.calc-page .result-breakdown {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.calc-page .score-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #edf2ee;
}

.calc-page .score-row:last-child {
  border-bottom: 0;
}

@media (max-width: 760px) {
  .calc-page .domain-grid,
  .calc-page .score-grid,
  .calc-page .criteria-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Catálogo visual de calculadoras
   ========================================================= */
.calculator-hero {
  margin-bottom: 34px;
}
.calculator-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.hero-drawing {
  width: 240px;
  flex: 0 0 240px;
  color: #8aaa98;
  opacity: .8;
}
.hero-drawing svg {
  width: 100%;
  height: auto;
  display: block;
}
.calculator-grid-visual {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 0;
}
.calculator-card-visual {
  min-height: 208px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.calculator-card-visual:hover {
  transform: translateY(-2px);
  border-color: #a8c6af;
  box-shadow: 0 12px 25px rgba(30,91,53,.08);
}
.calc-visual {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #83a793;
}
.calc-visual svg {
  width: 126px;
  height: 76px;
  display: block;
}
.calc-card-copy {
  display: flex;
  flex-direction: column;
  padding-right: 26px;
}
.calc-card-copy b {
  color: var(--ink);
  font-size: 1.2rem;
  letter-spacing: -.035em;
}
.calc-card-copy span {
  margin-top: 2px;
  color: var(--green);
  font-size: .78rem;
  font-weight: 800;
}
.calc-card-copy em {
  margin-top: 6px;
  color: var(--muted);
  font-size: .76rem;
  font-style: normal;
  line-height: 1.35;
}
.calc-arrow {
  position: absolute;
  right: 17px;
  bottom: 17px;
  color: var(--green);
  font-size: 1.2rem;
  font-style: normal;
}
@media (max-width: 900px) {
  .calculator-grid-visual {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .calculator-hero-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-drawing {
    width: 180px;
    flex-basis: auto;
    align-self: flex-end;
    margin-top: -10px;
  }
  .calculator-grid-visual {
    grid-template-columns: 1fr;
  }
  .calculator-card-visual {
    min-height: 190px;
  }
}