/* ================================================================
   CABECERA CIBERAULA · EL OBSERVATORIO DE LA IA
   /dinamico/css/cabecera-ciberaula-observatorio.css
   Creado: 2026-05-08
   Cabecera reducida 60px / logo 40px para ceder protagonismo
   a la .obs-masthead de la seccion.
   ================================================================ */

.cb-obs-header{
    position:relative;
    width:1150px;
    height:60px;
    margin:0 auto;
    overflow:hidden;
    background:linear-gradient(135deg,#132d4f 0%,#1a4068 25%,#1f5280 50%,#1d6090 75%,#163a56 100%);
}

.cb-obs-header::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg,#132d4f,rgba(0,210,240,.45) 15%,rgba(0,225,250,.75) 50%,rgba(0,210,240,.45) 85%,#163a56);
    pointer-events:none;
}

.cb-obs-content{
    position:relative;
    z-index:10;
    width:100%;
    height:100%;
    padding:4px 24px;
    font-family:'Montserrat',Arial,sans-serif;
}

.cb-obs-main{
    display:flex;
    align-items:center;
    height:100%;
}

.cb-obs-logo{align-self:center}
.cb-obs-logo a{display:block}
.cb-obs-logo img{
    height:40px !important;
    width:auto !important;
    display:block !important;
    max-height:none !important;
}

.cb-obs-inicio{
    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 9px;
    color:rgba(255,255,255,.72);
    text-decoration:none;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:1.2px;
    text-transform:uppercase;
    border-radius:4px;
    transition:color .2s ease, background .2s ease;
}
.cb-obs-inicio:hover,
.cb-obs-inicio:focus{
    color:#fff;
    background:rgba(255,255,255,.08);
    text-decoration:none;
}
.cb-obs-inicio svg{
    flex-shrink:0;
    opacity:.85;
}

/* RESPONSIVE */
@media(max-width:1170px){
    .cb-obs-header{width:100%}
}

@media(max-width:991px){
    .cb-obs-header{height:auto;min-height:56px}
    .cb-obs-content{padding:8px 20px}
    .cb-obs-logo img{height:36px !important}
    .cb-obs-inicio{right:16px;font-size:.68rem}
}

@media(max-width:649px){
    .cb-obs-header{height:auto;min-height:52px}
    .cb-obs-content{padding:8px 16px}
    .cb-obs-main{justify-content:center}
    .cb-obs-logo{align-self:center}
    .cb-obs-logo img{height:32px !important}
    .cb-obs-inicio{
        right:10px;
        font-size:.62rem;
        letter-spacing:1px;
        padding:4px 7px;
    }
}

@media(max-width:419px){
    .cb-obs-content{padding:7px 12px}
    .cb-obs-logo img{height:28px !important}
    .cb-obs-inicio{font-size:.6rem;padding:3px 6px;right:8px}
}