/*
 * marca-comun.css — Correcciones de marca compartidas por todas las páginas públicas.
 *
 * Existe porque el encabezado está duplicado en seis páginas con su CSS en línea: arreglarlo
 * en cada una obligaría a mantener seis copias del mismo arreglo. Aquí va SOLO lo que debe
 * ser idéntico en toda la web. No es una refactorización de los estilos existentes.
 *
 * ── QUÉ SE RETIRÓ Y POR QUÉ ───────────────────────────────────────────────────────
 * Este archivo apilaba el encabezado en DOS FILAS por debajo de 640 px (marca arriba, menú
 * debajo) y encogía los enlaces `.mini`. Tenía sentido cuando el menú eran cuatro enlaces de
 * texto peleando por el ancho con el nombre de la marca. Desde que el menú es un desplegable
 * (js/nav.js), en móvil solo conviven el nombre y un botón pequeño: caben de sobra en una
 * fila. Mantener el apilado costaba ~25 px de alto inútiles —hasta el 27 % de la pantalla en
 * horizontal— y dejaba un hueco visible entre el nombre y el botón. La clase `.mini` ya no
 * la usa ninguna página.
 *
 * El layout del encabezado lo define ahora js/nav.js, junto al propio menú, para que no haya
 * dos sitios donde tocarlo.
 */

/* ==========================================================================
   ENCABEZADO — el nombre de la marca NUNCA se parte en dos líneas
   ==========================================================================
   En móvil se veía "Tarot del / Deseo", que parece un error de maquetación en el
   elemento más visible de la marca. La solución es doble: prohibir el salto y, en
   pantallas estrechas, reducir el cuerpo lo justo. Antes achicar que partir. */

.barra .marca,
.barra .marca b {
  white-space: nowrap;
}

/* El nombre es un enlace a la home: no debe parecer un enlace de texto cualquiera. */
a.marca { text-decoration: none; color: inherit; }
a.marca:hover b { color: var(--dorado-claro, #E7CE8E); }
a.marca:focus-visible { outline: 2px solid var(--dorado-claro, #E7CE8E); outline-offset: 4px; border-radius: 4px; }

/* Reducción progresiva del cuerpo del nombre en pantallas estrechas. */
@media (max-width: 640px) { .barra .marca { font-size: 1.05rem; } }
@media (max-width: 380px) { .barra .marca { font-size: .98rem; } }
@media (max-width: 340px) { .barra .marca { font-size: .92rem; } }

/* Ninguna corrección de encabezado debe poder provocar barra horizontal. */
@media (max-width: 640px) {
  .barra .env { max-width: 100%; overflow-x: clip; }
}