/* cdq/header — patrón Studio Olimpo, portado de cdq-design-system/brand/header/header.html.
   Reescrito 2026-07-07: la versión anterior de este archivo predataba la
   decisión del sistema (2026-07-06, ver CLAUDE-web.md § Header) — tenía el
   comentario "mix-blend-mode se probó y se descartó" cuando en realidad es
   justo lo contrario: se adoptó, reemplazando TODO el sistema de contraste
   por scroll/IntersectionObserver (clase .claro, .menu-abierto, ocultar al
   bajar). Ese JS viejo seguía activo en producción y causaba exactamente
   los dos síntomas reportados: el header desaparecía al hacer scroll hacia
   abajo (scroll-hide nunca se quitó aquí) y el contraste no se veía
   correcto (mix-blend-mode nunca se aplicó, todo el header quedaba en
   colores fijos vía la clase .claro). Un solo header persistente (nunca dos
   filas superpuestas); el mismo botón alterna su texto Menú/Cerrar. */
.cdq-header{
  position:fixed;top:0;left:0;right:0;z-index:300;
  display:flex;justify-content:space-between;align-items:center;
  padding:.9rem var(--cdq-margin);
  mix-blend-mode:difference;
}
/* Solo cosmético, para quien administra el sitio (2026-07-07): la barra de
   WordPress (body.admin-bar, 32px escritorio / 46px ≤782px, mismo
   breakpoint que usa WP core) tapaba nuestro header fijo al estar logueado.
   No afecta a visitantes — show_admin_bar() en functions.php ya la oculta
   para cualquiera que no pueda editar contenido. */
body.admin-bar .cdq-header{top:32px}
@media(max-width:782px){
  body.admin-bar .cdq-header{top:46px}
}

/* texto siempre blanco puro + difference: contra fondo oscuro el resultado es
   claro, contra fondo crema el resultado es casi negro — automático, sin JS.
   el monograma va en T-cuerpo con +.02em de tracking (irradiación del
   claro+difference sobre fondo oscuro, regla del sistema, --cdq-ls-cuerpo). */
.cdq-header__logo{
  font-family:var(--cdq-font-display);font-size:var(--cdq-size-cuerpo);
  line-height:var(--cdq-lh-cuerpo);font-weight:400;
  letter-spacing:calc(var(--cdq-ls-cuerpo) + .02em);color:#fff;
  cursor:pointer;text-decoration:none;
}

.cdq-header__trigger{
  position:relative;
  font-family:var(--cdq-font-sans);font-size:var(--cdq-size-etiqueta);
  letter-spacing:var(--cdq-ls-etiqueta);text-transform:uppercase;
  color:#fff;cursor:pointer;background:none;border:0;padding:0;
}
/* objetivo táctil ~44px (Apple HIG / WCAG 2.5.5) sin mover el texto */
.cdq-header__trigger::before{content:"";position:absolute;inset:-14px}

.cdq-menu{
  position:fixed;inset:0;z-index:200;
  background:var(--cdq-bg-dark);
  display:flex;flex-direction:column;
  padding-inline:var(--cdq-margin);
  padding-block-start:calc(.9rem * 2 + 1.1rem); /* = altura exacta del header */
  opacity:0;pointer-events:none;
  transition:opacity .4s cubic-bezier(.4,0,.2,1);
}
.cdq-menu.abierto{opacity:1;pointer-events:all}
/* mismo ajuste cosmético que .cdq-header arriba, para que el overlay siga
   empezando justo debajo del header cuando la barra de WordPress lo baja */
body.admin-bar .cdq-menu{padding-block-start:calc(32px + .9rem * 2 + 1.1rem)}
@media(max-width:782px){
  body.admin-bar .cdq-menu{padding-block-start:calc(46px + .9rem * 2 + 1.1rem)}
}

/* base del nav — faltaba por completo en esta portación (2026-07-07): sin
   flex:1 + justify-content:center el bloque de filas no se centra dentro
   del overlay, queda pegado arriba. Ver brand/header/header.html. */
.cdq-menu__nav{
  flex:1;display:flex;flex-direction:column;justify-content:center;
}

/* .cdq-menu__list envuelve solo las filas reales — sin esto, el spotlight y
   el hover se activan en todo el alto del nav. Mancha con tope de 90rem:
   .cdq-menu es full-bleed a propósito, pero su contenido no debería crecer
   sin límite en pantallas ultra-anchas. */
.cdq-menu__list{
  display:flex;flex-direction:column;flex:none;
  max-width:var(--cdq-site-width);margin-inline:auto;width:100%;
}
.cdq-menu__item{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;padding-block:clamp(.5rem,1.5vw,1rem);flex:none;
}
.cdq-menu__item + .cdq-menu__item{border-top:1px solid rgba(248,246,241,.12)}
@media (min-width:768px){
  .cdq-menu__list{padding-inline:var(--cdq-column-width--1)}
}

.cdq-menu__num{
  font-family:var(--cdq-font-sans);font-weight:500;
  font-size:var(--cdq-size-etiqueta);letter-spacing:var(--cdq-ls-etiqueta);
  color:var(--cdq-muted-inv);flex-shrink:0;padding-top:.3em;
}
/* !important necesario: Blocksy trae su propio color de enlace (visitado/hover)
   con más especificidad efectiva que este selector — sin esto el destino se
   ve verde oliva (color de acento por defecto de Blocksy) en vez de crema,
   sobre todo notorio en :hover. Mismo patrón que #header.ct-header en cdq.css. */
.cdq-menu__dest,
.cdq-menu__dest:hover,
.cdq-menu__dest:visited{
  font-family:var(--cdq-font-display);font-weight:400;
  font-size:clamp(3.5rem,10vw,8rem);line-height:.95;
  letter-spacing:0;text-transform:uppercase;color:var(--cdq-text-inv) !important;
  text-align:right;margin-left:auto;
}

/* Spotlight de lista (Studio Olimpo, extraído de su CSS real) — gateado tras
   (hover:hover) y (pointer:fine): en touch, un tap no debe dejar un ítem
   "atascado" en hover. */
@media (hover:hover) and (pointer:fine){
  .cdq-menu__item{transition:opacity .5s cubic-bezier(.4,0,.2,1)}
  .cdq-menu__list:hover .cdq-menu__item:not(:hover){opacity:.25}
  .cdq-menu__dest{transition:transform .7s cubic-bezier(.4,0,.2,1)}
  .cdq-menu__item:hover .cdq-menu__dest{transform:translateX(-.5rem)}
}

.cdq-menu__foot{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding-block:clamp(1.5rem,4vw,2.5rem) .9rem;
  flex-shrink:0;
  font-family:var(--cdq-font-sans);font-weight:400;
  font-size:var(--cdq-size-etiqueta);letter-spacing:var(--cdq-ls-etiqueta);
  text-transform:uppercase;color:var(--cdq-muted-inv);
}
.cdq-menu__foot a{
  position:relative;color:inherit;
  text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px;
  transition:opacity var(--cdq-fast)
}
.cdq-menu__foot a:hover{opacity:.5}
.cdq-menu__foot a::before{content:"";position:absolute;inset:-14px}
/* Conversar → destacado: T-largo cursiva en vez de etiqueta UI uppercase */
.cdq-menu__foot-cta{
  text-decoration:none;
  font-family:var(--cdq-font-serif);
  font-size:var(--cdq-size-largo);
  font-style:italic;
  letter-spacing:var(--cdq-ls-largo);
  text-transform:none;
}
.cdq-menu__foot-links{display:flex;flex-direction:column;align-items:flex-end;gap:.5em}