/* Ficha de Caso (E1/E5): estilos de los nueve bloques de la plantilla única de
   caso. Toda medida sale de los tokens de base.css; los tamaños display
   componen clamp() por regla documentada en docs/harness/design-tokens.md. */

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-3);
    z-index: 100;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #071007;
    font-weight: 600;
}

.skip-link:focus-visible {
    top: var(--space-3);
}

/* Colores por capa del stack: tokens --capa-* en base.css. Repiten información
   que también va en texto. */
[data-capa="diseno"] { --capa-color: var(--capa-diseno); }
[data-capa="producto"] { --capa-color: var(--capa-producto); }
[data-capa="codigo"] { --capa-color: var(--capa-codigo); }
[data-capa="ia"] { --capa-color: var(--capa-ia); }
[data-capa="hardware"] { --capa-color: var(--capa-hardware); }
[data-capa="metodo"] { --capa-color: var(--capa-metodo); }

/* Acento por caso: mismo criterio que la home (green operación real, blue caso completo, amber laboratorio). */
[data-accent="green"] { --caso-acento: var(--accent); }
[data-accent="blue"] { --caso-acento: var(--accent-blue); }
[data-accent="amber"] { --caso-acento: var(--accent-amber); }

/* ---------------------------------------------------------------- cabecera */

.caso-cabecera {
    position: relative;
    z-index: 1;
    padding: calc(5.25rem + var(--space-6)) 0 var(--space-6);
}

.caso-cabecera::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at 20% 10%, color-mix(in srgb, var(--caso-acento, var(--accent)) 12%, transparent), transparent 55%);
    pointer-events: none;
}

.caso-cabecera__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.caso-cabecera h1 {
    margin: var(--space-2) 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--text-display-lg);
    line-height: 1;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.caso-cabecera__frase {
    max-width: 34rem;
    margin: 0;
    font-size: var(--text-2xl);
    line-height: 1.4;
    color: var(--text-muted);
    text-wrap: balance;
}

.caso-cabecera .page-back-link {
    margin-bottom: var(--space-4);
}

.caso-ficha {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

.caso-ficha div {
    display: grid;
    gap: 0.15rem;
}

.caso-ficha dt {
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.caso-ficha dd {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.35;
}

.caso-nota {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-3) 0 0;
    padding: var(--space-3) var(--space-4);
    border-left: 2px solid var(--caso-acento, var(--accent));
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: rgba(255, 255, 255, 0.02);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text-muted);
}

.caso-nota .meta-label {
    color: var(--text);
}

/* ------------------------------------------------------------------ bloques */

.caso-bloque {
    position: relative;
    z-index: 1;
    padding: var(--space-7) 0;
    border-top: 1px solid var(--line);
}

.caso-bloque__layout {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    gap: var(--space-5) clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.caso-bloque__layout--ancho {
    grid-template-columns: minmax(0, 1fr);
}

.caso-bloque__layout--ancho .caso-bloque__cabecera {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-4);
    align-items: baseline;
    max-width: 48rem;
}

.caso-bloque__layout--ancho .caso-bloque__cabecera .eyebrow {
    grid-column: 2;
    margin: 0;
}

.caso-bloque__layout--ancho .caso-bloque__cabecera h2 {
    grid-column: 2;
}

.caso-bloque__cabecera {
    position: sticky;
    top: calc(5.25rem + var(--space-4));
}

.caso-bloque__layout--ancho .caso-bloque__cabecera {
    position: static;
}

.caso-bloque__numero {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--caso-acento, var(--accent));
    font-variant-numeric: tabular-nums;
}

.caso-bloque__cabecera h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-display-sm);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.caso-bloque__cabecera .eyebrow {
    margin-bottom: var(--space-1);
}

.caso-bloque__cuerpo {
    min-width: 0;
}

.caso-prosa {
    max-width: 66ch;
    margin: 0;
    font-size: var(--text-xl);
    line-height: 1.6;
    color: var(--text);
}

.caso-entregables,
.caso-aprendizajes {
    display: grid;
    gap: var(--space-3);
    max-width: 66ch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.caso-entregables li,
.caso-aprendizajes li {
    position: relative;
    padding-left: var(--space-5);
    font-size: var(--text-lg);
    line-height: 1.55;
}

.caso-entregables li::before,
.caso-aprendizajes li::before {
    content: "";
    position: absolute;
    top: 0.7em;
    left: 0;
    width: var(--space-3);
    height: 2px;
    background: var(--caso-acento, var(--accent));
}

/* -------------------------------------------------------------------- fases */

.caso-fases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    /* Separación amplia: el riel de la secuencia vive en estos huecos. */
    gap: var(--space-6) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: fase;
}

.caso-fase {
    position: relative;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}

.caso-fase::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--space-4);
    right: var(--space-4);
    height: 2px;
    background: linear-gradient(90deg, var(--caso-acento, var(--accent)), transparent);
    opacity: 0.7;
}

.caso-fase__indice {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--caso-acento, var(--accent));
    font-variant-numeric: tabular-nums;
}

.caso-fase__cuerpo h3 {
    margin: 0 0 var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.caso-fase__actividad {
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text-muted);
}

.caso-fase__salida {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    padding-top: var(--space-2);
    border-top: 1px dashed var(--line);
    font-size: var(--text-base);
    line-height: 1.5;
}

/* -------------------------------------------------------------------- stack */

.caso-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-5) var(--space-6);
}

.caso-stack__etiqueta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.caso-stack__punto {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--capa-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--capa-color) 22%, transparent);
}

.caso-stack__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.chip-capa {
    display: inline-grid;
    gap: 0.05rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--capa-color) 35%, var(--line));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--capa-color) 7%, var(--bg-elevated));
    line-height: 1.2;
    transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), transform var(--motion-base) var(--ease-settle);
}

.chip-capa:hover {
    border-color: color-mix(in srgb, var(--capa-color) 70%, var(--line));
    background: color-mix(in srgb, var(--capa-color) 14%, var(--bg-elevated));
    transform: translateY(-1px);
}

.chip-capa__capa {
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--capa-color);
}

.chip-capa__nombre {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text);
}

/* Variante compacta para tarjetas (home y hub) */
.chip-capa--compacta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
}

.chip-capa--compacta .chip-capa__capa {
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--capa-color);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.chip-capa--compacta .chip-capa__nombre {
    font-size: var(--text-sm);
}

/* --------------------------------------------------------------- resultados */

.caso-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-3);
}

.caso-metrica {
    display: grid;
    gap: 0.25rem;
    padding: var(--space-4) var(--space-4) var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background:
        radial-gradient(ellipse at top left, color-mix(in srgb, var(--caso-acento, var(--accent)) 10%, transparent), transparent 60%),
        var(--bg-elevated);
}

.caso-metrica__valor {
    font-family: var(--font-heading);
    font-size: var(--text-display-md);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.caso-metrica__etiqueta {
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--caso-acento, var(--accent));
}

.caso-metrica__denominador {
    font-size: var(--text-sm);
    color: var(--text-soft);
}

.caso-metrica__texto {
    margin: var(--space-2) 0 0;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-muted);
}

.caso-resultados-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.caso-resultados-lista li {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}

.caso-resultados-lista__etiqueta {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.25;
}

.caso-resultados-lista p {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text-muted);
}

.caso-bloque .caso-nota {
    max-width: 66ch;
    margin-top: var(--space-4);
}

/* ---------------------------------------------------------------- evidencia */

.caso-evidencia__pie {
    max-width: 66ch;
    margin: var(--space-3) 0 0;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-muted);
}

.caso-evidencia__esquema {
    max-width: 44rem;
}

.caso-evidencia__esquema .scene-evidence--flow {
    min-height: auto;
}

/* Scroll-story dentro de la Ficha: sin intro propia, misma rejilla de pages.css.
   Los pasos conservan altura para dar recorrido a los frames, pero menos que en
   la página completa original. */
.beelab-story--ficha .beelab-story__steps {
    padding-top: var(--space-4);
}

.beelab-story--ficha .beelab-step {
    min-height: clamp(16rem, 52vh, 28rem);
    justify-content: center;
}

.caso-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-3);
}

.caso-galeria__item {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}

.caso-galeria__item img {
    width: 100%;
    height: auto;
}

.caso-galeria__item figcaption {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ---------------------------------------------------------------- siguiente */

.caso-siguiente .caso-bloque__cuerpo {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
}

.caso-siguiente__tarjeta {
    display: grid;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--caso-acento, var(--accent)) 14%, transparent), transparent 55%),
        var(--bg-elevated);
}

.caso-siguiente__nombre {
    font-family: var(--font-heading);
    font-size: var(--text-display-sm);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.caso-siguiente__frase {
    max-width: 40rem;
    font-size: var(--text-lg);
    color: var(--text-muted);
}

.caso-siguiente__cta {
    margin-top: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--caso-acento, var(--accent));
}

/* ------------------------------------------------------------ responsivo */

@media (max-width: 900px) {
    .caso-cabecera__layout,
    .caso-bloque__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .caso-cabecera__layout {
        align-items: start;
    }

    .caso-bloque__cabecera {
        position: static;
    }

    .caso-bloque {
        padding: var(--space-6) 0;
    }
}

@media (max-width: 600px) {
    .caso-cabecera {
        padding-top: calc(4.5rem + var(--space-5));
    }

    .caso-ficha {
        grid-template-columns: minmax(0, 1fr);
    }

    .caso-bloque__layout--ancho .caso-bloque__cabecera {
        grid-template-columns: minmax(0, 1fr);
    }

    .caso-bloque__layout--ancho .caso-bloque__cabecera .eyebrow,
    .caso-bloque__layout--ancho .caso-bloque__cabecera h2 {
        grid-column: 1;
    }
}

/* Hub: la progresión es una lista ordenada real */
ol.progression-strip {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hub-chips {
    margin: var(--space-3) 0;
}

/* Las imágenes con width/height intrínsecos (CLS, #89) siguen adaptándose al marco */
.flagship-card__visual img,
.scene-evidence--image img,
.photo-roll__frame img,
.caso-galeria__item img {
    height: auto;
}

/* Home móvil: el esquema del sistema se reduce en vez de recortarse (F6) */
@media (max-width: 960px) {
    .narrative__visual {
        height: clamp(240px, 42vh, 380px);
    }

    .scene-evidence--flow .scene-flow {
        zoom: 0.72;
    }
}

/* Secuencias (E6): fases y stack alcanzados por el conector. */
.caso-fase,
.caso-stack__capa {
    transition:
        border-color var(--motion-base) var(--ease-standard),
        transform var(--motion-moderate) var(--ease-settle);
}

.caso-fase.secuencia-alcanzado {
    border-color: color-mix(in srgb, var(--caso-acento, var(--accent)) 45%, var(--line));
}

.caso-fase.secuencia-alcanzado::before {
    opacity: 1;
}

.caso-fase.secuencia-alcanzado .caso-fase__indice {
    text-shadow: 0 0 14px color-mix(in srgb, var(--caso-acento, var(--accent)) 70%, transparent);
}

.caso-stack__capa.secuencia-alcanzado .caso-stack__punto {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--capa-color, var(--accent)) 14%, transparent), 0 0 18px color-mix(in srgb, var(--capa-color, var(--accent)) 60%, transparent);
}

/* Chips de capa (ADR-0005, E5): lift, borde fuerte y punto que pulsa. */
.chip-capa {
    transition:
        transform var(--motion-base) var(--ease-settle),
        border-color var(--motion-fast) var(--ease-standard),
        background-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-settle);
}

.chip-capa:hover,
.chip-capa:focus-within {
    border-color: var(--line-strong);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 1px color-mix(in srgb, var(--capa-color) 25%, transparent);
}

.chip-capa--compacta .chip-capa__capa {
    position: relative;
    transition: transform var(--motion-base) var(--ease-spring);
}

.chip-capa--compacta .chip-capa__capa::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1px solid var(--capa-color);
    opacity: 0;
    transform: scale(0.6);
}

.chip-capa--compacta:hover .chip-capa__capa {
    transform: scale(1.25);
}

.chip-capa--compacta:hover .chip-capa__capa::after,
.hub-chips:hover .chip-capa__capa::after {
    animation: chip-pulso calc(var(--motion-story) * 1.5) var(--ease-in-out) infinite;
}

@keyframes chip-pulso {
    0% { opacity: 0.8; transform: scale(0.6); }
    70% { opacity: 0; transform: scale(2.2); }
    100% { opacity: 0; transform: scale(2.2); }
}

/* Tarjeta siguiente caso: desplazamiento de la flecha y realce del acento. */
.caso-siguiente__tarjeta {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--motion-base) var(--ease-settle),
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-settle);
}

.caso-siguiente__tarjeta:hover,
.caso-siguiente__tarjeta:focus-within {
    border-color: color-mix(in srgb, var(--caso-acento, var(--accent)) 45%, var(--line));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.caso-siguiente__tarjeta .text-link {
    display: inline-flex;
    align-items: center;
}

.caso-siguiente__tarjeta:hover .text-link {
    transform: translateX(6px);
}

/* Herramientas por fase (2026-09-14): chips mono dentro de cada fase. */
.caso-fase__herramientas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.caso-fase__herramientas li {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-muted);
    transition: border-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard);
}

.caso-fase.secuencia-alcanzado .caso-fase__herramientas li {
    border-color: color-mix(in srgb, var(--caso-acento, var(--accent)) 35%, var(--line));
    color: var(--text);
}

/* ------------------------------------------------- cabecera compacta (relato) */
/* Cuando una escena 3D abre el relato (issue #97): solo texto arriba, la escena
   ocupa el primer viewport y la ficha técnica baja a una tira bajo ella. */

.caso-cabecera--compacta {
    padding: calc(5.25rem + var(--space-4)) 0 var(--space-2);
}

.caso-cabecera__layout--compacta {
    grid-template-columns: minmax(0, 1fr);
}

.caso-cabecera--compacta .page-back-link {
    margin-bottom: var(--space-2);
}

.caso-cabecera__layout--compacta .caso-cabecera__texto {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
}

.caso-cabecera__layout--compacta .page-back-link,
.caso-cabecera__layout--compacta .eyebrow {
    grid-column: 1 / -1;
}

.caso-cabecera--compacta h1 {
    margin: var(--space-1) 0 0;
    font-size: var(--text-display-md);
}

.caso-cabecera--compacta .caso-cabecera__frase {
    max-width: none;
    margin-bottom: 0.35em;
    font-size: var(--text-lg);
}

@media (max-width: 900px) {
    .caso-cabecera__layout--compacta .caso-cabecera__texto {
        grid-template-columns: minmax(0, 1fr);
    }
}

.caso-tira {
    position: relative;
    z-index: 1;
    padding: var(--space-4) 0 var(--space-5);
}

.caso-tira__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
    gap: var(--space-4) clamp(2rem, 5vw, 4rem);
    align-items: start;
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

/* La ficha técnica conserva su clase (es parte del contrato de la Ficha) y aquí
   se tiende en una fila sin caja. */
.caso-tira .caso-ficha {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-3) var(--space-4);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.caso-tira__celda {
    display: grid;
    gap: 0.2rem;
    padding-left: var(--space-3);
    border-left: 1px solid color-mix(in srgb, var(--caso-acento, var(--accent)) 45%, var(--line));
}

.caso-tira__celda dt {
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.caso-tira__celda dd {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.4;
}

.caso-tira__nota {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
}

.caso-tira__nota .meta-label {
    color: var(--text);
}

/* ------------------------------------------------- aprendizajes en tarjetas */
/* Cada aprendizaje es una tarjeta con color por capa (--capa-* vía data-capa). */

.caso-aprendizajes--tarjetas {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-3);
    max-width: none;
    counter-reset: none;
}

.caso-aprendizajes--tarjetas .caso-aprendizaje {
    --color-capa: var(--capa-color, var(--caso-acento, var(--accent)));
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-4);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-capa) 28%, var(--line));
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-capa) 7%, transparent), rgba(255, 255, 255, 0.01)),
        var(--bg-elevated);
    font-size: var(--text-base);
    line-height: 1.5;
    transition:
        transform var(--motion-moderate) var(--ease-settle),
        border-color var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-moderate) var(--ease-settle);
}

.caso-aprendizajes--tarjetas .caso-aprendizaje::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-capa);
}

.caso-aprendizajes--tarjetas .caso-aprendizaje::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--color-capa) 18%, transparent), transparent 55%);
    opacity: 0;
    transition: opacity var(--motion-moderate) var(--ease-standard);
    pointer-events: none;
}

.caso-aprendizaje__indice {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.1em;
    color: var(--color-capa);
}

.caso-aprendizaje__titulo {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.caso-aprendizaje__texto {
    margin: 0;
    color: var(--text-muted);
    text-wrap: pretty;
}

.caso-aprendizaje__capa {
    justify-self: start;
    margin-top: var(--space-1);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-capa);
    background: color-mix(in srgb, var(--color-capa) 12%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    .caso-aprendizajes--tarjetas .caso-aprendizaje:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--color-capa) 70%, var(--line));
        box-shadow:
            0 18px 44px rgba(0, 0, 0, 0.35),
            0 0 0 1px color-mix(in srgb, var(--color-capa) 25%, transparent);
    }

    .caso-aprendizajes--tarjetas .caso-aprendizaje:hover::after {
        opacity: 1;
    }
}

/* --------------------------------------------- evidencia: escenario fijo */
/* El esquema usa el ancho completo y queda fijo a la altura del viewport
   mientras el bloque recorre 170svh; arquitectura.js lo construye con el
   scroll y lo escala para que quepa entero (ajuste a la caja). */

.caso-evidencia[data-formato="esquema"] .caso-evidencia__esquema {
    width: 100%;
    max-width: none;
}

.caso-evidencia__recorrido {
    min-height: 170svh;
}

.caso-evidencia__escenario {
    position: sticky;
    top: calc(5.25rem + var(--space-2));
    display: grid;
    align-content: center;
    height: calc(100svh - 5.25rem - var(--space-3));
}

@media (max-width: 720px) {
    .caso-evidencia__recorrido {
        min-height: auto;
    }

    .caso-evidencia__escenario {
        position: static;
        height: auto;
    }

    .caso-tira__layout {
        grid-template-columns: minmax(0, 1fr);
    }
}