/* ==========================================================================
   RAMCA - CONTROL EXCLUSIVO DEL LOGO DEL ENCABEZADO
   ==========================================================================

   ESTE ES EL ARCHIVO QUE DEBES EDITAR PARA CAMBIAR EL TAMANO DEL LOGO
   SUPERIOR IZQUIERDO EN TODO EL SITIO.

   MODIFICA SOLO ESTOS VALORES:

     --ramca-logo-width-desktop: 340px;   <-- computadora
     --ramca-logo-width-tablet:  285px;   <-- tablet / ventana mediana
     --ramca-logo-width-mobile:  220px;   <-- celular

   Ejemplos de escritorio:
     280px = pequeno
     340px = mediano/grande
     400px = grande

   IMPORTANTE: aqui el tamano se controla por ANCHO, no por alto.
   El alto se calcula automaticamente para no deformar el logo.
   ========================================================================== */

:root {
  --ramca-logo-width-desktop: 340px;
  --ramca-logo-width-tablet: 285px;
  --ramca-logo-width-mobile: 220px;
}

/* Evita que Flexbox comprima el logotipo cuando el menu ocupa espacio. */
.site-header .brand {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* Esta regla manda sobre cualquier regla previa de styles.css. */
.site-header .brand > img {
  width: var(--ramca-logo-width-desktop) !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
  display: block !important;
}

/* Ventanas medianas: el menu aun puede estar visible. */
@media (max-width: 1100px) {
  .site-header .brand > img {
    width: var(--ramca-logo-width-tablet) !important;
  }
}

/* En movil. */
@media (max-width: 600px) {
  .site-header .brand > img {
    width: var(--ramca-logo-width-mobile) !important;
  }
}