@charset "UTF-8";
/**
 * Línea de Tiempo Mungos — tira horizontal de hitos sobre una línea ondulada
 * amarilla, robusta para CUALQUIER número de hitos (scroll + barra navegadora).
 * Fondo transparente: hereda el de la página. La línea la dibuja el JS.
 */
.mu-tl {
  --mu-tl-card: #fff;
  --mu-tl-border: #753c03;
  --mu-tl-ink: #1A1A1A;
  --mu-tl-btn: #c2e535;
  --mu-tl-btn-ink: #00330b;
  --mu-tl-line: #ffc519;
  --mu-tl-dots: #753c03;
  --mu-tl-accent: #ffc02e;
  position: relative;
  background: transparent;              /* SIN fondo propio: flota sobre la página */
  padding: clamp(20px, 3vw, 40px) 0 8px;
  max-width: 100%;
}
.mu-tl * { box-sizing: border-box; }
.mu-tl img { max-width: 100%; height: auto; }

/* ── Viewport con scroll horizontal (N hitos = tira más ancha) ── */
.mu-tl__viewport {
  position: relative;
  display: flex;
  justify-content: safe center;        /* centra la tira cuando cabe; si sobra, se desplaza SIN cortar */
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 2;
  padding: 8px 8px 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  scroll-behavior: smooth;
}
.mu-tl__viewport::-webkit-scrollbar { display: none; }
.mu-tl__viewport.is-grabbing { cursor: grabbing; scroll-behavior: auto; }

.mu-tl__track {
  position: relative;
  display: inline-flex;
  align-items: flex-start;   /* el escalonado lo da margin-top (control "Desfase vertical") */
  gap: clamp(20px, 2.6vw, 40px);
  min-width: max-content;
  flex: 0 0 auto;
  padding: 40px 16px 30px;
}

/* La línea ondulada la dibuja el JS (path). Va DENTRO del track y scrollea con él. */
.mu-tl__line {
  position: absolute;
  left: 0; top: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.mu-tl__line path {
  fill: none;
  stroke: var(--mu-tl-line);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Card ── */
.mu-tl__card {
  --mu-tl-tilt: 0deg;              /* lo fija el control "Inclinación" por hito */
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: clamp(216px, 19vw, 250px);
  background: var(--mu-tl-card);
  border: 2px solid var(--mu-tl-border);
  border-radius: 18px;
  padding: 12px 13px 18px;
  box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.16);
  transform: rotate(var(--mu-tl-tilt)) scale(.9);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2,.9,.25,1.1), opacity .45s ease, box-shadow .25s ease;
}
.mu-tl__card.is-shown { opacity: 1; transform: rotate(var(--mu-tl-tilt)) scale(1); }
.mu-tl__card:hover { transform: rotate(var(--mu-tl-tilt)) scale(1.03); z-index: 4; }
.mu-tl__card.is-focus { transform: rotate(var(--mu-tl-tilt)) scale(1.06); z-index: 5; box-shadow: 8px 10px 0 rgba(0,0,0,.22); }
/* Nota: NO atenuamos los demás cards al enfocar (se veía «translúcido raro»);
   el card enfocado solo crece un poco. */

/* Pills tag (izq) + año (der) */
.mu-tl__tag, .mu-tl__year {
  position: absolute;
  top: -14px;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 6px 15px;
  border-radius: 999px;
  border: 2px solid var(--mu-tl-border);
  white-space: nowrap;
  z-index: 3;
}
.mu-tl__tag  { left: -10px; transform: rotate(-8deg); }
.mu-tl__year { right: -8px; transform: rotate(7deg); }

/* Etiqueta flotante (ej. "NUEVAS MÁQUINAS"): colgada del BORDE INFERIOR del card,
   no encima del texto. Cada card puede llevar una. */
.mu-tl__ftag {
  position: absolute;
  left: 12%;
  bottom: -13px;
  transform: rotate(var(--mu-r, -6deg));
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  border: 2px solid var(--mu-tl-border);
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  z-index: 4;
}

.mu-tl__photo {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  margin-bottom: 10px;
  background: #e7e0d3;
}
.mu-tl__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-tl__card-title { font-weight: 800; font-size: 16px; line-height: 1.12; margin: 2px 0 5px; color: var(--mu-tl-ink); }
.mu-tl__card-text  { font-size: 12.5px; line-height: 1.4; margin: 0 0 12px; color: var(--mu-tl-ink); opacity: .92; }
.mu-tl__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px;
  background: var(--mu-tl-btn); color: var(--mu-tl-btn-ink);
  border: 2px solid var(--mu-tl-border); border-radius: 999px;
  padding: 5px 16px; font-weight: 800; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: transform .15s ease;
}
.mu-tl__btn:hover { transform: translateY(-2px); color: var(--mu-tl-btn-ink); }
.mu-tl__btn:focus-visible { outline: 3px solid #2563EB; outline-offset: 2px; }

/* ── Barra navegadora (2012 ——●●●—— 2026) ── */
.mu-tl__bar { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(10px, 2vw, 22px); z-index: 2; }
.mu-tl__bar-year { font-weight: 800; font-size: 13px; color: var(--mu-tl-dots); }
.mu-tl__scale { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.mu-tl__cap { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; background: var(--mu-tl-accent); }
.mu-tl__tick { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--mu-tl-dots); opacity: .45; }
.mu-tl__dot { flex: 0 0 auto; width: 24px; height: 40px; display: grid; place-items: center; background: none; border: none; padding: 0; cursor: pointer; }
.mu-tl__dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--mu-tl-dots); opacity: .85; transition: transform .2s ease, opacity .2s ease, background-color .2s ease; }
.mu-tl__dot:hover::before { transform: scale(1.3); }
.mu-tl__dot.is-active::before { transform: scale(1.8); opacity: 1; background: var(--mu-tl-accent); }
.mu-tl__dot:focus-visible { outline: 3px solid #2563EB; outline-offset: -6px; border-radius: 8px; }

/* Flechas ‹ › = componente de slider unificado (lima redondo, borde oscuro, sombra). */
.mu-tl__arrow {
  position: absolute; top: 46%; transform: translateY(-50%);
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; z-index: 6; cursor: pointer;
  border-radius: 50%; border: 2px solid var(--mu-tl-btn-ink);
  background: var(--mu-tl-btn); color: var(--mu-tl-btn-ink);
  box-shadow: 2px 2px 0 var(--mu-tl-btn-ink);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.mu-tl__arrow svg { width: 20px; height: 20px; display: block; }
.mu-tl__arrow--prev { left: 2px; }
.mu-tl__arrow--next { right: 2px; }
/* Blindaje anti-tema: marca en todos los estados (nada de fucsia). */
.mu-tl__arrow:hover,
.mu-tl__arrow:focus,
.mu-tl__arrow:focus-visible,
.mu-tl__arrow:active {
  background: var(--mu-tl-btn) !important;
  color: var(--mu-tl-btn-ink) !important;
  border-color: var(--mu-tl-btn-ink) !important;
}
.mu-tl__arrow:hover { transform: translateY(-50%) translateY(-1px); box-shadow: 3px 4px 0 var(--mu-tl-btn-ink); }
.mu-tl__arrow:active { box-shadow: 1px 1px 0 var(--mu-tl-btn-ink); transform: translateY(-50%) translateY(2px); }
.mu-tl__arrow::before, .mu-tl__arrow::after { content: none !important; }

/* ── Móvil: pila vertical, sin inclinación, sin línea ── */
@media (max-width: 700px) {
  .mu-tl__viewport { overflow: visible; cursor: auto; padding: 12px 4px; }
  .mu-tl__track { display: flex; flex-direction: column; align-items: stretch; gap: 30px; min-width: 0; padding: 8px 6px; width: 100%; }
  .mu-tl__line, .mu-tl__arrow { display: none; }
  .mu-tl__card { width: 100%; --mu-tl-tilt: 0deg !important; margin-top: 0 !important; transform: none; opacity: 1; }
  .mu-tl__card.is-shown, .mu-tl__card:hover, .mu-tl__card.is-focus { transform: none; }
  .mu-tl.has-focus .mu-tl__card:not(.is-focus) { opacity: 1; }
  .mu-tl__tag  { left: 10px; top: -12px; transform: rotate(-4deg); }
  .mu-tl__year { right: 10px; top: -12px; transform: rotate(4deg); }
  .mu-tl__ftag { left: 12px; bottom: -12px; }
  .mu-tl__dot { min-width: 34px; }
}
@media (max-width: 560px) {
  .mu-tl__tick, .mu-tl__cap { display: none; }
  .mu-tl__scale { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mu-tl__card { transition: none; }
  .mu-tl__btn { transition: none; }
}