.header {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(20, 31, 48, 0.35) 18%, rgba(9, 16, 28, 0.62) 74%);
    border: 1px solid rgba(207, 220, 241, 0.27);
    color: #f2f5fb;
    height: 80px;
    display: flex;
    align-items: center;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(2, 8, 18, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    padding: 0 30px;
    max-width: 85%;
    margin: 0 auto 34px;
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    gap: 12px;
}

.header-title {
    min-width: 0;
    flex: 1 1 auto;
}

.header-title h1 {
    font-size: 24px;
    margin: 0;
    letter-spacing: 0.015em;
    white-space: nowrap;
    /* La elipsis exige overflow:hidden, y eso recorta la sombra contra el borde
     * de la caja: el h1 mide 28px de alto y la sombra baja 24px, asi que se
     * cortaba en seco. El relleno le da sitio dentro del recorte y el margen
     * negativo lo descuenta, de modo que nada se mueve de sitio. */
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px 18px;
    margin: 0 -10px -18px;
    /* Mismo esquema que la portada: una capa de contacto corta y una ambiental.
     * Aqui con menos recorrido, que el rotulo es de 24px y no de 40. */
    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.7),
        0 8px 16px rgba(0, 0, 0, 0.5);
}

/* El subtitulo no lleva recorte, pero si la misma sombra: si no, queda plano
   justo debajo de un titulo con relieve. */
.header-title .total {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.6),
        0 5px 10px rgba(0, 0, 0, 0.4);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
}

.header-nav :is(a, summary) {
    color: #f2f5fb;
    text-decoration: none;
    font-size: 16px;
    margin-left: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(198, 214, 242, 0.16);
    /* Contacto + ambiental fuera, y un filo claro arriba dentro: las tres son
     * las mismas piezas que dan el relieve en la portada, a escala de boton. */
    box-shadow:
        0 2px 3px rgba(2, 8, 18, 0.5),
        0 8px 16px rgba(2, 8, 18, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    flex: 0 0 auto;
}

/* El icono tiene su propia sombra, igual que en la portada: sin ella el trazo
 * se queda pegado al fondo del boton y el relieve se nota a medias. */
.header-nav :is(a, summary) svg {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}

.header-nav :is(a, summary):hover {
    transform: translateY(-2px);
    border-color: rgba(216, 228, 248, 0.46);
    background: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 4px 5px rgba(2, 8, 18, 0.55),
        0 14px 24px rgba(2, 8, 18, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* Contador de visitas ajenas desde Colombia sobre el icono de visitas */
.header-nav :is(a, summary).visits-link {
    position: relative;
    overflow: visible;
}

.total {
    margin: 4px 0 0;
    color: rgba(227, 233, 245, 0.76);
}

@media (max-width: 1080px) {
    .header-container {
        max-width: 100%;
        padding: 0 6px;
    }

    .header {
        max-width: 94%;
        height: auto;
        padding: 12px 14px;
        margin-bottom: 18px;
        border-radius: 14px;
    }

    .header-title h1 {
        font-size: 18px;
    }

    .header-nav {
        gap: 8px;
    }

    .header-nav :is(a, summary) {
        width: 34px;
        height: 34px;
    }

    .total {
        font-size: 14px;
    }
}

@media (max-width: 720px) {
    .header {
        max-width: 96%;
        padding: 10px 12px;
    }

    .header-container {
        align-items: flex-start;
        gap: 10px;
    }

    .header-title {
        flex: 1 1 120px;
    }

    .header-title h1 {
        font-size: 17px;
    }

    .total {
        font-size: 13px;
    }

    .header-nav {
        flex: 1 1 auto;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
        max-width: 56%;
    }

    .header-nav :is(a, summary) {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    .header-nav :is(a, summary) svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 520px) {
    .header-container {
        gap: 8px;
    }

    .header-title {
        flex-basis: 104px;
    }

    .header-title h1 {
        font-size: 16px;
    }

    .header-nav {
        gap: 5px;
        max-width: 60%;
    }

    .header-nav :is(a, summary) {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .header-nav :is(a, summary) svg {
        width: 14px;
        height: 14px;
    }

    .visits-badge {
        top: -5px;
        right: -5px;
        min-width: 14px;
        height: 14px;
        padding: 0 3px;
        line-height: 12px;
    }
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    .header {
        background: rgba(11, 20, 44, 0.92) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: 0 4px 12px rgba(2, 8, 18, 0.26) !important;
    }

    .header-nav :is(a, summary) {
        transition: none !important;
    }

    .header-nav :is(a, summary):hover {
        transform: none !important;
    }
}

/* El menú conserva las dimensiones de los iconos del encabezado. */
.header:has(.header-tools) { position: relative; z-index: 20; }
.header-tools { position: relative; flex: 0 0 auto; }
.header-tools summary { cursor: pointer; list-style: none; }
.header-tools summary::-webkit-details-marker { display: none; }
.header-tools summary:focus-visible { outline: 2px solid #b7d4ff; outline-offset: 3px; }
/* El panel es la misma pieza de cristal que la cabecera, no una caja aparte:
   antes iba con un azul plano y un borde propio, sin desenfoque ni filo, y se
   veia pegado debajo como si fuera de otra pagina. El fondo termina casi opaco
   porque esto se abre sobre el contenido y el texto tiene que leerse. */
.header-tools-panel {
    position: absolute; right: 0; top: calc(100% + 10px);
    /* Se ajusta al texto mas largo en vez de fijar un ancho: con un ancho fijo
       sobraba sitio a los lados de casi todas las opciones. La columna es
       obligatoria: las opciones son `inline-flex` y con `max-content` se
       pondrian en fila. */
    display: flex; flex-direction: column;
    width: max-content; min-width: 140px; max-width: calc(100vw - 40px); padding: 6px;
    border: 1px solid rgba(207, 220, 241, 0.27);
    border-radius: 16px;
    /* El degradado de `.header`, pero algo mas cerrado: el panel se abre sobre
       las tarjetas y con la transparencia de la cabecera el texto se perdia
       contra lo que hubiera detras. Sigue dejando pasar el morado del fondo,
       que es lo que evitaba que se viera como un recuadro azul aparte. */
    background: linear-gradient(155deg,
        rgba(255, 255, 255, 0.16),
        rgba(20, 31, 48, 0.62) 18%,
        rgba(9, 16, 28, 0.86) 74%);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    /* Contacto, ambiental y filo claro arriba: las mismas tres capas que dan
       relieve a la cabecera y a sus botones. */
    box-shadow:
        0 4px 6px rgba(2, 8, 18, 0.5),
        0 18px 34px rgba(2, 8, 18, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Una lista, no una fila de botones: sin recuadro propio, sin sombra y sin el
   salto vertical del hover, que en un menu desplegable descoloca el puntero.
   Filas bajas y texto centrado, para que el panel no parezca una columna de
   botones sueltos. */
.header-nav .header-tools-panel a {
    width: auto; height: auto; min-height: 30px; padding: 6px 10px;
    justify-content: center; text-align: center; font-size: 13.5px; font-weight: 700;
    border: 1px solid transparent; border-radius: 9px;
    background: transparent; box-shadow: none; transform: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.header-nav .header-tools-panel a + a { margin-top: 1px; }

.header-nav .header-tools-panel a:hover,
.header-nav .header-tools-panel a:focus-visible {
    transform: none;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(216, 228, 248, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* El panel entra con un desplegado corto para que no aparezca de golpe. */
.header-tools[open] .header-tools-panel {
    animation: header-tools-in 0.16s ease-out;
    transform-origin: top right;
}

@keyframes header-tools-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .header-tools[open] .header-tools-panel { animation: none; }
}