/* === Moonvival Lunar Timeline root (scoped variables & container) === */
.mv-lt{
  --bg:#0b1020;
  --star:#cfe3ff;
  --line:#2b3350;
  --line-active:#7aa2ff;
  --accent:#9ad1ff;
  --text:#e6f0ff;
  --muted:#a8b3c7;
  --crater:#24304a;
  position:relative;
  padding:24px;
  border-radius:16px;
  background: radial-gradient(800px 400px at 70% -10%, #112244 0%, #0b1020 60%) no-repeat, rgba(8,12,28,.65);
  border:1px solid #1a2338;
  box-shadow: 0 6px 30px rgba(0,0,0,.3);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  isolation:isolate;
}

.mv-lt .mv-lt-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px 2px var(--accent)}
.mv-lt .mv-lt-title{margin:0; font-weight:700; letter-spacing:.4px; font-size:clamp(16px, 2vw, 20px)}
.mv-lt .mv-lt-sub{margin:0; color:var(--muted); font-size:12px}


.mv-lt .mv-lt-timeline{position:relative; padding:48px 10px 0}


/* Track */
.mv-lt .mv-lt-track{position:relative; height:6px; margin:46px 24px 24px}
.mv-lt .mv-lt-track::before{content:""; position:absolute; inset:0; border-radius:999px; background:linear-gradient(90deg, var(--line) 0 100%); box-shadow: inset 0 0 8px rgba(0,0,0,.4)}
.mv-lt .mv-lt-energized{position:absolute; inset:0; width:0; background:linear-gradient(90deg, var(--line-active), transparent 80%); border-radius:999px; transition:width .7s cubic-bezier(.22,.9,.24,1); filter: drop-shadow(0 0 6px var(--line-active))}


/* Moon */
.mv-lt .mv-lt-moon{position:absolute; top:22px; left:24px; width:44px; height:44px; border-radius:50%; background: radial-gradient(60% 60% at 35% 30%, #dfe8f8 0%, #c6d3eb 60%, #a8b7d6 100%); box-shadow: 0 6px 18px rgba(122,162,255,.35), 0 0 0 2px rgba(122,162,255,.25); transition: transform .7s cubic-bezier(.22,.9,.24,1), left .7s cubic-bezier(.22,.9,.24,1)}
.mv-lt .mv-lt-moon::before, .mv-lt .mv-lt-moon::after{content:""; position:absolute; border-radius:50%; background:var(--crater); opacity:.35; filter: blur(.2px)}
.mv-lt .mv-lt-moon::before{width:10px; height:10px; left:9px; top:8px; box-shadow: 15px 6px 0 2px rgba(36,48,74,.25), 7px 20px 0 1px rgba(36,48,74,.2)}
.mv-lt .mv-lt-moon::after{width:6px; height:6px; right:10px; top:14px; box-shadow: -4px 10px 0 1.5px rgba(36,48,74,.2)}


/* Markers */
.mv-lt .mv-lt-markers{display:grid; grid-template-columns: repeat(4, 1fr); gap:0}
.mv-lt .mv-lt-marker{position:relative; display:grid; place-items:center; gap:10px; cursor:pointer; user-select:none}
.mv-lt .mv-lt-marker button{position:relative; width:22px; height:22px; border-radius:50%; border:2px solid var(--accent); background:#0e1631; box-shadow: 0 0 12px rgba(154,209,255,.45); transition: transform .25s ease}
.mv-lt .mv-lt-marker button::after{content:""; position:absolute; inset:5px; border-radius:50%; background:var(--accent); opacity:.85}
.mv-lt .mv-lt-marker:focus-visible button, .mv-lt .mv-lt-marker button:focus{outline:2px solid var(--line-active); outline-offset:4px}
.mv-lt .mv-lt-marker.mv-lt-active button{ transform: scale(1.15)}
.mv-lt .mv-lt-label{margin-top:10px; font-size:12px; color:var(--muted); letter-spacing:.3px; text-transform:uppercase}


/* Cards */
.mv-lt .mv-lt-cards{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; padding:10px 14px 18px}
.mv-lt .mv-lt-card{background: rgba(9,14,30,.7); border:1px solid #1a2338; border-radius:12px; padding:12px; min-height:88px; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition:border-color .25s ease, transform .25s ease}
.mv-lt .mv-lt-card.mv-lt-active{border-color: var(--line-active); transform: translateY(-2px)}
.mv-lt .mv-lt-card h3{margin:0 0 6px; font-size:14px; letter-spacing:.3px}
.mv-lt .mv-lt-card p{margin:0; font-size:13px; color:var(--muted); line-height:1.35}


/* Responsiveness */
@media (max-width: 760px){
.mv-lt .mv-lt-moon{width:38px; height:38px; top:24px}
.mv-lt .mv-lt-cards{grid-template-columns: 1fr}
.mv-lt .mv-lt-markers{grid-template-columns: repeat(4, minmax(40px,1fr))}
.mv-lt .mv-lt-label{display:none}
.mv-lt .mv-lt-timeline{padding-top:64px}
}
/* El timeline ocupa todo el ancho del container */
.mv-lt{ width:100%; margin-inline:auto; }
.mv-lt .mv-lt-track{ margin:46px clamp(12px,2vw,24px) 24px; } /* margen fluido en los laterales */
.mv-lt .mv-lt-card h3{
  color:#ffffff;
  opacity:1;
}

/* Fecha bajo cada etapa */
.mv-lt .mv-lt-date{
  margin-top:2px;
  font-size:11px;
  color:rgba(230,240,255,.75);
  letter-spacing:.2px;
}
/* Imagen dentro de las tarjetas */
.mv-lt .mv-lt-card-img{
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;            /* mantiene proporción */
  object-fit: cover;               /* recorte elegante si la foto es más alta */
  margin-top:10px;
  border-radius:12px;
  border:1px solid rgba(154,209,255,.25);
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.15);
  display:block;
}
.mv-lt .mv-lt-card:hover .mv-lt-card-img{
  transform: translateY(-1px);
  transition: transform .2s ease;
}
@media (max-width:760px){
  .mv-lt .mv-lt-card-img{ aspect-ratio: 4 / 3; } /* un poco más alto en móvil */
}