/* ============ BLOG PAGE ============ */
main{
  max-width:1300px;
  margin:0 auto;
  /* altura del header (80 px) + 20 px de respiro  */
  padding:calc(60px + 10px) 5vw 90px;
  color:#fff;
}

.blog-header{ margin-bottom:2rem; }

.blog-header h1{
  font-size:clamp(2.5rem,4vw,4rem);
  margin:0;
}

/* grid de posts */
.posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:3rem;
}
.post-card{ display:flex; flex-direction:column; }
.post-card img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:6px; margin-bottom:1rem;
}
.post-meta{ font-size:.85rem; opacity:.6; margin-bottom:.4rem; font-style:italic; }
.post-card h2{ font-size:1.35rem; line-height:1.25; margin:0 0 .6rem; }
.post-card p { font-size:.96rem; opacity:.8; }

/* redes */
.social-links{
  display:flex; gap:1rem; justify-content:center; margin-top:70px;
}
.social-btn{
  width:46px; height:46px; border:2px solid #fff; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; transition:.3s;
}
.social-btn:hover{ background:#00baff; border-color:#00baff; }

/* --- What's new on design --- */
.design-news{ margin:80px auto 0; max-width:900px; text-align:center; }
.design-news h3{ font-size:1.4rem; margin:0 0 1.2rem; }

.mag-grid{
  display:flex; justify-content:center; flex-wrap:wrap; gap:2.2rem;
}
.mag-grid img{
  height:42px; filter:grayscale(1) invert(1); opacity:.7; transition:.3s;
}
.mag-grid a:hover img{ opacity:1; transform:scale(1.06); }

/* --- Desactiva el snap SOLO en blog ------------------------- */
html{ scroll-snap-type: none; }
.design-news{ scroll-snap-align: none; }

/* ----- Enlaces dentro de las tarjetas del índice ----- */
.post-card{
  color:#fff;                  /* texto blanco por defecto */
  text-decoration:none;        /* elimina subrayado */
}

/* si quieres un cambio al pasar el cursor */
.post-card:hover h2{
  color:#818181;               /* azul corporativo opcional */
}

/* evita morado/azul tras visitar */
.post-card:visited{
  color:#fff;
}

/* evita scroll horizontal accidental */
html,body{ overflow-x:hidden; }

/* tabla FAQ responsiva: si llega a desbordar, aparece scroll x */
.faq-table{ width:100%; overflow-x:auto; }

/* --- Featured-Projects dentro de las páginas de artículo --- */
.blog-featured a,
.blog-featured a:visited,
.blog-featured a:hover{
  color:#fff !important;
  text-decoration:none;   /* sin subrayado */
}

/* ---------- blog posts / mini-feature ---------- */
.mini-feature .mini-card span,
.mini-feature .mini-card,
.mini-feature .mini-card:visited{
  color:#fff !important;
  text-decoration:none;
}

/* --- desactiva el scroll-forzado SOLO en Blog y posts --- */
html{
  scroll-snap-type:none;   /* anula el “pantalla a pantalla”   */
  overflow-y:auto;         /* el navegador muestra UN scroll   */
}