/* ===== Base (≥1200px) ===== */
.header-row,.header-container{align-items:center}
.header-column:first-child{flex:0 1 clamp(360px,38vw,660px)!important;max-width:clamp(360px,38vw,660px)!important;min-width:280px!important}
.header-logo{height:80px!important;width:100%!important;display:block!important}
.header-logo a{display:block!important;width:100%!important;height:100%!important;background:transparent left center/contain no-repeat!important}
html[lang="es"] .header-logo a{background-image:url("https://campus.paho.org/sites/default/files/header-campusvirtual-es.jpg")!important}
html[lang="en"] .header-logo a{background-image:url("https://campus.paho.org/sites/default/files/header-campusvirtual-en.jpg")!important}
html[lang="pt-br"] .header-logo a{background-image:url("https://campus.paho.org/sites/default/files/header-campusvirtual-pt.jpg")!important}
html[lang="fr"] .header-logo a{background-image:url("https://campus.paho.org/sites/default/files/header-campusvirtual-fr.jpg")!important}
.header-logo img{display:none!important}
/* La columna derecha debe poder encoger sin romper layout */
.header-column+.header-column{flex:1 1 auto;min-width:0}

/* ===== Rango conflictivo: 992–1180px (desktop estrecho) ===== */
@media (max-width:1180px) and (min-width:992px){
  .header-column:first-child{
    flex-basis:min(660px, max(300px, calc(100vw - 520px))) !important;
    max-width:min(660px, max(300px, calc(100vw - 520px))) !important;
  }
  .header-logo{height:72px!important}
}

/* ===== 992–1199px (lg general) ===== */
@media (max-width:1199.98px){
  .header-logo{height:72px!important}
}

/* ===== 768–991px (md) — ya suele estar hamburguesa ===== */
@media (max-width:991.98px){
  .header-column:first-child{flex:0 0 clamp(280px,52vw,520px)!important;max-width:clamp(280px,52vw,520px)!important}
  .header-logo{height:64px!important}
}

/* ===== 576–767px (sm) ===== */
@media (max-width:767.98px){
  .header-column:first-child{flex:0 0 clamp(240px,62vw,440px)!important;max-width:clamp(240px,62vw,440px)!important}
  .header-logo{height:60px!important}
}

/* ===== <576px (xs) ===== */
@media (max-width:575.98px){
  .header-column:first-child{flex:0 0 clamp(240px,78vw,420px)!important;max-width:clamp(240px,78vw,420px)!important}
  .header-logo{height:64px!important}
  .header-btn-collapse-nav{margin-left:auto}
}

/* ===== Ultra-compactos (≤360px) ===== */
@media (max-width:360px){
  .header-column:first-child{flex:0 0 clamp(220px,82vw,360px)!important;max-width:clamp(220px,82vw,360px)!important}
  .header-logo{height:60px!important}
}

/* ===== Sticky (ajusta si tu clase es otra) ===== */
.sticky-header .header-logo{height:56px!important}

/* Compactar header en móviles */
@media (max-width:575.98px){

  /* 1) Quitar alturas/paddings extra del header */
  .header-body,
  .header-container,
  .header-row{
    min-height:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .header-column,
  .header-logo{
    margin:0!important;
    padding:0!important;
  }
  /* A veces Porto agrega margen vertical al logo */
  .header-logo{height:40px!important}

  /* 2) Logo 40px alto, ocupa todo el ancho menos el botón hamburguesa */
  .header-column:first-child{
    flex:0 0 calc(100vw - 88px)!important;   /* ajusta 88px si tu botón es más ancho/angosto */
    max-width:calc(100vw - 88px)!important;
    min-width:200px!important;
  }
  .header-logo{width:100%!important}
  .header-logo a{
    display:block!important;
    width:100%!important;
    height:40px!important;
    background-position:left center!important;
    background-repeat:no-repeat!important;
    background-size:contain!important; /* evita recortes */
  }

  /* 3) Empujar el botón hamburguesa a la derecha y sin aportar alto extra */
  .header-btn-collapse-nav{
    margin-left:auto!important;
    align-self:center!important;
  }
}