/* =========================
   1. Layout de la página de logo
   ========================= */

.logo-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}

/* =========================
   2. Logo centrado
   ========================= */

.logo-maxi3 {
  display: block;
  max-width: 220px;      /* Ajusta según el tamaño de tu logo */
  width: 60vw;           /* Escala en móviles */
  height: auto;
}

/* =========================
   3. Tablets / móviles grandes
   ========================= */

@media only screen and (min-width: 481px) and (max-width: 768px) {
  .logo-maxi3 {
    max-width: 260px;
    width: 40vw;
  }
}

/* =========================
   4. Tablets Pro vertical
   ========================= */

@media only screen and (min-width: 769px) and (max-width: 1279px) and (orientation: portrait) {
  .logo-maxi3 {
    max-width: 300px;
    width: 30vw;
  }
}

/* =========================
   5. Laptops pequeñas / tablets horizontal
   ========================= */

@media only screen and (min-width: 769px) and (max-width: 1279px) and (orientation: landscape) {
  .logo-maxi3 {
    max-width: 340px;
    width: 25vw;
  }
}

/* =========================
   6. Escritorio
   ========================= */

@media only screen and (min-width: 1280px) {
  .logo-maxi3 {
    max-width: 380px;
    width: 20vw;
  }
}