/*--------------------------------------------------------------
    Señor Crédito — estilos propios del sitio.
    La plantilla vive en vendor.css, style.css, responsive.css y color.css.
    Aquí solo va lo que pertenece a este proyecto.
----------------------------------------------------------------
# Utilidades
# Foco y teclado
# Barra de navegación
# Interruptor de idioma
# Modales
# Monitoreo de crédito
# Footer
# Widgets flotantes
# Perfiles de accesibilidad
# Blog
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Utilidades
--------------------------------------------------------------*/
.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;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 10001;
    padding: 12px 20px;
    background-color: #01125a;
    color: #fff;
    border-radius: 0 0 6px 6px;
    transition: top 0.2s ease-in-out;
}

.skip-link:focus {
    top: 0;
    color: #fff;
}

body.has-modal-open {
    overflow: hidden;
}

/*--------------------------------------------------------------
# Foco y teclado
--------------------------------------------------------------*/
:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 0.25rem;
    transition: all 0.2s ease-in-out;
}

.is-keyboard-navigation :focus {
    outline: 3px dashed #f59e0b;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

/*--------------------------------------------------------------
# Barra de navegación
--------------------------------------------------------------*/
.logo-tagline {
    color: #fff;
    font-weight: 700;
    text-align: center;
}

.navbar-nav a:hover {
    color: #fff;
}

.hot-category {
    color: #ffcc00;
    cursor: pointer;
}

.sub-menu {
    display: none;
    position: absolute;
    min-width: 200px;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sub-menu.show {
    display: block;
}

.menu-label-with-tag {
    display: flex;
    align-items: center;
}

.menu-label-with-tag .badge {
    margin-left: 6px;
}

.btn-subscribe {
    display: inline-block;
    padding: 8px 16px;
    background-color: #cc0000;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.btn-subscribe:hover,
.btn-subscribe:focus {
    background-color: #a30000;
    color: #fff;
}

.nav-language {
    display: flex;
    align-items: center;
}

/*--------------------------------------------------------------
# Banner
--------------------------------------------------------------*/
/* En home-3 la plantilla pone --main-color en blanco, así que el botón sólido
   queda blanco y necesita texto oscuro para leerse. */
.home-3 .btn-base {
    color: #01125a;
}

.banner-inner .btn-border-white {
    color: #fff;
}

#banner-portrait {
    transition: opacity 0.3s ease-in-out;
}

/*--------------------------------------------------------------
# Interruptor de idioma
--------------------------------------------------------------*/
.language-switch {
    --switch-width: 40px;
    --switch-height: 26px;
    --knob-size: calc(var(--switch-height) - 6px);

    display: block;
    position: relative;
    box-sizing: border-box;
    width: var(--switch-width);
    height: var(--switch-height);
    border: 1px solid gray;
    border-radius: calc(var(--switch-height) / 2);
}

.language-switch__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--knob-size);
    height: var(--knob-size);
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    transition: left 0.15s ease-out, right 0.15s ease-out;
}

.language-switch__knob.is-end {
    left: auto;
    right: 2px;
}

/*--------------------------------------------------------------
# Modales
--------------------------------------------------------------*/
.custom-modal-title {
    margin-bottom: 0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
}

.custom-modal-dialog--narrow {
    max-width: 560px;
    width: 100%;
}

/*--------------------------------------------------------------
# Monitoreo de crédito
--------------------------------------------------------------*/
.monitoring-card-title {
    margin-bottom: 0.1rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.monitoring-card .list-unstyled li strong {
    font-weight: 600;
}

/*--------------------------------------------------------------
# Jerarquía de títulos
    La plantilla dimensiona los títulos por etiqueta. Aquí se fija el tamaño
    de cada bloque para poder usar el nivel de encabezado correcto sin que
    cambie el diseño.
--------------------------------------------------------------*/
.footer-area .widget .widget-title {
    font-size: 24px;
    line-height: 1.3380952381;
}

.single-blog-inner .details .title {
    font-size: 30px;
    line-height: 1.3833333333;
}

/* A 46px el interlineado de la plantilla (1.33) separa demasiado las líneas
   del titular. Los títulos grandes piden menos aire entre renglones. */
.blog-details-page-content .details .title {
    margin-bottom: 22px;
    font-size: 46px;
    line-height: 1.15;
}

@media (max-width: 767px) {
    .blog-details-page-content .details .title {
        font-size: 32px;
        line-height: 1.2;
    }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.widget_about .details p {
    color: #fff;
}

.footer-social {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-social li {
    margin: 0 3px;
}

.footer-social img {
    display: block;
    width: 40px;
    height: 40px;
}

.footer-copyright {
    margin-bottom: 0;
    text-align: center;
}

/*--------------------------------------------------------------
# Widgets flotantes
--------------------------------------------------------------*/
.floating-widgets {
    position: fixed;
    left: 16px;
    bottom: 10px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform-origin: bottom left;
}

.floating-widgets__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 5px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #0072ce;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out;
}

.floating-widgets__button:hover {
    transform: scale(1.1) rotate(6deg);
    color: #fff;
}

/*--------------------------------------------------------------
# Perfiles de accesibilidad
--------------------------------------------------------------*/
.accessibility-hint {
    margin-bottom: 1rem;
    color: #555;
    font-size: 0.9rem;
}

.accessibility-profiles {
    margin: 0;
    padding: 0;
    list-style: none;
}

.accessibility-profiles li + li {
    border-top: 1px solid #eee;
}

.accessibility-profile {
    display: block;
    width: 100%;
    padding: 15px 10px;
    border: none;
    border-left: 5px solid transparent;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.accessibility-profile:hover {
    background-color: #f5f5f5;
}

.accessibility-profile[aria-pressed="true"] {
    background-color: #e0f7fa;
    border-left-color: #00bcd4;
}

.accessibility-profile__name {
    display: block;
    color: #000;
    font-size: 1.1em;
    font-weight: 600;
}

.accessibility-profile__description {
    display: block;
    margin-top: 5px;
    color: #555;
    font-size: 0.9em;
    line-height: 1.4;
}

.a11y-visual {
    filter: contrast(150%) brightness(120%);
}

.a11y-seizure {
    filter: grayscale(100%);
    font-family: Arial, sans-serif !important;
}

.a11y-seizure *,
.a11y-seizure *::before,
.a11y-seizure *::after {
    animation: none !important;
    transition: none !important;
}

.a11y-cognitive {
    font-family: sans-serif;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.5px;
}

.a11y-cognitive * {
    outline: 2px solid #ffeb3b !important;
}

.a11y-spotlight {
    position: fixed;
    inset: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.7);
    pointer-events: none;
    --pointer-x: 50%;
    --pointer-y: 50%;
    -webkit-mask-image: radial-gradient(circle 220px at var(--pointer-x) var(--pointer-y), transparent 0%, transparent 60%, #000 100%);
    mask-image: radial-gradient(circle 220px at var(--pointer-x) var(--pointer-y), transparent 0%, transparent 60%, #000 100%);
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.thumb {
    position: relative;
    min-height: 200px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-blog-inner {
    border-radius: 10px;
}

.thumb-category {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    padding: 5px 12px;
    border-radius: 4px;
    background-color: #01125a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.thumb-category:hover {
    background-color: #0072ce;
    color: #fff;
}

.page-subtitle {
    max-width: 760px;
    margin: 10px auto 0;
    color: #fff;
    font-size: 18px;
}

.blog-empty {
    padding: 60px 30px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    text-align: center;
}

.blog-empty p {
    max-width: 460px;
    margin: 0 auto 24px;
}

/* La tarjeta del estado vacío es blanca, el botón necesita fondo propio. */
.home-3 .blog-empty .btn-base {
    background: #01125a;
    color: #fff;
}

.blog-meta li {
    text-transform: none;
}

/* El cuerpo del artículo lo escribe el editor de la suite y trae h2, h3 y h4.
   Sin esto heredan los tamaños de la plantilla —46px el h2— y quedan más
   grandes que el h1 del propio artículo, que va a 30px. */
.post-body h2,
.post-body h3,
.post-body h4 {
    margin-top: 28px;
    margin-bottom: 12px;
    line-height: 1.35;
}

.post-body h2 {
    font-size: 28px;
}

.post-body h3 {
    font-size: 22px;
}

.post-body h4 {
    font-size: 18px;
}

/* En móvil el titular baja a 32px y un h2 de 28 se le pega demasiado. */
@media (max-width: 767px) {
    .post-body h2 {
        font-size: 24px;
    }

    .post-body h3 {
        font-size: 20px;
    }
}

.post-body p,
.post-body ul {
    margin-bottom: 18px;
}

.post-body ul {
    padding-left: 20px;
    list-style: disc;
}

.post-body li {
    margin-bottom: 8px;
}

.post-body blockquote {
    margin: 26px 0;
    padding: 20px 26px;
    border-left: 4px solid #fdc800;
    border-radius: 0 8px 8px 0;
    background-color: #f7f8fb;
    font-size: 18px;
    font-style: italic;
}

.post-body blockquote p {
    margin-bottom: 0;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.post-tags a {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    font-size: 13px;
}

.post-tags a:hover {
    border-color: #01125a;
    background-color: #01125a;
    color: #fff;
}

.post-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #eee;
}

.post-share__label {
    font-weight: 600;
}

.post-share__copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    background: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.post-share__copy:hover,
.post-share__copy.is-copied {
    border-color: #01125a;
    background-color: #01125a;
    color: #fff;
}

.post-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}

.post-navigation__side {
    flex: 1 1 240px;
}

.post-navigation__side--end {
    text-align: right;
}

.post-navigation__label {
    display: block;
    margin-bottom: 6px;
    color: #777;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.post-navigation__title {
    display: block;
    font-weight: 600;
    line-height: 1.4;
}

/* La plantilla pinta la página activa y el hover con --main-color, que en
   home-3 es blanco y quedaba invisible sobre el fondo claro del botón. */
.home-3 .td-page-navigation .pagination li a.active,
.home-3 .td-page-navigation .pagination li a:hover,
.home-3 .td-page-navigation .pagination li a:focus {
    background: #01125a;
    color: #fff;
}

/* El botón de buscar también se pinta con --main-color y quedaba blanco sobre
   blanco. La plantilla además borra el borde del campo al enfocarlo. */
.home-3 .widget_search .search-form button {
    background: #01125a;
}

.home-3 .widget_search .search-form button i {
    color: #fff;
}

.widget_search .search-form input:focus {
    border: 2px solid #01125a !important;
}

.widget_catagory li.is-current > a {
    color: #01125a;
    font-weight: 600;
}

.single-list-inner.style-check-box-grid-2 .media .media-left {
    background: #f9c702;
}

/*--------------------------------------------------------------
# Formularios embebidos
--------------------------------------------------------------*/
/* El alto configurado es solo el valor inicial, para que no salte el diseño
   mientras carga. El script de LeadConnector ajusta el iframe al contenido
   real con un style en línea, así que aquí no puede ir un min-height: dejaría
   un hueco debajo de los formularios cortos. */
.lead-form iframe {
    display: block;
    width: 100%;
    height: var(--lead-form-height, 644px);
    border: none;
    border-radius: 3px;
}

/*--------------------------------------------------------------
# Recursos
--------------------------------------------------------------*/
/* La tarjeta de recurso reusa la tarjeta horizontal del blog y solo agrega
   el botón de copiar y el de descarga. */
.resource-card .post-card__thumb {
    background-color: #eef1f6;
}

.resource-card__copy {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.resource-card__copy:hover,
.resource-card__copy.is-copied {
    background-color: #01125a;
    color: #fff;
}

/* El botón del pie es el mismo en las tarjetas de recursos y de blog. */
.post-card__footer .btn-sm {
    height: 38px;
    padding: 0 20px;
    line-height: 38px;
    font-size: 12px;
    white-space: nowrap;
}

/* .home-3 redefine --main-color a blanco y deja el botón blanco sobre blanco. */
.home-3 .post-card .btn-base {
    background: #01125a;
    color: #fff;
}

.resource-form__intro {
    margin-bottom: 16px;
    color: #555;
}

.resource-form__embed iframe {
    display: block;
    width: 100%;
    border: none;
    border-radius: 3px;
}

/* Enlace para quitar la búsqueda, debajo del buscador de la barra lateral. */
.td-sidebar .widget-clear {
    display: inline-block;
    margin-top: 10px;
    color: #8b90a0;
    font-size: 13px;
}

.td-sidebar .widget-clear:hover {
    color: #0072ce;
}

/*--------------------------------------------------------------
# Suscripción
--------------------------------------------------------------*/
.subscribe-banner__title {
    font-size: 40px;
    line-height: 1.2;
}

.subscribe-banner__lead {
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.85);
}

.subscribe-banner .lead-form {
    max-width: 520px;
    margin: 0 auto;
}

.channels-area {
    padding: 70px 0;
    background-color: #fff;
}

.channels-title {
    display: block;
    max-width: 720px;
    margin: 0 auto 40px;
    padding-bottom: 8px;
    border-bottom: 3px solid #ffc107;
    color: #007bff;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

.channels-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.channels-grid a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
}

.channels-grid img {
    display: block;
    width: 350px;
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.channels-grid a:hover img {
    transform: scale(1.05);
}

@media (max-width: 575px) {
    .channels-grid img {
        width: 240px;
    }

    .subscribe-banner__title {
        font-size: 30px;
    }
}

.resource-card__no-cover {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #eef1f6, #dde3ec);
}

.td-page-navigation .pagination .pagination-gap span {
    display: inline-flex;
    align-items: flex-end;
    height: 55px;
    padding: 0 6px;
    margin-right: 15px;
    color: #9aa3b2;
}

/*--------------------------------------------------------------
# Tarjeta horizontal del listado de blog
--------------------------------------------------------------*/
.post-card {
    display: flex;
    align-items: stretch;
    margin-bottom: 24px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Ancho fijo y alto libre: la miniatura acompaña la altura de la tarjeta, así
   nunca queda un hueco debajo. Como el texto está recortado a un número fijo
   de líneas, el alto real ronda siempre el ancho y se ve cuadrada. */
.post-card__thumb {
    position: relative;
    display: block;
    flex: 0 0 240px;
    width: 240px;
    max-width: 240px;
    background-color: #eef1f6;
}

.post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card__category {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 4px;
    background-color: #01125a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.post-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 240px;
    padding: 20px 24px;
}

.post-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f0f2f6;
}

.post-card__meta {
    margin: 0;
    color: #8b90a0;
    font-size: 12px;
    line-height: 1.4;
}

.post-card__meta > * + *::before {
    content: '·';
    margin: 0 7px;
    color: #c7ccd8;
}

.post-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.35;
}

.post-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 16px;
}


@media (max-width: 991px) {
    .post-card__thumb {
        flex-basis: 190px;
        width: 190px;
        max-width: 190px;
    }

    .post-card__body {
        min-height: 190px;
        padding: 16px 18px;
    }

    .post-card__title {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .post-card {
        flex-direction: column;
    }

    .post-card__thumb {
        flex-basis: auto;
        width: 100%;
        max-width: 100%;
        height: 200px;
    }

    .post-card__body {
        min-height: 0;
    }
}

/*--------------------------------------------------------------
# Sidebar del blog
    La plantilla encajona cada categoría y cada artículo reciente. Aquí se
    aligera: listas con separadores finos, contadores en pastilla y el
    buscador en una sola pieza redondeada.
--------------------------------------------------------------*/
.td-sidebar .widget {
    margin-bottom: 38px;
}

.td-sidebar .widget .widget-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 18px;
    letter-spacing: 0.01em;
}

.td-sidebar .widget .widget-title::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background-color: #e9ecf2;
}

/* Buscador */
.td-sidebar .widget_search .search-form {
    display: flex;
    align-items: center;
    border: 1px solid #e3e7ee;
    border-radius: 999px;
    background-color: #f7f9fc;
    overflow: hidden;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.td-sidebar .widget_search .search-form:focus-within {
    border-color: #01125a;
    background-color: #fff;
}

.td-sidebar .widget_search .search-form .form-group {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.td-sidebar .widget_search .search-form input {
    height: 50px;
    padding: 0 6px 0 20px;
    border: 0 !important;
    background: transparent;
    font-size: 14px;
}

.td-sidebar .widget_search .search-form input:focus {
    border: 0 !important;
    outline: 0;
}

.td-sidebar .widget_search .search-form button {
    position: static;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-right: 3px;
    border-radius: 50%;
    background-color: #01125a;
    transition: background-color 0.2s ease;
}

.td-sidebar .widget_search .search-form button:hover {
    background-color: #0072ce;
}

.td-sidebar .widget_search .search-form button i {
    color: #fff;
    font-size: 14px;
}

/* Categorías */
.td-sidebar .widget_catagory ul li {
    margin-bottom: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #f0f2f6;
    border-radius: 0;
}

.td-sidebar .widget_catagory ul li:last-child {
    border-bottom: 0;
}

.td-sidebar .widget_catagory ul li:hover {
    border: 0;
    border-bottom: 1px solid #f0f2f6;
}

.td-sidebar .widget_catagory ul li:last-child:hover {
    border-bottom: 0;
}

.td-sidebar .widget_catagory ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.td-sidebar .widget_catagory ul li a:hover {
    padding-left: 6px;
    color: #0072ce;
}

.td-sidebar .widget_catagory ul li a span {
    flex: 0 0 auto;
    min-width: 28px;
    padding: 3px 9px;
    border-radius: 999px;
    background-color: #f0f3f8;
    color: #6b7180;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.td-sidebar .widget_catagory ul li a:hover span,
.td-sidebar .widget_catagory ul li.is-current a span {
    background-color: #01125a;
    color: #fff;
}

.td-sidebar .widget_catagory ul li.is-current a {
    color: #01125a;
}

/* Últimos artículos */
.td-sidebar .widget-recent-post ul li .media {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 0;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid #f0f2f6;
    border-radius: 0;
}

.td-sidebar .widget-recent-post ul li:last-child .media {
    border-bottom: 0;
    padding-bottom: 0;
}

.td-sidebar .widget-recent-post ul li:first-child .media {
    padding-top: 0;
}

.td-sidebar .widget-recent-post ul li .media .media-left {
    margin-right: 0;
}

.td-sidebar .widget-recent-post ul li .media .media-left img {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: cover;
}

.td-sidebar .widget-recent-post ul li .media .media-body .title {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.45;
}

.td-sidebar .widget-recent-post ul li .media .media-body .title a {
    transition: color 0.2s ease;
}

.td-sidebar .widget-recent-post ul li .media .media-body .title a:hover {
    color: #0072ce;
}

.td-sidebar .widget-recent-post ul li .media .media-body .post-info {
    color: #8b90a0;
    font-size: 12px;
}

/*--------------------------------------------------------------
# Filtros de recursos
--------------------------------------------------------------*/
.resource-filters {
    margin-bottom: 40px;
}

.resource-filters__kinds {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background-color: #f2f5f9;
}

.resource-filters__kinds {
    display: inline-flex;
    width: auto;
    margin: 0 0 26px;
}

.resource-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 999px;
    color: #5b6172;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.resource-kind span {
    color: #9aa1b1;
    font-size: 11px;
    font-weight: 600;
}

.resource-kind:hover {
    color: #01125a;
}

.resource-kind.is-active {
    background-color: #fff;
    color: #01125a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.resource-kind.is-active span {
    color: #0072ce;
}

/*--------------------------------------------------------------
# Encabezado de las páginas internas
    La plantilla le da 200px arriba y 125px abajo, pensados para una barra
    transparente. Con la barra sólida sobra aire entre el título y el
    contenido. El alto de arriba solo tiene que librar la barra.
--------------------------------------------------------------*/
.breadcrumb-area {
    padding: 150px 0 60px;
}

@media (max-width: 991px) {
    .breadcrumb-area {
        padding: 130px 0 50px;
    }
}

.footer-credit {
    display: inline-block;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.footer-credit a {
    text-decoration: underline;
}

@media (max-width: 575px) {
    .footer-credit {
        display: block;
        margin: 6px 0 0;
        padding: 0;
        border-left: 0;
    }
}

.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.home-3 .not-found-actions .btn-base {
    background: #01125a;
    color: #fff;
}

/*--------------------------------------------------------------
# Bloques «Sobre mí» y «Experiencia»
    La plantilla le da a .about-inner-wrap 120px arriba y abajo, que se suman
    al padding de la sección: el título terminaba 240px por debajo del borde.
    La separación entre secciones ya la da la sección misma.
--------------------------------------------------------------*/
.about-area .about-inner-wrap {
    padding: 0;
}

@media (max-width: 991px) {
    .about-area .about-inner-wrap {
        padding-top: 30px;
    }
}