/*
 * Estilos del blog.
 *
 * Venian incrustados en una vista PHP (frontend/components/css_blog.php), asi
 * que se descargaban con cada articulo sin que el navegador pudiera guardarlos
 * en cache. Ahora son un archivo, y solo lo pide el layout del blog.
 */

.tp-blog-details__wrapper {
    padding: 0 0 30px;
    margin-top: 0;
    background-color: transparent;
    min-width: 0;
}

/* Sin medida propia: con el lateral ocupando 250 px la columna del artículo
   ronda los 880, que ya es una línea cómoda. Recortarla más dejaba el texto
   más estrecho que la imagen y que las líneas de separación, y se notaba. */
.tp-blog-details__wrapper .articulo__contenido :is(img, figure, iframe, table) {
    max-width: 100%;
}
.blog-details-area {
    padding-top: 25px;
}
.aside-categoria {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}
.aside-categoria .tpblog__right-item {
    margin-left: 0 !important;
}
.tp-blog-details__thumb {
    margin-bottom: 30px;
    text-align: center;
}
.tp-blog-details__thumb img {
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 6px;
    display: inline-block;
}

/* H1 del post */
h1.tp-blog-details__title,
.tp-blog-details__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--tp-text-body);
    line-height: 1.2;
    margin: 0 0 8px;
}

/* Breadcrumb */
.blog-breadcrumb {
    margin: 15px 0 20px;
    font-size: 14px;
    color: #777;
}
.blog-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.blog-breadcrumb li + li::before {
    content: "›";
    margin-right: 6px;
    color: #b0b0b0;
}
.blog-breadcrumb a {
    color: var(--tp-text-body);
    text-decoration: none;
}
.blog-breadcrumb a:hover {
    color: var(--tp-heading-secondary, #c8252b);
    text-decoration: underline;
}
.blog-breadcrumb [aria-current="page"] {
    color: #999;
}

/* Header del article: autor, fecha, categoría */
/* El título va debajo de la portada, así que su línea de separación cierra el
   bloque de cabecera contra el cuerpo del artículo. */
.blog-article-header {
    margin-bottom: 26px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef0f3;
}
.blog-article-meta {
    font-size: 14px;
    color: #777;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    margin-bottom: 0;
}
.blog-article-meta > span,
.blog-article-meta > time,
.blog-article-meta > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.blog-article-meta i {
    color: var(--tp-heading-secondary, #c8252b);
    font-size: 13px;
}
.blog-article-meta__cat {
    color: var(--tp-heading-secondary, #c8252b);
    text-decoration: none;
    font-weight: 600;
}
.blog-article-meta__cat:hover {
    text-decoration: underline;
}
.blog-article-footer__label i {
    color: var(--tp-heading-secondary, #c8252b);
    margin-right: 4px;
}

/* Footer del article: tags */
.blog-article-footer {
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px dashed #e6ecf0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.blog-article-footer__label {
    font-weight: 700;
    font-size: 14px;
    color: var(--tp-text-body);
}
.blog-article-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.blog-article-tags li {
    background: #f7f7f9;
    border: 1px solid #e6ecf0;
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 12px;
    color: var(--tp-text-body);
}

/* Posts relacionados */
.blog-relacionados {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #e6ecf0;
}
.blog-relacionados > h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--tp-text-body);
    margin: 0 0 20px;
}
.blog-relacionados__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.blog-relacionados__card {
    display: block;
    background: #fff;
    border: 1px solid #e6ecf0;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.blog-relacionados__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    text-decoration: none;
}
.blog-relacionados__thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f7f7f9;
}
.blog-relacionados__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-relacionados__title {
    font-size: 17px;
    font-weight: 600;
    color: #1c1c1c;
    transition: color .2s ease;
    margin: 0;
    padding: 12px 14px;
    line-height: 1.3;
}

/* Accesibilidad */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.sidebar__widget {
    padding-bottom: 40px;
    border-bottom: 1px dashed #E6ECF0;
    background: #e9e9e9;
    padding: 18px 15px;
    border-radius: 6px;
}
.sidebar__widget-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--tp-heading-primary);
    background: #f7f7f9;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: center;
}
.sidebar__widget-content ul li a {
    font-family: var(--tp-ff-Roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.22;
    color: var(--tp-text-body);
    margin-left: 5px;
}
.sidebar__widget-content ul li {
    border-bottom: 1px solid #cfcfcf;
}
@media (max-width: 767px) {
    .sidebar__widget--secciones {
        margin-top: 30px;
    }
}
@media (max-width: 991px) {
    .blog-relacionados__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    h1.tp-blog-details__title {
        font-size: 25px;
    }
    .postbox__tag-list span, .postbox__social-tag span {
        font-size: 11px;
    }
    .aside-categoria {
        position: static;
        top: auto;
    }
    .tp-blog-details__wrapper {
        padding: 0px 0px 60px 0px !important;
    }
    .tp-blog-details__thumb img {
        width: 100%;
    }
    .blog-breadcrumb {
        font-size: 13px;
    }
    .blog-article-meta {
        font-size: 13px;
        gap: 6px 14px;
        row-gap: 4px;
    }
    .blog-relacionados__grid {
        grid-template-columns: 1fr;
    }
    .blog-relacionados > h2 {
        font-size: 20px;
    }
}


/* ============================================================
   Listado del blog
   ============================================================

   Artículos a la izquierda y lateral a la derecha con el buscador y las
   categorías, como en el sitio publicado. Los tamaños de encabezado siguen la
   escala del artículo —18 px el título de tarjeta, 14 px el rótulo del
   lateral— para que el blog se lea igual en el listado y dentro.
   ============================================================ */

.blog {
    padding: 30px 0 70px;
    color: var(--tp-text-body);
}

/* Lateral a la izquierda, como en el catálogo: la misma tarea en el mismo
   sitio en las dos secciones con listado largo. */
.blog__cuerpo {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* ── Buscador ───────────────────────────────────────────────────────── */

.blog__buscador {
    display: flex;
    gap: 7px;
}

.blog__buscador input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d5d8dc;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
}

.blog__buscador input:focus {
    outline: none;
    border-color: var(--tp-heading-secondary, #c8252b);
}

.blog__buscador button {
    flex: none;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: var(--tp-heading-secondary, #c8252b);
    color: #fff;
}

.blog__limpiar {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--tp-heading-secondary, #c8252b);
}

/* ── Retícula de artículos ──────────────────────────────────────────── */

.reticula-blog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
}

.entrada {
    display: flex;
    border: 1px solid #e6ecf0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.entrada:hover {
    border-color: #d5d8dc;
    box-shadow: 0 8px 22px rgba(31, 39, 51, .08);
}

.entrada__enlace {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

/* `contain` y no `cover`: las imágenes del blog son composiciones con texto y
   recortarlas parte los rótulos. Es lo mismo que hace el sitio publicado. */
/* La franja que se veía encima de la foto era el relleno de `contain`: la
   etiqueta trae `height="250"`, que sin un `height` en la hoja gana sobre la
   proporción y dejaba una caja más alta que la imagen. Con `height: auto` manda
   la proporción, y 4/3 es la de las fotos del blog —vienen en 1,42 y 1,32—, así
   que ya no sobra sitio.
   Se mantiene `contain` y no `cover` porque son composiciones con texto y
   recortarlas parte los rótulos; el fondo blanco esconde el resto que pueda
   quedar en una foto de proporción rara. */
.entrada__imagen {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fff;
}

.entrada__texto {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 15px 16px 16px;
}

/* Pastilla, como el área en las tarjetas de vacantes: en las dos pantallas es
   lo mismo —de qué trata esto— y se lee antes que el título. */
.entrada__categoria {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff5f5;
    color: var(--tp-heading-secondary, #c8252b);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* 18 px, el mismo tamaño que usa el título de tarjeta en el sitio publicado.
   El recorte a tres líneas mantiene todas las tarjetas de una fila con la
   misma altura de título. */
.entrada__titulo {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    /* Negro, y rojo solo al pasar el puntero: es el mismo trato que reciben
       los títulos de tarjeta en sucursales y en vacantes. En rojo fijo compiten
       con la pastilla de categoría, que ya es roja, y la tarjeta pierde el
       orden de lectura. */
    color: #1c1c1c;
    margin: 0 0 9px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    transition: color .2s ease;
}

.entrada:hover .entrada__titulo {
    color: #e61e29;
}

.entrada__resumen {
    font-size: 14px;
    line-height: 1.6;
    color: var(--tp-text-body);
    margin: 0 0 12px;
}

/* El pie se empuja al fondo para que quede a la misma altura en tarjetas con
   títulos de distinto largo. */
.entrada__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #eef0f3;
}

.entrada__fecha {
    font-size: 12.5px;
    color: #9aa1ac;
}

/* Invitación a leer. No es un enlace aparte —la tarjeta entera ya lo es— sino
   la señal de que detrás del resumen recortado hay más texto. La flecha se
   adelanta al pasar el puntero, que es lo que lo hace sentir pulsable. */
.entrada__mas {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tp-heading-secondary, #c8252b);
    white-space: nowrap;
}

.entrada__mas svg {
    transition: transform .2s ease;
}

.entrada:hover .entrada__mas svg {
    transform: translateX(3px);
}

.blog__vacio {
    color: var(--tp-text-body);
    margin-bottom: 8px;
}

.blog__volver {
    color: var(--tp-heading-secondary, #c8252b);
    font-weight: 600;
}

@media (max-width: 991px) {
    .blog__cuerpo {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }
}

@media (max-width: 767px) {
    .entrada__titulo {
        font-size: 16px;
    }
}

/* Resumen del artículo: entradilla, un punto por encima del cuerpo. */
.articulo__resumen {
    font-size: 17px;
    line-height: 1.65;
    color: var(--tp-text-body);
    font-weight: 500;
    margin: 0 0 22px;
    padding-left: 16px;
    border-left: 3px solid var(--tp-heading-secondary, #c8252b);
}

/* La portada ocupa el ancho de la columna. Se recorta por el alto en lugar de
   deformarse: las fotos del blog vienen en proporciones distintas y con
   `contain` unas dejaban franjas blancas a los lados. */
.tp-blog-details__thumb {
    margin: 0 0 22px;
}

.tp-blog-details__thumb img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 440px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

@media (max-width: 991px) {
    .blog-relacionados__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* El lateral deja de estar fijo cuando pasa a ir debajo del texto. */
    .aside-categoria {
        position: static;
    }
}

@media (max-width: 767px) {
    .tp-blog-details__title,
    h1.tp-blog-details__title {
        font-size: 24px;
    }

    .blog-relacionados__grid {
        grid-template-columns: 1fr;
    }
}

/* El relacionado también pasa a rojo al pasar el puntero, igual que la tarjeta
   del listado. */
.blog-relacionados__card:hover .blog-relacionados__title {
    color: #e61e29;
}