/* Cabecera de AGUA para los artículos que aún usan blog-styles.css.
   Alcance deliberadamente limitado al masthead: no toca el cuerpo del
   artículo, para no pelear con los estilos heredados. */

.masthead {
    background: rgba(247, 242, 234, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid #E2D8C8;
    position: sticky; top: 0; z-index: 100;
}
.masthead-inner {
    max-width: 1120px; margin: 0 auto; padding: 0 22px;
    height: 62px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mh-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.mh-brand img { height: 32px; width: auto; }
.mh-title {
    font-family: 'Fraunces', serif; font-weight: 600;
    font-size: 1.24rem; letter-spacing: 0.02em; color: #21302C;
    line-height: 1.1;
}
.mh-title span { color: #2F6F73; }
.mh-by {
    font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: #5C6B66;
    display: block; margin-top: -2px;
}
.mh-nav { display: none; gap: 24px; }
.mh-nav a {
    text-decoration: none; font-size: 0.84rem; font-weight: 600;
    color: #5C6B66; border: 0;
}
.mh-nav a:hover { color: #21302C; }
.mh-cta {
    background: #21302C; color: #F7F2EA; text-decoration: none;
    padding: 9px 18px; border-radius: 100px;
    font-size: 0.8rem; font-weight: 700; white-space: nowrap;
    transition: background 0.25s;
}
.mh-cta:hover { background: #1D4C50; }
@media (min-width: 860px) { .mh-nav { display: flex; } }