/* ============================================================
   articles.css — Estilos para páginas de artículo individual
   ============================================================ */

/* ----- Hero ----- */
.art-hero {
    min-height: 50vh;
    display: flex;
    align-items: flex-end;
}
.art-hero-overlay {
    background:
        linear-gradient(to right, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.15) 70%, transparent 100%),
        linear-gradient(to top,   rgba(0,0,0,.65) 0%, rgba(0,0,0,.20) 35%, transparent 60%);
}
.art-hero-eyebrow {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .2em; color: rgba(255,255,255,.55);
}
.art-divider {
    width: 48px; height: 3px;
    background: linear-gradient(90deg, #008b8b, #60d3aa);
    border-radius: 2px; margin-bottom: 1.25rem;
}
.art-hero-meta { font-size: .82rem; color: rgba(255,255,255,.55); }
.art-hero-meta span { color: rgba(255,255,255,.35); margin: 0 .4rem; }

/* ----- Breadcrumb ----- */
.art-breadcrumb .breadcrumb-item a {
    color: rgba(255,255,255,.6);
    text-decoration: none;
    font-size: .8rem;
    transition: color .2s;
}
.art-breadcrumb .breadcrumb-item a:hover { color: #60d3aa; }
.art-breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,.45); font-size: .8rem; }
.art-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.25); }

/* ----- Layout ----- */
.art-body { padding-top: 3rem; padding-bottom: 4rem; }

/* ----- Author bar ----- */
.art-author-bar {
    border-top: 1px solid #eef0f2;
    border-bottom: 1px solid #eef0f2;
    padding: 1rem 0;
    margin-bottom: 2rem;
}
.art-author-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0,139,139,.25);
}
.art-author-name { font-size: .9rem; font-weight: 600; color: #212529; }
.art-author-role { font-size: .78rem; color: #6c757d; }
.art-share-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: #adb5bd; }

/* ----- Article content ----- */
.art-content { font-size: 1rem; line-height: 1.85; color: #343a40; }
.art-content p { margin-bottom: 1.4rem; }
.art-content h2 { font-size: 1.4rem; margin-top: 2.5rem; margin-bottom: 1rem; color: #212529; }
.art-content h3 { font-size: 1.15rem; margin-top: 2rem; margin-bottom: .75rem; color: #212529; }
.art-content ul, .art-content ol { padding-left: 1.4rem; margin-bottom: 1.4rem; }
.art-content li { margin-bottom: .55rem; }
.art-content strong { color: #212529; }

.art-content blockquote {
    border-left: 4px solid #008b8b;
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    background: #f0fdf8;
    border-radius: 0 8px 8px 0;
}
.art-content blockquote p { margin-bottom: .5rem; font-style: italic; color: #495057; font-size: 1.05rem; }
.art-content blockquote footer { font-size: .82rem; color: #6c757d; }

.art-inline-img {
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.10);
    margin-bottom: 1.5rem;
}
.art-img-caption { font-size: .8rem; color: #6c757d; text-align: center; margin-top: -.75rem; margin-bottom: 1.5rem; }

/* ----- Tags / categoría ----- */
.art-tag {
    display: inline-block;
    background: rgba(0,139,139,.10);
    border: 1px solid rgba(0,139,139,.25);
    color: #005f5f;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    padding: .25rem .75rem; border-radius: 100px;
}

/* ----- Divider nav ----- */
.art-nav-divider { border-color: #eef0f2; }
.art-back-btn { font-size: .9rem; }

/* ----- Sidebar ----- */
.art-sidebar { position: sticky; top: 100px; }

.art-sidebar-card {
    border: 1px solid #eef0f2;
    border-radius: 12px;
    padding: 1.5rem;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    margin-bottom: 1.75rem;
}
.art-sidebar-heading {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .16em; color: #008b8b;
    margin-bottom: 1.1rem; padding-bottom: .6rem;
    border-bottom: 2px solid rgba(0,139,139,.12);
}

/* Related article row */
.art-related-item { text-decoration: none; display: flex; gap: .85rem; align-items: flex-start; }
.art-related-item + .art-related-item { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f0f2f4; }
.art-related-thumb {
    width: 68px; height: 68px; object-fit: cover;
    border-radius: 8px; flex-shrink: 0;
    transition: transform .25s;
}
.art-related-item:hover .art-related-thumb { transform: scale(1.05); }
.art-related-title {
    font-size: .85rem; font-weight: 600; color: #212529; line-height: 1.35;
    transition: color .2s;
}
.art-related-item:hover .art-related-title { color: #008b8b; }
.art-related-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #adb5bd; }

/* Author card in sidebar */
.art-author-card-img {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    border: 3px solid rgba(0,139,139,.25);
}
.art-author-card-name { font-size: .95rem; font-weight: 700; color: #212529; }
.art-author-card-bio  { font-size: .82rem; line-height: 1.6; color: #6c757d; }

/* CTA sidebar */
.art-cta-card {
    background: linear-gradient(135deg, #006e6e 0%, #008b8b 60%, #31af9d 100%);
    border-radius: 12px;
    padding: 1.5rem;
    color: #fff;
    margin-bottom: 1.75rem;
}
.art-cta-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.6); }
.art-cta-title { font-size: 1.05rem; line-height: 1.35; margin: .5rem 0 .75rem; }
.art-cta-desc  { font-size: .82rem; color: rgba(255,255,255,.75); line-height: 1.55; margin-bottom: 1rem; }

/* ----- Listing page cards ----- */
.art-listing-card-img {
    height: 200px; object-fit: cover; width: 100%;
    transition: transform .4s ease;
}
.art-listing-card-img:hover { transform: scale(1.05); }

/* ----- Mobile ----- */
@media (max-width: 767.98px) {
    .art-hero { min-height: 40vh; }
    .art-body  { padding-top: 2rem; padding-bottom: 2.5rem; }
    .art-sidebar { position: static; margin-top: 2.5rem; }
    .art-content { font-size: .95rem; }
}