/* =====================================================================
   02 · CABECERA + MENÚ MÓVIL
   Núcleo 6 (logo 38/29px), 8 (velo sobre foto), 11 (un solo cierre visible,
   Escape, scroll bloqueado, CTA dentro con ancho al contenido)
   HTML: ver docs/06-COMPONENTES.md → "Cabecera"
   ===================================================================== */

.cab{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--cab-h);
  display:flex; align-items:center;
  /* Velo: sin él no se leen logo ni menú sobre una foto clara */
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
  color:var(--c-sobre-oscuro);
  transition:background var(--t-media) var(--ease), height var(--t-media) var(--ease), box-shadow var(--t-media) var(--ease), color var(--t-media) var(--ease);
}
.cab.is-solida{ height:calc(var(--cab-h) - 14px); background:var(--c-fondo); color:var(--c-texto); box-shadow:0 1px 0 var(--c-linea); }
/* Variante para páginas que empiezan en claro */
.cab--clara{ background:transparent; color:var(--c-texto); }
.cab .contenedor{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.cab-logo{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.cab-logo img, .cab-logo svg{ height:var(--logo-h); width:auto; }
.cab-logo .logo-claro{ display:block; } .cab-logo .logo-oscuro{ display:none; }
.cab.is-solida .cab-logo .logo-claro{ display:none; } .cab.is-solida .cab-logo .logo-oscuro{ display:block; }
/* Si el logo es SVG/texto con currentColor, basta con el color de .cab */

.cab-nav{ display:flex; align-items:center; gap:clamp(18px, 2.4vw, 34px); }
.cab-nav a{
  /* Sin nowrap + flex-shrink:0 el nav se parte en dos líneas con la fuente real (caso Event Master) */
  white-space:nowrap; flex-shrink:0;
  font-size:.9rem; font-weight:500; letter-spacing:.02em; text-decoration:none; position:relative;
}
.cab-nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform var(--t-rapida) var(--ease);
}
.cab-nav a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }
.cab-nav .btn{ min-height:42px; padding:.6em 1.3em; font-size:.85rem; }

/* ---- Hamburguesa (solo abre; al abrir se oculta) ---- */
.cab-abrir{
  display:none; align-items:center; gap:10px;
  padding:10px 4px; background:none; border:0; color:inherit;
  font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.cab-abrir .barras{ display:grid; gap:5px; width:24px; }
.cab-abrir .barras i{ display:block; height:1.5px; background:currentColor; border-radius:2px; }
.cab-abrir .barras i:nth-child(2){ width:70%; justify-self:end; }

/* ---- Panel del menú móvil ---- */
.menu{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column; padding:22px var(--gutter) 40px;
  background:var(--c-oscuro); color:var(--c-sobre-oscuro);
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity var(--t-media) var(--ease), transform var(--t-media) var(--ease), visibility 0s linear var(--t-media);
  overflow-y:auto;
}
.menu.is-abierto{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.menu-top{ display:flex; align-items:center; justify-content:space-between; min-height:calc(var(--cab-h-movil) - 22px); }
.menu-top .cab-logo img, .menu-top .cab-logo svg{ height:var(--logo-h-movil); }
/* ÚNICO cierre: botón con texto */
.menu-cerrar{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px;
  background:none; border:1px solid var(--c-linea-oscuro); border-radius:var(--radio-pill);
  color:inherit; font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.menu-cerrar svg{ width:14px; height:14px; }
.menu-lista{ display:flex; flex-direction:column; gap:6px; margin:auto 0; padding:40px 0; }
/* Especificidad: :not(.btn) para que el CTA NO herede el estilo de enlace grande */
.menu a:not(.btn){
  font-family:var(--f-display); font-size:clamp(2rem, 8vw, 2.6rem); line-height:1.25; text-decoration:none;
  opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.menu.is-abierto a:not(.btn){ opacity:1; transform:none; }
.menu.is-abierto .menu-lista a:nth-child(1){ transition-delay:.08s; }
.menu.is-abierto .menu-lista a:nth-child(2){ transition-delay:.14s; }
.menu.is-abierto .menu-lista a:nth-child(3){ transition-delay:.2s; }
.menu.is-abierto .menu-lista a:nth-child(4){ transition-delay:.26s; }
.menu.is-abierto .menu-lista a:nth-child(5){ transition-delay:.32s; }
.menu a.btn{ align-self:flex-start; font-family:var(--f-texto); }   /* CTA: sans + ancho al contenido */
.menu-pie{ display:flex; flex-direction:column; gap:18px; padding-top:24px; border-top:1px solid var(--c-linea-oscuro); font-size:.9rem; color:var(--c-sobre-oscuro-suave); }

@media (max-width:960px){
  .cab{ height:var(--cab-h-movil); }
  .cab.is-solida{ height:var(--cab-h-movil); }
  .cab-logo img, .cab-logo svg{ height:var(--logo-h-movil); }
  .cab-nav{ display:none; }
  .cab-abrir{ display:inline-flex; }
  body.menu-abierto .cab-abrir{ visibility:hidden; }   /* la hamburguesa se oculta al abrir */
}
@media (prefers-reduced-motion:reduce){
  .menu, .menu a:not(.btn){ transition:none; transform:none; }
}