/* =========================================================
   BLOG · ivettegutierreza.com
   Usa los mismos tokens y fuentes de styles.css
   ========================================================= */

.nav-links a.active{ color:var(--sun); }
.nav-mobile-blog{
  display:none; font-size:.83rem; color:var(--sun);
  border:1px solid rgba(255,255,255,0.25); border-radius:8px; padding:6px 14px;
}
@media(max-width:720px){ .nav-mobile-blog{ display:inline-block; } }

.btn-light{ border:1px solid var(--line); color:var(--ink); background:#fff; font-family:inherit; cursor:pointer; line-height:1.4; }
.btn-light:hover{ border-color:var(--coral-deep); color:var(--coral-deep); }

/* ---------- Portada: "Últimas entradas" ---------- */
.sec-head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.home-posts{ margin-top:34px; }

/* ---------- Cabeceras del blog ---------- */
.blog-hero-bleed{ padding:56px 0 60px; }
.blog-hero-bleed.compact{ padding:44px 0 48px; }
.blog-hero-bleed .headline{ max-width:18ch; }
.blog-tools{ margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }
#blog-search{
  flex:1; min-width:220px; max-width:440px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22); border-radius:8px;
  color:#fff; font:inherit; font-size:.92rem; padding:12px 16px; outline:none;
  transition:border-color .15s ease, background .15s ease;
}
#blog-search::placeholder{ color:#A39BAD; }
#blog-search:focus{ border-color:var(--sun); background:rgba(255,255,255,0.12); }
.back-link{ display:inline-block; font-size:.82rem; color:#C9C2D3; margin-bottom:18px; }
.back-link:hover{ color:var(--sun); }
.hero-inner .back-link{ display:block; }

.cat-row,.tag-cloud{ display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; }
.cat-chip,.tag-pill{
  font-size:.82rem; color:var(--ink); padding:7px 14px; border-radius:999px;
  background:var(--bg-soft); border:1px solid var(--line); transition:all .15s ease;
}
.cat-chip:hover,.tag-pill:hover{ border-color:var(--coral-deep); color:var(--coral-deep); }
.cat-chip.is-active,.tag-pill.is-active{ background:var(--coral); border-color:var(--coral); color:#fff; }

section.blog-list{ padding:32px 0 80px; border-bottom:none; }

/* ---------- Tarjetas ---------- */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:860px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .post-grid{ grid-template-columns:1fr; } }
.post-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.post-card:hover{ box-shadow:0 10px 22px rgba(25,20,32,0.09); transform:translateY(-2px); border-color:var(--coral-deep); }
.post-card-link{ position:absolute; inset:0; z-index:1; }
.post-card-img{ aspect-ratio:16/9; overflow:hidden; background:var(--bg-soft); }
.post-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card-body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.post-card-title{ font-family:'Space Grotesk',sans-serif; font-size:1.08rem; font-weight:600; line-height:1.3; margin:10px 0 8px; }
.post-card-excerpt{ margin:0 0 16px; font-size:.88rem; line-height:1.6; color:var(--ink-soft); }
.post-card-foot{ margin-top:auto; font-size:.8rem; font-weight:600; color:var(--coral-deep); }

.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:.78rem; color:var(--muted); }
.post-meta.on-dark{ color:#C9C2D3; }
.post-cat{
  position:relative; z-index:2;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--coral-deep); background:rgba(216,67,31,0.1); padding:3px 9px; border-radius:999px;
}
.post-meta.on-dark .post-cat{ color:var(--sun); background:rgba(255,200,87,0.14); }
.draft-badge{ font-size:.68rem; font-weight:700; color:#8A5E10; background:rgba(255,200,87,0.35); padding:3px 9px; border-radius:999px; }
.search-empty{ color:var(--muted); padding:40px 0; }

.pager{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:44px; }
.pager-info{ font-size:.82rem; color:var(--muted); }

/* ---------- Entrada ---------- */
.post-hero{ padding:52px 0 58px; }
.post-hero .hero-inner{ max-width:760px; }
.post-title{
  margin-top:16px; font-family:'Fraunces',serif; font-optical-sizing:auto; font-weight:600;
  font-size:clamp(2rem, 4.6vw, 3.1rem); line-height:1.12; letter-spacing:-0.01em; color:var(--paper);
}
.post{ max-width:720px; margin:0 auto; padding:48px 0 24px; }
.post-cover{ margin:0 0 36px; border-radius:14px; overflow:hidden; box-shadow:0 14px 28px rgba(25,20,32,0.12); }
.post-cover img{ width:100%; display:block; }

.prose{ font-size:1.05rem; line-height:1.78; color:var(--ink-soft); }
.prose > * + *{ margin-top:1.15em; }
.prose > *:first-child{ margin-top:0; }
.prose > *{ margin-bottom:0; }
.prose > h2 + *, .prose > h3 + *{ margin-top:.6em; }
.prose h2{ font-family:'Fraunces',serif; font-weight:600; font-size:1.7rem; line-height:1.25; margin-top:1.9em; color:var(--ink); }
.prose h3{ font-size:1.25rem; font-weight:600; margin-top:1.6em; }
.prose h4{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--coral-deep); margin-top:1.6em; }
.prose a{ color:var(--coral-deep); text-decoration:underline; text-underline-offset:3px; }
.prose strong,.prose b{ color:var(--ink); }
.prose ul,.prose ol{ padding-left:1.3em; }
.prose li + li{ margin-top:.4em; }
.prose li::marker{ color:var(--coral); }
.prose blockquote{
  margin-left:0; margin-right:0; padding:18px 24px; border-radius:0 12px 12px 0;
  border-left:4px solid var(--coral); background:var(--bg-soft);
  font-family:'Fraunces',serif; font-style:italic; font-size:1.15rem; color:var(--ink);
}
.prose code{ font-family:'IBM Plex Mono',monospace; font-size:.86em; background:var(--bg-soft); border:1px solid var(--line); border-radius:4px; padding:.1em .4em; }
.prose pre{ background:var(--plum); color:#EDE8F3; border-radius:12px; padding:18px 20px; overflow-x:auto; font-size:.9rem; }
.prose pre code{ background:none; border:none; padding:0; color:inherit; }
.prose img{ max-width:100%; height:auto; border-radius:12px; }
.prose hr{ border:none; border-top:1px dashed var(--line); margin:2.2em 0; }
.prose table{ width:100%; border-collapse:collapse; font-size:.93rem; display:block; overflow-x:auto; }
.prose th,.prose td{ border:1px solid var(--line); padding:10px 12px; text-align:left; }
.prose th{ background:var(--bg-soft); font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--ink); }

.post-foot{ margin-top:52px; padding-top:28px; border-top:1px dashed var(--line); }
.post-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.share{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.share-label{ font-size:.72rem; color:var(--muted); margin-right:4px; }
.share .btn{ padding:9px 16px; font-size:.84rem; }

.author-box{
  display:flex; gap:20px; align-items:flex-start;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:24px;
}
.author-box img{ width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.author-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; }
.author-box p{ margin:4px 0 10px; font-size:.9rem; line-height:1.55; color:var(--ink-soft); }
@media(max-width:560px){ .author-box{ flex-direction:column; } }

.related{ max-width:960px; margin:0 auto; padding:40px 0 80px; }
.related .eyebrow{ margin-bottom:20px; }

/* ---------- Pie en páginas del blog ---------- */
.footer-row{ display:flex; justify-content:space-between; width:100%; flex-wrap:wrap; gap:12px; }
footer a{ color:#C9C2D3; }
footer a:hover{ color:var(--sun); }
.sec-head-row .link-arrow{ position:relative; z-index:1; }