/* ==========================================================
   CENFIC · RESPONSIVE DESKTOP GRANDE · FINAL

   Laptop / tablet / móvil:
   se conserva el diseño existente.

   PC grande:
   comienza desde 1600px de viewport.
   Referencia principal: Full HD 1920x1080.
   ========================================================== */


/* ==========================================================
   1. ESCRITORIO INTERMEDIO

   Evita que el header se desborde entre 1181 y 1350px.
   ========================================================== */

@media (min-width: 1181px) and (max-width: 1350px) {

  .site-header {
    padding-inline: 20px;
    gap: 12px;
  }

  .site-header .brand {
    gap: 9px;
  }

  .site-header .brand-mark {
    height: 52px;
  }

  .site-header .brand-name {
    font-size: 30px;
  }

  .site-header .brand-legend {
    display: block;
  }

  .site-nav {
    gap: 12px;
  }

  .site-nav .nav-link {
    font-size: 14px;
  }

  .site-nav .nav-link[href="#contacto"] {
    margin-right: 8px;
  }

  .nav-search {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .site-nav .nav-aula {
    padding: 8px 10px;
    gap: 6px;
  }

  .site-nav .nav-cta {
    padding: 8px 12px;
    gap: 7px;
  }
}


/* ==========================================================
   2. PC GRANDE

   No ponemos un max-width pequeño de 1560px.
   En Full HD dejamos aproximadamente 40px a cada lado.

   1920px - 80px = 1840px útiles.
   ========================================================== */

@media (min-width: 1600px) {

  #hero-inicio > [class*="__inner"],
  #accesos-rapidos > [class*="__inner"],
  #simulador-destacado > [class*="__inner"],
  #cursos-destacados > [class*="__inner"],
  #verificacion-certificados > [class*="__inner"],
  #flujo-uso > [class*="__inner"],
  #cta-final > [class*="__inner"] {

    width: min(1840px, calc(100% - 80px));
    margin-inline: auto;
    box-sizing: border-box;
  }


  /* --------------------------------------------------------
     HERO · FOTOGRAFÍA

     62% horizontal:
     conserva a la persona en la zona centro-derecha.

     20% vertical:
     muestra más zona superior y evita cortar la cabeza.
     -------------------------------------------------------- */

  .hero-inicio {

    background:
      linear-gradient(
        90deg,
        rgba(3, 28, 55, 0.98) 0%,
        rgba(3, 32, 62, 0.94) 31%,
        rgba(3, 40, 72, 0.68) 50%,
        rgba(3, 29, 55, 0.28) 74%,
        rgba(3, 29, 55, 0.14) 100%
      )
      0 0 / 100% 100% no-repeat,

      url("../../../shared/img/IMAGEN-HERO-1.png")
      62% 20% / cover no-repeat;
  }


  /* --------------------------------------------------------
     HERO · DISTRIBUCIÓN

     La columna izquierda vuelve a tener suficiente anchura.
     Así:
       CAPACITACIÓN Y SIMULADORES
     cabe en una línea.
     -------------------------------------------------------- */

  .hero-inicio__inner {

    grid-template-columns:
      minmax(760px, 1.15fr)
      minmax(390px, 0.65fr);

    gap: clamp(38px, 3vw, 58px);

    align-items: center;
  }


  /* --------------------------------------------------------
     CONTENIDO

     Antes PC grande lo subía -38px.
     Ahora baja ligeramente para reproducir la composición
     de la referencia.
     -------------------------------------------------------- */

  .hero-inicio__content {
    transform: translateY(20px);
  }


  .hero-inicio__title {
    width: min(100%, 720px);
  }


  /* Restauramos las separaciones naturales. */

  .hero-inicio__lead {
    margin-top: 12px;
  }

  .hero-inicio__actions {
    margin-top: 16px;
  }

  .hero-inicio__metrics {
    margin-top: 18px;
    transform: none;
  }


  /* --------------------------------------------------------
     MINI SIMULADOR

     Conserva exactamente su tamaño.
     Solamente ocupa el extremo derecho de su columna.
     -------------------------------------------------------- */

  .hero-inicio__demo {
    justify-content: flex-end;
    padding-top: 16px;
  }

}


/* ==========================================================
   FIN CENFIC · RESPONSIVE DESKTOP GRANDE · FINAL
   ========================================================== */

/* CENFIC · AJUSTE HERO FULLHD V3 */

@media (min-width: 1600px) {

  /*
   * IZQUIERDA
   * Subimos todo el bloque para recuperar la fila
   * completa de las cuatro métricas.
   */
  .hero-inicio__content {
    transform: translateY(-58px);
  }


  /*
   * MINI SIMULADOR
   *
   * Antes:
   * 410px x scale(.80) = ~328px visuales.
   *
   * Ahora:
   * 438px x scale(.75) = ~329px visuales.
   *
   * Resultado:
   * prácticamente el MISMO ancho visible,
   * pero menos altura y menos saltos de línea.
   */
  .hero-inicio .app-mock {
    width: 438px;
    max-width: none;

    transform: scale(.75) !important;
    transform-origin: top right !important;
  }

  .hero-inicio__demo {
    padding-top: 12px;
    justify-content: flex-end;
  }

}

/* FIN CENFIC · AJUSTE HERO FULLHD V3 */