/* =========================================================================
   diseno.css — Estilos propios de la página "Diseño".

   Diseño es el servicio más visual: el Hero se resuelve como composición
   EDITORIAL asimétrica (no "texto izquierda / mockup derecha" como
   aplicaciones.php y web.php) y con un sistema gráfico de "soportes de
   comunicación" abstractos.

   Reutiliza de los archivos globales:
     · .container ..................... layout.css
     · .eyebrow ....................... components.css
     · .btn / .btn--primary .......... components.css
     · tokens de color, tipografía y espaciado ... variables.css
     · foco visible, enlaces, tipografía base .... base.css

   Secciones: Hero · Qué diseñamos. Se irá ampliando por fases.
   ========================================================================= */

/* ---------------------------------------------------------------
   HERO — composición editorial asimétrica
   Jerarquía: H1 · composición visual · texto · CTA · eyebrow.
   Móvil : eyebrow → H1 → texto → CTA → composición (apilado).
   >=60rem: eyebrow + H1 a todo el ancho; debajo, la composición
           (ancha, a la izquierda) y el texto + CTA (columna estrecha,
           a la derecha). Sin min-height, sin 100vh.
   --------------------------------------------------------------- */

.dsg-hero {
    padding-block: var(--space-section-sm);
    background-color: var(--bg-page);              /* Cal */
}

.dsg-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-block);
}

/* --- Cabecera: eyebrow + H1 grande ---------------------- */

.dsg-hero__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
}

.dsg-hero__title {
    max-width: 18ch;
    /* H1 con más presencia que aplicaciones/web (registro editorial). */
    font-size: clamp(2.25rem, 1.4rem + 4vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

/* --- Texto + CTA (medida estrecha) --------------------- */

.dsg-hero__lede {
    max-width: 34rem;
}

.dsg-hero__text {
    max-width: 42ch;
    font-size: var(--fs-300);
    line-height: var(--lh-base);
    color: var(--text-strong);
}
.dsg-hero__text + .dsg-hero__text {
    margin-top: var(--space-sm);
}

.dsg-hero__actions {
    margin-top: var(--space-lg);
}

/* --- Sistema gráfico de soportes ---------------------- */
/* Cada .dsg-piece es un "soporte de comunicación" abstracto: cambian la
   proporción, la orientación y el tamaño, pero todos comparten retícula
   (padding), tipografía simulada (barras Carbón), líneas, márgenes y color.
   Piezas diferentes · un mismo lenguaje. Se colocan con flex-wrap para que
   en móvil se REORGANICEN (no solo se reduzcan). */

.dsg-hero__visual {
    min-width: 0;
}

.dsg-sys {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(0.7rem, 2.4vw, 1.25rem);
    width: 100%;
    max-width: 24rem;
    margin-inline: auto;                           /* centrado en móvil */
}

.dsg-piece {
    flex: 0 1 47%;                                 /* sin flex-grow: no se "inflan" al quedar solas en una fila */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: clamp(0.45rem, 1.6vw, 0.75rem);
    background-color: var(--color-cal);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Elementos internos compartidos (el "mismo lenguaje") */
.dsg-piece__type {
    height: 0.5rem;
    width: 70%;
    background-color: var(--color-carbon);         /* tipografía simulada */
}
.dsg-piece__type--xl { height: 0.95rem; width: 90%; }
.dsg-piece__type--lg { height: 0.62rem; width: 66%; }
.dsg-piece__type--md { height: 0.5rem; width: 52%; }
.dsg-piece__type--sm { height: 0.4rem; width: 58%; }
.dsg-piece__type--accent {                         /* palabra destacada · acento digital */
    box-shadow: inset 0 -3px 0 var(--accent);
}

.dsg-piece__line {
    height: 0.28rem;
    width: 100%;
    background-color: rgb(23 23 21 / 0.14);
}
.dsg-piece__line--short { width: 55%; }

.dsg-piece__cover {
    flex: 0 0 40%;
    background-color: var(--color-piedra);         /* zona de imagen/superficie */
}
.dsg-piece__cover--fill { flex: 1; }

.dsg-piece__mark {
    width: 0.9rem;
    height: 0.9rem;
    background-color: var(--color-carbon);         /* "logotipo" de la pieza */
}
.dsg-piece__mark--sm { width: 0.6rem; height: 0.6rem; }

.dsg-piece__bar {
    height: 0.55rem;
    width: 45%;
    background-color: var(--accent);               /* acento digital (Azul) */
}

.dsg-piece__spacer { flex: 1; }

/* --- Carácter y proporción de cada soporte ----------- */

/* Cartel: vertical, una gran zona tipográfica manda */
.dsg-piece--poster {
    aspect-ratio: 3 / 4;
    padding: clamp(0.7rem, 2.4vw, 1.15rem);
    transform: rotate(-1.2deg);
}
.dsg-piece--poster .dsg-piece__type--xl { height: 1.5rem; }
.dsg-piece--poster .dsg-piece__type--lg { height: 0.95rem; }

/* Publicación: portada + tipografía + líneas (portada en Cereal) */
.dsg-piece--pub {
    aspect-ratio: 3 / 4;
    transform: rotate(1deg);
}
.dsg-piece--pub .dsg-piece__cover {
    flex: 0 0 46%;
    background-color: var(--color-cereal);         /* Diseño = servicio más visual: Cereal con algo más de presencia */
}

/* Tarjeta: pequeño formato apaisado con marca + detalle Cereal */
.dsg-piece--card {
    aspect-ratio: 7 / 4;
    transform: rotate(-0.7deg);
}
.dsg-piece--card .dsg-piece__mark {
    background-color: var(--color-cereal);         /* segundo (y último) toque Cereal */
}

/* Formato digital: superficie + barra Azul */
.dsg-piece--digital {
    aspect-ratio: 1 / 1;
    transform: rotate(1.4deg);
}

/* Bloque tipográfico: sin marco, solo grandes zonas de texto.
   Ocupa toda la fila y su altura la define el contenido (banda corta). */
.dsg-piece--type {
    flex-basis: 100%;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 0.55rem;
    transform: rotate(-0.8deg);
}
.dsg-piece--type .dsg-piece__type--xl { height: 1.35rem; }

/* Hoja: documento, casi solo líneas */
.dsg-piece--sheet {
    aspect-ratio: 3 / 4;
    gap: 0.5rem;
    transform: rotate(0.7deg);
}

/* ---------------------------------------------------------------
   >= 46rem · el sistema pasa a 3 piezas por fila (collage)
   El Hero sigue apilado (texto sobre composición) hasta 60rem.
   --------------------------------------------------------------- */

@media (min-width: 46rem) {
    .dsg-sys {
        max-width: 42rem;
    }
    .dsg-piece          { flex-basis: 31%; }
    .dsg-piece--pub     { flex-basis: 28%; }
    .dsg-piece--digital { flex-basis: 25%; }
    .dsg-piece--sheet   { flex-basis: 24%; }
}

/* ---------------------------------------------------------------
   >= 60rem · composición editorial asimétrica
   eyebrow + H1 a todo el ancho; debajo composición (izquierda,
   ancha) y texto + CTA (derecha, columna estrecha).
   --------------------------------------------------------------- */

@media (min-width: 60rem) {

    .dsg-hero {
        padding-block: var(--space-block);
    }

    .dsg-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
        row-gap: clamp(var(--space-lg), 4vw, var(--space-xl));
        align-items: start;
    }

    .dsg-hero__head   { grid-column: 1 / -1; grid-row: 1; }   /* eyebrow + H1 a todo el ancho */
    .dsg-hero__visual { grid-column: 1 / 2; grid-row: 2; }    /* composición ancha, a la izquierda */
    .dsg-hero__lede   {
        grid-column: 2 / 3;
        grid-row: 2;                                          /* texto + CTA, columna estrecha, a la derecha */
        align-self: center;
    }

    .dsg-sys {
        max-width: none;
        margin-inline: 0;
        gap: clamp(0.7rem, 1.6vw, 1.15rem);
    }

    /* Anchos de flex-basis para 3 piezas por fila dentro de la columna 7fr. */
    .dsg-piece          { flex-basis: 30%; }
    .dsg-piece--pub     { flex-basis: 27%; }
    .dsg-piece--digital { flex-basis: 24%; }
    .dsg-piece--type    { flex-basis: 42%; aspect-ratio: 2 / 1; }
    .dsg-piece--sheet   { flex-basis: 22%; }
}


/* =========================================================================
   SECCIÓN · Qué diseñamos — los cuatro territorios
   -------------------------------------------------------------------------
   Fondo Piedra (Cal → Piedra: inicio de D2). Composición editorial
   ASIMÉTRICA: cada territorio tiene una escala y un soporte visual
   distintos, pero todos comparten el mismo lenguaje gráfico. No son
   cuatro tarjetas iguales. Sin Carbón de fondo, sin Azul de superficie.
   Densidad visual mayor que en Web; la cabecera respira, la composición
   es compacta. Sin min-height.
   ========================================================================= */

.dsg-terr {
    padding-block: clamp(var(--space-lg), 5vw, var(--space-xl));
    background-color: var(--bg-surface);          /* Piedra #E8E4DC */
}

/* --- Cabecera (aire generoso) ------------------------- */

.dsg-terr__head {
    max-width: 44rem;
    margin-bottom: var(--space-md);
}
.dsg-terr__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
}
.dsg-terr__title {
    max-width: 20ch;
    font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.4rem);   /* < H1 del Hero */
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    color: var(--text-strong);
    text-wrap: balance;
}
.dsg-terr__intro {
    max-width: 52ch;
    margin-top: var(--space-md);
    color: var(--text-strong);
}
.dsg-terr__intro > p + p {
    margin-top: var(--space-sm);
}

/* --- Retícula de territorios ------------------------- */

.dsg-terr__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.dsg-terr__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

.dsg-terr__num {
    font-family: var(--font-mono);
    font-size: var(--fs-100);
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);                     /* microetiqueta muy discreta */
}
.dsg-terr__name {
    margin-top: var(--space-3xs);
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    color: var(--text-strong);
}
.dsg-terr__item--id .dsg-terr__name {
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);   /* Identidad: ligeramente más presencia */
}
.dsg-terr__text {
    max-width: 42ch;
    margin-top: var(--space-2xs);
    color: var(--text-strong);
}

/* --- Soportes visuales: MISMO lenguaje, distinto formato --- */
/* Todos: fondo Cal, borde fino, mismo padding y ritmo de márgenes,
   misma "tipografía" (barras Carbón), mismas líneas, misma retícula.
   Cada modificador solo cambia la proporción y qué elemento manda. */

.dsg-terr__viz {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    padding: clamp(0.55rem, 1.7vw, 0.95rem);
    background-color: var(--color-cal);
    border: 1px solid var(--border-strong);       /* legible sobre Piedra */
    border-radius: var(--radius-sm);
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

/* Vocabulario interno compartido */
.dsg-v__type { height: 0.55rem; width: 68%; background-color: var(--color-carbon); }
.dsg-v__type--xl { height: 1rem; width: 82%; }
.dsg-v__type--lg { height: 0.7rem; width: 60%; }
.dsg-v__type--sm { height: 0.42rem; width: 46%; }
.dsg-v__line { height: 0.3rem; width: 100%; background-color: rgb(23 23 21 / 0.14); }
.dsg-v__line--short { width: 52%; }
.dsg-v__rule { height: 1px; width: 100%; background-color: var(--border-strong); }
.dsg-v__img { flex: 1; min-height: 2rem; background-color: var(--color-piedra); }
.dsg-v__mark { width: 0.85rem; height: 0.85rem; flex: none; background-color: var(--color-carbon); }

/* 01 · Identidad — origen del sistema (casi cuadrada, protagonista) */
.dsg-terr__viz--id {
    aspect-ratio: 1 / 1;
    gap: 0.6rem;
    justify-content: center;
}
.dsg-terr__viz--id .dsg-v__type--xl { height: 1.3rem; }
.dsg-v__modules {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.3rem;
}
.dsg-v__mod { width: 1.15rem; height: 1.15rem; flex: none; }
.dsg-v__mod--carbon  { background-color: var(--color-carbon); }
.dsg-v__mod--cereal  { background-color: var(--color-cereal); }   /* Cereal (1 de 2) */
.dsg-v__mod--stone   { background-color: var(--color-piedra); }
.dsg-v__mod--outline { background-color: transparent; border: 1px solid var(--border-strong); }

/* 02 · Comunicación digital — apaisado, más dinámico */
.dsg-terr__viz--digital { aspect-ratio: 3 / 2; }
.dsg-terr__viz--digital .dsg-v__img { flex: 0 0 56%; }
.dsg-v__row { display: flex; align-items: center; gap: 0.45rem; }
.dsg-v__tag {
    width: 1.5rem;
    height: 0.6rem;
    flex: none;
    background-color: var(--accent);              /* microacento Azul (1 de 2) */
}

/* 03 · Editorial e impreso — vertical / página */
.dsg-terr__viz--editorial {
    aspect-ratio: 4 / 5;
    padding: clamp(0.7rem, 2vw, 1.05rem);
    gap: 0.5rem;
}
.dsg-v__cols { display: flex; gap: 0.75rem; }
.dsg-v__col { flex: 1; display: flex; flex-direction: column; gap: 0.32rem; }
.dsg-v__col > span { height: 0.24rem; width: 100%; background-color: rgb(23 23 21 / 0.14); }
.dsg-v__col > span.is-short { width: 55%; }
.dsg-terr__viz--editorial .dsg-v__img { flex: 0 0 28%; }
.dsg-v__note {
    width: 0.9rem;
    height: 0.9rem;
    flex: none;
    align-self: flex-end;
    background-color: var(--color-cereal);        /* detalle material/editorial · Cereal (2 de 2) */
}

/* 04 · Aplicaciones y web — el más horizontal / interfaz */
.dsg-terr__viz--product {
    aspect-ratio: 2 / 1;
    gap: 0.5rem;
}
.dsg-v__bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-bottom: 0.42rem;
    border-bottom: 1px solid var(--border-strong);
}
.dsg-v__navline { width: 1.7rem; height: 0.28rem; flex: none; background-color: rgb(23 23 21 / 0.14); }
.dsg-v__navline--sm { width: 1.05rem; }
.dsg-v__state {
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    margin-left: auto;
    background-color: var(--accent);              /* estado Azul (2 de 2) */
}
.dsg-v__panel {
    flex: 1;
    display: grid;
    grid-template-columns: 24% 1fr;
    gap: 0.55rem;
    min-height: 0;
}
.dsg-v__side { display: flex; flex-direction: column; gap: 0.32rem; }
.dsg-v__side > span { height: 0.26rem; width: 100%; background-color: rgb(23 23 21 / 0.14); }
.dsg-v__side > span.is-short { width: 60%; }
.dsg-v__main { display: flex; flex-direction: column; gap: 0.42rem; min-width: 0; }
.dsg-v__mods { display: grid; grid-template-columns: 1fr 1fr; gap: 0.42rem; flex: 1; min-height: 1.6rem; }
.dsg-v__mods > span { background-color: var(--color-piedra); }

/* --- >= 46rem · tablet: 2 × 2 desigual --------------- */
/* Distinta proporción por celda (no cuatro tarjetas): columna izquierda
   algo más ancha para Identidad y Editorial. */

@media (min-width: 46rem) {
    .dsg-terr__grid {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        column-gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
        row-gap: clamp(var(--space-lg), 4vw, var(--space-xl));
        align-items: start;
    }
    .dsg-terr__item--id        { grid-column: 1; grid-row: 1; }
    .dsg-terr__item--digital   { grid-column: 2; grid-row: 1; }
    .dsg-terr__item--editorial { grid-column: 1; grid-row: 2; }
    .dsg-terr__item--product   { grid-column: 2; grid-row: 2; }
}

/* --- >= 60rem · composición asimétrica completa ------ */
/* Fila 1 · Identidad (izquierda, casi cuadrada, protagonista) + Editorial
   (derecha, columna estrecha → formato página, alto).
   Fila 2 · Comunicación digital y  Fila 3 · Aplicaciones y web como BANDAS
   horizontales: el texto va a la izquierda y el soporte, muy apaisado, a la
   derecha, de modo que no crecen en vertical y la sección queda densa. */

@media (min-width: 60rem) {
    .dsg-terr__grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
        grid-template-rows: auto auto auto;
        column-gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
        row-gap: clamp(var(--space-sm), 2.5vw, var(--space-md));
        align-items: start;
    }
    .dsg-terr__item--id        { grid-column: 1; grid-row: 1; }
    .dsg-terr__item--editorial { grid-column: 2; grid-row: 1; }
    .dsg-terr__item--digital   { grid-column: 1 / 3; grid-row: 2; }
    .dsg-terr__item--product   { grid-column: 1 / 3; grid-row: 3; }

    .dsg-terr__viz--id        { aspect-ratio: 16 / 9; }
    .dsg-terr__viz--editorial { aspect-ratio: 1 / 1; }
    .dsg-terr__viz--digital   { aspect-ratio: 9 / 2; }
    .dsg-terr__viz--product   { aspect-ratio: 9 / 2; }

    /* Bandas horizontales: texto (izquierda) | soporte apaisado (derecha) */
    .dsg-terr__item--digital,
    .dsg-terr__item--product {
        display: grid;
        grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
        gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
        align-items: center;
    }
    .dsg-terr__item--digital .dsg-terr__body,
    .dsg-terr__item--product .dsg-terr__body { grid-column: 1; grid-row: 1; }
    .dsg-terr__item--digital .dsg-terr__viz,
    .dsg-terr__item--product .dsg-terr__viz  { grid-column: 2; grid-row: 1; }
}


/* =========================================================================
   SECCIÓN · Cuando todo habla el mismo lenguaje (coherencia del sistema)
   -------------------------------------------------------------------------
   Ruptura deliberada: Piedra → Carbón. D2 mostraba DÓNDE vive la identidad;
   esta sección explica QUÉ hace que todas esas piezas sigan perteneciendo
   al mismo sistema. Una única composición abstracta (no una galería de
   soportes) + tres principios sobrios. Sin tarjetas, sin iconos, sin
   flechas. Sin min-height: la altura la da el contenido y el padding.
   ========================================================================= */

.dsg-sist {
    padding-block: clamp(var(--space-xl), 6vw, var(--space-2xl));
    background-color: var(--bg-invert);            /* Carbón */
}

/* --- Cabecera: eyebrow + H2 / introducción ------------ */

.dsg-sist__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
    color: var(--color-piedra);
}
.dsg-sist__title {
    font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.4rem);
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    color: var(--text-invert);                     /* Cal */
    text-wrap: balance;
}
.dsg-sist__intro {
    max-width: 46ch;
    color: rgb(247 245 239 / 0.72);
}
.dsg-sist__intro > p + p {
    margin-top: var(--space-sm);
}

/* --- Composición gráfica única -------------------------- */
/* Tres formatos (vertical, horizontal, compacto) que comparten la misma
   gramática: una "marca" Carbón del mismo tamaño en la misma esquina, una
   barra tipográfica y un bloque Piedra. Se alinean a una misma línea base
   (flex align-items: flex-end + regla horizontal debajo) para que se lean
   como aplicaciones de un mismo sistema y no como piezas sueltas. */

.dsg-sist__visual {
    margin-block: clamp(var(--space-lg), 5vw, var(--space-xl)) var(--space-md);
}

.dsg-fmt-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2rem);
}

.dsg-fmt-row__line {
    display: block;
    height: 1px;
    margin-top: var(--space-2xs);
    background-color: var(--border-on-dark);
}

.dsg-fmt {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: clamp(0.6rem, 1.8vw, 0.95rem);
    background-color: var(--color-cal);
    border-radius: var(--radius-sm);
}

/* Vocabulario compartido: la MISMA marca, en el mismo tamaño y posición,
   se repite en los tres formatos. */
.dsg-fmt__mark  { width: 0.7rem; height: 0.7rem; flex: none; background-color: var(--color-carbon); }
.dsg-fmt__bar   { height: 0.4rem; width: 60%; background-color: var(--color-carbon); }
.dsg-fmt__block { flex: 1; min-height: 1.5rem; background-color: var(--color-piedra); }

/* Formato A · vertical (más alto, columna estrecha) */
.dsg-fmt--vert {
    flex: 0 1 22%;
    aspect-ratio: 3 / 5;
}

/* Formato B · horizontal (apaisado, mismo lenguaje reordenado) */
.dsg-fmt--horiz {
    flex: 0 1 40%;
    aspect-ratio: 2 / 1;
}
.dsg-fmt--horiz .dsg-fmt__bar { width: 38%; }
.dsg-fmt__accent {
    align-self: flex-end;
    width: 1.3rem;
    height: 0.4rem;
    background-color: var(--accent);               /* microacento Azul */
}

/* Formato C · compacto / cuadrado (el más denso) */
.dsg-fmt--square {
    flex: 0 1 22%;
    aspect-ratio: 1 / 1;
    gap: 0.35rem;
}
.dsg-fmt__detail {
    width: 0.55rem;
    height: 0.55rem;
    align-self: flex-end;
    background-color: var(--color-cereal);         /* microdetalle Cereal */
}

/* --- Los tres principios (01–03) ----------------------- */

.dsg-sist__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-on-dark);
}

.dsg-sist__item { min-width: 0; }

.dsg-sist__num {
    font-family: var(--font-mono);
    font-size: var(--fs-100);
    letter-spacing: var(--tracking-wide);
    color: rgb(247 245 239 / 0.6);
}
.dsg-sist__name {
    margin-top: var(--space-3xs);
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    color: var(--text-invert);
}
.dsg-sist__text {
    max-width: 32ch;
    margin-top: var(--space-2xs);
    color: rgb(247 245 239 / 0.72);
}

/* ---------------------------------------------------------------
   >= 46rem · cabecera en dos zonas (H2 + introducción) y tres
   principios en fila.
   --------------------------------------------------------------- */

@media (min-width: 46rem) {
    .dsg-sist__head-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        column-gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
        align-items: end;
    }
    .dsg-sist__intro { max-width: 40ch; }

    .dsg-sist__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
    }
}

/* ---------------------------------------------------------------
   >= 60rem · composición gráfica con más presencia
   --------------------------------------------------------------- */

@media (min-width: 60rem) {
    .dsg-sist__visual {
        margin-block: clamp(var(--space-xl), 6vw, var(--space-2xl)) var(--space-lg);
    }
    .dsg-fmt-row {
        justify-content: flex-start;
        gap: clamp(1.5rem, 4vw, 3rem);
    }
    .dsg-fmt--vert   { flex-basis: 14%; }
    .dsg-fmt--horiz  { flex-basis: 30%; }
    .dsg-fmt--square { flex-basis: 16%; }
}


/* =========================================================================
   SECCIÓN · Cómo trabajamos (proceso de Diseño)
   -------------------------------------------------------------------------
   Carbón → Cal: pausa y vuelta al proceso tras la sección de sistema (D3).
   Secuencia editorial de 4 etapas, SIN tarjetas ni cajas: separadas por
   líneas finas y espacio. Microvisual propio que evoluciona 01→04 (piezas
   sueltas → dirección → retícula estable → aplicación a varios formatos).
   Más compacta que D2/D3. Sin min-height.
   ========================================================================= */

.dsg-flow {
    padding-block: clamp(var(--space-lg), 4vw, var(--space-xl));
    background-color: var(--bg-page);              /* Cal */
}

/* --- Cabecera ------------------------------------------ */

.dsg-flow__head {
    max-width: 46rem;
}
.dsg-flow__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
}
.dsg-flow__title {
    max-width: 32ch;
    font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.2rem);
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    color: var(--text-strong);
    text-wrap: balance;
}
.dsg-flow__intro {
    max-width: 48ch;
    margin-top: var(--space-md);
    color: var(--text-strong);
}
.dsg-flow__intro > p + p {
    margin-top: var(--space-2xs);
}

/* --- Secuencia de 4 etapas ------------------------------ */
/* Sin cajas: cada etapa se separa de la siguiente con una línea fina
   (border-top en móvil, border-left en fila). Nunca se encierra. */

.dsg-flow__steps {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: var(--space-md);
}

.dsg-flow__step {
    padding-block: var(--space-md);
    border-top: 1px solid var(--border);
}
.dsg-flow__step:first-child {
    border-top: 1px solid var(--border-strong);
}

.dsg-flow__num {
    font-family: var(--font-mono);
    font-size: var(--fs-100);
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}
.dsg-flow__name {
    margin-top: var(--space-sm);
    font-size: var(--fs-300);
    line-height: var(--lh-snug);
    color: var(--text-strong);
}
.dsg-flow__text {
    max-width: 34ch;
    margin-top: var(--space-2xs);
    color: var(--text-muted);
}

/* --- Microvisual: evolución 01 → 04 --------------------- */
/* Pequeño y secundario en todo momento (nunca compite con el texto).
   Vocabulario propio de D4, distinto de los soportes de D1/D2/D3. */

.dsg-flow__viz {
    position: relative;
    height: 2.75rem;
    margin-top: var(--space-sm);
    display: flex;
    align-items: center;
}

/* 01 · elementos sueltos: sin alinear, ligera irregularidad controlada */
.dsg-flow__viz--loose {
    gap: 0.5rem;
}
.dsg-flow__el--dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: var(--color-carbon);
}
.dsg-flow__viz--loose .dsg-flow__el--dot:first-child {
    transform: translateY(-0.4rem);
}
.dsg-flow__el--line {
    width: 1.1rem;
    height: 0.22rem;
    background-color: var(--color-piedra);
    transform: translateY(0.5rem);
}
.dsg-flow__el--block {
    width: 0.55rem;
    height: 0.55rem;
    background-color: var(--color-piedra);
    transform: translateY(-0.2rem) rotate(6deg);
}
.dsg-flow__el--accent {
    background-color: var(--color-cereal);         /* microdetalle Cereal */
    transform: translateY(0.45rem);
}

/* 02 · aparece una dirección: los mismos elementos empiezan a alinearse
   sobre una guía */
.dsg-flow__viz--direction {
    align-items: flex-end;
    gap: 0.6rem;
}
.dsg-flow__guide {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.35rem;
    height: 1px;
    background-color: var(--border-strong);
}
.dsg-flow__viz--direction .dsg-flow__el--dot:nth-child(2) { margin-bottom: 0; }
.dsg-flow__viz--direction .dsg-flow__el--dot:nth-child(3) { margin-bottom: 0.35rem; }
.dsg-flow__viz--direction .dsg-flow__el--dot:nth-child(4) { margin-bottom: 0.7rem; }

/* 03 · retícula estable: mismos módulos, mismo tamaño, mismo espacio */
.dsg-flow__viz--system {
    display: grid;
    grid-template-columns: repeat(3, 0.55rem);
    grid-template-rows: repeat(2, 0.55rem);
    gap: 0.3rem;
    align-content: center;
}
.dsg-flow__cell {
    width: 0.55rem;
    height: 0.55rem;
    background-color: var(--color-carbon);
}
.dsg-flow__cell:nth-child(3n+2) {
    background-color: var(--color-piedra);
}

/* 04 · el sistema aplicado a varios formatos: tres pequeños derivados
   de la misma retícula (vertical / horizontal / cuadrado) */
.dsg-flow__viz--apply {
    gap: 0.4rem;
}
.dsg-flow__mini {
    background-color: var(--color-piedra);
    border: 1px solid var(--border-strong);
}
.dsg-flow__mini--a { width: 0.6rem; height: 1.8rem; }
.dsg-flow__mini--b { width: 1.6rem; height: 0.85rem; }
.dsg-flow__mini--c {
    width: 0.95rem;
    height: 0.95rem;
    position: relative;
}
.dsg-flow__mini--c::after {
    content: "";
    position: absolute;
    right: 0.12rem;
    bottom: 0.12rem;
    width: 0.22rem;
    height: 0.22rem;
    background-color: var(--accent);               /* microacento Azul, solo en 04 */
}

/* ---------------------------------------------------------------
   >= 46rem · 2 × 2
   --------------------------------------------------------------- */

@media (min-width: 46rem) {
    .dsg-flow__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
    }
    .dsg-flow__step {
        border-top: 0;
        border-left: 1px solid var(--border);
        padding-inline: clamp(var(--space-md), 3vw, var(--space-lg));
        padding-block: 0 var(--space-sm);
    }
    .dsg-flow__step:nth-child(odd) {
        border-left: 1px solid var(--border-strong);
        padding-left: 0;
    }
    .dsg-flow__step:nth-child(1),
    .dsg-flow__step:nth-child(2) {
        padding-top: 0;
    }
    .dsg-flow__step:nth-child(3),
    .dsg-flow__step:nth-child(4) {
        margin-top: var(--space-lg);
        padding-top: var(--space-lg);
        border-top: 1px solid var(--border);
    }
    .dsg-flow__step:nth-child(3) { border-left: 0; }
}

/* ---------------------------------------------------------------
   >= 60rem · 4 etapas en fila
   --------------------------------------------------------------- */

@media (min-width: 60rem) {
    .dsg-flow__steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: clamp(var(--space-lg), 3vw, var(--space-xl));
    }
    .dsg-flow__step {
        border-top: 0;
        border-left: 1px solid var(--border);
        padding: 0 clamp(var(--space-md), 2vw, var(--space-lg)) 0 clamp(var(--space-md), 2vw, var(--space-lg));
        margin-top: 0;
    }
    .dsg-flow__step:first-child {
        border-left: 0;
        padding-left: 0;
    }
    .dsg-flow__step:nth-child(3),
    .dsg-flow__step:nth-child(4) {
        border-top: 0;
        padding-top: 0;
    }
}


/* =========================================================================
   SECCIÓN · CTA final — Hablemos
   -------------------------------------------------------------------------
   Cierre de la página: Cal (D4) → Azul (clímax) → Cal (footer). Mismo
   patrón de gran CTA Azul que Home/Aplicaciones/Web (dos zonas: eyebrow +
   titular | texto + botón), con copy y microgesto propios de Diseño. No
   añade argumentos nuevos, solo convierte lo explicado en una acción.
   Compacta: sin min-height, sin composición grande, sin mockup.
   ========================================================================= */

.dsg-cta {
    padding-block: clamp(var(--space-xl), 7vw, var(--space-2xl));
    background-color: var(--accent);               /* Azul REBLE */
    color: var(--text-invert);
}

/* Foco visible sobre Azul: aro Cal (el foco Azul no se vería). */
.dsg-cta :focus-visible {
    outline-color: var(--text-invert);
}

.dsg-cta__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.dsg-cta__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
    color: var(--color-on-accent);                 /* blanco: máximo contraste para el label pequeño */
}

.dsg-cta__title {
    max-width: 20ch;
    font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.75rem);   /* presencia de cierre, por debajo del H1 del Hero */
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--text-invert);                     /* Cal */
    text-wrap: balance;
}

.dsg-cta__text {
    max-width: 40ch;
    font-size: var(--fs-300);
    line-height: var(--lh-base);
    color: var(--text-invert);
}
.dsg-cta__text + .dsg-cta__text {
    margin-top: var(--space-sm);
}

.dsg-cta__actions {
    margin-top: var(--space-lg);
}

/* Microgesto REBLE muy pequeño: cuatro módulos que ya encajan en
   retícula (eco discreto de "el sistema" de D2/D3, sin repetir su forma).
   El CTA funciona igual sin él. */
.dsg-cta__mark {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    width: 1.8rem;
    margin-top: var(--space-xl);
}
.dsg-cta__mark > span {
    aspect-ratio: 1 / 1;
    background-color: rgb(247 245 239 / 0.55);
}
.dsg-cta__mark > span:nth-child(4) {                /* microdetalle Cereal, no textual */
    background-color: var(--color-cereal);
}

/* --- >= 48rem · dos zonas: eyebrow + titular | texto + botón --- */

@media (min-width: 48rem) {
    .dsg-cta__inner {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        column-gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
        align-items: start;
    }
}