/* ════════════════════════════════════════════════════════════════
   Blog — Libros Gacelo (librosgacelo.com/blog/)
   Mismos tokens y estilos de cabecera/pie que el catálogo (index.html).
   ════════════════════════════════════════════════════════════════ */

/* ═══ Tokens ═══ */
:root{
  --g-bg:#f7f3ee; --g-surface:#ffffff; --g-text:#1c1a17; --g-muted:#7a7369;
  --g-accent:#e6007a; --g-accent-dark:#b8005f; --g-accent-light:#fce8f3;
  --g-border:#e8e3dc; --g-wa:#25d366;
  --g-display:'Playfair Display',Georgia,serif;
  --g-body:'DM Sans',system-ui,sans-serif;
  --g-ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--g-bg); font-family:var(--g-body); color:var(--g-text);}

/* ════════════════ Barra superior ════════════════ */
.gh-topbar{ background:var(--g-text); color:#efe9e1; }
.gh-topbar__inner{
  max-width:78.5rem; margin:0 auto; padding:.5rem 1.5rem;
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  font-size:.78rem; text-align:center;
}
.gh-topbar svg{ width:.9rem; height:.9rem; color:#ff4da6; flex-shrink:0; }
.gh-topbar b{ color:#fff; font-weight:600; }
.gh-topbar a{ text-decoration:none; }

/* ════════════════ Navegación ════════════════ */
.gh-nav{
  position:sticky; top:0; z-index:1000;
  background:rgba(247,243,238,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--g-border);
}
.gh-nav__inner{
  max-width:78.5rem; margin:0 auto; padding:.55rem 1.5rem;
  display:flex; align-items:center; gap:1.5rem; position:relative;
}
.gh-logo{
  display:inline-flex; align-items:center;
  text-decoration:none; line-height:1; margin-right:auto;
}
.gh-logo-img{ height:2.25rem; width:auto; max-width:12rem; display:block; }
.gh-logo-text{
  font-family:var(--g-display); font-weight:700; font-size:1.6rem;
  color:var(--g-text); letter-spacing:-.015em;
}
.gh-logo-text span{ color:var(--g-accent); }
.gh-links{ display:flex; align-items:center; gap:1.9rem; list-style:none; margin:0; padding:0; }
.gh-links a{
  position:relative; font-size:.93rem; font-weight:500;
  color:var(--g-text); text-decoration:none; padding:.2rem 0; transition:color .2s;
}
.gh-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-.18rem;
  height:2px; background:var(--g-accent); transition:right .25s var(--g-ease);
}
.gh-links a:hover{ color:var(--g-accent); }
.gh-links a:hover::after{ right:0; }
.gh-links a[aria-current="page"]{ color:var(--g-accent); }
.gh-links a[aria-current="page"]::after{ right:0; }

.gh-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--g-wa); color:#fff !important; padding:.45rem 1.05rem;
  border-radius:999px; font-weight:600; font-size:.85rem; text-decoration:none;
  box-shadow:0 4px 14px rgba(37,211,102,.3); transition:transform .2s, box-shadow .2s;
}
.gh-cta::after{ display:none; }
.gh-cta:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(37,211,102,.42); }
.gh-cta svg{ width:.95rem; height:.95rem; }
/* ".gh-links a" (padding:.2rem 0) tiene más especificidad y aplastaba
   el relleno del botón; esta regla lo restaura */
.gh-links a.gh-cta{ padding:.45rem 1.05rem; }

.gh-burger{
  display:none; background:none; border:0; cursor:pointer;
  width:2.6rem; height:2.25rem; padding:.35rem .5rem; margin-left:auto;
}
.gh-burger span{
  display:block; width:1.5rem; height:2px; background:var(--g-text);
  margin:.3rem auto; border-radius:2px; transition:.25s;
}

@media (max-width:880px){
  .gh-burger{ display:block; }
  .gh-logo{ margin-right:0; }
  .gh-nav__inner{ justify-content:space-between; }
  .gh-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--g-surface); border-bottom:1px solid var(--g-border);
    padding:.4rem 1.5rem 1.1rem; box-shadow:0 16px 30px rgba(28,26,23,.08);
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:transform .22s, opacity .22s;
  }
  .gh-nav.open .gh-links{ transform:none; opacity:1; pointer-events:auto; }
  .gh-links li{ width:100%; }
  .gh-links a{ display:block; padding:.85rem 0; border-bottom:1px solid var(--g-border); }
  .gh-links a::after{ display:none; }
  .gh-cta{ justify-content:center; margin-top:.8rem; box-shadow:none; }
  .gh-nav.open .gh-burger span:nth-child(1){ transform:translateY(.39rem) rotate(45deg); }
  .gh-nav.open .gh-burger span:nth-child(2){ opacity:0; }
  .gh-nav.open .gh-burger span:nth-child(3){ transform:translateY(-.39rem) rotate(-45deg); }
}

/* ════════════════ Pie de página ════════════════ */
.gf{ background:var(--g-text); color:#cfc8bf; margin-top:3rem; }
.gf__top{
  max-width:78.5rem; margin:0 auto; padding:3rem 1.5rem 2.25rem;
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1.35fr; gap:2.5rem;
}
.gf__brand-name{ font-family:var(--g-display); font-weight:700; font-size:1.7rem; color:#fff; margin:0 0 .6rem; }
.gf__brand-name span{ color:var(--g-accent); }
.gf__tag{ font-size:.88rem; line-height:1.65; color:#a59d92; margin:0 0 1.2rem; max-width:25rem; }
.gf__social{ display:flex; gap:.6rem; }
.gf__social a{
  width:2.3rem; height:2.3rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  display:inline-flex; align-items:center; justify-content:center;
  color:#cfc8bf; transition:all .2s;
}
.gf__social a:hover{ background:var(--g-accent); border-color:var(--g-accent); color:#fff; transform:translateY(-2px); }
.gf__social svg{ width:1.05rem; height:1.05rem; }

.gf__col h4{ font-family:var(--g-display); font-size:1rem; color:#fff; margin:0 0 1rem; font-weight:600; }
.gf__col ul{ list-style:none; margin:0; padding:0; }
.gf__col li{ margin-bottom:.6rem; }
.gf__col a{ color:#a59d92; text-decoration:none; font-size:.88rem; transition:color .2s; }
.gf__col a:hover{ color:var(--g-accent); }
.gf__contact li{ display:flex; align-items:flex-start; gap:.55rem; font-size:.88rem; color:#a59d92; margin-bottom:.7rem; line-height:1.5; }
.gf__contact svg{ width:1rem; height:1rem; color:var(--g-accent); flex-shrink:0; margin-top:.15rem; }
.gf__contact a{ color:#a59d92; text-decoration:none; }
.gf__contact a:hover{ color:var(--g-accent); }

.gf__bottom{ border-top:1px solid rgba(255,255,255,.1); }
.gf__bottom-inner{
  max-width:78.5rem; margin:0 auto; padding:1.25rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; font-size:.8rem; color:#857d72;
}
.gf__bottom-inner a{ color:#857d72; text-decoration:none; }
.gf__bottom-inner a:hover{ color:var(--g-accent); }
.gf__heart{ color:var(--g-accent); }

@media (max-width:880px){
  .gf__top{ grid-template-columns:1fr 1fr; gap:2rem 1.5rem; }
  .gf__brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .gf__top{ grid-template-columns:1fr; gap:1.75rem; }
}

/* ════════════════ Blog: layout general ════════════════ */
.bl-wrap{ max-width:78.5rem; margin:0 auto; padding:0 1.5rem; }

.bl-hero{ padding:3.5rem 0 1.5rem; text-align:center; }
.bl-hero__kicker{
  display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--g-accent); margin-bottom:.9rem;
}
.bl-hero h1{
  font-family:var(--g-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(2rem,4.5vw,3rem); line-height:1.12; margin:0 auto 1rem; max-width:46rem;
}
.bl-hero p{ color:var(--g-muted); font-size:1.05rem; line-height:1.7; max-width:40rem; margin:0 auto; }

/* ── Migas de pan ── */
.bl-crumbs{ font-size:.82rem; color:var(--g-muted); padding:1.4rem 0 0; }
.bl-crumbs a{ color:var(--g-muted); text-decoration:none; }
.bl-crumbs a:hover{ color:var(--g-accent); }
.bl-crumbs span[aria-hidden]{ margin:0 .45rem; }

/* ── Tarjetas (portada del blog) ── */
.bl-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
  padding:2rem 0 3rem;
}
.bl-card{
  background:var(--g-surface); border:1px solid var(--g-border); border-radius:.9rem;
  padding:1.6rem 1.5rem 1.4rem; display:flex; flex-direction:column;
  text-decoration:none; color:var(--g-text);
  transition:transform .25s var(--g-ease), box-shadow .25s var(--g-ease), border-color .2s;
}
.bl-card:hover{ transform:translateY(-4px); box-shadow:0 14px 36px rgba(28,26,23,.12); border-color:#ddd4c9; }
.bl-card__cat{
  align-self:flex-start; font-size:.72rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--g-accent); background:var(--g-accent-light);
  border-radius:999px; padding:.28rem .8rem; margin-bottom:1rem;
}
.bl-card h2{
  font-family:var(--g-display); font-weight:700; font-size:1.28rem;
  line-height:1.3; letter-spacing:-.01em; margin:0 0 .7rem;
}
.bl-card p{ font-size:.92rem; line-height:1.65; color:var(--g-muted); margin:0 0 1.2rem; flex:1; }
.bl-card__meta{ font-size:.78rem; color:var(--g-muted); display:flex; gap:.5rem; align-items:center; }
.bl-card__meta span[aria-hidden]{ opacity:.5; }
.bl-card__more{ color:var(--g-accent); font-weight:600; font-size:.85rem; margin-top:.9rem; }

@media (max-width:960px){ .bl-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .bl-grid{ grid-template-columns:1fr; } }

/* ── Artículo ── */
.bl-article{ max-width:44rem; margin:0 auto; padding:2.2rem 0 1rem; }
.bl-article__cat{
  display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--g-accent); background:var(--g-accent-light);
  border-radius:999px; padding:.28rem .8rem; margin-bottom:1.1rem;
}
.bl-article h1{
  font-family:var(--g-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.18; margin:0 0 1rem;
}
.bl-article__meta{ font-size:.84rem; color:var(--g-muted); margin-bottom:2rem; }
.bl-article__meta span[aria-hidden]{ margin:0 .45rem; opacity:.5; }

.bl-body{ font-size:1.02rem; line-height:1.8; }
.bl-body p{ margin:0 0 1.4rem; }
.bl-body h2{
  font-family:var(--g-display); font-weight:700; letter-spacing:-.01em;
  font-size:1.45rem; line-height:1.3; margin:2.4rem 0 1rem;
}
.bl-body h3{ font-size:1.08rem; font-weight:600; margin:1.8rem 0 .6rem; }
.bl-body ul, .bl-body ol{ margin:0 0 1.4rem; padding-left:1.4rem; }
.bl-body li{ margin-bottom:.55rem; }
.bl-body a{ color:var(--g-accent); font-weight:500; text-decoration:underline; text-underline-offset:.18em; }
.bl-body a:hover{ color:var(--g-accent-dark); }
.bl-body strong{ font-weight:600; }
.bl-body blockquote{
  margin:1.8rem 0; padding:1rem 1.4rem;
  border-left:3px solid var(--g-accent); background:var(--g-surface);
  border-radius:0 .6rem .6rem 0; color:var(--g-muted); font-style:italic;
}
.bl-body blockquote p{ margin:0; }

/* ── Caja de llamada a la acción ── */
.bl-cta{
  margin:2.6rem 0 0; padding:1.8rem 1.6rem; text-align:center;
  background:var(--g-surface); border:1px solid var(--g-border); border-radius:.9rem;
}
.bl-cta h2{
  font-family:var(--g-display); font-weight:700; font-size:1.35rem; margin:0 0 .6rem;
}
.bl-cta p{ color:var(--g-muted); font-size:.95rem; line-height:1.65; margin:0 auto 1.3rem; max-width:34rem; }
.bl-cta__btns{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.bl-btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  border-radius:999px; font-weight:600; font-size:.9rem; padding:.65rem 1.4rem;
  transition:transform .2s, box-shadow .2s;
}
.bl-btn svg{ width:1rem; height:1rem; }
.bl-btn--wa{ background:var(--g-wa); color:#fff; box-shadow:0 4px 14px rgba(37,211,102,.3); }
.bl-btn--wa:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(37,211,102,.42); }
.bl-btn--ghost{ background:var(--g-accent-light); color:var(--g-accent-dark); }
.bl-btn--ghost:hover{ transform:translateY(-1px); }

/* ── Artículos relacionados ── */
.bl-related{ max-width:44rem; margin:0 auto; padding:2.6rem 0 3rem; }
.bl-related h2{
  font-family:var(--g-display); font-weight:700; font-size:1.3rem; margin:0 0 1.1rem;
}
.bl-related ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.bl-related a{
  display:block; background:var(--g-surface); border:1px solid var(--g-border);
  border-radius:.7rem; padding:1rem 1.2rem; text-decoration:none; color:var(--g-text);
  font-weight:500; font-size:.95rem; transition:border-color .2s, transform .2s;
}
.bl-related a:hover{ border-color:var(--g-accent); transform:translateX(3px); }
.bl-related a small{ display:block; color:var(--g-muted); font-weight:400; font-size:.8rem; margin-top:.25rem; }