/* =====================================================
   DETALLES PUBLICOS V2
   Curso + Noticia. Lectura, conversion y rendimiento.
===================================================== */
.detail-page {
    --detail-border: #e5ebf3;
    --detail-muted: #6f7b8c;
    --detail-text: #172033;
    --detail-soft: #f6f9fd;
    --detail-blue: #0d6efd;
}

.detail-breadcrumb {
    margin-bottom: 18px;
    font-size: .79rem;
}

.detail-breadcrumb .breadcrumb {
    margin: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

.detail-breadcrumb .breadcrumb-item {
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-breadcrumb a {
    color: #607087;
    text-decoration: none;
}

.detail-breadcrumb a:hover {
    color: var(--detail-blue);
}

.detail-shell {
    align-items: flex-start;
}

.detail-surface {
    border: 1px solid var(--detail-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .045);
}

.detail-header {
    padding: 26px;
    margin-bottom: 20px;
}

.detail-eyebrow-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
}

.detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #edf4ff;
    color: #2a63b7;
    font-size: .71rem;
    font-weight: 800;
    text-decoration: none;
}

.detail-chip:hover {
    background: #e1edff;
    color: var(--detail-blue);
}

.detail-title {
    margin: 0 0 12px;
    color: var(--detail-text);
    font-size: clamp(1.65rem, 3.2vw, 2.7rem);
    font-weight: 850;
    line-height: 1.13;
    letter-spacing: -.025em;
}

.detail-lead {
    max-width: 820px;
    margin: 0 0 14px;
    color: #647185;
    font-size: 1rem;
    line-height: 1.65;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    color: #788496;
    font-size: .78rem;
}

.detail-meta span,
.detail-meta a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.detail-meta a {
    color: inherit;
    text-decoration: none;
}

.detail-rating-star {
    color: #f59f00;
}

.detail-hero-media {
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--detail-border);
    border-radius: 20px;
    background: #edf1f6;
}

.detail-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-media-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    color: #fff;
    font-size: .73rem;
    font-weight: 850;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
}

.detail-media-badge.free {
    background: #f57c00;
}

.detail-media-badge.discount {
    background: #198754;
}

.detail-media-badge.recommended,
.detail-media-badge.news {
    background: #0d6efd;
}

.detail-content-card {
    padding: clamp(20px, 3vw, 32px);
    margin-bottom: 22px;
}

.detail-section-title {
    margin: 0 0 14px;
    color: var(--detail-text);
    font-size: 1.18rem;
    font-weight: 850;
}

.detail-description {
    color: #49576a;
    font-size: .97rem;
    line-height: 1.8;
}

.detail-rich-content {
    color: #354255;
    font-size: 1rem;
    line-height: 1.82;
    overflow-wrap: anywhere;
}

.detail-rich-content h2,
.detail-rich-content h3,
.detail-rich-content h4 {
    margin-top: 1.55em;
    margin-bottom: .65em;
    color: var(--detail-text);
    font-weight: 850;
    line-height: 1.3;
}

.detail-rich-content p {
    margin-bottom: 1.05em;
}

.detail-rich-content img,
.detail-rich-content video,
.detail-rich-content iframe {
    display: block;
    max-width: 100% !important;
    height: auto;
    margin: 22px auto;
    border-radius: 13px;
}

.detail-rich-content iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.detail-rich-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.detail-rich-content table td,
.detail-rich-content table th {
    padding: 9px 11px;
    border: 1px solid #e0e5ec;
}

.detail-sidebar {
    position: sticky;
    top: 96px;
}

.detail-offer-card,
.detail-side-card {
    padding: 18px;
    border: 1px solid var(--detail-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .045);
}

.detail-side-card + .detail-side-card,
.detail-offer-card + .detail-side-card {
    margin-top: 16px;
}

.detail-offer-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: .75rem;
    font-weight: 850;
}

.detail-offer-status.free {
    color: #e86f00;
}

.detail-offer-status.discount {
    color: #198754;
}

.detail-offer-status.normal {
    color: #637085;
}

.detail-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 13px;
}

.detail-price {
    color: #172033;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1;
}

.detail-price.free {
    color: #e86f00;
}

.detail-old-price {
    color: #9aa4b2;
    font-size: .82rem;
    text-decoration: line-through;
}

.detail-offer-card .btn {
    min-height: 48px;
    border-radius: 12px;
    font-weight: 800;
}

.detail-offer-card.free .btn-primary {
    border-color: #f57c00;
    background: #f57c00;
}

.detail-offer-card.discount .btn-primary {
    border-color: #198754;
    background: #198754;
}

.detail-trust {
    margin: 10px 0 0;
    color: #7a8595;
    font-size: .72rem;
    text-align: center;
}

.detail-offer-facts {
    display: grid;
    gap: 9px;
    padding: 13px 0 0;
    margin: 14px 0 0;
    border-top: 1px solid #edf0f4;
    color: #697588;
    font-size: .76rem;
}

.detail-offer-facts span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-community {
    padding: 13px;
    margin-top: 14px;
    border-radius: 13px;
    background: #f7f9fc;
}

.detail-community strong {
    display: block;
    margin-bottom: 5px;
    color: #29354a;
    font-size: .78rem;
}

.detail-community p {
    margin: 0 0 9px;
    color: #768193;
    font-size: .72rem;
    line-height: 1.45;
}

.detail-community-links {
    display: flex;
    gap: 7px;
}

.detail-community-links a {
    flex: 1 1 0;
    border-radius: 9px;
    font-size: .72rem;
    font-weight: 750;
}

.detail-side-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 11px;
    color: var(--detail-text);
    font-size: .9rem;
    font-weight: 850;
}

.detail-side-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 9px;
    padding: 9px 0;
    color: inherit;
    text-decoration: none;
}

.detail-side-item + .detail-side-item {
    border-top: 1px solid #edf0f4;
}

.detail-side-thumb {
    width: 72px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 9px;
    background: #edf1f6;
}

.detail-side-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-side-copy {
    min-width: 0;
}

.detail-side-copy strong {
    display: -webkit-box;
    overflow: hidden;
    color: #29354a;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.detail-side-item:hover strong {
    color: var(--detail-blue);
}

.detail-side-copy small {
    display: block;
    margin-top: 4px;
    color: #8993a1;
    font-size: .66rem;
}

.detail-share {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 17px;
    margin-top: 22px;
    border-top: 1px solid #edf0f4;
}

.detail-share .btn {
    border-radius: 9px;
    font-size: .73rem;
}

.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.detail-tag {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    background: #f0f3f7;
    color: #657084;
    font-size: .7rem;
    font-weight: 700;
    text-decoration: none;
}

.detail-tag:hover {
    background: #e7effb;
    color: var(--detail-blue);
}

.detail-related {
    margin-top: 30px;
}

.detail-related-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.detail-related-head h2 {
    margin: 0;
    color: var(--detail-text);
    font-size: 1.2rem;
    font-weight: 850;
}

.detail-related-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--detail-border);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .045);
    transition: transform .16s ease, box-shadow .16s ease;
    content-visibility: auto;
    contain-intrinsic-size: 310px;
}

.detail-related-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, .08);
}

.detail-related-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #edf1f6;
}

.detail-related-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-related-badge {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #0d6efd;
    color: #fff;
    font-size: .64rem;
    font-weight: 800;
}

.detail-related-card.free .detail-related-badge {
    background: #f57c00;
}

.detail-related-card.discount .detail-related-badge {
    background: #198754;
}

.detail-related-body {
    padding: 13px;
}

.detail-related-title {
    display: -webkit-box;
    min-height: 42px;
    overflow: hidden;
    margin: 0 0 7px;
    color: #263247;
    font-size: .85rem;
    font-weight: 850;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.detail-related-title a {
    color: inherit;
    text-decoration: none;
}

.detail-related-title a:hover {
    color: var(--detail-blue);
}

.detail-related-meta {
    color: #85909f;
    font-size: .68rem;
}

.detail-comments {
    padding: clamp(18px, 3vw, 28px);
    margin-top: 30px;
}

.detail-comments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.detail-comments-head h2 {
    margin: 0;
    color: var(--detail-text);
    font-size: 1.18rem;
    font-weight: 850;
}

.detail-comment-form {
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    background: #f9fbfd;
}

.detail-stars-input {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.detail-star-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #f59f00;
    font-size: 1.35rem;
    line-height: 1;
}

.detail-comment {
    padding: 15px 0;
}

.detail-comment + .detail-comment {
    border-top: 1px solid #edf0f4;
}

.detail-comment-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.detail-comment-user {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.detail-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #0d6efd;
}

.detail-comment-user strong {
    display: block;
    color: #2d394c;
    font-size: .8rem;
}

.detail-comment-user small {
    color: #8a94a1;
    font-size: .67rem;
}

.detail-comment-rating {
    flex: 0 0 auto;
    color: #f59f00;
    font-size: .78rem;
}

.detail-comment-text {
    margin: 10px 0 0 47px;
    color: #596678;
    font-size: .82rem;
    line-height: 1.62;
}

.detail-comment-actions {
    display: flex;
    gap: 6px;
    margin: 8px 0 0 47px;
}

.detail-pagination .pagination {
    justify-content: center;
    gap: 4px;
    margin-top: 18px;
    margin-bottom: 0;
}

.detail-pagination .page-link {
    border-radius: 8px !important;
}

/* Noticia: columna de lectura mas contenida. */
.news-detail-article .detail-rich-content {
    max-width: 820px;
    margin-inline: auto;
    font-size: 1.03rem;
}

.news-detail-cover {
    aspect-ratio: 16 / 9;
}

body.dark-mode .detail-surface,
body.dark-mode .detail-offer-card,
body.dark-mode .detail-side-card,
body.dark-mode .detail-related-card,
body.dark-mode .detail-comment-form {
    background: #1f1f1f;
    border-color: #333;
}

body.dark-mode .detail-title,
body.dark-mode .detail-section-title,
body.dark-mode .detail-side-title,
body.dark-mode .detail-related-head h2,
body.dark-mode .detail-comments-head h2,
body.dark-mode .detail-related-title,
body.dark-mode .detail-side-copy strong {
    color: #f1f3f5;
}

body.dark-mode .detail-lead,
body.dark-mode .detail-description,
body.dark-mode .detail-rich-content,
body.dark-mode .detail-meta,
body.dark-mode .detail-comment-text {
    color: #b7bec8;
}

body.dark-mode .detail-community {
    background: #262626;
}

@media (max-width: 991px) {
    .detail-sidebar {
        position: static;
        margin-bottom: 22px;
    }
}

@media (max-width: 767px) {
    .detail-header {
        padding: 20px;
    }

    .detail-title {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }

    .detail-breadcrumb .breadcrumb-item {
        max-width: 38%;
    }

    .detail-community-links {
        flex-direction: column;
    }

    .detail-comment-head {
        flex-direction: column;
    }

    .detail-comment-rating {
        margin-left: 47px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .detail-related-card {
        transition: none !important;
    }
}