/* ============================================================
   Cabecera — MASTHEAD de almanaque (como no hicimos antes)
   No es la barra clásica logo-izq / nav / cta-der. Aquí:
   1) línea de fecha (running head) con datos de edición,
   2) wordmark CENTRADO entre dos filetes de oro rematados en rombo,
   3) lema bajo el título,
   4) raíl de navegación que se fija (sticky) al desplazar.
   El masthead se va con el scroll; solo el raíl queda arriba.
   ============================================================ */

.diario {
  background: var(--papel-claro);
  border-bottom: 1px solid var(--filete);
}

/* ---- 1 · running head ---- */
.diario__fecha {
  width: var(--medida); max-width: 1320px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.55rem var(--canal);
  font-family: "Public Sans", sans-serif;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--tinta-tenue);
  border-bottom: 1px solid var(--filete);
}
.diario__seccion { color: var(--oro-hondo); }

/* ---- 2 · masthead centrado ---- */
.diario__masthead {
  width: var(--medida); max-width: 1320px; margin-inline: auto;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.6rem);
  padding: clamp(1.4rem, 3vw, 2.4rem) var(--canal) 0.4rem;
}
.diario__filete {
  flex: 1; height: 2px; background: var(--oro-grad); position: relative;
}
/* rombo en el extremo interior de cada filete */
.diario__filete::after {
  content: ""; position: absolute; top: 50%; width: 9px; height: 9px;
  background: var(--oro); transform: translateY(-50%) rotate(45deg);
}
.diario__masthead .diario__filete:first-child::after { right: -4px; }
.diario__masthead .diario__filete:last-child::after  { left: -4px; }

.diario__marca {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4rem);
  font-weight: 700; line-height: 0.95; letter-spacing: 0.02em;
  color: var(--tinta); white-space: nowrap;
}
.diario__marca em { font-style: normal; color: var(--oro-hondo); }

.diario__lema {
  text-align: center; padding: 0 var(--canal) clamp(1.2rem, 2.4vw, 1.8rem);
  font-family: "Public Sans", sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--tinta-media);
}

/* ---- 3 · raíl de navegación (sticky) ---- */
.diario__rail {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,241,228,0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--filete-hondo);
  border-bottom: 1px solid var(--filete-hondo);
}
.diario__rail-inner {
  width: var(--medida); max-width: 1320px; margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.7rem var(--canal);
}
/* marca compacta del raíl: oculta hasta que el masthead se va */
.diario__rail-marca {
  font-family: "Cormorant Garamond", serif; font-weight: 700;
  font-size: 1.2rem; color: var(--tinta); white-space: nowrap;
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.diario__rail-marca em { font-style: normal; color: var(--oro-hondo); }
/* cuando el raíl queda pegado arriba, la marca aparece */
.diario__rail.is-fijo .diario__rail-marca { opacity: 1; transform: none; }

/* nav: wp_nav_menu imprime  .diario__enlaces > ul.diario__menu > li > a */
.diario__enlaces { display: flex; align-items: center; margin-inline: auto; }
.diario__enlaces > ul {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.2rem);
}
.diario__enlaces a {
  display: inline-block;
  font-family: "Public Sans", sans-serif;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tinta-media);
  position: relative; padding: 0.3em 0;
  transition: color 0.2s ease;
}
.diario__enlaces a::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 2px; background: var(--oro); transition: width 0.25s ease;
}
.diario__enlaces a:hover { color: var(--tinta); }
.diario__enlaces a:hover::after { width: 100%; }

.diario__rail-cta { white-space: nowrap; }

/* ---- burger (oculto en desktop) ---- */
.diario__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; background: none; border: 0; cursor: pointer; }
.diario__burger span { width: 24px; height: 2px; background: var(--tinta); display: block; }

/* ---- panel móvil ---- */
.diario__movil {
  display: none; flex-direction: column; gap: 0.2rem;
  padding: 0.4rem var(--canal) 1.4rem;
  border-top: 1px solid var(--filete); background: var(--papel-claro);
}
.diario__movil ul { display: flex; flex-direction: column; }
.diario__movil a {
  display: block;
  font-family: "Public Sans", sans-serif;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 1rem; color: var(--tinta-media);
  padding: 0.95rem 0; border-bottom: 1px solid var(--filete);
}

@media (max-width: 1024px) {
  .diario__fecha { font-size: 0.56rem; letter-spacing: 0.22em; }
  .diario__seccion { display: none; }            /* dejar edición + folio */
  .diario__filete { display: none; }             /* sin filetes laterales en móvil */
  .diario__masthead { justify-content: center; padding-top: 1.3rem; }
  .diario__enlaces { display: none; }            /* nav va al panel desplegable */
  .diario__burger { display: flex; }
  .diario__rail-marca { opacity: 1; transform: none; margin-right: auto; }  /* visible siempre en móvil */
  .diario__rail-cta { padding: 0.85em 1.4em; min-height: 2.8rem; }
}