/* Fuentes autoalojadas (Hanken Grotesk 400/500/600, JetBrains Mono 400/500; licencias OFL en assets/fuentes/) */
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("fuentes/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("fuentes/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("fuentes/hanken-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fuentes/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fuentes/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
/* Topolabs · landing de empresa. Sistema de diseño V1: tinta + acento por producto. */
:root {
  --navy: #0C0D12; --navy-hover: #23252E;
  --sky: #0C0D12; --sky-ink: #0C0D12; --sky-wash: #F0F2F5;
  --ground: #FFFFFF; --ground-2: #F5F6F8; --work: #F0F2F5; --surface: #FFFFFF;
  --line: #E3E5EA; --line-strong: #CFD2DA;
  --ink: #0C0D12; --ink-2: #444855; --ink-3: #696D7A;
  --ok: #1B7A54; --warn: #9A6B12; --stop: #B42318;
  --ring: #2B44FF;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
  --r-ctl: 8px; --r-surf: 12px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(12, 13, 18, .06);
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --pad: clamp(16px, 4vw, 56px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #F3F4F7; --navy-hover: #D9DCE4;
    --sky: #F3F4F7; --sky-ink: #F3F4F7; --sky-wash: #1A1D24;
    --ground: #0C0D12; --ground-2: #15171C; --work: #111318; --surface: #15171C;
    --line: #252830; --line-strong: #343844;
    --ink: #F3F4F7; --ink-2: #B7BBC6; --ink-3: #8B909C;
    --ok: #4CC28F; --warn: #E0B04A; --stop: #FF7A6B;
    --ring: #8A99FF;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --navy: #F3F4F7; --navy-hover: #D9DCE4;
    --sky: #F3F4F7; --sky-ink: #F3F4F7; --sky-wash: #1A1D24;
    --ground: #0C0D12; --ground-2: #15171C; --work: #111318; --surface: #15171C;
    --line: #252830; --line-strong: #343844;
    --ink: #F3F4F7; --ink-2: #B7BBC6; --ink-3: #8B909C;
    --ok: #4CC28F; --warn: #E0B04A; --stop: #FF7A6B;
    --ring: #8A99FF;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
[data-producto="aero"] { --sky: #2B44FF; --sky-ink: #2238E0; --sky-wash: #E9ECFF; }
[data-producto="studio"] { --sky: #F25C05; --sky-ink: #B93E0B; --sky-wash: #FFEEE3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-producto="aero"], :root:not([data-theme="light"]) [data-producto="aero"] { --sky: #8A99FF; --sky-ink: #A9B4FF; --sky-wash: #1A2050; }
  :root:not([data-theme="light"])[data-producto="studio"], :root:not([data-theme="light"]) [data-producto="studio"] { --sky: #FF8A4C; --sky-ink: #FF9A5C; --sky-wash: #3A1D0C; }
}
:root[data-theme="dark"][data-producto="aero"], :root[data-theme="dark"] [data-producto="aero"] { --sky: #8A99FF; --sky-ink: #A9B4FF; --sky-wash: #1A2050; }
:root[data-theme="dark"][data-producto="studio"], :root[data-theme="dark"] [data-producto="studio"] { --sky: #FF8A4C; --sky-ink: #FF9A5C; --sky-wash: #3A1D0C; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 35%, transparent); border-radius: var(--r-ctl); }
.saltar { position: absolute; left: var(--sp-4); top: -64px; background: var(--navy); color: var(--ground); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-ctl); z-index: 10; }
.saltar:focus { top: var(--sp-2); }
.rotulo { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wrap { padding-inline: var(--pad); max-width: 1440px; margin-inline: auto; }
/* Logo */
/* Barra superior */
.barra { position: sticky; top: 0; z-index: 5; background: var(--ground); border-bottom: 1px solid var(--line); }
.barra .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: var(--sp-4); }
.barra nav { display: flex; align-items: center; gap: var(--sp-8); }
.barra nav a:not(.logo), .idioma a { text-decoration: none; font-size: 15px; color: var(--ink-2); padding: var(--sp-1) 0; transition: color .15s; }
.barra nav a:not(.logo):hover, .idioma a:hover { color: var(--ink); }
.idioma { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 2px; font: 500 12px/1 var(--mono); }
.barra .idioma a, .idioma a { padding: 7px 10px !important; border-radius: 6px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.idioma a[aria-current="true"] { background: var(--sky-wash); color: var(--ink); }
/* Botones: un primario en tinta; el acento nunca rellena */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--sp-6); border-radius: var(--r-ctl); font: 600 15px/1 var(--sans); text-decoration: none; border: 1px solid transparent; transition: background-color .15s, border-color .15s; }
.btn--primario { background: var(--navy); color: var(--ground); }
.btn--primario:hover { background: var(--navy-hover); }
.btn--primario:active { transform: translateY(1px); }
.btn--inverso { background: var(--ground); color: var(--ink); }
.btn--inverso:hover { background: var(--ground-2); }
.enlace { color: var(--sky-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; font-weight: 600; transition: text-decoration-thickness .15s; }
.enlace:hover { text-decoration-thickness: 2px; }
[data-producto="aero"].enlace, .enlace[data-producto="aero"] { --sky-ink: #2238E0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .enlace[data-producto="aero"] { --sky-ink: #A9B4FF; }
}
:root[data-theme="dark"] .enlace[data-producto="aero"] { --sky-ink: #A9B4FF; }
/* Portada */
.portada { position: relative; min-height: min(92svh, 920px); display: flex; isolation: isolate; }
.portada canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.75) 38%, #000 82%), linear-gradient(to bottom, #000 0, #000 60%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(100deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.75) 38%, #000 82%), linear-gradient(to bottom, #000 0, #000 60%, transparent 100%); mask-composite: intersect; }
.portada .wrap { display: flex; flex-direction: column; justify-content: flex-end; padding-block: var(--sp-16) var(--sp-12); width: 100%; pointer-events: none; }
.portada .wrap > * { pointer-events: auto; }
.portada .rotulo { margin-bottom: var(--sp-6); }
.portada h1 { font: 600 clamp(44px, 8.2vw, 124px)/.96 var(--sans); letter-spacing: -.035em; max-width: 14ch; text-wrap: balance; }
.portada h1 span { color: var(--ink-3); display: block; }
.portada .baja { margin-top: var(--sp-8); max-width: 50ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); }
.portada .acciones { margin-top: var(--sp-8); display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
/* Secciones tipo lámina */
.seccion { padding-block: clamp(64px, 8vw, 120px); }
.cab { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--sp-6); align-items: baseline; margin-bottom: clamp(40px, 6vw, 88px); }
.cab h2 { font: 600 clamp(32px, 4.6vw, 64px)/1.02 var(--sans); letter-spacing: -.03em; max-width: 18ch; text-wrap: balance; }
/* Cómo funciona */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.pasos::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--line-strong); }
/* Productos */
.producto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); }
.producto:first-of-type { border-top: 0; padding-top: 0; }
.producto--inv .texto { order: 2; }
.producto h3 { font: 600 clamp(24px, 2.6vw, 34px)/1.12 var(--sans); letter-spacing: -.02em; margin-top: var(--sp-6); }
.producto .desc { margin-top: var(--sp-4); color: var(--ink-2); max-width: 46ch; }
.chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 5px 10px; background: #FFFFFF; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sky-ink); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip { background: var(--surface); }
}
:root[data-theme="dark"] .chip { background: var(--surface); }
.producto .encab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.lista { margin-top: var(--sp-6); border-top: 1px solid var(--line); }
.lista li { display: flex; gap: var(--sp-3); align-items: baseline; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.lista li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); flex: none; transform: translateY(-1px); }
.marco { background: var(--work); border: 1px solid var(--line); border-radius: var(--r-surf); aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.marco svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.marco .rotulo { position: absolute; left: var(--sp-4); bottom: var(--sp-3); background: var(--work); padding: 0 var(--sp-2); }
/* Enfoque */
.principios { border-top: 1px solid var(--line-strong); }
.principio { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: var(--sp-6); padding-block: var(--sp-8); border-bottom: 1px solid var(--line); align-items: baseline; }
.principio h3 { font: 600 clamp(22px, 2.4vw, 30px)/1.15 var(--sans); letter-spacing: -.02em; grid-column: 2; }
.principio p { color: var(--ink-2); grid-column: 3; }
.principio .rotulo { grid-column: 1; }
/* Cierre */
.cierre { background: var(--navy); color: var(--ground); padding-block: clamp(72px, 10vw, 140px); }
.cierre h2 { font: 600 clamp(32px, 5.6vw, 84px)/1 var(--sans); letter-spacing: -.035em; max-width: 16ch; text-wrap: balance; }
.cierre .btn { margin-top: var(--sp-12); font-family: var(--mono); font-weight: 500; }
.cierre .rotulo { color: color-mix(in srgb, var(--ground) 60%, var(--navy)); margin-bottom: var(--sp-6); display: block; }
/* Pie */
.pie .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-block: var(--sp-8); }
.pie .rotulo { text-transform: none; letter-spacing: .02em; }
@media (max-width: 860px) {
  .cab, .producto, .principio { grid-template-columns: minmax(0, 1fr); }
  .producto--inv .texto { order: 0; }
  .principio h3, .principio p, .principio .rotulo { grid-column: 1; }
  .pasos { grid-template-columns: minmax(0, 1fr); }
  .pasos::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .portada { min-height: 88svh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
.captura { display: block; border: 1px solid var(--line-strong); border-radius: var(--r-surf); overflow: hidden; line-height: 0; }
.captura img { width: 100%; height: auto; display: block; }
.producto + .producto { margin-top: var(--sp-8); }
.principio h3 .chip { margin-left: var(--sp-3); vertical-align: middle; position: relative; top: -2px; }
.cap { margin: 0; }
.cap .rotulo { display: block; margin-top: var(--sp-3); }
.fila { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: var(--sp-6); padding-block: var(--sp-6); border-bottom: 1px solid var(--line); align-items: baseline; }
.fila h3 { font: 600 clamp(20px, 2.2vw, 28px)/1.15 var(--sans); letter-spacing: -.02em; }
.fila p { color: var(--ink-2); }
@media (max-width: 860px) {
  .fila { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .principio h3 .chip { display: table; margin: var(--sp-2) 0 0; }
}
/* Cursor propio: el nodo del logo. Sólo con mouse; el nativo se oculta cuando el script ya está activo */
.cur-dot, .cur-ring { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; opacity: 0; will-change: transform; }
.cur-dot::before, .cur-ring::before { content: ""; position: absolute; border-radius: 50%; transition: width .15s, height .15s, margin .15s, opacity .15s, background-color .15s; }
.cur-dot::before { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--cur, var(--sky)); }
.cur-ring::before { width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1px solid var(--cur, var(--sky)); opacity: .55; }
.cur-ring.cur-grande::before { width: 52px; height: 52px; margin: -26px 0 0 -26px; opacity: .9; }
.cur-ring.cur-press::before { width: 18px; height: 18px; margin: -9px 0 0 -9px; opacity: 1; }
.cur-dot.cur-press::before { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
html.cur-on .cur-dot, html.cur-on .cur-ring { opacity: 1; }
html.cur-nativo .cur-dot, html.cur-nativo .cur-ring { opacity: 0; }
html.cursor-propio:not(.cur-nativo), html.cursor-propio:not(.cur-nativo) * { cursor: none !important; }
@media (hover: none), (pointer: coarse) {
  .cur-dot, .cur-ring { display: none; }
}
/* Túnel de humo de Aero: portada de alto casi completo, sin bordes; el lienzo se funde con el fondo */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tunel { position: relative; min-height: max(560px, calc(100svh - 64px)); display: flex; flex-direction: column; justify-content: flex-end; background: var(--ground); isolation: isolate; padding-bottom: var(--sp-12); }
.tunel canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 78%, transparent 100%); }
.tunel-marca { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; transition: opacity .5s ease; }
.tunel-marca text { font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 600; }
.tunel-marca .tm1 { fill: var(--ink); }
.tunel-marca .tm2 { fill: var(--sky); }
.tunel-marca.off { opacity: 0; }
.tunel-fb { display: none; position: absolute; left: 0; right: 0; top: 0; height: 70%; flex-direction: column; align-items: center; justify-content: center; font: 600 clamp(40px, 8vw, 120px)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); z-index: -1; }
.tunel-fb span:last-child { color: var(--sky); }
.tunel.estatico canvas, .tunel.estatico .tunel-marca { display: none; }
.tunel.estatico .tunel-fb { display: flex; }
.tunel-texto { position: relative; text-align: center; max-width: 760px; margin-inline: auto; padding: var(--sp-6) var(--sp-8);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ground) 92%, transparent) 38%, transparent 74%); }
.tunel-texto h1 { font: 600 clamp(28px, 3.6vw, 52px)/1.06 var(--sans); letter-spacing: -.03em; }
.tunel-texto .baja { margin: var(--sp-3) auto 0; max-width: 46ch; font-size: clamp(15px, 1.3vw, 18px); color: var(--ink-2); }
.tunel-texto .acciones { margin-top: var(--sp-6); display: flex; justify-content: center; }
.tunel-texto .pista { margin-top: var(--sp-4); display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
html[data-producto="aero"] .barra:not(.sc) { border-bottom-color: transparent; }
.barra { transition: border-color .2s; }
/* Diagrama de nodos de Studio */
.marco--diag { background: var(--work); }
.diag text { font: 500 3.6px var(--mono); letter-spacing: .08em; fill: var(--ink-2); }
.diag .puntos { fill: var(--line-strong); }
.diag .caja { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .15s; }
.diag .con { fill: none; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .15s; }
.diag .puerto { fill: var(--sky); }
.diag .sel .caja { fill: var(--sky-wash); stroke: var(--sky); }
.diag .sel text { fill: var(--sky-ink); }
.diag g.b:hover .caja, .diag g.b:hover .con { stroke: var(--sky); }
/* Acerca */
.acerca { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); }
.acerca h2 { font: 600 clamp(32px, 4.6vw, 64px)/1.04 var(--sans); letter-spacing: -.03em; text-wrap: balance; margin-top: var(--sp-6); }
@media (max-width: 860px) {
  .acerca { grid-template-columns: minmax(0, 1fr); }
}
/* Selección monocroma */
::selection { background: var(--ink); color: var(--ground); }
.cierre ::selection { background: var(--ground); color: var(--navy); }
/* Logotipo y titular de la empresa */
.portada h1 span { color: inherit; }
.visor { --captura-bg: #F5F7FA; }
.vista { position: absolute; inset: 0; opacity: 0; transform: translateX(18px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.vista.on { opacity: 1; transform: none; pointer-events: auto; }
.vista img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Entrada sobria al entrar en pantalla (sólo con JS; sin animación si se reduce el movimiento) */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv.in { opacity: 1; transform: none; }
.principio, .fila { transition: border-color .2s; }
.principio:hover, .fila:hover { border-bottom-color: var(--ink-3); }
.lista li { transition: padding-left .2s; }
.lista li:hover { padding-left: var(--sp-2); }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .vista { transition: none; transform: none; }
}
/* Cursor: sobre el lienzo de Aero se invierte contra lo que hay debajo */
/* Cómo funciona: diagrama de tres bloques, monocromo */
.flujo { --gc: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 4fr) var(--gc) minmax(0, 5fr) var(--gc) minmax(0, 4fr); align-items: center; position: relative; }
.bloque { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-surf); padding: var(--sp-6); position: relative; }
.bloque > .rotulo { display: block; margin-bottom: var(--sp-4); }
.bloque--centro { background: var(--navy); color: var(--ground); border-color: var(--navy); padding: clamp(40px, 5vw, 72px) var(--sp-6); text-align: center; min-height: 300px; display: flex; flex-direction: column; justify-content: center; z-index: 1; }
.bloque--centro .etapas { display: block; margin-top: var(--sp-4); font: 500 12px/1.4 var(--mono); letter-spacing: .1em; color: color-mix(in srgb, var(--ground) 65%, var(--navy)); }
.piezas { display: grid; gap: var(--sp-2); }
.pieza { position: relative; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--ground); font: 500 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; transition: border-color .2s, background-color .2s; }
.pieza::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ink); }
.pieza::before { content: ""; position: absolute; top: 50%; height: 1px; background: var(--line-strong); transform-origin: left center; transition: background-color .2s, transform 1s cubic-bezier(.2,.7,.2,1); }
.entrada .pieza::after { right: -4px; }
.entrada .pieza::before { left: calc(100% + 4px); width: calc(var(--sp-6) + var(--gc)); }
.pieza:hover { border-color: var(--ink); background: var(--sky-wash); }
.pieza:hover::before { background: var(--ink); }
.flujo-leyenda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); margin-top: var(--sp-8); }
.flujo-leyenda .rotulo { color: var(--ink); }
.flujo-leyenda p { margin-top: var(--sp-2); color: var(--ink-2); font-size: 15px; max-width: 34ch; }
.js .flujo:not(.in) .pieza::before { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .js .flujo:not(.in) .pieza::before { transform: none; }
  .pieza::before { transition: none; }
}
@media (max-width: 860px) {
  .flujo { grid-template-columns: minmax(0, 1fr); }
  .pieza::before, .pieza::after { display: none; }
  .flujo-leyenda { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}
/* El nodo del símbolo siempre toma --sky del contexto (empresa: tinta; Aero: ultramar; Studio: naranja) */
/* Conmutador de tema */
.tema { appearance: none; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); width: 36px; height: 36px; display: inline-grid; place-items: center; color: var(--ink-2); cursor: pointer; transition: color .15s, border-color .15s; padding: 0; }
.tema:hover { color: var(--ink); border-color: var(--ink-3); }
.tema svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; grid-area: 1 / 1; }
.tema .sol { display: none; }
.tema[aria-pressed="true"] .sol { display: block; }
.tema[aria-pressed="true"] .luna { display: none; }
.barra nav { gap: var(--sp-4); }
.barra nav > a:not(.logo) { margin-right: var(--sp-4); }
/* Fundidos largos del túnel de Aero: ninguna arista señalable */
.tunel canvas {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.05) 3%, rgba(0,0,0,.2) 7%, rgba(0,0,0,.5) 12%, rgba(0,0,0,.85) 18%, #000 25%, #000 56%, rgba(0,0,0,.8) 66%, rgba(0,0,0,.5) 76%, rgba(0,0,0,.2) 86%, rgba(0,0,0,.05) 93%, transparent 99%),
    linear-gradient(to right, transparent 0, rgba(0,0,0,.25) 2.5%, #000 9%, #000 88%, rgba(0,0,0,.45) 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.05) 3%, rgba(0,0,0,.2) 7%, rgba(0,0,0,.5) 12%, rgba(0,0,0,.85) 18%, #000 25%, #000 56%, rgba(0,0,0,.8) 66%, rgba(0,0,0,.5) 76%, rgba(0,0,0,.2) 86%, rgba(0,0,0,.05) 93%, transparent 99%),
    linear-gradient(to right, transparent 0, rgba(0,0,0,.25) 2.5%, #000 9%, #000 88%, rgba(0,0,0,.45) 95%, transparent 100%);
  mask-composite: intersect;
}
.tunel-texto { background: none; padding: var(--sp-6) var(--sp-8); }
.tunel-texto::before { content: ""; position: absolute; inset: -70px -170px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ground) 88%, transparent) 0%, color-mix(in srgb, var(--ground) 72%, transparent) 38%, color-mix(in srgb, var(--ground) 38%, transparent) 62%, color-mix(in srgb, var(--ground) 10%, transparent) 84%, transparent 100%); }
/* Diagrama: el bloque central insinúa la maquinaria (monocromo, sugerido) */
.flujo { --L: calc(var(--sp-6) + var(--gc)); }
.bloque--centro::before, .bloque--centro::after { content: ""; position: absolute; pointer-events: none; border: 1px solid var(--line); border-radius: calc(var(--r-surf) + 12px); inset: -12px; transition: inset .4s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.bloque--centro::after { inset: -24px; border-radius: calc(var(--r-surf) + 24px); border-color: color-mix(in srgb, var(--line) 55%, transparent); }
.bloque--centro:hover::before { inset: -17px; border-color: var(--line-strong); }
.bloque--centro:hover::after { inset: -34px; border-color: var(--line); }
.bloque--centro .etapas { display: flex; justify-content: center; align-items: center; gap: var(--sp-2); }
.etapas > span { opacity: .45; animation: etapa 8s ease-in-out infinite paused; }
.etapas > span:nth-of-type(2) { animation-delay: 1.3s; }
.etapas > span:nth-of-type(3) { animation-delay: 2.6s; }
.etapas > i { font-style: normal; opacity: .3; }
.flujo.vivo .pulso, .flujo.vivo .latido, .flujo.vivo .latido::after, .flujo.vivo .etapas > span { animation-play-state: running; }
@keyframes etapa { 0%, 21%, 40%, 100% { opacity: .45; } 25%, 35% { opacity: 1; } }
@media (max-width: 860px) {
  .bloque--centro::before { inset: -8px; }
  .bloque--centro::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .etapas > span { animation: none; }
  .etapas > span { opacity: .85; }
  .bloque--centro::before, .bloque--centro::after { transition: none; }
}
/* Barra: derecha agrupada; en celular, menú desplegable */
.barra-der { display: flex; align-items: center; gap: var(--sp-4); }
.barra-der nav { display: flex; align-items: center; gap: var(--sp-8); }
.barra-der nav a { text-decoration: none; font-size: 15px; color: var(--ink-2); padding: var(--sp-1) 0; transition: color .15s; }
.barra-der nav a:hover { color: var(--ink); }
.menu-btn { display: none; appearance: none; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); width: 36px; height: 36px; place-items: center; color: var(--ink-2); cursor: pointer; padding: 0; }
.menu-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
@media (max-width: 860px) {
  .menu-btn { display: inline-grid; }
  .barra-der { gap: var(--sp-2); }
  .barra-der nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--ground); border-bottom: 1px solid var(--line); padding: var(--sp-2) var(--pad); }
  .barra.menu .barra-der nav { display: flex; }
  .barra-der nav a { padding: 14px 0; border-top: 1px solid var(--line); font-size: 17px; }
  .barra-der nav a:first-child { border-top: 0; }
}
@media (max-width: 480px) {
  .logo { font-size: 16px; }
  .idioma a { padding: 7px 8px; }
}
/* Pantalla de carga: la crea el script (sin JS la página se ve normal) */
#cargador { position: fixed; inset: 0; z-index: 10000; background: var(--ground); display: grid; place-items: center; transition: opacity .5s ease; }
#cargador.sale { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  #cargador { transition: none; }
  .js body { animation: none; }
}
.etapas > span { animation: etapa 3.2s ease-in-out infinite paused; }
.etapas > span:nth-of-type(2) { animation-delay: .35s; }
.etapas > span:nth-of-type(3) { animation-delay: .7s; }
@keyframes etapa { 0%, 16%, 40%, 100% { opacity: .45; } 22%, 34% { opacity: 1; } }
/* Texto de la marca de Aero: el cursor lo detecta como relleno propio */
.tunel-marca text { pointer-events: all; }
.tunel { overflow-x: clip; }
@media (max-width: 640px) {
  .tunel-texto::before { inset: -50px -30px; }
}
/* La portada de Aero queda fija mientras se dispara la tinta (como en el portfolio), después se libera */
.tunel-pin { height: calc(max(560px, 100svh - 64px) + 70svh); }
.tunel-pin > .tunel { position: sticky; top: 64px; }
.tunel-marca { transition: opacity .25s ease; }
@media (prefers-reduced-motion: reduce) {
  .tunel-pin { height: auto; }
  .tunel-pin > .tunel { position: relative; top: auto; }
}
/* ===== Portada de la landing (variante elegida: marca primero, eje central) ===== */
.portada .wrap { justify-content: center; padding-block: clamp(88px, 13vh, 140px) clamp(96px, 13vh, 140px); }
.portada .pb { display: flex; flex-direction: column; align-items: center; text-align: center; }
.portada .pb h1 { font: 600 clamp(20px, 2.3vw, 32px)/1.25 var(--sans); letter-spacing: -.02em; margin-top: clamp(32px, 6vh, 64px); max-width: 26ch; text-wrap: balance; }
.portada .pb .baja { margin-top: var(--sp-4); max-width: 46ch; font-size: clamp(16px, 1.35vw, 18px); }
.portada .pb .acciones { margin-top: var(--sp-8); justify-content: center; }
/* la malla es un fondo fuera de foco: más suave, y despejada detrás del bloque central */
.portada canvas { filter: blur(1.1px);
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.75) 38%, #000 82%), linear-gradient(to bottom, #000 0, #000 60%, transparent 100%), radial-gradient(ellipse 36% 42% at 50% 48%, rgba(0,0,0,.12) 0%, rgba(0,0,0,.4) 55%, #000 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image: linear-gradient(100deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.75) 38%, #000 82%), linear-gradient(to bottom, #000 0, #000 60%, transparent 100%), radial-gradient(ellipse 36% 42% at 50% 48%, rgba(0,0,0,.12) 0%, rgba(0,0,0,.4) 55%, #000 100%);
  mask-composite: intersect; }
/* ===== Botón deshabilitado con tooltip ===== */
.btn-wrap { position: relative; display: inline-block; }
.btn--off { opacity: .6; cursor: default; }
.btn--off:hover { background: var(--navy); }
.btn--off:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tip { transition: none; }
}
/* ===== Indicador de «seguí bajando» ===== */
.bajar { position: absolute; left: 50%; bottom: var(--sp-4); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--ink-3); z-index: 3; padding: 8px 14px; transition: opacity .35s ease, color .15s ease; }
.bajar:hover { color: var(--ink); }
.b-linea { position: relative; display: block; width: 1px; height: 44px; background: var(--line-strong); }
.b-linea i { position: absolute; left: -2.5px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: baja 2.2s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes baja { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
.scrolled .bajar { opacity: 0; pointer-events: none; }
.tunel { padding-bottom: calc(var(--sp-12) + 36px); }
@media (prefers-reduced-motion: reduce) {
  .b-linea i { animation: none; top: 50%; }
}
.lista li { transition: none; }
.lista li:hover { padding-left: 0; }
.lista li { transition: color .15s; }
.lista li:hover { color: var(--ink); }
.enlace--bloque { display: inline-block; margin-top: var(--sp-6); font-size: 17px; }
.btn--linea { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--linea:hover { background: var(--sky-wash); }
.flujo-leyenda { margin-top: var(--sp-12); }
/* B · del enredo a una línea */
.seg-enredo { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); margin-bottom: var(--sp-6); }
.seg-enredo button { appearance: none; border: 0; background: transparent; color: var(--ink-3); font: 500 12px/1 var(--mono); letter-spacing: .08em; padding: 10px 14px; border-radius: 6px; cursor: pointer; transition: background-color .2s, color .2s; }
.seg-enredo button:hover { color: var(--ink); }
.seg-enredo button[aria-pressed="true"] { background: var(--sky-wash); color: var(--ink); }
.escena-b { position: relative; aspect-ratio: 16 / 7; max-width: 1200px; margin-inline: auto; }
.b-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.b-lineas line { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity .45s ease; }
.nb { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--ink-3); white-space: nowrap;
  transition: left .9s cubic-bezier(.65, 0, .35, 1) calc(var(--i) * 55ms), top .9s cubic-bezier(.65, 0, .35, 1) calc(var(--i) * 55ms), transform .9s cubic-bezier(.65, 0, .35, 1) calc(var(--i) * 55ms), opacity .5s ease calc(.45s + var(--i) * 45ms); }
.pt { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); left: var(--x1); top: var(--y1); transform: translate(-50%, -50%); animation: viaje var(--d) ease-in-out var(--o) infinite alternate paused; transition: opacity .3s; }
@keyframes viaje { from { left: var(--x1); top: var(--y1); } to { left: var(--x2); top: var(--y2); } }
.escena-b[data-estado="con"] .nb { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.25); opacity: 0; }
.escena-b[data-estado="con"] .b-lineas line, .escena-b[data-estado="con"] .pt { opacity: 0; }
.b-in, .b-out { position: absolute; top: 50%; transform: translateY(-50%); width: 20%; display: grid; gap: 8px; transition: opacity .5s ease 1.1s; }
.b-in { left: 3%; }
.b-out { right: 3%; }
.b-nucleo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26%; min-height: 0; padding: var(--sp-6) var(--sp-4); transition: opacity .6s ease .8s, transform .8s cubic-bezier(.2, .7, .2, 1) .8s; }
.escena-b[data-estado="sin"] .b-in, .escena-b[data-estado="sin"] .b-out, .escena-b[data-estado="sin"] .b-nucleo { opacity: 0; pointer-events: none; transition-delay: 0s; }
.escena-b[data-estado="sin"] .b-nucleo { transform: translate(-50%, -50%) scale(.6); }
.escena-b.vivo .pt, .escena-b.vivo .pc { animation-play-state: running; }
@media (max-width: 860px) {
  .escena-b { aspect-ratio: auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-6); }
  .nb, .b-lineas, .pt, .seg-enredo { display: none; }
  .b-in, .b-out, .b-nucleo, .c-in, .c-out, .c-core { position: static; transform: none; width: auto; opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .nb, .b-in, .b-out, .b-nucleo { transition: none !important; }
  .pt { display: none; }
}
.b-in .pieza::before, .b-in .pieza::after, .b-out .pieza::before, .b-out .pieza::after, .c-in .pieza::before, .c-in .pieza::after, .c-out .pieza::before, .c-out .pieza::after { display: none; }
.c-out .pieza, .c-in .pieza, .b-in .pieza, .b-out .pieza { background: var(--surface); }
.cita { margin: 0; font: 600 clamp(26px, 3.4vw, 48px)/1.14 var(--sans); letter-spacing: -.03em; text-wrap: balance; color: var(--ink); }
.cita u { text-decoration-thickness: 3px; }
.ac-rows .rotulo, .ficha-filas .rotulo { color: var(--ink); }
.ac-accion { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }
.btn--linea { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--linea:hover { background: var(--sky-wash); }
/* B */
.ab-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); margin-top: var(--sp-6); align-items: center; }
.cita--grande { font-size: clamp(28px, 3.8vw, 54px); }
.ab-rem { margin-top: var(--sp-6); color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); max-width: 44ch; }
.ficha { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-surf); padding: var(--sp-6); }
.ficha h3 { font: 600 22px/1.15 var(--sans); letter-spacing: -.02em; }
.ficha > .rotulo { margin-top: var(--sp-1); color: var(--ink); }
.ficha-filas { margin: var(--sp-4) 0 0; border-top: 1px solid var(--line); }
.ficha-filas li { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.ficha .ac-accion { flex-direction: column; align-items: flex-start; }
@media (max-width: 860px) {
  .aa-grid, .ab-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ===== Tooltip del botón deshabilitado: abre hacia abajo (hacia arriba sólo si no entra) ===== */
.tip { position: absolute; left: 50%; top: calc(100% + 12px); transform: translate(-50%, -6px); background: var(--navy); color: var(--ground); padding: 10px 14px; border-radius: var(--r-ctl); font: 400 14px/1.35 var(--sans); width: max-content; max-width: min(380px, calc(100vw - 32px)); text-align: center; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; pointer-events: none; z-index: 6; }
.tip::after { content: ""; position: absolute; bottom: 100%; top: auto; left: 50%; margin-left: -6px; border: 6px solid transparent; border-bottom-color: var(--navy); border-top-color: transparent; }
.btn-wrap.arriba .tip { top: auto; bottom: calc(100% + 12px); transform: translate(-50%, 6px); }
.btn-wrap.arriba .tip::after { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: var(--navy); }
.btn-wrap:hover .tip, .btn--off:focus-visible + .tip, .btn-wrap.tip-on .tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* ===== «Cómo funciona» (final): conexiones calculadas desde las cajas reales, etapas legibles ===== */
.escena-b { max-width: none; aspect-ratio: 16 / 6.2; }
.seg-enredo { display: flex; width: fit-content; margin: 0 auto var(--sp-6); }
.b-cx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity .5s ease 1.1s; }
.escena-b[data-estado="sin"] .b-cx { opacity: 0; transition-delay: 0s; }
.cx-l { fill: none; stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cx-n { fill: var(--ink); stroke: var(--ground); stroke-width: 1.5; }
.cx-p { fill: var(--ink); }
.bloque--centro { --et-off: color-mix(in srgb, var(--ground) 74%, var(--navy)); }
.etapas > span, .etapas > i { opacity: 1; color: var(--et-off); }
.etapas > span { animation-name: etapa-c; }
@keyframes etapa-c { 0%, 16%, 40%, 100% { color: var(--et-off); } 22%, 34% { color: var(--ground); } }
.escena-b.vivo .etapas > span { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .etapas > span { animation: none; color: var(--ground); }
}
@media (max-width: 860px) {
  .b-cx { display: none; }
  .b-in, .b-out { position: relative !important; }
  .b-in::after, .b-out::before { content: ""; position: absolute; left: 50%; width: 1px; height: 24px; background: var(--ink-3); }
  .b-in::after { bottom: -28px; }
  .b-out::before { top: -28px; }
}
/* ===== About (final) ===== */
.cita u, .ab-rem u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .24em; text-decoration-color: var(--ink); }
.cita u { text-decoration-thickness: 3px; }
.ab-rem strong, .cita strong { color: var(--ink); font-weight: 600; }
/* ===== 404 ===== */
.e404 { min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--sp-4); padding-block: var(--sp-16); }
.e404 h1 { font: 600 clamp(36px, 6vw, 84px)/1.02 var(--sans); letter-spacing: -.035em; }
.e404 h1 span { display: block; color: var(--ink-3); }
.e404-links { display: flex; gap: var(--sp-6); align-items: center; flex-wrap: wrap; margin-top: var(--sp-6); }
/* mientras el aviso del botón está abierto, el indicador de «bajá» se atenúa para no quedar tapado */
.portada:has(.btn-wrap:hover, .btn-wrap.tip-on, .btn--off:focus-visible) .bajar, .tunel:has(.btn-wrap:hover, .btn-wrap.tip-on, .btn--off:focus-visible) .bajar { opacity: 0; }
/* Túnel chico del bloque Aero (landing): flujo ilustrativo en vivo */
.marco--mini { background: var(--ground); isolation: isolate; }
.marco--mini canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.marco--mini .tunel-marca { z-index: 1; }
.marco--mini .tunel-fb { top: 0; bottom: 0; height: auto; font-size: clamp(18px, 2.6vw, 34px); z-index: 1; }
.marco--mini.estatico canvas, .marco--mini.estatico .tunel-marca { display: none; }
.marco--mini.estatico .tunel-fb { display: flex; }
.nota-mini { position: absolute; left: var(--sp-4); bottom: var(--sp-3); z-index: 3; margin: 0; padding: 3px 8px; background: color-mix(in srgb, var(--ground) 82%, transparent); border-radius: var(--r-ctl); }
/* ===== Marca oficial: logotipos con los mismos trazados del kit (cuadro y texto en tinta, nodo y nombre de producto en el acento) ===== */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.lg { display: block; height: auto; max-width: none; }
.lg-corto { display: none; }
@media (max-width: 480px) {
  .barra .lg-largo { display: none; }
  .barra .lg-corto { display: block; width: 26px; height: 26px; }
}
.marca-grande { display: block; margin: 0; color: var(--ink); line-height: 0; }
.lg-grande { display: block; width: min(640px, 78vw); height: auto; }
.lg-nucleo { display: block; width: 100%; height: auto; color: var(--ground); }
.simbox { display: block; width: 88%; margin: 0 auto var(--sp-6); }
@media (min-width: 861px) {
  .b-nucleo { width: 32%; }
}
.nodo-latido, .halo { transform-box: fill-box; transform-origin: center; }
.nodo-latido { animation: latido-n 3.2s ease-in-out infinite paused; }
.halo { opacity: 0; animation: anillo-n 3.2s ease-out infinite paused; }
@keyframes latido-n { 0%, 19%, 30%, 100% { transform: scale(1); } 22% { transform: scale(1.22); } }
@keyframes anillo-n { 0%, 20%, 100% { opacity: 0; transform: scale(1); } 22% { opacity: .6; } 34% { opacity: 0; transform: scale(3); } }
.escena-b.vivo .nodo-latido, .escena-b.vivo .halo { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .nodo-latido, .halo { animation: none; }
}
.pista-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .pista-mouse { display: none; }
  .pista-touch { display: inline; }
}
.tunel { touch-action: pan-y; }
#cargador { display: grid; place-items: center; }
#cargador .carga { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); color: var(--ink); }
/* Contacto: copiar la dirección */
.copiar-wrap { margin-top: var(--sp-12); }
.copiar-wrap .btn { margin-top: 0; }
.btn-copiar .bc-txt { display: inline-flex; align-items: center; gap: var(--sp-2); }
.btn-copiar svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bc-pista { margin-top: var(--sp-4); display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
/* «Cómo funciona»: fijado por scroll. La sección es más alta que la pantalla; título, control y diagrama quedan sticky y centrados */
.flujo-pin { height: calc(100svh - 64px + 90svh); }
.flujo-fija { position: sticky; top: 64px; height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: center; }
.flujo-fija .cab { margin-bottom: var(--sp-6); }
.flujo-fija .escena-b { aspect-ratio: auto; height: clamp(300px, calc(100svh - 64px - 250px), 540px); width: 100%; }
#como { scroll-margin-top: 120px; }
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .flujo-pin { height: auto; }
  .flujo-fija { position: static; height: auto; display: block; }
  .flujo-fija .escena-b { height: auto; }
}
/* Contacto: pista y enlace separados con aire; en pantallas angostas pasan a dos líneas */
.bc-pista { gap: var(--sp-2) var(--sp-12); }
.cierre .bc-pista { display: flex; margin: var(--sp-4) 0 0; gap: var(--sp-2) var(--sp-12); }
/* Contacto: botón que copia (la dirección se arma en JS; sin JS se muestra el texto plano de <noscript>) */
.btn-copiar { cursor: pointer; appearance: none; font-family: var(--mono); font-weight: 500; }
.copiar-wrap .btn-copiar { display: none; }
.js .copiar-wrap .btn-copiar { display: inline-flex; }
.bc-noscript { font: 500 15px/1.4 var(--mono); color: inherit; margin: 0; }
/* Capa de carga única: fundido de entrada y salida; el cursor propio queda por encima */
#cargador { transition: opacity .25s ease; }
#cargador.entra { opacity: 0; }
#cargador.sale { transition: opacity .45s ease; }
.cur-dot, .cur-ring { z-index: 10001; }