* {
    box-sizing:border-box
}

body{
    margin:0;
    font-family:Arial,sans-serif;
    background:#f4f6f9
}

header {
    background:#131313;
    color:#fff;
    padding: 20px;
    /*position: sticky;*/
    top: 0
}

.cabecera{
    max-width:1200px;
    margin:auto;
    display: flex;
    gap: 20px;
    align-items: center
}

.logo {
    width:72px;
    height:72px;
}

.titulo {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 2rem;
    color: #fff;
}

.subtitulo {
    margin: 0;
    font-size: 1.2rem;
    color: #ccc;
}

.separador {
    margin: 0 8px;
    color: #707070;
    font-weight: bold;
}

#busqueda {
    margin-top:15px;
    width:100%;
    padding:12px;
    border:none;
    border-radius:8px;
    font-size:1rem
}

main{
    max-width:1200px;
    margin:auto;
    padding:20px
}

h2 {
    margin:30px 0 20px
}

.grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,240px);
    gap:20px
}

.tarjeta{
    display:block;
    text-decoration:none;
    color:#222;background:#fff;
    padding:18px;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    border-top:6px solid;
    transition:.2s
}

.centro{
    border-color: #34ab3a
}

.conselleria{
    border-color: #1976d2
}
    
.manual{
    border-color:#ef6c00
}

.tarjeta:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 18px rgba(0,0,0,.15)
}

p {
    color:#555
}

@media(max-width:700px){
    .cabecera {
        flex-direction:column;
        text-align:center
    }
}