/* Manas · Funcionalidades v5 (2026-10-12; antes v3). CSS propio de la página: el plano de tu empresa (2D), los tramos de cada
   capítulo con sus fichas, las recreaciones y la versión quieta. Usa los tokens de sitio.css; lo que se porta de
   portada.css (botón de pausa) va aquí. Toda animación vive dentro de (prefers-reduced-motion: no-preference) y se
   para con html.quieto (botón «Pausar animación»). */

.pag-func { --pd-fondo: #0B1016; }

/* ============================================================ EL DIBUJO DEL PLANO (una sola vez, en <defs>) */
.plano-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pd { font-family: var(--font-mono); }
/* colores del dibujo como variables: se heredan dentro de <use>, así el mismo dibujo vale en noche (por defecto) y en papel (mini-plano) */
.pd-borde path { fill: none; stroke: var(--pd-tenue, rgba(236, 232, 223, .3)); stroke-width: 1.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.pd-borde text { fill: var(--pd-texto-2, #A7B0B4); font-size: 12.5px; letter-spacing: 3.2px; }
.pd-llega path { fill: none; stroke: #9DB8F2; stroke-width: 3; stroke-dasharray: 7 7; stroke-linecap: round; opacity: .8; }
.pd-eje-rot { fill: var(--pd-texto-2, #A7B0B4); font-size: 12px; letter-spacing: 3px; }
.pd-trazo { fill: none; stroke: var(--pd-linea-2, #D9D4C9); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.pd-eje .pd-trazo { stroke: var(--pd-linea, #F1EDE4); stroke-width: 9; }
.pd-problemas .pd-trazo { stroke-width: 2.4; }
.pd-trazo.conector { stroke-width: 2.4; stroke-dasharray: 1 7; opacity: .85; }
.pd-caja-ext { fill: none; stroke: var(--pd-linea-2, #D9D4C9); stroke-width: 11; stroke-linecap: butt; }
.pd-caja-int { fill: none; stroke: var(--pd-fondo, #0B1016); stroke-width: 4.2; }
.pd-pulso { fill: none; stroke: #2ED9BF; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 97; opacity: 0; }
.pd-rot-linea { fill: var(--pd-texto, #E6E1D7); font-size: 13.5px; letter-spacing: 1.6px; font-weight: 600; text-transform: uppercase; }
.pd-vender .pd-rot-linea { font-size: 15px; letter-spacing: 4px; }
.pd-flecha { fill: none; stroke: var(--pd-linea-2, #D9D4C9); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pd-marca { stroke: var(--pd-linea, #F1EDE4); stroke-width: 4; stroke-linecap: round; }
.pd-marca.calido { stroke: #FFC98A; }
.pd-rot-marca { fill: var(--pd-texto-2, #A7B0B4); font-size: 12.5px; letter-spacing: .6px; }
.pd-rot-marca.calido { fill: #FFC98A; }
.pd-paso circle { fill: var(--pd-caja, #18222B); stroke: var(--pd-texto-2, #A7B0B4); stroke-width: 1.6; }
.pd-paso text { fill: var(--pd-texto, #E6E1D7); font-size: 10.5px; font-weight: 700; }
.pd-muesca path { stroke: var(--pd-linea, #F1EDE4); stroke-width: 4; stroke-linecap: round; }
.pd-muesca text { fill: var(--pd-texto-2, #A7B0B4); font-size: 12.5px; }
.pd-tenue { fill: var(--pd-texto-2, #A7B0B4); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; }
.pd-anillo { fill: var(--pd-fondo, #0B1016); stroke: var(--pd-linea, #F1EDE4); stroke-width: 2.6; }
.pd-parada.destacada .pd-anillo { stroke-width: 3.2; }
.pd-nucleo { fill: var(--pd-ia, #2ED9BF); }
.pd-est rect { fill: var(--pd-caja, #111A22); stroke: var(--pd-borde-est, rgba(46, 217, 191, .62)); stroke-width: 1.6; }
.pd-est-nom { fill: var(--pd-texto, #F1EDE4); font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: 2px; }
.pd-est-prio { fill: var(--pd-texto-2, #A7B0B4); font-size: 12px; letter-spacing: 2.2px; }
.pd-rot { fill: var(--pd-texto, #ECE8DF); font-family: var(--font-sans); font-size: 15px; font-weight: 500; paint-order: stroke; stroke: var(--pd-fondo, #0B1016); stroke-width: 5px; stroke-linejoin: round; }

/* ============================================================ ENTRADA: el plano entero, explorable */
.entrada-func { padding-bottom: clamp(48px, 6vw, 80px); }
.entrada-func { padding-top: calc(var(--barra) + clamp(40px, 6vw, 84px)); }
.entrada-func .titular { font-size: clamp(44px, 6.2vw, 96px); max-width: 21ch; margin: 18px 0 16px; }
.entrada-func .entrada { font-size: clamp(19px, 1.8vw, 24px); color: var(--texto-n); max-width: 46ch; }
.plano-metro {
  position: relative; margin-top: clamp(36px, 5vw, 64px); aspect-ratio: 1240 / 800;
  border-radius: 26px; background: radial-gradient(120% 90% at 70% 10%, #0F1A21 0%, var(--pd-fondo) 58%);
  border: 1px solid rgba(46, 217, 191, .16);
  box-shadow: 0 60px 140px -70px rgba(46, 217, 191, .45), inset 0 0 0 1px rgba(255, 255, 255, .02);
}
.plano-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 26px; transition: opacity .9s var(--curva); }
.plano-paradas { position: absolute; inset: 0; transition: opacity .6s; }
.pd-leyenda text { fill: #A7B0B4; font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .4px; }
.pd-leyenda .ly-ayuda { fill: #DCD7CC; }
.ly-llega { stroke: #9DB8F2; stroke-width: 3; stroke-dasharray: 7 6; stroke-linecap: round; }
.ly-dest { fill: var(--pd-fondo); stroke: #F1EDE4; stroke-width: 2.6; }
.ly-nuc { fill: #2ED9BF; }
.ly-ficha { fill: var(--pd-fondo); stroke: #F1EDE4; stroke-width: 2.2; }
.ly-marca { stroke: #F1EDE4; stroke-width: 3.5; stroke-linecap: round; }
.ly-doble { stroke: #D9D4C9; stroke-width: 2.4; }

/* paradas del plano: botones reales sobre el dibujo */
.pp {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: transparent; border: 0; padding: 0; cursor: pointer; z-index: 2;
}
.pp.destacada { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
.pp::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(46, 217, 191, 0); transition: box-shadow .25s, background .25s; }
.pp:hover::before, .pp:focus-visible::before { box-shadow: 0 0 0 3px #2ED9BF, 0 0 24px 4px rgba(46, 217, 191, .45); }
.pp[aria-expanded="true"]::before { box-shadow: 0 0 0 3px #FFC98A, 0 0 26px 6px rgba(255, 201, 138, .45); }
.pp:focus-visible { outline: 2px solid #2ED9BF; outline-offset: 6px; }
.pp::after {
  content: attr(data-nombre); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px);
  white-space: nowrap; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--texto-n);
  background: rgba(8, 12, 17, .94); border: 1px solid rgba(46, 217, 191, .45); border-radius: 8px; padding: 6px 10px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--curva); z-index: 5;
}
.pp:hover::after, .pp:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.pp[aria-expanded="true"]::after { opacity: 0; }
.plano-metro[data-solo]:not([data-solo=""]) .pp { opacity: .25; }
.plano-metro[data-solo="eje"] .pp[data-linea="eje"], .plano-metro[data-solo="vender"] .pp[data-linea="vender"], .plano-metro[data-solo="caja"] .pp[data-linea="caja"],
.plano-metro[data-solo="idi"] .pp[data-linea="idi"], .plano-metro[data-solo="cursos"] .pp[data-linea="cursos"],
.plano-metro[data-solo="incorporaciones"] .pp[data-linea="incorporaciones"], .plano-metro[data-solo="problemas"] .pp[data-linea="problemas"] { opacity: 1; }

/* índice de 7 filas (también es la leyenda «ver solo esta línea») */
.indice-lineas { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.il { display: flex; align-items: stretch; border: 1px solid var(--filete-n); border-radius: 14px; background: rgba(236, 232, 223, .025); transition: border-color .25s, background .25s; }
.il:hover, .il:focus-within, .il.encendida { border-color: rgba(46, 217, 191, .5); background: rgba(46, 217, 191, .05); }
.il-enlace { flex: 1; display: flex; align-items: center; gap: 14px; padding: 14px 16px; color: var(--texto-n); text-decoration: none; font-size: 15.5px; }
.il-trazo { width: 34px; height: 0; border-top: 5px solid #D9D4C9; border-radius: 3px; flex: none; }
.il-eje .il-trazo { border-top-width: 8px; border-color: #F1EDE4; }
.il-caja .il-trazo { height: 10px; border-top: 3px solid #D9D4C9; border-bottom: 3px solid #D9D4C9; border-radius: 0; }
.il-vender .il-trazo { width: 22px; height: 22px; border: 4px solid #D9D4C9; border-radius: 50%; margin: 0 6px; }
.il-problemas .il-trazo { border-top-width: 2px; }
.il-solo { flex: none; width: 48px; display: grid; place-items: center; border-left: 1px solid var(--filete-n); color: var(--texto-n-2); border-radius: 0 14px 14px 0; }
.il-solo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.il-solo:hover { color: var(--texto-n); }
.il-solo[aria-pressed="true"] { color: var(--noche); background: #2ED9BF; }
.ver-todas {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid rgba(236, 232, 223, .34); color: var(--texto-n); font-size: 15px; font-weight: 600;
}
.ver-todas::after { content: '+'; font-family: var(--font-mono); transition: transform .3s var(--curva); }
.ver-todas[aria-expanded="true"]::after { transform: rotate(45deg); }
.ver-todas:hover { border-color: var(--texto-n); }
.lista-paradas { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 28px; border-top: 1px solid var(--filete-n); padding-top: 22px; }
.lp-linea { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #2ED9BF; margin-bottom: 8px; }
.lista-paradas a { color: var(--texto-n); text-decoration: none; font-size: 15px; line-height: 1.9; border-bottom: 1px solid rgba(236, 232, 223, .2); }
.lista-paradas a:hover { border-color: #2ED9BF; }

/* ficha flotante del plano (misma ficha que la del capítulo: se copia de ella) */
.ficha-plano {
  position: absolute; z-index: 30; width: min(400px, 92%); max-height: 70vh; overflow: auto;
  background: #0F171E; color: var(--texto-n); border: 1px solid rgba(46, 217, 191, .45); border-radius: 18px;
  padding: 20px 22px 18px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .03);
}
.ficha-plano .ficha-capitulo { display: inline-block; margin-top: 4px; }

/* ============================================================ CARTELES (correspondencias con otras páginas) */
.carteles { padding-top: 0; padding-bottom: clamp(56px, 7vw, 96px); }
.carteles-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cartel { border-radius: 18px; padding: 22px 24px; background: linear-gradient(180deg, #111A22, #0D141A); border: 1px solid var(--filete-n); }
.cartel-cab { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; }
.cartel-cab a { color: var(--texto-n); text-decoration: none; border-bottom: 1px solid rgba(236, 232, 223, .3); }
.cartel-icono { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #F1EDE4; color: var(--noche); font-size: 15px; letter-spacing: 0; }
.cartel ul { display: flex; flex-wrap: wrap; gap: 8px; }
.cartel li a { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(236, 232, 223, .18); color: var(--texto-n-2); font-size: 14px; text-decoration: none; transition: color .2s, border-color .2s; }
.cartel li a:hover { color: var(--texto-n); border-color: rgba(46, 217, 191, .55); }

/* ============================================================ CAPÍTULOS: cabecera con «estás aquí» */
.bloque-doble > .seccion { padding-top: clamp(80px, 10vw, 140px); }
.cap-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 340px); gap: 40px; align-items: start; }
.cap-cabeza .h2 { max-width: 20ch; }
.cap-procedencia { font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; max-width: 34ch; margin-top: 6px; }
.cap-asesor { margin-top: 16px; font-size: 17px; color: var(--tinta-2); max-width: 54ch; padding-left: 16px; border-left: 2px solid var(--ia-p); }
.tema-noche .cap-asesor { color: var(--texto-n-2); border-color: var(--ia-n); }
.cap-mini { position: relative; }
/* «estás aquí»: el dibujo acercado a la estación o al tramo del capítulo, sin fondo propio y con los colores del tema */
.mini-plano { width: 100%; height: auto; display: block; overflow: hidden; border-radius: 14px; --pd-fondo: var(--noche); }
.tema-noche.alterna .mini-plano { --pd-fondo: var(--noche-2); }
.tema-papel .mini-plano {
  --pd-fondo: var(--papel); --pd-linea: #121A1E; --pd-linea-2: #3E484D; --pd-texto: #121A1E; --pd-texto-2: #4A5459;
  --pd-caja: #FFFDF8; --pd-borde-est: #08627F; --pd-ia: #08627F; --pd-tenue: rgba(18, 26, 30, .3);
}
.tema-papel.alterna .mini-plano { --pd-fondo: var(--papel-2); }
.aqui-halo { fill: rgba(255, 201, 138, .16); stroke: var(--brasa); stroke-width: 2.5; stroke-dasharray: 5 6; }
.tema-papel .aqui-halo { fill: rgba(181, 101, 43, .1); stroke: var(--calido-trazo); }
.mini-pie { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--texto-n-2); }
.tema-papel .mini-pie { color: var(--tinta-2); }
.mini-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--brasa); flex: none; }
.tema-papel .mini-punto { background: var(--calido-trazo); }

/* ============================================================ TRAMOS: la línea del capítulo, sus paradas y sus fichas */
.tramo {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 20px; align-items: start;
  margin-top: clamp(44px, 5vw, 72px); color: var(--tinta);
}
.tema-noche .tramo { color: var(--texto-n); }
.tramo::before { content: ''; position: absolute; left: 0; right: 0; top: 21px; height: 6px; border-radius: 3px; background: currentColor; }
.tramo-eje::before { height: 8px; top: 20px; }
.tramo-problemas::before { height: 3px; top: 22.5px; }
.est { position: relative; z-index: 1; margin-top: 3px; }
.est span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 8px 14px; border-radius: 12px; max-width: 150px; text-align: center; line-height: 1.3;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  background: var(--papel); border: 1.5px solid var(--ia-p); color: var(--tinta);
}
.tema-papel.alterna .est span { background: var(--papel-2); }
.tema-noche .est span { background: var(--noche); border-color: rgba(46, 217, 191, .65); color: var(--texto-n); }
.tema-noche.alterna .est span { background: var(--noche-2); }
.tramo-paradas { position: relative; z-index: 1; display: flex; gap: 18px; }
.parada { flex: 1 1 0; min-width: 0; position: relative; }
.parada.destacada { flex-grow: 1.25; }
.parada-nombre { font: inherit; letter-spacing: 0; }
.parada-boton { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 0; text-align: left; color: inherit; width: 100%; }
.parada-punto {
  flex: none; width: 22px; height: 22px; margin-top: 13px; border-radius: 50%; border: 4px solid currentColor; background: var(--papel);
  transition: transform .25s var(--curva), box-shadow .25s;
}
.tema-papel.alterna .parada-punto { background: var(--papel-2); }
.tema-noche .parada-punto { background: var(--noche); }
.tema-noche.alterna .parada-punto { background: var(--noche-2); }
.destacada .parada-punto { width: 34px; height: 34px; margin-top: 7px; box-shadow: inset 0 0 0 4px var(--papel), inset 0 0 0 10px var(--ia-p); }
.tema-papel.alterna .destacada .parada-punto { box-shadow: inset 0 0 0 4px var(--papel-2), inset 0 0 0 10px var(--ia-p); }
.tema-noche .destacada .parada-punto { box-shadow: inset 0 0 0 4px var(--noche), inset 0 0 0 10px var(--ia-n); }
.tema-noche.alterna .destacada .parada-punto { box-shadow: inset 0 0 0 4px var(--noche-2), inset 0 0 0 10px var(--ia-n); }
.parada-boton:hover .parada-punto, .parada-boton[aria-expanded="true"] .parada-punto { transform: scale(1.14); }
.parada-boton[aria-expanded="true"] .parada-punto { border-color: var(--calido-trazo); }
.tema-noche .parada-boton[aria-expanded="true"] .parada-punto { border-color: var(--brasa); }
.parada-texto { font-family: var(--font-serif); font-size: clamp(17px, 1.35vw, 19px); line-height: 1.2; text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.destacada .parada-texto { font-size: clamp(19px, 1.55vw, 22px); }
.parada-boton:hover .parada-texto { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.parada-boton::after {
  content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor;
  font-family: var(--font-mono); font-size: 13px; line-height: 1; opacity: .6; margin-top: -4px; transition: transform .3s var(--curva);
}
.parada-boton[aria-expanded="true"]::after { transform: rotate(45deg); }
.con-ficha-abierta .parada-boton::after { display: none; }
.consigue { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--tinta-2); max-width: 30ch; }
.tema-noche .consigue { color: var(--texto-n-2); }
.marca-eje { flex: 0 0 34px; position: relative; height: 48px; }
.marca-tick { position: absolute; left: 14px; top: 9px; width: 6px; height: 30px; border-radius: 3px; background: currentColor; }
.marca-calida .marca-tick { background: var(--calido-trazo); }
.tema-noche .marca-calida .marca-tick { background: var(--brasa); }
.bajo-tramo { margin-top: clamp(30px, 3.5vw, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.marca-linea { display: flex; align-items: flex-start; gap: 14px; max-width: 74ch; font-size: 16px; color: var(--tinta-2); }
.tema-noche .marca-linea { color: var(--texto-n-2); }
.marca-linea b { color: var(--tinta); font-weight: 600; }
.tema-noche .marca-linea b { color: var(--texto-n); }
.marca-tick-i { flex: none; width: 6px; height: 24px; border-radius: 3px; background: currentColor; margin-top: 1px; }
.marca-calida .marca-tick-i { background: var(--calido-trazo); }
.muesca { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.muesca-tick { width: 30px; height: 4px; border-radius: 2px; background: var(--tinta); }

/* fichas */
.ficha {
  position: absolute; z-index: 40; top: calc(100% + 14px); left: 0; width: min(430px, 82vw);
  background: #FFFDF8; color: var(--tinta); border: 1px solid var(--filete-p); border-radius: 18px; padding: 18px 20px 16px;
  box-shadow: 0 34px 80px -34px rgba(18, 26, 30, .55);
  text-align: left; font-family: var(--font-sans);
}
.tema-noche .ficha { background: #111A22; color: var(--texto-n); border-color: rgba(46, 217, 191, .35); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85); }
.ficha[hidden] { display: none; }
.parada:nth-last-child(-n+2):not(:first-child) > .ficha { left: auto; right: 0; }
.ficha-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ficha-linea { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ia-p); }
.tema-noche .ficha-linea, .ficha-plano .ficha-linea { color: var(--ia-n); }
.ficha-cerrar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-size: 14px; opacity: .75; flex: none; }
.ficha-cerrar:hover { opacity: 1; }
.ficha-titulo { font-family: var(--font-serif); font-size: 23px; line-height: 1.15; margin-top: 6px; }
.ficha-consigue { margin-top: 8px; font-size: 16px; color: var(--tinta-2); }
.tema-noche .ficha-consigue, .ficha-plano .ficha-consigue { color: var(--texto-n-2); }
.ficha-hace { margin-top: 12px; display: grid; gap: 8px; }
.ficha-hace li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.5; }
.ficha-hace li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--ia-p); }
.tema-noche .ficha-hace li::before, .ficha-plano .ficha-hace li::before { background: var(--ia-n); }
.ficha-pie { margin-top: 14px; border-top: 1px solid var(--filete-p); padding-top: 12px; display: grid; gap: 10px; }
.tema-noche .ficha-pie, .ficha-plano .ficha-pie { border-color: var(--filete-n); }
.ficha-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ficha-ir { font-size: 13.5px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--filete-p); text-align: left; max-width: 48%; }
.tema-noche .ficha-ir, .ficha-plano .ficha-ir { border-color: var(--filete-n); }
.ficha-ir:hover { border-color: currentColor; }
.ficha-ir:only-child[data-ir] { margin-left: auto; }
.ficha-enlaces { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14.5px; }
/* pieza central: las fichas de 6 y 7 van abiertas en el capítulo («Lo dibuja», «Lo vigila», «Lo mejora») */
.ficha.ficha-abierta { position: static; width: auto; margin-top: 18px; padding: 0; background: none; border: 0; box-shadow: none; }
.ficha-abierta .ficha-hace { gap: 10px; }
.ficha-abierta .ficha-hace li { padding: 14px 16px 14px 38px; border-radius: 14px; background: rgba(236, 232, 223, .04); border: 1px solid var(--filete-n); }
.ficha-abierta .ficha-hace li::before { left: 18px; top: 21px; width: 9px; height: 9px; }
.ficha-abierta b { color: var(--ia-n); font-weight: 600; }
.ficha-abierta .ficha-pie { border: 0; padding-top: 0; }

/* ============================================================ 01 · Plan de Empresa */
.rec { margin-top: clamp(48px, 6vw, 80px); }
.rec-plan { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.rp-carta, .rp-grafico { border-radius: 18px; padding: 20px 22px; background: #0F171E; color: var(--texto-n); box-shadow: 0 30px 70px -44px rgba(8, 12, 17, .9); }
.rp-cab { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; display: flex; gap: 10px; align-items: center; }
.ia-chispa { color: var(--ia-n); }
.rp-barras { margin-top: 18px; display: grid; gap: 12px; }
.rp-barras i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--ia-n) var(--w), rgba(236, 232, 223, .08) var(--w)); }
.rp-grafico svg { width: 100%; height: auto; display: block; }
.rp-prevista { fill: none; stroke: rgba(236, 232, 223, .45); stroke-width: 3; stroke-dasharray: 8 8; }
.rp-real { fill: none; stroke: var(--ia-n); stroke-width: 4; stroke-linecap: round; }
.rp-hilo { fill: none; stroke: var(--ambar-n); stroke-width: 2; stroke-dasharray: 3 5; }
.rp-rombo { fill: var(--ambar-n); }
.rp-area { fill: var(--noche); stroke: var(--ambar-n); stroke-width: 3; }
.rp-grafico text { fill: #A7B0B4; font-family: var(--font-mono); font-size: 13px; }
.rp-decide { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.rp-aviso { font-family: var(--font-serif); font-size: 20px; line-height: 1.3; }
.rp-accion { font-size: 15px; }
.rp-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-estado, .rpr-resultado, .rc-estado { font-family: var(--font-mono); font-size: 13px; color: var(--calido-titulo); min-height: 1em; }
.rc-estado { margin-left: 8px; }
.boton-mini {
  display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid currentColor; font-size: 14px; font-weight: 600; line-height: 1.1; color: inherit; background: transparent;
  transition: transform .2s var(--curva), background .2s, color .2s;
}
.boton-mini.calido { background: var(--tinta); color: var(--marfil); border-color: var(--tinta); }
.boton-mini:hover { transform: translateY(-1px); }
.boton-mini[disabled] { opacity: .45; transform: none; cursor: default; }
.tema-noche .boton-mini.calido, .ventana .boton-mini.calido { background: var(--marfil); color: var(--noche); border-color: var(--marfil); }
.panel-tu .boton-mini.calido { background: var(--tinta); color: var(--marfil); border-color: var(--tinta); }

/* ============================================================ 02 · Procesos */
.rec-procesos { border-radius: 22px; padding: clamp(22px, 3vw, 36px); background: linear-gradient(180deg, rgba(46, 217, 191, .05), rgba(46, 217, 191, 0)); border: 1px solid var(--filete-n); }
.rpr-areas { width: 100%; height: auto; display: block; }
.rpr-areas text { fill: rgba(236, 232, 223, .32); font-family: var(--font-mono); font-size: 14px; letter-spacing: 2.4px; }
.cadena { margin-top: 22px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.cadena::before { content: ''; position: absolute; left: 10%; right: 10%; top: 14px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ia-n), rgba(46, 217, 191, .35)); }
.cadena li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .5px; }
.eslabon { width: 32px; height: 32px; border-radius: 50%; background: var(--noche); border: 3px solid var(--ia-n); position: relative; z-index: 1; }
.eslabon.rombo { border-radius: 4px; transform: rotate(45deg) scale(.86); border-color: var(--ambar-n); background: rgba(238, 194, 46, .2); box-shadow: 0 0 0 8px rgba(238, 194, 46, .1); }
.cadena .atasco { color: var(--ambar-n); }
.rpr-notas { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 15.5px; color: var(--texto-n-2); }
.rombo-mini { display: inline-block; width: 10px; height: 10px; background: var(--ambar-n); transform: rotate(45deg); margin-right: 10px; vertical-align: 1px; }
.tema-papel .rombo-mini { background: var(--ambar-p); }
.anillo-mini { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ia-n); margin-right: 10px; vertical-align: -1px; }
.rpr-cambio { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; border-style: dashed; }
.rpr-cambio .panel-titulo { margin: 0; }
.rpr-cambio p { margin: 0; display: flex; gap: 8px; align-items: center; }

/* ============================================================ 03 · Cabina de IA */
.ventana { border-radius: 20px; overflow: hidden; background: #0F171E; color: var(--texto-n); box-shadow: 0 44px 90px -50px rgba(8, 12, 17, .9); max-width: 900px; }
.ventana-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 20px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .3px; color: var(--texto-n-2); border-bottom: 1px solid var(--filete-n); background: #131D25; }
.ventana-barra b { color: var(--texto-n); font-weight: 600; }
.ventana-luz { width: 9px; height: 9px; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 0 4px rgba(255, 201, 138, .18); margin-right: 6px; }
.ventana-cuerpo { padding: 20px; display: grid; gap: 14px; }
.burbuja { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; font-size: 15.5px; max-width: 720px; }
.burbuja .quien { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; margin-right: 6px; }
.tu-dice { background: rgba(255, 201, 138, .1); border: 1px solid rgba(255, 201, 138, .35); justify-self: end; }
.tu-dice .quien { color: var(--brasa); }
.ia-dice { background: rgba(46, 217, 191, .07); border: 1px solid rgba(46, 217, 191, .3); font-family: var(--font-mono); font-size: 14.5px; }
.ia-dice .quien { color: var(--ia-n); }
.choque { font-size: 14.5px; color: var(--ambar-n); padding-left: 4px; }
.nunca-suelto { margin-top: clamp(44px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 760px; }
.nunca-suelto .h3 { font-family: var(--font-serif); }
.autonomia { font-family: var(--font-serif); font-style: italic; font-size: 20px; }

/* ============================================================ 04 · Lo que sabe tu empresa */
.rec-sabe { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.rs-relieve { width: 100%; height: auto; display: block; background: radial-gradient(circle at 30% 40%, rgba(46, 217, 191, .08), transparent 60%); border-radius: 18px; }
.rs-puntos circle { fill: rgba(46, 217, 191, .5); }
.rs-zona { fill: rgba(236, 232, 223, .03); stroke: rgba(236, 232, 223, .25); stroke-dasharray: 4 6; }
.rs-viejo { fill: rgba(236, 232, 223, .18); stroke: var(--ambar-n); stroke-width: 2; }
.rs-relieve text { fill: var(--ambar-n); font-family: var(--font-mono); font-size: 14px; }
.rs-sube { fill: none; stroke: var(--ia-n); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.rs-pregunta { display: grid; gap: 12px; }
.cartela-ue { margin-top: 36px; display: inline-flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 14px; border: 1px solid rgba(157, 184, 242, .35); background: rgba(157, 184, 242, .06); font-size: 16px; }
.ue-estrellas { width: 30px; height: 30px; border-radius: 50%; flex: none; background: radial-gradient(circle, #9DB8F2 0 2px, transparent 2.5px) 0 0 / 10px 10px; border: 1px solid rgba(157, 184, 242, .6); }

/* ============================================================ 05 · Tus herramientas */
.terminal { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(260px, 340px) 60px minmax(0, 1fr); align-items: center; gap: 0; }
.tramo-terminal { display: block; margin-top: 0; padding: 26px 24px; border-radius: 22px; border: 1.5px solid rgba(46, 217, 191, .6); background: #0F171E; }
.tramo-terminal::before { display: none; }
.tramo-terminal .est { margin: 0 0 18px; }
.tramo-terminal .est span { border: 0; padding: 0; min-height: 0; font-size: 13px; color: var(--ia-n); background: none; }
.tramo-terminal .tramo-paradas { display: block; }
.tramo-terminal .ficha { left: 0; right: auto; }
.haz { height: 4px; background: linear-gradient(90deg, rgba(46, 217, 191, .9), rgba(46, 217, 191, .1)); box-shadow: 0 0 18px rgba(46, 217, 191, .6); border-radius: 2px; }
.terminal .cinta { margin-top: 0; }
.conexiones .aviso-peq { color: var(--texto-n-2); }
.tema-noche .chip { background: #111A22; color: var(--texto-n); border-color: var(--filete-n); }
.tema-noche .chip .logo-marca { filter: grayscale(1) brightness(2.2); opacity: .55; }
.tema-noche .chip .logo-marca.monograma { filter: grayscale(1) brightness(1.6); }
.tema-noche .chip-marca:hover .logo-marca, .tema-noche .chip-marca:focus-within .logo-marca { filter: none; opacity: 1; }

/* ============================================================ 06 · Vender: un circuito */
.circuito { position: relative; margin-top: clamp(48px, 6vw, 80px); padding: 64px clamp(28px, 4vw, 64px); }
.circuito::before { content: ''; position: absolute; inset: 22px 0; border: 7px solid var(--tinta); border-radius: 150px; pointer-events: none; }
.circuito-via { display: none; }
.circuito-pasos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 44px; padding: 22px 34px; }
.circuito-pasos > li:nth-child(4) { grid-column: 3; grid-row: 2; }
.circuito-pasos > li:nth-child(5) { grid-column: 2; grid-row: 2; }
.circuito-pasos > li:nth-child(6) { grid-column: 1; grid-row: 2; }
.etapa { position: relative; }
.etapa-num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; background: var(--tinta); color: var(--papel);
}
.tema-noche .etapa-num { background: var(--texto-n); color: var(--noche); }
.etapa-titulo { font-family: var(--font-serif); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.18; }
.etapa p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--tinta-2); }
.tema-noche .etapa p { color: var(--texto-n-2); }
.etapa.parada .parada-punto { display: none; }
.etapa.parada .parada-boton { gap: 8px; }
.etapa.destacada { border-radius: 18px; padding: 16px 18px 18px; margin: -16px -18px 0; background: var(--calido-panel); border: 1px solid var(--calido-borde); box-shadow: 0 30px 70px -44px rgba(160, 90, 20, .6); }
.etapa.destacada .etapa-num { background: var(--calido-trazo); color: #fff; }
.tema-noche .etapa.destacada { color: var(--tinta); }
.tema-noche .etapa.destacada .consigue { color: var(--tinta-2); }
.est-circuito { position: absolute; margin: 0; z-index: 2; }
.est-c1 { left: -46px; top: 50%; transform: translateY(-50%); }
.est-c1 span { max-width: 112px; }
.est-c2 { right: 120px; top: 2px; }
.est-c3 { right: 120px; bottom: 2px; }
.est-circuito span { background: var(--papel); }
.tema-papel.alterna .est-circuito span { background: var(--papel-2); }
.rec-vender { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); gap: 20px; align-items: center; }
.rv-campana { display: grid; gap: 10px; }
.rv-fila { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; }
.rv-fila b { font-family: var(--font-mono); font-size: 18px; color: var(--calido-titulo); }
.rv-enfria { height: 60px; display: grid; place-items: center; }
.rv-punto { width: 22px; height: 22px; border-radius: 50%; background: var(--ia-p); box-shadow: 0 0 0 8px rgba(8, 98, 127, .14); }
.rv-respuesta { background: var(--ia-fondo-p); border-color: rgba(8, 98, 127, .35); color: var(--ia-tinta-p); }
.cap-garantia { margin-top: 32px; max-width: 70ch; font-size: 16.5px; color: var(--tinta-2); padding-left: 16px; border-left: 3px solid var(--calido-trazo); }
.tema-noche .cap-garantia { color: var(--texto-n-2); border-color: var(--brasa); }
.cap-garantia + .cap-garantia { margin-top: 12px; }

/* ============================================================ 07 · Caja: vía doble */
.via-doble { position: relative; margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 20px; align-items: start; color: var(--texto-n); }
.via-doble::before, .via-doble::after { content: ''; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: currentColor; }
.via-doble::before { top: 16px; }
.via-doble::after { top: 28px; }
.vd-pasos { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; }
.vd-pasos .etapa-num { margin-bottom: 18px; outline: 6px solid var(--noche); }
.vd-pasos .etapa:first-child::before {
  content: ''; position: absolute; left: 40px; right: -14px; top: 10px; height: 26px; border-radius: 4px;
  background: repeating-linear-gradient(45deg, rgba(238, 194, 46, .45) 0 6px, transparent 6px 12px); border: 1px solid rgba(238, 194, 46, .6);
}
.vd-pasos .etapa.destacada { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; color: inherit; }
.tema-noche .vd-pasos .etapa.destacada .consigue { color: var(--texto-n-2); }
.vd-pasos .etapa.destacada .parada-texto { color: var(--brasa); }
.rec-caja { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.rc-saldo { border-radius: 18px; padding: 20px 22px; background: #111A22; border: 1px solid var(--filete-n); display: grid; gap: 10px; font-family: var(--font-mono); font-size: 14.5px; }
.rc-linea { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--filete-n); }
.rc-linea b { font-size: 17px; color: var(--texto-n); }
.rc-linea.rayado { background: repeating-linear-gradient(45deg, rgba(238, 194, 46, .14) 0 6px, transparent 6px 12px); padding: 6px 8px; border-radius: 6px; color: var(--ambar-n); }
.rc-linea.rayado b { color: var(--ambar-n); }
.rc-linea.total { border-bottom: 0; color: var(--ia-n); }
.rc-linea.total b { color: var(--ia-n); font-size: 20px; }
.rc-ensayo { border-radius: 18px; padding: 20px 22px; background: var(--calido-panel); color: var(--tinta); border: 1px solid var(--calido-borde); display: grid; align-content: center; gap: 14px; }
.interruptor { display: inline-flex; align-items: center; gap: 14px; font-weight: 600; font-size: 16px; color: var(--tinta); }
.int-bola { width: 52px; height: 30px; border-radius: 15px; background: var(--papel-2); border: 1px solid var(--calido-borde); position: relative; flex: none; transition: background .25s; }
.int-bola::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--tinta); transition: transform .25s var(--curva); }
.interruptor[aria-checked="true"] .int-bola { background: var(--calido-trazo); }
.interruptor[aria-checked="true"] .int-bola::after { transform: translateX(22px); background: #fff; }
.rc-dias { font-family: var(--font-serif); font-size: 22px; color: var(--calido-titulo); min-height: 1.2em; }
.rc-pista { width: 100%; height: auto; display: block; }
.rc-pista .pista-fondo { fill: var(--papel-2); }
.rc-pista .pista-lleno { fill: var(--calido-trazo); transform-box: fill-box; transform-origin: left center; transform: scaleX(1); transition: transform .9s var(--curva); }
.rec-caja.ensayando .pista-lleno { transform: scaleX(.52); }
.rc-pista text { fill: var(--calido-caja); font-family: var(--font-mono); font-size: 12px; }
.rc-pista .pista-marca { stroke: var(--calido-caja); stroke-width: 1.5; }

/* ============================================================ 08 · Lo que la renueva */
.escena .rec { margin-top: 32px; }
.rec-idi { margin-top: 26px; }
.rec-idi svg { width: 100%; height: auto; display: block; }
.ri-borde { stroke: rgba(18, 26, 30, .3); stroke-width: 1.5; stroke-dasharray: 2 9; fill: none; }
.ri-sonda { fill: none; stroke: var(--ia-p); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 10; }
.ri-sonda-punta { fill: var(--ia-p); }
.rec-idi + .tramo { margin-top: 10px; }
.rec-cursos, .rec-incorp { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; }
.aguja svg { width: 100%; height: auto; display: block; }
.ag-arco { fill: none; stroke: var(--filete-p); stroke-width: 14; stroke-linecap: round; }
.ag-arco.lleno { stroke: var(--ia-p); stroke-dasharray: 251; stroke-dashoffset: 70; }
.ag-aguja { stroke: var(--tinta); stroke-width: 4; stroke-linecap: round; transform-origin: 100px 110px; transform: rotate(38deg); }
.aguja circle { fill: var(--tinta); }
.rcu-frases, .rin-frases { display: grid; gap: 10px; }
.rcu-frases li, .rin-frases li { font-family: var(--font-serif); font-size: clamp(20px, 1.8vw, 25px); line-height: 1.25; padding-left: 22px; position: relative; }
.rcu-frases li::before, .rin-frases li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; border: 3px solid var(--ia-p); }
.testigo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; font-family: var(--font-mono); font-size: 13px; letter-spacing: .5px; text-align: center; }
.testigo::before { content: ''; position: absolute; left: 16%; right: 16%; top: 13px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--filete-p), var(--brasa)); }
.testigo li { display: grid; justify-items: center; gap: 10px; }
.testigo li::before { content: ''; width: 30px; height: 30px; border-radius: 50%; background: var(--papel); border: 3px solid var(--calido-trazo); position: relative; z-index: 1; }
.testigo li:last-child::before { background: var(--brasa); box-shadow: 0 0 0 8px rgba(255, 201, 138, .3); }

/* ============================================================ Lo que llega + nota «en construcción» */
.franja-llega { padding-top: clamp(56px, 7vw, 96px); padding-bottom: 24px; }
.llega { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 28px; align-items: start; border-top: 1px dashed var(--plano-p); padding-top: 26px; }
.llega-cab { display: grid; gap: 12px; justify-items: start; }
.llega-cab .h3 { font-family: var(--font-serif); }
.llega-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.llega-lista li { display: flex; gap: 14px; align-items: baseline; font-size: 16px; color: var(--tinta-2); }
.llega-tramo { flex: none; width: 34px; border-top: 3px dashed var(--plano-p); transform: translateY(-4px); }
.nota-construccion { background: var(--papel-2); padding: 8px var(--margen) clamp(56px, 7vw, 96px); }
.nota-construccion p { max-width: var(--ancho); margin: 0 auto; font-size: 13.5px; line-height: 1.55; color: var(--tinta-2); }

/* ============================================================ CIERRE: el plano entero, encendido */
.cierre-plano { overflow: hidden; }
.cierre-plano .capa { position: relative; min-height: 440px; display: flex; flex-direction: column; justify-content: center; }
.cierre-dibujo { position: absolute; right: -6%; top: 50%; width: 64%; transform: translateY(-50%); opacity: .55; pointer-events: none; }
.cierre-svg { width: 100%; height: auto; display: block; --pd-fondo: #080C11; }
.cierre-plano .h2, .cierre-plano .entrada, .cierre-cruce, .cierre-plano .acciones, .cierre-enlaces { position: relative; max-width: 560px; }
.cierre-cruce { font-family: var(--font-mono); font-size: 14px; letter-spacing: .3px; color: var(--ia-n); border-left: 2px solid currentColor; padding-left: 14px; }
.cierre-plano .acciones { margin-top: 26px; }
.cierre-enlaces { margin-top: 22px; color: var(--texto-n-2); font-size: 16px; }

/* ============================================================ «Estás aquí» en móvil (barra de 32 px) y pausa (como la portada) */
.estas-aqui { display: none; }
.pausa {
  position: fixed; z-index: 160; left: 18px; bottom: 18px; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--texto-n-2); background: rgba(8, 12, 17, .8);
  border: 1px solid rgba(236, 232, 223, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: color .25s, border-color .25s;
}
.pausa:hover, .pausa:focus-visible { color: var(--texto-n); border-color: rgba(236, 232, 223, .55); }
.pausa-icono { width: 10px; height: 11px; display: inline-block; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.pausa[aria-pressed="true"] .pausa-icono { border: 0; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.pausa-etiqueta {
  position: absolute; left: 46px; top: 50%; transform: translate(-6px, -50%); white-space: nowrap; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .4px; color: var(--texto-n); background: rgba(8, 12, 17, .92); border: 1px solid rgba(236, 232, 223, .18); border-radius: 6px;
  padding: 6px 10px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--curva);
}
.pausa:hover .pausa-etiqueta, .pausa:focus-visible .pausa-etiqueta { opacity: 1; transform: translate(0, -50%); }
.pausa:focus-visible { outline-color: var(--ia-n); }

/* ============================================================ MOVIMIENTO (solo sin «movimiento reducido» y sin pausa) */
@media (prefers-reduced-motion: no-preference) {
  html:not(.quieto) .plano-svg .pd-pulso, html:not(.quieto) .cierre-svg .pd-pulso { opacity: .95; animation: pdPulso 7s linear infinite; }
  html:not(.quieto) .pd-idi .pd-pulso { animation-duration: 9s; }
  html:not(.quieto) .pd-vender .pd-pulso { animation-duration: 6s; }
  html:not(.quieto) .aqui-halo { animation: aquiLatido 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  html:not(.quieto) .cap.vista .rp-barras i { animation: rellena 2.6s var(--curva) both; }
  html:not(.quieto) .cap.vista .rp-real { stroke-dasharray: 700; animation: traza 2.4s var(--curva) both; }
  html:not(.quieto) .rv-punto { animation: enfria 5s ease-in-out infinite; }
  html:not(.quieto) .cap.vista .ri-sonda { animation: sonda 1.6s linear 4; }
  html:not(.quieto) .cap.vista .rs-zona { animation: zona 3s ease-in-out both; }
  html:not(.quieto) .haz { animation: haz 3.2s ease-in-out infinite; }
}
@keyframes pdPulso { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes aquiLatido { 0%, 100% { transform: scale(.8); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes rellena { from { background-size: 0 100%; } }
@keyframes traza { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
@keyframes atasco { 50% { box-shadow: 0 0 0 16px rgba(238, 194, 46, .05); } }
@keyframes enfria { 0%, 100% { background: var(--ia-p); } 45% { background: #9DB8F2; box-shadow: 0 0 0 2px rgba(157, 184, 242, .2); } 70% { background: var(--calido-trazo); } }
@keyframes sonda { to { stroke-dashoffset: -40; } }
@keyframes aguja { from { stroke-dashoffset: 251; } }
@keyframes rombo { 0% { transform: translate(40px, 60px) rotate(45deg); } 50% { transform: translate(380px, 60px) rotate(225deg); fill: var(--ambar-p); } 100% { transform: translate(40px, 60px) rotate(405deg); fill: var(--ia-p); } }
@keyframes zona { from { fill: rgba(236, 232, 223, 0); } to { fill: rgba(46, 217, 191, .22); } }
@keyframes viejo { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes haz { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
html.quieto .cinta-lote { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .plano-svg, .plano-paradas, .pp::before, .pp::after, .parada-punto, .parada-boton::after, .ver-todas::after, .int-bola, .int-bola::after, .il, .boton-mini { transition: none; }
}

/* ============================================================ MÓVIL Y TABLETA (999 px o menos): sin plano grande; tramos en vertical */
@media (max-width: 1199px) {
  .rec-plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rp-decide { grid-column: 1 / -1; }
  .circuito-pasos { gap: 56px 28px; padding: 22px 12px; }
}
@media (max-width: 999px) {
  .plano-metro { display: none; }
  .indice-lineas { grid-template-columns: minmax(0, 1fr); }
  .il-solo { display: none; }
  .estas-aqui {
    display: flex; position: fixed; z-index: 150; top: var(--barra); left: 0; right: 0; height: 32px; align-items: center; gap: 10px;
    padding: 0 16px; background: rgba(8, 12, 17, .94); color: var(--texto-n); font-family: var(--font-mono); font-size: 12px; letter-spacing: .6px;
    border-bottom: 1px solid rgba(46, 217, 191, .2); opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .estas-aqui.si { opacity: 1; }
  .pausa { left: auto; right: 14px; bottom: 14px; }
  .pausa-etiqueta { left: auto; right: 46px; }
  .ea-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--brasa); flex: none; }
  html { scroll-padding-top: calc(var(--barra) + 52px); }
  .carteles-rejilla { grid-template-columns: minmax(0, 1fr); }
  .cap-cabeza { grid-template-columns: minmax(0, 1fr); }
  .cap-mini { display: none; }
  /* diagrama de vagón: estación de salida, paradas con nombre y estación de llegada, en una columna */
  .tramo { display: block; padding-left: 0; }
  .tramo::before { left: 17px; right: auto; top: 20px; bottom: 20px; width: 6px; height: auto; }
  .tramo-eje::before { width: 8px; left: 16px; }
  .tramo-problemas::before { width: 3px; left: 18.5px; }
  .est { margin: 0; }
  .est span { min-height: 40px; }
  .tramo-paradas { flex-direction: column; gap: 26px; margin: 26px 0; }
  .parada-boton { flex-direction: row; align-items: flex-start; gap: 16px; }
  .parada-punto { margin: 2px 0 0 9px; }
  .destacada .parada-punto { margin: -4px 0 0 3px; }
  .parada-boton::after { margin: 2px 0 0 auto; flex: none; }
  .consigue, .parada > .ficha { margin-left: 56px; }
  .est span { max-width: none; }
  .ficha { position: static; width: auto; margin-top: 12px; }
  .ficha.ficha-abierta { margin-left: 56px; }
  .marca-eje { padding-top: 0; }
  .marca-eje { flex: none; height: 6px; }
  .marca-tick { left: 7px; top: 0; width: 26px; height: 6px; }
  .muesca { margin-left: 4px; }
  .rec-plan, .rec-sabe, .rec-caja, .rec-vender, .rec-cursos, .rec-incorp, .terminal, .llega { grid-template-columns: minmax(0, 1fr); }
  .rv-enfria { display: none; }
  .haz { width: 4px; height: 40px; margin: 0 0 0 30px; }
  .cadena { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cadena::before { left: 14px; right: auto; top: 10px; bottom: 10px; width: 4px; height: auto; }
  .cadena li { flex-direction: row; text-align: left; }
  .circuito { padding: 0; margin-top: 40px; }
  .circuito::before { inset: 0 auto 0 17px; width: 6px; border: 0; border-radius: 3px; background: var(--tinta); }
  .circuito-pasos { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 56px; gap: 34px; }
  .circuito-pasos > li:nth-child(n) { grid-column: auto; grid-row: auto; }
  .etapa-num { position: absolute; left: -54px; top: 0; }
  .etapa.destacada { margin: 0 0 0 -10px; }
  .etapa.destacada .etapa-num { left: -44px; }
  .est-circuito { display: none; }
  .via-doble { display: block; }
  .via-doble::before, .via-doble::after { left: 12px; right: auto; top: 20px; bottom: 20px; width: 4px; height: auto; }
  .via-doble::after { left: 24px; }
  .vd-pasos { grid-template-columns: minmax(0, 1fr); padding-left: 56px; margin: 26px 0; }
  .vd-pasos .etapa:first-child::before { display: none; }
  .vd-pasos .etapa.destacada { margin: 0 0 0 -10px; }
  .llega-lista { grid-template-columns: minmax(0, 1fr); }
  .cierre-dibujo { position: relative; width: 100%; right: auto; top: auto; transform: none; margin-bottom: 24px; opacity: .7; }
  .cierre-plano .capa { min-height: 0; }
}
@media (max-width: 639px) {
  .tema-noche .chip .logo-marca, .chip .logo-marca { filter: none; opacity: 1; }
  .ventana-barra { font-size: 12px; }
  .ficha-ir { max-width: 100%; }
}

/* ============================================================ v3.1 (2026-10-12): hallazgos de las tres críticas
   Entrada como la portada (texto a la izquierda, el plano entero a la derecha y a sangre, dentro del primer pantallazo),
   BPM con carriles, fichas que empujan en vez de tapar, recreaciones en tarjeta, cinta firmada de 3 filas, pausa que lo para todo. */
html.quieto .marca-nombre { animation: none; background-position: 0% 50%; }

/* --- Entrada */
.entrada-func { padding-top: calc(var(--barra) + clamp(28px, 3vw, 40px)); }
.entrada-func .migas { margin-bottom: 22px; }
.entrada-func .antetitulo { margin: 0; }
.entrada-func .titular { font-size: clamp(44px, 6.2vw, 96px); max-width: 16ch; margin: 18px 0 16px; text-wrap: balance; }
.entrada-func .entrada { font-size: clamp(18px, 1.6vw, 21px); color: var(--texto-n-2); max-width: 40ch; }
@media (min-width: 1200px) {
  .entrada-rejilla { --sangre: max(0px, calc((100vw - var(--ancho)) / 2 - 24px)); display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 36px; align-items: center; }
  .entrada-func .titular { font-size: clamp(52px, 4.4vw, 66px); line-height: 1; max-width: none; }
  .entrada-rejilla .plano-metro { margin-top: 0; margin-right: calc(-1 * var(--sangre)); }
}

/* --- ficha del plano: al tocar, hoja que sube desde abajo (v3 §1b) */
.ficha-plano.hoja { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto !important; width: auto; max-height: 70vh; z-index: 200; }

/* --- fichas abiertas de la pieza central (6 y 7): apiladas, a todo el ancho del texto */
.fichas-abiertas { margin-top: 26px; display: grid; gap: 12px; max-width: 880px; }
.fichas-abiertas .ficha.ficha-abierta { margin-top: 0; }

/* --- 02 · BPM de verdad */
.bpm-marco { position: relative; }
.bpm { width: 100%; height: auto; display: block; font-family: var(--font-mono); }
.bpm-carril rect { fill: rgba(236, 232, 223, .028); stroke: rgba(236, 232, 223, .08); stroke-width: 1; }
.bpm-carril.vacio rect { fill: none; }
.bpm-carril text { fill: #A7B0B4; font-size: 11.5px; letter-spacing: 1.4px; }
.bpm-carril.vacio text { fill: #8E989D; }
.bpm-sep { stroke: rgba(236, 232, 223, .16); stroke-width: 1; }
.bpm-con { fill: none; stroke: #A7B0B4; stroke-width: 2; }
.bpm-punta { fill: #A7B0B4; }
.bpm-no { stroke-dasharray: 5 5; }
.bpm-decision path { fill: #111A22; stroke: #F1EDE4; stroke-width: 2; }
.bpm-decision text { fill: #F1EDE4; font-size: 15px; font-weight: 700; }
.bpm-dec-txt, .bpm-si, .bpm-no-txt { fill: #CFC9BE; font-size: 12px; }
.bpm-paso rect { fill: #111A22; stroke: rgba(46, 217, 191, .7); stroke-width: 1.6; transition: stroke .5s, fill .5s; }
.bpm-t { fill: #F1EDE4; font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.bpm-p { fill: #B9C1C4; font-size: 10.5px; }
.bpm-quien { fill: none; stroke: #B9C1C4; stroke-width: 1.4; }
.bpm-atasco rect { stroke: var(--ambar-n); stroke-width: 2.6; fill: rgba(238, 194, 46, .12); }
.bpm-nota-atasco rect { fill: var(--ambar-n); }
.bpm-nota-atasco text { fill: var(--ambar-n); font-size: 12px; }
.bpm-nota-mejora { opacity: 0; transition: opacity .5s; }
.bpm-nota-mejora path { fill: none; stroke: var(--ia-n); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bpm-nota-mejora text { fill: var(--ia-n); font-size: 12px; }
.bpm-nota-atasco { transition: opacity .5s; }
.rec-procesos.aprobado .bpm-atasco rect { stroke: var(--ia-n); fill: rgba(46, 217, 191, .12); }
.rec-procesos.aprobado .bpm-nota-atasco { opacity: 0; }
.rec-procesos.aprobado .bpm-nota-mejora { opacity: 1; }
.rpr-pie { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 32px; }
.rpr-pie .rpr-atasco { font-size: 15.5px; color: var(--texto-n-2); margin-top: 14px; }
.rpr-cambio { margin-top: 0; display: grid; gap: 10px; border-style: dashed; }
.rpr-mes { font-family: var(--font-mono); font-size: 13.5px; color: var(--calido-caja); }
.rec-procesos.aprobado .rpr-mes { color: var(--calido-titulo); font-weight: 700; }

/* --- 03 · Cabina: las dos mitades de las automatizaciones, rotuladas */
.ventana .ej { color: #A7B0B4; font-size: 11.5px; }
.ventana-cuerpo { gap: 18px; }
.mitad { display: grid; gap: 10px; }
.mitad + .mitad { border-top: 1px solid var(--filete-n); padding-top: 16px; }
.mitad-rotulo { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--texto-n-2); }

/* --- 04 · Lo que sabe tu empresa: un panel con tres vistas */
.rec-sabe { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .85fr); gap: 16px; align-items: stretch; }
.rs-panel { border-radius: 18px; padding: 18px 20px; background: #0F171E; border: 1px solid var(--filete-n); display: grid; gap: 12px; align-content: start; }
.rs-cab { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--texto-n-2); }
.rs-relieve { width: 100%; height: auto; display: block; background: none; border-radius: 0; }
.rs-puestos li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--filete-n); font-size: 15px; }
.rs-puestos li:last-child { border-bottom: 0; }
.rs-puestos span { font-family: var(--font-mono); font-size: 12.5px; }
.rs-puestos .hecho span { color: var(--ia-n); }
.rs-puestos .falta span { color: var(--ambar-n); }
.rs-cifra { font-family: var(--font-serif); font-size: 46px; line-height: 1; color: var(--texto-n); }
.rs-viejo { font-size: 14.5px; color: var(--ambar-n); }
.rs-llega { font-size: 14.5px; color: var(--ia-n); display: flex; gap: 8px; align-items: baseline; }
.rs-flecha { font-family: var(--font-mono); }
.rs-pregunta .burbuja { max-width: none; }

/* --- 05 · Tus herramientas: la cinta firmada (3 filas en sentidos alternos, en gris que pasa a color) */
.terminal { grid-template-columns: minmax(240px, 300px) 56px minmax(0, 1fr); }
.terminal-marca { display: block; width: 46px; height: 6px; border-radius: 3px; background: var(--ia-n); margin-bottom: 20px; box-shadow: 0 0 16px rgba(46, 217, 191, .6); }
.tramo-terminal { padding: 24px 24px 22px; }
.cinta-marcas .cinta-fila { display: grid; gap: 10px; overflow: visible; }
.cinta-carril { display: flex; overflow: hidden; }
.cinta-carril.inversa .cinta-lote { animation-direction: reverse; }
.cinta-carril:nth-child(3) .cinta-lote { animation-duration: 58s; }
.tema-noche .cinta-marcas .chip { background: #16202A; border-color: rgba(236, 232, 223, .16); color: var(--texto-n); font-size: 15px; padding: 10px 16px 10px 12px; }
.tema-noche .cinta-marcas .chip .logo-marca { width: 24px; height: 24px; filter: grayscale(1) brightness(1.9); opacity: .8; }
.tema-noche .cinta-marcas .chip .logo-marca.monograma { filter: grayscale(1) brightness(1.5); }
.tema-noche .cinta-marcas .chip-marca:hover .logo-marca, .tema-noche .cinta-marcas .chip-marca:focus-within .logo-marca { filter: none; opacity: 1; }
/* quieto (pausa o movimiento reducido): a color y parados, como firmó el CEO */
html.quieto .cinta-marcas { -webkit-mask-image: none; mask-image: none; }
html.quieto .cinta-marcas .cinta-lote { animation: none; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-start; padding-right: 0; }
html.quieto .cinta-marcas .cinta-lote[aria-hidden="true"] { display: none; }
html.quieto .cinta-marcas .chip .logo-marca, html.quieto .tema-noche .cinta-marcas .chip .logo-marca { filter: none; opacity: 1; }

/* --- papel: la chispa de IA en su tono de papel */
.tema-papel .ia-chispa { color: var(--ia-p); }

/* --- 08 · I+D+i: la línea se enciende parada a parada y entra en tu Plan de Empresa */
.rec-idi { margin-top: 30px; }
.rec-idi svg { font-family: var(--font-mono); }
.ri-borde { stroke: rgba(18, 26, 30, .3); stroke-width: 1.5; stroke-dasharray: 2 9; fill: none; }
.ri-fuera { fill: var(--tinta-2); font-size: 12px; letter-spacing: 2.4px; }
.ri-via { fill: none; stroke: var(--tinta); stroke-width: 6; stroke-linecap: round; }
.ri-via-luz { fill: none; stroke: var(--ia-p); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.ri-cursos { fill: none; stroke: var(--tinta-2); stroke-width: 4; stroke-linecap: round; }
.ri-cursos-t { fill: var(--tinta-2); font-size: 12px; letter-spacing: 1.6px; }
.ri-anillo { fill: var(--papel); stroke: var(--ia-p); stroke-width: 4; }
.ri-nucleo { fill: var(--ia-p); }
.ri-plan rect { fill: var(--ia-fondo-p); stroke: var(--ia-p); stroke-width: 3; }
.ri-plan text { fill: var(--tinta); font-size: 14px; font-weight: 700; letter-spacing: 2px; }
.rec-idi + .tramo { margin-top: 14px; }

/* --- 08 · Cursos e Incorporaciones: en tarjeta */
.rec-cursos, .rec-incorp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.rcu-carta, .rin-carta { border-radius: 18px; padding: 20px 22px; background: #FFFDF8; border: 1px solid var(--filete-p); box-shadow: 0 30px 70px -48px rgba(18, 26, 30, .5); display: grid; gap: 14px; }
.rcu-cab, .rin-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .6px; color: var(--tinta-2); }
.rcu-barra { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 14.5px; }
.rcu-barra i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--tinta-2) var(--w), var(--papel-2) var(--w)); }
.rcu-barra.despues i { background: linear-gradient(90deg, var(--ia-p) var(--w), var(--papel-2) var(--w)); }
.rcu-frases li, .rin-frases li { font-size: clamp(19px, 1.6vw, 22px); }
.rin-carta .testigo { margin-top: 6px; }

/* --- 08 · Problemas: el rombo viaja de la Cabina a lo que sabe tu empresa y vuelve como procedimiento corregido */
.rec-problemas { border-radius: 22px; padding: clamp(18px, 2.4vw, 28px); background: #FFFDF8; border: 1px solid var(--filete-p); box-shadow: 0 30px 70px -50px rgba(18, 26, 30, .45); }
.rpb-dibujo { width: 100%; height: auto; display: block; font-family: var(--font-mono); }
.rpb-est rect { fill: var(--papel); stroke: var(--tinta); stroke-width: 2; }
.rpb-est text { fill: var(--tinta); font-size: 13px; font-weight: 700; letter-spacing: 1.6px; }
.rpb-via { fill: none; stroke: var(--tinta); stroke-width: 2.4; }
.rpb-via.vuelta { stroke: var(--ia-p); stroke-dasharray: 6 6; }
.rpb-t { fill: var(--tinta-2); font-size: 11.5px; letter-spacing: 1.4px; }
.rpb-rombo { fill: var(--ambar-p); transform: translate(420px, 52px) rotate(45deg); }
.rpb-doc { transform: translate(740px, 82px); }
.rpb-doc rect { fill: var(--ia-fondo-p); stroke: var(--ia-p); stroke-width: 2; }
.rpb-doc path { stroke: var(--ia-p); stroke-width: 1.6; }
.rpb-pie { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.rpb-fallo { font-size: 15.5px; color: var(--ambar-p); font-weight: 600; }
.rpb-proc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; font-size: 15.5px; }

/* --- Lo que llega: una fila de pastillas, nunca en dos columnas */
.llega { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.llega-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.llega-lista { display: flex; flex-wrap: wrap; gap: 10px; grid-template-columns: none; }
.llega-lista li { align-items: center; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px dashed var(--plano-p); background: rgba(47, 91, 174, .04); font-size: 15px; }
.llega-tramo { width: 22px; transform: none; }

/* --- Cierre: el plano entero, encendido línea a línea (sin mancha) */
.cierre-dibujo { opacity: 1; width: 58%; right: -3%; }
.cierre-svg { border-radius: 22px; }

/* --- movimiento nuevo (solo sin «movimiento reducido» y sin pausa) */
@media (prefers-reduced-motion: no-preference) {
  html:not(.quieto) .cap.vista .bpm-atasco rect { animation: atascoSvg 1.6s ease-in-out 4; }
  html:not(.quieto) .cap.vista .ri-via-luz { animation: riLuz 4.2s var(--curva) both; }
  html:not(.quieto) .cap.vista .ri-anillo { animation: riParada .5s ease-out both; animation-delay: calc(var(--k) * .62s + .2s); }
  html:not(.quieto) .cap.vista .ri-nucleo { animation: riNucleo .5s ease-out both; animation-delay: calc(var(--k) * .62s + .2s); }
  html:not(.quieto) .cap.vista .ri-plan rect { animation: riPlan 1s ease-out 4.1s both; }
  html:not(.quieto) .cap.vista .rpb-rombo { animation: rpbIda 7s ease-in-out infinite; }
  html:not(.quieto) .cap.vista .rpb-doc { animation: rpbVuelta 7s ease-in-out infinite; }
  html:not(.quieto) .cap.vista .cinta-marcas .chip-marca .logo-marca { animation: enciendeLogo 9.6s linear infinite; animation-delay: calc(var(--i) * .42s); }
}
@keyframes atascoSvg { 50% { fill: rgba(238, 194, 46, .32); } }
@keyframes riLuz { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes riParada { from { stroke: var(--tinta); fill: var(--papel); } to { stroke: var(--ia-p); } }
@keyframes riNucleo { from { fill: var(--papel); } }
@keyframes riPlan { from { fill: var(--papel); stroke: var(--tinta); } 60% { fill: #CDEBE8; } to { fill: var(--ia-fondo-p); stroke: var(--ia-p); } }
@keyframes rpbIda { 0% { transform: translate(190px, 52px) rotate(45deg); opacity: 0; } 6% { opacity: 1; } 44% { transform: translate(968px, 52px) rotate(225deg); opacity: 1; } 50%, 100% { transform: translate(968px, 52px) rotate(225deg); opacity: 0; } }
@keyframes rpbVuelta { 0%, 50% { transform: translate(968px, 82px); opacity: 0; } 56% { opacity: 1; } 94% { transform: translate(192px, 82px); opacity: 1; } 100% { transform: translate(192px, 82px); opacity: 0; } }
@keyframes enciendeLogo { 0%, 9% { filter: none; opacity: 1; } 16%, 100% { filter: grayscale(1) brightness(1.9); opacity: .8; } }

/* --- MÓVIL Y TABLETA (999 px o menos) */
@media (max-width: 999px) {
  .estas-aqui { opacity: 1; padding-right: 52px; }
  .pausa { top: calc(var(--barra) + 2px); bottom: auto; right: 10px; left: auto; width: 28px; height: 28px; }
  .pausa-etiqueta { display: none; }
  .parada-boton { min-height: 44px; }
  .parada .ficha .ficha-titulo { display: none; }
  .etapa.parada > .consigue, .etapa.parada > .ficha { margin-left: 0; }
  .fichas-abiertas .ficha.ficha-abierta { margin-left: 0; }
  .bpm-marco { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
  .bpm { min-width: 860px; }
  .rec-sabe { grid-template-columns: minmax(0, 1fr); }
  .rec-cursos, .rec-incorp { grid-template-columns: minmax(0, 1fr); }
  .rpb-t { display: none; }
  .cinta-marcas { -webkit-mask-image: none; mask-image: none; }
  .cinta-marcas .cinta-lote { animation: none; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-start; padding-right: 0; gap: 8px; }
  .cinta-marcas .cinta-lote[aria-hidden="true"] { display: none; }
  .cinta-marcas .chip .logo-marca, .tema-noche .cinta-marcas .chip .logo-marca { filter: none; opacity: 1; animation: none; }
  .tema-noche .cinta-marcas .chip { font-size: 14px; padding: 8px 12px 8px 10px; }
  .cierre-dibujo { width: 100%; right: auto; }
}

/* --- 08 · I+D+i (v3.1b): la MISMA línea del capítulo se enciende parada a parada y entra en tu Plan de Empresa (sin una segunda vía dibujada) */
.rec-idi { margin-top: 26px; }
.rec-idi svg { width: 100%; height: auto; display: block; }
.ri-sonda { fill: none; stroke: var(--ia-p); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 8; }
.ri-sonda-punta { fill: var(--ia-p); }
.rec-idi + .tramo { margin-top: 0; }
.tramo-idi::after { content: ''; position: absolute; left: 0; right: 0; top: 21px; height: 6px; border-radius: 3px; background: var(--ia-p); transform-origin: left center; }
.tramo-idi .parada-punto { border-color: var(--ia-p); }
.tramo-idi .est-llegada span { background: var(--ia-fondo-p); border-color: var(--ia-p); box-shadow: 0 0 0 5px rgba(8, 98, 127, .14); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.quieto) .cap.vista .tramo-idi::after { animation: idiLuz 4.2s var(--curva) both; }
  html:not(.quieto) .cap.vista .tramo-idi .parada .parada-punto { animation: idiPunto .5s ease-out both; }
  html:not(.quieto) .cap.vista .tramo-idi .parada:nth-child(1) .parada-punto { animation-delay: .35s; }
  html:not(.quieto) .cap.vista .tramo-idi .parada:nth-child(2) .parada-punto { animation-delay: 1s; }
  html:not(.quieto) .cap.vista .tramo-idi .parada:nth-child(3) .parada-punto { animation-delay: 1.65s; }
  html:not(.quieto) .cap.vista .tramo-idi .parada:nth-child(4) .parada-punto { animation-delay: 2.3s; }
  html:not(.quieto) .cap.vista .tramo-idi .parada:nth-child(5) .parada-punto { animation-delay: 2.95s; }
  html:not(.quieto) .cap.vista .tramo-idi .parada:nth-child(6) .parada-punto { animation-delay: 3.6s; }
  html:not(.quieto) .cap.vista .tramo-idi .est-llegada span { animation: idiPlan 1s ease-out 4.1s both; }
}
@keyframes idiLuz { from { transform: scaleX(0); } }
@keyframes idiPunto { from { border-color: var(--tinta); } }
@keyframes idiPlan { from { background: var(--papel); border-color: var(--ia-p); box-shadow: 0 0 0 0 rgba(8, 98, 127, 0); } 60% { box-shadow: 0 0 0 12px rgba(8, 98, 127, .2); } }
.rs-cifra .ej { font-size: 13px; vertical-align: middle; }
@media (max-width: 999px) {
  .tramo-idi::after { left: 17px; right: auto; top: 20px; bottom: 20px; width: 6px; height: auto; transform-origin: center top; }
  html:not(.quieto) .cap.vista .tramo-idi::after { animation-name: idiLuzV; }
  .rec-idi { display: none; }
}
@keyframes idiLuzV { from { transform: scaleY(0); } }

/* --- v3.1c: móvil (lo que las reglas de escritorio de arriba pisaban) y plano pequeño de la Entrada en móvil */
.plano-movil { display: none; }
@media (max-width: 999px) {
  .terminal { grid-template-columns: minmax(0, 1fr); }
  .haz { width: 4px; height: 36px; margin: 0 0 0 30px; }
  .estas-aqui { white-space: nowrap; }
  .ea-texto { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .entrada-func { padding-top: calc(var(--barra) + 56px); }
  .plano-movil { display: block; margin: 26px 0 4px; border-radius: 18px; border: 1px solid rgba(46, 217, 191, .16); background: radial-gradient(120% 90% at 70% 10%, #0F1A21 0%, #0B1016 58%); }
  .plano-movil svg { width: 100%; height: auto; display: block; --pd-fondo: #0B1016; }
}

/* --- v3.1d: quieto (pausa, movimiento reducido) y móvil: los 22 logotipos en un solo bloque que fluye, a color y parados */
html.quieto .cinta-marcas .cinta-fila { display: flex; flex-wrap: wrap; gap: 10px; }
html.quieto .cinta-marcas .cinta-carril, html.quieto .cinta-marcas .cinta-lote { display: contents; }
html.quieto .cinta-marcas .cinta-lote[aria-hidden="true"] { display: none; }
@media (max-width: 999px) {
  .cinta-marcas .cinta-fila { display: flex; flex-wrap: wrap; gap: 8px; }
  .cinta-marcas .cinta-carril, .cinta-marcas .cinta-lote { display: contents; }
  .cinta-marcas .cinta-lote[aria-hidden="true"] { display: none; }
}

/* --- v3.1e: antetítulo de capítulo en una sola línea de texto (el número no se queda solo en móvil) */
.cap-cabeza .antetitulo { display: block; }
.cap-cabeza .antetitulo .num { margin-right: 12px; }

/* ============================================================ v5 (2026-10-12): el eje Dirigir y 5 líneas (Proveedores, Día a día, Clientes, Dinero, Equipo y futuro).
   Mismo sistema visual que el resto de la página: solo se añaden las claves nuevas y lo que necesita cada parada con su frase. */
.plano-metro[data-solo="proveedores"] .pp[data-linea="proveedores"], .plano-metro[data-solo="diaadia"] .pp[data-linea="diaadia"],
.plano-metro[data-solo="equipo"] .pp[data-linea="equipo"] { opacity: 1; }
.pd-cruces circle { fill: var(--pd-fondo, #0B1016); stroke: var(--pd-linea-2, #D9D4C9); stroke-width: 3; }
.pd-vender .pd-rot-linea { font-size: 13.5px; letter-spacing: 1.6px; }
/* índice: Clientes ya no es un bucle, es una línea */
.il-vender .il-trazo { width: 34px; height: 0; border: 0; border-top: 5px solid #D9D4C9; border-radius: 3px; margin: 0; }
/* Dinero: el tramo del capítulo también es vía doble */
.tramo-caja::before { height: 12px; top: 18px; background: none; border-top: 3.5px solid currentColor; border-bottom: 3.5px solid currentColor; border-radius: 0; }
/* cada parada de las 5 líneas lleva su frase visible */
.tramo-proveedores .consigue, .tramo-diaadia .consigue, .tramo-vender .consigue, .tramo-caja .consigue, .tramo-equipo .consigue { font-size: 15.5px; max-width: 26ch; }
/* las 7 paradas que dejan de serlo: una frase visible bajo su vecina */
.plegada { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; max-width: 26ch; font-size: 14.5px; line-height: 1.45; color: var(--tinta-2); }
.tema-noche .plegada { color: var(--texto-n-2); }
.plegada-tick { flex: none; width: 14px; height: 0; border-top: 2px solid var(--ia-p); transform: translateY(-4px); }
.tema-noche .plegada-tick { border-color: var(--ia-n); }
.plegada + .plegada { margin-top: 8px; }
.equipo-frases { margin-top: clamp(30px, 3.5vw, 44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 40px; max-width: 1080px; }
.equipo-frases li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; line-height: 1.5; color: var(--tinta-2); }
.cap-planta { margin-top: 28px; font-size: 16px; color: var(--tinta-2); }
.tema-noche .cap-planta { color: var(--texto-n-2); }
.cap-garantia + .cap-planta { margin-top: 18px; }
/* la nota general: una sola vez, pequeña, al final, sobre el mismo fondo que el cierre */
.nota-construccion { background: var(--noche); padding: 0 var(--margen) clamp(40px, 5vw, 64px); }
.nota-construccion p { max-width: var(--ancho); margin: 0 auto; padding-top: 18px; border-top: 1px solid var(--filete-n); font-size: 13px; line-height: 1.55; color: var(--texto-n-2); }
@media (max-width: 999px) {
  .tramo-caja::before { width: 12px; height: auto; left: 14px; border: 0; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
  .plegada, .tramo-proveedores .consigue, .tramo-diaadia .consigue, .tramo-vender .consigue, .tramo-caja .consigue, .tramo-equipo .consigue { margin-left: 56px; max-width: none; }
}
@media (min-width: 1000px) { .indice-lineas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ============================================================ v5.1 (2026-10-12): hallazgos de la crítica de la vista previa v5
   (CEO, diseño y cableado). Solo se añade; mismo sistema visual. */
/* plano: rótulos con el nombre entero y más legibles; un solo nombre por línea (crítica CEO n.º 4, diseño n.º 5) */
.pd-rot { font-size: 16.5px; }
.pd-rot-linea, .pd-vender .pd-rot-linea { font-size: 15px; letter-spacing: 2px; }
/* ficha del plano: dentro del marco, enlaces en una sola columna y la navegación alineada a la izquierda (diseño n.º 4) */
.ficha-plano { width: min(420px, 92%); }
.ficha-plano .ficha-enlaces { display: grid; justify-items: start; gap: 8px; }
.ficha-plano .ficha-capitulo { margin-top: 0; }
.ficha-nav { justify-content: flex-start; }
.ficha-ir:only-child[data-ir] { margin-left: 0; }
/* fichas abiertas apiladas (6 y 7): el enlace repetido a la misma planta solo se ve al recibir el foco (crítica CEO n.º 14) */
.ficha-enlaces.enlace-repetido { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ficha-enlaces.enlace-repetido:focus-within { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
/* las 5 líneas: columnas iguales y el (+) y la frase a la misma altura en cada fila (diseño n.º 3) */
@media (min-width: 1000px) {
  .tramo-proveedores .parada, .tramo-diaadia .parada, .tramo-vender .parada, .tramo-caja .parada, .tramo-equipo .parada { flex: 1 1 0; }
  .tramo-proveedores .parada-texto, .tramo-diaadia .parada-texto { min-height: 70px; }
  .tramo-vender .parada-texto { min-height: 54px; }
  .tramo-equipo .parada-texto { min-height: 82px; }
  .tramo-caja .parada-texto { min-height: 108px; }
  /* el punto pequeño ocupa lo mismo que el grande: los nombres de una fila empiezan a la misma altura */
  .tramo-vender .parada:not(.destacada) .parada-punto, .tramo-caja .parada:not(.destacada) .parada-punto, .tramo-equipo .parada:not(.destacada) .parada-punto { margin-bottom: 6px; }
}
/* recreaciones de Proveedores y Día a día (crítica CEO n.º 3): mismo sistema de tarjetas que Clientes y Dinero */
.rec-compras, .rec-dia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: stretch; }
.rec-dia { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.rk-pedido, .rd-devol { display: grid; gap: 12px; align-content: center; }
.rk-cotejo { border-radius: 18px; padding: 20px 22px; background: var(--ia-fondo-p); border: 1px solid rgba(8, 98, 127, .3); color: var(--ia-tinta-p); display: grid; gap: 14px; align-content: center; }
.rk-barras { width: 100%; height: auto; display: block; }
.rk-barras text { font-family: var(--font-mono); font-size: 13px; letter-spacing: 1.4px; fill: var(--ia-tinta-p); }
.rk-barras .rk-n { font-size: 16px; font-weight: 600; letter-spacing: 0; }
.rk-barras text.rk-mal { fill: var(--calido-titulo); }
.rk-fondo { fill: rgba(8, 98, 127, .1); }
.rk-lleno { fill: var(--ia-p); opacity: .7; }
.rk-sobra { fill: var(--calido-trazo); }
.rk-aviso { font-size: 15.5px; line-height: 1.45; }
.rd-fecha { border-radius: 18px; padding: 20px 22px; background: #111A22; border: 1px solid var(--filete-n); display: grid; gap: 12px; font-family: var(--font-mono); font-size: 14.5px; color: var(--texto-n-2); }
.rd-cab { font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; }
.rd-carga { width: 100%; height: auto; display: block; }
.rd-tope { fill: none; stroke: rgba(236, 232, 223, .45); stroke-width: 2; }
.rd-base { fill: none; stroke: var(--filete-n); stroke-width: 1.5; }
.rd-carga text { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.4px; fill: var(--texto-n-2); }
.rd-carga text.rd-si { fill: var(--ia-n); }
.rd-barra { fill: rgba(236, 232, 223, .16); }
.rd-hueco { fill: var(--ia-n); }
.rd-linea { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 1px solid var(--filete-n); color: var(--ia-n); }
.rd-linea b { font-size: 20px; color: var(--ia-n); white-space: nowrap; }
/* Clientes: sin el punto suelto; las dos tarjetas a la misma altura y con la misma forma (diseño n.º 11) */
.rec-vender { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.rv-respuesta { max-width: none; border-radius: 18px; padding: 20px 22px; align-content: center; }
/* Dinero: el importe no se parte (diseño n.º 7) */
.rc-linea b { white-space: nowrap; }
/* la nota general se lee (diseño n.º 14) */
.nota-construccion p { font-size: 14px; color: var(--texto-n); }
@media (max-width: 999px) {
  .rec-compras, .rec-dia, .rec-vender { grid-template-columns: minmax(0, 1fr); }
  .rc-linea.total { flex-wrap: wrap; }
  /* móvil: el nombre de la parada y su frase empiezan a la misma altura (diseño n.º 12) */
  .parada-punto { margin-right: 9px; }
  .destacada .parada-punto { margin-right: 3px; }
}
/* móvil: el plano del cierre no se repite en pequeño (diseño n.º 6) */
@media (max-width: 639px) { .cierre-dibujo { display: none; } }
/* móvil: el área táctil de 44 px sale del relleno, no de la altura; así la frase queda siempre a la misma distancia del nombre */
@media (max-width: 999px) { .parada-boton { min-height: 0; padding-block: 12px; margin-block: -12px; } }
/* «estás aquí»: sin rótulos sueltos del dibujo, que el recorte partía (variable heredada por el <use>) */
.pd-eje-rot, .pd-rot-linea, .pd-tenue, .pd-borde text, .pd-muesca, .pd-rot-marca { opacity: var(--textos-plano, 1); }