/* ==========================================================================
   css/mutador/04-cabecera.css — parte 4/15 de lo que era styles.css
   --------------------------------------------------------------------------
   §08 frame + topbar sticky (+ 08b identidad, 08c media fullscreen) + §09 logo y nav horizontal. ⚠ Reglas CRÍTICAS del menú: ver CLAUDE.md.
   Se carga desde inc/paginas.php (_base) EN ESTE ORDEN: el número del
   archivo es su posición en la cascada. Un bloque nuevo → su propio archivo
   con el número que le toque, y añadirlo a la lista de _base.
   ========================================================================== */

/* ---------- §08 · Frame + top bar (sticky) ---------- */
/* .frame es un contenedor de bloque puro. NO es un grid y NO tiene padding.
   Cada sección custom gestiona su propio espaciado horizontal.
   Se mantiene position:relative + z-index:2 (regla anterior) para que
   el contenido quede sobre bgmap (z:0) y bgveil (z:1). */
.frame{
  min-height: 100vh;
}
.rule{ border-top: 1px solid var(--rule); }

/* --- Top bar sticky (mantiene el mark visible durante el crossfade
       light↔dark del logo al scrollear) --- */
.topbar{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  padding: 14px var(--gutter) 12px;
  /* .frame ya no tiene padding, el topbar va naturalmente a borde */
  margin: 0 0 10px;
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: color-mix(in oklab, var(--paper) 68%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease;
}
body[data-theme="dark"] .topbar{
  background-color: color-mix(in oklab, var(--ink) 88%, transparent);
  border-bottom-color: rgba(239, 236, 228, .08);
}

/* ---------- §08b · Topbar en modo página "identidad" (body.idn-page) ----------
   SUMARIO: index.php añade class="idn-page" al <body> cuando
   custom_globalvar1 == "identidad". El nav pasa a overlay FIJO sobre el hero
   (deja de ocupar altura → el hero arranca en 0,0). El blanco/negro del logo y
   el menú lo sigue dando el sistema de temas (body[data-theme], gestionado por
   core.js); aquí SOLO se tocan posición y el fondo sobre dark.
   · No se redefine el velo crema sobre light: lo hereda del .topbar base
     (no duplicar lo que ya hace styles.css).
   · background-color en longhand obligatorio (el shorthand con color-mix
     congela la transición — ver CLAUDE.md). */
body.idn-page .topbar{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
}
/* sobre el hero DARK: sin fondo. La clase extra (.idn-page) gana en
   especificidad al body[data-theme="dark"] .topbar de §08 sin depender del
   orden, así que anula el velo tinta 88% y lo deja transparente. */
body.idn-page[data-theme="dark"] .topbar{
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* ---------- §08c · Utilidad de media (fullscreen + fill cover) ----------
   SUMARIO: forma ÚNICA y canónica de "vídeo/imagen a pantalla o caja, en
   cover/contain". Centralizada aquí para que los CSS de landing aporten solo
   lo NUEVO y NO redefinan este recipe (antes repetido en cada landing/demo).
   USO en HTML:
     <div class="mut-media mut-media--full">     · caja a pantalla (100svh)
       <video class="mut-fill" ...></video>      · rellena en cover
     <figure class="mut-media" style="aspect-ratio:4/5">
       <img class="mut-fill mut-fill--contain">  · packshot, sin recorte
   El contenedor (.mut-media) aporta posición + recorte; el tamaño lo pone
   --full (100svh) o el propio componente (aspect-ratio). */
.mut-media{
  position: relative;
  overflow: hidden;
  display: block;
}
.mut-media--full{
  height: 100svh;
  max-height: 1400px;
}
.mut-fill{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mut-fill--contain{
  object-fit: contain;
}

/* ---------- §09 · Mark (logo) + nav horizontal ----------
   Mark = square logo + wordmark. El logo son dos SVGs overlay
   (light + dark) que hacen cross-fade cuando body[data-theme] cambia.
   Override Bootstrap necesario: Bootstrap aplica
   `mark, .mark { padding:.1875em; background-color: var(--bs-highlight-bg) }`
   pensando en el elemento HTML <mark>. Nuestra .mark es el logo:
   anulamos padding y el background amarillo de highlight. */
.mark{
  grid-column: 1 / span 3;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  background-color: transparent;
  padding: 0;
}
.mark-logo{
  position: relative;
  display: inline-block;
  width: 28px; height: 28px;
  flex-shrink: 0;
}
.mark-logo img,
.mobile-logo img,
.dlogo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  transition: opacity .45s ease;
}
.mark-logo .l-light,
.mobile-logo .l-light,
.dlogo .l-light {
  opacity: 1;
  transition: opacity .3s ease;
}
.mark-logo .l-dark,
.mobile-logo .l-dark,
.dlogo .l-dark {
  opacity: 0;
  transition: opacity .3s ease;
}
body[data-theme="dark"] .mark-logo .l-light,
body[data-theme="dark"] .mobile-logo .l-light,
body[data-theme="dark"] .dlogo .l-light {
  opacity: 0;
}
body[data-theme="dark"] .mark-logo .l-dark,
body[data-theme="dark"] .mobile-logo .l-dark,
body[data-theme="dark"] .dlogo .l-dark {
  opacity: 1;
}

/* Nuevos vectores SVG auto-formantes para rollover */
.mark-logo .l-gif,
.mark-logo .l-gif-light,
.mark-logo .l-gif-dark,
.mobile-logo .l-gif,
.mobile-logo .l-gif-light,
.mobile-logo .l-gif-dark,
.dlogo .l-gif,
.dlogo .l-gif-light,
.dlogo .l-gif-dark {
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Rollover: Ocultar logos estáticos y mostrar el animado correspondiente */
.mark:hover .mark-logo .l-light,
.mark:hover .mark-logo .l-dark,
.mark-logo:hover .l-light,
.mark-logo:hover .l-dark,
.mobile-logo:hover .l-light,
.mobile-logo:hover .l-dark,
.dlogo:hover .l-light,
.dlogo:hover .l-dark {
  opacity: 0 !important;
  transition: opacity 0s !important;
}

/* Si usan el GIF genérico legacy */
.mark:hover .mark-logo .l-gif,
.mark-logo:hover .l-gif,
.mobile-logo:hover .l-gif,
.dlogo:hover .l-gif {
  opacity: 1;
}

/* Si usan los vectores SVG auto-formantes (Light/Dark aware) */
body[data-theme="light"] .mark:hover .mark-logo .l-gif-dark,
body[data-theme="light"] .mark-logo:hover .l-gif-dark,
body[data-theme="light"] .mobile-logo:hover .l-gif-dark,
body[data-theme="light"] .dlogo:hover .l-gif-dark {
  opacity: 1;
}
body[data-theme="dark"] .mark:hover .mark-logo .l-gif-light,
body[data-theme="dark"] .mark-logo:hover .l-gif-light,
body[data-theme="dark"] .mobile-logo:hover .l-gif-light,
body[data-theme="dark"] .dlogo:hover .l-gif-light {
  opacity: 1;
}


.mark-word{ display:inline-flex; align-items:baseline; }
.mark .dot{
  display:inline-block; width:6px; height:6px;
  background: var(--accent); border-radius:50%;
  transform: translateY(-4px);
  margin: 0 .35em 0 .1em;
}
.mark-sub{
  font-style: italic;
  font-family: var(--body);
  font-size: 16px;
  color: var(--mute);
}

/* Nav horizontal en una sola línea (desktop). */
.nav{
  grid-column: 4 / span 6;
  display:flex;
  flex-wrap: nowrap;
  gap: 14px;
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: .04em;
  align-items: baseline;
  justify-content: center;
}
.nav a{ white-space: nowrap; text-transform: uppercase }
.nav a.current{ font-style: italic; color: var(--accent); text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 3px; }
.nav a.u{     font-family: var(--mono) !important;}
.meta{
  grid-column: 10 / span 3;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.meta .pulse{ display:inline-block; width:6px; height:6px; background: var(--accent); border-radius:50%; margin-right:6px; transform: translateY(-1px); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }