/* =============================================================================
   SOFTWARE A MEDIDA — composición de /software-a-medida.
   Depende de sistema.css y pagina.css. Tensión → límite → decisión → cambio.
   ========================================================================== */
.sam-cab { display: grid; gap: var(--s-5); }
.sam-cab .h2 { margin-top: var(--s-5); max-width: 22ch; }
.sam-cab .lead { max-width: 36ch; }
@media (min-width: 62rem) {
    .sam-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(3rem, 5vw, 5rem); align-items: end; }
}

/* =============================================================================
   1. HERO — plano de decisión
   ========================================================================== */
.sam-hero { padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) clamp(3.5rem, 2rem + 5vw, 7rem); }
.sam-hero__grid { display: grid; gap: var(--s-8); }
.sam-hero .display { margin-top: var(--s-6); max-width: 15ch; }
.sam-hero .lead { margin-top: var(--s-6); max-width: 54ch; }
.sam-hero__visual { display: none; }
@media (min-width: 62rem) {
    .sam-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem); gap: clamp(3rem, 6vw, 6rem); align-items: center; }
    .sam-hero__visual { display: block; }
}

.plano { width: 100%; height: auto; overflow: visible; }
.plano__eje { stroke: var(--c-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plano__etq { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.08em; fill: var(--c-ink-3); }
.plano__etq--r { text-anchor: end; }
.plano__zona { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.08em; fill: var(--c-ink-2); opacity: 0; transition: opacity var(--d-base) var(--e-out) 900ms; }
.plano__zona--c { fill: var(--c-ink); font-weight: 600; }
.plano__frontera { fill: none; stroke: var(--c-rule); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; stroke-dashoffset: 600; transition: stroke-dashoffset 1.2s var(--e-out) 300ms; }
.plano__trazo { fill: none; stroke: var(--c-signal); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1.8s var(--e-out) 1400ms; }
.plano__inicio { fill: #FFFFFF; stroke: var(--c-ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--d-base) var(--e-out) 1200ms; }
.plano__hitos rect { fill: var(--c-ink); opacity: 0; transition: opacity var(--d-base) var(--e-out) calc(1900ms + var(--i, 0) * 350ms); }
.plano__nota { font-family: var(--f-mono); font-size: 7.5px; letter-spacing: 0.08em; fill: var(--c-ink-3); opacity: 0; transition: opacity var(--d-base) var(--e-out); }
.plano__nota:nth-of-type(1) { transition-delay: 1950ms; } .plano__nota:nth-of-type(2) { transition-delay: 2300ms; } .plano__nota:nth-of-type(3) { transition-delay: 2650ms; }
.plano__punto { fill: var(--c-signal); opacity: 0; transition: opacity var(--d-base) var(--e-out) 3100ms; }
.plano.is-visible .plano__frontera, .plano.is-visible .plano__trazo { stroke-dashoffset: 0; }
.plano.is-visible .plano__zona, .plano.is-visible .plano__inicio, .plano.is-visible .plano__hitos rect, .plano.is-visible .plano__punto, .plano.is-visible .plano__nota { opacity: 1; }

/* =============================================================================
   2. CUANDO LO GENÉRICO FUNCIONA — breve, tres señales encendidas
   ========================================================================== */
.generico { display: grid; gap: var(--s-7); }
.generico .h2 { margin-top: var(--s-5); }
.generico .lead { margin-top: var(--s-5); max-width: 40ch; }
.senales { display: grid; gap: 0; border-top: var(--hairline) solid var(--c-ink); align-self: end; }
.senal { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: var(--hairline) solid var(--c-rule-soft); color: var(--c-ink); }
.senal__estado { position: relative; width: 2rem; height: 0.875rem; border: var(--hairline) solid var(--c-ink-3); border-radius: 999px; }
.senal__estado::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(0.875rem - 6px); height: calc(0.875rem - 6px); border-radius: 50%; background: var(--c-ink-3); transition: transform var(--d-base) var(--e-out) calc(300ms + var(--i, 0) * 220ms), background-color var(--d-base) var(--e-out) calc(300ms + var(--i, 0) * 220ms); }
.senales.is-visible .senal__estado { border-color: var(--c-ink); }
.senales.is-visible .senal__estado::after { transform: translateX(calc(2rem - 0.875rem)); background: var(--c-signal); }
@media (min-width: 62rem) { .generico { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(3rem, 6vw, 7rem); align-items: end; } }
.no-js .senal__estado::after { transform: translateX(calc(2rem - 0.875rem)); background: var(--c-signal); }

/* =============================================================================
   3. EL DESBORDE — la operación empieza dentro y termina alrededor
   ========================================================================== */
.desborde { margin-top: var(--s-9); display: grid; gap: var(--s-6); align-items: center; }
.desborde__caja {
    position: relative; display: grid; gap: var(--s-4); justify-items: center; text-align: center;
    padding: var(--s-6) var(--s-6);
    border: var(--hairline) solid var(--c-ink); background: #FFFFFF;
}
.desborde.is-visible .desborde__caja { animation: caja-tension 600ms var(--e-out) 1500ms 1 forwards; }
@keyframes caja-tension { to { border-color: var(--c-signal); border-style: dashed; } }
.desborde__nucleo { display: grid; grid-template-columns: repeat(3, 1.5rem); gap: 0.375rem; }
.desborde__nucleo i { display: block; height: 1.5rem; border: var(--hairline) solid var(--c-ink-3); background: var(--c-paper); }
.desborde__base { font-size: var(--t-small); color: var(--c-ink-2); }

.desborde__lado { display: grid; gap: var(--s-3); }
.sat {
    position: relative; padding: var(--s-3) var(--s-4); font-size: var(--t-small); line-height: 1.4; color: var(--c-ink);
    border: var(--hairline) solid var(--c-rule); background: var(--c-paper);
    opacity: 0; transform: scale(0.96);
    transition: opacity var(--d-base) var(--e-out) calc(200ms + var(--i, 0) * 180ms), transform var(--d-base) var(--e-out) calc(200ms + var(--i, 0) * 180ms), border-color var(--d-fast);
}
.sat::before { content: ''; position: absolute; width: 7px; height: 7px; background: var(--c-signal); }
.sat::after { content: ''; position: absolute; background: var(--c-rule); }
.desborde.is-visible .sat { opacity: 1; transform: none; }
.desborde__pie { margin-top: var(--s-8); font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.018em; max-width: 30ch; }

/* Escritorio: satélites a los lados, conectados a la caja. */
@media (min-width: 62rem) {
    .desborde { grid-template-columns: minmax(0, 1fr) 20rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s-8); row-gap: var(--s-6); }
    .desborde__lado--izq { grid-column: 1; grid-row: 1; }
    .desborde__caja { grid-column: 2; grid-row: 1; align-self: center; }
    .desborde__lado--der { grid-column: 3; grid-row: 1; }
    .desborde__lado--abajo { grid-column: 2; grid-row: 2; }
    .desborde__lado--izq .sat::after { right: calc(-1 * var(--s-8)); top: 50%; width: var(--s-8); height: var(--hairline); }
    .desborde__lado--izq .sat::before { right: -4px; top: calc(50% - 3px); }
    .desborde__lado--der .sat::after { left: calc(-1 * var(--s-8)); top: 50%; width: var(--s-8); height: var(--hairline); }
    .desborde__lado--der .sat::before { left: -4px; top: calc(50% - 3px); }
    .desborde__lado--abajo .sat { text-align: center; }
    .desborde__lado--abajo .sat::after { left: 50%; top: calc(-1 * var(--s-6)); width: var(--hairline); height: var(--s-6); }
    .desborde__lado--abajo .sat::before { left: calc(50% - 3px); top: -4px; }
}
/* Móvil: la caja arriba y las excepciones descolgadas de una espina. */
@media (max-width: 61.9375rem) {
    .desborde__lado { padding-left: var(--s-5); border-left: var(--hairline) solid var(--c-rule); }
    .sat::before { left: calc(-1 * var(--s-5) - 4px); top: calc(50% - 3px); }
    .sat::after { display: none; }
    .desborde__lado--abajo { margin-top: calc(-1 * var(--s-3)); }
}
.no-js .sat { opacity: 1; transform: none; }
.no-js .desborde__caja { border-color: var(--c-signal); border-style: dashed; }

/* =============================================================================
   4. DECISIÓN — una pregunta, tres salidas (sobre grafito)
   ========================================================================== */
.decision { margin-top: var(--s-9); display: grid; gap: var(--s-6); }
.decision__necesidad { display: none; }
.decision__pregunta { display: grid; gap: var(--s-2); padding: var(--s-5) var(--s-6); border: var(--hairline) solid var(--c-deep-ink-2); color: var(--c-deep-ink); }
.decision__pregunta p { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; }
.decision__pregunta .mono { color: var(--c-deep-ink-2); }

.decision__respuestas { display: grid; gap: var(--s-3); }
.decision__resp {
    position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--s-3); align-items: center;
    width: 100%; padding: var(--s-4) var(--s-5); text-align: left; cursor: pointer;
    background: transparent; border: var(--hairline) solid var(--c-deep-rule); color: var(--c-deep-ink-2);
    font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.012em;
    transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.decision__resp::before { content: ''; width: 9px; height: 9px; border: var(--hairline) solid var(--c-deep-ink-2); background: var(--c-deep); transition: background-color var(--d-fast), border-color var(--d-fast); }
.decision__resp:hover { color: var(--c-deep-ink); border-color: var(--c-deep-ink-2); }
.decision__resp[aria-selected="true"] { color: var(--c-deep-ink); border-color: var(--c-signal); }
.decision__resp[aria-selected="true"]::before { background: var(--c-signal); border-color: var(--c-signal); }

.decision__salida { display: grid; gap: var(--s-3); padding: var(--s-6); border: var(--hairline) solid var(--c-deep-rule); background: var(--c-deep-2); color: var(--c-deep-ink-2); }
.decision__salida[hidden] { display: none; }
.decision__salida .mono { color: var(--c-deep-ink-2); }
.decision__titulo { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; color: var(--c-deep-ink); }
.decision__salida p { max-width: 42ch; line-height: 1.55; }

@media (min-width: 62rem) {
    .decision { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) minmax(0, 24rem); column-gap: var(--s-8); align-items: center; }
    .decision__pregunta { position: relative; }
    .decision__pregunta::after, .decision__respuestas .decision__resp::after {
        content: ''; position: absolute; top: 50%; height: var(--hairline); background: var(--c-deep-rule);
    }
    .decision__pregunta::after { left: 100%; width: var(--s-8); }
    .decision__resp::after { left: 100%; width: var(--s-8); transition: background-color var(--d-fast) var(--e-out); }
    .decision__resp[aria-selected="true"]::after { background: var(--c-signal); }
    .decision__respuestas { position: relative; }
    .decision__respuestas::before { content: ''; position: absolute; left: calc(-1 * var(--s-8)); top: 50%; width: var(--s-8); height: var(--hairline); background: var(--c-deep-rule); }
}
.no-js .decision__salida[hidden] { display: grid; }
.no-js .decision__salidas { display: grid; gap: var(--s-4); }

/* =============================================================================
   5. QUÉ CAMBIA — antes → después
   ========================================================================== */
.cambio { margin-top: var(--s-8); border-top: var(--hairline) solid var(--c-ink); }
.cambio__fila {
    display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr); gap: var(--s-4); align-items: center;
    padding: var(--s-5) 0; border-bottom: var(--hairline) solid var(--c-rule-soft);
}
.cambio__antes { color: var(--c-ink-3); font-size: var(--t-body); text-decoration: line-through; text-decoration-color: var(--c-rule); text-decoration-thickness: 1px; }
.cambio__despues { color: var(--c-ink); font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; opacity: 0; transform: translateX(-6px); transition: opacity var(--d-slow) var(--e-out) calc(200ms + var(--i, 0) * 120ms), transform var(--d-slow) var(--e-out) calc(200ms + var(--i, 0) * 120ms); }
.cambio__nexo { position: relative; height: var(--hairline); background: var(--c-rule); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--e-out) calc(var(--i, 0) * 120ms); }
.cambio__nexo::after { content: ''; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; background: var(--c-signal); }
.cambio.is-visible .cambio__nexo { transform: scaleX(1); }
.cambio.is-visible .cambio__despues { opacity: 1; transform: none; }
@media (max-width: 47.9375rem) {
    .cambio__fila { grid-template-columns: 1fr; gap: var(--s-2); }
    .cambio__nexo { width: 2.5rem; }
    .cambio__despues { font-size: 1.25rem; }
}
.no-js .cambio__nexo { transform: none; }
.no-js .cambio__despues { opacity: 1; transform: none; }

/* =============================================================================
   6. GRADOS — Configurar → Integrar → Extender → Construir
   El nodo crece con lo que se construye.
   ========================================================================== */
.grados { margin-top: var(--s-9); display: grid; gap: var(--s-7); }
.grado { position: relative; padding-top: var(--s-6); }
.grado::before { content: ''; position: absolute; left: 0; top: 8px; width: 100%; height: var(--hairline); background: var(--c-rule); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--e-out) calc(var(--i, 0) * 160ms); }
.grados.is-visible .grado::before { transform: scaleX(1); }
.grado:last-child::before { background: linear-gradient(to right, var(--c-rule), transparent); }
.grado__marca { position: absolute; left: 0; top: calc(8px - (7px + var(--i, 0) * 3px) / 2); width: calc(7px + var(--i, 0) * 3px); height: calc(7px + var(--i, 0) * 3px); border: var(--hairline) solid var(--c-ink); background: var(--c-paper); }
.grado--total .grado__marca { background: var(--c-signal); border-color: var(--c-signal); }
.grado__nombre { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; }
.grado__que { margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-ink-2); line-height: 1.5; max-width: 26ch; }
.grado .link-arrow, .grado__ruta { display: inline-block; margin-top: var(--s-4); font-size: var(--t-small); }
.grado__ruta { color: var(--c-ink-3); }
.grado__rutas { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
@media (min-width: 48rem) { .grados { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } .grado::before { width: calc(100% + var(--s-5)); } }
.no-js .grado::before { transform: none; }

/* Sin JS: el plano de decisión aparece completo. */
.no-js .plano__frontera, .no-js .plano__trazo { stroke-dashoffset: 0; }
.no-js .plano__zona, .no-js .plano__inicio, .no-js .plano__hitos rect, .no-js .plano__punto, .no-js .plano__nota { opacity: 1; }