/**
 * Enterprise Moto — carousel.css
 * Estilos del bloque enterprise/post-stages.
 * Cubre layout carrusel y timeline manual.
 */

/* ─────────────────────────────────────────
   CONTENEDOR BASE
───────────────────────────────────────── */
.ent-stages {
  position: relative;
  overflow: hidden;
}

/* Cabecera con título + controles de nav */
.ent-stages__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}

.ent-stages__heading {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--black);
  margin: 0;
  flex: 1;
}

/* Botones prev/next */
.ent-stages__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ent-stages__nav-btn {
  width: 40px;
  height: 40px;
  background: var(--black);
  color: var(--white);
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .15s;
  flex-shrink: 0;
}
.ent-stages__nav-btn:hover { background: var(--gold); color: var(--black); }
.ent-stages__nav-btn:disabled { background: var(--surface); color: var(--mid); cursor: default; }
.ent-stages__nav-btn:active  { transform: scale(.93); }

.ent-stages__nav-count {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--mid);
  min-width: 40px;
  text-align: center;
}
.ent-stages__nav-current { color: var(--black); font-weight: inherit; }

/* Dots de posición */
.ent-stages__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}
.ent-stages__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, width .2s;
}
.ent-stages__dot.is-active {
  background: var(--black);
  width: 20px;
  border-radius: 3px;
}

/* ─────────────────────────────────────────
   CARRUSEL — TRACK
───────────────────────────────────────── */
.ent-stages--carousel .ent-stages__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Ocultar scrollbar (se usa con los botones) */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Padding lateral para que el primer/último card no queden cortados */
  padding-bottom: 8px;
}
.ent-stages--carousel .ent-stages__track::-webkit-scrollbar { display: none; }

/* Slide */
.ent-stages__slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Ancho de card según tamaño */
.ent-stages--carousel.ent-stages--large .ent-stages__slide { width: calc(50% - 8px); }
.ent-stages--carousel:not(.ent-stages--large) .ent-stages__slide { width: calc(33.333% - 12px); }

/* ─────────────────────────────────────────
   CARD DEL CARRUSEL
───────────────────────────────────────── */
.ent-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--border);
  overflow: hidden;
  height: 100%;
  transition: box-shadow .2s, transform .2s;
}
.ent-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.1);
  transform: translateY(-3px);
  text-decoration: none;
}
.ent-card:hover .ent-card__arrow { transform: translateX(4px); }
.ent-card:hover .ent-card__img img { transform: scale(1.04); }

/* Imagen */
.ent-card__img {
  position: relative;
  overflow: hidden;
  background: var(--dark);
}
.ent-card--normal .ent-card__img { height: 200px; }
.ent-card--large  .ent-card__img { height: 260px; }

.ent-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s var(--ease);
}
.ent-card__img-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2a3a5a, #080e1e);
  font-size: 44px;
}

.ent-card__num {
  position: absolute; top: 10px; left: 12px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .1em;
  color: rgba(255,255,255,.5); z-index: 1;
}
.ent-card__cat {
  position: absolute; bottom: 0; left: 0;
  background: rgba(14,14,14,.7); backdrop-filter: blur(4px);
  color: var(--white); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px;
}

/* Cuerpo */
.ent-card__body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.ent-card__date {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mid);
}
.ent-card__title {
  font-family: var(--font-display); font-size: 19px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--black); line-height: 1.1;
}
.ent-card--large .ent-card__title { font-size: 24px; }

.ent-card__excerpt {
  font-size: 13px; color: var(--mid); line-height: 1.55;
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ent-card--large .ent-card__excerpt { -webkit-line-clamp: 3; }

.ent-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid var(--border);
  margin-top: auto;
}
.ent-card__km {
  font-family: var(--font-display); font-size: 20px;
  letter-spacing: .04em; color: var(--black);
}
.ent-card__arrow {
  font-size: 14px; color: var(--mid);
  transition: transform .2s, color .15s;
}
.ent-card:hover .ent-card__arrow { color: var(--black); }

/* ─────────────────────────────────────────
   TIMELINE — TRACK
───────────────────────────────────────── */
.ent-stages--timeline .ent-stages__track {
  position: relative;
}
/* Línea vertical */
.ent-stages--timeline .ent-stages__track::before {
  content: '';
  position: absolute;
  left: 23px; top: 0; bottom: 0;
  width: 2px; background: var(--border);
  z-index: 0;
}

/* Ítem del timeline */
.ent-tl-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  margin-bottom: 4px;
}

/* Dot + conector — reutiliza los estilos de expedition.css */
.ent-tl-dot-col {
  display: flex; flex-direction: column; align-items: center; z-index: 1;
}
.ent-tl-dot {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; letter-spacing: .04em;
  background: var(--black); border: 2px solid var(--black); color: var(--white);
  position: relative; z-index: 1; flex-shrink: 0;
}
.ent-tl-connector {
  flex: 1; width: 2px; background: var(--black); min-height: 28px;
}

/* Card timeline */
.ent-tl-card {
  display: grid; grid-template-columns: 140px 1fr;
  border: 1px solid var(--border); background: var(--white);
  overflow: hidden; text-decoration: none; color: inherit;
  margin-bottom: 12px;
  transition: box-shadow .2s, transform .2s;
}
.ent-tl-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.09);
  transform: translateY(-2px);
  text-decoration: none;
}
.ent-tl-card:hover .ent-tl-arrow { color: var(--black); transform: translateX(3px); }
.ent-tl-card:hover .ent-tl-thumb img { transform: scale(1.06); }

.ent-tl-thumb {
  overflow: hidden; position: relative;
  background: var(--dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.ent-tl-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); display: block; }
.ent-tl-thumb-fallback {
  width: 100%; min-height: 100px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2a3a5a, #080e1e); font-size: 28px;
}

.ent-tl-body {
  padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 100px;
}
.ent-tl-date { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); margin-bottom: 5px; }
.ent-tl-title { font-family: var(--font-display); font-size: 17px; letter-spacing: .04em; text-transform: uppercase; color: var(--black); line-height: 1.1; margin-bottom: 5px; }
.ent-tl-excerpt { font-size: 12px; color: var(--mid); line-height: 1.5; font-weight: 300; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ent-tl-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--border); margin-top: auto; }
.ent-tl-km { font-family: var(--font-display); font-size: 17px; letter-spacing: .04em; color: var(--black); }
.ent-tl-arrow { font-size: 13px; color: var(--mid); transition: color .15s, transform .2s; }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 900px) {
  .ent-stages--carousel.ent-stages--large .ent-stages__slide  { width: calc(70% - 8px); }
  .ent-stages--carousel:not(.ent-stages--large) .ent-stages__slide { width: calc(50% - 8px); }
}

@media (max-width: 640px) {
  .ent-stages--carousel .ent-stages__slide { width: calc(85% - 8px); }
  .ent-stages--carousel.ent-stages--large .ent-stages__slide { width: calc(90% - 8px); }
  .ent-tl-item { grid-template-columns: 40px 1fr; gap: 14px; }
  .ent-tl-dot  { width: 40px; height: 40px; font-size: 11px; }
  .ent-tl-card { grid-template-columns: 90px 1fr; }
  .ent-stages__heading { font-size: 26px; }
}