/* ==========================================================================
   FIX: LOGOS DE CERTIFICACIONES - SIEMPRE VISIBLES EN PRIMERA VISTA
   Los logos se posicionan cerca del bottom del viewport inicial (hero)
   NO son fijos - se van con el scroll
   ========================================================================== */

/* --- MÓVIL: Posicionar logos en el bottom del hero --- */
@media (max-width: 991px) {
  
  /* El hero ocupa el viewport y posiciona elementos relativos a él */
  #hero {
    position: relative !important;
    min-height: 100vh !important; /* Asegurar que ocupe toda la pantalla */
    min-height: 100dvh !important; /* Dynamic viewport height - mejor para móviles */
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Contenedor principal del hero */
  #hero > .container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }
  
  #hero > .container > .row {
    flex: 1 !important;
  }
  
  /* La columna izquierda del hero debe ocupar el espacio disponible */
  .hero-left-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: calc(100vh - 100px) !important;
    min-height: calc(100dvh - 100px) !important;
    padding-bottom: 15px !important;
  }
  
  /* El contenido superior (título y botón) */
  .hero-top-content {
    flex: 0 0 auto !important;
    padding-top: 20px !important;
  }
  
  /* El contenido inferior (logos) - se empuja hacia abajo */
  .hero-bottom-content {
    flex: 0 0 auto !important;
    margin-top: auto !important; /* Empuja hacia el fondo */
    margin-bottom: 10px !important; /* 10px desde el bottom del viewport */
    padding: 0 10px !important;
  }
  
  /* Los logos con fondo para mejor visibilidad */
  .hero-logos {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 10px 15px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Tamaño de logos */
  .hero-logos .hero-cert-img {
    height: 50px !important;
    width: auto !important;
    max-width: 30% !important;
    object-fit: contain !important;
  }
  
  /* Ocultar el subtítulo en móvil si existe */
  .hero-bottom-content .display-m {
    display: none !important;
  }
}

/* --- TABLETS (landscape y pantallas medianas) --- */
@media (max-width: 991px) and (min-height: 600px) {
  .hero-logos .hero-cert-img {
    height: 55px !important;
  }
}

/* --- PANTALLAS MUY PEQUEÑAS (iPhone SE, etc) --- */
@media (max-width: 991px) and (max-height: 700px) {
  .hero-left-col {
    min-height: calc(100vh - 80px) !important;
    min-height: calc(100dvh - 80px) !important;
  }
  
  .hero-logos .hero-cert-img {
    height: 45px !important;
  }
  
  .hero-bottom-content {
    margin-bottom: 8px !important;
  }
}

/* --- DESKTOP: Mantener comportamiento original --- */
@media (min-width: 992px) {
  .hero-logos {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

@media (max-width: 991px) {
    .hero-logos {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        background: rgb(255 255 255 / 0%) !important;
        padding: 10px 15px !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 10px rgb(0 0 0 / 0%) !important;
    }
}

@media (max-width: 991px) and (max-height: 700px) {
    .hero-logos .hero-cert-img

 {
        height: 65px !important;
    }
}

@media (max-width: 991px) {
.hero-logos .hero-cert-img {
    height: 66px !important;
    width: auto !important;
    max-width: 46% !important;
    object-fit: contain !important;
}
}