/* ============================================================
   laOra · CABECERA — la misma en todas las páginas
   ------------------------------------------------------------
   Copiada del boceto `coleccion.png`: logo grande a la izquierda,
   menú en MINÚSCULAS a la derecha y la bolsa al final. Sin barra
   sólida: va transparente sobre la foto.

   Excepción: en la home no se enseña hasta el Acto 2.

   Prefijo `cb-` para no chocar ni con `laora.css` ni con
   `ficha.css`, que ya definen `.nav`, `.brand` y `.b-nav`.
   ============================================================ */

.cb{position:absolute;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;padding:26px 3.2vw 0}
/* Cuando la cabecera va sobre fondo claro o tiene que acompañar al
   scroll, se le añade `cb-fija`. */
.cb.cb-fija{position:sticky;padding-bottom:22px;
  background:rgba(5,5,5,.82);backdrop-filter:blur(10px)}

/* ---------- logo ----------
   La O es el isotipo: círculo con el triángulo ámbar dentro. Es el
   mismo dibujo que la home, hecho con bordes CSS y no con una imagen,
   así que escala sin pixelarse. */
/* Peso NORMAL, no negrita: en el boceto los trazos son finos.
   Y el círculo de la O baja de .11em a .07em para que su grosor
   acompañe al de las letras; con la negrita anterior quedaba muy
   gordo al lado de una letra fina. */
/* `align-items:baseline` y NO `flex-start`: con flex-start el círculo de
   la O se colgaba del alto de la línea y quedaba más alto que el resto
   de las letras. Con baseline, su borde inferior se apoya en la misma
   línea de base que la «l», la «a» y la «r». */
.cb-marca{font-family:'Nunito Sans',sans-serif;font-weight:400;
  font-size:clamp(28px,2.4vw,36px);letter-spacing:-.01em;line-height:1;
  color:#fff;text-decoration:none;display:inline-flex;align-items:baseline}
/* El círculo se coloca a mano y NO por línea de base: un inline-flex
   vacío no tiene la línea de base que uno espera y quedaba 11 px por
   debajo. Con `line-height:1` y las métricas de Nunito Sans (ascendente
   31, descendente 11 sobre 30 px de cuerpo), la base cae a .829em del
   techo de la línea; como el círculo mide .74em, su techo va a
   .829 − .74 = .089em. Así se apoya en la misma base que la «l» y la «a». */
.cb-marca .o{width:.74em;height:.74em;border:.07em solid currentColor;border-radius:50%;
  display:inline-flex;align-items:flex-start;justify-content:center;
  align-self:flex-start;margin:.089em .015em 0;box-sizing:border-box}
/* La ® va MUY pequeña: en el boceto el logo no la lleva, así que
   aquí es un detalle discreto, no parte del dibujo.
   Va pegada a la «a» y a media altura, no colgada del techo: dentro
   de un flex, `vertical-align:super` no hace nada, así que se sube a
   mano desde la línea de base. */
.cb-marca sup{font-size:.26em;font-weight:400;line-height:1;
  margin-left:.06em;align-self:baseline;position:relative;top:-1.35em}
.cb-marca .o::before{content:"";width:0;height:0;margin-top:.06em;
  border-left:.17em solid transparent;border-right:.17em solid transparent;
  border-top:.24em solid var(--ambar,#F5D34D)}

/* ---------- menú ----------
   En minúsculas y sin el letter-spacing de tipo monoespaciado que
   llevaban las fichas: el boceto lo pide así. */
.cb-menu{display:flex;align-items:center;gap:clamp(22px,2.6vw,44px);
  font-family:'Nunito Sans',sans-serif;font-size:clamp(14px,1.15vw,16px);
  font-weight:400;color:#e6e3dc}
.cb-menu a{text-decoration:none;color:inherit;transition:color .2s}
.cb-menu a:hover{color:var(--ambar,#F5D34D)}
.cb-menu a.activo{color:var(--ambar,#F5D34D)}

/* ---------- bolsa ---------- */
.cb-bolsa{position:relative;display:inline-flex;padding:4px;color:#fff}
.cb-bolsa svg{stroke:currentColor}
.cb-bolsa:hover{color:var(--ambar,#F5D34D)}
.cb-cuenta{position:absolute;top:-3px;right:-5px;min-width:17px;height:17px;border-radius:999px;
  background:var(--ambar,#F5D34D);color:#141414;font-family:'Nunito Sans',sans-serif;
  font-size:10.5px;font-weight:800;line-height:17px;text-align:center}

/* ---------- sobre fondo claro ---------- */
.cb.cb-claro .cb-marca{color:#12161f}
.cb.cb-claro .cb-menu{color:#43413d}
.cb.cb-claro .cb-bolsa{color:#12161f}

@media(max-width:900px){
  .cb{padding:18px 5vw 0}
  /* El menú completo no cabe: se esconde y quedan logo y bolsa, que es
     lo que hacía ya la web. Un desplegable es otra tarea. */
  .cb-menu{display:none}
}

/* Entradas del menú que todavía no tienen página. Se ven igual que el
   resto para poder juzgar el diseño, pero NO son enlaces: no llevan a
   ningún sitio y no deben fingir que sí. En cuanto exista su destino,
   se cambian a <a> y esta regla sobra. */
.cb-pendiente{cursor:default;opacity:.55}

/* ============================================================
   VARIANTE DE LA HOME — aparece al primer roce del scroll
   ------------------------------------------------------------
   Al abrir NO se ve nada: la página empieza limpia, solo la foto y
   la tarjeta. En cuanto el scroll se mueve, la cabecera entra
   entera. Si se vuelve arriba del todo, se retira otra vez.

   z-index 15: por encima del texto del Acto 1 (3) y del botón de
   escape (6), y por debajo del modal del vídeo del Acto 5 (20),
   que debe seguir tapándolo todo cuando se abre.
   ============================================================ */
.cb-home{position:fixed;z-index:15;padding-bottom:20px;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1),
             visibility 0s linear .55s}
.cb-home.cb-visible{opacity:1;visibility:visible;transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1),
             visibility 0s}

/* El fondo NO es una barra maciza: es un velo que se desvanece hacia
   abajo. El desenfoque lleva la misma máscara, así que se apaga con
   él y no deja un corte recto a media pantalla. Es lo que hace que
   se lea como algo delicado y no como un menú pegado encima. */
.cb-home::before{content:"";position:absolute;inset:-1px 0 -26px;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,4,4,.92) 0%,rgba(4,4,4,.80) 38%,
                                    rgba(4,4,4,.45) 68%,rgba(4,4,4,0) 100%);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%)}
/* Los hijos por encima del velo. */
.cb-home > *{position:relative}

/* En la home el menú entra escalonado detrás del logo: unas décimas
   de diferencia bastan para que no aparezca todo de golpe. */
.cb-home .cb-menu{transition:opacity .5s ease .12s}
.cb-home .cb-bolsa{transition:opacity .5s ease .18s}
.cb-home:not(.cb-visible) .cb-menu,
.cb-home:not(.cb-visible) .cb-bolsa{opacity:0}

@media(prefers-reduced-motion:reduce){
  .cb-home,.cb-home .cb-menu,.cb-home .cb-bolsa{transition:none}
}