/* ================================================================
   DEKEVA — recursos.css · Índice de recursos (/recursos)
   Depende de recursos-base.css (tokens + chrome + componentes).
================================================================ */

#dkv-recursos { padding-top: 0; }

/* ── Hero ─────────────────────────────────────────────────── */
.rec-hero {
  padding: clamp(150px, 18vw, 220px) 0 clamp(48px, 7vw, 90px);
  background:
    radial-gradient(120% 80% at 80% -10%, var(--blue-dim), transparent 60%),
    var(--bg);
}
.rec-hero__inner { width: var(--cont); margin-inline: auto; max-width: 900px; }
.rec-hero__title {
  margin-top: 1.6rem;
  font-family: var(--f-display); font-weight: 300; line-height: 1.0;
  font-size: clamp(2.8rem, 8vw, 6rem); letter-spacing: -0.03em;
}
.rec-hero__title em { font-family: var(--f-italic); font-style: italic; color: var(--blue); }
.rec-hero__sub {
  margin-top: 1.8rem; max-width: 560px;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: #55534e; line-height: 1.6;
}

/* ── Grid ─────────────────────────────────────────────────── */
.rec-grid-sec { padding: clamp(20px, 4vw, 40px) 0 clamp(90px, 12vw, 150px); }
.rec-grid-inner { width: var(--cont); margin-inline: auto; }

.rec-head { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 2.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--border); }
.rec-h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.01em; }

.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1.4rem, 2.5vw, 2.2rem);
}

/* ── Card de ebook ────────────────────────────────────────── */
.ebook-card {
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid rgba(3,47,212,.20);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(3,47,212,.05);
  transition: transform .5s var(--ease-lux), box-shadow .5s var(--ease-lux), border-color .4s;
}
.ebook-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(3,47,212,.16);
  border-color: rgba(3,47,212,.55);
}
.ebook-card__cover {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background:
    linear-gradient(135deg, #0d0d0b, #1c1c33 60%, var(--blue) 160%);
  display: flex; align-items: center; justify-content: center;
}
.ebook-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-lux); }
.ebook-card:hover .ebook-card__cover img { transform: scale(1.04); }
.ebook-card__ph {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.7); padding: 0 1.5rem; text-align: center;
}

.ebook-card__body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.ebook-card__cat { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.ebook-card__title {
  margin-top: .7rem; font-family: var(--f-display); font-weight: 400;
  font-size: 1.5rem; line-height: 1.12; letter-spacing: -0.01em;
}
.ebook-card__desc { margin-top: .7rem; font-size: .95rem; color: #6b6963; line-height: 1.55; flex: 1; }
.ebook-card__cta {
  margin-top: 1.4rem; font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text);
  display: inline-flex; align-items: center; gap: .5rem;
  transition: gap .35s var(--ease), color .35s;
}
.ebook-card:hover .ebook-card__cta { color: var(--blue); gap: .85rem; }

/* Destacado */
.ebook-card--feat { border-color: rgba(3,47,212,.45); box-shadow: 0 10px 30px rgba(3,47,212,.12); }
.ebook-card--feat .ebook-card__cover { aspect-ratio: 16 / 11; }

/* ── Estado vacío ─────────────────────────────────────────── */
.rec-empty { text-align: center; padding: clamp(40px, 8vw, 90px) 0; max-width: 560px; margin-inline: auto; }
.rec-empty__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.rec-empty h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.02em; }
.rec-empty p { margin: 1rem 0 2rem; color: #6b6963; }

@media (max-width: 560px) {
  .rec-grid { grid-template-columns: 1fr; }
  .rec-head { flex-direction: column; gap: .4rem; }
}