/* ═══════════════════════════════════════════════════════════════════════════
   Recetas Slider Pro — v6.0.0
   Estética: revista gastronómica refinada · terracota · crema · pizarra
   CWV: contain:layout en rs-viewport, aspect-ratio en media, no CLS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens scoped al wrapper del slider (aliased al tema Comiweb) ──────── */
.rs-wrapper,
.rs-container,
.rs-viewport {
  --rs-terra:       var(--cw-orange,        #E85D04) !important;
  --rs-terra-dark:  var(--cw-orange-dark,   #C44B02) !important;
  --rs-terra-light: var(--cw-orange-light,  #FFF0E6) !important;
  --rs-cream:       var(--cw-off-white,     #FFF8F3) !important;
  --rs-slate:       var(--cw-text,          #1C1917) !important;
  --rs-slate-mid:   var(--cw-text-light,    #57534E) !important;
  --rs-slate-soft:  var(--cw-gray,          #9CA3AF) !important;
  --rs-gold:        var(--cw-gold,          #F5C518) !important;
  --rs-border:      var(--cw-gray-light,    #F4F1EE) !important;
  --rs-white:       var(--cw-white,         #FFFFFF) !important;

  --rs-font-title:  var(--font-title,       'Playfair Display', Georgia, serif) !important;
  --rs-font-body:   var(--font-body,        'Nunito', 'Segoe UI', sans-serif) !important;

  --rs-radius:      var(--cw-radius-lg,     20px) !important;
  --rs-radius-sm:   var(--cw-radius-sm,     6px) !important;
  --rs-shadow:      var(--cw-shadow,        0 4px 20px rgba(0,0,0,0.12)) !important;
  --rs-shadow-hover: var(--cw-shadow-lg,    0 8px 40px rgba(0,0,0,0.18)) !important;

  --rs-transition:  0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ── Wrapper externo ─────────────────────────────────────────────────────── */
.rs-wrapper {
  width: 100% !important;
  padding: 32px 0 56px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  /* Aislamiento: evita que overflow afecte al layout padre */
  contain: style !important;
}

/* ── Contenedor principal ────────────────────────────────────────────────── */
.rs-container {
  position: relative !important;
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

/* ── Viewport — clave para CLS: tamaño fijo reservado ───────────────────── */
.rs-viewport {
  overflow: hidden !important;
  border-radius: var(--rs-radius) !important;
  box-shadow: var(--rs-shadow) !important;
  background: var(--rs-cream) !important;
  position: relative !important;
  /* contain:layout = el navegador sabe que este bloque no afecta a nada externo */
  contain: layout !important;
  /* Transición de opacidad al cambiar slide — evita reflow */
  transition: box-shadow 0.3s ease !important;
}

.rs-viewport:hover {
  box-shadow: var(--rs-shadow-hover) !important;
}

/* ── Track ───────────────────────────────────────────────────────────────── */
.rs-track {
  display: flex !important;
  will-change: transform !important;
  transition: transform var(--rs-transition) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ── Slide ───────────────────────────────────────────────────────────────── */
.rs-slide {
  flex: 0 0 100% !important;
  min-width: 100% !important;
  position: relative !important;
}

/* ── Layout interior: imagen izq. / tarjeta der. ────────────────────────── */
.rs-content-wrapper {
  display: flex !important;
  flex-direction: row !important;
  min-height: 480px !important;
  background: var(--rs-cream) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIGURA / IMAGEN  (55%)
   ═══════════════════════════════════════════════════════════════════════════ */
.rs-media {
  width: 55% !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  background: var(--rs-terra-light) !important; /* placeholder color mientras carga */
}

/* aspect-ratio en el link para reservar espacio = cero CLS */
.rs-media .rs-media__link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
}

.rs-media .rs-media__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.7s ease !important;
}

.rs-media:hover .rs-media__img {
  transform: scale(1.04) !important;
}

/* Gradiente sutil para legibilidad de badges */
.rs-media::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(42,33,24,0.25) 0%,
    transparent 45%,
    transparent 70%,
    rgba(42,33,24,0.12) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ── Badges sobre la imagen ──────────────────────────────────────────────── */
.rs-media-badges {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 2 !important;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.rs-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  font-family: var(--rs-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 20px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  white-space: nowrap !important;
}

.rs-badge--cat {
  background: rgba(255,255,255,0.90) !important;
  color: var(--rs-terra) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.rs-badge--cuisine {
  background: rgba(196,146,42,0.88) !important;
  color: #fff !important;
}

/* ── Chip de tiempo en esquina inferior izquierda ───────────────────────── */
.rs-time-chip {
  position: absolute !important;
  bottom: 18px !important;
  left: 18px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 14px !important;
  background: rgba(42,33,24,0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 20px !important;
  color: #fff !important;
  font-family: var(--rs-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TARJETA DE TEXTO  (45%)
   ═══════════════════════════════════════════════════════════════════════════ */
.rs-card {
  width: 45% !important;
  padding: 44px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: var(--rs-cream) !important;
  position: relative !important;
}

/* Línea decorativa lateral */
.rs-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 10% !important;
  height: 80% !important;
  width: 1px !important;
  background: linear-gradient(to bottom, transparent, var(--rs-border) 30%, var(--rs-border) 70%, transparent) !important;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.rs-card-header {
  margin-bottom: 0 !important;
}

/* ── Dificultad ──────────────────────────────────────────────────────────── */
.rs-difficulty {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 10px !important;
}

.rs-difficulty__dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--rs-border) !important;
  display: inline-block !important;
  transition: background 0.2s !important;
}

.rs-difficulty__dot--on {
  background: var(--rs-gold) !important;
}

.rs-difficulty__label {
  font-family: var(--rs-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--rs-slate-soft) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-left: 4px !important;
}

/* ── Título ──────────────────────────────────────────────────────────────── */
.rs-title {
  font-family: var(--rs-font-title) !important;
  font-size: clamp(24px, 2.4vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin: 0 0 8px !important;
  color: var(--rs-slate) !important;
  letter-spacing: -0.01em !important;
}

.rs-title .rs-title__link {
  text-decoration: none !important;
  color: inherit !important;
}
.rs-title .rs-title__link:hover {
  color: inherit !important;
  text-decoration: none !important;
}

/* ── Autor — oculto visualmente pero presente en el DOM para Schema.org ──── */
.rs-author {
  display: none !important;
}

/* ── Separador decorativo ────────────────────────────────────────────────── */
.rs-divider {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 16px 0 !important;
}

.rs-divider span:not(.rs-divider__icon) {
  flex: 1 !important;
  height: 1px !important;
  background: var(--rs-border) !important;
}

.rs-divider__icon {
  font-size: 10px !important;
  color: var(--rs-gold) !important;
  line-height: 1 !important;
}

/* ── Extracto ────────────────────────────────────────────────────────────── */
.rs-excerpt {
  font-family: var(--rs-font-body) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--rs-slate-mid) !important;
  margin: 0 0 20px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.rs-excerpt .rs-excerpt__text {
  margin: 0 !important;
}

/* ── Stats de receta ─────────────────────────────────────────────────────── */
.rs-stats {
  display: flex !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
}

.rs-stat {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  background: var(--rs-terra-light) !important;
  border-radius: var(--rs-radius-sm) !important;
  font-family: var(--rs-font-body) !important;
  font-size: 12px !important;
}

.rs-stat__icon {
  font-size: 13px !important;
  line-height: 1 !important;
}

.rs-stat__label {
  color: var(--rs-slate-soft) !important;
  font-weight: 400 !important;
}

.rs-stat__value {
  color: var(--rs-slate) !important;
  font-weight: 700 !important;
}

/* ── Footer / CTA ────────────────────────────────────────────────────────── */
.rs-card-footer {
  margin-top: auto !important;
}

.rs-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 26px !important;
  background: var(--rs-terra) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: var(--rs-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--rs-radius-sm) !important;
  transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease !important;
  box-shadow: 0 4px 14px rgba(181,69,27,0.30) !important;
}

.rs-btn:hover {
  background: var(--rs-terra-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(181,69,27,0.40) !important;
  color: #fff !important;
}

.rs-btn:active {
  transform: translateY(0) !important;
}

.rs-btn__icon {
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.rs-btn:hover .rs-btn__icon {
  transform: translateX(3px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTROLES DE NAVEGACIÓN
   ═══════════════════════════════════════════════════════════════════════════ */
.rs-nav-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

.rs-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--rs-border) !important;
  background: var(--rs-cream) !important;
  color: var(--rs-slate-mid) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  padding: 0 !important;
}

.rs-arrow:hover {
  border-color: var(--rs-terra) !important;
  color: var(--rs-terra) !important;
  background: var(--rs-terra-light) !important;
  box-shadow: 0 4px 12px rgba(181,69,27,0.15) !important;
}

.rs-arrow:focus-visible {
  outline: 2px solid var(--rs-terra) !important;
  outline-offset: 3px !important;
}

/* ── Dots ────────────────────────────────────────────────────────────────── */
.rs-dots {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.rs-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--rs-border) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
}

.rs-dot.active {
  background: var(--rs-terra) !important;
  width: 24px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(181,69,27,0.35) !important;
}

.rs-dot:hover:not(.active) {
  background: var(--rs-slate-soft) !important;
}

.rs-dot:focus-visible {
  outline: 2px solid var(--rs-terra) !important;
  outline-offset: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 900px) {
  .rs-title {
    font-size: 26px !important;
  }

  .rs-card {
    padding: 32px 28px !important;
  }
}

/* Mobile */
@media (max-width: 680px) {
  .rs-content-wrapper {
    flex-direction: column !important;
    min-height: auto !important;
  }

  .rs-media {
    width: 100% !important;
    /* Reservar espacio con aspect-ratio para evitar CLS en móvil */
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    position: relative !important;
  }

  .rs-media .rs-media__link {
    position: static !important;
    display: block !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }

  .rs-card {
    width: 100% !important;
    padding: 28px 22px !important;
    border-left: none !important;
  }

  .rs-card::before {
    top: 0 !important;
    left: 10% !important;
    width: 80% !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, var(--rs-border) 30%, var(--rs-border) 70%, transparent) !important;
  }

  .rs-title {
    font-size: 22px !important;
  }

  .rs-excerpt {
    -webkit-line-clamp: 3 !important;
    font-size: 14px !important;
  }

  .rs-stats {
    gap: 6px !important;
  }

  .rs-wrapper {
    padding: 16px 0 40px !important;
  }
}

/* Reducción de movimiento — respeta preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .rs-track,
  .rs-media .rs-media__img,
  .rs-btn,
  .rs-dot {
    transition: none !important;
  }
}