/* La cabecera de las páginas de dentro (servidor 1.9.32): fija arriba, con el ribete del escudo y el menú ordenado.
   Va encima de web.css (sus colores y sus letras). Sin JavaScript (estas páginas no lo llevan): los desplegables son
   «popover» de HTML y lo de encogerse al bajar va con el propio scroll (animation-timeline). Un navegador que no
   sepa de algo de esto ve la cabecera ya encogida, quieta, y el menú en fila (abajo, «sin popover»).

   Las piezas: la barra (.cab-barra: el azul del campo del escudo), el ribete (resources/views/web/cabecera/ribete,
   un SVG: el filo de oro, las puntas que caen y se afilan con el pomo de una espada del escudo engastado, y el pico
   del centro), el escudo de la hermandad colgando del pico (.cab-escudo: public/assets/logo.png, el de la portada),
   las luces que se mueven (.cab-luz, .cab-raya-brillo, .cab-escudo-brillo: en HTML y animando solo opacidad y
   movimiento, que el navegador hace sin repintar) y los desplegables (.cab-panel). */

@property --cab-k {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

:root {
    /* el azul del campo del escudo (#112539), con algo de luz arriba; el de abajo es también el de las puntas */
    --cab-azul-alto: #18345A;
    --cab-azul: #12294A;
    --cab-fondo: #0E2139;
    --cab-oro-claro: #FFF1C2;
    --cab-oro-sombra: #2A1C07;
    /* lo que tapa la cabecera al saltar a un ancla (#personajes…) */
    --cab-tapa: 96px;
}

html { scroll-padding-top: var(--cab-tapa); }

/* los dibujos del menú, una vez por página (resources/views/web/cabecera/iconos): no ocupan sitio */
.cab-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.cab {
    position: sticky;
    top: 0;
    z-index: 60;
    --cab-k: 0;
    /* (1.9.32.1) sin «overflow-x: clip»: Safari recorta con él también por abajo, y en el iPhone el ribete salía
       cortado a ras de la barra. Lo único que se salía por los lados, la luz de las gemas, va en su caja (.cab-luces) */
}

/* ─── la barra ────────────────────────────────────────────────────── */

.cab-barra {
    position: relative;
    background:
        radial-gradient(70% 160% at 50% -60%, rgba(150, 196, 240, .16), transparent 62%),
        linear-gradient(180deg, var(--cab-azul-alto) 0%, var(--cab-azul) 52%, var(--cab-fondo) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* el grano del pergamino (el mismo papel de la carta), muy suave */
.cab-barra::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../assets/papel.webp") 0 0 / 384px 384px;
    opacity: .09;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.cab-caja {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1192px;
    margin: 0 auto;
    padding: calc(12px - 5px * var(--cab-k)) 16px;
}
.ancho-mapas .cab-caja { max-width: 1432px; }

/* el nombre, en oro de verdad: el degradado del metal en las letras (la sombra, en el enlace: con «filter» en las
   propias letras, algún Safari las deja en blanco) */
.cab-marca {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 1 auto;
    min-width: 0;
    text-decoration: none;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .75)) drop-shadow(0 0 12px rgba(224, 182, 92, .18));
}
.cab-marca:hover { text-decoration: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .75)) drop-shadow(0 0 14px rgba(255, 220, 140, .45)); }
.cab-marca-nombre {
    overflow: hidden;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: calc(25px - 4px * var(--cab-k));
    line-height: 1.05;
    letter-spacing: .01em;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: linear-gradient(180deg, var(--cab-oro-claro) 0%, #F0CD7C 38%, #D3A64E 62%, #A97D2E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .cab-marca-nombre { background: none; color: var(--gold); }
}
/* el nombre de la página: solo cuando el menú va en el cajón */
.cab-marca-sub { display: none; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(234, 226, 208, .62); }

/* ─── el menú ─────────────────────────────────────────────────────── */

.cab-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.cab-lista { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cab-grupo { position: relative; }

.cab-enlace {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 7px 12px 9px;
    border: 0;
    background: none;
    color: rgba(234, 226, 208, .86);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18.5px;
    line-height: 1.1;
    letter-spacing: .015em;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, text-shadow .2s ease;
}
.cab-enlace:hover { color: var(--cab-oro-claro); text-decoration: none; text-shadow: 0 0 14px rgba(224, 182, 92, .5); }
.cab-enlace.activo { color: var(--gold); }
/* debajo, un filo de oro que crece desde el centro (al pasar el ratón; el de la página en la que estás, siempre) */
.cab-enlace::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--gold-deep) 12%, var(--cab-oro-claro) 50%, var(--gold-deep) 88%, transparent);
    transform: scaleX(0);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.cab-enlace:hover::after, .cab-enlace.activo::after { transform: scaleX(1); }
/* y en la de la página en la que estás, un rombo encendido en medio */
.cab-enlace.activo::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 5px;
    height: 5px;
    background: var(--cab-oro-claro);
    box-shadow: 0 0 8px rgba(255, 220, 140, .9);
    transform: translateX(-50%) rotate(45deg);
}
.cab-flecha {
    width: 15px;
    height: 15px;
    margin-left: 1px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .7;
    transition: transform .25s ease;
}
.cab-abre:has(+ :popover-open) .cab-flecha, .cab-quien:has(+ :popover-open) .cab-flecha { transform: rotate(180deg); }
.cab-abre:has(+ :popover-open) { color: var(--cab-oro-claro); }

/* lo que espera (las solicitudes, lo que te falta votar): el lacre de siempre (.menu-cuenta, en web.css) */
.cab-enlace .menu-cuenta { margin-left: 2px; font-family: var(--font-mono); }

/* ─── a la derecha: la consulta popular, tu cuenta, «Entrar» y el botón del cajón ─ */

.cab-lado { display: flex; align-items: center; gap: 10px; flex: none; }

.menu-popular {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 9px;
    border: 1px solid var(--gold-deep);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(224, 182, 92, .2), rgba(224, 182, 92, .05));
    box-shadow: 0 0 18px -6px rgba(224, 182, 92, .65), inset 0 1px 0 rgba(255, 246, 224, .16);
    color: var(--gold);
    font-size: 14px;
    white-space: nowrap;
}
.menu-popular:hover { text-decoration: none; filter: brightness(1.14); }
.menu-popular.activo { background: rgba(224, 182, 92, .26); }
.menu-urna { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.cab-quien {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 260px;
    margin: 0;
    padding: 3px 9px 3px 3px;
    border: 1px solid rgba(224, 182, 92, .3);
    border-radius: 999px;
    background: rgba(6, 13, 22, .38);
    color: var(--ink);
    font: 500 14px/1 var(--font-body);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.cab-quien:hover, .cab-quien:has(+ :popover-open) { border-color: var(--gold-deep); background: rgba(224, 182, 92, .09); box-shadow: 0 0 16px -6px rgba(224, 182, 92, .6); }
.cab-quien.activo { border-color: var(--gold-deep); }
.cab-quien .avatar { width: 30px; height: 30px; flex: none; border: 1px solid var(--gold-deep); border-radius: 50%; object-fit: cover; }
.avatar-letra { display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #2A527C, #12294A); color: var(--gold); font: 600 16px/1 var(--font-display); }
.cab-quien .quien-nombre { min-width: 0; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(234, 226, 208, .92); }

.cab-entrar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid var(--gold-deep);
    border-radius: 2px;
    background: rgba(169, 125, 46, .12);
    color: var(--gold);
    font: 500 13px/1.2 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease;
}
.cab-entrar:hover { background: var(--gold); color: #17120A; text-decoration: none; }
.cab-entrar svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.cab-hamburguesa, .cab-cerrar {
    display: none;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(224, 182, 92, .3);
    border-radius: 4px;
    background: rgba(6, 13, 22, .38);
    color: var(--gold);
    cursor: pointer;
}
.cab-hamburguesa svg, .cab-cerrar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cab-hamburguesa:hover, .cab-cerrar:hover { border-color: var(--gold-deep); background: rgba(224, 182, 92, .1); }

/* ─── el ribete ───────────────────────────────────────────────────── */

.cab-ribete {
    position: absolute;
    left: 0;
    top: calc(100% - 6px);
    width: 100%;
    height: 64px;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .55));
}
.cab-ribete .rb-fondo { fill: var(--cab-fondo); }
/* el filo: un canto oscuro, el oro, una luz arriba y una sombra abajo (el mismo en la raya y en las curvas) */
.cab-ribete .rb-trazo path, .cab-ribete .rb-trazo line { fill: none; stroke-linejoin: round; }
.cab-ribete .rb-sombra { stroke: var(--cab-oro-sombra); stroke-width: 5.4; }
.cab-ribete .rb-filo { stroke: #D4A84F; stroke-width: 3.2; }
.cab-ribete .rb-bajo { stroke: #8C6424; stroke-width: .9; }
.cab-ribete .rb-luz { stroke: var(--cab-oro-claro); stroke-width: .9; opacity: .85; }
.cab-ribete .rb-clavo { fill: url(#rb-clavo); stroke: var(--cab-oro-sombra); stroke-width: .8; }
/* las puntas: el mismo filo, pero relleno (se estrecha hasta acabar en punta) */
.cab-ribete .rb-sombra-banda { fill: var(--cab-oro-sombra); }
.cab-ribete .rb-filo-banda { fill: #D4A84F; }
.cab-ribete .rb-bajo-banda { fill: #8C6424; }
.cab-ribete .rb-luz-banda { fill: var(--cab-oro-claro); opacity: .85; }
.cab-ribete .rb-rombo { fill: url(#rb-clavo); stroke: var(--cab-oro-sombra); stroke-width: .9; }

/* las gemas brillan: encima de cada pomo, su luz respira y, de vez en cuando, destella; la de la derecha, a
   destiempo. El pomo está a 25 px del borde y 6 px por debajo de la barra (el ribete, centrado en (25, 12)).
   (1.9.32.1) Las dos, en una caja a lo ancho que no deja salir nada por los lados (la luz de la de la derecha se
   pasaba del borde y sacaba la página de la ventana): de 40 px por encima del borde de la barra a 60 por debajo. */
.cab-luces {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 40px);
    height: 100px;
    overflow: hidden;
    pointer-events: none;
}
.cab-luz {
    position: absolute;
    left: 25px;
    top: 46px;
    width: 0;
    height: 0;
    pointer-events: none;
}
.cab-luz-der { left: auto; right: 25px; }
.cab-luz::before, .cab-luz::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    will-change: opacity, transform;
}
.cab-luz::before {
    left: -26px;
    top: -26px;
    width: 52px;
    height: 52px;
    background: radial-gradient(circle, rgba(214, 250, 255, .85) 0, rgba(110, 214, 245, .42) 22%, rgba(69, 185, 224, .16) 46%, transparent 70%);
    mix-blend-mode: screen;
    animation: cab-gema 4.2s ease-in-out infinite;
}
/* el destello: una estrella de cuatro puntas, sobre la cara del cristal */
.cab-luz::after {
    left: -3px;
    top: -10px;
    width: 14px;
    height: 14px;
    border-radius: 0;
    background:
        linear-gradient(90deg, transparent 43%, #FFFFFF 50%, transparent 57%) center / 100% 2px no-repeat,
        linear-gradient(0deg, transparent 43%, #FFFFFF 50%, transparent 57%) center / 2px 100% no-repeat,
        radial-gradient(circle, #FFFFFF 0, rgba(255, 255, 255, .6) 18%, transparent 42%);
    opacity: 0;
    animation: cab-chispa 4.2s ease-in-out infinite;
}
.cab-luz-der::after { left: auto; right: -3px; }
.cab-luz-der::before, .cab-luz-der::after { animation-delay: -2.4s; }
@keyframes cab-gema {
    0%, 100% { opacity: .35; transform: scale(.72); }
    50% { opacity: 1; transform: scale(1.1); }
}
@keyframes cab-chispa {
    0%, 40%, 100% { opacity: 0; transform: scale(.25) rotate(0deg); }
    52% { opacity: 1; transform: scale(1.15) rotate(45deg); }
    64% { opacity: 0; transform: scale(.4) rotate(90deg); }
}
@keyframes cab-resplandor {
    0%, 100% { opacity: .25; }
    50% { opacity: .95; }
}

/* el brillo que recorre el filo, de vez en cuando (no pasa por las puntas ni por el broche, que se tuercen) */
.cab-raya-brillo {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 1.6px);
    height: 3.2px;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0 150px, #000 230px calc(50% - 150px), transparent calc(50% - 118px) calc(50% + 118px), #000 calc(50% + 150px) calc(100% - 230px), transparent calc(100% - 150px));
    mask-image: linear-gradient(90deg, transparent 0 150px, #000 230px calc(50% - 150px), transparent calc(50% - 118px) calc(50% + 118px), #000 calc(50% + 150px) calc(100% - 230px), transparent calc(100% - 150px));
}
.cab-raya-brillo::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    background: linear-gradient(90deg, transparent, rgba(255, 252, 235, .95), transparent);
    transform: translateX(-280px);
    will-change: transform;
    animation: cab-brillo 11s cubic-bezier(.45, 0, .25, 1) 2s infinite;
}
@keyframes cab-brillo {
    0% { transform: translateX(-280px); }
    38%, 100% { transform: translateX(100vw); }
}

/* el escudo de la hermandad, en el pico: grande, colgando, con su sombra, y de vez en cuando lo cruza un brillo (solo
   por donde hay escudo: la propia imagen hace de máscara). Es solo un dibujo: no se pulsa (lo de debajo, sí) */
.cab-escudo {
    position: absolute;
    left: 50%;
    top: calc(100% - 12px - 6px * var(--cab-k));
    z-index: 2;
    width: 100px;
    translate: -50% 0;
    scale: calc(1 - .44 * var(--cab-k));
    transform-origin: 50% 0;
    line-height: 0;
    pointer-events: none;
}
.cab-escudo img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .7)) drop-shadow(0 0 14px rgba(224, 182, 92, .16));
}
/* las gemas de las espadas del escudo, encendidas a la vez que las de las puntas (están en la imagen: 6,6 % y
   93,8 % de ancho, 4,6 % de alto; esta capa es 24 px más grande que el escudo, para que la luz no se corte) */
.cab-escudo::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: 1;
    background:
        radial-gradient(circle at calc(6.6% + 10.4px) calc(4.6% + 10.9px), rgba(200, 247, 255, .95) 0, rgba(92, 203, 238, .45) 4px, transparent 11px),
        radial-gradient(circle at calc(93.8% - 10.5px) calc(4.6% + 10.9px), rgba(200, 247, 255, .95) 0, rgba(92, 203, 238, .45) 4px, transparent 11px);
    mix-blend-mode: screen;
    will-change: opacity;
    animation: cab-resplandor 4.2s ease-in-out infinite;
}
.cab-escudo-brillo {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    -webkit-mask: url("../assets/logo.png") center / 100% 100% no-repeat;
    mask: url("../assets/logo.png") center / 100% 100% no-repeat;
}
.cab-escudo-brillo::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 46%;
    background: linear-gradient(105deg, transparent 10%, rgba(255, 249, 228, .5) 50%, transparent 90%);
    transform: translateX(-120%);
    will-change: transform;
    animation: cab-escudo-brillo 10s cubic-bezier(.45, 0, .25, 1) 3s infinite;
}
@keyframes cab-escudo-brillo {
    0% { transform: translateX(-120%); }
    28%, 100% { transform: translateX(240%); }
}

/* ─── los desplegables ────────────────────────────────────────────── */

.cab-panel {
    min-width: min(300px, calc(100vw - 16px));
    max-width: min(380px, calc(100vw - 16px));
    padding: 8px;
    border: 1px solid rgba(224, 182, 92, .36);
    border-radius: 6px;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(150, 196, 240, .09), transparent 70%),
        linear-gradient(180deg, #132B47, #0B1A2C);
    color: var(--ink);
    box-shadow: 0 22px 46px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    text-align: left;
}
.cab-seccion + .cab-seccion { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(224, 182, 92, .14); }
.cab-seccion-titulo {
    margin: 6px 10px 4px;
    font: 600 10.5px/1.2 var(--font-body);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
}
.cab-ops { margin: 0; padding: 0; list-style: none; }
.cab-op {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 9px 10px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .18s ease;
}
.cab-op:hover { background: rgba(224, 182, 92, .09); text-decoration: none; }
.cab-op.activo { background: rgba(224, 182, 92, .13); box-shadow: inset 2px 0 0 var(--gold); }
.cab-op-ico {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    fill: none;
    stroke: var(--gold-deep);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s ease, transform .2s ease, filter .2s ease;
}
.cab-op:hover .cab-op-ico, .cab-op.activo .cab-op-ico { stroke: var(--gold); }
.cab-op:hover .cab-op-ico { transform: translateY(-1px); filter: drop-shadow(0 0 6px rgba(224, 182, 92, .55)); }
.cab-op-texto { display: block; min-width: 0; }
.cab-op-nombre { display: block; font: 600 14.5px/1.3 var(--font-body); color: var(--ink); }
.cab-op-nota { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
.cab-op .menu-cuenta { margin-left: 7px; }

.cab-yo { margin: 4px 10px 8px; padding-bottom: 10px; border-bottom: 1px solid rgba(224, 182, 92, .14); }
.cab-yo-nombre { margin: 0; font: 600 20px/1.2 var(--font-display); color: var(--gold); }
.cab-yo-nivel { margin: 5px 0 0; }
.cab-yo-nivel .etiqueta { margin-left: 0; }
.cab-salir { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid rgba(224, 182, 92, .14); }

/* con «popover»: se abren con su botón, debajo de él (con «anchor»; si no, arriba a la derecha) y con un poco de
   movimiento; Esc, pulsar fuera u otro botón los cierran. Si no caben, se les baja por dentro. */
@supports selector(:popover-open) {
    .cab-panel[popover] {
        position: fixed;
        inset: auto;
        top: calc(64px + 12px);
        right: 12px;
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
        margin: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        transform: translateY(-8px) scale(.98);
        transform-origin: 50% 0;
        transition: opacity .18s ease, transform .24s cubic-bezier(.2, .7, .2, 1), overlay .24s allow-discrete, display .24s allow-discrete;
    }
    .cab-panel[popover]:popover-open { opacity: 1; transform: none; }
    @starting-style {
        .cab-panel[popover]:popover-open { opacity: 0; transform: translateY(-8px) scale(.98); }
    }
}
@supports (anchor-name: --a) and selector(:popover-open) {
    #cab-b-hermandad { anchor-name: --cab-hermandad; }
    #cab-b-gestion { anchor-name: --cab-gestion; }
    #cab-b-cuenta { anchor-name: --cab-cuenta; }
    #cab-p-hermandad, #cab-p-gestion, #cab-p-cuenta {
        top: auto;
        right: auto;
        margin-top: 12px;
        position-try-fallbacks: flip-inline;
    }
    #cab-p-hermandad { position-anchor: --cab-hermandad; position-area: block-end span-inline-end; }
    #cab-p-gestion { position-anchor: --cab-gestion; position-area: block-end span-inline-end; }
    #cab-p-cuenta { position-anchor: --cab-cuenta; position-area: block-end span-inline-start; }
}

/* ─── el cajón (cuando el menú no cabe) ───────────────────────────── */

.cab-cajon-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 4px 10px; }
.cab-cajon-cab .cab-marca-nombre { font-size: 22px; }
.cab-cajon .cab-cerrar { display: grid; }
.cab-cajon-grupo { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(224, 182, 92, .16); }
.cab-cajon-titulo { margin: 4px 10px 6px; font: 600 18px/1.2 var(--font-display); color: var(--gold); }
.cab-cajon-titulo .etiqueta { margin-left: 6px; }
.cab-cajon-popular { margin: 8px 10px 0; }
.cab-cajon-entrar { margin: 14px 10px 0; justify-content: center; }
@supports selector(:popover-open) {
    .cab-cajon[popover] {
        inset: 0 0 0 auto;
        top: 0;
        right: 0;
        width: min(360px, 88vw);
        height: 100%;
        max-height: 100%;
        max-width: none;
        padding: 14px 10px 24px;
        border-width: 0 0 0 1px;
        border-radius: 0;
        transform: translateX(24px);
        opacity: 0;
    }
    .cab-cajon[popover]:popover-open { transform: none; opacity: 1; }
    @starting-style {
        .cab-cajon[popover]:popover-open { transform: translateX(24px); opacity: 0; }
    }
    .cab-cajon::backdrop { background: rgba(4, 7, 11, .62); }
    /* con el cajón abierto, lo de debajo ni se ve ni se toca: tocar fuera para cerrarlo no pulsa lo que hubiera
       debajo, y con el teclado no se sale a lo tapado (vuelve un momento después de cerrarse) */
    :is(main.contenido, footer.pie, .cab-marca) { transition: visibility 0s linear .3s; }
    body:has(#cab-p-movil:popover-open) :is(main.contenido, footer.pie, .cab-marca) { visibility: hidden; transition: none; }
}

/* ─── al bajar: se encoge (con el propio scroll) ─────────────────── */

/* sin animation-timeline (Firefox, de momento), ya encogida y quieta: así lo que cuelga del ribete (el escudo) cabe
   encima de lo que se pega debajo al bajar (el índice de la ficha, la vista del widget, lo que se busca con «#») */
@supports not (animation-timeline: scroll()) {
    .cab { --cab-k: 1; }
}
@keyframes cab-encoger { to { --cab-k: 1; } }
@supports (animation-timeline: scroll()) {
    .cab { animation: cab-encoger linear both; animation-timeline: scroll(root block); animation-range: 0 140px; }
    /* la llegada desde la portada (web.css) anima todo lo de dentro: aquí, las dos cosas */
    html.llegada .cab {
        animation: llegada-asentarse 1.2s cubic-bezier(.2, .7, .2, 1) .06s both, cab-encoger linear both;
        animation-timeline: auto, scroll(root block);
        animation-range: normal, 0 140px;
    }
}

/* ─── lo que se tapaba al bajar ───────────────────────────────────── */

/* el índice de la ficha se queda pegado debajo de lo que cuelga de la cabecera encogida (el escudo) */
.indice { top: 80px; }
/* lo de arriba de cada página, con aire para lo que cuelga del ribete (las gemas y el escudo) */
.contenido { padding-top: 72px; }

/* ─── anchos ──────────────────────────────────────────────────────── */

/* hasta 1240 px: el menú, más junto */
@media (max-width: 1240px) {
    .cab-enlace { padding-inline: 9px; font-size: 17.5px; }
    .cab-enlace::after { left: 9px; right: 9px; }
    .cab-quien .quien-nombre { max-width: 10ch; }
}
/* (1.9.42) el menú más largo (siete: desde que hay «Museo», el de los oficiales con los mapas), siempre más junto: que
   quepa con la consulta popular y la cuenta a la derecha */
.cab-nav-largo .cab-enlace { padding-inline: 8px; font-size: 18px; }
.cab-nav-largo .cab-enlace::after { left: 8px; right: 8px; }
@media (max-width: 1240px) {
    .cab-nav-largo .cab-enlace { padding-inline: 7px; font-size: 16.5px; }
    .cab-nav-largo .cab-enlace::after { left: 7px; right: 7px; }
}
/* (1.9.32.2) con el menú en la barra (de 1.141 px para arriba: lo contrario de la regla siguiente), el menú, centrado
   con el escudo, que cuelga del centro de la página (Eduard, 10-oct: «centrar el menú de arriba… para que no quede así
   de torcido»). Hasta la 1.9.32.1 se centraba en el hueco entre el nombre y lo de la derecha, que no miden lo mismo:
   sin entrar, 21 px a la derecha del escudo. Ahora, tres columnas: las de los lados crecen a la vez y miden lo mismo,
   así que la de en medio cae en el centro. El nombre y lo de la derecha no se mueven (cada uno, pegado a su borde,
   como antes). Si un lado no cabe en su mitad (con la consulta popular y la cuenta, a la derecha), se queda con lo
   suyo y el menú se aparta lo justo, a 24 px como poco; y si ni así cabe, se estrecha y se reparte como antes. */
@media not all and (max-width: 1140px) {
    .cab-caja {
        display: grid;
        grid-template-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr);
        column-gap: 24px;
    }
    .cab-marca { grid-column: 1; justify-self: start; }
    .cab-nav { grid-column: 2; }
    .cab-lado { grid-column: 3; justify-self: end; }
}
/* hasta 1140 px (lo que necesita el menú del creador, el más largo): el menú, en el cajón; arriba, el nombre (con el
   de la página), tu cara y el botón */
@media (max-width: 1140px) {
    .cab-nav { display: none; }
    .cab-lado { margin-left: auto; }
    .cab-hamburguesa { display: grid; }
    .cab-marca-sub { display: block; }
    .cab-marca-nombre { font-size: calc(22px - 3px * var(--cab-k)); }
    .cab-quien { padding: 3px; }
    .cab-quien .quien-nombre, .cab-quien .cab-flecha { display: none; }
    .cab-lado .menu-popular .solo-ancho { display: none; }
}
@media (max-width: 980px) {
    .cab-escudo { width: 84px; top: calc(100% - 11px - 5px * var(--cab-k)); }
    .contenido { padding-top: 64px; }
}
@media (max-width: 520px) {
    .cab-caja { gap: 8px; padding-inline: 12px; }
    .cab-lado { gap: 8px; }
    .cab-lado .menu-popular { gap: 0; padding: 4px 9px; font-size: 0; }
    .cab-lado .menu-popular .menu-punto { margin-left: 4px; }
    .cab-escudo { width: 76px; }
    .contenido { padding-top: 58px; }
}
/* en lo más estrecho, el nombre más pequeño y «Entrar», solo el dibujo */
@media (max-width: 380px) {
    .cab-marca-nombre { font-size: 18px; }
    .cab-marca-sub { letter-spacing: .14em; }
    .cab-entrar { padding: 7px 9px; }
    .cab-entrar-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cab-hamburguesa { width: 36px; height: 36px; }
}

/* ─── sin popover (un navegador de antes) ─────────────────────────── */

/* los desplegables, al pasar el ratón o con el teclado; y, si no cabe, el menú en su propia fila (sin cajón) */
@supports not selector(:popover-open) {
    .cab-panel { display: none; position: absolute; top: 100%; left: 0; z-index: 70; }
    .cab-panel-cuenta { left: auto; right: 0; }
    .cab-grupo:hover > .cab-panel, .cab-grupo:focus-within > .cab-panel,
    .cab-lado:hover > .cab-panel-cuenta, .cab-lado:focus-within > .cab-panel-cuenta { display: block; }
    .cab-cajon, .cab-hamburguesa { display: none !important; }
    @media (max-width: 1140px) {
        .cab-caja { flex-wrap: wrap; }
        /* el menú, en su propia fila (o en varias: con una barra de desplazamiento, los desplegables quedarían cortados
           dentro), y cada desplegable, debajo de la cabecera y a lo ancho (sin «position», el de cada grupo se
           coloca respecto a .cab-caja; empieza un poco más arriba, para que el ratón no lo pierda al bajar a él) */
        .cab-nav { display: flex; order: 3; flex: 0 0 100%; justify-content: flex-start; }
        .cab-lista { flex-wrap: wrap; }
        .cab-grupo { position: static; }
        .cab-grupo > .cab-panel { top: calc(100% - 14px); left: 8px; right: 8px; max-width: none; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .cab-luz::before, .cab-luz::after, .cab-raya-brillo::before, .cab-escudo::before, .cab-escudo-brillo::before { animation: none; }
    .cab-luz::after, .cab-raya-brillo, .cab-escudo-brillo { display: none; }
    .cab-luz::before { opacity: .6; transform: none; }
    .cab-enlace::after, .cab-panel[popover], .cab-flecha { transition: none; }
    /* (y quieta, ya encogida, como sin animation-timeline) */
    .cab { animation: none !important; --cab-k: 1; }
}
@media print {
    .cab { position: static; }
    .cab-ribete, .cab-escudo, .cab-luces, .cab-raya-brillo, .cab-lado, .cab-nav { display: none; }
    .cab-barra { background: none; box-shadow: none; }
    .cab-marca { filter: none; }
    .cab-marca-nombre { background: none; color: #000; }
    .contenido { padding-top: 0; }
}