.logos-container {
  max-width: 100%;
  background-color: #f3b1c5;
  height: 60px; /* reduce altura para hacerlo más angosto */
  display: flex;           /* 🔹 Esto activa flexbox */
  justify-content: center; /* Centra horizontal */
  align-items: center;  
    
}

.logo-grande {
  width: 180px; /* reducido para que no sea tan ancho */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0px;

  margin-bottom: 35px;
  z-index: 3;
}

/* 🔹 Ajustes para pantallas medianas (tablets) */
@media (max-width: 768px) {
  .logos-container {
    height: 80px; /* menos alto */
  }

  .logo-grande {
    width: 250px; /* más pequeño */
    margin-bottom: 40px;
  }
}

/* 🔹 Ajustes para pantallas pequeñas (celulares) */
@media (max-width: 480px) {
  .logos-container {
    height: 60px; /* aún más bajo */
  }

  .logo-grande {
    width: 180px; /* bien compacto */
    margin-bottom: 20px;
  }
}

/* 🔥 SOLO este header tendrá fondo distinto */
.logos-container.logos-home {
    /* 👉 cambia color de fondo */
    background-color: #d9d9d9;

    background-size: cover;
    background-repeat: no-repeat;

    /* 👉 mover fondo arriba / abajo */
    background-position: center top;
    /* ejemplos:
       center center
       center bottom
       center -20px
       center 30px
    */
}

/* Logo */
.logos-home .logo-grande {
    max-height: 55px;
    width: auto;
    object-fit: contain;
    position: relative;

    /* 👉 mover logo */
    top: 0px;   /* sube/baja */
    left: 0px;  /* izquierda/derecha */
}

.logos-container.logos-home .logo-grande {
    max-height: 55px;
    width: auto;
    position: relative;

    /* 🔥 mueve solo el logo */
    top: 15px;   /* baja */
    /* top: -8px; sube */
}



/* ==== HEADER & NAV: aseguran su “capa” y flujo ===== */
.logos-container { position: relative; z-index: 2; }

.logo-header {
  filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.5));
}