/* ============================== */
/* 📱 Ajustes para laptops  */
/* Breakpoint: hasta 1199px       */
/* ============================== */

@media screen and (min-width: 900px) and (max-width: 1199px) {
  .categorias-container {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin: 80px auto 40px auto !important;
    max-width: 500px !important;
    width: 90% !important;
    padding: 30px 20px !important;
    background-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
    border-radius: 16px;
    float: none !important;
  }

  .contenedor-principal {
    margin: 60px auto !important;
    padding: 30px !important;
  }

    body {
    background-image: url("/static/img/p_fondo_responsive_unificado.png");
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    padding-top: 40px !important;
  }

  .logo-responsive {
    display: block !important;
    position: absolute !important;
    top: 24px !important;
    left: 75px !important;  /* Justo a la derecha del menú */
    width: 28px !important;
    height: auto !important;
    z-index: 100;
  }

  .logo-colibri-responsive {
    width: 135px !important;
    max-width: none !important;
    height: auto !important;
  }

  /* Asegurar que el logo grande de escritorio siga oculto */
  .logo-superior {
    display: none !important;
  }

  /* Oculta el botón de ayuda en responsive */
  .boton-ayuda {
    display: none !important;
  }
}