/*!
Theme Name: eL ABC — Minimalista 2026
Theme URI: http://underscores.me/
Author: Zesak
Author URI: http://www.zesak.cl/
Description: Description
Version: 2.1.4
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 {
    --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: solo categoría, sin fecha --- */
.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 edge-to-edge + texto full ancho
   La imagen sale fuera del .container de Bootstrap
   usando container-fluid para el bloque de texto.
   ───────────────────────────────────────────── */

/* Contenedor raíz del hero — sin margen inferior */
.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 100% del viewport en todos los breakpoints.
   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: 480px !important;
    object-fit: cover;
    object-position: center;
    display: block !important;
}

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

/* Bloque de texto bajo la imagen — padding lateral progresivo */
.hero-wrap .container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
}

@media (min-width: 768px) {
    .hero-wrap .container-fluid {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media (min-width: 1200px) {
    .hero-wrap .container-fluid {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

.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;
}