/* ==========================================================================
   FerreApp — Blog
   Complementa styles.css (usa sus variables, nav, botones y footer).
   ========================================================================== */

body.blog-body { background:var(--bg-soft); }

/* ---------- Encabezado del blog ---------- */
.blog-hero{
  padding:148px 0 56px;
  background:
    radial-gradient(700px 360px at 85% -10%, rgba(234,88,12,.10), transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%, var(--bg-soft) 100%);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.blog-hero__inner{ max-width:780px; margin:0 auto; padding:0 24px; }
.blog-hero h1{
  font-size:clamp(2rem, 1.3rem + 2vw, 3rem); font-weight:800;
  letter-spacing:-.03em; color:var(--ink);
}
.blog-hero p{ margin-top:14px; color:var(--slate); font-size:1.1rem; }

/* ---------- Grid de artículos ---------- */
.blog-list{ padding:56px 0 90px; }
.blog-grid{
  max-width:980px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:26px;
}
.post-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
a.post-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.post-card__cover{
  height:158px; display:flex; align-items:center; justify-content:center;
  font-size:3.4rem;
}
.post-card__cover--1{ background:linear-gradient(135deg,#FFF3EA,#FCE6D4); }
.post-card__cover--2{ background:linear-gradient(135deg,#E7F0FF,#DCE7FB); }
.post-card__cover--3{ background:linear-gradient(135deg,#E7F8EE,#D6F0E0); }
.post-card__cover--4{ background:linear-gradient(135deg,#FEF3DD,#FBE8C4); }
.post-card__cover--5{ background:linear-gradient(135deg,#F0EBFE,#E4DBFB); }
.post-card__body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.post-card__tag{
  font-family:var(--font-head); font-weight:700; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--brand); margin-bottom:9px;
}
.post-card h2{ font-size:1.18rem; color:var(--ink); line-height:1.3; margin-bottom:8px; }
.post-card p{ font-size:.95rem; color:var(--slate); flex:1; }
.post-card__meta{
  margin-top:14px; font-size:.82rem; color:var(--slate-2);
  font-family:var(--font-head); font-weight:500;
}
.post-card--soon{ opacity:.62; }
.post-card--soon .post-card__tag{ color:var(--slate-2); }
.post-card__soon{
  display:inline-block; margin-top:14px;
  font-family:var(--font-head); font-weight:600; font-size:.78rem;
  background:var(--bg-soft2); color:var(--slate); padding:.3rem .7rem; border-radius:999px;
}

/* ==========================================================================
   ARTÍCULO
   ========================================================================== */
.post-hero{
  padding:140px 0 26px;
  background:linear-gradient(180deg,#FFFFFF, var(--bg-soft));
  border-bottom:1px solid var(--line);
}
.post-hero__inner{ max-width:760px; margin:0 auto; padding:0 24px; }
.post-back{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-head); font-weight:600; font-size:.88rem; color:var(--brand);
  margin-bottom:18px;
}
.post-back:hover{ color:var(--brand-dark); }
.post-hero__tag{
  font-family:var(--font-head); font-weight:700; font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brand);
}
.post-hero h1{
  font-size:clamp(1.8rem, 1.2rem + 2.2vw, 2.7rem); font-weight:800;
  letter-spacing:-.03em; color:var(--ink); margin:12px 0 16px; line-height:1.18;
}
.post-meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--font-head); font-weight:500; font-size:.86rem; color:var(--slate-2);
}
.post-meta__dot{ width:4px; height:4px; border-radius:50%; background:var(--line); }

/* ---- Cuerpo / prosa ---- */
.post-body{ max-width:720px; margin:0 auto; padding:38px 24px 30px; }
.prose{ font-size:1.075rem; line-height:1.78; color:var(--ink-2); }
.prose > p{ margin:0 0 1.3em; }
.prose h2{
  font-family:var(--font-head); font-weight:800; font-size:1.5rem;
  color:var(--ink); letter-spacing:-.02em; margin:1.9em 0 .55em;
}
.prose h3{
  font-family:var(--font-head); font-weight:700; font-size:1.16rem;
  color:var(--ink); margin:1.55em 0 .45em;
}
.prose ul, .prose ol{ margin:0 0 1.35em; padding-left:1.35em; }
.prose li{ margin-bottom:.55em; }
.prose li::marker{ color:var(--brand); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose a{ color:var(--brand); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover{ color:var(--brand-dark); }
.prose blockquote{
  margin:1.6em 0; padding:.2em 0 .2em 1.15em;
  border-left:3px solid var(--brand); color:var(--slate); font-style:italic;
}
.prose hr{ border:none; border-top:1px solid var(--line); margin:2.2em 0; }

/* Caja de datos / tip dentro del artículo */
.post-note{
  background:var(--brand-soft); border:1px solid #FAD9BE; border-radius:var(--radius);
  padding:18px 22px; margin:1.6em 0; font-size:1rem; color:var(--brand-ink);
}
.post-note strong{ color:var(--brand-ink); }

/* ---- CTA de conversión dentro del artículo ---- */
.post-cta{
  background:
    radial-gradient(420px 220px at 18% 0%, rgba(234,88,12,.22), transparent 60%),
    var(--ink);
  color:#fff; border-radius:var(--radius-l); padding:40px 36px;
  text-align:center; margin:42px 0 8px;
}
.post-cta h3{ font-family:var(--font-head); font-weight:800; font-size:1.45rem; color:#fff; }
.post-cta p{ color:#94A3B8; margin:10px auto 22px; max-width:440px; }

/* ---- Pie del artículo ---- */
.post-foot{ max-width:720px; margin:0 auto; padding:8px 24px 80px; }
.post-foot__box{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:26px;
}
.post-foot__box span{ font-family:var(--font-head); font-weight:600; color:var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .blog-grid{ grid-template-columns:1fr; }
  .blog-hero{ padding-top:120px; }
  .post-hero{ padding-top:118px; }
  .prose{ font-size:1.02rem; }
  .post-cta{ padding:32px 22px; }
}