/* =========================
   Trayectoria (mínimo CSS)
   ========================= */

   .trayectoria-page{
    background: var(--color-neutral-white);
  }
  
  /* Hero */
  .tray-hero{
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--color-secondary-500) 100%);
  }
  
  .tray-chip{
    display:inline-block;
    padding: .35rem .65rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    background: rgba(255,255,255,.12);
    color: var(--color-neutral-white);
    border: 1px solid rgba(255,255,255,.18);
    margin-bottom: .75rem;
  }
  
  .tray-hero-card{
    border-radius: 16px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(6px);
  }
  
  .tray-dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--bs-secondary);
    box-shadow: 0 0 0 6px rgba(165,194,48,.20);
  }
  
  /* Cards */
  .tray-card{
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
  }
  
  .tray-kpi-value{
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--bs-primary);
    line-height: 1.1;
  }
  
  .tray-pill{
    display:inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    background: rgba(165,194,48,.15);
    color: var(--color-secondary-500);
  }
  
  /* Timeline */
  .tray-timeline{
    position: relative;
    padding-left: 16px;
    border-left: 2px solid rgba(51,64,158,.18);
  }
  
  .tray-timeline-item{
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    padding: 14px 0;
  }
  
  .tray-timeline-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: 34px;
    border-radius: 10px;
    font-weight: 700;
    color: var(--color-neutral-white);
    background: var(--bs-primary);
  }
  
  .tray-timeline-content{
    background: var(--color-neutral-white);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.05);
  }
  
  /* Carousel */
  .tray-carousel img{
    border-radius: 16px;
    max-height: 420px;
    object-fit: cover;
  }
  
  /* CTA */
  .tray-cta{
    border-radius: 18px;
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--bs-primary) 55%, var(--bs-secondary) 140%);
  }