@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  --bg: #ffffff;
  --muted: #6b7280;
  --text: #444;
  --brand: #0d2b66;
  --accent: #0b4bd8;
  --surface: #f8fafc;
  --card-shadow: 0 8px 26px rgba(13,43,102,0.06);
  --radius: 10px;
  --max-width: 1100px;
}

html,body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
  background:var(--bg); 
  color:var(--text)
}

.blog-container {
  max-width:var(--max-width);
  margin:0 auto;
  padding:2rem 1rem
}

.blog-title {
  color: #001b7a;
  font-weight: 800;
}
/* Post wrapper */
.post-article {
  max-width:900px;
  margin:1.25rem auto 2.5rem;
  line-height:1.78;
  font-size:1.02rem;
  color:var(--text)}

/* Lead: primer párrafo destacado */
.post-article p:first-of-type {
  font-size:1.125rem;
  color:var(--muted);
  margin-top:.6rem;
  margin-bottom:1rem
}

/* Encabezados dentro del post */
.post-article h2 {
  font-size:1.45rem;
  color:var(--brand);
  margin:1.4rem 0 .6rem;
  font-weight:700
}

.post-article h3 {
  font-size:1.18rem;
  color:var(--brand);
  margin:1.05rem 0 .45rem;
  font-weight:600
}

.post-article h4 { 
  font-size:1rem;
  color:var(--brand);
  margin:1rem 0 .4rem;
  font-weight:600
}

/* Hero de post (imagen destacada) */
.post-hero {
  width:100%;
  height:420px;
  object-fit:cover;
  border-radius:12px;
  margin:0 0 1.25rem;
  box-shadow:var(--card-shadow);
  border:1px solid rgba(13,43,102,0.04)
}

/* Figuras y captions */
.post-article figure {
  margin:1rem 0;
  text-align:center
}
.post-article figure img{
  max-width:100%;
  height:auto;
  border-radius:8px
}
.post-article figcaption{
  font-size:.9rem;
  color:var(--muted);
  margin-top:.45rem
}

/* Imágenes alineadas y floated */
.post-article img.align-left {
  float:left;
  margin:0 .9rem 0 0;
  width:45%;
  max-width:320px
}
.post-article img.align-right {
  float:right;
  margin:0 0 0 .9rem;
  width:45%;
  max-width:320px
}

/* Blockquote destacado */
.post-article blockquote {
  border-left:4px solid rgba(13,43,102,0.12);
  padding:1rem 1rem;
  margin:1.25rem 0;
  background:linear-gradient(90deg, rgba(13,43,102,0.02), transparent);border-radius:8px;
  color:var(--muted)}

/* Listas */
.post-article ul {
  padding-left:1.25rem;
  margin:0.6rem 0
}
.post-article ol {
  padding-left:1.25rem;
  margin:0.6rem 0
}
.post-article li {
  margin:.45rem 0
}

/* Tablas */
.post-article table {
  width:100%;
  border-collapse:collapse;
  margin:1rem 0;
  background:var(--surface);
  border-radius:8px;
  overflow:hidden
}
.post-article th,.post-article td {
  padding:.6rem .8rem;
  border-bottom:1px solid rgba(15,23,36,0.06);
  text-align:left
}
.post-article thead th {
  background:linear-gradient(90deg, rgba(11,75,216,0.06), rgba(13,43,102,0.03));color:var(--brand);
  font-weight:600
}

/* Código y preformateado */
.post-article pre {
  background:#0f1724; 
  color:#e6eef8;
  padding:1rem;
  border-radius:8px;
  overflow:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace}
.post-article code {
  background:#0f172415;
  padding:.15rem .35rem;
  border-radius:6px
}

/* Enlaces */
.post-article a {
  color:var(--accent);
  text-decoration:underline
}
.post-article a:hover {
  text-decoration:none
}

/* Pull quote */
.pull-quote {
  font-size:1.15rem;
  font-weight:600;
  color:var(--brand);
  border-left:3px solid var(--accent);
  padding:0.6rem 1rem;
  margin:1rem 0;
  border-radius:6px;
  background:#fbfdff
}

/* Meta info */
.post-meta {
  color:var(--muted);
  font-size:.95rem;
  margin-bottom:1rem
}

/* Responsive adjustments */
@media (max-width:900px){
  .post-hero {
    height:300px
  }
  .post-article img.align-left,.post-article img.align-right {
    width:100%;
    float:none;
    margin:0 0 1rem
  }
}

@media (max-width:640px){
  .post-article {
    padding:0 0
  }
  .post-article p:first-of-type {
    font-size:1.03rem
  }
}

/* Mantener compatibilidad con clases existentes */
.card {
  background:var(--bg);
  border:none
}
.card .card-title {
  color:var(--brand);
  font-weight:700
}

/* Modal y botones (conservar) */
.modal-hero {
  width:100%;
  height:240px;
  object-fit:cover;
  border-radius:6px;
  margin:0 0 1rem 0
}
.modal-panel h2 {
  margin-top:0;
  color:var(--brand)
}
.modal-article {
  line-height:1.7;
  color:var(--text)
}
.modal-panel {
  background:linear-gradient(180deg,#ffffff,#fbfbff)
}

/* Anular estilos de hover/focus del botón cerrar del modal */
.modal-close.btn-close,.modal-close.btn-close:hover,.modal-close.btn-close:focus,.modal-close.btn-close:active {
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  outline:none!important;
  -webkit-appearance:none!important
  ;appearance:none!important;
  padding:.25rem .4rem!important;
  cursor:pointer
}
.modal-close.btn-close:focus-visible {
  outline:2px solid rgba(0,27,122,0.15);
  border-radius:6px
}