/* base.css */
:root, [data-theme="obsidiana"] {
--ax-obsidiana: #0A0E17;
--ax-titanio: #E2E8F0;
--ax-laser-exact: #00F0FF;
--ax-bg: #0A0E17;
--ax-surface-1: #0F1420;
--ax-surface-2: #151C2A;
--ax-surface-3: #1C2433;
--ax-ground: #0D121C;
--ax-kryvex-bg: #070A11;
--ax-scrim: rgba(10, 14, 23, .72);
--ax-grid: #151C28;
--ax-line: #1E2736;
--ax-line-strong: #2C3749;
--ax-line-control: #6A768C;
--ax-text: #E2E8F0;
--ax-text-2: #C3CCD9;
--ax-text-3: #9AA5B7;
--ax-text-muted: #8590A3;
--ax-text-inverse: #0A0E17;
--ax-endorse: #A7B1C2;
--ax-laser: #00F0FF;
--ax-laser-dim: #057F8B;
--ax-laser-soft: #092E37;
--ax-laser-glow: 0 0 8px 1px rgba(0, 240, 255, .45);
--ax-on-laser: #0A0E17;
--ax-focus: #00F0FF;
--ax-critico: #FF5A5F; --ax-critico-soft: #2C1921;
--ax-alto: #FF9F45;    --ax-alto-soft: #2C221D;
--ax-medio: #E9C46A;   --ax-medio-soft: #292723;
--ax-bajo: #8FB3E0;    --ax-bajo-soft: #1D2533;
--ax-resuelto: #6FD3A0; --ax-resuelto-soft: #182A2A;
--ax-btn-bg: #E2E8F0; --ax-btn-text: #0A0E17; --ax-btn-bg-hover: #F1F4F8;
--ax-x-lit: #F1F4F8;
}
[data-theme="titanio"] {
--ax-bg: #F1F4F8; --ax-surface-1: #FFFFFF; --ax-surface-2: #E7ECF2; --ax-surface-3: #DCE3EB;
--ax-grid: #E1E6EC; --ax-line: #D3DAE3; --ax-line-strong: #B5C0CD; --ax-line-control: #717C8F;
--ax-text: #0A0E17; --ax-text-2: #283244; --ax-text-3: #46526A; --ax-text-muted: #56627A;
--ax-text-inverse: #F1F4F8; --ax-endorse: #4A5568;
--ax-laser: #006D77; --ax-laser-exact: #00F0FF; --ax-laser-dim: #79B1B8; --ax-laser-soft: #D9E7EB;
--ax-laser-glow: none; --ax-on-laser: #FFFFFF; --ax-focus: #006D77;
--ax-critico: #BD2626; --ax-critico-soft: #ECDFE3;
--ax-alto: #A04A08;    --ax-alto-soft: #E9E3E0;
--ax-medio: #7C5F00;   --ax-medio-soft: #E5E5DF;
--ax-bajo: #2F5D9A;    --ax-bajo-soft: #DEE5EF;
--ax-resuelto: #1D7147; --ax-resuelto-soft: #DCE7E6;
--ax-btn-bg: #0A0E17; --ax-btn-text: #F1F4F8; --ax-btn-bg-hover: #1C2433;
color: var(--ax-text);
}
:root {
--ax-space-1: 4px;  --ax-space-2: 8px;   --ax-space-3: 12px;  --ax-space-4: 16px;
--ax-space-5: 24px; --ax-space-6: 32px;  --ax-space-7: 48px;  --ax-space-8: 64px;
--ax-space-9: 96px; --ax-space-10: 128px; --ax-space-11: 192px;
--ax-radius: 0;
--ax-ease-corte:   cubic-bezier(.76, 0, .24, 1);
--ax-ease-asiento: cubic-bezier(.16, 1, .3, 1);
--ax-ease-trazo:   cubic-bezier(.65, 0, .35, 1);
--ax-ease-ui:      cubic-bezier(.2, 0, 0, 1);
--ax-ease-salida:  cubic-bezier(.4, 0, 1, 1);
--ax-dur-micro: 120ms; --ax-dur-ui: 240ms; --ax-dur-panel: 450ms;
--ax-dur-reveal: 900ms; --ax-dur-linea: 1100ms; --ax-stagger: 90ms;
--ax-dur-ignicion: 160ms; --ax-dur-intro: 2200ms;
--ax-font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
--ax-font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
--ax-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
--ax-nr-desc: .265;   
--ax-nr-cap: .715;
--ax-ar-asc: .878;    
--ax-ar-desc: .21;
--ax-ar-cap: .686;
--ax-vw100: 100vw;
--ax-vh100: 100vh;
--ax-frame-max: 1440px;
--ax-frame-w: min(var(--ax-vw100), var(--ax-frame-max));
--ax-frame-l: calc((var(--ax-vw100) - var(--ax-frame-w)) / 2);
--ax-cols: 12;
--ax-margin: 64px;
--ax-gutter: 24px;
--ax-content-w: calc(var(--ax-frame-w) - 2 * var(--ax-margin));
--ax-col: calc((var(--ax-content-w) - (var(--ax-cols) - 1) * var(--ax-gutter)) / var(--ax-cols));
--ax-pitch: calc(var(--ax-col) + var(--ax-gutter));
--ax-x0: calc(var(--ax-frame-l) + var(--ax-margin));               
--ax-meridian-r: .685;
--ax-meridian: calc(var(--ax-frame-l) + var(--ax-frame-w) * var(--ax-meridian-r));
--ax-meridian-x: calc(var(--ax-meridian) - var(--ax-x0) - 6 * var(--ax-pitch));
--ax-meridian-w: min(508px, calc(2 * var(--ax-meridian-x)));
--ax-datum-r: .54;
--ax-hero-h: max(var(--ax-vh100), 600px);                          
--ax-datum: calc(var(--ax-hero-h) * var(--ax-datum-r));            
--ax-nav-h: 72px;
--ax-nav-h-solid: 64px;
--ax-rail-h: 28px;
--ax-section-pad: 128px;
}
@media (max-width: 1279px) { :root { --ax-margin: 40px; --ax-gutter: 20px; } }
@media (max-width: 1023px) { :root { --ax-cols: 8; --ax-margin: 32px; --ax-gutter: 20px; --ax-meridian-r: .72; --ax-nav-h: 64px; } }
@media (max-width: 767px)  { :root { --ax-cols: 4; --ax-margin: 16px; --ax-gutter: 16px; --ax-meridian-r: .5; --ax-datum-r: .56;
--ax-section-pad: 80px; --ax-nav-h: 56px; --ax-nav-h-solid: 56px; --ax-rail-h: 44px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ax-bg); } 
body { margin: 0; background: var(--ax-bg); color: var(--ax-text); }
#ax-root {
position: relative; overflow-x: clip; min-height: 100vh;
background: var(--ax-bg); color: var(--ax-text);
font: 400 17px/1.6 var(--ax-font-text); font-stretch: 100%;
font-synthesis: none; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
font-kerning: normal;
}
:where(#ax-root) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, fieldset, legend) { margin: 0; padding: 0; }
:where(#ax-root) :where(ul, ol) { list-style: none; }
:where(#ax-root) :where(h1, h2, h3, h4, h5, h6) { font-weight: inherit; font-size: inherit; }
:where(#ax-root) :where(a) { color: inherit; text-decoration: none; }
:where(#ax-root) :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
:where(#ax-root) :where(button) { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:where(#ax-root) :where(img, svg, canvas, video) { display: block; max-width: 100%; }
:where(#ax-root) :where(svg) { overflow: visible; }
:where(#ax-root) :where(fieldset) { border: 0; min-width: 0; }
:where(#ax-root) :where(b, strong) { font-weight: 600; }
:where(#ax-root) :where(em, i) { font-style: italic; }
:where(#ax-root) :where([hidden]) { display: none !important; }
::selection { background: var(--ax-laser-soft); color: var(--ax-text); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ax-focus); outline-offset: 2px; border-radius: 0; }
html { scroll-padding-top: calc(var(--ax-nav-h-solid) + var(--ax-rail-h) + 16px); }
.ax-display-xl {
font-family: var(--ax-font-display); font-weight: 300; font-variation-settings: "opsz" 72;
font-size: clamp(52px, 7.2vw, 104px); line-height: .96; letter-spacing: -.022em; color: var(--ax-text);
--ax-lh: .96;
}
.ax-display-l, .ax-h2 {
font-family: var(--ax-font-display); font-weight: 300; font-variation-settings: "opsz" 72;
font-size: clamp(38px, 4.45vw, 64px); line-height: 1; letter-spacing: -.018em; color: var(--ax-text);
--ax-lh: 1;
}
.ax-display-xl em, .ax-display-l em, .ax-h2 em, .ax-h3 em { font-style: italic; font-weight: 300; }
.ax-display-xl, .ax-display-l, .ax-h2, .ax-h3, .ax-kicker { display: flow-root; }
.ax-h3 {
font-family: var(--ax-font-display); font-weight: 400; font-variation-settings: "opsz" 36;
font-size: 36px; line-height: 1.1; letter-spacing: -.01em; color: var(--ax-text);
}
.ax-h4 { font: 600 22px/1.3 var(--ax-font-text); font-stretch: 100%; letter-spacing: -.005em; color: var(--ax-text); }
.ax-lead { font: 400 20px/1.5 var(--ax-font-text); font-stretch: 100%; color: var(--ax-text-2); max-width: 31em; --ax-cap-off: .398em; }
.ax-lead b, .ax-lead strong { font-weight: 500; color: var(--ax-text); }
.ax-body { font: 400 17px/1.6 var(--ax-font-text); font-stretch: 100%; color: var(--ax-text-2); max-width: 31em; --ax-cap-off: .448em; }
.ax-body + .ax-body { margin-top: 1em; }
.ax-small { font: 400 15px/1.5 var(--ax-font-text); font-stretch: 100%; color: var(--ax-text-2); --ax-cap-off: .398em; }
.ax-caption { font: 400 13px/1.45 var(--ax-font-text); font-stretch: 100%; letter-spacing: .01em; color: var(--ax-text-muted); }
.ax-kicker {
font: 500 11.5px/1.3 var(--ax-font-text); font-stretch: 125%; letter-spacing: .22em;
text-transform: uppercase; color: var(--ax-text-3);
}
.ax-kicker__code { color: var(--ax-text); }
@media (max-width: 767px) {
.ax-kicker:has(> .ax-kicker__sep) { display: block; }
.ax-kicker > .ax-kicker__code, .ax-kicker > .ax-kicker__rest { display: block; }
.ax-kicker > .ax-kicker__sep { display: none; }
.ax-kicker > .ax-kicker__rest { margin-top: 4px; }
}
.ax-kicker--rule { display: flex; align-items: center; gap: 16px; }
.ax-kicker--rule::before { content: ""; flex: 0 0 40px; height: 1px; background: var(--ax-text-3); }
.ax-nav-t { font: 500 11.5px/1 var(--ax-font-text); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; }
.ax-button-t { font: 600 12px/1 var(--ax-font-text); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; }
.ax-mono-label { font: 400 10.5px/1.45 var(--ax-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ax-text-muted); }
.ax-mono-data { font: 500 13px/1.45 var(--ax-font-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ax-text); }
.ax-mono-console { font: 400 13px/1.6 var(--ax-font-mono); font-variant-numeric: tabular-nums; color: var(--ax-text-2); }
.ax-display-num {
font-family: var(--ax-font-display); font-weight: 300; font-variation-settings: "opsz" 72;
font-size: 72px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; color: var(--ax-text);
}
.ax-tnum { font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
.ax-display-xl { line-height: .98; --ax-lh: .98; }
.ax-display-l, .ax-h2 { line-height: 1.02; --ax-lh: 1.02; }
.ax-h3 { font-size: 28px; line-height: 1.12; }
.ax-h4 { font-size: 20px; }
.ax-lead { font-size: 18px; }
.ax-body { font-size: 16px; }
.ax-kicker { font-size: 11px; }
.ax-mono-data, .ax-mono-console { font-size: 12px; }
.ax-display-num { font-size: 48px; }
}
#ax-root :is(p, dd, li, figcaption, blockquote) { text-wrap: pretty; }
#ax-root :is(h1, h2, h3, .ax-kicker, .ax-mono-label) { text-wrap: balance; }
.ax-nb { white-space: nowrap; }
.ax-unit { text-transform: none; }
.ax-pc {
display: inline-block; width: .12em; height: .075em; min-height: 2px; margin-left: .04em;
vertical-align: baseline; background: var(--ax-laser);
transition: background-color var(--ax-dur-micro) linear;
}
.ax-cyan-claimed .ax-pc { background: var(--ax-text); }
.ax-sr {
position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ax-hp {
position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; pointer-events: none;
}
.ax-skip {
position: fixed; z-index: 100; left: 16px; top: 12px; padding: 14px 18px;
background: var(--ax-btn-bg); color: var(--ax-btn-text);
font: 600 12px/1 var(--ax-font-text); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase;
transform: translateY(-200%);
}
.ax-skip:focus-visible { transform: none; }
.ax-h2 { margin-bottom: calc(34px - ((var(--ax-lh) - 1) / 2 + var(--ax-nr-desc)) * 1em); }
.ax-hang { margin-top: calc(40px - var(--ax-cap-off, .4em)); }
.ax-wrap { width: 100%; max-width: var(--ax-frame-max); margin-inline: auto; padding-inline: var(--ax-margin); }
@supports (padding: max(1px, env(safe-area-inset-left))) {
.ax-wrap { padding-left: max(var(--ax-margin), env(safe-area-inset-left)); padding-right: max(var(--ax-margin), env(safe-area-inset-right)); }
}
.ax-grid { display: grid; grid-template-columns: repeat(var(--ax-cols), minmax(0, 1fr)); column-gap: var(--ax-gutter); }
.ax-section {
position: relative; background: var(--ax-bg);
padding-block: var(--ax-section-pad);
--ax-tone: var(--ax-bg);
}
.ax-tone-bg { background: var(--ax-bg); --ax-tone: var(--ax-bg); }
.ax-tone-s1 { background: var(--ax-surface-1); --ax-tone: var(--ax-surface-1); }
.ax-tone-kryvex { background: var(--ax-kryvex-bg); --ax-tone: var(--ax-kryvex-bg); }
.ax-section__claim { grid-column: 1 / span 7; }
.ax-section__claim .ax-kicker { margin-bottom: 24px; }
.ax-section__evidence { align-items: start; }
.ax-section__text { grid-column: 1 / span 6; }
.ax-section__text > :first-child { margin-top: calc(40px - var(--ax-cap-off, .4em)); }
.ax-section__text > * + * { margin-top: 24px; }
.ax-section__text > .ax-ledger, .ax-section__text > .ax-section__cta { margin-top: 32px; }
.ax-section__instrument { grid-column: 7 / span 6; position: relative; margin-top: 40px; min-width: 0; }
.ax-section__instrument.ax-cross { margin-top: calc(-1 * var(--ax-rise, 120px)); }
@media (min-width: 1024px) {
[data-ax-sticky] { position: sticky; top: var(--ax-sticky-top, calc(64px + 28px + 40px)); align-self: start; }
}
@media (min-width: 1024px) {
.ax-on-meridian {
justify-self: start; position: relative; width: min(var(--ax-om-w, 508px), var(--ax-meridian-w));
left: var(--ax-meridian-x); translate: -50% 0;
}
}
@media (max-width: 1023px) {
.ax-section__claim { grid-column: 1 / -1; max-width: 40rem; }
.ax-section__text { grid-column: 1 / span 6; }
.ax-section__instrument { grid-column: 1 / -1; margin-top: 64px; }
.ax-section__instrument.ax-cross { margin-top: 64px; }
}
@media (max-width: 767px) {
.ax-section__text { grid-column: 1 / -1; }
.ax-section__instrument { margin-top: 48px; }
.ax-section__instrument.ax-cross { margin-top: 48px; }
}
.ax-datum { position: relative; height: 1px; background: var(--ax-line); }
.ax-datum__beam, .ax-cut__beam {
position: absolute; top: -.5px; height: 2px; background: var(--ax-laser);
transform: scaleX(0); transition: transform var(--ax-dur-ui) var(--ax-ease-corte);
pointer-events: none;
}
.ax-datum__beam { left: calc(var(--ax-meridian) - 32px); width: 64px; background: var(--ax-laser-dim); }
.ax-section.is-beam-datum .ax-datum__beam { transform: none; }
.ax-cut { position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; }
.ax-cut::before, .ax-cut::after { content: ""; position: absolute; top: 0; height: 1px; background: var(--ax-line); }
.ax-cut::before { left: 0; width: calc(var(--ax-meridian) - 12px); }
.ax-cut::after { left: calc(var(--ax-meridian) + 12px); right: 0; }
.ax-cut__beam { left: calc(var(--ax-meridian) - 12px); width: 24px; }
.ax-section.is-beam-cut .ax-cut__beam, .ax-pie.is-beam-cut .ax-cut__beam { transform: none; }
.ax-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
min-height: 44px; padding: 19px 24px;
background: var(--ax-btn-bg); color: var(--ax-btn-text); border: 1px solid var(--ax-btn-bg);
font: 600 12px/1 var(--ax-font-text); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase;
white-space: nowrap; cursor: pointer;
transition: background-color var(--ax-dur-micro) var(--ax-ease-ui), border-color var(--ax-dur-micro) var(--ax-ease-ui), color var(--ax-dur-micro) var(--ax-ease-ui);
}
.ax-btn:hover { background: var(--ax-btn-bg-hover); border-color: var(--ax-btn-bg-hover); }
.ax-btn--ghost { background: transparent; color: var(--ax-text); border-color: var(--ax-line-control); padding: 14px 18px; }
.ax-btn--ghost:hover { background: var(--ax-surface-3); border-color: var(--ax-line-control); }
.ax-btn[disabled], .ax-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ax-btn__key { width: 8px; height: 8px; background: var(--ax-laser); flex: 0 0 auto; transition: transform var(--ax-dur-ui) var(--ax-ease-asiento); }
.ax-link {
position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0;
font: 600 12px/1 var(--ax-font-text); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase;
color: var(--ax-text); cursor: pointer; white-space: nowrap;
}
.ax-link::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% + 12px); height: 1px; background: var(--ax-text-3); transition: background-color var(--ax-dur-micro) var(--ax-ease-ui); }
.ax-link:hover::after { background: var(--ax-text); }
.ax-link--text {
font: 500 15px/1.5 var(--ax-font-text); font-stretch: 100%; letter-spacing: 0; text-transform: none; white-space: normal;
}
.ax-link--text::after { top: auto; bottom: 8px; }
.ax-arrow { display: inline-block; font-family: var(--ax-font-text); font-stretch: 100%; letter-spacing: 0; transition: transform var(--ax-dur-ui) var(--ax-ease-ui); }
.ax-link:hover .ax-arrow, .ax-btn:hover .ax-arrow { transform: translateX(3px); }
.ax-link:hover .ax-arrow--down, .ax-btn:hover .ax-arrow--down { transform: translateY(2px); }
.ax-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.ax-ledger { display: grid; grid-template-columns: minmax(9.5em, max-content) minmax(0, 1fr); border-bottom: 1px solid var(--ax-line); }
.ax-ledger > :where(div, li) { display: contents; }
.ax-ledger :where(dt, .ax-ledger__k), .ax-ledger :where(dd, .ax-ledger__v) { border-top: 1px solid var(--ax-line); padding: 13px 0 12px; margin: 0; }
.ax-ledger :where(dt, .ax-ledger__k) {
padding-right: 24px; font: 400 10.5px/1.45 var(--ax-font-mono); letter-spacing: .06em; text-transform: uppercase;
color: var(--ax-text-muted); padding-top: 16px;
}
.ax-ledger :where(dd, .ax-ledger__v) { font: 400 15px/1.5 var(--ax-font-text); font-stretch: 100%; color: var(--ax-text-2); }
@media (max-width: 767px) {
.ax-ledger { grid-template-columns: minmax(0, 1fr); }
.ax-ledger :where(dd, .ax-ledger__v) { border-top: 0; padding-top: 0; }
.ax-ledger :where(dt, .ax-ledger__k) { padding-bottom: 4px; }
}
.ax-tb {
display: grid; grid-template-columns: repeat(var(--ax-tb-cols, 3), max-content);
gap: 1px; background: var(--ax-line-strong); border: 1px solid var(--ax-line-strong);
width: max-content; max-width: 100%;
}
.ax-tb > div { background: var(--ax-bg); padding: 8px 14px 9px; min-width: 0; }
.ax-tb dt, .ax-tb__k { display: block; font: 400 10.5px/1.45 var(--ax-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ax-text-muted); }
.ax-tb dd, .ax-tb__v {
display: block; margin: 0; font: 500 10.5px/1.45 var(--ax-font-mono); letter-spacing: .06em; text-transform: uppercase;
color: var(--ax-text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ax-tb--fill > div:last-child { grid-column: span var(--ax-tb-last-span, 1); }
.ax-tb--wrap { width: auto; grid-template-columns: repeat(var(--ax-tb-cols, 2), minmax(0, 1fr)); }
.ax-tb--wrap dd, .ax-tb--wrap .ax-tb__v { white-space: normal; overflow-wrap: anywhere; line-height: 1.6; margin-top: 2px; }
.ax-tb__wide { grid-column: 1 / -1; }
@media (max-width: 767px) { .ax-tb--wrap { grid-template-columns: minmax(0, 1fr); } }
.ax-co { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; --co-tan: 1.4281; --co-sec: 1.7434; }
.ax-co__dot { position: absolute; left: calc(var(--co-x) - 2.5px); top: calc(var(--co-y) - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--ax-text); }
.ax-co__sh, .ax-co__guide { position: absolute; top: calc(var(--co-y) - .5px); height: 1px; background: var(--ax-co-line, var(--ax-text-3)); transform-origin: 0 50%; }
.ax-co__sh { left: var(--co-x); width: 56px; }
.ax-co__guide { left: calc(var(--co-x) + 56px); width: calc(var(--co-run) * var(--co-sec)); transform: rotate(-55deg); }
.ax-co__label {
position: absolute; left: calc(var(--co-x) + 56px + var(--co-run)); top: calc(var(--co-y) - var(--co-run) * var(--co-tan));
translate: 0 -100%; width: max-content; max-width: min(240px, var(--co-max, 240px)); padding: 7px 10px 8px;
background: var(--ax-tone, var(--ax-bg)); border: 1px solid var(--ax-line-strong);
font: 500 10.5px/1.4 var(--ax-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ax-text);
}
.ax-co__label small {
display: block; margin-top: 1px; font: 400 10.5px/1.45 var(--ax-font-mono); letter-spacing: .02em; text-transform: none; color: var(--ax-text-muted);
}
.ax-sev {
display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
font: 500 10.5px/1.45 var(--ax-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ax-sev, var(--ax-text-3));
}
.ax-glyph {
--n: 1; display: inline-block; flex: 0 0 auto; width: 10px; height: calc(var(--n) * 4px - 2px);
background: repeating-linear-gradient(to top, currentColor 0 2px, transparent 2px 4px);
vertical-align: middle;
}
.ax-glyph--open { --n: 1; height: 4px; background: none; box-shadow: inset 0 0 0 1px currentColor; }
.ax-sev--critico  { --ax-sev: var(--ax-critico); }  .ax-sev--critico .ax-glyph { --n: 4; }
.ax-sev--alto     { --ax-sev: var(--ax-alto); }     .ax-sev--alto .ax-glyph { --n: 3; }
.ax-sev--medio    { --ax-sev: var(--ax-medio); }    .ax-sev--medio .ax-glyph { --n: 2; }
.ax-sev--bajo     { --ax-sev: var(--ax-bajo); }     .ax-sev--bajo .ax-glyph { --n: 1; }
.ax-sev--resuelto { --ax-sev: var(--ax-resuelto); }
.ax-sevbar { box-shadow: inset 2px 0 0 var(--ax-sev, var(--ax-line-strong)); padding-left: 14px; }
.ax-tag {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px 2px;
border: 1px solid var(--ax-line-strong);
font: 400 10.5px/1.45 var(--ax-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ax-text-3);
white-space: nowrap;
}
.ax-source { font: 400 13px/1.45 var(--ax-font-text); font-stretch: 100%; letter-spacing: .01em; color: var(--ax-text-muted); }
.ax-crop { position: absolute; width: 14px; height: 14px; border: 0 solid var(--ax-text-muted); pointer-events: none; }
.ax-crop--tl { left: 20px; top: 20px; border-width: 1px 0 0 1px; }
.ax-crop--tr { right: 20px; top: 20px; border-width: 1px 1px 0 0; }
.ax-crop--bl { left: 20px; bottom: 20px; border-width: 0 0 1px 1px; }
.ax-crop--br { right: 20px; bottom: 20px; border-width: 0 1px 1px 0; }
.ax-bubble {
position: absolute; width: 26px; height: 26px; border: 1px solid var(--ax-line-strong); border-radius: 50%;
display: grid; place-items: center; background: var(--ax-bg);
font: 500 10.5px/1 var(--ax-font-mono); color: var(--ax-text-3); pointer-events: none;
}
.ax-field { display: grid; gap: 8px; min-width: 0; }
.ax-field__label { font: 400 10.5px/1.45 var(--ax-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ax-text-3); }
.ax-field__hint { font: 400 13px/1.45 var(--ax-font-text); font-stretch: 100%; color: var(--ax-text-muted); }
.ax-input, .ax-select, .ax-textarea {
display: block; width: 100%; min-height: 48px; padding: 12px 14px;
background: var(--ax-surface-2); color: var(--ax-text); border: 1px solid var(--ax-line-control); border-radius: 0;
font: 400 16px/1.4 var(--ax-font-text); font-stretch: 100%;
-webkit-appearance: none; appearance: none;
transition: border-color var(--ax-dur-micro) var(--ax-ease-ui), background-color var(--ax-dur-micro) var(--ax-ease-ui);
}
.ax-input::placeholder, .ax-textarea::placeholder { color: var(--ax-text-muted); opacity: 1; }
.ax-input:hover, .ax-select:hover, .ax-textarea:hover { border-color: var(--ax-text-3); }
.ax-input:focus-visible, .ax-select:focus-visible, .ax-textarea:focus-visible { outline: 2px solid var(--ax-focus); outline-offset: 2px; }
.ax-textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.ax-select {
padding-right: 40px; cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, var(--ax-text-3) 50%), linear-gradient(-45deg, transparent 50%, var(--ax-text-3) 50%);
background-size: 6px 6px; background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-repeat: no-repeat;
}
.ax-select option { background: var(--ax-surface-2); color: var(--ax-text); }
.ax-input[aria-invalid="true"], .ax-select[aria-invalid="true"], .ax-textarea[aria-invalid="true"] { border-color: var(--ax-alto); }
.ax-field__error { display: flex; gap: 8px; align-items: baseline; font: 400 13px/1.45 var(--ax-font-text); font-stretch: 100%; color: var(--ax-text); }
.ax-field__error::before { content: ""; flex: 0 0 10px; height: 2px; background: var(--ax-alto); transform: translateY(-3px); }
.ax-field__error:empty { display: none; }
.ax-choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font: 400 15px/1.4 var(--ax-font-text); color: var(--ax-text-2); }
.ax-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ax-choice__box { flex: 0 0 auto; width: 18px; height: 18px; border: 1px solid var(--ax-line-control); background: var(--ax-surface-2); display: grid; place-items: center; transition: border-color var(--ax-dur-micro); }
.ax-choice__box::after { content: ""; width: 8px; height: 8px; background: var(--ax-laser); transform: scale(0); transition: transform var(--ax-dur-micro) var(--ax-ease-ui); }
.ax-choice:hover .ax-choice__box { border-color: var(--ax-text-3); }
.ax-choice input:checked + .ax-choice__box { border-color: var(--ax-text); }
.ax-choice input:checked + .ax-choice__box::after { transform: none; }
.ax-choice input:checked ~ .ax-choice__text { color: var(--ax-text); }
.ax-choice input:focus-visible + .ax-choice__box { outline: 2px solid var(--ax-focus); outline-offset: 2px; }
.ax-form-note { font: 400 13px/1.45 var(--ax-font-text); font-stretch: 100%; color: var(--ax-text-muted); }
.ax-preview-note { display: none; }
html.ax-js [data-env="preview"] .ax-preview-note { display: block; }
.ax-nojs { display: none; }
html:not(.ax-js) .ax-nojs { display: block; }
html:not(.ax-js) :is(#briefing-form, #kryvex-form) :is(.ax-cells, .ax-bf__kerf, .ax-kv__fields, button[type="submit"], .ax-bf__send) { display: none; }
.ax-hit { position: relative; }
.ax-hit::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; translate: 0 -50%; }
.ax-copy {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
border: 1px solid var(--ax-line-control); background: transparent; color: var(--ax-text);
font: 400 10.5px/1 var(--ax-font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
transition: background-color var(--ax-dur-micro) var(--ax-ease-ui);
}
.ax-copy:hover { background: var(--ax-surface-3); }
.ax-copy[data-state="ok"] { border-color: var(--ax-text); }
.ax-copyable { user-select: all; -webkit-user-select: all; }
html:not(.ax-js) .ax-copy { display: none; }
.ax-icon { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter; }
.ax-icon--fill { fill: currentColor; stroke: none; }
.ax-x { position: relative; width: var(--ax-x-size, 160px); aspect-ratio: 1; }
.ax-x__half { position: absolute; inset: 0; }
.ax-x__half > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ax-x__brush { will-change: transform; pointer-events: none; }
.ax-x__kerf { transition: fill var(--ax-dur-micro) linear; }
.ax-lit .ax-x__kerf { fill: var(--ax-x-lit); }
.ax-x__beam {
position: absolute; left: 30.45%; width: 39.1%; top: calc(50% - 2px); height: 4px; background: var(--ax-laser);
transition: transform var(--ax-dur-micro) var(--ax-ease-ui), background-color var(--ax-dur-micro) linear;
}
.ax-x__beam::after { content: ""; position: absolute; inset: 0; box-shadow: var(--ax-laser-glow); opacity: 0; }
.ax-perturbed .ax-x__beam { transform: scaleY(.25); background: var(--ax-laser-dim); }
.ax-x--scrub .ax-x__beam { transition: background-color var(--ax-dur-micro) linear; }
.ax-flash .ax-x__beam::after { animation: ax-flash var(--ax-dur-ignicion) linear; }
@keyframes ax-flash { from { opacity: 1; } to { opacity: 0; } }
.ax-seg { display: flex; align-items: stretch; min-width: 0; }
.ax-seg__opt {
position: relative; display: grid; place-items: center; min-height: 44px; padding: 0 10px;
font: 500 11.5px/1 var(--ax-font-text); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--ax-text-3);
border-bottom: 1px solid var(--ax-line-strong); cursor: pointer;
transition: color var(--ax-dur-micro) var(--ax-ease-ui), background-color var(--ax-dur-micro) var(--ax-ease-ui);
}
.ax-seg--mono .ax-seg__opt { font: 500 13px/1 var(--ax-font-mono); font-stretch: 100%; letter-spacing: .02em; text-transform: none; }
.ax-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ax-seg__opt::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ax-text);
transform: scaleX(0); transition: transform var(--ax-dur-ui) var(--ax-ease-corte);
}
.ax-seg__opt:hover { color: var(--ax-text); background: var(--ax-surface-2); }
.ax-seg__opt:has(input:checked) { color: var(--ax-text); }
.ax-seg__opt:has(input:checked)::after { transform: none; }
.ax-seg__opt:has(input:focus-visible) { outline: 2px solid var(--ax-focus); outline-offset: 2px; }
.ax-vlabel {
writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
font: 400 10.5px/1 var(--ax-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ax-text-muted);
}
.ax-cells {
display: grid; grid-template-columns: repeat(var(--ax-cells-cols, 2), minmax(0, 1fr));
gap: 1px; background: var(--ax-line-control); border: 1px solid var(--ax-line-control);
}
.ax-cells__head {
grid-column: 1 / -1; margin: 0; padding: 7px 14px 6px; background: var(--ax-surface-1);
font: 400 10.5px/1.45 var(--ax-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ax-text-3);
}
.ax-cell {
position: relative; display: grid; align-content: start; gap: 2px; min-width: 0; margin: 0;
padding: 10px 14px 6px; background: var(--ax-tone, var(--ax-bg)); border: 0;
transition: background-color var(--ax-dur-micro) var(--ax-ease-ui);
}
.ax-cell--wide { grid-column: 1 / -1; }
.ax-cell:hover { background: var(--ax-surface-1); }
.ax-cell:focus-within { outline: 2px solid var(--ax-focus); outline-offset: 2px; z-index: 1; }
.ax-cell.is-invalid::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ax-alto); }
.ax-cell__label { font: 400 10.5px/1.45 var(--ax-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ax-text-3); cursor: text; }
.ax-cell__input {
display: block; width: 100%; min-height: 40px; padding: 4px 0 6px; margin: 0;
background: transparent; border: 0; border-radius: 0; color: var(--ax-text);
font: 400 16px/1.4 var(--ax-font-text); font-stretch: 100%;
-webkit-appearance: none; appearance: none;
}
.ax-cell__input:focus, .ax-cell__input:focus-visible { outline: none; }
textarea.ax-cell__input { min-height: 76px; resize: vertical; line-height: 1.5; }
select.ax-cell__input { padding-right: 28px; cursor: pointer; text-overflow: ellipsis; }
select.ax-cell__input option { background: var(--ax-surface-2); color: var(--ax-text); }
.ax-cell > .ax-field__error { padding-bottom: 6px; }
@media (max-width: 767px) { .ax-cells { grid-template-columns: minmax(0, 1fr); } }
.ax-todo { display: grid; place-items: center; min-height: 360px; border: 1px dashed var(--ax-line-strong); padding: 24px; text-align: center; }
.ax-todo-note { color: var(--ax-text-muted); }
.ax-mask, .ax-line { display: block; overflow-x: visible; overflow-y: clip; padding: .12em 0 .18em; margin: -.12em 0 -.18em; }
.ax-mask__in, .ax-line > span { display: block; }
.ax-rv-wait[data-ax-reveal="rise"] :is(.ax-mask__in, .ax-line > span) { transform: translateY(calc(100% + .32em)); }
.ax-rv-wait[data-ax-reveal="drop"], .ax-rv-wait[data-ax-reveal="drop-children"] > * { transform: translateY(-18px); clip-path: inset(0 0 100% 0); }
.ax-rv-wait[data-ax-reveal="line"] { transform: scaleX(0); }
[data-ax-reveal="line"] { transform-origin: var(--ax-meridian) 50%; }
.ax-rv-go[data-ax-reveal="rise"] :is(.ax-mask__in, .ax-line > span) {
transition: transform var(--ax-dur-reveal) var(--ax-ease-asiento); transition-delay: calc(var(--ax-rv-delay, 0ms) + var(--ax-rv-i, 0) * var(--ax-stagger));
}
.ax-rv-go[data-ax-reveal="drop"], .ax-rv-go[data-ax-reveal="drop-children"] > * {
transition: transform var(--ax-dur-reveal) var(--ax-ease-asiento), clip-path var(--ax-dur-reveal) var(--ax-ease-asiento);
transition-delay: calc(var(--ax-rv-delay, 0ms) + var(--ax-rv-i, 0) * var(--ax-stagger));
}
.ax-rv-go[data-ax-reveal="line"] { transition: transform var(--ax-dur-linea) var(--ax-ease-corte); transition-delay: var(--ax-rv-delay, 0ms); }
.ax-rv-wait:focus-within, .ax-rv-wait:focus-within > *, .ax-rv-wait:focus-within :is(.ax-mask__in, .ax-line > span) { transform: none; clip-path: none; }
@media (prefers-contrast: more) {
:root, [data-theme="obsidiana"] { --ax-line: #2C3749; --ax-text-muted: #9AA5B7; --ax-grid: #1E2736; }
[data-theme="titanio"] { --ax-line: #B5C0CD; --ax-text-muted: #46526A; }
}
@media (prefers-reduced-motion: reduce) {
#ax-root *, #ax-root *::before, #ax-root *::after {
animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
transition-duration: 0ms !important; transition-delay: 0ms !important;
}
#ax-root .ax-pc, #ax-root .ax-x__kerf, #ax-root .ax-btn, #ax-root .ax-link, #ax-root .ax-copy { transition-duration: 120ms !important; transition-property: background-color, color, border-color, fill !important; }
}
@media print {
.ax-rv-wait :is(.ax-mask__in, .ax-line > span), .ax-rv-wait, .ax-rv-wait > * { transform: none !important; clip-path: none !important; }
}