/* =========================================================================
   Cabecera EnvaPack, esquema de dos bandas.
   2026-08-28.

   Banda 1 (.ep-bar): logo + menu principal + buscador + idioma + redes.
                      Fija con position:sticky, sin JavaScript.
   Banda 2 (.ep-banner): main banner 1140x120 de AdRotate. Se va con el scroll
                      y vuelve al subir.

   Sustituye a .top_bar, .container-banner, #container-banner-sticky y
   .nav_wrapper del esquema anterior. Los estilos viejos de esas piezas
   estaban repartidos entre style.css y Apariencia > CSS adicional; los del
   personalizador se retiraron porque se imprimen despues del tema y ganan
   siempre. Todo lo de la cabecera vive ahora en este archivo.

   Se conservan a proposito los ganchos del tema padre: .main_nav,
   #menu-icon, .menu-top-container, .sf-menu y #primary-menu. El script
   assets/js/script.js del tema padre depende de ellos para el menu movil.
   ========================================================================= */

:root{
  --ep-alto-barra:72px;
  --ep-tinta:#14153A;
  --ep-azul:#2E3178;
  --ep-azul-claro:#3F44A8;
  --ep-rojo:#C0302F;
  --ep-filete:#DFE1EC;
  --ep-papel:#F4F5F9;
  --ep-gris:#6B6E8C;
}

/* Las anclas de los articulos no pueden quedar debajo de la barra fija */
html{scroll-padding-top:calc(var(--ep-alto-barra) + 12px)}

.ep-visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.ep-skip{position:absolute;left:-9999px;top:0}
.ep-skip:focus{
  left:12px;top:12px;z-index:1000;background:#fff;color:var(--ep-tinta);
  padding:10px 14px;border:2px solid var(--ep-rojo);border-radius:2px;
}

/* ---------- Banda 1: la barra fija ---------- */
.ep-bar{
  position:sticky;top:0;z-index:900;
  background:#fff;
  border-bottom:3px solid var(--ep-azul);
}
/* Con la barra de administracion de WordPress la fija no puede ir a top:0 */
body.admin-bar .ep-bar{top:32px}
@media screen and (max-width:782px){body.admin-bar .ep-bar{top:46px}}

.ep-bar__inner{
  position:relative;
  max-width:1360px;margin:0 auto;padding:0 20px;
  min-height:var(--ep-alto-barra);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}

.ep-bar__logo{flex:0 0 auto;display:block;line-height:0}
.ep-bar__logo img{width:220px;height:auto;display:block;max-width:100%}

/* ---------- Menu principal ---------- */
.ep-bar .main_nav{
  flex:1 1 auto;min-width:0;
  background:none;border:0;border-top:0;
}
.ep-bar .menu-top-container{background:none}

.ep-bar #primary-menu{
  display:flex;align-items:center;justify-content:flex-end;
  flex-wrap:nowrap;gap:2px;
  margin:0;padding:0;list-style:none;float:none;
}
.ep-bar #primary-menu > li{
  display:block;float:none;margin:0;background:none;position:relative;
}
.ep-bar #primary-menu > li > a{
  display:block;white-space:nowrap;
  padding:10px 8px;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(12.5px, 0.95vw, 14.5px);
  font-weight:600;line-height:1.2;letter-spacing:-.005em;
  color:var(--ep-tinta);text-decoration:none;
  border:0;border-bottom:3px solid transparent;
  transition:color .15s, border-color .15s;
}
.ep-bar #primary-menu > li > a:hover,
.ep-bar #primary-menu > li > a:focus-visible,
.ep-bar #primary-menu > li.current-menu-item > a,
.ep-bar #primary-menu > li.current-menu-ancestor > a{
  color:var(--ep-rojo);border-bottom-color:var(--ep-rojo);background:none;
}
.ep-bar #primary-menu > li > a:focus-visible{outline:2px solid var(--ep-rojo);outline-offset:-2px}

/* La flecha de "tiene submenu" venia en blanco y a 16px del tope, medidas del
   menu rojo anterior. Sobre fondo blanco y en una barra de 72px no servia. */
.ep-bar #primary-menu > li.menu-item-has-children > a{padding-right:20px}
.ep-bar #primary-menu > li.menu-item-has-children > a:after{
  content:"\f107";font:normal normal normal 12px/1 FontAwesome;
  position:absolute;right:7px;top:50%;margin-top:-6px;
  color:currentColor;border:0;
}

/* Submenus. Superfish los muestra; aqui solo se colocan y se visten. */
.ep-bar #primary-menu .sub-menu{
  position:absolute;top:100%;left:0;
  min-width:250px;margin:0;padding:0;list-style:none;
  background:#fff;
  border:1px solid var(--ep-filete);
  border-top:3px solid var(--ep-rojo);
  border-radius:0 0 4px 4px;
  z-index:20;
}
.ep-bar #primary-menu .sub-menu:before{display:none}
.ep-bar #primary-menu .sub-menu li{
  display:block;width:100%;background:none;border-bottom:1px solid var(--ep-papel);
}
.ep-bar #primary-menu .sub-menu li:last-child{border-bottom:0}
.ep-bar #primary-menu .sub-menu li a{
  display:block;padding:11px 14px;
  font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:500;
  color:var(--ep-tinta);background:none;white-space:normal;
}
.ep-bar #primary-menu .sub-menu li a:hover{background:var(--ep-papel);color:var(--ep-rojo)}

/* ---------- Utilidades: buscador, idioma, redes ---------- */
.ep-bar__utils{
  flex:0 0 auto;margin-left:auto;
  display:flex;align-items:center;gap:10px;
}

.ep-search__toggle{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;cursor:pointer;
  background:none;color:var(--ep-gris);
  border:1px solid var(--ep-filete);border-radius:2px;
  font-size:15px;line-height:1;
}
.ep-search__toggle:hover{color:var(--ep-azul);border-color:var(--ep-azul)}
.ep-search__toggle:focus-visible{outline:2px solid var(--ep-rojo);outline-offset:2px}

.ep-search{
  display:none;align-items:center;
  background:#fff;border:1px solid var(--ep-filete);border-radius:2px;
}
.ep-search.is-open{display:flex}
.ep-search input[type="search"]{
  border:0;background:transparent;outline:0;
  padding:8px 10px;width:200px;max-width:46vw;
  font-family:'Open Sans',sans-serif;font-size:14px;color:var(--ep-tinta);
}
.ep-search input[type="search"]::placeholder{color:var(--ep-gris);opacity:1}
.ep-search button{
  border:0;cursor:pointer;
  background:var(--ep-azul);color:#fff;
  padding:9px 12px;font-size:14px;line-height:1;
}
.ep-search button:hover{background:var(--ep-azul-claro)}

/* El buscador vive siempre detras de su icono y se abre por debajo de la
   barra. Se probo con el campo desplegado en linea a partir de 1360 px y no
   cabe: con el logo, los siete items del menu, idioma y redes, el campo se
   lleva 215 px que no hay, y la fila se partia en dos. */
.ep-search.is-open{
  position:absolute;right:20px;top:100%;margin-top:8px;z-index:40;
  border-color:var(--ep-azul);
}

.ep-lang{display:flex;align-items:center;gap:3px;margin:0;padding:0;list-style:none}
.ep-lang li{margin:0;display:block}
.ep-lang li a{
  display:block;padding:6px 8px;border-radius:2px;
  font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;
  color:var(--ep-gris);text-decoration:none;
}
.ep-lang li a:hover{color:var(--ep-azul);background:var(--ep-papel)}
.ep-lang .current-lang a,
.ep-lang .current-lang a:hover{background:var(--ep-azul);color:#fff}
.ep-lang img{display:none}

.ep-social{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.ep-social li{margin:0;display:block}
.ep-social a{display:block;padding:3px;font-size:19px;line-height:1;color:var(--ep-gris)}
.ep-social a:hover{color:var(--ep-azul)}

/* El tema trae .single-post{padding-top:10px} sobre el body. Con la cabecera a
   ancho completo eso dejaba una franja blanca de 10 px encima de la barra al
   abrir un articulo (se iba sola al hacer scroll, porque sticky se pega a 0).
   El aire se devuelve donde corresponde: dentro del contenido. */
.single-post{padding-top:0}
.single-post #content_wrapper{padding-top:10px}
/* ---------- Banda 2: el main banner ---------- */
.ep-banner{background:#fff;border-bottom:1px solid var(--ep-filete)}
.ep-banner__inner{
  max-width:1180px;margin:0 auto;padding:8px 20px;
  display:flex;align-items:center;justify-content:center;
}
.ep-banner__inner .g,
.ep-banner__inner .g-single{max-width:100%;width:100%;text-align:center}
/* max-width en vez del width:1140px fijo de antes: era la causa de los 143 px
   de desbordamiento horizontal entre 768 y 1199 px de ancho.
   El aspect-ratio reserva el hueco antes de que cargue el anuncio (CLS). */
.ep-banner__inner img{
  display:block;margin:0 auto;
  width:1140px;max-width:100%;height:auto;
  aspect-ratio:1140 / 120;
}

/* ---------- Boton de menu movil ---------- */
.ep-bar #menu-icon{
  display:none;
  align-items:center;justify-content:center;
  width:44px;height:40px;flex:0 0 auto;
  padding:0;margin:0;
  background:var(--ep-azul);color:#fff;
  border-radius:2px;font-size:20px;line-height:1;
  text-align:center;text-decoration:none;
}
.ep-bar #menu-icon:hover,
.ep-bar #menu-icon.active{background:var(--ep-rojo);color:#fff}

/* =========================================================================
   Comportamiento por ancho
   ========================================================================= */

/* 900 a 1199 px: el menu no cabe al lado del logo (a estos anchos el
   contenedor Bootstrap del sitio mide 970 o 750 px). Baja a su propia linea
   y se desactiva la barra fija, que aqui se comeria demasiada pantalla. */
@media (max-width:1279px){
  .ep-bar{position:static}
  .ep-bar__inner{padding-bottom:4px}
  .ep-bar .main_nav{flex:1 1 100%;order:3}
  .ep-bar #primary-menu{justify-content:flex-start;flex-wrap:wrap;gap:0}
  .ep-bar #primary-menu > li > a{font-size:14px;padding:8px 10px}
  .ep-social{display:none}
  .ep-search.is-open{right:20px}
}

/* Menos de 900 px: manda el modo movil del tema padre (script.js cambia
   .sf-menu por .mobile-menu y engancha el clic de #menu-icon). Aqui la barra
   es corta, asi que si conviene dejarla fija. */
@media (max-width:899px){
  :root{--ep-alto-barra:60px}
  .ep-bar{position:sticky;top:0}
  .ep-bar__inner{min-height:60px;gap:10px;padding:0 14px 0 14px;flex-wrap:nowrap}
  .ep-bar__logo img{width:180px}
  .ep-bar #menu-icon{display:flex;order:4}
  .ep-bar .main_nav{flex:0 0 auto;order:3;position:static}
  .ep-bar__utils{gap:6px}
  .ep-search__toggle{width:40px;height:40px}

  /* El cajon del menu se despliega por encima del contenido, no empujandolo.
     slideToggle de jQuery sigue funcionando igual sobre este contenedor. */
  .ep-bar .resp_menu .menu-top-container{
    position:absolute;left:0;right:0;top:100%;
    width:auto;background:var(--ep-azul);z-index:60;
    border-top:3px solid var(--ep-rojo);
  }
  .ep-bar .resp_menu .mobile-menu{
    display:block;width:100%;margin:0;padding:0;list-style:none;
  }
  .ep-bar .resp_menu .mobile-menu li{display:block;width:100%;border-bottom:1px solid rgba(255,255,255,.12)}
  .ep-bar .resp_menu .mobile-menu li a{
    display:block;padding:12px 16px;background:none;
    color:#fff;font-family:'Montserrat',sans-serif;font-size:15px;font-weight:600;
    border:0;white-space:normal;
  }
  .ep-bar .resp_menu .mobile-menu li a:hover{background:rgba(255,255,255,.10);color:#fff}
  /* Los submenus se muestran ya desplegados: en tactil no hay hover y
     Superfish no abre nada. Misma solucion que ya tenia el tema. */
  .ep-bar .resp_menu .mobile-menu .sub-menu{
    position:static!important;display:block!important;
    min-width:0;border:0;background:transparent;border-radius:0;
  }
  .ep-bar .resp_menu .mobile-menu .sub-menu li{border-bottom:0}
  .ep-bar .resp_menu .mobile-menu .sub-menu li a{
    padding:9px 16px 9px 32px;font-size:13.5px;font-weight:500;opacity:.9;
  }
  .ep-bar #primary-menu > li.menu-item-has-children > a:after{display:none}

  .ep-banner__inner{padding:6px 10px}
}

@media (max-width:479px){
  .ep-bar__logo img{width:150px}
  .ep-search input[type="search"]{width:160px}
}

@media (prefers-reduced-motion:reduce){
  .ep-bar #primary-menu > li > a{transition:none}
}