/* ==========================================================================
   Blog
   --------------------------------------------------------------------------
   Compacto y a la manera del panel: cabecera breve, una caja de filtros y la
   lista en filas. Antes era un titular de 68 px y tarjetas de 230 px de alto,
   que con tres artículos llenaba dos pantallas sin decir nada. Aquí caben
   ocho de un vistazo.
   ========================================================================== */

.blog {
    --blog-tinta: #2b3a4d;
    --blog-suave: #5f6e81;
    --blog-tenue: #69778a;
    --blog-linea: #e4eaf1;
    --blog-fondo: #f7f9fc;
    color: var(--blog-tinta);
}

.blog-ancho {
    width: min(100%, 1180px);
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 32px);
}

/* ------------------------------------------------------------- cabecera */
.blog-cabecera {
    padding: 24px 0 20px;
    border-bottom: 1px solid var(--blog-linea);
    background: #fff;
}
.blog-cabecera-fila {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 32px;
    flex-wrap: wrap;
}
.blog-cabecera-texto { min-width: 0; }

/* Buscador de una sola línea, dentro de la cabecera. Antes ocupaba una
   caja propia de noventa píxeles para una casilla y un botón. */
.blog-oculto {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.blog-buscador {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 380px;
    height: 42px;
    padding-left: 38px;
    border: 1px solid var(--blog-linea);
    border-radius: 10px;
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.blog-buscador:focus-within {
    border-color: color-mix(in srgb, var(--marca-marron, #6B1E2E) 45%, var(--blog-linea));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-marron, #6B1E2E) 10%, transparent);
}
.blog-buscador svg {
    position: absolute;
    left: 13px;
    width: 16px; height: 16px;
    fill: none;
    stroke: var(--blog-tenue);
    stroke-width: 1.9;
    stroke-linecap: round;
}
.blog-buscador input {
    min-width: 0;
    flex: 1 1 auto;
    height: 100%;
    padding: 0 8px 0 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--blog-tinta);
}
.blog-buscador input:focus { outline: none; }
.blog-buscador button {
    flex: 0 0 auto;
    height: 34px;
    margin-right: 4px;
    padding: 0 16px;
    border: 0;
    border-radius: 7px;
    background: var(--marca-marron, #6B1E2E);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}
.blog-eyebrow {
    display: inline-block;
    color: var(--marca-marron, #6B1E2E);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.blog-cabecera h1 {
    margin: 7px 0 6px;
    font-size: clamp(25px, 3vw, 32px);
    line-height: 1.12;
    letter-spacing: -.025em;
    font-weight: 800;
}
.blog-cabecera p {
    margin: 0;
    max-width: 66ch;
    color: var(--blog-suave);
    font-size: 14px;
    line-height: 1.6;
}
.blog-contador {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--blog-linea);
    border-radius: 12px;
    background: var(--blog-fondo);
    text-align: center;
}
.blog-contador dt {
    color: var(--blog-tenue);
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.blog-contador dd {
    margin: 3px 0 0;
    font-size: 21px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

/* -------------------------------------------------------------- filtros */
.blog-cuerpo { padding: 22px 0 34px; }

/* Los artículos a la izquierda, el índice a la derecha. El lateral se
   queda pegado al desplazarse: el índice sirve mientras se lee. */
.blog-reja {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 244px;
    gap: clamp(20px, 3vw, 38px);
    align-items: start;
}
.blog-principal { min-width: 0; }
.blog-lateral { position: sticky; top: 84px; display: grid; gap: 16px; }

.blog-indice {
    padding: 14px 16px 6px;
    border: 1px solid var(--blog-linea);
    border-radius: 13px;
    background: #fff;
}
.blog-indice h2 {
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blog-tenue);
}
.blog-tema {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--blog-linea);
    color: var(--blog-suave);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}
.blog-tema:first-of-type { border-top: 0; }
.blog-tema b {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--blog-tenue);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.blog-tema:hover { color: var(--blog-tinta); }
.blog-tema.es-activo { color: var(--marca-marron, #6B1E2E); font-weight: 750; }
.blog-tema.es-activo b {
    background: var(--marca-marron, #6B1E2E);
    color: #fff;
}

.blog-indice-vida { padding-bottom: 14px; }
.blog-vida-enlace { display: block; text-decoration: none; }
.blog-vida-enlace img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 9px;
    margin-bottom: 8px;
}
.blog-vida-enlace span {
    display: block;
    color: var(--blog-suave);
    font-size: 12.5px;
    line-height: 1.45;
}

.blog-filtros {
    padding: 14px 16px;
    border: 1px solid var(--blog-linea);
    border-radius: 13px;
    background: #fff;
}
.blog-filtros-fila {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 10px;
}
.blog-campo { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.blog-campo label {
    color: var(--blog-tenue);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.blog-campo input,
.blog-campo select {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid #d7e0ea;
    border-radius: 9px;
    background: #fff;
    color: var(--blog-tinta);
    font-family: inherit;
    font-size: 13.5px;
    outline: 0;
}
.blog-campo input:focus,
.blog-campo select:focus {
    border-color: var(--marca-marron, #6B1E2E);
    box-shadow: 0 0 0 3px rgba(107, 30, 46, .10);
}

.blog-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--marca-marron, #6B1E2E);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.blog-boton-suave {
    background: #fff;
    border-color: #d7e0ea;
    color: var(--blog-suave);
}
.blog-boton-suave:hover { border-color: #c3cfdc; color: var(--blog-tinta); }

.blog-resumen-linea {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 0 0 12px;
    color: var(--blog-suave);
    font-size: 13px;
}
.blog-resumen-linea strong { color: var(--blog-tinta); font-size: 14.5px; font-weight: 800; }
.blog-resumen-linea span { color: var(--blog-tenue); font-size: 12px; }
.blog-resumen-linea a {
    margin-left: auto;
    color: var(--marca-marron, #6B1E2E);
    font-weight: 650;
    text-decoration: none;
}
.blog-resumen-linea a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- lista */
.blog-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--blog-linea);
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
}
.blog-fila + .blog-fila { border-top: 1px solid var(--blog-linea); }

.blog-fila-enlace {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 34px 15px 15px;
    color: inherit;
    text-decoration: none;
    transition: background .14s ease;
}
.blog-fila-enlace:hover { background: #fafbfd; }
/* Galón a la derecha, como en las tarjetas del panel. */
.blog-fila-enlace::after {
    content: "";
    position: absolute;
    right: 16px; top: 50%;
    width: 7px; height: 7px;
    margin-top: -4px;
    border-right: 1.9px solid #c3cedc;
    border-top: 1.9px solid #c3cedc;
    transform: rotate(45deg);
    transition: transform .15s ease, border-color .15s ease;
}
.blog-fila-enlace:hover::after {
    border-color: var(--marca-marron, #6B1E2E);
    transform: translateX(3px) rotate(45deg);
}

.blog-miniatura {
    flex: 0 0 132px;
    width: 132px;
    aspect-ratio: 16 / 10;
    display: block;
    overflow: hidden;
    border-radius: 9px;
    background: #eef2f7;
}
.blog-miniatura img { width: 100%; height: 100%; display: block; object-fit: cover; }
.blog-miniatura-vacia {
    width: 100%; height: 100%;
    display: grid;
    place-items: center;
    color: #b6c2d1;
}
.blog-miniatura-vacia svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}

.blog-fila-texto { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.blog-fila-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 9px;
    color: var(--blog-tenue);
    font-size: 11px;
    font-weight: 650;
}
.blog-fila-meta b {
    color: var(--marca-marron, #6B1E2E);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}
/* Puntos entre los datos, sin meter <span> de separación en la plantilla. */
.blog-fila-meta > * + *::before {
    content: "·";
    margin-right: 9px;
    color: #c7d0da;
}
.blog-fila-titulo {
    color: var(--blog-tinta);
    font-size: 16px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -.012em;
}
.blog-fila-enlace:hover .blog-fila-titulo { color: var(--marca-marron, #6B1E2E); }
.blog-fila-resumen {
    color: var(--blog-suave);
    font-size: 13.5px;
    line-height: 1.55;
    /* Dos líneas: iguala el alto de todas las filas sin recortar el texto
       en la base de datos. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-vacio {
    padding: 40px 22px;
    text-align: center;
}
.blog-vacio strong { display: block; color: var(--blog-tinta); font-size: 15px; font-weight: 800; }
.blog-vacio span { display: block; margin-top: 5px; color: var(--blog-suave); font-size: 13px; }

/* ------------------------------------------------------------- páginas */
.blog-paginas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}
.blog-paginas a,
.blog-paginas-inerte,
.blog-paginas-actual {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid var(--blog-linea);
    border-radius: 9px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}
.blog-paginas a { color: var(--blog-tinta); }
.blog-paginas a:hover { border-color: #c3cfdc; background: #fafbfd; }
.blog-paginas-inerte { color: #b8c3cf; border-style: dashed; }
.blog-paginas-actual {
    color: var(--blog-suave);
    border-color: transparent;
    background: var(--blog-fondo);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ cta */
.blog-cta {
    border-top: 1px solid var(--blog-linea);
    background: var(--blog-fondo);
}
.blog-cta-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding-block: 22px;
}
.blog-cta-fila > div > span {
    display: block;
    color: var(--blog-tinta);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.015em;
}
.blog-cta-fila p {
    margin: 4px 0 0;
    color: var(--blog-suave);
    font-size: 13.5px;
    line-height: 1.55;
}
.blog-cta-fila > a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--marca-marron, #6B1E2E);
    color: #fff;
    font-size: 13.5px;
    font-weight: 750;
    text-decoration: none;
}

/* ---------------------------------------------------------- el artículo */
.blog-detalle { padding: 30px 0 56px; }
.blog-volver {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--marca-marron, #6B1E2E);
    font-size: 12.5px;
    font-weight: 750;
    text-decoration: none;
}
.blog-volver:hover { text-decoration: underline; }
.blog-detalle-cabecera { max-width: 74ch; }
.blog-detalle-cabecera h1 {
    margin: 8px 0 10px;
    font-size: clamp(26px, 3.4vw, 36px);
    line-height: 1.16;
    letter-spacing: -.028em;
    font-weight: 800;
    text-wrap: balance;
}
.blog-detalle-cabecera p {
    margin: 0;
    color: var(--blog-suave);
    font-size: 15.5px;
    line-height: 1.6;
}
.blog-detalle-imagen {
    width: 100%;
    max-height: 420px;
    display: block;
    object-fit: cover;
    border-radius: 14px;
    margin: 24px 0 26px;
}
.blog-articulo-texto {
    max-width: 72ch;
    color: #24334a;
    font-size: 16px;
    line-height: 1.78;
}
.blog-articulo-texto p { margin: 0 0 20px; }

/* --------------------------------------------------------------- móvil */
@media (max-width: 860px) {
    .blog-filtros-fila { grid-template-columns: 1fr 1fr; }
    .blog-filtros-fila .blog-boton { grid-column: span 1; }
}
@media (max-width: 620px) {
    .blog-cabecera-fila { align-items: flex-start; flex-direction: column; }
    .blog-contador { align-self: flex-start; }
    .blog-filtros-fila { grid-template-columns: 1fr; }
    .blog-fila-enlace { padding: 13px 28px 13px 13px; }
    .blog-miniatura { flex-basis: 84px; width: 84px; }
    .blog-fila-titulo { font-size: 15px; }
    .blog-fila-resumen { -webkit-line-clamp: 3; }
    .blog-cta-fila > a { width: 100%; justify-content: center; }
}


/* ==========================================================================
   Organización: categorías, artículo de portada y vida en el estudio
   ========================================================================== */

/* ---------- Navegación por categorías ---------- */
/* Antes era un desplegable: había que abrirlo para saber qué había. Como
   pastillas se ven todas de golpe y cada una es un enlace indexable. */
.blog-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 4px;
}
.blog-categoria {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--blog-linea);
    border-radius: 999px;
    background: #fff;
    color: var(--blog-suave);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.blog-categoria b {
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--blog-tenue);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.blog-categoria:hover {
    border-color: color-mix(in srgb, var(--marca-marron, #6B1E2E) 34%, var(--blog-linea));
    color: var(--blog-tinta);
}
.blog-categoria.es-activa {
    background: var(--marca-marron, #6B1E2E);
    border-color: var(--marca-marron, #6B1E2E);
    color: #fff;
}
.blog-categoria.es-activa b { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---------- Artículo de portada ---------- */
.blog-destacado {
    display: grid;
    grid-template-columns: minmax(0, 208px) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid var(--blog-linea);
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.blog-destacado:hover {
    border-color: color-mix(in srgb, var(--marca-marron, #6B1E2E) 30%, var(--blog-linea));
    box-shadow: 0 16px 38px rgba(22, 40, 60, .07);
}
.blog-destacado-imagen {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 16 / 10;
    background: #eef2f7;
}
.blog-destacado-imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-destacado-imagen .blog-miniatura-vacia {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}
.blog-destacado-texto { display: block; min-width: 0; }
/* Sobre la imagen y no encima del texto: así no gasta un renglón. */
.blog-destacado-rotulo {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--marca-marron, #6B1E2E);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.blog-destacado-titulo {
    display: block;
    margin: 6px 0 0;
    color: var(--blog-tinta);
    font-size: clamp(17px, 1.9vw, 21px);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -.018em;
}
.blog-destacado-resumen {
    display: block;
    margin-top: 6px;
    max-width: 62ch;
    color: var(--blog-suave);
    font-size: 13.8px;
    line-height: 1.55;
}

/* ---------- Vida en el estudio ---------- */
.blog-vida {
    padding: clamp(26px, 3vw, 40px) 0;
    border-top: 1px solid var(--blog-linea);
    background: #fff;
}
.blog-vida-cabecera { margin-bottom: 18px; }
.blog-vida-cabecera h2 {
    margin: 9px 0 0;
    font-size: clamp(21px, 2.4vw, 28px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--blog-tinta);
}
.blog-vida-cabecera p { margin: 7px 0 0; color: var(--blog-suave); font-size: 14.5px; }

.blog-albumes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 18px;
}
.blog-album { display: block; text-decoration: none; }
.blog-album-foto {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 4 / 3;
    background: #eef2f7;
}
.blog-album-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.blog-album:hover .blog-album-foto img { transform: scale(1.05); }
.blog-album-cuenta {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(12, 20, 30, .74);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(4px);
}
.blog-album-texto { display: block; margin-top: 11px; }
.blog-album-texto b {
    display: block;
    color: var(--blog-tinta);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.012em;
}
.blog-album-texto span {
    display: block;
    margin-top: 3px;
    color: var(--blog-tenue);
    font-size: 12.5px;
    text-transform: capitalize;
}

@media (max-width: 980px) {
    /* Sin sitio para dos columnas, el índice pasa delante de la lista:
       ahí sigue sirviendo para elegir tema antes de bajar. */
    .blog-reja { grid-template-columns: minmax(0, 1fr); }
    .blog-lateral { position: static; order: -1; grid-auto-flow: column; }
    .blog-indice-vida { display: none; }
}

@media (max-width: 760px) {
    .blog-lateral { grid-auto-flow: row; }
    .blog-buscador { flex-basis: 100%; }
    .blog-destacado { grid-template-columns: minmax(0, 1fr); }
    .blog-destacado-imagen { aspect-ratio: 16 / 9; }
    .blog-cabecera-fila { align-items: stretch; }
    .blog-albumes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-album-foto img { transition: none; }
    .blog-album:hover .blog-album-foto img { transform: none; }
}