/* ==========================================================================
   components.css — Header, menú, cortina, footer, cabecera de página interior
   ========================================================================== */

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.site-header.is-solid { background: var(--bg); border-bottom-color: var(--linea); }
.site-header.is-hidden { transform: translateY(-101%); }

.site-header__brand {
  display: block; padding: 8px 0;      /* área táctil ≥ 44px de alto */
  color: var(--fg);                    /* firma larga en currentColor: blanca en oscuro, negra en claro */
}

.menu-btn {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 44px; padding: 0 2px;
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}
.menu-btn__icon { position: relative; width: 28px; height: 10px; }
.menu-btn__icon i {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--fg);
  transition: transform var(--t-med) var(--ease-out), background-color var(--t-fast);
}
.menu-btn__icon i:first-child { top: 0; }
.menu-btn__icon i:last-child { bottom: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (hover: hover) { .menu-btn:hover .menu-btn__icon i { background: var(--rojo); } }

/* Sin JS no hay menú superpuesto (el footer trae el mapa del sitio) */
html:not(.js) .menu, html:not(.js) .menu-btn { display: none; }

/* ── Menú a pantalla completa ──────────────────────────────────────────── */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 32px;
  padding: calc(var(--header-h) + 24px) max(var(--gutter), env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: var(--bg);
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 700ms var(--ease-inout), visibility 0s linear 700ms;
}
.menu::before {   /* filo rojo→brass en el borde inferior durante la apertura */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--grad-marca);
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 700ms var(--ease-inout), visibility 0s; }

.menu__list { display: flex; flex-direction: column; gap: clamp(2px, 1.2vh, 12px); }
.menu__link {
  /* Sangría: los textos conservan exactamente la posición que tenían cuando llevaban un número a la izquierda
     (separación fluida + ancho de «00»); así, sin números, no se corren hacia el margen. */
  --menu-indent: calc(clamp(12px, 2vw, 28px) + 1.2725rem);
  display: flex; align-items: baseline;
  padding: .06em 0 .06em var(--menu-indent);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  /* límite por ancho («COMPOSICIONES», 13 letras, cabe en 390px) y por alto (7 ítems caben en 900px) */
  font-size: clamp(1.75rem, min(8vw, 8.6vh), 7.5rem);
  line-height: .98; letter-spacing: var(--ls-display);
  transition: color var(--t-fast), opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.menu__item { overflow: clip; }
.menu__link .menu__text { display: inline-block; transform: translateY(105%); transition: transform 700ms var(--ease-out); transition-delay: calc(var(--i) * 50ms + 150ms); }
.menu.is-open .menu__link .menu__text { transform: none; }
.menu__link[aria-current="page"] .menu__text { color: var(--rojo); }
@media (hover: hover) {
  .menu__list:hover .menu__link:not(:hover) { opacity: .35; }
  .menu__link:hover .menu__text { color: var(--rojo); }
}
.menu__aside { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--linea); }
.menu__quote { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lead); text-transform: uppercase; letter-spacing: .02em; }
.menu__meta { color: var(--fg-2); font-size: var(--fs-small); }
@media (min-width: 900px) {
  .menu__aside { flex-direction: row; justify-content: space-between; align-items: end; }
  .menu__quote { max-width: 22ch; }
  .menu__meta { text-align: right; }
}

/* ── Cortina de transición entre páginas (rojo → brass) ─────────────────── */
.curtain {
  position: fixed; inset: 0; z-index: var(--z-curtain);
  display: grid; place-items: center;
  background: var(--grad-marca);
  visibility: hidden;             /* el JS controla el transform; oculta por defecto */
  pointer-events: none;
  will-change: transform;
}
.curtain { color: var(--blanco); }
.curtain__mark { width: clamp(88px, 12vw, 150px); height: auto; }   /* firma corta (JV) en blanco sobre el degradado */
.curtain-on .curtain { visibility: visible; }   /* cubre desde el primer pintado tras navegar */

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  position: relative; overflow: hidden;
  padding: clamp(80px, 14vh, 160px) max(var(--gutter), env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  border-top: 1px solid var(--linea);
}
.site-footer__pattern { position: absolute; inset: 0; opacity: .06; --pat-size: 340px; }
.site-footer__grid {
  position: relative; display: grid; gap: 56px;
  grid-template-columns: 1fr;
}
.site-footer__title { font-size: clamp(3rem, 1rem + 9vw, 10rem); }
.site-footer__meta { margin-top: 24px; color: var(--fg-2); max-width: 42ch; }
.site-footer__nav ul, .site-footer__social ul { margin-top: 16px; display: grid; gap: 10px; }
.site-footer__nav a, .site-footer__social a { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lead); text-transform: uppercase; letter-spacing: .03em; }   /* Hubiron pequeña: un poco de aire */
.site-footer__base {
  position: relative; margin-top: clamp(64px, 10vh, 120px); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  border-top: 1px solid var(--linea); color: var(--fg-2); font-size: var(--fs-small);
}
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: 1.6fr 1fr .8fr; align-items: end; }
}

/* ── Cabecera de página interior (partial page-hero) ─────────────────────── */
.page-hero {
  position: relative; overflow: hidden;
  min-height: min(78svh, 900px);
  display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + 48px) 0 clamp(40px, 8vh, 96px);
}
.page-hero__pattern { position: absolute; inset: 0; opacity: .06; --pat-size: 380px; }
.page-hero__inner { position: relative; width: 100%; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.page-hero__inner > .eyebrow { margin-bottom: 20px; }
.page-hero__title { overflow: hidden; padding-bottom: .04em; }
.page-hero__title [data-fit] { font-size: clamp(3rem, 1rem + 12vw, 14rem); }
.page-hero__lead { margin-top: 28px; max-width: 46ch; font-size: var(--fs-lead); line-height: 1.35; color: var(--fg-2); }
.trazo-linea {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--grad-marca); transform-origin: 0 50%;
}

.stub { padding: clamp(48px, 10vh, 120px) max(var(--gutter), env(safe-area-inset-left)); }
.stub__note { color: var(--fg-2); font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; }

/* ── Barra de progreso de lectura (páginas largas: /biografia, /hitos). JS: scaleX(0…1) en <i> ── */
.bbar { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: calc(var(--z-header) + 1); pointer-events: none; }
.bbar i { display: block; height: 100%; background: var(--rojo); transform: scaleX(0); transform-origin: 0 50%; }

/* ── Trazo divisor (línea de la firma dibujándose entre secciones) ───────── */
.trazo { position: relative; display: block; width: 100%; height: clamp(40px, 7vw, 90px); color: var(--rojo); overflow: visible; }
.trazo path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }