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 ─────────────────────────────────────────────────────
En Miami hubo que poner overflow:visible a body y a dos wrappers de Woopress para que el sticky
enganchara. Acá NO: el body de estos themes recorta en x el panel del megamenú de ElementsKit
(750px fuera de pantalla) y, con visible, la página scrolleaba de costado.
Verificar siempre que scrollWidth <= innerWidth después de tocar esto. */
@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; }
/* ── Índice del blog: paginación (markup de paginate_links, type=list) ──── */
.bl-page .bl-blog-pager ul.page-numbers{
display:flex !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center !important;
gap:3px !important; margin:0 !important; padding:0 !important; list-style:none !important;
background:none !important; border:0 !important;
}
.bl-page .bl-blog-pager li{ list-style:none !important; margin:0 !important; padding:0 !important; border:0 !important; }
.bl-page .bl-blog-pager .page-numbers:not(ul){
display:flex !important; align-items:center !important; justify-content:center !important;
min-width:26px !important; height:43px !important; padding:0 .25rem !important;
font-size:21px !important; line-height:1 !important; color:var(--bl-ink) !important;
background:transparent !important; border:0 !important; border-radius:0 !important; text-decoration:none !important;
}
.bl-page .bl-blog-pager .page-numbers.current{ background:#000 !important; color:#fff !important; }
/* Los números del carrusel de Picks son