con width:100% + padding;
al pasar de border-box a content-box en hover el padding se suma por fuera y el
botón crece (medido: 360px → 408px) y desborda su contenedor. Se fuerza border-box
en hover, scopeado a .bl-page. */
.bl-page a:hover, .bl-page a:hover *{ box-sizing: border-box !important; }
/* ── Títulos: el theme padre fuerza mayúsculas ────────────────────────────
El theme padre trae `h1,h2,h3,h4,h5,h6{ text-transform: uppercase; }`. Nuestro
reset (build/input.css) usa :where() (especificidad 0) y no cubre text-transform,
así que esa regla pasa. El diseño pide caja normal. */
.bl-page h1, .bl-page h2, .bl-page h3, .bl-page h4, .bl-page h5, .bl-page h6{ text-transform: none !important; }
/* ── Sidebar pegajoso ─────────────────────────────────────────────────────
`position:sticky` lo anulan DOS ancestros del theme con overflow != visible:
`.st-pusher` (wrapper del menú off-canvas) y el propio `body` (overflow: hidden auto).
Se les devuelve overflow visible SOLO en este template. El clip horizontal lo sigue
haciendo `html{overflow-x:hidden}`, que no tocamos, así que el menú off-canvas
(trasladado -250px y con visibility:hidden) sigue sin asomar.
Verificar siempre que scrollWidth <= innerWidth después de tocar esto. */
body.bl-blog-v2 .st-pusher{ overflow: visible !important; }
body.bl-blog-v2{ overflow: visible !important; }
/* Tercer ancestro: `.page-wrapper.fixNav-enabled` (overflow:hidden auto del theme) y, encima,
`body.bl-fullwidth .page-wrapper{overflow-x:hidden}` que agrega nuestro propio bl-fullwidth.css.
Es el scroll-container mas cercano al sidebar, asi que mientras tenga overflow el sticky no
engancha contra el viewport. El clip horizontal lo sigue haciendo `html{overflow-x:hidden}`. */
body.bl-blog-v2 .page-wrapper{ overflow: visible !important; }
@media (min-width: 1024px){
.bl-page .bl-blog-sidebar{
position: sticky !important;
top: 140px !important;
/* El sidebar mide ~1193px y no entra en pantallas de ~900px de alto: sin esto
la parte de abajo queda inalcanzable. `overflow` en el PROPIO elemento sticky
no anula su sticky — solo el overflow de los ANCESTROS lo hace (por eso arriba
se les puso overflow:visible a .st-pusher/.page-wrapper/body: esos sí son
ancestros del sidebar). Acá el elemento se vuelve su propio scroll-container
interno, independiente del sticky que lo posiciona contra el viewport. */
max-height: calc(100vh - 160px) !important;
overflow-y: auto !important;
scrollbar-width: thin !important;
scrollbar-color: var(--bl-line) transparent !important;
}
}
/* ── Robustez responsive ───────────────────────────────────────────────────
El reset de build/input.css declara img{max-width:100%;height:auto} pero con
`:where()`, o sea especificidad 0: CUALQUIER regla del theme le gana. Acá va
con especificidad real y !important, que es lo que hace falta para que una
imagen no desborde su contenedor cuando la pantalla se achica. */
.bl-page img,
.bl-page video,
.bl-page iframe,
.bl-page embed,
.bl-page object{ max-width: 100% !important; }
/* `height:auto` va SOLO en las imagenes del contenido del post. Aplicarlo a todas
(como estaba) le gana a las utilidades de alto fija —`.bl-page img` es 0-1-1 y
`.h-\[320px\]` es 0-1-0, y con important:true las dos son !important— y aplastaba
el hero, que quedaba con la altura de su relacion de aspecto y el titulo desbordando. */
.bl-page .bl-prose img,
.bl-page .bl-prose video,
.bl-page .bl-prose iframe{ height: auto !important; }
/* El logo y las miniaturas del sidebar tienen tamaño propio: se declaran DESPUES
y con mas especificidad que la regla generica de arriba, que si no les pisa el alto. */
.bl-page .bl-blog-sidebar > img{ width: 298px !important; max-width: 100% !important; height: auto !important; }
.bl-page .bl-blog-sidebar li img{ width: 100% !important; height: 100% !important; object-fit: cover !important; }
/* Contenido ancho del post: que scrollee DENTRO de su caja en vez de estirar la pagina.
Las tablas y los son la causa mas comun de scroll horizontal en un articulo. */
.bl-page .bl-prose table{ display: block !important; width: 100% !important; overflow-x: auto !important; }
.bl-page .bl-prose pre{ overflow-x: auto !important; }
.bl-page .bl-prose iframe{ width: 100% !important; }
/* Ninguna palabra larga (URLs sin espacios) puede estirar la columna. */
.bl-page .bl-prose{ overflow-wrap: break-word !important; word-break: break-word !important; }