/* =========================================================
   BITSIDEAS — Insights: índice y artículo
   ========================================================= */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

.post{
  display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-elev);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease),border-color .4s var(--ease);
}
.post:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb,var(--accent-500) 40%,var(--line))}

.post__img{position:relative;display:block;overflow:hidden}
.post__img img{width:100%;height:210px;object-fit:cover;transition:transform 1s var(--ease-out)}
.post:hover .post__img img{transform:scale(1.07)}
.post__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(24,21,31,.5),transparent 55%);
}

.post__cat{
  position:absolute;left:16px;bottom:14px;z-index:2;
  padding:6px 13px;border-radius:99px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.28);color:#fff;
  font-family:var(--font);font-weight:600;font-size:.72rem;letter-spacing:.04em;
}
.post__cat--static{
  position:static;display:inline-block;margin-bottom:16px;
  background:color-mix(in srgb,var(--accent-500) 12%,transparent);
  border-color:transparent;color:var(--accent-600);
}

.post__body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.post__body time{
  font-family:var(--font);font-size:.76rem;letter-spacing:.05em;
  color:var(--muted);display:block;margin-bottom:10px;
}
.post__body h3{font-size:1.2rem;line-height:1.3;margin-bottom:10px}
.post__body h3 a{transition:color .3s var(--ease)}
.post:hover h3 a{color:var(--brand-600)}
.post__body p{color:var(--muted);font-size:.93rem;line-height:1.6}

@media (max-width:1080px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.posts{grid-template-columns:1fr}}

/* ---------------- Artículo completo ---------------- */
.post-full{max-width:100%;margin-inline:auto}
.post-full__head{margin-bottom:34px}
/* La entradilla lleva max-width:56ch del estilo general, pensado para las
   secciones normales. Dentro del articulo el cuerpo va al ancho completo,
   asi que el tope la dejaba cortada a media columna. */
.post-full .lead{max-width:100%}
.post-full h1{
  font-family:var(--font-light);font-weight:300;
  font-size:clamp(2rem,4.2vw,3rem);letter-spacing:-.022em;line-height:1.1;
  margin-bottom:16px;
}
.post-full__meta{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--font);font-size:.84rem;color:var(--muted);
}
.post-full__img{
  margin:0 0 38px;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 14px 30px rgba(24,21,31,.14), 0 34px 68px rgba(24,21,31,.16);
}
.post-full__img img{width:100%;height:clamp(260px,34vw,420px);object-fit:cover}

/* Texto largo: medida y ritmo de lectura */
.prose{font-size:1.06rem;line-height:1.78;color:var(--ink-2)}
.prose h2{
  font-family:var(--font);font-weight:600;font-size:1.4rem;color:var(--ink);
  margin:40px 0 14px;
}
.prose h3{font-size:1.14rem;margin:30px 0 10px}
.prose p{margin-bottom:18px}
.prose ul,.prose ol{display:grid;gap:10px;margin:0 0 22px}
.prose li{position:relative;padding-left:22px}
.prose li::before{
  content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:2px;
  background:var(--accent-500);transform:rotate(45deg);
}
.prose blockquote{
  margin:26px 0;padding:20px 24px;border-radius:var(--r-md);
  background:var(--bg-soft);border-left:3px solid var(--accent-500);
  font-size:1.06rem;color:var(--ink);
}
.prose pre{
  margin:24px 0;padding:20px 22px;border-radius:var(--r-md);overflow-x:auto;
  background:#241f2c;color:#e6e2ee;
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.88rem;line-height:1.6;
}
.prose code{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.9em;
  background:var(--bg-soft);padding:2px 6px;border-radius:5px;
}
.prose pre code{background:none;padding:0}
.prose a{color:var(--brand-600);text-decoration:underline;text-underline-offset:3px}

.post-full__foot{
  margin-top:48px;padding-top:32px;border-top:1px solid var(--line);text-align:center;
}
.post-full__foot p{font-size:1.1rem;color:var(--ink);margin-bottom:20px}


/* ---------------- Página de artículo: mejoras de lectura ----------------
   La columna de texto conserva su medida cómoda (~72 caracteres), pero la
   fotografía se ensancha por encima: así la página no parece vacía en
   pantallas anchas sin castigar la legibilidad, que es lo que pasa cuando se
   estira el párrafo. */
.section--post{padding-top:clamp(96px,11vw,140px)}

.post-full{max-width:100%}

.post-full__back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;
  font-family:var(--font);font-weight:600;font-size:.84rem;color:var(--muted);
  transition:color .3s var(--ease),gap .3s var(--ease-out);
}
.post-full__back svg{
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--ease-out);
}
.post-full__back:hover{color:var(--accent-600);gap:11px}
.post-full__back:hover svg{transform:translateX(-3px)}

/* La figura rompe la medida del texto y respira */
.post-full__img{
  /* La figura acompana al cuerpo: ambos al ancho completo del contenedor.
     Nada de transform aqui — la figura lleva .reveal y la animacion de
     entrada usa transform, asi que cualquier transform propio lo pisa la
     animacion y la imagen se descoloca al entrar en pantalla. */
  width:100%;
  margin-inline:0;
  margin-block:34px 40px;
}

/* Primer párrafo algo mayor: marca la entrada al texto */
.prose > p:first-of-type{font-size:1.12rem;color:var(--ink-2)}

.post-full__foot{margin-top:44px}

/* Relacionados: dos tarjetas, no tres, para que no compitan con el artículo */
.posts--rel{grid-template-columns:repeat(2,1fr);max-width:900px;margin-inline:auto}
@media (max-width:760px){.posts--rel{grid-template-columns:1fr}}