/* Agentic Stack - Alex.AI. Sistema: tinta, marfil, un solo oro. */

/* Fuentes auto-alojadas (SIL OFL 1.1; paquetes @fontsource). Subconjuntos latino y latino-ext (tildes, ñ). */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/geist-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/geist-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/geist-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/geist-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/geist-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/geist-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/geist-mono-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/geist-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(../assets/fonts/instrument-serif-latin-ext-400-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(../assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }


:root {
  --t-gpt: #10A37F;
  --t-cop: #109DF2;
  --t-gem: #9B72CB;
  --t-cla: #D97757;
  --ink-950: #0B0D10;
  --ink-900: #111418;
  --ink-800: #1A1E24;
  --ivory-50: #F6F2EA;
  --ivory-100: #EDE7DB;
  --ivory-200: #ECE6DA;
  --stone-400: #9A958B;
  --stone-600: #5E5A52;
  --ink-text: #14161A;
  --gold-400: #C9A96E;
  --gold-300: #E3CC9A;
  --gold-700: #7A5A22;

  --line-dark: rgba(236, 230, 218, .10);
  --line-dark-strong: rgba(236, 230, 218, .18);
  --line-light: rgba(20, 22, 26, .10);
  --line-light-strong: rgba(20, 22, 26, .18);
  --glass-dark: rgba(17, 20, 24, .72);
  --gold-wash: rgba(201, 169, 110, .10);

  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px;
  --s-6: 64px; --s-7: 96px; --s-8: 128px; --s-9: 160px;
  --r-sm: 8px; --r-md: 14px; --r-lg: 24px; --r-pill: 999px;

  --gutter: clamp(20px, 5vw, 40px);
  --col-gap: 16px;
  color-scheme: dark light;
}

/* Temas por banda */
.theme-dark {
  --bg: var(--ink-950);
  --fg: var(--ivory-200);
  --fg-2: var(--stone-400);
  --line: var(--line-dark);
  --line-strong: var(--line-dark-strong);
  --accent: var(--gold-400);
  --focus: var(--gold-400);
  --bezel-bg: rgba(236, 230, 218, .04);
  --bezel-core: var(--ink-900);
  --bezel-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  background-color: var(--bg);
  color: var(--fg);
}
.theme-light {
  --bg: var(--ivory-50);
  --fg: var(--ink-text);
  --fg-2: var(--stone-600);
  --line: var(--line-light);
  --line-strong: var(--line-light-strong);
  --accent: var(--gold-700);
  --focus: var(--gold-700);
  --bezel-bg: rgba(20, 22, 26, .04);
  --bezel-core: #FFFFFF;
  --bezel-shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 12px 32px -12px rgba(20, 22, 26, .10);
  background-color: var(--bg);
  color: var(--fg);
}
.theme-light.sec--alt { background-color: var(--ivory-100); --bg: var(--ivory-100); }

/* Reset y base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  background: var(--ink-950);
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  background: var(--ink-950);
  color: var(--ivory-200);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; font-weight: 500; }
p { text-wrap: pretty; max-width: 62ch; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus, var(--gold-400)); outline-offset: 3px; border-radius: inherit; }
.skip {
  position: fixed; left: 16px; top: 16px; z-index: 70;
  padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--gold-400); color: var(--ink-950); font-weight: 500;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Tipografía */
.t-display { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 500; }
.t-h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.03em; font-weight: 500; }
.t-h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.25; letter-spacing: -0.015em; font-weight: 500; }
.t-lead { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); line-height: 1.55; letter-spacing: -0.005em; color: var(--fg-2); }
.t-small { font-size: .875rem; line-height: 1.5; letter-spacing: .005em; color: var(--fg-2); }
.t-eyebrow { font-family: var(--font-mono); font-size: .75rem; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--fg-2); }
.t-figure { font-family: var(--font-mono); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; font-weight: 500; font-variant-numeric: tabular-nums; }
.num { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--accent); }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* Estructura */
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.sec { position: relative; padding-block: clamp(96px, 12vw, 160px); }
.sec + .sec.theme-light, .sec--rule { border-top: 1px solid var(--line); }
.sec__head { max-width: 800px; margin-bottom: var(--s-6); }
.sec__head > * + * { margin-top: var(--s-3); }
.hero__grid, .contact, .split, .method, .panel, .footer__row { grid-template-columns: minmax(0, 1fr); }

/* Botones y enlaces */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 12px 0 24px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: 1rem; font-weight: 500; line-height: 1; letter-spacing: -0.005em; white-space: nowrap;
  transition: transform .12s var(--ease-out), background-color .16s ease, border-color .16s ease;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--gold-400); color: var(--ink-950); }
.btn__icon {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(11, 13, 16, .10);
}
.btn__icon svg, .arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn__icon svg { transition: transform .2s var(--ease-out); }
.btn--ghost { padding: 0 24px; border-color: var(--line-dark-strong); color: var(--ivory-200); }
.btn--sm { min-height: 44px; padding: 0 8px 0 18px; font-size: .9375rem; }
.btn--sm .btn__icon { width: 28px; height: 28px; }
.btn--block { width: 100%; white-space: normal; padding-left: 20px; text-align: left; justify-content: space-between; }
.link { position: relative; display: inline-block; padding-block: 4px; }
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .24s var(--ease-out);
}
.link:focus-visible::after { transform: scaleX(1); }

/* Nav */
.nav {
  position: fixed; z-index: 50; top: 16px; left: var(--gutter); right: var(--gutter);
  max-width: calc(1200px - 2 * var(--gutter)); margin-inline: auto; height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 8px 0 20px; border-radius: var(--r-pill); color: var(--ivory-200);
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--glass-dark); border: 1px solid var(--line-dark);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  opacity: 0; transition: opacity .2s ease;
}
.nav.is-scrolled::before { opacity: 1; }
.nav.is-open { z-index: 61; }
.nav__logo { display: block; flex: none; border-radius: var(--r-sm); }
.nav__logo img { width: 88px; height: 32px; }
.nav__links { display: none; gap: 4px; }
.nav__links a, .nav__links .link { padding: 10px 14px; font-size: .9375rem; font-weight: 500; color: var(--ivory-200); }
.nav__links [aria-current="page"] { color: var(--gold-300); }
.nav__links .link::after { left: 14px; right: 14px; bottom: 6px; }
.nav__end { display: flex; align-items: center; gap: 4px; }
.nav__cta { display: none; }
.burger { position: relative; width: 44px; height: 44px; border-radius: 50%; }
.burger span {
  position: absolute; left: 13px; top: 21px; width: 18px; height: 1.5px; background: var(--ivory-200);
  transition: transform .2s var(--ease-in-out);
}
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: center;
  padding: 96px var(--gutter) 48px; background: rgba(11, 13, 16, .96); color: var(--ivory-200);
  visibility: hidden; opacity: 0;
  transition: opacity .15s var(--ease-out), visibility 0s linear .15s;
}
.menu.is-open { visibility: visible; opacity: 1; transition: opacity .24s var(--ease-drawer), visibility 0s; }
.menu li + li { margin-top: 8px; }
.menu a { display: block; padding: 8px 0; }
.menu .t-h2 { opacity: 0; transition: opacity .15s var(--ease-out); }
.menu.is-open .t-h2 { opacity: 1; transition: opacity .24s var(--ease-drawer) calc(var(--i) * 40ms + 40ms), transform .24s var(--ease-drawer) calc(var(--i) * 40ms + 40ms); }
.menu .btn { margin-top: var(--s-4); align-self: flex-start; }

/* Hero */
.hero { position: relative; overflow: clip; padding: 104px 0 var(--s-7); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 72% 0%, var(--gold-wash), transparent 70%);
}
.hero__grid { position: relative; display: grid; gap: var(--s-6); align-items: center; }
.hero__copy > * + * { margin-top: var(--s-3); }
.hero__copy .t-lead { color: var(--fg-2); max-width: 54ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; padding-top: var(--s-1); }
.facts { display: flex; flex-wrap: wrap; row-gap: 16px; padding-top: var(--s-3); }
.facts li {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .02em; line-height: 1.3;
  color: var(--fg-2); padding-inline: 14px; border-left: 1px solid var(--line-dark-strong); font-variant-numeric: tabular-nums;
}
.facts li:first-child { padding-left: 0; border-left: 0; }
.facts b { font-weight: 500; color: var(--ivory-200); font-size: .875rem; }
.hero__visual { overflow: clip; max-width: 360px; margin-inline: auto; width: 100%; }
.stack-art { width: 130%; max-width: none; height: auto; overflow: visible; }
.plate polygon { fill: rgba(236, 230, 218, .03); stroke: rgba(236, 230, 218, .18); stroke-width: 1; }
.plate--base polygon { fill: rgba(201, 169, 110, .08); stroke: var(--gold-400); }
.plate__label { display: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; fill: var(--stone-400); }
.plate__label.is-gold { fill: var(--gold-300); }
.plate__guide { display: none; stroke: rgba(236, 230, 218, .18); stroke-width: 1; }
.thread { stroke: var(--gold-400); stroke-width: 1; fill: none; stroke-dasharray: 424; stroke-dashoffset: 0; }

/* Plataformas */
.platforms { padding-block: var(--s-5); border-top: 1px solid var(--line); }
.platforms .t-eyebrow { margin-bottom: var(--s-4); }
.platforms .t-small { margin-top: var(--s-4); }
.marquee { padding-block: 28px; margin-block: -28px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee__set { display: flex; flex: none; align-items: center; }
.marquee__set li { display: flex; align-items: center; gap: 14px; --p: clamp(28px, 5vw, 64px); position: relative; padding-inline: var(--p); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ivory-200); white-space: nowrap; }
.marquee__set img { position: relative; width: 32px; height: 32px; flex: none; }
.marquee__set li::before { content: ""; position: absolute; left: calc(var(--p) - 20px); top: 50%; width: 76px; height: 76px; margin-top: -38px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--c) 44%, transparent), transparent 70%); }
.marquee__set li span { position: relative; transition: color .16s ease; }
.marquee__set li:nth-child(1), .t-gpt { --c: var(--t-gpt); }
.marquee__set li:nth-child(2), .t-cop { --c: var(--t-cop); }
.marquee__set li:nth-child(3), .t-gem { --c: var(--t-gem); }
.marquee__set li:nth-child(4), .t-cla { --c: var(--t-cla); }
@media (hover: hover) and (pointer: fine) { .marquee__set li:hover span { color: var(--c); } }
/* Luces ambientales: un resplandor estático por sección oscura, un solo color */
#top, #resultados, #metodo, #contacto { isolation: isolate; overflow: clip; }
#top::after, #resultados::before, #metodo::before, #contacto::before { content: ""; position: absolute; z-index: -1; width: 680px; height: 680px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--g) 24%, transparent), transparent); }
#top::after { --g: var(--t-cla); top: -200px; right: -200px; }
#resultados::before { --g: var(--t-gpt); top: -180px; left: -220px; }
#metodo::before { --g: var(--t-gem); bottom: -200px; right: -220px; }
#contacto::before { --g: var(--t-cla); bottom: -200px; left: -220px; }
@keyframes marquee { to { transform: translateX(-33.3333%); } }

/* Editorial, listas, filas */
.split { display: grid; gap: var(--s-5); }
.split > .sec__head { margin-bottom: 0; }

.callout { margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-md); background: var(--bezel-bg); border: 1px solid var(--line); font-size: 1.0625rem; }
.callout strong { font-weight: 600; }

/* Íconos */
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: translate .2s var(--ease-out); }
.ico--32 { width: 32px; height: 32px; }
.ico--40 { width: 40px; height: 40px; }
.sprite * { vector-effect: non-scaling-stroke; }
.theme-dark .ico { color: var(--gold-400); }
.theme-light .ico { color: var(--gold-700); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: .875rem; line-height: 1.4; color: var(--fg); }
.chips--dark li { display: inline-flex; align-items: center; gap: 8px; border-color: var(--line-dark-strong); color: var(--ivory-200); }
.chips .ico { width: 20px; height: 20px; }

/* Qué es: escena */
.qx__top { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
.qx__top .sec__head { margin: 0; }
.qx__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border: 1px solid var(--line-dark); border-radius: 18px; background: rgba(236, 230, 218, .03); }
.qx__tab { position: relative; z-index: 1; min-height: 56px; padding: 8px 10px; border-radius: 14px; font-size: .8125rem; font-weight: 500; line-height: 1.25; color: var(--stone-400); transition: color .16s ease; }
.qx__tab .num { display: block; color: inherit; }
.qx__tab[aria-selected="true"] { color: var(--ivory-200); }
.qx__tab[aria-selected="true"] .num { color: var(--gold-400); }
.qx__ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 14px; background: var(--ink-800); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--line-dark-strong); transition: transform .24s var(--ease-in-out); }
.qx .qx__steps { padding: 0; border: 0; border-bottom: 1px solid var(--line-dark); border-radius: 0; background: none; }
.qx .qx__tab { border-radius: 0; padding-bottom: 14px; }
.qx .qx__ind { top: auto; bottom: -1px; left: 0; width: 100%; height: 2px; border-radius: 0; background: var(--gold-400); box-shadow: none; transition: none; transform: scaleX(var(--p)); transform-origin: 0 50%; }
/* Escena: todo se interpola con --p y --t1..--t3 (el JS las escribe en .qx__pin; sin JS quedan en el estado final) */
.qx__pin { --p: 1; --t1: 1; --t2: 1; --t3: 1; --f: calc(1 - .25 * var(--t1) - .75 * var(--t2)); }
.qx__stage { position: relative; isolation: isolate; max-width: 560px; margin-inline: auto; }
.qx__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, transparent 20%, var(--bg) 100%), radial-gradient(rgba(236, 230, 218, .11) .8px, transparent 1.3px) 0 0 / 22px 22px; }
.qx__svg { width: 100%; height: auto; overflow: visible; }
.qx__svg--w { display: none; }
.qx__outer circle, .qx__ringb, .qx__tri, .qx__line, .qx__ringa, .qx__inner { fill: none; }
.qx__outer circle { stroke: var(--line-dark); }
.qx__outer line { stroke: var(--gold-400); stroke-opacity: .6; }
.qx__outer text { font: 500 14px var(--font-mono); fill: var(--stone-400); text-anchor: middle; }
.qx__ringb { stroke: var(--line-dark-strong); stroke-dasharray: 2 6; stroke-opacity: var(--t1); transform: rotate(calc(30deg * var(--t2))); }
.qx__tri { stroke: var(--line-dark-strong); stroke-dasharray: 1 2; stroke-dashoffset: calc(1 - clamp(0, (var(--t1) - .35) / .65, 1)); }
.qx__spoke { stroke: var(--gold-400); stroke-opacity: .6; stroke-dasharray: 1 2; stroke-dashoffset: calc(1 - clamp(0, (var(--t1) - .3 - var(--k) * .08) / .45, 1)); }
.qx__line { stroke: var(--c); stroke-width: 1.25; stroke-opacity: .75; stroke-dasharray: 1 2; stroke-dashoffset: calc(1 - clamp(0, var(--t2) * 1.4 - var(--k) * .12, 1)); transition: stroke-opacity .2s ease; }
.qx__line--gpt { --c: var(--t-gpt); } .qx__line--cop { --c: var(--t-cop); } .qx__line--gem { --c: var(--t-gem); } .qx__line--cla { --c: var(--t-cla); }
.qx__ringa { stroke: var(--gold-400); stroke-opacity: calc(.35 * var(--t3)); transform: scale(calc(.96 + .04 * var(--t3))); }
.qx__ports { opacity: var(--t3); }
.qx__port { fill: var(--c); }
.qx__glow { fill-opacity: calc(.45 * var(--t1) + .55 * var(--t2)); }
.qx__core { opacity: calc(.3 + .5 * var(--t1) + .2 * var(--t2)); transform: scale(calc(.86 + .08 * var(--t1) + .06 * var(--t2))); }
.qx__disc, .qx__inner { stroke: var(--gold-400); }
.qx__coret { font: 500 12px var(--font-mono); letter-spacing: .08em; fill: var(--gold-300); text-anchor: middle; }
.qx__ctx { --e: clamp(0, (var(--t1) - var(--k) * .08) / .4, 1); opacity: var(--e); transform: translate(calc(var(--ox) * (1 - var(--e)) * 1px), calc(var(--oy) * (1 - var(--e)) * 1px)); }
.qx__cn { fill: var(--ink-950); stroke: var(--gold-400); stroke-width: 1.25; }
.qx__cd { fill: var(--gold-400); }
.qx__lbl { font: 500 15px var(--font-sans); fill: var(--ivory-200); text-anchor: middle; }
.qx__svg--t .qx__lbl { font-size: 14px; }
.qx__dot { fill: var(--ivory-200); opacity: .14; } .qx__corner { fill: none; stroke: var(--line-dark-strong); }
.qx__s1 { stop-color: var(--gold-300); stop-opacity: .24; } .qx__s2 { stop-color: var(--gold-400); stop-opacity: .06; }
.qx__s3 { stop-color: var(--gold-400); stop-opacity: .28; } .qx__s4 { stop-color: var(--gold-400); stop-opacity: 0; }
.qx__outer { opacity: var(--t3); transform: scale(calc(.98 + .02 * var(--t3))); }
.qx__outer, .qx__ringb, .qx__ringa, .qx__core { transform-box: fill-box; transform-origin: center; }
.qx__tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px 0 0; }
.qx__tool { position: relative; margin: 0 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 4px; font-size: 13px; font-weight: 500; color: var(--ivory-200); opacity: calc(1 - .45 * var(--t1) + .45 * var(--t2)); transform: translate3d(0, calc(var(--my) * var(--f)), 0) rotate(calc(var(--r) * var(--f))); }
.qx__tool--gpt { --my: -6px; --m: url(../assets/logos/chatgpt.svg); } .qx__tool--cop { --my: 8px; --m: url(../assets/logos/copilot.svg); } .qx__tool--gem { --my: -4px; --m: url(../assets/logos/gemini.svg); } .qx__tool--cla { --my: 6px; --m: url(../assets/logos/claude.svg); }
.qx__logo { width: 22px; height: 22px; background: var(--c); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.qx__by { display: none; }
.qx__stack { display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; margin: var(--s-3) auto 0; }
.qx__stack li { padding: 6px 10px; border: 1px solid var(--line-dark); border-radius: var(--r-pill); font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--stone-400); }
.qx__stack .num { color: var(--gold-400); }
@media (hover: hover) and (pointer: fine) {
  .qx:has(.qx__tool:hover) .qx__line { stroke-opacity: .2; }
  .qx:has(.qx__tool--gpt:hover) .qx__line--gpt, .qx:has(.qx__tool--cop:hover) .qx__line--cop, .qx:has(.qx__tool--gem:hover) .qx__line--gem, .qx:has(.qx__tool--cla:hover) .qx__line--cla { stroke-opacity: 1; }
  .qx__tab:hover { color: var(--ivory-200); }
}
@media (min-width: 768px) {
  .qx__tab { min-height: 44px; padding: 8px 16px; white-space: nowrap; }
  .qx__tab .num { display: inline; }
}
@media (min-width: 1024px) {
  .qx__top { grid-template-columns: 1fr auto; align-items: end; }
  .qx__steps { grid-template-columns: repeat(3, 1fr); width: max-content; }
  .qx__stage { max-width: 1100px; aspect-ratio: 1100 / 600; container-type: inline-size; }
  .qx__svg--t { display: none; }
  .qx__svg--w { display: block; position: absolute; inset: 0; }
  .qx__tools { display: block; padding: 0; }
  .qx__tool { --u: calc(100cqw / 1100); position: absolute; margin: 0; left: calc((var(--x) - 96) * var(--u)); top: calc((var(--y) - 34) * var(--u)); width: calc(192 * var(--u)); height: calc(68 * var(--u)); min-height: 0; padding: 0; display: grid; grid-template-columns: 22px auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 0; align-content: center; align-items: center; justify-items: start; font-size: 15px; transform: translate3d(calc(var(--dx) * var(--u) * var(--f)), calc(var(--dy) * var(--u) * var(--f)), 0) rotate(calc(var(--r) * var(--f))); }
  .qx__tool--gpt, .qx__tool--gem { justify-content: end; }
  .qx__logo { grid-row: 1 / 3; }
  .qx__by { display: block; font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--stone-400); }
  .qx__stack { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; max-width: 1100px; border-top: 1px solid var(--line-dark); }
  .qx__stack li { padding: 16px 8px 0; border: 0; border-radius: 0; text-align: center; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .qx__stack li { font-size: 11px; letter-spacing: .04em; white-space: nowrap; padding-inline: 2px; } }
/* Qué es: la escena avanza con el scroll (pin sticky; sin JS o con reduced-motion queda el flujo normal) */
.qx__hint { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.is-fallback) .qx__run { height: 260vh; height: 260svh; }
  html.js:not(.is-fallback) .qx__pin { position: sticky; top: 80px; height: calc(100vh - 80px); height: calc(100svh - 80px); display: flex; flex-direction: column; justify-content: center; padding: 8px 4px; margin-inline: -4px; contain: layout paint; }
  html.js:not(.is-fallback) .qx__pin .qx__top { gap: var(--s-2); margin-bottom: var(--s-2); }
  html.js:not(.is-fallback) .qx__stage { width: clamp(300px, calc((100vh - 371px) * .857), 100%); }
  html.js:not(.is-fallback) .qx__tool { will-change: transform, opacity; }
  html.js:not(.is-fallback) .qx__hint { display: flex; align-items: center; gap: 8px; position: absolute; left: 0; right: 0; max-width: none; bottom: 14px; z-index: 1; justify-content: center; font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--stone-400); white-space: nowrap; pointer-events: none; opacity: clamp(0, 1 - var(--p) * 30, 1); }
  .qx__hint svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  @media (min-width: 1024px) {
    html.js:not(.is-fallback) .qx__run { height: 300vh; height: 300svh; }
    html.js:not(.is-fallback) .qx { --qw: clamp(640px, calc((100vh - 290px) * 1.8333), 100%); }
    html.js:not(.is-fallback) .qx__stage, html.js:not(.is-fallback) .qx__stack { width: var(--qw); }
  }
}

/* Para quién */
.who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.who__card { display: flex; flex-direction: column; gap: var(--s-3); padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 1.125rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }

/* Resultados */

.cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.cell { padding: 24px 16px; border-top: 1px solid var(--line); }
.cell:nth-child(even) { border-left: 1px solid var(--line); }
.cell__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s-3); }
.cell .num { font-size: .8125rem; letter-spacing: .06em; }
.cell .t-h3 { font-size: 1.0625rem; }
.cell .t-small { margin-top: 8px; }

/* Método */
.method { display: grid; gap: var(--s-4); }
.method__list { position: relative; padding-left: 0; }
.method__list::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.method__indicator {
  position: absolute; left: 0; top: 0; width: 2px; height: 56px; background: var(--gold-400);
  transform: translateY(calc(var(--active, 0) * 56px)); transition: transform .24s var(--ease-in-out);
}
.method[data-instant] .method__indicator { transition: none; }
.tab {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 4px;
  width: 100%; height: 56px; padding: 0 0 0 24px; text-align: left;
  color: var(--fg-2); transition: color .16s ease;
}
.tab .num { font-size: .75rem; color: var(--fg-2); transition: color .16s ease; }
.tab__name { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
.tab__tag { font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .1em; padding-right: 4px; color: var(--stone-400); }
.tab[aria-selected="true"], .tab[aria-selected="true"] .num { color: var(--ivory-200); }
.tab[aria-selected="true"] .num { color: var(--gold-400); }
.panel { display: grid; align-items: center; }
.mini-stack { width: 100%; max-width: 240px; height: auto; margin: var(--s-3) auto 0; overflow: visible; }
.ms__p { --w: clamp(0, min(var(--s, .5) - var(--k) + .5, var(--k) + 1.5 - var(--s, .5)), 1); cursor: pointer; transform: translateY(calc(var(--w) * -10px)); opacity: calc(.45 + .55 * clamp(0, var(--s, .5) - var(--k) + .5, 1)); transition: transform .24s var(--ease-in-out), opacity .24s var(--ease-in-out); }
.ms__plate, .ms__gold { fill: rgba(236, 230, 218, .03); stroke: var(--line-dark-strong); stroke-width: 1; }
.ms__gold { fill: var(--gold-wash); stroke: var(--gold-400); opacity: var(--w); }
.ms__t { font: 500 18px var(--font-mono); fill: var(--gold-400); opacity: calc(.35 + .65 * var(--w)); }
.ms__thread { stroke: var(--gold-400); stroke-width: 1; opacity: .5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - (32 + 36 * var(--s, .5)) / 336); }
.method[data-instant] .ms__p { transition: none; }
.panel__body .ico { margin-bottom: var(--s-3); }
.panel__body { padding: var(--s-3); min-height: 240px; transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
.panel__body.is-out { opacity: 0; transition: opacity .1s var(--ease-out); }
.panel__body.is-pre { opacity: 0; transform: translateY(6px); transition: none; }
.panel__hd { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
.panel__n { grid-row: 1 / 3; font-size: 2.75rem; line-height: 1; }
.panel__name { align-self: end; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ivory-200); }
.panel__tag { align-self: start; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; font-weight: 500; color: var(--gold-300); }
.panel__body h3 { margin-top: 12px; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.1; }
.panel__body p { margin-top: var(--s-2); color: var(--fg-2); font-size: 1.125rem; }
.process { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-5); }
.process li { position: relative; display: inline-flex; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: .75rem; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--fg-2); }
.process li span { color: var(--gold-400); }
/* Metodología: las siete capas avanzan con el scroll (pin sticky; sin JS, con poca altura o con reduced-motion queda el selector manual) */
.mt__hint, .lx__hint { display: none; }
@media (prefers-reduced-motion: no-preference) and (min-height: 540px) {
  html.js:not(.is-fallback) .mt__run { height: 480vh; height: 480svh; }
  html.js:not(.is-fallback) :is(.mt__pin, .lx__pin) { position: sticky; top: 80px; height: calc(100vh - 80px); height: calc(100svh - 80px); display: flex; flex-direction: column; justify-content: center; padding: 8px 4px; margin-inline: -4px; contain: layout paint; }
  html.js:not(.is-fallback) #metodo .sec__head { margin-bottom: var(--s-3); }
  html.js:not(.is-fallback) .process { margin-top: var(--s-2); }
  html.js:not(.is-fallback) .ms__p, html.js:not(.is-fallback) .ms__thread { transition: none; }
  html.js:not(.is-fallback) :is(.mt__hint, .lx__hint) { display: flex; align-items: center; justify-content: center; gap: 8px; position: absolute; left: 0; right: 0; max-width: none; bottom: 6px; font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--stone-400); pointer-events: none; opacity: clamp(0, 1 - var(--p, 0) * 30, 1); }
  :is(.mt__hint, .lx__hint) svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  @media (max-width: 1023px) {
    html.js:not(.is-fallback) .method__list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
    html.js:not(.is-fallback) .method__list::before { inset: auto 0 0; width: auto; height: 1px; }
    html.js:not(.is-fallback) .method__indicator { top: auto; bottom: 0; width: 100%; height: 2px; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: none; }
    html.js:not(.is-fallback) .tab { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; padding: 0; }
    html.js:not(.is-fallback) .tab .num { font-size: .875rem; }
    html.js:not(.is-fallback) .tab__name, html.js:not(.is-fallback) .tab__tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    html.js:not(.is-fallback) .mini-stack { --so: 300px; width: auto; max-width: 100%; height: clamp(150px, calc(100svh - 80px - var(--so)), 360px); }
  }
  @media (max-width: 767px) {
    html.js:not(.is-fallback) .mini-stack { --so: 380px; margin-top: 8px; }
    html.js:not(.is-fallback) .panel__body .ico { display: none; }
    html.js:not(.is-fallback) .panel__body { padding: 8px 16px 16px; min-height: 176px; }
    html.js:not(.is-fallback) .panel__body h3 { font-size: 1.5rem; }
    html.js:not(.is-fallback) .panel__body p { margin-top: 8px; font-size: 1rem; }
  }
  @media (min-width: 1024px) {
    html.js:not(.is-fallback) .method { align-items: center; }
    html.js:not(.is-fallback) .mini-stack { max-width: 290px; }
    html.js:not(.is-fallback) .panel__body { min-height: 400px; }
  }
}

/* Bezel */
.bezel { padding: 6px; border-radius: var(--r-lg); background: var(--bezel-bg); border: 1px solid var(--line); }
.bezel__core { border-radius: 18px; background: var(--bezel-core); box-shadow: var(--bezel-shadow); }

/* Ruta 12 semanas */
.bezel--final { border-color: var(--gold-700); }
.rm { --m: 1; }
.rm[data-m="2"] { --m: 2; }
.rm[data-m="3"] { --m: 3; }
.rm__meta { margin-bottom: var(--s-3); max-width: 62ch; }
.rm__steps { width: 100%; max-width: 560px; background: var(--ivory-100); border-color: var(--line-light); }
.rm__steps .qx__tab { color: var(--stone-600); }
.rm__steps .qx__tab[aria-selected="true"] { color: var(--ink-text); }
.rm__steps .qx__tab .num, .rm__steps .qx__tab[aria-selected="true"] .num { color: var(--gold-700); }
.rm__steps .qx__ind { background: var(--bezel-core); box-shadow: var(--bezel-shadow), 0 0 0 1px var(--line-light); }
.rm[data-m="2"] .qx__ind { transform: translateX(100%); }
.rm[data-m="3"] .qx__ind { transform: translateX(200%); }
.rm[data-instant] .qx__ind { transition: none; }
.rm__rail { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: var(--s-5); }
.rm__rail::before, .rm__rail::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line-light-strong); }
.rm__rail::after { background: var(--gold-700); transform-origin: left; transform: scaleX(calc(var(--m) / 3)); transition: transform .4s var(--ease-in-out); }
.rm[data-instant] .rm__rail::after { transition: none; }
.rm__rail li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--gold-700); cursor: pointer; transition: opacity .2s var(--ease-out), color .2s var(--ease-out); }
.rm__rail li:nth-child(5), .rm__rail li:nth-child(9) { margin-left: 8px; }
html.js .rm__rail li:not(.is-on) { color: var(--stone-600); opacity: .4; }
.rm__rail i { --d: 10px; display: block; width: var(--d); height: var(--d); margin-block: calc((14px - var(--d)) / 2); border-radius: 50%; background: currentColor; transition: transform .2s var(--ease-out); }
.rm__rail li[data-s="2"] i { --d: 14px; }
.rm__rail li[data-s="a"] i { background: var(--bg); box-shadow: inset 0 0 0 1px currentColor; }
.rm__rail span { font: 500 11px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.rm__legend { margin-top: var(--s-3); }
.rm__legend i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--gold-700); vertical-align: -1px; }
.rm__legend span { display: inline-block; margin-right: 20px; white-space: nowrap; }
.rm__legend i[data-s="2"] { width: 14px; height: 14px; vertical-align: -3px; }
.rm__legend i[data-s="a"] { background: transparent; border: 1px solid var(--gold-700); }
.rm__panel { margin-top: var(--s-5); }
.rm__tag { margin-bottom: var(--s-3); }
.rm__cards { position: relative; display: grid; gap: var(--s-2); }
.rm__cards::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 1px; background: var(--line-light-strong); }
.rm__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-left: 40px; padding: 20px; border: 1px solid var(--line-light); border-radius: var(--r-md); background: var(--bezel-core); transition: opacity .3s var(--ease-out) calc(var(--k) * 50ms), transform .3s var(--ease-out) calc(var(--k) * 50ms), border-color .16s ease; }
.rm__card::before { content: ""; position: absolute; left: -25px; top: 26px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gold-700); background: var(--bg); }
.rm__wk { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.rm__wk .num { font-size: .8125rem; letter-spacing: .06em; }
.rm__s { padding: 5px 8px; border: 1px solid var(--line-light-strong); border-radius: var(--r-pill); font: 500 11px/1 var(--font-mono); color: var(--stone-600); white-space: nowrap; }
.rm__s[data-s="1"], .rm__s[data-s="2"] { color: var(--gold-700); }
.rm__t { font-size: 1.125rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.rm__res { margin-top: var(--s-2); }
.rm__res .bezel__core { padding: var(--s-2) var(--s-3); }
.rm__res .bezel__core p:last-child { margin-top: 4px; font-size: .9375rem; line-height: 1.45; }
@media (prefers-reduced-motion: no-preference) {
  .rm__rail i { transform: scale(.8); }
  .rm__rail li.is-on i { transform: none; }
  .rm__panel.is-enter .rm__card { opacity: 0; transform: translateY(8px); }
  html.js:not(.is-fallback) .rm__rail.is-in::after { animation: rm-in .9s var(--ease-in-out) backwards; }
}
@keyframes rm-in { from { transform: scaleX(0); } }
@media (hover: hover) and (pointer: fine) {
  .rm__card:hover { border-color: var(--line-light-strong); }
  .rm__card:hover .ico { translate: 0 -2px; }
}
@media (min-width: 768px) {
  .rm__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .rm__cards::before, .rm__card::before { display: none; }
  .rm__card { margin-left: 0; }
}
@media (min-width: 1024px) { .rm__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Formato */
.rings figcaption { margin-top: 12px; }
/* Formato: aprender. Escena guiada por --p (riel) y --e2..--e4 (fases 2 a 4): con scroll las escribe main.js; en modo manual las da data-ph y se animan */
@property --e2 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --e3 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --e4 { syntax: "<number>"; inherits: true; initial-value: 1; }
.lx{--ls:var(--line-dark-strong);--g4:var(--gold-400);--g3:var(--gold-300);--eo:var(--ease-out);--ed:var(--ease-drawer);position:relative;isolation:isolate;overflow:hidden;margin-top:var(--s-6);padding:var(--s-3) 20px;border:1px solid var(--line-dark);border-radius:var(--r-lg);background:radial-gradient(520px 320px at 70% 0,var(--gold-wash),transparent 70%),var(--ink-950);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 24px 48px -24px rgba(11,13,16,.45)}
.lx__pin{--p:.875;--e2:1;--e3:1;--e4:1;--t:var(--e3);transition:--e2 .6s var(--eo),--e3 .6s var(--eo),--e4 .9s var(--eo)}
.lx[data-ph="1"] .lx__pin{--p:.125;--e2:0;--e3:0;--e4:0}
.lx[data-ph="2"] .lx__pin{--p:.375;--e3:0;--e4:0}
.lx[data-ph="3"] .lx__pin{--p:.625;--e4:0}
.lx__head{display:grid;gap:var(--s-3);margin-bottom:var(--s-4)}
.lx__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.lx .qx__tab{min-height:48px}
.lx__ind{bottom:auto;width:calc((100% - 8px) / 2);height:calc((100% - 8px) / 2)}
.lx[data-ph="2"] .lx__ind{transform:translateX(100%)}
.lx[data-ph="3"] .lx__ind{transform:translateY(100%)}
.lx[data-ph="4"] .lx__ind{transform:translate(100%,100%)}
.lx__stage{display:grid;gap:var(--s-4)}
.lx__svg{display:block;width:calc(100% + 16px);height:auto;margin-inline:-8px}
.lx__svg :is(path,rect,circle){vector-effect:non-scaling-stroke}
.lx__ri,.lx__hot,.lx__ok,.lx__ann,.lx__track,.lx__link,.lx__fb,.lx__fbh,.lx__ring2,.lx__gl{fill:none}
.lx__hot,.lx__ri--new,.lx__ann,.lx__link,.lx__fb,.lx__fbh,.lx__ring,.lx__ring2{stroke:var(--g4)}
.lx__ok,.lx__gl{stroke:var(--g3)}
.lx__ok,.lx__ann,.lx__link,.lx__fb{stroke-dasharray:1 2}
.lx__ok,.lx__fbh,.lx__gl{stroke-linecap:round;stroke-linejoin:round}
.lx__ann,.lx__fb,.lx__fbh,.lx__ring{stroke-width:1.25}
.lx__ok,.lx__link,.lx__gl{stroke-width:1.5}
.lx__win{fill:var(--ink-900);stroke:var(--ls)}
.lx__hd{stroke:var(--line-dark)}
.lx__dt{fill:var(--ls)}
.lx__ri,.lx__track{stroke:var(--ls)}
.lx__pill{fill:var(--gold-wash);stroke:var(--g4);stroke-opacity:.5}
.lx__ri--new{stroke-dasharray:3 3}
.lx__trk{fill:var(--line-dark)}
.lx__bar,.lx__nb{fill:var(--g4);transform-box:fill-box;transform-origin:left center}
.lx__track,.lx__ring2{stroke-dasharray:2 4}
.lx__ring{fill:var(--ink-950)}
.lx__ring2{opacity:.3}
.lx__cg{fill:var(--g3);opacity:calc(1 - var(--t))}
.lx__ci{fill:var(--ivory-200);opacity:var(--t)}
.lx__cg,.lx__ci{stroke:var(--ink-950)}
.lx__v0,.lx__v1{stop-color:var(--ink-950)}
.lx__v0{stop-opacity:0}
.lx__v1{stop-opacity:1}
.lx__halo,.lx__new{transform-box:fill-box;transform-origin:center}
.lx__ann{stroke-dashoffset:var(--e2);opacity:calc(.7 - .7 * var(--e2))}
.lx__hot{opacity:calc(1 - var(--e2))}
.lx__link--a{stroke-dashoffset:calc(1 - clamp(0, var(--e2) - var(--e3), 1))}
.lx__link--t{stroke-dashoffset:calc(1 - var(--e3))}
.lx__bar{transform:scaleX(clamp(0, var(--e2) * 1.6 - var(--k) * .2, 1))}
.lx__new{opacity:var(--e3);transform:translateY(calc(8px - 8px * var(--e3)))}
.lx__nb{transform:scaleX(clamp(0, var(--e3) * 2 - 1, 1))}
.lx__ok{stroke-dashoffset:calc(1 - clamp(0, var(--e4) * 2 - var(--k) * .25, 1))}
.lx__fb{stroke-dashoffset:calc(1 - clamp(0, var(--e4) * 1.8 - .8, 1))}
.lx__fbh{opacity:clamp(0, var(--e4) * 8 - 7, 1)}
.lx__act--a{opacity:calc(1 - .5 * var(--e3) + .2 * var(--e4))}
.lx__act--t{opacity:calc(.5 + .5 * var(--t))}
.lx__halo--a{opacity:calc(1 - var(--t));transform:scale(calc(1 - .1 * var(--t)))}
.lx__halo--t{opacity:var(--t);transform:scale(calc(.9 + .1 * var(--t)))}
.lx__cur{transform:translate(calc(150px + 262px * var(--e2) - 64px * var(--e3) + 102px * var(--e4)),calc(214px + 84px * var(--e3) - 156px * var(--e4)))}
.lx__n{display:flex;align-items:baseline;gap:12px;color:var(--g3)}
.lx__nm{display:none;font:500 .75rem/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.lx__d{min-height:2.6em;margin-top:var(--s-2);font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.3;letter-spacing:-.01em;color:var(--ivory-200)}
.lx__side > *{transition:opacity .2s var(--eo),transform .2s var(--eo)}
.lx__side.is-sw > *{opacity:0;transform:translateY(6px);transition:none}
.lx__hand{margin-top:var(--s-4)}
.lx__rail{position:relative;height:4px;border-radius:2px;background:var(--ls)}
.lx__tick{position:absolute;top:-3px;width:1px;height:10px;background:var(--ls)}
.lx__fill,.lx__kn{position:absolute;inset:0;transition:transform 700ms var(--ed) 100ms}
.lx__fill{border-radius:inherit;background:var(--g4);transform-origin:left;transform:scaleX(var(--p))}
.lx__kn{transform:translateX(calc(var(--p) * 100%))}
.lx__knob{position:absolute;left:-8px;top:-6px;width:16px;height:16px;border-radius:50%;background:var(--g3);box-shadow:0 0 0 4px color-mix(in srgb,var(--g4) 20%,transparent)}
.lx__ends{display:flex;justify-content:space-between;margin-top:12px;max-width:none}
.lx:not([data-ph="3"],[data-ph="4"]) .lx__ends :first-child,.lx:not([data-ph="1"],[data-ph="2"]) .lx__ends :last-child{color:var(--g3)}
.lx__inc{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line-dark)}
.lx__inc .t-eyebrow{margin-bottom:var(--s-3)}
.lx__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lx__card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-3);min-height:128px;padding:16px;font-size:.9375rem;border:1px solid var(--line-dark);border-radius:var(--r-md);background:linear-gradient(180deg,rgba(236,230,218,.06),rgba(236,230,218,.015)),var(--ink-900);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 32px -16px rgba(11,13,16,.8);font-weight:500;line-height:1.3;color:var(--ivory-200)}
.lx__card::before{content:"";position:absolute;left:16px;right:16px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--g4),transparent);opacity:.45}
.lx__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid color-mix(in srgb,var(--g4) 35%,transparent);background:var(--gold-wash)}
@media (hover: hover) and (pointer: fine) {
  .lx__card:hover::before{opacity:1}
  .lx__card:hover .ico{translate:0 -2px}
}
@media (min-width: 768px) {
  .lx{padding:var(--s-5)}
  .lx__steps,.lx__cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lx .qx__tab{min-height:44px;padding:8px 10px;white-space:normal}
  .lx__ind{width:calc((100% - 8px) / 4);height:calc(100% - 8px)}
  .lx[data-ph="2"] .lx__ind{transform:translateX(100%)}
  .lx[data-ph="3"] .lx__ind{transform:translateX(200%)}
  .lx[data-ph="4"] .lx__ind{transform:translateX(300%)}
  .lx__svg{width:100%;margin:0}
}
@media (min-width: 1024px) {
  .lx{padding:var(--s-5) var(--s-5) var(--s-4)}
  .lx__head{grid-template-columns:1fr auto;align-items:end}
  .lx__steps{width:max-content}
  .lx .qx__tab{padding:8px 16px;white-space:nowrap}
  .lx__stage{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s-5);align-items:center}
}
/* Formato dirigido por scroll: las cuatro fases avanzan solas (pin sticky; sin JS, con poca altura o con reduced-motion queda el selector manual) */
@media (prefers-reduced-motion: no-preference) and (min-height: 540px) {
  html.js:not(.is-fallback) .lx { overflow: visible; }
  html.js:not(.is-fallback) .lx__run { height: 420vh; height: 420svh; }
  html.js:not(.is-fallback) .lx__pin { gap: var(--s-4); padding-inline: 12px; margin-inline: -12px; transition: none; }
  html.js:not(.is-fallback) .lx__inc { margin-top: var(--s-3); }
  html.js:not(.is-fallback) .lx__head { margin: 0; }
  html.js:not(.is-fallback) .lx__svg { width: 100%; margin: 0; }
  @media (max-width: 767px) {
    html.js:not(.is-fallback) .lx__pin { gap: var(--s-3); }
    html.js:not(.is-fallback) .lx__head { gap: var(--s-2); }
    html.js:not(.is-fallback) .lx__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; border: 0; border-bottom: 1px solid var(--line-dark); border-radius: 0; background: none; }
    html.js:not(.is-fallback) .lx .qx__tab { border-radius: 0; min-height: 48px; padding: 8px 0; font-size: .875rem; text-align: center; }
    html.js:not(.is-fallback) .lx .qx__tab span:not(.num) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    html.js:not(.is-fallback) .lx__ind { top: auto; bottom: -1px; left: 0; width: 100%; height: 2px; border-radius: 0; background: var(--gold-400); box-shadow: none; transition: none; transform: scaleX(var(--p)); transform-origin: 0 50%; }
    html.js:not(.is-fallback) .lx__stage { gap: var(--s-2); }
    html.js:not(.is-fallback) .lx__n { font-size: 2rem; }
    html.js:not(.is-fallback) .lx__nm { display: inline; }
    html.js:not(.is-fallback) .lx__d { margin-top: 6px; }
    html.js:not(.is-fallback) .lx__hand { margin-top: var(--s-3); }
  }
}
.formato__note { margin-top: var(--s-5); }

/* Entregables */
.deliv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.deliv li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 16px; border-top: 1px solid var(--line); }
.deliv li:nth-child(even) { border-left: 1px solid var(--line); }
.deliv .num { font-size: .75rem; letter-spacing: .06em; }
.deliv__t { font-weight: 500; line-height: 1.35; }

/* Escalar */
#escalar .split { align-items: center; }
.rings { max-width: 300px; margin-inline: auto; width: 100%; }
.rings svg { width: 100%; height: auto; }
.rings circle { fill: none; stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.rings__3 { stroke: var(--line-light); }
.rings__2 { stroke: var(--line-light-strong); }
.rings__1 { fill: var(--gold-wash); stroke: var(--gold-700); }
.rings text { font-family: var(--font-mono); font-size: 14px; letter-spacing: .12em; text-anchor: middle; fill: var(--stone-600); }
.rings text.is-gold { fill: var(--gold-700); }
.rings figcaption { text-align: center; }

/* Nosotros */
.nos { display: grid; gap: var(--s-5); }
.nos__ph { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: radial-gradient(70% 55% at 50% 42%, rgba(201, 169, 110, .16), transparent 70%), var(--ink-950); }
.nos__mono { position: absolute; inset: 0; display: grid; place-items: center; font: italic 400 clamp(4.5rem, 3.4rem + 4vw, 7rem)/1 var(--font-serif); letter-spacing: -0.02em; color: var(--ivory-200); }
.nos__mono::before { content: ""; position: absolute; left: 50%; top: 50%; width: 56%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; border: 1px solid rgba(201, 169, 110, .6); }
.nos__foto { position: absolute; inset: 0; z-index: 1; background: url(../assets/img/alexander.webp) 50% 22% / cover; filter: grayscale(.35) contrast(1.05); }
.nos__ph::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 55%, rgba(11, 13, 16, .5)); pointer-events: none; }
.nos__ph::before { content: ""; position: absolute; inset: 12px; z-index: 3; border: 1px solid rgba(201, 169, 110, .3); border-radius: calc(var(--r-lg) - 12px); pointer-events: none; }
.nos__id > * + * { margin-top: var(--s-3); }
.nos__name { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.035em; }
.nos__name .serif { display: block; font-size: 1.1em; }
.nos__role { display: grid; gap: 6px; font: 500 .75rem/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.nos__role > :first-child { color: var(--accent); }
.nos__loc { display: inline-flex; align-items: center; gap: 8px; } .nos__loc .ico { width: 16px; height: 16px; }
.nos__figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.nos__figs li { display: grid; gap: 8px; }
.nos__figs .t-figure { font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem); }
.nos__in { width: 100%; justify-content: space-between; padding: 0 8px 0 24px; background: var(--ink-950); color: var(--ivory-200); }
.nos__in .btn__icon { background: rgba(236, 230, 218, .10); color: var(--gold-400); }
.nos__in .btn__icon svg { fill: currentColor; stroke: none; }
.nos__tl, .nos__cred { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.nos__tl h3, .nos__cred h3 { margin-bottom: var(--s-3); }
.nos__line { --g: var(--s-3); position: relative; display: grid; gap: var(--g); padding-left: 28px; }
.nos__line li { position: relative; display: grid; gap: 4px; }
.nos__line li::before { content: ""; position: absolute; z-index: 1; left: -28px; top: 5px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--accent); background: var(--bg); }
.nos__line li:last-child::before { background: var(--accent); }
.nos__line li:not(:last-child)::after { content: ""; position: absolute; left: -24px; top: 14px; bottom: calc(-1 * var(--g) - 5px); width: 1px; background: var(--accent); transform-origin: top; }
.nos__line .num { font-size: .8125rem; }
.nos__t { font-weight: 500; line-height: 1.3; }
.nos__cred ul { display: grid; gap: var(--s-2); }
.nos__cred li { display: grid; gap: 2px; font-weight: 500; line-height: 1.35; }
.nos__cred li > span + span { font: 500 .75rem/1.5 var(--font-mono); letter-spacing: .04em; color: var(--fg-2); }

/* Contacto */
.contact { display: grid; gap: var(--s-6); align-items: start; }
.contact__copy > * + * { margin-top: var(--s-3); }
/* CRM teaser */
#crm .split { align-items: center; }
.crm-teaser { display: grid; gap: 12px; }
.crm-teaser li { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--line-dark); border-radius: var(--r-md); background: var(--bezel-bg); font-weight: 500; color: var(--ivory-200); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* CTA diagnóstico */
.cta-dx { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-3); }
.cta-dx__steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.cta-dx__steps li { padding: 8px 10px; border: 1px solid var(--line-dark); border-radius: var(--r-pill); font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .02em; color: var(--ivory-200); white-space: nowrap; }
.cta-dx__bar { height: 4px; border-radius: 2px; background: var(--line-dark-strong); overflow: hidden; }
.cta-dx__bar i { display: block; width: 12.5%; height: 100%; border-radius: inherit; background: var(--gold-400); transform-origin: left; }
.cta-dx .t-small { color: var(--stone-400); }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.is-fallback) .cta-dx__bar i { transform: scaleX(0); }
  html.js:not(.is-fallback) .rv.is-in .cta-dx__bar i { transform: none; transition: transform .6s var(--ease-out) .3s; }
}

/* Footer */
.footer { padding-block: var(--s-6); border-top: 1px solid var(--line); }
.footer__row { display: grid; gap: var(--s-4); align-items: center; }
.footer__brand { display: flex; align-items: center; gap: 16px; font-weight: 500; }
.footer__brand img { width: 66px; height: 24px; }
.footer .t-eyebrow { font-size: .6875rem; line-height: 1.6; }
.footer__end { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; font-size: .875rem; color: var(--fg-2); }

/* Motion de entrada (solo con JS) */
html.js .hero-in, html.js .plate { opacity: 0; }
html.js .rv { opacity: 0; }
html.js .thread { stroke-dashoffset: 424; }
html.js .hero-in, html.js .rv, html.js .plate { transition: none; }
html.js.is-ready .hero-in { opacity: 1; transform: none; filter: none; transition: opacity .6s var(--ease-out) var(--d, 0ms), transform .6s var(--ease-out) var(--d, 0ms), filter .6s var(--ease-out) var(--d, 0ms); }
html.js.is-ready .plate { opacity: 1; transform: none; transition: opacity .6s var(--ease-out) calc(200ms + var(--i) * 70ms), transform .6s var(--ease-out) calc(200ms + var(--i) * 70ms); }
html.js.is-ready .thread { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-in-out) .7s; }
html.js .rv.is-in, html.js.is-fallback .rv { opacity: 1; transform: none; transition: opacity .6s var(--ease-out) calc(var(--i, 0) * 60ms), transform .6s var(--ease-out) calc(var(--i, 0) * 60ms); }
.menu.is-open .t-h2 { transform: none; }

@media (prefers-reduced-motion: no-preference) {
  html.js .hero-in { transform: translateY(16px); }
  html.js h1.hero-in { filter: blur(6px); }
  html.js .plate { transform: translateY(24px); }
  html.js .rv { transform: translateY(16px); }
  .menu .t-h2 { transform: translateY(8px); }
}

/* Motion de piezas gráficas: estado final por defecto; inicial solo con JS */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.is-fallback) .rings circle { opacity: 0; scale: .92; }
  html.js:not(.is-fallback) .rings.is-in circle { opacity: 1; scale: none; transition: opacity .6s var(--ease-out) var(--w), scale .6s var(--ease-out) var(--w); }
  .rings__1 { --w: 0s; } .rings__2 { --w: .15s; } .rings__3 { --w: .3s; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.is-fallback) .nos__line li::before { opacity: 0; transform: scale(.5); }
  html.js:not(.is-fallback) .nos__line li:not(:last-child)::after { transform: scaleY(0); }
  html.js:not(.is-fallback) .nos__tl.is-in li::before { opacity: 1; transform: none; transition: opacity .3s var(--ease-out) calc(.2s + var(--k) * .32s), transform .3s var(--ease-out) calc(.2s + var(--k) * .32s); }
  html.js:not(.is-fallback) .nos__tl.is-in li:not(:last-child)::after { transform: none; transition: transform .22s var(--ease-in-out) calc(.3s + var(--k) * .32s); }
  @media (min-width: 768px) { html.js:not(.is-fallback) .nos__line li:not(:last-child)::after { transform: scaleX(0); } }
}
html.js :is(.who__card, .cell, .deliv li).rv.is-in { transition: opacity .6s var(--ease-out) calc(var(--i, 0) * 60ms), transform .6s var(--ease-out) calc(var(--i, 0) * 60ms), border-color .16s ease, background-color .16s ease; }

/* Hover solo con puntero fino */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--gold-300); }
  .btn--primary:hover .btn__icon svg { transform: translateX(2px); }
  .btn--ghost:hover { background: var(--ink-800); border-color: rgba(236, 230, 218, .30); }
  .nos__in:hover { background: var(--ink-800); } .nos__in:hover .btn__icon svg { transform: scale(1.1); }
  .link:hover::after { transform: scaleX(1); }
  .tab:hover { color: var(--ivory-200); }
  .tab:hover .num { color: var(--gold-300); }
  .who__card:hover { border-color: var(--line-light-strong); }
  .cell:hover { background-color: rgba(236, 230, 218, .02); }
  .deliv li:hover { background-color: rgba(20, 22, 26, .02); }
  .who__card:hover .ico, .cell:hover .ico, .deliv li:hover .ico { translate: 0 -2px; }
  .ms__p:hover .ms__plate { stroke: var(--stone-400); }
}

/* Sin transparencia */
@media (prefers-reduced-transparency: reduce) {
  body::after { display: none; }
  .nav::before { background: var(--ink-950); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav::before { background: var(--ink-950); }
}

/* Reduced motion: solo opacidad */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js.is-ready .hero-in, html.js .rv.is-in, html.js.is-fallback .rv, html.js.is-ready .plate { transition: opacity .2s ease; transition-delay: 0s; transform: none; filter: none; }
  html.js .thread, html.js.is-ready .thread { stroke-dashoffset: 0; transition: none; }
  .method__indicator, .burger span { transition: none; }
  .menu, .menu.is-open, .menu.is-open .t-h2 { transition: opacity .2s ease; transition-delay: 0s; }
  .panel__body, .panel__body.is-out { transition: opacity .2s ease; }
  .panel__body.is-pre { transform: none; }
  .btn, .btn:active { transition: background-color .16s ease; transform: none; }
  .btn__icon svg, .link::after, .ico { transition: none; }
  .ms__p { transition: opacity .16s ease; transform: none; }
  html.js :is(.who__card, .cell, .deliv li).rv.is-in { transition: opacity .2s ease, border-color .16s ease, background-color .16s ease; transition-delay: 0s; }
  .lx *, .lx *::before, .lx *::after { transition: opacity .2s ease !important; transition-delay: 0s !important; }
  .lx__side.is-sw > * { transform: none; }
  .lx__card:hover .ico { translate: none; }
  .rm *, .rm *::before, .rm *::after { transition: opacity .15s ease !important; transition-delay: 0s !important; }
  .rm__rail::after { animation: none !important; }
  .rm__card:hover .ico { translate: none; }
  .cta-dx__bar i { transition: opacity .15s ease !important; }
}

/* Tablet */
@media (min-width: 480px) { .nav__cta { display: inline-flex; } }
@media (min-width: 768px) {
  :root { --col-gap: 24px; }
  .who__card { padding: var(--s-3); }
  .panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .mini-stack { margin: var(--s-3) 0 var(--s-3) var(--s-3); }
  .panel__body { padding: var(--s-4) var(--s-4) var(--s-4) 0; min-height: 360px; }
  .panel__n { font-size: 4rem; }
  .panel__name { font-size: 1.375rem; }
  .process { gap: var(--s-3); }
  .process li:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--s-3); height: 1px; background: var(--gold-400); }
  .cell { padding: var(--s-4) var(--s-3); }
  .cell .t-h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
  .deliv li { padding: var(--s-3); }
  .rings { max-width: 400px; }
  .nos { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6) var(--s-4); align-items: center; }
  .nos__tl, .nos__cred { grid-column: 1 / -1; }
  .nos__in { width: auto; }
  .nos__line { --g: var(--s-4); grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 28px 0 0; }
  .nos__line li::before { left: 0; top: -28px; }
  .nos__line li:not(:last-child)::after { left: 9px; right: calc(-1 * var(--g)); top: -24px; bottom: auto; width: auto; height: 1px; transform-origin: left; }
}

/* Desktop */
@media (min-width: 1024px) {
  :root { --col-gap: 32px; }
  .nav__links { display: flex; }
  .burger, .menu { display: none; }
  .hero { min-height: 100dvh; display: flex; align-items: center; padding: 120px 0 var(--s-7); }
  .hero__grid { width: 100%; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero__copy { grid-column: 1 / span 6; }
  .hero__visual { grid-column: 7 / span 6; max-width: none; margin: 0; }
  .platforms .t-small { grid-column: 1 / -1; }
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); }
  .split--a > :first-child { grid-column: 1 / span 5; }
  .split--a > :last-child { grid-column: 7 / span 6; }
  .who { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cell:nth-child(even) { border-left: 0; }
  .cell:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
  .deliv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .deliv li:nth-child(even) { border-left: 0; }
  .deliv li:not(:nth-child(4n+1)) { border-left: 1px solid var(--line); }
  .method { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
  .method__list { grid-column: 1 / span 5; }
  .method__panel { grid-column: 6 / span 7; margin-left: var(--s-4); }
  .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); }
  .contact__copy { grid-column: 1 / span 5; }
  .contact .bezel { grid-column: 7 / span 6; }
  .cta-dx { padding: var(--s-5); }
  .nos { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .nos__ph { grid-column: 1 / span 5; }
  .nos__id { grid-column: 7 / span 6; align-self: center; }
  .nos__tl { grid-column: 1 / span 8; }
  .nos__cred { grid-column: 9 / span 4; }
}
@media (min-width: 1440px) {
  .sec { padding-block: 160px; }
  .sec__head { margin-bottom: 80px; }
}

/* Fotografias: mismo filtro y overlay tinta en todas */
.hero__photo img, .who__ph img, .band img, .escalar__vis img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.05); }
.hero__visual { position: relative; }
.stack-art { position: relative; z-index: 1; }
.hero__photo { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line-dark-strong); }
.hero__photo img { filter: grayscale(.35) contrast(1.05) blur(6px); scale: 1.08; }
.hero__photo::after, .who__ph::after, .band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 13, 16, .35), rgba(11, 13, 16, .85)); pointer-events: none; }
.who__card { padding: 0; gap: 0; overflow: hidden; }
.who__ph { position: relative; height: 160px; }
.who__ph .ico { position: absolute; left: 16px; bottom: 16px; z-index: 1; color: var(--gold-400); }
.who__t { padding: 20px; }
.band { position: relative; margin: 0 0 var(--s-6); aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line-strong); }
.escalar__vis { position: relative; isolation: isolate; padding: var(--s-4) var(--s-3); overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); }
.escalar__vis > img { position: absolute; inset: 0; z-index: -2; opacity: .18; }
.escalar__vis::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(closest-side, rgba(246, 242, 234, .95) 55%, rgba(246, 242, 234, .4)); }
@media (min-width: 768px) {
  .who__card { padding: 0; }
  .who__ph { height: 200px; }
  .who__t { padding: var(--s-3); }
  .band { aspect-ratio: 21 / 9; }
  .escalar__vis { padding: var(--s-5) var(--s-4); }
}
@media (min-width: 1024px) {
  .hero__photo img { filter: grayscale(.35) contrast(1.05); scale: none; }
  .stack-art { width: 100%; }
}

@media (hover: hover) and (pointer: fine) { .marquee:hover .marquee__track { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } .marquee__track { animation: none; } .marquee__set[aria-hidden="true"] { display: none; } }