:root {
  --gold-base: var(--gold);
  --gold-soft: #d8ccb2;
  --gold-hover: #f4d27a;
}

/* ================================================
   2. PAGE: POETRY LIST
=================================================== */

/* --- 2.1. Layout, Grid & Search --- */

.poetry-list.container {
  max-width: 96%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.poetry-list h2.mt-2.mb-2,
.poetry-list h2.mt-2.mb-3 {
  margin-top: 2.5rem !important;
}

.poetry-list .search-form {
  max-width: 800px;
  margin-left: 0;
  margin-right: auto;
}

/* --- 2.2. Shared Card Base --- */

.poetry-list .card,
.poetry-list .collection-album-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid rgba(200, 16, 46, 0.10);
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  transform: scale(1);
  transform-origin: center center;
  transition:
    transform 0.30s ease,
    background-color 0.30s ease,
    border-color 0.30s ease,
    box-shadow 0.30s ease;
}

.poetry-list .image-wrap {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.poetry-list .card-img-top {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.42s ease, filter 0.42s ease;
  will-change: transform;
}

.poetry-list .card-img-top[alt="Placeholder image"] {
  background-color: #f5f6f8;
  opacity: 0.85;
  padding: 0;
  border: 0;
}

.poetry-list .card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.poetry-list .card-title a.post-link {
  text-decoration: none;
  color: #d6c7a1;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.poetry-list .card-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #6b4020;
  line-height: 1.5;
  font-style: italic;
  transition: color 0.2s ease;
}

.poetry-list .text-muted {
  color: var(--text-subtle) !important;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.poetry-list .text-muted.small {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c8102e !important;
  opacity: 1;
}

.poetry-list .card .text-muted:not(.small) {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #7a6035 !important;
}

.poetry-list .card .card-footer {
  background: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--ay-primary) !important;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.poetry-list .card-footer span:not(.favorites-bar-heart) {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 1px;
}

/* --- 2.3. Standard Poem Card Hover --- */

.poetry-list .card:hover {
  background: rgba(200,16,46,0.85);
  border-color: #e8314f;
  transform: translateY(-4px) scale(1.018);
  z-index: 3;
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.48),
    0 0 24px rgba(212, 168, 67, 0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.poetry-list .card:hover .card-title,
.poetry-list .card:hover .card-title a.post-link {
  color: #fff5df !important;
}

.poetry-list .card:hover .text-muted.small,
.poetry-list .card:hover .card-footer,
.poetry-list .card:hover .card-footer span:not(.favorites-bar-heart),
.poetry-list .card:hover .card .text-muted:not(.small) {
  color: #0a0804 !important;
}

.poetry-list .card:hover .card-text {
  color: #f2dfb9 !important;
}

.poetry-list .card:hover .card-footer {
  border-top-color: rgba(10, 8, 4, 0.18) !important;
}

/* --- 2.4. Featured Card --- */

.poetry-list .badge.bg-warning {
  background: var(--color-primary-brand) !important;
  color: #000 !important;
}

.poetry-list .card:hover .badge.bg-warning {
  box-shadow: 0 0 0 3px rgba(232, 106, 51, 0.1);
}

.poetry-list .card.is-featured {
  background: var(--bg-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: scale(1.05);
  z-index: 1;
}

.poetry-list .card.is-featured .card-title a.post-link {
  color: var(--color-primary-brand);
  transition: color 0.2s ease;
}

.poetry-list .card.is-featured .card-title a.post-link:hover {
  color: var(--color-link-hover);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.poetry-list .feature-flag {
  position: absolute;
  top: 14px;
  left: 6px;
  padding: 4px 12px 4px 4px;
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-danger-text);
  z-index: 2;
  background: linear-gradient(135deg, var(--color-primary-brand), var(--color-danger));
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.poetry-list .feature-flag::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), transparent);
  transition: all 0.5s ease;
}

.poetry-list .card:hover .feature-flag::after {
  left: 100%;
}

.poetry-list .card:hover .feature-flag {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.poetry-list .card.is-featured .card-footer {
  background: linear-gradient(var(--bg-light), var(--bg-body));
  border-top: 1px solid #eee;
}

.poetry-list .card.is-featured .card-img-top,
.poetry-list .card.is-featured .image-wrap {
  aspect-ratio: 4 / 3;
}

.poetry-list .card.is-featured .image-wrap .card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.poetry-list .card.is-featured:hover {
  transform: translateY(-4px) scale(1.065);
  border-color: rgba(232, 106, 51, 0.45);
  z-index: 4;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10), 0 0 0 3px rgba(232, 106, 51, 0.1);
}

/* --- 2.5. Collection Album Card --- */

.poetry-list .collection-album-card {
  cursor: pointer;
}

.poetry-list .collection-album-card:hover {
  background: #c8102e;
  border-color: rgba(200, 16, 46, 0.5);
  transform: translateY(-5px) scale(1.018);
  z-index: 3;
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.48),
    0 0 24px rgba(212, 168, 67, 0.10);
}

/* force right-side ribbon */
.poetry-list .collection-album-card::before {
  content: "COLLECTION";
  position: absolute;
  top: 0;
  right: 0 !important;
  left: auto !important;
  width: 34px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: #c8102e;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.3);
  z-index: 10;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.poetry-list .collection-album-card:hover::before {
  background: linear-gradient(180deg, #e8314f, #c8102e);
  color: #ffffff !important;
  box-shadow: -6px 0 20px rgba(200, 16, 46, 0.4);
}

.poetry-list .collection-album-card .card-img-top {
  display: block;
  width: calc(100% - 34px) !important;
  margin-right: 34px !important;
  margin-left: 0 !important;
  float: none;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-top-left-radius: 14px;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0;
  transform: scale(1);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.poetry-list .collection-album-card .card-body {
  padding: 0.75rem 1rem 1rem 1rem;
  padding-right: calc(1rem + 34px) !important;
  padding-left: 1rem !important;
  line-height: 1.4;
  color: #a0844a;
  transition: color 0.2s ease;
  position: relative;
  z-index: 2;
}

.poetry-list .collection-album-card .card-title,
.poetry-list .collection-album-card .card-text {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.poetry-list .collection-album-card .card-title {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 1px;
  margin-bottom: 0.25rem !important;
  transition: color 0.2s ease;
}

.poetry-list .collection-album-card:hover .card-title,
.poetry-list .collection-album-card:hover .card-title a,
.poetry-list .collection-album-card:hover .card-title a.post-link {
  color: #fff5df !important;
}

.poetry-list .collection-album-card:hover .card-body,
.poetry-list .collection-album-card:hover .card-text {
  color: rgba(255, 232, 190, 0.88) !important;
  opacity: 1;
}

/* --- 2.6. XXL Tweaks --- */

.poetry-list .row .col-xxl-2 .card {
  border-radius: 14px;
  overflow: hidden;
}

.poetry-list .row .col-xxl-2 .card-body {
  padding: 0.65rem 0.75rem;
}

.poetry-list .row .col-xxl-2 .card-title {
  font-size: 1.25rem;
  line-height: 1.15;
  margin-bottom: 0.25rem !important;
}

.poetry-list .row .col-xxl-2 .card-footer {
  background: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0.45rem 0.75rem;
  font-size: 0.8125rem;
}

.poetry-list .row .col-xxl-2 .card-title a.post-link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.poetry-list .row .col-xxl-2 .card-text {
  margin-bottom: 0;
  font-size: 0.92rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.poetry-list .row .col-xxl-2 .text-muted.small {
  margin-bottom: 0.25rem !important;
}

/* keep xxl image ratios but do not kill zoom */
.poetry-list .row .col-xxl-2 .card-img-top {
  aspect-ratio: 4 / 3;
}

/* --- 2.7. Buttons, Pagination, Favorites --- */

.poetry-list .btn.btn-secondary,
.poetry-list button[type="submit"] {
  background: var(--ay-primary);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 11px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.poetry-list .btn.btn-secondary:hover,
.poetry-list button[type="submit"]:hover {
  background: var(--ay-light);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200, 16, 46, 0.3);
}

.poetry-list .btn-outline-secondary,
.poetry-list a.btn-outline-secondary {
  background: transparent;
  color: var(--text-subtle);
  border: 1px solid rgba(200, 16, 46, 0.2);
  border-radius: 4px;
  padding: 11px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  transition: all 0.2s ease;
}

.poetry-list .btn-outline-secondary:hover {
  background: rgba(200, 16, 46, 0.08);
  color: var(--ay-light);
  border-color: rgba(200, 16, 46, 0.4);
}

.poetry-list .pagination .page-link {
  background: var(--bg-card);
  border-color: rgba(200, 16, 46, 0.15);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.poetry-list .pagination .page-link:hover {
  background: rgba(200, 16, 46, 0.1);
  border-color: rgba(200, 16, 46, 0.4);
  color: var(--ay-light);
}

.poetry-list .pagination .page-item.active .page-link {
  background: var(--ay-primary);
  border-color: var(--ay-primary);
  color: #ffffff;
  font-weight: 600;
}

.poetry-list .pagination .page-item.disabled .page-link {
  background: var(--bg-surface);
  border-color: rgba(200, 16, 46, 0.08);
  color: var(--text-subtle);
}

a.page-link {
  color: var(--ay-primary);
}

.poetry-list nav[aria-label="Poem pages"] {
  margin-bottom: 0;
  margin-top: 0;
}

/* ================================================
   3. PAGE: POEM DETAIL
=================================================== */

.card.poem-detail-card,
.poem-detail-card {
  background: #000000 !important;
  background-image: none !important;
  background-color: #000000 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  width: 100% !important;
  position: relative !important;
  box-shadow: none !important;
}

.poem-sheet-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.poem-detail-overlay {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  padding: 22% 13% 22% 13% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.poem-detail-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(1.6rem, 4.5vw, 3rem) !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  color: var(--gold-base) !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  margin-bottom: 10px !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.poem-detail-title::first-line {
  color: #c8102e !important;
}

.poem-main-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

.poem-detail-author {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #3a1a00 !important;
  letter-spacing: 3px !important;
  margin-bottom: 1.5rem !important;
  display: block !important;
  text-transform: uppercase !important;
}

.poem-author-link {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--gold-base) !important;
  text-decoration: none !important;
  font-style: normal !important;
  transition: color 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.poem-author-link:hover {
  color: #1a0e00 !important;
  background: rgba(255,255,255,0.15) !important;
  padding: 2px 6px !important;
  border-radius: 2px !important;
  text-decoration: none !important;
}

.poem-body {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #1a0a00 !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  letter-spacing: 0.01em !important;
  width: 100% !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.poem-body::before {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 2px !important;
  background: rgba(196,154,64,0.5) !important;
  margin: 0 auto 1.5rem !important;
}

.poem-body p {
  margin-bottom: 1.5rem !important;
  margin-top: 0 !important;
  line-height: 1.65 !important;
  padding: 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  color: #1a0a00 !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.poem-body p:last-child {
  margin-bottom: 0 !important;
}

.poem-body p:empty {
  display: block !important;
  height: 1rem !important;
  margin: 0 !important;
}

.poem-body br {
  display: block;
  content: "";
  margin-top: 0;
}

.poem-body .stanza-break,
.poem-body br + br {
  display: block;
  margin-bottom: 1.5rem !important;
}


a.text-decoration-none {
  color: rgba(10,8,4,0.5) !important;
  font-family: 'Courier Prime', monospace !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}
a.text-decoration-none:hover {
  color: #0a0804 !important;
}

/* ================================================
   4. COMPONENT: QUOTE BAR SLIDER
=================================================== */
:root {
  --qb-radius: 14px;
  --qb-pad: 12px 18px;
}

.quote-banner{
  background: #0f0b05;
  border-top: 1px solid rgba(212,168,67,0.15);
  border-bottom: 1px solid rgba(212,168,67,0.15);
  border-left: none;
  border-right: none;
  border-radius: 0;
  min-height: 80px;
  height: auto;
  padding: 24px 80px;
  margin: .75rem 0 1.5rem;
  display:flex; align-items:center; position:relative;
  box-shadow: inset 0 0 80px rgba(212,168,67,0.04);
}

.banner--black { background: linear-gradient(90deg, #0a0804, #0f0a05, #0a0804); }
.banner--red   { background: linear-gradient(90deg, #100204, #160306, #100204); border-color: rgba(200,16,46,0.25); }

.qb-track{ display:flex; width:100%; transition: transform .45s ease; will-change: transform; }
.qb-slide{
  flex:0 0 100%;
  display:flex; align-items:center; justify-content:center;
  gap:.6rem; padding: var(--qb-pad); text-align:center; box-sizing:border-box;
  margin: 0; /* Merged from duplicate rule */
}

.qb-text {
  margin: 0;
  font-style: italic;
  line-height: 1.25;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 400;
  letter-spacing: .2px;
  max-width: 85ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f5e6c8;
}

.qb-author {
  margin: 0 0 0 .5rem;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ay-primary);
}

.qb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid rgba(200,16,46,0.2); border-radius: 999px; cursor: pointer; z-index: 2;
  color: var(--ay-primary); background: rgba(200,16,46,0.1);
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
.qb-nav:hover { background: rgba(200,16,46,0.2); color: var(--ay-light); border-color: rgba(200,16,46,0.4); }
.qb-nav:active { transform: translateY(-50%) scale(.96); }
.qb-prev { left: 8px; }
.qb-next { right: 8px; }
.qb-nav:focus-visible { outline: 2px solid rgba(212,168,67,0.5); outline-offset: 2px; }

.quote-banner-fw .quote-banner {
  margin-bottom: 0;
}

.quote-banner-fw,
.quote-banner{
  position: relative;
  z-index: 5;           /* below footer */
  margin-bottom: 0 !important;
}

.quote-banner-fw {
  margin-bottom: 0.25rem;
}

/* ================================================
   5. COMPONENT: ALERTS (SUCCESS OVERRIDE)
=================================================== */
.alert-success {
  background-color: rgba(200, 16, 46, 0.1);
  border-color: rgba(200, 16, 46, 0.3);
  color: #f5e6c8;
}

.alert-success a { color: #f5e6c8; font-weight: 600; }

.alert-success a:hover {
  color: var(--color-link-hover);
}

/* ================================================
   6. RESPONSIVE STYLES (@media queries)
=================================================== */

/* --- Mobile --- */

@media (max-width: 575.98px){

  /* Quote Banner */
  .quote-banner{ padding:10px 48px; min-height:75px; }
  .qb-text{ font-size:1.15rem; line-height:1.45; -webkit-line-clamp:4; }
  .qb-author{ font-size:1rem; }

  .collection-detail-wrapper::before {
    width: 24px;
    font-size: 0.6rem;
    letter-spacing: 1px;

    /* 🔥 IMPORTANTE (faltaba esto si no lo pusiste global) */
    transform: none;
  }

  .collection-detail-wrapper {
    padding-right: 24px;
  }
}

@media (min-width: 481px) and (max-width: 575.98px) {
  /* Poetry List Compact Cards */
  .poetry-list .row > [class*="col-12"] {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  .poetry-list .row > [class*="col-12"] .card-img-top {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

@media (max-width: 767.98px) {
  /* Poetry Search Form Mobile Fix */
  .poetry-list .search-form {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Tablet --- */

@media (max-width: 768px) {
  /* Poetry List */
  .poetry-list .card { margin-bottom: 1rem; }
  .poetry-list .search-form {
    max-width: 100%;
  }

  /* Poem Detail */
  .poem-detail-overlay {
    padding: 32px 20px !important;
  }
  .poem-body {
    font-size: 1.1rem !important;
    padding: 0 8px !important;
  }
  .poem-body p {
    font-size: 1.1rem !important;
  }

}

@media (max-width: 960px) {
  .poem-main-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0.75rem !important;
  }

  /* Poem with side panel — collapse grid on tablet + mobile */
  .poem-with-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    grid-template-columns: 1fr !important;
  }
  .poem-main-col {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .poem-main-col > div,
  .poem-main-col > div > div,
  .poem-main-col .container,
  .poem-main-col .container-fluid,
  .poem-main-col [class*="container"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .poem-main-col .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .poem-main-col [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }
  .song-panel {
    position: static !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
  }
}

@media (max-width: 480px) {
  .poem-detail-title {
    font-size: clamp(1.2rem, 7vw, 1.8rem) !important;
    letter-spacing: 2px !important;
  }
  .poem-detail-overlay {
    padding: 20% 8% 20% 8% !important;
  }
}

@media (max-width: 992px) {
  /* Poetry List Featured Card Aspect Ratio */
  .poetry-list .card.is-featured .card-img-top,
  .poetry-list .card.is-featured .image-wrap { 
    aspect-ratio: 4 / 3; 
  }
}

/* --- Desktop --- */


@media (min-width: 1600px) {
  /* Poetry List XXL Tweaks */
  .poetry-list .row .col-xxl-2 .card-img-top { aspect-ratio: 4 / 3; }
}


/* -------------------------------------- */
/* 7. Collection Detail Flag (Updated Positioning) */
/* -------------------------------------- */

.collection-detail-wrapper {
    position: relative;
    padding-right: 32px;
}

.collection-detail-wrapper::before {
    content: "COLLECTION"; 
    position: absolute;
    /* This positioning is now relative to the inner column */
    top: 0;
    right: 0; 
    
    /* Dimensions and Styling remain the same */
    width: 32px;
    height: 100%; 
    display: flex;
    justify-content: center; 
    align-items: center; 
    writing-mode: vertical-lr; 
    background-color: #c8102e;
    color: #ffffff;
    font-size: 0.75rem; 
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-top-right-radius: 16px; 
    border-bottom-right-radius: 16px; 
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2); 
    z-index: 10;
    transform: none; /* Ensure no unintended transforms */
}

/* === Favorites bar === */
.favorites-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 20px;
}
.favorites-bar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ay-primary);
  text-decoration: none;
  border: 1px solid rgba(200,16,46,0.25);
  padding: 9px 20px;
  border-radius: 3px;
  transition: all 0.2s;
}
.favorites-bar-link:hover {
  background: rgba(200,16,46,0.1);
  color: var(--ay-light);
  border-color: rgba(200,16,46,0.5);
  transform: translateY(-1px);
}
/* === Search inputs === */
.poetry-list .search-input,
.poetry-list input[type="search"],
.poetry-list input[type="text"] {
  background: var(--bg-card);
  border: 1px solid rgba(200,16,46,0.15);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 11px 16px;
  font-size: 14px;
  transition: all 0.2s;
}
.poetry-list .search-input:hover { border-color: rgba(200,16,46,0.3); }
.poetry-list .search-input:focus,
.poetry-list input[type="text"]:focus {
  border-color: var(--ay-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,16,46,0.1);
  background: var(--bg-card-hover);
}
.poetry-list .search-input::placeholder { color: #3a2010; }

.poetry-list select,
.poetry-list .form-select {
  background-color: var(--bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c8102e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid rgba(200,16,46,0.15);
  color: var(--text-body);
  border-radius: 4px;
  padding: 11px 36px 11px 14px;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: all 0.2s;
}
.poetry-list select:hover, .poetry-list .form-select:hover { border-color: rgba(200,16,46,0.35); }
.poetry-list select:focus, .poetry-list .form-select:focus { border-color: var(--ay-primary); outline: none; box-shadow: 0 0 0 3px rgba(200,16,46,0.1); }
.poetry-list select option, .poetry-list .form-select option { background: var(--bg-card); color: var(--text-body); }


/* Poem list h2 title */
.poetry-list h2 { color: #f5e6c8 !important; font-family: 'Cormorant Garamond', serif; font-weight: 400; letter-spacing: 3px; }

/* ================================================
   POEM DETAIL — Language toggle buttons
=================================================== */
#btn-es, #btn-en {
  background: rgba(10,8,4,0.1) !important;
  border: 1px solid rgba(10,8,4,0.25) !important;
  color: rgba(10,8,4,0.6) !important;
  font-family: 'Courier Prime', monospace !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  padding: 5px 10px !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
#btn-es:hover, #btn-en:hover {
  background: rgba(10,8,4,0.2) !important;
  color: #0a0804 !important;
  border-color: rgba(10,8,4,0.4) !important;
}
#btn-es.active, #btn-en.active,
#btn-es.btn-secondary, #btn-en.btn-secondary {
  background: #0a0804 !important;
  color: var(--gold-bright) !important;
  border-color: #0a0804 !important;
  font-weight: 700 !important;
}
#btn-es.btn-outline-secondary,
#btn-en.btn-outline-secondary {
  background: transparent;
  border-color: rgba(200,16,46,0.25);
  color: var(--text-subtle);
}
#btn-es.btn-outline-secondary:hover,
#btn-en.btn-outline-secondary:hover {
  background: rgba(200,16,46,0.08);
  border-color: rgba(200,16,46,0.5);
  color: var(--ay-light);
}

/* Collection/series label in poem hero */
.songs-hero__sub {
  color: #c8102e !important;
}

/* Poem detail card - overlay layer disabled (solid background used instead) */
.poem-detail-card::before {
  display: none;
}

/* Watermark logo inside gold card */
.poem-card-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  max-width: 380px;
  opacity: 0.28 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mix-blend-mode: multiply !important;
}

/* Ensure card content sits above the watermark */
.poem-detail-overlay .card-body {
  position: relative;
  z-index: 1;
}

/* Controls bar (favorite + ES/EN toggle) at top of poem card */
.poem-card-top-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  padding-left: 0 !important;
}

/* Crimson accent line at top of poem card */
.poem-accent-line {
  height: 3px;
  background: linear-gradient(to right, transparent, #c8102e, transparent);
  width: 60%;
  margin: 0 auto 24px;
}

/* Branded footer inside gold card */
.poem-card-footer {
  margin-top: 28px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(10,8,4,0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.poem-card-footer__text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 8px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(10,8,4,0.55) !important;
}

.poem-card-footer__brand {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 11px !important;
  letter-spacing: 5px !important;
  text-transform: uppercase !important;
  color: rgba(10,8,4,0.6) !important;
}

.poem-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 12px;
}

.poem-page-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #1a0a00 !important;
  text-decoration: none;
  border: 1px solid rgba(10,8,4,0.4);
  padding: 8px 18px;
  transition: all 0.2s;
  font-weight: 600;
  background: rgba(196,154,64,0.15);
}

.poem-page-btn:hover {
  background: #c8102e !important;
  color: #ffffff !important;
  border-color: #c8102e !important;
  text-decoration: none;
  letter-spacing: 5px;
}

.poem-page-num {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  color: rgba(10,8,4,0.6) !important;
  text-transform: uppercase;
  font-weight: 500;
}

/* Heart icons inside poem card — override inline styles on <i> */
.poem-detail-overlay .btn-like i,
.poem-detail-overlay a .far.fa-heart,
.poem-detail-overlay a .fas.fa-heart {
  color: #c8102e !important;
}

/* btn-like override for Aythnyk */
.btn-like {
  color: #c8102e !important;
  font-size: 14px;
  transition: all 0.2s !important;
}
.btn-like:hover,
.btn-like.favorited {
  color: #8b0000 !important;
  transform: scale(1.2) !important;
}


/* Poem list / favorites page h1 title */
.poetry-list h1 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  font-weight: 400 !important;
  letter-spacing: 6px !important;
  color: #f5e6c8 !important;
  text-transform: uppercase;
  text-align: center;
}




/* quitar fondo rojo del botón like */
.poetry-list .btn-like {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* quitar fondo en hover/focus */
.poetry-list .btn-like:hover,
.poetry-list .btn-like:focus,
.poetry-list .btn-like:active {
  background: transparent !important;
  box-shadow: none !important;
}

/* icono corazón */
.poetry-list .btn-like i {
  color: rgba(255, 255, 255, 0.6);
  opacity: 0.5;
  transition: all 0.3s ease;
}

/* hover → rojo limpio */
.poetry-list .btn-like:hover i {
  color: #c8102e;
  opacity: 1;
  transform: scale(1.1);
}

/* cuando está activo (liked) */
.poetry-list .btn-like.liked i,
.poetry-list .btn-like i.fas {
  color: #c8102e;
}

/* ================================================
   POEM CARDS — SLIGHT CARD SCALE ON HOVER
=================================================== */

.poetry-list .card,
.poetry-list .collection-album-card {
  transform: scale(1);
  transform-origin: center center;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background-color 0.35s ease,
    border-color 0.35s ease;
}

/* poem + collection cards */
.poetry-list .card:hover,
.poetry-list .collection-album-card:hover {
  transform: translateY(-4px) scale(1.018);
  z-index: 3;
}

/* featured card: keep it slightly larger, but still react on hover */
.poetry-list .card.is-featured {
  transform: scale(1.05);
}

.poetry-list .card.is-featured:hover {
  transform: translateY(-4px) scale(1.065);
  z-index: 4;
}

/* ================================================
   FINAL IMAGE HOVER ZOOM — POEMS + COLLECTIONS
=================================================== */

/* asegura recorte limpio */
.poetry-list .card .image-wrap,
.poetry-list .collection-album-card,
.poetry-list .collection-album-card .image-wrap {
  overflow: hidden;
}

/* transición fuerte y consistente */
.poetry-list .card .card-img-top,
.poetry-list .collection-album-card .card-img-top,
.poetry-list .card.is-featured .card-img-top {
  transform: scale(1) !important;
  transition: transform 0.35s ease, filter 0.35s ease !important;
  will-change: transform;
}

/* zoom visible en poem */
.poetry-list .card:hover .card-img-top {
  transform: scale(1.03) !important;
  filter: brightness(1.05) !important;
}

/* featured card también */
.poetry-list .card.is-featured:hover .card-img-top {
  transform: scale(1.03) !important;
  filter: brightness(1.05) !important;
}

/* ================================================
   7. LARGE SCREEN CAPS — POEM + COLLECTION GRIDS
=================================================== */

@media (min-width: 1400px) {
  .poems-grid {
    display: grid;
    grid-template-columns: repeat(4, 280px);
    justify-content: center;
    gap: 1.5rem;
  }

  .poems-grid > [class*="col-"] {
    width: 100%;
    max-width: 280px;
    padding: 0;
    flex: none;
  }

  .poems-grid .collection-album-card,
  .poems-grid .card {
    max-width: 280px;
    width: 100%;
  }
}

@media (min-width: 1800px) {
  .poems-grid {
    grid-template-columns: repeat(4, 300px);
  }

  .poems-grid > [class*="col-"] {
    max-width: 300px;
  }

  .poems-grid .collection-album-card,
  .poems-grid .card {
    max-width: 300px;
  }
}


/* ================================================
   8. POEM DETAIL — MOBILE ONLY FIX
=================================================== */

@media (max-width: 480px) {
  .poem-main-col .row,
  .poem-main-col .row.justify-content-center {
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0 !important;
    width: 100% !important;
  }

  .poem-main-col [class*="col-"] {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .song-panel {
    position: static !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
  }
}

/* ================================================
   POEM DETAIL — XS / SMALL PHONES FIX
   <= 480px
=================================================== */

@media (max-width: 480px) {
  .poem-main-container {
    padding: 0 0.5rem !important;
  }

  .poem-detail-card {
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .poem-detail-overlay {
    padding: 18% 9% 18% 9% !important;
  }

  .poem-detail-overlay .card-body {
    padding: 1rem !important;
  }

  .poem-card-top-controls {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .poem-accent-line {
    width: 52% !important;
    margin-bottom: 18px !important;
  }

  .poem-detail-title {
    font-size: clamp(1.25rem, 7vw, 1.75rem) !important;
    letter-spacing: 3px !important;
    line-height: 1.05 !important;
  }

  .poem-author-link {
    font-size: 0.62rem !important;
    letter-spacing: 3px !important;
  }

  .poem-body {
    padding: 0 6px !important;
  }

  .poem-body,
  .poem-body p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .poem-body p {
    margin-bottom: 1.1rem !important;
  }

  .poem-card-watermark {
    width: 78% !important;
    opacity: 0.28 !important;
  }

  .poem-card-footer {
    margin-top: 20px !important;
    gap: 8px !important;
  }

  .poem-card-footer__text,
  .poem-card-footer__brand {
    font-size: 7px !important;
    letter-spacing: 2px !important;
  }

  .poem-pagination {
    margin-top: 14px !important;
  }

  .poem-page-btn {
    font-size: 8px !important;
    letter-spacing: 3px !important;
    padding: 7px 12px !important;
  }
}

/* ================================================
   POEM DETAIL — FOOTER + PAGINATION COMPACT
   <= 522px
=================================================== */

@media (max-width: 522px) {
  .poem-card-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    margin-top: 18px !important;
    padding-top: 10px !important;
  }

  .poem-card-footer__text,
  .poem-card-footer__brand {
    font-size: 7px !important;
    letter-spacing: 2px !important;
    line-height: 1.2 !important;
  }

  .poem-pagination {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    justify-items: center !important;
    margin-top: 12px !important;
  }

  .poem-page-num {
    order: -1;
    font-size: 8px !important;
    letter-spacing: 2px !important;
  }

  .poem-page-btn {
    width: 100% !important;
    max-width: 600px !important;
    text-align: center !important;
    font-size: 8px !important;
    letter-spacing: 3px !important;
    padding: 8px 12px !important;
  }
}

/* ================================================
   POEM DETAIL — SAFE PADDING TOP/BOTTOM (MOBILE)
=================================================== */

@media (max-width: 522px) {
  .poem-detail-overlay {
    padding-top: 24% !important;   /* antes 18% */
    padding-bottom: 26% !important; /* más aire abajo */
  }

  .poem-card-footer {
    margin-top: 24px !important;
    padding-top: 14px !important;
  }

  .poem-pagination {
    margin-top: 18px !important;
    padding-bottom: 10px !important;
  }
}

/* ================================================
   POEM DETAIL — TABLET / SMALL TABLET FIX
   523px–768px
=================================================== */

@media (min-width: 523px) and (max-width: 768px) {
  .poem-detail-card {
    max-width: 680px !important;
    margin: 0 auto !important;
  }

  .poem-detail-overlay {
    padding: 20% 10% 24% 10% !important;
  }

  .poem-detail-overlay .card-body {
    padding: 1.5rem !important;
  }

  .poem-detail-title {
    font-size: clamp(1.8rem, 5vw, 2.6rem) !important;
    letter-spacing: 4px !important;
    line-height: 1.08 !important;
  }

  .poem-body,
  .poem-body p {
    font-size: 1.08rem !important;
    line-height: 1.6 !important;
  }

  .poem-card-footer {
    margin-top: 28px !important;
    padding-top: 16px !important;
  }

  .poem-pagination {
    margin-top: 20px !important;
    padding-bottom: 12px !important;
  }

  .poem-page-btn {
    padding: 8px 18px !important;
    font-size: 8px !important;
    letter-spacing: 3px !important;
  }
}

/* ================================================
   POEM LIST — Series musicales premium
=================================================== */
.poem-series-section {
  position: relative;
  overflow: hidden;
  padding: 6rem 2rem;
  background: #080604;
  border-top: 1px solid rgba(196,154,64,.14);
}

.poem-series-section .container {
  max-width: 1260px;
}

.poem-series-label {
  font-family: 'DM Sans', sans-serif;
  font-size: .63rem;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #c8102e;
  text-align: center;
  margin-bottom: .85rem;
}

.poem-series-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 300;
  color: #f5e0b0;
  text-align: center;
  margin: 0 0 .75rem;
}

.poem-series-title span {
  color: var(--gold-base);
}

.poem-series-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  color: #6b5f45;
  text-align: center;
  margin: 0 0 6rem;
}

.poem-series-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(196,154,64,.14);
  border-bottom: 1px solid rgba(196,154,64,.14);
}

.poem-series-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 2.5rem 2rem;
  background:
    radial-gradient(circle at top right, rgba(200,16,46,.08), transparent 35%),
    #0a0804;
  border-right: 1px solid rgba(196,154,64,.14);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .35s ease;
}

.poem-series-card:last-child {
  border-right: none;
}

.poem-series-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #c8102e;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 0;
}

.poem-series-card::after {
  content: '';
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: 0;
  height: 2px;
  background: #f0c96e;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  z-index: 1;
}

.poem-series-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(200,16,46,.16);
}

.poem-series-card:hover::before {
  opacity: 1;
}

.poem-series-card:hover::after {
  transform: scaleX(1);
}

.poem-series-card__num,
.poem-series-card__name,
.poem-series-card__cta {
  position: relative;
  z-index: 2;
}

.poem-series-card__num {
  font-family: 'DM Sans', sans-serif;
  font-size: .58rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #c8102e;
  margin-bottom: 1rem;
}

.poem-series-card__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 300;
  color: #f5e0b0;
  margin: 0 0 1.5rem;
}

.poem-series-card__cta {
  font-family: 'DM Sans', sans-serif;
  font-size: .65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-base);
  transition: letter-spacing .3s ease, color .3s ease;
}

.poem-series-card:hover .poem-series-card__num {
  color: rgba(255,255,255,.65);
}

.poem-series-card:hover .poem-series-card__name {
  color: #fff;
}

.poem-series-card:hover .poem-series-card__cta {
  color: #f0c96e;
  letter-spacing: 5px;
}

.poem-series-empty {
  grid-column: 1 / -1;
  color: #6b5f45;
  text-align: center;
  padding: 3rem;
}

/* Tablet */
@media (max-width: 991.98px) {
  .poem-series-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .poem-series-card {
    border-bottom: 1px solid rgba(196,154,64,.14);
  }

  .poem-series-card:nth-child(2n) {
    border-right: none;
  }

  .poem-series-card:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .poem-series-section {
    padding: 4.5rem 1.25rem;
  }

  .poem-series-grid {
    grid-template-columns: 1fr;
  }

  .poem-series-card {
    min-height: 190px;
    padding: 2.2rem 1.5rem;
    border-right: none;
    border-bottom: 1px solid rgba(196,154,64,.14);
  }

  .poem-series-card:last-child {
    border-bottom: none;
  }
}

/* ================================================
   POEM LIST — Hero title (songs-hero reuse)
=================================================== */
.songs-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 4rem 2rem 2rem;
  min-height: 280px;
}
.songs-hero > * {
  position: relative;
  z-index: 1;
}

.songs-hero__eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #c8102e;
  margin-bottom: 0.75rem;
}

.songs-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 300;
  color: #f5e0b0;
  margin: 0 0 0.5rem;
}

.songs-hero__title span { color: var(--gold-base); }

.songs-hero__sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: #c8102e !important;
}
/* ═══════════════════════════════════════════════════════════════════
   AYTHNYK — Poetry Cards + Grid  FINAL LIMPIO v2
   Reemplaza TODO desde "AYTHNYK — Poetry Cards + Grid  FINAL LIMPIO"
   hasta el final de poetry.css
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   1. POEM CARDS — base (fuera del grid)
   ═══════════════════════════════════════════════════════════════════ */

.poetry-list .card:not(.collection-album-card) {
  border: 1px solid transparent !important;
  position: relative !important;
}

.poetry-list .card-title a.post-link {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: var(--gold-base) !important;
  text-decoration: none !important;
}

.poetry-list .card .text-muted.small {
  font-size: 0.62rem !important;
  letter-spacing: 2px !important;
  color: #c8102e !important;
}

.poetry-list .card .text-muted:not(.small) {
  font-size: 0.65rem !important;
  letter-spacing: 1.5px !important;
  color: var(--gold-base) !important;
}

.poetry-list .card .card-body .text-muted:not(.small) {
  color: rgba(245, 230, 200, 0.62) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.65rem !important;
  letter-spacing: 1.5px !important;
}

.poetry-list .card:not(.collection-album-card) .card-text {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: normal !important;
  font-size: 0.80rem !important;
  color: rgba(245, 230, 200, 0.58) !important;
  line-height: 1.5 !important;
  opacity: 0.7;
  transition: opacity 0.35s ease;
}

.poetry-list .card.is-featured {
  border: 1px solid rgba(196, 154, 64, 0.4) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   2. COLLECTION CARDS — base (fuera del grid)
   ═══════════════════════════════════════════════════════════════════ */

.poetry-list .collection-album-card {
  border: 1px solid transparent !important;
  position: relative !important;
}

.poetry-list .collection-album-card .card-title,
.poetry-list .collection-album-card h5.card-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #f5e6c8 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.4rem !important;
}

.poetry-list .collection-album-card .card-body p.card-text,
.poetry-list .collection-album-card .card-body .card-text,
.poetry-list .collection-album-card p.text-muted.small,
.poetry-list .collection-album-card .text-muted.small {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: normal !important;
  font-size: 0.76rem !important;
  color: rgba(245, 230, 200, 0.62) !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.poetry-list .collection-album-card::before {
  background: rgba(8, 5, 2, 0.85) !important;
  color: var(--gold-base) !important;
  box-shadow: none !important;
  border-left: 1px solid rgba(196, 154, 64, 0.2) !important;
  transition: background 0.28s ease, color 0.28s ease !important;
}

.poetry-list .collection-album-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 34px !important;
  height: 2px !important;
  background: var(--gold) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.35s ease !important;
  z-index: 4 !important;
}

.poetry-list .collection-album-card:hover::after {
  transform: scaleX(1) !important;
}

.poetry-list .collection-album-card:hover {
  background: var(--bg-card) !important;
  border-color: transparent !important;
  transform: translateY(-5px) scale(1.018) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.65) !important;
  z-index: 3;
}

.poetry-list .collection-album-card:hover::before {
  background: #c8102e !important;
  color: #ffffff !important;
  border-left-color: #c8102e !important;
}

.poetry-list .collection-album-card:hover .card-title,
.poetry-list .collection-album-card:hover h5.card-title {
  color: var(--gold-hover) !important;
}

.poetry-list .collection-album-card:hover .card-body p.card-text,
.poetry-list .collection-album-card:hover .card-body .card-text,
.poetry-list .collection-album-card:hover p.text-muted.small,
.poetry-list .collection-album-card:hover .text-muted.small {
  color: rgba(245, 230, 200, 0.95) !important;
  -webkit-text-fill-color: rgba(245, 230, 200, 0.95) !important;
  opacity: 1 !important;
}

.poetry-list .collection-album-card:hover .card-img-top {
  transform: scale(1.03) !important;
  filter: brightness(1.05) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   3. COLLECTION DETAIL BANNER
   ═══════════════════════════════════════════════════════════════════ */

.collection-detail-card,
.collection-detail-wrapper .card,
.collection-detail-wrapper {
  border-radius: 0 !important;
  overflow: hidden !important;
}

.collection-detail-card img,
.collection-detail-wrapper img {
  border-radius: 0 !important;
}

.collection-detail-wrapper {
  position: relative !important;
}

.collection-detail-wrapper::before {
  border-radius: 0 !important;
}

.collection-detail-wrapper:hover,
.collection-detail-wrapper:hover .card,
.collection-detail-wrapper:hover .collection-detail-card {
  background: transparent !important;
  background-color: transparent !important;
}

.collection-detail-card {
  border-color: rgba(196, 154, 64, 0.2) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
}

.collection-detail-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1.3rem, 3vw, 2rem) !important;
  font-weight: 700 !important;
  color: #f5e6c8 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
}

.collection-detail-card p,
.collection-detail-card .text-muted {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: normal !important;
  font-size: 0.92rem !important;
  color: rgba(245, 230, 200, 0.65) !important;
  line-height: 1.7 !important;
}

/* Línea dorada — desliza en hover desde izquierda */
.collection-detail-wrapper::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--gold-bright) !important;
  z-index: 5 !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.35s ease !important;
}

.collection-detail-wrapper:hover::after {
  transform: scaleX(1) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   4. POEMS GRID — flush, cuadrado, divisores dorados
   ═══════════════════════════════════════════════════════════════════ */

.poetry-list .poems-grid {
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5px !important;
  row-gap: 3px !important;
  background: rgba(196, 154, 64, 0.08) !important;
  border-top: 1px solid rgba(196, 154, 64, 0.18) !important;
  border-bottom: 1px solid rgba(196, 154, 64, 0.18) !important;
}

.poetry-list .poems-grid > [class*="col-"] {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* ─── POEM CARDS en grid ─────────────────────────────────────────── */

.poetry-list .poems-grid .card:not(.collection-album-card) {
  border-radius: 0 !important;
  border: none !important;
  height: 100% !important;
  transform: none !important;
  overflow: visible !important;
  position: relative !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card) .image-wrap,
.poetry-list .poems-grid .card:not(.collection-album-card) .card-img-top {
  border-radius: 0 !important;
}

/* Card body — flex: título arriba, meta abajo */
.poetry-list .poems-grid .card .card-body {
  background: #0a0804 !important;
  color: #f5e6c8 !important;
  display: flex !important;
  flex-direction: column !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card) .card-body {
  min-height: 160px !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card) .card-body .card-title {
  margin-bottom: auto !important;
}

.poetry-list .poems-grid .card-body .card-meta {
  margin-top: auto !important;
}

/* Título */
.poetry-list .poems-grid .card-title a.post-link {
  font-size: 1.05rem !important;
  letter-spacing: 4px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

/* Label colección — rojo */
.poetry-list .poems-grid .card .text-muted.small {
  font-size: 8px !important;
  letter-spacing: 3px !important;
  color: #c8102e !important;
  opacity: 0.7;
}

/* Autor dorado — firma artística */
.poetry-list .poems-grid .poem-author-grid {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--gold-base) !important;
  -webkit-text-fill-color: var(--gold-base) !important;
  margin-bottom: 0 !important;
  opacity: 0.9 !important;

  transition:
    color .35s ease,
    -webkit-text-fill-color .35s ease,
    text-shadow .35s ease,
    opacity .35s ease,
    letter-spacing .35s ease;
}

/* Hover dorado tipo firma */
.poetry-list .poems-grid .card:not(.collection-album-card):hover .poem-author-grid {
  color: var(--gold-hover) !important;
  -webkit-text-fill-color: var(--gold-hover) !important;
  opacity: 1 !important;
  letter-spacing: 4px !important;

  text-shadow:
    0 0 6px rgba(196,154,64,.35),
    0 0 12px rgba(196,154,64,.15);
}

/* Autor fallback — text-muted */
.poetry-list .poems-grid .card .card-body .text-muted:not(.small),
.poetry-list .poems-grid .card .text-muted:not(.small) {
  font-size: 9px !important;
  letter-spacing: 3px !important;
  color: var(--gold-base) !important;
  -webkit-text-fill-color: var(--gold-base) !important;
}

/* Excerpt */
.poetry-list .poems-grid .card-text {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
  letter-spacing: 0.8px !important;
  color: rgba(245, 230, 200, 0.65) !important;
  font-style: normal !important;
  margin-top: 0.5rem !important;
}

/* Banda roja lateral — hover */
.poetry-list .poems-grid .card:not(.collection-album-card)::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 5px !important;
  height: 100% !important;
  background: linear-gradient(180deg, #c8102e, rgba(200, 16, 46, 0.55)) !important;
  transform: scaleY(0) !important;
  transform-origin: bottom !important;
  transition: transform 0.35s ease !important;
  opacity: 0.82 !important;
  z-index: 5 !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card):hover::before {
  transform: scaleY(1) !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card)::after {
  display: none !important;
}

/* Footer base — transparente */
.poetry-list .poems-grid .card:not(.collection-album-card) .card-footer {
  background: transparent !important;
  border-top: 1px solid rgba(196, 154, 64, 0.12) !important;
  border-radius: 0 !important;
  padding: 0.6rem 1rem !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 2 !important;
  transition: background 0.35s ease !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card) .card-footer span:not(.favorites-bar-heart) {
  color: rgba(196, 154, 64, 0.45) !important;
  position: relative !important;
  z-index: 2 !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card) .card-footer a {
  color: rgba(196, 154, 64, 0.65) !important;
  position: relative !important;
  z-index: 2 !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card) .card-footer .btn-like i {
  color: rgba(200, 16, 46, 0.5) !important;
  opacity: 0.5;
}

/* TITLE → GOLD on hover (poems grid) */
.poetry-list .poems-grid .card:not(.collection-album-card):hover
.card-title a.post-link {
  color: var(--gold-hover) !important;
  -webkit-text-fill-color: var(--gold-hover) !important;

  text-shadow:
    0 0 4px rgba(244,210,122,.35),
    0 0 12px rgba(244,210,122,.18);

  transition: color .3s ease, text-shadow .3s ease;
}

/* Footer hover — rojo + línea dorada abajo */
.poetry-list .poems-grid .card:not(.collection-album-card):hover .card-footer {
  background: rgba(184,15,42,.88) !important;
  border-top: none !important;
  padding-bottom: 5px !important;
  box-shadow: inset 0 -5px 0 0 var(--gold-bright) !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card):hover .card-footer span:not(.favorites-bar-heart) {
  color: #ffffff !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card):hover .card-footer a {
  color: var(--gold-hover) !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card):hover .card-footer .btn-like i,
.poetry-list .poems-grid .card:not(.collection-album-card):hover .card-footer i {
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
}

/* Hover card */
.poetry-list .poems-grid .card:not(.collection-album-card):hover {
  transform: scale(1.015) !important;
  box-shadow: none !important;
  outline: none !important;
  z-index: 10 !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card):hover .card-img-top {
  transform: scale(1.03) !important;
  filter: brightness(1.05) !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card):hover .card-text {
  color: var(--gold-hover) !important;
  opacity: 1 !important;

  text-shadow:
    0 0 6px rgba(240,201,110,.18);
}

.poetry-list .poems-grid .card-footer span:not(.favorites-bar-heart) {
  color: rgba(196, 154, 64, 0.45) !important;
}


/* ─── COLLECTION CARDS en grid ───────────────────────────────────── */

.poetry-list .poems-grid .collection-album-card {
  border-radius: 0 !important;
  border: none !important;
  height: 100% !important;
  transform: none !important;
  box-shadow:
    -1px 0 0 rgba(196, 154, 64, 0.18),
     1px 0 0 rgba(196, 154, 64, 0.18) !important;
}

.poetry-list .poems-grid .collection-album-card .card-img-top {
  border-radius: 0 !important;
  width: calc(100% - 42px) !important;
  margin-right: 42px !important;
}

.poetry-list .poems-grid .collection-album-card::before {
  width: 42px !important;
  font-size: 0.68rem !important;
  letter-spacing: 3px !important;
  border-radius: 0 !important;
}

.poetry-list .poems-grid .collection-album-card .card-body {
  padding-right: calc(1rem + 42px) !important;
}

.poetry-list .poems-grid .collection-album-card::after {
  right: 42px !important;
  border-radius: 0 !important;
}

.poetry-list .poems-grid .collection-album-card:hover {
  transform: none !important;
  box-shadow:
    -1px 0 0 rgba(196, 154, 64, 0.18),
     1px 0 0 rgba(196, 154, 64, 0.18) !important;
}


/* ─── RESPONSIVE ──────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .poetry-list .poems-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 575px) {
  .poetry-list .poems-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Collections — texto descripción beige, no rojo */
.poetry-list .poems-grid .collection-album-card .card-body p.card-text,
.poetry-list .poems-grid .collection-album-card .text-muted.small {
  color: rgba(245, 230, 200, 0.62) !important;
  -webkit-text-fill-color: rgba(245, 230, 200, 0.62) !important;
}

/* Autor poem cards — dorado */
.poetry-list .poems-grid .poem-author-grid,
.poetry-list .poems-grid .card .card-body .text-muted:not(.small) {
  color: var(--gold-base) !important;
  -webkit-text-fill-color: var(--gold-base) !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card):hover 
.card-footer span:not(.favorites-bar-heart) {
  color: #f5e6c8 !important;
}

/* Footer base — quieter */
.poetry-list .poems-grid .card-footer span:not(.favorites-bar-heart) {
  color: rgba(196, 154, 64, 0.45) !important;
  transition: color .35s ease, text-shadow .35s ease;
}

/* Footer hover — clearer / warmer */
.poetry-list .poems-grid .card:not(.collection-album-card):hover
.card-footer span:not(.favorites-bar-heart) {
  color: #f5e6c8 !important;
  text-shadow: 0 0 6px rgba(245, 230, 200, .22);
}

/* ================================================
   FINAL POLISH — Luxury Editorial Hover System
=================================================== */

/* 1. Title base: cooler, quieter gold */
.poetry-list .poems-grid .card-title a.post-link {
  color: var(--gold-soft) !important;
  -webkit-text-fill-color: var(--gold-soft) !important;
  transition:
    color .35s ease,
    -webkit-text-fill-color .35s ease,
    text-shadow .4s ease,
    letter-spacing .35s ease;
}

/* 2. Title hover: warmer gold glow */
.poetry-list .poems-grid .card:not(.collection-album-card):hover .card-title a.post-link {
  color: var(--gold-hover) !important;
  -webkit-text-fill-color: var(--gold-hover) !important;
  letter-spacing: 4.5px !important;
  text-shadow:
    0 0 4px rgba(244,210,122,.35),
    0 0 12px rgba(244,210,122,.18);
}

/* 3. Category: red, but quieter */
.poetry-list .poems-grid .card .text-muted.small {
  color: #c8102e !important;
  opacity: .68 !important;
}

/* 4. Category hover: clearer but not loud */
.poetry-list .poems-grid .card:not(.collection-album-card):hover .text-muted.small {
  opacity: .95 !important;
  color: #e0163a !important;
}

/* 5. Author: signature, below title hierarchy */
.poetry-list .poems-grid .poem-author-grid {
  color: var(--gold-base) !important;
  -webkit-text-fill-color: var(--gold-base) !important;
  opacity: .88 !important;
}

/* 6. Author hover: warm signature glow */
.poetry-list .poems-grid .card:not(.collection-album-card):hover .poem-author-grid {
  color: var(--gold-hover) !important;
  -webkit-text-fill-color: var(--gold-hover) !important;
  opacity: 1 !important;
  text-shadow:
    0 0 6px rgba(196,154,64,.32),
    0 0 14px rgba(196,154,64,.16);
}

/* 7. Excerpt base: readable but secondary */
.poetry-list .poems-grid .card-text {
  margin-top: .6rem;
  color: rgba(245,230,200,.58) !important;
  opacity: .72 !important;
  transition:
    color .35s ease,
    opacity .35s ease,
    text-shadow .35s ease;
}

/* 8. Excerpt hover: appears emotionally */
.poetry-list .poems-grid .card:not(.collection-album-card):hover .card-text {
  color: rgba(245, 230, 200, .78) !important;
  opacity: .92 !important;
  text-shadow: 0 0 5px rgba(240,201,110,.08);
}

/* 9. Footer base: muted, quiet metadata */
.poetry-list .poems-grid .card:not(.collection-album-card) .card-footer span:not(.favorites-bar-heart),
.poetry-list .poems-grid .card:not(.collection-album-card) .card-footer a {
  color: rgba(196,154,64,.42) !important;
  transition:
    color .35s ease,
    text-shadow .35s ease,
    opacity .35s ease;
}

/* 10. Footer hover: softer red, less aggressive */
.poetry-list .poems-grid .card:not(.collection-album-card):hover .card-footer {
  background: rgba(184,15,42,.88) !important;
  box-shadow:
  inset 0 -3px 0 0 var(--gold-bright),
  0 -6px 20px rgba(200,16,46,.25) !important;
}

/* 11. Footer text hover */
.poetry-list .poems-grid .card:not(.collection-album-card):hover .card-footer span:not(.favorites-bar-heart) {
  color: #f5e6c8 !important;
  text-shadow: 0 0 6px rgba(245,230,200,.22);
}

/* 12. Heart quieter until hover */
.poetry-list .poems-grid .card:not(.collection-album-card) .card-footer .btn-like i {
  color: rgba(200,16,46,.42) !important;
  opacity: .45 !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card):hover .card-footer .btn-like i,
.poetry-list .poems-grid .card:not(.collection-album-card):hover .card-footer i {
  color: #fff5df !important;
  opacity: 1 !important;
}

/* 13. Image hover: cinematic, not too much */
.poetry-list .poems-grid .card:not(.collection-album-card):hover .card-img-top {
  transform: scale(1.035) !important;
  filter: brightness(1.06) contrast(1.02) !important;
}

/* 14. Card hover: controlled elevation */
.poetry-list .poems-grid .card:not(.collection-album-card):hover {
  transform: scale(1.012) !important;
  z-index: 10 !important;
}

/* 15. Red side line: elegant, less aggressive */
.poetry-list .poems-grid .card:not(.collection-album-card)::before {
  background: linear-gradient(
    180deg,
    rgba(200,16,46,.85),
    rgba(200,16,46,.35)
  ) !important;
  opacity: .75 !important;
}

.poetry-list .poems-grid .card:not(.collection-album-card):hover::before {
  opacity: .9 !important;
}