/* Recursos — biblioteca de contenido de brainlof.com.
   Reutiliza los tokens de brainlof_site.css (:root). Todo va bajo .rec para no
   tocar el resto del sitio. Se carga DESPUÉS de brainlof_site.css. */

.rec{ background:var(--paper); color:var(--ink); }
.rec .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* Cabecera de la biblioteca */
.rec-hero{ padding:56px 0 28px; border-bottom:1px solid var(--line);
  background:radial-gradient(60% 80% at 92% -20%, color-mix(in srgb,var(--cyan) 10%,transparent), transparent 70%),
             radial-gradient(50% 70% at 2% 0%, color-mix(in srgb,var(--blue) 10%,transparent), transparent 72%); }
.rec-kicker{ font-family:"IBM Plex Mono",monospace; font-size:.74rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }
.rec-hero h1{ font-family:"Archivo",system-ui,sans-serif; font-size:clamp(1.9rem,4vw,2.7rem);
  font-weight:800; letter-spacing:-.025em; margin:.35em 0 .2em; line-height:1.08; }
.rec-hero p{ color:var(--ink-2); max-width:60ch; font-size:1.05rem; margin:0; }

/* Grilla de artículos */
.rec-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px;
  padding:34px 0 60px; }
.rec-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px;
  background:var(--paper); padding:20px 20px 18px; text-decoration:none; color:inherit;
  box-shadow:0 1px 2px rgba(10,20,45,.05); transition:box-shadow .15s, transform .15s, border-color .15s; }
.rec-card:hover{ box-shadow:0 10px 28px -18px rgba(10,20,45,.35); transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--blue) 35%,var(--line)); }
.rec-card .rec-meta{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--muted);
  letter-spacing:.04em; }
.rec-card h2{ font-family:"Archivo",system-ui,sans-serif; font-size:1.12rem; font-weight:700;
  letter-spacing:-.02em; line-height:1.2; margin:8px 0 8px; color:var(--ink); }
.rec-card p{ color:var(--ink-2); font-size:.92rem; line-height:1.5; margin:0 0 14px; }
.rec-card .rec-leer{ margin-top:auto; font-family:"IBM Plex Mono",monospace; font-size:.8rem;
  font-weight:600; color:var(--blue); }

/* Artículo */
.rec-art{ padding:26px 0 60px; }
.rec-breadcrumb{ font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--muted);
  margin-bottom:14px; }
.rec-breadcrumb a{ color:var(--muted); text-decoration:none; }
.rec-breadcrumb a:hover{ color:var(--blue); text-decoration:underline; }
.rec-art h1{ font-family:"Archivo",system-ui,sans-serif; font-size:clamp(1.8rem,3.6vw,2.5rem);
  font-weight:800; letter-spacing:-.025em; line-height:1.1; margin:0 0 6px; max-width:22ch; }
.rec-art .rec-meta{ font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--muted);
  margin-bottom:22px; }

/* Tipografía del cuerpo (ancho legible ~68ch) */
.rec-prose{ max-width:68ch; }
.rec-prose .rec-lead{ font-family:"Source Serif 4",Georgia,serif; font-size:1.18rem; line-height:1.5;
  color:var(--ink-2); margin:0 0 22px; }
.rec-prose h2{ font-family:"Archivo",system-ui,sans-serif; font-size:1.4rem; font-weight:750;
  letter-spacing:-.02em; margin:30px 0 10px; }
.rec-prose h3{ font-family:"Archivo",system-ui,sans-serif; font-size:1.08rem; font-weight:700;
  margin:18px 0 4px; color:var(--ink); }
.rec-prose p{ font-size:1.02rem; line-height:1.65; color:var(--ink-2); margin:0 0 14px; }
.rec-prose ul, .rec-prose ol{ margin:0 0 16px; padding-left:22px; }
.rec-prose li{ font-size:1.02rem; line-height:1.6; color:var(--ink-2); margin:6px 0; }
.rec-prose a{ color:var(--blue); }
.rec-prose strong{ color:var(--ink); }
.rec-prose .rec-nota{ font-size:.88rem; color:var(--muted); font-style:italic;
  border-top:1px solid var(--line); padding-top:14px; margin-top:26px; }

/* CTA al pie del artículo */
.rec-cta{ margin:30px 0 0; padding:22px; border-radius:14px;
  background:var(--mist); border:1px solid var(--line); max-width:68ch; }
.rec-cta h3{ font-family:"Archivo",system-ui,sans-serif; font-size:1.15rem; margin:0 0 6px; }
.rec-cta p{ color:var(--ink-2); margin:0 0 14px; }

.rec footer .rec-ftag{ font-size:.9rem; color:var(--muted); margin-top:12px; max-width:34ch; }

@media (max-width:640px){ .rec-grid{ grid-template-columns:1fr; } }