/*
 * public/assets/css/promotion.css — Lumbre Promotion Engine (MVP, docs/PROMOTION_ENGINE.md).
 *
 * Capa DELGADA sobre app.css: reutiliza sus tokens (--surface/--ink/--muted/--accent/--accent-soft/--line/
 * --radius/--shadow/--space) para que el banner se sienta PARTE del producto (§31), no un anuncio pegado.
 * Reglas del encargo: una idea por banner, mucho aire, CTA pequeno, una sola imagen fuerte. Se reserva altura
 * minima para evitar CLS (§24) y TODA microanimacion queda DESACTIVADA bajo prefers-reduced-motion (§6).
 */

.lre-promo {
  position: relative;
  display: block;
  margin: var(--space-5) 0;
  border-radius: var(--radius-lg, 16px);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  animation: lre-in .5s ease forwards;
}
@keyframes lre-in { to { opacity: 1; transform: none; } }

/* El dismiss es discreto y accesible; no interrumpe la lectura. */
.lre-promo__dismiss {
  position: absolute; top: 6px; right: 8px;
  width: 24px; height: 24px; line-height: 1;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--muted);
  font-size: 18px; cursor: pointer;
  opacity: .5; transition: opacity .15s ease;
}
.lre-promo__dismiss:hover { opacity: 1; }

.lre-promo a { text-decoration: none; color: inherit; }
.lre-promo__label, .lre-h__label, .lre-r__label, .lre-i__label, .lre-s__label, .lre-q__label {
  display: block;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent);
}
.lre-promo__q, .lre-h__q, .lre-r__q, .lre-i__q, .lre-q__q { display: block; color: var(--muted); font-style: italic; }
.lre-promo__title, .lre-h__title, .lre-r__title, .lre-i__title, .lre-s__title {
  display: block; font-weight: 700; color: var(--ink); line-height: 1.25;
}
.lre-promo__sub, .lre-h__sub, .lre-r__sub, .lre-i__sub, .lre-s__sub, .lre-q__sub { display: block; color: var(--muted); font-size: .92rem; }
.lre-h__badge, .lre-r__badge, .lre-i__badge, .lre-s__badge {
  display: inline-block; margin-top: 6px;
  font-size: .78rem; color: var(--muted);
}
.lre-h__cta, .lre-r__cta, .lre-i__cta, .lre-s__cta, .lre-q__cta {
  font-weight: 600; color: var(--accent); white-space: nowrap;
}

/* ── HORIZONTAL (≈728×90): medio a la izquierda, texto, CTA a la derecha. ── */
.lre-promo--horizontal .lre-h {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  min-height: 90px;
}
.lre-h__media { flex: 0 0 auto; }
.lre-h__media img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-md, 12px); }
.lre-h__body { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.lre-h__title { font-size: 1.12rem; }
.lre-h__cta { flex: 0 0 auto; }

/* ── RECTANGLE (≈300×250): tarjeta vertical para laterales. ── */
.lre-promo--rectangle { max-width: 300px; }
.lre-promo--rectangle .lre-r {
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-3);
  padding: var(--space-4); min-height: 250px;
}
.lre-r__media img { display: block; width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-md, 12px); }
.lre-r__body { display: grid; gap: 3px; align-content: start; }
.lre-r__title { font-size: 1.02rem; }
.lre-r__cta { align-self: end; }

/* ── INLINE: continuacion editorial "Siguiente paso", sin aspecto de banner (§32). ── */
.lre-promo--inline {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}
.lre-promo--inline .lre-i {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  min-height: 120px;
}
.lre-i__body { flex: 1 1 auto; display: grid; gap: 4px; min-width: 0; }
.lre-i__marker { display: none; }
.lre-i__title { font-size: 1.18rem; }
.lre-i__foot { display: flex; align-items: center; gap: var(--space-4); margin-top: 2px; }
.lre-i__media img { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-md, 12px); }

/* ── SIDEBAR (FASE2): tarjeta vertical compacta para columnas laterales estrechas. ── */
.lre-promo--sidebar .lre-s {
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-2);
  padding: var(--space-3); min-height: 150px;
}
.lre-s__media img { display: block; width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-md, 12px); }
.lre-s__body { display: grid; gap: 2px; align-content: start; }
.lre-s__title { font-size: 1rem; }
.lre-s__cta { justify-self: start; align-self: end; font-size: .9rem; }

/* ── QUIZ (FASE2): el "¿Sabías que…?" como gancho; la pregunta manda, no el titulo. ── */
.lre-promo--quiz { background: var(--accent-soft); }
.lre-promo--quiz .lre-q {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); min-height: 104px;
}
.lre-q__mark {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 1.15rem;
}
.lre-q__body { flex: 1 1 auto; display: grid; gap: 4px; min-width: 0; }
.lre-q__q { font-style: normal; font-weight: 700; font-size: 1.12rem; color: var(--ink); line-height: 1.3; }
.lre-q__cta { margin-top: 2px; }

/* ── BLOQUE HÍBRIDO (FASE3 f3a): slot publicitario lateral/informativo que muestra ANTES la publicidad
   interna de Lumbre (una campana real: curso/OA/colección con su portada, o una tarjeta propia de último
   recurso) y SOLO la sustituye por el anuncio de Google cuando este realmente se rellena. Así el bloque
   jamás se ve vacío. La casa (.lre-ad__house) va en flujo normal y define el alto; el andamiaje de AdSense
   (.lre-ad__ad) está ABSOLUTO detrás, invisible mientras no hay anuncio. ads.js marca data-ad-state="filled"
   en el aside cuando data-ad-status='filled' → se oculta la casa y aparece el anuncio rotulado (§17/§24). ── */
.lre-ad { position: relative; margin: var(--space-4) 0; }
.lre-ad__ad {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md, 12px);
}
.lre-ad__tag { display: none; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #666); }
.lre-ad .adsbygoogle { min-height: 96px; }
.lre-ad__house { position: relative; z-index: 2; background: var(--surface, #fff); }
/* La casa ya vive dentro del aside, que aporta el respiro vertical; anula el margin propio de .lre-promo
   para que el bloque no duplique aire (space-4 del aside + space-5 de la tarjeta) ni desalinee la caja. */
.lre-ad__house .lre-promo { margin: 0; }
/* Relleno Google: quitar la casa, dar al anuncio su caja delimitada y su rótulo de patrocinio.
   El anuncio pasa a in-flow (position:static) para que el aside recupere su altura real y no solape lo de abajo. */
.lre-ad[data-ad-state="filled"] .lre-ad__house { display: none; }
.lre-ad[data-ad-state="filled"] .lre-ad__ad { position: static; }
.lre-ad[data-ad-state="filled"] .lre-ad__ad { border: 1px dashed var(--line, #d0d0d0); background: var(--surface, #fafafa); }
.lre-ad[data-ad-state="filled"] .lre-ad__tag { display: block; }

/* ── CINTA de la casa (vitrina de home): CARRUEL horizontal con AUTOAVANCE. ~10 tarjetas compactas (25% mas
   pequenas que antes) que van deslizando solas; caben las que quepan segun el ancho y el resto pasa al
   avanzar. Escrol/swipe nativo en movil y pausa al pasar el cursor, enfocar o tocar (para no pelear con el
   usuario). El autoavance vive en public/assets/js/promotion/promo.js (CSP: sin inline) y se desactiva con
   prefers-reduced-motion (§6). Se oculta la barra de scroll para que se lea como vitrina, no como scroll. ── */
.lre-strip {
  display: flex; gap: var(--space-2); align-items: stretch;
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px;
}
.lre-strip::-webkit-scrollbar { display: none; }
.lre-strip > .lre-promo {
  display: block; margin: 0; flex: 0 0 auto;
  width: clamp(140px, 40vw, 180px); scroll-snap-align: start;
}
/* Tarjeta de la cinta: portada A SANGRE (sin margen flotante) recortada anclada a ABAJO. Las cubiertas de
   Lumbre son VERTICALES (3:4) y llevan la pastilla "OBJETO DE APRENDIZAJE" + el titulo en la mitad inferior,
   con adorno arriba: object-position 50% 100% conserva pastilla+titulo+pie y descarta el adorno superior
   (un recorte centrado a 16:9 TRUNCABA el titulo). Ratio 4:3 equilibrado imagen/texto y bloque de texto con
   su propio respiro. Scopeado a .lre-strip: no altera los laterales 'sidebar' de las fichas. */
.lre-strip .lre-s { gap: 0; padding: 0; min-height: 0; }
.lre-strip .lre-s__media { display: block; }
.lre-strip .lre-s__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 100%; border-radius: 0; }
.lre-strip .lre-s__body { display: grid; gap: 3px; align-content: start; padding: 8px 10px 2px; }
.lre-strip .lre-s__label { font-size: .55rem; }
.lre-strip .lre-s__title { font-size: .74rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lre-strip .lre-s__sub { font-size: .68rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lre-strip .lre-s__badge { font-size: .6rem; margin-top: 3px; }
.lre-strip .lre-s__cta { font-size: .72rem; padding: 4px 10px 10px; }

/* Tarjeta propia de Lumbre (sólo si el motor no aportó ninguna campaña para el slot). */
.lre-house {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--line, #e6e6e6); border-radius: var(--radius-md, 12px);
  background: var(--surface, #fafafa);
}
.lre-house__kicker { margin: 0; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #666); }
.lre-house__title { margin: 2px 0 0; font-weight: 600; color: var(--text, #222); flex: 1 1 200px; }
.lre-house__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lre-house__links a {
  display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .85rem;
  background: var(--brand, #2f6f4f); color: #fff; text-decoration: none;
}
.lre-house__links a:hover { filter: brightness(1.06); }

/* Responsive: el formato se adapta al ancho REAL del contenedor (§27), no solo a "movil". */
@media (max-width: 560px) {
  .lre-h__media, .lre-i__media { display: none; }
  .lre-h, .lre-i { flex-wrap: wrap; }
  .lre-h__cta { width: 100%; }
}
@container (min-width: 0px) { .lre-promo { container-type: inline-size; } }

/* Accesibilidad y rendimiento: con "reduce motion" el banner aparece QUIETO, sin fundido ni desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .lre-promo { animation: none; opacity: 1; transform: none; }
  .lre-promo__dismiss, .lre-promo a { transition: none; }
}