/* ══════════════════════════════════════════════════════════════════
   LA CABECERA de plainplay.dev — UNA SOLA para todas las páginas del
   sitio, como el pie (`pie.css`): fija arriba, un filete debajo del
   mismo trazo que el del pie, y dentro QUIÉN ES LA PÁGINA. El pie dice
   «este es el sitio»; la cabecera dice «esta es la página»:
     · el estudio (`/es/`, `/en/`): «plainplay» y el lema;
     · dixo (`/[lang]/dixo`) y sus dos legales: el icono, «dixo» y el
       descriptor de la ficha;
     · Proyecto Stop (`/[lang]/stop`): el nombre en clave y su estado.
   El marcado lo emite `src/components/Cabecera.astro`; aquí vive el cromo.

   ── LO QUE ES IGUAL EN TODAS, Y NO SE NEGOCIA ──────────────────────
   · El FILETE va A SANGRE y el texto empieza en la columna del sitio
     (`--columna`, declarada en `pie.css`): el mismo borde que el pie.
   · Las medidas, en PÍXELES FIJOS: 12 px de aire, 44 de marca (el icono
     y, al lado, el nombre a 17/24 sobre el descriptor a 13/20), 12 px y
     el filete = 69 px. Esa es LA invariante que cada página reserva
     arriba en `--cab-h`, más `--sat` (el inset superior), que cada
     página declara y aquí solo se consume. Si cambia aquí, cambia allí.
   · ⛔ Sin insignias de tienda: una cabecera con insignias ya vivió en la
     landing de dixo (11-10) y murió porque las insignias en rem caían por
     debajo de los 40 px reales que exige Apple. Las tiendas viven en la
     ficha de cada página, a su tamaño.
   ══════════════════════════════════════════════════════════════════ */
.cab{
  position:fixed; left:0; right:0; top:0; z-index:10;
  display:flex; align-items:center;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  padding:calc(12px + var(--sat, 0px)) var(--columna) 12px;
}
.cab-marca{
  display:flex; align-items:center; gap:12px; min-height:44px; max-width:100%;
  text-decoration:none; color:var(--ink);
}
/* El icono REAL de cada página (el del estudio, el de dixo, el de Stop). El
   fondo de los dos primeros ES el papel: sin filete y sombra no se vería el
   cuadrado. Radio iOS (22.5 %). */
.cab-icono{
  width:44px; height:44px; flex:none; display:block;
  border-radius:22.5%; border:1px solid var(--rule);
  box-shadow:0 4px 12px rgba(28,26,23,.10);
}
/* Una línea cada uno, SIEMPRE: la invariante de 69 px no puede depender del
   largo de un texto. Si un lema no cabe (a 390 caben 44 caracteres), se
   recorta con elipsis — y se acorta el lema, no la cabecera. */
.cab-texto{ display:flex; flex-direction:column; min-width:0; }
.cab-nombre, .cab-desc{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cab-nombre{ font-size:17px; line-height:24px; font-weight:700; letter-spacing:-.01em; }
/* El acento del nombre del estudio: el único azul, el mismo del hover. */
.cab-acento{ color:var(--blue); }
.cab-desc{ font-size:13px; line-height:20px; color:var(--muted); }
.cab-marca:hover .cab-nombre{ color:var(--blue); }