/* ═══════════════════════════════════════════════════════════
   PORTADA INFORMES — Columna DESTACADOS
   Tarjetas, flechas de navegación y track de cuadrados.
═══════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────*/
.dest-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;          /* llena la columna menos el título */
  min-height: 0;
}

/* ── Flechas de navegación ───────────────────────────────*/
.dest-arrows-row {
  display: flex;
  justify-content: center;
  padding: 3px 0;
  flex-shrink: 0;
}

@keyframes dest-arrow-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.dest-arrow {
  width: 55px !important;
  height: 55px !important;
  border: 1px solid #38d7d7 !important;
  border-radius: 7px !important;
  background: #000 !important;
  color: #00d3f3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  animation: dest-arrow-pulse 2s ease-in-out infinite !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

.dest-arrow:hover {
  animation-play-state: paused !important;
  opacity: 1 !important;
  background: #0a5f5f !important;
  border-color: #00d3f3 !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(0, 211, 243, 0.35) !important;
}

.dest-arrow:disabled {
  opacity: 0.2 !important;
  cursor: default !important;
  animation-play-state: paused !important;
}

/* ── Track decorativo con cuadrados cyan ─────────────────*/
#inf-portada .dest-track {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  padding: 5px 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

#inf-portada .dest-sq {
  width: 7px !important;
  height: 7px !important;
  background: rgba(0, 211, 243, 0.30) !important;
  border: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  box-shadow: 0 1.6px 1.6px rgba(0,0,0,0.25) !important;
  transition: background 0.2s ease !important;
}

#inf-portada .dest-sq:hover {
  background: rgba(0, 211, 243, 0.70) !important;
}

#inf-portada .dest-sq.is-active {
  background: #00d3f3 !important;
  box-shadow:
    0 0 6px  rgba(0, 211, 243, 0.90),
    0 0 14px rgba(0, 211, 243, 0.45) !important;
}

#inf-portada .dest-track__line {
  flex: 1 !important;
  height: 0.5px !important;
  background: #00d3f3 !important;
  display: block !important;
}

/* ── Lista de tarjetas ───────────────────────────────────*/
.dest-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  padding-bottom: 6px;
}

/* ── Tarjeta ─────────────────────────────────────────────*/
.dest-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.38);
  flex: 0 0 calc((100% - 12px) / 3);   /* exactamente 1/3 siempre */
  min-height: 0;
  transition:
    border-color 0.3s ease,
    box-shadow   0.3s ease;
}

.dest-card:hover {
  border-color: #00ffff;
  box-shadow:
    0 0 10px rgba(0, 255, 255, 0.22),
    0 0 24px rgba(0, 255, 255, 0.10);
}

/* Imagen miniatura */
#inf-portada .dest-card__thumb {
  width: 100% !important;
  height: 150px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border-bottom: 3px solid #191919 !important;
}

.dest-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.dest-card:hover .dest-card__photo {
  transform: scale(1.05);
}

.dest-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a0030 0%, #0a0015 100%);
}

/* Info texto */
#inf-portada .dest-card__info {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 4px 8px 4px !important;
  flex: 1 !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

#inf-portada .dest-card__cat {
  font-family: 'Consolas', 'Courier New', monospace !important;
  font-size: 9px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  display: block !important;
  margin-bottom: 0 !important;  /* antes 2px */
}

#inf-portada .dest-card__title {
  font-family: 'Roboto Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
  margin: 0 0 1px !important;   /* antes 3px */
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#inf-portada .dest-card__sub {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#inf-portada .dest-card__excerpt {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Footer: fecha + separador */
#inf-portada .dest-card__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 2px !important;   /* antes 4px */
  border-top: 1px solid #222 !important;
}

.dest-card__date {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #00d3f3;
}

.dest-card__sep {
  width: 32px;
  height: 1px;
  background: rgba(255, 255, 255, 0.30);
  flex-shrink: 0;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.dest-card:hover .dest-card__sep {
  width: 80px;
  background-color: #00ffff;
}

/* Sin destacados */
.dest-empty {
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  color: #6a7282;
}

/* ── Responsive ─────────────────────────────────────────*/

/* Laptop (≤1100px) */
@media (max-width: 1100px) {
  #inf-portada .dest-card__thumb {
    height: 120px !important;
  }
}

/* Móvil (≤900px) */
@media (max-width: 900px) {
  #inf-portada .dest-card__thumb {
    height: 110px !important;
  }
}