/*
  DDSYS — Sección: Ecosistema de Software Propio
  Fondo blanco. Tres bloques (administrativa, académica, ejecutiva),
  alternando composición 5/6. Los "mockups" son UI ilustrativa propia
  (no capturas reales todavía) — ver nota en pages/home.content.html:
  cuando existan capturas reales del producto, se reemplaza el
  contenido de .device-frame__body sin tocar el layout.
*/

.ecosystem {
  background-color: var(--surface-page);
  padding-block: var(--space-24);
}

.ecosystem__header {
  max-width: 720px;
  margin: 0 auto var(--space-24);
  text-align: center;
}

.ecosystem__title {
  font-size: var(--text-h2-mobile);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

.ecosystem__subtitle {
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.ecosystem__intro {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-2);
}

.ecosystem__body {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.6;
}

.ecosystem__block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-block: var(--space-16);
}

.ecosystem__block + .ecosystem__block {
  border-top: 1px solid var(--surface-card-border);
}

.ecosystem__block-title {
  font-size: 1.5rem;
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-3);
}

.ecosystem__list {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* "Device frame": el mockup ilustrativo reutilizable para las tres
   familias — misma cáscara, distinto contenido interno. */
.device-frame {
  background-color: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  max-width: 480px;
  margin-inline: auto;
  /* Perspectiva leve, ver Design System 4.5 / spec de sección 6. */
  transform: perspective(1000px) rotateY(-5deg);
}

.device-frame__bar {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: var(--space-4);
  background-color: var(--surface-alt);
  border-bottom: 1px solid var(--surface-card-border);
}

.device-frame__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--surface-card-border);
}

.device-frame__body {
  padding: var(--space-6);
}

/* Contenido ilustrativo — familia administrativa: filas tipo tabla. */
.device-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.device-row__label {
  height: 8px;
  border-radius: 4px;
  background-color: var(--surface-alt);
  flex: 1;
}

.device-row__value {
  height: 8px;
  width: 48px;
  border-radius: 4px;
  background-color: rgba(87, 122, 225, 0.35);
}

/* Contenido ilustrativo — familia académica: grilla tipo calendario. */
.device-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.device-calendar__day {
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background-color: var(--surface-alt);
}

.device-calendar__day--active {
  background-color: var(--color-brand);
}

/* Contenido ilustrativo — familia ejecutiva: gráfico de barras que se
   dibuja al entrar en viewport (reutiliza js/reveal.js, ver
   pages/home.content.html: el contenedor lleva [data-reveal]). Anima
   solo transform, nunca height, para no disparar layout/paint. */
.device-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  height: 120px;
}

.device-chart__bar {
  flex: 1;
  height: 100%;
  border-radius: 4px 4px 0 0;
  background-color: var(--color-brand);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 800ms var(--ease-standard);
}

.ecosystem__mockup.is-revealed .device-chart__bar:nth-child(1) { transform: scaleY(0.45); transition-delay: 0ms; }
.ecosystem__mockup.is-revealed .device-chart__bar:nth-child(2) { transform: scaleY(0.7); transition-delay: 60ms; }
.ecosystem__mockup.is-revealed .device-chart__bar:nth-child(3) { transform: scaleY(0.5); transition-delay: 120ms; }
.ecosystem__mockup.is-revealed .device-chart__bar:nth-child(4) { transform: scaleY(0.9); transition-delay: 180ms; }
.ecosystem__mockup.is-revealed .device-chart__bar:nth-child(5) { transform: scaleY(0.65); transition-delay: 240ms; }

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

@media (min-width: 1024px) {
  .ecosystem__title {
    font-size: var(--text-h2);
  }

  .ecosystem__block {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-16);
  }

  .ecosystem__block--reverse .ecosystem__content {
    order: 2;
  }

  .ecosystem__block--reverse .ecosystem__mockup {
    order: 1;
  }

  .device-frame {
    max-width: none;
  }
}