/* ---------------------------------------------------------------------------
   marca.css — el logo de la esquina superior izquierda, en TODO el front.

   Lo usan la landing (`.lp-topbar`), las páginas con `.pf-topbar` y la sidebar
   de los dos triages: la concha (`shell-icon.png`) dentro de un círculo color
   papel, en todos los anchos.

   Se probó el logo horizontal (`logo-horizontal.png`) en escritorio con la
   concha solo en celular, y se descartó el 2026-11-09: en la barra se veía
   pequeño y apretado. El nombre "ReFi Collective" ya lo dicen el <title> y el
   `alt`, que es lo que leen el navegador y los lectores de pantalla.

   POR QUÉ EL CÍRCULO CLARO: la concha es cuerpo blanco con líneas negras y
   todas esas barras son oscuras (`--refi-ink`, o #0B1120 en la landing). Sobre
   papel se ve el logo tal cual es, sin repintarlo — la regla de la casa con el
   logotipo (ver "Iconos" en Millas, CLAUDE.md).
--------------------------------------------------------------------------- */

.marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
  background: var(--refi-paper);
  border-radius: var(--r-pill, 999px);
  padding: 6px;
  text-decoration: none;
  line-height: 0;
  transition: transform .15s ease;
}

.marca:hover { transform: translateY(-1px); }

.marca img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Pantallas angostas: un poco más chica para cederle ancho a las acciones. */
@media (max-width: 600px) {
  .marca { padding: 5px; }
  .marca img { width: 30px; height: 30px; }
}

/* Sidebar del triage cuando pasa a barra superior: centrada en la fila. */
@media (max-width: 900px) {
  .marca--sidebar { align-self: center; }
}