/* ============================================================
   AERIA · vuelalegal.com — Blog
   Reutiliza tokens, nav, footer y botones de style.css y los
   textos (.legal__*) de legal.css. Solo añade la rejilla de
   artículos con portada ilustrada (SVG on-brand, CSP-safe).
   ============================================================ */
.blogwrap{ max-width:var(--maxw); margin:0 auto; padding:128px 24px 96px; }
.blog__intro{ font-family:var(--body); color:var(--slate); font-size:clamp(15px,2.2vw,17px);
  line-height:1.6; max-width:62ch; margin:12px 0 4px; }
.blog__intro strong{ color:var(--fog); }

.posts{ list-style:none; padding:0; margin:44px 0 10px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.post{ margin:0; }
.post__card{ display:flex; flex-direction:column; height:100%; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--rad); background:var(--panel);
  transition:border-color .28s var(--ease), transform .28s var(--ease); }
.post__card:hover{ border-color:var(--line-cy); transform:translateY(-3px); }

/* Portada ilustrada */
.post__cover{ position:relative; aspect-ratio:16/10; display:grid; place-items:center; overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(130% 120% at 80% 12%, rgba(45,212,222,.15), transparent 58%),
    linear-gradient(158deg, var(--panel-2) 0%, var(--ink-2) 72%); }
.post__cover::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(136,147,167,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(136,147,167,.055) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(125% 95% at 50% 18%, #000, transparent 78%);
  mask-image:radial-gradient(125% 95% at 50% 18%, #000, transparent 78%); }
.post__cover svg{ position:relative; width:46%; height:auto;
  fill:none; stroke:var(--cyan); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 15px rgba(45,212,222,.34)); }
.post__cover svg .dim{ stroke:var(--slate); stroke-opacity:.55; }
.post__cover svg .cy{ fill:var(--cyan); stroke:none; }

/* Portada fotográfica */
.post__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.post__cover::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,15,26,.42) 0%, transparent 30%, transparent 66%, rgba(10,15,26,.34) 100%); }

.post__soon{ position:absolute; top:13px; left:13px; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--cyan);
  background:rgba(10,15,26,.6); border:1px solid var(--line-cy); border-radius:999px; padding:5px 11px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* Cuerpo */
.post__body{ padding:19px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1; }
.post__kicker{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--cyan); }
.post__title{ font-family:var(--display); font-weight:600; font-size:19px; line-height:1.26; color:var(--fog); margin:0; }
.post__desc{ color:var(--slate); font-size:14.5px; line-height:1.55; margin:0; }

@media(max-width:980px){ .posts{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .posts{ grid-template-columns:1fr; } .blogwrap{ padding:108px 20px 72px; } }

.post__card{ text-decoration:none; color:inherit; }
.post__meta{ margin-top:auto; padding-top:4px; font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:var(--slate); }