/* ===================================================================
   MH Recetas Carousel - Tema NAVIDAD v2.2
   Fix: overlay sin linea visible, gradiente suave, responsive mejorado
   =================================================================== */

/* Variables Navidad */
.mh-rc-wrap.navidad {
  --rc-rojo:        #B71C1C !important;
  --rc-rojo-oscuro: #7F0000 !important;
  --rc-rojo-luz:    #EF5350 !important;
  --rc-verde:       #1B5E20 !important;
  --rc-verde-mid:   #2E7D32 !important;
  --rc-verde-luz:   #4CAF50 !important;
  --rc-dorado:      #F9A825 !important;
  --rc-dorado-luz:  #FFF8E1 !important;
  --rc-crema:       #FFF9F0 !important;
  --rc-accent:      #B71C1C !important;
  --rc-accent-dark: #7F0000 !important;
}

/* ================================================================
   WRAPPER
   ================================================================ */
.mh-rc-wrap.navidad {
  background: linear-gradient(135deg, #fdf8f0 0%, #fef3e2 50%, #fdf8f0 100%) !important;
  border-radius: 18px !important;
  padding-top: 38px !important;
  padding-bottom: 24px !important;
}

/* ================================================================
   BANNER SUPERIOR — \2744 = copo de nieve (U+2744), sin emoji
   ================================================================ */
.mh-rc-wrap.navidad::before {
  content: "\2744\A0\A0 RECETAS DE NAVIDAD \A0\A0\2744" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  font-size: 0.70rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.20em !important;
  font-family: Arial, sans-serif !important;
  background: linear-gradient(90deg, var(--rc-verde) 0%, #2E7D32 40%, var(--rc-rojo) 60%, var(--rc-verde) 100%) !important;
  color: #fff !important;
  padding: 7px 16px !important;
  border-radius: 18px 18px 0 0 !important;
  z-index: 30 !important;
  pointer-events: none !important;
  line-height: 1.4 !important;
  height: 30px !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Linea dorada inferior */
.mh-rc-wrap.navidad::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg,
    var(--rc-verde)  0%,
    var(--rc-dorado) 25%,
    var(--rc-rojo)   50%,
    var(--rc-dorado) 75%,
    var(--rc-verde)  100%
  ) !important;
  border-radius: 0 0 18px 18px !important;
  z-index: 30 !important;
  pointer-events: none !important;
}

/* ================================================================
   MEDIA CARD
   ================================================================ */
.mh-rc-wrap.navidad .mh-rc-media {
  border-radius: 12px !important;
  border: 3px solid transparent !important;
  background-clip: padding-box !important;
  box-shadow:
    0 0 0 3px rgba(183,28,28,0.12),
    0 8px 28px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.06) !important;
  transition: transform .32s ease, box-shadow .32s ease !important;
}

.mh-rc-wrap.navidad .mh-rc-link:hover .mh-rc-media,
.mh-rc-wrap.navidad .mh-rc-link:focus .mh-rc-media {
  transform: translateY(-7px) scale(1.01) !important;
  box-shadow:
    0 0 0 3px rgba(183,28,28,0.30),
    0 22px 48px rgba(0,0,0,0.18),
    0 6px 16px rgba(183,28,28,0.12) !important;
}

.mh-rc-wrap.navidad .mh-rc-media .mh-rc-media__img {
  transition: transform .42s ease, filter .42s ease !important;
}
.mh-rc-wrap.navidad .mh-rc-link:hover .mh-rc-media .mh-rc-media__img {
  transform: scale(1.08) !important;
  filter: saturate(1.12) brightness(1.04) !important;
}

/* ================================================================
   OVERLAY — gradiente suave SIN border-top (esa era la linea)
   El truco: empieza transparente desde el 45% y llega a oscuro
   al 0%, con una transición muy progresiva.
   ================================================================ */
.mh-rc-wrap.navidad .mh-rc-overlay {
  background: linear-gradient(
    to top,
    rgba(11, 46, 20, 0.92) 0%,
    rgba(11, 46, 20, 0.70) 35%,
    rgba(11, 46, 20, 0.20) 65%,
    transparent 100%
  ) !important;
  border-top: none !important;   /* <-- quita la linea */
  padding: 40px 14px 14px !important;
}

/* ================================================================
   TITULO dorado
   ================================================================ */
.mh-rc-wrap.navidad .mh-rc-title {
  color: var(--rc-dorado-luz) !important;
  font-weight: 800 !important;
  font-size: var(--rc-title-size) !important;
  letter-spacing: 0.02em !important;
  text-shadow:
    0 2px 12px rgba(0,0,0,0.6),
    0 0 24px rgba(249,168,37,0.25) !important;
  line-height: 1.2 !important;
}

/* ================================================================
   CHIP DE CATEGORIA
   ================================================================ */
.mh-rc-wrap.navidad .mh-rc-cat {
  background: var(--rc-rojo) !important;
  border: 1px solid rgba(249,168,37,0.35) !important;
  color: var(--rc-dorado-luz) !important;
}

/* ================================================================
   COPO DE NIEVE animado en cada tarjeta (\2744 = U+2744)
   ================================================================ */
.mh-rc-wrap.navidad .mh-rc-media::after {
  content: "\2744" !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  font-size: 1.1rem !important;
  font-family: Arial, sans-serif !important;
  color: rgba(255,255,255,0.80) !important;
  animation: nav-snow-spin 6s linear infinite !important;
  pointer-events: none !important;
  z-index: 3 !important;
  text-shadow: 0 0 8px rgba(255,255,255,0.6) !important;
  line-height: 1 !important;
}

@keyframes nav-snow-spin {
  0%   { transform: rotate(0deg)   scale(1) !important;    opacity: 0.7 !important; }
  50%  { transform: rotate(180deg) scale(1.15) !important; opacity: 1 !important;   }
  100% { transform: rotate(360deg) scale(1) !important;    opacity: 0.7 !important; }
}

/* Triangulo rojo en esquina superior izquierda */
.mh-rc-wrap.navidad .mh-rc-media::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 52px !important;
  height: 52px !important;
  background: linear-gradient(135deg, rgba(183,28,28,0.85) 0%, transparent 60%) !important;
  border-radius: 0 0 100% 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* ================================================================
   CONTROLES
   ================================================================ */
.mh-rc-wrap.navidad .mh-rc-prev,
.mh-rc-wrap.navidad .mh-rc-next {
  background: linear-gradient(145deg, var(--rc-rojo-luz), var(--rc-rojo)) !important;
  color: #fff !important;
  border: 2px solid rgba(249,168,37,0.35) !important;
  box-shadow:
    0 6px 20px rgba(183,28,28,0.28),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.mh-rc-wrap.navidad .mh-rc-prev:hover,
.mh-rc-wrap.navidad .mh-rc-next:hover {
  background: linear-gradient(145deg, var(--rc-rojo), var(--rc-rojo-oscuro)) !important;
  border-color: var(--rc-dorado) !important;
  box-shadow:
    0 10px 28px rgba(183,28,28,0.40),
    0 0 0 2px rgba(249,168,37,0.20) !important;
  transform: translateY(-50%) scale(1.1) !important;
}

/* ================================================================
   DOTS
   ================================================================ */
.mh-rc-wrap.navidad .mh-rc-dot { background: rgba(183,28,28,0.25) !important; }
.mh-rc-wrap.navidad .mh-rc-dot.is-active {
  background: var(--rc-rojo) !important;
  box-shadow: 0 0 6px rgba(183,28,28,0.5) !important;
}

/* ================================================================
   RESPONSIVE — TABLET (481px – 899px)
   ================================================================ */
@media (min-width: 481px) and (max-width: 899px) {
  .mh-rc-wrap.navidad {
    padding-top: 36px !important;
    padding-bottom: 20px !important;
    border-radius: 14px !important;
  }
  .mh-rc-wrap.navidad::before {
    font-size: 0.66rem !important;
    letter-spacing: 0.14em !important;
    padding: 6px 14px !important;
    height: 28px !important;
  }
  .mh-rc-wrap.navidad .mh-rc-overlay {
    padding: 36px 12px 12px !important;
  }
  .mh-rc-wrap.navidad .mh-rc-title {
    font-size: 0.95rem !important;
  }
  .mh-rc-wrap.navidad .mh-rc-media::after {
    font-size: 1rem !important;
    top: 8px !important;
    right: 8px !important;
  }
}

/* ================================================================
   RESPONSIVE — MOVIL (hasta 480px)
   ================================================================ */
@media (max-width: 480px) {
  .mh-rc-wrap.navidad {
    padding-top: 32px !important;
    padding-bottom: 18px !important;
    border-radius: 12px !important;
    margin: 12px 0 !important;
  }
  .mh-rc-wrap.navidad::before {
    font-size: 0.60rem !important;
    letter-spacing: 0.10em !important;
    padding: 5px 10px !important;
    height: 26px !important;
    border-radius: 12px 12px 0 0 !important;
  }
  .mh-rc-wrap.navidad::after {
    border-radius: 0 0 12px 12px !important;
    height: 3px !important;
  }
  .mh-rc-wrap.navidad .mh-rc-overlay {
    padding: 32px 10px 10px !important;
    background: linear-gradient(
      to top,
      rgba(11, 46, 20, 0.95) 0%,
      rgba(11, 46, 20, 0.65) 40%,
      transparent 100%
    ) !important;
  }
  .mh-rc-wrap.navidad .mh-rc-title {
    font-size: 0.88rem !important;
    -webkit-line-clamp: 2 !important;
  }
  .mh-rc-wrap.navidad .mh-rc-cat {
    font-size: 0.62rem !important;
    padding: 2px 6px !important;
  }
  .mh-rc-wrap.navidad .mh-rc-media {
    border-radius: 10px !important;
    box-shadow:
      0 0 0 2px rgba(183,28,28,0.15),
      0 4px 14px rgba(0,0,0,0.12) !important;
  }
  .mh-rc-wrap.navidad .mh-rc-media::after {
    font-size: 0.85rem !important;
    top: 6px !important;
    right: 6px !important;
  }
  .mh-rc-wrap.navidad .mh-rc-media::before {
    width: 38px !important;
    height: 38px !important;
  }
  /* Controles mas pequeños en movil */
  .mh-rc-wrap.navidad .mh-rc-prev,
  .mh-rc-wrap.navidad .mh-rc-next {
    width: 34px !important;
    height: 34px !important;
    font-size: 1.1rem !important;
  }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .mh-rc-wrap.navidad .mh-rc-media::after { animation: none !important; }
  .mh-rc-wrap.navidad .mh-rc-media,
  .mh-rc-wrap.navidad .mh-rc-media .mh-rc-media__img,
  .mh-rc-wrap.navidad .mh-rc-prev,
  .mh-rc-wrap.navidad .mh-rc-next { transition: none !important; transform: none !important; }
}