/* Solo para el muestrario: franja de arriba (imita la del marco) y maquetación de las páginas de ejemplo. */
html { background: var(--celestia-fondo); }
body { min-height: 100dvh; }
.franja { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--c-e3); height: 48px; padding: 0 var(--c-e4); border-bottom: 1px solid var(--celestia-linea); background: color-mix(in srgb, var(--celestia-sup) 92%, transparent); backdrop-filter: blur(8px); }
.franja-marca { display: flex; align-items: center; gap: var(--c-e2); color: var(--celestia-texto); font-weight: 700; text-decoration: none; white-space: nowrap; }
.franja-marca svg { width: 20px; height: 20px; color: var(--celestia-acento); }
.franja .c-pestanas { flex: 1; min-width: 0; border-bottom: 0; align-self: stretch; align-items: stretch; }
.franja .c-pestana { display: flex; align-items: center; }
.franja .c-pestana[aria-current="page"]::after { bottom: 0; }
.envoltura { width: min(1180px, 100%); margin: 0 auto; padding: var(--c-e7) var(--c-e4) var(--c-e8); }
.cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--c-e4); flex-wrap: wrap; margin-bottom: var(--c-e6); }
.cabeza h1 { font-size: calc(clamp(var(--c-t6), 5vw, 44px) * var(--c-escala-titulo)); }
.cabeza p { margin: var(--c-e2) 0 0; max-width: 62ch; color: var(--celestia-suave); }
.seccion { margin-top: var(--c-e8); }
.seccion > h2 { font-size: calc(var(--c-t5) * var(--c-escala-titulo)); margin-bottom: var(--c-e2); }
.seccion > p { margin: 0 0 var(--c-e4); color: var(--celestia-suave); max-width: 70ch; }
.rejilla { display: grid; gap: var(--c-e4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--c-e3); }
.pila { display: grid; gap: var(--c-e3); }
.muestra { display: grid; gap: var(--c-e3); }
.muestra-nota { font-size: var(--c-t1); color: var(--celestia-tenue); font-family: var(--c-mono); }
.pie { margin-top: var(--c-e8); padding-top: var(--c-e4); border-top: 1px solid var(--celestia-linea); color: var(--celestia-tenue); font-size: var(--c-t1); }
/* Menú de tipografía (popover nativo: Escape y clic afuera lo cierran solos). */
.menu-fuentes { position: fixed; inset: 56px 16px auto auto; margin: 0; width: 240px; padding: var(--c-e3); box-shadow: var(--c-sombra-3); }
.menu-fuentes .c-rotulo { display: block; padding: 0 var(--c-e3) var(--c-e2); }
.menu-fuentes .c-nav-item[aria-pressed="true"] { color: var(--celestia-acento); }
.menu-fuentes:popover-open { animation: menu-abre .35s var(--c-salida); }
@keyframes menu-abre { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
/* Entre páginas: la franja queda quieta y el contenido entra subiendo (navegadores con View Transitions). */
@view-transition { navigation: auto; }
.franja { view-transition-name: franja; }
::view-transition-old(root) { animation: .18s ease-in both pagina-sale; }
::view-transition-new(root) { animation: .5s var(--c-salida) both pagina-entra; }
@keyframes pagina-sale { to { opacity: 0; transform: translateY(-6px); } }
@keyframes pagina-entra { from { opacity: 0; transform: translateY(14px); } }
/* Cambio de modo: sin fundido; el círculo lo pone muestrario.js. */
html.c-cambio-modo::view-transition-old(root), html.c-cambio-modo::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.franja-marca svg { transition: transform .6s var(--c-resorte); }
.franja-marca:hover svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
@media (max-width: 640px) {
  .franja-marca span { display: none; }
  .cabeza h1 { font-size: var(--c-t6); }
  .envoltura { padding-top: var(--c-e5); }
}