/* =============================================================================
   PÁGINA — Composición del HOME de Code4you (dirección SISTEMA).
   Depende de sistema.css (tokens y estilos base).
   Cada sección tiene una personalidad propia: hero monumental, producto,
   capacidades ilustradas, ensamble interactivo, relaciones, cierre.
   ========================================================================== */

/* =============================================================================
   1. CABECERA
   ========================================================================== */
.cab {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--c-paper) 86%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: var(--hairline) solid transparent;
    transition: border-color var(--d-base) var(--e-out);
}
.cab.is-scrolled { border-bottom-color: var(--c-rule-soft); }

.cab__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    min-height: 5.25rem;
}

/* Logotipo oficial (SVG master 6775,16 x 1100, sin aire). La altura declarada
   es la altura real de la marca: coincide con el isotipo, que es el elemento
   más alto de la composición. */
.marca { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.marca__img { height: 1.875rem; width: auto; }

/* Entre 62rem y 73.6875rem la navegación completa deja menos aire del que pide
   el logotipo a 30 px. Baja de altura; nunca se comprime. */
@media (min-width: 62rem) and (max-width: 73.6875rem) {
    .cab .marca__img { height: 1.625rem; }
}

@media (max-width: 61.9375rem) {
    .marca__img { height: 1.4375rem; }
}

.nav { display: flex; align-items: center; gap: var(--s-6); }

.nav__link {
    text-decoration: none;
    font-size: var(--t-small);
    color: var(--c-ink-2);
    letter-spacing: -0.004em;
    transition: color var(--d-fast) var(--e-out);
}
.nav__link:hover { color: var(--c-ink); }

@media (max-width: 61.9375rem) {
    .nav__link { display: none; }
    .cab .btn {
        min-height: 2.625rem;
        padding-inline: var(--s-4);
        font-size: 0.875rem;
    }
}

/* =============================================================================
   2. HERO — titular dominante; a la derecha, un sistema mínimo vivo
   ========================================================================== */
.hero { padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) clamp(3.5rem, 2rem + 5vw, 7rem); }

.hero__grid { display: grid; gap: var(--s-8); }

.hero .display { margin-top: var(--s-6); max-width: 15ch; }
.hero .lead    { margin-top: var(--s-6); max-width: 50ch; }

.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-6);
    margin-top: var(--s-8);
}

.hero__visual { display: none; }

@media (min-width: 62rem) {
    .hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
        gap: clamp(3rem, 6vw, 6rem);
        align-items: center;
    }
    .hero .display { max-width: none; }
    .hero__visual { display: block; }
}

/* --- Ilustración del hero -------------------------------------------------
   Sistema mínimo: entrada → sistema → app · api · automatización → resultado.
   Se dibuja al cargar y una señal lo recorre una sola vez.                  */
.hsis { width: 100%; height: auto; overflow: visible; }

.hsis__caja, .hsis__mod, .hsis__nodo, .hsis__glifo-sq {
    fill: #FFFFFF;
    stroke: var(--c-ink-2);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.hsis__caja--sistema { stroke: var(--c-ink); }
.hsis__campo { fill: var(--c-rule); }
.hsis__bus   { stroke: var(--c-rule); stroke-width: 1; }
.hsis__glifo { fill: none; stroke: var(--c-ink-2); stroke-width: 1.25; stroke-linecap: square; }
.hsis__glifo-sq { stroke: var(--c-ink-2); }
.hsis__nodo  { fill: var(--c-signal); stroke: var(--c-signal); }
.hsis__mod--ia { stroke: var(--c-signal); }

.hsis__etq {
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    fill: var(--c-ink-3);
}
.hsis__etq--c { text-anchor: middle; }

.hsis__linea {
    fill: none;
    stroke: var(--c-ink-3);
    stroke-width: 1;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 900ms var(--e-out);
}
.hsis__entrada, .hsis__sistema, .hsis__salida, .hsis__resultado, .hsis__mod {
    opacity: 0;
    transition: opacity var(--d-base) var(--e-out);
}
.hsis.is-visible .hsis__entrada  { opacity: 1; }
.hsis.is-visible .hsis__l1       { stroke-dashoffset: 0; transition-delay: 150ms; }
.hsis.is-visible .hsis__sistema  { opacity: 1; transition-delay: 500ms; }
.hsis.is-visible .hsis__mod      { opacity: 1; transition-delay: calc(650ms + var(--i) * 70ms); }
.hsis.is-visible .hsis__l2       { stroke-dashoffset: 0; transition-delay: 1100ms; }
.hsis.is-visible .hsis__salida   { opacity: 1; transition-delay: calc(1500ms + var(--i) * 120ms); }
.hsis.is-visible .hsis__l3       { stroke-dashoffset: 0; transition-delay: 1900ms; }
.hsis.is-visible .hsis__resultado{ opacity: 1; transition-delay: 2400ms; }

.hsis__senal {
    fill: none;
    stroke: var(--c-signal);
    stroke-width: 2;
    stroke-dasharray: 28 1200;
    stroke-dashoffset: 1228;
    opacity: 0;
}
.hsis.is-visible .hsis__senal { animation: hsis-senal 1.8s var(--e-out) 2700ms 1 forwards; }
@keyframes hsis-senal {
    0%   { opacity: 1; stroke-dashoffset: 1228; }
    90%  { opacity: 1; }
    100% { opacity: 0; stroke-dashoffset: 780; }
}

/* =============================================================================
   3. PLATAFORMA — presentación de producto
   Escenario: flujo con estados encima, dispositivo de escritorio con la
   navegación real del producto, y un móvil superpuesto. Las capturas reales
   sustituirán al esquema dentro de .dsk__main.
   ========================================================================== */
.producto { display: grid; gap: var(--s-9); }
.producto__texto .h2   { margin-top: var(--s-5); max-width: 17ch; }
.producto__texto .lead { margin-top: var(--s-6); max-width: 44ch; }
.producto__acciones {
    display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center;
    margin-top: var(--s-8);
}
.producto__salto {
    margin-top: var(--s-8);
    padding-top: var(--s-6);
    border-top: var(--hairline) solid var(--c-rule);
    max-width: 46ch;
    color: var(--c-ink-2);
}

@media (min-width: 72rem) {
    .producto {
        grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
        gap: clamp(3rem, 5vw, 5rem);
        align-items: start;
    }
    .producto__texto { position: sticky; top: 7rem; }
}

/* --- Escenario ------------------------------------------------------------ */
.escenario { position: relative; padding-bottom: 2.5rem; }

/* Flujo con estados: recorre los seis pasos una sola vez al entrar. */
.flujo { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); }
.flujo__paso {
    position: relative;
    padding-top: var(--s-4);
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--c-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.flujo__paso::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 3px;
    background: var(--c-rule);
}
.flujo__paso::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 3px;
    background: var(--c-signal);
    transform: scaleX(0);
    transform-origin: left;
}
.escenario { --t: 900ms; --t0: 500ms; }
.escenario.is-visible .flujo__paso::after {
    animation: flujo-llena var(--t) var(--e-out) calc(var(--t0) + var(--i) * var(--t)) 1 forwards;
}
.escenario.is-visible .flujo__paso { animation: flujo-tinta 1ms linear calc(var(--t0) + var(--i) * var(--t)) 1 forwards; }
@keyframes flujo-llena { to { transform: scaleX(1); } }
@keyframes flujo-tinta { to { color: var(--c-ink); } }

/* Dispositivo de escritorio */
.dsk {
    margin-top: var(--s-6);
    background: #FFFFFF;
    border: var(--hairline) solid var(--c-rule);
    box-shadow: 0 30px 60px -30px rgba(14, 17, 20, 0.22);
}
.dsk__barra {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-bottom: var(--hairline) solid var(--c-rule-soft);
}
.dsk__barra i { width: 7px; height: 7px; background: var(--c-rule); }
.dsk__barra .mono { margin-left: var(--s-3); }

.dsk__cuerpo { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); min-height: 22rem; }

/* Navegación real del producto */
.dsk__nav {
    border-right: var(--hairline) solid var(--c-rule-soft);
    padding: var(--s-4) 0;
}
.dsk__nav li {
    position: relative;
    display: flex; align-items: center; gap: var(--s-3);
    padding: 0.45rem var(--s-4);
    font-size: 0.8125rem;
    color: var(--c-ink-2);
    transition: color var(--d-fast) var(--e-out);
}
.dsk__nav li::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: var(--c-signal);
    transform: scaleY(0);
}
.dsk__nav .ico { width: 14px; height: 14px; color: var(--c-ink-3); }
/* Cada etapa del ciclo destaca las áreas que intervienen. */
.escenario.is-visible .dsk__nav li[data-etapa] {
    animation: nav-on var(--t) linear calc(var(--t0) + var(--i) * var(--t)) 1 forwards;
}
.escenario.is-visible .dsk__nav li[data-etapa]::before {
    animation: nav-marca var(--t) var(--e-out) calc(var(--t0) + var(--i) * var(--t)) 1 forwards;
}
@keyframes nav-on    { 0%, 100% { color: var(--c-ink); } }
@keyframes nav-marca { 0% { transform: scaleY(0); } 12%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.escenario.is-visible .dsk__nav li[data-etapa="4"]::before { animation-name: nav-marca-fin; }
@keyframes nav-marca-fin { to { transform: scaleY(1); } }

/* El título del área principal sigue a la etapa. */
.dsk__titulos { position: relative; display: block; height: 1.4em; flex: 1; }
.dsk__titulos b { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
.dsk__titulos b:first-child { opacity: 1; }
.escenario.is-visible .dsk__titulos b { animation: titulo var(--t) linear calc(var(--t0) + var(--i) * var(--t)) 1 forwards; }
.escenario.is-visible .dsk__titulos b.fin { animation-name: titulo-fin; }
@keyframes titulo { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes titulo-fin { to { opacity: 1; } }

/* El móvil aparece en la etapa del evento. */
.tel { opacity: 0; transform: translateY(12px); }
.escenario.is-visible .tel { animation: tel-entra var(--d-slow) var(--e-out) calc(var(--t0) + 3 * var(--t)) 1 forwards; }
@keyframes tel-entra { to { opacity: 1; transform: none; } }
.no-js .tel { opacity: 1; transform: none; }

/* Área principal: esquema estructural neutro. Aquí entra la captura real. */
.dsk__main { min-width: 0; padding: var(--s-5); display: grid; gap: var(--s-5); align-content: start; }
.dsk__kpi, .dsk__titulo { min-width: 0; }
.dsk__kpi .mono { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsk__titulo { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.dsk__titulo b { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.012em; }
.dsk__chip {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: 0.2rem 0.5rem;
    border: var(--hairline) solid var(--c-rule);
    font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--c-ink-2);
}
.dsk__chip::before { content: ''; width: 6px; height: 6px; background: var(--c-signal); }

.dsk__tabla { display: grid; gap: 0; border-top: var(--hairline) solid var(--c-rule); }
.dsk__fila {
    display: grid; grid-template-columns: 2fr 1.2fr 1fr 0.8fr; gap: var(--s-4);
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: var(--hairline) solid var(--c-rule-soft);
}
.dsk__fila i { display: block; height: 7px; background: var(--c-rule-soft); }
.dsk__fila i.b { background: var(--c-rule); }
.dsk__fila i.ok { width: 7px; height: 7px; background: var(--c-signal); justify-self: start; }
.dsk__fila i.pend { width: 7px; height: 7px; border: var(--hairline) solid var(--c-ink-3); background: transparent; justify-self: start; }

.dsk__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.dsk__kpi { padding: var(--s-3) var(--s-4); border: var(--hairline) solid var(--c-rule-soft); }
.dsk__kpi i { display: block; height: 10px; width: 40%; background: var(--c-rule); margin-top: var(--s-2); }

/* Móvil superpuesto */
.tel {
    position: absolute;
    right: -0.5rem; bottom: -2.5rem;
    width: 8.25rem;
    padding: 0.6rem;
    background: #FFFFFF;
    border: var(--hairline) solid var(--c-rule);
    border-radius: 18px;
    box-shadow: 0 30px 50px -28px rgba(14, 17, 20, 0.3);
}
.tel__pantalla { border: var(--hairline) solid var(--c-rule-soft); border-radius: 12px; padding: var(--s-3); display: grid; gap: var(--s-3); }
.tel__barra { height: 6px; background: var(--c-rule-soft); }
.tel__qr { width: 3.5rem; height: 3.5rem; margin: var(--s-2) auto; color: var(--c-ink); }
.tel__qr .ico { width: 100%; height: 100%; }
.tel__linea { height: 5px; background: var(--c-rule-soft); }
.tel__linea.c { width: 60%; }
.tel__ok { display: flex; align-items: center; gap: var(--s-2); font-family: var(--f-mono); font-size: 0.5625rem; letter-spacing: 0.08em; color: var(--c-ink-2); }
.tel__ok::before { content: ''; width: 6px; height: 6px; background: var(--c-signal); }

@media (max-width: 61.9375rem) {
    .flujo { grid-template-columns: repeat(3, 1fr); gap: var(--s-3) var(--s-2); }
    .dsk__titulos b { white-space: normal; }
    .dsk__cuerpo { grid-template-columns: 1fr; }
    .dsk__nav { display: flex; flex-wrap: wrap; gap: 0; padding: var(--s-2) var(--s-2); border-right: 0; border-bottom: var(--hairline) solid var(--c-rule-soft); }
    .dsk__nav li { padding: 0.35rem 0.6rem; font-size: 0.75rem; }
    .dsk__nav li::before { top: auto; bottom: 0; width: 100%; height: 2px; transform-origin: left; }
    .dsk__kpis { grid-template-columns: 1fr 1fr; }
    .tel { right: 0.25rem; bottom: -1.5rem; width: 6.5rem; }
    .escenario { padding-bottom: 2rem; }
}

/* =============================================================================
   4. CAPACIDADES — dos piezas ilustradas y una tira con iconografía propia
   ========================================================================== */
.caps { display: grid; gap: var(--s-6); margin-top: var(--s-9); }

.cap-pieza {
    display: grid;
    gap: var(--s-6);
    padding: var(--s-7);
    border: var(--hairline) solid var(--c-rule);
    background: #FFFFFF;
}
.cap-pieza .h3 { max-width: 18ch; }
.cap-pieza__desc { margin-top: var(--s-3); color: var(--c-ink-2); max-width: 40ch; }
.cap-pieza__fig { display: grid; place-items: center; min-height: 12rem; }
.cap-pieza__fig svg { width: 100%; max-width: 27rem; height: auto; overflow: visible; }

@media (min-width: 48rem) {
    .caps { grid-template-columns: 7fr 5fr; }
    .cap-pieza { grid-template-rows: auto 1fr; }
}

/* Ilustraciones de las piezas: mismo trazo que el resto del sistema. */
.fig-linea { fill: none; stroke: var(--c-ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fig-caja  { fill: var(--c-paper); stroke: var(--c-ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fig-caja--ink { stroke: var(--c-ink); }
.fig-relleno { fill: var(--c-rule); }
.fig-senal { fill: var(--c-signal); stroke: none; }
.fig-etq { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.08em; fill: var(--c-ink-3); }
.fig-dib { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.1s var(--e-out); }
.cap-pieza.is-visible .fig-dib { stroke-dashoffset: 0; }
.cap-pieza.is-visible .fig-dib:nth-of-type(2) { transition-delay: 200ms; }
.cap-pieza.is-visible .fig-dib:nth-of-type(3) { transition-delay: 400ms; }
.fig-ap { opacity: 0; transition: opacity var(--d-base) var(--e-out); transition-delay: calc(300ms + var(--i, 0) * 140ms); }
.cap-pieza.is-visible .fig-ap { opacity: 1; }

/* Tira de capacidades: icono + nombre + línea, separadas por filetes. */
.tira { display: grid; border-top: var(--hairline) solid var(--c-rule); }
.tira__item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
    padding: var(--s-6) 0;
    border-bottom: var(--hairline) solid var(--c-rule-soft);
}
.tira__item .ico { width: 24px; height: 24px; color: var(--c-ink); margin-top: 2px; }
.tira__nombre { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.016em; }
.tira__desc { margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-ink-2); line-height: 1.5; }

@media (min-width: 48rem) {
    .tira { grid-template-columns: repeat(5, 1fr); border-bottom: var(--hairline) solid var(--c-rule); }
    .tira__item {
        grid-template-columns: 1fr;
        gap: var(--s-4);
        padding: var(--s-7) var(--s-5) var(--s-7) 0;
        border-bottom: 0;
        border-right: var(--hairline) solid var(--c-rule-soft);
    }
    .tira__item + .tira__item { padding-left: var(--s-5); }
    .tira__item:last-child { border-right: 0; padding-right: 0; }
}

/* Icono base */
.ico { display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }

/* =============================================================================
   5. ENSAMBLE — el sistema cobra vida (storytelling con scroll, sobre grafito)
   Escena fija a la derecha; los pasos avanzan a la izquierda y construyen,
   ensamblan y activan el sistema de abajo hacia arriba.
   ========================================================================== */
.ens-intro .h2 { margin-top: var(--s-5); max-width: 24ch; }
.ens-intro .lead { margin-top: var(--s-6); max-width: 48ch; }
.ens-intro .veredicto__a { color: var(--c-deep-ink-2); }

.ensamble-wrap {
    --p: 0;
    display: grid;
    gap: var(--s-8);
    margin-top: var(--s-8);
}

.pasos { display: grid; }
.paso {
    min-height: 62vh;
    display: grid;
    align-content: center;
    gap: var(--s-3);
    padding-block: var(--s-8);
    opacity: 0.38;
    transition: opacity var(--d-slow) var(--e-out);
}
.paso.is-active { opacity: 1; }
.paso__num { color: var(--c-deep-ink-2); }
.paso__titulo { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; color: var(--c-deep-ink); }
.paso__texto { color: var(--c-deep-ink-2); max-width: 38ch; }
.paso__nota  { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-signal); margin-top: var(--s-2); }

.escena { position: sticky; top: 6rem; align-self: start; }
.escena__marco { position: relative; display: grid; justify-items: center; }
.escena__marco .ensamble { width: auto; max-width: 100%; height: min(70vh, 44rem); }
.escena__leyenda {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: var(--hairline) solid var(--c-deep-rule);
}
.escena__capa { color: var(--c-deep-ink); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; }

@media (min-width: 62rem) {
    .ensamble-wrap { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(3rem, 6vw, 7rem); }
    .paso { min-height: 56vh; }
    .escena { top: 8vh; }
}
@media (max-width: 61.9375rem) {
    /* En una sola columna la escena va primero: sólo así puede fijarse mientras
       los pasos pasan por debajo. */
    .escena { order: -1; top: 5.25rem; z-index: 2; background: var(--c-deep); padding-bottom: var(--s-3); }
    .escena__marco .ensamble { height: min(42vh, 22rem); }
    .escena__leyenda { margin-top: var(--s-2); padding-top: var(--s-2); }
    .paso { min-height: 44vh; }
}

/* --- La escena ------------------------------------------------------------ */
.ensamble { width: 100%; height: auto; overflow: visible; }

.ensamble .plano, .ensamble .slab, .ensamble .srv, .ensamble .modbox, .ensamble .ext,
.ensamble .scr, .ensamble .mob, .ensamble .scr-b, .ensamble .mob-b {
    fill: var(--c-deep);
    stroke: var(--c-deep-ink-2);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: miter;
}
.ensamble .plano { fill: color-mix(in srgb, var(--c-deep-2) 70%, transparent); }
.ensamble .slab.cara-top { fill: var(--c-deep-2); }
.ensamble .cara-r, .ensamble .cara-f { fill: var(--c-deep); }
.ensamble .fila, .ensamble .col, .ensamble .scr-l, .ensamble .conector {
    fill: none; stroke: var(--c-deep-rule); stroke-width: 1; vector-effect: non-scaling-stroke;
}
.ensamble .col { stroke: var(--c-deep-rule); }
.ensamble .scr-b, .ensamble .mob-b { fill: var(--c-deep-rule); stroke: none; }
.ensamble .led { fill: var(--c-deep-rule); }
.ensamble .etq { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; fill: var(--c-deep-ink-2); }
.ensamble .espina { fill: none; stroke: var(--c-deep-ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Estado inicial: estructura parcial — un fantasma del ensamble. */
.ensamble .capa, .ensamble .espina { opacity: 0.16; transition: opacity 700ms var(--e-out); }
.ensamble .pantalla, .ensamble .movil, .ensamble .mod, .ensamble .capa--integ { opacity: 0; transition: opacity 700ms var(--e-out); }
.ensamble .capa.is-built, .ensamble .espina.is-built,
.ensamble .pantalla.is-built, .ensamble .movil.is-built, .ensamble .mod.is-built { opacity: 1; }
.ensamble .mod.is-built { transition-delay: calc(var(--i, 0) * 60ms); }
.ensamble .conector { stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 800ms var(--e-out) calc(var(--i, 0) * 180ms); }
.ensamble .capa--integ.is-built .conector { stroke-dashoffset: 0; }
.ensamble .fila { stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 600ms var(--e-out) calc(var(--i, 0) * 70ms); }
.ensamble .capa--datos.is-built .fila { stroke-dashoffset: 0; }

/* Capa activa: sube el contraste del trazo. */
.ensamble .capa.is-active .plano, .ensamble .capa.is-active .slab,
.ensamble .capa.is-active .srv, .ensamble .capa.is-active .ext,
.ensamble .pantalla.is-active .scr, .ensamble .movil.is-active .mob { stroke: var(--c-deep-ink); }
.ensamble .capa.is-active .etq { fill: var(--c-deep-ink); }
.ensamble .capa--infra.is-built .led { fill: var(--c-signal); }
.ensamble .mod--ia.is-active .modbox { stroke: var(--c-signal); }
.ensamble .mod--ia.is-active .cara-top { fill: color-mix(in srgb, var(--c-signal) 28%, var(--c-deep)); }
.ensamble .capa--integ.is-active .conector { stroke: var(--c-signal); }
.ensamble .pantalla.is-active .scr-b, .ensamble .movil.is-active .mob-b { fill: var(--c-deep-ink-2); }

/* Explosión → ensamble, gobernado por --p (0 = separado, 1 = ensamblado). */
.ensamble .capa--datos { transform: translateY(calc((1 - var(--p)) * -26px)); }
.ensamble .capa--reglas, .ensamble .capa--integ { transform: translateY(calc((1 - var(--p)) * -52px)); }
.ensamble .capa--sup   { transform: translateY(calc((1 - var(--p)) * -78px)); }
.ensamble .senal--ia, .ensamble .senal--ia2 { transform: translateY(calc((1 - var(--p)) * -52px)); }
.ensamble .senal--ui   { transform: translateY(calc((1 - var(--p)) * -78px)); }

/* Señales: un pulso ámbar recorre el camino una vez. */
.ensamble .senal {
    fill: none; stroke: var(--c-signal); stroke-width: 2; vector-effect: non-scaling-stroke;
    stroke-dasharray: 30 1400; stroke-dashoffset: 1430; opacity: 0;
}
.ensamble .senal.is-on { animation: ens-senal 1.5s var(--e-out) 1 forwards; }
.ensamble .senal--ia2.is-on { animation-delay: 700ms; }
@keyframes ens-senal { 0% { opacity: 1; stroke-dashoffset: 1430; } 92% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: 1000; } }

.ens-cierre { margin-top: var(--s-9); padding-top: var(--s-7); border-top: var(--hairline) solid var(--c-deep-rule); max-width: 56ch; color: var(--c-deep-ink-2); }

/* Reduced motion y sin JS: el sistema aparece ensamblado y construido. */
@media (prefers-reduced-motion: reduce) {
    .ensamble-wrap { --p: 1; }
    .ensamble .capa, .ensamble .espina, .ensamble .pantalla, .ensamble .movil, .ensamble .mod { opacity: 1; }
    .ensamble .conector, .ensamble .fila, .hsis__linea, .fig-dib { stroke-dashoffset: 0; }
    .ensamble .senal, .hsis__senal { display: none; }
    .paso { opacity: 1; }
    .hsis__entrada, .hsis__sistema, .hsis__salida, .hsis__resultado, .hsis__mod, .fig-ap { opacity: 1; }
}
.no-js .ensamble-wrap { --p: 1; }
.no-js .ensamble .capa, .no-js .ensamble .espina, .no-js .ensamble .pantalla, .no-js .ensamble .movil, .no-js .ensamble .mod,
.no-js .paso, .no-js .hsis__entrada, .no-js .hsis__sistema, .no-js .hsis__salida, .no-js .hsis__resultado, .no-js .hsis__mod, .no-js .fig-ap { opacity: 1; }
.no-js .ensamble .conector, .no-js .ensamble .fila, .no-js .hsis__linea, .no-js .fig-dib { stroke-dashoffset: 0; }
.no-js .flujo__paso::after { transform: scaleX(1); }
.no-js .flujo__paso { color: var(--c-ink); }
.no-js .escena { position: static; }
.no-js .rel__linea { transform: none; }


/* =============================================================================
   6. CONTEXTOS — tres arquitecturas, una misma ingeniería
   ========================================================================== */
.ctx-cab { display: grid; gap: var(--s-6); }
.ctx-cab .h2 { margin-top: var(--s-5); max-width: 16ch; }
@media (min-width: 62rem) {
    .ctx-cab { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

.conmutador { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.conmutador__btn {
    padding: var(--s-3) var(--s-4);
    background: transparent;
    border: var(--hairline) solid var(--c-rule);
    border-radius: var(--r-1);
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--c-ink-2);
    cursor: pointer;
    transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.conmutador__btn:hover { color: var(--c-ink); border-color: var(--c-ink-3); }
.conmutador__btn[aria-selected="true"] { color: var(--c-paper); background: var(--c-ink); border-color: var(--c-ink); }

.ctx { margin-top: var(--s-8); }
.ctx__panel { display: grid; gap: var(--s-7); }
.ctx__panel[hidden] { display: none; }
.ctx__fig { padding: var(--s-6) var(--s-5); background: #FFFFFF; border: var(--hairline) solid var(--c-rule); }
.ctx__fig svg { width: 100%; height: auto; overflow: visible; }
.ctx__fig .ico { color: var(--c-ink-2); }
.ctx__texto .prose { margin-top: var(--s-4); }
.ctx__cadena { margin-top: var(--s-5); color: var(--c-ink); }

/* Al mostrar un panel, su arquitectura se traza. */
.ctx__panel .fig-dib { stroke-dashoffset: 600; transition: stroke-dashoffset 900ms var(--e-out) 100ms; }
.ctx__panel .fig-ap { opacity: 0; transition: opacity var(--d-base) var(--e-out); transition-delay: calc(120ms + var(--i, 0) * 110ms); }
.ctx__panel.is-on .fig-dib { stroke-dashoffset: 0; }
.ctx__panel.is-on .fig-ap { opacity: 1; }

@media (min-width: 62rem) {
    .ctx__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(3rem, 5vw, 5rem); align-items: center; }
}

/* Sin JS: los tres contextos visibles, ya trazados. */
.no-js .conmutador { display: none; }
.no-js .ctx__panel[hidden] { display: grid; }
.no-js .ctx__panel + .ctx__panel { margin-top: var(--s-8); }
.no-js .ctx__panel .fig-dib { stroke-dashoffset: 0; }
.no-js .ctx__panel .fig-ap { opacity: 1; }

/* =============================================================================
   7. DÓNDE ENTRAMOS — Idea → Build → Operación → Evolución
   Un riel con cuatro hitos y tres tramos: dónde entra cada relación.
   ========================================================================== */
.entrada { margin-top: var(--s-9); display: grid; gap: 0; }

.entrada__riel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    padding-bottom: var(--s-4);
    border-bottom: var(--hairline) solid var(--c-ink);
}
.entrada__hito { position: relative; padding-left: var(--s-4); color: var(--c-ink); }
.entrada__hito::before {
    content: '';
    position: absolute; left: 0; top: 0.35em;
    width: 7px; height: 7px;
    border: var(--hairline) solid var(--c-ink);
    background: var(--c-paper);
}

.entrada__fila {
    display: grid;
    gap: var(--s-4);
    padding-block: var(--s-6);
    border-bottom: var(--hairline) solid var(--c-rule-soft);
}
.entrada__nombre { margin-top: var(--s-2); font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; }
.entrada__desc { margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-ink-2); max-width: 40ch; line-height: 1.5; }

.entrada__track {
    display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; min-height: 2.5rem;
    /* Guías de columna: el tramo se lee contra los cuatro hitos aunque el riel quede lejos. */
    background: repeating-linear-gradient(to right, var(--c-rule-soft) 0 var(--hairline), transparent var(--hairline) 25%);
}
.entrada__tramo {
    grid-column: var(--desde) / calc(var(--hasta) + 1);
    position: relative;
    height: var(--hairline);
    background: var(--c-ink-3);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 800ms var(--e-out) calc(200ms + var(--i, 0) * 180ms);
}
.entrada.is-visible .entrada__tramo { transform: scaleX(1); }
.entrada__tramo::after {
    content: '';
    position: absolute; right: 0; top: -3px;
    width: var(--hairline); height: 7px;
    background: var(--c-ink-3);
}
.entrada__nodo {
    position: absolute; left: 0; top: -4px;
    width: 9px; height: 9px;
    background: var(--c-signal);
}

@media (min-width: 62rem) {
    .entrada { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); }
    .entrada__riel { grid-column: 2; }
    .entrada__fila { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
    .entrada__fila .entrada__quien { grid-column: 1; }
    .entrada__fila .entrada__track { grid-column: 2; }
}
.no-js .entrada__tramo { transform: none; }

/* =============================================================================
   8. ¿QUÉ NECESITAS RESOLVER? — índice de necesidades con arquitectura viva
   Escritorio: lista a la izquierda, arquitectura a la derecha.
   Móvil: acordeón — la arquitectura se abre bajo la necesidad elegida.
   Cada botón lleva data-ruta: futura landing propia.
   ========================================================================== */
.nec-cab { display: grid; gap: var(--s-5); }
.nec-cab .h2 { margin-top: var(--s-5); max-width: 20ch; }
.nec-cab .lead { max-width: 38ch; }
@media (min-width: 62rem) {
    .nec-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(3rem, 5vw, 5rem); align-items: end; }
}

.nec-lista { margin-top: var(--s-8); display: grid; border-top: var(--hairline) solid var(--c-ink); }
.nec-lista > li { display: contents; }

.nec-btn {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 1rem;
    align-items: baseline;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-5) 0;
    background: transparent;
    border: 0;
    border-bottom: var(--hairline) solid var(--c-rule-soft);
    text-align: left;
    cursor: pointer;
    color: var(--c-ink-2);
    transition: color var(--d-fast) var(--e-out);
}
.nec-btn:hover { color: var(--c-ink); }
.nec-btn[aria-selected="true"] { color: var(--c-ink); }
.nec-btn__num { color: var(--c-ink-3); }
.nec-btn__nombre { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.nec-btn::after {
    content: '';
    width: 9px; height: 9px;
    justify-self: end;
    align-self: center;
    border: var(--hairline) solid var(--c-rule);
    transition: background-color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.nec-btn[aria-selected="true"]::after { background: var(--c-signal); border-color: var(--c-signal); }

.nec-panel { display: grid; gap: var(--s-6); padding: var(--s-5) 0 var(--s-7); border-bottom: var(--hairline) solid var(--c-rule-soft); }
.nec-panel[hidden] { display: none; }
.nec-panel__fig { padding: var(--s-6) var(--s-5); background: #FFFFFF; border: var(--hairline) solid var(--c-rule); }
.nec-panel__fig svg { width: 100%; height: auto; overflow: visible; }
.nec-panel__fig .ico { color: var(--c-ink-2); }
.nec-panel__problema { font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: -0.008em; color: var(--c-ink); max-width: 40ch; }
.nec-panel__solucion { margin-top: var(--s-5); color: var(--c-ink-2); max-width: 46ch; display: grid; gap: var(--s-2); }
.nec-panel__texto .link-arrow { margin-top: var(--s-5); }

/* Al mostrar un panel, su arquitectura se traza. */
.nec-panel .fig-dib { stroke-dashoffset: 600; transition: stroke-dashoffset 900ms var(--e-out) 100ms; }
.nec-panel .fig-ap { opacity: 0; transition: opacity var(--d-base) var(--e-out); transition-delay: calc(120ms + var(--i, 0) * 90ms); }
.nec-panel.is-on .fig-dib { stroke-dashoffset: 0; }
.nec-panel.is-on .fig-ap { opacity: 1; }

@media (min-width: 62rem) {
    .nec-lista { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); column-gap: clamp(3rem, 5vw, 5rem); }
    .nec-btn { grid-column: 1; }
    .nec-panel { grid-column: 2; grid-row: 1 / span 6; align-self: start; padding: var(--s-6) 0 0; border-bottom: 0; }
}

/* Sin JS: las seis necesidades desplegadas, ya trazadas. */
.no-js .nec-panel[hidden] { display: grid; }
.no-js .nec-panel { grid-row: auto; grid-column: 1 / -1; }
.no-js .nec-panel .fig-dib { stroke-dashoffset: 0; }
.no-js .nec-panel .fig-ap { opacity: 1; }

/* =============================================================================
  9. CIERRE — conversación
   ========================================================================== */
.cierre { display: grid; gap: var(--s-9); }

.cierre .lead { max-width: 46ch; }

@media (min-width: 62rem) {
    .cierre {
        grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
        gap: clamp(3rem, 7vw, 7rem);
        align-items: start;
    }
}

.form { display: grid; gap: var(--s-6); }
.form__fila { display: grid; gap: var(--s-6); }
.form__pie { display: grid; gap: var(--s-4); justify-items: stretch; }

@media (min-width: 30rem) {
    .form__fila { grid-template-columns: 1fr 1fr; }
    .form__pie  { justify-items: start; }
}

/* =============================================================================
  10. PIE
   ========================================================================== */
.pie { border-top: var(--hairline) solid var(--c-rule-soft); padding-block: var(--s-7); }

.pie__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
}
.pie__legal { font-size: var(--t-small); color: var(--c-ink-3); }

/* =============================================================================
  11. 404
   ========================================================================== */
.error-404 { padding-block: clamp(5rem, 12vw, 11rem); }
.error-404 .lead { margin-top: var(--s-5); }
.error-404 .btn  { margin-top: var(--s-8); }

/* =============================================================================
  12. FORMULARIO — estados de envío, error y trampa antispam
   ========================================================================== */
/* El bloque contiene aviso, acuse y formulario: al cambiar entre ellos se
   anima su altura para que nada salte de golpe. */
.form-bloque { position: relative; }
.form-bloque.is-cambiando { overflow: hidden; transition: height 420ms var(--e-out); }
.form-bloque [hidden] { display: none !important; }

/* Acuse dentro del propio bloque: ni modal, ni alerta, ni otra página. */
.form__exito { display: grid; gap: var(--s-4); justify-items: start; max-width: 44ch; }
.form__exito:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 6px; }
.section--deep .form__exito:focus-visible { outline-color: var(--c-signal); }
.form__exito-titulo {
    font-size: var(--t-h3);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    padding-left: var(--s-5);
    position: relative;
}
.form__exito-titulo::before {
    content: '';
    position: absolute;
    left: 0; top: 0.42em;
    width: 11px; height: 11px;
    background: var(--c-signal);
}
.form__exito-texto { color: var(--c-ink-2); }
.section--deep .form__exito-texto { color: var(--c-deep-ink-2); }
.form__otro {
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: var(--t-body);
}

/* Estado de envío: el aviso hace de región viva mientras se espera. */
.form__aviso--trabajando { border-left-color: var(--c-ink-3); background: transparent; }
.section--deep .form__aviso--trabajando { border-left-color: var(--c-deep-ink-2); background: transparent; }
.form[aria-busy="true"] { opacity: 0.72; transition: opacity var(--d-fast) var(--e-out); }
.form[aria-busy="true"] .campo__input { pointer-events: none; }

.form__aviso {
    max-width: 46ch;
    margin-bottom: var(--s-6);
    padding: var(--s-4) var(--s-5);
    border-left: 3px solid var(--c-signal);
    background: rgba(246, 183, 46, 0.08);
    font-size: var(--t-small);
    line-height: 1.55;
}
.form__aviso strong { display: block; font-weight: 600; letter-spacing: -0.012em; }
.form__aviso--error { border-left-color: var(--c-ink); background: rgba(14, 17, 20, 0.05); }
.form__aviso:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

.section--deep .form__aviso { background: rgba(246, 183, 46, 0.10); }
.section--deep .form__aviso--error { border-left-color: var(--c-deep-ink-2); background: rgba(255, 255, 255, 0.05); }
.section--deep .form__aviso:focus-visible { outline-color: var(--c-signal); }

.campo__error {
    font-size: var(--t-small);
    line-height: 1.4;
    color: var(--c-signal-ink);
}
.section--deep .campo__error { color: var(--c-signal); }
.campo__input[aria-invalid="true"] { border-bottom-color: var(--c-signal); border-bottom-width: 2px; }

.form__legal { font-size: var(--t-small); color: var(--c-ink-3); max-width: 44ch; }

/* Tres campos de selección en una fila: sólo cuando hay ancho para leerlos. */
.form__fila--tres { display: grid; gap: var(--s-6); }
@media (min-width: 40rem) { .form__fila--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* El desplegable hereda el trazo del resto de campos, sin cromo del sistema. */
select.campo__input {
    appearance: none;
    padding-right: var(--s-6);
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 10px) 1.15em, calc(100% - 5px) 1.15em;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
select.campo__input option { color: var(--c-ink); background: var(--c-paper); }
.section--deep .form__legal { color: var(--c-deep-ink-2); }

/* Trampa antispam: fuera de pantalla, nunca oculta con display:none para que
   los rellenadores automáticos sí la vean. */
.form__trampa,
.form__trampa input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pie__sep { margin-inline: var(--s-2); color: var(--c-rule); }
.pie__pref {
    padding: 0;
    background: none;
    border: 0;
    font-size: inherit;
    color: var(--c-ink-3);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--c-rule);
    text-underline-offset: 3px;
}
.pie__pref:hover { color: var(--c-ink); text-decoration-color: var(--c-signal); }
.pie__pref[hidden] { display: none; }

/* =============================================================================
  13. CONSENTIMIENTO — sólo aparece si hay alguna herramienta configurada
   ========================================================================== */
.consent {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: var(--c-deep);
    color: var(--c-deep-ink);
    border-top: var(--hairline) solid var(--c-deep-rule);
}
.consent[hidden] { display: none; }
.consent__caja { display: grid; gap: var(--s-5); padding-block: var(--s-5); }
.consent__titulo { font-weight: 600; letter-spacing: -0.014em; }
.consent__texto { font-size: var(--t-small); line-height: 1.55; color: var(--c-deep-ink-2); max-width: 62ch; }
.consent__texto .link { color: var(--c-deep-ink); }
.consent__acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.consent__acciones .btn { flex: 1 1 auto; }

/* El banner es superficie oscura pero no es `.section--deep`, así que los
   botones no heredaban su tratamiento: `.btn--ghost` quedaba con tinta casi
   negra sobre fondo casi negro y su texto resultaba ilegible. Se replica aquí
   el mismo tratamiento, con el filete del secundario en un tono que sí se
   distingue del fondo. */
.consent .btn--ghost {
    color: var(--c-deep-ink);
    border-color: var(--c-deep-ink-2);
}
.consent .btn--ghost:hover { border-color: var(--c-deep-ink); background: rgba(255, 255, 255, 0.06); }
.consent .btn--primary {
    background: var(--c-signal);
    color: var(--c-deep);
    border-color: var(--c-signal);
}
.consent .btn--primary:hover { background: #FFC94F; border-color: #FFC94F; }
.consent :focus-visible { outline-color: var(--c-signal); }

@media (min-width: 48rem) {
    .consent__caja { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-8); }
    .consent__acciones .btn { flex: 0 0 auto; }
}