/* ============================================================
   Historias: el índice de las historias interactivas.
   Cada card es una portada oscura, como el escenario de la historia,
   con el elenco asomando. Las historias en sí no usan site.css: tienen
   su propia hoja en /blog/story/story.css.
   ============================================================ */

.stories-hero { padding: var(--spacing-96) 0 var(--spacing-40); }
.stories-hero .mono { color: var(--color-smoke); margin-bottom: var(--spacing-16); }
.stories-hero .lead { max-width: 640px; margin-top: var(--spacing-24); }

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: var(--spacing-24);
  padding-bottom: var(--section-gap);
}

.story-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius-cards); overflow: hidden;
  background: #14141F; color: #F4F2FA; text-decoration: none;
  transition: transform .3s cubic-bezier(.22, .8, .22, 1);
}
.story-card:hover { transform: translateY(-4px); }

.story-cover {
  position: relative; height: 280px; overflow: hidden;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.4px);
  background-size: 22px 22px;
  display: grid; place-items: center; padding: 0 var(--spacing-24);
}
.story-cover-title {
  position: relative; z-index: 2; margin: 0; text-align: center;
  font-family: var(--font-cond); font-weight: 400; text-transform: uppercase;
  font-size: clamp(40px, 4.6vw, 56px); line-height: .98; letter-spacing: .005em;
}
.story-cover-title span { color: #FFF6C2; }
.story-cover img {
  position: absolute; z-index: 1; bottom: -46px; width: 128px; height: auto;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.story-cover .cover-left { left: 6px; transform: rotate(-8deg); }
.story-cover .cover-right { right: 6px; transform: rotate(8deg); }
.story-card:hover .cover-left { transform: rotate(-8deg) translateY(-14px); }
.story-card:hover .cover-right { transform: rotate(8deg) translateY(-14px); }

.story-body { display: flex; flex-direction: column; gap: var(--spacing-16); padding: var(--spacing-24) var(--spacing-24) var(--spacing-24); background: var(--color-paper-white); color: var(--color-carbon-black); flex: 1; }
.story-meta { margin: 0; font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--color-slate); }
.story-dek { margin: 0; font-size: var(--text-body); line-height: 1.5; color: var(--color-slate); }
.story-go { margin-top: auto; font-weight: 600; }
.story-go span { display: inline-block; transition: transform .2s; }
.story-card:hover .story-go span { transform: translateX(4px); }

.stories-note { margin: 0 0 var(--section-gap); font-size: var(--text-body-sm); color: var(--color-slate); }
.stories-note a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .story-card, .story-cover img, .story-go span { transition: none; }
}

.story-name { margin: 0; font-family: var(--font-sans); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }