/* BeKilly Theme Pack — mejora visual rápida sin tocar HTML */

/* Tipografía y base */
html,body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;color:#101828;background:#fff;line-height:1.6}
img{max-width:100%;height:auto}

/* Contenedor y espacios */
.bk-page{max-width:1120px;margin:0 auto;padding:2.5rem 1rem}
.bk-page p{margin:.75rem 0}
.bk-page ul{margin:.75rem 0 1rem 1.25rem}

/* Títulos */
.bk-page h1{font-size:clamp(1.8rem,2.2vw,2.4rem);font-weight:700;margin:.25rem 0 1rem;color:#0F172A}
.bk-page h2{font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:600;margin:1.25rem 0 .5rem;color:#111827}

/* Botón */
.bk-btn{background:#111827;color:#fff;border:none;padding:.8rem 1.2rem;border-radius:.625rem;box-shadow:0 1px 2px rgba(16,24,40,.06);transition:transform .06s ease,opacity .2s}
.bk-btn:hover{opacity:.9;transform:translateY(-1px)}
.bk-btn:active{transform:translateY(0)}

/* Cards rápidas */
.bk-card{border:1px solid #E5E7EB;border-radius:1rem;padding:1rem;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04)}

/* Header genérico (si el del index no aplica, al menos esto ordena) */
header{position:sticky;top:0;background:#fff;border-bottom:1px solid #F1F5F9;z-index:50}
header nav{max-width:1120px;margin:0 auto;display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.8rem 1rem}
header nav a{color:#111827;text-decoration:none;padding:.5rem .6rem;border-radius:.5rem}
header nav a:hover{background:#F1F5F9}

/* Footer genérico */
footer{border-top:1px solid #F1F5F9;margin-top:2rem}
footer .inner{max-width:1120px;margin:0 auto;padding:1.25rem 1rem;color:#475569}

/* Grilla utilitaria */
.bk-grid{display:grid;gap:1rem;grid-template-columns:repeat(12,1fr)}
.bk-col-4{grid-column:span 4}
.bk-col-6{grid-column:span 6}
.bk-col-12{grid-column:span 12}
@media (max-width: 900px){
  .bk-col-4,.bk-col-6{grid-column:span 12}
}

/* Links */
a{color:#0EA5E9}
a:hover{color:#0284C7}

/* Listas */
ul{list-style:disc}

/* ===== Fix sección problemas (tres columnas) ===== */
.bk-problemas { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 2rem 1rem; 
}

/* Usa tu grilla utilitaria pero definimos columnas aquí */
.bk-problemas .bk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 2rem;
  align-items: start;
  text-align: center;
}

@media (max-width: 900px) {
  .bk-problemas .bk-grid { grid-template-columns: 1fr; }
}

/* Títulos sin anchos fijos ni negrita extrema */
.bk-problemas .bk-card h1,
.bk-problemas .bk-card h2,
.bk-problemas .bk-card h3,
.bk-problemas .bk-card .bk-title {
  display: block;
  width: auto !important;   /* neutraliza widths heredados */
  max-width: none;
  margin: 0 0 .5rem;
  font-weight: 700;         /* baja de 900 a 700 */
  line-height: 1.25;
  /* text-wrap: balance;  <- opcional; no todos los navegadores lo soportan */
}

.bk-problemas .bk-card p {
  margin: 0 auto;
  line-height: 1.6;
  max-width: 38ch;          /* lectura cómoda */
}
/* Evita que <strong> vuelva a 900 dentro de los títulos */
.bk-problemas .bk-card h1 strong,
.bk-problemas .bk-card h2 strong,
.bk-problemas .bk-card h3 strong { font-weight: inherit; }

/* Si usas .bk-col-* dentro de .bk-problemas, ignora esos spans (12-col → 3-col) */
.bk-problemas .bk-col-4,
.bk-problemas .bk-col-6,
.bk-problemas .bk-col-12 { grid-column: auto; }