/* =========================================================================
   GLOBAL SECTION: Escenas — un problema del artista y la pantalla que lo
   resuelve
   -------------------------------------------------------------------------
   El patrón con el que la web vende la app (owner, 2026-10-21): a un lado,
   el momento contado por quien lo vive y lo que hace en CITEM; al otro, la
   pantalla real (global/capturas.css). Alterna el lado para que el ojo baje
   en zigzag. Lo usan la home y las páginas de producto.

     <article class="escena">   (las pares, con la pantalla a la izquierda)
       <div class="container escena-split">
         <div class="escena-texto">  .escena-kicker · h3.escena-titulo ·
           p.escena-situacion · ul.escena-pasos · p.escena-condicion
         <figure class="captura|clip">
   ========================================================================= */

.escena {
    padding: var(--spacing-lg) 0;
    border-top: 1px solid rgb(var(--c-ink-rgb) / 0.2);
}

.escena:first-of-type {
    border-top: 0;
}

.escena-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-md);
    align-items: center;
}

@media (min-width: 1024px) {
    .escena-split {
        grid-template-columns: 5fr 7fr;
        gap: var(--spacing-lg);
    }

    /* Alterna el lado de la pantalla por posición, no por clase: quitar o
       añadir una escena no rompe el zigzag. El orden de lectura no cambia. */
    .escena:nth-of-type(even) .escena-split {
        grid-template-columns: 7fr 5fr;
    }

    .escena:nth-of-type(even) .escena-texto {
        order: 2;
    }
}

.escena-kicker {
    font: 900 0.75rem/1 var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--c-coral-dark);
    margin-bottom: var(--space-sm);
}

.escena-titulo {
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--c-text-heading);
    margin-bottom: var(--space-md);
}

/* Lo que diría quien lee: la voz del artista, en el nivel secundario. La
   jerarquía la da el nivel de texto (§3.1), no una opacidad. */
.escena-situacion {
    max-width: 48ch;
    font-size: 1.125rem;
    font-style: italic;
    color: var(--c-text-muted);
    padding-left: var(--space-md);
    border-left: var(--border-w-accent) solid var(--c-coral);
    margin-bottom: var(--space-lg);
}

/* Lo que haces en CITEM: tres gestos numerados, en lectura plena. */
.escena-pasos {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md);
    counter-reset: paso;
    display: grid;
    gap: var(--space-md);
}

.escena-pasos li {
    counter-increment: paso;
    position: relative;
    padding-left: 2rem;
    max-width: 52ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-text-strong);
}

/* El número va fuera del flujo: el texto del paso, con sus <strong> y sus
   enlaces, se queda en una sola caja de línea. */
.escena-pasos li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 0.1em;
    font: 900 1.5rem/1 var(--font-heading);
    color: var(--c-coral-dark);
}

/* Lo que pide plan, compra o créditos se dice, en pequeño y sin esconderlo. */
.escena-condicion {
    max-width: 52ch;
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

/* SYNC DS §5.1: un enlace dentro de un texto, en Coral oscuro y subrayado. */
.escena-texto a {
    color: var(--c-coral-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}