/* ==========================================================================
   PLATAFORMA-SCO.CSS
   Sección "Plataforma SCO V2.0" — núcleo tecnológico del proyecto
   (Fase 2/3). Continúa el fondo oscuro de Hero/Metodología (narrativa
   visual continua, ver Entrega 4). Toda la sección se apoya en una
   sola regla no negociable: cada módulo listado se marca como "En
   desarrollo" — no se presenta ni una sola capacidad de SCO V2.0 como
   disponible hoy, porque ninguna lo está todavía.
   ========================================================================== */

.plataforma {
  position: relative;
  background-color: var(--qa-navy-950);
  color: var(--color-text-inverse);
  border-top: 1px solid var(--qa-navy-800); /* separación mínima, no un corte de color */
}

.plataforma__intro {
  max-width: 720px;
  margin-bottom: var(--space-7);
}

.plataforma__intro .eyebrow {
  color: var(--qa-cyan-300);
}

.plataforma__intro h2 {
  color: var(--color-text-inverse);
}

.plataforma__intro p {
  font-size: var(--text-lg);
  color: var(--qa-steel-200);
  margin-top: var(--space-4);
  max-width: 68ch;
}

/* --------------------------------------------------------------------
   VISUALIZACIÓN CONCEPTUAL — puente visual entre la intro y el
   callout "hoy/mañana". Usa los mismos tokens de radius/spacing del
   resto del sitio; sin fondo, efectos ni decoración nueva.
   -------------------------------------------------------------------- */

.plataforma__concept {
  margin-bottom: var(--space-8);
}

.plataforma__concept-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

@media (min-width: 992px) {
  .plataforma__concept-image {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
  }
}

.plataforma__concept-caption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--qa-steel-200);
  text-align: center;
}

/* --------------------------------------------------------------------
   CALLOUT "HOY / MAÑANA"
   Bloque explícito que conecta esta sección con la Metodología
   anterior — refuerza la narrativa continua pedida en Entrega 4.
   -------------------------------------------------------------------- */

.plataforma__today-vs-next {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .plataforma__today-vs-next {
    grid-template-columns: 1fr 1fr;
  }
}

.plataforma__today-vs-next > div {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--qa-navy-700);
}

.plataforma__today {
  background-color: rgba(31, 169, 154, 0.06);
  border-color: var(--qa-cyan-500) !important;
}

.plataforma__next {
  background-color: rgba(226, 163, 59, 0.05);
  border-color: var(--color-status-dev) !important;
}

.plataforma__today-vs-next h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

.plataforma__today h3 { color: var(--qa-cyan-300); }
.plataforma__next h3  { color: #F4CE8C; }

.plataforma__today-vs-next p {
  font-size: var(--text-sm);
  color: var(--qa-steel-200);
}

/* --------------------------------------------------------------------
   GRILLA DE MÓDULOS DEL ECOSISTEMA
   -------------------------------------------------------------------- */

.plataforma__modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.plataforma__module {
  /* Hereda de .card .card--inverse — aquí solo el detalle propio */
  gap: var(--space-3);
}

.plataforma__module-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #F4CE8C;
  background-color: rgba(226, 163, 59, 0.12);
  border-radius: var(--radius-sm);
}

.plataforma__module-icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.plataforma__module .card__title {
  font-size: var(--text-lg);
}

.plataforma__module .badge {
  align-self: flex-start;
}

/* Tarjetas de "doble estado": capacidades que HOY ya se ejecutan de
   forma experta (ver Nuestra Ruta de Optimización) y que SCO V2.0
   digitalizará progresivamente. No confundir con los módulos que son
   puramente futuros (esos solo llevan el badge ámbar). */
.plataforma__module-today {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--qa-cyan-300);
}

.plataforma__module-today .icon {
  width: 0.9rem;
  height: 0.9rem;
}

/* --------------------------------------------------------------------
   SUB-GRUPOS DE MÓDULOS (encabezados intermedios dentro de la sección)
   -------------------------------------------------------------------- */

.plataforma__group-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--qa-steel-200);
  margin-bottom: var(--space-5);
}

.plataforma__group-title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--qa-navy-700);
}

.plataforma__group + .plataforma__group {
  margin-top: var(--space-7);
}

/* --------------------------------------------------------------------
   CALLOUT UAMA-EP
   Se distingue del resto de módulos: es EL primero, pero sigue sin
   estar disponible para contratación — el CTA es de interés
   temprano, nunca de compra (ver Fase 3, obs. 4).
   -------------------------------------------------------------------- */

.plataforma__uama {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7);
  background-color: var(--qa-navy-800);
  border: 1.5px solid var(--qa-cyan-500);
  border-radius: var(--radius-md);
}

@media (min-width: 768px) {
  .plataforma__uama {
    grid-template-columns: auto 1fr auto;
  }
}

.plataforma__uama-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: var(--qa-navy-950);
  background-color: var(--qa-cyan-300);
  border-radius: 50%;
  flex-shrink: 0;
}

.plataforma__uama-icon .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.plataforma__uama-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

/* Mismo problema de raíz que .card--inverse (ver components.css):
   el <h3>UAMA-EP</h3> no vive dentro de una .card, así que la
   corrección sistémica de ese archivo no lo alcanza. Se corrige aquí
   puntualmente porque este contenedor (.plataforma__uama) tiene su
   propio fondo oscuro fuera del sistema de tarjetas. */
.plataforma__uama-title h3 {
  color: var(--color-text-inverse);
}

.plataforma__uama-body p {
  color: var(--qa-steel-200);
  font-size: var(--text-sm);
  max-width: 56ch;
}

.plataforma__uama .btn {
  flex-shrink: 0;
  white-space: normal;
}

/* --------------------------------------------------------------------
   CTA DE CIERRE DE SECCIÓN
   -------------------------------------------------------------------- */

.plataforma__cta {
  margin-top: var(--space-7);
  text-align: center;
}

.plataforma__cta p {
  color: var(--qa-steel-200);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------
   STAGGER DE ANIMACIÓN (mismo patrón que Metodología)
   -------------------------------------------------------------------- */

.plataforma__module[data-delay="1"] { transition-delay: 0ms; }
.plataforma__module[data-delay="2"] { transition-delay: 60ms; }
.plataforma__module[data-delay="3"] { transition-delay: 120ms; }
.plataforma__module[data-delay="4"] { transition-delay: 180ms; }
.plataforma__module[data-delay="5"] { transition-delay: 240ms; }
.plataforma__module[data-delay="6"] { transition-delay: 300ms; }
.plataforma__module[data-delay="7"] { transition-delay: 360ms; }