:root {
  --ink: #193540;
  --ink-soft: #52656b;
  --text: #1e1e1e;
  --paper: #ffffff;
  --surface: #ffffff;
  --line: #dce1e3;
  --teal: #009d7f;
  --teal-pale: #e5f4f0;
  --alt: #f2f4f5;
  --red: #bf1210;
  --red-pale: #f9e6e5;
  --coral: var(--red);
  --coral-pale: var(--red-pale);
  --blue-pale: var(--alt);
  --yellow: #e7b72a;
  --good: #087d66;
  --warn: #9a6500;
  --mono: "Heebo", Arial, sans-serif;
  --sans: "Poppins", Arial, sans-serif;
  --serif: "Heebo", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { max-width: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { max-width: 100%; margin: 0; overflow-x: clip; background: var(--paper); color: #1e1e1e; font-family: var(--sans); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.topbar { border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 12px max(20px, calc((100vw - 1180px) / 2)); background: rgba(255,255,255,.96); position: sticky; top: 0; z-index: 2; backdrop-filter: blur(12px); }
.topbar p { margin: 0; font: 11px/1.1 var(--mono); color: var(--ink-soft); text-align: right; }
.normativa-link { display: grid; gap: 3px; color: var(--ink-soft); font: 9px/1 var(--mono); text-align: right; text-decoration: none; }.normativa-link strong { color: var(--ink); font: 700 10px/1.1 var(--sans); }.normativa-link:focus-visible, .normativa-link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 4px; }.normativa-link:hover strong, .normativa-link:focus-visible strong { color: var(--coral); }
.brand { display: flex; gap: 11px; align-items: center; color: var(--ink); text-decoration: none; font: 700 17px var(--serif); letter-spacing: .08em; }.brand-logo { width: 52px; height: 52px; object-fit: contain; }.topbar-actions { display: flex; align-items: center; gap: 18px; }.back-to-site { border: 2px solid var(--teal); border-radius: 5px; padding: 8px 13px; background: transparent; color: var(--teal); font: 600 12px var(--mono); text-transform: uppercase; text-decoration: none; transition: color .15s, background .15s, border-color .15s; }.back-to-site:hover, .back-to-site:focus-visible { border-color: var(--ink); background: var(--ink); color: #fff; }
.association-logo { object-fit: contain; mix-blend-mode: multiply; }
.source-block { align-self: end; }
.intro-logo { display: block; width: 240px; max-width: 100%; height: auto; margin: 0 0 10px; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.intro { min-height: 296px; display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: end; gap: 40px; padding: 65px 0 50px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 8px; color: var(--teal); font: 400 11px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { text-wrap: pretty; }
h1 { margin: 0; max-width: 760px; font: 700 clamp(42px, 7vw, 78px)/.94 var(--serif); letter-spacing: -.045em; }
h1 em { color: var(--coral); font-style: italic; }
.lede { max-width: 590px; margin: 22px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.source-note { display: flex; gap: 10px; border-top: 2px solid var(--ink); padding-top: 12px; font-size: 12px; line-height: 1.55; color: var(--ink-soft); }
.source-note b { color: var(--ink); }.source-note a { display: inline-block; margin-top: 2px; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }.source-note a:hover, .source-note a:focus-visible { color: var(--coral); text-decoration-color: currentColor; }.source-note small { display: block; margin-top: 7px; font-size: 10px; line-height: 1.45; }.source-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--coral); flex: none; }
.setup, .objective, .measurements { border-bottom: 1px solid var(--line); padding: 38px 0; }
.section-heading { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: start; margin-bottom: 28px; }
.section-heading.compact { grid-template-columns: 44px 1fr; }.step { font: 11px var(--mono); color: var(--ink-soft); padding-top: 3px; }.section-heading h2 { margin: 0; font: 700 26px/1.04 var(--serif); letter-spacing: -.025em; }.measurement-note { margin: 8px 0 0; color: var(--ink-soft); font-size: 12px; }
.profile-controls { margin-left: 60px; display: grid; grid-template-columns: 180px 180px minmax(220px, 1fr); gap: 16px; }.profile-controls label, .entry { display: grid; gap: 8px; color: var(--ink-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
select, input { appearance: none; width: 100%; min-height: 52px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; color: var(--ink); font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s; } select { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%234e6472' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; } input:focus, select:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-pale); }.band-readout { padding: 14px 16px; background: var(--blue-pale); color: var(--ink-soft); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }.band-readout span { display: block; margin-bottom: 5px; }.band-readout b { color: var(--ink); font: 500 17px var(--mono); letter-spacing: 0; text-transform: none; }
.objective { display: grid; grid-template-columns: 1fr minmax(330px, 1.3fr); column-gap: 40px; }.objective .section-heading { margin: 0; }.mode-switch { display: flex; width: fit-content; min-height: 52px; padding: 4px; background: #e4e1da; border-radius: 2px; }.mode { border: 0; background: transparent; color: var(--ink-soft); padding: 0 18px; font-size: 12px; font-weight: 700; }.mode.active { background: var(--teal); color: white; box-shadow: 0 1px 2px #0002; }.mode-copy { grid-column: 2; margin: 12px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }.simulation-actions { grid-column: 2; margin-top: 14px; display: flex; align-items: center; gap: 16px; }.outline-button { min-height: 40px; border: 1px solid var(--ink); color: var(--ink); background: transparent; padding: 0 12px; font-size: 12px; font-weight: 700; }.text-button { border: 0; padding: 0; background: transparent; color: var(--coral); font-size: 12px; text-decoration: underline; }
.metrics { border-top: 2px solid var(--ink); }.metric { display: grid; grid-template-columns: 50px minmax(210px, 1fr) 155px 135px 130px 72px; align-items: center; gap: 18px; min-height: 126px; border-bottom: 1px solid var(--line); }.metric-number { align-self: start; padding-top: 23px; color: var(--coral); font: 12px var(--mono); }.metric-kicker { margin: 0 0 5px; color: var(--ink-soft); font: 10px var(--mono); text-transform: uppercase; }.metric h3 { margin: 0; font: 700 23px/1.05 var(--serif); letter-spacing: -.02em; }.metric-description { margin: 5px 0 0; color: var(--ink-soft); font-size: 11px; }.entry { gap: 4px; }.entry input { min-height: 42px; padding: 0 10px; font: 500 15px var(--mono); }.entry small { color: var(--ink-soft); text-transform: none; letter-spacing: 0; font: 10px var(--sans); }.duration-fields { display: grid; grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr); align-items: end; gap: 4px; }.duration-fields label { display: grid; gap: 3px; }.duration-fields label span { font-size: 9px; }.duration-separator { padding-bottom: 11px; color: var(--ink-soft); font: 500 17px var(--mono); text-align: center; }.target { padding-left: 13px; border-left: 2px solid var(--line); }.target span { display: block; color: var(--ink-soft); font: 9px var(--mono); text-transform: uppercase; }.target b { display: block; margin-top: 5px; font: 500 16px var(--mono); }.result { font: 11px/1.4 var(--sans); color: var(--ink-soft); }.result b { display: block; color: var(--ink); font: 500 20px var(--mono); }.result.pass b { color: var(--good); }.result.fail b { color: var(--coral); }.baremo-button { border: 0; border-bottom: 1px solid var(--ink); padding: 5px 0; background: transparent; color: var(--ink); font: 10px var(--mono); }.baremo-button:hover { color: var(--coral); border-color: var(--coral); }.metric.is-not-applicable { opacity: .46; }.metric.is-not-applicable .entry input, .metric.is-not-applicable .baremo-button { pointer-events: none; }.agility-note { margin: 16px 0 0 60px; color: var(--warn); font-size: 12px; }
.report { margin: 46px 0 25px; display: grid; grid-template-columns: 136px 1fr auto; gap: 27px; align-items: center; background: var(--ink); color: #fff; padding: 31px; }.report-status { display: grid; justify-items: center; gap: 9px; font: 11px var(--mono); letter-spacing: .1em; }.status-ring { width: 66px; height: 66px; border: 2px solid #f9f5ec; border-radius: 50%; position: relative; }.status-ring::after { content: ""; position: absolute; inset: 8px; border: 1px solid currentColor; border-radius: 50%; }.report-status.apto { color: #a9e0c8; }.report-status.no-apto { color: #ffab9d; }.report-status.waiting { color: #bdc8ce; }.report-copy .eyebrow { color: #f0a18d; }.report-copy h2 { margin: 0; font: 700 28px/1.05 var(--serif); letter-spacing: -.02em; }.report-copy p:last-child { max-width: 600px; margin: 10px 0 0; color: #bdc8ce; font-size: 13px; line-height: 1.55; }.report-numbers { display: flex; gap: 25px; margin: 0; }.report-numbers dt { color: #bdc8ce; font: 9px var(--mono); text-transform: uppercase; }.report-numbers dd { margin: 5px 0 0; font: 500 24px var(--mono); }.legal { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; padding: 24px 0 54px; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }.legal p { max-width: 720px; margin: 0; }.legal b { color: var(--ink); }.legal a { color: var(--ink); white-space: nowrap; }
dialog { width: min(620px, calc(100% - 32px)); max-height: min(720px, calc(100% - 32px)); overflow: hidden; border: 0; padding: 28px; background: var(--surface); box-shadow: 0 18px 80px #10182055; }dialog::backdrop { background: #162b3caa; backdrop-filter: blur(3px); }.dialog-head { display: flex; align-items: start; justify-content: space-between; }.dialog-head h2 { margin: 0; font: 700 28px var(--serif); }.close-button { width: 37px; height: 37px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 23px; line-height: 1; }.dialog-subtitle { color: var(--ink-soft); font-size: 12px; }.table-wrap { max-height: 470px; overflow: auto; border-top: 1px solid var(--line); }.table-wrap table { width: 100%; border-collapse: collapse; font: 13px var(--mono); }.table-wrap th { position: sticky; top: 0; background: var(--surface); text-align: left; padding: 13px 10px; color: var(--ink-soft); font-size: 10px; }.table-wrap td { padding: 10px; border-top: 1px solid #eceae4; }.table-wrap tr.highlight td { background: var(--coral-pale); }.table-wrap td:last-child { text-align: right; }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; min-height: 0; gap: 32px; }.source-note { width: 270px; }.profile-controls { margin-left: 0; }.objective { grid-template-columns: 1fr; gap: 16px; }.mode-copy, .simulation-actions { grid-column: 1; }.metric { grid-template-columns: 36px minmax(160px,1fr) 130px 115px; gap: 14px; padding: 18px 0; }.metric .entry { grid-column: 3; }.metric .target { grid-column: 4; }.metric .result { grid-column: 2 / 4; }.metric .baremo-button { grid-column: 4; grid-row: 3; justify-self: start; }.metric-number { padding-top: 2px; }.report { grid-template-columns: 100px 1fr; }.report-numbers { grid-column: 2; }.legal { flex-direction: column; gap: 10px; } }
@media (max-width: 570px) { .topbar { padding: 10px 16px; }.topbar-actions { gap: 8px; }.back-to-site { padding: 7px 9px; font-size: 10px; }.topbar p { max-width: 130px; font-size: 9px; }.shell { width: min(100% - 28px, 1180px); }.intro { padding: 48px 0 38px; }.lede { font-size: 14px; }.setup,.objective,.measurements { padding: 30px 0; }.section-heading { grid-template-columns: 32px 1fr; gap: 11px; margin-bottom: 22px; }.measurement-note { display: none; }.profile-controls { grid-template-columns: 1fr 1fr; }.band-readout { grid-column: span 2; }.mode-switch { width: 100%; }.mode { flex: 1; padding: 0 8px; font-size: 11px; }.metric { grid-template-columns: 30px 1fr 103px; column-gap: 10px; }.metric .metric-main { grid-column: 2 / 4; }.metric .entry { grid-column: 2; }.metric .target { grid-column: 3; }.metric .result { grid-column: 2 / 4; }.metric .baremo-button { grid-column: 3; grid-row: 4; }.metric h3 { font-size: 20px; }.entry input { font-size: 14px; }.target b { font-size: 13px; }.agility-note { margin-left: 0; }.report { margin-top: 32px; grid-template-columns: 1fr; gap: 19px; padding: 24px; }.report-status { grid-template-columns: 52px 1fr; justify-items: start; align-items: center; }.status-ring { width: 46px; height: 46px; }.status-ring::after { inset: 6px; }.report-copy h2 { font-size: 25px; }.report-numbers { grid-column: 1; }.legal a { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; } }
.entry-stack { display: grid; gap: 9px; } @media (max-width: 860px) { .metric .entry-stack { grid-column: 3; } } @media (max-width: 570px) { .metric .entry-stack { grid-column: 2; } }

.profile-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-left: 60px; padding: 15px 17px; background: var(--blue-pale); color: var(--ink); font: 500 14px var(--mono); }
.profile-edit { border: 0; border-bottom: 1px solid var(--ink); padding: 5px 0; background: transparent; color: var(--ink); font: 700 11px var(--sans); }
.profile-details { margin: 12px 0 0 60px; border-top: 1px solid var(--line); padding-top: 12px; }
.profile-details > summary { cursor: pointer; color: var(--coral); font: 700 11px var(--sans); }
.profile-details .profile-controls { margin: 16px 0 0; }
.source-note > summary { cursor: pointer; list-style: none; }.source-note > summary::-webkit-details-marker { display: none; }.source-note > summary::after { content: "+"; float: right; font: 16px var(--mono); }.source-note[open] > summary::after { content: "−"; }.source-note > a, .source-note > small { display: block; margin-left: 18px; }


@media (max-width: 570px) {
  body { padding-bottom: 0; }
  .topbar { padding: 12px 16px; }
  .topbar p { max-width: none; }
  .intro { padding: 30px 0 24px; gap: 18px; }
  h1 { font-size: clamp(38px, 12vw, 56px); }
  .lede { margin-top: 14px; font-size: 13px; line-height: 1.5; }
  .source-block { align-self: stretch; }.intro-logo { display: none; }.source-note { width: 100%; border-top: 1px solid var(--ink); padding-top: 10px; font-size: 11px; }
  .setup, .objective, .measurements { padding: 24px 0; }
  .profile-summary { margin-left: 0; min-height: 52px; font-size: 12px; }.profile-edit { flex: none; }
  .profile-details { margin-left: 0; }.profile-details .profile-controls { margin-top: 14px; }
  .metric { min-height: 0; margin-bottom: 12px; padding: 17px 12px; border: 1px solid var(--line); background: var(--surface); }
  .metrics { border-top: 0; }
  .metric-number { padding-top: 2px; }
  .metric h3 { font-size: 19px; }.metric-description { line-height: 1.35; }
  .entry-stack { gap: 8px; }.entry input { min-height: 48px; font-size: 16px; }.duration-fields input { min-height: 44px; }

  .target { padding-left: 10px; }.target b { font-size: 12px; }
  .result { min-height: 26px; }
  .report { margin-bottom: 10px; }

}

/* Mobile-first simulator: open directly on the controls, not an editorial landing page. */
.setup { padding: 24px 0; }.objective { display: block; padding: 16px 0; }.measurements { padding-top: 24px; }
.profile-summary, .profile-details { margin-left: 0; }

@media (max-width: 570px) {
  .topbar { gap: 10px; padding: 8px 16px; overflow: hidden; }.brand { flex: none; font-size: 18px; }.brand-logo { width: 46px; height: 46px; }.normativa-link { flex: 0 1 156px; min-width: 0; font-size: 9px; }.normativa-link strong { font-size: 11px; white-space: nowrap; }
  .setup { padding: 8px 0 6px; }.objective { padding: 6px 0 8px; }.measurements { padding: 8px 0 10px; }
  .profile-summary { min-height: 46px; padding: 8px 12px; }.mode-switch { min-height: 44px; overflow: hidden; }.mode { min-width: 0; padding: 0 5px; font-size: 10px; white-space: nowrap; }
  .metric { grid-template-columns: 24px minmax(0, 1fr) 76px; column-gap: 7px; row-gap: 5px; margin-bottom: 6px; padding: 9px 9px; }
  .metric .metric-main { display: grid; grid-column: 2 / 4; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 8px; }
  .metric .metric-main h3 { grid-column: 1; grid-row: 1; font-size: 17px; }
  .metric .metric-kicker { grid-column: 2; grid-row: 1; max-width: 104px; margin: 0; font-size: 8px; line-height: 1.2; text-align: right; }
  .metric .entry-stack { display: block; grid-column: 2; grid-row: 2; min-width: 0; }
  .metric .target { grid-column: 3; grid-row: 2; align-self: end; min-height: 39px; margin: 0; padding: 4px 0 0 7px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .metric .result { grid-column: 2 / 4; grid-row: 3; min-height: 0; padding-top: 5px; border-top: 1px solid var(--line); text-align: right; }
  .metric .result b { display: inline; margin-right: 5px; font-size: 14px; }.metric .baremo-button { grid-column: 2 / 4; grid-row: 3; align-self: end; padding: 1px 0; justify-self: start; }
  .metric, .metric-main, .entry-stack, .duration-fields, .entry-stack .entry { min-width: 0; max-width: 100%; }
  .metric .entry { gap: 1px; }.metric .entry input { min-height: 39px; }.metric .entry small { overflow-wrap: anywhere; white-space: normal; font-size: 8px; }
  .duration-fields { gap: 2px; }.duration-fields input { min-height: 37px; padding: 0 5px; }.duration-separator { padding-bottom: 8px; }
  .report { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; padding: 17px; }
  .report-status { flex: 0 0 42px; grid-template-columns: 36px; gap: 3px; }.status-ring { width: 34px; height: 34px; }.status-ring::after { inset: 5px; }
  .report-status span:last-child { font-size: 9px; }.report-copy { flex: 1 1 180px; min-width: 0; }.report-copy .eyebrow, .report-copy p:last-child { display: none; }
  .report-copy h2 { overflow-wrap: anywhere; font-size: 18px; line-height: 1.08; }.report-numbers { flex: 1 0 calc(100% - 42px); grid-column: auto; max-width: calc(100% - 42px); margin-left: 42px; gap: 10px; }.report-numbers dd { font-size: 17px; }
}

/* Corporate identity compliance. */
body { color: var(--text); font-weight: 400; }
h1, h2, h3, .brand, .section-heading h2, .metric h3, .dialog-head h2 { color: var(--ink); }
.report-copy h2 { color: #fff; }
input:focus, select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-pale); }
.profile-summary, .band-readout, .mode-switch { background: var(--alt); }
.mode-switch { gap: 4px; border-radius: 5px; }
.mode { border: 2px solid var(--teal); border-radius: 5px; background: transparent; color: var(--teal); font: 600 12px/1 var(--mono); text-transform: uppercase; }
.mode:hover, .mode:focus-visible, .mode.active:hover, .mode.active:focus-visible { border-color: var(--ink); background: var(--ink); color: #fff; }
.mode.active { border-color: var(--teal); background: var(--teal); color: #fff; box-shadow: none; }
.baremo-button, .profile-edit, .outline-button { min-height: 34px; border: 2px solid var(--teal); border-radius: 5px; padding: 0 10px; background: transparent; color: var(--teal); font: 600 10px/1 var(--mono); text-transform: uppercase; text-decoration: none; }
.baremo-button:hover, .baremo-button:focus-visible, .profile-edit:hover, .profile-edit:focus-visible, .outline-button:hover, .outline-button:focus-visible { border-color: var(--ink); background: var(--ink); color: #fff; }
.close-button { border: 2px solid var(--teal); border-radius: 5px; background: transparent; color: var(--teal); }
.close-button:hover, .close-button:focus-visible { border-color: var(--ink); background: var(--ink); color: #fff; }
.report { border-top: 4px solid var(--yellow); }