/* ==========================================================
   CENFIC · ¿CÓMO FUNCIONA?
   Escritorio: 147px
   ========================================================== */

.sim-how {
  width: 100%;
  height: 147px;
  min-height: 147px;

  background:
    linear-gradient(
      105deg,
      #07365f 0%,
      #003c70 45%,
      #004d88 100%
    );

  color: #ffffff;

  scroll-margin-top: 96px;
}

.sim-how__inner {
  width: min(1180px, calc(100% - 48px));
  height: 100%;

  margin-inline: auto;

  display: grid;
  grid-template-columns: 225px minmax(0, 1fr);
  gap: 26px;

  align-items: center;
}


/* ==========================================================
   INTRODUCCIÓN
   ========================================================== */

.sim-how__intro {
  min-width: 0;
}

.sim-how__title {
  margin: 0;

  color: #ffffff;

  font-family: "Sora", "Inter", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 800;

  letter-spacing: -0.02em;
}

.sim-how__description {
  max-width: 205px;

  margin: 10px 0 0;

  color: rgba(255, 255, 255, 0.86);

  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.68;
  font-weight: 400;
}


/* ==========================================================
   FLUJO
   ========================================================== */

.sim-how__flow {
  min-width: 0;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    24px
    minmax(0, 1fr)
    24px
    minmax(0, 1fr)
    24px
    minmax(0, 1fr);

  align-items: center;
}


/* ==========================================================
   ETAPA
   ========================================================== */

.sim-how__step {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


/* Indicador numérico */

.sim-how__number {
  position: relative;
  z-index: 2;

  width: 22px;
  height: 22px;

  margin-bottom: -5px;

  display: grid;
  place-items: center;

  border: 2px solid #ffffff;
  border-radius: 50%;

  background: #1478d4;
  color: #ffffff;

  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;

  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.18);
}


/* Ícono */

.sim-how__icon {
  width: 54px;
  height: 50px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 7px;

  color: #ffffff;

  background:
    rgba(3, 51, 94, 0.32);

  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.04);
}

.sim-how__icon svg {
  width: 29px;
  height: 29px;
}


/* Texto */

.sim-how__step-title {
  margin: 6px 0 0;

  color: #ffffff;

  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 800;
}

.sim-how__step-description {
  max-width: 145px;

  margin: 3px 0 0;

  color: rgba(255, 255, 255, 0.78);

  font-family: "Inter", system-ui, sans-serif;
  font-size: 10.5px;
  line-height: 1.25;
  font-weight: 500;
}


/* ==========================================================
   CONECTORES
   ========================================================== */

.sim-how__connector {
  display: grid;
  place-items: center;

  color: rgba(255, 255, 255, 0.86);
}

.sim-how__connector svg {
  width: 16px;
  height: 16px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

  .sim-how {
    height: auto;
    min-height: 0;
  }

  .sim-how__inner {
    width: min(100% - 36px, 760px);
    height: auto;

    grid-template-columns: 1fr;

    gap: 24px;

    padding-block: 28px;
  }

  .sim-how__description {
    max-width: 520px;
  }

  .sim-how__flow {
    grid-template-columns:
      minmax(0, 1fr)
      22px
      minmax(0, 1fr)
      22px
      minmax(0, 1fr)
      22px
      minmax(0, 1fr);
  }

}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 600px) {

  .sim-how__inner {
    width: calc(100% - 32px);

    padding-block: 28px;

    gap: 24px;
  }

  .sim-how__description {
    max-width: 100%;
  }

  .sim-how__flow {
    grid-template-columns: 1fr;

    gap: 8px;
  }

  .sim-how__step {
    width: 100%;

    display: grid;
    grid-template-columns: 28px 52px minmax(0, 1fr);
    grid-template-rows: auto auto;

    column-gap: 12px;

    align-items: center;

    text-align: left;
  }

  .sim-how__number {
    grid-column: 1;
    grid-row: 1 / 3;

    margin: 0;
  }

  .sim-how__icon {
    grid-column: 2;
    grid-row: 1 / 3;

    width: 48px;
    height: 48px;
  }

  .sim-how__icon svg {
    width: 25px;
    height: 25px;
  }

  .sim-how__step-title {
    grid-column: 3;
    grid-row: 1;

    margin: 0;

  }

  .sim-how__step-description {
    grid-column: 3;
    grid-row: 2;

    max-width: none;

    margin-top: 3px;

  }

  .sim-how__connector {
    height: 19px;

    transform: rotate(90deg);
  }
}