/* =========================================================================
   aplicaciones.css — Estilos propios de la página "Aplicaciones a medida".

   Solo lo específico de esta página. Reutiliza de los archivos globales:
     · .container / .section .......... 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 · Problema · Solución · Qué podemos construir ·
   Cómo trabajamos · CTA final.
   ========================================================================= */

/* ---------------------------------------------------------------
   HERO — página interior
   Presencia, pero más compacto que el Hero de la Home. Sin min-height,
   sin 100vh. Móvil: texto y, debajo, la interfaz abstracta.
   >=48rem: texto (izquierda, con más peso) | interfaz (derecha).
   --------------------------------------------------------------- */

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

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

/* --- Texto ---------------------------------------------------- */

.app-hero__content {
    min-width: 0;
    max-width: 40rem;
}

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

.app-hero__title {
    max-width: 24ch;
    font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);   /* por debajo del H1 de la Home */
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

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

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

/* --- Interfaz abstracta ------------------------------------- */
/* Marco plano (Cal + línea fina). Estructura Carbón, superficies Piedra,
   Azul REBLE solo para estado activo / acción, un único detalle Cereal.
   Sin sombras, sin degradados, sin datos. */

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

.app-frame {
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;                           /* centrado en móvil */
    aspect-ratio: 4 / 3;
    background-color: var(--color-cal);
    border: 1px solid var(--border);
}

/* Barra superior: identificador + ruta + acción */
.app-frame__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    border-bottom: 1px solid var(--border);
}
.app-frame__dot {
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--color-carbon);
}
.app-frame__crumb {
    width: 3.5rem;
    height: 0.5rem;
    background-color: var(--color-piedra);
}
.app-frame__crumb--sm { width: 2rem; }
.app-frame__spacer { flex: 1; }
.app-frame__action {
    width: 1.75rem;
    height: 0.7rem;
    background-color: var(--color-azul);           /* acción principal */
}

/* Cuerpo: navegación lateral + área principal */
.app-frame__body {
    display: grid;
    grid-template-columns: 24% 1fr;
    min-height: 0;
}

.app-frame__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-xs);
    border-right: 1px solid var(--border);
    background-color: var(--color-piedra);
}
.app-frame__nav {
    height: 0.5rem;
    background-color: rgb(23 23 21 / 0.12);
}
.app-frame__nav:nth-child(1) { width: 80%; }
.app-frame__nav:nth-child(3) { width: 66%; }
.app-frame__nav:nth-child(4) { width: 74%; }
.app-frame__nav--sm { width: 50%; }
.app-frame__nav--active {
    width: 88%;
    background-color: var(--color-azul);           /* sección activa */
}

.app-frame__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-sm);
    min-width: 0;
}

.app-frame__toolbar {
    display: flex;
    gap: var(--space-2xs);
    margin-bottom: var(--space-2xs);
}
.app-frame__field {
    flex: 1;
    height: 0.7rem;
    background-color: var(--color-cal);
    border: 1px solid var(--border);
}
.app-frame__chip {
    width: 2.25rem;
    height: 0.7rem;
    background-color: rgb(23 23 21 / 0.1);
}
.app-frame__chip--accent {
    width: 1.25rem;
    background-color: var(--color-cereal);         /* único detalle Cereal */
}

.app-frame__table {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}
.app-frame__row {
    width: 100%;
    height: 0.6rem;
    background-color: var(--color-piedra);
}
.app-frame__row--head {
    width: 40%;
    background-color: var(--color-carbon);         /* estructura / cabecera */
}
.app-frame__row--sm { width: 70%; }
.app-frame__row--active {
    border-left: 2px solid var(--color-azul);      /* fila seleccionada */
}

/* Panel secundario: un par de módulos al pie del área principal */
.app-frame__modules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xs);
    margin-top: auto;
    padding-top: var(--space-2xs);
}
.app-frame__mod {
    aspect-ratio: 5 / 2;
    background-color: var(--color-piedra);
}
.app-frame__mod--outline {
    background-color: transparent;
    border: 1px solid var(--border);              /* módulo abierto */
}

/* ---------------------------------------------------------------
   >= 48rem · tablet: texto | interfaz en fila
   --------------------------------------------------------------- */

@media (min-width: 48rem) {

    .app-hero__inner {
        flex-direction: row;
        align-items: center;
        gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
    }

    .app-hero__content {
        flex: 1 1 56%;
    }

    .app-hero__visual {
        flex: 1 1 44%;
    }

    .app-frame {
        margin-inline: 0;
        margin-left: auto;
    }
}

/* ---------------------------------------------------------------
   >= 60rem · desktop: se da algo más de aire a la interfaz
   (nunca 50/50 rígido; el texto conserva el peso)
   --------------------------------------------------------------- */

@media (min-width: 60rem) {

    .app-hero {
        padding-block: var(--space-block);        /* algo más compacto que el Hero de la Home */
    }

    .app-hero__inner {
        gap: clamp(var(--space-2xl), 7vw, 7rem);
    }

    .app-hero__content {
        flex: 1 1 54%;
    }

    .app-hero__visual {
        flex: 1 1 46%;
    }

    .app-frame {
        max-width: 32rem;
    }
}


/* =========================================================================
   SECCIÓN · Problema — "Cuando las herramientas ya no encajan"
   -------------------------------------------------------------------------
   Fondo Piedra (transición Cal → Piedra tras el Hero). Composición
   editorial: cabecera + recurso "información dispersa" + retícula 2×2 de
   situaciones separadas con líneas finas y numeración mono. Sin tarjetas,
   sin sombras, sin iconos. La altura la marca el contenido (sin min-height).

   Móvil   : cabecera · introducción · visual · situaciones (1 columna).
   >=38rem : las situaciones pasan a 2 × 2.
   >=60rem : cabecera + introducción a la izquierda | visual a la derecha.
   ========================================================================= */

.app-problem {
    padding-block: var(--space-section-sm);
    background-color: var(--bg-surface);           /* Piedra #E8E4DC */
}

/* --- Cabecera + introducción ------------------------------- */

.app-problem__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
}

.app-problem__title {
    max-width: 24ch;
    font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2rem);   /* claramente por debajo del H1 */
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    color: var(--text-strong);
    text-wrap: balance;
}

.app-problem__intro {
    max-width: 52ch;
    margin-top: var(--space-md);
    color: var(--text-strong);
}
.app-problem__intro > p + p {
    margin-top: var(--space-sm);
}

/* --- Recurso visual: "información dispersa" --------------- */
/* Cuatro fragmentos (hoja de cálculo · mensaje · documento · ventana)
   girados y solapados: interfaces sueltas que todavía NO encajan. */

.app-problem__scatter {
    position: relative;
    width: 100%;
    max-width: 20rem;
    margin-top: var(--space-lg);
    margin-inline: auto;
    aspect-ratio: 7 / 4;
}

.frag {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    padding: 0.55rem;
    background-color: var(--color-cal);
    border: 1px solid var(--border-strong);        /* contorno legible sobre Piedra */
}

.frag--sheet {
    width: 50%;
    left: 0;
    top: 2%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.26rem;
    transform: rotate(-3deg);
}
.frag--msg {
    width: 40%;
    right: 1%;
    top: 0;
    transform: rotate(2.5deg);
}
.frag--doc {
    width: 36%;
    left: 8%;
    bottom: 0;
    transform: rotate(1.5deg);
    clip-path: polygon(0 0, 78% 0, 100% 20%, 100% 100%, 0 100%);   /* esquina doblada */
}
.frag--win {
    width: 49%;
    right: 0;
    bottom: 2%;
    transform: rotate(-2deg);
}

.frag__cell {
    height: 0.62rem;
    background-color: rgb(23 23 21 / 0.10);
}
.frag__cell--head { background-color: var(--color-carbon); }

.frag__line {
    height: 0.4rem;
    background-color: rgb(23 23 21 / 0.12);
}
.frag__line--short { width: 55%; }

.frag__bar {
    height: 0.5rem;
    margin: -0.55rem -0.55rem 0.15rem;             /* barra a sangre dentro del fragmento */
    background-color: var(--color-carbon);
}
.frag__block {
    height: 0.7rem;
    background-color: rgb(23 23 21 / 0.10);
}
.frag__block--short { width: 60%; }

/* --- Retícula de situaciones ----------------------------- */
/* Líneas finas = el gap de 1px de la retícula sobre fondo --border
   (mismo recurso que "Método" en la Home). Sin recuadro exterior. */

.app-problem__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: var(--space-block);
    background-color: var(--border);
    border-top: 1px solid var(--border);
}

.app-problem__item {
    background-color: var(--bg-surface);           /* Piedra: solo se ve el gap de 1px */
    padding: clamp(var(--space-md), 4vw, var(--space-lg)) 0;
}

.app-problem__num {
    font-family: var(--font-mono);
    font-size: var(--fs-300);
    color: var(--text-strong);
}

/* Único acento Azul de la sección: un cuadrado mínimo junto a la 01. */
.app-problem__item:first-child .app-problem__num {
    display: inline-flex;
    align-items: center;
    gap: 0.7ch;
}
.app-problem__item:first-child .app-problem__num::after {
    content: "";
    width: 0.38rem;
    height: 0.38rem;
    background-color: var(--accent);               /* Azul REBLE */
}

.app-problem__item-title {
    max-width: 24ch;
    margin-top: var(--space-2xs);
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    color: var(--text-strong);
    text-wrap: balance;
}

.app-problem__text {
    max-width: 40ch;
    margin-top: var(--space-sm);
    color: var(--text-muted);
}

/* --- >= 38rem · situaciones en 2 × 2 -------------------- */

@media (min-width: 38rem) {
    .app-problem__list {
        grid-template-columns: 1fr 1fr;
    }
    .app-problem__item {
        padding-inline: clamp(var(--space-md), 3vw, var(--space-lg));
    }
    .app-problem__item:nth-child(odd)  { padding-inline-start: 0; }
    .app-problem__item:nth-child(even) { padding-inline-end: 0; }
}

/* --- >= 60rem · cabecera (texto | visual) --------------- */

@media (min-width: 60rem) {
    .app-problem__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        column-gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
        align-items: start;
    }
    .app-problem__headline { grid-column: 1; grid-row: 1; }
    .app-problem__intro    { grid-column: 1; grid-row: 2; }
    .app-problem__scatter {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        margin-top: 0;
        max-width: 24rem;
    }
    .app-problem__list { grid-column: 1 / -1; grid-row: 3; }
}


/* =========================================================================
   SECCIÓN · La solución — "Una herramienta. Tu forma de trabajar."
   -------------------------------------------------------------------------
   Vuelve a fondo Cal (Hero Cal → Problema Piedra → Solución Cal).
   Dos momentos: (1) eyebrow + titular + texto con aire editorial;
   (2) un gran mockup de aplicación — UNA sola interfaz ordenada — presentado
   como un objeto dentro de la página, no dentro de una card.
   Debajo, tres principios en columnas editoriales (no cards, no features).
   Respira más que la sección Problema. Sin min-height, sin animación.
   ========================================================================= */

.app-solution {
    padding-block: var(--space-section);
    background-color: var(--bg-page);              /* Cal #F7F5EF */
}

/* --- Momento 1 · introducción ----------------------------- */

.app-solution__intro {
    max-width: 44rem;
}

.app-solution__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
}

.app-solution__title {
    max-width: 22ch;
    font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.4rem);   /* importante, pero claramente < H1 */
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    color: var(--text-strong);
    text-wrap: balance;
}

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

/* --- Momento 2 · mockup de la aplicación ----------------- */
/* Contrapunto del recurso "información dispersa": aquellos fragmentos
   sueltos y girados aparecen aquí reunidos y alineados en una sola
   herramienta, con líneas finas --border (no --border-strong) y sin
   rotaciones. Estructura Carbón, superficies Piedra, Azul solo en
   selección/estado activo, un único detalle Cereal. */

.app-solution__showcase {
    margin-top: clamp(var(--space-xl), 6vw, var(--space-2xl));
}

.app-ui {
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    max-width: 64rem;
    margin-inline: auto;
    aspect-ratio: 4 / 3;
    background-color: var(--color-cal);
    border: 1px solid var(--border);
    overflow: hidden;
}

.app-ui__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-sm);
    border-bottom: 1px solid var(--border);
}
.app-ui__mark {
    width: 0.6rem;
    height: 0.6rem;
    background-color: var(--color-carbon);
}
.app-ui__name {
    width: 4rem;
    height: 0.5rem;
    background-color: var(--color-piedra);
}
.app-ui__spacer { flex: 1; }
.app-ui__tab {
    width: 2.5rem;
    height: 0.5rem;
    background-color: var(--color-piedra);
}
.app-ui__tab--active { background-color: var(--color-azul); }   /* pestaña activa */
.app-ui__act {
    width: 1.75rem;
    height: 0.7rem;
    border: 1px solid var(--border-strong);
}

.app-ui__body {
    display: grid;
    grid-template-columns: 30% 1fr;
    min-height: 0;
}

.app-ui__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-sm);
    border-right: 1px solid var(--border);
    background-color: var(--color-piedra);
}
.app-ui__group {
    width: 52%;
    height: 0.4rem;
    background-color: var(--color-carbon);
}
.app-ui__group--2 { margin-top: var(--space-2xs); }
.app-ui__nav {
    width: 82%;
    height: 0.45rem;
    background-color: rgb(23 23 21 / 0.12);
}
.app-ui__nav--x { width: 66%; }
.app-ui__nav--active {
    width: 90%;
    background-color: var(--color-azul);          /* elemento seleccionado */
}

.app-ui__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    min-width: 0;
}

.app-ui__head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.app-ui__h-title {
    width: 30%;
    height: 0.7rem;
    background-color: var(--color-carbon);
}
.app-ui__h-search {
    flex: 1;
    max-width: 12rem;
    height: 0.7rem;
    margin-left: auto;
    background-color: var(--color-cal);
    border: 1px solid var(--border);
}

.app-ui__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-sm);
    border: 1px solid var(--border);
}
.app-ui__p-line {
    width: 90%;
    height: 0.4rem;
    background-color: var(--color-piedra);
}
.app-ui__p-line--short { width: 58%; }
.app-ui__p-key {
    width: 28%;
    height: 0.5rem;
    margin-top: var(--space-2xs);
    background-color: var(--color-carbon);
}

.app-ui__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);          /* separador fino */
}
.app-ui__row {
    width: 100%;
    height: 0.55rem;
    background-color: var(--color-piedra);
}
.app-ui__row--head {
    width: 42%;
    background-color: var(--color-carbon);
}
.app-ui__row--sm { width: 66%; }
.app-ui__row--active {
    border-left: 2px solid var(--color-azul);     /* fila seleccionada */
}

.app-ui__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin-top: auto;
}
.app-ui__card {
    aspect-ratio: 3 / 2;
    background-color: var(--color-piedra);
}
.app-ui__card--accent {
    border-top: 3px solid var(--color-cereal);     /* único detalle Cereal, puntual */
}

/* Móvil: se simplifica el contenido del mockup (se mantiene la sidebar). */
@media (max-width: 47.99rem) {
    .app-ui__x { display: none; }
}

/* --- Tres principios · columnas editoriales -------------- */

.app-solution__principles {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: clamp(var(--space-xl), 6vw, var(--space-2xl));
    border-top: 1px solid var(--border);
}

.app-solution__principle {
    padding-block: clamp(var(--space-md), 4vw, var(--space-lg));
}
.app-solution__principle + .app-solution__principle {
    border-top: 1px solid var(--border);
}

.app-solution__num {
    font-family: var(--font-mono);
    font-size: var(--fs-300);
    color: var(--text-strong);
}
.app-solution__principle-title {
    max-width: 20ch;
    margin-top: var(--space-2xs);
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    color: var(--text-strong);
    text-wrap: balance;
}
.app-solution__principle-text {
    max-width: 34ch;
    margin-top: var(--space-sm);
    color: var(--text-muted);
}

/* --- >= 48rem · mockup más apaisado + principios en 3 columnas --- */

@media (min-width: 48rem) {
    .app-ui {
        aspect-ratio: 16 / 10;
    }
    .app-ui__body {
        grid-template-columns: 22% 1fr;
    }

    .app-solution__principles {
        grid-template-columns: repeat(3, 1fr);
        column-gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
    }
    .app-solution__principle {
        padding-inline-end: clamp(var(--space-md), 3vw, var(--space-xl));
    }
    .app-solution__principle + .app-solution__principle {
        border-top: 0;
        border-inline-start: 1px solid var(--border);
        padding-inline-start: clamp(var(--space-lg), 5vw, var(--space-2xl));
    }
}

/* --- >= 60rem · el mockup gana algo de anchura de escena --- */

@media (min-width: 60rem) {
    .app-ui {
        aspect-ratio: 16 / 9;
    }
}


/* =========================================================================
   SECCIÓN · Qué podemos construir
   -------------------------------------------------------------------------
   Cambio fuerte de ritmo: fondo Carbón, texto Cal (Hero Cal → Problema
   Piedra → Solución Cal → Carbón). Retícula editorial 3×2 de necesidades
   reales en lenguaje de empresa — NO un catálogo de productos. Aire,
   líneas finas, numeración mono. Mismo sistema que "Proyectos" en la Home,
   sin copiar su diseño. Sin min-height.
   ========================================================================= */

.app-build {
    padding-block: var(--space-section);
    background-color: var(--bg-invert);            /* Carbón #171715 */
    color: var(--text-invert);                     /* Cal */
}

/* Foco legible sobre Carbón (por si esta sección incorpora enlaces después). */
.app-build :focus-visible {
    outline-color: var(--accent-on-dark);
}

/* --- Cabecera de sección (protagonista) ------------------- */

.app-build__head {
    max-width: 44rem;
    margin-bottom: var(--space-block);
}

.app-build__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
    color: var(--color-piedra);                    /* claro sobre Carbón */
}

.app-build__title {
    max-width: 22ch;
    font-size: clamp(1.6rem, 1.15rem + 2.2vw, 2.75rem);   /* protagonista, aún < H1 del Hero */
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    color: var(--text-invert);
    text-wrap: balance;
}

.app-build__text {
    max-width: 46ch;
    margin-top: var(--space-md);
    font-size: var(--fs-300);
    line-height: var(--lh-base);
    color: rgb(247 245 239 / 0.72);                /* secundario sobre oscuro (mismo tono que Proyectos) */
}

/* --- Retícula de ejemplos -------------------------------- */
/* Líneas horizontales finas por fila; separación entre columnas solo con
   espacio (sin recuadros). Móvil 1 col · tablet 2×3 · desktop 3×2. */

.app-build__list {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--border-on-dark);
}

.app-build__item {
    padding-block: clamp(var(--space-lg), 5vw, var(--space-xl));
}
.app-build__item + .app-build__item {
    border-top: 1px solid var(--border-on-dark);
}

.app-build__num {
    font-family: var(--font-mono);
    font-size: var(--fs-300);
    color: rgb(247 245 239 / 0.6);
}

/* 01 · pequeño indicador Azul (único uso de Azul en la sección). */
.app-build__item:first-child .app-build__num {
    display: inline-flex;
    align-items: center;
    gap: 0.7ch;
}
.app-build__item:first-child .app-build__num::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    background-color: var(--accent);               /* Azul REBLE */
}

/* 04 · microdetalle Cereal (único uso de Cereal en la sección). */
.app-build__item:nth-child(4) .app-build__num {
    display: inline-flex;
    align-items: center;
    gap: 0.7ch;
}
.app-build__item:nth-child(4) .app-build__num::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    background-color: var(--color-cereal);
}

.app-build__item-title {
    margin-top: var(--space-2xs);
    font-size: var(--fs-300);                      /* títulos contenidos, escaneables */
    color: var(--text-invert);
}

.app-build__item-text {
    max-width: 38ch;
    margin-top: var(--space-sm);
    color: rgb(247 245 239 / 0.72);
}

/* Representación abstracta mínima, solo en 01 y 04 (no seis ilustraciones). */
.app-build__glyph {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-width: 7rem;
    margin-top: var(--space-md);
}
.app-build__glyph > span {
    height: 0.28rem;
    background-color: rgb(247 245 239 / 0.16);
}
.app-build__glyph > span:nth-child(2) { width: 68%; }
.app-build__glyph > span:nth-child(3) { width: 44%; }

/* --- Cierre de sección (conclusión, no CTA) -------------- */

.app-build__close {
    max-width: 44ch;
    margin-top: clamp(var(--space-lg), 5vw, var(--space-xl));
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-on-dark);
    font-size: var(--fs-300);
    color: rgb(247 245 239 / 0.72);
}

/* --- >= 40rem · 2 columnas × 3 filas -------------------- */

@media (min-width: 40rem) {
    .app-build__list {
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
    }
    .app-build__item + .app-build__item {
        border-top: 0;
    }
    .app-build__item:nth-child(n+3) {
        border-top: 1px solid var(--border-on-dark);
    }
}

/* --- >= 60rem · 3 columnas × 2 filas -------------------- */

@media (min-width: 60rem) {
    .app-build__list {
        grid-template-columns: repeat(3, 1fr);
    }
    .app-build__item:nth-child(n+3) {
        border-top: 0;
    }
    .app-build__item:nth-child(n+4) {
        border-top: 1px solid var(--border-on-dark);
    }
}


/* =========================================================================
   SECCIÓN · Cómo trabajamos
   -------------------------------------------------------------------------
   Vuelve a fondo Cal (A3 Cal → A4 Carbón → A5 Cal). Sección compacta:
   cabecera con presencia + secuencia editorial 01–04 de lo que ocurre
   desde el primer contacto. Un pequeño glifo de piezas evoluciona por
   posición (separadas → ordenadas → estructura → estructura + Azul), sin
   repetir el bloque "Método" de la Home ni su vocabulario. Sin min-height.
   ========================================================================= */

.app-flow {
    padding-block: var(--space-section-sm);         /* sección compacta */
    background-color: var(--bg-page);               /* Cal */
}

/* --- Cabecera (con presencia) --------------------------- */

.app-flow__head {
    max-width: 44rem;
    margin-bottom: var(--space-block);
}

.app-flow__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
}

.app-flow__title {
    max-width: 20ch;
    font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.4rem);   /* presencia, aún < H1 del Hero */
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    color: var(--text-strong);
    text-wrap: balance;
}

.app-flow__intro {
    max-width: 48ch;
    margin-top: var(--space-md);
    color: var(--text-strong);
}
.app-flow__intro > p + p {
    margin-top: var(--space-sm);
}
.app-flow__lead {
    font-size: var(--fs-300);
    font-weight: var(--fw-medium);                  /* mensaje clave: elimina la barrera de entrada */
}

/* --- Secuencia 01–04 ----------------------------------- */
/* Una sola línea estructural fina conecta los cuatro momentos (el
   border-top de la lista). Sin círculos, sin línea azul, sin timeline. */

.app-flow__list {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--border);
}

.app-flow__step {
    padding-block: var(--space-lg);
}
.app-flow__step + .app-flow__step {
    border-top: 1px solid var(--border);
}

.app-flow__num {
    font-family: var(--font-mono);
    font-size: var(--fs-300);
    color: var(--text-strong);
}

.app-flow__step-title {
    margin-top: var(--space-2xs);
    font-size: var(--fs-300);                       /* pasos secundarios: no compiten con la cabecera */
    color: var(--text-strong);
}

.app-flow__step-text {
    max-width: 34ch;
    margin-top: var(--space-sm);
    color: var(--text-muted);
}

/* --- Glifo de piezas · evolución por posición ---------- */
/* Mini-retícula 3×3. Tres piezas por paso; el significado se lee por
   disposición, no por color. Cereal una vez (02), Azul solo al final (04). */

.app-flow__glyph {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    width: 1.85rem;
    aspect-ratio: 1;
    margin-bottom: var(--space-sm);
}
.app-flow__glyph > span {
    border-radius: 1px;
    background-color: var(--color-piedra);
}
/* Pieza estructural (Carbón) en cada paso */
.app-flow__step .app-flow__glyph > span:first-child {
    background-color: var(--color-carbon);
}

/* 01 · piezas separadas */
.app-flow__step:nth-child(1) .app-flow__glyph > span:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.app-flow__step:nth-child(1) .app-flow__glyph > span:nth-child(2) { grid-area: 2 / 3 / 3 / 4; }
.app-flow__step:nth-child(1) .app-flow__glyph > span:nth-child(3) { grid-area: 3 / 2 / 4 / 3; }

/* 02 · las piezas empiezan a ordenarse (una en Cereal) */
.app-flow__step:nth-child(2) .app-flow__glyph > span:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.app-flow__step:nth-child(2) .app-flow__glyph > span:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.app-flow__step:nth-child(2) .app-flow__glyph > span:nth-child(3) { grid-area: 3 / 1 / 4 / 2; background-color: var(--color-cereal); }

/* 03 · las piezas forman una estructura (en L) */
.app-flow__step:nth-child(3) .app-flow__glyph > span:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.app-flow__step:nth-child(3) .app-flow__glyph > span:nth-child(2) { grid-area: 3 / 1 / 4 / 4; }
.app-flow__step:nth-child(3) .app-flow__glyph > span:nth-child(3) { grid-area: 1 / 2 / 2 / 3; }

/* 04 · estructura completa + pieza Azul que encaja */
.app-flow__step:nth-child(4) .app-flow__glyph > span:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.app-flow__step:nth-child(4) .app-flow__glyph > span:nth-child(2) { grid-area: 3 / 1 / 4 / 4; }
.app-flow__step:nth-child(4) .app-flow__glyph > span:nth-child(3) { grid-area: 1 / 3 / 3 / 4; background-color: var(--accent); }

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

@media (min-width: 38rem) {
    .app-flow__list {
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
    }
    .app-flow__step + .app-flow__step { border-top: 0; }
    .app-flow__step:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* --- >= 60rem · 4 columnas, una sola línea conectora --- */

@media (min-width: 60rem) {
    .app-flow__list {
        grid-template-columns: repeat(4, 1fr);
        column-gap: clamp(var(--space-md), 3vw, var(--space-xl));
    }
    .app-flow__step:nth-child(n+3) { border-top: 0; }
    .app-flow__step-text { max-width: none; }
}


/* =========================================================================
   SECCIÓN · CTA final
   -------------------------------------------------------------------------
   Cierre de aplicaciones.php. Única gran superficie Azul REBLE de la
   página (A5 Cal → A6 Azul, directa). Composición editorial en dos zonas:
   izquierda eyebrow + titular · derecha texto + botón. No es un bloque
   centrado de landing. Sección compacta, sin min-height. Sin Cereal.
   ========================================================================= */

.app-cta {
    padding-block: var(--space-section-sm);
    background-color: var(--accent);                /* Azul REBLE #315CFF */
    color: var(--text-invert);                      /* Cal */
}

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

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

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

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

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

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

/* Firma de piezas: tres piezas ya encajadas. Muy discreta, no ilustración.
   Solo tonos Cal translúcidos sobre Azul; nunca Cereal. */
.app-cta__mark {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    width: 1.6rem;
    aspect-ratio: 1;
    margin-top: var(--space-xl);
}
.app-cta__mark > span {
    border-radius: 1px;
    background-color: rgb(247 245 239 / 0.5);
}
.app-cta__mark > span:nth-child(1) { grid-area: 1 / 1 / 3 / 3; background-color: rgb(247 245 239 / 0.9); }
.app-cta__mark > span:nth-child(2) { grid-area: 3 / 1 / 4 / 4; }
.app-cta__mark > span:nth-child(3) { grid-area: 1 / 3 / 3 / 4; }

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

@media (min-width: 48rem) {
    .app-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;
    }
}