/* human-impact-ghibli-memory-theme
   Tema inspirado en la sensación visual de “Mundos de Studio Ghibli”,
   pero con paleta diferente para “Películas que debes ver”:
   vino oscuro + cobre + luz cálida + azul petróleo.
   No depende de main.py.
*/

/* Panel principal */
#peliculas-recomendadas[data-human-impact-article-fixed="1"],
#peliculas-recomendadas[data-human-impact-article="ready"] {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: clamp(26px, 4vw, 46px) !important;
  padding:
    clamp(24px, 4vw, 54px)
    clamp(16px, 3vw, 42px)
    clamp(24px, 4vw, 48px) !important;

  background:
    radial-gradient(circle at 16% 6%, rgba(255, 193, 120, .28), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(102, 54, 137, .34), transparent 32%),
    radial-gradient(circle at 10% 94%, rgba(15, 80, 100, .34), transparent 36%),
    linear-gradient(140deg, #22111a 0%, #341726 36%, #10292e 100%) !important;

  border: 1px solid rgba(255, 219, 166, .18) !important;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

/* Textura suave, tipo cuento/ilustración, sin usar imágenes externas */
#peliculas-recomendadas[data-human-impact-article-fixed="1"]::before,
#peliculas-recomendadas[data-human-impact-article="ready"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.028) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 34%) !important;
  background-size: 42px 42px, 42px 42px, 100% 100% !important;
  opacity: .36 !important;
  mix-blend-mode: soft-light !important;
}

/* Brillo bajo del fondo */
#peliculas-recomendadas[data-human-impact-article-fixed="1"]::after,
#peliculas-recomendadas[data-human-impact-article="ready"]::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -8% -18% -8% !important;
  height: 40% !important;
  pointer-events: none !important;
  z-index: -1 !important;
  background: radial-gradient(ellipse at center, rgba(255, 179, 96, .20), transparent 70%) !important;
}

/* Encabezado */
#peliculas-recomendadas[data-human-impact-article-fixed="1"] .mm-section-head,
#peliculas-recomendadas[data-human-impact-article="ready"] .mm-section-head {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: end !important;
  margin-bottom: clamp(18px, 3vw, 30px) !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .mm-kicker,
#peliculas-recomendadas[data-human-impact-article="ready"] .mm-kicker {
  color: #ffc678 !important;
  opacity: .92 !important;
  font-weight: 950 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 18px rgba(255, 169, 81, .18) !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .mm-section-head h2,
#peliculas-recomendadas[data-human-impact-article="ready"] .mm-section-head h2 {
  color: #fff7e8 !important;
  font-size: clamp(2rem, 4vw, 4.2rem) !important;
  line-height: .96 !important;
  letter-spacing: -.07em !important;
  text-shadow: 0 18px 46px rgba(0, 0, 0, .34) !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .mm-section-head p:not(.mm-kicker),
#peliculas-recomendadas[data-human-impact-article="ready"] .mm-section-head p:not(.mm-kicker) {
  max-width: 780px !important;
  color: rgba(255, 239, 219, .74) !important;
  font-size: clamp(1rem, 1.6vw, 1.36rem) !important;
  line-height: 1.52 !important;
}

/* Botón superior */
#peliculas-recomendadas[data-human-impact-article-fixed="1"] .mm-link,
#peliculas-recomendadas[data-human-impact-article="ready"] .mm-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  color: #fff7e8 !important;
  font-weight: 950 !important;
  text-decoration: none !important;
  background:
    linear-gradient(135deg, rgba(94, 37, 55, .95), rgba(16, 42, 52, .96)) !important;
  border: 1px solid rgba(255, 202, 124, .22) !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

/* Lista artículo */
#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-list,
#peliculas-recomendadas[data-human-impact-article="ready"] .human-impact-article-list {
  position: relative !important;
  z-index: 2 !important;
  gap: clamp(14px, 2.2vw, 22px) !important;
}

/* Tarjetas: estilo cuento/cine cálido, pero sin perder el layout */
#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-card,
#peliculas-recomendadas[data-human-impact-article="ready"] .human-impact-article-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: clamp(20px, 2.8vw, 34px) !important;
  padding: clamp(14px, 2vw, 22px) !important;

  background:
    radial-gradient(circle at 0% 0%, rgba(255, 194, 116, .13), transparent 42%),
    linear-gradient(135deg, rgba(255, 245, 225, .108), rgba(255, 255, 255, .045)) !important;

  border: 1px solid rgba(255, 217, 160, .18) !important;
  box-shadow:
    0 18px 52px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(10px) saturate(118%) !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-card::before,
#peliculas-recomendadas[data-human-impact-article="ready"] .human-impact-article-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.052), transparent 32%),
    radial-gradient(circle at 90% 20%, rgba(255, 171, 87, .11), transparent 34%) !important;
  opacity: .78 !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-card:hover,
#peliculas-recomendadas[data-human-impact-article="ready"] .human-impact-article-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 204, 126, .35) !important;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(255, 204, 126, .06) !important;
}

/* Portadas */
#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-cover,
#peliculas-recomendadas[data-human-impact-article="ready"] .human-impact-article-cover {
  position: relative !important;
  z-index: 1 !important;
  border-radius: 18px !important;
  background: #050505 !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(255, 220, 170, .15) !important;
}

/* Texto */
#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-body,
#peliculas-recomendadas[data-human-impact-article="ready"] .human-impact-article-body {
  position: relative !important;
  z-index: 1 !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-kicker,
#peliculas-recomendadas[data-human-impact-article="ready"] .human-impact-article-kicker {
  color: #ffc678 !important;
  background: rgba(255, 198, 120, .12) !important;
  border: 1px solid rgba(255, 198, 120, .16) !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-title,
#peliculas-recomendadas[data-human-impact-article="ready"] .human-impact-article-title {
  color: #fff3df !important;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .30) !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-description,
#peliculas-recomendadas[data-human-impact-article="ready"] .human-impact-article-description {
  color: rgba(255, 239, 219, .76) !important;
}

/* Ficha técnica */
#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-chip,
#peliculas-recomendadas[data-human-impact-article="ready"] .human-impact-article-chip {
  color: #fff6e8 !important;
  background:
    linear-gradient(135deg, rgba(33, 18, 28, .78), rgba(13, 34, 41, .72)) !important;
  border: 1px solid rgba(255, 205, 132, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Móvil: mantiene el tema, pero evita tarjetas gigantes y cortes */
@media (max-width: 720px) {
  #peliculas-recomendadas[data-human-impact-article-fixed="1"],
  #peliculas-recomendadas[data-human-impact-article="ready"] {
    padding: 22px 14px 28px !important;
    border-radius: 30px !important;
  }

  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .mm-section-head,
  #peliculas-recomendadas[data-human-impact-article="ready"] .mm-section-head {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .mm-section-head h2,
  #peliculas-recomendadas[data-human-impact-article="ready"] .mm-section-head h2 {
    font-size: clamp(2rem, 9vw, 2.9rem) !important;
    line-height: 1.02 !important;
  }

  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .mm-section-head p:not(.mm-kicker),
  #peliculas-recomendadas[data-human-impact-article="ready"] .mm-section-head p:not(.mm-kicker) {
    font-size: 1rem !important;
    line-height: 1.46 !important;
  }

  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .mm-link,
  #peliculas-recomendadas[data-human-impact-article="ready"] .mm-link {
    width: fit-content !important;
    min-height: 44px !important;
    padding: 0 18px !important;
  }

  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-card,
  #peliculas-recomendadas[data-human-impact-article="ready"] .human-impact-article-card {
    border-radius: 22px !important;
  }
}

@media (max-width: 420px) {
  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-card,
  #peliculas-recomendadas[data-human-impact-article="ready"] .human-impact-article-card {
    padding: 11px !important;
  }
}