/* V15.6 — Timeline móvil compacta
   Objetivo: reducir ~25–30% la altura de las tarjetas, mostrar parte del
   siguiente recuerdo y mantener el layout de escritorio intacto. */

@media (max-width:720px){
  .memory-timeline .timeline-track{
    height:clamp(350px,46svh,440px)!important;
    padding:10px 6vw 14px!important;
    gap:12px!important;
    scroll-padding-inline:6vw!important;
    align-items:stretch!important;
  }

  /* En móvil la línea física deja de cruzar la tarjeta: el progreso inferior
     comunica la secuencia sin poner un punto encima del texto. */
  .memory-timeline .timeline-track:before,
  .memory-timeline .timeline-dot{
    display:none!important;
  }

  /* Tarjeta compacta: deja visible una porción del siguiente recuerdo. */
  .memory-timeline .timeline-card{
    flex:0 0 88vw!important;
    width:88vw!important;
    height:100%!important;
    min-height:0!important;
    padding:14px 16px 15px!important;
    border-radius:13px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  .memory-timeline .timeline-year{
    top:13px!important;
    right:15px!important;
    font-size:.58rem!important;
  }

  .memory-timeline .timeline-memory{
    flex:0 0 112px!important;
    width:100%!important;
    height:112px!important;
    margin:0 0 10px!important;
    border-radius:9px!important;
  }

  .memory-timeline .timeline-memory span{
    font-size:.55rem!important;
    letter-spacing:.14em!important;
    padding:0 8px 8px!important;
  }

  .memory-timeline .timeline-age{
    margin:0 0 3px!important;
    font-size:.61rem!important;
    letter-spacing:.15em!important;
  }

  .memory-timeline .timeline-card h3{
    margin:0 0 5px!important;
    font-size:1.08rem!important;
    line-height:1.08!important;
  }

  .memory-timeline .timeline-card>p:not(.timeline-age){
    font-size:.91rem!important;
    line-height:1.28!important;
    max-width:100%!important;
  }

  .memory-timeline .timeline-photo{
    margin-top:auto!important;
    padding:7px 0 3px!important;
    min-height:30px!important;
    font-size:.62rem!important;
    letter-spacing:.12em!important;
  }

  .memory-timeline .timeline-progress{
    width:calc(100% - 28px)!important;
    margin:10px 14px 0!important;
  }

  .memory-timeline .timeline-hint{
    margin:14px 20px 0!important;
    font-size:.62rem!important;
    line-height:1.5!important;
    letter-spacing:.12em!important;
  }
}

@media (max-width:380px){
  .memory-timeline .timeline-track{
    height:clamp(325px,44svh,400px)!important;
    padding-left:5vw!important;
    padding-right:5vw!important;
    gap:10px!important;
  }

  .memory-timeline .timeline-card{
    flex-basis:90vw!important;
    width:90vw!important;
    padding:12px 14px 13px!important;
  }

  .memory-timeline .timeline-memory{
    flex-basis:100px!important;
    height:100px!important;
    margin-bottom:8px!important;
  }

  .memory-timeline .timeline-card h3{font-size:1rem!important}
  .memory-timeline .timeline-card>p:not(.timeline-age){font-size:.86rem!important}
  .memory-timeline .timeline-photo{font-size:.58rem!important}
  .memory-timeline .timeline-progress{width:calc(100% - 24px)!important;margin-left:12px!important;margin-right:12px!important}
}

@media (prefers-reduced-motion:reduce){
  .memory-timeline .timeline-card{scroll-snap-align:center!important;transform:none!important}
}