/* ============================================================
   WaterGo · Cabecera partida
   ------------------------------------------------------------
   La isla blanca de marca + menú se queda a la IZQUIERDA y solo
   ocupa lo que necesita. La cesta va suelta a la derecha, como
   un disco negro.

   Por qué: la isla anterior ocupaba el ancho completo y cruzaba
   por delante del hero, cortando la botella por el cuello. Al
   partirla, entre las dos piezas queda un hueco por el que se ve
   el producto entero.

   Va en un archivo aparte y detrás de una clase propia
   (.cabecera--partida) para no cambiar la cabecera de las páginas
   que todavía no se han rehecho.
   ============================================================ */

/* Fuera del flujo. En sticky, la cabecera ocupaba sitio y su margen
   negativo empujaba el hero hacia arriba: con 100dvh de alto, el hero
   terminaba 16-25 px por encima del borde inferior y asomaba una franja
   de la sección siguiente. Fija, el hero empieza exactamente en 0 y
   llena la pantalla. */
.cabecera--partida {
  position: fixed;
  top: var(--e-3);
  left: 0;
  right: 0;
  margin: 0;
}

/* Al sacarla del flujo deja de ocupar sitio, así que el contenido
   que viene detrás se le mete por debajo. En la home no pasa nada,
   porque el hero ocupa la pantalla entera y la cabecera flota sobre
   él a propósito; en las páginas interiores hay que devolver ese
   hueco o el primer titular queda tapado. */
.cabecera--partida ~ main {
  padding-top: calc(var(--e-3) + 58px + var(--e-4));
}

.cabecera--partida ~ main:has(> .heroe-mundo) {
  padding-top: 0;
}

.cabecera--partida .cabecera__cuerpo {
  /* El contenedor deja de ser la isla: ahora solo reparte. */
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* La isla, ahora solo alrededor de la marca y el menú. */
.cabecera--partida .cabecera__isla {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  min-width: 0;
  margin-right: auto;              /* empuja la cesta a la derecha */
  padding: 7px var(--e-5);

  background: color-mix(in srgb, var(--blanco) 74%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--tinta) 6%, transparent);
  border-radius: var(--r-l);
  box-shadow: 0 1px 2px rgba(29,29,27,.04), 0 10px 34px rgba(29,29,27,.09);
  transition: background var(--dur-panel) var(--ease-out),
              box-shadow var(--dur-panel) var(--ease-out);
}

.cabecera--partida.esta-abajo .cabecera__isla {
  background: var(--papel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(29,29,27,.05), 0 14px 44px rgba(29,29,27,.14);
}

/* ---- La cesta, suelta ---- */

.cabecera--partida .cesta--suelta {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--tinta, #1D1D1B);
  color: var(--blanco, #fff);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(29,29,27,.10), 0 10px 28px rgba(29,29,27,.20);
  transition: transform var(--dur-panel, .3s) var(--ease-out, ease);
}

.cabecera--partida .cesta--suelta:hover { transform: translateY(-1px) scale(1.04); }

.cabecera--partida .cesta__icono { width: 21px; height: 21px; }

/* El contador, en la esquina del disco. */
.cabecera--partida .cesta--suelta .cesta__n {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--papel, #F4F4F2);
  color: var(--tinta, #1D1D1B);
  border: 1.5px solid var(--tinta, #1D1D1B);
  font-family: var(--fuente-datos, 'DM Mono', monospace);
  font-size: 10.5px;
  line-height: 1;
}

/* ---- Móvil ---- */

@media (max-width: 820px) {
  .cabecera--partida .cabecera__isla {
    gap: var(--e-3);
    padding: 6px var(--e-4, 14px);
  }
  /* El menú largo no cabe: manda el botón de hamburguesa, que ya
     existe y abre .menu-movil. */
  .cabecera--partida .nav { display: none; }
  .cabecera--partida .cesta--suelta { width: 42px; height: 42px; }
  .cabecera--partida .cesta__icono { width: 19px; height: 19px; }
}