/* ============================================================
   ARTÍCULO 2026 — Figma "Cubicup-Web" › "Blog Article Desktop" (1440 × 6552)
   Va sobre home.css + blog.css. Medidas sacadas del .fig.
   ============================================================ */

/* ---------------- CABECERA: temática, titular y foto (columna de 912) ---------------- */
.article__head {
    max-width: 912px;
    margin: 0 auto;
    /* la barra (92px) va superpuesta; el Figma deja 80 más hasta la etiqueta */
    padding: calc(92px + var(--layout-section-padding-y-compact)) var(--layout-grid-margin) 0;
    box-sizing: content-box;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
/* Migas de pan con el estilo del "Tag" del Figma: fondo blanco, 18px de alto,
   11px en mayúsculas, separadas 4px como el grupo de etiquetas del diseño */
.breadcrumbs ol {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: var(--component-tag-gap);
    margin: 0; padding: 0; list-style: none;
}
.breadcrumbs li { display: inline-flex; }
.breadcrumbs a {
    display: inline-flex; align-items: center;
    height: 18px; padding: 0 6px; box-sizing: border-box;
    background: #fff;
    font-size: var(--label-tag-size); line-height: 1; letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tag-text);
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
}
.breadcrumbs a:hover { background: var(--background-navy); color: #fff; }
.article__title {
    margin-top: var(--base-24) !important;
    font-size: var(--heading-xxxl-size);
    line-height: var(--heading-xxxl-line-height);
    letter-spacing: var(--heading-xxxl-tracking);
    font-weight: var(--font-weight-regular);
    color: var(--text-primary);
}
.article__media { width: 100%; margin-top: 64px !important; aspect-ratio: 912 / 622; overflow: hidden; background: var(--background-subtle); }
.article__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------- CUERPO: índice (332) + texto (564), gap 16 ---------------- */
.article__layout {
    max-width: 912px;
    margin: var(--layout-section-title-content-gap-base) auto 0;
    padding: 0 var(--layout-grid-margin);
    box-sizing: content-box;
    display: flex; gap: var(--layout-grid-gutter);
    justify-content: flex-end;
}
.article__toc { flex: 0 0 332px; }
.article__toc ol {
    position: sticky; top: 100px;
    margin: 0; padding: 0; list-style: none; counter-reset: toc;
}
.article__toc li {
    counter-increment: toc;
    font-size: var(--body-sm-size); line-height: var(--body-sm-line-height);
    color: #9a8e84;
}
.article__toc li::before { content: counter(toc) ". "; }
.article__toc a { color: inherit; text-decoration: none; transition: color var(--transition); }
.article__toc a:hover, .article__toc a.is-current { color: var(--text-primary); }

.article__body { flex: 0 1 564px; min-width: 0; text-align: left; }

/* tipografía del Figma: H2 24/30, H3 20/28, párrafos 14/20 */
.article__body :where(p, li, td, th, figcaption, blockquote) { font-size: var(--body-sm-size); line-height: var(--body-sm-line-height); color: var(--text-primary); }
.article__body p { margin: 0 0 var(--base-16); }
.article__body h2 {
    margin: var(--layout-section-title-content-gap-base) 0 var(--base-32);
    font-size: 24px; line-height: 30px; letter-spacing: var(--heading-lg-tracking);
    font-weight: var(--font-weight-regular);
    scroll-margin-top: 100px;
}
.article__body h3 {
    margin: var(--base-32) 0 var(--base-16);
    font-size: 20px; line-height: 28px;
    font-weight: var(--font-weight-regular);
}
.article__body h4 { margin: var(--base-24) 0 var(--base-8); font-size: var(--title-sm-size); line-height: var(--title-sm-line-height); font-weight: var(--title-sm-weight); }
.article__body h2 + h3 { margin-top: 0; }
.article__body > :first-child, .article__body > :first-child > :first-child { margin-top: 0; }
.article__body :where(h1, h2, h3, h4, p, li) { text-align: left !important; max-width: none; }
.article__body :where(ul, ol) { margin: 0 0 var(--base-16); padding-left: 1.25em; }
.article__body li + li { margin-top: var(--base-4); }
.article__body a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.article__body strong { font-weight: var(--font-weight-medium); }
.article__body blockquote { margin: var(--base-32) 0; padding-left: var(--base-16); border-left: 1px solid var(--accordion-default-border); }

/* imágenes y bloques del editor: a todo el ancho de la columna, 80 de aire como en el Figma */
.article__body :where(figure, .wp-block-image, .uagb-image, .stk-block-image) { margin: var(--layout-section-title-content-gap-base) 0 !important; max-width: 100%; }
.article__body img { max-width: 100%; height: auto; display: block; }
.article__body .wp-block-image img, .article__body .uagb-image img { width: 100%; }
.article__body figcaption { margin-top: var(--base-8); color: var(--text-secondary); text-align: left; }
/* los espaciadores del editor duplicaban el ritmo del Figma */
.article__body .wp-block-spacer { display: none; }

/* tablas */
.article__body .table__container, .article__body .wp-block-table { overflow-x: auto; margin: var(--base-32) 0; }
.article__body table { width: 100%; border-collapse: collapse; }
/* línea fina horizontal, como los separadores del Figma (gana a los bordes completos del legacy) */
.article__body table th, .article__body table td { padding: var(--base-8) var(--base-12); border: 0; border-bottom: 1px solid var(--accordion-default-border); text-align: left; vertical-align: top; }
.article__body table tr:first-child > * { border-top: 1px solid var(--accordion-default-border); }
.article__body th { font-weight: var(--font-weight-medium); }

/* ---------------- "Más populares" tras el artículo ---------------- */
.article-2026 .blog-populares { margin-top: var(--layout-section-padding-y-base); }

/* ---------------- RESPONSIVE (Figma "Blog Article Mobile", 390) ---------------- */
@media (max-width: 960px) {
    .article__layout { flex-direction: column; gap: var(--base-32); }
    .article__toc { flex: none; }
    .article__toc ol { position: static; }
    .article__body { flex: none; }
}
@media (max-width: 640px) {
    .article__head { padding-top: calc(92px + 40px); }
    .article__title { font-size: var(--heading-xl-size); line-height: var(--heading-xl-line-height); }
    .article__media { margin-top: var(--base-32) !important; }
    .article__body h2 { margin-top: 56px; }
}