/* =============================================================================
   DESARROLLO DE SOFTWARE — composición de la landing /desarrollo-de-software.
   Depende de sistema.css y pagina.css (tokens, primitivos y figuras).
   ========================================================================== */

/* --- Cabeceras de sección: titular + lead en dos columnas ------------------ */
.dsw-cab { display: grid; gap: var(--s-5); }
.dsw-cab .h2 { margin-top: var(--s-5); max-width: 22ch; }
.dsw-cab .lead { max-width: 36ch; }
@media (min-width: 62rem) {
    .dsw-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(3rem, 5vw, 5rem); align-items: end; }
}

/* =============================================================================
   1. HERO — la operación que no cabe en la caja
   ========================================================================== */
.dsw-hero { padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) clamp(3.5rem, 2rem + 5vw, 7rem); }
.dsw-hero__grid { display: grid; gap: var(--s-8); }
/* El H1 es largo: una escala un punto menor que el HOME para quedar en cuatro líneas. */
.dsw-hero .display { margin-top: var(--s-6); max-width: 17ch; font-size: clamp(2.375rem, 1rem + 4.6vw, 4.5rem); }
.dsw-hero .lead { margin-top: var(--s-6); max-width: 52ch; }
.dsw-hero__visual { display: none; }
@media (min-width: 62rem) {
    .dsw-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem); gap: clamp(3rem, 6vw, 6rem); align-items: center; }
    .dsw-hero .display { max-width: none; }
    .dsw-hero__visual { display: block; }
}

.enc { width: 100%; height: auto; overflow: visible; }
.enc__caja { fill: none; stroke: var(--c-ink-3); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; transition: opacity 700ms var(--e-out) 1500ms; }
.enc__contorno { fill: color-mix(in srgb, var(--c-signal) 6%, transparent); stroke: var(--c-ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-dasharray: 1100; stroke-dashoffset: 1100; transition: stroke-dashoffset 1.4s var(--e-out) 1700ms; }
.enc__aristas path { fill: none; stroke: var(--c-rule); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.1s var(--e-out) 300ms; }
.enc__nodos rect { fill: #FFFFFF; stroke: var(--c-ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--d-base) var(--e-out) calc(200ms + var(--i, 0) * 90ms); }
.enc__nodo--centro { fill: var(--c-signal) !important; stroke: var(--c-signal) !important; }
.enc__etq { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.08em; fill: var(--c-ink-3); }
.enc__etq--caja { transition: opacity 700ms var(--e-out) 1500ms; }
.enc__etq--contorno { fill: var(--c-ink); opacity: 0; transition: opacity var(--d-base) var(--e-out) 2600ms; }
.enc__etq--op { fill: var(--c-ink-2); opacity: 0; transition: opacity var(--d-base) var(--e-out) 900ms; }
.enc.is-visible .enc__aristas path { stroke-dashoffset: 0; }
.enc.is-visible .enc__nodos rect { opacity: 1; }
.enc.is-visible .enc__etq--op { opacity: 1; }
.enc.is-visible .enc__caja, .enc.is-visible .enc__etq--caja { opacity: 0.25; }
.enc.is-visible .enc__contorno { stroke-dashoffset: 0; }
.enc.is-visible .enc__etq--contorno { opacity: 1; }

/* =============================================================================
   2. QUÉ PODEMOS CONSTRUIR — nombre fuerte + conceptos, escaneable
   ========================================================================== */
.catalogo { margin-top: var(--s-8); display: grid; border-top: var(--hairline) solid var(--c-ink); }
.catalogo__grupo { padding: var(--s-6) 0; border-bottom: var(--hairline) solid var(--c-rule-soft); }
.catalogo__para { color: var(--c-ink-3); }
.catalogo__grupo ul { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.catalogo__grupo li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.catalogo__grupo li > span { display: grid; gap: var(--s-1); }
.catalogo__grupo li b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.016em; color: var(--c-ink); line-height: 1.25; }
.catalogo__conceptos { color: var(--c-ink-3); text-transform: none; letter-spacing: 0.02em; font-size: 0.75rem; }
.catalogo__grupo .ico { width: 20px; height: 20px; color: var(--c-ink); margin-top: 3px; }
@media (min-width: 48rem) {
    .catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalogo__grupo { padding: var(--s-7) var(--s-6) var(--s-7) 0; border-right: var(--hairline) solid var(--c-rule-soft); }
    .catalogo__grupo:nth-child(even) { padding-left: var(--s-6); padding-right: 0; border-right: 0; }
}
@media (min-width: 62rem) {
    .catalogo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .catalogo__grupo, .catalogo__grupo:nth-child(even) { padding: var(--s-7) var(--s-5) var(--s-7) 0; border-right: var(--hairline) solid var(--c-rule-soft); }
    .catalogo__grupo + .catalogo__grupo { padding-left: var(--s-5); }
    .catalogo__grupo:last-child { border-right: 0; padding-right: 0; }
}

.dsw-relacionadas { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.dsw-relacionadas .mono { color: var(--c-ink-3); }

/* =============================================================================
   3. DEL PROCESO AL SOFTWARE — la interpretación
   Izquierda: lo que nos cuentas, desordenado. Centro: la lente. Derecha: seis
   capas ordenadas. Elegir una capa ilumina los fragmentos que la alimentan.
   ========================================================================== */
.interp { margin-top: var(--s-8); display: grid; gap: var(--s-6); }

.interp__frags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.interp__frag {
    position: relative;
    padding: var(--s-3) var(--s-4);
    border: var(--hairline) solid var(--c-rule);
    font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--c-ink-3);
    background: #FFFFFF;
    transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
    opacity: 0; transform: translateX(-6px);
}
.interp.is-visible .interp__frag { opacity: 1; transform: none; transition: opacity var(--d-base) var(--e-out) calc(var(--i, 0) * 50ms), transform var(--d-base) var(--e-out) calc(var(--i, 0) * 50ms), color var(--d-fast), border-color var(--d-fast); }
.interp__frag.is-on { color: var(--c-ink); border-color: var(--c-signal); }
.interp__frag.is-on::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-signal); }

.interp__lente {
    display: grid; gap: var(--s-1); align-content: center; justify-items: center; text-align: center;
    padding: var(--s-5) var(--s-4);
    border: var(--hairline) solid var(--c-ink);
    background: var(--c-paper);
    position: relative;
}
.interp__lente .mono { color: var(--c-ink); }
.interp__lente-sub { font-size: var(--t-small); color: var(--c-ink-2); }

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

.interp__que { display: grid; gap: var(--s-2); color: var(--c-ink); font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: -0.008em; max-width: 44ch; }
.interp__que[hidden] { display: none; }
.interp__que .mono { color: var(--c-ink-3); }

@media (min-width: 62rem) {
    .interp {
        grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: var(--s-6);
        align-items: start;
    }
    .interp__frags { grid-column: 1; grid-row: 1 / span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
    .interp__lente { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
    /* Conectores hacia y desde la lente */
    .interp__lente::before, .interp__lente::after {
        content: ''; position: absolute; top: 50%; width: var(--s-6); height: var(--hairline); background: var(--c-rule);
        transform: scaleX(0); transition: transform 700ms var(--e-out) 300ms;
    }
    .interp__lente::before { right: 100%; transform-origin: right; }
    .interp__lente::after  { left: 100%;  transform-origin: left; }
    .interp.is-visible .interp__lente::before, .interp.is-visible .interp__lente::after { transform: scaleX(1); }
    .interp__capas { grid-column: 3; grid-row: 1; }
    .interp__paneles { grid-column: 3; grid-row: 2; margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--hairline) solid var(--c-rule); }
}
.no-js .interp__que[hidden] { display: grid; }
.no-js .interp__que + .interp__que { margin-top: var(--s-4); }
.no-js .interp__frag { opacity: 1; transform: none; }

/* =============================================================================
   4. EL SISTEMA COMPLETO — capas protagonistas, una explicación por estado
   ========================================================================== */
.corte { margin-top: var(--s-8); display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s-4) var(--s-4); }
.corte__barra { position: relative; grid-row: 1 / span 2; }
.corte__barra::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--c-signal); transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--e-out) 200ms; }
.corte.is-visible .corte__barra::before { transform: scaleY(1); }
.corte__barra .mono { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; color: var(--c-deep-ink); background: var(--c-deep); padding: 0 var(--s-3); }

.corte__capas { display: grid; gap: 3px; }
.corte__capa {
    display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline;
    width: 100%; padding: var(--s-3) var(--s-5);
    text-align: left; cursor: pointer;
    border: var(--hairline) solid var(--c-deep-rule);
    background: color-mix(in srgb, var(--c-deep-2) calc(40% + var(--i, 0) * 7%), var(--c-deep));
    color: var(--c-deep-ink-2);
    opacity: 0; transform: translateX(-8px);
    transition: opacity 600ms var(--e-out) calc(var(--i, 0) * 90ms), transform 600ms var(--e-out) calc(var(--i, 0) * 90ms), border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.corte.is-visible .corte__capa { opacity: 1; transform: none; }
.corte__capa .mono { color: var(--c-deep-ink-2); }
.corte__capa:hover { border-color: var(--c-deep-ink-2); color: var(--c-deep-ink); }
.corte__capa[aria-selected="true"] { border-color: var(--c-signal); color: var(--c-deep-ink); }
.corte__capa--fina { padding-block: var(--s-2); background: var(--c-deep); }
.corte__capa--fina .corte__nombre { color: var(--c-signal); }
.corte__capa--base { border-style: dashed; }
.corte__nombre { font-weight: 600; letter-spacing: -0.016em; }

.corte__paneles { grid-column: 2; }
.corte__panel { display: grid; gap: var(--s-2); padding-top: var(--s-5); border-top: var(--hairline) solid var(--c-deep-rule); }
.corte__panel[hidden] { display: none; }
.corte__panel .mono { color: var(--c-deep-ink-2); }
.corte__titulo { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; color: var(--c-deep-ink); }
.corte__que { color: var(--c-deep-ink-2); max-width: 40ch; font-size: var(--t-lead); line-height: var(--lh-lead); }

@media (min-width: 62rem) {
    .corte { grid-template-columns: 2.25rem minmax(0, 1fr) minmax(0, 24rem); column-gap: var(--s-6); align-items: start; }
    .corte__barra { grid-row: 1; }
    .corte__paneles { grid-column: 3; grid-row: 1; position: sticky; top: 7rem; }
    .corte__panel { padding-top: 0; border-top: 0; }
}
.no-js .corte__capa { opacity: 1; transform: none; }
.no-js .corte__barra::before { transform: none; }
.no-js .corte__panel[hidden] { display: grid; }
.no-js .corte__panel + .corte__panel { margin-top: var(--s-6); padding-top: var(--s-5); border-top: var(--hairline) solid var(--c-deep-rule); }

/* =============================================================================
   5. MÉTODO — riel de seis pasos, una explicación por estado
   ========================================================================== */
.metodo { margin-top: var(--s-8); display: grid; gap: var(--s-7); }
.metodo__riel { display: grid; gap: var(--s-4); }
.metodo__item { position: relative; }
.metodo__item::before { content: ''; position: absolute; left: 0; top: 5px; width: 100%; height: var(--hairline); background: var(--c-rule); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--e-out) calc(var(--i, 0) * 110ms); }
.metodo.is-visible .metodo__item::before { transform: scaleX(1); }
.metodo__item:last-child::before { background: linear-gradient(to right, var(--c-rule), transparent); }
.metodo__paso {
    position: relative; display: grid; gap: var(--s-2);
    width: 100%; padding: var(--s-5) 0 0; background: transparent; border: 0; text-align: left; cursor: pointer;
    color: var(--c-ink-3); transition: color var(--d-fast) var(--e-out);
}
.metodo__paso::before { content: ''; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border: var(--hairline) solid var(--c-ink-3); background: var(--c-paper); transition: background-color var(--d-fast), border-color var(--d-fast); }
.metodo__paso:hover { color: var(--c-ink); }
.metodo__paso[aria-selected="true"] { color: var(--c-ink); }
.metodo__paso[aria-selected="true"]::before { background: var(--c-signal); border-color: var(--c-signal); }
.metodo__paso--clave::before { width: 15px; height: 15px; top: -2px; border-color: var(--c-ink); }
.metodo__nombre { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.016em; }
.metodo__paso--clave .metodo__nombre { font-size: var(--t-h3); }
.metodo__que { font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: -0.008em; color: var(--c-ink); max-width: 46ch; }
.metodo__que[hidden] { display: none; }
@media (min-width: 48rem) { .metodo__riel { grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-5); } .metodo__item::before { width: calc(100% + var(--s-5)); } }
@media (min-width: 62rem) { .metodo__riel { grid-template-columns: repeat(6, 1fr); } .metodo__paneles { min-height: 5rem; } }
.no-js .metodo__item::before { transform: none; }
.no-js .metodo__que[hidden] { display: block; }
.no-js .metodo__que + .metodo__que { margin-top: var(--s-3); }

/* =============================================================================
   6. PREGUNTAS — details nativos, compactos
   ========================================================================== */
.faq { display: grid; gap: var(--s-7); }
.faq__cab .h2 { margin-top: var(--s-5); max-width: 16ch; }
.faq__lista { border-top: var(--hairline) solid var(--c-ink); }
.faq__item { border-bottom: var(--hairline) solid var(--c-rule-soft); }
.faq__item summary {
    display: grid; grid-template-columns: minmax(0, 1fr) 1rem; gap: var(--s-4); align-items: center;
    padding: var(--s-5) 0; cursor: pointer; list-style: none;
    font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.014em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ''; width: 9px; height: 9px; border: var(--hairline) solid var(--c-ink-3); justify-self: end; transition: background-color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out); }
.faq__item[open] summary::after { background: var(--c-signal); border-color: var(--c-signal); }
.faq__item p { padding: 0 0 var(--s-6); color: var(--c-ink-2); max-width: 62ch; }
@media (min-width: 62rem) {
    .faq { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(3rem, 6vw, 7rem); align-items: start; }
    .faq__cab { position: sticky; top: 7rem; }
}

/* Enlace de navegación activo */
.nav__link.is-actual { color: var(--c-ink); }

/* Sin JS: la operación y su contorno a medida aparecen completos. */
.no-js .enc__aristas path, .no-js .enc__contorno { stroke-dashoffset: 0; }
.no-js .enc__nodos rect, .no-js .enc__etq--op, .no-js .enc__etq--contorno { opacity: 1; }
.no-js .enc__caja, .no-js .enc__etq--caja { opacity: 0.25; }