/* ==========================================================================
   AZTECH METAL RADIO — HIGH-DESIGN WIREFRAME TABS & CINEMATIC HERO
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Cinzel:wght@700;900&family=Outfit:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Color Palette */
  --bg-outer: #050404;
  --bg-inner: #0A0304;
  --bg-charcoal: #0F0506;
  --bg-card-hover: #19080A;
  
  /* Text Tokens */
  --text-primary: #FFFFFF;
  --text-muted: #A3858A;
  --text-dim: rgba(255, 255, 255, 0.6);
  
  /* Authentic AzTech Metal Logo Crimson (#B7312E) */
  --neon-crimson: #B7312E;            /* Exact primary blood red from logo */
  --neon-crimson-bright: #C83532;     /* Bright highlight red from logo */
  --neon-crimson-dark: #8E2321;       /* Deep shadow red from logo */
  --neon-crimson-rgb: 183, 49, 46;

  --maroon-grid: rgba(183, 49, 46, 0.15);
  --maroon-grid-strong: rgba(183, 49, 46, 0.35);

  /* Dynamic Active Scene Accent */
  --scene-accent: #B7312E;
  --scene-accent-rgb: 183, 49, 46;
  
  /* Technical Wireframe Borders */
  --border-metallic: 1px solid var(--neon-crimson);
  --border-card: 1px solid rgba(183, 49, 46, 0.25);
  --border-ui-focus: 1px solid var(--neon-crimson-bright);

  /* Radius & Shapes */
  --radius-card: 4px;
  --radius-button: 2px;
  --radius-pill: 999px;

  /* Typography Fonts */
  --font-display: 'Bebas Neue', 'Anton', sans-serif;
  --font-title-alt: 'Cinzel', serif;
  --font-body: 'Outfit', sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Transitions */
  --transition-cinematic: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body.full-page-layout {
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-outer);
  color: var(--text-primary);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Volcanic Ash & Floating Embers Overlay Canvas */
.ashes-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;
}

/* Technical Blueprint Grid Pattern Background */
.film-grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.1;
  background-image: 
    linear-gradient(to right, rgba(183, 49, 46, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(183, 49, 46, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Main Page Container */
.main-page-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-outer);
}

.section-inner-container {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ==========================================================================
   1. HERO HEADER SECTION & STICKY NAV
   ========================================================================== */
.hero-fullbleed-header {
  position: relative;
  width: 100vw;
  min-height: 95vh;
  background-color: var(--bg-inner);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--maroon-grid-strong);
}

.hero-background-container {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  opacity: 0;
  transform: scale(1.05);
  filter: contrast(1.1) saturate(0.85);
  transition: opacity 0.8s var(--transition-cinematic), transform 1.2s var(--transition-cinematic);
}

.hero-slide-bg.active {
  opacity: 0.65;
  transform: scale(1);
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: 
    radial-gradient(ellipse at center, rgba(5, 4, 4, 0.2) 0%, rgba(5, 4, 4, 0.92) 100%),
    linear-gradient(to right, rgba(5,4,4,0.98) 0%, rgba(5,4,4,0.5) 35%, rgba(5,4,4,0.15) 50%, rgba(5,4,4,0.65) 75%, rgba(5,4,4,0.98) 100%),
    linear-gradient(to bottom, rgba(5,4,4,0.9) 0%, rgba(5,4,4,0) 25%, rgba(5,4,4,0.5) 70%, rgba(5,4,4,0.98) 100%);
}

/* STICKY HEADER NAVIGATION BAR */
.cinematic-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 2rem;
  padding: 0.8rem 4rem;
  width: 100%;
  background: rgba(5, 4, 4, 0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(183, 49, 46, 0.3);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.7);
}

.brand-logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}

.brand-logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.brand-logo-img:hover {
  transform: scale(1.05);
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.nav-link {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.25s ease;
  position: relative;
  cursor: pointer;
}

.nav-link:hover, .nav-link.active {
  color: var(--neon-crimson);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--neon-crimson);
}

.category-badge-center {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.9rem;
  background: rgba(183, 49, 46, 0.12);
  border: 1px solid var(--neon-crimson);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--neon-crimson);
  text-transform: uppercase;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.search-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.1rem;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--maroon-grid-strong);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  width: 220px;
  transition: border-color 0.3s ease, width 0.3s ease;
}

.search-pill:focus-within {
  border-color: var(--neon-crimson);
  width: 260px;
}

.search-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.8rem;
  width: 100%;
  font-family: var(--font-body);
}

.search-icon {
  width: 14px;
  height: 14px;
  stroke: var(--neon-crimson);
  fill: none;
}

.profile-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--neon-crimson);
  background: rgba(183, 49, 46, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Asymmetric Hero Grid */
.hero-content-grid {
  position: relative;
  z-index: 5;
  flex: 1;
  display: grid;
  grid-template-columns: 32% 36% 32%;
  padding: 2rem 4rem 4rem 4rem;
  max-width: 1680px;
  margin: 0 auto;
  width: 100%;
}

.hero-left-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-right: 1.5rem;
}

.show-category-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--neon-crimson);
  margin-bottom: 0.5rem;
}

.editorial-display-title {
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 0.82;
  text-transform: uppercase;
  letter-spacing: -2px;
  color: var(--neon-crimson);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  margin-bottom: 2rem;
  max-width: 98%;
}

.editorial-display-title .accent-word {
  color: #FFFFFF;
  display: inline-block;
}

.favorite-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.5rem;
  background: var(--neon-crimson);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.favorite-btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.favorite-btn svg { width: 14px; height: 14px; fill: #FFFFFF; }

.hero-center-col {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  pointer-events: none;
}

.hero-right-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 2rem;
}

.episode-tagline {
  font-family: var(--font-display);
  font-size: 2.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 0.8rem;
  line-height: 0.95;
}

.metadata-pills-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
}

.meta-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.5px;
}

.meta-pill.badge-age {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--neon-crimson);
  color: var(--neon-crimson);
  border-radius: 2px;
  font-weight: 800;
}

.meta-divider { color: var(--neon-crimson); }

.synopsis-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  max-width: 380px;
  margin-bottom: 1.8rem;
}

.cta-buttons-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-primary-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.8rem;
  background-color: var(--neon-crimson);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, filter 0.2s ease;
  text-decoration: none;
}

.btn-primary-cta:hover { transform: translateY(-2px); filter: brightness(1.15); }

.btn-secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  background: transparent;
  color: #FFFFFF;
  border: 1px solid var(--neon-crimson);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-secondary-cta:hover { background: rgba(183, 49, 46, 0.18); transform: translateY(-2px); }

/* Marquee Ticker Banner */
.marquee-ticker-banner {
  width: 100%;
  background: var(--neon-crimson);
  color: #FFFFFF;
  padding: 0.6rem 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 2px;
  display: flex;
}

.marquee-content {
  display: inline-block;
  animation: marquee-scroll 25s linear infinite;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   2. BLOG INDEX PAGE HERO & HIGH-DESIGN WIREFRAME TABS
   ========================================================================== */
.blog-index-hero {
  position: relative;
  width: 100%;
  padding: 6rem 0 4rem 0;
  background-image: 
    radial-gradient(ellipse at center, rgba(183, 49, 46, 0.18) 0%, rgba(5, 4, 4, 0.96) 100%),
    linear-gradient(to bottom, rgba(5, 4, 4, 0.85) 0%, rgba(5, 4, 4, 0.98) 100%),
    url('assets/hero_obsidian_metal.jpg');
  background-size: cover;
  background-position: center 30%;
  border-bottom: 1px solid var(--maroon-grid-strong);
}

.featured-blog-card {
  background: var(--bg-charcoal);
  border: 1px solid var(--neon-crimson);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
}

.featured-card-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

.blog-layout-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
}

/* HIGH-DESIGN TECHNICAL WIREFRAME FILTER TABS (No Generic Capsules!) */
.cluster-filter-pills {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.cluster-pill {
  padding: 0.65rem 1.4rem;
  background: rgba(15, 5, 6, 0.9);
  border: 1px solid rgba(183, 49, 46, 0.45);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.25s var(--transition-cinematic);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pill-prefix {
  color: var(--neon-crimson);
  font-weight: 800;
  font-size: 0.72rem;
}

.cluster-pill.active, .cluster-pill:hover {
  background: var(--neon-crimson);
  color: #FFFFFF;
  border-color: var(--neon-crimson-bright);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(183, 49, 46, 0.4);
}

.cluster-pill.active .pill-prefix, .cluster-pill:hover .pill-prefix {
  color: #FFFFFF;
}

.sidebar-widget {
  background: var(--bg-charcoal);
  border: var(--border-card);
  border-radius: var(--radius-card);
  padding: 1.8rem;
  margin-bottom: 2rem;
}

.sidebar-popular-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  text-decoration: none;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: transform 0.2s ease;
}

.sidebar-popular-item:hover { transform: translateX(4px); }

.popular-num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--neon-crimson);
  line-height: 1;
}

/* ==========================================================================
   3. ARTICLE TEMPLATE STYLES (articulo.html)
   ========================================================================== */
.article-hero-header {
  padding: 3rem 0 2rem 0;
  background: var(--bg-inner);
}

.article-breadcrumbs {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.article-breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.article-breadcrumbs a:hover, .article-breadcrumbs .active-crumb {
  color: var(--neon-crimson);
}

.article-main-h1 {
  font-family: var(--font-display);
  font-size: 4.8rem;
  line-height: 0.88;
  color: #FFFFFF;
  letter-spacing: -1px;
  margin-bottom: 1.2rem;
  max-width: 1200px;
}

.article-subtitle-deck {
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 960px;
  margin-bottom: 2.2rem;
}

.article-author-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--maroon-grid-strong);
  border-bottom: 1px solid var(--maroon-grid-strong);
  padding: 1.2rem 0;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.author-info-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-avatar-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--neon-crimson);
}

.author-name-text {
  display: block;
  font-size: 0.95rem;
  color: #FFFFFF;
}

.author-role-text {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.article-meta-stats {
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.article-share-group {
  display: flex;
  gap: 0.6rem;
}

.btn-share-social {
  padding: 0.4rem 0.9rem;
  background: rgba(183, 49, 46, 0.12);
  border: 1px solid var(--neon-crimson);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-share-social:hover { background: var(--neon-crimson); }

.article-cover-wrapper {
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--maroon-grid-strong);
  background: var(--bg-charcoal);
}

.article-cover-img {
  width: 100%;
  max-height: 580px;
  object-fit: cover;
}

.article-cover-caption {
  padding: 0.8rem 1.2rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: rgba(5,4,4,0.95);
  border-top: 1px solid var(--maroon-grid);
}

/* Article Main Grid: 70% Prose + 30% Sticky Sidebar */
.article-main-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 4rem;
}

.article-content-prose {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
}

.article-content-prose p {
  margin-bottom: 1.6rem;
}

.prose-lead-paragraph {
  font-size: 1.25rem;
  line-height: 1.7;
  color: #FFFFFF;
  font-weight: 400;
}

.article-section-title {
  font-family: var(--font-display);
  font-size: 2.8rem;
  line-height: 0.95;
  color: var(--neon-crimson);
  margin: 3.5rem 0 1.5rem 0;
  border-bottom: 1px solid var(--maroon-grid-strong);
  padding-bottom: 0.5rem;
}

.article-styled-quote {
  border-left: 4px solid var(--neon-crimson);
  background: rgba(183, 49, 46, 0.08);
  padding: 1.8rem 2rem;
  margin: 2.5rem 0;
  border-radius: 0 4px 4px 0;
}

.article-styled-quote p {
  font-family: var(--font-title-alt);
  font-size: 1.25rem;
  font-style: italic;
  color: #FFFFFF;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}

.article-styled-quote cite {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--neon-crimson);
  font-style: normal;
}

.article-inline-image-box {
  margin: 2.5rem 0;
  border: 1px solid var(--maroon-grid-strong);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-charcoal);
}

.article-callout-box {
  background: var(--bg-charcoal);
  border: 1px solid var(--neon-crimson);
  border-radius: 4px;
  padding: 1.5rem;
  margin: 2.5rem 0;
}

.interview-dialogue {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.interview-q {
  background: rgba(183, 49, 46, 0.12);
  border-left: 3px solid var(--neon-crimson);
  padding: 1rem 1.2rem;
  border-radius: 0 4px 4px 0;
  font-size: 0.98rem;
  color: #FFFFFF;
}

.interview-a {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}

.article-tech-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: var(--bg-charcoal);
  border: 1px solid var(--maroon-grid-strong);
}

.article-tech-table th {
  background: rgba(183, 49, 46, 0.2);
  color: var(--neon-crimson);
  font-family: var(--font-mono);
  text-transform: uppercase;
  padding: 0.8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--neon-crimson);
}

.article-tech-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.85);
}

.inline-audio-widget {
  background: linear-gradient(135deg, rgba(15, 5, 6, 0.96) 0%, rgba(35, 8, 12, 0.96) 100%);
  border: 1px solid var(--neon-crimson);
  border-radius: 4px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 2.5rem;
}

.author-bio-footer-box {
  margin-top: 4rem;
  background: var(--bg-charcoal);
  border: 1px solid var(--maroon-grid-strong);
  border-radius: 4px;
  padding: 2rem;
  display: flex;
  gap: 1.8rem;
  align-items: flex-start;
}

.comments-section-container {
  margin-top: 4rem;
  border-top: 1px solid var(--maroon-grid-strong);
  padding-top: 3rem;
}

.comment-form-box {
  background: var(--bg-charcoal);
  border: 1px solid var(--maroon-grid-strong);
  border-radius: 4px;
  padding: 1.8rem;
}

.comment-single-item {
  background: var(--bg-charcoal);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 4px;
  padding: 1.2rem 1.5rem;
}

/* Sticky TOC Sidebar */
.article-sticky-toc-sidebar {
  position: sticky;
  top: 6rem;
  align-self: flex-start;
}

.toc-links-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.toc-link {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  padding: 0.3rem 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

.toc-link:hover, .toc-link.active {
  color: var(--neon-crimson);
  transform: translateX(4px);
}

/* Editorial Cluster Section */
.cluster-fullbleed-section {
  width: 100%;
  padding: 4rem 0 6rem 0;
  background-color: var(--bg-outer);
}

.cluster-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid var(--maroon-grid-strong);
  padding-bottom: 1.5rem;
  margin-bottom: 3rem;
}

.cluster-kicker { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 3px; color: var(--neon-crimson); text-transform: uppercase; }
.cluster-main-title { font-family: var(--font-display); font-size: 4rem; letter-spacing: 1px; color: #FFFFFF; text-transform: uppercase; line-height: 0.95; }
.cluster-main-title span { color: var(--neon-crimson); }

.cluster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
}

.cluster-card {
  background: var(--bg-charcoal);
  border: var(--border-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--transition-cinematic), border-color 0.4s ease;
  position: relative;
}

.cluster-card:hover {
  transform: translateY(-6px);
  border-color: var(--neon-crimson);
  background-color: var(--bg-card-hover);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.cluster-card.lead-card {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
}

.card-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--transition-cinematic);
}

.cluster-card:hover .card-img { transform: scale(1.05); }

.card-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.3rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 2px;
  background: rgba(5, 4, 4, 0.9);
  border: 1px solid var(--neon-crimson);
  color: var(--neon-crimson);
}

.card-content-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.card-meta { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); font-weight: 700; }
.card-title { font-family: var(--font-display); font-size: 2.3rem; line-height: 0.95; color: #FFFFFF; letter-spacing: 0.5px; }
.card-excerpt { font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); line-height: 1.5; }

.btn-link-action {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--neon-crimson);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.btn-link-action:hover { color: #FFFFFF; transform: translateX(4px); }

.band-genre-pill { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; color: var(--neon-crimson); }
.band-player-preview {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  border: 1px solid var(--maroon-grid-strong);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.track-badge { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; }

.radio-hub-card {
  background: linear-gradient(135deg, rgba(15, 5, 6, 0.96) 0%, rgba(35, 8, 12, 0.96) 100%);
  border: 1px solid var(--neon-crimson);
}

.radio-hub-inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  padding: 2.5rem;
  gap: 3rem;
  align-items: center;
}

.mini-history-list { display: flex; flex-direction: column; gap: 0.8rem; }

/* Crimson Tech Highlight Section */
.parchment-highlight-section {
  width: 100%;
  padding: 4rem 0 6rem 0;
  background: var(--bg-outer);
}

.parchment-inner-box {
  position: relative;
  background: #B7312E;
  color: #FFFFFF;
  padding: 3.5rem 4rem;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.parchment-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #FFFFFF;
  text-transform: uppercase;
  opacity: 0.9;
}

.parchment-main-title {
  font-family: var(--font-display);
  font-size: 4rem;
  color: #FFFFFF;
  letter-spacing: 1px;
  margin-bottom: 2rem;
  line-height: 0.92;
}

.parchment-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.parchment-mini-card {
  background: rgba(5, 4, 4, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  color: #FFFFFF;
}

.parchment-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--neon-crimson);
}

.parchment-card-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
}

.parchment-excerpt {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

.parchment-link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--neon-crimson);
  text-decoration: none;
  letter-spacing: 1px;
  margin-top: auto;
}

.parchment-link:hover { text-decoration: underline; }

/* Footer & Fixed Player */
.main-footer {
  background: var(--bg-inner);
  border-top: 1px solid var(--maroon-grid-strong);
  padding: 4rem 0 7rem 0;
  width: 100%;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4rem;
}

.global-radio-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background: rgba(5, 4, 4, 0.97);
  backdrop-filter: blur(15px);
  border-top: 1px solid var(--neon-crimson);
  z-index: 1000;
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  align-items: center;
  padding: 0 2.5rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.7);
}

.player-track-info { display: flex; align-items: center; gap: 1rem; }
.player-cover-art { width: 50px; height: 50px; border-radius: 4px; object-fit: cover; border: 1px solid var(--neon-crimson); }
.player-details { display: flex; flex-direction: column; }
.player-live-badge { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 800; color: var(--neon-crimson); text-transform: uppercase; display: flex; align-items: center; gap: 0.4rem; }
.player-song-title { font-size: 0.85rem; font-weight: 700; color: #FFF; }
.player-artist-name { font-size: 0.75rem; color: var(--text-muted); }
.player-center-controls { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.player-buttons-group { display: flex; align-items: center; gap: 1.2rem; }
.player-btn-play { width: 44px; height: 44px; border-radius: 50%; background-color: var(--neon-crimson); border: none; color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.player-btn-action { background: transparent; border: none; color: rgba(255,255,255,0.7); cursor: pointer; }
.visualizer-canvas { width: 320px; height: 20px; }
.player-right-tools { display: flex; align-items: center; justify-content: flex-end; gap: 1.2rem; }
.volume-container { display: flex; align-items: center; gap: 0.6rem; }
.volume-slider { width: 80px; height: 4px; accent-color: var(--neon-crimson); cursor: pointer; }
.btn-request-song { padding: 0.4rem 0.9rem; background: transparent; border: 1px solid var(--neon-crimson); color: var(--neon-crimson); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; border-radius: 2px; cursor: pointer; }

.toast-notification {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 10000;
  padding: 1rem 1.8rem;
  background: rgba(5, 4, 4, 0.97);
  border-left: 4px solid var(--neon-crimson);
  border-radius: 2px;
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  transform: translateX(120%);
  transition: transform 0.4s var(--transition-cinematic);
}
.toast-notification.show { transform: translateX(0); }

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5, 4, 4, 0.97);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  padding: 3rem 4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--transition-cinematic);
  overflow-y: auto;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; border-bottom: 1px solid var(--maroon-grid-strong); padding-bottom: 1rem; }
.modal-title { font-family: var(--font-display); font-size: 3rem; color: #FFFFFF; text-transform: uppercase; }
.modal-title span { color: var(--neon-crimson); }
.modal-close-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(183, 49, 46, 0.12); border: 1px solid var(--neon-crimson); color: #FFFFFF; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.trailer-video-box { width: 100%; max-width: 900px; margin: 0 auto; aspect-ratio: 16/9; border-radius: var(--radius-card); overflow: hidden; position: relative; border: 1px solid var(--neon-crimson); }

/* Responsive */
@media (max-width: 1280px) {
  .hero-content-grid { grid-template-columns: 35% 30% 35%; padding: 1rem 2.5rem 4rem 2.5rem; }
  .editorial-display-title, .article-main-h1 { font-size: 4.2rem; }
  .cinematic-header { padding: 0.8rem 2.5rem; }
  .blog-layout-grid, .article-main-grid { grid-template-columns: 1fr; }
  .article-sticky-toc-sidebar { position: static; margin-top: 3rem; }
  .cluster-grid, .parchment-cards-grid { grid-template-columns: 1fr 1fr; }
  .cluster-card.lead-card, .radio-hub-card, .featured-card-grid { grid-column: span 2; grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .hero-fullbleed-header { min-height: 100vh; }
  .hero-content-grid { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 10rem; }
  .editorial-display-title, .article-main-h1 { font-size: 3.2rem; max-width: 100%; }
  .whats-next-container { display: none; }
  .cluster-grid, .parchment-cards-grid { grid-template-columns: 1fr; }
  .cluster-card.lead-card, .radio-hub-card { grid-column: span 1; }
  .radio-hub-inner { grid-template-columns: 1fr; }
  .global-radio-bar { grid-template-columns: 1fr auto; padding: 0 1rem; }
  .player-right-tools { display: none; }
}

/* ===== Fuentes citadas al pie de cada artículo (articles.js) ===== */
.article-sources {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--maroon-grid-strong);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.article-sources a {
  color: var(--neon-crimson);
  text-decoration: none;
}
.article-sources a:hover { text-decoration: underline; }