/* ==========================================================================
   Poda Fácil — sistema de diseño Descriptia · paleta natural
   Fraunces (display) + Space Grotesk (marca/UI) + Inter (cuerpo)
   ========================================================================== */
:root {
  --bosque: #2b4a33;
  --verde: #3a6b45;
  --oliva: #6f7d47;
  --tierra: #6d5138;
  --mostaza: #c1902f;
  --mostaza-cl: #e7c96b;
  --papel: #f6f2e8;
  --papel-2: #efe8d8;
  --blanco: #fffdf8;
  --tinta: #23241d;
  --tinta-suave: #5d5c4f;
  --linea: rgba(43,74,51,.16);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --ui: 'Space Grotesk', var(--sans);
  --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.25rem; --sp-5: 3.5rem; --sp-6: 5rem;
  --rad: 14px; --rad-sm: 9px;
  --shadow: 0 1px 2px rgba(43,74,51,.05), 0 12px 34px -18px rgba(43,74,51,.35);
  --shadow-sm: 0 1px 2px rgba(43,74,51,.06), 0 6px 18px -12px rgba(43,74,51,.28);
  --wrap: 1080px; --read: 40rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--sans); font-size: 1.02rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.ico { width: 1em; height: 1em; flex: none; vertical-align: -.14em; }
.ico.flip { transform: scaleX(-1); }
a { color: var(--verde); text-decoration: none; }
img { max-width: 100%; }

/* Eyebrows / etiquetas de detalle */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--ui); font-weight: 600; font-size: .72rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--oliva);
}
.eyebrow .ico { color: var(--mostaza); font-size: .95rem; }
.section-num {
  font-family: var(--ui); font-weight: 600; font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mostaza);
}

/* ---- Header ---------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linea);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: .85rem 0; }
.logo { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--ui); font-weight: 700; font-size: 1.22rem; color: var(--bosque); letter-spacing: -.01em; }
.logo-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; background: var(--bosque); color: var(--mostaza-cl); font-size: 1.05rem; }
.site-nav { display: flex; align-items: center; gap: 1.4rem; font-family: var(--ui); font-weight: 500; font-size: .92rem; }
.site-nav a { color: var(--tinta); transition: color .18s; }
.site-nav a:hover { color: var(--verde); }
.nav-rss { display: inline-flex; align-items: center; gap: .35rem; }

/* ---- Hero ------------------------------------------------------------ */
.hero { position: relative; background: var(--bosque); color: var(--papel); padding: var(--sp-6) 0 calc(var(--sp-6) + 30px); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(60% 90% at 82% 0%, rgba(231,201,107,.16), transparent 60%),
  radial-gradient(50% 80% at 0% 100%, rgba(111,125,71,.35), transparent 60%); }
.hero-inner { position: relative; max-width: 46rem; }
.hero .eyebrow { color: var(--mostaza-cl); }
.hero .eyebrow .ico { color: var(--mostaza-cl); }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1.04; letter-spacing: -.02em; margin: 1rem 0 1.1rem; }
.hero h1 em { font-style: italic; color: var(--mostaza-cl); }
.hero-sub { font-size: 1.14rem; line-height: 1.6; color: color-mix(in srgb, var(--papel) 82%, transparent); max-width: 38rem; margin: 0 0 1.8rem; }
.hero-cues { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; font-family: var(--ui); font-size: .86rem; font-weight: 500; color: color-mix(in srgb, var(--papel) 78%, transparent); }
.hero-cues span { display: inline-flex; align-items: center; gap: .5rem; }
.hero-cues .ico { color: var(--mostaza-cl); }
.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 46px; color: var(--papel); display: block; }

/* ---- Destacada ------------------------------------------------------- */
.featured-wrap { margin-top: calc(var(--sp-5) * -1); position: relative; z-index: 2; }
.featured {
  display: block; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--rad); padding: var(--sp-4); box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease; color: var(--tinta);
}
.featured:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(43,74,51,.05), 0 26px 50px -24px rgba(43,74,51,.42); }
.featured h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.12; letter-spacing: -.015em; margin: .8rem 0 .7rem; color: var(--bosque); }
.featured p { color: var(--tinta-suave); max-width: 46rem; margin: 0 0 1.2rem; }

/* ---- PROMO TEMPORAL (libros gratis 26-30 julio 2026) -----------------
   Quitar este bloque completo tras el 30/07/2026, junto con promoSection()
   y PROMO_LIBROS en el JS de arriba. */
.promo-wrap { margin-top: var(--sp-5); }
.promo-box {
  background: color-mix(in srgb, var(--mostaza-cl) 14%, var(--blanco));
  border: 1px solid var(--linea); border-left: 4px solid var(--mostaza);
  border-radius: var(--rad); padding: var(--sp-4); box-shadow: var(--shadow-sm);
}
.promo-head { max-width: 40rem; margin-bottom: var(--sp-3); }
.promo-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -.015em; margin: .6rem 0 .5rem; color: var(--bosque); }
.promo-intro { color: var(--tinta-suave); margin: 0; }
.promo-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.promo-item {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--rad-sm);
  padding: .85rem 1rem; color: var(--tinta); transition: transform .18s ease, box-shadow .18s ease;
}
.promo-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.promo-item-ico { display: inline-flex; color: var(--mostaza); font-size: 1.2rem; flex: none; }
.promo-item-title { font-family: var(--ui); font-weight: 600; font-size: .94rem; flex: 1 1 auto; min-width: 10rem; }
.promo-item-cta { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--ui); font-weight: 600; font-size: .82rem; color: var(--verde); white-space: nowrap; }
.promo-item-cta .ico { transition: transform .2s ease; }
.promo-item:hover .promo-item-cta .ico { transform: translateX(4px); }

/* ---- Listado --------------------------------------------------------- */
.list-wrap { padding: var(--sp-6) 0 var(--sp-5); }
.list-head { max-width: 40rem; margin-bottom: var(--sp-4); }
.list-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -.02em; margin: .5rem 0 .6rem; color: var(--bosque); }
.list-intro { color: var(--tinta-suave); margin: 0; }
.post-list { display: grid; gap: .2rem; }
.post-preview { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); padding: var(--sp-4) 0; border-top: 1px solid var(--linea); align-items: start; }
.post-preview.has-thumb { grid-template-columns: auto 1fr clamp(120px, 20%, 180px); }
.post-preview:last-child { border-bottom: 1px solid var(--linea); }
.pp-num { font-family: var(--serif); font-size: 1.3rem; color: var(--mostaza); font-weight: 500; padding-top: .1rem; }
.pp-body h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.16; letter-spacing: -.01em; margin: .55rem 0 .5rem; }
.pp-body h2 a { color: var(--bosque); transition: color .18s; }
.pp-body h2 a:hover { color: var(--verde); }
.pp-body > p:not(.meta) { color: var(--tinta-suave); margin: 0 0 .9rem; max-width: 46rem; }
.meta { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--ui); font-size: .82rem; color: var(--tinta-suave); margin: 0 0 .5rem; }
.meta .ico { color: var(--oliva); }
.leer-mas { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--ui); font-weight: 600; font-size: .9rem; color: var(--verde); }
.leer-mas .ico { transition: transform .2s ease; }
.leer-mas:hover .ico { transform: translateX(4px); }

/* ---- Imagen destacada (hero de artículo) ----------------------------- */
.post-hero { margin: 0 auto var(--sp-4); }
.post-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--rad); border: 1px solid var(--linea); box-shadow: var(--shadow-sm); background: var(--papel-2); }
.post-hero figcaption { margin-top: .55rem; font-family: var(--ui); font-size: .76rem; color: var(--tinta-suave); letter-spacing: .01em; }

/* ---- Miniatura destacada (home) -------------------------------------- */
.featured.has-thumb { display: grid; grid-template-columns: minmax(0,1fr) minmax(200px, 40%); gap: var(--sp-4); align-items: center; }
.featured-thumb { display: block; order: 2; }
.featured-thumb img { display: block; width: 100%; height: 100%; max-height: 320px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rad-sm); }
.featured .featured-text { display: block; }

/* ---- Miniatura en listado -------------------------------------------- */
.pp-thumb { display: block; align-self: start; }
.pp-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rad-sm); border: 1px solid var(--linea); }

/* ---- Artículo -------------------------------------------------------- */
.post-head { max-width: var(--read); padding: var(--sp-5) 0 var(--sp-3); }
.back { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--ui); font-weight: 500; font-size: .85rem; color: var(--tinta-suave); margin-bottom: 1.4rem; transition: color .18s; }
.back:hover { color: var(--verde); }
.post-head h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; color: var(--bosque); margin: .9rem 0 .8rem; }
.lede { font-size: 1.2rem; line-height: 1.55; color: var(--tinta-suave); margin: 0 0 1.4rem; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linea); font-family: var(--ui); font-size: .84rem; color: var(--tinta-suave); }
.post-meta > span { display: inline-flex; align-items: center; gap: .4rem; }
.post-meta .ico { color: var(--oliva); }
.chip { padding: .28rem .7rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco); }
.chip .ico { color: var(--mostaza); }

.post-body { max-width: var(--read); padding-bottom: var(--sp-4); font-size: 1.14rem; line-height: 1.78; }
.post-body p { margin: 0 0 1.4rem; color: #33342b; }
.post-body h2 { font-family: var(--serif); font-weight: 500; font-size: 1.72rem; line-height: 1.18; letter-spacing: -.01em; color: var(--bosque); margin: 2.6rem 0 .9rem; }
.post-body h3 { font-family: var(--ui); font-weight: 600; font-size: 1.16rem; color: var(--tierra); margin: 1.9rem 0 .6rem; }
.post-body ul { padding-left: 0; list-style: none; margin: 0 0 1.5rem; }
.post-body ul li { position: relative; padding-left: 1.7rem; margin-bottom: .65rem; }
.post-body ul li::before { content: ""; position: absolute; left: .15rem; top: .62em; width: .5rem; height: .5rem; border-radius: 2px; background: var(--mostaza); transform: rotate(45deg); }
.post-body strong { color: var(--bosque); font-weight: 600; }
.post-body a { color: var(--verde); text-decoration: underline; text-decoration-color: var(--mostaza-cl); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.post-body a:hover { text-decoration-color: var(--verde); }
.post-body em { color: var(--tierra); }
.post-body hr { border: none; height: 1px; background: var(--linea); margin: 2.4rem 0; }
.post-body > p:last-of-type em, .post-body > p:has(a[href*="amazon"]) { color: var(--tinta-suave); }

.book-note { display: flex; gap: 1rem; align-items: flex-start; margin: 2.4rem 0 0; padding: 1.4rem 1.5rem; background: var(--papel-2); border: 1px solid var(--linea); border-left: 4px solid var(--mostaza); border-radius: var(--rad-sm); }
.book-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: 9px; background: var(--bosque); color: var(--mostaza-cl); font-size: 1.2rem; }
.book-note p { margin: .3rem 0 0; font-size: .98rem; line-height: 1.5; color: var(--tinta-suave); }
.book-note strong { color: var(--bosque); }
.book-note { text-decoration: none; color: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.book-note:hover { border-left-color: var(--bosque); background: var(--papel); transform: translateY(-1px); box-shadow: 0 8px 22px -14px rgba(0,0,0,.3); }
.book-go { display: inline-block; margin-top: .3rem; color: var(--bosque); font-weight: 600; }

/* ---- Más guías ------------------------------------------------------- */
.more-guides { padding: var(--sp-5) 0 var(--sp-4); border-top: 1px solid var(--linea); }
.more-title { font-family: var(--serif); font-weight: 500; font-size: 1.8rem; letter-spacing: -.01em; color: var(--bosque); margin: .5rem 0 1.6rem; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.mini-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--rad-sm); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.mini-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.mini-eyebrow { display: inline-flex; align-items: center; gap: .4em; font-family: var(--ui); font-weight: 600; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oliva); }
.mini-eyebrow .ico { color: var(--mostaza); }
.mini-title { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; line-height: 1.2; color: var(--bosque); }
.mini-go { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; font-family: var(--ui); font-weight: 600; font-size: .84rem; color: var(--verde); }
.mini-go .ico { transition: transform .2s; }
.mini-card:hover .mini-go .ico { transform: translateX(4px); }

/* ---- Footer ---------------------------------------------------------- */
.site-footer { background: var(--bosque); color: color-mix(in srgb, var(--papel) 78%, transparent); margin-top: var(--sp-6); padding: var(--sp-5) 0 var(--sp-3); }
.site-footer .logo { color: var(--papel); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: var(--sp-4); }
.footer-brand p { margin: 1rem 0 0; font-size: .92rem; line-height: 1.6; max-width: 26rem; }
.footer-col h4 { font-family: var(--ui); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mostaza-cl); margin: .3rem 0 1rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer-col a { color: color-mix(in srgb, var(--papel) 82%, transparent); font-size: .92rem; transition: color .18s; }
.footer-col a:hover { color: var(--mostaza-cl); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-top: 1.4rem; border-top: 1px solid rgba(246,242,232,.16); font-family: var(--ui); font-size: .8rem; color: color-mix(in srgb, var(--papel) 62%, transparent); }
.footer-legal p { margin: 0; }

/* ---- Foco accesible + motion ----------------------------------------- */
a:focus-visible, .featured:focus-visible, .mini-card:focus-visible { outline: 3px solid var(--mostaza); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto; } }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .post-preview, .post-preview.has-thumb { grid-template-columns: 1fr; gap: .4rem; }
  .pp-num { font-size: 1rem; }
  .pp-thumb { order: -1; margin-bottom: .6rem; }
  .pp-thumb img { aspect-ratio: 16 / 9; }
  .featured { padding: var(--sp-3); }
  .featured.has-thumb { grid-template-columns: 1fr; gap: var(--sp-3); }
  .featured-thumb { order: -1; }
  .featured-thumb img { max-height: 240px; aspect-ratio: 16 / 9; }
  .promo-box { padding: var(--sp-3); }
  .promo-list { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .site-nav { gap: 1rem; }
  .nav-rss span { display: none; }
  .hero { padding-top: var(--sp-5); }
}