/* =========================================================================
   cabecera — La cabecera y su menú.

   Tramo 2 de 14 de la hoja que antes era una sola (`tendencias.css`, 4 671
   líneas). Los tramos son CONTIGUOS y se cargan en este mismo orden: el
   orden de carga es la cascada, así que mover una hoja de sitio puede
   cambiar qué regla gana sin que nada falle. Si hace falta reordenar, se
   comprueba con `npm run huella` y no razonando.
   ========================================================================= */

/* --------------------------------------------------------------------------
   4. Encabezado
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(11, 11, 13, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--linea);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
}

.marca { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.marca img { height: 26px; width: auto; }
@media (min-width: 900px) { .marca img { height: 30px; } }

.marca__seccion {
  display: none;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .9rem;
  letter-spacing: .04em;
  color: var(--rojo-claro);
  padding-left: 12px;
  border-left: 1px solid var(--linea-fuerte);
}
@media (min-width: 640px) { .marca__seccion { display: block; } }

.nav { display: none; margin-left: auto; gap: 4px; }
/* 1450 y no 1000: medido con las métricas reales de Lato Bold, la fila con
   los once apartados necesita ~1416px aun apretada. Encenderla antes era
   prometer un menú que no cabe — y lo que no cabe se parte en dos renglones
   y rompe el alto fijo de la fila. Por debajo manda el cajón, que los lleva
   todos. */
@media (min-width: 1550px) { .nav { display: flex; } }

.nav a {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--texto-2);
  border: 1px solid transparent;
  transition: color .18s, background .18s, border-color .18s;
}
.nav a:hover { color: var(--texto); background: var(--sup-2); border-color: var(--linea); }
.nav a[aria-current="page"] { color: var(--texto); border-color: var(--linea-fuerte); }

/* Notas propias: el único apartado escrito por nosotros, así que va marcado
   en rojo y no como un enlace más de la fila. */
.nav a.nav__propias {
  color: var(--texto);
  border-color: var(--rojo);
}
.nav a.nav__propias:hover,
.nav a.nav__propias--activa {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
}
.cajon__propias { color: var(--rojo-claro); }
/* Gaceta: beneficio de cuenta, en oro para que resalte en el menú. */
.nav a.nav__gaceta { color: var(--oro-luz); border-color: var(--oro); }
.nav a.nav__gaceta:hover,
.nav a.nav__gaceta--activa { background: var(--oro); border-color: var(--oro); color: var(--negro); }

.cabecera__acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 1550px) { .cabecera__acciones { margin-left: 0; } }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .85rem;
  letter-spacing: .02em;
  transition: transform .16s, background .18s, color .18s, border-color .18s;
}
.boton:active { transform: scale(.97); }
/* Un botón nunca debe estirarse para llenar su contenedor: dentro de un grid
   o un flex en columna, el estiramiento por defecto lo convierte en un bloque
   enorme con el texto flotando. Se fija aquí para no repetir el arreglo en
   cada sitio donde aparezca un botón. */
.boton { align-self: center; }

.boton--rojo { background: var(--rojo); color: #fff; box-shadow: var(--sombra-rojo); }
.boton--rojo:hover { background: var(--rojo-claro); }
.boton--claro { background: var(--texto); color: var(--negro); }
.boton--claro:hover { background: #fff; }
.boton--fantasma { border: 1px solid var(--linea-fuerte); color: var(--texto); }
.boton--fantasma:hover { background: var(--sup-2); border-color: var(--texto-3); }
.boton--oro { background: var(--oro-luz); color: var(--negro); }

.icono-boton {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  display: grid; place-items: center;
  color: var(--texto-2);
  transition: background .18s, color .18s, border-color .18s;
}
.icono-boton:hover { background: var(--sup-2); color: var(--texto); border-color: var(--linea-fuerte); }
.icono-boton svg { width: 18px; height: 18px; }

.menu-movil { display: grid; }
/* El cajón NO es sólo de móvil: es el que sostiene la navegación mientras el
   menú completo no quepa. Si se escondiera antes, «Analítica» y «Gaceta»
   quedarían sin ninguna puerta en un portátil de 1366. */
@media (min-width: 1550px) { .menu-movil { display: none; } }

/* Panel de navegación móvil */
.cajon {
  position: fixed; inset: 64px 0 0;
  z-index: 89;
  background: var(--negro);
  padding: var(--gutter);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s, transform .22s, visibility .22s;
  overflow-y: auto;
}
.cajon[data-abierto="true"] { opacity: 1; transform: none; visibility: visible; }
.cajon a {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 2rem;
  padding: 14px 0;
  border-bottom: 1px solid var(--linea);
}
.cajon a:hover { color: var(--rojo-claro); }