/* ═══════════════════════════════════════════════════════════════════════════
   LAS PORTADAS DEL BLOG — el listado de /blog (07-sep-2026)

   Cada artículo es una tarjeta ancha con borde finísimo y mucho aire: a la
   izquierda el título en DOS líneas (la primera en serif fina, espaciada y en
   mayúsculas; la segunda en negrita sans), debajo «PUBLICADO EL: 07.08.2026»,
   la entradilla y «LEER MÁS ››» subrayado; a la derecha una foto grande con
   las esquinas redondeadas. En móvil la foto va arriba y el texto debajo.

   Solo la carga blog.html ({% block cabeza %}). No toca `.art` ni
   `.rejilla-blog`: esas las sigue usando articulo.html en «Seguir leyendo».
   Usa SOLO variables que ya existen (tema.css / estilo.css). `--serif` solo
   está definida con el tema puesto (el de serie): con ?tema=0 cae a Georgia.
   ═══════════════════════════════════════════════════════════════════════════ */

.posts{display:flex;flex-direction:column;gap:26px}

/* La tarjeta entera es el enlace: se pincha en cualquier sitio. */
.post{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(26px,4vw,60px);align-items:center;
  background:var(--roca);border:1px solid var(--linea);border-radius:24px;
  padding:clamp(24px,3.4vw,48px);color:var(--tinta);text-decoration:none}
/* Con `.posts` delante a propósito: la tarjeta también es `.rv` (aparece al
   hacer scroll) y `.js .rv` / `.js .rv.on` de estilo.css pesan más que un
   `.post` solo; sin esto el hover no levantaba la tarjeta y el borde y la
   sombra cambiaban a saco. La opacidad se mantiene a .9s para el desvanecido. */
.posts .post{transition:opacity .9s var(--e),border-color .35s var(--e),
  box-shadow .35s var(--e),transform .35s var(--e)}
.posts .post:hover{border-color:var(--linea2);transform:translateY(-3px);
  box-shadow:0 34px 60px -44px var(--sombra-f)}
.post:focus-visible{outline:2px solid var(--lima);outline-offset:4px}

/* La primera, más alta: foto más cuadrada y título más grande. */
.post-grande{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}

.post-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}

/* Etiqueta de arriba: «INVERSIÓN · 7 MIN DE LECTURA». Sans, nunca mono. */
.post-etq{font-family:var(--d);font-size:11px;letter-spacing:.16em;font-weight:600;
  text-transform:uppercase;color:var(--brasa);margin:0 0 22px}

/* El título en dos líneas. El h2 solo agrupa: cada línea lleva su fuente. */
.post-tit{margin:0;font-weight:400;letter-spacing:0;line-height:1.1}
.post-tit .fina{display:block;font-family:var(--serif,Georgia,"Times New Roman",serif);
  font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(17px,1.5vw,22px);line-height:1.35;color:var(--tinta)}
.post-tit .negra{display:block;font-family:var(--d);font-weight:800;
  letter-spacing:-.025em;font-size:clamp(26px,2.5vw,38px);line-height:1.08;
  color:var(--tinta);margin-top:8px}
.post-tit .fina + .negra{margin-top:10px}
.post-grande .post-tit .fina{font-size:clamp(18px,1.7vw,25px)}
.post-grande .post-tit .negra{font-size:clamp(30px,3vw,46px);letter-spacing:-.03em}

/* «PUBLICADO EL: 07.08.2026» */
.post-fecha{font-family:var(--d);font-size:11px;letter-spacing:.16em;font-weight:600;
  text-transform:uppercase;color:var(--tenue);margin:20px 0 0}
.post-fecha time{font-variant-numeric:tabular-nums}

.post-ent{font-size:15.5px;line-height:1.66;color:var(--mudo);max-width:50ch;margin:18px 0 0}

/* «LEER MÁS ››», subrayado fino y separado del texto. */
.post-leer{font-family:var(--d);font-size:11px;letter-spacing:.16em;font-weight:600;
  text-transform:uppercase;color:var(--tinta);margin-top:28px;
  text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;
  transition:color .3s var(--e)}
.post:hover .post-leer{color:var(--lima)}

/* La foto: grande, redondeada, sin borde. Recorta a 4:3 con `object-fit`, así
   valen igual las verticales; el encuadre viene del JSON (`object-position`). */
.post-foto{position:relative;margin:0;border-radius:22px;overflow:hidden;
  aspect-ratio:4/3;background:var(--roca2)}
.post-grande .post-foto{aspect-ratio:5/4}
.post-foto img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--e)}
.post:hover .post-foto img{transform:scale(1.035)}

/* El crédito sobre la foto: dice de qué proyecto es el render. */
.post-cred{position:absolute;left:14px;bottom:14px;margin:0;
  font-family:var(--d);font-size:10px;letter-spacing:.14em;font-weight:600;
  text-transform:uppercase;color:#fff;background:rgba(23,21,18,.55);
  padding:6px 11px;border-radius:999px;backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);max-width:calc(100% - 28px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Móvil: la foto arriba, el texto debajo ──────────────────────────────── */
@media (max-width:760px){
  .posts{gap:18px}
  .post,.post-grande{grid-template-columns:1fr;gap:20px;padding:14px 14px 26px;
    border-radius:22px;align-items:stretch}
  .post-foto,.post-grande .post-foto{order:-1;aspect-ratio:4/3;border-radius:18px}
  .post-txt{padding:0 6px}
  .post-etq{margin-bottom:14px}
  .post-tit .fina,.post-grande .post-tit .fina{font-size:15px;letter-spacing:.14em}
  .post-tit .negra,.post-grande .post-tit .negra{font-size:25px;letter-spacing:-.02em}
  .post-fecha{margin-top:14px}
  .post-ent{font-size:15px;margin-top:12px}
  .post-leer{margin-top:20px;min-height:24px}
}

/* Sin ratón no hay hover: la tarjeta no se mueve ni se acerca la foto. */
@media (hover:none){
  .posts .post:hover{transform:none;box-shadow:none}
  .post:hover .post-foto img{transform:none}
  .post:active{border-color:var(--linea2)}
}