/* ---------- Imagen destacada del artículo ---------- */
.blog-article-img {
    display: block;
    margin: 0 auto 2rem auto;
    max-width: 720px;
    width: 100%;
    border-radius: 1.5rem;
    border: 2px solid var(--color-accent);
    background: #fff;
    box-shadow: 0 4px 26px #080C1933, 0 1.5px 8px #C7A35030;
    transition: box-shadow 0.22s;
}
.blog-article-img:hover {
    box-shadow: 0 8px 40px #C7A35055, 0 2px 18px #1A1F2B44;
}

/* ---------- Títulos ---------- */
h1.gradient-title {
    font-size: 2.3rem;
    line-height: 1.16;
    margin-bottom: 0.7em;
    letter-spacing: -1.5px;
    text-align: center;
}
.subtitle {
    color: var(--color-secondary);
    font-size: 1.22rem;
    font-weight: 500;
    opacity: 0.93;
    margin-bottom: 0.6em;
    text-align: center;
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.05em;
}

/* ---------- Meta info ---------- */
.blog-article-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    color: var(--color-primary);
    font-size: 1.2rem;
    opacity: 0.86;
    margin-bottom: 1rem;
}
.blog-article-meta i {
    color: var(--color-accent);
    margin-right: 0.27em;
}
.blog-article-meta .text-gold {
    font-size: 1.2em;
}

/* ---------- Separador dorado entre meta info ---------- */
.blog-article-meta .mx-2 {
    font-size: 1.25em;
    vertical-align: middle;
}

/* ---------- Contenido del artículo ---------- */
section.mb-5 {
    font-size: 1.14rem;
    line-height: 1.7;
    color: var(--color-primary);
    border-radius: 1.3rem;
    padding: 2.3rem 2.7rem 1.6rem 2.7rem;
    margin-bottom: 2.8rem;
    word-break: break-word;
    overflow-x: auto;
    min-height: 220px;
}
section.mb-5 h2, 
section.mb-5 h3,
section.mb-5 h4 {
    color: var(--color-accent);
    font-weight: 800;
    margin-top: 2.2em;
    margin-bottom: 1em;
    font-family: 'Montserrat', Arial, sans-serif;
    letter-spacing: -0.5px;
}
section.mb-5 p, section.mb-5 ul, section.mb-5 ol {
    margin-bottom: 1.17em;
}
section.mb-5 ul, section.mb-5 ol {
    padding-left: 1.3em;
}
section.mb-5 strong {
    color: var(--color-accent);
}
section.mb-5 blockquote {
    border-left: 4px solid var(--color-accent);
    background: #FAF8F1;
    color: var(--color-secondary);
    padding: 0.8em 1.3em;
    margin: 1.5em 0;
    border-radius: 0.6em;
    font-style: italic;
    font-size: 1.03em;
    box-shadow: 0 1px 8px #baa36111;
}

/* ---------- Compartir ---------- */
.blog-share {
    background: var(--color-secondary);
    border-radius: 1.2rem;
    border: 1.5px solid var(--color-accent);
    box-shadow: 0 3px 14px #080C1930;
    padding: 1.45rem 1rem 1.4rem 1rem;
    
    margin: 0 auto 2.4rem auto;
}
.blog-share h5 {
    color: var(--color-accent);
    letter-spacing: 1px;
    margin-bottom: 1.3rem;
    font-weight: 900;
    font-family: 'Montserrat', Arial, sans-serif;
}
.blog-share .button {
    min-width: 135px;
    font-size: 1rem;
    border-radius: 1.4rem;
    box-shadow: 0 3px 16px #baa36115;
    padding: 0.57em 1.1em;
}

/* ---------- Carrusel de artículos recomendados ---------- */
.carousel-section {
    background: var(--color-primary);
    border-radius: 1.5rem;
    box-shadow: 0 4px 20px #080C1930;
    padding: 2.7rem 0 1.8rem 0;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.carousel-section h2 {
    color: var(--color-accent);
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;
    letter-spacing: 0px;
    margin-bottom: 2rem;
}
.neurofluxia-carousel {
    border-radius: 1.2rem;
    overflow: hidden;
    background: var(--color-secondary);
    box-shadow: 0 6px 28px #080C1935;
}
.neurofluxia-carousel-img {
    object-fit: cover;
    height: 305px;
    width: 100%;
    border-bottom: 2.5px solid var(--color-accent);
    background: #fff;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: rgba(0, 0, 0, 0.8) !important;
}

@media (max-width: 991px) {
    .blog-article-img {
        max-width: 98vw;
    }
    section.mb-5 {
        padding: 1.3rem 0.8rem 1rem 0.8rem;
        font-size: 1.03rem;
    }
    .carousel-section {
        padding: 1.3rem 0 0.7rem 0;
    }
}
@media (max-width: 767px) {
    h1 {
        font-size: 1.43rem !important;
        padding-left: 0.1em;
        padding-right: 0.1em;
    }
    .subtitle {
        font-size: 1rem;
    }
    .blog-article-meta {
        font-size: 0.8rem;
        
    }
    .carousel-caption {
        padding: 0.6rem 0.7rem 0.8rem 0.7rem;
        font-size: 0.98em;
    }
    .carousel-section {
        padding: 0.9rem 0 0.2rem 0;
        border-radius: 0.9rem;
    }
    .carousel-section h2{
        font-size: 1.2rem;
    }
    .blog-share {
        max-width: 99vw;
        padding: 1.1rem 0.35rem 1.1rem 0.35rem;
    }
    .neurofluxia-carousel-img {
        height: 140px;
    }
}
@media (max-width: 575px) {
    .blog-article-img {
        border-radius: 0.7rem;
        margin-bottom: 0.9rem;
    }
    section.mb-5 {
        padding: 0.7rem 0.1rem 0.6rem 0.1rem;
        font-size: 0.96rem;
        border-radius: 0.6rem;
    }
    .carousel-section {
        padding: 0.3rem 0 0.1rem 0;
        border-radius: 0.45rem;
    }
    .carousel-caption {
        padding: 0.18rem 0.14rem 0.31rem 0.14rem;
        border-radius: 0.6rem;
        font-size: 0.87em;
    }
    .blog-share {
        padding: 0.9rem 0.13rem 0.7rem 0.13rem;
        border-radius: 0.5rem;
    }
    .neurofluxia-carousel-img {
        height: 90px;
    }
}

/* ---------- Carrusel Caption ---------- */
.carousel-caption {
    background: rgba(26, 31, 43, 0.92);
    border-radius: 1.1rem;
    padding: 1.2rem 1.4rem 1.1rem 1.4rem;
    box-shadow: 0 3px 22px #baa36136;
    backdrop-filter: blur(2px);
}
.carousel-caption h4, .carousel-caption h6 {
    color: var(--color-accent);
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 0.5em;
    font-family: 'Montserrat', Arial, sans-serif;
    text-shadow: 0 2px 18px #C7A35066;
}
.carousel-caption .lore-text {
    color: var(--color-text);
    opacity: 0.97;
    font-size: 1.06em;
    margin-bottom: 0.9em;
}
.btn-carrusel, .carousel-caption .btn {
    background: var(--color-primary);
    color: var(--color-accent);
    font-weight: bold;
    border: 2px solid var(--color-accent);
    border-radius: 1.1rem;
    box-shadow: 0 3px 12px #C7A35024;
    padding: 0.49em 1.1em;
    margin-top: 0.18em;
    transition: background 0.18s, box-shadow 0.22s, color 0.18s;
}
.btn-carrusel:hover, .carousel-caption .btn:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    box-shadow: 0 8px 18px #C7A35055;
}

/* ---------- Ajuste de links en el contenido ---------- */
section.mb-5 a {
    color: var(--color-accent);
    text-decoration: underline;
    transition: color 0.22s;
}
section.mb-5 a:hover {
    color: var(--color-primary);
    background: var(--color-accent);
    border-radius: 0.3em;
    padding: 0.06em 0.25em;
}

/* ---------- Tablas, code y bloques ---------- */
section.mb-5 table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.3em 0;
    font-size: 1em;
    background: #f7f6f3;
    border-radius: 0.7em;
    overflow: hidden;
    box-shadow: 0 2px 8px #baa36115;
}
section.mb-5 th, section.mb-5 td {
    padding: 0.82em 1em;
    border: 1px solid #C7A35044;
}
section.mb-5 th {
    background: var(--color-secondary);
    color: var(--color-accent);
    font-weight: bold;
    letter-spacing: 0.04em;
}
section.mb-5 code, section.mb-5 pre {
    background: #080C19;
    color: var(--color-accent);
    padding: 0.18em 0.55em;
    border-radius: 0.5em;
    font-family: 'JetBrains Mono', 'Fira Mono', 'Menlo', monospace;
    font-size: 0.99em;
}

/* ---------- Responsive para tablas dentro del artículo ---------- */
@media (max-width: 700px) {
    section.mb-5 table,
    section.mb-5 thead,
    section.mb-5 tbody,
    section.mb-5 th,
    section.mb-5 td,
    section.mb-5 tr {
        display: block;
        width: 100%;
    }
    section.mb-5 th, section.mb-5 td {
        box-sizing: border-box;
        padding: 0.63em 0.29em;
    }
    section.mb-5 th {
        background: var(--color-secondary);
        color: var(--color-accent);
    }
}

/* ---------- Toast Copiado (opcional JS) ---------- */
#copied-toast {
    position: fixed;
    bottom: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: var(--color-bg);
    padding: 0.7rem 1.4rem;
    border-radius: 1.3rem;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 4px 24px #baa36145;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.27s;
}
#copied-toast.show {
    opacity: 1;
    pointer-events: all;
}