/* Blog · Espectáculos MF */

body:has(.blog-index),
body:has(.blog-categories-index),
body:has(.blog-category),
body:has(.blog-article) {
    --blog-bg: #0a0e14;
    --blog-bg-soft: #0d1013;
    --blog-bg-end: #080b0d;
    --blog-surface: #101722;
    --blog-surface-2: #141d2a;
    --blog-title: #ffffff;
    --blog-text: rgb(244 245 242 / 94%);
    --blog-text-soft: rgb(244 245 242 / 82%);
    --blog-text-muted: rgb(244 245 242 / 64%);
    --blog-accent: #6fb6ff;
    --blog-accent-2: #9ad0ff;
    --blog-line-soft: rgb(111 182 255 / 10%);
    --blog-line-mid: rgb(111 182 255 / 16%);
    --blog-line-active: rgb(111 182 255 / 30%);
    --blog-fill-soft: rgb(111 182 255 / 8%);
    --blog-fill-mid: rgb(111 182 255 / 12%);
    --blog-shadow-soft: 0 18px 44px rgb(0 0 0 / 20%);
    background:
        linear-gradient(180deg, var(--blog-bg) 0%, var(--blog-bg) 100%),
        url(/content/images/fondo/fondo04.webp),
        linear-gradient(180deg, var(--blog-bg-soft) 0%, var(--blog-bg) 26%, var(--blog-bg-end) 100%);
    background-position: center top, center top, center top;
    background-size: auto, cover, auto;
}

.blog-index,
.blog-categories-index,
.blog-category,
.blog-article {
    padding: 2.4rem 0 4rem;
}

.blog-index__header,
.blog-categories-index__header,
.blog-category__header,
.blog-article__header {
    margin: 0 0 .5rem;
    text-align: center;
}

.section-eyebrow,
.blog-article__category {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .75rem;
    color: var(--blog-accent);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
}

.blog-index h1,
.blog-categories-index h1,
.blog-category h1,
.blog-article h1 {
    margin: 0 0 1rem;
    color: var(--blog-title);
    font-size: clamp(1.55rem, 2.35vw, 2.65rem);
    line-height: 1.08;
}

.blog-index__header p,
.blog-categories-index__header p,
.blog-category__header p,
.blog-article__excerpt {
    margin: 0;
    color: var(--blog-text-soft);
    font-size: 1rem;
    line-height: 1.65;
}

/* Categorías / portada */

.blog-index__categories {
    display: block;
    margin: 0 0 2.4rem;
    text-align: center;
}

.blog-index__categories a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    margin: .275rem;
    padding: .42rem .82rem;
    border: 1px solid var(--blog-line-mid);
    border-radius: 999px;
    background: var(--blog-fill-soft);
    color: var(--blog-text-soft);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.blog-index__categories a:hover,
.blog-index__categories a[aria-current="page"] {
    border-color: var(--blog-line-active);
    background: var(--blog-fill-mid);
    color: var(--blog-title);
    transform: translateY(-1px);
}

.blog-index__featured,
.blog-index__latest,
.blog-category__posts {
    margin-top: 2.3rem;
}

.blog-index__featured>h2,
.blog-index__latest>h2,
.blog-category__posts>h2 {
    margin: 0 0 1.15rem;
    color: var(--blog-title);
    font-size: clamp(1.25rem, 1.45vw, 1.65rem);
    line-height: 1.1;
    text-align: center;
}

/* Cards */

.blog-card-row,
.blog-category-card-row {
    row-gap: 1.35rem;
}

.blog-card-col,
.blog-category-card-col {
    display: flex;
}

.blog-card,
.blog-category-card {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 1px solid var(--blog-line-mid);
    border-radius: 1.15rem;
    background: linear-gradient(180deg, var(--blog-surface-2) 0%, var(--blog-surface) 100%);
    box-shadow: var(--blog-shadow-soft);
    text-align: left;
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.blog-card:hover,
.blog-category-card:hover {
    border-color: var(--blog-line-active);
    transform: translateY(-2px);
}

.blog-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgb(255 255 255 / 5%);
}

.blog-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card__body,
.blog-category-card {
    padding: 1.15rem;
}

.blog-card__date,
.blog-category-card__count {
    margin: 0 0 .65rem;
    color: var(--blog-text-muted);
    font-size: .84rem;
    font-weight: 700;
}

.blog-card__title,
.blog-category-card h2 {
    margin: 0 0 .7rem;
    color: var(--blog-title);
    font-size: 1.18rem;
    line-height: 1.25;
}

.blog-card__title a,
.blog-category-card h2 a {
    color: inherit;
    text-decoration: none;
}

.blog-card__title a:hover,
.blog-category-card h2 a:hover {
    color: var(--blog-accent-2);
}

.blog-card__excerpt,
.blog-category-card p {
    margin: 0 0 .95rem;
    color: var(--blog-text-soft);
    font-size: .94rem;
    line-height: 1.58;
}

.blog-card__link,
.blog-category-card__link {
    display: inline-flex;
    align-items: center;
    color: var(--blog-accent);
    font-size: .92rem;
    font-weight: 800;
    text-decoration: none;
}

.blog-card__link:hover,
.blog-category-card__link:hover {
    color: var(--blog-accent-2);
}

.blog-card__link::after,
.blog-category-card__link::after {
    content: "\203A";
    margin-left: .35rem;
    font-size: 1.12em;
    line-height: 1;
}

.blog-category__intro {
    margin: 2rem 0 0;
    color: var(--blog-text);
    font-size: 1rem;
    line-height: 1.72;
}

/* Artículo */

.blog-article__header-col {
    text-align: center;
}

.blog-article__meta {
    display: block;
    margin: 1.05rem 0 0;
    color: var(--blog-text-muted);
    font-size: .9rem;
    text-align: center;
}

.blog-article__meta span {
    display: inline-block;
    margin: 0 .5rem;
}

.blog-article__cover {
    overflow: hidden;
    width: min(100%, 640px);
    margin: 0 auto 2rem;
    border: 1px solid var(--blog-line-soft);
    border-radius: 1rem;
    background: rgb(255 255 255 / 4%);
}

.blog-article__cover img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7.2;
    object-fit: cover;
}

.blog-article .blog-article__content {
    counter-reset: blog-section-counter;
    color: var(--blog-text);
    font-size: 1.03rem;
    line-height: 1.78;
    text-align: left;
}

.blog-article .blog-article__content p {
    margin: 0 0 1.05rem;
    color: var(--blog-text);
    text-align: justify;
}

.blog-article .blog-article__content ul,
.blog-article .blog-article__content ol {
    margin: 0 0 1.25rem;
    padding-left: 1.35rem;
    color: var(--blog-text);
    text-align: left;
}

.blog-article .blog-article__content li {
    margin: 0;
    color: var(--blog-text);
    line-height: 1.65;
    text-align: justify;
}

.blog-article .blog-article__content li+li {
    margin-top: .45rem;
}

.blog-article .blog-article__content li::marker {
    color: var(--blog-accent);
}

.blog-article .blog-article__content .row {
    row-gap: 1.15rem;
}

.blog-article .blog-article__content .row>[class^="col-"],
.blog-article .blog-article__content .row>.col,
.blog-article .blog-article__content .row>.col-auto {
    text-align: left;
}

.blog-article .blog-article__content a {
    color: var(--blog-accent-2);
    font-weight: 800;
    text-decoration: none;
}

.blog-article .blog-article__content a:hover {
    color: var(--blog-title);
}

/* Summary */

.blog-article .blog-summary::after {
    content: "";
    display: block;
    width: 4.2rem;
    height: 2px;
    margin-top: 1.15rem;
    background: var(--blog-accent);
    opacity: .75;
}

/* Índice */

.blog-article .blog-toc {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 1.5rem 0 .5rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid rgb(111 182 255 / 16%);
    border-radius: 1rem;
    background: rgb(15 22 32 / 78%);
    box-shadow: 0 12px 30px rgb(0 0 0 / 14%);
}

.blog-article .blog-toc__title {
    margin: 0 0 .85rem;
    color: rgb(244 245 242 / 92%);
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.blog-article .blog-toc ol {
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-article .blog-toc li {
    width: auto;
    margin: 0;
}

.blog-article .blog-toc li+li {
    margin-top: .35rem;
}

.blog-article .blog-toc a {
    display: flex;
    align-items: baseline;
    width: auto;
    padding: .48rem .55rem;
    border-radius: .55rem;
    color: rgb(244 245 242 / 88%);
    font-size: .96rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.blog-article .blog-toc a:hover {
    background: rgb(111 182 255 / 7%);
    color: #fff;
}

.blog-article .blog-toc a span {
    flex: 0 0 auto;
    min-width: 1.65rem;
    color: rgb(111 182 255 / 88%);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
}

/* Secciones */

.blog-section {
    counter-increment: blog-section-counter;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--blog-line-soft);
}

.blog-section__header {
    display: block;
    margin-bottom: 1rem;
}

.blog-section__header>span {
    display: none;
}

.blog-section__header h2 {
    display: block;
    margin: 0;
    color: var(--blog-title);
    font-size: clamp(1.25rem, 1.45vw, 1.65rem);
    line-height: 1.12;
}

.blog-section__header h2::before {
    content: counter(blog-section-counter, decimal-leading-zero) " - ";
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.blog-two-cols,
.blog-three-cols {
    margin: .35rem 0 1.15rem;
}

.blog-mini-block {
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--blog-line-soft);
    border-radius: 1rem;
    background: rgb(255 255 255 / 3%);
}

.blog-mini-block h3 {
    margin: 0 0 .45rem;
    color: var(--blog-accent-2);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: .88rem;
    font-weight: 900;
    letter-spacing: .05em;
    line-height: 1.25;
    text-transform: uppercase;
}

.blog-mini-block p {
    margin-bottom: 0;
    color: var(--blog-text-soft);
    font-size: .94rem;
    line-height: 1.55;
    text-align: left;
}

/* Responsive */

@media (max-width: 992px) {

    .blog-index,
    .blog-categories-index,
    .blog-category,
    .blog-article {
        padding: 1.7rem 0 3rem;
    }

    .blog-index__header,
    .blog-categories-index__header,
    .blog-category__header,
    .blog-article__header {
        margin-bottom: 1.5rem;
    }

    .blog-index h1,
    .blog-categories-index h1,
    .blog-category h1,
    .blog-article h1 {
        font-size: clamp(1.25rem, 6vw, 1.8rem);
    }

    .blog-index__header p,
    .blog-categories-index__header p,
    .blog-category__header p,
    .blog-article__excerpt {
        font-size: .94rem;
        line-height: 1.55;
    }

    .blog-index__featured,
    .blog-index__latest,
    .blog-category__posts {
        margin-top: 1.9rem;
    }

    .blog-card__body,
    .blog-category-card {
        padding: 1rem;
    }

    .blog-card__title,
    .blog-category-card h2 {
        font-size: 1.08rem;
    }

    .blog-card__excerpt,
    .blog-category-card p {
        font-size: .9rem;
    }

    .blog-article__meta {
        font-size: .86rem;
    }

    .blog-article__meta span {
        display: block;
        margin: .32rem 0 0;
    }

    .blog-article .blog-article__content {
        font-size: .96rem;
        line-height: 1.68;
    }

    .blog-mini-block {
        padding: .9rem;
    }
}

@media (max-width: 640px) {
    .blog-index__categories {
        text-align: left;
    }

    .blog-card-row,
    .blog-category-card-row {
        row-gap: 1rem;
    }

    .blog-section {
        margin-top: 2.2rem;
        padding-top: 1.2rem;
    }

    .blog-section__header h2 {
        margin-top: .25rem;
    }

    .blog-article .blog-toc {
        display: block;
        width: 100%;
        margin: 1.6rem 0 2.2rem;
        padding: .95rem;
        border-radius: .85rem;
    }

    .blog-article .blog-toc a {
        padding: .45rem .35rem;
        font-size: .92rem;
    }
}

/* Portada blog · layout y sidebar */

.blog-index-layout {
    align-items: flex-start;
    margin-top: 2.4rem;
    row-gap: 2rem;
}

.blog-index-sidebar {
    align-self: flex-start;
}

.blog-sidebar-box {
    margin-bottom: 1.25rem;
    padding: 1.15rem;
    border: 1px solid var(--blog-line-mid);
    border-radius: 1rem;
    background:
        radial-gradient(circle at top left, rgb(111 182 255 / 7%) 0%, rgb(111 182 255 / 0%) 38%),
        rgb(18 27 39 / 86%);
    box-shadow: 0 12px 30px rgb(0 0 0 / 14%);
}

.blog-sidebar-box h2 {
    margin: 0 0 1rem;
    color: var(--blog-title);
    font-size: 1rem;
    line-height: 1.2;
}

.blog-sidebar-list,
.blog-sidebar-links {
    display: block;
}

.blog-sidebar-list a,
.blog-sidebar-links a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .55rem;
    padding: .55rem 0;
    border-top: 1px solid var(--blog-line-soft);
    color: var(--blog-text-soft);
    font-size: .94rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.blog-sidebar-list a span {
    color: var(--blog-title);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
}

.blog-sidebar-list a:first-child,
.blog-sidebar-links a:first-child {
    border-top: 0;
    padding-top: 0;
}

.blog-sidebar-list a::before,
.blog-sidebar-links a::before {
    content: "›";
    color: var(--blog-accent);
    font-size: 1.1rem;
    line-height: 1;
}

.blog-sidebar-list a:hover,
.blog-sidebar-links a:hover {
    color: var(--blog-accent-2);
}

.blog-sidebar-list small {
    margin-left: .15rem;
    color: var(--blog-text-muted);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1;
}

.blog-sidebar-list small::before {
    content: "(";
}

.blog-sidebar-list small::after {
    content: ")";
}

.blog-sidebar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .95rem;
    padding: .58rem .8rem;
    border: 1px solid var(--blog-line-mid);
    border-radius: .75rem;
    background: var(--blog-fill-soft);
    color: var(--blog-title);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.blog-sidebar-button:hover {
    border-color: var(--blog-line-active);
    background: var(--blog-fill-mid);
    color: var(--blog-accent-2);
}

.blog-index__empty {
    color: var(--blog-text-soft);
}

@media (max-width: 992px) {

    .blog-index-layout>.col-8,
    .blog-index-layout>.col-4 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .blog-index-sidebar {
        margin-top: .5rem;
    }
}

@media (max-width: 640px) {
    .blog-sidebar-box {
        padding: 1rem;
    }

    .blog-sidebar-list a,
    .blog-sidebar-links a {
        font-size: .9rem;
    }
}

/* Portada blog · tamaño de tarjetas */

.blog-index__latest .blog-card-row {
    justify-content: center;
}

.blog-index__latest .blog-card-col {
    flex: 0 0 380px;
    max-width: 380px;
}

.blog-index__latest .blog-card__media {
    aspect-ratio: 16 / 7.2;
}

.blog-index__latest .blog-card__body {
    padding: .95rem;
}

.blog-index__latest .blog-card__excerpt {
    font-size: .9rem;
    line-height: 1.5;
}

@media (max-width: 992px) {
    .blog-index__latest .blog-card-col {
        flex: 0 0 360px;
        max-width: 360px;
        margin: 0 auto;
    }

    .blog-index__latest .blog-card__media {
        aspect-ratio: 16 / 7;
    }
}

@media (max-width: 640px) {
    .blog-index__latest .blog-card-col {
        flex: 0 0 100%;
        max-width: 340px;
    }

    .blog-index__latest .blog-card__media {
        aspect-ratio: 16 / 7;
    }
}