/* HEADER PRINCIPAL */
.site-header{
background:#d9d9d9;                     /* color del header */
border-bottom:1px solid rgba(0,0,0,.15); /* línea inferior */

position:fixed;                         /* fija el header en la pantalla */
top:0;                                  /* lo coloca arriba del todo */
left:0;                                 /* empieza desde el borde izquierdo */
width:100%;                             /* ocupa todo el ancho */
z-index:1000;                           /* asegura que quede por encima del contenido */
}

/* CONTENEDOR INTERNO DEL HEADER */
.header-inner{
max-width:1200px;                   /* ancho máximo del header */
margin:0 auto;                      /* centra el header horizontalmente */
padding:10px 30px;                  /* espacio interior */

display:flex;                       /* activa layout flexible */
align-items:center;                 /* alinea logo, titulo y menu verticalmente */
justify-content:space-between;      /* separa logo / titulo / menu */
gap:30px;                           /* espacio entre elementos */
}


/* LOGO */
.logo img{
height:70px;                        /* tamaño del logo */
display:block;                      /* evita espacio extraño debajo de la imagen */
}


/* TITULO CENTRAL */
.site-title{
color:#020101;                      /* color del texto */
flex:1;                             /* permite que ocupe el espacio central */
text-align:center;                  /* centra el texto */
font-size:18px;                     /* tamaño del titulo */
font-weight:700;                    /* grosor de letra */
letter-spacing:1px;                 /* espacio entre letras */
}


/* MENU DE NAVEGACION */
.main-nav{
display:flex;                       /* coloca los links en linea */
gap:30px;                           /* separación entre links */
}


/* LINKS DEL MENU */
.main-nav a{
color:black;                        /* color del texto */
text-decoration:none;               /* elimina subrayado */
font-weight:bold;                   /* grosor de letra */
font-size:16px;                     /* tamaño de texto */
}


/* EFECTO HOVER DEL MENU */
.main-nav a:hover{
opacity:0.6;                        /* hace el link ligeramente más tenue al pasar el ratón */
}