/* ============================================================
   Menu del navbar.
   Anade el hover en pastilla, el desplegable de "Salud" y los
   iconos/descripciones de cada tema. Se carga DESPUES de
   bulma.css para poder reescribir .navbar-item sin !important.
   ============================================================ */

:root {
    --nav-ink: #373849;
    --nav-ink-soft: #6b6f7b;
    /* Sobre el gris azulado del navbar, una pastilla mas oscura que el
       fondo: en blanco quedaba plana y se comia el contraste del texto. */
    --nav-hover: rgb(55 56 73 / 8%);
    --nav-active: rgb(55 56 73 / 12%);
    /* El panel repite el material del navbar, no un blanco solido. */
    --nav-panel: rgb(238 241 246 / 80%);
    --nav-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
}

/* ---------- Enlace de primer nivel ---------- */

/* La pastilla de la referencia: fondo claro con esquinas completas que
   aparece al pasar por encima. La transicion es lo que da la sensacion
   de que el fondo "crece" en lugar de encenderse de golpe. */
.navbar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    background-color: transparent;
    color: var(--nav-ink);
    font-family: 'satoshiregular';
    /* En rem y no en em: el toggle es un <button>, que no hereda la
       tipografia del navbar, y sin esto quedaba mas pequeno que el
       resto de enlaces. */
    font-size: 1rem;
    cursor: pointer;
    border-radius: 999px;
    transition: background-color 0.25s var(--nav-ease),
                color 0.25s var(--nav-ease);
}

    .navbar .nav-link:hover,
    .navbar .nav-link:focus-visible {
        background-color: var(--nav-hover);
        color: var(--nav-ink);
        outline: none;
    }

/* Mientras el desplegable esta abierto la pastilla se queda marcada,
   como "Platform" en la referencia. */
.navbar .nav-group.is-open .nav-toggle {
    background-color: var(--nav-active);
}

/* La flecha gira al abrir. */
.nav-caret {
    flex: none;
    width: 13px;
    height: 13px;
    margin-left: 0.1rem;
    color: var(--nav-ink-soft);
    transition: transform 0.28s var(--nav-ease);
}

.nav-group.is-open .nav-caret {
    transform: rotate(180deg);
}

/* Icono en cuadrado redondeado, como las ilustraciones de la referencia. */
.nav-ico {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    font-size: 0.95rem;
    color: var(--nav-ink);
    background-color: #eef1f6;
    border-radius: 12px;
    transition: background-color 0.2s var(--nav-ease),
                color 0.2s var(--nav-ease);
}

.nav-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.nav-name {
    font-family: 'satoshimedium';
    line-height: 1.25;
    color: var(--nav-ink);
}

.nav-desc {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--nav-ink-soft);
    white-space: normal;
}

/* ---------- Escritorio ---------- */

@media screen and (min-width: 1024px) {
    /* Arriba solo va el nombre: los iconos y las descripciones son cosa
       del desplegable y del menu movil, igual que en la referencia. */
    .navbar-start > .nav-link .nav-ico,
    .navbar-start > .nav-link .nav-desc,
    .nav-toggle .nav-ico,
    .nav-toggle .nav-desc {
        display: none;
    }

    .navbar .nav-link {
        /* .navbar-start estira sus hijos, asi que la pastilla ocupaba todo
           el alto de la barra. Con align-self la altura la marca el propio
           relleno y queda el aire de arriba y abajo de la referencia. */
        align-self: center;
        padding: 0.5rem 0.95rem;
        margin: 0 0.1rem;
    }

    .nav-group {
        position: relative;
        padding: 0;
        display: flex;
        align-items: center;
    }

    /* Cerrado no ocupa sitio ni recibe clics; se abre bajando y creciendo
       un poco, que es lo que hace que se sienta fluido en vez de un simple
       encendido.

       Va en position:fixed porque navbar-menu.js lo saca del <nav>: el
       navbar tiene su propio backdrop-filter y eso crea una "raiz de
       fondo", de modo que un descendiente suyo no puede desenfocar la
       pagina que hay detras. Fuera del navbar el efecto glass si funciona.
       Las coordenadas las calcula el script al abrir. */
    .nav-panel {
        position: fixed;
        z-index: 35;
        width: 21rem;
        padding: 0.75rem;
        background-color: var(--nav-panel);
        -webkit-backdrop-filter: saturate(180%) blur(32px);
        backdrop-filter: saturate(180%) blur(32px);
        border: 1px solid rgb(255 255 255 / 55%);
        border-radius: 22px;
        box-shadow: 0 20px 40px -18px rgb(31 35 51 / 22%);

        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, -10px) scale(0.97);
        transform-origin: top center;
        transition: opacity 0.28s var(--nav-ease),
                    transform 0.28s var(--nav-ease),
                    visibility 0s linear 0.28s;
    }

    .nav-panel.is-open {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0) scale(1);
        transition-delay: 0s;
    }

    /* Puente invisible entre la pastilla y el panel: sin el, el menu se
       cierra al cruzar el hueco con el raton. */
    .nav-panel::before {
        content: "";
        position: absolute;
        top: -0.75rem;
        left: 0;
        right: 0;
        height: 0.75rem;
    }

    .nav-panel-label {
        margin: 0.35rem 0 0.4rem 0.75rem;
        font-family: 'satoshimedium';
        font-size: 0.72rem;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--nav-ink-soft);
    }

    /* Las filas entran escalonadas, con un retraso minimo entre una y
       otra: el mismo recurso que usan los menus de la referencia. */
    .nav-row {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 0.3s var(--nav-ease),
                    transform 0.3s var(--nav-ease),
                    background-color 0.2s var(--nav-ease);
    }

    .nav-panel.is-open .nav-row {
        opacity: 1;
        transform: translateY(0);
    }

        .nav-panel.is-open .nav-row:nth-child(2) { transition-delay: 0.04s; }
        .nav-panel.is-open .nav-row:nth-child(3) { transition-delay: 0.08s; }
        .nav-panel.is-open .nav-row:nth-child(4) { transition-delay: 0.12s; }
        .nav-panel.is-open .nav-row:nth-child(5) { transition-delay: 0.16s; }

    /* Dentro del panel el icono no puede llevar el mismo gris que el
       fondo: se aclara para que siga leyendose como un cuadrado. */
    .nav-panel .nav-ico {
        background-color: rgb(255 255 255 / 75%);
    }
}

/* ---------- Filas del desplegable ---------- */

.nav-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.75rem;
    border-radius: 14px;
    text-decoration: none;
    transition: background-color 0.2s var(--nav-ease);
}

    /* El mismo tono que la pastilla del navbar, para que el resaltado
       sea uno solo en toda la barra. */
    .nav-row:hover {
        background-color: var(--nav-hover);
    }

        .nav-row:hover .nav-ico {
            background-color: #fff;
        }

/* ---------- Movil ---------- */

@media screen and (max-width: 1023px) {
    /* Aqui todo sigue dentro del boton de menu, asi que el grupo se
       muestra desplegado: la fila que en escritorio abre el panel se
       convierte en el titulo de la seccion. */
    .navbar-menu .nav-link {
        margin: 8px 15px;
        padding: 12px 18px;
        border-radius: 22px;
        background-color: rgb(249 251 255 / 85%);
        justify-content: flex-start;
        text-align: left;
    }

        .navbar-menu .nav-link:hover {
            background-color: #fff;
        }

    .nav-group {
        display: block;
        padding: 0;
    }

    /* El titulo del grupo lo da la etiqueta del panel, asi que la fila
       que en escritorio abre el desplegable aqui sobra. */
    .navbar-menu .nav-toggle {
        display: none;
    }

    .nav-panel {
        display: block;
        /* .navbar-item hereda font-size:1.5em de Bulma y el panel cuelga
           de uno: se vuelve al tamano normal para las filas. */
        font-size: 1rem;
        margin: 0 15px 8px 15px;
        padding: 0.35rem 0.4rem 0.5rem 0.4rem;
        background-color: rgb(249 251 255 / 85%);
        border-radius: 22px;
    }

    .nav-panel-label {
        margin: 0.55rem 0 0.35rem 0.9rem;
        font-family: 'satoshimedium';
        font-size: 0.72rem;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--nav-ink-soft);
    }

    .nav-row {
        padding: 0.65rem 0.85rem;
        border-radius: 18px;
    }

        .nav-row:hover {
            background-color: var(--nav-hover);
        }

    .nav-ico {
        width: 2.15rem;
        height: 2.15rem;
        border-radius: 11px;
    }
}

/* A quien pida menos movimiento se le deja el menu, pero sin viaje. */
@media (prefers-reduced-motion: reduce) {
    .navbar .nav-link,
    .nav-panel,
    .nav-row,
    .nav-caret {
        transition-duration: 0.01ms !important;
    }
}