.view-system {
  /* base (móvil) */
  width: 100%;
}

.system__head {
  /* base (móvil) */
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 2rem 1rem 0.5rem;

  @media (min-width: 768px) {
    padding: 2.5rem 2rem 0.75rem;
  }

  @media (min-width: 1024px) {
    padding: 3rem 2.5rem 1rem;
  }
}

.system__title {
  /* base (móvil) */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-navy);

  @media (min-width: 768px) {
    font-size: 2.2rem;
  }

  @media (min-width: 1024px) {
    font-size: 2.6rem;
  }
}

.system__subtitle {
  /* base (móvil) */
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-blue);

  @media (min-width: 1024px) {
    font-size: 1.3rem;
  }
}

/* ---- Contenedor de bloques ---- */
.system__blocks {
  /* base (móvil) */
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 1.5rem 1rem;

  @media (min-width: 768px) {
    padding: 2rem 2rem;
  }

  @media (min-width: 1024px) {
    padding: 2.5rem 2.5rem;
  }
}

/* ---- Bloque columnas: texto + imagen ---- */
.system__columns {
  /* base (móvil) — apilado, imagen al final */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;

  @media (min-width: 1024px) {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
  }
}

.system__col-text {
  /* base (móvil) */
  order: 1;

  @media (min-width: 1024px) {
    flex: 1.4 1 0;
    margin-top: 0.3rem;
  }
}

.system__col-media {
  /* base (móvil) — imagen al final */
  order: 2;

  @media (min-width: 1024px) {
    flex: 1 1 0;
  }
}

.system__image {
  /* base (móvil) */
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  object-fit: cover;

  @media (min-width: 1024px) {
    max-height: 410px;
  }
}

/* ---- Bloque texto ancho ---- */
.system__text {
  /* base (móvil) */
  margin-bottom: 2rem;
}

.system__paragraph {
  /* base (móvil) */
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-align: justify;

  @media (min-width: 1024px) {
    font-size: 1.04rem;
  }
}

.system__paragraph:last-child {
  margin-bottom: 0;
}

/* ---- Bloque capacidades ---- */
.system__capabilities {
  /* base (móvil) */
  text-align: center;
  margin-bottom: 2rem;
}

.system__capabilities-title {
  /* base (móvil) */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--color-navy);

  @media (min-width: 1024px) {
    font-size: 1.5rem;
  }
}

.system__capabilities-list {
  /* base (móvil) */
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--color-blue);

  @media (min-width: 1024px) {
    font-size: 1.15rem;
  }
}

/* ---- CTA ---- */
.system__cta {
  /* base (móvil) */
  display: flex;
  justify-content: center;
  padding: 0 1rem 3rem;

  @media (min-width: 1024px) {
    padding: 0 2.5rem 4rem;
  }
}

/* ---- Bloque split: layout entrelazado de 2 columnas ---- */
.system__split {
  /* base (móvil) — 1 columna, orden natural del HTML:
     texto sup, imagen A, imagen B, texto inf */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;

  @media (min-width: 1024px) {
    /* desktop — grid de 2 columnas, 2 filas */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
    row-gap: 1.75rem;
    align-items: start;
  }
}

.system__split-text--top {
  /* base (móvil) */

  @media (min-width: 1024px) {
    /* col izquierda, fila 1 */
    grid-column: 1;
    grid-row: 1;
  }
}

.system__split-media--a {
  /* base (móvil) — imagen powder (derecha en desktop) */

  @media (min-width: 1024px) {
    /* col derecha, fila 1 */
    grid-column: 2;
    grid-row: 1;
  }
}

.system__split-media--b {
  /* base (móvil) — imagen e-coat (izquierda en desktop) */

  @media (min-width: 1024px) {
    /* col izquierda, fila 2 */
    grid-column: 1;
    grid-row: 2;
  }
}

.system__split-text--bottom {
  /* base (móvil) */

  @media (min-width: 1024px) {
    /* col derecha, fila 2 */
    grid-column: 2;
    grid-row: 2;
  }
}


/* ---- Bloque thermal: 2 columnas independientes (Thermal Treatment) ---- */
.system__thermal {
  /* base (móvil) — una sola columna; el orden temático se logra con order */
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2rem;

  @media (min-width: 1024px) {
    /* desktop — dos columnas que fluyen INDEPENDIENTES */
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
  }
}

.system__thermal-col {
  /* base (móvil) — las columnas se "deshacen" para intercalar por tema */
  display: contents;

  @media (min-width: 1024px) {
    /* desktop — cada columna es un contenedor real, 50% */
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex: 1 1 0;
  }
}

/* En móvil, intercalar por tema con order:
   intro(1) → furnaces(2) → foundry(3) → shoei(4) */
.system__thermal-intro {
  /* base (móvil) */
  order: 1;
}


/* En móvil, intercalar por tema con order:
   intro(1) → left/--a(2) → rightTop/--b(3) → rightBottom/--c(4) */
.system__thermal-intro { order: 1; }
.system__thermal-sec--a { order: 2; }
.system__thermal-sec--b { order: 3; }
.system__thermal-sec--c { order: 4; }

@media (min-width: 1024px) {
  .system__thermal-intro,
  .system__thermal-sec--a,
  .system__thermal-sec--b,
  .system__thermal-sec--c {
    order: 0;
  }
}


.system__thermal-logo {
  /* base (móvil) */
  width: 180px;
  height: auto;
  margin-top: 1.25rem;
}

.system__thermal-sec {
  /* base (móvil) */
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.system__thermal-sec .system__image {
  margin-bottom: 0.25rem;
}

.system__thermal-sec-title {
  /* base (móvil) */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-blue);

  @media (min-width: 1024px) {
    font-size: 1.2rem;
  }
}

/* ---- Bloque modeling: 2 columnas (Environmental Modeling) ---- */
.system__modeling {
  /* base (móvil) — 1 columna; el order intercala intro → izq → der */
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2rem;

  @media (min-width: 1024px) {
    /* desktop — dos columnas independientes */
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
  }
}

.system__modeling-col {
  /* base (móvil) — se deshace para intercalar por order */
  display: contents;

  @media (min-width: 1024px) {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex: 1 1 0;
  }
}

/* Móvil: intro(1) → left(2) → right(3) */
.system__modeling-intro { order: 1; }
.system__modeling-sec--left { order: 2; }
.system__modeling-sec--right { order: 3; }

@media (min-width: 1024px) {
  .system__modeling-intro,
  .system__modeling-sec--left,
  .system__modeling-sec--right {
    order: 0;
  }
}

.system__modeling-sec {
  /* base (móvil) */
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.system__modeling-sec .system__image {
  margin-bottom: 0.25rem;
}

.system__modeling-sec-title {
  /* base (móvil) */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-blue);

  @media (min-width: 1024px) {
    font-size: 1.2rem;
  }
}

/* ---- Lista de beneficios ---- */
.system__modeling-benefits-title {
  /* base (móvil) */
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);

  @media (min-width: 1024px) {
    font-size: 1rem;
  }
}

.system__modeling-benefits {
  /* base (móvil) */
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.system__modeling-benefit {
  /* base (móvil) */
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text);

  @media (min-width: 1024px) {
    font-size: 1rem;
  }
}

.system__modeling-benefit::before {
  /* viñeta personalizada en azul */
  content: '•';
  position: absolute;
  left: 0.3rem;
  color: var(--color-blue);
  font-weight: 700;
}

/* ---- Bloque opcontrol: flujo vertical centrado (Operational Control) ---- */
.system__opcontrol {
  /* base (móvil) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  margin-bottom: 2rem;

  @media (min-width: 1024px) {
    gap: 2.25rem;
  }
}

.system__opcontrol-img {
  /* base (móvil) — imagen ancha de la línea IoT */
  width: 100%;
  max-width: 920px;
  height: auto;
  display: block;
  border-radius: 4px;
}

.system__opcontrol-logo {
  /* base (móvil) — logo SmartParts */
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;

  @media (min-width: 1024px) {
    max-width: 440px;
  }
}

.system__opcontrol-heading {
  /* base (móvil) — encabezado "DISCIPLINED END-TO-END..." */
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-navy);

  @media (min-width: 768px) {
    font-size: 1.6rem;
  }

  @media (min-width: 1024px) {
    font-size: 2rem;
  }
}

.system__opcontrol-diagram {
  /* base (móvil) — diagrama circular */
  width: 100%;
  max-width: 820px;
  height: auto;
  display: block;
}

.system__opcontrol-tagline {
  /* base (móvil) — "CRITICAL PARTS • MAINTENANCE DATA • ..." */
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-blue);

  @media (min-width: 768px) {
    font-size: 1.3rem;
  }

  @media (min-width: 1024px) {
    font-size: 1.6rem;
  }
}

.system__opcontrol-text {
  /* base (móvil) — los párrafos, a ancho contenido y centrados en bloque */
  width: 100%;
  max-width: 920px;
}