/* Blog de Boolfy: directorio, encabezado de nota, contenido, compartir y relacionados (complementa /assets/css/styles.css del sitio) */
.nota-header__title {font-weight: 500;}
.nota-header__meta {display: block; margin-top: 14px; font-size: 14px; font-weight: 600; color: #a6a6a6; line-height: 1.4;}
.breadcrumb__text a {color: #a6a6a6;}
.nota-header__image img {width: 100%; height: auto; aspect-ratio: 575 / 388; object-fit: cover; display: block;}
/* Contenido de la nota */
.nota__content h2 {font-size: 30px; font-weight: 600; color: #fff; line-height: 1.25; letter-spacing: -0.5px; margin: 0 0 22px; padding-top: 22px;}
.nota__content h3 {font-size: 22px;}
.nota__content strong {font-weight: 700;}
.nota__content a:hover {color: #c1f243;}
.nota__content ol {counter-reset: paso; margin-bottom: 22px; display: flex; flex-direction: column; gap: 16px;}
.nota__content ol li {counter-increment: paso; padding-left: 40px; min-height: 28px;}
.nota__content ol li:before {content: counter(paso); width: 28px; height: 28px; top: -3px; border-radius: 50%; background: #7b61ff; color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center;}
.nota__content blockquote {margin: 6px 0 28px; padding: 22px 26px; background: #1a1a1a; border-left: 4px solid #c1f243; border-radius: 0 8px 8px 0;}
.nota__content blockquote p {margin: 0; font-size: 19px; font-weight: 600; line-height: 1.4;}
.nota__content figure img {height: auto; display: block;}
.nota__content figcaption {font-size: 13px; color: #a6a6a6; margin-top: 8px;}
.nota__table-wrap {margin: 4px 0 26px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #2c2c2c; border-radius: 8px;}
.nota__table-wrap table {width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45;}
.nota__table-wrap--wide table {min-width: 640px;}
.nota__table-wrap th {background: #7b61ff; color: #fff; font-weight: 700; text-align: left; padding: 13px 16px;}
.nota__table-wrap td {padding: 12px 16px; vertical-align: top; border-top: 1px solid #2c2c2c;}
.nota__table-wrap tbody tr:nth-child(even) td {background: #161616;}
.todavia__title {font-weight: 600;}
/* Compartir */
.nota__share {position: relative; z-index: 20;}
.nota__share-btn {display: inline-flex; align-items: center; gap: inherit; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 8px;}
.nota__share-btn:hover .nota__share-icon, .nota__share-btn[aria-expanded="true"] .nota__share-icon {background: #c9ff3f; color: #0d0d0d;}
.nota__share-btn:focus-visible, .nota__share-menu a:focus-visible, .nota__share-menu button:focus-visible {outline: 2px solid #c9ff3f; outline-offset: 3px;}
.nota__share-menu {position: absolute; top: calc(100% + 10px); left: 0; z-index: 50; min-width: 220px; background: #fff; border-radius: 8px; box-shadow: 0 14px 32px rgba(0,0,0,.35); padding: 8px;}
.nota__share-menu[hidden] {display: none;}
.nota__share-menu a, .nota__share-menu button {display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 15px; font-weight: 600; color: #0d0d0d; text-decoration: none; cursor: pointer; text-align: left;}
.nota__share-menu a:hover, .nota__share-menu button:hover {background: #edf3f9; color: #7b61ff;}
.nota__share-menu i {width: 18px; text-align: center; color: #7b61ff;}
.nota__share-menu .nota__share-sep {height: 1px; background: #e5e5e5; margin: 6px 4px;}
.nota__share-status {margin-left: 12px; font-size: 14px; font-weight: 700; color: #c1f243;}
/* Relacionados */
.relacionados__image img {aspect-ratio: 575 / 388; object-fit: cover; height: auto; display: block;}
.relacionados__art-title a {color: inherit; text-decoration: none;}
.relacionados__art-title a:hover {color: #fff;}
/* Directorio /blog/ */
.blog-hero {padding-top: 176px; margin-bottom: 56px;}
.blog-hero__inner {max-width: 1166px; margin: 0 auto;}
.blog-hero .breadcrumb {margin-bottom: 48px;}
.blog-hero__title {font-weight: 500; font-size: 49px; line-height: 1.15; color: #fff; letter-spacing: -1px; margin-bottom: 16px;}
.blog-hero__intro {font-size: 17px; font-weight: 500; line-height: 1.45; color: #a6a6a6; max-width: 680px;}
.blog-list {margin-bottom: 100px;}
.blog-list__grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1166px; margin: 0 auto;}
.blog-card {display: flex; flex-direction: column; background: #161616; border: 1px solid #262626; border-radius: 8px; overflow: hidden; transition: border-color .2s, transform .2s;}
.blog-card:hover {border-color: #7b61ff; transform: translateY(-2px);}
.blog-card__image {display: block; aspect-ratio: 575 / 388; overflow: hidden; background: #1f1f1f;}
.blog-card__image img {width: 100%; height: 100%; object-fit: cover; display: block;}
.blog-card__body {padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1;}
.blog-card__date {display: inline-flex; align-self: flex-start; background: #7b61ff; color: #fff; font-weight: 600; font-size: 13px; padding: 6px 10px; border-radius: 8px;}
.blog-card__title {font-size: 21px; font-weight: 700; line-height: 1.25; color: #fff;}
.blog-card__title a {color: inherit; text-decoration: none;}
.blog-card__title a:hover {text-decoration: underline;}
.blog-card__summary {font-size: 15px; font-weight: 500; line-height: 1.45; color: #a6a6a6;}
.blog-card__link {margin-top: auto; font-weight: 900; font-size: 13px; text-transform: uppercase; color: #c1f243; text-decoration: underline;}
.blog-empty {max-width: 1166px; margin: 0 auto; padding: 48px 40px; background: #161616; border: 1px solid #262626; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;}
.blog-empty__title {font-size: 24px; font-weight: 600; color: #fff; line-height: 1.25; margin-bottom: 8px;}
.blog-empty__text {font-size: 15px; font-weight: 500; color: #a6a6a6; line-height: 1.45; max-width: 620px;}
@media screen and (max-width: 1100px) {
    .blog-list__grid {grid-template-columns: repeat(2, 1fr); gap: 24px;}
}
@media screen and (max-width: 767px) {
    .blog-hero {padding-top: 130px; margin-bottom: 32px;}
    .blog-hero .breadcrumb {margin-bottom: 24px;}
    .blog-hero__title {font-size: 32px; text-align: center;}
    .blog-hero__intro {font-size: 15px; text-align: center; margin: 0 auto;}
    .blog-list {margin-bottom: 60px;}
    .blog-list__grid {grid-template-columns: 1fr;}
    .blog-empty {padding: 32px 24px; text-align: center; justify-content: center;}
    .nota-header__meta {text-align: center; font-size: 13px;}
    .nota__content h2 {font-size: 24px; padding-top: 14px; margin-bottom: 12px;}
    .nota__content h3 {font-size: 19px;}
    .nota__share-menu {min-width: 0; width: min(280px, calc(100vw - 48px));}
    .nota__share-status {font-size: 12px;}
}
/* Notas con layout "doc": el cabezal (section.nota-header) ya deja el espacio del header fijo */
.nota-header + .mcp-page {padding-top: 0;}
/* Notas "doc": el cuerpo (.mcp-doc) usa los colores del template (section.nota); solo los bloques de código quedan con fondo gris */
.blog-doc .mcp-doc {background: transparent; color: #fff;}
.blog-doc .mcp-doc h1, .blog-doc .mcp-doc h2, .blog-doc .mcp-doc h4, .blog-doc .mcp-doc caption, .blog-doc .mcp-doc strong {color: #fff;}
.blog-doc .mcp-doc h3 {color: #7b61ff;}
.blog-doc .mcp-doc a {color: #fff; text-decoration: underline;}
.blog-doc .mcp-doc a:hover {color: #c1f243;}
.blog-doc .mcp-doc li::marker {color: #6e6c7e;}
.blog-doc .mcp-doc th, .blog-doc .mcp-doc td {border-color: #2c2c2c;}
.blog-doc .mcp-doc th {background: #7b61ff; color: #fff;}
.blog-doc .mcp-doc tbody th {background: transparent;}
.blog-doc .mcp-doc tbody tr:nth-child(even) td, .blog-doc .mcp-doc tbody tr:nth-child(even) th {background: #161616;}
.blog-doc .mcp-doc pre {background: #e0e0e0; color: #222;}
.blog-doc .mcp-doc pre a {color: #0000ee;}