/* =====================================================================
   Menú superior (propuesta B · Azul INEC) · inec.com · todas las páginas, ES y PT
   Se carga en comunes/paginas/head.php justo después de lateral_2.css.
   Para volver al diseño anterior basta con quitar esa línea.
   No cambia textos, enlaces ni formularios de header.php: solo su aspecto.
   Usa el logo transparente: súbelo a /imagenes/varias/logo-inec.png
   Colores de la guía de INEC: amarillo #FCCB28 · azul #1B2732
   Iconos: Phosphor Icons (bold), licencia MIT.
   ===================================================================== */

#header{
  --ui:"Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --amarillo:#FCCB28;
  --azul:#1B2732;
  --texto:#1B2732;
}

/* --- Aviso de cookies: compacto, blanco, botón en la misma línea --- */
#header .noticebar{
  height:auto;box-sizing:border-box;margin:0;padding:8px 16px 10px;
  background:#ffffff;border:0;border-bottom:1px solid #e3e6ea;
  color:#4a5560;font:400 12px/1.45 var(--ui);
}
#header .noticebar .noticebar1{font:600 13px/1.45 var(--ui);color:var(--texto);text-decoration:none}
#header .noticebar .noticebar-content br{display:none}
#header .noticebar .noticebar-content a:link,
#header .noticebar .noticebar-content a:visited{font:400 12px/1.45 var(--ui);color:var(--texto);text-decoration:underline;text-underline-offset:2px}
#header .noticebar #cerrarnoticebar{
  display:inline-block;margin-left:12px;padding:6px 20px;border-radius:999px;
  background:var(--amarillo);color:var(--azul);font:600 12.5px/1.2 var(--ui);
  text-decoration:none;cursor:pointer;transition:filter 150ms ease, transform 120ms ease;
}
#header .noticebar #cerrarnoticebar:hover{filter:brightness(1.05);color:var(--azul)}
#header .noticebar #cerrarnoticebar:active{transform:scale(.97)}

/* --- Estructura: tres bandas apiladas --- */
#header .cabecera-todo{
  display:flex;flex-direction:column;width:auto;overflow:visible;
}

/* --- Banda principal: logo · buscador · cliente · cesta --- */
#header #cabecera{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  grid-template-areas:"logo search user cart";
  align-items:center;
  column-gap:28px;
  height:auto;
  min-height:var(--alto-principal);
  box-sizing:border-box;
  padding:0 28px;
  background:var(--fondo-principal);
}
#header #cabecera > *{float:none;margin:0}
#header .la-esencia,
#header .sellos{display:none}

/* Logo nuevo (el GIF antiguo queda invisible pero sigue siendo el enlace y su texto alternativo) */
#header .imagen-inicio{grid-area:logo;width:auto;height:auto;background:none}
#header .imagen-inicio a{display:block;background:url('../imagenes/varias/logo-inec.png') left center/contain no-repeat}
#header .imagen-inicio img{display:block;width:176px;height:60px;opacity:0}

/* Buscador: una sola pieza con la etiqueta dentro */
#header .busqueda{
  grid-area:search;justify-self:center;width:100%;max-width:470px;height:auto;
  padding:0;border:0;background:none;text-align:left;
}
#header .busqueda form{
  display:flex;align-items:center;height:46px;padding:0 5px 0 18px;box-sizing:border-box;
  font-size:0;border-radius:999px;background:var(--fondo-buscador);
  border:1px solid var(--borde-buscador);
  transition:box-shadow 150ms ease, border-color 150ms ease;
}
#header .busqueda form:focus-within{border-color:var(--amarillo);box-shadow:0 0 0 3px rgba(252,203,40,.45)}
#header .busqueda .texto-buscar{margin-right:10px;font:600 13px/1 var(--ui);color:#5b6672;white-space:nowrap}
#header .busqueda input[type="text"]{
  flex:1 1 auto;min-width:0;width:auto;height:36px;margin:0;padding:0;
  border:0;background:transparent;outline:none;color:var(--texto);font:400 14px/1 var(--ui);
}
#header .busqueda .boton-text-busqueda{
  flex:none;width:38px;height:38px;margin:0;padding:0;border:0;border-radius:50%;
  background:var(--amarillo) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%231B2732"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"/></svg>') center/18px no-repeat;
  color:transparent;font-size:0;cursor:pointer;
  transition:filter 150ms ease, transform 120ms ease;
}
#header .busqueda .boton-text-busqueda:hover{filter:brightness(1.06)}
#header .busqueda .boton-text-busqueda:active{transform:scale(.94)}
#header .busqueda .boton-text-busqueda:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* Datos del cliente (solo con sesión) */
#header .usuario{grid-area:user;width:auto;height:auto;padding:0}
#header .info-usuario{float:none;height:auto;font:400 11.5px/15px var(--ui);color:var(--texto-suave)}
#header .info-usuario .e-articulos-cesta{font:inherit;color:var(--texto-fuerte)}

/* Cesta: icono + "Mi pedido" + artículos y total, todo el bloque es clicable */
#header .cesta-e,
#header .cesta-p{
  grid-area:cart;position:relative;width:auto;height:auto;
  display:grid;grid-template-columns:auto auto auto auto;
  grid-template-areas:"lang icon title title" "lang icon count total";
  column-gap:8px;row-gap:1px;align-items:center;background:none;
}
#header #idioma{
  grid-area:lang;position:relative;z-index:2;display:flex;align-items:center;
  width:auto;margin:0 14px 0 0;font-size:0;float:none;
}
#header #img_idioma_es_activ,
#header #img_idioma_pt_activ{display:none}
#header .idioma_inactiv{
  display:flex;align-items:center;gap:6px;margin:0;padding:6px 11px;border-radius:999px;
  border:1px solid var(--borde-idioma);text-decoration:none;
}
#header .idioma_inactiv img{display:block;width:16px;height:auto;border-radius:2px}
#header #idioma_pt_inactiv::after{content:"PT"}
#header #idioma_es_inactiv::after{content:"ES"}
#header .idioma_inactiv::after{font:600 12px/1 var(--ui);color:var(--texto-fuerte)}
#header .idioma_inactiv:hover{border-color:var(--amarillo)}
#header .img-pedido{
  grid-area:icon;width:42px;height:42px;margin:0;border-radius:12px;
  background:var(--fondo-icono-cesta) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%23FCCB28"><path d="M241.55,64.74A12,12,0,0,0,232,60H60.23L51.56,28.79A12,12,0,0,0,40,20H20a12,12,0,0,0,0,24H30.88l34.3,123.49a28.09,28.09,0,0,0,27,20.51H191a28.09,28.09,0,0,0,27-20.51l25.63-92.28A12,12,0,0,0,241.55,64.74ZM194.8,161.07A4,4,0,0,1,191,164H92.16a4,4,0,0,1-3.85-2.93L66.9,84H216.21ZM108,220a20,20,0,1,1-20-20A20,20,0,0,1,108,220Zm104,0a20,20,0,1,1-20-20A20,20,0,0,1,212,220Z"/></svg>') center/22px no-repeat;
}
#header .mi-pedido{grid-area:title;width:auto;margin:0;padding:0}
#header .mi-pedido a{font:700 13.5px/1.2 var(--ui);letter-spacing:0;color:var(--texto-fuerte);text-decoration:none}
#header .mi-pedido a::after{content:"";position:absolute;inset:-6px;z-index:1}
#header .cesta-e:hover .mi-pedido a,
#header .cesta-p:hover .mi-pedido a{text-decoration:underline;text-decoration-color:var(--amarillo);text-decoration-thickness:2px;text-underline-offset:3px}
#header .articulos-cesta,
#header .total-cesta{width:auto;padding:0;font-size:0}
#header .articulos-cesta{grid-area:count}
#header .total-cesta{grid-area:total}
#header .articulos-cesta .n-articulos-cesta{font:400 12px/1.3 var(--ui);color:var(--texto-suave)}
#header .total-cesta .e-articulos-cesta{font:400 12px/1.3 var(--ui);color:var(--texto-fuerte)}
#header .total-cesta .e-articulos-cesta b{font-weight:700;color:var(--total)}

/* --- Banda de enlaces --- */
#header #pedido{
  order:var(--orden-enlaces);
  box-sizing:border-box;height:var(--alto-enlaces);border:0;
  background:var(--fondo-enlaces) none;padding:0 22px;
}
#header #pedido .enlaces-shop{display:flex;align-items:stretch;height:100%;margin:0;padding:0;list-style:none;text-align:left}
#header #pedido .enlaces-shop li{
  float:none;display:flex;align-items:center;width:auto;max-width:none;height:auto;
  margin:0;padding:0;border:0;color:var(--texto-enlaces);
}
#header #pedido .menu-link-shop{display:flex;height:100%}
#header #pedido .menu-link-shop a{
  display:flex;align-items:center;gap:6px;width:auto;height:100%;padding:0 12px;
  font:var(--peso-enlaces) 12.5px/1 var(--ui);color:var(--texto-enlaces);
  text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 -2px 0 transparent;transition:box-shadow 150ms ease, color 150ms ease;
}
#header #pedido .menu-link-shop a:hover{color:var(--texto-enlaces-hover);box-shadow:inset 0 -2px 0 var(--subrayado-enlaces)}
#header #pedido .menu-link-shop a:focus-visible{outline:2px solid var(--subrayado-enlaces);outline-offset:-4px}
#header #pedido .menu-link-shop img{display:block;filter:var(--filtro-icono-enlaces)}
#header #pedido .enlaces-shop li.su-precio{margin-left:auto;padding:0 12px;font:400 12px/1 var(--ui);color:var(--texto-enlaces)}

/* --- Banda de marcas --- */
#header #menu{
  order:3;display:block;height:auto;box-sizing:border-box;padding:7px 22px;
  background:var(--fondo-marcas) none;border-top:var(--linea-marcas);border-bottom:1px solid #e3e6ea;
}
#header #menu ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
#header #menu .menu-enlaces-marca,
#header #menu #enlace-marca-L,
#header #menu #enlace-marca-R{float:none;height:auto;margin:0;padding:0;border:0;background:none}
#header #menu .menu-enlaces-marca a{
  display:block;padding:7px 16px;border-radius:999px;
  font:600 12.5px/1.2 var(--ui);color:var(--texto);text-decoration:none;
  background:var(--fondo-pastilla);border:1px solid var(--borde-pastilla);
  transition:background-color 150ms ease, border-color 150ms ease;
}
#header #menu .menu-enlaces-marca a:hover{background:#ffffff;border-color:var(--amarillo);color:var(--azul)}
#header #menu .menu-enlaces-marca a:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  #header *{transition:none}
  #header .noticebar #cerrarnoticebar:active,
  #header .busqueda .boton-text-busqueda:active{transform:none}
}

/* ===== Colores y medidas de esta versión: banda azul, banda amarilla, marcas en blanco ===== */
#header{
  --alto-principal:100px;
  --fondo-principal:#1B2732;
  --fondo-buscador:#ffffff; --borde-buscador:#ffffff;
  --texto-suave:#a9b6c2; --texto-fuerte:#ffffff; --total:var(--amarillo);
  --borde-idioma:rgba(255,255,255,.28);
  --fondo-icono-cesta:rgba(255,255,255,.08);
  --orden-enlaces:2; --alto-enlaces:42px; --fondo-enlaces:var(--amarillo);
  --texto-enlaces:#1B2732; --texto-enlaces-hover:#000000; --subrayado-enlaces:#1B2732;
  --peso-enlaces:600; --filtro-icono-enlaces:none;
  --fondo-marcas:#ffffff; --linea-marcas:0;
  --fondo-pastilla:#f4f5f7; --borde-pastilla:#f4f5f7;
}