/* Flow-Bi · home reordenada (A-14, pieza D) — SOLO disposición para el
   recorrido de 8 escenas de /home. No agrega componentes ni colores nuevos:
   reutiliza `.glass`, `.eyebrow`, `.primary`, `.secondary`, `.text-link` y
   los tokens ya existentes (--muted, --line). El mecanismo de escenas
   (`.stage`/`.scene`, `app.js`) no se toca.

   Dos escenas nuevas (`evolution`, `confianza`) no tenían clase de layout
   propia en styles.css (medido: ningún selector `.evolution{`/`.confianza{`
   existía) — se les da acá el mismo patrón de una sola columna centrada que
   ya usa `.clarity` (ver INVENTARIO-COMPONENTES.md), en vez del 43%/57% por
   defecto de `.scene-copy` (pensado para dos columnas). */

/* m3 (revisión de diseño 21-sep): a 1440 el párrafo `.fine` del hero es una
   sola línea de ~160 caracteres. Se limita el ancho de línea (~62ch),
   centrado como el resto de `.intro`, sin tocar el h1 ni `.lede`. */
.scene.intro .fine {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.muted {
  color: var(--muted);
}

.compat-note {
  margin: 10px 0 0;
  color: var(--muted);
}

/* El buscador de demos, reubicado como acceso SECUNDARIO dentro de la
   escena de plataforma (bloque 5 del contrato). Vive adentro de
   `.module-explorer.glass`, así que el `.scene.modules` conserva sus dos
   hijos de siempre (`.scene-copy` + el panel) y no rompe el 43%/57%. */
.composer-secondary {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.composer-secondary .composer {
  max-width: 480px;
}

.evolution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
  width: 100%;
  text-align: left;
}

.evolution-grid article {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* S3 (revisión de diseño 21-sep): mismo radio que `.price-card` en
     /planes (pages.css, medido con getComputedStyle: 25px). Sin esto
     `.glass` no trae radio propio y el artículo queda a 0. */
  border-radius: 25px;
}

/* m2 (revisión de diseño 21-sep): la tarjeta de Analista abre con `.eyebrow`
   (texto) y las dos próximas con `.plan-status` (píldora con borde y
   padding); sin una altura común el título "Analista" queda 26 px más
   arriba que los otros dos. Se iguala la altura del primer hijo, sea cual
   sea su tipo, para que los tres `h3` arranquen en la misma fila. */
.evolution-grid article > :first-child {
  min-height: 34px;
  margin: 0;
  display: flex;
  align-items: center;
  align-self: flex-start;
}

.confianza-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
  width: 100%;
  text-align: left;
}

.confianza-list article {
  padding: 18px 20px;
}

/* Una sola columna centrada, como `.clarity` — las dos escenas nuevas no
   necesitan el split de 43%/57% que exige un panel visual grande. */
.scene.evolution .scene-copy,
.scene.confianza .scene-copy {
  width: 100%;
  text-align: center;
}

.scene.evolution .scene-copy p,
.scene.confianza .scene-copy p {
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
}

@media (max-width: 960px) {
  .evolution-grid,
  .confianza-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .composer-secondary {
    transition: none;
  }
}