@import "fonts.css";
:root{
    --rosa: #00AE9E;
    --amarillo: #F58020;
    --texto: #2a2a2a;
    --bg: #fafafa;
    --card: #ffffff;
    --sombra: 0 6px 14px rgba(0,0,0,.08);
    --radio: 14px;
    --rail-x: 28px;
    --pl-item: 88px;
    --gap-h: 48px;
  }



  .container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  h1{ font-size: 1.6rem; margin: 0 0 8px; }
  .sub{ margin: 0 0 24px; opacity:.8; }


  .timeline{
    position: relative;
    display: grid;
    gap: 24px;
    padding-left: var(--pl-item);
  }
  .timeline::before{
    content:"";
    position: absolute;
    left: var(--rail-x);
    top: 0; bottom: 0;
    width: 4px;
    border-radius: 2px;
    background: var(--amarillo);
    z-index: 0;
  }

  .item{
    position: relative;
    z-index: 1;
    padding: 16px 0;
  }
  .bullet{
    position: absolute;
    left:-57px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px; height: 20px;
    background: #fff;
    border: 6px solid var(--rosa);
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    z-index: 2;
  }
  .year-card{
    display: flex;
    flex-direction: column;
  }

  .year{
    font-weight: 700;
    color: var(--rosa);
    margin: 0 0 10px 0;
  }
  .card{
    background: var(--card);
    border-left: 4px solid var(--rosa);
    border-radius: var(--radio);
    padding: 12px 14px;
    box-shadow: var(--sombra);
    line-height: 1.45;
  }

  .image{ display:none; }


  @media (min-width: 1150px){
    .timeline{
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--gap-h);
      padding: 0;
      overflow: visible;
      padding-top: 0px;
    }
    .timeline::before{
      content: "";
      position: absolute;
      left: 0; right: 0;
      top: 50%;
      height: 4px; width: auto;
      transform: translateY(-50%);
      background: var(--amarillo);
      z-index: 0;
      border-radius: 2px;
    }

    .item{
      display: grid;
      grid-template-rows: 1fr 24px 1fr;
      align-items: center;
      justify-items: center;
      padding: 0;
      min-width: 0;
      flex: 1 1 0;
      position: relative;
      text-align: center;
    }
    .bullet{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 22px; height: 22px;
      border: 6px solid var(--rosa);
      background: #fff;
      border-radius: 50%;
      z-index: 2;
    }

    .image{
      display: block;
      width: 120px;
      max-width: 120px;
      height: 130px;
      background: #eee;
      border-radius: var(--radio);
      box-shadow: var(--sombra);
      object-fit: cover;
    }
    .card{
      border-left: 0;
      border-top: 4px solid var(--rosa);
      max-width: 280px;
    }
    .year{ 
      margin: 0 0 8px 0; 
    }

 
    .item:nth-child(odd) .image{ grid-row:1; }
  .item:nth-child(odd) .info{ grid-row:3; }


  .item:nth-child(even) .info{ 
    grid-row:1; 
  }
  .item:nth-child(even) .image{ 
    grid-row:3; 
  }
  }