/* =========================================================
   styles-blog.css – Blog NTB con tema "Dark Elegant UX"
   ========================================================= */

/* Variables de colores */
:root{
  --bg-main:#1a1c1f;      /* fondo principal gris oscuro */
  --card-bg:#24272b;      /* tarjetas */
  --ui-bg:#2f3338;
  --border:#3a3f45;

  --txt-main:#f1f3f5;     /* texto principal */
  --txt-sub:#a5abb3;      /* texto secundario */

  --primario:#ff4450;     /* CTA rojo NTB */
  --link:#3b82f6;         /* links accesibles */
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --trend:#3b82f6;
  --vol:#f59e0b;

  --track:#1e2126;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg-main);
  color:var(--txt-main);
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  line-height:1.6;
}

/* ───────────── Top Nav ───────────── */
.top-nav{
  position:sticky;top:0;z-index:30;
  background:linear-gradient(180deg, #1d2023 0%, rgba(29,32,35,.9) 100%);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(6px);
}
.container-nav{
  max-width:1220px;margin:0 auto;padding:.8rem 1rem;
  display:flex;align-items:center;gap:1rem;justify-content:space-between;
}
.container-nav .logo img{height:32px;width:auto;display:block}
.container-nav nav ul{list-style:none;display:flex;gap:1rem}
.container-nav nav a{
  color:var(--txt-sub);text-decoration:none;font-weight:600;
  padding:.35rem .6rem;border-radius:.45rem;transition:.16s background,.16s color
}
.container-nav nav a:hover, .container-nav nav a.active{
  background:#2a2e33;color:#fff
}

/* ───────────── Contenedor principal ───────────── */
.blog-container, .article-detail{
  max-width:1220px;margin:1.6rem auto;
  padding:1.4rem 1rem;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.blog-container h1, .article-detail h1{
  font:800 1.4rem/1.1 'Inter',sans-serif;letter-spacing:.2px;color:#fff;margin-bottom:1rem
}

/* ───────────── Grid de tarjetas (listado) ───────────── */
.container-blog-cards{
  display:grid;
  gap:1.2rem;
  grid-template-columns: repeat(3, 1fr); /* desktop */
}
.article-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:.85rem;
  overflow:hidden;display:flex;flex-direction:column;
  transition:.16s transform,.16s border-color,.16s box-shadow;
}
.article-card:hover{
  transform:translateY(-4px);
  border-color:var(--primario);
  box-shadow:0 0 10px rgba(255,68,79,.25)
}
.article-card .card-cover{
  width:100%;
  height:180px;
  object-fit:cover;
  background:#0f1215;
  border-bottom:1px solid var(--border)
}
.article-card .card-title{
  font:700 1rem/1.2 'Inter',sans-serif;color:#fff;
  padding:.8rem .9rem .2rem
}
.article-card .meta{
  font-size:.78rem;color:var(--txt-sub);
  padding:0 .9rem .2rem
}
.article-card .card-excerpt{
  color:#dfe3e8;font-size:.9rem;line-height:1.4;
  padding:.35rem .9rem .9rem;flex:1
}
.btn-read-more{
  margin:.2rem .9rem .95rem;
  display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;color:#fff;font:700 .9rem/1 'Inter',sans-serif;
  padding:.6rem .85rem;border-radius:.55rem;
  border:1px solid var(--primario);
  background:var(--primario);
  transition:.16s transform,.16s box-shadow,.16s background;
}
.btn-read-more:hover{
  transform:translateY(-2px);
  box-shadow:0 0 12px rgba(255,68,80,.35);
  background:#e03b45;
}

/* ───────────── Cabecera del artículo ───────────── */
.article-header{
  display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem
}
.article-header .subtitle{
  color:var(--txt-sub);font:600 .95rem/1.2 'Inter',sans-serif
}
.published-date{color:var(--txt-sub);font-size:.82rem}

/* ───────────── Artículo: portada + cuerpo ───────────── */
.article-cover{
  width:100%;
  height:auto;
  max-height:600px;
  object-fit:contain;
  background:#0f1215;
  border-radius:.8rem;
  border:1px solid var(--border);
  display:block;
  margin:0 auto;
}
.article-content{
  display:flex;flex-direction:column;gap:1rem
}
.article-body{
  color:var(--txt-main);
  font-size:1.05rem;
  line-height:1.65;
  max-width:760px;
  margin:0 auto;
}
.article-body h2, .article-body h3, .article-body h4{
  color:#fff;margin-top:1.1rem;margin-bottom:.5rem
}
.article-body img{
  max-width:100%;height:auto;border-radius:.5rem;border:1px solid var(--border)
}
.article-body a{
  color:var(--link);
  text-decoration:none
}
.article-body a:hover{text-decoration:underline}

/* Botón volver */
.back-to-blog{margin-top:.6rem}
.back-to-blog .btn-read-more{margin-left:0}

/* ───────────── Chips/metas rápidas ───────────── */
.meta-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .6rem;background:#1a1e23;border:1px solid var(--border);
  border-radius:.55rem;color:#d9dde3;font:600 .8rem/1 'Inter',sans-serif
}

/* ───────────── Responsivo ───────────── */
@media (max-width:1023px){   /* Tablets */
  .container-blog-cards{
    grid-template-columns: repeat(2, 1fr);
  }
  .article-card .card-cover{height:160px}
}
@media (max-width:719px){    /* Móviles */
  .container-blog-cards{
    grid-template-columns: 1fr;
  }
  .article-card .card-cover{height:200px}
}