/* =====================================================================
   HEADER: layout (móvil 2 líneas / escritorio 1 línea) + dropdown overlay
   ===================================================================== */

.header{
  position:sticky;
  top:0;
  z-index:1000;
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent2) 100%);
  color:#fff;
}

.header-inner{
  display:grid;
  align-items:center;
  gap:12px;
  padding:8px 16px;
}

/* MOBILE: 2 líneas (arriba: hamburguesa+título+acciones, abajo: buscador) */
@media (max-width:980px){
  .header-inner{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "brand brand actions"
      "search search search";
    row-gap:8px;
    padding:8px 12px;
  }
}

/* DESKTOP: 1 línea (hamburguesa+título, buscador, acciones) */
@media (min-width:981px){
  .header-inner{
    grid-template-columns:auto minmax(280px,1fr) auto;
    grid-template-areas:"brand search actions";
    height:80px;
    padding:0 16px;
  }
}

.brand-row{grid-area:brand;display:flex;align-items:center;gap:12px;min-width:0}
.searchbox{grid-area:search;min-width:0}
.top-actions{grid-area:actions}

/* Densidad/centrado dentro del header */
.header .top-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  gap:12px;
}
.header .icon-link{padding:6px 8px}

/* Marca (solo dentro del header) */
.header .brand-link{font-size:44px;line-height:1;display:inline-block}
@media (max-width:980px){.header .brand-link{font-size:36px}}
.header .brand-tag{display:none}

/* Botón hamburguesa */
.cats-toggle{
  width:42px;
  height:42px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,.16);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.cats-toggle:hover{background:rgba(255,255,255,.24)}

.cats-toggle .bars{
  position:relative;
  width:22px;
  height:2px;
  background:currentColor;
  border-radius:999px;
  display:block;
}
.cats-toggle .bars::before,
.cats-toggle .bars::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:currentColor;
  border-radius:999px;
}
.cats-toggle .bars::before{top:-6px}
.cats-toggle .bars::after{top:6px}

/* Dropdown overlay: NO empuja el body */
.header .cats-wrap{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:100%;
  padding:0 16px 12px;
  background:linear-gradient(180deg, var(--accent2) 0%, var(--accent) 100%);
  z-index:999;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  max-height:60vh;
  overflow:auto;
}
.header.cats-open .cats-wrap{display:block}

/* Categorías: blanco, sin cajas */
.header .cats{
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  padding:6px 0;
}
.header .cats a{
  color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
}
.header .cats a:hover{text-decoration:underline}