/* ==========================================================
   CENFIC · SIMULADORES · RESPONSIVE
   Hero por capas, similar a Inicio
   ========================================================== */

/* Seguridad: evita scroll horizontal accidental solo en esta página */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==========================================================
   HERO · CAPAS
   - ::before = imagen original
   - ::after  = velo/degradado para legibilidad
   - contenido queda arriba
   ========================================================== */

.sim-hero {
  position: relative;
  isolation: isolate;

  /* El fondo real ahora vive en ::before */
  background: #083f73 !important;
  background-image: none !important;
  overflow: hidden;
}

.sim-hero::before,
.sim-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sim-hero::before {
  z-index: 0;

  background-image: url("../img/IMAGEN-SIMULADORES.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 64% center;
}

.sim-hero::after {
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(0, 45, 88, 0.98) 0%,
      rgba(0, 53, 101, 0.96) 26%,
      rgba(0, 58, 109, 0.90) 40%,
      rgba(0, 48, 91, 0.58) 56%,
      rgba(0, 33, 67, 0.22) 72%,
      rgba(0, 33, 67, 0.03) 100%
    );
}

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

  width: 100%;
  max-width: none;
  margin-inline: 0;

  padding-inline: clamp(40px, 4vw, 80px);
}

.sim-hero__content {
  width: min(100%, 430px);
}

/* ==========================================================
   LAPTOP / TABLET HORIZONTAL
   901px - 1180px
   ========================================================== */

@media (min-width: 901px) and (max-width: 1180px) {

  .sim-hero {
    height: auto;
    min-height: 417px;
  }

  .sim-hero::before {
    background-position: 68% center;
  }

  .sim-hero::after {
    background:
      linear-gradient(
        90deg,
        rgba(0, 45, 88, 0.98) 0%,
        rgba(0, 53, 101, 0.96) 32%,
        rgba(0, 58, 109, 0.88) 48%,
        rgba(0, 48, 91, 0.48) 66%,
        rgba(0, 33, 67, 0.12) 100%
      );
  }

  .sim-hero__inner {
    width: min(calc(100% - 48px), 1000px);
    min-height: 417px;
    padding-block: 36px;
    padding-inline: 0;
    margin-inline: auto;
  }

  .sim-hero__content {
    width: min(100%, 390px);
  }

  .quick-access {
    height: auto;
    padding-block: 14px;
  }

  .quick-access__inner {
    width: min(calc(100% - 40px), 960px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .sim-about {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .sim-about__inner {
    width: min(calc(100% - 48px), 900px);
    height: auto !important;
    grid-template-columns: 1fr;
    gap: 26px;
    padding-block: 32px;
  }

  .sim-about__title,
  .sim-about__lead {
    max-width: 620px;
  }

  .sim-about__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .sim-how__inner {
    width: min(calc(100% - 48px), 900px);
    height: auto;
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 32px;
  }

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

/* ==========================================================
   TABLET
   601px - 900px
   ========================================================== */

@media (min-width: 601px) and (max-width: 900px) {

  .sim-hero::before {
    background-position: 72% center;
  }

  .sim-hero::after {
    background:
      linear-gradient(
        90deg,
        rgba(0, 45, 88, 0.98) 0%,
        rgba(0, 53, 101, 0.95) 36%,
        rgba(0, 58, 109, 0.82) 56%,
        rgba(0, 48, 91, 0.34) 78%,
        rgba(0, 33, 67, 0.08) 100%
      );
  }
}

/* ==========================================================
   MÓVIL
   <= 600px
   ========================================================== */

@media (max-width: 600px) {

  .sim-hero::before {
    background-position: 76% center;
  }

  .sim-hero::after {
    background:
      linear-gradient(
        180deg,
        rgba(0, 44, 84, 0.92) 0%,
        rgba(0, 48, 91, 0.78) 100%
      ),
      linear-gradient(
        90deg,
        rgba(0, 45, 88, 0.96) 0%,
        rgba(0, 53, 101, 0.84) 42%,
        rgba(0, 58, 109, 0.28) 100%
      );
  }
}


/* CENFIC · SECCIONES INFERIORES FLUIDAS DESKTOP */
@media (min-width: 1181px) {

  /* Accesos rápidos */
  .quick-access__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;

    padding-inline:
      clamp(40px, 4vw, 80px);
  }

  /* Conoce el simulador */
  .sim-about__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;

    padding-inline:
      clamp(40px, 4vw, 80px);
  }

  /* ¿Cómo funciona? */
  .sim-how__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;

    padding-inline:
      clamp(40px, 4vw, 80px);
  }
}