/* Blog v3 — listado y páginas de categoría (una sola vista: views/v3/blog/home.php).
   Consume tokens.css + base.css + components.css.
   Fuente visual: Blog.dc.html:188-263 (comportamiento en su dc-script, 474-556).

   Cuatro notas de traducción del template a CSS:

   1. Los dos únicos valores que dependen del ancho son el padding del hero (`mob = w < 760`,
      Blog.dc.html:477 y 541) y las columnas del destacado (`desk = w >= 1000`, línea 542). La
      base es el caso estrecho y dos media queries abren a 760 y 1000 px.
   2. `dcRise` del template (helmet, línea 45) es idéntico a `dcFadeUp` de base.css, así que se
      reutiliza ese; esta página no necesita keyframes propios.
   3. El chip activo, que el template resuelve en JS, aquí lo escribe el servidor con .is-active:
      los chips son enlaces a las páginas de categoría reales, no filtros de cliente.
   4. #4a5a51 (extractos) y #7a877f (fechas) son literales del template: no están en el catálogo
      de tokens y no llegan a las tres apariciones que pedirían uno nuevo. */

/* ---------- 1 · hero, buscador y chips (Blog.dc.html:188-211) ---------- */
.blg-hero{background:#f7faf8;background-image:radial-gradient(700px 420px at 12% -60px,rgba(127,214,163,.35),rgba(127,214,163,0) 65%),radial-gradient(760px 460px at 88% -80px,rgba(46,139,87,.22),rgba(46,139,87,0) 65%),radial-gradient(1100px 520px at 50% -120px,#e7f0e9,rgba(231,240,233,0) 60%);background-repeat:no-repeat}
/* .container ya pone el padding lateral; aquí se le añade el vertical del template */
.blg-hero__inner{padding:36px clamp(18px,4vw,28px) 40px;display:flex;flex-direction:column;gap:34px}

.blg-hero__copy{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;animation:dcFadeUp .5s ease .06s backwards}
.blg-hero__eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brand)}
.blg-hero__title{margin:0;font-size:clamp(30px,4.8vw,46px);font-weight:700;line-height:1.12;letter-spacing:-.02em;max-width:760px;text-wrap:balance}
.blg-hero__grad{background:linear-gradient(92deg,#1e5c3a,#2e8b57 55%,#7fd6a3);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;margin-right:-.06em}
.blg-hero__lead{margin:0;font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--c-body);max-width:600px;text-wrap:pretty}

.blg-search{display:flex;justify-content:center;animation:dcFadeUp .5s ease .12s backwards}
.blg-search__box{position:relative;width:min(520px,100%)}
.blg-search__box i{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--c-muted);line-height:1}
.blg-search__input{width:100%;box-sizing:border-box;background:var(--c-white);border:1px solid var(--c-border-input);border-radius:14px;padding:15px 18px 15px 46px;font-size:14.5px;font-family:inherit;color:var(--c-ink);outline:none;box-shadow:0 2px 10px rgba(23,36,28,.06);transition:border-color .15s,box-shadow .15s}
.blg-search__input:focus{border-color:var(--c-brand);box-shadow:var(--sh-focus)}

.blg-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;animation:dcFadeUp .5s ease .16s backwards}
/* el hover del template solo toca el borde, así que la regla repite el color del texto para
   ganarle al a:hover de base.css */
.blg-chip{padding:9px 18px;border-radius:var(--r-pill);font-size:13px;font-weight:600;background:var(--c-white);color:var(--c-body);border:1px solid var(--c-border-input);transition:all .15s}
.blg-chip:hover{color:var(--c-body);border-color:var(--c-brand)}
.blg-chip.is-active,.blg-chip.is-active:hover{background:var(--c-green-ink);color:var(--c-white);border-color:var(--c-green-ink)}

/* ---------- 2 · destacado, parrilla y vacío (Blog.dc.html:213-263) ---------- */
.blg-list{background:var(--c-white)}
.blg-list__inner{padding:clamp(32px,4.5vw,55px) clamp(18px,4vw,28px) clamp(64px,9vw,110px);display:flex;flex-direction:column;gap:34px}

.blg-feat{display:grid;grid-template-columns:minmax(0,1fr);background:var(--c-white);border:1px solid var(--c-border-card);border-radius:18px;overflow:hidden;box-shadow:0 1px 3px rgba(23,36,28,.05);transition:transform .2s ease,box-shadow .2s ease}
.blg-feat:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(23,36,28,.1)}
/* el display:grid le ganaría al [hidden] del navegador cuando el buscador lo esconde */
.blg-feat[hidden]{display:none}
.blg-feat__media{position:relative;min-height:280px;background:var(--c-page)}
.blg-feat__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.blg-feat__ph{position:absolute;inset:0}
.blg-feat__body{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:13px;justify-content:center}
.blg-feat__badges{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.blg-feat__badge{background:var(--c-tint-badge);color:var(--c-green-text);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r-pill);padding:5px 11px}
.blg-feat__cat{background:var(--c-white);border:1px solid #d8ecdf;color:var(--c-green-text);border-radius:var(--r-pill);padding:5px 11px;font-size:11.5px;font-weight:700}
.blg-feat__title{margin:0;font-size:clamp(26px,4vw,34px);font-weight:700;line-height:1.22;letter-spacing:-.02em;color:var(--c-ink);text-wrap:balance}
.blg-feat__excerpt{margin:0;font-size:16px;line-height:1.55;color:#4a5a51;max-width:56ch;text-wrap:pretty}
.blg-feat__meta{display:flex;align-items:center;gap:10px;font-size:13px;color:#7a877f;margin-top:2px}
.blg-feat__read{display:inline-flex;align-items:center;gap:5px}
.blg-feat__read i{font-size:12.5px;line-height:1;color:var(--c-brand)}
.blg-feat__cta{margin-top:6px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--c-green-text)}
.blg-feat__cta i{font-size:13px;line-height:1}

.blg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,368px),1fr));gap:28px}
.blg-card{display:flex;flex-direction:column;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);overflow:hidden;box-shadow:0 1px 3px rgba(23,36,28,.05);transition:transform .2s ease,box-shadow .2s ease}
.blg-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(23,36,28,.1)}
.blg-card[hidden]{display:none}
.blg-card__media{position:relative;aspect-ratio:16/9;background:var(--c-page)}
.blg-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.blg-card__ph{position:absolute;inset:0}
.blg-card__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:11px;flex:1}
.blg-card__cat{align-self:flex-start;background:var(--c-tint-badge);color:var(--c-green-text);border:1px solid #d8ecdf;border-radius:var(--r-pill);padding:4px 11px;font-size:11.5px;font-weight:700}
.blg-card__title{font-size:20px;font-weight:700;color:var(--c-ink);line-height:1.28;letter-spacing:-.01em;text-wrap:pretty}
.blg-card__excerpt{font-size:15.5px;color:#4a5a51;line-height:1.68;flex:1;text-wrap:pretty}
.blg-card__meta{display:flex;align-items:center;gap:8px;font-size:13px;color:#7a877f;border-top:1px solid var(--c-divider);padding-top:13px;margin-top:2px}

.blg-empty{padding:52px 0;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;animation:dcFadeUp .25s ease}
.blg-empty[hidden]{display:none}
.blg-empty__icon{width:74px;height:74px;border-radius:50%;background:var(--c-tint-badge);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.blg-empty__icon i{font-size:28px;color:var(--c-brand);line-height:1}
.blg-empty__title{font-size:16.5px;font-weight:700;color:var(--c-ink)}
.blg-empty__text{font-size:13.5px;color:var(--c-muted);max-width:360px;line-height:1.6;text-wrap:pretty}

/* ---------- 3 · paginación ----------
   El template no tiene paginación (sus siete artículos caben en una pantalla) y el marcado sale
   de create_links() con las clases de siempre (.pagination/.page-item/.page-link). Se le da el
   aspecto de los chips de arriba, que es lo más cercano del diseño. Con 50 artículos por página
   hoy no llega a pintarse: la vista solo saca el bloque si create_links() devuelve algo. */
.blg-pager{display:flex;justify-content:center}
.blg-pager .pagination{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.blg-pager .page-link{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:38px;height:38px;padding:0 12px;border:1px solid var(--c-border-input);border-radius:var(--r-btn);background:var(--c-white);font-size:13px;font-weight:600;color:var(--c-body);transition:all .15s}
.blg-pager .page-link:hover{border-color:var(--c-brand);color:var(--c-green-text)}
.blg-pager .page-item.active .page-link{background:var(--c-green-ink);border-color:var(--c-green-ink);color:var(--c-white)}
.blg-pager .page-link img{width:12px;height:12px;display:block}

/* ---------- ancho >= 760 px: el hero recupera su padding grande (Blog.dc.html:541) ---------- */
@media (min-width:760px){
  .blg-hero__inner{padding:clamp(54px,8vw,90px) clamp(18px,4vw,28px) clamp(40px,6vw,64px)}
}

/* ---------- ancho >= 1000 px: el destacado se parte en dos columnas (Blog.dc.html:542) ---------- */
@media (min-width:1000px){
  .blg-feat{grid-template-columns:1.05fr 1fr}
}