/* 1. Importación de la fuente desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

/* 2. Aplicación global a todo el sitio */
body, h1, h2, h3, h4, h5, h6, p, a, li, span, div {
    font-family: 'Inter', sans-serif !important;
}


.header {
    position: relative;
    top: -7px;
    background-color: #fff;
    min-width: 100%;
    z-index: 9;
}




body div:has(> .col.logo-klinikare):has(> .col.menu-klinikare){
    display: flex;
    flex-direction: row;
}


/* VISTA MOVIL */
@media only screen and (max-width: 600px) {
    
    body div:has(> .col.logo-klinikare):has(> .col.menu-klinikare) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important; 
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* 2. Ajustamos los hijos para que no ocupen todo el ancho */
    body div:has(> .col.logo-klinikare) > .col.logo-klinikare,
    body div:has(> .col.menu-klinikare) > .col.menu-klinikare {
        width: auto !important; /* Anula el s12 que los hace medir 100% */
        display: inline-block !important;
        float: none !important; /* Materialize suele usar floats, los matamos con flex */
        margin: 0 !important;
        padding: 0 10px !important; /* Un poco de aire entre ellos */
    }

    /* menú empuja todo a la derecha */
    body div:has(> .col.menu-klinikare) > .col.menu-klinikare {
        margin-left: auto !important;
    }
}