/*!
Theme Name: el-abc-v3
Theme URI: http://underscores.me/
Author: Zesak
Author URI: http://www.zesak.cl/
Description: Tema del blog eL ABC (alejandrobarros.com). Estilo editorial con fondo #EEE9E4, tiempo de lectura y contador de visitas por artículo.
Version: 3.1.1
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: el-abc
Tags: black-and-white, dark-mode, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

eL ABC is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
:root { color-scheme: only light; }

/* Las tablas pegadas en los posts heredan el color del texto del sitio */
.entry-content table[style],
.entry-content table[style] th,
.entry-content table[style] td { color: inherit !important; }
:root {
    --txt-secondary: var(--bs-gray-600);
    --font-family-serif: Lora, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --link-color: var(--bs-body-color);
    --bs-nav-link-color: var(--link-color);
    --primary-300: #3589ff;
    --space-comment: 3rem;
    --bs-heading-color: var(--bs-body-color);
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.75;
    --bs-btn-color: #495057;
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: .375rem;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .15), 0 1px 1px rgba(0, 0, 0, .075);
    --bs-btn-disabled-opacity: .65;
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    --alto-header: 84px;
    --separator-color: var(--bs-gray-300);
    --search-border-color: var(--bs-gray-500);
    --placeholder-color: var(--search-border-color);
    --search-bg-color: #FFF;
}

body {
    padding-top: var(--alto-header);
}

.dark {
    --bs-body: var(--bs-gray-100);
    --bs-body-color: var(--bs-body);
    --bs-body-bg: var(--bs-gray-900);
    --txt-secondary: var(--bs-gray-300);
    --link-color: var(--bs-body-color);
    --bs-nav-link-color: var(--link-color);
    --primary-300: #3589ff;
    --bs-btn-color: #495057;
    --bs-btn-box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .15), 0 1px 1px rgba(0, 0, 0, .075);
    --bs-btn-disabled-opacity: .65;
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    --alto-header: 84px;
    --bs-heading-color: var(--bs-body);
    --separator-color: var(--bs-gray-700);
}

h1,
h2 {
    letter-spacing: -.5px;
}

.menu-on {
    overflow: hidden;
}

.main {
    padding: 1rem 0 2rem 0;
}

.navbar {
    /* --bs-navbar-color: var(--bs-body-bg); */
    /* --bs-navbar-hover-color: var(--bs-body-bg); */
    /* --bs-navbar-disabled-color: rgba(0, 0, 0, .3); */
    /* --bs-navbar-active-color: var(--bs-body-bg); */
    /* --bs-navbar-toggler-border-color: rgba(0, 0, 0, .1); */
    background-color: var(--bs-body-bg);
    /* box-shadow: 0px 2px 3px rgba(0,0,0,.05); */
    border-bottom: 1px solid var(--separator-color);
}

.navbar-brand {
    font-size: 1.75rem;
    letter-spacing: -1px;
    transition: all .5s ease-in-out;
    color: var(--bs-body-color);
}


.navbar-brand .avatar {
    width: auto;
    height: 64px;
    transition: all .5s ease-in-out;
}

.scroll-down .navbar-brand .avatar {
    height: 40px;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.navbar-nav .nav-link:hover {
    color: var(--bs-body-bg);
}

.navbar-nav .nav-link:hover {
    text-decoration: underline;
}

/* btn theme */
.btn-theme {
    margin-left: auto;
}

.btn-theme svg {
    --btn-theme-size: 24px;
    width: var(--btn-theme-size);
    height: var(--btn-theme-size);
    stroke: var(--bs-body-bg);
    stroke-width: 1px;
}

.moon {
    display: none;
}

.dark .moon {
    display: inline-block;
}

.dark .sun {
    display: none;
}

.btn-theme.d {
    display: none;
    margin-right: 1rem;
}

@media (min-width: 768px) {
    .main{
        padding-top: 2rem;
    }
    .btn-theme.d {
        display: inline-block;
    }

    .btn-theme.m {
        display: none;
    }
}

.scroll-down .navbar-brand {
    font-size: 1rem;
}

.tt-pag {
    font-size: 1.5rem;
    margin: 0 0 1rem 0;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tt-pag.tt-search {
    font-size: 1.25rem;
}

.tt-pag.tt-search span {
    color: var(--bs-body-color);
}

.tt-pag svg {
    fill: var(--txt-secondary);
    width: 1.25rem;
    height: 1.25rem;
}

.item {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--bs-btn-padding-x);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--separator-color);
}

.item a {
    text-decoration: none;
    display: block;
    max-height: 14rem;
    overflow: hidden;
    color: var(--bs-body);
}

.item img {
    width: auto;
    height: auto;
    max-width: 480px;
    transition: .5s all ease-out;
}

.item:hover img {
    transform: scale(120%);
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.item .info {
    z-index: 1;
    position: relative;
    /* box-shadow: 0 8px 16px rgba(100, 100, 100, .1); */
    flex-grow: 2;
}

.item .tt {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.item .tt a {
    color: var(--bs-body-color);
}

.item .categ {
    margin-bottom: .5rem;
}

.categ,
.post-date {
    font-size: .75rem;
    color: var(--bs-body-color);
}

.categ a {
    text-decoration: none;
    font-size: .875rem;
}

.post-date {
    display: flex;
    gap: 2rem;
}

.post-date span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.post-date svg {
    stroke: var(--bs-body-color);
}


/* List items home */
.list-items.row,
.list-items .row {
    row-gap: 1.5rem;
}

@media (min-width: 768px) {
    .list-items>div:first-child .item .tt {
        font-size: 2.25rem;
    }

    .list-items>div:first-child .item .info {
        margin-left: 0;
        width: 100%;
    }

    .list-items>div:first-child .item a {
        max-height: 20rem;
    }

    .list-items>div:first-child .item img {
        width: 100%;
        height: auto;
        max-width: inherit;
    }
}

.navbar-toggler {
    text-transform: uppercase;
    border: 0;
    fill: var(--bs-body);
}

.nav-link {
    font-size: .75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bs-body);
}


/* SEARCH */
.c-search {
    display: flex;
}

.c-search .input-group {
    border-bottom: 1px solid var(--bs-body-color);
}

.c-search.m {
    display: none;
}

.input-search,
.btn-search {
    background-color: transparent;
    color: var(--bs-body);
    /* background-color: var(--search-bg-color); */
    border-radius: 0;
}

.btn-search:hover {
    background-color: transparent;
    border-color: transparent;
}

.input-search {
    border: 0;
}

.btn-search {
    border-left: 0;
}

.btn-search svg {
    fill: var(--bs-body-color);
    width: 24px;
    height: 24px;
}

.c-search.m .btn-search svg {
    fill: var(--bs-body-bg);
}

.input-search::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: var(--placeholder-color);
}

.input-search:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: var(--placeholder-color);
    opacity: 1;
}

.input-search::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: var(--placeholder-color);
    opacity: 1;
}

.input-search:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: var(--placeholder-color);
}

.input-search::-ms-input-placeholder {
    /* Microsoft Edge */
    color: var(--placeholder-color);
}

.input-search::placeholder {
    /* Most modern browsers support this now. */
    color: var(--placeholder-color);
}

.input-search,
.btn-search,
.btn-search svg {
    transition: all .5s ease-in-out;
}

.scroll-down .input-search,
.scroll-down .btn-search {
    padding-top: .1rem;
    padding-bottom: .1rem;
    min-height: inherit;
}

.scroll-down .btn-search svg {
    width: 16px;
    height: 16px;
}

.btn-close-menu {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF' %3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: 0;
    display: none;
}

.dark .btn-close-menu {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529' %3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

.navbar-collapse .rrss {
    display: none;
}

.navbar-collapse {
    left: -400px;
    width: 400px;
}

/* menu mobile */
@media (max-width: 576px) {
    .pagination {
        --bs-pagination-font-size: .75rem
    }

    .navbar-collapse {
        left: -100vw;
        width: 100%;
    }

    .c-search.m {
        display: flex;
    }

    .c-search.d {
        display: none;
    }
}

@media (max-width: 5000px) {
    :root {
        --alto-header: 75px;
    }

    .navbar-brand {
        font-size: 1.5rem;
        --bs-navbar-color: var(--bs-body-bg);
        --bs-navbar-hover-color: var(--bs-body-bg);
        /* --bs-navbar-disabled-color: rgba(0, 0, 0, .3); */
        --bs-navbar-active-color: var(--bs-body-bg);
        /* --bs-navbar-toggler-border-color: rgba(0, 0, 0, .1); */
        background-color: var(--bs-body-bg);
    }

    .navbar-collapse {
        position: fixed;
        top: 0;
        /* left: -100vw;
        width: 100%; */
        background-color: var(--bs-body-color);
        padding: 1rem;
        height: 100vh;
        transition: left .2s ease-out;
    }

    .menu-on .navbar-collapse {
        left: 0;
    }

    .nav-link {
        font-size: 1.5rem;
        color: var(--bs-body-bg);
    }

    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link.show {
        color: var(--bs-body-bg);
    }

    .btn-close-menu {
        display: inline-block;
    }

    .c-search.m {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid var(--separator-color)
    }

    .c-search.m .input-group .input-search {
        background-color: #FFF;
    }

    .navbar-collapse .rrss {
        display: flex;
        position: absolute;
        bottom: 0;
    }
}

.pagination {
    --bs-pagination-padding-x: 1rem;
    /* --bs-pagination-padding-y: .375rem; */
    --bs-pagination-color: var(--bs-body-color);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: var(--bs-body-color);
    --bs-pagination-border-radius: 0;
    --bs-pagination-hover-color: var(--bs-body-bg);
    --bs-pagination-hover-bg: var(--bs-body-color);
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-color: var(--bs-body-color);
    --bs-pagination-focus-bg: #e9ecef;
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(33, 37, 41, .25);
    --bs-pagination-active-color: var(--bs-body-bg);
    --bs-pagination-active-bg: var(--bs-body-color);
    --bs-pagination-active-border-color: #212529;
    /* --bs-pagination-disabled-color: #6c757d;
    --bs-pagination-disabled-bg: #fff; */
    --bs-pagination-disabled-border-color: transparent;
}

.pagination {
    margin-top: 1rem;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* suscribete */
.suscribete {
    font-family: var(--bs-font-sans-serif);
    background-color: var(--bs-primary);
    color: #FFF;
    padding: 2rem 0;
}

.suscribete form {
    margin-top: 2rem;
}

.suscribete label {
    display: block;
}

.suscribete .subtt {
    color: #FFF;
    font-family: var(--bs-font-sans-serif);
    font-size: .75rem;
    text-transform: uppercase;
}

.suscribete .tt {
    color: #FFF;
    font-size: 1.5rem;
}

.suscribete p {
    margin: 0;
}

.suscribete h4 {
    color: #FFF;
    font-size: 1rem;
}

.suscribete .submit-btn {
    border: #FFF;
    background-color: transparent;
}

.mc4wp-form-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mc4wp-form-fields label {
    display: block;
}

.mc4wp-form-fields label input {
    width: 100%;
    max-width: 500px;
}

.mc4wp-form-fields .submit-btn input {
    border: 0;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    color: var(--bs-body-bg);
    background-color: var(--bs-body-color);
    width: 100%;
    max-width: 300px;
}

@media (min-width: 576px) {
    .suscribete form {
        margin-top: 0;
    }
}


/* PIE */

.pie {
    /* background-color: var(--bs-link-hover-color); */
    color: var(--bs-body-color);
    padding: 2rem 0;
    font-size: .75rem;
    border-top: 1px solid var(--separator-color);
}

.pie p {
    margin: 0;
}

.pie p a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.pie .rrss {
    margin: 1rem 0 0 0;
}

.rrss {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1rem;
}

.rrss svg {
    fill: var(--bs-body-color);
    transition: all .2s ease-in;
}

.navbar-collapse .rrss svg {
    fill: var(--bs-body-bg);
}

.rrss a:hover svg {
    transform: scale(120%);
}

.compartir {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
    margin: 2rem 0 2rem 0;
    border-top: 1px solid var(--separator-color);
    border-bottom: 1px solid var(--separator-color);
    font-size: .875rem;
}

.compartir .rrss {
    margin-bottom: 0;
}

.compartir .rrss a {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    background-color: var(--bs-primary);
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
}

.compartir .rrss svg {
    width: 1rem;
    height: 1rem;
    fill: #FFF;
}

@media (min-width: 576px) {
    .pie .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .pie .rrss {
        margin: 0;
    }
}

/* NOTA */
.img-nota {
    margin-bottom: 0;
    max-height: 400px;
    overflow: hidden;
}

.img-nota img {
    width: 100%;
    height: auto;
}

.tt-post {
    margin: 1.5rem 0;
    color: var(--bs-body-color);
}

.cuerpo {
    margin-top: 2rem;
}

.cuerpo a {
    background: linear-gradient(0deg, var(--link-color) 0, var(--link-color) 100%);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 4px 2px;
    transition: background-size .4s;
    padding: 5px 0 3px 0;
    text-decoration: none;
    color: var(--bs-body);
}

.cuerpo a:hover {
    color: var(--bs-body-bg);
    background-size: 4px 60px
}

/* normalización de subtítulos en el cuerpo*/
.cuerpo h2 {
    font-size: 1.5rem;
}

.cuerpo h3 {
    font-size: 1.25rem;
}

.cuerpo h4 {
    font-size: 1rem;
}

.cuerpo h5 {
    font-size: .875rem;
}

.cuerpo h6 {
    font-size: .75rem;
}

.cuerpo .wp-block-image {
    text-align: center;
}

.cuerpo .wp-element-caption {
    text-align: center;
    font-size: .75rem;
}

/* Ocultar primera imagen repetida */
.cuerpo .wp-block-image:first-child {
    display: none;
}

.c-tt-post .categ {
    margin-bottom: .5rem;
}

@media (min-width: 992px) {
    .img-nota {
        margin: 0;
    }

    .c-tt-post {
        display: flex;
        align-items: center;
        text-align: center;
        flex-direction: column;
        justify-content: center;
    }

    .c-tt-post .categ {
        order: 1;
        margin-bottom: 0;
    }

    .c-tt-post .tt-post {
        order: 2;

    }

    .c-tt-post .post-date {
        order: 3;
    }
}

/* quotes */
.wp-block-quote {
    font-family: var(--font-family-serif);
    font-size: 1.25rem;
    position: relative;
    letter-spacing: -1px;
    color: var(--bs-body-color);
    margin: 2rem 0;
    line-height: 2.25rem;
    /* text-shadow: 15px 15px 8px var(--bs-gray-300); */
    border-top: 2px solid var(--bs-body-color);
    border-bottom: 2px solid var(--bs-body-color);
    padding: 1rem;

}

/* .wp-block-quote::before{
    content: "";
    display: block;
    width: .5rem;
    height: 2rem;
    position: absolute;
    left: -.5rem;
    background-color: var(--bs-gray-200);
    z-index: -1;
} */

@media (min-width: 576px) {
    .wp-block-quote {
        font-size: 1.5rem;
        max-width: 50%;
        border-top: 0;
        border-bottom: 0;
        border-right: 1px solid var(--bs-body-color);
        padding-right: 1.5rem;
        margin-right: 2rem;
        text-align: right;
        float: left;
    }

    .wp-block-quote::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: -4px;
        display: block;
        width: 8px;
        height: 8px;
        background-color: var(--bs-body-color);
        border-radius: 50%;
    }
}

@media (min-width: 768px) {
    .wp-block-quote {
        max-width: 40%;
    }
}
.wp-block-pullquote{
    font-size: 1.125rem;
    font-family: var(--font-family-serif);
    font-style: italic;
    padding: 2rem 0;
    border-top: 1px dashed var(--separator-color);
    border-bottom: 1px dashed var(--separator-color);
}
/*=====================================
 Comment Template CSS
========================================*/

.comments-area {
    margin-top: 0;
}

.comments-area .comments-title,
.c-relacionados .subtt {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: var(--bs-body-color);
    font-size: 1.25rem;
    gap: .5rem;
    color: var(--bs-body-bg);
    margin-bottom: 1rem;
    /* border-left: .5rem var(--bs-body-color) solid; */
}

.comments-area .comments-title svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--bs-gray-600);
}

.comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--bs-body-color);
}

.comment-meta {
    margin-bottom: 20px;
}

.comment-meta a {
    color: #333;
}

.comment-meta img {}

.comment-author.vcard {
    position: relative;
    padding-left: var(--space-comment);
}

.comment-author.vcard img {
    position: absolute;
    left: 0;
    top: 5px;
}

.comment-metadata {
    margin-left: var(--space-comment);
    font-size: .75rem;
    color: var(--bs-gray-600);
}

.comment-meta a {
    color: var(--bs-gray-600);
    text-decoration: none;
}

.comments-area table {
    border-left: 1px solid #dddd;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.comments-area table td,
.comments-area table th {
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding: 10px;
}

.comments-area th {
    background: #278cc1;
    color: #fff;
}

.comments-area dd {
    margin-bottom: 15px;
}

.comments-area .comments-content ul,
.comments-area .comments-content ol {
    padding-left: 15px;
}

.comments-area .comment-content ul,
.comments-area .comment-content ol {
    padding-left: 15px;
}

.comments-area .comment-content a {
    word-break: break-word;
}

.comment-reply-link {
    background: var(--bs-primary);
    display: inline-block;
    padding: 5px 20px;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
}

.comment-list li.comment {
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--bs-body-bg);
    box-shadow: 0 8px 16px rgba(100, 100, 100, .1);
    border-radius: .5rem;
    border-top-left-radius: 0;
}


.comment-reply-link {
    margin-top: 10px;
}

.comment-list li ol.children {
    padding-left: var(--space-comment);
    margin: 0;
    list-style: none;
    margin-top: 25px;
}

.comment-list li ol.children ol.children {
    padding-left: 20px;
}


.comment-respond {
    margin-top: var(--space-comment);
}

.comment-notes {}

.comment-form label {
    display: block;
    margin-bottom: 10px;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    margin-bottom: 20px;
}

.comment-form input[type=submit] {
    width: auto;
}

.comments-area .reply {
    display: none;
}

.comments-area .required {
    color: var(--bs-danger);
    margin-right: .5rem;
}

.comment-form-comment textarea {
    max-width: 576px;
}

.form-submit input {
    background-color: var(--bs-primary);
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    text-align: center;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
}

/* @media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 960px;
    }
} */

/* @media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 960px;
    }
} */

.mi-tooltip {
    --bs-tooltip-color: var(--bs-primary);
    --bs-tooltip-bg: #FFF;
}

/* relacionados */
.relacionados {
    gap: 1rem;
}

.relacionados .item {
    flex-direction: row;
    align-items: center;
}

.relacionados .item .img-nota {
    height: 100px;
    width: 100px;
    flex-shrink: 0;
    z-index: 1;
}

.relacionados .item .img-nota img {
    height: 100px;
    width: 100%;
}

.relacionados .item .info {
    margin-top: 0;
    margin-left: -1rem;
    padding-left: 2rem;
    z-index: 0;
}

.relacionados .item .tt {
    font-size: 1.25rem;
}

.relacionados .item .categ {
    display: none;
}

/* listado categorías */
.list-cat {
    margin-top: 1rem;
}

.list-cat a {
    color: var(--bs-body);
    text-decoration: none;
}

.wp-block-embed iframe {
    width: 100%;
}

@media (min-width: 992px) {
    .wp-block-embed iframe {
        height: 500px;
    }
}

/* =============================================
   REDISEÑO MINIMALISTA — el-abc-v2
   ============================================= */

/* --- Reducir bordes y separadores --- */
.item {
    border-bottom: none;
    padding-bottom: 0;
}

.navbar {
    border-bottom: none;
    box-shadow: none;
}

.pie {
    border-top: none;
}

/* --- Eliminar hover de imagen (grayscale + zoom) --- */
.item:hover img {
    transform: none;
    filter: none;
    -webkit-filter: none;
}

/* --- Metadata: .post-date legacy oculto, se usa .post-meta --- */
.post-date {
    display: none;
}

.categ-minimal {
    font-size: .7rem;
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .35rem;
}

.categ-minimal a {
    text-decoration: none;
    color: var(--bs-body-color);
}

/* ─────────────────────────────────────────────
   HERO — imagen alineada al container del texto
   Imagen y texto comparten el mismo .container
   de Bootstrap para mantener márgenes coherentes.
   ───────────────────────────────────────────── */

/* Contenedor raíz del hero */
.hero-wrap {
    margin-bottom: 0;
}

/* Link que envuelve la imagen: bloque sin espacio extra */
.hero-img-link {
    display: block;
    line-height: 0;
    overflow: hidden;
}

/* Imagen: ocupa el ancho del .container.
   Los !important neutralizan los atributos width/height
   que WordPress inyecta en el HTML de the_post_thumbnail(). */
.hero-img {
    width: 100% !important;
    max-width: 100% !important;
    height: 340px !important;
    object-fit: cover;
    object-position: center;
    display: block !important;
}

@media (min-width: 768px) { .hero-img { height: 400px !important; } }
@media (min-width: 992px) { .hero-img { height: 460px !important; } }

.hero-info {
    padding: 1.75rem 0 2rem 0;
}

/* Título del hero — escala tipográfica responsiva */
.tt-hero {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: .75rem;
    letter-spacing: -.5px;
}

@media (min-width: 768px) { .tt-hero { font-size: 2.75rem; } }
@media (min-width: 992px) { .tt-hero { font-size: 3.25rem; } }

/* Extracto del hero */
.bajada {
    font-size: 1rem;
    color: var(--txt-secondary);
    margin-bottom: .5rem;
    line-height: 1.6;
}

/* ── Sin subrayado en todos los links del hero ──────────────
   El tema original usa background-image como técnica de
   underline animado. Se neutraliza con background: none.   */
.hero-wrap a,
.hero-wrap a:link,
.hero-wrap a:visited,
.hero-wrap a:hover,
.hero-wrap a:active {
    text-decoration: none !important;
    background-image: none !important;
    background: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.tt-hero a         { color: var(--bs-body-color); }
.tt-hero a:hover   { opacity: .75; }
.bajada  a         { color: var(--txt-secondary); }
.bajada  a:hover   { color: var(--bs-body-color); }


/* ─────────────────────────────────────────────
   SEPARADOR entre hero y grilla secundaria
   Línea con label "Artículos anteriores" centrado.
   ───────────────────────────────────────────── */
.divider-posts {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0;
}

.divider-posts::before,
.divider-posts::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--separator-color);
    opacity: 0.4;
}

.divider-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--txt-secondary);
    white-space: nowrap;
    opacity: 0.7;
}


/* ─────────────────────────────────────────────
   GRILLA SECUNDARIA — posts 2 al 5 (4 columnas)
   ───────────────────────────────────────────── */
.row-secondary {
    row-gap: 2rem;
}

/* Título de cada card */
.row-secondary .item .tt {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: .4rem;
}

/* Imagen de cada card — altura fija con crop */
.row-secondary .item img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}


/* ─────────────────────────────────────────────
   LAYOUT GENERAL
   ───────────────────────────────────────────── */

/* El .main arranca sin padding top porque el hero llega
   hasta el borde superior justo bajo la navbar */
.main {
    padding: 0 0 3rem 0;
}


/* ─────────────────────────────────────────────
   NAVBAR — ajustes tipográficos minimalistas
   (sobreescriben los valores del tema base)
   ───────────────────────────────────────────── */
.navbar-brand {
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: -0.5px;
}

.nav-link {
    font-size: .7rem;
    letter-spacing: .08em;
}

/* ─────────────────────────────────────────────
   POST META — fecha + tiempo de lectura
   Aparece debajo del título en cards y en el hero.
   ───────────────────────────────────────────── */
.post-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    color: var(--txt-secondary);
    opacity: 0.7;
    margin-bottom: .5rem;
    letter-spacing: .01em;
}

.post-meta__sep {
    opacity: 0.5;
}


/* =============================================================
   ESTILO EDITORIAL 2026 — inspirado en The Economist
   Fondo RGB 238,233,228 · texto negro · acento rojo único
   Este bloque va al final y sobreescribe lo anterior.
   ============================================================= */

:root {
    /* Paleta */
    --abc-bg: #EEE9E4;            /* RGB 238, 233, 228 */
    --abc-ink: #121212;           /* texto principal */
    --abc-ink-2: #4A4744;         /* texto secundario cálido */
    --abc-rule: #121212;          /* filetes */
    --abc-rule-soft: #CFC8C1;     /* filetes suaves */
    --abc-red: #E3120B;           /* acento único */

    /* Tipografías */
    --f-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --f-sans: Barlow, "Helvetica Neue", Arial, sans-serif;
    --f-cond: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;

    /* Mapeo a variables de Bootstrap y del tema */
    --bs-body-bg: var(--abc-bg);
    --bs-body-color: var(--abc-ink);
    --bs-body: var(--abc-ink);
    --bs-heading-color: var(--abc-ink);
    --bs-primary: var(--abc-ink);
    --bs-body-font-family: var(--f-sans);
    --font-family-serif: var(--f-serif);
    --txt-secondary: var(--abc-ink-2);
    --link-color: var(--abc-red);
    --separator-color: var(--abc-rule-soft);
    --search-bg-color: var(--abc-bg);
}

/* Modo oscuro: se mantiene la función, con tonos cálidos */
.dark {
    --abc-bg: #1B1A18;
    --abc-ink: #EEE9E4;
    --abc-ink-2: #B5AEA7;
    --abc-rule: #EEE9E4;
    --abc-rule-soft: #3A3734;
    --abc-red: #FF4B3E;
    --bs-body-bg: var(--abc-bg);
    --bs-body-color: var(--abc-ink);
    --bs-body: var(--abc-ink);
    --bs-heading-color: var(--abc-ink);
    --bs-primary: var(--abc-ink);
    --txt-secondary: var(--abc-ink-2);
    --link-color: var(--abc-red);
    --separator-color: var(--abc-rule-soft);
}

body {
    background-color: var(--abc-bg);
    color: var(--abc-ink);
    font-family: var(--f-sans);
}

::selection {
    background: var(--abc-red);
    color: #FFF;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--f-serif);
    font-weight: 700;
    color: var(--abc-ink);
    letter-spacing: -.015em;
}

/* Barra roja corta, firma visual (como en la infografía) */
.hero-info::before,
.tt-pag::before,
.c-tt-post::before {
    content: "";
    display: block;
    width: 4.5rem;
    height: .45rem;
    background: var(--abc-red);
    margin-bottom: 1rem;
}

.tt-pag::before {
    display: block;
    margin-bottom: .75rem;
}

/* ─────────────  NAVBAR  ───────────── */
.navbar {
    background-color: var(--abc-bg);
    border-bottom: 1px solid var(--abc-rule);
}

.navbar-brand {
    font-family: var(--f-serif);
    font-weight: 400;
    color: var(--abc-ink);
    letter-spacing: -.02em;
}

.navbar-brand strong {
    font-weight: 800;
}

.navbar-brand .avatar {
    border-radius: 0;
}

.navbar-toggler svg {
    fill: var(--abc-ink);
}

/* Menú desplegable: panel negro, texto claro */
.navbar-collapse {
    background-color: var(--abc-ink);
}

.nav-link {
    font-family: var(--f-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--abc-bg);
}

.navbar-nav .nav-link:hover {
    color: var(--abc-red);
    text-decoration: none;
}

.navbar-collapse .btn-theme svg {
    stroke: var(--abc-bg);
}

/* Buscador */
.c-search .input-group {
    border-bottom: 1px solid var(--abc-rule);
}

.input-search {
    font-family: var(--f-sans);
    color: var(--abc-ink);
}

.c-search.m .input-group .input-search {
    background-color: var(--abc-bg);
    color: #121212;
}

/* ─────────────  CATEGORÍAS Y METADATOS  ───────────── */
.categ-minimal,
.categ {
    font-family: var(--f-cond);
    font-size: .95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: 1;
    margin-bottom: .4rem;
}

.categ-minimal a,
.categ a {
    color: var(--abc-red);
    font-size: inherit;
    text-decoration: none;
}

.categ-minimal a:hover,
.categ a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.post-meta {
    font-family: var(--f-sans);
    font-size: .8rem;
    color: var(--abc-ink-2);
    opacity: 1;
    letter-spacing: 0;
}

.post-meta__sep {
    opacity: 1;
    color: var(--abc-red);
}

/* ─────────────  HERO  ───────────── */
.hero-info {
    padding: 1.75rem 0 1rem 0;
}

.tt-hero {
    font-family: var(--f-serif);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.025em;
    padding-bottom: 1rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid var(--abc-rule);
}

@media (min-width: 992px) {
    .tt-hero {
        font-size: 3.5rem;
    }
}

.tt-hero a,
.tt-hero a:visited {
    color: var(--abc-ink);
}

.tt-hero a:hover {
    opacity: 1;
    color: var(--abc-red);
}

.bajada {
    font-family: var(--f-serif);
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--abc-ink);
    margin-top: .75rem;
}

.bajada a,
.bajada a:visited {
    color: var(--abc-ink);
}

.bajada a:hover {
    color: var(--abc-ink-2);
}

.hero-img,
.item img,
.img-nota img {
    border-radius: 0;
}

/* ─────────────  SEPARADOR "ARTÍCULOS ANTERIORES"  ───────────── */
.divider-posts {
    display: block;
    margin: 2rem 0 1.5rem 0;
    padding-top: .6rem;
    border-top: 2px solid var(--abc-rule);
}

.divider-posts::before,
.divider-posts::after {
    display: none;
}

.divider-label {
    font-family: var(--f-cond);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--abc-ink);
    opacity: 1;
}

/* ─────────────  TARJETAS  ───────────── */
.item {
    gap: .75rem;
}

.item a {
    color: var(--abc-ink);
}

.item .tt,
.row-secondary .item .tt {
    font-family: var(--f-serif);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.row-secondary .item .tt {
    font-size: 1.2rem;
}

.item .tt a:hover {
    color: var(--abc-red);
}

/* Filete vertical entre columnas en escritorio */
@media (min-width: 992px) {
    .row-secondary > div + div {
        border-left: 1px solid var(--abc-rule-soft);
    }
}

/* ─────────────  TÍTULOS DE ARCHIVO / BÚSQUEDA  ───────────── */
.tt-pag {
    display: block;
    font-family: var(--f-serif);
    font-weight: 800;
    font-size: 2.25rem;
    line-height: 1.1;
    padding-bottom: .75rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--abc-rule);
}

.tt-pag.tt-search {
    font-size: 1.5rem;
}

.tt-pag svg {
    fill: var(--abc-ink-2);
}

/* ─────────────  PAGINACIÓN  ───────────── */
.pagination {
    --bs-pagination-color: var(--abc-ink);
    --bs-pagination-border-color: var(--abc-ink);
    --bs-pagination-hover-color: var(--abc-bg);
    --bs-pagination-hover-bg: var(--abc-red);
    --bs-pagination-active-color: var(--abc-bg);
    --bs-pagination-active-bg: var(--abc-ink);
    --bs-pagination-active-border-color: var(--abc-ink);
    --bs-pagination-focus-bg: var(--abc-rule-soft);
    font-family: var(--f-cond);
    font-weight: 600;
    margin-top: 2.5rem;
}

/* ─────────────  ARTÍCULO  ───────────── */
.c-tt-post::before {
    margin-left: 0;
}

@media (min-width: 992px) {
    .c-tt-post {
        align-items: flex-start;
        text-align: left;
    }

    .c-tt-post::before {
        order: 0;
    }
}

.tt-post {
    font-family: var(--f-serif);
    font-weight: 800;
    font-size: 2.25rem;
    line-height: 1.08;
    letter-spacing: -.025em;
    margin: .5rem 0 1rem 0;
}

@media (min-width: 992px) {
    .tt-post {
        font-size: 3rem;
    }
}

/* Cuerpo: serif de lectura con ancho de línea cómodo */
.cuerpo {
    font-family: var(--f-serif);
    font-size: 1.1875rem;
    line-height: 1.7;
    color: var(--abc-ink);
    max-width: 46rem;
    margin: 2.5rem auto 0 auto;
    padding-top: 2rem;
    border-top: 1px solid var(--abc-rule);
}

.cuerpo h2,
.cuerpo h3,
.cuerpo h4 {
    margin-top: 2.25rem;
    margin-bottom: .75rem;
    line-height: 1.2;
}

.cuerpo h2 {
    font-size: 1.6rem;
}

.cuerpo h3 {
    font-size: 1.3rem;
}

.cuerpo a,
.cuerpo a:visited {
    background: none;
    padding: 0;
    color: var(--abc-ink);
    text-decoration: underline;
    text-decoration-color: var(--abc-red);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .15s ease;
}

.cuerpo a:hover {
    color: var(--abc-red);
    background: none;
}

.cuerpo .wp-element-caption,
.cuerpo figcaption {
    font-family: var(--f-sans);
    font-size: .8rem;
    font-style: italic;
    color: var(--abc-ink-2);
    text-align: left;
}

.cuerpo ul,
.cuerpo ol {
    padding-left: 1.25rem;
}

.cuerpo li::marker {
    color: var(--abc-red);
}

/* Citas */
.wp-block-quote {
    font-family: var(--f-serif);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--abc-ink);
    border-color: var(--abc-rule);
}

.wp-block-quote::after {
    background-color: var(--abc-red);
    border-radius: 0;
}

.wp-block-pullquote {
    font-family: var(--f-serif);
    border-top: 2px solid var(--abc-rule);
    border-bottom: 1px solid var(--abc-rule);
}

/* ─────────────  COMPARTIR  ───────────── */
.compartir {
    font-family: var(--f-cond);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid var(--abc-rule);
    border-bottom: 1px solid var(--abc-rule);
}

.compartir .rrss a {
    background-color: var(--abc-ink);
    border-radius: 0;
}

.compartir .rrss svg {
    fill: var(--abc-bg);
}

.compartir .rrss a:hover {
    background-color: var(--abc-red);
}

/* ─────────────  COMENTARIOS  ───────────── */
.comments-area {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}

.comments-area .comments-title,
.c-relacionados .subtt {
    background-color: transparent;
    color: var(--abc-ink);
    font-family: var(--f-cond);
    font-weight: 700;
    text-transform: uppercase;
    padding: .6rem 0 0 0;
    border-top: 2px solid var(--abc-rule);
}

.comment-list li.comment {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid var(--abc-rule-soft);
    padding: 1rem 0;
}

.comment-reply-link,
.form-submit input {
    background-color: var(--abc-ink);
    color: var(--abc-bg);
    border-radius: 0;
    font-family: var(--f-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.comment-reply-link:hover,
.form-submit input:hover {
    background-color: var(--abc-red);
}

.comment-form input,
.comment-form textarea {
    background-color: transparent;
    border: 1px solid var(--abc-rule);
    border-radius: 0;
    color: var(--abc-ink);
}

/* ─────────────  NEWSLETTER (MC4WP)  ───────────── */
.mc4wp-form-fields label input {
    background-color: transparent;
    border: 1px solid var(--abc-rule);
    border-radius: 0;
    padding: .5rem .75rem;
}

.mc4wp-form-fields .submit-btn input,
.mc4wp-form-fields input[type=submit] {
    background-color: var(--abc-ink);
    color: var(--abc-bg);
    border-radius: 0;
    font-family: var(--f-cond);
    font-weight: 600;
    text-transform: uppercase;
}

.mc4wp-form-fields .submit-btn input:hover,
.mc4wp-form-fields input[type=submit]:hover {
    background-color: var(--abc-red);
}

/* ─────────────  PIE  ───────────── */
.pie {
    border-top: 2px solid var(--abc-rule);
    margin-top: 2rem;
    font-family: var(--f-sans);
    font-size: .8rem;
}

.pie p a:hover {
    color: var(--abc-red);
}

.rrss svg {
    fill: var(--abc-ink);
}

.rrss a:hover svg {
    fill: var(--abc-red);
    transform: none;
}

.navbar-collapse .rrss svg {
    fill: var(--abc-bg);
}

.mi-tooltip {
    --bs-tooltip-color: var(--abc-bg);
    --bs-tooltip-bg: var(--abc-ink);
}


/* ─────────────  ESPACIO BAJO EL HEADER FIJO  ─────────────
   El header es fijo; el body se desplaza según su altura real.
   96px es el respaldo; fxs.js mide la altura exacta al cargar. */
:root {
    --alto-header: 96px;
}

body {
    padding-top: var(--alto-header);
}

.main {
    padding-top: 1.5rem;
}

@media (min-width: 768px) {
    .main {
        padding-top: 2.5rem;
    }
}

/* Hero a todo el ancho del container (título, filete y bajada) */
.hero-info .tt-hero,
.hero-info .bajada {
    max-width: none;
    width: 100%;
}