/* ---------------- Base & Fuentes ---------------- */
@font-face {
  font-family: 'Aller';
  src: url('../fonts/Aller/Aller_Std_Bd.ttf') format('truetype');
}

:root{
  /* Alto de los logos del bloque derecho (ESR/EMA/Mantis) */
  --logo-h: clamp(30px, 2.8vw, 60px);   /* ~54–60px en 1920px */
  /* Alto del isologo izquierdo L&R */
  --brand-h: clamp(34px, 3.2vw, 64px);
  /* Separaciones */
  --gap: clamp(8px, 2vw, 20px);
}

*{ box-sizing: border-box; margin:0; padding:0; }

body{ font-family: 'Aller';}
body.no-scroll{ overflow:hidden; position:fixed; width:100%; }

/* ---------------- Header ---------------- */
header{
  width:100%;
  display:block;
  position:sticky;
  top:0; left:0; right:0;
  background:#fff;
  padding:15px 30px;
  z-index:100;
  box-shadow:0 0 0 rgba(0,0,0,0);
}

.header-container{
  display:flex;
  flex-direction:row;
  align-items:center;
  margin:0 auto;
  max-width:unset;
  /* (Quita bordes de debug) */
  /* border:1px solid #aaff00; */
}


/* Isologo izquierdo */
.logo{ height:var(--brand-h); width:auto; display:block; }

.cont1 {
  display: flex;
  align-items: center;
  height: var(--brand-h);
}

.logo-izquierdo {
  height: var(--brand-h);
  width: auto;
  display: block;
}
/* .logo-ema{
  
} */



/* ---------------- Navegación ---------------- */
nav#nav-menu{
  width:100%;
  display:block;          /* simplifica; no necesitamos grid aquí */
  /* border:1px solid teal; */
}

ul.menu{
  width:100%;
  display:flex;
  align-items:center;
  list-style:none;
  gap: var(--gap);
  flex:1;                 /* el menú crece y empuja a los logos a la derecha */
  /* border:1px solid skyblue; */
}

/* Bloque de enlaces (centro) */
div.sub-e{
  display:flex;
  flex-direction:row;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  flex:1 1 auto;          /* ocupa el espacio disponible, sin forzar 100% */
  /* border:1px solid indianred; */
}

.menu li a{
  text-decoration:none;
  color:#002855;
  padding:8px 16px;
  transition: color .3s, background-color .3s, transform .3s;
  border-radius:5px;
  position:relative;
  font-family:'Aller';
}

.menu li a::after{
  content:'';
  display:block;
  width:0; height:2px;
  background:#002855;
  transition: width .3s;
  position:absolute; bottom:0; left:50%;
  transform:translateX(-50%);
}

.menu li a:hover{
  color:#8bc34a;
  background-color:rgba(139,195,74,.1);
  transform:translateY(-2px);
}
.menu li a:hover::after{ width:100%; }

.menu li a:active{ background:#8bc34a; color:#fff; transform:scale(.98); }
.menu li a:focus{ outline:none; box-shadow:0 0 0 3px rgba(139,195,74,.5); }

/* .active{ color:#8bc34a; position:relative; }
.active::after{
  content:''; display:block; width:100%; height:2px; background:#002855;
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
} */

/* ---------------- Bloque de logos derecho ---------------- */
div.ema-esr-mantis{
  width: auto;
  height: auto;
  display:flex;
  align-items:center;
  gap: var(--gap);
  margin-left:auto;       /* empuja este bloque a la derecha */
  flex:0 0 auto;
}

/* No recortes */
.esr-img{ overflow:visible; }
a#mantis-link{
  position: relative;
  display: block;
  height: 30px;
  top: 0;
  padding: 0 0 0;
  background: none;
}
a#mantis-link::after{
  background: none;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* EMA: inerte (si así lo quieres) */

/* Mantis: limita ancho para que no se alargue de más en desktop */
/* .logo-derecho{
} */

/* ---------------- Hamburguesa (visible en móvil) ---------------- */
.hamburger{
  display:none;
  position:absolute; right:10px;
  flex-direction:column;
  cursor:pointer;
}
.hamburger span{
  height:3px; width:25px; background:#002855;
  margin:4px 0; border-radius:5px;
}

/* ---------------- Dropdown ---------------- */
.dropdown{ position:relative; }
.dropdown-menu{
  list-style:none; margin:0; padding:10px 0;
  position:absolute; top:100%; left:0;
  display:none;
  background:#fff;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
  z-index:1000;
}
.dropdown-menu li{ margin:0; }
.dropdown-menu a{
  text-decoration:none; padding:8px 16px; display:block;
  color:#002855; white-space:nowrap;
  transition: color .3s, background-color .3s;
}
.dropdown-menu a:hover{ background:rgba(139,195,74,.1); color:#8bc34a; }
.dropdown:hover .dropdown-menu{ display:block; }
.dropdown.open .dropdown-menu{ display:block; }


/* ---------------- Responsivo ---------------- */

/* 💻  ≥1440px (monitores grandes / 2K-4K)
   clamp ya pone límite, pero si quieres aún más compacto, baja un poco el tope: */
@media (min-width: 1920px){
  :root{
    --logo-h:  clamp(24px, 7vh, 200px);      /* 52–56px funciona muy bien en 1920 */
    --brand-h: clamp(24px,9vh, 200px); 
    --logo-ema:clamp(24px, 14vh, 200px);
    --logo-esr:clamp(24px, 6vh, 200px);
  }
  div.sub-e{
    /* border: solid red; */
    font-size: 1.5rem;
  }
  .logo-esr{
    height: var(--logo-esr);
    width: auto;
  }
  .logo-ema{
    width: var(--logo-ema);
    height: auto;
  }
  .logo-mantis{
    height: var(--logo-h);
    width: auto;
  }
}

@media (min-width: 1140px){
  :root{
    --logo-h:  clamp(24px, 5vh, 80px);
    --brand-h: clamp(24px, 9vh, 80px); 
    --logo-ema:clamp(24px, 14vh, 100px);
    --logo-esr:clamp(24px, 5vh, 100px);
  }
  .logo-izquierdo{
    height: var(--brand-h);
    width: auto;
  }
  .logo-esr{
    height: var(--logo-esr);
    width: auto;
  }
  .logo-ema{
    width: var(--logo-ema);
    height: auto;
  }
  .logo-mantis{
    height: var(--logo-h);
    width: auto;
  }
}
@media (min-width: 1050px) and (max-width: 1240px){
  :root{
    --logo-ema:clamp(24px, 10vh, 200px);
    --logo-esr:clamp(24px, 7vh, 200px);
    --brand-h:clamp(24px,6vh, 200px);
    --logo-h:clamp(24px,6vh, 200px);

  }
  div.sub-e {
    width: min-content;
    flex-direction: column;
    text-align: center;
  }
}
@media (min-width: 1440px) {
  :root{
    --brand-h:clamp(50px, 8vh, 250px);
    --logo-h:clamp(50px, 5vh, 250px);
    --logo-ema:clamp(50px, 13vh,250px);
    --logo-esr:clamp(50px, 10vh,250px);
    }
  .logo-izquierdo{
    height:var(--brand-h);
  }
  .logo-ema{
    height: var(--logo-ema);
  }
}
/* 📱  ≤810px (móvil, coincide con tu JS) */
@media (min-width: 350px) and (max-width: 1040px){
    :root{
    --logo-h: clamp(28px, 6vh, 200px);
    --brand-h: clamp(32px, 5.5vh, 200px);
    --logo-ema:clamp(32px,16vh, 200px);
    --logo-esr:clamp(32px, 10vh, 200px);
  }
  .hamburger{ display:flex;}
  /* Menú lateral deslizante */
  ul.menu{
    width: 100%;
    position:fixed;
    inset:8.7% 0 0 auto;               /* lado derecho */
    width:min(80vw, 360px);
    background:#fff;
    flex-direction:column;
    align-items:flex-start;
    padding:16px;
    gap:12px;
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y:auto;
    z-index: 999;
  }
  ul.menu.active{ transform: translateX(0); }
  div.sub-e{
    width: 100%;
    flex-direction: column;
    flex: none;
    font-size:large;
    text-align: center;
  }
  .active::after{
    background: none;
  }

  div.ema-esr-mantis{
    width: 100%;
    height: auto;
    flex-direction: column;
    margin-left: start;
  }
  .logo-izquierdo{
    height: var(--brand-h);
  }
  .logo-ema{
    height:var(--logo-ema);
  }
  .logo-esr{
    height: var(--logo-esr);
  }
  .logo-mantis{
    height: var(--logo-h);
  }}