/* Única composición para tabletas compactas (sin afectar móvil pequeño ni iPad). */
@media (min-width:400px) and (max-width:767px){
  /* Ecosistema: ambos perfiles siempre se comparan lado a lado. */
  .ecosystem-pair{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
    max-width:none!important;
    margin-inline:0!important;
  }
  .ecosystem-panel,
  .ecosystem-panel:first-child,
  .ecosystem-panel:last-child{
    min-height:390px!important;
    border-radius:20px!important;
  }
  .panel-content{padding:158px 16px 20px!important;}
  .panel-content .mini-label{font-size:8px!important;letter-spacing:.13em!important;}
  .panel-content h3{font-size:18px!important;line-height:1.16!important;margin:10px 0 12px!important;}
  .panel-content p{font-size:11px!important;line-height:1.45!important;}
  .panel-content ul{font-size:10px!important;line-height:1.4!important;gap:8px!important;margin-top:12px!important;}
  .onesta-medallion{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:60px!important;
    height:60px!important;
    margin:0!important;
  }

  /* Trazabilidad: dos cards legibles por fila; el quinto queda centrado. */
  .timeline{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:26px 16px!important;
    margin-top:30px!important;
  }
  .timeline:before{display:none!important;}
  .timeline-step,
  .timeline-step:nth-child(4),
  .timeline-step:nth-child(5){
    grid-column:auto!important;
    display:grid!important;
    grid-template-rows:auto auto auto minmax(118px,1fr)!important;
    justify-items:center!important;
    align-items:center!important;
    text-align:center!important;
  }
  .timeline-step:nth-child(5){
    grid-column:1 / -1!important;
    width:calc(50% - 8px)!important;
    justify-self:center!important;
  }
  .timeline-step p{
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    height:100%!important;
    min-height:118px!important;
    padding:14px 12px!important;
    font-size:11px!important;
    line-height:1.45!important;
    text-align:center!important;
  }
  .timeline-step h3{font-size:16px!important;}
}