/* HAXOR Systems · sitio v4 (identidad navy)
   Fuente de verdad: brand/tokens.css (variables --hx-*). Aquí sólo layout y componentes. */

:root {
  --sans: var(--hx-font-sans, 'DM Sans', system-ui, sans-serif);
  --mono: var(--hx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  --logo: var(--hx-font-logo, 'Hanken Grotesk', sans-serif);
  --e: var(--hx-ease-out, cubic-bezier(.22, 1, .36, 1));
  --e2: var(--hx-ease-io, cubic-bezier(.76, 0, .24, 1));
  --gut: var(--hx-gutter, clamp(20px, 4vw, 44px));
  --rule: rgba(216, 220, 225, .14);
  --rule-l: #CED3DA;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
section[id] { scroll-margin-top: 80px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: #0A1322; color: #D8DCE1; font-family: var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(217, 85, 43, .18); }
h1, h2, h3 { text-wrap: balance; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--hx-signal-claro, #F08A63); outline-offset: 3px; }
.on-light :focus-visible, .menu :focus-visible, .hdr.is-light.is-scrolled :focus-visible { outline-color: var(--hx-signal-texto, #B8441F); }
.sr-only {
  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;
}
.skip {
  position: fixed; left: 12px; top: -80px; z-index: 200; padding: 12px 18px; border-radius: 999px;
  background: #E3E6EA; color: #0F1A2C; font: 300 12px/1 var(--mono); letter-spacing: .08em;
}
.skip:focus { top: 12px; }

/* ---------- utilidades ---------- */
.lbl { font-family: var(--mono); font-weight: 300; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.sig { color: var(--hx-signal, #D9552B); }
.site { position: relative; background: #0A1322; color: #D8DCE1; min-height: 100vh; }

/* ---------- movimiento global ---------- */
[data-hin] { transition: opacity 1.2s var(--e), transform 1.4s var(--e), filter 1.2s var(--e); transition-delay: var(--d, 0s); }
[data-site][data-ready="0"] [data-hin] { opacity: 0; transform: translateY(28px); filter: blur(8px); animation: hxShow 0s linear 8s forwards; }
[data-io] [data-rv] { opacity: 0; transform: translateY(36px); transition: opacity 1.1s var(--e), transform 1.3s var(--e); transition-delay: var(--d, 0s); }
[data-io] [data-rv][data-in] { opacity: 1; transform: none; }
[data-split] .w { display: inline-block; white-space: nowrap; }
[data-io] [data-split] [data-l] {
  display: inline-block; opacity: 0; filter: blur(12px); transform: translate(var(--tx), var(--ty)) scale(.9);
  transition: opacity .9s var(--e), filter .9s var(--e), transform 1.1s var(--e);
}
[data-io] [data-split][data-in] [data-l] { opacity: 1; filter: blur(0); transform: none; }

[data-roll] { position: relative; display: inline-flex; overflow: hidden; height: 1.2em; line-height: 1.2em; }
[data-roll] > span { display: block; transition: transform .6s var(--e); }
[data-roll] > span + span { position: absolute; left: 0; top: 100%; }
[data-roll]:hover > span, a:hover > [data-roll] > span, button:hover > [data-roll] > span { transform: translateY(-100%); }

[data-cta] {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px;
  font-family: var(--mono); font-weight: 300; font-size: 12.5px; letter-spacing: .08em;
}
[data-cta]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform-origin: right; transition: transform .7s var(--e);
}
[data-cta]:hover::after { transform: scaleX(0); }
[data-cta] [data-arr] { color: var(--hx-signal, #D9552B); transition: transform .6s var(--e); }
[data-cta]:hover [data-arr] { transform: translateX(6px); }
[data-mag] { transition: transform .55s var(--e); }

@keyframes hxInk { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hxSlash { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes hxPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes hxFade { from { opacity: 0; } to { opacity: 1; } }
/* red de seguridad: si el JS nunca arranca, a los 8 s todo se muestra */
@keyframes hxShow { to { opacity: 1; transform: none; filter: none; } }
@keyframes hxGone { to { opacity: 0; visibility: hidden; } }

@media print {
  [data-rv], [data-l], [data-hin] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .loader, .cursor, .xwrap { display: none !important; }
}

/* ---------- capa: canvas X ---------- */
.xwrap { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.xwrap canvas { width: 100%; height: 100%; display: block; }
.xfallback { position: absolute; right: 12vw; top: 50%; height: 62vh; transform: translateY(-50%); animation: hxFade 1.4s ease both; }
.xfallback[hidden] { display: none; }

/* ---------- capa: carga ---------- */
.loader { position: fixed; inset: 0; z-index: 100; pointer-events: none; animation: hxGone 0s linear 8s forwards; }
.loader__half { position: absolute; inset: 0; background: #0F1A2C; transition: transform 1.2s var(--e2); }
.loader__half--a { clip-path: polygon(0 0, 61% 0, 39% 100%, 0 100%); }
.loader__half--b { clip-path: polygon(61% 0, 100% 0, 100% 100%, 39% 100%); }
.loader[data-phase="open"] .loader__half--a { transform: translate(-62%, -18%); }
.loader[data-phase="open"] .loader__half--b { transform: translate(62%, 18%); }
.loader__ui {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--gut); transition: opacity .5s ease;
}
.loader:not([data-phase="count"]) .loader__ui { opacity: 0; }
.loader__top { display: flex; justify-content: space-between; gap: 12px; color: #8C96A4; letter-spacing: .16em; }
.loader__bot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.loader__bot > span:first-child { font-size: 14px; color: #8C96A4; }
.loader__num {
  font-family: var(--mono); font-weight: 300; font-size: clamp(48px, 8vw, 112px); line-height: .8;
  letter-spacing: -.05em; color: #D8DCE1;
}
.loader__x { position: absolute; left: 50%; top: 50%; width: clamp(64px, 8vw, 110px); transform: translate(-50%, -50%); overflow: visible; }
.loader__x .lx { transition: transform 1s var(--e2), opacity .8s ease; }
.loader[data-phase="split"] .lx-a, .loader[data-phase="open"] .lx-a { transform: translate(-14px, 22px); }
.loader[data-phase="split"] .lx-b, .loader[data-phase="open"] .lx-b { transform: translate(14px, -22px); }
.loader[data-phase="open"] .lx { opacity: 0; }
.lx-a .ink { animation: hxInk 1s var(--e2) .1s both; }
.lx-b .ink { animation: hxSlash .8s var(--e2) .8s both; }

/* ---------- capa: cursor propio ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; width: 0; height: 0; opacity: 0; transition: opacity .4s ease; }
.cursor__ring {
  position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(216, 220, 225, .45); display: grid; place-items: center;
  transition: transform .5s var(--e), background .3s ease, border-color .3s ease;
}
.cursor.is-light .cursor__ring { border-color: rgba(15, 26, 44, .4); }
.cursor__label { font-family: var(--mono); font-size: 3.6px; letter-spacing: .12em; color: #0F1A2C; opacity: 0; transition: opacity .3s ease; white-space: nowrap; }
.cursor__dot { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: #D9552B; }
@media (pointer: fine) {
  [data-site][data-cur="1"], [data-site][data-cur="1"] a, [data-site][data-cur="1"] button { cursor: none; }
}
@media (pointer: coarse) { .cursor { display: none; } }

/* ---------- header ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }
.hdr__bar {
  padding: 0 max(var(--gut), env(safe-area-inset-right)) 0 max(var(--gut), env(safe-area-inset-left)); height: 80px; display: flex; align-items: center; gap: 18px;
  transition: background .6s ease;
}
.hdr.is-scrolled .hdr__bar { background: rgba(10, 19, 34, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hdr.is-scrolled.is-light .hdr__bar { background: rgba(245, 246, 247, .78); }
.hdr.is-menu .hdr__bar, .hdr.is-menu.is-scrolled .hdr__bar, .hdr.is-menu.is-scrolled.is-light .hdr__bar {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hdr__prog { position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: #D9552B; }
.hdr__r { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.logo {
  display: inline-flex; align-items: baseline; font-family: var(--logo); font-weight: 500; font-size: 20px;
  letter-spacing: .11em; line-height: 1; white-space: nowrap; color: #D8DCE1; transition: color .6s ease;
}
.logo svg { display: inline-block; width: .467em; height: .7em; margin-right: .11em; overflow: visible; }
.logo .xa { fill: currentColor; }
.logo > span { display: inline-block; }
.logo a, a.logo { display: inline-flex; }
.hdr.is-light.is-scrolled:not(.is-menu) .logo { color: #0F1A2C; }
@media (max-width: 560px) { .hdr.is-menu .logo { color: #0F1A2C; } }

.pill {
  height: 44px; display: flex; align-items: center; padding: 0 20px; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid transparent;
}
.pill--solid { background: #E3E6EA; color: #0F1A2C; transition: border-color .5s ease; }
.hdr.is-light.is-scrolled .pill--solid { border-color: #CED3DA; }
.pill--line {
  gap: 12px; padding: 0 18px; border-color: rgba(216, 220, 225, .28); background: rgba(10, 19, 34, .4);
  color: #E3E6EA; cursor: pointer; transition: background .5s ease, color .5s ease;
}
.hdr.is-light.is-scrolled .pill--line, .hdr.is-menu .pill--line { background: #0F1A2C; }
.burger { position: relative; width: 14px; height: 9px; display: block; }
.burger i { position: absolute; left: 0; right: 0; height: 1px; transition: top .5s var(--e), transform .5s var(--e); }
.burger i:first-child { top: 1px; background: currentColor; }
.burger i:last-child { top: 7px; background: #D9552B; }
.hdr.is-menu .burger i { top: 4px; }
.hdr.is-menu .burger i:first-child { transform: rotate(45deg); }
.hdr.is-menu .burger i:last-child { transform: rotate(-45deg); }
@media (max-width: 480px) {
  .hdr__bar { gap: 8px; }
  .hdr__r { gap: 8px; }
  .pill { padding: 0 14px; font-size: 11px; }
  .pill--line { padding: 0 14px; gap: 9px; }
  .logo { font-size: 18px; }
}

/* ---------- menú ---------- */
.menu {
  position: fixed; top: 10px; right: 10px; z-index: 55; width: min(460px, calc(100vw - 20px));
  max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; scrollbar-width: none;
  border-radius: 22px; background: #E3E6EA; color: #0F1A2C; box-shadow: var(--hx-shadow-panel, 0 40px 80px -30px rgba(0, 0, 0, .55));
  padding: 88px 28px 28px; display: flex; flex-direction: column; gap: 28px;
  visibility: hidden; pointer-events: none; overscroll-behavior: contain; clip-path: inset(0 0 100% 100% round 22px);
  transition: clip-path .7s var(--e), opacity .5s ease, visibility 0s linear .7s; opacity: 0;
}
.menu::-webkit-scrollbar { display: none; }
.menu.is-open { visibility: visible; pointer-events: auto; opacity: 1; clip-path: inset(0 0 0 0 round 22px); transition: clip-path .95s var(--e), opacity .6s ease; }
.menu__nav { display: flex; flex-direction: column; }
.menu__a { display: flex; align-items: baseline; gap: 14px; padding: 4px 0; border-bottom: 1px solid #CED3DA; color: #0F1A2C; }
.menu__n { font-family: var(--mono); font-size: 11px; color: #B8441F; width: 22px; }
.menu__m { overflow: hidden; display: block; }
.menu__t { display: block; font-size: clamp(34px, 4.4vw, 52px); font-weight: 400; letter-spacing: -.05em; transform: translateY(60%); opacity: 0; transition: transform .35s var(--e), opacity .3s ease; }
.menu.is-open .menu__t { transform: none; opacity: 1; transition: transform .85s var(--e), opacity .7s ease; transition-delay: calc(.28s + var(--i, 0) * .07s); }
.menu__t [data-roll] { height: 1.15em; line-height: 1.15em; }
.menu__foot { display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: #5B6676; opacity: 0; transition: opacity .3s ease; }
.menu.is-open .menu__foot { opacity: 1; transition: opacity .8s ease .75s; }
.menu__chip {
  align-self: flex-start; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
  background: #0F1A2C; color: #E3E6EA; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
}
.menu__chip i { font-style: normal; color: #D9552B; }
.menu__row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 8px; }
.menu__row a { color: #0F1A2C; }
.menu__row span { font-family: var(--mono); font-size: 11.5px; }

/* ---------- main ---------- */
main { position: relative; z-index: 2; }
main:focus { outline: none; }
.wrap { max-width: 1400px; margin: 0 auto; position: relative; }

/* 1. Inicio */
.hero {
  position: relative; min-height: max(100vh, 600px); display: flex; flex-direction: column; justify-content: flex-end;
  padding: 150px var(--gut) clamp(22px, 3vw, 36px); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.hero__orb { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__k { position: absolute; left: var(--gut); right: var(--gut); top: 104px; color: #8C96A4; }
.hero__h {
  position: relative; font-size: var(--hx-display-xl, clamp(56px, min(11vw, 18vh), 190px)); font-weight: 400;
  letter-spacing: -.06em; line-height: .9; color: #D8DCE1;
}
.hero__h > span { display: block; }
.hero__d { max-width: 11ch; text-wrap: balance; }
.hero__dot { color: #D9552B; margin-left: -.04em; }
.hero__foot {
  position: relative; margin-top: clamp(28px, 4vw, 48px); padding-top: 20px; border-top: 1px solid rgba(216, 220, 225, .12);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; align-items: end;
}
.hero__col { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.hero__col p { font-size: 15px; line-height: 1.6; color: #A3ADBA; max-width: 380px; text-wrap: pretty; }
.hero__side { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.hero__tag {
  display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(216, 220, 225, .16); font-family: var(--mono); font-weight: 300; font-size: 11px; letter-spacing: .1em; color: #A3ADBA;
}
.hero__growth {
  display: grid; gap: 4px; padding: 12px 16px; min-width: 240px; border-radius: 14px; border: 1px solid rgba(216, 220, 225, .16);
  background: rgba(10, 19, 34, .45); color: #D8DCE1; transition: border-color .4s ease, background .4s ease;
}
.hero__growth .lbl { font-size: 10.5px; color: #8C96A4; }
.hero__growth strong { font-weight: 400; font-size: 17px; letter-spacing: -.01em; }
.hero__growth > span:last-child { font-size: 13.5px; color: #A3ADBA; }
.hero__growth:hover { border-color: rgba(216, 220, 225, .4); background: rgba(23, 36, 58, .7); }
.hero__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding-top: 4px; }
.hero__quick .lbl { color: #8C96A4; font-size: 10.5px; }
.hero__quick ul { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.hero__quick a {
  display: inline-flex; align-items: center; min-height: 32px; font-size: 13.5px; color: #A3ADBA;
  text-decoration: underline; text-decoration-color: rgba(163, 173, 186, .35); text-underline-offset: 4px; transition: color .4s ease;
}
.hero__quick a:hover { color: #D8DCE1; }
@media (max-width: 600px) {
  .hero__side { justify-self: start; align-items: flex-start; }
}

/* 2. Nosotros */
.about { position: relative; padding: clamp(110px, 16vw, 220px) var(--gut) clamp(80px, 10vw, 140px); }
.about .lbl { position: absolute; left: 0; top: .9em; color: #8C96A4; }
.manifesto {
  font-size: var(--hx-display-m, clamp(30px, 4.6vw, 76px)); font-weight: 400; letter-spacing: -.045em; line-height: 1.06;
  text-indent: min(18%, 220px); text-wrap: pretty;
}
.manifesto [data-w] { opacity: .14; }
.rule {
  position: relative; border-top: 1px solid var(--rule); padding-top: 36px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px 48px;
}
.rule::before, .rule::after { content: "+"; position: absolute; top: -8px; font-family: var(--mono); font-size: 13px; line-height: 1; color: #5B6676; }
.rule::before { left: -6px; }
.rule::after { right: -6px; }
.about .rule { margin-top: clamp(70px, 9vw, 120px); }
.cap { font-family: var(--mono); font-weight: 300; font-size: 12px; letter-spacing: .12em; line-height: 1.7; color: #A3ADBA; max-width: 34ch; text-transform: uppercase; }
.rule__b { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.rule__b p { font-size: 15.5px; line-height: 1.65; color: #A3ADBA; max-width: 46ch; text-wrap: pretty; }

/* 8. Crecimiento (banda compacta; antes «Marketing producto principal») */
.mk { position: relative; padding: clamp(50px, 7vw, 100px) var(--gut) clamp(90px, 11vw, 150px); }
.mk__in { display: flex; flex-direction: column; gap: clamp(52px, 6.5vw, 92px); }
.mk__head { display: flex; flex-direction: column; gap: 22px; }
.mk__head .lbl { color: #8C96A4; }
.mk__t { font-size: var(--hx-display-l, clamp(48px, 7vw, 120px)); font-weight: 400; letter-spacing: -.06em; line-height: .9; color: #D8DCE1; max-width: 14ch; }

.fn { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fn__s { position: relative; display: flex; flex-direction: column; gap: 34px; padding: 22px 16px 26px; border-left: 1px solid var(--rule); }
.fn__s:first-child { border-left: 0; padding-left: 0; }
.fn__s::before { content: "+"; position: absolute; left: -5px; top: -8px; font-family: var(--mono); font-size: 13px; line-height: 1; color: #5B6676; }
.fn__s:first-child::before { left: -6px; }
.fn__s:last-child::after { content: "+"; position: absolute; right: -6px; top: -8px; font-family: var(--mono); font-size: 13px; line-height: 1; color: #5B6676; }
.fn__n { font-family: var(--mono); font-weight: 300; font-size: 11.5px; letter-spacing: .14em; color: #8C96A4; }
.fn__t { font-size: clamp(20px, 2.3vw, 34px); font-weight: 400; letter-spacing: -.05em; line-height: 1; color: #D8DCE1; }
.fn__s--end .fn__n { color: var(--hx-signal-claro, #F08A63); }
.fn__s--end .fn__t { color: #D9552B; }
.fn-cap { margin-top: 20px; color: #8C96A4; max-width: 62ch; line-height: 1.7; }
@media (max-width: 899px) {
  .fn { grid-template-columns: 1fr; border-bottom: 0; }
  .fn__s, .fn__s:first-child { flex-direction: row; align-items: baseline; gap: 22px; padding: 18px 0 20px; border-left: 0; border-bottom: 1px solid var(--rule); }
  .fn__s:first-child { border-top: 0; }
  .fn__s::before, .fn__s:first-child::before { left: -6px; }
  .fn__s:last-child::after { display: none; }
  .fn__t { font-size: clamp(30px, 8vw, 44px); }
  .fn__n { width: 26px; flex: none; }
}

.pil { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.card {
  position: relative; overflow: hidden; background: #17243A; border-radius: 16px; padding: 26px; min-height: clamp(280px, 24vw, 340px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.card::before {
  content: ""; position: absolute; right: -35%; top: 6%; width: 150%; height: 52%; border: 1px solid rgba(163, 173, 186, .12);
  border-radius: 50%; transform: rotate(-28deg); pointer-events: none;
}
.card > * { position: relative; }
.card .lbl { color: #8C96A4; }
.card h3 { font-size: clamp(26px, 2.2vw, 32px); font-weight: 400; letter-spacing: -.045em; line-height: 1.05; color: #D8DCE1; margin-bottom: 14px; }
.card p { font-size: 15px; line-height: 1.6; color: #A3ADBA; text-wrap: pretty; }
@media (max-width: 1099px) { .pil { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .pil { grid-template-columns: 1fr; } .card { min-height: 0; } }

/* pausas pinned */
.pin { position: relative; }
.pin__st { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ribbon { height: 260vh; }
.ribbon .pin__st { display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.ribbon__1 {
  display: flex; align-items: center; white-space: nowrap; width: max-content; font-size: min(17vw, 30vh); font-weight: 400;
  letter-spacing: -.065em; line-height: .85; color: #D8DCE1; transform: translateX(calc(var(--p, 0) * -58% + 6vw)); will-change: transform;
}
.ribbon__1 > span { display: inline-flex; align-items: center; gap: .16em; padding-right: .16em; }
.ribbon__1 svg { height: .42em; flex: none; overflow: visible; }
.ribbon__2 {
  display: flex; align-items: center; white-space: nowrap; width: max-content; font-size: min(5vw, 8vh); font-weight: 300;
  letter-spacing: -.04em; color: #5B6676; transform: translateX(calc(var(--p, 0) * 40% - 40%)); will-change: transform;
}
.ribbon__2 > span { padding-right: .9em; }
.blinds { height: 170vh; }
.blinds--b { background: #E3E6EA; margin-top: -1px; }
.blind { position: absolute; left: 0; right: 0; transform: scaleY(clamp(0, calc(var(--p, 0) * 1.9 - var(--d, 0)), 1.02)); }
.blinds--a .blind { background: #F5F6F7; transform-origin: center bottom; }
.blinds--b .blind { background: #0A1322; transform-origin: center top; }

/* secciones claras */
.on-light { position: relative; background: #F5F6F7; color: #0F1A2C; }
.on-light .lbl { color: #5B6676; }

/* 5. En cifras */
.facts-sec { margin-top: -1px; padding: clamp(40px, 6vw, 80px) var(--gut) clamp(90px, 11vw, 150px); }
.facts-sec .wrap { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.sec-title { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.h2 { font-size: var(--hx-display-l, clamp(48px, 7vw, 120px)); font-weight: 400; letter-spacing: -.06em; line-height: .9; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; perspective: 1400px; }
.fact {
  position: relative; overflow: hidden; min-height: clamp(340px, 34vw, 460px); border-radius: 16px; padding: 26px;
  display: flex; flex-direction: column; justify-content: space-between; transform-origin: center bottom;
}
.fact svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fact .lbl { position: relative; font-size: 11.5px; letter-spacing: .12em; }
.fact__b { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.fact__b span:first-child { font-size: 14.5px; line-height: 1.5; max-width: 20ch; min-width: 0; }
.fact__v { white-space: nowrap; font-size: clamp(76px, 8vw, 128px); font-weight: 400; letter-spacing: -.07em; line-height: .8; }
.fact--navy { background: #0F1A2C; color: #D8DCE1; }
.fact--navy .lbl, .fact--navy .fact__b span:first-child, .fact--slate .lbl, .fact--slate .fact__b span:first-child { color: #A3ADBA; }
.fact--white { background: #fff; color: #0F1A2C; }
.fact--white .lbl, .fact--white .fact__b span:first-child { color: #5B6676; }
.fact--slate { background: #27313F; color: #D8DCE1; }
/* 6. Productos */
.prods { height: calc(100vh + var(--dist, 2000px)); }
.prods .pin__st { display: flex; align-items: center; }
.rail {
  display: flex; align-items: stretch; height: min(78vh, 640px); padding: 0 var(--gut); width: max-content;
  transform: translateX(calc(var(--p, 0) * var(--dist, 0px) * -1)); will-change: transform;
}
.rail__intro { width: min(520px, 82vw); flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding-right: clamp(28px, 4vw, 56px); }
.rail__intro .h2 { font-size: clamp(52px, 6.6vw, 108px); }
.rail__intro p { font-size: 15.5px; line-height: 1.6; color: #5B6676; max-width: 38ch; }
.prod { width: min(560px, 82vw); flex: none; display: flex; flex-direction: column; gap: 18px; padding: 0 clamp(24px, 3vw, 40px); border-left: 1px solid #D5D9DE; }
.shot {
  position: relative; width: 100%; aspect-ratio: 16 / 10; flex: none; border-radius: 10px; overflow: hidden; background-color: #E3E6EA;
  background-image: linear-gradient(rgba(15, 26, 44, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 26, 44, .07) 1px, transparent 1px);
  background-size: 28px 28px; display: grid; place-items: center;
}
.shot::before, .shot::after { content: "+"; position: absolute; font-family: var(--mono); font-size: 13px; line-height: 1; color: #5B6676; }
.shot::before { left: 12px; top: 12px; }
.shot::after { right: 12px; bottom: 12px; }
.shot span { padding: 8px 12px; background: #E3E6EA; font-family: var(--mono); font-weight: 300; font-size: 11.5px; letter-spacing: .14em; color: #5B6676; text-transform: uppercase; }
.prod__m { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--mono); font-weight: 300; font-size: 11px; color: #5B6676; }
.prod__m > span:first-child { letter-spacing: .12em; }
.prod__s { display: flex; align-items: center; gap: 7px; }
.prod__s i { width: 6px; height: 6px; border-radius: 50%; background: var(--hx-pino, #1C5245); flex: none; }
.prod__s i.is-warn { background: #D9552B; }
.prod__n { font-size: clamp(32px, 3.2vw, 48px); font-weight: 400; letter-spacing: -.05em; line-height: 1; }
.prod__d { font-size: 15px; line-height: 1.6; color: #5B6676; text-wrap: pretty; max-width: 42ch; }
.prod [data-cta] { margin-top: auto; align-self: flex-start; color: #0F1A2C; }
.rail__end { width: min(440px, 80vw); flex: none; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 0 clamp(24px, 3vw, 40px); border-left: 1px solid #D5D9DE; }
.rail__end p { font-size: clamp(30px, 3vw, 44px); font-weight: 400; letter-spacing: -.045em; line-height: 1.05; }
.rail__end [data-cta] { align-self: flex-start; color: #0F1A2C; }
@media (max-width: 767px) {
  /* decisión: lista vertical en móvil (sin carril pinned) */
  .prods { height: auto; padding: clamp(70px, 14vw, 100px) 0 clamp(70px, 14vw, 100px); }
  .prods .pin__st { position: static; height: auto; overflow: visible; display: block; }
  .rail { width: auto; height: auto; flex-direction: column; transform: none; will-change: auto; }
  .rail__intro { width: auto; padding: 0 0 48px; gap: 28px; }
  .prod { width: auto; padding: 36px 0 40px; border-left: 0; border-top: 1px solid #D5D9DE; }
  .rail__end { width: auto; padding: 40px 0 0; border-left: 0; border-top: 1px solid #D5D9DE; }
}

/* 7. Servicios.
   Cada palabra lleva SU descripción (anclada a ella): a la derecha en escritorio, debajo en móvil/tablet. */
.svc { height: 300vh; --dcol: clamp(340px, 29vw, 430px); --dgap: 56px; }
.svc .pin__st { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 196px var(--gut) 72px; }
.svc__k { position: absolute; left: var(--gut); top: 104px; }
.svc__stack { display: flex; flex-direction: column; align-items: stretch; text-align: left; width: 100%; max-width: 100%; }
.svc__w { position: relative; }
.svc__wt {
  display: block; width: fit-content; max-width: 100%;
  font-size: calc(min(11.5vw, 8.2vh) * var(--svc-scale, 1)); font-weight: 400; letter-spacing: -.06em; line-height: .94; text-wrap: balance;
  color: #DDE1E6; transform: scale(.95); transform-origin: left center; transition: color .7s ease, transform .9s var(--e);
}
.svc__w.is-on .svc__wt { color: #0F1A2C; transform: scale(1); }
.svc__foot { position: absolute; left: var(--gut); right: var(--gut); bottom: 22px; display: flex; justify-content: flex-end; pointer-events: none; }
.svc__c { font-family: var(--mono); font-weight: 300; font-size: 12px; color: #5B6676; }

/* descripción: en flujo (móvil/tablet) se despliega bajo la palabra activa */
.svc__d { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .8s var(--e), visibility 0s linear .8s; }
.svc__d.is-on { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .8s var(--e), visibility 0s; }
.svc__di {
  min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;  padding-left: 16px; border-left: 2px solid #B8441F;
  opacity: 0; translate: 0 14px; transition: opacity .5s ease-out, translate .6s var(--e);
}
.svc__d.is-on .svc__di { opacity: 1; translate: 0 0; transition: opacity .7s ease-out .18s, translate .8s var(--e) .18s; }
.svc__di > :first-child { margin-top: 10px; }
.svc__di > :last-child { margin-bottom: 4px; }
.svc__d .lbl { font-size: 11.5px; letter-spacing: .12em; line-height: 1.5; color: #B8441F; }
.svc__d p { font-size: 17px; line-height: 1.55; color: #1B2636; text-wrap: pretty; max-width: 60ch; }
.svc__d [data-cta] { color: #0F1A2C; }
@media (min-width: 768px) { .svc__d p { font-size: 20px; line-height: 1.55; } .svc__di { padding-left: 22px; } }
@media (max-width: 767px) { .svc .pin__st { padding-top: 188px; } .svc__wt { white-space: normal; } }

/* escritorio: la descripción vive a la derecha de la pila, a la altura de SU palabra */
@media (min-width: 1024px) {
  .svc .pin__st { justify-content: center; align-items: center; padding: 96px var(--gut) 56px; }
  .svc__stack { width: max-content; transform: translateX(calc((var(--dcol) + var(--dgap)) / -2)); }
  .svc__wt { white-space: nowrap; font-size: calc(min(9.4vw, 12.5vh) * var(--svc-scale, 1)); }
  .svc__d { display: block; position: absolute; left: calc(100% + var(--dgap)); top: 0; width: var(--dcol); transition: visibility 0s linear .8s; }
  .svc__d.is-on { transition: visibility 0s; }
  .svc__w:nth-last-child(-n+2) .svc__d { top: auto; bottom: 0; }
  .svc__w:nth-last-child(-n+2) .svc__di { justify-content: flex-end; }
  .svc__di { overflow: visible; }
  .svc__di > :first-child { margin-top: 0; }
}

/* 10. Contacto + pie */
.contact { position: relative; padding: clamp(60px, 8vw, 120px) var(--gut) 0; margin-top: -1px; }
.contact__in { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); }
.contact__h { display: flex; flex-direction: column; gap: 22px; }
.contact__h .lbl { color: #8C96A4; }
.contact__t { font-size: clamp(52px, 8.6vw, 150px); font-weight: 400; letter-spacing: -.065em; line-height: .9; max-width: 12ch; }
.contact__g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px; padding-top: 32px; border-top: 1px solid var(--rule); }
.contact__c { display: flex; flex-direction: column; gap: 8px; }
.contact__c--cta { gap: 14px; align-items: flex-start; }
.contact__c--cta p { font-size: 14.5px; line-height: 1.6; color: #8C96A4; max-width: 30ch; }
.contact__c .k { font-size: 11px; letter-spacing: .14em; color: #8C96A4; }
.contact__mail { font-size: 20px; letter-spacing: -.02em; align-self: flex-start; }
.contact__clock { font-family: var(--mono); font-weight: 300; font-size: 20px; color: #D8DCE1; }
.contact__c a.soc { font-size: 15px; align-self: flex-start; }
.big { overflow: hidden; margin-top: clamp(56px, 8vw, 110px); text-align: center; line-height: .78; }
.big > span {
  display: inline-block; font-family: var(--logo); font-weight: 500; font-size: clamp(80px, 25vw, 420px); letter-spacing: .06em;
  color: #D8DCE1; white-space: nowrap; line-height: .78; transform: translateY(8%);
}
.big svg { display: inline-block; width: .467em; height: .7em; vertical-align: baseline; margin-right: .06em; overflow: visible; }
.legal {
  position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 22px 0 26px;
  border-top: 1px solid rgba(216, 220, 225, .1); font-family: var(--mono); font-weight: 300; font-size: 11px; letter-spacing: .08em; color: #8C96A4; text-transform: uppercase;
}
.legal a { display: inline-block; padding: 4px 0; }

/* =====================================================================
   v4 · narrativa 10-oct: home reordenado + páginas interiores
   ===================================================================== */
.num { font-variant-numeric: tabular-nums; }

/* hero: H1 con términos de búsqueda + rotador */
.hero__kw {
  font-size: clamp(15px, 1.35vw, 19px); font-weight: 400; letter-spacing: -.01em; line-height: 1.4;
  color: #A3ADBA; max-width: 52ch; margin-bottom: clamp(14px, 2vw, 26px); text-wrap: balance;
}
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.hero__alt {
  display: inline-block; padding: 6px 0; font-size: 14px; color: #A3ADBA;
  text-decoration: underline; text-decoration-color: rgba(163, 173, 186, .45); text-underline-offset: 5px; transition: color .4s ease;
}
.hero__alt:hover { color: #D8DCE1; }

/* práctica: honestidad, cifras verificables, contadores pendientes */
.rule__b .honest { color: #D8DCE1; font-size: 17px; }
.facts--about { margin-top: clamp(60px, 8vw, 110px); }
.fact--raised { background: #17243A; color: #D8DCE1; }
.fact--raised .lbl, .fact--raised .fact__b span:first-child { color: #A3ADBA; }
.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; margin-top: 14px; }
.counters[hidden] { display: none; }
.counter { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--rule); }
.counter__v { font-size: clamp(48px, 6vw, 96px); font-weight: 400; letter-spacing: -.06em; line-height: .9; }
.counter__k { font-size: 14px; color: #A3ADBA; }
.counter[data-pending] .counter__v, .counter[data-pending] .counter__k { visibility: hidden; }

/* servicios */
.svc__sub { position: absolute; right: var(--gut); top: 100px; max-width: 30ch; text-align: right; font-size: 14px; line-height: 1.5; color: #5B6676; }
@media (max-width: 767px) {
  .svc__sub { left: var(--gut); right: auto; top: 128px; text-align: left; }
}

/* cabeceras de sección */
.sec-head { display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.h2--m { font-size: clamp(40px, 5.4vw, 88px); }
.sec-head__p { font-size: 16px; line-height: 1.6; color: #5B6676; max-width: 56ch; text-wrap: pretty; }

/* diagnósticos (home) */
.dgs { padding: clamp(90px, 11vw, 150px) var(--gut); }
.dgs .wrap { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.dg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dcard {
  position: relative; height: 100%; min-height: clamp(260px, 22vw, 320px); padding: 26px; border-radius: 16px;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 36px;
  background: #fff; border: 1px solid #D5D9DE; color: #0F1A2C; transition: background .5s ease, color .5s ease, border-color .5s ease;
}
.dcard .lbl { color: #5B6676; transition: color .5s ease; }
.dcard__h { display: block; font-size: clamp(26px, 2.2vw, 32px); font-weight: 400; letter-spacing: -.045em; line-height: 1.05; margin-bottom: 12px; }
.dcard__p { display: block; font-size: 15px; line-height: 1.6; color: #5B6676; transition: color .5s ease; }
.dcard__go { margin-top: auto; font-family: var(--mono); font-weight: 300; font-size: 12px; letter-spacing: .08em; }
.dcard__go [data-arr] { color: #D9552B; }
.dcard:hover { background: #0F1A2C; border-color: #0F1A2C; color: #D8DCE1; }
.dcard:hover .lbl, .dcard:hover .dcard__p { color: #A3ADBA; }
@media (max-width: 1099px) { .dg { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .dg { grid-template-columns: 1fr; } .dcard { min-height: 0; } }

/* sistemas: tarjeta problema / lo que construimos */
.prods .shot { aspect-ratio: 16 / 6; max-height: 20vh; }
.prod__q, .prods .prod__d { font-size: 15px; line-height: 1.55; max-width: 44ch; text-wrap: pretty; }
.prod__q { color: #0F1A2C; }
.prod__q .lbl, .prods .prod__d .lbl { display: block; margin-bottom: 6px; font-size: 10.5px; color: #B8441F; }
@media (min-width: 768px) and (max-height: 820px) { .prods .shot { display: none; } }

/* método */
.meth { background: #E3E6EA; padding: clamp(90px, 11vw, 150px) var(--gut); }
.meth .wrap { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 60px); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule-l); }
.step { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px 28px; border-left: 1px solid var(--rule-l); }
.step:first-child { border-left: 0; padding-left: 0; }
.step .lbl { color: #B8441F; }
.step h3 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 400; letter-spacing: -.045em; line-height: 1; color: #0F1A2C; }
.step p { font-size: 15px; line-height: 1.6; color: #27313F; text-wrap: pretty; }
.meth__no {
  max-width: 46ch; padding-left: 20px; border-left: 2px solid #D9552B;
  font-size: clamp(20px, 2vw, 28px); letter-spacing: -.03em; line-height: 1.3; color: #0F1A2C; text-wrap: pretty;
}
.princ { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; border-top: 1px solid var(--rule-l); }
.princ li { padding: 18px 0; border-bottom: 1px solid var(--rule-l); font-size: 16px; line-height: 1.5; color: #27313F; }
.meth__cases { display: flex; flex-direction: column; gap: 14px; }
.meth__cases ul { border-top: 1px solid var(--rule-l); }
.meth__cases a {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: baseline; gap: 6px 24px;
  padding: 20px 0; border-bottom: 1px solid var(--rule-l); color: #0F1A2C;
}
.meth__cases strong { font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; letter-spacing: -.04em; }
.meth__cases span:not(.arr) { font-size: 14.5px; color: #5B6676; }
.meth__cases .arr { color: #D9552B; transition: transform .5s var(--e); }
.meth__cases a:hover .arr { transform: translateX(6px); }
@media (max-width: 899px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(3) { border-left: 0; padding-left: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--rule-l); }
  .princ { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .steps, .princ { grid-template-columns: 1fr; }
  .step, .step:first-child { border-left: 0; padding: 22px 0 24px; }
  .step + .step { border-top: 1px solid var(--rule-l); }
  .meth__cases a { grid-template-columns: minmax(0, 1fr) auto; }
  .meth__cases span:not(.arr) { grid-column: 1; grid-row: 2; }
  .meth__cases .arr { grid-column: 2; grid-row: 1; }
}

/* HAXOR Growth: segunda linea, banda propia tras Servicios. Un escalon abajo: sin pin, tipografia menor, tono propio. */
.on-light.gw { background: #E7EAEE; border-block: 1px solid #D5D9DE; }
.gw { padding: clamp(64px, 8vw, 112px) var(--gut); scroll-margin-top: 72px; }
.gw__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px clamp(32px, 6vw, 96px); align-items: start; }
.gw__head { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.gw__t { font-size: clamp(38px, 4.6vw, 68px); text-wrap: balance; font-weight: 400; letter-spacing: -.05em; line-height: .98; color: #0F1A2C; }
.gw__def { font-size: 17px; line-height: 1.55; color: #2C3646; max-width: 38ch; text-wrap: pretty; }
.gw__since { font-size: 11.5px; letter-spacing: .12em; }
.gw__p { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }
.gw__i { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; row-gap: 6px; padding: 22px 0 24px; border-top: 1px solid #C5CBD3; }
.gw__i:last-child { border-bottom: 1px solid #C5CBD3; }
.gw__i .lbl { grid-row: 1; padding-top: 7px; }
.gw__i h3 { grid-column: 2; font-size: clamp(22px, 2vw, 28px); font-weight: 400; letter-spacing: -.03em; line-height: 1.15; color: #0F1A2C; }
.gw__k { grid-column: 2; font-family: var(--mono); font-weight: 300; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #A33C19; }
.gw__i p { grid-column: 2; font-size: 15.5px; line-height: 1.6; color: #2C3646; max-width: 52ch; text-wrap: pretty; }
.gw__cta { margin-top: 14px; }
@media (max-width: 899px) {
  .gw__in { grid-template-columns: minmax(0, 1fr); }
  .gw__p { grid-column: 1; grid-row: auto; }
}

/* contacto + pie */
.contact__sub { font-size: 16px; line-height: 1.6; color: #A3ADBA; max-width: 58ch; text-wrap: pretty; }
.fnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px; padding-top: 32px; border-top: 1px solid var(--rule); }
.fnav .lbl { color: #8C96A4; margin-bottom: 12px; }
.fnav ul:not(.langs) { display: flex; flex-direction: column; }
.fnav ul:not(.langs) a { display: inline-block; padding: 5px 0; font-size: 15px; color: #D8DCE1; transition: color .4s ease; }
.fnav ul:not(.langs) a:hover { color: var(--hx-signal-claro, #F08A63); }
.fnav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #D9552B; }
.langs { display: flex; flex-wrap: wrap; gap: 6px; }
.langs a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 36px; padding: 0 10px;
  border-radius: 999px; border: 1px solid #B9C0C9; font-family: var(--mono); font-weight: 300; font-size: 11.5px; letter-spacing: .1em; color: #0F1A2C;
}
.langs abbr { text-decoration: none; }
.langs a { transition: border-color .4s ease, background .4s ease; }
.langs a:hover { border-color: #0F1A2C; }
.langs--foot a:hover { border-color: #D8DCE1; }
.langs a[aria-current] { background: #0F1A2C; border-color: #0F1A2C; color: #E3E6EA; }
.langs--foot a { border-color: rgba(216, 220, 225, .28); color: #D8DCE1; }
.langs--foot a[aria-current] { background: #E3E6EA; border-color: #E3E6EA; color: #0F1A2C; }
.menu__row { align-items: center; }

/* selector de idioma en la barra (visible sin abrir el menú, escritorio y móvil) */
.langs--bar {
  flex-wrap: nowrap; gap: 0; height: 44px; padding: 0; border-radius: 999px; border: 1px solid rgba(216, 220, 225, .28);
  background: rgba(10, 19, 34, .4); transition: background .5s ease, border-color .5s ease;
}
.langs--bar li { display: flex; }
.langs--bar a { min-width: 44px; height: 42px; padding: 0 8px; border: 0; color: #E3E6EA; }
.langs--bar a:hover { background: rgba(216, 220, 225, .12); }
.langs--bar a[aria-current] { background: #E3E6EA; color: #0F1A2C; }
.hdr.is-light.is-scrolled .langs--bar, .hdr.is-menu .langs--bar { background: #0F1A2C; border-color: #0F1A2C; }
@media (max-width: 560px) { .hdr__r > .pill--solid { display: none; } }
@media (max-width: 359px) {
  .hdr__r .pill--line > [data-roll] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hdr__r .pill--line { padding: 0 14px; }
}

/* contacto: formulario de una línea */
.qform { display: flex; flex-direction: column; gap: 10px; }
.qform__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.qform__f { display: flex; flex-direction: column; gap: 8px; }
.qform__f label { font-family: var(--mono); font-weight: 300; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8C96A4; }
.qform__f--q label { text-transform: none; letter-spacing: -.01em; font-family: inherit; font-size: 17px; color: #D8DCE1; }
.qform input {
  height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(216, 220, 225, .24); background: rgba(10, 19, 34, .5);
  color: #E3E6EA; font: inherit; font-size: 16px;
}
.qform input::placeholder { color: #6E7887; }
.qform input:focus-visible { outline: 2px solid #D9552B; outline-offset: 2px; }
.qform input[aria-invalid="true"] { border-color: #F08A63; }
.qform__b { height: 48px; border: 0; cursor: pointer; }
.qform__b[disabled] { opacity: .6; cursor: progress; }
.qform__note { font-size: 13px; color: #8C96A4; }
.qform__note a, .form-msg a { text-decoration: underline; text-underline-offset: 3px; }
.contact .form-msg.is-ok { color: #9FD6C5; }
.contact .form-msg.is-err { color: #F08A63; }
.contact__reply { font-size: 17px; line-height: 1.45; color: #D8DCE1; max-width: 28ch; }
@media (max-width: 767px) { .qform__row { grid-template-columns: 1fr; } .qform__b { justify-self: start; } }

/* banda de crecimiento: bajada fija */

/* método: tres formas de trabajar */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(40px, 6vw, 72px); }
.mode { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #CED3DA; }
.mode .lbl { color: #B8441F; }
.mode h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 400; letter-spacing: -.04em; line-height: 1.05; color: #0F1A2C; }
.mode p { font-size: 15px; line-height: 1.55; color: #3F4A5A; }
.mode a { margin-top: auto; align-self: flex-start; font-size: 14px; color: #0F1A2C; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.meth__k { color: #5B6676; margin-bottom: 18px; }
@media (max-width: 899px) { .modes { grid-template-columns: 1fr; } }

/* ---------- páginas interiores ---------- */
.ph { position: relative; padding: clamp(130px, 16vw, 190px) var(--gut) clamp(70px, 9vw, 120px); }
.ph__in { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; color: #8C96A4; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: #5B6676; }
.crumbs a { display: inline-block; padding: 6px 0; transition: color .4s ease; }
.crumbs a:hover { color: #D8DCE1; }
.crumbs [aria-current] { display: inline-block; padding: 6px 0; color: #A3ADBA; }
.ph__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; color: #8C96A4; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(216, 220, 225, .22); font: 300 11px/1 var(--mono); letter-spacing: .12em; color: #D8DCE1;
}
.badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--hx-pino-claro, #5FB49C); }
.ph__h { font-size: clamp(40px, 6vw, 100px); font-weight: 400; letter-spacing: -.055em; line-height: .98; color: #D8DCE1; max-width: 18ch; text-wrap: balance; }
.ph__lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: #A3ADBA; max-width: 60ch; text-wrap: pretty; }
.ph__ctas { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 8px; }

.blk { padding: clamp(64px, 8vw, 120px) var(--gut); }
.blk--mist { background: #E3E6EA; }
.blk__g {
  max-width: 1400px; margin: 0 auto; padding-top: 32px; border-top: 1px solid var(--rule-l);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(32px, 6vw, 96px);
}
.blk__h { display: flex; flex-direction: column; gap: 16px; align-self: start; }
.blk__h h2 { font-size: clamp(30px, 3.2vw, 52px); font-weight: 400; letter-spacing: -.05em; line-height: 1.02; color: #0F1A2C; text-wrap: balance; }
.blk__b { min-width: 0; }
@media (max-width: 899px) { .blk__g { grid-template-columns: 1fr; } }
.prose { display: flex; flex-direction: column; gap: 18px; }
.prose p { font-size: 17px; line-height: 1.7; color: #27313F; max-width: 62ch; text-wrap: pretty; }
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; }
.items li { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid #C9CFD6; }
.items h3 { font-size: 21px; font-weight: 400; letter-spacing: -.025em; line-height: 1.2; color: #0F1A2C; }
.items p { font-size: 15.5px; line-height: 1.6; color: #27313F; text-wrap: pretty; }
@media (max-width: 639px) { .items { grid-template-columns: 1fr; } }
.bul { border-top: 1px solid var(--rule-l); }
.bul li { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--rule-l); font-size: 16.5px; line-height: 1.55; color: #27313F; }
.bul li::before { content: "+"; position: absolute; left: 2px; top: 14px; font-family: var(--mono); color: #B8441F; }
.steps--page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; border-top: 0; }
.steps--page .step, .steps--page .step:first-child { border-left: 0; padding: 22px 0 26px; border-top: 1px solid var(--rule-l); }
@media (max-width: 599px) { .steps--page { grid-template-columns: 1fr; } }
.faq { border-top: 1px solid var(--rule-l); }
.faq details { border-bottom: 1px solid var(--rule-l); }
.faq summary {
  list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; min-height: 44px; padding: 20px 0;
  cursor: pointer; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.02em; line-height: 1.3; color: #0F1A2C;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 14px; height: 14px; margin-top: 6px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1.5px; background: #B8441F; transition: transform .4s var(--e); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq p { padding: 0 0 22px; font-size: 16px; line-height: 1.7; color: #27313F; max-width: 62ch; text-wrap: pretty; }
.rel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rel a {
  position: relative; height: 100%; min-height: 120px; padding: 22px 52px 22px 22px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #D5D9DE; color: #0F1A2C;
  transition: background .5s ease, color .5s ease, border-color .5s ease;
}
.rel .lbl { color: #5B6676; font-size: 10.5px; transition: color .5s ease; }
.rel strong { font-size: 24px; font-weight: 400; letter-spacing: -.04em; line-height: 1.1; }
.rel__d { font-size: 14.5px; line-height: 1.5; color: #5B6676; transition: color .5s ease; }
.rel .arr { position: absolute; right: 22px; top: 22px; color: #D9552B; }
.rel a:hover { background: #0F1A2C; border-color: #0F1A2C; color: #D8DCE1; }
.rel a:hover .lbl, .rel a:hover .rel__d { color: #A3ADBA; }
@media (max-width: 639px) { .rel { grid-template-columns: 1fr; } }
.nxt { padding: clamp(80px, 10vw, 140px) var(--gut); border-top: 1px solid var(--rule-l); }
.nxt__in { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.nxt h2 { font-size: clamp(36px, 5vw, 80px); font-weight: 400; letter-spacing: -.055em; line-height: .98; color: #0F1A2C; max-width: 18ch; text-wrap: balance; }
.nxt p { font-size: 17px; line-height: 1.6; color: #5B6676; max-width: 56ch; }
.nxt__ctas { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.nxt--s { padding: 36px var(--gut) 56px; }
.ul:hover { text-decoration-color: currentColor; }
.ul { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #B8441F; color: #0F1A2C; }
.fn--page { border-top: 1px solid var(--rule-l); border-bottom: 1px solid var(--rule-l); grid-template-columns: repeat(3, 1fr); }
.fn--page .fn__s { border-left: 1px solid var(--rule-l); padding: 18px 14px 20px; gap: 18px; }
.fn--page .fn__s:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.fn--page .fn__s:nth-child(n+4) { border-top: 1px solid var(--rule-l); }
.fn--page .fn__s::before, .fn--page .fn__s::after { display: none; }
.fn--page .fn__n { color: #5B6676; }
.fn--page .fn__t { color: #0F1A2C; font-size: clamp(22px, 2vw, 30px); }
.fn--page .fn__s--end .fn__n, .fn--page .fn__s--end .fn__t { color: #B8441F; }
@media (max-width: 899px) {
  .fn--page { grid-template-columns: 1fr; border-bottom: 0; }
  .fn--page .fn__s, .fn--page .fn__s:first-child { border-left: 0; padding: 14px 0 16px; border-top: 0; border-bottom: 1px solid var(--rule-l); }
}

/* formularios de diagnóstico */
.dgx__lead { font-size: 16px; line-height: 1.65; color: #27313F; max-width: 46ch; text-wrap: pretty; }
.blk__h h2[translate] { font-size: clamp(36px, 4vw, 64px); }
.dform { color-scheme: light; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.dform__f { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.fg { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fg--full { grid-column: 1 / -1; }
.fg label, .sl label { font-family: var(--mono); font-weight: 300; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #27313F; }
.fg .opt { text-transform: none; letter-spacing: .02em; color: #5B6676; }
.dform input:not([type="range"]), .dform select, .dform textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #9AA3AF; border-radius: 10px;
  background: #fff; color: #0F1A2C; font: 400 16px/1.4 var(--sans); transition: border-color .3s ease;
}
.dform textarea { resize: vertical; }
.dform ::placeholder { color: #5B6676; opacity: 1; }
.dform input:hover, .dform select:hover, .dform textarea:hover { border-color: #5B6676; }
.dform [aria-invalid="true"] { border-color: #B8441F; }
.dform__legal { font-size: 13px; line-height: 1.5; color: #5B6676; }
.dform__legal a { color: #0F1A2C; text-decoration: underline; text-underline-offset: 3px; }
.btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
  background: #0F1A2C; color: #E3E6EA; font: 300 12.5px/1 var(--mono); letter-spacing: .08em; cursor: pointer; transition: background .4s ease;
}
.btn > span:last-child { color: #F08A63; }
.btn:hover { background: #27313F; }
.btn:disabled { opacity: .6; cursor: progress; }
.form-msg { min-height: 1.5em; font-size: 14.5px; line-height: 1.5; }
.form-msg.is-ok { color: var(--hx-pino, #1C5245); }
.form-msg.is-err { color: #B8441F; }
.roi { display: grid; gap: 20px; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid #D5D9DE; }
.roi__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.sl { display: flex; flex-direction: column; gap: 6px; }
.sl label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sl output { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; color: #0F1A2C; }
.dform input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
.dform input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #0F1A2C var(--fill, 50%), #C9CFD6 var(--fill, 50%)); }
.dform input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: #D9552B; border: 2px solid #fff; box-shadow: 0 0 0 1px #D9552B; }
.dform input[type="range"]::-moz-range-track { height: 2px; background: #C9CFD6; }
.dform input[type="range"]::-moz-range-progress { height: 2px; background: #0F1A2C; }
.dform input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #D9552B; border: 2px solid #fff; box-shadow: 0 0 0 1px #D9552B; }
.roi__out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #D5D9DE; }
.roi__c { display: flex; flex-direction: column; gap: 8px; padding: 16px 12px 4px 0; }
.roi__c .lbl { font-size: 10.5px; color: #5B6676; }
.roi__c > span:last-child { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.04em; line-height: 1; color: #0F1A2C; }
.roi__c--t { grid-column: 1 / -1; margin-top: 12px; padding-top: 16px; border-top: 1px solid #D5D9DE; }
.roi__c--t > span:last-child { font-size: clamp(36px, 4vw, 56px); }
#roiRisk[data-risk="HIGH"], #roiRisk[data-risk="CRITICAL"] { color: #B8441F; }
@media (max-width: 639px) {
  .dform__f, .roi__in { grid-template-columns: 1fr; }
  .roi__out { grid-template-columns: 1fr; }
  .roi { padding: 18px; }
}

/* ---------- objetivos táctiles (>=44px en pantallas táctiles) ---------- */
@media (pointer: coarse) {
  [data-cta] { padding-block: 15px; }
  [data-cta]::after { bottom: 9px; }
  .menu__chip { min-height: 44px; }
  .menu__row a, .contact__mail, .contact__c a.soc, .legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .menu__a { padding: 8px 0; }
  .hero__alt, .hero__quick a, .crumbs a, .fnav ul:not(.langs) a, .langs a { min-height: 44px; display: inline-flex; align-items: center; }
  .dform input[type="range"] { height: 44px; }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .svc__d, .svc__d.is-on, .svc__di, .svc__d.is-on .svc__di, .svc__wt { transition: none !important; translate: none; transform: none; }
  .loader { display: none; }
  .hero__orb circle { display: none; }
  [data-site] [data-hin] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; animation: none !important; }
  [data-roll] > span { transition: none; }
  .svc__d, .svc__di, .svc__wt, .dcard, .dcard *, .rel a, .rel a *, .faq summary i::before, .faq summary i::after { transition-duration: .01s; transition-delay: 0s !important; }
  .menu { clip-path: none !important; transition: opacity .2s ease, visibility 0s linear .2s !important; }
  .menu.is-open { transition: opacity .2s ease !important; }
  .menu__t, .menu.is-open .menu__t { transform: none !important; opacity: 1; transition: none !important; }
  .menu__foot, .menu.is-open .menu__foot { transition: none !important; opacity: 1; }
}

/* =====================================================================
   Tema oscuro (por defecto) · 11-oct-2026
   <html data-theme="dark|light"> lo fija un script inline en <head> antes del primer pintado:
   preferencia guardada (localStorage «hx-theme») → prefers-color-scheme → oscuro.
   En claro se conserva el diseño original (secciones .on-light en papel). En oscuro, todo navy.
   ===================================================================== */
.theme-t {
  position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 999px;
  border: 1px solid rgba(216, 220, 225, .28); background: rgba(10, 19, 34, .4); color: #E3E6EA; cursor: pointer;
  transition: background .5s ease, border-color .5s ease, color .5s ease;
}
.theme-t:hover { background: rgba(216, 220, 225, .12); }
.theme-t svg { width: 18px; height: 18px; display: block; }
.theme-t .ic-sun { display: none; }
[data-theme="light"] .theme-t .ic-sun { display: block; }
[data-theme="light"] .theme-t .ic-moon { display: none; }
.hdr.is-light.is-scrolled .theme-t, .hdr.is-menu .theme-t { background: #0F1A2C; border-color: #0F1A2C; }
@media (max-width: 420px) {
  .hdr__r .pill--line > [data-roll] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hdr__r .pill--line { padding: 0 14px; }
}

[data-theme="dark"] { --rule-l: rgba(216, 220, 225, .14); }
[data-theme="dark"] .on-light { background: #0A1322; color: #D8DCE1; }
[data-theme="dark"] .on-light .lbl { color: #8C96A4; }
[data-theme="dark"] .on-light :focus-visible { outline-color: #F08A63; }
[data-theme="dark"] .blinds { display: none; }
[data-theme="dark"] .fact--white { background: #1E2B42; color: #D8DCE1; }
[data-theme="dark"] .fact--white .lbl, [data-theme="dark"] .fact--white .fact__b span:first-child { color: #A3ADBA; }
[data-theme="dark"] .fact--white svg circle { fill: #27313F; }
[data-theme="dark"] .fact--white svg g { stroke: rgba(163, 173, 186, .16); }
/* servicios (pila fijada del home) */
[data-theme="dark"] .svc__wt { color: #1C2638; }
[data-theme="dark"] .svc__w.is-on .svc__wt { color: #E6E9ED; }
[data-theme="dark"] .svc__sub { color: #A3ADBA; }
[data-theme="dark"] .svc__d p { color: #D3D9E0; }
[data-theme="dark"] .svc__di { border-left-color: #F08A63; }
[data-theme="dark"] .svc__d .lbl { color: #F08A63; }
[data-theme="dark"] .svc__d [data-cta] { color: #E6E9ED; }
[data-theme="dark"] .svc__c { color: #8C96A4; }
[data-theme="dark"] .on-light.gw { background: #101D32; border-block-color: rgba(216, 220, 225, .1); }
[data-theme="dark"] .gw__t, [data-theme="dark"] .gw__i h3 { color: #E6E9ED; }
[data-theme="dark"] .gw__def, [data-theme="dark"] .gw__i p { color: #B7C0CB; }
[data-theme="dark"] .gw__i, [data-theme="dark"] .gw__i:last-child { border-color: rgba(216, 220, 225, .16); }
[data-theme="dark"] .gw__k { color: #F08A63; }
/* sistemas */
[data-theme="dark"] .rail__intro p, [data-theme="dark"] .prod__d, [data-theme="dark"] .prods .prod__d { color: #A3ADBA; }
[data-theme="dark"] .prod, [data-theme="dark"] .rail__end { border-color: rgba(216, 220, 225, .14); }
[data-theme="dark"] .shot { background-color: #0F1A2C; background-image: linear-gradient(rgba(216, 220, 225, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(216, 220, 225, .05) 1px, transparent 1px); }
[data-theme="dark"] .shot span { background: #0F1A2C; color: #8C96A4; }
[data-theme="dark"] .shot::before, [data-theme="dark"] .shot::after { color: #5B6676; }
[data-theme="dark"] .prod__m { color: #8C96A4; }
[data-theme="dark"] .prod__s i { background: var(--hx-pino-claro, #5FB49C); }
[data-theme="dark"] .prod__q, [data-theme="dark"] .prod [data-cta], [data-theme="dark"] .rail__end [data-cta] { color: #D8DCE1; }
[data-theme="dark"] .prod__q .lbl, [data-theme="dark"] .prods .prod__d .lbl { color: #F08A63; }
/* diagnósticos (tarjetas del home) */
[data-theme="dark"] .sec-head__p { color: #A3ADBA; }
[data-theme="dark"] .dcard { background: #0F1A2C; border-color: rgba(216, 220, 225, .14); color: #D8DCE1; }
[data-theme="dark"] .dcard .lbl, [data-theme="dark"] .dcard__p { color: #A3ADBA; }
[data-theme="dark"] .dcard:hover { background: #17243A; border-color: rgba(216, 220, 225, .32); }
/* método */
[data-theme="dark"] .meth, [data-theme="dark"] .blk--mist { background: #0F1A2C; }
[data-theme="dark"] .step .lbl, [data-theme="dark"] .mode .lbl { color: #F08A63; }
[data-theme="dark"] .step h3, [data-theme="dark"] .meth__no, [data-theme="dark"] .meth__cases a, [data-theme="dark"] .mode h3, [data-theme="dark"] .mode a { color: #D8DCE1; }
[data-theme="dark"] .step p, [data-theme="dark"] .princ li, [data-theme="dark"] .meth__cases span:not(.arr), [data-theme="dark"] .mode p { color: #A3ADBA; }
[data-theme="dark"] .mode { background: #17243A; border-color: rgba(216, 220, 225, .14); }
[data-theme="dark"] .meth__k { color: #8C96A4; }
/* páginas interiores */
[data-theme="dark"] .blk__h h2, [data-theme="dark"] .items h3, [data-theme="dark"] .faq summary, [data-theme="dark"] .nxt h2 { color: #D8DCE1; }
[data-theme="dark"] .prose p, [data-theme="dark"] .items p, [data-theme="dark"] .faq p, [data-theme="dark"] .nxt p, [data-theme="dark"] .dgx__lead { color: #A3ADBA; }
[data-theme="dark"] .bul li { color: #C3C9D1; }
[data-theme="dark"] .items li { border-top-color: rgba(216, 220, 225, .14); }
[data-theme="dark"] .bul li::before { color: #F08A63; }
[data-theme="dark"] .faq summary i::before, [data-theme="dark"] .faq summary i::after { background: #F08A63; }
[data-theme="dark"] .rel a { background: #0F1A2C; border-color: rgba(216, 220, 225, .14); color: #D8DCE1; }
[data-theme="dark"] .blk--mist .rel a { background: #17243A; }
[data-theme="dark"] .rel .lbl, [data-theme="dark"] .rel__d { color: #A3ADBA; }
[data-theme="dark"] .rel a:hover { background: #27313F; border-color: rgba(216, 220, 225, .32); }
[data-theme="dark"] .ul { color: #D8DCE1; text-decoration-color: #F08A63; }
[data-theme="dark"] .fn--page .fn__n { color: #8C96A4; }
[data-theme="dark"] .fn--page .fn__t { color: #D8DCE1; }
[data-theme="dark"] .fn--page .fn__s--end .fn__n, [data-theme="dark"] .fn--page .fn__s--end .fn__t { color: #F08A63; }
/* formularios de diagnóstico */
[data-theme="dark"] .dform { color-scheme: dark; }
[data-theme="dark"] .fg label, [data-theme="dark"] .sl label { color: #A3ADBA; }
[data-theme="dark"] .fg .opt, [data-theme="dark"] .dform__legal { color: #8C96A4; }
[data-theme="dark"] .dform__legal a, [data-theme="dark"] .sl output { color: #D8DCE1; }
[data-theme="dark"] .dform input:not([type="range"]), [data-theme="dark"] .dform select, [data-theme="dark"] .dform textarea { background: #0A1322; border-color: #5B6676; color: #E3E6EA; }
[data-theme="dark"] .dform ::placeholder { color: #8C96A4; }
[data-theme="dark"] .dform input:hover, [data-theme="dark"] .dform select:hover, [data-theme="dark"] .dform textarea:hover { border-color: #8C96A4; }
[data-theme="dark"] .dform [aria-invalid="true"] { border-color: #F08A63; }
[data-theme="dark"] .btn { background: #E3E6EA; color: #0F1A2C; }
[data-theme="dark"] .btn > span:last-child { color: #A33A1B; }
[data-theme="dark"] .btn:hover { background: #FFFFFF; }
[data-theme="dark"] .form-msg.is-ok { color: #9FD6C5; }
[data-theme="dark"] .form-msg.is-err, [data-theme="dark"] #roiRisk[data-risk="HIGH"], [data-theme="dark"] #roiRisk[data-risk="CRITICAL"] { color: #F08A63; }
[data-theme="dark"] .roi { background: #0F1A2C; border-color: rgba(216, 220, 225, .14); }
[data-theme="dark"] .blk--mist .roi { background: #17243A; }
[data-theme="dark"] .roi__out, [data-theme="dark"] .roi__c--t { border-color: rgba(216, 220, 225, .14); }
[data-theme="dark"] .roi__c .lbl { color: #A3ADBA; }
[data-theme="dark"] .roi__c > span:last-child { color: #D8DCE1; }
[data-theme="dark"] .dform input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, #D8DCE1 var(--fill, 50%), #27313F var(--fill, 50%)); }
[data-theme="dark"] .dform input[type="range"]::-webkit-slider-thumb { border-color: #0A1322; }
[data-theme="dark"] .dform input[type="range"]::-moz-range-track { background: #27313F; }
[data-theme="dark"] .dform input[type="range"]::-moz-range-progress { background: #D8DCE1; }
[data-theme="dark"] .dform input[type="range"]::-moz-range-thumb { border-color: #0A1322; }

/* ---------- hero de servicio: gancho + «lo que cambia» + «qué recibe» ---------- */
.ph__grid { width: 100%; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.ph__main { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ph__hook { font-size: clamp(22px, 2.1vw, 32px); line-height: 1.3; letter-spacing: -.025em; color: #D8DCE1; max-width: 30ch; text-wrap: pretty; }
.pitch { display: flex; flex-direction: column; gap: 22px; padding: clamp(22px, 2.4vw, 32px); border-radius: 16px; background: #0F1A2C; border: 1px solid rgba(216, 220, 225, .14); }
.pitch h2 { margin-bottom: 10px; color: #A3ADBA; }
.pitch ul { display: flex; flex-direction: column; }
.pitch li { position: relative; padding: 12px 0 12px 26px; border-top: 1px solid rgba(216, 220, 225, .12); font-size: 16px; line-height: 1.5; color: #D8DCE1; text-wrap: pretty; }
.pitch li::before { content: "+"; position: absolute; left: 2px; top: 12px; font-family: var(--mono); color: #F08A63; }
.pitch p { font-size: 15px; line-height: 1.6; color: #A3ADBA; text-wrap: pretty; }
@media (max-width: 899px) { .ph__grid { grid-template-columns: 1fr; } }

/* ---------- herramientas primero (hero del home y página de diagnóstico) ---------- */
.tools { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.tools__k { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.35; letter-spacing: -.015em; color: #D8DCE1; }
.tools ul { display: flex; flex-wrap: wrap; gap: 8px; }
.tools ul a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(216, 220, 225, .28); background: rgba(10, 19, 34, .45); font-size: 14px; color: #E3E6EA;
  transition: border-color .4s ease, background .4s ease;
}
.tools ul a:hover { border-color: rgba(216, 220, 225, .6); background: rgba(23, 36, 58, .8); }
.tools ul a [data-arr] { color: #F08A63; }
.tools__alt { font-size: 14px; color: #A3ADBA; }
.tools__alt a { color: #D8DCE1; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #F08A63; }
@media (pointer: coarse) { .tools__alt a { display: inline-flex; align-items: center; min-height: 44px; } }
.hero__col .tools__k { font-size: 17px; line-height: 1.4; color: #D8DCE1; max-width: none; }
/* AA en claro: el naranja de texto sobre niebla (#E3E6EA) daba 4.32:1 */
[data-theme="light"] .meth .step .lbl, [data-theme="light"] .blk--mist .step .lbl { color: #A33A1B; }

/* =====================================================================
   Costo del trabajo manual (Impact Dossier v2) · 11-oct-2026
   Controles a la izquierda, resultado a la derecha (fijo al hacer scroll en escritorio).
   El panel de resultado es navy en los dos temas: mismo contraste, mismo peso de marca.
   ===================================================================== */
.mc { padding: clamp(40px, 6vw, 88px) var(--gut) clamp(64px, 8vw, 112px); }
.mc__g { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.mc__in { gap: 26px; padding: clamp(18px, 2.4vw, 32px); border-radius: 16px; background: #fff; border: 1px solid #D5D9DE; align-items: stretch; }
.mc__cur { max-width: 320px; }
.mc__set { margin: 0; padding: 22px 0 0; border: 0; border-top: 1px solid #D5D9DE; display: grid; gap: 22px; min-width: 0; }
.mc__set > legend { padding: 0 0 4px; color: #B8441F; font-size: 11px; }
.mc__set--opp { padding-top: 18px; border-top: 0; }
.mc__hint { margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: #5B6676; text-wrap: pretty; }
.mc .sl label > span:first-child { line-height: 1.4; }
.mc .sl output { white-space: nowrap; font-size: 14px; }
.mc__optw { border-top: 1px solid #D5D9DE; padding-top: 18px; }
.chk { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 15px; line-height: 1.4; color: #0F1A2C; }
.chk input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: #D9552B; cursor: pointer; }

.mc__out {
  position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.6vw, 34px);
  border-radius: 16px; background: #0F1A2C; color: #D8DCE1; box-shadow: var(--hx-shadow-panel, 0 40px 80px -30px rgba(0,0,0,.55));
}
.mc__out .lbl { color: #A3ADBA; font-size: 11px; }
.mc__big { display: flex; flex-wrap: wrap; align-items: baseline; font-size: clamp(32px, 3.4vw, 50px); letter-spacing: -.045em; line-height: 1.04; color: #F5F6F7; font-variant-numeric: tabular-nums; }
.mc__dash { color: #F08A63; padding: 0 .12em; }
.mc__unit { font-size: 14px; line-height: 1.45; color: #A3ADBA; }
.mc__dl { margin: 6px 0 0; display: grid; border-top: 1px solid rgba(216, 220, 225, .14); }
.mc__dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(216, 220, 225, .14); }
.mc__dl dt { font-size: 14.5px; line-height: 1.4; color: #C3C9D1; }
.mc__dl dd { margin: 0; font-size: 15.5px; color: #F5F6F7; text-align: right; white-space: nowrap; }
.mc__opp { padding: 14px 16px; border-radius: 10px; border: 1px dashed rgba(216, 220, 225, .3); display: grid; gap: 6px; }
.mc__oppv { font-size: 22px; letter-spacing: -.03em; color: #F5F6F7; }
.mc__out .mc__hint { color: #A3ADBA; }
.mc__note { font-size: 13.5px; line-height: 1.5; color: #A3ADBA; }
.mc__lnk, .mc__out .dform__legal a { color: #E3E6EA; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #F08A63; }
.mc__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.btn--inv { background: #E3E6EA; color: #0F1A2C; }
.btn--inv > span:last-child { color: #A33A1B; }
.btn--inv:hover { background: #FFFFFF; }
.btn--line { background: transparent; color: #E3E6EA; box-shadow: inset 0 0 0 1px rgba(216, 220, 225, .45); text-decoration: none; }
.btn--line:hover { background: rgba(216, 220, 225, .1); }
.mc__mailbtn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none;
  font: 300 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #E3E6EA; cursor: pointer;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #F08A63;
}
.mc__mailbtn[aria-expanded="true"] > span { display: inline-block; transform: rotate(180deg); }
.mc__mail { color-scheme: dark; gap: 16px; padding-top: 16px; border-top: 1px solid rgba(216, 220, 225, .14); align-items: stretch; }
.mc__mail[hidden] { display: none; }
.mc__mailp { font-size: 14.5px; line-height: 1.5; color: #C3C9D1; }
.mc__mail .dform__f { grid-template-columns: 1fr; gap: 14px; }
.mc__mail .fg label { color: #A3ADBA; }
.mc__mail .fg .opt, .mc__out .dform__legal { color: #A3ADBA; }
.mc__mail input:not([type="range"]), .mc__mail select { background: #0A1322; border-color: #5B6676; color: #E3E6EA; }
.mc__mail ::placeholder { color: #8C96A4; }
.mc__mail input:hover, .mc__mail select:hover { border-color: #8C96A4; }
.mc__mail [aria-invalid="true"] { border-color: #F08A63; }
.mc__mail .btn { align-self: flex-start; }
.mc__out .form-msg.is-ok { color: #9FD6C5; }
.mc__out .form-msg.is-err { color: #F08A63; }
.mc__out .form-msg a { color: #E3E6EA; }
.mc__out :focus-visible { outline-color: #F08A63; }

.mc__how { counter-reset: how; display: grid; gap: 14px; margin-bottom: 26px; }
.mc__how li { counter-increment: how; position: relative; padding-left: 38px; font-size: 16px; line-height: 1.6; color: #27313F; max-width: 68ch; text-wrap: pretty; }
.mc__how li::before { content: counter(how, decimal-leading-zero); position: absolute; left: 0; top: .3em; font: 300 11.5px/1 var(--mono); letter-spacing: .1em; color: #A33A1B; }

.dteaser { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

/* barra de resultado en móvil (sólo mientras los controles están en pantalla y el panel no) */
.mc__peek {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 8px 18px; border-radius: 999px; background: #0F1A2C; color: #F5F6F7; border: 1px solid rgba(216, 220, 225, .2);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); font-size: 16px; font-variant-numeric: tabular-nums;
}
.mc__peek[hidden] { display: none; }
.mc__peek .lbl { color: #A3ADBA; font-size: 10.5px; }
.mc__peek > span:last-child { color: #F08A63; }

@media (max-width: 899px) {
  .mc__g { grid-template-columns: 1fr; }
  .mc__out { position: static; }
  .mc__cur { max-width: none; }
}
@media (min-width: 900px) { .mc__peek { display: none; } }
@media (max-width: 420px) {
  .mc__big { font-size: 30px; }
  .mc__dl > div { flex-direction: column; gap: 4px; }
  .mc__dl dd { text-align: left; white-space: normal; }
  .mc__act .btn { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .mc__mailbtn[aria-expanded="true"] > span { transform: none; } }

[data-theme="dark"] .mc__in { background: #0F1A2C; border-color: rgba(216, 220, 225, .14); }
[data-theme="dark"] .mc__set, [data-theme="dark"] .mc__optw { border-top-color: rgba(216, 220, 225, .14); }
[data-theme="dark"] .mc__set--opp { border-top: 0; }
[data-theme="dark"] .mc__set > legend { color: #F08A63; }
[data-theme="dark"] .mc__hint { color: #A3ADBA; }
[data-theme="dark"] .chk { color: #D8DCE1; }
[data-theme="dark"] .mc__out { background: #17243A; border: 1px solid rgba(216, 220, 225, .14); }
[data-theme="dark"] .mc__mail input:not([type="range"]), [data-theme="dark"] .mc__mail select { background: #0A1322; }
[data-theme="dark"] .mc__how li { color: #C3C9D1; }
[data-theme="dark"] .mc__how li::before { color: #F08A63; }
[data-theme="dark"] .mc__peek { background: #17243A; }
@media (pointer: coarse) { .mc__lnk { display: inline-flex; align-items: center; min-height: 44px; } }
.mc [hidden] { display: none !important; }
.dform .chk input[type="checkbox"] { width: 20px; min-height: 0; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; }
.chk span { min-width: 0; }
[data-theme="dark"] .btn--line { background: transparent; color: #E3E6EA; }
[data-theme="dark"] .btn--line:hover { background: rgba(216, 220, 225, .1); }
[data-theme="dark"] .btn--line > span[aria-hidden] { color: #F08A63; }
.btn--line > span[aria-hidden] { color: #F08A63; }

/* honeypot del pipeline de leads: fuera de pantalla (no display:none, que algunos bots detectan) */
.hx-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.dform input.hx-hp { width: 1px; min-height: 0; height: 1px; padding: 0; border: 0; }

/* =====================================================================
   Herramientas nuevas · auditoría express, exposición de seguridad, casos de IA (11-oct-2026)
   Mismo esquema que el costo del trabajo manual: controles en tarjeta clara/oscura, resultado en panel navy.
   El estado nunca va solo en color: cada semáforo lleva icono y etiqueta.
   ===================================================================== */
.mc__g--stack { grid-template-columns: minmax(0, 1fr); }
.mc__g--stack .mc__out { position: static; }
.tk-res { max-width: 1400px; margin: clamp(20px, 3vw, 40px) auto 0; }
.mc__g--stack > .tk-res { margin-top: 0; }
.tk-res__h { font-size: clamp(22px, 2.4vw, 32px); font-weight: 400; letter-spacing: -.04em; line-height: 1.1; color: #F5F6F7; }
.mc__out[hidden] { display: none; }

/* preguntas de opción única */
.tk-q { margin: 0; padding: 22px 0 0; border: 0; border-top: 1px solid #D5D9DE; min-width: 0; display: grid; gap: 14px; scroll-margin-top: 96px; }
.tk-q > legend { display: contents; }
.tk-q__meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.tk-q__meta .num { font: 300 12px/1 var(--mono); letter-spacing: .1em; color: #B8441F; }
.tk-q__meta .lbl { color: #B8441F; font-size: 11px; }
.tk-q__t { display: block; font-size: 17px; line-height: 1.4; font-weight: 500; color: #0F1A2C; text-wrap: balance; }
.tk-opts { display: grid; gap: 8px; }
.tk-opt { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 14px; border: 1px solid #C9CFD6; border-radius: 10px; background: #fff; cursor: pointer; font-size: 15px; line-height: 1.45; color: #27313F; transition: border-color .2s ease, background .2s ease; }
.tk-opt:hover { border-color: #5B6676; }
.dform .tk-opt input[type="radio"] { flex: none; width: 20px; min-height: 0; height: 20px; margin: 1px 0 0; padding: 0; border: 0; background: none; accent-color: #D9552B; cursor: pointer; }
.tk-opt:has(input:checked) { border-color: #0F1A2C; background: #F5F6F7; box-shadow: inset 0 0 0 1px #0F1A2C; color: #0F1A2C; }
.tk-opt:has(input:focus-visible) { outline: 2px solid #D9552B; outline-offset: 2px; }

/* progreso, puntaje y barras por área */
.tk-prog { font-size: 15px; color: #C3C9D1; }
.tk-prog .num { color: #F5F6F7; font-size: 18px; }
.tk-meter { height: 4px; border-radius: 2px; background: rgba(216, 220, 225, .16); overflow: hidden; }
.tk-meter > i { display: block; height: 100%; background: #F08A63; transition: width .4s ease; }
.tk-of { font-size: .38em; letter-spacing: 0; color: #A3ADBA; padding-left: .5em; }
.tk-band { font: 300 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #F08A63; }
.tk-bars { display: grid; gap: 4px; margin-top: 6px; }
.tk-bars li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px; align-items: center; gap: 12px; min-height: 30px; font-size: 14.5px; color: #C3C9D1; }
.tk-bars__t { height: 8px; border-radius: 4px; background: rgba(216, 220, 225, .16); overflow: hidden; }
.tk-bars__t i { display: block; height: 100%; width: 0; background: #E3E6EA; border-radius: 4px; transition: width .5s ease; }
.tk-bars__v { text-align: right; color: #F5F6F7; }
.mc__out .btn[hidden] { display: none; }
.tk-gaps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: gap; }
.tk-gap { counter-increment: gap; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 12px; background: rgba(10, 19, 34, .55); border: 1px solid rgba(216, 220, 225, .14); }
.tk-gap::before { content: counter(gap, decimal-leading-zero); font: 300 11.5px/1 var(--mono); letter-spacing: .12em; color: #F08A63; }
.tk-gap .lbl { color: #A3ADBA; font-size: 10.5px; }
.tk-gap h4 { font-size: 18px; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; color: #F5F6F7; }
.tk-gap p { font-size: 15px; line-height: 1.55; color: #C3C9D1; text-wrap: pretty; }
.tk-res [data-actions] { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(216, 220, 225, .14); }
.tk-res [data-actions][hidden] { display: none; }
.tk-res [data-actions] .mc__mail { max-width: 560px; }

/* exposición de seguridad */
.tk-dom { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.tk-dom input { flex: 1 1 260px; width: auto; min-width: 0; }
.tk-light { display: flex; align-items: center; gap: 14px; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.035em; line-height: 1.15; color: #F5F6F7; }
.tk-light b { font-weight: 400; }
.tk-light__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #6FCF97; box-shadow: 0 0 0 5px rgba(111, 207, 151, .2); }
.tk-light[data-s="warn"] .tk-light__dot { background: #F2C14E; box-shadow: 0 0 0 5px rgba(242, 193, 78, .2); border-radius: 4px; transform: rotate(45deg); width: 20px; height: 20px; }
.tk-light[data-s="bad"] .tk-light__dot { background: #FF7B7B; box-shadow: 0 0 0 5px rgba(255, 123, 123, .2); border-radius: 3px; }
.tk-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
.tk-chk { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 12px; background: rgba(10, 19, 34, .55); border: 1px solid rgba(216, 220, 225, .14); border-left-width: 4px; }
.tk-chk[data-s="ok"] { border-left-color: #6FCF97; }
.tk-chk[data-s="warn"] { border-left-color: #F2C14E; }
.tk-chk[data-s="bad"] { border-left-color: #FF7B7B; }
.tk-chk[data-s="info"] { border-left-color: #8C96A4; }
.tk-chk__i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 14px/1 var(--sans); color: #0A1322; background: #8C96A4; }
.tk-chk[data-s="ok"] .tk-chk__i { background: #6FCF97; }
.tk-chk[data-s="warn"] .tk-chk__i { background: #F2C14E; border-radius: 5px; }
.tk-chk[data-s="bad"] .tk-chk__i { background: #FF7B7B; border-radius: 4px; }
.tk-chk__b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tk-chk__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tk-chk__st { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #F5F6F7; }
.tk-chk .lbl { color: #A3ADBA; font-size: 10.5px; }
.tk-chk__h { font-size: 16px; line-height: 1.4; font-weight: 500; color: #F5F6F7; overflow-wrap: anywhere; }
.tk-chk__w, .tk-chk__f { font-size: 14.5px; line-height: 1.55; color: #C3C9D1; text-wrap: pretty; }
.tk-chk__f strong { color: #F5F6F7; font-weight: 500; }
.tk-chk__d summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; font: 300 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #E3E6EA; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #F08A63; }
.tk-chk__d pre { margin: 6px 0 0; padding: 10px 12px; border-radius: 8px; background: #0A1322; color: #C3C9D1; font: 400 12.5px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-h3 { margin: 28px 0 8px; font: 300 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #B8441F; }

/* casos de IA */
.tk-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tk-cases[hidden] { display: none; }
.tk-case { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 12px; background: rgba(10, 19, 34, .55); border: 1px solid rgba(216, 220, 225, .14); min-width: 0; }
.tk-case.is-built { border-color: rgba(240, 138, 99, .5); }
.tk-case__k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tk-case__k .num { font: 300 11.5px/1 var(--mono); letter-spacing: .12em; color: #F08A63; }
.tk-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; font: 300 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #0F1A2C; background: #F08A63; text-decoration: none; }
.tk-badge--t { background: transparent; color: #C3C9D1; box-shadow: inset 0 0 0 1px rgba(216, 220, 225, .35); }
a.tk-badge:hover { background: #F5B79C; }
.tk-case h4 { font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; color: #F5F6F7; text-wrap: balance; }
.tk-case__dl { display: grid; gap: 10px; margin: 0; }
.tk-case__dl dt { font: 300 10.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #A3ADBA; margin-bottom: 3px; }
.tk-case__dl dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: #C3C9D1; text-wrap: pretty; }
.tk-case__m { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(216, 220, 225, .14); display: grid; gap: 6px; font-size: 14px; color: #C3C9D1; }
.tk-case__m strong { color: #F5F6F7; font-weight: 500; }
.tk-case__m .lbl { color: #A3ADBA; font-size: 10.5px; }
.tk-legend { padding: 14px 16px; border-radius: 10px; border: 1px dashed rgba(216, 220, 225, .3); }
.tk-legend[hidden] { display: none; }
.tk-legend ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; margin-top: 8px; font-size: 14px; line-height: 1.5; color: #C3C9D1; }
.tk-legend strong { color: #F5F6F7; font-weight: 500; }
.tk-noscript ul { list-style: disc; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; color: #27313F; }

@media (max-width: 1099px) { .tk-gaps, .tk-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) { .tk-checks { grid-template-columns: 1fr; } }
@media (max-width: 719px) { .tk-gaps, .tk-cases, .tk-legend ul { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .tk-bars li { grid-template-columns: 78px minmax(0, 1fr) 40px; gap: 8px; } .tk-chk { grid-template-columns: 1fr; } .tk-chk__i { display: none; } }
@media (prefers-reduced-motion: reduce) { .tk-meter > i, .tk-bars__t i { transition: none; } }

[data-theme="dark"] .tk-q { border-top-color: rgba(216, 220, 225, .14); }
[data-theme="dark"] .tk-q__meta .num, [data-theme="dark"] .tk-q__meta .lbl, [data-theme="dark"] .tk-h3 { color: #F08A63; }
[data-theme="dark"] .tk-q__t { color: #F5F6F7; }
[data-theme="dark"] .tk-opt { background: #0A1322; border-color: #5B6676; color: #C3C9D1; }
[data-theme="dark"] .tk-opt:hover { border-color: #8C96A4; }
[data-theme="dark"] .tk-opt:has(input:checked) { background: #17243A; border-color: #E3E6EA; box-shadow: inset 0 0 0 1px #E3E6EA; color: #F5F6F7; }
[data-theme="dark"] .tk-noscript ul { color: #C3C9D1; }

.tk-opt, .tk-dom .btn, .mc__act .btn { touch-action: manipulation; }

/* =====================================================================
   Aviso de cookies y analítica (Microsoft Clarity) · 12-oct-2026
   Lo muestra v4/js/analytics.js sólo en producción (o con ?clarity=debug). «Aceptar» y «Rechazar» son el mismo botón.
   Siempre oscuro (navy elevado), igual en tema claro y oscuro. Va fuera de .site: no hereda el cursor personalizado.
   ===================================================================== */
.cc[hidden] { display: none; }
.cc {
  position: fixed; z-index: 70; left: 16px; bottom: 16px; width: min(480px, calc(100vw - 32px));
  background: #0F1A2C; color: #D8DCE1; border: 1px solid rgba(216, 220, 225, .2); border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7); animation: ccIn .5s var(--e) both;
}
.cc__in { padding: 20px 22px 22px; display: grid; gap: 12px; }
.cc__t { color: #F08A63; }
.cc__d { font-size: 14.5px; line-height: 1.55; color: #D8DCE1; }
.cc__d a { color: #E3E6EA; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #F08A63; display: inline-block; padding: 2px 0; }
.cc__a { display: flex; gap: 10px; margin-top: 6px; }
.cc__b {
  flex: 1 1 0; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(216, 220, 225, .45); background: transparent; color: #E3E6EA;
  font: 300 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: background .3s ease, border-color .3s ease;
}
.cc__b:hover { background: rgba(216, 220, 225, .12); border-color: rgba(216, 220, 225, .7); }
.cc :focus-visible { outline: 2px solid #F08A63; outline-offset: 3px; }
.cc-open {
  display: inline-block; padding: 4px 0; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: none;
}
.cc-open[hidden] { display: none; }
.cc-open:hover { color: #D8DCE1; }
@media (pointer: coarse) { .cc-open { display: inline-flex; align-items: center; min-height: 44px; } }
@media (max-width: 520px) {
  .cc { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .cc__in { padding: 18px 18px 20px; }
}
@keyframes ccIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cc { animation: none; } .cc__b { transition: none; } }
@media print { .cc, .cc-open { display: none !important; } }